-
11.hbuilderx/launch.json
-
46package-lock.json
-
218src/components/organize_order/organize_order.vue
-
137src/components/reservation_order/reservation_order.vue
-
151src/components/timing_order/timing_order.vue
-
15src/js/api.js
-
10src/js/once_name.js
-
59src/pages.json
-
29src/pages/admin_bind/admin_bind.vue
-
7src/pages/employee/manage/manage.vue
-
25src/pages/employee/perfect_info/perfect_info.vue
-
188src/pages/index/index.vue
-
23src/pages/login/login.vue
-
120src/pages/order_list/order_list.vue
-
8src/pages/order_search/order_search.vue
-
1src/pages/store_list/store_list.vue
-
271src/pages/write_off/confirm_order/confirm_order.vue
-
70src/pages/write_off/null/null.vue
-
201src/pages/write_off/operate/operate.vue
-
285src/pages/write_off/search_result/search_result.vue
-
BINsrc/static/images/code_null.png
-
BINsrc/static/images/icon/index/tab_10.png
-
BINsrc/static/images/icon/index/tab_2.png
-
BINsrc/static/images/icon/index/tab_3.png
-
BINsrc/static/images/icon/index/tab_4.png
-
BINsrc/static/images/icon/index/tab_5.png
-
BINsrc/static/images/icon/index/tab_6.png
-
BINsrc/static/images/icon/index/tab_7.png
-
BINsrc/static/images/icon/index/tab_8.png
-
BINsrc/static/images/icon/index/tab_9.png
-
BINsrc/static/images/icon/retail/add.png
-
BINsrc/static/images/icon/retail/alipay.png
-
BINsrc/static/images/icon/retail/back.png
-
BINsrc/static/images/icon/retail/card.png
-
BINsrc/static/images/icon/retail/cart.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/dropDown.png
-
BINsrc/static/images/icon/retail/historySearchDelete.png
-
BINsrc/static/images/icon/retail/home.png
-
BINsrc/static/images/icon/retail/noChoose.png
-
BINsrc/static/images/icon/retail/other.png
-
BINsrc/static/images/icon/retail/search.png
-
BINsrc/static/images/icon/retail/searchClear.png
-
BINsrc/static/images/icon/retail/sub.png
-
BINsrc/static/images/icon/retail/turn.png
-
BINsrc/static/images/icon/retail/wechat.png
-
BINsrc/static/images/icon/x_close.png
-
BINsrc/static/images/scan_null.png
-
3src/store/index.js
-
549src/subpackage/device/components/order/organize_detail/organize_detail.vue
-
916src/subpackage/device/components/order/reservation_people_detail/reservation_people_detail.vue
-
330src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
-
341src/subpackage/device/components/order/timing_detail/timing_detail.vue
-
21src/subpackage/device/js/device_api.js
-
117src/subpackage/device/pages/order_details/order_details.vue
-
112src/subpackage/device/pages/order_manage/order_manage.vue
-
BINsrc/subpackage/device/static/images/order/tab_0_0.png
-
BINsrc/subpackage/device/static/images/order/tab_0_1.png
-
BINsrc/subpackage/device/static/images/order/tab_0_10.png
-
BINsrc/subpackage/device/static/images/order/tab_0_11.png
-
BINsrc/subpackage/device/static/images/order/tab_0_2.png
-
BINsrc/subpackage/device/static/images/order/tab_0_3.png
-
BINsrc/subpackage/device/static/images/order/tab_0_4.png
-
BINsrc/subpackage/device/static/images/order/tab_0_5.png
-
BINsrc/subpackage/device/static/images/order/tab_0_6.png
-
BINsrc/subpackage/device/static/images/order/tab_0_7.png
-
BINsrc/subpackage/device/static/images/order/tab_0_8.png
-
BINsrc/subpackage/device/static/images/order/tab_0_9.png
-
BINsrc/subpackage/device/static/images/order/tab_1_0.png
-
BINsrc/subpackage/device/static/images/scan_code.png
-
243src/subpackage/retail/components/hover_cart_list/hover_cart_list.vue
-
498src/subpackage/retail/components/retail_pay_way/retail_pay_way.vue
-
12src/subpackage/retail/js/retail_api.js
-
10src/subpackage/retail/js/retail_server.js
-
20src/subpackage/retail/js/tools.js
-
550src/subpackage/retail/pages/confirm_goods/confirm_goods.vue
-
1026src/subpackage/retail/pages/index/index.vue
-
295src/subpackage/retail/pages/search/search.vue
-
34src/utils/util.js
@ -0,0 +1,11 @@ |
|||||
|
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ |
||||
|
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数 |
||||
|
"version": "0.0", |
||||
|
"configurations": [{ |
||||
|
"type": "uniCloud", |
||||
|
"default": { |
||||
|
"launchtype": "remote" |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
@ -0,0 +1,218 @@ |
|||||
|
<template> |
||||
|
<view class="timing-order" @click="toOrderDetails"> |
||||
|
<view class="ro-header"> |
||||
|
<view class="rh-view">{{orderInfo.original_order.extension.stadium_name || '-'}}</view> |
||||
|
<text :class="[ 'rh-text', orderInfo.original_order.pay_status == 0?'rh-active':'' ]">{{zh_order_status(orderInfo.original_order.pay_status)}}</text> |
||||
|
</view> |
||||
|
<view class="ro-section"> |
||||
|
<view class="rs-line"> |
||||
|
<view class="rl-view">订单编号:</view> |
||||
|
<view class="rl-view"> |
||||
|
<view class="rv-view">{{orderInfo.order_no || '-'}}</view> |
||||
|
</view> |
||||
|
<!-- <image src="/static/images/icon/arrow_b2.png"></image> --> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view class="rl-view">约玩主题:</view> |
||||
|
<view class="rl-view"> |
||||
|
<view class="rv-view">{{orderInfo.theme || '-'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view class="rl-view">约玩人数:</view> |
||||
|
<view class="rl-view"> |
||||
|
<view class="rv-view">{{orderInfo.person_applicants || '-'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view class="rl-view">约玩时间:</view> |
||||
|
<view class="rl-view"> |
||||
|
<view class="rv-view">{{orderInfo.label.Date+" "+ orderInfo.label.StartTime+" "+orderInfo.label.EndTime || '-'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rs-line" v-if="orderInfo.status=='End'"> |
||||
|
<view class="rl-view">未发放:</view> |
||||
|
<view class="rl-view"> |
||||
|
<view class="rv-view">{{orderInfo.un_amount_already_amount || '-'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<view class="ro-bot" v-if="orderInfo.original_order.pay_status != 0"> |
||||
|
<!-- status == End 可发放金额--> |
||||
|
<!-- <view v-if="orderInfo.status=='End'" class="ro-btn" @click="clickSendAmount">发放金额</view> --> |
||||
|
<view class="rb-total">实付款 <text class="rt-txt"> ¥{{orderInfo.original_order.pay_amount || 0}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '@/utils/util'; |
||||
|
import { servers } from '../../js/server'; |
||||
|
import { API } from '../../js/api'; |
||||
|
export default { |
||||
|
props: { |
||||
|
orderInfo: { |
||||
|
type: Object, |
||||
|
default: ()=>({}) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
zh_order_status(){ |
||||
|
// 订单状态 0未支付1已支付待使用2已使用3已失效4已退款5申请退款6同意退款 |
||||
|
return status =>{ |
||||
|
const _obj = { |
||||
|
'0': '未支付', |
||||
|
'1': '已支付', |
||||
|
'2': '已使用', |
||||
|
'3': '已失效', |
||||
|
'4': '已退款', |
||||
|
'5': '申请退款', |
||||
|
'6': '同意退款', |
||||
|
} |
||||
|
|
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
toOrderDetails(){ |
||||
|
let { orderInfo } = this |
||||
|
let _query = {} |
||||
|
_query["stadium_id"] = orderInfo.stadium_id |
||||
|
_query["order_no"] = orderInfo.order_no |
||||
|
_query["order_type"] = 10 |
||||
|
util.routeTo(`/subpackage/device/pages/order_details/order_details?query=${util.jsonStr(_query)}`,'nT'); |
||||
|
// this.$emit('orderDetailChange'); |
||||
|
}, |
||||
|
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); |
||||
|
that.$emit('refreshList');//刷新列表 |
||||
|
}) |
||||
|
|
||||
|
} else if (res.cancel) { |
||||
|
console.log('用户点击取消'); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" > |
||||
|
@import '~style/public.scss'; |
||||
|
.timing-order{ |
||||
|
padding: 0 24upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
.ro-header{ |
||||
|
margin-bottom: 18upx; |
||||
|
height: 98upx; |
||||
|
line-height: 96upx; |
||||
|
border-bottom: 2upx solid #D8D8D8; |
||||
|
@include centerFlex(space-between); |
||||
|
.rh-view{ |
||||
|
flex-grow: 1; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
.rh-text{ |
||||
|
margin-left: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
.rh-active{ |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
.ro-section{ |
||||
|
padding-bottom: 20upx; |
||||
|
.rs-line{ |
||||
|
display: flex; |
||||
|
.rl-view,.rv-view{ |
||||
|
line-height: 40upx; |
||||
|
font-size: 24upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
.rl-view{ |
||||
|
&:first-child{ |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
&+.rl-view{ |
||||
|
flex-grow: 1; |
||||
|
.rv-view{ |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rv-active{ |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
>image{ |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.ro-bot{ |
||||
|
// padding-top: 20rpx; |
||||
|
// padding-bottom: 30upx; |
||||
|
border-top: 2upx solid #D8D8D8; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
.rb-total{ |
||||
|
// display: flex; |
||||
|
// flex-direction: row; |
||||
|
// justify-content: center; |
||||
|
line-height: 70rpx; |
||||
|
// text-align: right; |
||||
|
font-size: 24upx; |
||||
|
color: #9c9c9f; |
||||
|
.rt-txt{ |
||||
|
color: #1A1A1A; |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.ro-btn{ |
||||
|
width: 120rpx; |
||||
|
height: 60rpx; |
||||
|
text-align: center; |
||||
|
line-height: 60rpx; |
||||
|
font-size: 24upx; |
||||
|
color: #469576; |
||||
|
position: absolute; |
||||
|
left: 32rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,151 @@ |
|||||
|
<template> |
||||
|
<view class="timing-order" @click="toOrderDetails"> |
||||
|
<view class="ro-header"> |
||||
|
<view class="rh-view">{{orderInfo.stadium_name || '-'}}</view> |
||||
|
<text :class="[ 'rh-text', orderInfo.pay_status == 0?'rh-active':'' ]">{{zh_order_status(orderInfo.pay_status)}}</text> |
||||
|
</view> |
||||
|
<view class="ro-section"> |
||||
|
<view class="rs-line"> |
||||
|
<view class="rl-view">订单编号:</view> |
||||
|
<view class="rl-view"> |
||||
|
<view class="rv-view">{{orderInfo.order_no || '-'}}</view> |
||||
|
</view> |
||||
|
<image src="/static/images/icon/arrow_b2.png"></image> |
||||
|
</view> |
||||
|
<!-- 场次有 人次没有 order_type: 1场次 2人次 --> |
||||
|
<view class="rs-line" v-if="orderInfo.order_type == 1"> |
||||
|
<view class="rl-view">项目:</view> |
||||
|
<view class="rl-view"> |
||||
|
<view class="rv-view">{{orderInfo.project_name || '-'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view class="rl-view">时长:</view> |
||||
|
<view class="rl-view"> |
||||
|
<view :class="[ 'rv-view', orderInfo.pay_status == 0?'rv-active':'' ]">{{ orderInfo.extension.duration || '-'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ro-bot" v-if="orderInfo.pay_status != 0"> |
||||
|
<view class="rb-total">实付款 <text class="rt-txt"> ¥{{orderInfo.pay_amount || 0}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '@/utils/util'; |
||||
|
export default { |
||||
|
props: { |
||||
|
orderInfo: { |
||||
|
type: Object, |
||||
|
default: ()=>({}) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
zh_order_status(){ |
||||
|
// 订单状态 0计费中1已完成 |
||||
|
return status =>{ |
||||
|
const _obj = { |
||||
|
'0': '计费中', |
||||
|
'1': '已完成', |
||||
|
'4': '已退款', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
toOrderDetails(){ |
||||
|
console.log("点击了吗") |
||||
|
let { orderInfo } = this |
||||
|
let _query = {} |
||||
|
_query["stadium_id"] = orderInfo.stadium_id |
||||
|
_query["order_no"] = orderInfo.order_no |
||||
|
_query["order_type"] = 1 |
||||
|
util.routeTo(`/subpackage/device/pages/order_details/order_details?query=${util.jsonStr(_query)}`,'nT'); |
||||
|
// this.$emit('orderDetailChange'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" > |
||||
|
@import '~style/public.scss'; |
||||
|
.timing-order{ |
||||
|
padding: 0 24upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
.ro-header{ |
||||
|
margin-bottom: 18upx; |
||||
|
height: 98upx; |
||||
|
line-height: 96upx; |
||||
|
border-bottom: 2upx solid #D8D8D8; |
||||
|
@include centerFlex(space-between); |
||||
|
.rh-view{ |
||||
|
flex-grow: 1; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
.rh-text{ |
||||
|
margin-left: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
.rh-active{ |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
.ro-section{ |
||||
|
padding-bottom: 20upx; |
||||
|
.rs-line{ |
||||
|
display: flex; |
||||
|
.rl-view,.rv-view{ |
||||
|
line-height: 40upx; |
||||
|
font-size: 24upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
.rl-view{ |
||||
|
&:first-child{ |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
&+.rl-view{ |
||||
|
flex-grow: 1; |
||||
|
.rv-view{ |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rv-active{ |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
>image{ |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.ro-bot{ |
||||
|
padding-top: 20upx; |
||||
|
padding-bottom: 30upx; |
||||
|
border-top: 2upx solid #D8D8D8; |
||||
|
.rb-total{ |
||||
|
line-height: 40upx; |
||||
|
text-align: right; |
||||
|
font-size: 24upx; |
||||
|
color: #9c9c9f; |
||||
|
.rt-txt{ |
||||
|
color: #1A1A1A; |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,10 @@ |
|||||
|
// 监听器命名
|
||||
|
// 避免命名冲突,误触监听器
|
||||
|
|
||||
|
export const WRITE_OFF_STORE_INFO = 'stadium_list'; |
||||
|
export const WRITE_OFF_ORDER_INFO = 'order_info'; |
||||
|
|
||||
|
export default { |
||||
|
WRITE_OFF_STORE_INFO, |
||||
|
WRITE_OFF_ORDER_INFO, |
||||
|
} |
@ -0,0 +1,271 @@ |
|||||
|
<template> |
||||
|
<view class="confirm-order"> |
||||
|
<view class="co-container"> |
||||
|
<view class="c-store-name">{{orderInfo.stadium_name || '-'}}</view> |
||||
|
<view class="c-main-section"> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>订单编号:</text> |
||||
|
<view><view>{{ orderInfo.order_no || '-' }}</view></view> |
||||
|
</view> |
||||
|
<view>{{orderInfo.order_type == 0?'(租场)':orderInfo.order_type == 1?'(次卡)':''}}</view> |
||||
|
</view> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>用户昵称:</text> |
||||
|
<view><view>{{ orderInfo.nickname || '-' }}</view></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>验证码:</text> |
||||
|
<view><view>{{ orderInfo.verify_code || '-' }}</view></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 租场 --> |
||||
|
<block v-if="orderInfo.order_type == 0"> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>预订项目:</text> |
||||
|
<view><view>{{ orderInfo.venue_type_name || '-' }}</view></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>预定日期:</text> |
||||
|
<view><view>{{ orderInfo.date || '-' }}</view></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>预定场次:</text> |
||||
|
<view> |
||||
|
<view v-for="(e, i) in orderInfo.sessions" :key="i">{{e.date || ''}} {{e.duration || ''}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
|
||||
|
<!-- 次卡 --> |
||||
|
<block v-if="orderInfo.order_type == 1"> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>预订项目:</text> |
||||
|
<view><view>{{ orderInfo.person_number_rule.name || '-' }}</view></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>预定日期:</text> |
||||
|
<view><view>{{ orderInfo.date || '-' }}</view></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="s-line"> |
||||
|
<view> |
||||
|
<text>预定场次:</text> |
||||
|
<view> |
||||
|
<view> |
||||
|
<block v-for="(e, i) in orderInfo.extension.spec_names" :key="i"> {{ i!=0?'+':'' }}{{ e || '-' }} </block> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
<!-- <view class="c-more-ticket"> |
||||
|
<view class="mt-tip">该次卡订单有多张票,请选择验证码核销(多选)</view> |
||||
|
<view class="mt-lines"> |
||||
|
<view v-for="i in 3" :key="i"> |
||||
|
<view>20121 0152 1252</view> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> --> |
||||
|
<view class="c-dotted-line"></view> |
||||
|
<view class="c-btns"> |
||||
|
<view @click="writeOffBtn">确认核销</view> |
||||
|
<view @click="cancelBtn">不核销</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../utils/util'; |
||||
|
import { API } from '../../../js/api'; |
||||
|
import { servers } from '../../../js/server'; |
||||
|
import { WRITE_OFF_ORDER_INFO } from '../../../js/once_name'; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
orderInfo: {}, |
||||
|
type: '' // verify_code -> 5: 验证码核销(商家助手) | decrypt_text -> 6: 扫码核销(商家助手) |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options){ |
||||
|
if(options.type)this.type = options.type || ''; |
||||
|
util.$_once(WRITE_OFF_ORDER_INFO, data => { |
||||
|
console.warn(data) |
||||
|
this.orderInfo = data; |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
cancelBtn(){ |
||||
|
util.routeTo(); |
||||
|
}, |
||||
|
writeOffBtn: util.debounce(function(){ |
||||
|
let { orderInfo, type } = this; |
||||
|
servers.get({ |
||||
|
url: API.writeOff.assistantVerify, |
||||
|
data: { |
||||
|
verify_type: type == 'verify_code'? 5 : 6, |
||||
|
brand_id: orderInfo.brand_id, |
||||
|
stadium_id: orderInfo.stadium_id, |
||||
|
verify_code: orderInfo.verify_code, |
||||
|
}, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
if(res.data.code == 0){ |
||||
|
util.showNone(res.data.message || '操作成功!'); |
||||
|
setTimeout(_=>util.routeTo(), 1200); |
||||
|
}else{ |
||||
|
util.showNone(res.data.message || '操作失败!'); |
||||
|
} |
||||
|
}) |
||||
|
}, 300, true), |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~style/public.scss"; |
||||
|
page{ |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
.confirm-order{ |
||||
|
padding-top: 46upx; |
||||
|
.co-container{ |
||||
|
position: relative; |
||||
|
margin: 0 auto; |
||||
|
padding: 0 40upx 60upx; |
||||
|
width: 702upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
.c-store-name{ |
||||
|
line-height: 108upx; |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
border-bottom: 2upx solid #D8D8D8; |
||||
|
color: #1A1A1A; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
.c-main-section{ |
||||
|
padding: 20upx 0 24upx; |
||||
|
.s-line{ |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
>view{ |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
>view{ |
||||
|
>view{ |
||||
|
min-width: 0; |
||||
|
font-size: 28upx; |
||||
|
line-height: 60upx; |
||||
|
color: #1A1A1A; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
>text{ |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
line-height: 60upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
|
||||
|
&+view{ |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
line-height: 60upx; |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.c-more-ticket{ |
||||
|
padding-top: 32upx; |
||||
|
padding-bottom: 32upx; |
||||
|
border-top: 2upx solid #D8D8D8; |
||||
|
.mt-tip{ |
||||
|
margin-bottom: 28upx; |
||||
|
line-height: 34upx; |
||||
|
font-size: 24upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
.mt-lines{ |
||||
|
>view{ |
||||
|
&:not(:last-child){ |
||||
|
margin-bottom: 24upx; |
||||
|
} |
||||
|
@include centerFlex(space-between); |
||||
|
>view{ |
||||
|
min-width: 0; |
||||
|
font-size: 28upx; |
||||
|
line-height: 40upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
width: 40upx; |
||||
|
height: 40upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.c-dotted-line{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
border-bottom: 2upx dotted #D8D8D8; |
||||
|
&::before,&::after{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: -9upx; |
||||
|
display: block; |
||||
|
width: 20upx; |
||||
|
height: 20upx; |
||||
|
border-radius: 50%; |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
&::before{ |
||||
|
left: -10upx; |
||||
|
} |
||||
|
&::after{ |
||||
|
right: -10upx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.c-btns{ |
||||
|
padding-top: 58upx; |
||||
|
>view{ |
||||
|
height: 112upx; |
||||
|
text-align: center; |
||||
|
line-height: 108upx; |
||||
|
border-radius: 10upx; |
||||
|
border: 2upx solid $themeColor; |
||||
|
font-size: 32upx; |
||||
|
color: $themeColor; |
||||
|
&:first-child{ |
||||
|
margin-bottom: 24upx; |
||||
|
color: #fff; |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<view class="null-container"> |
||||
|
<image mode="aspectFit" :src="imgPath"></image> |
||||
|
<view class="c-tip" v-if="operateType == 'decrypt_text'">很抱歉!获取不到二维码订单信息</view> |
||||
|
<view class="c-tip" v-if="operateType == 'verify_code'">很抱歉!获取不到验证码订单信息</view> |
||||
|
<view class="c-btn" @click="toBlack">返回</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../utils/util'; |
||||
|
export default { |
||||
|
computed: { |
||||
|
imgPath(){ |
||||
|
let { operateType } = this; |
||||
|
if(operateType == 'verify_code')return '/static/images/code_null.png'; |
||||
|
if(operateType == 'decrypt_text')return '/static/images/scan_null.png'; |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options){ |
||||
|
let { type } = options; |
||||
|
this.operateType = options.type |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
isScan: false, |
||||
|
operateType: '', // verify_code(输入)/decrypt_text(扫码) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
toBlack(){ |
||||
|
util.routeTo(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~style/public.scss"; |
||||
|
page{ |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.null-container{ |
||||
|
padding-top: 90upx; |
||||
|
>image{ |
||||
|
display: block; |
||||
|
margin: 0 auto 86upx; |
||||
|
width: 420upx; |
||||
|
height: 420upx; |
||||
|
} |
||||
|
.c-tip{ |
||||
|
margin-bottom: 260upx; |
||||
|
line-height: 40upx; |
||||
|
text-align: center; |
||||
|
font-size: 28upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
.c-btn{ |
||||
|
margin: 0 auto; |
||||
|
width: 280upx; |
||||
|
text-align: center; |
||||
|
height: 92upx; |
||||
|
line-height: 88upx; |
||||
|
font-size: 32upx; |
||||
|
border: 2upx solid $themeColor; |
||||
|
color: $themeColor; |
||||
|
border-radius: 46upx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,201 @@ |
|||||
|
<template> |
||||
|
<view class="operate-container"> |
||||
|
<view class="store-bar"> |
||||
|
<text>当前门店</text> |
||||
|
<picker mode="selector" :range="stadiumList" range-key="name" @change="stadiumChange"> |
||||
|
<view> |
||||
|
<input disabled v-model="curStadium.name" /> |
||||
|
<image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
</view> |
||||
|
<view class="c-scan-btn" @click="scanCodeBtn"> |
||||
|
<image mode="aspectFit" src="/static/images/icon/scan_code_btn.png"></image> |
||||
|
</view> |
||||
|
<view class="c-verification-code"> |
||||
|
<view><input placeholder="输入订单验证码" v-model="iptCode" /></view> |
||||
|
<view @click="confirmBtn">确认核销</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../utils/util'; |
||||
|
import { API } from '../../../js/api'; |
||||
|
import { servers } from '../../../js/server'; |
||||
|
import { WRITE_OFF_STORE_NAME, WRITE_OFF_ORDER_INFO } from '../../../js/once_name'; |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
iptCode: '', |
||||
|
stadiumList: [], |
||||
|
curStadium: {}, |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState([ 'brandInfo' ]), |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
util.$_once(WRITE_OFF_STORE_NAME, data => { |
||||
|
this.curStadium = data.curStadium; |
||||
|
this.stadiumList = data.stadiumList; |
||||
|
}) |
||||
|
console.warn(this.brandInfo) |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
scanCodeBtn: util.debounce(function(){ |
||||
|
uni.scanCode({ |
||||
|
onlyFromCamera: true, |
||||
|
scanType: 'qrCode', |
||||
|
success: res=> { |
||||
|
console.warn('success--->', res); |
||||
|
if(util.changeLowerCase(res.scanType) !== 'qr_code')return util.showNone('不支持此类型!'); |
||||
|
console.warn(res.result) |
||||
|
this.analysisOrder({ decrypt_text: res.result }); |
||||
|
}, |
||||
|
fail: function(err) { |
||||
|
util.showNone('扫码失败!'); |
||||
|
console.warn('扫码失败--->', err); |
||||
|
} |
||||
|
}) |
||||
|
}, 300, true), |
||||
|
stadiumChange(e){ |
||||
|
let { stadiumList } = this; |
||||
|
this.curStadium = stadiumList[e.detail.value]; |
||||
|
}, |
||||
|
confirmBtn: util.debounce(function(){ |
||||
|
this.analysisOrder({ verify_code: this.iptCode }); |
||||
|
return |
||||
|
let _timeSta = new Date().getTime(); |
||||
|
if(_timeSta%3 == 0)return util.routeTo(`/pages/write_off/confirm_order/confirm_order`, 'nT'); |
||||
|
if(_timeSta%2 < 1)return util.routeTo(`/pages/write_off/null/null`, 'nT'); |
||||
|
return util.routeTo(`/pages/write_off/confirm_order/confirm_order`, 'nT'); |
||||
|
}, 300, true), |
||||
|
|
||||
|
analysisOrder({ verify_code, decrypt_text }){ |
||||
|
let { curStadium, brandInfo } = this; |
||||
|
if(!verify_code&!decrypt_text)return; |
||||
|
let _query = { |
||||
|
brand_id: brandInfo.brand.id, |
||||
|
stadium_id: curStadium.id, |
||||
|
} |
||||
|
let type = ''; |
||||
|
if(!!verify_code){ |
||||
|
_query['verify_code'] = verify_code; |
||||
|
type = 'verify_code'; |
||||
|
} |
||||
|
if(!!decrypt_text){ |
||||
|
type = 'decrypt_text'; |
||||
|
_query['decrypt_text'] = decrypt_text; |
||||
|
} |
||||
|
|
||||
|
util.showLoad(); |
||||
|
servers.get({ |
||||
|
url: API.writeOff.enterVerifyOrder, |
||||
|
data: _query, |
||||
|
isDefaultGet: false |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad(); |
||||
|
if(res.data.code == 0){ |
||||
|
let _data = res.data.data || {} |
||||
|
util.$_emit(WRITE_OFF_ORDER_INFO, {..._data}) |
||||
|
util.routeTo(`/pages/write_off/confirm_order/confirm_order?type=${type}`, 'nT'); |
||||
|
}else{ |
||||
|
util.routeTo(`/pages/write_off/null/null?type=${type}`, 'nT'); |
||||
|
} |
||||
|
console.log('订单查询---->', res); |
||||
|
}) |
||||
|
.catch(util.hideLoad) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
page{ |
||||
|
background-color: #f2f2f7; |
||||
|
} |
||||
|
.operate-container{ |
||||
|
.store-bar{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 0 24upx; |
||||
|
height: 144upx; |
||||
|
background-color: #fff; |
||||
|
@include centerFlex(space-between); |
||||
|
>text{ |
||||
|
margin-right: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
>picker{ |
||||
|
flex-grow: 1; |
||||
|
} |
||||
|
view{ |
||||
|
padding: 0 20upx; |
||||
|
height: 92upx; |
||||
|
border-radius: 10upx; |
||||
|
background: #f2f2f2; |
||||
|
@include centerFlex(space-between); |
||||
|
>input{ |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
width: 28upx; |
||||
|
height: 28upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.c-scan-btn{ |
||||
|
margin: 0 auto 24upx; |
||||
|
width: 702upx; |
||||
|
height: 360upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
@include centerFlex(center); |
||||
|
>image{ |
||||
|
width: 172upx; |
||||
|
height: 172upx; |
||||
|
} |
||||
|
} |
||||
|
.c-verification-code{ |
||||
|
padding: 40upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
>view{ |
||||
|
&:first-child{ |
||||
|
margin-bottom: 30upx; |
||||
|
padding: 0 20upx; |
||||
|
height: 112upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #f2f2f7; |
||||
|
>input{ |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
font-size: 32upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
} |
||||
|
&+view{ |
||||
|
height: 112upx; |
||||
|
text-align: center; |
||||
|
line-height: 112upx; |
||||
|
border-radius: 10upx; |
||||
|
font-size: 32upx; |
||||
|
color: #fff; |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,285 @@ |
|||||
|
<template> |
||||
|
<view class="search-result"> |
||||
|
<view class="store-bar"> |
||||
|
<text>当前门店</text> |
||||
|
<picker mode="selector" :range="stadiumList" range-key="name" @change="stadiumChange"> |
||||
|
<view> |
||||
|
<input disabled v-model="curStadium.name" /> |
||||
|
<image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
</view> |
||||
|
<view class="r-timer-select"> |
||||
|
<picker mode="date" @change="dateChange"> |
||||
|
<view> |
||||
|
<text>核销日期:{{curDate || '-'}}</text> |
||||
|
<image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
<view>核销数量:{{writeOffList.length || 0}}</view> |
||||
|
</view> |
||||
|
<view class="r-order-list"> |
||||
|
<view class="l-item" v-for="(e, i) in writeOffList" :key="i"> |
||||
|
<view class="i-name">{{ e.extension.stadium_name || '-' }}</view> |
||||
|
<view class="i-lines"> |
||||
|
<view> |
||||
|
<view>订单编号:{{ e.order_no || '-' }}</view> |
||||
|
<view>({{ e.type || '-' }})</view> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view>用户昵称:{{ e.extension.nickname || '-' }}</view> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view>核销码: {{ e.verify_code || '-' }}</view> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view>验证方式:{{ e.desc || '-' }}</view> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view>核销时间:{{ e.verify_time || '-'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="r-bottom-btn"><view @click="toOperate">核销订单</view></view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../utils/util'; |
||||
|
import { API } from '../../../js/api'; |
||||
|
import { servers } from '../../../js/server'; |
||||
|
import { mapState } from 'vuex'; |
||||
|
import { WRITE_OFF_STORE_NAME } from '../../../js/once_name'; |
||||
|
export default { |
||||
|
computed: { |
||||
|
...mapState([ 'brandInfo' ]), |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
stadiumList: [], // 店铺列表 |
||||
|
curStadium: {}, // 当前店铺 |
||||
|
writeOffList: [], // 核销列表, |
||||
|
curDate: util.formatDate({}), |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
this.initPage(); |
||||
|
}, |
||||
|
onShow(){ |
||||
|
let { curStadium, curDate } = this; |
||||
|
if(curStadium&&curStadium.id)this.getList({ |
||||
|
brand_id: curStadium.brand_id || '', |
||||
|
stadium_id: curStadium.id, |
||||
|
date: curDate, |
||||
|
}); |
||||
|
}, |
||||
|
methods: { |
||||
|
dateChange(e){ |
||||
|
let { curStadium } = this; |
||||
|
this.curDate = e.detail.value; |
||||
|
this.getList({ |
||||
|
brand_id: curStadium.brand_id || '', |
||||
|
stadium_id: curStadium.id, |
||||
|
date: e.detail.value, |
||||
|
}); |
||||
|
}, |
||||
|
stadiumChange(e){ |
||||
|
let { stadiumList, curDate } = this; |
||||
|
this.curStadium = stadiumList[e.detail.value]; |
||||
|
|
||||
|
this.getList({ |
||||
|
brand_id: stadiumList[e.detail.value].brand_id || '', |
||||
|
stadium_id: stadiumList[e.detail.value].id, |
||||
|
date: curDate, |
||||
|
}); |
||||
|
}, |
||||
|
async initPage(){ |
||||
|
let { brandInfo } = this; |
||||
|
try{ |
||||
|
let _storeList = await this.getStoreList({ brand_id: brandInfo.brand.id || '' }); |
||||
|
this.stadiumList = _storeList || []; |
||||
|
if(_storeList.length) this.curStadium = _storeList[0]; |
||||
|
console.warn(util.formatDate({})) |
||||
|
this.getList({ |
||||
|
brand_id: brandInfo.brand.id || '', |
||||
|
stadium_id: _storeList[0].id, |
||||
|
date: util.formatDate({}), |
||||
|
}); |
||||
|
}catch(err){ |
||||
|
console.warn('加载数据失败!', err); |
||||
|
} |
||||
|
}, |
||||
|
toOperate(){ |
||||
|
let { stadiumList, curStadium } = this; |
||||
|
util.$_emit(WRITE_OFF_STORE_NAME, { |
||||
|
stadiumList, |
||||
|
curStadium, |
||||
|
}) |
||||
|
util.routeTo(`/pages/write_off/operate/operate`, 'nT'); |
||||
|
}, |
||||
|
getList({ brand_id, stadium_id = '', date = '' }){ |
||||
|
util.showLoad(); |
||||
|
servers.get({ |
||||
|
url: API.writeOff.listVerifyRecord, |
||||
|
data: { brand_id, stadium_id, date }, |
||||
|
failMsg: '加载失败!', |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad(); |
||||
|
let _list = res.list || []; |
||||
|
this.writeOffList = _list; |
||||
|
console.warn(res, 'jijjjjjjjjj') |
||||
|
}) |
||||
|
}, |
||||
|
getStoreList({ |
||||
|
page=1, |
||||
|
page_size=9999, |
||||
|
brand_id='', |
||||
|
}){ |
||||
|
return servers.get({ |
||||
|
url: API.stadiumList, |
||||
|
data: { |
||||
|
page, |
||||
|
page_size, |
||||
|
brand_id, |
||||
|
}, |
||||
|
failMsg: '获取列表失败!' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
let _list = res.list || []; |
||||
|
return _list |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~style/public.scss"; |
||||
|
page{ |
||||
|
background-color: #f2f2f7; |
||||
|
} |
||||
|
.search-result{ |
||||
|
padding-bottom: 132upx; |
||||
|
padding-bottom: calc( 132upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 132upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
.store-bar{ |
||||
|
padding: 0 24upx; |
||||
|
height: 144upx; |
||||
|
background-color: #fff; |
||||
|
@include centerFlex(space-between); |
||||
|
>text{ |
||||
|
margin-right: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
>picker{ |
||||
|
flex-grow: 1; |
||||
|
} |
||||
|
view{ |
||||
|
padding: 0 20upx; |
||||
|
height: 92upx; |
||||
|
border-radius: 10upx; |
||||
|
background: #f2f2f2; |
||||
|
@include centerFlex(space-between); |
||||
|
>input{ |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
width: 28upx; |
||||
|
height: 28upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.r-timer-select{ |
||||
|
padding: 0 24upx; |
||||
|
margin-bottom: 10upx; |
||||
|
@include centerFlex(space-between); |
||||
|
picker{ |
||||
|
flex-shrink: 0; |
||||
|
view{ |
||||
|
padding: 24upx 0; |
||||
|
>text{ |
||||
|
font-weight: 500; |
||||
|
font-size: 32upx; |
||||
|
} |
||||
|
>image{ |
||||
|
margin-left: 16upx; |
||||
|
vertical-align: middle; |
||||
|
width: 22upx; |
||||
|
height: 22upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
>view{ |
||||
|
max-width: 40%; |
||||
|
text-align: right; |
||||
|
font-weight: 500; |
||||
|
font-size: 32upx; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
.r-order-list{ |
||||
|
padding: 0 24upx; |
||||
|
.l-item{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 0 20upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
.i-name{ |
||||
|
height: 100upx; |
||||
|
line-height: 98upx; |
||||
|
border-bottom: 2upx solid #D8D8D8; |
||||
|
font-weight: 500; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
.i-lines{ |
||||
|
padding-top: 8upx; |
||||
|
padding-bottom: 32upx; |
||||
|
>view{ |
||||
|
display: flex; |
||||
|
>view{ |
||||
|
min-width: 0; |
||||
|
line-height: 52upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9c9c9f; |
||||
|
@include textHide(1); |
||||
|
&+view{ |
||||
|
flex-shrink: 0; |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.r-bottom-btn{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
padding: 10upx 24upx; |
||||
|
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
background-color: #f2f2f7; |
||||
|
>view{ |
||||
|
height: 112upx; |
||||
|
line-height: 112upx; |
||||
|
text-align: center; |
||||
|
font-size: 32upx; |
||||
|
border-radius: 10upx; |
||||
|
color: #fff; |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
After Width: 380 | Height: 380 | Size: 7.7 KiB |
After Width: 52 | Height: 52 | Size: 402 B |
Before Width: 52 | Height: 52 | Size: 477 B After Width: 52 | Height: 52 | Size: 177 B |
Before Width: 52 | Height: 52 | Size: 177 B After Width: 52 | Height: 52 | Size: 698 B |
Before Width: 52 | Height: 52 | Size: 696 B After Width: 52 | Height: 52 | Size: 683 B |
Before Width: 52 | Height: 52 | Size: 402 B After Width: 52 | Height: 52 | Size: 740 B |
Before Width: 52 | Height: 52 | Size: 698 B After Width: 52 | Height: 52 | Size: 396 B |
Before Width: 52 | Height: 52 | Size: 683 B After Width: 52 | Height: 52 | Size: 470 B |
Before Width: 52 | Height: 52 | Size: 740 B After Width: 52 | Height: 52 | Size: 477 B |
Before Width: 52 | Height: 52 | Size: 396 B After Width: 52 | Height: 52 | Size: 696 B |
After Width: 36 | Height: 36 | Size: 314 B |
After Width: 54 | Height: 54 | Size: 627 B |
After Width: 32 | Height: 32 | Size: 241 B |
After Width: 52 | Height: 52 | Size: 764 B |
After Width: 84 | Height: 84 | Size: 2.0 KiB |
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: 18 | Height: 18 | Size: 185 B |
After Width: 36 | Height: 36 | Size: 365 B |
After Width: 36 | Height: 36 | Size: 364 B |
After Width: 36 | Height: 36 | Size: 511 B |
After Width: 54 | Height: 54 | Size: 1.3 KiB |
After Width: 40 | Height: 40 | Size: 372 B |
After Width: 32 | Height: 32 | Size: 356 B |
After Width: 40 | Height: 40 | Size: 380 B |
After Width: 34 | Height: 34 | Size: 244 B |
After Width: 54 | Height: 54 | Size: 659 B |
After Width: 34 | Height: 34 | Size: 425 B |
After Width: 420 | Height: 420 | Size: 11 KiB |
@ -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,916 @@ |
|||||
|
<template> |
||||
|
<!-- pageInfo.order_type 人次(1) --> |
||||
|
<view class="reservation-people"> |
||||
|
<view class="rp-head"> |
||||
|
<view class="rh-store"> |
||||
|
<image :src="orderInfo.stadium_logo || '' "></image> |
||||
|
<view>{{orderInfo.stadium_name || '-'}}</view> |
||||
|
</view> |
||||
|
<view class="rh-line"> |
||||
|
<view>订单编号:<text>{{orderInfo.order_no || ''}}</text></view> |
||||
|
<view><text :class="[orderInfo.pay_status==1?'rl-active':'']">{{zh_pay_status(orderInfo.pay_status)}}</text></view> |
||||
|
</view> |
||||
|
<view class="rh-line"> |
||||
|
<view>创建时间:<text>{{orderInfo.created_at || '-'}}</text></view> |
||||
|
</view> |
||||
|
<view class="rh-line"> |
||||
|
<view>用户昵称:<text>{{orderInfo.nickname || '-'}}</text></view> |
||||
|
</view> |
||||
|
<!-- 门店是否开启ic卡 --> |
||||
|
<block v-if="orderInfo.stadium_has_iccard && orderInfo.pay_status==1"> |
||||
|
<!-- 待使用 已绑定ic卡 卡id,>0就是绑定了--> |
||||
|
<block v-if="orderInfo.bind_iccard_info.id > 0"> |
||||
|
<view class="rh-line"> |
||||
|
<view>已绑定IC卡:<text>{{orderInfo.bind_iccard_info.erp_iccard_no || '-'}}</text></view> |
||||
|
</view> |
||||
|
<view class="rh-line"> |
||||
|
<view>绑定时间:<text>{{orderInfo.bind_iccard_info.bind_order_at || '-'}}</text></view> |
||||
|
</view> |
||||
|
</block> |
||||
|
<!-- 待使用 未绑定ic卡 --> |
||||
|
<view :class="['rh-ic', orderInfo.bind_iccard_info.id > 0?'rh-ic-untie':'']" @click="orderInfo.bind_iccard_info.id > 0?bindICCardChange(1):bindICCardChange(2)">{{ orderInfo.bind_iccard_info.id > 0?'解绑IC卡':'绑定IC卡' }}</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
<view class="rp-box"> |
||||
|
<view class="rb-title">验证信息<text>({{orderInfo.available_num || 0}}张可用)</text></view> |
||||
|
<!-- 人次+随时用 --> |
||||
|
<view class="rb-time" v-if="orderInfo.person_number_rule.order_method==1"> |
||||
|
<view>有效期至:</view> |
||||
|
<text>{{orderInfo.end_time || '-'}}</text> |
||||
|
</view> |
||||
|
<!-- 人次+指定日期 --> |
||||
|
<view class="rb-time" v-if="orderInfo.person_number_rule.order_method==2"> |
||||
|
<view>使用日期:</view> |
||||
|
<text>{{orderInfo.date || '-'}}</text> |
||||
|
</view> |
||||
|
<view class="rb-code"> |
||||
|
<view class="rc-item" v-for="(e,i) in orderInfo.sessions" :key="i"> |
||||
|
<view class="ri-tit">验证码{{i+1}}:</view> |
||||
|
<view class="ri-section"> |
||||
|
<view :class="['rs-view',e.status==1?'rs-active':'']"> |
||||
|
<view>{{e.verify_code || '-'}} ({{zh_verify_status(e.status)}})</view> |
||||
|
<view class="s-btn" v-if="e.is_recovery" @click="recoverBtn(e)">恢复</view> |
||||
|
</view> |
||||
|
<block v-if="e.status==2"> |
||||
|
<view class="rs-view"><view>核销方式:{{zh_verify_type(e.verify_type)}}</view></view> |
||||
|
<view class="rs-view"><view>核销时间:{{e.verify_time || '-'}}</view></view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rp-box"> |
||||
|
<view class="rb-title">预订信息</view> |
||||
|
<view class="rb-name"> |
||||
|
<view>{{orderInfo.person_number_rule_name || ''}} <text> {{orderInfo.person_number_rule.order_method==1?'(可随时使用)':'(固定日期)'}}</text></view> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view>数量:<text>{{orderInfo.number || 0}}</text></view> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view>类型:{{ zh_spec_names || '-'}}</view> |
||||
|
</view> |
||||
|
<view class="rb-section"> |
||||
|
<view class="rs-line"> |
||||
|
<view>金额小计</view> |
||||
|
<view>¥{{orderInfo.amount || 0}}</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view>积分抵扣</view> |
||||
|
<view>-¥{{orderInfo.deduction_amount || 0}}</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view>折扣金额</view> |
||||
|
<view>-¥{{orderInfo.discount_amount || 0}}</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view>优惠券优惠</view> |
||||
|
<view>-¥{{orderInfo.coupons_amount || 0}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rb-total"> |
||||
|
<view>合计支付:<text>¥</text><text>{{orderInfo.pay_amount || 0}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rp-box"> |
||||
|
<view class="rb-title">支付信息</view> |
||||
|
<view class="rb-line"> |
||||
|
<view>支付方式:<text>{{zh_pay_type(orderInfo.pay_type)}}</text></view> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view>支付时间:<text>{{orderInfo.pay_time || '-'}}</text></view> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view>微信交易号:<text>{{orderInfo.trade_no || ''}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 弹框 绑定ic卡 --> |
||||
|
<view class="ox-dark-mask" v-if="isShowBindIC" @touchmove.stop.prevent="moveHandle"> |
||||
|
<view class="odm-ic-modal"> |
||||
|
<view class="oim-close"> |
||||
|
<image src="/static/images/icon/x_close.png" @click="isShowBindIC = !isShowBindIC"></image> |
||||
|
</view> |
||||
|
<view class="oim-tit">绑定IC卡</view> |
||||
|
<view class="oim-card"> |
||||
|
<view class="oc-sign">*</view> |
||||
|
<view class="oc-depot" @click="depotChange">仓</view> |
||||
|
<input type="number" placeholder="请输入卡号" v-model=" bindInfo.iccard_no" /> |
||||
|
<image class="oc-icon" src="/subpackage/device/static/images/scan_code.png" @click="scanChange"></image> |
||||
|
</view> |
||||
|
<view class="oim-tips">可直接输入卡号、扫描条码或在已选择仓库下选择卡号</view> |
||||
|
<view class="oim-ipt"> |
||||
|
<input type="digit" placeholder="单价" v-model="bindInfo.iccard_price" /> |
||||
|
</view> |
||||
|
<view class="oim-ipt"> |
||||
|
<input type="text" placeholder="其他费用(选填)" v-model="bindInfo.iccard_otherfee" /> |
||||
|
</view> |
||||
|
<view class="oim-ipt"> |
||||
|
<input type="text" placeholder="备注说明(选填)" v-model="bindInfo.iccard_remarks" /> |
||||
|
</view> |
||||
|
<view class="oim-btn" hover-class="hover-active" @click="modalBtn(1)">确认</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 弹框 仓库选择ic卡 --> |
||||
|
<view class="ox-dark-mask" v-if="isShowSelectIC" @touchmove.stop.prevent="moveHandle"> |
||||
|
<view class="odm-select-modal"> |
||||
|
<view class="osm-close"> |
||||
|
<image src="/static/images/icon/x_close.png" @click="isShowSelectIC = !isShowSelectIC"></image> |
||||
|
</view> |
||||
|
<view class="osm-tit">筛选卡号</view> |
||||
|
<picker class="osm-picker" :range="depotList" @change="pickerChange"> |
||||
|
<view class="osm-ipt"> |
||||
|
<input type="text" placeholder="请选择仓库" v-model="depotInfo.ic_name" disabled="true" /> |
||||
|
<image src="/subpackage/device/static/images/arrow_b2.png"></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
|
||||
|
<view class="osm-ipt"> |
||||
|
<input type="number" placeholder="请输入卡号" v-model="depotInfo.ic_no" @change="inputChange"/> |
||||
|
</view> |
||||
|
<view class="osm-btn-box"> |
||||
|
<picker class="osm-check" :range="iccardList" @change="checkPickerChange"> |
||||
|
<view class="oc-btn" hover-class="hover-active">查询卡号</view> |
||||
|
</picker> |
||||
|
<view class="osm-btn" hover-class="hover-active" @click="modalBtn(2)">确认</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 弹框 ic卡绑定成功 --> |
||||
|
<view class="ox-dark-mask" v-if="isShowSuccessIC" @touchmove.stop.prevent="moveHandle"> |
||||
|
<view class="odm-select-modal"> |
||||
|
<view class="osm-title">绑定成功</view> |
||||
|
<view class="osm-line"> |
||||
|
<view>卡号:{{sucInfo.iccard.erp_iccard_no || '-'}}</view> |
||||
|
<view>关联订单号:{{sucInfo.order_no || ''}}</view> |
||||
|
<view>门店名称:{{sucInfo.stadium_name || '-'}}</view> |
||||
|
</view> |
||||
|
<view class="osm-line"> |
||||
|
<view>订单类型:{{zh_order_type(sucInfo.order_type)}}</view> |
||||
|
<view>项目名称:{{sucInfo.project || '-'}}</view> |
||||
|
<view>购买者昵称:{{sucInfo.nickname || '-'}}</view> |
||||
|
</view> |
||||
|
<view class="osm-btn" hover-class="hover-active" @click="okChange">好的</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '@/utils/util'; |
||||
|
import deviceServer from '../../../js/device_server'; |
||||
|
import deviceApi from '../../../js/device_api'; |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
props: { |
||||
|
orderInfo: { |
||||
|
type: Object, |
||||
|
default: ()=>({}) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['brandInfo']), |
||||
|
zh_pay_status(){ |
||||
|
// 订单状态 1已支付待使用2已使用3已失效4已退款 |
||||
|
return status =>{ |
||||
|
if(status == 8)return '使用中'; // 20210528 新增状态 |
||||
|
const _obj = { |
||||
|
'0': '未付款', |
||||
|
'1': '待使用', |
||||
|
'2': '已使用', |
||||
|
'3': '已失效', |
||||
|
'4': '已退款', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
zh_verify_type(){ |
||||
|
/** |
||||
|
* 20210527 新增核销方式 |
||||
|
* verify_type: 核销方式 |
||||
|
* 1: 验证码核销(pad)2: 人脸验证(pad)3: 扫码验证(pad)4: 扫码器验证(pad) |
||||
|
* 5: 验证码核销(商家助手)6: 扫码核销(商家助手) 7: 扫码器核销(门闸) |
||||
|
*/ |
||||
|
return status =>{ |
||||
|
return [ |
||||
|
'扫码器核销(门闸)', |
||||
|
'验证码核销(pad)', |
||||
|
'人脸验证(pad)', |
||||
|
'扫码验证(pad)', |
||||
|
'扫码器验证(pad)', |
||||
|
'验证码核销(商家助手)', |
||||
|
'扫码核销(商家助手)', |
||||
|
][status] || '-'; |
||||
|
// const _obj = { |
||||
|
// '0': '未核销', |
||||
|
// '1': '核销码核销', |
||||
|
// '2': '人脸核销', |
||||
|
// '3': '扫码核销', |
||||
|
// '4': '商家扫码', |
||||
|
// } |
||||
|
// return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
zh_verify_status(){ |
||||
|
// 核销状态 -1/0/1/2/3/4 已分享/无效/待使用/已核销/已失效/已退款 |
||||
|
return status =>{ |
||||
|
if(status == 8)return '使用中'; // 20210528 新增状态 |
||||
|
const _obj = { |
||||
|
'-1': '已分享', |
||||
|
'0': '无效', |
||||
|
'1': '待使用', |
||||
|
'2': '已使用', |
||||
|
'3': '已失效', |
||||
|
'4': '已退款', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
zh_pay_type(){ |
||||
|
// 支付类型 0微信支付1支付宝支付2储值卡支付 |
||||
|
return status =>{ |
||||
|
const _obj = { |
||||
|
'0': '微信支付', |
||||
|
'1': '支付宝支付', |
||||
|
'2': '储值卡支付', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
zh_spec_names(){ |
||||
|
let { orderInfo } = this |
||||
|
if(!orderInfo.person_number_spec_names)return ''; |
||||
|
let spec = orderInfo.person_number_spec_names.join('+') |
||||
|
return spec || ''; |
||||
|
}, |
||||
|
zh_order_type(){ |
||||
|
//订单类型 0预约订单 1课程订单 |
||||
|
return status =>{ |
||||
|
const _obj = { |
||||
|
'0': '预约订单', |
||||
|
'1': '课程订单', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isShowBindIC: false, //绑定ic卡弹框 |
||||
|
isShowSelectIC: false, //仓库选择ic卡弹框 |
||||
|
isShowSuccessIC: false,//ic卡绑定成功弹框 |
||||
|
bindInfo: { //绑定ic卡所需参数 |
||||
|
iccard_no: '', //卡号 |
||||
|
iccard_price: '', //单价 |
||||
|
iccard_otherfee: '', //其他费用 |
||||
|
iccard_remarks: '', //备注说明 |
||||
|
}, |
||||
|
depotInfo: { |
||||
|
ic_name: '', //仓库名称 |
||||
|
ic_no: '', //仓库下卡号 |
||||
|
}, |
||||
|
depotList: [], //picker仓库名字列表 |
||||
|
curIdx: -1, |
||||
|
storehouseList: [], //仓库列表 |
||||
|
iccardList: [], //ic卡列表 |
||||
|
sucInfo: {}, //绑定IC卡成功信息 |
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
recoverBtn(ele){ |
||||
|
console.warn('orderInfo',this.orderInfo); |
||||
|
console.warn('ele', ele); |
||||
|
let { orderInfo } = this; |
||||
|
util.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否确认恢复该验证码为待使用状态', |
||||
|
success: res=> { |
||||
|
|
||||
|
if(res.confirm){ |
||||
|
util.showLoad(); |
||||
|
deviceServer.get({ |
||||
|
url: deviceApi.recoveryToSuccess, |
||||
|
data: { |
||||
|
brand_id: orderInfo.brand_id || '', |
||||
|
order_no: orderInfo.order_no || '', |
||||
|
session_id: ele.id || '', |
||||
|
}, |
||||
|
isDefaultGet: false |
||||
|
}) |
||||
|
.then(e=>{ |
||||
|
util.hideLoad(); |
||||
|
if(e.data.code == 0){ |
||||
|
util.showNone(e.data.message || '操作成功!'); |
||||
|
setTimeout(_=>{ |
||||
|
this.$emit('recoverBtn'); |
||||
|
},1200) |
||||
|
}else{ |
||||
|
util.showNone(e.data.message || '操作失败!'); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
.catch(util.hideLoad) |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
moveHandle(){}, |
||||
|
modalBtn(type){ |
||||
|
// type: 1绑定ic卡弹框确认按钮 2仓库选择ic卡弹框确认按钮 |
||||
|
let { bindInfo, depotInfo } = this |
||||
|
if(type == 1){ |
||||
|
if(bindInfo.iccard_no == '')return util.showNone('请输入ic卡卡号'); |
||||
|
if(bindInfo.iccard_price == '')return util.showNone('请输入单价'); |
||||
|
return this.getCheckIccard(); |
||||
|
} |
||||
|
if(type == 2){ |
||||
|
if(depotInfo.ic_name == '')return util.showNone('请选择仓库'); |
||||
|
if(depotInfo.ic_no == '')return util.showNone('请输入ic卡卡号'); |
||||
|
this.isShowModal() |
||||
|
this.bindInfo.iccard_no = depotInfo.ic_no |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
isShowModal(){ |
||||
|
this.isShowBindIC = !this.isShowBindIC; |
||||
|
this.isShowSelectIC = !this.isShowSelectIC; |
||||
|
}, |
||||
|
// 仓库按钮 |
||||
|
depotChange(){ |
||||
|
this.isShowModal(); |
||||
|
this.getStoreHouseList() |
||||
|
}, |
||||
|
// 选择仓库 |
||||
|
pickerChange(e){ |
||||
|
console.log(e); |
||||
|
this.curIdx = e.detail.value |
||||
|
let _list = this.depotList || []; |
||||
|
this.depotInfo.ic_name = _list[e.detail.value] || '' |
||||
|
}, |
||||
|
// 仓库列表 |
||||
|
getStoreHouseList(){ |
||||
|
let { brandInfo } = this |
||||
|
util.showLoad(); |
||||
|
deviceServer.get({ |
||||
|
url: deviceApi.storeHouseList, |
||||
|
data: { |
||||
|
brand_id: brandInfo.brand.id, |
||||
|
}, |
||||
|
failMsg: '加载失败!' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad() |
||||
|
// setTimeout(()=>uni.navigateBack(),1200); |
||||
|
let _list = res.list || [] |
||||
|
this.storehouseList = _list |
||||
|
for(var i in _list){ |
||||
|
this.depotList.push(_list[i].storehouse_name) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
inputChange(e){ |
||||
|
if(this.depotInfo.ic_name == '')return; |
||||
|
this.getICCardList({ |
||||
|
key: e.detail.value, |
||||
|
}) |
||||
|
}, |
||||
|
// 选择ic卡 |
||||
|
checkPickerChange(e){ |
||||
|
console.log(e); |
||||
|
let _list = this.iccardList || []; |
||||
|
this.depotInfo.ic_no = _list[e.detail.value] || '' |
||||
|
}, |
||||
|
// ic卡列表 |
||||
|
getICCardList({key=''}){ |
||||
|
let { brandInfo, curIdx, storehouseList } = this |
||||
|
this.iccardList.splice(0) |
||||
|
util.showLoad(); |
||||
|
deviceServer.get({ |
||||
|
url: deviceApi.iccardList, |
||||
|
data: { |
||||
|
brand_id: brandInfo.brand.id, |
||||
|
store_house_id: storehouseList[curIdx].id, |
||||
|
store_house_type: storehouseList[curIdx].store_house_type, |
||||
|
key, |
||||
|
}, |
||||
|
failMsg: '加载失败!' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad() |
||||
|
let _list = res.list || [] |
||||
|
for(var i in _list){ |
||||
|
this.iccardList.push(_list[i].erp_iccard_no) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 校验ic卡 |
||||
|
getCheckIccard(){ |
||||
|
let { brandInfo, bindInfo } = this |
||||
|
util.showLoad(); |
||||
|
deviceServer.get({ |
||||
|
url: deviceApi.checkIccard, |
||||
|
data: { |
||||
|
brand_id: brandInfo.brand.id, |
||||
|
erp_iccard_no: bindInfo.iccard_no, |
||||
|
}, |
||||
|
failMsg: '请求失败!' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad() |
||||
|
this.getBindIcCard() |
||||
|
}) |
||||
|
}, |
||||
|
// 绑定ic卡 |
||||
|
getBindIcCard(){ |
||||
|
let { brandInfo, bindInfo, orderInfo } = this |
||||
|
util.showLoad(); |
||||
|
deviceServer.get({ |
||||
|
url: deviceApi.bindIcCard, |
||||
|
data: { |
||||
|
brand_id: brandInfo.brand.id, |
||||
|
price: bindInfo.iccard_price, //单价 |
||||
|
iccard_no: bindInfo.iccard_no, //IC卡卡号 |
||||
|
delivery_expenses: bindInfo.iccard_otherfee, //其他费用 |
||||
|
delivery_order_number: orderInfo.order_no, //关联单号 |
||||
|
delivery_desc: bindInfo.iccard_otherfee, //备注 |
||||
|
}, |
||||
|
failMsg: '请求失败!' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad() |
||||
|
this.sucInfo = res || {}; |
||||
|
this.isShowBindIC = false; |
||||
|
this.isShowSuccessIC = true; |
||||
|
}) |
||||
|
}, |
||||
|
bindICCardChange: util.debounce(function(type){ |
||||
|
// type: 1解绑ic卡 2绑定ic卡 |
||||
|
let { brandInfo, orderInfo } = this |
||||
|
if(type == 1){ |
||||
|
util.showModal({ |
||||
|
title: '提示', |
||||
|
content: '确认解绑ic卡吗?', |
||||
|
showCancel: true, |
||||
|
success: modalRes => { |
||||
|
if (modalRes.confirm) { |
||||
|
util.showLoad(); |
||||
|
deviceServer.get({ |
||||
|
url: deviceApi.unbindIccard, |
||||
|
data: { |
||||
|
brand_id: brandInfo.brand.id, |
||||
|
order_no: orderInfo.order_no, |
||||
|
iccard_no: orderInfo.bind_iccard_info.erp_iccard_no, |
||||
|
}, |
||||
|
failMsg: '请求失败!' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad() |
||||
|
util.showNone('操作成功!'); |
||||
|
this.$emit('okChange'); |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
if(type == 2){ |
||||
|
this.isShowBindIC = !this.isShowBindIC |
||||
|
} |
||||
|
},300,300), |
||||
|
// 扫描条形码 |
||||
|
scanChange(){ |
||||
|
let that = this; |
||||
|
// 允许从相机和相册扫码 |
||||
|
uni.scanCode({ |
||||
|
success: function(res) { |
||||
|
that.bindInfo.iccard_no = res.result; |
||||
|
console.log('条码类型:' + res.scanType); |
||||
|
console.log('条码内容:' + res.result); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
okChange(){ |
||||
|
this.isShowSuccessIC = !this.isShowSuccessIC |
||||
|
this.$emit('okChange'); |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" > |
||||
|
@import '~style/public.scss'; |
||||
|
.reservation-people{ |
||||
|
margin-bottom: 24rpx; |
||||
|
.rp-head{ |
||||
|
margin: 24rpx 24rpx 0rpx; |
||||
|
padding: 30rpx; |
||||
|
background-color: #FFF; |
||||
|
border-radius: 10rpx 10rpx 0px 0px; |
||||
|
.rh-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; |
||||
|
} |
||||
|
} |
||||
|
.rh-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; |
||||
|
} |
||||
|
.rl-active{ |
||||
|
color: #009874; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rh-ic{ |
||||
|
margin-top: 40rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #009874; |
||||
|
color: #FFFFFF; |
||||
|
font-size: 32rpx; |
||||
|
text-align: center; |
||||
|
width: 500rpx; |
||||
|
// height: 112rpx; |
||||
|
// line-height: 112rpx; |
||||
|
padding: 34rpx 0rpx; |
||||
|
margin-left: 71rpx; |
||||
|
} |
||||
|
.rh-ic-untie{ |
||||
|
padding: 32rpx 0rpx; |
||||
|
color: #009874; |
||||
|
border: 2rpx solid #009874; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.rp-box{ |
||||
|
margin: 24rpx 24rpx 0rpx; |
||||
|
padding: 30rpx; |
||||
|
background-color: #FFF; |
||||
|
border-radius: 10rpx; |
||||
|
.rb-title{ |
||||
|
color: #9A9A9D; |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
>text{ |
||||
|
color: #333333; |
||||
|
font-size: 28rpx; |
||||
|
margin-left: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
.rb-time{ |
||||
|
line-height: 48rpx; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
>view{ |
||||
|
color: #9A9A9D; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
>text{ |
||||
|
color: #333333; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
.rb-code{ |
||||
|
.rc-item{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
margin-top: 24rpx; |
||||
|
.ri-tit{ |
||||
|
flex-shrink: 0; |
||||
|
color: #9A9A9D; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 46rpx; |
||||
|
} |
||||
|
.ri-section{ |
||||
|
flex-grow: 1; |
||||
|
.rs-view{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
>view:first-child{ |
||||
|
min-width: 0; |
||||
|
color: #333333; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 46rpx; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
.s-btn{ |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 10upx; |
||||
|
padding: 0 22upx; |
||||
|
height: 44upx; |
||||
|
line-height: 44upx; |
||||
|
font-size: 28upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: $themeColor; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.rs-active{ |
||||
|
>view:first-child{ |
||||
|
color: #009874; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rb-name{ |
||||
|
margin-bottom: 8rpx; |
||||
|
color: #333333; |
||||
|
>view{ |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
>text{ |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
.rb-line{ |
||||
|
>view{ |
||||
|
line-height: 52rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #9A9A9D; |
||||
|
>text{ |
||||
|
color: #333333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.rb-section{ |
||||
|
margin: 30rpx 0rpx 24rpx; |
||||
|
border-top: 2rpx solid #D8D8D8; |
||||
|
.rs-line{ |
||||
|
margin-top: 26rpx; |
||||
|
@include centerFlex(space-between); |
||||
|
>view{ |
||||
|
color: #333333; |
||||
|
&:first-child{ |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
&:nth-child(2){ |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rb-total{ |
||||
|
@include centerFlex(flex-end); |
||||
|
>view{ |
||||
|
color: #333333; |
||||
|
font-size: 28rpx; |
||||
|
>text{ |
||||
|
color: #FF873D; |
||||
|
&:first-child{ |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
&:nth-child(2){ |
||||
|
font-size: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.odm-ic-modal { |
||||
|
position: absolute; |
||||
|
left: 65rpx; |
||||
|
top: 10%; |
||||
|
background-color: #fff; |
||||
|
width: 620rpx; |
||||
|
padding: 30rpx 0rpx 80rpx; |
||||
|
border-radius: 10rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.oim-close{ |
||||
|
width: 100%; |
||||
|
@include centerFlex(flex-end); |
||||
|
>image{ |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
margin-right: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
.oim-tit { |
||||
|
color: #333; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 700; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
.oim-card{ |
||||
|
width: 538rpx; |
||||
|
position: relative; |
||||
|
padding: 20rpx 0rpx; |
||||
|
margin-top: 38rpx; |
||||
|
border-radius: 10rpx; |
||||
|
border: 2rpx solid #D8D8D8; |
||||
|
@include centerFlex(flex-start); |
||||
|
.oc-sign{ |
||||
|
position: absolute; |
||||
|
color: #EA5061; |
||||
|
font-size: 28rpx; |
||||
|
margin-left: -20rpx; |
||||
|
} |
||||
|
.oc-depot{ |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
color: #fff; |
||||
|
font-size: 28rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 6rpx; |
||||
|
background-color: #333333; |
||||
|
margin: 0rpx 20rpx; |
||||
|
} |
||||
|
& input { |
||||
|
height: 48rpx; |
||||
|
padding: 0rpx 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
flex-grow: 1; |
||||
|
border-left: 2rpx solid #D8D8D8; |
||||
|
} |
||||
|
.oc-icon{ |
||||
|
flex-shrink: 0; |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
.oim-tips{ |
||||
|
width: 518rpx; |
||||
|
color: #9A9A9D; |
||||
|
font-size: 24rpx; |
||||
|
margin: 12rpx 0rpx 20rpx; |
||||
|
} |
||||
|
.oim-ipt{ |
||||
|
width: 538rpx; |
||||
|
padding: 20rpx 0rpx; |
||||
|
border: 2rpx solid #D8D8D8; |
||||
|
border-radius: 10rpx; |
||||
|
margin-bottom: 36rpx; |
||||
|
& input { |
||||
|
flex-grow: 1; |
||||
|
height: 48rpx; |
||||
|
color: #333; |
||||
|
font-size: 28rpx; |
||||
|
padding: 0rpx 20rpx; |
||||
|
} |
||||
|
} |
||||
|
.oim-btn{ |
||||
|
width: 240rpx; |
||||
|
height: 88rpx; |
||||
|
margin-top: 44rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #009874; |
||||
|
color: #FFFFFF; |
||||
|
font-size: 32rpx; |
||||
|
line-height: 88rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.odm-select-modal{ |
||||
|
position: absolute; |
||||
|
left: 65rpx; |
||||
|
top: 16%; |
||||
|
background-color: #fff; |
||||
|
width: 620rpx; |
||||
|
padding: 30rpx 0rpx 80rpx; |
||||
|
border-radius: 10rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.osm-close{ |
||||
|
width: 100%; |
||||
|
@include centerFlex(flex-end); |
||||
|
>image{ |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
margin-right: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
.osm-tit { |
||||
|
color: #333; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 700; |
||||
|
margin: 16rpx 0rpx 38rpx; |
||||
|
} |
||||
|
.osm-picker{ |
||||
|
width: 538rpx; |
||||
|
} |
||||
|
.osm-ipt{ |
||||
|
width: 538rpx; |
||||
|
padding: 20rpx 0rpx; |
||||
|
border: 2rpx solid #D8D8D8; |
||||
|
border-radius: 10rpx; |
||||
|
margin-bottom: 36rpx; |
||||
|
@include centerFlex(flex-start); |
||||
|
& input { |
||||
|
flex-grow: 1; |
||||
|
height: 48rpx; |
||||
|
color: #333; |
||||
|
font-size: 28rpx; |
||||
|
padding: 0rpx 20rpx; |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
margin-right: 22rpx; |
||||
|
} |
||||
|
} |
||||
|
.osm-btn-box{ |
||||
|
width: 100%; |
||||
|
padding: 0rpx 40rpx; |
||||
|
@include centerFlex(space-between); |
||||
|
} |
||||
|
.osm-btn{ |
||||
|
width: 240rpx; |
||||
|
height: 88rpx; |
||||
|
margin-top: 44rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #009874; |
||||
|
color: #FFFFFF; |
||||
|
font-size: 32rpx; |
||||
|
line-height: 88rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.osm-check{ |
||||
|
width: 240rpx; |
||||
|
.oc-btn{ |
||||
|
width: 240rpx; |
||||
|
height: 88rpx; |
||||
|
margin-top: 44rpx; |
||||
|
border-radius: 10rpx; |
||||
|
border: 2rpx solid #009874; |
||||
|
color: #009874; |
||||
|
font-size: 32rpx; |
||||
|
line-height: 88rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.osm-title{ |
||||
|
margin: 48rpx 0rpx 34rpx; |
||||
|
color: #333; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
.osm-line{ |
||||
|
width: 504rpx; |
||||
|
margin-bottom: 26rpx; |
||||
|
>view{ |
||||
|
color: #333333; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 48rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
@ -0,0 +1,330 @@ |
|||||
|
<template> |
||||
|
<!-- pageInfo.order_type 场次(0) --> |
||||
|
<view class="reservation-site"> |
||||
|
<view class="rs-head"> |
||||
|
<view class="rh-store"> |
||||
|
<image :src="orderInfo.stadium_logo || '' "></image> |
||||
|
<view>{{orderInfo.stadium_name || '-'}}</view> |
||||
|
</view> |
||||
|
<view class="rh-line"> |
||||
|
<view>订单编号:<text>{{orderInfo.order_no || ''}}</text></view> |
||||
|
<view><text :class="[orderInfo.pay_status==1?'rl-active':'']">{{zh_pay_status(orderInfo.pay_status)}}</text></view> |
||||
|
</view> |
||||
|
<view class="rh-line"> |
||||
|
<view>创建时间:<text>{{orderInfo.created_at || '-'}}</text></view> |
||||
|
</view> |
||||
|
<view class="rh-line"> |
||||
|
<view>用户昵称:<text>{{orderInfo.nickname || '-'}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rs-box"> |
||||
|
<view class="rb-title">验证信息</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">验证码:</view> |
||||
|
<view :class="['rl-code1', orderInfo.pay_status==2?'rl-code2':'', orderInfo.pay_status==3?'rl-code3':'', orderInfo.pay_status==4?'rl-code4':'']" >{{orderInfo.verify_code || '-'}}<text>({{zh_pay_status(orderInfo.pay_status)}})</text></view> |
||||
|
</view> |
||||
|
<!-- 已使用 --> |
||||
|
<block v-if="orderInfo.pay_status==2"> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">核销方式:</view> |
||||
|
<text class="rl-text">{{zh_verify_type(orderInfo.verify_type)}}</text> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">核销时间:</view> |
||||
|
<text class="rl-text">{{orderInfo.verify_time || '-'}}</text> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
<view class="rs-box"> |
||||
|
<view class="rb-title">预订信息</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">预订项目:</view> |
||||
|
<text class="rl-text">{{orderInfo.venue_type_name || '-'}}</text> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">预订日期:</view> |
||||
|
<text class="rl-text">{{orderInfo.date || '-'}}</text> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">预订场次:</view> |
||||
|
<view> |
||||
|
<block v-for="(e,i) in orderInfo.sessions" :key="i"> |
||||
|
<view class="rl-text">{{e.venue_name||'-'}} {{e.duration||'-'}}(¥{{e.price||0}})</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<view class="rb-section"> |
||||
|
<view class="rs-line"> |
||||
|
<view>金额小计</view> |
||||
|
<view>¥{{orderInfo.amount || 0}}</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view>积分抵扣</view> |
||||
|
<view>-¥{{orderInfo.deduction_amount || 0}}</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view>折扣金额</view> |
||||
|
<view>-¥{{orderInfo.discount_amount || 0}}</view> |
||||
|
</view> |
||||
|
<view class="rs-line"> |
||||
|
<view>优惠券优惠</view> |
||||
|
<view>-¥{{orderInfo.coupons_amount || 0}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rb-total"> |
||||
|
<view>合计支付:<text>¥</text><text>{{orderInfo.pay_amount || 0}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="rs-box"> |
||||
|
<view class="rb-title">支付信息</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">支付方式:</view> |
||||
|
<text class="rl-text">{{zh_pay_type(orderInfo.pay_type)}}</text> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">支付时间:</view> |
||||
|
<text class="rl-text">{{orderInfo.pay_time || '-'}}</text> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">微信交易号:</view> |
||||
|
<text class="rl-text">{{orderInfo.trade_no || ''}}</text> |
||||
|
</view> |
||||
|
<!-- 已退款 --> |
||||
|
<block v-if="orderInfo.pay_status == 4"> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">退款时间:</view> |
||||
|
<text class="rl-text">{{orderInfo.refund_time || '-'}}</text> |
||||
|
</view> |
||||
|
<view class="rb-line"> |
||||
|
<view class="rl-view">退款单号:</view> |
||||
|
<text class="rl-text">{{orderInfo.refund_no || '-'}}</text> |
||||
|
</view> |
||||
|
</block> |
||||
|
<!-- 已失效 --> |
||||
|
<view class="rb-line" v-if="orderInfo.pay_status == 3"> |
||||
|
<view class="rl-view">失效时间:</view> |
||||
|
<text class="rl-text">{{orderInfo.end_time || '-'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
orderInfo: { |
||||
|
type: Object, |
||||
|
default: ()=>({}) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
zh_pay_status(){ |
||||
|
// 订单状态 1已支付待使用2已使用3已失效4已退款 |
||||
|
return status =>{ |
||||
|
if(status == 8)return '使用中'; // 20210528 新增状态 |
||||
|
const _obj = { |
||||
|
'0': '未付款', |
||||
|
'1': '待使用', |
||||
|
'2': '已使用', |
||||
|
'3': '已失效', |
||||
|
'4': '已退款', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
zh_verify_type(){ |
||||
|
/** |
||||
|
* 20210527 新增核销方式 |
||||
|
* verify_type: 核销方式 |
||||
|
* 1: 验证码核销(pad)2: 人脸验证(pad)3: 扫码验证(pad)4: 扫码器验证(pad) |
||||
|
* 5: 验证码核销(商家助手)6: 扫码核销(商家助手) 7: 扫码器核销(门闸) |
||||
|
*/ |
||||
|
return status =>{ |
||||
|
return [ |
||||
|
'扫码器核销(门闸)', |
||||
|
'验证码核销(pad)', |
||||
|
'人脸验证(pad)', |
||||
|
'扫码验证(pad)', |
||||
|
'扫码器验证(pad)', |
||||
|
'验证码核销(商家助手)', |
||||
|
'扫码核销(商家助手)', |
||||
|
][status] || '-'; |
||||
|
|
||||
|
// const _obj = { |
||||
|
// '0': '未核销', |
||||
|
// '1': '核销码核销', |
||||
|
// '2': '人脸核销', |
||||
|
// '3': '扫码核销', |
||||
|
// '4': '商家扫码', |
||||
|
// } |
||||
|
|
||||
|
// return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
zh_pay_type(){ |
||||
|
// 支付类型 0微信支付1支付宝支付2储值卡支付 |
||||
|
return status =>{ |
||||
|
const _obj = { |
||||
|
'0': '微信支付', |
||||
|
'1': '支付宝支付', |
||||
|
'2': '储值卡支付', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" > |
||||
|
@import '~style/public.scss'; |
||||
|
.reservation-site{ |
||||
|
margin-bottom: 24rpx; |
||||
|
.rs-head{ |
||||
|
margin: 24rpx 24rpx 0rpx; |
||||
|
padding: 30rpx; |
||||
|
background-color: #FFF; |
||||
|
border-radius: 10rpx 10rpx 0px 0px; |
||||
|
.rh-store{ |
||||
|
padding-bottom: 26rpx; |
||||
|
margin-bottom: 18rpx; |
||||
|
border-bottom: 2rpx solid #D8D8D8; |
||||
|
// @include centerFlex(flex-start); |
||||
|
display: flex; |
||||
|
// align-items: center; |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
.rh-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; |
||||
|
} |
||||
|
.rl-active{ |
||||
|
color: #009874; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.rs-box{ |
||||
|
margin: 24rpx 24rpx 0rpx; |
||||
|
padding: 30rpx; |
||||
|
background-color: #FFF; |
||||
|
border-radius: 10rpx; |
||||
|
.rb-title{ |
||||
|
color: #9A9A9D; |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.rb-line{ |
||||
|
line-height: 48rpx; |
||||
|
display: flex; |
||||
|
// align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
.rl-view{ |
||||
|
color: #9A9A9D; |
||||
|
font-size: 28rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.rl-text{ |
||||
|
color: #333333; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
.rl-code1{ |
||||
|
color: #009874; |
||||
|
font-size: 28rpx; |
||||
|
>text{ |
||||
|
color: #009874; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
.rl-code2{ |
||||
|
color: #333; |
||||
|
font-size: 28rpx; |
||||
|
>text{ |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
.rl-code3{ |
||||
|
color: #9A9A9D; |
||||
|
font-size: 28rpx; |
||||
|
>text{ |
||||
|
color: #9A9A9D; |
||||
|
} |
||||
|
} |
||||
|
.rl-code4{ |
||||
|
color: #9A9A9D; |
||||
|
font-size: 28rpx; |
||||
|
>text{ |
||||
|
color: #EA5061; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rb-section{ |
||||
|
margin: 30rpx 0rpx 24rpx; |
||||
|
border-top: 2rpx solid #D8D8D8; |
||||
|
.rs-line{ |
||||
|
margin-top: 26rpx; |
||||
|
@include centerFlex(space-between); |
||||
|
>view{ |
||||
|
color: #333333; |
||||
|
&:first-child{ |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
&:nth-child(2){ |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rb-total{ |
||||
|
@include centerFlex(flex-end); |
||||
|
>view{ |
||||
|
color: #333333; |
||||
|
font-size: 28rpx; |
||||
|
>text{ |
||||
|
color: #FF873D; |
||||
|
&:first-child{ |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
&:nth-child(2){ |
||||
|
font-size: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,341 @@ |
|||||
|
<template> |
||||
|
<view class="timing-details"> |
||||
|
<view class="td-head"> |
||||
|
<view class="th-store"> |
||||
|
<image :src="orderInfo.stadium_logo || ''"></image> |
||||
|
<view>{{orderInfo.stadium_name || '-'}}</view> |
||||
|
</view> |
||||
|
<view class="th-line"> |
||||
|
<view>订单编号:<text>{{orderInfo.order_no || '-'}}</text></view> |
||||
|
<view><text :class="[orderInfo.pay_status == 0?'tl-active':'']">{{zh_order_status(orderInfo.pay_status)}}</text></view> |
||||
|
</view> |
||||
|
<view class="th-line"> |
||||
|
<view>创建时间:<text>{{orderInfo.model.created_at || '-'}}</text></view> |
||||
|
</view> |
||||
|
<view class="th-line"> |
||||
|
<view>用户昵称:<text>{{orderInfo.nickname || '-'}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="td-box"> |
||||
|
<view class="tb-title">计时信息</view> |
||||
|
<view class="tb-line"> |
||||
|
<!-- 项目 场时有 人时没有 order_type: 1场时 2人时 --> |
||||
|
<view v-if="orderInfo.order_type==1">项目:<text>{{orderInfo.project_name || '-'}}({{orderInfo.venue_name || '-'}})</text></view> |
||||
|
<view>进场时间:<text>{{orderInfo.start_time || '-'}}</text></view> |
||||
|
<!-- 离场时间 已完成显示 --> |
||||
|
<view v-if="orderInfo.pay_status != 0">离场时间:<text>{{orderInfo.end_time || '-'}}</text></view> |
||||
|
<view>时长合计:<text>{{orderInfo.extension.duration || '-'}}</text></view> |
||||
|
</view> |
||||
|
<view class="tb-section" v-if="orderInfo.pay_status!= 0"> |
||||
|
<view class="ts-line"> |
||||
|
<view>金额小计</view> |
||||
|
<view>¥{{orderInfo.amount || 0}}</view> |
||||
|
</view> |
||||
|
<view class="ts-line"> |
||||
|
<view>积分抵扣</view> |
||||
|
<view>-¥{{orderInfo.deduction_amount ||0}}</view> |
||||
|
</view> |
||||
|
<view class="ts-line"> |
||||
|
<view>折扣金额</view> |
||||
|
<view>-¥{{orderInfo.discount_amount||0}}</view> |
||||
|
</view> |
||||
|
<view class="ts-line"> |
||||
|
<view>优惠券优惠</view> |
||||
|
<view>-¥{{orderInfo.coupons_amount || 0}}</view> |
||||
|
</view> |
||||
|
<view class="ts-total"> |
||||
|
<view>合计支付:<text>¥</text><text>{{orderInfo.pay_amount ||0}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="td-box" v-if="orderInfo.pay_status != 0"> |
||||
|
<view class="tb-title">支付信息</view> |
||||
|
<view class="tb-line"> |
||||
|
<view>支付方式:<text>{{zh_pay_type(orderInfo.pay_type)}}</text></view> |
||||
|
<view>支付时间:<text>{{orderInfo.pay_time || '-'}}</text></view> |
||||
|
<view>微信交易号:<text>{{orderInfo.trade_no || ''}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="td-btn" @click="isShowEnd = !isShowEnd" v-if="orderInfo.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 { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
props: { |
||||
|
orderInfo: { |
||||
|
type: Object, |
||||
|
default: ()=>({}) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['brandInfo']), |
||||
|
zh_order_status(){ |
||||
|
// 订单状态 0计费中1已完成 |
||||
|
return status =>{ |
||||
|
const _obj = { |
||||
|
'0': '计费中', |
||||
|
'1': '已完成', |
||||
|
'4': '已退款', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
zh_pay_type(){ |
||||
|
// 支付类型 0微信支付1支付宝支付2储值卡支付 |
||||
|
return status =>{ |
||||
|
const _obj = { |
||||
|
'0': '微信支付', |
||||
|
'1': '支付宝支付', |
||||
|
'2': '储值卡支付', |
||||
|
'3': '商家主动结束计费', |
||||
|
} |
||||
|
return _obj[`${status}`] || '-' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isShowEnd: false, |
||||
|
input_amount: "", |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
confirmChange(){ |
||||
|
let { brandInfo, orderInfo, input_amount } = this |
||||
|
if(input_amount == '')return util.showNone('请输入金额!'); |
||||
|
util.showLoad(); |
||||
|
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); |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</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{ |
||||
|
>view{ |
||||
|
line-height: 52rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #9A9A9D; |
||||
|
>text{ |
||||
|
color: #333333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.tb-section{ |
||||
|
margin-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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,117 @@ |
|||||
|
<template> |
||||
|
<view class="order-details"> |
||||
|
<block v-if="optionsQuery.order_type==3"> |
||||
|
<!-- pageInfo.order_type 场次(0)/人次(1) --> |
||||
|
<reservation-site-detail :orderInfo="pageInfo" v-if="pageInfo.order_type == 0"></reservation-site-detail> |
||||
|
<reservation-people-detail :orderInfo="pageInfo" v-if="pageInfo.order_type == 1" @recoverBtn="peopleRecoverBtn" @okChange="okChange"></reservation-people-detail> |
||||
|
</block> |
||||
|
<timing-detail :orderInfo="pageInfo" v-if="optionsQuery.order_type==1"></timing-detail> |
||||
|
<organize-detail :orderInfo="pageInfo" v-if="optionsQuery.order_type==10"></organize-detail> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import timingDetail from '../../components/order/timing_detail/timing_detail.vue' |
||||
|
import reservationSiteDetail from '../../components/order/reservation_site_detail/reservation_site_detail.vue'; |
||||
|
import reservationPeopleDetail from '../../components/order/reservation_people_detail/reservation_people_detail.vue'; |
||||
|
import organizeDetail from '../../components/order/organize_detail/organize_detail.vue'; |
||||
|
|
||||
|
import util from '@/utils/util'; |
||||
|
import deviceServer from '../../js/device_server'; |
||||
|
import deviceApi from '../../js/device_api'; |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'timing-detail': timingDetail, |
||||
|
'reservation-site-detail': reservationSiteDetail, |
||||
|
'reservation-people-detail': reservationPeopleDetail, |
||||
|
'organize-detail': organizeDetail, |
||||
|
}, |
||||
|
computed:{ |
||||
|
titleName(){ |
||||
|
let { optionsQuery } = this; |
||||
|
if(optionsQuery.order_type == 1)return '计时订单详情'; //PM: 2021/4/19 已做 |
||||
|
if(optionsQuery.order_type == 3)return '预约订单详情'; //PM: 2021/4/19 已做 |
||||
|
if(optionsQuery.order_type == 4)return '储值卡订单详情'; |
||||
|
if(optionsQuery.order_type == 5)return '积分商城订单详情'; |
||||
|
if(optionsQuery.order_type == 10)return '约玩订单详情'; |
||||
|
return '订单详情' |
||||
|
}, |
||||
|
...mapState(['brandInfo']), |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
optionsQuery: { |
||||
|
stadium_id: '', |
||||
|
order_type: -1, |
||||
|
}, |
||||
|
pageInfo: {}, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
console.log(options) |
||||
|
let _query = util.jsonPar(options.query); |
||||
|
this.optionsQuery = _query |
||||
|
console.log(_query) |
||||
|
this.$nextTick(_=>{ |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title: this.titleName |
||||
|
}) |
||||
|
}) |
||||
|
this.getPageInfo({ |
||||
|
orderType: _query.order_type, |
||||
|
stadium_id: _query.stadium_id, |
||||
|
order_no: _query.order_no, |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 次卡恢复二维码状态刷新订单 |
||||
|
peopleRecoverBtn(){ |
||||
|
this.okChange(); // 逻辑一样,刷新 |
||||
|
}, |
||||
|
getApiUrl(type){ |
||||
|
if(type == 1)return deviceApi.timeOrderDetail; |
||||
|
if(type == 3)return deviceApi.reservationDetail; |
||||
|
if(type == 10)return deviceApi.organizeOrderDetail; |
||||
|
|
||||
|
}, |
||||
|
getPageInfo({orderType, stadium_id, order_no}){ |
||||
|
util.showLoad(); |
||||
|
let postData = { |
||||
|
stadium_id, |
||||
|
order_no |
||||
|
} |
||||
|
if(orderType == 10){ |
||||
|
// postData['stadium_id'] = "151" |
||||
|
// postData['order_no'] = "JS20210506171239462527" |
||||
|
} |
||||
|
deviceServer.get({ |
||||
|
url: this.getApiUrl(orderType), |
||||
|
data: postData, |
||||
|
failMsg: '加载失败!' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad() |
||||
|
this.pageInfo = res |
||||
|
}) |
||||
|
.catch(util.hideLoad) |
||||
|
}, |
||||
|
okChange(){ |
||||
|
console.log("有了吗") |
||||
|
let { optionsQuery } = this |
||||
|
this.getPageInfo({ |
||||
|
orderType: optionsQuery.order_type, |
||||
|
stadium_id: optionsQuery.stadium_id, |
||||
|
order_no: optionsQuery.order_no, |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" > |
||||
|
@import '~style/public.scss'; |
||||
|
.order-details{ |
||||
|
|
||||
|
} |
||||
|
</style> |
After Width: 60 | Height: 60 | Size: 878 B |
After Width: 60 | Height: 60 | Size: 1.4 KiB |
After Width: 60 | Height: 60 | Size: 1.7 KiB |
After Width: 60 | Height: 60 | Size: 1.4 KiB |
After Width: 60 | Height: 60 | Size: 1.8 KiB |
After Width: 60 | Height: 60 | Size: 1.4 KiB |
After Width: 60 | Height: 60 | Size: 2.7 KiB |
After Width: 60 | Height: 60 | Size: 856 B |
After Width: 60 | Height: 60 | Size: 1.5 KiB |
After Width: 60 | Height: 60 | Size: 709 B |
After Width: 60 | Height: 60 | Size: 2.3 KiB |
After Width: 60 | Height: 60 | Size: 1.6 KiB |
After Width: 60 | Height: 60 | Size: 2.2 KiB |
After Width: 48 | Height: 48 | Size: 553 B |
@ -0,0 +1,243 @@ |
|||||
|
<template> |
||||
|
<view v-if="isShowCartList" class="hover-cart-list"> |
||||
|
<view @click="maskClick"></view> |
||||
|
<view class="hover-cart-list-dialog" :style="{ height:cartListDialogHeight }"> |
||||
|
<view class="hover-cart-list-dialog-title"> |
||||
|
<view>商品名称</view> |
||||
|
<view>售价</view> |
||||
|
<view>数量</view> |
||||
|
</view> |
||||
|
<scroll-view class="hover-cart-list-dialog-content" :style="{ height:cartListHeight }" :scroll-top="0" :scroll-y="cartListScroll"> |
||||
|
<view class="hover-cart-list-dialog-content-for" :style="{ borderBottom:cartListItemBorderBottom }" v-for="item in cartList" :key="item.id"> |
||||
|
<view class="hover-cart-list-dialog-content-col1"> |
||||
|
<view>{{ item.erp_goods_name }}</view> |
||||
|
<view>{{ item.erp_goods_specs }}</view> |
||||
|
</view> |
||||
|
<view class="hover-cart-list-dialog-content-col2"> |
||||
|
<input type="digit" :value="item.erp_goods_price" @confirm="cartInputConfirm($event, item.id)" @blur="cartInputConfirm($event, item.id)" /> |
||||
|
<view>元</view> |
||||
|
</view> |
||||
|
<view class="hover-cart-list-dialog-content-col3"> |
||||
|
<image mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="cartCountClick('sub', item.id)"></image> |
||||
|
<view>{{ item.count }}</view> |
||||
|
<image mode="aspectFit" src="/static/images/icon/retail/add.png" @click="cartCountClick('add', item.id)"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: [ |
||||
|
"isShowCartList", "cartList", "cartListScroll", |
||||
|
"cartListHeight", "cartListDialogHeight", "cartListItemBorderBottom" |
||||
|
], |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
// 底部遮罩点击 |
||||
|
maskClick() { |
||||
|
this.$emit("update:maskClick"); |
||||
|
}, |
||||
|
|
||||
|
// 购物车输入确认 |
||||
|
cartInputConfirm(event, id) { |
||||
|
// 修改购物车列表对应的价格 |
||||
|
// console.log(event.detail.value.match(/(([0-9]+\.[0-9]+)|([0-9]+))/g)); // 取正浮点数 跟 正整数 |
||||
|
|
||||
|
let value = parseFloat(event.detail.value ? event.detail.value : 0).toFixed(2); |
||||
|
for (let i = 0; i < this.cartList.length; ++i) { |
||||
|
if (this.cartList[i].id == id) { |
||||
|
this.$emit("update:cartInputConfirm", value, i); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 购物车列表数量选项触发 |
||||
|
cartCountClick(type, id) { |
||||
|
// 找点击的对应商品 |
||||
|
let item = null; |
||||
|
for (let i = 0; i < this.cartList.length; ++i) { |
||||
|
if (this.cartList[i].id == id) { |
||||
|
// item = this.cartList[i]; |
||||
|
this.$emit("update:cartCountClick", type, i); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.hover-cart-list { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
position: absolute; |
||||
|
left: 0rpx; |
||||
|
top: 0rpx; |
||||
|
|
||||
|
>view { |
||||
|
&:first-child { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
left: 0rpx; |
||||
|
bottom: 0rpx; |
||||
|
bottom: calc( 108rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
bottom: calc( 108rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
|
||||
|
background-color: rgba(0,0,0,0.5); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.hover-cart-list-dialog { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0rpx; |
||||
|
bottom: calc( 108rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
bottom: calc( 108rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
width: 100%; |
||||
|
height: 878rpx; |
||||
|
background-color: rgb(255,255,255); |
||||
|
border-top-left-radius: 30rpx; |
||||
|
border-top-right-radius: 30rpx; |
||||
|
|
||||
|
.hover-cart-list-dialog-title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 120rpx; |
||||
|
text-align: center; |
||||
|
padding-left: 34rpx; |
||||
|
padding-right: 36rpx; |
||||
|
|
||||
|
>view { |
||||
|
font-size: 32rpx; |
||||
|
color: rgb(51,51,51); |
||||
|
|
||||
|
&:first-child { |
||||
|
width: 258rpx; |
||||
|
|
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
width: 166rpx; |
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
width: 126rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.hover-cart-list-dialog-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-grow: 1; |
||||
|
height: 758rpx; |
||||
|
padding-left: 34rpx; |
||||
|
padding-right: 36rpx; |
||||
|
|
||||
|
.hover-cart-list-dialog-content-for { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
flex-grow: 1; |
||||
|
height: 114rpx; |
||||
|
border-bottom: 1rpx solid rgb(216,216,216); |
||||
|
margin-top: 30rpx; |
||||
|
|
||||
|
.hover-cart-list-dialog-content-col1 { |
||||
|
// display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
width: 258rpx; |
||||
|
|
||||
|
>view { |
||||
|
overflow: hidden; |
||||
|
word-break: nowrap; |
||||
|
text-overflow: ellipsis; /* 超出部分省略号 */ |
||||
|
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ |
||||
|
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ |
||||
|
-webkit-line-clamp: 1; /** 显示的行数 **/ |
||||
|
|
||||
|
&:first-child { |
||||
|
font-size: 28rpx; |
||||
|
color: rgb(51,51,51); |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
font-size: 24rpx; |
||||
|
color: rgb(154,154,157); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.hover-cart-list-dialog-content-col2 { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
color: rgb(51,51,51); |
||||
|
font-size: 28rpx; |
||||
|
text-align: center; |
||||
|
width: 166rpx; |
||||
|
|
||||
|
>input { |
||||
|
width: 132rpx; |
||||
|
height: 48rpx; |
||||
|
border: 2rpx solid rgb(216,216,216); |
||||
|
border-radius: 4rpx; |
||||
|
} |
||||
|
>view { |
||||
|
margin-left: 6rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.hover-cart-list-dialog-content-col3 { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 126rpx; |
||||
|
|
||||
|
>image { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
|
||||
|
&:first-child { |
||||
|
|
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
>view { |
||||
|
margin-left: 12rpx; |
||||
|
margin-right: 12rpx; |
||||
|
color: rgb(51,51,51); |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</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> |
@ -0,0 +1,12 @@ |
|||||
|
import { ORIGIN } from '../../../js/api'; |
||||
|
|
||||
|
export const RETAIL_API = { |
||||
|
assistantRetail:`${ORIGIN}/admin/assistant/retail`, // 收款出库
|
||||
|
assistantListErpGoods:`${ORIGIN}/admin/assistant/listErpGoods`, // 物品管理
|
||||
|
assistantListErpGoodsCate:`${ORIGIN}/admin/assistant/listErpGoodsCate`, // 物品分类管理
|
||||
|
assistantGetAssistantStadiums:`${ORIGIN}/admin/assistant/getAssistantStadiums`, // 店铺列表
|
||||
|
assistantListErpGoodsCateAndGoods:`${ORIGIN}/admin/assistant/listErpGoodsCateAndGoods`, // 分类物品列表
|
||||
|
assistantGetValueCardList:`${ORIGIN}/admin/assistant/getValueCardList`, // 搜索储蓄卡
|
||||
|
} |
||||
|
|
||||
|
export default RETAIL_API; |
@ -0,0 +1,10 @@ |
|||||
|
import { Server } from '../../../js/server'; |
||||
|
|
||||
|
class RetailServer extends Server { |
||||
|
constructor(props){ |
||||
|
super(props) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
export default new RetailServer(); |
@ -0,0 +1,20 @@ |
|||||
|
|
||||
|
export const tools = { |
||||
|
// px转rpx
|
||||
|
px2rpx: function(px) { |
||||
|
return (px / (uni.upx2px(px) / px)); |
||||
|
}, |
||||
|
|
||||
|
// 获取新的数据对象
|
||||
|
getNewObj: function(old) { |
||||
|
let newObj = {}; |
||||
|
|
||||
|
for (let key in old) { |
||||
|
newObj[key] = old[key]; |
||||
|
} |
||||
|
|
||||
|
return newObj; |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
export default tools; |
@ -0,0 +1,550 @@ |
|||||
|
<template> |
||||
|
<view class="cg-container"> |
||||
|
<view class="final-cart-list"> |
||||
|
<view class="final-cart-list-dialog-title"> |
||||
|
<view>商品名称</view> |
||||
|
<view>售价</view> |
||||
|
<view>数量</view> |
||||
|
</view> |
||||
|
<scroll-view class="final-cart-list-dialog-content" :scroll-top="0" :scroll-y="cartListScroll" :style="{ height:cartListFinalHeight, paddingBottom:cartListFinalPaddingBottom }"> |
||||
|
<view class="final-cart-list-dialog-content-for" :style="{ borderBottom:item.borderBottom }" v-for="item in cartListFinal" :key="item.id"> |
||||
|
<view class="final-cart-list-dialog-content-col1"> |
||||
|
<view>{{ item.erp_goods_name }}</view> |
||||
|
<view>{{ item.erp_goods_specs }}</view> |
||||
|
</view> |
||||
|
<view class="final-cart-list-dialog-content-col2"> |
||||
|
<input v-if="isEdited" type="digit" :value="item.erp_goods_price" @confirm="cartInputConfirm($event, item.id)" @blur="cartInputConfirm($event, item.id)" /> |
||||
|
<view v-if="!isEdited">{{item.erp_goods_price}}</view> |
||||
|
<view>元</view> |
||||
|
</view> |
||||
|
<view class="final-cart-list-dialog-content-col3"> |
||||
|
<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="cartCountClick('sub', item.id)"></image> |
||||
|
<view>{{ item.count }}</view> |
||||
|
<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="cartCountClick('add', item.id)"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="cg-footer"> |
||||
|
<view> |
||||
|
<view class="cg-footer-price"> |
||||
|
<view>合计:</view> |
||||
|
<view><text>¥</text>{{ totalPrice }}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="cg-footer-btn"> |
||||
|
<view class="cg-footer-btn-reedit" v-if="!isEdited" @click="cartReedit"><button hover-class="hover-active">重新编辑</button></view> |
||||
|
<view class="cg-footer-btn-confirm" @click="cartConfirm"><button hover-class="hover-active">{{cartConfirmText}}</button></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<retailPayWay |
||||
|
:show="retailPayWayWin.show" :price="totalPrice" :storeId="curStore.id" |
||||
|
@update:onClose="showOrHidePayWay" @update:onConfirm="goodsRetail" |
||||
|
> |
||||
|
</retailPayWay> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../../utils/util.js'; |
||||
|
import tools from '../../js/tools'; |
||||
|
import retailServer from '../../js/retail_server'; |
||||
|
import retailApi from '../../js/retail_api'; |
||||
|
|
||||
|
import retailPayWay from '../../components/retail_pay_way/retail_pay_way.vue'; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
'retailPayWay': retailPayWay |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isEdited: false, // 是否处于编辑模式 |
||||
|
curStore: {}, // 当前店铺信息 |
||||
|
cartListFinal: [], // 购物车最终列表数据 |
||||
|
totalPrice: 0, // 最终价格 |
||||
|
cartConfirmText: "收款出库", // 收款出库 || 确认 |
||||
|
cartListScroll: false, // 购物车列表是否能滚动 |
||||
|
cartListFinalHeight: "0rpx", // 最终显示的列表高度 |
||||
|
cartListFinalPaddingBottom: "0rpx", // 根据是否是异形屏来设置 |
||||
|
|
||||
|
retailPayWayWin: { |
||||
|
show: false, |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
let data = JSON.parse(decodeURIComponent(option.data)); |
||||
|
|
||||
|
this.curStore = data.curStore; |
||||
|
this.cartListFinal = []; |
||||
|
for (let i = 0; i < data.cartListFinal.length; ++i) { |
||||
|
this.cartListFinal.push(tools.getNewObj(data.cartListFinal[i])); |
||||
|
this.cartListFinal[i]["borderBottom"] = "1rpx solid rgb(216,216,216)"; |
||||
|
} |
||||
|
|
||||
|
// 最后一项默认不显示边框 |
||||
|
this.cartListFinal[this.cartListFinal.length - 1]["borderBottom"] = "0rpx solid rgb(216,216,216)"; |
||||
|
this.fixMainHeight(); // 适配主内容高度 |
||||
|
this.calcTotalPrice(); // 计算总价 |
||||
|
|
||||
|
util.showLoad(); |
||||
|
setTimeout(util.hideLoad, 1000); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 显示隐藏支付方式弹窗 |
||||
|
showOrHidePayWay(status) { |
||||
|
this.retailPayWayWin.show = status; |
||||
|
}, |
||||
|
|
||||
|
// 重新编辑 |
||||
|
cartReedit() { |
||||
|
this.isEdited = true; |
||||
|
this.cartConfirmText = "确认"; |
||||
|
}, |
||||
|
|
||||
|
// 商品出库 |
||||
|
goodsRetail(info) { |
||||
|
let _this = this; |
||||
|
let data = []; |
||||
|
for (let i = 0; i < this.cartListFinal.length; ++i) { |
||||
|
if (this.cartListFinal[i].count) { |
||||
|
data.push({ |
||||
|
id: this.cartListFinal[i].id, |
||||
|
name: this.cartListFinal[i].erp_goods_name, |
||||
|
price: this.cartListFinal[i].erp_goods_price, |
||||
|
nums: this.cartListFinal[i].count, |
||||
|
unit: this.cartListFinal[i].erp_goods_unit, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (!data.length) { |
||||
|
util.showNone("暂无商品数量!"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let newData = { |
||||
|
store_id: _this.curStore.id, |
||||
|
goods_data: data, |
||||
|
pay_type: info.type, |
||||
|
}; |
||||
|
if (info.inputValue) { |
||||
|
newData["other_pay_type"] = info.inputValue; |
||||
|
} |
||||
|
if (info.cardNo) { |
||||
|
newData["card_no"] = info.cardNo; |
||||
|
} |
||||
|
|
||||
|
util.showLoad(); |
||||
|
retailServer.post({ |
||||
|
url: retailApi.assistantRetail, |
||||
|
data: newData, |
||||
|
isDefaultGet: false, |
||||
|
failMsg: '出库失败!' |
||||
|
}).then(res => { |
||||
|
if (res.data.code == 0) { |
||||
|
uni.setStorage({ |
||||
|
key: "retailStatus", |
||||
|
data: "true", |
||||
|
success: function() { |
||||
|
util.hideLoad(); |
||||
|
uni.navigateBack({ |
||||
|
delta: 1 |
||||
|
});; |
||||
|
}, |
||||
|
fail: function(err) { |
||||
|
util.hideLoad(); |
||||
|
uni.navigateBack({ |
||||
|
delta: 1 |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
else { |
||||
|
util.showNone(res.data.message || '操作失败!'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 确认 || 收款出库 |
||||
|
cartConfirm() { |
||||
|
if (this.cartConfirmText == "确认") { |
||||
|
this.isEdited = false; |
||||
|
this.cartConfirmText = "收款出库"; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let mark = false; |
||||
|
for (let i = 0; i < this.cartListFinal.length; ++i) { |
||||
|
if (this.cartListFinal[i].count) { |
||||
|
mark = true; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (!mark) { |
||||
|
util.showNone("暂无商品数量!"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.showOrHidePayWay(true); // 弹出支付方式选择框 |
||||
|
// this.goodsRetail(); // 商品出库 |
||||
|
}, |
||||
|
|
||||
|
// 购物车输入确认 |
||||
|
cartInputConfirm(event, id) { |
||||
|
// 修改购物车列表对应的价格 |
||||
|
let value = parseFloat(event.detail.value ? event.detail.value : 0).toFixed(2); |
||||
|
for (let i = 0; i < this.cartListFinal.length; ++i) { |
||||
|
if (this.cartListFinal[i].id == id) { |
||||
|
this.cartListFinal[i].erp_goods_price = value; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.calcTotalPrice(); // 计算总价 |
||||
|
}, |
||||
|
|
||||
|
// 购物车列表数量选项触发 |
||||
|
cartCountClick(type, id) { |
||||
|
// 找点击的对应商品 |
||||
|
let item = null; |
||||
|
for (let i = 0; i < this.cartListFinal.length; ++i) { |
||||
|
if (this.cartListFinal[i].id == id) { |
||||
|
item = this.cartListFinal[i]; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (item) { |
||||
|
switch (type) { |
||||
|
case "add": { |
||||
|
// 判断库存 |
||||
|
if (item.count + 1 > item.stock_num) { |
||||
|
util.showNone("库存就这么多了!"); |
||||
|
return; |
||||
|
} |
||||
|
item.count += 1; |
||||
|
} break; |
||||
|
case "sub": { |
||||
|
if (item.count <= 0) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
item.count -= 1; |
||||
|
} break; |
||||
|
} |
||||
|
|
||||
|
this.calcTotalPrice(); // 计算总价 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 计算总价 |
||||
|
calcTotalPrice() { |
||||
|
let price = 0.0; |
||||
|
|
||||
|
for (let i = 0; i < this.cartListFinal.length; ++i) { |
||||
|
price += (this.cartListFinal[i].count * this.cartListFinal[i].erp_goods_price); |
||||
|
} |
||||
|
|
||||
|
this.totalPrice = price.toFixed(2); |
||||
|
}, |
||||
|
|
||||
|
// 适配主内容高度 |
||||
|
fixMainHeight() { |
||||
|
let _this = this; |
||||
|
uni.getSystemInfo({ |
||||
|
success: res => { |
||||
|
console.log(res); |
||||
|
let sumHeight = res.windowHeight; // 获取可用的总高度 |
||||
|
|
||||
|
// // 看看当前滚动框是否超出这个高度 |
||||
|
let query = uni.createSelectorQuery().select(".cg-footer"); |
||||
|
query.boundingClientRect(data => { |
||||
|
sumHeight = sumHeight - data.height - uni.upx2px(90); // 可用高度减去footer 再减去顶部标题项 |
||||
|
let contentHeight = sumHeight; |
||||
|
|
||||
|
query = uni.createSelectorQuery().select(".final-cart-list-dialog-content-for"); |
||||
|
query.boundingClientRect(data => { |
||||
|
let itemSize = (data.height + uni.upx2px(30)); // 30是margin |
||||
|
let limitCount = Math.floor(contentHeight / itemSize); |
||||
|
|
||||
|
let height = _this.cartListFinal.length >= limitCount ? contentHeight : _this.cartListFinal.length * itemSize; |
||||
|
_this.cartListFinalHeight = `${tools.px2rpx(height)}rpx`; |
||||
|
|
||||
|
// 可以滚动,并且设置safeArea,大于等于44的为iphoneX及以上 |
||||
|
if (height >= contentHeight) { |
||||
|
_this.cartListScroll = true; |
||||
|
_this.cartListFinalPaddingBottom = `${res.safeArea.top >= 44 ? tools.px2rpx(res.safeArea.top) : 0}rpx`; |
||||
|
} |
||||
|
}).exec(); |
||||
|
}).exec(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
// background-color: rgb(237,237,245); |
||||
|
background-color: rgb(255,255,255); |
||||
|
} |
||||
|
|
||||
|
.cg-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
padding-bottom: 0rpx; |
||||
|
padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
// border: 1px solid red; |
||||
|
|
||||
|
.final-cart-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
// width: 100%; |
||||
|
// height: 100%; |
||||
|
flex-grow: 1; |
||||
|
background-color: rgb(237,237,245); |
||||
|
|
||||
|
.final-cart-list-dialog-title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
text-align: center; |
||||
|
padding-left: 34rpx; |
||||
|
padding-right: 36rpx; |
||||
|
background-color: rgb(255,255,255); |
||||
|
|
||||
|
>view { |
||||
|
font-size: 32rpx; |
||||
|
color: rgb(51,51,51); |
||||
|
|
||||
|
&:first-child { |
||||
|
width: 258rpx; |
||||
|
|
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
width: 166rpx; |
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
width: 126rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.final-cart-list-dialog-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: flex-start; |
||||
|
// flex-grow: 1; |
||||
|
// height: 428rpx; |
||||
|
padding-left: 34rpx; |
||||
|
padding-right: 36rpx; |
||||
|
background-color: rgb(255,255,255); |
||||
|
// padding-bottom: 0rpx; |
||||
|
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
|
||||
|
.final-cart-list-dialog-content-for { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
// flex-grow: 1; |
||||
|
height: 114rpx; |
||||
|
border-bottom: 1rpx solid rgb(216,216,216); |
||||
|
background-color: rgb(255,255,255); |
||||
|
margin-top: 30rpx; |
||||
|
|
||||
|
.final-cart-list-dialog-content-col1 { |
||||
|
// display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
width: 258rpx; |
||||
|
|
||||
|
>view { |
||||
|
overflow: hidden; |
||||
|
word-break: nowrap; |
||||
|
text-overflow: ellipsis; /* 超出部分省略号 */ |
||||
|
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ |
||||
|
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ |
||||
|
-webkit-line-clamp: 1; /** 显示的行数 **/ |
||||
|
|
||||
|
&:first-child { |
||||
|
font-size: 28rpx; |
||||
|
color: rgb(51,51,51); |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
font-size: 24rpx; |
||||
|
color: rgb(154,154,157); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.final-cart-list-dialog-content-col2 { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
color: rgb(51,51,51); |
||||
|
font-size: 28rpx; |
||||
|
text-align: center; |
||||
|
width: 166rpx; |
||||
|
|
||||
|
>input { |
||||
|
width: 132rpx; |
||||
|
height: 48rpx; |
||||
|
border: 2rpx solid rgb(216,216,216); |
||||
|
border-radius: 4rpx; |
||||
|
} |
||||
|
>view { |
||||
|
&:first-child { |
||||
|
|
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
margin-left: 6rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.final-cart-list-dialog-content-col3 { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 126rpx; |
||||
|
|
||||
|
>image { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
|
||||
|
&:first-child { |
||||
|
|
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
>view { |
||||
|
margin-left: 12rpx; |
||||
|
margin-right: 12rpx; |
||||
|
color: rgb(51,51,51); |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cg-footer { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: flex-start; |
||||
|
// flex-grow: 1; |
||||
|
// opacity: 0.3; |
||||
|
|
||||
|
position: fixed; |
||||
|
// bottom: 0rpx; |
||||
|
bottom: calc( 0rpx + constant(safe-area-inset-bottom)); |
||||
|
bottom: calc( 0rpx + env(safe-area-inset-bottom)); |
||||
|
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
width: 100%; |
||||
|
height: 188rpx; |
||||
|
// border: 1rpx solid blue; |
||||
|
background-color: rgb(255,255,255); |
||||
|
|
||||
|
>view { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
// justify-content: flex-end; |
||||
|
align-items: flex-start; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.cg-footer-price { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
height: 88rpx; |
||||
|
width: 100%; |
||||
|
padding-right: 40rpx; |
||||
|
|
||||
|
>view { |
||||
|
&:first-child { |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
color: rgb(255,135,61); |
||||
|
font-size: 32rpx; |
||||
|
|
||||
|
>text { |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cg-footer-btn { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
height: 88rpx; |
||||
|
width: 100%; |
||||
|
padding-right: 24rpx; |
||||
|
font-size: 32rpx; |
||||
|
|
||||
|
> view { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.cg-footer-btn-reedit { |
||||
|
>button { |
||||
|
width: 242rpx; |
||||
|
height: 88rpx; |
||||
|
line-height: 88rpx; |
||||
|
border-radius: 44rpx; |
||||
|
padding: 0 0; |
||||
|
color: rgb(0,152,116); |
||||
|
background-color: rgb(255,255,255); |
||||
|
border: 2rpx solid rgb(0,152,116); |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cg-footer-btn-confirm { |
||||
|
>button { |
||||
|
width: 242rpx; |
||||
|
height: 88rpx; |
||||
|
line-height: 88rpx; |
||||
|
border-radius: 44rpx; |
||||
|
padding: 0 0; |
||||
|
color: rgb(255,255,255); |
||||
|
background-color: rgb(0,152,116); |
||||
|
border: 2rpx solid rgb(0,152,116); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
1026
src/subpackage/retail/pages/index/index.vue
File diff suppressed because it is too large
View File
@ -0,0 +1,295 @@ |
|||||
|
<template> |
||||
|
<view class="search-container"> |
||||
|
<view class="search-row"> |
||||
|
<view> |
||||
|
<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
||||
|
<input |
||||
|
type="text" |
||||
|
placeholder="请输入商品名称、sku" |
||||
|
v-model="searchText" |
||||
|
focus="true" |
||||
|
/> |
||||
|
<image @click="searchClear" mode="aspectFit" src="/static/images/icon/retail/searchClear.png"></image> |
||||
|
</view> |
||||
|
<button hover-class="hover-active" @click="searchTrigger(searchText, 'search')">搜索</button> |
||||
|
</view> |
||||
|
|
||||
|
<view class="history-search"> |
||||
|
<view> |
||||
|
<view>历史搜索</view> |
||||
|
<image @click="searchHistoryDelete" mode="aspectFit" src="/static/images/icon/retail/historySearchDelete.png"></image> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view v-for="(item, index) in historyList" :key="index" @click="searchTrigger(item, 'text')">{{ item }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../../utils/util.js'; |
||||
|
import retailServer from '../../js/retail_server'; |
||||
|
import retailApi from '../../js/retail_api'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
searchText: "", // 搜索文本 |
||||
|
historyList: [], // 历史列表 |
||||
|
curStore: {}, // 当前店铺信息 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.getSearchHistory(); // 获取搜索历史 |
||||
|
|
||||
|
let data = JSON.parse(decodeURIComponent(option.data)); |
||||
|
this.curStore = data.curStore; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 删除历史搜索 |
||||
|
searchHistoryDelete() { |
||||
|
if (this.historyList.length <= 0) { |
||||
|
util.showNone("暂无历史数据!"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let _this = this; |
||||
|
uni.showModal({ |
||||
|
content: '确人删除全部历史记录?', |
||||
|
success: function (res) { |
||||
|
if (res.confirm) { |
||||
|
console.log('用户点击确定'); |
||||
|
|
||||
|
_this.historyList = []; |
||||
|
uni.removeStorage({ |
||||
|
key: 'searchHistoryData', |
||||
|
success: function (res) { |
||||
|
console.log('success'); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
else if (res.cancel) { |
||||
|
console.log('用户点击取消'); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 清除搜索文本 |
||||
|
searchClear() { |
||||
|
this.searchText = ""; |
||||
|
}, |
||||
|
|
||||
|
// 触发搜索 |
||||
|
searchTrigger(text, type) { |
||||
|
if (!text) { |
||||
|
util.showNone("请输入商品名称、sku"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let _this = this; |
||||
|
if (type == "search") { |
||||
|
// 存本地历史数据跟当前的搜索数据,返回上一页后用来搜索数据 |
||||
|
_this.historyList.push(text); |
||||
|
uni.setStorage({ |
||||
|
key: 'searchHistoryData', |
||||
|
data: _this.historyList, |
||||
|
success: function() { |
||||
|
console.log('success'); |
||||
|
}, |
||||
|
fail: function(err) { |
||||
|
console.log(err); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
util.showLoad(); |
||||
|
retailServer.get({ |
||||
|
url: retailApi.assistantListErpGoodsCateAndGoods, |
||||
|
data: { |
||||
|
assistant_key: text, |
||||
|
stadium_id: _this.curStore.id, |
||||
|
}, |
||||
|
isDefaultGet: false, |
||||
|
failMsg: '搜索失败!' |
||||
|
}).then(res => { |
||||
|
if (res.data.code == 0) { |
||||
|
let mark = false; |
||||
|
for (let i = 0; i < res.data.data.list.length; ++i) { |
||||
|
if (res.data.data.list[i].goods_list && res.data.data.list[i].goods_list.length) { |
||||
|
mark = true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 没数据 |
||||
|
if (!mark) { |
||||
|
util.showNone("暂无数据"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
uni.setStorage({ |
||||
|
key: "searchData", |
||||
|
data: res.data.data.list, |
||||
|
success: function() { |
||||
|
util.hideLoad(); |
||||
|
|
||||
|
// 有数据的话就返回到上一页面,加载对应数据 |
||||
|
uni.navigateBack({ |
||||
|
delta: 1 |
||||
|
}); |
||||
|
}, |
||||
|
fail: function(err) { |
||||
|
util.showNone("搜索失败"); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
else { |
||||
|
util.showNone(res.data.message || '操作失败!'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 获取搜索历史 |
||||
|
getSearchHistory() { |
||||
|
let _this = this; |
||||
|
|
||||
|
uni.getStorage({ |
||||
|
key: 'searchHistoryData', |
||||
|
success: function (res) { |
||||
|
console.log(res.data); |
||||
|
for (let i = 0; i < res.data.length; ++i) { |
||||
|
_this.historyList.push(res.data[i]); |
||||
|
} |
||||
|
}, |
||||
|
fail: function(err) { |
||||
|
console.log(err); |
||||
|
_this.historyList = []; |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.search-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
padding-bottom: 0rpx; |
||||
|
padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
|
||||
|
.search-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 152rpx; |
||||
|
background-color: rgb(255,255,255); |
||||
|
|
||||
|
>view { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
flex-grow: 1; |
||||
|
height: 92rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: rgb(242,242,247); |
||||
|
margin-left: 24rpx; |
||||
|
padding-left: 20rpx; |
||||
|
padding-right: 20rpx; |
||||
|
|
||||
|
>input { |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
|
||||
|
&:first-child { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
>button { |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 20rpx; |
||||
|
margin-right: 20rpx; |
||||
|
width: 100rpx; |
||||
|
height: 62rpx; |
||||
|
line-height: 62rpx; |
||||
|
font-size: 32rpx; |
||||
|
color: rgb(255,255,255); |
||||
|
background-color: rgb(6,147,137); |
||||
|
border-radius: 10rpx; |
||||
|
white-space: nowrap; |
||||
|
padding: 0 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.history-search { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background-color: white; |
||||
|
padding-top: 26rpx; |
||||
|
padding-left: 26rpx; |
||||
|
|
||||
|
>view { |
||||
|
width: 100%; |
||||
|
|
||||
|
&:first-child { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 26rpx; |
||||
|
|
||||
|
>view { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
>image { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
margin-right: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
>view { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 66rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: rgb(193,193,199); |
||||
|
background-color: rgb(242,242,247); |
||||
|
border-radius: 32rpx; |
||||
|
padding-left: 30rpx; |
||||
|
padding-right: 30rpx; |
||||
|
margin-right: 26rpx; |
||||
|
margin-bottom: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |