1622 lines
43 KiB
Vue
1622 lines
43 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 头部内容 -->
|
||
<view class="head">
|
||
<view class="head_bg"></view>
|
||
<view class="tips" v-if="storeInfo.registerType == 'munchies'">
|
||
<image class="informIcon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/informIcon.png" mode="aspectFill"/>
|
||
<text class="informText">温馨提示：请适量点餐，避免浪费</text>
|
||
</view>
|
||
|
||
<view class="tabBox" v-if="storeInfo.registerType == 'munchies'">
|
||
<view class="tab">
|
||
<view v-if="item.show" :class="is_type==index?'tab_item'+(is_type+1)+' tab_item active ':'tab_item'" v-for="(item,index) in is_typeList" :key="index" @click="tabClick(index,item)">
|
||
<view></view>
|
||
<image class="icon" :src="is_type==index?item.url_active:item.url" mode="aspectFill"/>
|
||
<text class="title" :class="{active:is_type==index}">{{item.title}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 送餐到桌 -->
|
||
<view class="table" v-if="is_type==0">
|
||
<view class="table_left">
|
||
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png" mode="aspectFill"/>
|
||
<text class="title">桌台</text>
|
||
</view>
|
||
<view class="value" v-if="tableCode"> {{ shopTableInfo.name || '' }} </view>
|
||
<u-icon v-else @click="scan" name="scan" size="60"></u-icon>
|
||
</view>
|
||
<!-- 打包外带 -->
|
||
<view class="pack" v-else>
|
||
<view class="top">
|
||
<text class="title">{{ storeInfo.shopName }}</text>
|
||
<text class="address">{{ storeInfo.address }}</text>
|
||
</view>
|
||
<!-- <view class="list">
|
||
<view class="item">
|
||
<view class="lable">取餐时间</view><view class="text">立即取餐</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="lable">预留电话</view><view class="getPhone text"><u-input class="inputVal" v-model="order.phone" input-align="right" placeholder="请输入预留电话以便联系您" ></u-input><text class="getBtn">获取手机号</text></view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="addDish" @click="addDish" v-if="storeInfo.registerType == 'restaurant'">加菜下单</view>
|
||
|
||
<view class="tabBox_t " v-if="storeInfo.registerType == 'restaurant'">
|
||
<view class="shopName">{{ listinfo.name }}</view>
|
||
<view class="tableName" style="display: flex;align-items: center;justify-content: space-between;">
|
||
<view style="display: flex;">
|
||
<view>桌号：</view>
|
||
<view class="name" v-if="shopTableInfo.name">{{ shopTableInfo.name || '' }} </view>
|
||
<view class="num" v-if="shopTableInfo&&shopTableInfo.seatNum">{{ shopTableInfo.seatNum }}人</view>
|
||
</view>
|
||
<u-icon v-if="!shopTableInfo.name" @click="scan" name="scan" size="60"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 订单内容区域 -->
|
||
<view class="content_box">
|
||
<view class="content">
|
||
<view class="title"> {{ listinfo.name }} </view>
|
||
<view class="list_item" v-for="(item,index) in listinfo.details" :key="item.id">
|
||
<view class="left" >
|
||
<image class="img" v-if="item.productId!=-999" :src="item.coverImg || item.productImg || ''" mode="aspectFill"/>
|
||
<image class="img" v-else :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'" mode="heightFix"/>
|
||
<view class="center" >
|
||
<text class="center_title"> {{item.name || item.productName || "" }} </text>
|
||
<text class="type"> {{ item.skuName || item.productSkuName || ""}} </text>
|
||
<text class="num" > X{{ item.totalNumber || ""}} </text>
|
||
</view>
|
||
</view>
|
||
<view class="price"> ￥{{ item.memberPrice*item.totalNumber || item.salePrice*item.totalNumber || 0}} </view>
|
||
</view>
|
||
<view class="cell-item" v-if="packFee && packFee > 0">
|
||
<view class="label">打包费</view>
|
||
<view class="val">
|
||
<view></view>
|
||
<view style="font-size: 28rpx;">￥</view>
|
||
<view>{{packFee.toFixed(2)}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="cell-item" v-if="shopTableInfo&&shopTableInfo.seatNum&&sendType=='table'&&storeInfo.registerType == 'munchies'">
|
||
<view class="label">餐位费</view>
|
||
<view class="val">
|
||
<view>X{{shopTableInfo.seatNum}}</view>
|
||
<view style="font-size: 28rpx;">￥</view>
|
||
<view>{{(shopTableInfo.seatNum*storeInfo.tableFee).toFixed(2)}}</view>
|
||
</view>
|
||
</view>
|
||
<view v-for="(item,index) in favorable" :key="index" v-if="storeInfo.registerType == 'munchies'">
|
||
<view class="favorable" :class="{column:item.value.length>0&&item.type=='product'}" @click="goUrl(item)">
|
||
<view class="favorable_left">
|
||
<!-- <image class="icon" :src="item.url" mode="aspectFill"/> -->
|
||
<text class="name"> {{ item.name }} </text>
|
||
</view>
|
||
<view class="favorable_right" v-if="item.type=='coupon'">
|
||
<text class="favorable_right_text">{{item.value}}</text>
|
||
<u-icon name="arrow-right" color="#575B66" size="28"></u-icon>
|
||
</view>
|
||
<view class="favorable_right" :class="{column:item.value.length>0}" v-if="item.type=='product'">
|
||
<view class="favorable_right_text" v-for="(items,indexs) in item.value" :key="indexs">
|
||
<text>{{items.name}}</text>
|
||
<text>X{{items.num}}</text>
|
||
<text>-￥{{items.discountAmount || 0}}</text>
|
||
</view>
|
||
<u-icon v-if="item.value.length <= 0" name="arrow-right" color="#575B66" size="28"></u-icon>
|
||
</view>
|
||
<view class="favorable_right" v-if="item.type=='points'" @click.stop="pointsChange">
|
||
<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;" v-if="calcUsablePointsData.usable">
|
||
使用 {{ calcUsablePointsData.pointsNum}} 积分抵扣￥{{calcUsablePointsData.pointsNum/calcUsablePointsData.equivalentPoints}}
|
||
</text>
|
||
<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;color: #DE4D3A;" v-else>
|
||
{{calcUsablePointsData.unusableReason}}
|
||
</text>
|
||
|
||
<u-checkbox-group iconPlacement="right" @change="pointsChange">
|
||
<u-checkbox v-model="isPointsChecked" :disabled="freeCheck||!calcUsablePointsData.usable" :checked="isPointsChecked" activeColor="#E8AD7B" shape="circle" icon-size="36" size="36">
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="totalPrice">
|
||
<text style="margin-bottom: 5rpx;">小计￥</text>
|
||
<text class="totalPriceNum"> {{listinfo.payAmount}} </text>
|
||
</view>
|
||
<!-- <u-divider color="#fa3534" half-width="200" border-color="#6d6d6d">姑苏城外寒山寺</u-divider> -->
|
||
</view>
|
||
</view>
|
||
<!-- 订单备注 -->
|
||
<view class="remark">
|
||
<view class="remark_bg">
|
||
<view class="remark_title">订单备注</view>
|
||
<u-textarea class="remark_value" placeholder="请填写口味、偏好等要求" :type="'textarea'" v-model="remark" :border="textareaBorder" :clearable="true"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 充值免单 -->
|
||
<rechargeFree v-if="freeDingConfig.enable == 1&&storeInfo.registerType == 'munchies'" ref="rechargeFree" :freeDisabled="freeDisabled" :payAmount="listinfo.payAmount" :freeDingConfig="freeDingConfig" :shopUserInfo="amountVIP" @changeFree="changeFree"></rechargeFree>
|
||
<!-- 充值活动 -->
|
||
<topUpActivity v-if="storeInfo.registerType == 'munchies'" ref="topUpActivity" :shopUserInfo="amountVIP" ></topUpActivity>
|
||
<!-- 支付方式 -->
|
||
<view style="padding: 0 20rpx;">
|
||
<paymentMethod ref="paymentMethod" :freeCheck="freeCheck" :amountVIP="amountVIP" v-if="storeInfo.registerType == 'munchies'" @groupChange="groupChange"></paymentMethod>
|
||
</view>
|
||
<view style="width: 100%;height: 200rpx;"> </view>
|
||
<view class="bottom">
|
||
<view class="bottom_left">
|
||
<text style="margin-bottom: 5rpx;">实付金额</text>
|
||
<text class="totalAmount">￥{{ listinfo.payAmount }} </text>
|
||
</view>
|
||
<block v-if="storeInfo.registerType == 'munchies'">
|
||
<view class="paymentBtnText" @tap="$u.debounce(showpopupclickdd, 500)" v-if="listinfoid && listinfo"> {{ paymentBtnText }} </view>
|
||
<view class="paymentBtnText" @tap="$u.debounce(orderdetail, 500)" v-else> {{ paymentBtnText }} </view>
|
||
</block>
|
||
<block v-if="storeInfo.registerType == 'restaurant'">
|
||
<view class="paymentBtnText" @tap="$u.debounce(orderdetail, 500)" > 提交订单 </view>
|
||
</block>
|
||
</view>
|
||
|
||
<u-popup :show="ispws" :round="20" mode="bottom" @close="close" height="500" :safeAreaInsetBottom="false">
|
||
<view class="pay-info-wrap">
|
||
<view class="info-wrap flex-between">
|
||
<view class="close" @click="close">
|
||
<u-icon name="close" color="#999999" size="40"></u-icon>
|
||
</view>
|
||
<text class="title">请输入支付密码</text>
|
||
<view></view>
|
||
</view>
|
||
<view class="info-content">
|
||
<payPasswordtwo ref="payPwd" :payAmount="listinfo.payAmount" @accountPayevent="accountPayevent" v-if="ispws"></payPasswordtwo>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 支付密码 -->
|
||
<!-- <payPasswordtwo ref="payPwd" :listinfo="listinfo" @accountPayevent="accountPayevent" v-if="ispws"></payPasswordtwo> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import webSocketUtils from '@/common/js/websocket.js'
|
||
import payPasswordtwo from '@/components/payPasswordtwo.vue'
|
||
import paymentMethod from '../components/paymentMethod.vue'
|
||
import rechargeFree from '../components/rechargeFree.vue'
|
||
import topUpActivity from '../components/topUpActivity.vue'
|
||
// import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard.vue'
|
||
|
||
|
||
export default {
|
||
components: {
|
||
payPasswordtwo,
|
||
paymentMethod,
|
||
rechargeFree,
|
||
topUpActivity,
|
||
},
|
||
data() {
|
||
return {
|
||
opacitys: false,
|
||
toplist: {
|
||
name: '确认订单'
|
||
},
|
||
is_type: 0,
|
||
is_typeList: [
|
||
{ title: "送餐到桌", show: false, type: "table", val: "dine-in", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1_active.png"},
|
||
{ title: "打包外带", show: false, type: "takeself", val: "take-out", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2_active.png"},
|
||
],
|
||
sendType: "table",
|
||
eatModel: [],
|
||
favorable: [
|
||
{ name: "优惠券", type: "coupon",value: "", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
|
||
{ name: "商品券", type: "product",value: [], url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
|
||
// { name: "团购优惠", type: "group",value: "", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
|
||
{ name: "积分抵扣", type: "points",value: "", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/points.png" }
|
||
],
|
||
isPointsChecked: false,
|
||
rechargeFreeChecked: false,
|
||
calcUsablePointsData: null,
|
||
order: {
|
||
phone: "",
|
||
},
|
||
userCouponInfos: [],
|
||
shopTableInfo: null,
|
||
freeDingConfig: null,
|
||
cartLists: [],
|
||
listinfo: {
|
||
details: [],
|
||
payAmount: 0,
|
||
name: "",
|
||
},
|
||
freeCheck: false,
|
||
freeDisabled: false,
|
||
totalPrice: 0, // 小计金额
|
||
totalAmount: 20, // 支付金额
|
||
remark: "", // 备注
|
||
radiovalue: 1, // 支付方式
|
||
ispws: false, // 输入支付密码
|
||
payPasswordShow: false,
|
||
amountVIP: uni.cache.get('shopUserInfo'), // 会员信息
|
||
listinfoid: null,
|
||
paymentBtnText: "余额支付",
|
||
isSocket: false,
|
||
socketTicket: null,
|
||
orderAMeal: true,
|
||
shopId: null,
|
||
storeInfo: {},
|
||
tableCode: null,
|
||
packFee: null,
|
||
}
|
||
},
|
||
computed: {
|
||
HeighT() { //手机类型的尺寸
|
||
return this.$store.getters.is_BarHeight
|
||
},
|
||
},
|
||
onUnload() {
|
||
if (this.socketTicket) {
|
||
this.socketTicket.Close()
|
||
uni.$off('message')
|
||
}
|
||
this.ispws = false
|
||
},
|
||
onHide() {
|
||
if (this.socketTicket) {
|
||
this.socketTicket.Close()
|
||
uni.$off('message')
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if ( options.storeInfo ) {
|
||
this.storeInfo = JSON.parse(decodeURIComponent(options.storeInfo));
|
||
}
|
||
this.shopId = this.storeInfo.id;
|
||
this.listinfo.name = this.storeInfo.shopName;
|
||
this.listinfo.details = JSON.parse(options.cartLists).data;
|
||
this.cartLists = JSON.parse(options.cartLists);
|
||
if ( options.tableCode ) { this.tableCode = options.tableCode;}
|
||
if ( this.storeInfo.eatModel.indexOf("dine-in") != -1 ) {
|
||
this.eatModel = "dine-in";
|
||
this.is_type = 0;
|
||
} else {
|
||
this.eatModel = "take-out";
|
||
this.is_type = 1;
|
||
}
|
||
this.getProductqueryShop();
|
||
this.getchoseEatModel('index',0);
|
||
},
|
||
onShow() {
|
||
let _this = this;
|
||
if (this.listinfoid) {
|
||
uni.$on('message', this.getMessage)
|
||
this.orderorderInfo()
|
||
} else {
|
||
this.handlemessage()
|
||
}
|
||
this.is_typeList.map((item)=>{
|
||
if ( this.storeInfo.eatModel.indexOf(item.val) != -1) {
|
||
item.show = true;
|
||
}
|
||
})
|
||
uni.$on('couponItem',this.changeCoupon)
|
||
},
|
||
methods: {
|
||
/**
|
||
* 监听优惠券/商品券选择
|
||
* @param {Object} data
|
||
*/
|
||
changeCoupon ( data ) {
|
||
let _this = this;
|
||
// uni.$off('couponItem')
|
||
let couponData = JSON.parse(data)
|
||
console.log('监听到事件来自返回的参数：' , couponData);
|
||
if ( couponData.type == 1 ) { //满减优惠券
|
||
let couponList = _this.userCouponInfos.filter(v => v.type == 1);
|
||
//不包含优惠券的金额
|
||
let currentPayAmount = (couponList.length > 0 ? _this.listinfo.payAmount + couponList[0].discountAmount : _this.listinfo.payAmount)
|
||
// 判断优惠金额不能大于支付金额
|
||
if ( couponData.discountAmount < currentPayAmount) {
|
||
_this.listinfo.payAmount = ( currentPayAmount - couponData.discountAmount).toFixed(2)
|
||
_this.favorable[0].value = ('-￥'+couponData.discountAmount)
|
||
if ( couponList.length > 0) {
|
||
_this.userCouponInfos.map(item => {
|
||
if ( item.type == 1 ) {
|
||
item.userCouponId = couponData.id
|
||
item.type = couponData.type
|
||
item.discountAmount = couponData.discountAmount
|
||
item.num = couponData.type == 1 ? 1 : couponData.num
|
||
}
|
||
})
|
||
} else {
|
||
_this.favorable[0].value = ('-￥'+couponData.discountAmount)
|
||
_this.userCouponInfos.push({
|
||
userCouponId: couponData.id,
|
||
type: couponData.type,
|
||
discountAmount: couponData.discountAmount,
|
||
num: couponData.type == 1 ? 1 : couponData.num,
|
||
})
|
||
}
|
||
if ( _this.isPointsChecked) {
|
||
_this.pointsChange()
|
||
_this.getCalcUsablePoints()
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: "优惠券满减金额大于订单金额不可使用",
|
||
icon: "none",
|
||
})
|
||
}
|
||
} else { //商品券
|
||
// this.listinfo.details
|
||
// 筛选选中商品券商品列表
|
||
let couponList = _this.listinfo.details.filter(v => v.productId == couponData.proId);
|
||
//金额从小到大排序
|
||
let minCouponList = couponList.sort((a, b) => (a.memberPrice > 0 ? a.memberPrice : a.salePrice) - (b.memberPrice > 0 ? b.memberPrice : b.salePrice))
|
||
let productTicketList = _this.userCouponInfos.filter(v => v.productId == couponData.proId);
|
||
//商品券抵扣的数量
|
||
let productNum = couponData.num;
|
||
let productPayAmount = 0;
|
||
let productTicketNum = 0;
|
||
let productNumber = 0;
|
||
productTicketList.map((item,index) => {
|
||
productTicketNum += item.num
|
||
})
|
||
console.log(productTicketNum)
|
||
minCouponList.map((item,index) => {
|
||
productNumber += item.number
|
||
if ( productNum > 0 && productNumber > productTicketNum) {
|
||
let num = productNum >= item.number ? item.number : productNum
|
||
productNum = (productNum - item.number) >= 0 ? (productNum - item.number) : 0;
|
||
console.log(num)
|
||
console.log(item.salePrice)
|
||
productPayAmount = productPayAmount + (num*(item.memberPrice > 0 ? item.memberPrice : item.salePrice))
|
||
}
|
||
})
|
||
console.log(minCouponList)
|
||
_this.userCouponInfos.push({
|
||
userCouponId: couponData.id,
|
||
type: couponData.type,
|
||
productId: couponData.proId,
|
||
discountAmount: productPayAmount,
|
||
num: productNum == 0 ? couponData.num : (couponData.num - productNum),
|
||
})
|
||
_this.favorable[1].value.push({
|
||
userCouponId: couponData.id,
|
||
name: couponData.name,
|
||
type: couponData.type,
|
||
productId: couponData.proId,
|
||
discountAmount: productPayAmount,
|
||
num: productNum == 0 ? couponData.num : (couponData.num - productNum),
|
||
})
|
||
|
||
if ( _this.isPointsChecked) {
|
||
_this.pointsChange()
|
||
_this.getCalcUsablePoints()
|
||
}
|
||
}
|
||
uni.$off('couponItem')
|
||
},
|
||
setPayAmount ( cartLists ) {
|
||
let tableFee;
|
||
if ( this.is_type == 0 ) {
|
||
tableFee = this.shopTableInfo?(this.shopTableInfo.seatNum*this.storeInfo.tableFee):0
|
||
} else{
|
||
tableFee = 0
|
||
}
|
||
if ( this.amountVIP.isVip == 1 && cartLists.memberAmount > 0 ) {
|
||
this.listinfo.payAmount = (cartLists.memberAmount+tableFee).toFixed(2)
|
||
} else {
|
||
this.listinfo.payAmount = (cartLists.amount+tableFee).toFixed(2)
|
||
}
|
||
if ( this.userCouponInfos.length > 0 ) {
|
||
console.log(this.userCouponInfos)
|
||
this.userCouponInfos.forEach(item => {
|
||
if ( item.type == 1 ) {
|
||
if ( item.discountAmount && item.discountAmount > 0 ) {
|
||
this.listinfo.payAmount = (this.listinfo.payAmount - item.discountAmount).toFixed(2)
|
||
}
|
||
} else {
|
||
if ( item.discountAmount && item.discountAmount > 0 ) {
|
||
this.listinfo.payAmount = (this.listinfo.payAmount - item.discountAmount).toFixed(2)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
this.isPointsChecked = false;
|
||
this.getCalcUsablePoints()
|
||
},
|
||
/**
|
||
* 免单状态监听
|
||
* @param {Object} val
|
||
*/
|
||
changeFree ( val ) {
|
||
this.freeCheck = val;
|
||
|
||
if ( val ) {
|
||
this.listinfo.payAmount = (this.listinfo.payAmount*this.freeDingConfig.rechargeTimes).toFixed(2)
|
||
} else {
|
||
this.listinfo.payAmount = (this.listinfo.payAmount/this.freeDingConfig.rechargeTimes).toFixed(2)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 积分状态监听
|
||
*/
|
||
pointsChange (){
|
||
if ( this.freeCheck || !this.calcUsablePointsData.usable) {
|
||
return;
|
||
}
|
||
this.isPointsChecked = !this.isPointsChecked
|
||
if ( this.isPointsChecked ) {
|
||
this.freeDisabled = true
|
||
|
||
this.listinfo.payAmount = (this.listinfo.payAmount-(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
|
||
} else {
|
||
this.freeDisabled = false
|
||
this.listinfo.payAmount = (Number(this.listinfo.payAmount)+(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
|
||
}
|
||
},
|
||
goUrl(item){
|
||
switch (item.type){
|
||
case 'coupon':
|
||
let payAmount = this.listinfo.payAmount;
|
||
let couponList = this.userCouponInfos.filter(v => v.type == 1);
|
||
if ( couponList.length > 0 ) {
|
||
payAmount = payAmount + couponList.discountAmount;
|
||
}
|
||
uni.pro.navigateTo('/pages/user/coupon', {
|
||
type: "confirm_order_coupon",
|
||
payAmount: payAmount,
|
||
shoppingCart: JSON.stringify(this.listinfo.details)
|
||
})
|
||
break;
|
||
case 'product':
|
||
let productList = this.userCouponInfos.filter(v => v.type == 2);
|
||
uni.pro.navigateTo('/pages/user/coupon', {
|
||
type: "confirm_order_product",
|
||
payAmount: this.listinfo.payAmount,
|
||
shoppingCart: JSON.stringify(this.listinfo.details),
|
||
productList: JSON.stringify(productList)
|
||
})
|
||
break;
|
||
|
||
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取积分相关信息
|
||
*/
|
||
async getCalcUsablePoints() {
|
||
let params = {
|
||
memberId: this.amountVIP.id,
|
||
orderAmount: this.listinfo.payAmount,
|
||
}
|
||
let res = await this.api.calcUsablePoints(params)
|
||
this.calcUsablePointsData = res.data;
|
||
if ( this.calcUsablePointsData.usable && this.listinfo.payAmount >= this.calcUsablePointsData.minPaymentAmount) {
|
||
this.calcUsablePointsData.pointsNum = this.calcUsablePointsData.accountPoints >= this.calcUsablePointsData.maxUsablePoints ? this.calcUsablePointsData.maxUsablePoints : this.calcUsablePointsData.accountPoints
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取桌台码
|
||
*/
|
||
scan () {
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
this.tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||
if (this.tableCode) {
|
||
this.getProductqueryShop();
|
||
}
|
||
|
||
},
|
||
fail: () => {
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 获取店铺信息。桌台信息
|
||
* @param {Object} tableCode
|
||
*/
|
||
async getProductqueryShop (tableCode) {
|
||
let params = {
|
||
lng: uni.cache.get('getLocationstorage').lng ? uni.cache.get('getLocationstorage').lng :
|
||
'',
|
||
lat: uni.cache.get('getLocationstorage').lat ? uni.cache.get('getLocationstorage').lat :
|
||
'',
|
||
}
|
||
if (this.tableCode) {params.code = this.tableCode}
|
||
if (this.shopId) {params.shopId = this.shopId}
|
||
let res = await this.api.productqueryShop(params)
|
||
if ( res.data.shopTableInfo && !res.data.shopTableInfo.choseCount&&this.orderAMeal) {
|
||
this.orderAMeal = false;
|
||
uni.pro.navigateTo('/pagesOrder/orderAMeal/index', {
|
||
tableCode: this.tableCode,
|
||
shopId: res.data.storeInfo.id,
|
||
type: 'confirm'
|
||
})
|
||
return;
|
||
}
|
||
this.freeDingConfig = res.data.freeDingConfig;
|
||
this.shopTableInfo = res.data.shopTableInfo;
|
||
this.storeInfo = res.data.storeInfo;
|
||
},
|
||
|
||
/**
|
||
* 解码
|
||
* @param {Object} url
|
||
* @param {Object} name
|
||
*/
|
||
getQueryString(url, name) {
|
||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||
var r = url.substr(1).match(reg)
|
||
if (r != null) {
|
||
return r[2]
|
||
}
|
||
return null;
|
||
},
|
||
|
||
/**
|
||
* 加菜下单
|
||
*/
|
||
addDish () {
|
||
uni.pro.navigateBack()
|
||
},
|
||
/**
|
||
* 消息监听
|
||
* @param {Object} msg
|
||
*/
|
||
getMessage(msg) {
|
||
if (msg == 1) { // 网络在连接
|
||
return false
|
||
}
|
||
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
|
||
return false
|
||
}
|
||
if (msg.status != 'success') {
|
||
uni.showToast({
|
||
title: msg.msg,
|
||
icon: "none",
|
||
})
|
||
return false;
|
||
|
||
} else {
|
||
switch (msg.type) {
|
||
case 'createOrder':
|
||
if ( this.eatModel == "dine-in" && this.tableCode ) {
|
||
if ( this.storeInfo.registerType == 'restaurant') {
|
||
uni.switchTab({
|
||
url: '/pages/order/order'
|
||
});
|
||
return;
|
||
}
|
||
this.isSocket = true;
|
||
this.listinfoid = msg.data.id
|
||
this.listinfo.details = msg.data.detailList;
|
||
this.setPayAmount(msg.data)
|
||
uni.$off('getMessage')
|
||
this.orderorderInfo(1)
|
||
}
|
||
break;
|
||
case 'addCart':
|
||
this.isSocket = true;
|
||
if ( this.eatModel == "dine-in" && this.tableCode ) {
|
||
if (this.listinfoid) {
|
||
this.orderorderInfo()
|
||
} else {
|
||
this.listinfo.details = msg.data;
|
||
this.setPayAmount(msg)
|
||
}
|
||
}
|
||
|
||
break;
|
||
case 'order':
|
||
uni.navigateBack()
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '您的小伙伴已下单了哦~~'
|
||
})
|
||
}, 1000)
|
||
break;
|
||
case 'addcart':
|
||
if (this.listinfoid) {
|
||
this.orderorderInfo()
|
||
} else {
|
||
this.listinfo.details = msg.data;
|
||
this.setPayAmount(msg)
|
||
}
|
||
this.isSocket = true;
|
||
break;
|
||
}
|
||
this.$set(this, 'cartLists', msg)
|
||
}
|
||
|
||
},
|
||
|
||
/**
|
||
* 监听送餐/打包切换
|
||
* @param {Object} val
|
||
*/
|
||
tabClick ( index, item ) {
|
||
|
||
this.getchoseEatModel('tabClick', index, item);
|
||
|
||
},
|
||
|
||
/**
|
||
* 获取堂食/外带菜品数据
|
||
*/
|
||
async getchoseEatModel ( type , index, item) {
|
||
let params = {
|
||
shopId: uni.cache.get('shopId'),
|
||
type: index,
|
||
}
|
||
if ( index == 0 && this.tableCode ) { params.tableId = this.tableCode; }
|
||
if ( this.shopTableInfo && this.shopTableInfo.seatNum ) { params.num = this.shopTableInfo.seatNum; }
|
||
let res = await this.api.choseEatModel(params)
|
||
|
||
if ( type == 'tabClick') {
|
||
if ( index == 1 ) {
|
||
if ( res.data.info.length > 0) {
|
||
this.is_type = index;
|
||
this.sendType = item.type
|
||
this.eatModel = [];
|
||
this.eatModel.push(item.val);
|
||
} else {
|
||
uni.showToast({
|
||
title: "没有可打包商品",
|
||
icon: "none",
|
||
})
|
||
return;
|
||
}
|
||
} else {
|
||
this.is_type = index;
|
||
this.sendType = item.type
|
||
this.eatModel = [];
|
||
this.eatModel.push(item.val);
|
||
}
|
||
}
|
||
this.listinfo.details = res.data.info;
|
||
this.packFee = res.data.packFee;
|
||
this.setPayAmount(res.data)
|
||
},
|
||
|
||
/**
|
||
* 监听支付方式切换
|
||
* @param {Object} n
|
||
*/
|
||
groupChange(e) {
|
||
this.radiovalue = e.type;
|
||
this.paymentBtnText = e.name;
|
||
},
|
||
|
||
/**
|
||
* 输入密码关闭
|
||
*/
|
||
close () {
|
||
this.ispws = false;
|
||
uni.pro.navigateTo('/pagesOrder/order_detail/index', {
|
||
orderId: this.listinfoid
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 初始化socket
|
||
*/
|
||
handlemessage() {
|
||
//调用前先判断是否有socket正在进行 先关闭后链接
|
||
this.socketTicket ? this.socketTicket.Close() : null
|
||
this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
|
||
tableId: uni.cache.get('tableCode'),
|
||
shopId: uni.cache.get('shopId'),
|
||
userId: uni.cache.get('userInfo').id,
|
||
"type": "connect",
|
||
})
|
||
uni.$on('message', this.getMessage)
|
||
},
|
||
|
||
/**
|
||
* 数据处理
|
||
* @param {Object} data
|
||
*/
|
||
socketSendMsg(data) {
|
||
if (this.socketTicket) {
|
||
this.socketTicket.send(data);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取会员信息
|
||
*/
|
||
async getAount() {
|
||
let res = await this.api.shopUserInfo({
|
||
"shopId": uni.cache.get('shopId'),
|
||
"userId": uni.cache.get('userInfo').id,
|
||
})
|
||
if (res.code == 0) {
|
||
this.amountVIP = res.data;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 查询订单信息
|
||
* @param {Object} i
|
||
*/
|
||
async orderorderInfo(i) {
|
||
let res = await this.api.orderorderInfo({
|
||
orderId: this.listinfoid
|
||
})
|
||
if (res.code == 0) {
|
||
this.listinfo = res.data
|
||
if (i == 1) { //请求完了详情在去调支付
|
||
this.showpopupclickdd()
|
||
}
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 去充值
|
||
*/
|
||
goRecharge() {
|
||
// 判断是否绑定手机,只有下单时候有,会员列表肯定有
|
||
// console.log(this.amountVIP.isVip, '调试1')
|
||
uni.pro.navigateTo('/pages/member/index', {
|
||
shopId: uni.cache.get('shopId')
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 生成订单
|
||
*/
|
||
async orderdetail() {
|
||
|
||
if ( this.eatModel == "dine-in" && !this.tableCode) {
|
||
uni.showToast({
|
||
title: "请选择桌台",
|
||
icon: "none",
|
||
})
|
||
return;
|
||
}
|
||
if ( this.listinfo.details.length == 0) {
|
||
uni.showToast({
|
||
title: "购物车为空，请添加商品",
|
||
icon: "none",
|
||
})
|
||
return;
|
||
}
|
||
|
||
let params = {
|
||
"tableId": this.tableCode , //桌台码
|
||
"shopId": uni.cache.get('shopId'),
|
||
"userId": uni.cache.get('userInfo').id,
|
||
"sendType": this.sendType,
|
||
"remark": this.remark,
|
||
}
|
||
if ( this.isPointsChecked && this.calcUsablePointsData.pointsNum && this.calcUsablePointsData.pointsNum > 0) {
|
||
params.pointsNum = this.calcUsablePointsData.pointsNum;
|
||
}
|
||
if ( this.userCouponInfos ) {
|
||
params.userCouponInfos = this.userCouponInfos
|
||
}
|
||
let res = await this.api.creatOrder(params)
|
||
this.listinfoid = res.data.id;
|
||
if ( this.storeInfo.registerType == 'restaurant') {
|
||
uni.redirectTo({
|
||
url: '/pagesOrder/order_detail/index?orderId=' + this.listinfoid
|
||
});
|
||
} else {
|
||
this.showpopupclickdd();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 去支付
|
||
*/
|
||
showpopupclickdd() {
|
||
if ( (this.radiovalue == 2 || this.radiovalue == 3) && this.listinfo.payAmount <= 0 ) {
|
||
uni.showToast({
|
||
title: "支付金额必须大于0",
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
// radiovalue为2是微信支付
|
||
if (this.radiovalue == 2 || this.radiovalue == 3) {
|
||
this.showpopupclickdds() //微信支付
|
||
} else {
|
||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||
// console.log(isPwd,'是否设置了支付密码')
|
||
if ( this.amountVIP.isVip == 0 ) {//非会员情况
|
||
|
||
this.goRecharge();
|
||
} else {
|
||
if (uni.cache.get('userInfo').isPwd == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/member/setPassword?shopUserInfo=' + JSON.stringify(this.amountVIP)
|
||
})
|
||
|
||
} else {
|
||
uni.hideLoading()
|
||
// this.payPasswordShow = false;
|
||
this.ispws = true
|
||
this.$nextTick(() => {
|
||
// this.$refs.payPwd.onPayUp();
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 微信/支付宝支付
|
||
*/
|
||
async showpopupclickdds() {
|
||
let res;
|
||
if ( !this.freeCheck ) {
|
||
res = await this.api.orderPay({
|
||
orderId: this.listinfoid,
|
||
// #ifdef MP-WEIXIN
|
||
payType: 'wechatPay',
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
payType: 'aliPay',
|
||
// #endif
|
||
// payType: this.radiovalue == 2 ? 'wechatPay' : 'aliPay'
|
||
}) //判断是否支付成功
|
||
} else {
|
||
res = await this.api.paymemeberIn({
|
||
shopId: uni.cache.get('shopId'),
|
||
amount: this.listinfo.payAmount,
|
||
orderld: this.listinfoid,
|
||
// #ifdef MP-WEIXIN
|
||
payType: 'wechatPay',
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
payType: 'aliPay',
|
||
// #endif
|
||
// payType: this.radiovalue == 2 ? 'wechatPay' : 'aliPay'
|
||
}) //判断是否支付成功
|
||
}
|
||
|
||
|
||
|
||
|
||
if (res.code == 0) {
|
||
|
||
// 微信支付还是余额支付
|
||
uni.requestPayment({
|
||
// #ifdef MP-WEIXIN
|
||
provider: 'wxpay', //支付类型-固定值
|
||
partnerid: res.data.appId, // 微信支付商户号
|
||
timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
|
||
nonceStr: res.data.nonceStr, // 随机字符串
|
||
package: res.data.package, // 固定值
|
||
signType: res.data.signType, //固定值
|
||
paySign: res.data.paySign, //签名
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
provider: 'alipay', //支付类型-固定值
|
||
orderInfo: res.data.tradeNo, // 微信支付商户号
|
||
// #endif
|
||
success: (res) => {
|
||
let _this = this
|
||
uni.showToast({
|
||
title: "支付成功"
|
||
})
|
||
// #ifdef MP-WEIXIN
|
||
uni.requestSubscribeMessage({
|
||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||
complete() {
|
||
|
||
// uni.cache.set('shopUser', '') //删除shopUser
|
||
_this.paymodfiyOrderInfo()
|
||
uni.redirectTo({
|
||
url: '/pagesOrder/order_detail/index?orderId=' + _this.listinfoid
|
||
});
|
||
},
|
||
})
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
_this.paymodfiyOrderInfo()
|
||
uni.redirectTo({
|
||
url: '/pagesOrder/order_detail/index?orderId=' + _this.listinfoid
|
||
});
|
||
// #endif
|
||
},
|
||
fail: async () => {
|
||
let res = await this.api.cancelOrderPay({
|
||
orderId: this.listinfoid,
|
||
}) //判断是否支付成功
|
||
|
||
|
||
uni.pro.navigateTo('/pagesOrder/order_detail/index', {
|
||
orderId: this.listinfoid
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
});
|
||
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 支付完成后请求
|
||
*/
|
||
async paymodfiyOrderInfo() {
|
||
let res = await this.api.paymodfiyOrderInfo({
|
||
orderId: this.listinfoid,
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 余额支付
|
||
* @param {Object} pwd
|
||
*/
|
||
async accountPayevent(pwd) {
|
||
this.ispws = false;
|
||
let res = await this.api.accountPay({
|
||
orderId: this.listinfoid,
|
||
memberId: this.amountVIP.id,
|
||
pwd: pwd
|
||
})
|
||
if (res.code == 0) {
|
||
// data ->1 支付成功
|
||
// ->2 余额不足
|
||
// ->3 未设置支付密码，
|
||
// ->4 不是会员，
|
||
if (res.data == 1) {
|
||
this.showToastUppop('支付成功')
|
||
let _this = this
|
||
|
||
uni.requestSubscribeMessage({
|
||
tmplIds:["z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ","AV-KybUHaK3KtFVLqpy6PHccHBS7XeX__mOM4RbufnQ"],
|
||
complete() {
|
||
uni.redirectTo({
|
||
url: '/pagesOrder/order_detail/index?orderId=' + _this
|
||
.listinfoid
|
||
});
|
||
},
|
||
})
|
||
|
||
} else if (res.data == 2) {
|
||
this.showToastUppop('余额不足')
|
||
setTimeout(() => {
|
||
// 去充值
|
||
this.goRecharge()
|
||
}, 1500)
|
||
} else if (res.data == 3) {
|
||
this.showToastUppop('未设置支付密码')
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/member/setPassword?shopUserInfo=' + JSON.stringify(this.amountVIP)
|
||
})
|
||
}, 1500)
|
||
|
||
} else if (res.data == 4) {
|
||
this.showToastUppop('非会员请充值')
|
||
setTimeout(() => {
|
||
// 去充值
|
||
this.goRecharge()
|
||
}, 1500)
|
||
}
|
||
|
||
}
|
||
|
||
},
|
||
|
||
showToastUppop(title) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title,
|
||
success: () => {
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container{
|
||
// padding-bottom: 246rpx;
|
||
}
|
||
.head{
|
||
width: 100%;
|
||
padding: $uni-spacing-row-base;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.head_bg{
|
||
height: 456rpx;
|
||
background: linear-gradient( 180deg, #E8AD7B 0%, #F5F5F5 100%);
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
margin: auto;
|
||
}
|
||
.tips{
|
||
width: 100%;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
background: #FFF8E8;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
padding: 0 16rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
.informIcon{
|
||
width: 26.79rpx;
|
||
height: 24.06rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.informText{
|
||
font-size: $uni-font-size-base;
|
||
color: #FF803D;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.tabBox{
|
||
width: 100%;
|
||
margin-top: 52rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
.tab{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-radius: 22rpx 22rpx 0 0;
|
||
background-color: $uni-bg-color;
|
||
.tab_item{
|
||
width: 50%;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: #FEFBF8;
|
||
border-radius: 22rpx 22rpx 0 0;
|
||
position: relative;
|
||
.title{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
position:relative;
|
||
z-index: 1;
|
||
}
|
||
.title.active{
|
||
color: #E8AD7B;
|
||
}
|
||
.icon{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 16rpx;
|
||
position:relative;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
.tab_item.active{
|
||
background-color: #fff;
|
||
}
|
||
// .tab_item.active:after {
|
||
// content: "";
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: -4px;
|
||
// width: 40px;
|
||
// height: 26px;
|
||
// background: orange;
|
||
// }
|
||
.tab_item.active:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -20rpx;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 2px;
|
||
background: #fff;
|
||
transform: skewX(0deg);
|
||
}
|
||
.tab_item1.active:before{
|
||
border-radius: 22rpx 40rpx 0 0;
|
||
}
|
||
.tab_item2.active:before{
|
||
border-radius: 40rpx 22rpx 0 0;
|
||
}
|
||
}
|
||
.table{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
height: 90rpx;
|
||
background-color: $uni-bg-color;
|
||
border-radius: 0 0 22rpx 22rpx;
|
||
.table_left{
|
||
display: flex;
|
||
align-items: center;
|
||
.icon{
|
||
width: 32.86rpx;
|
||
height: 39.07rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
.title{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #E8AD7B;
|
||
}
|
||
}
|
||
|
||
.value{
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.pack{
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: $uni-bg-color;
|
||
border-radius: 0 0 22rpx 22rpx;
|
||
.top{
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 8rpx;
|
||
.title{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.address{
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.list{
|
||
display: flex;
|
||
flex-direction: column;
|
||
.item{
|
||
height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
.lable{
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
.getPhone{
|
||
display: flex;
|
||
align-items: center;
|
||
.u-input{
|
||
width: 340rpx;
|
||
border: none;
|
||
input{
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
|
||
}
|
||
.input-placeholder{
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.text,.getBtn{
|
||
color: #E8AD7B;
|
||
}
|
||
.getBtn{
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #E8AD7B;
|
||
padding: 8rpx 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.addDish{
|
||
width: 176rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
text-align: center;
|
||
background: #FFF8E8;
|
||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.tabBox_t{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
padding: 32rpx 24rpx;
|
||
background-color: #fff;
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-top: 32rpx;
|
||
}
|
||
.shopName{
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.tableName{
|
||
display: flex;
|
||
.name{
|
||
margin-right: 16rpx;
|
||
}
|
||
.num{
|
||
border-left: 2rpx solid #d6d6d6;
|
||
padding-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.content_box{
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 10rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
.content{
|
||
background-color: $uni-bg-color;
|
||
border-radius: 22rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 30rpx 0;
|
||
box-sizing: border-box;
|
||
.title{
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.list_item{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
.left{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
.img{
|
||
width: 142rpx;
|
||
height: 142rpx;
|
||
margin-right: 34rpx;
|
||
flex-shrink: 0;
|
||
border-radius: 20rpx;
|
||
}
|
||
.center{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
.center_title{
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
.type{
|
||
margin: 12rpx 0 10rpx 0;
|
||
}
|
||
.type,.num{
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
}
|
||
}
|
||
.num{
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
.price{
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.cell_item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 30rpx;
|
||
.lable{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.value{
|
||
display: flex;
|
||
align-items: flex-end;
|
||
view:nth-child(1){
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-right: 16rpx;
|
||
}
|
||
view:nth-child(2){
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
.favorable{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: 26rpx;
|
||
padding-top: 26rpx;
|
||
border-bottom: 2rpx solid #E5E5E5;
|
||
.favorable_left{
|
||
display: flex;
|
||
align-items: center;
|
||
.icon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
.name{
|
||
font-size: 28rpx;
|
||
font-weight: 400rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
.favorable_right{
|
||
display: flex;
|
||
align-items: center;
|
||
.favorable_right_text{
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
font-weight: 400rpx;
|
||
}
|
||
|
||
}
|
||
.favorable_right.column{
|
||
display: flex;
|
||
flex-direction: column;
|
||
.favorable_right_text{
|
||
margin-bottom: 10rpx;
|
||
text:nth-child(1){
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
text:nth-child(2){
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
margin: 0 30rpx;
|
||
}
|
||
text:nth-child(3){
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.favorable.column{
|
||
align-items: flex-start;
|
||
}
|
||
.cell-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx 34rpx 32rpx 34rpx;
|
||
.label{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.val{
|
||
display: flex;
|
||
align-items: flex-end;
|
||
view:nth-child(1){
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-right: 42rpx;
|
||
}
|
||
view:nth-child(2){
|
||
display: flex;
|
||
align-items: flex-end;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.totalPrice{
|
||
padding: 32rpx 30rpx;
|
||
box-sizing: border-box;
|
||
// border-top: 2rpx solid #E5E5E5;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-end;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
.totalPriceNum{
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 备注
|
||
.remark{
|
||
padding: 0 20rpx;
|
||
margin-top: 32rpx;
|
||
.remark_bg{
|
||
background-color: $uni-bg-color;
|
||
border-radius: 22rpx;
|
||
padding: 32rpx 30rpx;
|
||
box-sizing: border-box;
|
||
.remark_title{
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.u-textarea{
|
||
height: 148rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 10rpx;
|
||
padding: 32rpx 22rpx!important;
|
||
box-sizing: border-box;
|
||
textarea{
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.bottom{
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0,0,0,0.1);
|
||
position: fixed;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx 50rpx 82rpx 50rpx;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
.bottom_left{
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
align-items: flex-end;
|
||
.totalAmount{
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
.paymentBtnText{
|
||
background: #E8AD7B;
|
||
border-radius: 36rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
padding: 14rpx 44rpx;
|
||
}
|
||
}
|
||
.page-total{
|
||
position: inherit;
|
||
}
|
||
.pay-info-wrap{
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
.info-wrap{
|
||
padding: 64rpx 30rpx 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
.title{
|
||
align-self: center;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.info-content{
|
||
.pay-title {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
width: 100%;
|
||
font-size: 48rpx;
|
||
color: #333;
|
||
margin-top: 48rpx;
|
||
text {
|
||
font-size: 60rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.pay-password {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 64rpx;
|
||
|
||
.list {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx solid #999;
|
||
border-radius: 8rpx;
|
||
text {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.hint {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|