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.
276 lines
6.9 KiB
276 lines
6.9 KiB
<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">请选择储值卡</text>
|
|
|
|
<view class="win-card">
|
|
<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" @change="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)" :style="{borderColor:item.mark===choosePath?'#009874':'#979797'}">
|
|
<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 server from '../js/server';
|
|
import api from '../js/api';
|
|
|
|
export default {
|
|
props: [
|
|
"show", "price", "storeId", "brandId"
|
|
],
|
|
data() {
|
|
return {
|
|
cardList: [], // 储值卡列表
|
|
choosePath: "/static/images/icon/retail/choose.png",
|
|
noChoosePath: "/static/images/icon/retail/noChoose.png",
|
|
curCardChoose: null,
|
|
searchCardValue: "",
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
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) {
|
|
this.cardList = [];
|
|
this.curCardChoose = null;
|
|
// util.showNone("请输入微信昵称/手机号码/储值卡号搜索");
|
|
return;
|
|
}
|
|
|
|
let _this = this;
|
|
this.cardList = [];
|
|
|
|
util.showLoad();
|
|
server.get({
|
|
url: api.assistantGetValueCardList,
|
|
data: {
|
|
brand_id: this.brandId,
|
|
stadium_id: this.storeId,
|
|
total_amount: this.price,
|
|
key: this.searchCardValue,
|
|
},
|
|
isDefaultGet: false,
|
|
failMsg: '搜索失败！'
|
|
}).then(res => {
|
|
util.hideLoad();
|
|
if (res.data.code == 0) {
|
|
let color = "#333";
|
|
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]] = "#009874";
|
|
}
|
|
|
|
if (_this.cardList.length) {
|
|
_this.cardList[0].mark = _this.choosePath;
|
|
this.curCardChoose = _this.cardList[0];
|
|
}
|
|
else {
|
|
util.showNone("查询不到该储值卡信息，请检查重新输入");
|
|
}
|
|
}
|
|
else {
|
|
util.showNone(res.data.message || '操作失败！');
|
|
}
|
|
});
|
|
},
|
|
// 重置数据
|
|
resetData() {
|
|
this.curCardChoose = null;
|
|
this.cardList = [];
|
|
this.searchCardValue = "";
|
|
},
|
|
// 关闭窗口
|
|
onClose() {
|
|
this.$emit("update:onClose", false);
|
|
},
|
|
// 支付确定
|
|
onConfirm() {
|
|
if (!this.curCardChoose) {
|
|
util.showNone("请搜索选择储值卡！");
|
|
return;
|
|
}
|
|
this.$emit("update:onConfirm", this.curCardChoose);
|
|
this.onClose();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
.content {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.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%;
|
|
@include centerFlex(flex-start);
|
|
flex-direction: column;
|
|
background-color: white;
|
|
padding-top: 46rpx;
|
|
|
|
> image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
position: absolute;
|
|
top: 32rpx;
|
|
right: 28rpx;
|
|
}
|
|
> text {
|
|
width: 100%;
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
margin-bottom: 54rpx;
|
|
}
|
|
.win-way-confirm {
|
|
width: 100%;
|
|
padding: 0 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: white;
|
|
background-color: $themeColor;
|
|
}
|
|
}
|
|
.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;
|
|
@include centerFlex(flex-start);
|
|
flex-direction: column;
|
|
padding: 0 20rpx;
|
|
|
|
.win-card-search {
|
|
width: 100%;
|
|
border-radius: 10rpx;
|
|
background-color: #f2f2f7;
|
|
margin-bottom: 30rpx;
|
|
@include centerFlex(flex-start);
|
|
|
|
> image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-shrink: 0;
|
|
margin-left: 20rpx;
|
|
}
|
|
> input {
|
|
font-size: 32rpx;
|
|
padding: 24rpx 20rpx;
|
|
flex-grow: 1;
|
|
}
|
|
.win-card-search-input-placeholder {
|
|
font-size: 32rpx;
|
|
color: #9c9c9f;
|
|
}
|
|
}
|
|
.win-card-list {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
overflow: scroll;
|
|
@include centerFlex(flex-start);
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
position: relative;
|
|
margin-bottom: 112rpx;
|
|
|
|
.win-card-list-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
border: 2rpx solid #979797;
|
|
border-color: #979797;
|
|
border-radius: 10rpx;
|
|
padding: 20rpx 0;
|
|
margin-bottom: 24rpx;
|
|
position: relative;
|
|
|
|
> view {
|
|
color: #9c9c9f;
|
|
font-size: 28rpx;
|
|
margin-bottom: 5rpx;
|
|
|
|
> text {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
> image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20rpx;
|
|
transform: translate(0%, -50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|