4 changed files with 228 additions and 262 deletions
-
417src/subpackage/common/components/card_search.vue
-
1src/subpackage/common/js/api.js
-
72src/subpackage/common/pages/pay_type_select.vue
-
BINsrc/subpackage/common/static/images/x_close.png
@ -1,276 +1,215 @@ |
|||||
<template> |
<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 class="card-search-modal" v-show="isShow"> |
||||
|
<view class="csm-container"> |
||||
|
<view class="cc-tit">请选择储值卡</view> |
||||
|
<image |
||||
|
class="cc-close" |
||||
|
mode="aspectFit" |
||||
|
src="/subpackage/common/static/images/x_close.png" |
||||
|
@click="hide" |
||||
|
></image> |
||||
|
<view class="cc-search"> |
||||
|
<input |
||||
|
type="text" |
||||
|
class="cs-input" |
||||
|
placeholder="请输入微信昵称/手机号码/储值卡号搜索" |
||||
|
confirm-type="search" |
||||
|
v-model="searchKey" |
||||
|
@confirm="getCanUseValueCardList" |
||||
|
/> |
||||
|
</view> |
||||
|
<scroll-view class="cc-list" scroll-y> |
||||
|
<view class="cl-item" v-for="(e, i) in cardLs" :key="i" @click="selectedCard = e"> |
||||
|
<view class="ci-content"> |
||||
|
<view class="cc-line"><text class="cc-txt">储值卡卡号：</text>NO.{{ e.card_no || '-' }}</view> |
||||
|
<view class="cc-line green"><text class="cc-txt">微信昵称：</text>{{ e.nickname || '-' }}</view> |
||||
|
<view class="cc-line"><text class="cc-txt">手机号码：</text>{{ e.mobile || '-' }}</view> |
||||
|
<view class="cc-line"><text class="cc-txt">卡名称：</text>{{ e.card_name || '-' }}</view> |
||||
|
<view class="cc-line"><text class="cc-txt">卡余额：</text>￥{{ e.amount || '0' }}</view> |
||||
|
</view> |
||||
|
<view class="ci-icon" :class="[selectedCard.card_no==e.card_no?'active':'']"> |
||||
|
<image class="ci-img" mode="aspectFit" src="/subpackage/common/static/images/choose.png"></image> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
|
||||
|
|
||||
<view class="win-way-confirm"><button hover-class="hover-active" @click="onConfirm">确定</button></view> |
|
||||
<view class="win-iphonex-block"></view> |
|
||||
|
</scroll-view> |
||||
|
<view class="cc-btn" hover-class="hover-active" @click="confirmBtn">确定</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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: "", |
|
||||
} |
|
||||
|
import util from '../../../utils/util.js'; |
||||
|
import server from '../js/server.js'; |
||||
|
import API from '../js/api.js'; |
||||
|
export default { |
||||
|
props: { |
||||
|
sid: { |
||||
|
type: String, |
||||
|
default: '' |
||||
}, |
}, |
||||
created() { |
|
||||
|
|
||||
|
amount: { |
||||
|
type: String, |
||||
|
default: '' |
||||
}, |
}, |
||||
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(); |
|
||||
} |
|
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
isShow: false, |
||||
|
searchKey: '', |
||||
|
cardLs: [], |
||||
|
selectedCard: {}, |
||||
} |
} |
||||
} |
|
||||
|
}, |
||||
|
methods: { |
||||
|
// 关闭 |
||||
|
hide(){ |
||||
|
this.isShow = false; |
||||
|
this.$emit('hide'); |
||||
|
}, |
||||
|
show(){ |
||||
|
this.isShow = true; |
||||
|
this.$emit('show'); |
||||
|
}, |
||||
|
confirmBtn(){ |
||||
|
let { selectedCard } = this; |
||||
|
if(!selectedCard?.card_no)return util.showNone('请选择储值卡'); |
||||
|
this.hide(); |
||||
|
this.$emit('confirm', selectedCard); |
||||
|
}, |
||||
|
getCanUseValueCardList(){ |
||||
|
let { sid, amount, searchKey } = this; |
||||
|
this.cardLs = []; |
||||
|
this.selectedCard = {}; |
||||
|
util.showLoad(); |
||||
|
server.get({ |
||||
|
url: API.canUseValueCardList, |
||||
|
data: { |
||||
|
stadium_id: sid, |
||||
|
amount: amount, |
||||
|
key: searchKey, |
||||
|
}, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
util.hideLoad(); |
||||
|
if(res.data.code == 0){ |
||||
|
let _ls = res?.data?.data?.list || []; |
||||
|
if(!_ls.length)return util.showNone('暂无可用储值卡'); |
||||
|
this.cardLs = _ls; |
||||
|
}else{ |
||||
|
util.showNone(res.data.message || '获取储值卡列表失败'); |
||||
|
} |
||||
|
console.log(res); |
||||
|
}) |
||||
|
.catch(util.hideLoad); |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
@import '~style/public.scss'; |
|
||||
.content { |
|
||||
width: 100vw; |
|
||||
height: 100vh; |
|
||||
overflow: hidden; |
|
||||
|
@import "~style/public.scss"; |
||||
|
.card-search-modal{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(0,0,0,0.5); |
||||
position: fixed; |
position: fixed; |
||||
top: 0; |
top: 0; |
||||
left: 0; |
left: 0; |
||||
|
z-index: 999; |
||||
} |
} |
||||
.win-mask { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
|
.csm-container{ |
||||
position: absolute; |
position: absolute; |
||||
background-color: rgba(0, 0, 0, 0.5); |
|
||||
} |
|
||||
.win-operate { |
|
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
padding: 46upx 24upx 0upx; |
||||
|
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
width: 100%; |
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; |
|
||||
|
background-color: #fff; |
||||
|
.cc-tit{ |
||||
|
line-height: 44upx; |
||||
text-align: center; |
text-align: center; |
||||
margin-bottom: 54rpx; |
|
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
} |
} |
||||
.win-way-confirm { |
|
||||
width: 100%; |
|
||||
padding: 0 20rpx; |
|
||||
|
.cc-close{ |
||||
position: absolute; |
position: absolute; |
||||
bottom: 0%; |
|
||||
bottom: calc( 0% + constant(safe-area-inset-bottom)); |
|
||||
bottom: calc( 0% + env(safe-area-inset-bottom)); |
|
||||
|
|
||||
> button { |
|
||||
|
right: 30upx; |
||||
|
top: 30upx; |
||||
|
width: 34upx; |
||||
|
height: 34upx; |
||||
|
} |
||||
|
.cc-search{ |
||||
|
margin-top: 54upx; |
||||
|
padding: 0 20upx; |
||||
|
height: 92upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #F2F2F7; |
||||
|
.cs-input{ |
||||
width: 100%; |
width: 100%; |
||||
height: 112rpx; |
|
||||
line-height: 112rpx; |
|
||||
border-radius: 10rpx; |
|
||||
padding: 0 0; |
|
||||
color: white; |
|
||||
background-color: $themeColor; |
|
||||
|
height: 100%; |
||||
|
font-size: 32upx; |
||||
|
color: #333; |
||||
} |
} |
||||
} |
} |
||||
.win-iphonex-block { |
|
||||
background-color: white; |
|
||||
|
.cc-list{ |
||||
|
height: 548upx; |
||||
width: 100%; |
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; |
|
||||
|
margin-top: 30upx; |
||||
|
.cl-item{ |
||||
|
padding: 20upx; |
||||
|
border: 2upx solid #979797; |
||||
|
border-radius: 10upx; |
||||
|
@include centerFlex(space-between); |
||||
|
&:not(:first-child){ |
||||
|
margin-top: 24upx; |
||||
} |
} |
||||
> input { |
|
||||
font-size: 32rpx; |
|
||||
padding: 24rpx 20rpx; |
|
||||
|
.ci-content{ |
||||
flex-grow: 1; |
flex-grow: 1; |
||||
} |
|
||||
.win-card-search-input-placeholder { |
|
||||
font-size: 32rpx; |
|
||||
color: #9c9c9f; |
|
||||
|
.cc-line{ |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
@include textHide(1); |
||||
|
.cc-txt{ |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
&.green{ |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
.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; |
|
||||
|
.ci-icon{ |
||||
|
flex-grow: 0; |
||||
|
margin-left: 10upx; |
||||
|
width: 36upx; |
||||
|
height: 36upx; |
||||
|
overflow: hidden; |
||||
|
border-radius: 50%; |
||||
|
border: 2upx solid #979797; |
||||
|
&.active{ |
||||
|
border-color: transparent; |
||||
|
.ci-img{ |
||||
|
visibility: visible; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
> image { |
|
||||
width: 36rpx; |
|
||||
height: 36rpx; |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
right: 20rpx; |
|
||||
transform: translate(0%, -50%); |
|
||||
|
.ci-img{ |
||||
|
visibility: hidden; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
.cc-btn{ |
||||
|
margin-top: 14upx; |
||||
|
line-height: 112upx; |
||||
|
text-align: center; |
||||
|
font-size: 32upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: $themeColor; |
||||
|
color: #fff; |
||||
|
} |
||||
} |
} |
||||
</style> |
|
||||
|
</style> |
||||
|
After Width: 34 | Height: 34 | Size: 233 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue