You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
427 lines
13 KiB
427 lines
13 KiB
<template>
|
|
<view>
|
|
<view class="head">
|
|
<view class="user-info">
|
|
<view class="avatar">
|
|
<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl"></image>
|
|
<image v-else src="../../static/avatar.png"></image>
|
|
</view>
|
|
<view class="account">
|
|
<view v-if="userInfo.nickname">
|
|
<view class="username">{{userInfo.nickname?userInfo.nickname:'微信用户'}}</view>
|
|
<view class="mobile">
|
|
<view class="iconfont icon-mobile"></view>
|
|
<view class="num">{{userInfo.mobile}}</view>
|
|
</view>
|
|
</view>
|
|
<view v-else @click="goLogin">
|
|
<view>微信用户</view>
|
|
<view class="mobile">
|
|
<view class="iconfont icon-mobile"></view>
|
|
<view class="num">点击登录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-wrap" @click="navToCode">
|
|
<view class="card" style="background-image: url(../../../../static/card_bg.png);background-size: 100%;">
|
|
<view class="card-info">
|
|
<view class="basic">
|
|
<view class="name">
|
|
<view class="tag">雄安文化惠民卡</view>
|
|
</view>
|
|
<view class="card-num" v-if="userInfo.vip==1">待审核</view>
|
|
<view class="card-num" v-else-if="userInfo.vip==0">未购卡</view>
|
|
<view class="card-num" v-else-if="userInfo.vip==2">{{card.cardnumber}}</view>
|
|
</view>
|
|
<view class="other" v-if="userInfo.vip==2">
|
|
<view class="item expiry">
|
|
<view class="tit">有效期</view>
|
|
<view class="text">{{userInfo.expirationtext}}</view>
|
|
</view>
|
|
<view class="item amount">
|
|
<view class="tit">余额</view>
|
|
<view class="text">{{userInfo.balance}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 购买成功才显示付款码 -->
|
|
<view class="pay-code" v-if="userInfo.vip==2">
|
|
<view class="iconfont icon-QR-code"></view>
|
|
<view class="text">付款码</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cell-group">
|
|
<view class="cell-item" hover-class="cell-hover" @click="navTo('payRecord')">
|
|
<view class="cell-hd iconfont icon-dingdan"></view>
|
|
<view class="cell-bd">
|
|
<view class="content">
|
|
<view class="tit">消费记录</view>
|
|
<view class="tip"></view>
|
|
</view>
|
|
<view class="cell-ft iconfont icon-you"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cell-group">
|
|
<view class="cell-item" hover-class="cell-hover" @click="navTo('setting')">
|
|
<view class="cell-hd iconfont icon-shezhi"></view>
|
|
<view class="cell-bd">
|
|
<view class="content">
|
|
<view class="tit">账户管理</view>
|
|
<view class="tip"></view>
|
|
</view>
|
|
<view class="cell-ft iconfont icon-you"></view>
|
|
</view>
|
|
</view>
|
|
<view class="cell-item" hover-class="cell-hover" @click="makephone">
|
|
<view class="cell-hd iconfont icon-kefu"></view>
|
|
<view class="cell-bd">
|
|
<view class="content">
|
|
<view class="tit">联系客服</view>
|
|
</view>
|
|
<view class="cell-ft iconfont icon-you"></view>
|
|
</view>
|
|
</view>
|
|
<view class="cell-item" hover-class="cell-hover" @click="navToMerchant">
|
|
<view class="cell-hd iconfont icon-jingying"></view>
|
|
<view class="cell-bd">
|
|
<view class="content">
|
|
<view class="tit">商户核销</view>
|
|
<view class="tip"></view>
|
|
</view>
|
|
<view class="cell-ft iconfont icon-you"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="showPop == 1" class="pop-mask"></view>
|
|
<view v-if="showPop == 1" class="pop-up">
|
|
<view class="pop-tit">请输入支付密码</view>
|
|
<view class="pop-con">
|
|
<scroll-view scroll-y="true" class="scroll-con">
|
|
<view class="content">
|
|
<view class="uni-form-item uni-column">
|
|
<input class="uni-input" v-model="password" password="true" maxlength="6" auto-focus="true" type="number" placeholder="请输入6位支付密码" />
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="pop-btn">
|
|
<view @click="navToSet" class="pop-text-l">设置密码</view>
|
|
<view @click="submit" class="pop-text-r text-green">确认密码</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { toLogin } from '../../util/common.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: [],
|
|
card: [],
|
|
servicePhone:'',//客服电话
|
|
showPop:0,//是否显示弹窗
|
|
password:''
|
|
}
|
|
},
|
|
onShow() {
|
|
this.showPop = 0;
|
|
var userInfo = uni.getStorageSync('userInfo');
|
|
this.userInfo = userInfo;
|
|
this.servicePhone = uni.getStorageSync('servicePhone');//客服电话
|
|
var card = uni.getStorageSync('card');
|
|
if(card.cardnumber){
|
|
card.cardnumber = this.formatCard(card.cardnumber);
|
|
this.card = card;
|
|
}
|
|
|
|
if(userInfo){
|
|
var onshowTime = uni.getStorageSync('onshowTime');//获取上次onshow刷新的时间
|
|
var nowtime = Date.parse(new Date());//当前时间戳(单位ms)
|
|
if(onshowTime){// 限制15分钟可请求一次
|
|
if(onshowTime + 60*15*1000 > nowtime){
|
|
console.log('距上次刷新不足15分钟')
|
|
}else{// 已超过15分钟可请求刷新
|
|
uni.setStorageSync('onshowTime',nowtime);// 更新onshow刷新时间
|
|
this.updateUserInfo();
|
|
}
|
|
}else{
|
|
uni.setStorageSync('onshowTime',nowtime);// 保存本次onshow刷新时间
|
|
this.updateUserInfo();
|
|
}
|
|
if(userInfo.balance > 0){//如果余额大于0
|
|
// 判断卡的到期时间，如果到期更新数据
|
|
if(nowtime >= userInfo['expirationtime']*1000){
|
|
console.log('卡到期')
|
|
this.userInfo.balance = this.getFloat2(0);
|
|
var userInfo = this.userInfo;
|
|
uni.setStorageSync('userInfo',userInfo);
|
|
this.card.balance = this.getFloat2(0);
|
|
var card = this.card;
|
|
uni.setStorageSync('card',card);
|
|
this.updateBalance();//更新数据库
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
navTo(url){
|
|
if(!this.userInfo.id){
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'您未登录，请先登录！',
|
|
cancelText:'暂不登录',
|
|
confirmText:'立即登录',
|
|
confirmColor:'#34b16f',
|
|
cancelColor:'#999999',
|
|
success: (res) => {
|
|
if(res.confirm){
|
|
uni.navigateTo({
|
|
url:'login'
|
|
})
|
|
}else{
|
|
console.log('暂不登录')
|
|
}
|
|
}
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:url
|
|
})
|
|
}
|
|
},
|
|
navToCode(){
|
|
if(this.userInfo.vip == 2){
|
|
if(this.userInfo.balance == 0.00){//判断卡余额
|
|
uni.showModal({
|
|
title:'温馨提示',
|
|
showCancel:false,
|
|
content:'您的惠民卡余额￥0.00，无法继续使用！'
|
|
})
|
|
}else{
|
|
this.showPop = 1;//显示输入密码弹窗
|
|
}
|
|
|
|
}
|
|
},
|
|
navToMerchant(){
|
|
uni.navigateTo({
|
|
url:'../merchant/index'
|
|
})
|
|
},
|
|
makephone(){
|
|
var servicePhone = this.servicePhone;
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'客服电话为' + servicePhone,
|
|
confirmText:'拨打电话',
|
|
success(res) {
|
|
if(res.confirm){
|
|
uni.makePhoneCall({
|
|
phoneNumber: servicePhone
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
},
|
|
goLogin(){
|
|
uni.navigateTo({
|
|
url:'login'
|
|
})
|
|
},
|
|
submit: function(){
|
|
var that = this;
|
|
if(that.password==''){
|
|
that.showNotify('请输入密码');
|
|
return false;
|
|
}
|
|
let data = {
|
|
uid: that.userInfo.id,
|
|
password: that.password
|
|
}
|
|
that.$u.post('wxapp/user/checkPayPassword', data).then(res => {
|
|
if (res.code == 1) {// 隐藏弹框,跳转支付页面
|
|
that.showPop = 0;
|
|
that.password = '';
|
|
uni.navigateTo({
|
|
url:'mycard'
|
|
})
|
|
}else{
|
|
that.showNotify('支付密码错误！');
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
navToSet(){
|
|
this.showPop = 0;
|
|
uni.navigateTo({
|
|
url:'setpassword'
|
|
})
|
|
},
|
|
//更新用户信息
|
|
updateUserInfo(){
|
|
var that = this;
|
|
let data = {
|
|
uid: that.userInfo.id
|
|
}
|
|
that.$u.post('wxapp/user/getUserInfo', data).then(res => {
|
|
if (res.code == 1) {
|
|
that.userInfo = res.userInfo;
|
|
uni.setStorageSync('userInfo',res.userInfo);
|
|
}else{
|
|
console.log('刷新失败')
|
|
}
|
|
|
|
});
|
|
},
|
|
|
|
//更新账户余额
|
|
updateBalance(){
|
|
var that = this;
|
|
let data = {
|
|
uid: that.userInfo.id
|
|
}
|
|
that.$u.post('wxapp/card/updateBalance', data).then(res => {
|
|
if (res.code == 1) {
|
|
console.log('更新成功')
|
|
}else{
|
|
console.log('更新失败')
|
|
}
|
|
|
|
});
|
|
},
|
|
|
|
// 卡号四位一个空格
|
|
formatCard(card){
|
|
var data = card.replace(/(\s)/g,'').replace(/(\d{4})/g,'$1 ').replace(/\s*$/,'');
|
|
return data;
|
|
},
|
|
// 传入字符串，返回保留两位小数的数字
|
|
getFloat2: function(x){
|
|
if (x != '.'){
|
|
var f = Math.round(x * 100) / 100;
|
|
var s = f.toString();
|
|
var rs = s.indexOf('.');
|
|
if (rs <= 0) {
|
|
rs = s.length;
|
|
s += '.';
|
|
}
|
|
while (s.length <= rs + 2) {
|
|
s += '0';
|
|
}
|
|
return s;
|
|
}else{
|
|
return '0.00';
|
|
}
|
|
},
|
|
showNotify(msg){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: msg,
|
|
showCancel: false
|
|
})
|
|
},
|
|
},
|
|
|
|
onPullDownRefresh() {
|
|
var pulldownTime = uni.getStorageSync('pulldownTime');//获取上次下拉刷新的时间
|
|
var nowtime = Date.parse(new Date());//当前时间戳(单位ms)
|
|
if(pulldownTime){// 限制15分钟可请求一次
|
|
if(pulldownTime + 60*15*1000 > nowtime){
|
|
console.log('距上次刷新不足15分钟')
|
|
}else{// 已超过15分钟可请求刷新
|
|
uni.setStorageSync('pulldownTime',nowtime);// 更新下拉刷新时间
|
|
this.updateUserInfo();
|
|
}
|
|
}else{
|
|
uni.setStorageSync('pulldownTime',nowtime);// 保存本次下拉刷新时间
|
|
this.updateUserInfo();
|
|
}
|
|
uni.stopPullDownRefresh();
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{ background: #F3F4F8; }
|
|
.head{ height: 160rpx;
|
|
.user-info{ display: flex; justify-content: space-between; padding: 20rpx 40rpx 0rpx;
|
|
.avatar{ width: 112rpx; height: 112rpx;
|
|
image{ width: 100rpx; height: 100rpx; border-radius: 50rpx; border:5rpx solid rgba(255,255,255,.5) }
|
|
}
|
|
.account{ flex: 1; padding-left: 30rpx;
|
|
.username{ font-size: 38rpx; line-height: 52rpx; color: #333333; padding-left: 4rpx; font-weight: 500; }
|
|
.mobile{ display: flex; padding-top: 8rpx;
|
|
.iconfont{ font-size: 30rpx; height: 42rpx; line-height: 42rpx; widht: 40rpx; color: #34b16f; }
|
|
.num{ font-size: 30rpx; line-height: 42rpx; text-align: left; color: #999999; font-weight: 400;padding-left: 8rpx; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-wrap{ position: relative;
|
|
.card{ position: relative; height: 300rpx; margin: 0rpx 35rpx 0rpx; background: #12a861; border-radius: 18rpx; display: flex; justify-content: space-between;
|
|
|
|
.card-info{ padding: 40rpx 0rpx 30rpx 40rpx; display: flex; flex-direction: column; justify-content: space-between;
|
|
.basic{
|
|
.name{ display: flex; padding-bottom: 12rpx;
|
|
.tag{ font-size: 26rpx;color: #FFFFFF;background: rgba(0,0,0,.3); border-radius: 21rpx; height: 42rpx; line-height: 42rpx; padding: 0rpx 20rpx 0rpx;
|
|
width: auto; }
|
|
}
|
|
.card-num{ font-size: 38rpx;line-height: 54rpx;text-shadow: 0rpx 0rpx 2rpx rgba(0,0,0,.8); color:#FFFFFF; }
|
|
}
|
|
.other{ display: flex;
|
|
.item{ font-size: 24rpx; line-height: 38rpx; color: #ceffe1;
|
|
.tit{}
|
|
.text{ font-size: 28rpx; color: #FFFFFF; }
|
|
}
|
|
.expiry{ padding-right: 50rpx; }
|
|
}
|
|
}
|
|
.pay-code{ padding: 40rpx 50rpx 0rpx 0rpx;
|
|
.iconfont{ font-size: 72rpx; width:80rpx; height:80rpx; text-align:center; line-height: 80rpx; color: #FFFFFF; font-weight: 100; }
|
|
.text{ font-size: 28rpx; color: rgba(255,255,255,.6); }
|
|
}
|
|
}
|
|
}
|
|
|
|
.cell-group{ background: #FFFFFF; margin: 30rpx 35rpx 30rpx; border-radius: 12rpx;
|
|
.cell-item{ display: flex; padding-left: 18upx; align-items: center;
|
|
.cell-hd{ width: 54upx; height: 64upx; font-size: 42upx; color:#34b16f; line-height: 64upx; text-align: center;
|
|
padding-right: 18upx; }
|
|
.icon-shenfenzheng{ color: #53ac75; }
|
|
.cell-bd{ flex: 1; border-bottom: 1upx solid #EFEFEF; display: flex; padding: 16upx 0upx 16upx 0upx;
|
|
.content{ flex: 1; display: flex; justify-content: space-between; line-height: 64upx;
|
|
.tit{ font-size: 30upx; color: #000000; }
|
|
.tip{ font-size: 28upx; color: #999999; }
|
|
.action{ color: #4287ec; }
|
|
.warning{ color: #d94948; }
|
|
}
|
|
.cell-ft{ width: 42upx; height: 64upx; font-size: 28upx; color:#DEDEDE; line-height: 64upx;
|
|
text-align: center; padding: 0upx 8upx 0upx 8upx; font-weight: 100; }
|
|
}
|
|
}
|
|
.cell-item:last-child{
|
|
.cell-bd{ border-bottom: none; }
|
|
}
|
|
.cell-hover{ background: #F5F5F5; }
|
|
}
|
|
.pop-up{
|
|
.uni-form-item{ background-color: #f8f8f8;}
|
|
}
|
|
|
|
</style>
|
|
|