1010 lines
22 KiB
Vue
1010 lines
22 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="headStatus"
|
|
v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'||listinfo.status=='closed'">
|
|
<view class="status">
|
|
<u-icon name="checkmark-circle-fill" color="#03C061" size="46"></u-icon>
|
|
<view class="statusName" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
|
<!-- {{listinfo.registerType == 'munchies'?'待支付':'下单成功'}} -->
|
|
待支付
|
|
</view>
|
|
<view class="statusName" v-if="listinfo.status=='closed'">已完成</view>
|
|
</view>
|
|
<view class="time" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
|
下单时间：{{ listinfo.createTime }}</view>
|
|
<view class="time" v-if="listinfo.status=='closed'">付款时间：{{listinfo.paidTime}}</view>
|
|
</view>
|
|
|
|
<view class="wxQrcode" v-if="shopQrcode">
|
|
<view class="left">
|
|
<text class="title">扫码加好友，优惠多多</text>
|
|
<text>优惠活动多</text>
|
|
<text>充值有好礼</text>
|
|
<text>会员享低价</text>
|
|
<text>长按保存，微信内扫一扫加好友</text>
|
|
</view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<u-image width="152" height="152" radius="16" :src="shopQrcode"></u-image>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<image style="height: 150rpx;width: 150rpx;" :src="shopQrcode" @longpress="saveImage(shopQrcode)"
|
|
mode="aspectFill"></image>
|
|
<!-- #endif -->
|
|
</view>
|
|
|
|
<!-- 先下单后支付 -->
|
|
<!-- <orderInfoAfter ref="orderInfoAfterRef" :amountVIP="amountVIP" :rechargeFreeChecked="rechargeFreeChecked"
|
|
:freeCheck="freeCheck" :listinfo="listinfo" @setPayAmount="setPayAmount"
|
|
v-if="listinfo.useType == 'dine-in-after'"></orderInfoAfter> -->
|
|
<orderInfoAfter ref="orderInfoAfterRef" :rechargeFreeChecked="rechargeFreeChecked" :freeCheck="freeCheck"
|
|
:listinfo="listinfo"></orderInfoAfter>
|
|
<!-- 先支付后下单 -->
|
|
<!-- <orderInfoBefore ref="orderInfoBefore" :listinfo="listinfo" v-else></orderInfoBefore> -->
|
|
<!-- 充值免单 -->
|
|
<!-- <block v-if="listinfo.useType == 'dine-in-after'">
|
|
<rechargeFree
|
|
:rechargeFreeChecked="rechargeFreeChecked"
|
|
v-if="listinfo.freeDingConfig&&listinfo.freeDingConfig.enable == 1&&(listinfo.status == 'unpaid' || listinfo.status == 'paying')"
|
|
ref="rechargeFree"
|
|
:freeDisabled="freeDisabled"
|
|
:payAmount="listinfo.payAmount"
|
|
:freeDingConfig="listinfo.freeDingConfig" :shopUserInfo="amountVIP" @changeFree="changeFree"></rechargeFree>
|
|
</block>
|
|
<block v-else>
|
|
<rechargeFree
|
|
:rechargeFreeChecked="rechargeFreeChecked"
|
|
v-if="listinfo.freeDingConfig&&listinfo.freeDingConfig.enable == 1&&(!listinfo.couponInfoList&&listinfo.pointsDiscountAmount<=0)&&(listinfo.status == 'unpaid' || listinfo.status == 'paying')"
|
|
ref="rechargeFree"
|
|
:freeDisabled="freeDisabled"
|
|
:payAmount="listinfo.payAmount"
|
|
:freeDingConfig="listinfo.freeDingConfig" :shopUserInfo="amountVIP" @changeFree="changeFree"></rechargeFree>
|
|
|
|
</block>
|
|
<paymentMethod ref="paymentMethod" :rechargeFreeChecked="rechargeFreeChecked" v-if="amountVIP&&listinfo.status == 'unpaid' || listinfo.status == 'paying'" :freeCheck="freeCheck" :payAmount="listinfo.payAmount" :amountVIP="amountVIP" @groupChange="groupChange"></paymentMethod>
|
|
-->
|
|
|
|
<view class="fixedview">
|
|
<view class="flex-between" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
|
<view class="fixedview_one flex-start">
|
|
<view class="fixedview_oneone"> 实付金额： </view>
|
|
<view class="fixedview_onetow">
|
|
<text>¥</text>{{listinfo.payAmount}}
|
|
</view>
|
|
</view>
|
|
<view class="fixedview_tow" @tap="$u.debounce(goToPay,1000)">
|
|
{{11}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 200rpx;"> </view>
|
|
<u-popup :show="ispws" :round="20" mode="bottom" @close="payClose" height="500" :safeAreaInsetBottom="false">
|
|
<view class="pay-info-wrap">
|
|
<view class="info-wrap flex-between">
|
|
<view class="close" @click="payClose">
|
|
<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>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted
|
|
} from 'vue';
|
|
|
|
import {
|
|
APIgetOrderById
|
|
} from '@/common/api/order/index.js'
|
|
|
|
import {
|
|
APIshopUserInfo
|
|
} from '@/common/api/member.js'
|
|
|
|
import {
|
|
useCartStore
|
|
} from '@/stores/order.js';
|
|
|
|
const cartStore = useCartStore()
|
|
|
|
// import payPasswordtwo from '@/components/payPasswordtwo.vue'
|
|
import orderInfoAfter from './components/orderInfoAfter.vue'
|
|
// import orderInfoBefore from '../components/orderInfoBefore.vue'
|
|
// import rechargeFree from '../components/rechargeFree.vue'
|
|
// import paymentMethod from '../components/paymentMethod.vue'
|
|
|
|
// 输入支付密码
|
|
const ispws = ref(false)
|
|
|
|
// 支付方式切换
|
|
const paymentmethod = reactive({
|
|
radiovalue: 1,
|
|
paymentBtnText: "余额支付",
|
|
payType: ''
|
|
})
|
|
|
|
try {
|
|
const shopQrcode = uni.cache.get('shopInfo').shopQrcode
|
|
} catch (error) {
|
|
//TODO handle the exception
|
|
}
|
|
|
|
// 订单id
|
|
const orderId = ref('')
|
|
|
|
// 订单详情
|
|
const listinfo = reactive({
|
|
|
|
})
|
|
const listinfoId = ref('')
|
|
|
|
// 会员信息？
|
|
const amountVIP = reactive({})
|
|
|
|
//优惠卷信息
|
|
const couopnInfo = reactive({
|
|
|
|
})
|
|
|
|
const freeDisabled = ref(false)
|
|
const freeCheck = ref(false)
|
|
const rechargeFreeChecked = ref(false)
|
|
|
|
// * 获取订单详情接口
|
|
const orderorderInfo = async () => {
|
|
let res = await APIgetOrderById({
|
|
orderId: orderId.value
|
|
})
|
|
console.log(res)
|
|
if (res) {
|
|
Object.assign(listinfo, res);
|
|
console.log(listinfo)
|
|
if (listinfo.couponInfoList) {
|
|
listinfo.couponInfoList = JSON.parse(listinfo.couponInfoList)
|
|
}
|
|
// this.listinfoId = res.data.orderId;
|
|
// this.shopId = res.data.shopId;
|
|
// if (listinfo.useType == " ") {
|
|
// //堂食先付费
|
|
// }
|
|
// if (listinfo.freeDingConfig && listinfo.payAmount < listinfo.freeDingConfig
|
|
// .rechargeThreshold) {
|
|
// this.freeDisabled = true
|
|
// }
|
|
// console.log(listinfo)
|
|
// if (listinfo.useType == "dine-in-after") {
|
|
// console.log(this.$refs.orderInfoAfterRef)
|
|
// this.$nextTick(() => {
|
|
// this.$refs.orderInfoAfterRef.childOnShow();
|
|
// })
|
|
// }
|
|
// this.getAount();
|
|
}
|
|
}
|
|
|
|
const setPayAmount = (data) => {
|
|
console.log(data)
|
|
listinfo.payAmount = data.payAmount
|
|
this.couopnInfo = data;
|
|
this.freeDisabled = data.freeDisabled
|
|
this.freeCheck = data.freeCheck
|
|
if (listinfo.freeDingConfig && listinfo.payAmount < listinfo.freeDingConfig
|
|
.rechargeThreshold) {
|
|
this.freeDisabled = true
|
|
} else {
|
|
this.freeDisabled = false
|
|
}
|
|
}
|
|
|
|
// * 免单状态监听
|
|
const changeFree = (val) => {
|
|
// this.freeCheck = val;
|
|
this.rechargeFreeChecked = !val
|
|
|
|
if (this.rechargeFreeChecked) {
|
|
if (this.couopnInfo) {
|
|
if (this.couopnInfo.isPointsChecked) {
|
|
listinfo.payAmount = (Number(listinfo.payAmount) + (this.couopnInfo
|
|
.calcUsablePointsData.pointsNum / this.couopnInfo.calcUsablePointsData
|
|
.equivalentPoints)).toFixed(2);
|
|
}
|
|
let couponList = this.couopnInfo.userCouponInfos.filter(v => v.type == 1);
|
|
if (couponList.length > 0) {
|
|
listinfo.payAmount = (couponList.length > 0 ? Number(listinfo.payAmount) +
|
|
couponList[0].discountAmount : listinfo.payAmount)
|
|
}
|
|
let productList = this.couopnInfo.userCouponInfos.filter(v => v.type == 2);
|
|
if (productList.length > 0) {
|
|
productList.map(item => {
|
|
|
|
listinfo.payAmount = Number(listinfo.payAmount) + item.discountAmount
|
|
})
|
|
}
|
|
|
|
}
|
|
listinfo.payAmount = (listinfo.payAmount * listinfo.freeDingConfig.rechargeTimes)
|
|
.toFixed(2)
|
|
} else {
|
|
listinfo.payAmount = (listinfo.payAmount / listinfo.freeDingConfig.rechargeTimes)
|
|
.toFixed(2)
|
|
if (this.couopnInfo) {
|
|
this.couopnInfo.isPointsChecked = false;
|
|
let couponList = this.couopnInfo.userCouponInfos.filter(v => v.type == 1);
|
|
if (couponList.length > 0) {
|
|
listinfo.payAmount = (couponList.length > 0 ? Number(listinfo.payAmount) -
|
|
couponList[0].discountAmount : listinfo.payAmount)
|
|
}
|
|
let productList = this.couopnInfo.userCouponInfos.filter(v => v.type == 2);
|
|
if (productList.length > 0) {
|
|
productList.map(item => {
|
|
listinfo.payAmount = Number(listinfo.payAmount) - item.discountAmount
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
const saveImage = (url) => {
|
|
uni.saveImage({
|
|
url: url,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: "保存成功",
|
|
icon: 'none'
|
|
})
|
|
},
|
|
});
|
|
}
|
|
|
|
// * 获取会员信息
|
|
const getAount = async () => {
|
|
let res = await this.api.shopUserInfo({
|
|
"shopId": listinfo.shopId,
|
|
"userId": uni.cache.get('userInfo').id,
|
|
})
|
|
if (res.code == 0) {
|
|
console.log("会员信息===", res)
|
|
this.amountVIP = res.data;
|
|
}
|
|
}
|
|
|
|
// * 获取会员信息
|
|
const groupChange = async (e) => {
|
|
this.radiovalue = e.type;
|
|
this.paymentBtnText = e.name;
|
|
}
|
|
|
|
// * 去充值
|
|
const goRecharge = () => {
|
|
uni.pro.navigateTo('/pages/member/index', {
|
|
shopId: listinfo.shopId
|
|
})
|
|
}
|
|
|
|
// * 去支付
|
|
const goToPay = async () => {
|
|
if ((this.radiovalue == 2 || this.radiovalue == 3) && listinfo.payAmount <= 0) {
|
|
uni.showToast({
|
|
title: "支付金额必须大于0",
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
if (this.couopnInfo) {
|
|
let params = {
|
|
shopId: listinfo.shopId,
|
|
orderId: listinfo.orderId,
|
|
userCouponInfos: this.couopnInfo.userCouponInfos,
|
|
}
|
|
if (this.couopnInfo.isPointsChecked && this.couopnInfo.calcUsablePointsData.pointsNum && this
|
|
.couopnInfo.calcUsablePointsData.pointsNum > 0) {
|
|
params.pointsNum = this.couopnInfo.calcUsablePointsData.pointsNum;
|
|
}
|
|
let res = await this.api.useCoupon(params)
|
|
}
|
|
|
|
if (this.radiovalue == 2 || this.radiovalue == 3) {
|
|
this.wechatPay() //微信支付
|
|
} 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
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// * 取消支付
|
|
const payClose = async () => {
|
|
this.ispws = false;
|
|
console.log(2)
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '取消支付'
|
|
})
|
|
setTimeout(res => {
|
|
uni.switchTab({
|
|
url: '/pages/order/order'
|
|
});
|
|
}, 500)
|
|
}
|
|
|
|
// * 余额支付
|
|
const accountPayevent = async (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) {
|
|
uni.showToast({
|
|
title: "支付成功",
|
|
icon: 'none'
|
|
})
|
|
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) {
|
|
uni.showToast({
|
|
title: "余额不足",
|
|
icon: 'none'
|
|
})
|
|
setTimeout(() => {
|
|
// 去充值
|
|
this.goRecharge()
|
|
}, 1500)
|
|
} else if (res.data == 3) {
|
|
uni.showToast({
|
|
title: "未设置支付密码",
|
|
icon: 'none'
|
|
})
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/member/setPassword?shopUserInfo=' + JSON.stringify(this
|
|
.amountVIP)
|
|
})
|
|
}, 1500)
|
|
|
|
} else if (res.data == 4) {
|
|
uni.showToast({
|
|
title: "非会员请充值",
|
|
icon: 'none'
|
|
})
|
|
setTimeout(() => {
|
|
// 去充值
|
|
this.goRecharge()
|
|
}, 1500)
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* 微信支付
|
|
*/
|
|
const wechatPay = async () => {
|
|
let res;
|
|
console.log(this.rechargeFreeChecked)
|
|
if (!this.rechargeFreeChecked) {
|
|
res = await this.api.orderPay({
|
|
orderId: orderId.value,
|
|
// #ifdef MP-WEIXIN
|
|
payType: 'wechatPay',
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
payType: 'aliPay',
|
|
// #endif
|
|
// payType: this.radiovalue == 2 ? 'wechatPay' : 'aliPay'
|
|
}) //判断是否支付成功
|
|
} else {
|
|
console.log(listinfo.payAmount)
|
|
res = await this.api.paymemeberIn({
|
|
shopId: listinfo.shopId,
|
|
amount: listinfo.payAmount,
|
|
orderId: orderId.value,
|
|
// #ifdef MP-WEIXIN
|
|
payType: 'wechatPay',
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
payType: 'aliPay',
|
|
// #endif
|
|
// payType: this.radiovalue == 2 ? 'wechatPay' : 'aliPay'
|
|
}) //判断是否支付成功
|
|
}
|
|
if (res.code == 0) {
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
mask: true
|
|
})
|
|
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() {
|
|
|
|
_this.paymodfiyOrderInfo()
|
|
setTimeout(res => {
|
|
uni.hideLoading()
|
|
uni.switchTab({
|
|
url: '/pages/order/order'
|
|
});
|
|
}, 500)
|
|
},
|
|
})
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
_this.paymodfiyOrderInfo()
|
|
uni.switchTab({
|
|
url: '/pages/order/order'
|
|
});
|
|
// #endif
|
|
},
|
|
fail: async (err) => {
|
|
|
|
let res = await this.api.cancelOrderPay({
|
|
orderId: orderId.value,
|
|
}) //判断是否支付成功
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付失败'
|
|
})
|
|
setTimeout(res => {
|
|
uni.hideLoading()
|
|
uni.switchTab({
|
|
url: '/pages/order/order'
|
|
});
|
|
}, 500)
|
|
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// * 支付完成后请求
|
|
const paymodfiyOrderInfo = async () => {
|
|
let res = await this.api.paymodfiyOrderInfo({
|
|
orderId: listinfo.orderId,
|
|
})
|
|
}
|
|
|
|
// * 复制订单号
|
|
const copyHandle = async (e) => {
|
|
uni.setClipboardData({
|
|
data: e,
|
|
success() {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
// 获取当前页面栈
|
|
const pages = getCurrentPages();
|
|
// 获取当前页面实例
|
|
const currentPage = pages[pages.length - 1];
|
|
// 获取页面参数
|
|
const options = currentPage.options;
|
|
orderId.value = options.orderId
|
|
let res = await APIshopUserInfo({
|
|
shopId: options.shopId
|
|
})
|
|
cartStore.shopInfo = res.shopInfo
|
|
orderorderInfo()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep page {
|
|
background-color: #F7F7F7;
|
|
}
|
|
|
|
.container {
|
|
padding: 32rpx 28rpx 32rpx 28rpx;
|
|
}
|
|
|
|
.headStatus {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 32rpx;
|
|
align-items: center;
|
|
|
|
.status {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
|
|
.statusName {
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 18rpx;
|
|
}
|
|
}
|
|
|
|
.wxQrcode {
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
padding: 32rpx 24rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 32rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
|
|
.card_box {
|
|
background-color: #fff;
|
|
// box-shadow: 0rpx 8rpx 12rpx 2rpx rgba(87,86,86,0.35);
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(87, 86, 86, 0.35);
|
|
border-radius: 18rpx;
|
|
|
|
.card_head_box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: -22.5rpx;
|
|
padding: 0 44rpx;
|
|
|
|
.card_head_item {
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
background-color: #f9f9f9;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0rpx -13rpx 18rpx -16rpx rgba(87, 86, 86, 0.35);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.card {
|
|
// background-color: #fff;
|
|
border-radius: 20upx;
|
|
margin-bottom: 28upx;
|
|
position: relative;
|
|
|
|
.head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 50rpx 34rpx 32rpx 34rpx;
|
|
border-bottom: 2rpx dashed #E3E3E3;
|
|
|
|
.head_left {
|
|
.shopName {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.tableName {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
text {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.number-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 32rpx;
|
|
|
|
.t {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.number {
|
|
font-weight: bold;
|
|
font-size: 56rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
|
|
.price {
|
|
.i {
|
|
font-size: 20upx;
|
|
}
|
|
|
|
.num {
|
|
font-size: 38upx;
|
|
}
|
|
}
|
|
|
|
.shop-box {
|
|
padding: 36rpx 34rpx 30rpx 34rpx;
|
|
border-bottom: 2rpx dashed #E3E3E3;
|
|
|
|
.shop-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.shop-head-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.tag-wrap {
|
|
width: 80rpx;
|
|
height: 48rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
border: 2rpx solid #E3AD7F;
|
|
margin-right: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.tag {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #E3AD7F;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.shop-info {
|
|
margin-top: 32rpx;
|
|
|
|
.item:nth-child(1) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 32rpx;
|
|
display: flex;
|
|
|
|
.cover {}
|
|
|
|
.info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 16upx;
|
|
|
|
.productName {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.productSkuName {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.n {
|
|
font-size: 24upx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
padding-left: 68rpx;
|
|
|
|
.priceAmount {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-top: 26rpx;
|
|
}
|
|
|
|
.num {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.total-wrap {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
|
|
.price {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.order_footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 34rpx;
|
|
position: relative;
|
|
|
|
.order_footer_icon {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: -22.5rpx;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.order_footer_left_icon {
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
margin-left: -22.5rpx;
|
|
background-color: #f9f9f9;
|
|
border-radius: 50%;
|
|
box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);
|
|
|
|
}
|
|
|
|
.order_footer_right_icon {
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
margin-right: -22.5rpx;
|
|
background-color: #f9f9f9;
|
|
border-radius: 50%;
|
|
box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);
|
|
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.order-info {
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 32upx;
|
|
|
|
.t {
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.info {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.fixedview {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
.flex-between {
|
|
width: 100%;
|
|
padding: 36rpx 54rpx 102rpx 54rpx;
|
|
background: #FFFFFF;
|
|
|
|
.fixedview_one {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.fixedview_oneone {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.fixedview_onetow {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fixedview_tow {
|
|
background: #E3AD7F;
|
|
border-radius: 36rpx;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
padding: 14rpx 44rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |