parent
f4de516383
commit
04f3b699a6
@ -1,246 +1,319 @@ |
||||
<template> |
||||
<view> |
||||
<view class="form re" style="top: 100rpx;"> |
||||
<view class="username paddtop10" v-if="UserCard"> |
||||
<picker mode="selector" style="width: 90%;" :range="UserCard" range-key="cardNo" |
||||
@change="bindUserCard"> |
||||
<view class="date text1">{{cardNoNumber}}</view> |
||||
</picker> |
||||
<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png"></image> |
||||
</view> |
||||
<view class="username" v-if="!UserCard"> |
||||
<input style="width: 100%;" :disabled="disStute" maxlength="19" placeholder="请输入工会卡号" v-model="cardNoNumber" |
||||
placeholder-style="color: #333333;"/> |
||||
</view> |
||||
<view class="username" v-if="phoneNumber"> |
||||
<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view> |
||||
<input disabled="true" v-model="phoneNumber" placeholder-style="color: #333333;" /> |
||||
</view> |
||||
<view class="code" v-if="phoneNumber"> |
||||
<input placeholder="请输入验证码" v-model="code" placeholder-style="color: #333333;" /> |
||||
</view> |
||||
<view class="btn mart50" @tap="bindHuiLianTongCard" v-if="phoneNumber">绑定卡号</view> |
||||
<view class="btn mart50" @tap="doCardNonum" v-else>获取预留手机号</view> |
||||
</view> |
||||
<view class="width90 mart20 height120 backcorfff fotct" style="position: absolute;top: 390px;"> |
||||
<view class="fontlet font20 fcor666 fontwig6 height45l " style="border-bottom: 1px solid #F4F4F4;">【温馨提示】</view> |
||||
<view class="fontlet font20 fcor666 fontwig6 height45l paddtop10">1元可抵扣100积分</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import md5 from "@/common/SDK/md5.min.js"; |
||||
import { |
||||
sendSmsCode, |
||||
getHuiLianTongCardByCardNo, |
||||
bindHuiLianTongCard, |
||||
getUserCardList, |
||||
getHuiLianTongCardByPhone |
||||
} from '../../../Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
cardNoNumber: "", |
||||
phoneNumber: "", |
||||
code: '', |
||||
getCodeText: '获取验证码', |
||||
getCodeBtnColor: "#0083f5", |
||||
getCodeisWaiting: false, |
||||
disStute: false, |
||||
UserCard:'' |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.user = app.globalData.userInfo; |
||||
this.getHuiLianTongCardByPhone(); |
||||
}, |
||||
|
||||
methods: { |
||||
Timer() {}, |
||||
//查询我的卡号列表 |
||||
getHuiLianTongCardByPhone() { |
||||
let params = { |
||||
phone : this.user.phone |
||||
} |
||||
uni.showLoading(); |
||||
getHuiLianTongCardByPhone(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000' && res.return_data !='') { |
||||
this.UserCard = res.return_data; |
||||
this.cardNoNumber = res.return_data[0].cardNo; |
||||
return; |
||||
} |
||||
this.UserCard = ''; |
||||
}); |
||||
}, |
||||
//选择卡号 |
||||
bindUserCard(e) { |
||||
this.cardNoNumber = this.UserCard[e.target.value].cardNo; |
||||
}, |
||||
getCode() { |
||||
uni.hideKeyboard() |
||||
if (this.getCodeisWaiting) { |
||||
return; |
||||
} |
||||
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { |
||||
uni.showToast({ |
||||
title: '请填写正确手机号码', |
||||
icon: "none" |
||||
}); |
||||
return false; |
||||
} |
||||
uni.showLoading({ |
||||
title: '发送中...' |
||||
}) |
||||
let params = { |
||||
phone: this.phoneNumber |
||||
} |
||||
sendSmsCode(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.getCodeisWaiting = true; |
||||
this.getCodeBtnColor = "#999999" |
||||
uni.showToast({ |
||||
title: '验证码已发送', |
||||
icon: "none" |
||||
}); |
||||
this.setTimer(); |
||||
} else { |
||||
uni.hideLoading() |
||||
} |
||||
}) |
||||
}, |
||||
setTimer() { |
||||
let holdTime = 60; |
||||
this.getCodeText = "重新获取(60)" |
||||
this.Timer = setInterval(() => { |
||||
if (holdTime <= 0) { |
||||
this.getCodeisWaiting = false; |
||||
this.getCodeBtnColor = "#333333"; |
||||
this.getCodeText = "获取验证码" |
||||
clearInterval(this.Timer); |
||||
return; |
||||
} |
||||
this.getCodeText = "重新获取(" + holdTime + ")" |
||||
holdTime--; |
||||
|
||||
}, 1000) |
||||
}, |
||||
//获取预留手机号 |
||||
doCardNonum() { |
||||
if (!this.cardNoNumber) { |
||||
uni.showToast({ |
||||
title: '请填写卡号', |
||||
icon: "none" |
||||
}); |
||||
return false; |
||||
} |
||||
if (this.cardNoNumber.length != 19) { |
||||
uni.showToast({ |
||||
title: '请填写正确的19位卡号', |
||||
icon: "none" |
||||
}); |
||||
return false; |
||||
} |
||||
uni.showLoading({ |
||||
title: '查询中...' |
||||
}) |
||||
let params = { |
||||
cardNo: this.cardNoNumber |
||||
} |
||||
getHuiLianTongCardByCardNo(params).then(res => { |
||||
uni.hideLoading() |
||||
if (res.return_code == '000000') { |
||||
this.phoneNumber = res.return_data.userMobile; |
||||
// this.phoneNumber = 15583658692; |
||||
this.disStute = true |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
//绑定卡号 |
||||
bindHuiLianTongCard() { |
||||
uni.hideKeyboard() |
||||
//模板示例部分验证规则 |
||||
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { |
||||
uni.showToast({ |
||||
title: '请填写正确手机号码', |
||||
icon: "none" |
||||
}); |
||||
return false; |
||||
} |
||||
if (!this.code) { |
||||
uni.showToast({ |
||||
title: '请填写验证码', |
||||
icon: "none" |
||||
}); |
||||
return false; |
||||
} |
||||
uni.showLoading({ |
||||
title: '提交中...' |
||||
}) |
||||
let params = { |
||||
cardNo: this.cardNoNumber, |
||||
phone: this.phoneNumber, |
||||
smsCode: this.code |
||||
} |
||||
bindHuiLianTongCard(params).then(res => { |
||||
uni.hideLoading() |
||||
if (res.return_code == '000000') { |
||||
app.globalData.userInfo = res.return_data |
||||
.object |
||||
.highUser; |
||||
app.globalData.token = res.return_data.uniqueCode; |
||||
uni.setStorage({ |
||||
key: "user", |
||||
data: res.return_data |
||||
.object |
||||
.highUser |
||||
}) |
||||
uni.showToast({ |
||||
title: '绑定成功', |
||||
icon: "success", |
||||
duration: 2000, |
||||
success() { |
||||
setTimeout(() => { |
||||
uni.navigateBack({ |
||||
delta: 2 |
||||
}) |
||||
}, 1000) |
||||
} |
||||
}); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../../static/css/login.scss"; |
||||
.wximg { |
||||
width: 50px; |
||||
height: 50px; |
||||
margin-left: 40%; |
||||
margin-top: 250upx; |
||||
} |
||||
.flex1 { |
||||
flex: 1; |
||||
text-align: right; |
||||
width: 70%; |
||||
padding-right: 25rpx; |
||||
color: #999999; |
||||
font-size: 32rpx; |
||||
} |
||||
<template> |
||||
<view> |
||||
<view class="form re" style="top: 100rpx;"> |
||||
|
||||
<view class="username paddtop10"> |
||||
<picker mode="selector" style="width: 90%;" :range="cardList" range-key="codeName" |
||||
@change="changeUserCard"> |
||||
<view class="date text1" style="padding: 0 25rpx;">{{typeName}}</view> |
||||
</picker> |
||||
<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png"></image> |
||||
</view> |
||||
|
||||
<!-- <view class="username paddtop10" v-if="UserCard && type == 2"> |
||||
<picker mode="selector" style="width: 90%;" :range="UserCard" range-key="cardNo" @change="bindUserCard"> |
||||
<view class="date text1">{{cardNoNumber}}</view> |
||||
</picker> |
||||
<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png"></image> |
||||
</view> --> |
||||
|
||||
|
||||
<view class="username"> |
||||
<input style="width: 100%;" :disabled="disStute" maxlength="19" placeholder="请输入卡号" |
||||
v-model="cardNoNumber" placeholder-style="color: #333333;" /> |
||||
</view> |
||||
<view class="username" v-if="phoneNumber"> |
||||
<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view> |
||||
<input disabled="true" v-model="phoneNumber" placeholder-style="color: #333333;" /> |
||||
</view> |
||||
<view class="code" v-if="phoneNumber"> |
||||
<input placeholder="请输入验证码" v-model="code" placeholder-style="color: #333333;" /> |
||||
</view> |
||||
<view class="btn mart50" @tap="bindHuiLianTongCard" v-if="phoneNumber">绑定卡号</view> |
||||
<view class="btn mart50" @tap="doCardNonum" v-else>获取预留手机号</view> |
||||
</view> |
||||
<view class="width90 mart20 height120 backcorfff fotct" style="position: absolute;top: 390px;" v-if="type == 1"> |
||||
<view class="fontlet font20 fcor666 fontwig6 height45l " style="border-bottom: 1px solid #F4F4F4;">【温馨提示】 |
||||
</view> |
||||
<view class="fontlet font20 fcor666 fontwig6 height45l paddtop10">1元可抵扣100积分</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import md5 from "@/common/SDK/md5.min.js"; |
||||
import { |
||||
sendSmsCode, |
||||
getHuiLianTongCardByCardNo, |
||||
getDetailByCardNo, |
||||
bindHuiLianTongCard, |
||||
getUserCardList, |
||||
getHuiLianTongCardByPhone, |
||||
getDictionaryByCodeType |
||||
} from '../../../Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
cardNoNumber: "", |
||||
phoneNumber: "", |
||||
code: '', |
||||
getCodeText: '获取验证码', |
||||
getCodeBtnColor: "#0083f5", |
||||
getCodeisWaiting: false, |
||||
disStute: false, |
||||
UserCard: '', |
||||
cardList: [], // 卡列表 |
||||
typeName: '', // 卡名称 |
||||
type: '' //区分类型 |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.user = app.globalData.userInfo; |
||||
// this.getHuiLianTongCardByPhone(); |
||||
this.getDictionaryByCodeType(); |
||||
}, |
||||
|
||||
methods: { |
||||
Timer() {}, |
||||
getDictionaryByCodeType() { |
||||
let datas = { |
||||
codeType: 'USER_CARD_TYPE' |
||||
} |
||||
getDictionaryByCodeType(datas).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.cardList = res.return_data; |
||||
this.type = res.return_data[0].codeValue; |
||||
this.typeName = res.return_data[0].codeName; |
||||
} |
||||
}) |
||||
}, |
||||
//查询我的卡号列表 |
||||
getHuiLianTongCardByPhone() { |
||||
let params = { |
||||
phone: this.user.phone |
||||
} |
||||
uni.showLoading(); |
||||
getHuiLianTongCardByPhone(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000' && res.return_data != '') { |
||||
this.UserCard = res.return_data; |
||||
this.cardNoNumber = res.return_data[0].cardNo; |
||||
return; |
||||
} |
||||
this.UserCard = ''; |
||||
}); |
||||
}, |
||||
//选择卡类型 |
||||
changeUserCard(e) { |
||||
this.type = this.cardList[e.target.value].codeValue; |
||||
this.typeName = this.cardList[e.target.value].codeName; |
||||
}, |
||||
//选择卡号 |
||||
bindUserCard(e) { |
||||
this.cardNoNumber = this.UserCard[e.target.value].cardNo; |
||||
}, |
||||
getCode() { |
||||
uni.hideKeyboard() |
||||
if (this.getCodeisWaiting) { |
||||
return; |
||||
} |
||||
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { |
||||
uni.showToast({ |
||||
title: '请填写正确手机号码', |
||||
icon: "none" |
||||
}); |
||||
return false; |
||||
} |
||||
uni.showLoading({ |
||||
title: '发送中...' |
||||
}) |
||||
let params = { |
||||
phone: this.phoneNumber |
||||
} |
||||
sendSmsCode(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.getCodeisWaiting = true; |
||||
this.getCodeBtnColor = "#999999" |
||||
uni.showToast({ |
||||
title: '验证码已发送', |
||||
icon: "none" |
||||
}); |
||||
this.setTimer(); |
||||
} else { |
||||
uni.hideLoading() |
||||
} |
||||
}) |
||||
}, |
||||
setTimer() { |
||||
let holdTime = 60; |
||||
this.getCodeText = "重新获取(60)" |
||||
this.Timer = setInterval(() => { |
||||
if (holdTime <= 0) { |
||||
this.getCodeisWaiting = false; |
||||
this.getCodeBtnColor = "#333333"; |
||||
this.getCodeText = "获取验证码" |
||||
clearInterval(this.Timer); |
||||
return; |
||||
} |
||||
this.getCodeText = "重新获取(" + holdTime + ")" |
||||
holdTime--; |
||||
|
||||
}, 1000) |
||||
}, |
||||
//获取预留手机号 |
||||
doCardNonum() { |
||||
if (!this.cardNoNumber) { |
||||
uni.showToast({ |
||||
title: '请填写卡号', |
||||
icon: "none" |
||||
}); |
||||
return; |
||||
} |
||||
if (this.cardNoNumber.length != 19 && this.type == 1) { |
||||
uni.showToast({ |
||||
title: '请填写正确的19位工会卡号', |
||||
icon: "none" |
||||
}); |
||||
return; |
||||
} |
||||
if (this.cardNoNumber.length != 16 && this.type == 2) { |
||||
uni.showToast({ |
||||
title: '请填写正确的16位油卡号', |
||||
icon: "none" |
||||
}); |
||||
return; |
||||
} |
||||
|
||||
let params = { |
||||
cardNo: this.cardNoNumber |
||||
} |
||||
if (this.type == 1) { |
||||
this.getHuiLianTongCardByCardNo(params); |
||||
} |
||||
if (this.type == 2) { |
||||
this.getDetailByCardNo(params); |
||||
} |
||||
|
||||
}, |
||||
//查询工会卡 |
||||
getHuiLianTongCardByCardNo(items) { |
||||
uni.showLoading({ |
||||
title: '查询中...' |
||||
}) |
||||
getHuiLianTongCardByCardNo(items).then(res => { |
||||
uni.hideLoading() |
||||
if (res.return_code == '000000') { |
||||
this.phoneNumber = res.return_data.userMobile; |
||||
// this.phoneNumber = 15583658692; |
||||
this.disStute = true |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
//查询油卡 |
||||
getDetailByCardNo(items) { |
||||
uni.showLoading({ |
||||
title: '查询中...' |
||||
}) |
||||
getDetailByCardNo(items).then(res => { |
||||
uni.hideLoading() |
||||
if (res.return_code == '000000') { |
||||
this.phoneNumber = res.return_data.contactPhone; |
||||
// this.phoneNumber = 15583658692; |
||||
this.disStute = true |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
//绑定卡号 |
||||
bindHuiLianTongCard() { |
||||
uni.hideKeyboard() |
||||
//模板示例部分验证规则 |
||||
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { |
||||
uni.showToast({ |
||||
title: '请填写正确手机号码', |
||||
icon: "none" |
||||
}); |
||||
return false; |
||||
} |
||||
if (!this.code) { |
||||
uni.showToast({ |
||||
title: '请填写验证码', |
||||
icon: "none" |
||||
}); |
||||
return false; |
||||
} |
||||
uni.showLoading({ |
||||
title: '提交中...' |
||||
}) |
||||
let params = { |
||||
type: this.type, |
||||
cardNo: this.cardNoNumber, |
||||
phone: this.phoneNumber, |
||||
smsCode: this.code |
||||
} |
||||
bindHuiLianTongCard(params).then(res => { |
||||
uni.hideLoading() |
||||
if (res.return_code == '000000') { |
||||
app.globalData.userInfo = res.return_data |
||||
.object |
||||
.highUser; |
||||
app.globalData.token = res.return_data.uniqueCode; |
||||
uni.setStorage({ |
||||
key: "user", |
||||
data: res.return_data |
||||
.object |
||||
.highUser |
||||
}) |
||||
uni.showToast({ |
||||
title: '绑定成功', |
||||
icon: "success", |
||||
duration: 2000, |
||||
success() { |
||||
setTimeout(() => { |
||||
uni.navigateBack({ |
||||
}) |
||||
}, 1000) |
||||
} |
||||
}); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../../static/css/login.scss"; |
||||
|
||||
.wximg { |
||||
width: 50px; |
||||
height: 50px; |
||||
margin-left: 40%; |
||||
margin-top: 250upx; |
||||
} |
||||
|
||||
.flex1 { |
||||
flex: 1; |
||||
text-align: right; |
||||
width: 70%; |
||||
padding-right: 25rpx; |
||||
color: #999999; |
||||
font-size: 32rpx; |
||||
} |
||||
</style> |
||||
|
||||
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,407 @@ |
||||
<template> |
||||
<view> |
||||
<view class="backcorf06 height220 width100 fotct"> |
||||
<image src="../static/unioncard.png" v-if="types == 1" mode="widthFix" style="width: 120rpx;"></image> |
||||
<image src="../static/oilcard.png" v-if="types == 2" mode="widthFix" style="width: 120rpx;"></image> |
||||
<view class="mart10 font18 fontwig6 fcorfff" v-if="types == 1">工会卡</view> |
||||
<view class="mart10 font18 fontwig6 fcorfff" v-if="types == 2">油卡 |
||||
<text class="fcor41c font14 margle" v-if="cardList.status == 1">(正常)</text> |
||||
<text class="fcorred font14 margle" v-if="cardList.status == 2">(禁用)</text> |
||||
</view> |
||||
<view class="mart5 font18 fontwig6 fcorfff fontspec">余额: {{tongCardPrice}}</view> |
||||
<view class="mart5 font18 fontwig6 fcorfff fontspec">{{cardNo}}</view> |
||||
<view class="width40w height30 font16 fontlet fcorfff mart10 fotct border-r" |
||||
style="background-color: #b2b2b2;" @click="delUserCard()">解绑</view> |
||||
</view> |
||||
<!-- <view class="width90 mart20 fcor666 font12"> |
||||
支付限额 |
||||
</view> |
||||
<view class="width90 mart20 fcor666 font14 height25"> |
||||
<view class="width50 font14 fcor333 flleft">单笔限额</view> |
||||
<view class="width50 font14 fcor666 flright fotrt">¥20000</view> |
||||
</view> |
||||
<view class="width90 mart20 fcor666 font14 mart5 height25"> |
||||
<view class="width50 font14 fcor333 flleft">每日限额</view> |
||||
<view class="width50 font14 fcor666 flright fotrt">¥50000</view> |
||||
</view> --> |
||||
|
||||
<view class="leave_cont"> |
||||
<view class="ul"> |
||||
<view class="li" v-if="types == 1"> |
||||
<text class="font15 fcor333">业务类型</text> |
||||
<view class="flex1"> |
||||
<picker mode="selector" :range="title_list" range-key="name" @change="bindtitleList"> |
||||
<view class="date text1 margle10">{{titleName}}</view> |
||||
</picker> |
||||
</view> |
||||
</view> |
||||
<view class="li"> |
||||
<text class="font15 fcor333">开始时间</text> |
||||
<view class="flex1"> |
||||
<picker mode="date" :value="start_date" :start="startDate" :end="endDate" |
||||
@change="bindDateChange"> |
||||
<view class="date">{{start_date}}</view> |
||||
</picker> |
||||
</view> |
||||
</view> |
||||
<view class="li"> |
||||
<text class="font15 fcor333">结束时间</text> |
||||
<view class="flex1"> |
||||
<picker mode="date" :value="end_date" :start="startDate" :end="endDate" |
||||
@change="bindDateChange2"> |
||||
<view class="date">{{end_date}}</view> |
||||
</picker> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="width90 mart30 fcor666 font12"> |
||||
订单列表 |
||||
</view> |
||||
<view class="width90 mart20 alijusstart fcor666 font12"> |
||||
<view class="width40">订单号</view> |
||||
<view class="width10 fotct">类型</view> |
||||
<view class="width20 fotct">金额</view> |
||||
<view class="width30">时间</view> |
||||
</view> |
||||
<view class="width100" v-if="types == 1"> |
||||
<view class="width90 mart5 alijusstart fcor666 font12" v-for="(item,index) in orderList" :key="index" |
||||
@click="popupOrderNo(item.orderNo)"> |
||||
<view class="width40 fcor333 text1">{{item.orderNo}}</view> |
||||
<view class="width10 fotct">支出</view> |
||||
<view class="width20 fotct">¥{{item.tranAmount}}</view> |
||||
<view class="width30">{{item.tranTime}}</view> |
||||
<!-- {{phoneorderdes.createTimed | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.createTimed | timeFormat('hh:mm')}} --> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="width100" v-if="types == 2"> |
||||
<view class="width90 mart5 alijusstart fcor666 font12" v-for="(item,index) in orderList" :key="index" |
||||
@click="popupOrderNo(item.sourceOrderNo)"> |
||||
<view class="width40 fcor333 text1">{{item.sourceOrderNo}}</view> |
||||
<view class="width10 fotct fcor41c" v-if="item.type == 1">收入</view> |
||||
<view class="width10 fotct fcoreb5" v-if="item.type == 2">支出</view> |
||||
<view class="width20 fotct fcor41c" v-if="item.type == 1">+{{item.amount}}</view> |
||||
<view class="width20 fotct fcoreb5" v-if="item.type == 2">-{{item.amount}}</view> |
||||
<view class="width30"> |
||||
<view class="width100">{{item.createTime | timeFormat('yyyy-mm-dd')}}</view> |
||||
<view class="width100">{{item.createTime | timeFormat('hh:mm')}}</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
delUserCard, |
||||
getDetailByCardNo, |
||||
getHuiLianTongCardBalance, |
||||
getOilCardRecordList, |
||||
getHuiLianTongCardConsume |
||||
} from '../../Utils/Api.js'; |
||||
export default { |
||||
data() { |
||||
const currentDate = this.getDate({ |
||||
format: true |
||||
}) |
||||
return { |
||||
types: '', //卡类型 |
||||
orderList: [], //消费列表 |
||||
cardNo: '', //卡号 |
||||
tongCardPrice: 0, //账户余额 |
||||
start_date: currentDate, //开始时间 |
||||
end_date: currentDate, //结束时间 |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
titleValue: 'sinopec_oil_code', //工会卡 |
||||
titleName: '中石化加油券', |
||||
title_list: [{ |
||||
name: '中石化加油券', |
||||
value: 'sinopec_oil_code' |
||||
}, |
||||
{ |
||||
name: '其他商品或服务', |
||||
value: 'hisen_consume' |
||||
} |
||||
], |
||||
isNoMoreData: false, |
||||
cardList: '' |
||||
} |
||||
}, |
||||
|
||||
onLoad(options) { |
||||
let that = this; |
||||
that.cardNo = options.cardNo; |
||||
that.types = options.des; |
||||
if (options.des == 1) { |
||||
that.getHuiLianTongCardBalance(); |
||||
that.getHuiLianTongCardConsume(); |
||||
} |
||||
if (options.des == 2) { |
||||
that.getDetailByCardNo(); |
||||
that.getOilCardRecordList(); |
||||
} |
||||
}, |
||||
//上滑刷新 |
||||
onReachBottom() { |
||||
if (this.types == 1) { |
||||
this.getHuiLianTongCardConsume(); |
||||
} |
||||
if (this.types == 2) { |
||||
this.getOilCardRecordList(); |
||||
} |
||||
}, |
||||
computed: { |
||||
startDate() { |
||||
return this.getDate('start'); |
||||
}, |
||||
endDate() { |
||||
return this.getDate('end'); |
||||
} |
||||
}, |
||||
methods: { |
||||
// 获取当前时间 |
||||
getDate(type) { |
||||
const date = new Date(); |
||||
let year = date.getFullYear(); |
||||
let month = date.getMonth() + 1; |
||||
let day = date.getDate(); |
||||
|
||||
if (type === 'start') { |
||||
year = year - 60; |
||||
} else if (type === 'end') { |
||||
year = year + 2; |
||||
} |
||||
month = month > 9 ? month : '0' + month; |
||||
day = day > 9 ? day : '0' + day; |
||||
return `${year}-${month}-${day}`; |
||||
}, |
||||
//弹出二维码 |
||||
popupOrderNo(item) { |
||||
uni.showToast({ |
||||
title: item, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
}, |
||||
// 选择日期 |
||||
bindDateChange: function(e) { |
||||
this.start_date = e.target.value; |
||||
this.pageNum = 1; |
||||
this.isNoMoreData = false; |
||||
this.orderList = []; |
||||
if (this.types == 1) { |
||||
this.getHuiLianTongCardConsume(); |
||||
} |
||||
if (this.types == 2) { |
||||
this.getOilCardRecordList(); |
||||
} |
||||
}, |
||||
bindDateChange2: function(e) { |
||||
this.end_date = e.target.value; |
||||
this.pageNum = 1; |
||||
this.isNoMoreData = false; |
||||
this.orderList = []; |
||||
if (this.types == 1) { |
||||
this.getHuiLianTongCardConsume(); |
||||
} |
||||
if (this.types == 2) { |
||||
this.getOilCardRecordList(); |
||||
} |
||||
}, |
||||
//选择类型 |
||||
bindtitleList(e) { |
||||
this.titleName = this.title_list[e.target.value].name; |
||||
this.titleValue = this.title_list[e.target.value].value; |
||||
this.pageNum = 1; |
||||
this.isNoMoreData = false; |
||||
this.orderList = []; |
||||
this.getHuiLianTongCardConsume(); |
||||
}, |
||||
//解除绑定我的卡号列表 |
||||
delUserCard() { |
||||
let that = this; |
||||
uni.showModal({ |
||||
content: '是否确定解除当前绑定卡号?', |
||||
success: (res) => { |
||||
if (res.confirm) { |
||||
let params = { |
||||
cardNo: that.cardNo |
||||
} |
||||
delUserCard(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '解除成功', |
||||
duration: 2000, |
||||
icon: 'success', |
||||
success() { |
||||
setTimeout(() => { |
||||
uni.navigateBack({}) |
||||
}, 1000) |
||||
} |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}); |
||||
} else if (res.cancel) { |
||||
console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
//查询油卡 |
||||
getDetailByCardNo() { |
||||
uni.showLoading({ |
||||
title: '查询中...' |
||||
}) |
||||
let params = { |
||||
cardNo: this.cardNo |
||||
} |
||||
getDetailByCardNo(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.tongCardPrice = res.return_data.amount; |
||||
this.cardList = res.return_data; |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
//查询详情 |
||||
getHuiLianTongCardBalance() { |
||||
uni.showLoading({ |
||||
title: '查询中...' |
||||
}) |
||||
let params = { |
||||
cardNo: this.cardNo |
||||
} |
||||
getHuiLianTongCardBalance(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.tongCardPrice = res.return_data.balance; |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
//查询油卡列表 |
||||
getOilCardRecordList() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if (this.isNoMoreData) { |
||||
uni.hideLoading() |
||||
return; |
||||
} |
||||
let pagenum = this.pageNum; |
||||
let Time1 = new Date(this.start_date.split('-').join('/')); |
||||
let timestemp1 = Time1.getTime(); |
||||
let Time2 = new Date(this.end_date.split('-').join('/')); |
||||
let timestemp2 = Time2.getTime() + 86399000; |
||||
let params = { |
||||
pageNum: pagenum, |
||||
createTimeS: timestemp1, |
||||
createTimeE: timestemp2, |
||||
cardNo: this.cardNo, |
||||
pageSize: this.pageSize |
||||
} |
||||
getOilCardRecordList(params).then(res => { |
||||
if (res.return_code == '000000' && res.return_data.list != '') { |
||||
uni.hideLoading(); |
||||
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
||||
this.orderList = this.orderList.concat(res.return_data.list); |
||||
if (res.return_data.total == (this.pageNum * this.pageSize)) { |
||||
this.isNoMoreData = true; |
||||
} |
||||
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; |
||||
} else { |
||||
this.orderList = []; |
||||
uni.hideLoading() |
||||
} |
||||
}) |
||||
}, |
||||
//查询消费记录 |
||||
getHuiLianTongCardConsume() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if (this.isNoMoreData) { |
||||
return false; |
||||
} |
||||
let pagenum = this.pageNum; |
||||
let Time1 = new Date(this.start_date.split('-').join('/')); |
||||
let timestemp1 = Time1.getTime(); |
||||
let Time2 = new Date(this.end_date.split('-').join('/')); |
||||
let timestemp2 = Time2.getTime() + 86399000; |
||||
let params = { |
||||
businessType: this.titleValue, |
||||
sdate: timestemp1, |
||||
edate: timestemp2, |
||||
cardNo: this.cardNo, |
||||
pageNum: pagenum, |
||||
pageSize: this.pageSize |
||||
} |
||||
getHuiLianTongCardConsume(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000' && res.return_data.records != '') { |
||||
this.isNoMoreData = res.return_data.records.length == this.pageSize ? false : true; |
||||
this.orderList = this.orderList.concat(res.return_data.records); |
||||
this.pageNum = res.return_data.records.length == this.pageSize ? ++pagenum : pagenum; |
||||
} else { |
||||
this.orderList = []; |
||||
uni.hideLoading(); |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
this.isNoMoreData = true; |
||||
} |
||||
}); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.leave_cont { |
||||
background: #FFFFFF; |
||||
} |
||||
|
||||
.leave_cont .ul { |
||||
width: 90%; |
||||
margin-left: 5%; |
||||
} |
||||
|
||||
.leave_cont .ul .li { |
||||
display: flex; |
||||
align-items: center; |
||||
border-bottom: 1px solid #efefef; |
||||
} |
||||
|
||||
.leave_cont .ul .li text { |
||||
padding: 40rpx 0; |
||||
} |
||||
|
||||
.leave_cont .ul .li .flex1 { |
||||
flex: 1; |
||||
text-align: right; |
||||
width: 70%; |
||||
padding-right: 25rpx; |
||||
color: #999999; |
||||
font-size: 32rpx; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,109 @@ |
||||
<template> |
||||
<view> |
||||
<view class="width100 mart20" v-for="(item,index) in cardList" :key="index"> |
||||
<view class="width90 conts backcolorb9" v-if="item.type == 1"> |
||||
<view class="width90 alijusstart"> |
||||
<image src="../static/unioncard.png" mode="widthFix" style="width: 80rpx;"></image> |
||||
<text class="font18 fontwig6 fcorfff">工会卡</text> |
||||
</view> |
||||
<view class="width90 font18 fontwig6 fcorfff"> |
||||
卡号:<text class="margle">{{item.cardNo}}</text> |
||||
</view> |
||||
<!-- <view class="width90 font18 fontwig6 fcorfff"> |
||||
余额:<text class="margle">122</text> |
||||
</view> --> |
||||
<view class="width90 mart10 alijusstart font14"> |
||||
<view class="width30 height30 backcorfff colorb9 fotct border-r" |
||||
@click="jumpDetails(item.cardNo,item.type)">查看详情</view> |
||||
<view class="width30 height30 backcorfff colorb9 fotct border-r margle20" |
||||
@click="unionCardPay(item.cardNo)"> |
||||
充值余额</view> |
||||
</view> |
||||
</view> |
||||
<view class="width90 conts backcolor32" v-if="item.type == 2"> |
||||
<view class="width90 alijusstart"> |
||||
<image src="../static/oilcard.png" mode="widthFix" style="width: 80rpx;"></image> |
||||
<text class="font18 fontwig6 fcorfff">油卡</text> |
||||
</view> |
||||
<view class="width90 font18 fontwig6 fcorfff"> |
||||
卡号:<text class="margle">{{item.cardNo}}</text> |
||||
</view> |
||||
<!-- <view class="width90 font18 fontwig6 fcorfff"> |
||||
余额:<text class="margle">122</text> |
||||
</view> --> |
||||
<view class="width90 mart10 alijusstart font14"> |
||||
<view class="width30 height30 backcorfff color32 fotct border-r" |
||||
@click="jumpDetails(item.cardNo,item.type)">查看详情</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="width90 height70w border-r mart20 alijusstart backcorfff" @click="jumpBindCard()"> |
||||
<image src="../static/addcards.png" mode="widthFix" class="margle10" style="width: 40rpx;"></image> |
||||
<text class="margle font16 fcor333">添加新卡</text> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getUserCardList |
||||
} from '../../Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
cardList: [] //绑定卡列表 |
||||
} |
||||
}, |
||||
onLoad() { |
||||
this.user = app.globalData.userInfo; |
||||
}, |
||||
onShow() { |
||||
this.getUserCardList(); |
||||
}, |
||||
methods: { |
||||
//查询卡列表 |
||||
getUserCardList() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
getUserCardList().then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.cardList = res.return_data; |
||||
return; |
||||
} |
||||
}); |
||||
}, |
||||
//跳转充值 |
||||
unionCardPay(item) { |
||||
uni.navigateTo({ |
||||
url: '../trade-union-recharge/trade-union-recharge?cardId=' + item + '&RechargeType=1' |
||||
}) |
||||
}, |
||||
//跳转详情 |
||||
jumpDetails(item, item1) { |
||||
uni.navigateTo({ |
||||
url: '../cardsDetails/cardsDetails?cardNo=' + item + '&des=' + item1 |
||||
}) |
||||
}, |
||||
//跳转绑定卡 |
||||
jumpBindCard() { |
||||
uni.navigateTo({ |
||||
url: '../../pages/user/bindingCard/bindingCard' |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #f8f8f8; |
||||
} |
||||
|
||||
.conts { |
||||
border-radius: 12rpx; |
||||
padding: 12px 0; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 36 KiB |
Loading…
Reference in new issue