zmt
4 years ago
67 changed files with 4486 additions and 147 deletions
-
11.hbuilderx/launch.json
-
69package-lock.json
-
218src/components/organize_order/organize_order.vue
-
134src/components/reservation_order/reservation_order.vue
-
151src/components/timing_order/timing_order.vue
-
8src/js/api.js
-
33src/pages.json
-
7src/pages/employee/manage/manage.vue
-
94src/pages/index/index.vue
-
73src/pages/order_list/order_list.vue
-
8src/pages/order_search/order_search.vue
-
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/back.png
-
BINsrc/static/images/icon/retail/cart.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/search.png
-
BINsrc/static/images/icon/retail/searchClear.png
-
BINsrc/static/images/icon/retail/sub.png
-
BINsrc/static/images/icon/x_close.png
-
3src/store/index.js
-
0src/subpackage/device/components/order/organize_detail/organize_detail.vue
-
837src/subpackage/device/components/order/reservation_people_detail/reservation_people_detail.vue
-
312src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
-
341src/subpackage/device/components/order/timing_detail/timing_detail.vue
-
12src/subpackage/device/js/device_api.js
-
99src/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
-
11src/subpackage/retail/js/retail_api.js
-
10src/subpackage/retail/js/retail_server.js
-
20src/subpackage/retail/js/tools.js
-
502src/subpackage/retail/pages/confirm_goods/confirm_goods.vue
-
1026src/subpackage/retail/pages/index/index.vue
-
295src/subpackage/retail/pages/search/search.vue
-
BINsrc/subpackage/retail/static/images/add.png
-
BINsrc/subpackage/retail/static/images/back.png
-
BINsrc/subpackage/retail/static/images/cart.png
-
BINsrc/subpackage/retail/static/images/dropDown.png
-
BINsrc/subpackage/retail/static/images/historySearchDelete.png
-
BINsrc/subpackage/retail/static/images/home.png
-
BINsrc/subpackage/retail/static/images/search.png
-
BINsrc/subpackage/retail/static/images/searchClear.png
@ -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" > |
|||
<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> |
|||
|
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: 32 | Height: 32 | Size: 241 B |
|
After Width: 84 | Height: 84 | Size: 2.0 KiB |
|
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: 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: 425 B |
@ -0,0 +1,837 @@ |
|||
<template> |
|||
<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':'']">{{e.verify_code || '-'}} ({{zh_verify_status(e.status)}})</view> |
|||
<block v-if="e.status==2"> |
|||
<view class="rs-view">核销方式：{{zh_verify_type(e.verify_type)}}</view> |
|||
<view class="rs-view">核销时间：{{e.verify_time || '-'}}</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 =>{ |
|||
const _obj = { |
|||
'0': '未付款', |
|||
'1': '待使用', |
|||
'2': '已使用', |
|||
'3': '已失效', |
|||
'4': '已退款', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_verify_type(){ |
|||
// 核销方式 1/2/3/4 核销码核销/人脸核销/扫码核销/商家扫码 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '未核销', |
|||
'1': '核销码核销', |
|||
'2': '人脸核销', |
|||
'3': '扫码核销', |
|||
'4': '商家扫码', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_verify_status(){ |
|||
// 核销状态 -1/0/1/2/3/4 已分享/无效/待使用/已核销/已失效/已退款 |
|||
return status =>{ |
|||
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:{ |
|||
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{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
line-height: 46rpx; |
|||
} |
|||
.ri-section{ |
|||
.rs-view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
line-height: 46rpx; |
|||
} |
|||
.rs-active{ |
|||
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,312 @@ |
|||
<template> |
|||
<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 =>{ |
|||
const _obj = { |
|||
'0': '未付款', |
|||
'1': '待使用', |
|||
'2': '已使用', |
|||
'3': '已失效', |
|||
'4': '已退款', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_verify_type(){ |
|||
// 核销方式 1/2/3/4 核销码核销/人脸核销/扫码核销/商家扫码 |
|||
return 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,99 @@ |
|||
<template> |
|||
<view class="order-details"> |
|||
<block v-if="optionsQuery.order_type==3"> |
|||
<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" @okChange="okChange"></reservation-people-detail> |
|||
</block> |
|||
<timing-detail :orderInfo="pageInfo" v-if="optionsQuery.order_type==1"></timing-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 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, |
|||
}, |
|||
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) { |
|||
let _query = util.jsonPar(options.query); |
|||
this.optionsQuery = _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: { |
|||
getApiUrl(type){ |
|||
if(type == 1)return deviceApi.timeOrderDetail; |
|||
if(type == 3)return deviceApi.reservationDetail; |
|||
}, |
|||
getPageInfo({orderType, stadium_id, order_no}){ |
|||
util.showLoad(); |
|||
deviceServer.get({ |
|||
url: this.getApiUrl(orderType), |
|||
data: { |
|||
stadium_id, |
|||
order_no, |
|||
}, |
|||
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,11 @@ |
|||
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`, // 物品分类物品列表
|
|||
} |
|||
|
|||
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,502 @@ |
|||
<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> |
|||
</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'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
isEdited: false, // 是否处于编辑模式 |
|||
curStore: {}, // 当前店铺信息 |
|||
cartListFinal: [], // 购物车最终列表数据 |
|||
totalPrice: 0, // 最终价格 |
|||
cartConfirmText: "收款出库", // 收款出库 || 确认 |
|||
cartListScroll: false, // 购物车列表是否能滚动 |
|||
cartListFinalHeight: "0rpx", // 最终显示的列表高度 |
|||
cartListFinalPaddingBottom: "0rpx", // 根据是否是异形屏来设置 |
|||
} |
|||
}, |
|||
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: { |
|||
// 重新编辑 |
|||
cartReedit() { |
|||
this.isEdited = true; |
|||
this.cartConfirmText = "确认"; |
|||
}, |
|||
|
|||
// 确认 || 收款出库 |
|||
cartConfirm() { |
|||
if (this.cartConfirmText == "确认") { |
|||
this.isEdited = false; |
|||
this.cartConfirmText = "收款出库"; |
|||
return; |
|||
} |
|||
|
|||
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; |
|||
} |
|||
|
|||
util.showLoad(); |
|||
retailServer.post({ |
|||
url: retailApi.assistantRetail, |
|||
data: { |
|||
store_id: _this.curStore.id, |
|||
goods_data: data, |
|||
}, |
|||
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 || '操作失败！'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 购物车输入确认 |
|||
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
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> |
|||
|
After Width: 36 | Height: 36 | Size: 314 B |
|
After Width: 32 | Height: 32 | Size: 241 B |
|
After Width: 84 | Height: 84 | Size: 2.0 KiB |
|
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: 40 | Height: 40 | Size: 372 B |
|
After Width: 32 | Height: 32 | Size: 356 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue