27 changed files with 1225 additions and 71 deletions
-
79package-lock.json
-
4src/components/organize_order/organize_order.vue
-
61src/pages/order_list/order_list.vue
-
BINsrc/static/images/icon/retail/alipay.png
-
BINsrc/static/images/icon/retail/card.png
-
BINsrc/static/images/icon/retail/cash.png
-
BINsrc/static/images/icon/retail/choose.png
-
BINsrc/static/images/icon/retail/close.png
-
BINsrc/static/images/icon/retail/noChoose.png
-
BINsrc/static/images/icon/retail/other.png
-
BINsrc/static/images/icon/retail/turn.png
-
BINsrc/static/images/icon/retail/wechat.png
-
549src/subpackage/device/components/order/organize_detail/organize_detail.vue
-
4src/subpackage/device/js/device_api.js
-
23src/subpackage/device/pages/order_details/order_details.vue
-
498src/subpackage/retail/components/retail_pay_way/retail_pay_way.vue
-
3src/subpackage/retail/js/retail_api.js
-
72src/subpackage/retail/pages/confirm_goods/confirm_goods.vue
-
BINsrc/subpackage/retail/static/images/add.png
-
BINsrc/subpackage/retail/static/images/back.png
-
BINsrc/subpackage/retail/static/images/cart.png
-
BINsrc/subpackage/retail/static/images/dropDown.png
-
BINsrc/subpackage/retail/static/images/historySearchDelete.png
-
BINsrc/subpackage/retail/static/images/home.png
-
BINsrc/subpackage/retail/static/images/search.png
-
BINsrc/subpackage/retail/static/images/searchClear.png
-
3src/utils/util.js
|
After Width: 54 | Height: 54 | Size: 627 B |
|
After Width: 52 | Height: 52 | Size: 764 B |
|
After Width: 52 | Height: 52 | Size: 1.3 KiB |
|
After Width: 36 | Height: 36 | Size: 392 B |
|
After Width: 34 | Height: 34 | Size: 233 B |
|
After Width: 36 | Height: 36 | Size: 511 B |
|
After Width: 54 | Height: 54 | Size: 1.3 KiB |
|
After Width: 34 | Height: 34 | Size: 244 B |
|
After Width: 54 | Height: 54 | Size: 659 B |
@ -0,0 +1,549 @@ |
|||
<template> |
|||
<view class="timing-details"> |
|||
<view class="td-head"> |
|||
<view class="th-store"> |
|||
<image :src="orderInfo.original_order.extension.stadium_logo || '' "></image> |
|||
<view>{{orderInfo.original_order.extension.stadium_name || '-'}}</view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>订单编号：<text>{{orderInfo.order_no || '-'}}</text></view> |
|||
<view><text :class="[orderInfo.original_order.pay_status == 0?'tl-active':'']">{{yw_order_status(orderInfo.original_order.pay_status)}}</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>创建时间：<text>{{orderInfo.original_order.created_at || '-'}}</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>用户昵称：<text>{{orderInfo.user_nickname || '-'}}</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>约玩类型：<text>{{yw_order_type(orderInfo.type)}}</text></view> |
|||
</view> |
|||
</view> |
|||
<!-- 用户信息 --> |
|||
<view class="td-box" > |
|||
<view class="tb-title">用户信息</view> |
|||
<view class="tb-line"> |
|||
<view>姓名：<text>{{(orderInfo.actual_name|| '-')}}</text></view> |
|||
<view>身份证：<text>{{orderInfo.id_card || '-'}}</text></view> |
|||
</view> |
|||
</view> |
|||
<!-- 约玩信息 --> |
|||
<view class="td-box" > |
|||
<view class="tb-title">约玩信息</view> |
|||
<view class="tb-line"> |
|||
<view>约玩主题：<text>{{(orderInfo.theme)}}</text></view> |
|||
<view class="yw-place-box"> |
|||
<view class="yw-title">预定场地：</view> |
|||
<view class="yw-place"> |
|||
<view v-for="y_item in orderInfo.original_order.sessions"> |
|||
{{y_item.venue_name}} {{y_item.duration}} ( ￥{{y_item.price}} ) |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view>报名费用：<text>{{orderInfo.original_order.sessions[0].price || '-'}}</text></view> --> |
|||
<!-- <view>订场费用：<text>{{orderInfo.original_order.sessions[0].price || '-'}}</text></view> --> |
|||
</view> |
|||
</view> |
|||
<!-- 报名信息 --> |
|||
<view class="td-box" v-if="orderInfo.original_order.pay_status==2&&orderInfo.type=='Main'"> |
|||
<view class="tb-title">报名信息</view> |
|||
<view class="tb-line"> |
|||
<view class="user-images"> |
|||
<view class="u-item" :key="index" v-for="(item,index) in orderInfo.sub_order_data" v-if="(openImages||(!openImages&&index<5))"> |
|||
<image :src="item.user_avatar_url" mode=""></image> |
|||
<text>{{item.user_nickname}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="show-ui-all" @click="toggleImages()"> |
|||
<image class="" :class="openImages?'reverse':''" src="../../../../../static/images/icon/retail/dropDown.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bm-info-box"> |
|||
<view class="has_line">报名总金额: <text>{{orderInfo.sign_up_total_amount}}元</text></view> |
|||
<view class="">已发放: <text>{{orderInfo.amount_already_amount}}元</text></view> |
|||
<view class="">未发放: <text>{{orderInfo.un_amount_already_amount}}元</text></view> |
|||
</view> |
|||
|
|||
<view class="ff_btn" v-if="orderInfo.status=='End'"> |
|||
<view class="" @click="clickSendAmount">发放金额</view> |
|||
</view> |
|||
</view> |
|||
<!-- 金额小计 --> |
|||
<view class="td-box"> |
|||
<view class="tb-section " v-if="orderInfo.original_order.pay_status!= 0"> |
|||
<view class="ts-line"> |
|||
<view>金额小计</view> |
|||
<view>¥{{orderInfo.original_order.amount || 0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>积分抵扣</view> |
|||
<view>-¥{{orderInfo.original_order.deduction_amount ||0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>折扣金额</view> |
|||
<view>-¥{{orderInfo.original_order.discount_amount||0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>-¥{{orderInfo.original_order.coupons_amount || 0}}</view> |
|||
</view> |
|||
<view class="ts-total"> |
|||
<view>合计支付：<text>￥</text><text>{{orderInfo.original_order.pay_amount ||0}}</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 支付信息 --> |
|||
<view class="td-box" v-if="orderInfo.original_order.pay_status == 1||orderInfo.original_order.pay_status == 2"> |
|||
<view class="tb-title">支付信息</view> |
|||
<view class="tb-line"> |
|||
<view>支付方式：<text>{{zh_pay_type(orderInfo.original_order.pay_type)}}</text></view> |
|||
<view>支付时间：<text>{{orderInfo.original_order.pay_time || '-'}}</text></view> |
|||
<view>微信交易号：<text>{{orderInfo.original_order.trade_no || ''}}</text></view> |
|||
</view> |
|||
</view> |
|||
<!-- 退款信息 --> |
|||
<view class="td-box" v-if="orderInfo.original_order.pay_status == 4"> |
|||
<view class="tb-title">退款信息</view> |
|||
<view class="tb-line"> |
|||
<view>退款时间：<text>{{orderInfo.original_order.refund_time|| '-'}}</text></view> |
|||
<view>退款编号：<text>{{orderInfo.original_order.refund_no || '-'}}</text></view> |
|||
<view>退款金额：<text>{{orderInfo.original_order.refund_amount || ''}}</text></view> |
|||
<view>退款说明：<text>{{orderInfo.original_order.refund_reason || ''}}</text></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="td-btn" @click="isShowEnd = !isShowEnd" v-if="orderInfo.original_order.pay_status == 0">结束计费</view> --> |
|||
|
|||
<!-- 弹框 结束计费 --> |
|||
<view class="ox-dark-mask" v-if="isShowEnd" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="odm-end-modal"> |
|||
<view class="oem-close"> |
|||
<image src="/static/images/icon/x_close.png" @click="isShowEnd = false"></image> |
|||
</view> |
|||
<view class="oem-tit">结束计费</view> |
|||
<view class="oem-line">操作人：{{orderInfo.end_bill_operator_name || '-'}}</view> |
|||
<view class="oem-line">时长合计：<text class="ol-txt1">{{orderInfo.extension.duration || '-'}}</text></view> |
|||
<view class="oem-line">金额合计：<text class="ol-txt2">¥{{orderInfo.amount || '-'}}</text></view> |
|||
<view class="oem-tips">*<text>请输入金额</text></view> |
|||
<view class="oem-ipt"><input type="digit" v-model="input_amount"/></view> |
|||
<view class="oem-btn" hover-class="hover-active" @click="confirmChange" >确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import deviceServer from '../../../js/device_server'; |
|||
import deviceApi from '../../../js/device_api'; |
|||
|
|||
import { servers } from '@/js/server'; |
|||
import { API } from '@/js/api'; |
|||
|
|||
import { mapState } from 'vuex'; |
|||
export default { |
|||
props: { |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['brandInfo']), |
|||
yw_order_status(){ |
|||
return status =>{ |
|||
const _obj = {/* */ |
|||
'1': '已付款', |
|||
'2': '已完成', |
|||
'4': '已退款', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_pay_type(){ |
|||
// 支付类型 0微信支付1支付宝支付2储值卡支付 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '微信支付', |
|||
'1': '支付宝支付', |
|||
'2': '储值卡支付', |
|||
'3': '商家主动结束计费', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
yw_order_type(){ |
|||
// 约玩类型 type Main/Sub 发起、参与 |
|||
return status =>{ |
|||
const _obj = { |
|||
'Main': '发起的约玩', |
|||
'Sub': '参与的约玩', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
isShowEnd: false, |
|||
input_amount: "", |
|||
userImagesArr:[], |
|||
openImages:false, |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
confirmChange(){ |
|||
let { brandInfo, orderInfo, input_amount } = this |
|||
if(input_amount == '')return util.showNone('请输入金额！'); |
|||
util.showLoad(); |
|||
this.orderInfo.order_no = "JS20210506171239462527"; //订单号临时修改 |
|||
deviceServer.get({ |
|||
url: deviceApi.timeOrderEnd, |
|||
data: { |
|||
brand_id: brandInfo.brand.id, |
|||
order_no: orderInfo.order_no, |
|||
pay_amount: parseFloat(input_amount), |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad() |
|||
util.showNone('操作成功！'); |
|||
this.isShowEnd = false |
|||
setTimeout(()=>uni.navigateBack(),1200); |
|||
}) |
|||
}, |
|||
|
|||
toggleImages(){ |
|||
this.openImages=!this.openImages |
|||
}, |
|||
clickSendAmount(){ |
|||
let that = this |
|||
console.log(999,this.orderInfo) |
|||
uni.showModal({ |
|||
title: '发放金额', |
|||
content: `确定要将未发放金额${that.orderInfo.un_amount_already_amount}全部转给约玩发起人?`, |
|||
confirmColor:"#469576", |
|||
success: function (res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
servers.get({ |
|||
url: API.amountIssued, |
|||
data: { |
|||
order_no: that.orderInfo.order_no, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
console.log(888,res); |
|||
util.showNone("发放成功") |
|||
setTimeout(()=>uni.navigateBack(),1200); |
|||
}).catch(e=>{ |
|||
util.showNone("发放失败") |
|||
}) |
|||
|
|||
} else if (res.cancel) { |
|||
console.log('用户点击取消'); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.timing-details{ |
|||
margin-bottom: 24rpx; |
|||
.td-head{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx 10rpx 0px 0px; |
|||
.th-store{ |
|||
padding-bottom: 26rpx; |
|||
margin-bottom: 18rpx; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background-color: skyblue; |
|||
|
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
margin-left: 14rpx; |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.th-line{ |
|||
margin-top: 8rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
line-height: 40rpx; |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
>text{ |
|||
color: #9A9A9D; |
|||
} |
|||
.tl-active{ |
|||
color: #009874; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.td-box{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx; |
|||
.tb-title{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.tb-line{ |
|||
|
|||
.user-images{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
|
|||
.u-item{ |
|||
width: 120rpx; |
|||
flex-direction: column; |
|||
@include centerFlex(center); |
|||
margin-left: 6rpx; |
|||
image{ |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
// background-color: red; |
|||
// border: 4rpx solid #009876; |
|||
} |
|||
text{ |
|||
font-weight: 400; |
|||
color: #333333; |
|||
font-size: 24rpx; |
|||
text-overflow: ellipsis; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
word-break: break-all; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
} |
|||
} |
|||
} |
|||
.show-ui-all{ |
|||
width: 100%; |
|||
text-align: center; |
|||
.reverse{ |
|||
transform: rotateX(180deg); |
|||
} |
|||
image{ |
|||
display: inline-block; |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
>view{ |
|||
line-height: 52rpx; |
|||
font-size: 28rpx; |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.tb-section{ |
|||
.has_line{ |
|||
padding-top: 30rpx; |
|||
border-top: 2rpx solid #D8D8D8; |
|||
} |
|||
.ts-line{ |
|||
margin-top: 26rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
color: #333333; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 24rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
.ts-total{ |
|||
margin-top: 22rpx; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.td-btn{ |
|||
height: 112rpx; |
|||
margin: 80rpx 24rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFF; |
|||
font-size: 32rpx; |
|||
line-height: 112rpx; |
|||
text-align: center; |
|||
} |
|||
.odm-end-modal{ |
|||
position: absolute; |
|||
left: 65rpx; |
|||
top: 12%; |
|||
background-color: #fff; |
|||
width: 620rpx; |
|||
padding: 30rpx 0rpx 80rpx; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.oem-close{ |
|||
width: 100%; |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
} |
|||
.oem-tit { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
margin: 16rpx 0rpx 34rpx; |
|||
} |
|||
.oem-line{ |
|||
width: 456rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
line-height: 48rpx; |
|||
.ol-txt1{ |
|||
color: #009874; |
|||
} |
|||
.ol-txt2{ |
|||
color: #FF873D; |
|||
} |
|||
} |
|||
.oem-tips{ |
|||
width: 456rpx; |
|||
margin: 34rpx 0rpx 8rpx; |
|||
color: #EA5061; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
.oem-ipt{ |
|||
width: 456rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
border-radius: 10rpx; |
|||
& input { |
|||
flex-grow: 1; |
|||
height: 88rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
padding: 0rpx 20rpx; |
|||
} |
|||
} |
|||
.oem-btn{ |
|||
width: 240rpx; |
|||
height: 88rpx; |
|||
margin-top: 60rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFF; |
|||
font-size: 32rpx; |
|||
line-height: 88rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ff_btn{ |
|||
width: 100%; |
|||
margin-top: 20rpx; |
|||
@include centerFlex(center); |
|||
>view{ |
|||
@include centerFlex(center); |
|||
width: 500rpx; |
|||
height: 112rpx; |
|||
background: #009874; |
|||
border-radius: 10rpx; |
|||
color: white; |
|||
} |
|||
} |
|||
.bm-info-box{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
>view{ |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.has_line{ |
|||
padding-top: 30rpx; |
|||
border-top: 2rpx solid #D8D8D8; |
|||
} |
|||
text{ |
|||
margin-left: 20rpx; |
|||
color: #FF873D; |
|||
} |
|||
} |
|||
.yw-place-box{ |
|||
@include centerFlex(flex-start); |
|||
align-items: flex-start; |
|||
.yw-title{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
} |
|||
.yw-place{ |
|||
width: 500rpx; |
|||
height: auto; |
|||
@include centerFlex(flex-start); |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,498 @@ |
|||
<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 => { |
|||
util.hideLoad(); |
|||
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]; |
|||
} |
|||
else { |
|||
util.showNone("查询不到该储蓄卡信息，请检查重新输入"); |
|||
} |
|||
} |
|||
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.cardList = []; |
|||
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: fixed; |
|||
top: 0%; |
|||
left: 0; |
|||
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> |
|||
|
Before Width: 36 | Height: 36 | Size: 314 B |
|
Before Width: 32 | Height: 32 | Size: 241 B |
|
Before Width: 84 | Height: 84 | Size: 2.0 KiB |
|
Before Width: 18 | Height: 18 | Size: 185 B |
|
Before Width: 36 | Height: 36 | Size: 365 B |
|
Before Width: 36 | Height: 36 | Size: 364 B |
|
Before Width: 40 | Height: 40 | Size: 372 B |
|
Before Width: 32 | Height: 32 | Size: 356 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue