|
|
|
@ -0,0 +1,495 @@ |
|
|
|
<template> |
|
|
|
<view class="content" v-if="show"> |
|
|
|
<view class="win-mask"></view> |
|
|
|
|
|
|
|
<view class="win-operate"> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/retail/close.png" @click="onClose"></image> |
|
|
|
<text class="win-title">{{ curChoose.name == "储蓄卡支付" ? "请选择储蓄卡" : "请选择支付方式" }}</text> |
|
|
|
|
|
|
|
<view class="win-way" v-if="curChoose.name!='储蓄卡支付'?true:false"> |
|
|
|
<view class="win-way-item" v-for="(item, index) in payWayList" :key="index" @click="onPayWayClick(item, index)"> |
|
|
|
<image :class="[item.iconClassA, item.iconClassB]" mode="aspectFit" :src="item.icon"></image> |
|
|
|
<text>{{ item.name }}</text> |
|
|
|
<input v-if="item.inputShow" v-model="item.inputValue" :placeholder="item.placeholderLabel" placeholder-style="win-way-item-input-placeholder"> |
|
|
|
<image :class="[item.markClassA, item.markClassB]" mode="aspectFit" :src="item.mark"></image> |
|
|
|
<view></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="win-card" v-if="curChoose.name=='储蓄卡支付'?true:false"> |
|
|
|
<view class="win-card-search"> |
|
|
|
<image v-if="searchCardValue?false:true" mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
|
|
|
<input v-model="searchCardValue" @confirm="searchCardList" placeholder="请输入微信昵称/手机号码/储蓄卡号搜索" placeholder-style="win-card-search-input-placeholder"> |
|
|
|
</view> |
|
|
|
<view class="win-card-list"> |
|
|
|
<view class="win-card-list-item" v-for="(item, index) in cardList" :key="index" @click="onCardClick(item)"> |
|
|
|
<view>储蓄卡卡号：<text :style="{color:item.color.card_no}">{{ item.card_no }}</text></view> |
|
|
|
<view>微信昵称：<text :style="{color:item.color.nickname}">{{ item.nickname }}</text></view> |
|
|
|
<view>手机号码：<text :style="{color:item.color.mobile}">{{ item.mobile }}</text></view> |
|
|
|
<view>卡名称：<text :style="{color:item.color.card_name}">{{ item.card_name }}</text></view> |
|
|
|
<view>卡余额：<text :style="{color:item.color.balance}">￥{{ item.balance }}</text></view> |
|
|
|
<image mode="aspectFit" :src="item.mark"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="win-way-confirm"><button hover-class="hover-active" @click="onConfirm">确定</button></view> |
|
|
|
<view class="win-iphonex-block"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import util from '../../../../utils/util.js'; |
|
|
|
import tools from '../../js/tools.js'; |
|
|
|
import retailServer from '../../js/retail_server'; |
|
|
|
import retailApi from '../../js/retail_api'; |
|
|
|
|
|
|
|
export default { |
|
|
|
props: [ |
|
|
|
"show", "price", "storeId" |
|
|
|
], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
cardList: [], // 储蓄卡列表 |
|
|
|
payWayList: [], // 支付方式列表 |
|
|
|
choosePath: "/static/images/icon/retail/choose.png", |
|
|
|
noChoosePath: "/static/images/icon/retail/noChoose.png", |
|
|
|
curChoose: {}, |
|
|
|
curCardChoose: null, |
|
|
|
searchCardValue: "", |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.createPayWayList(); // 创建支付方式列表 |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 储蓄卡点击 |
|
|
|
onCardClick(item) { |
|
|
|
this.curCardChoose = item; |
|
|
|
|
|
|
|
for (let i = 0; i < this.cardList.length; ++i) { |
|
|
|
this.cardList[i].mark = this.noChoosePath; |
|
|
|
} |
|
|
|
|
|
|
|
this.curCardChoose.mark = this.choosePath; |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取储蓄卡列表 |
|
|
|
searchCardList() { |
|
|
|
if (!this.searchCardValue) { |
|
|
|
util.showNone("请输入微信昵称/手机号码/储蓄卡号搜索"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
let _this = this; |
|
|
|
this.cardList = []; |
|
|
|
|
|
|
|
util.showLoad(); |
|
|
|
retailServer.get({ |
|
|
|
url: retailApi.assistantGetValueCardList, |
|
|
|
data: { |
|
|
|
stadium_id: this.storeId, |
|
|
|
key: this.searchCardValue, |
|
|
|
total_amount: this.price |
|
|
|
}, |
|
|
|
isDefaultGet: false, |
|
|
|
failMsg: '搜索失败！' |
|
|
|
}).then(res => { |
|
|
|
if (res.data.code == 0) { |
|
|
|
let color = "rgba(51, 51, 51, 1)"; |
|
|
|
for (let i = 0; i < res.data.data.length; ++i) { |
|
|
|
_this.cardList.push(res.data.data[i]); |
|
|
|
_this.cardList[i].mark = this.noChoosePath; |
|
|
|
_this.cardList[i].color = { |
|
|
|
card_no: color, nickname: color, mobile: color, card_name: color, balance: color |
|
|
|
}; |
|
|
|
|
|
|
|
for (let j = 0; j < res.data.data[i].match_key_fields.length; ++j) { |
|
|
|
_this.cardList[i].color[res.data.data[i].match_key_fields[j]] = "rgba(0, 152, 118, 1)"; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (_this.cardList.length) { |
|
|
|
_this.cardList[0].mark = _this.choosePath; |
|
|
|
this.curCardChoose = _this.cardList[0]; |
|
|
|
} |
|
|
|
util.hideLoad(); |
|
|
|
} |
|
|
|
else { |
|
|
|
util.showNone(res.data.message || '操作失败！'); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 重置数据 |
|
|
|
resetData() { |
|
|
|
for (let i = 0; i < this.payWayList.length; ++i) { |
|
|
|
this.payWayList[i].inputValue = ""; |
|
|
|
|
|
|
|
if (this.payWayList[i].name != "储蓄卡支付") { |
|
|
|
this.payWayList[i].mark = this.noChoosePath; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.payWayList[0].mark = this.choosePath; |
|
|
|
this.curChoose = this.payWayList[0]; |
|
|
|
this.curCardChoose = null; |
|
|
|
this.searchCardValue = ""; |
|
|
|
}, |
|
|
|
|
|
|
|
// 关闭窗口 |
|
|
|
onClose() { |
|
|
|
this.resetData(); // 重置数据 |
|
|
|
this.$emit("update:onClose", false); |
|
|
|
}, |
|
|
|
|
|
|
|
// 支付确定 |
|
|
|
onConfirm() { |
|
|
|
let info = { |
|
|
|
type: 0, |
|
|
|
inputValue: "default", |
|
|
|
cardNo: "default" |
|
|
|
}; |
|
|
|
|
|
|
|
switch (this.curChoose.name) { |
|
|
|
case "微信支付": { |
|
|
|
info.type = 0; |
|
|
|
} break; |
|
|
|
case "支付宝支付": { |
|
|
|
info.type = 1; |
|
|
|
} break; |
|
|
|
case "现金支付": { |
|
|
|
info.type = 3; |
|
|
|
} break; |
|
|
|
case "其他": { |
|
|
|
if (!this.curChoose.inputValue) { |
|
|
|
util.showNone("请输入其他支付方式！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
info.type = 4; |
|
|
|
info.inputValue = this.curChoose.inputValue; |
|
|
|
} break; |
|
|
|
case "储蓄卡支付": { |
|
|
|
if (!this.curCardChoose) { |
|
|
|
util.showNone("请搜索选择储蓄卡！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
info.type = 2; |
|
|
|
info.cardNo = this.curCardChoose.card_no; |
|
|
|
} break; |
|
|
|
} |
|
|
|
|
|
|
|
this.onClose(); |
|
|
|
this.$emit("update:onConfirm", info); |
|
|
|
}, |
|
|
|
|
|
|
|
// 支付方式点击 |
|
|
|
onPayWayClick(item, index) { |
|
|
|
this.curChoose = item; |
|
|
|
|
|
|
|
if (item.name != "储蓄卡支付") { |
|
|
|
for (let i = 0; i < this.payWayList.length; ++i) { |
|
|
|
if (this.payWayList[i].name != "储蓄卡支付") { |
|
|
|
this.payWayList[i].mark = this.noChoosePath; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.payWayList[index].mark = this.choosePath; |
|
|
|
} |
|
|
|
else { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 创建支付方式列表 |
|
|
|
createPayWayList() { |
|
|
|
this.payWayList = [ |
|
|
|
{ |
|
|
|
type: 0, name: "微信支付", inputShow: false, inputValue: "", |
|
|
|
icon: "/static/images/icon/retail/wechat.png", |
|
|
|
iconClassA: "win-way-item-icon", iconClassB: "", |
|
|
|
placeholderLabel: "请输入其他支付方式", |
|
|
|
mark: this.choosePath, |
|
|
|
markClassA: "win-way-item-mark", markClassB: "", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 1, name: "支付宝支付", inputShow: false, inputValue: "", |
|
|
|
icon: "/static/images/icon/retail/alipay.png", |
|
|
|
iconClassA: "win-way-item-icon", iconClassB: "", |
|
|
|
placeholderLabel: "请输入其他支付方式", |
|
|
|
mark: this.noChoosePath, |
|
|
|
markClassA: "win-way-item-mark", markClassB: "", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 3, name: "现金支付", inputShow: false, inputValue: "", |
|
|
|
icon: "/static/images/icon/retail/cash.png", |
|
|
|
iconClassA: "win-way-item-icon", iconClassB: "win-way-item-icon-dif", |
|
|
|
placeholderLabel: "请输入其他支付方式", |
|
|
|
mark: this.noChoosePath, |
|
|
|
markClassA: "win-way-item-mark", markClassB: "", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 2, name: "储蓄卡支付", inputShow: false, inputValue: "", |
|
|
|
icon: "/static/images/icon/retail/card.png", |
|
|
|
iconClassA: "win-way-item-icon", iconClassB: "win-way-item-icon-dif", |
|
|
|
placeholderLabel: "请输入其他支付方式", |
|
|
|
mark: "/static/images/icon/retail/turn.png", |
|
|
|
markClassA: "win-way-item-mark", markClassB: "win-way-item-mark-dif", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 4, name: "其他", inputShow: true, inputValue: "", |
|
|
|
icon: "/static/images/icon/retail/other.png", |
|
|
|
iconClassA: "win-way-item-icon", iconClassB: "", |
|
|
|
placeholderLabel: "请输入其他支付方式", |
|
|
|
mark: this.noChoosePath, |
|
|
|
markClassA: "win-way-item-mark", markClassB: "", |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
this.curChoose = this.payWayList[0]; |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.content { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
position: absolute; |
|
|
|
top: 0%; |
|
|
|
left: 0; |
|
|
|
z-index: 1024; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.win-mask { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
|
} |
|
|
|
|
|
|
|
.win-operate { |
|
|
|
width: 100%; |
|
|
|
height: 964rpx; |
|
|
|
position: fixed; |
|
|
|
bottom: 0%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
background-color: white; |
|
|
|
padding-top: 46rpx; |
|
|
|
|
|
|
|
> image { |
|
|
|
width: 34rpx; |
|
|
|
height: 34rpx; |
|
|
|
position: absolute; |
|
|
|
top: 32rpx; |
|
|
|
right: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
> text { |
|
|
|
width: 100%; |
|
|
|
color: rgba(51, 51, 51, 1); |
|
|
|
font-size: 32rpx; |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 54rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.win-way { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.win-way-item { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
padding-left: 40rpx; |
|
|
|
padding-right: 36rpx; |
|
|
|
padding-top: 28rpx; |
|
|
|
padding-bottom: 28rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.win-way-item-icon { |
|
|
|
width: 54rpx; |
|
|
|
height: 54rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.win-way-item-mark { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.win-way-item-icon-dif { |
|
|
|
width: 52rpx; |
|
|
|
height: 52rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.win-way-item-mark-dif { |
|
|
|
width: 34rpx; |
|
|
|
height: 34rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
> text { |
|
|
|
color: rgba(24, 24, 24, 1); |
|
|
|
font-size: 28rpx; |
|
|
|
flex-grow: 1; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 16rpx; |
|
|
|
margin-right: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
> view { |
|
|
|
width: 90%; |
|
|
|
height: 1rpx; |
|
|
|
background-color: rgba(216, 216, 216, 1); |
|
|
|
position: absolute; |
|
|
|
bottom: 0%; |
|
|
|
right: 0%; |
|
|
|
} |
|
|
|
|
|
|
|
> input { |
|
|
|
margin-left: 24rpx; |
|
|
|
margin-right: 132rpx; |
|
|
|
width: 340rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
border: 2rpx solid rgba(216, 216, 216, 1); |
|
|
|
background-color: white; |
|
|
|
padding-left: 16rpx; |
|
|
|
padding-right: 16rpx; |
|
|
|
padding-top: 10rpx; |
|
|
|
padding-bottom: 10rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.win-way-item-input-placeholder { |
|
|
|
color: rgba(154, 154, 157, 1); |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.win-way-confirm { |
|
|
|
width: 100%; |
|
|
|
padding-left: 20rpx; |
|
|
|
padding-right: 20rpx; |
|
|
|
position: absolute; |
|
|
|
bottom: 0%; |
|
|
|
bottom: calc( 0% + constant(safe-area-inset-bottom)); |
|
|
|
bottom: calc( 0% + env(safe-area-inset-bottom)); |
|
|
|
|
|
|
|
> button { |
|
|
|
width: 100%; |
|
|
|
height: 112rpx; |
|
|
|
line-height: 112rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
padding: 0 0; |
|
|
|
color: rgb(255,255,255); |
|
|
|
background-color: rgb(0,152,116); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.win-iphonex-block { |
|
|
|
background-color: white; |
|
|
|
width: 100%; |
|
|
|
height: constant(safe-area-inset-bottom); |
|
|
|
height: env(safe-area-inset-bottom); |
|
|
|
poisition: absolute; |
|
|
|
bottom: 0%; |
|
|
|
} |
|
|
|
|
|
|
|
.win-card { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
padding-left: 20rpx; |
|
|
|
padding-right: 20rpx; |
|
|
|
|
|
|
|
.win-card-search { |
|
|
|
width: 100%; |
|
|
|
border-radius: 10rpx; |
|
|
|
background-color: rgba(242, 242, 247, 1); |
|
|
|
margin-bottom: 30rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
> image { |
|
|
|
width: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
> input { |
|
|
|
font-size: 32rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
padding-right: 20rpx; |
|
|
|
padding-top: 24rpx; |
|
|
|
padding-bottom: 24rpx; |
|
|
|
flex-grow: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.win-card-search-input-placeholder { |
|
|
|
font-size: 32rpx; |
|
|
|
color: rgba(156, 156, 159, 1); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.win-card-list { |
|
|
|
width: 100%; |
|
|
|
height: 100rpx; |
|
|
|
overflow: scroll; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
flex-grow: 1; |
|
|
|
margin-bottom: 112rpx; |
|
|
|
|
|
|
|
.win-card-list-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
width: 100%; |
|
|
|
border: 1rpx solid rgba(151, 151, 151, 1); |
|
|
|
border-radius: 10rpx; |
|
|
|
padding: 20rpx; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
position: relative; |
|
|
|
flex-shrink: 0; |
|
|
|
|
|
|
|
> view { |
|
|
|
color: rgba(156, 156, 159, 1); |
|
|
|
font-size: 28rpx; |
|
|
|
margin-bottom: 5rpx; |
|
|
|
|
|
|
|
> text { |
|
|
|
color: rgba(51, 51, 51, 1); |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> image { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
right: 20rpx; |
|
|
|
transform: translate(0%, -50%); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
