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.
586 lines
17 KiB
586 lines
17 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-preview" v-if="userInfo.vip==0" @click="navToCard">
|
|
<image class="card" src="../../static/images/xa_card.jpg" mode="aspectFill"></image>
|
|
<view class="btn-buy">购买惠民卡</view>
|
|
</view> -->
|
|
|
|
<view class="card-preview" v-if="userInfo.vip==0" >
|
|
<image class="card" src="https://www.xnhmk.com/assets/img/banner/banner.jpg" mode="widthFix"></image>
|
|
<!-- <view class="btn-buy">购买惠民卡</view> -->
|
|
</view>
|
|
|
|
<view class="card-preview" v-else-if="userInfo.vip==1">
|
|
<image class="card" src="https://www.xnhmk.com/assets/img/banner/banner.jpg" mode="widthFix"></image>
|
|
<view class="btn-buy">审核中</view>
|
|
</view>
|
|
|
|
<view class="card-wrap" @click="navToCode" v-else-if="userInfo.vip==2">
|
|
<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="card-preview" v-else-if="userInfo.vip==9" @click="goPay()">
|
|
<image class="card" src="https://www.xnhmk.com/assets/img/banner/banner.jpg" mode="widthFix"></image>
|
|
<view class="btn-buy">去付款</view>
|
|
</view>
|
|
|
|
<view class="card-preview" v-else @click="goLogin">
|
|
<image class="card" src="https://www.xnhmk.com/assets/img/banner/banner.jpg" mode="widthFix"></image>
|
|
<view class="btn-buy">点击登录</view>
|
|
</view>
|
|
|
|
<!-- <view class="cell-group">
|
|
<view class="cell-item" hover-class="cell-hover" v-if="userInfo.need_pay == 1" @click="navTo('rePay')">
|
|
<view class="cell-bd">
|
|
<view class="content">
|
|
<view class="tit" style="padding-left: 20rpx;">购卡成功</view>
|
|
<view class="tip repay">去支付</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('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 class="cell-group" v-if="userInfo.id">
|
|
<view class="cell-item" hover-class="cell-hover" @click="logout">
|
|
<view class="cell-bd">
|
|
<view class="content logout">
|
|
<view class="tit">退出登录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cell-group" v-if="userInfo.id">
|
|
<view class="cell-item" hover-class="cell-hover" @click="clearData">
|
|
<view class="cell-bd">
|
|
<view class="content logout">
|
|
<view class="tit">清理缓存</view>
|
|
</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">
|
|
<view class="content">
|
|
<view class="form">
|
|
<input class="pwd-input" v-model="password" password="true" maxlength="6" auto-focus="true" type="number" placeholder="请输入6位支付密码" placeholder-class="input-holder" />
|
|
</view>
|
|
<view class="tips">
|
|
<view @click="navToSet"><text>忘记密码?</text></view>
|
|
<view @click="navToSet">首次使用请先<text> 设置支付密码</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pop-btn">
|
|
<view @click="closePop" class="pop-text-l text-red">取消</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;
|
|
}
|
|
|
|
/// ---------------
|
|
this.updateUserInfo();
|
|
/// ----------------
|
|
|
|
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;//显示输入密码弹窗
|
|
}
|
|
|
|
}
|
|
},
|
|
closePop(){
|
|
this.showPop = 0;
|
|
},
|
|
navToMerchant(){
|
|
uni.navigateTo({
|
|
url:'../merchant/index'
|
|
})
|
|
},
|
|
navToCard(){
|
|
uni.switchTab({
|
|
url:'../card/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('支付密码错误！');
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
goPay(){
|
|
uni.navigateTo({
|
|
url: '../card/countinue'
|
|
})
|
|
},
|
|
|
|
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);
|
|
|
|
if(res.userInfo.need_pay == 1){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '您已获得惠民卡名额，并通过资料审核，请完成支付后使用惠民卡！',
|
|
cancelText: '联系客服',
|
|
confirmText:'去付款',
|
|
success(res) {
|
|
if(res.confirm){
|
|
that.navTo('rePay');
|
|
}else{
|
|
uni.makePhoneCall({
|
|
phoneNumber:that.servicePhone
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
}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
|
|
})
|
|
},
|
|
rePay(){
|
|
uni.navigateTo({
|
|
url: './rePay'
|
|
})
|
|
},
|
|
// 退出登录
|
|
logout(){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '您确定要退出登录么?',
|
|
success:function(res){
|
|
if(res.confirm){
|
|
uni.removeStorageSync('userInfo');
|
|
uni.switchTab({
|
|
url: '../index'
|
|
})
|
|
}else if(res.cancel){
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
clearData(){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定清理缓存吗?',
|
|
success:function(res){
|
|
if(res.confirm){
|
|
uni.clearStorage()
|
|
uni.removeStorageSync('userInfo');
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'清理完成',
|
|
})
|
|
uni.switchTab({
|
|
url: '../index'
|
|
})
|
|
}else if(res.cancel){
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
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();
|
|
// }
|
|
var that = this;
|
|
uni.showLoading();
|
|
setTimeout(function() {
|
|
that.updateUserInfo();
|
|
uni.hideLoading();
|
|
uni.stopPullDownRefresh();
|
|
}, 1000);
|
|
|
|
},
|
|
}
|
|
</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: 112rpx; height: 112rpx; border-radius: 56rpx;
|
|
//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); }
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-preview{ position: relative; margin: 0rpx 35rpx 0rpx;
|
|
image{ width: 100%; border-radius: 12rpx;box-shadow: 0rpx 0rpx 5rpx rgba(0,0,0,.05); }
|
|
.btn-buy{ position: absolute; right: 40rpx; bottom: 40rpx;font-size: 32rpx;line-height: 64rpx;color: #FFFFFF;background: #12a861;border-radius: 32rpx;
|
|
padding: 2rpx 40rpx 2rpx; font-weight: bold;
|
|
background-image: linear-gradient( to bottom, #2fc777, #0c9a57); box-shadow: 0rpx 0rpx 30rpx 30rpx rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
|
|
.cell-group{ background: #FFFFFF; margin: 30rpx 35rpx 30rpx; border-radius: 12rpx; box-shadow: 0rpx 0rpx 5rpx rgba(0,0,0,.05);
|
|
.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; }
|
|
.repay{ color: #d94948; }
|
|
}
|
|
.logout{ text-align: center;
|
|
.tit{ flex: 1; color: #d94948;font-size: 30rpx; }
|
|
}
|
|
.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>
|
|
|