1423 lines
36 KiB
Vue
1423 lines
36 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">
|
|
<view>桌号：</view>
|
|
<view class="name">{{ shopTableInfo.name }} </view>
|
|
<view class="num" v-if="shopTableInfo&&shopTableInfo.seatNum">{{ shopTableInfo.seatNum }}人</view>
|
|
</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 || item.num}} </text>
|
|
</view>
|
|
</view>
|
|
<view class="price"> ￥{{ item.totalAmount || item.priceAmount || 0}} </view>
|
|
</view>
|
|
<view class="cell-item" v-if="shopTableInfo&&shopTableInfo.seatNum&&sendType=='table'">
|
|
<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" >
|
|
<view class="favorable" v-if="item.type!='points'" @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" ><text class="favorable_right_text"></text> <u-icon name="arrow-right" color="#575B66" size="28"></u-icon></view>
|
|
</view>
|
|
<view class="favorable" v-else-if="item.type=='points'&&calcUsablePointsData.usable">
|
|
<view class="favorable_left">
|
|
<image class="icon" :src="item.url" mode="aspectFill"/>
|
|
<text class="name"> {{ item.name }} </text>
|
|
</view>
|
|
<view class="favorable_right" @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" ref="rechargeFree" :freeDisabled="freeDisabled" :payAmount="listinfo.payAmount" :freeDingConfig="freeDingConfig" :shopUserInfo="amountVIP" @changeFree="changeFree"></rechargeFree>
|
|
<!-- 充值活动 -->
|
|
<topUpActivity 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", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
|
|
// { name: "团购优惠", type: "group", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
|
|
{ name: "积分抵扣", type: "points", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/points.png" }
|
|
],
|
|
isPointsChecked: false,
|
|
rechargeFreeChecked: false,
|
|
calcUsablePointsData: null,
|
|
order: {
|
|
phone: "",
|
|
},
|
|
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,
|
|
|
|
shopId: null,
|
|
storeInfo: {},
|
|
tableCode: 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();
|
|
},
|
|
onShow() {
|
|
if (this.listinfoid) {
|
|
uni.$on('message', this.getMessage)
|
|
this.orderorderInfo()
|
|
} else {
|
|
this.handlemessage()
|
|
}
|
|
this.is_typeList.map((item)=>{
|
|
console.log(this.storeInfo.eatModel.indexOf(item.val))
|
|
if ( this.storeInfo.eatModel.indexOf(item.val) != -1) {
|
|
item.show = true;
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
setPayAmount ( cartLists ) {
|
|
console.log(cartLists)
|
|
if ( this.amountVIP.isVip == 1 && cartLists.memberAmount > 0 ) {
|
|
this.listinfo.payAmount = (cartLists.memberAmount+(this.shopTableInfo?(this.shopTableInfo.seatNum*this.storeInfo.tableFee):0)).toFixed(2)
|
|
} else {
|
|
this.listinfo.payAmount = (cartLists.amount+(this.shopTableInfo?(this.shopTableInfo.seatNum*this.storeInfo.tableFee):0)).toFixed(2)
|
|
}
|
|
},
|
|
/**
|
|
* 免单状态监听
|
|
* @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':
|
|
uni.pro.navigateTo('/pages/user/coupon', {
|
|
type: "confirm_order"
|
|
})
|
|
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
|
|
}
|
|
console.log(this.calcUsablePointsData)
|
|
},
|
|
|
|
/**
|
|
* 获取桌台码
|
|
*/
|
|
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 :
|
|
'',
|
|
}
|
|
console.log(this.shopId)
|
|
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,
|
|
})
|
|
return;
|
|
}
|
|
this.freeDingConfig = res.data.freeDingConfig;
|
|
this.shopTableInfo = res.data.shopTableInfo;
|
|
this.storeInfo = res.data.storeInfo;
|
|
this.setPayAmount(this.cartLists)
|
|
this.getCalcUsablePoints()
|
|
},
|
|
|
|
/**
|
|
* 解码
|
|
* @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.isPointsChecked = false;
|
|
this.listinfoid = msg.data.id
|
|
this.listinfo.details = msg.data.detailList;
|
|
this.setPayAmount(msg.data)
|
|
uni.$off('getMessage')
|
|
this.orderorderInfo(1)
|
|
this.getCalcUsablePoints()
|
|
}
|
|
break;
|
|
case 'addCart':
|
|
this.isSocket = true;
|
|
if ( this.eatModel == "dine-in" && this.tableCode ) {
|
|
this.isPointsChecked = false;
|
|
if (this.listinfoid) {
|
|
this.orderorderInfo()
|
|
} else {
|
|
this.listinfo.details = msg.data;
|
|
this.setPayAmount(msg)
|
|
}
|
|
this.getCalcUsablePoints()
|
|
}
|
|
|
|
break;
|
|
case 'order':
|
|
uni.navigateBack()
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: '您的小伙伴已下单了哦~~'
|
|
})
|
|
}, 1000)
|
|
break;
|
|
case 'addcart':
|
|
this.isPointsChecked = false;
|
|
if (this.listinfoid) {
|
|
this.orderorderInfo()
|
|
} else {
|
|
this.listinfo.details = msg.data;
|
|
this.setPayAmount(msg)
|
|
}
|
|
this.getCalcUsablePoints()
|
|
this.isSocket = true;
|
|
break;
|
|
}
|
|
this.$set(this, 'cartLists', msg)
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* 监听送餐/打包切换
|
|
* @param {Object} val
|
|
*/
|
|
tabClick ( index, item ) {
|
|
this.is_type = index;
|
|
this.sendType = item.type
|
|
this.eatModel = [];
|
|
this.eatModel.push(item.val);
|
|
this.getchoseEatModel();
|
|
},
|
|
|
|
/**
|
|
* 获取堂食/外带菜品数据
|
|
*/
|
|
async getchoseEatModel () {
|
|
let params = {
|
|
shopId: uni.cache.get('shopId'),
|
|
type: this.is_type,
|
|
}
|
|
if ( this.eatModel == "dine-in" && this.tableCode ) { params.tableId = this.tableCode; }
|
|
if ( this.shopTableInfo && this.shopTableInfo.seatNum ) { params.num = this.shopTableInfo.seatNum; }
|
|
let res = await this.api.choseEatModel(params)
|
|
this.listinfo.details = res.data.info;
|
|
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;
|
|
}
|
|
let res = await this.api.creatOrder(params)
|
|
console.log(res)
|
|
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;
|
|
margin-bottom: 32rpx;
|
|
.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;
|
|
}
|
|
|
|
}
|
|
}
|
|
.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>
|