908 lines
21 KiB
Vue
908 lines
21 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="headStatus">
|
|
<view class="status">
|
|
<up-icon v-if="listinfo.status =='done'||listinfo.status =='unpaid'" name="checkmark-circle-fill"
|
|
color="#03C061" size="23"></up-icon>
|
|
<view class="statusName" v-if="listinfo.status == 'unpaid'">待支付</view>
|
|
<view class="statusName" v-if="listinfo.status=='done'">已完成</view>
|
|
<view class="statusName" v-if="listinfo.status=='refund'">退单</view>
|
|
<view class="statusName" v-if="listinfo.status=='part-refund'">部分退单</view>
|
|
<view class="statusName" v-if="listinfo.status=='cancelled'">取消订单</view>
|
|
</view>
|
|
<view class="time" v-if="listinfo.createTime">下单时间：{{ listinfo.createTime }}</view>
|
|
<view class="time" v-if="listinfo.paidTime && (listinfo.status!='cancelled' ||listinfo.status!='unpaid')">
|
|
付款时间：{{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" :rechargeFreeChecked="rechargeFreeChecked" :freeCheck="freeCheck"
|
|
:listinfo="listinfo" :orderVIP="orderVIP" :ordershopUserInfo='ordershopUserInfo' @istype="istype"
|
|
@clickPointsamount='clickPointsamount'>
|
|
</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="orderVIP" @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="orderVIP" @changeFree="changeFree"></rechargeFree>
|
|
|
|
</block> -->
|
|
|
|
<!-- 支付方式 -->
|
|
<paymentMethodes ref="paymentMethodref" :orderVIP="orderVIP" @groupChange="groupChange"
|
|
v-if="listinfo.status == 'unpaid'">
|
|
</paymentMethodes>
|
|
<!-- <paymentMethodes ref="paymentMethodes" :rechargeFreeChecked="rechargeFreeChecked"
|
|
v-if="orderVIP&&listinfo.status == 'unpaid' || listinfo.status == 'paying'" :freeCheck="freeCheck"
|
|
:payAmount="listinfo.payAmount" :orderVIP="orderVIP" @groupChange="groupChange"></paymentMethodes> -->
|
|
|
|
|
|
<view class="fixedview">
|
|
<view class="flex-between" v-if="listinfo.status == 'unpaid'">
|
|
<view class="fixedview_one flex-start">
|
|
<view class="fixedview_oneone"> 实付金额： </view>
|
|
<view class="fixedview_onetow">
|
|
<text>¥</text>{{listinfo.totalCost}}
|
|
</view>
|
|
</view>
|
|
<view class="fixedview_tow" @tap="$u.debounce(goToPay,1000)">
|
|
{{paymentmethod.paymentBtnText}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 200rpx;"> </view>
|
|
<payPassword ref="payPasswordref" :isShow="ispws" @inputComplete="accountPayevent"
|
|
:password='payPasswordPassword' @close="ispws = false" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
onUnmounted,
|
|
watchEffect
|
|
} from 'vue';
|
|
|
|
import {
|
|
APIgetOrderById
|
|
} from '@/common/api/order/index.js'
|
|
|
|
import {
|
|
APIusershopInfodetail,
|
|
APIshopUserInfo
|
|
} from '@/common/api/member.js'
|
|
|
|
import {
|
|
APImemberPointsmyPoints,
|
|
APImemberPointscalcUsablePoints
|
|
} from '@/common/api/shop/index.js'
|
|
|
|
import {
|
|
useCartStore
|
|
} from '@/stores/order.js';
|
|
|
|
const cartStore = useCartStore()
|
|
|
|
// 结账管理
|
|
import {
|
|
Memberpay
|
|
} from '@/stores/pay.js';
|
|
|
|
const storeMemberpay = Memberpay();
|
|
|
|
import payPassword from '@/components/payPassword.vue'
|
|
import orderInfoAfter from './components/orderInfoAfter.vue'
|
|
// import orderInfoBefore from '../components/orderInfoBefore.vue'
|
|
// import rechargeFree from '../components/rechargeFree.vue'
|
|
import paymentMethodes from '@/components/paymentMethod.vue'; //支付方式
|
|
import {
|
|
onBackPress
|
|
} from '@dcloudio/uni-app';
|
|
|
|
// 输入支付密码
|
|
const ispws = ref(false)
|
|
|
|
// 商品订单会员
|
|
const ordershopUserInfo = ref({
|
|
isTableFee: 0
|
|
})
|
|
|
|
// 是否显示商家二维码信息
|
|
try {
|
|
const shopQrcode = ref(uni.cache.get('shopInfo').shopQrcode)
|
|
} catch (error) {
|
|
//TODO handle the exception
|
|
}
|
|
|
|
// 订单id
|
|
const orderId = ref('')
|
|
|
|
// 订单详情
|
|
const listinfo = reactive({
|
|
combinedArray: {},
|
|
Productroll: 0,
|
|
coupondiscountAmount: 0,
|
|
couponInfoList: '',
|
|
pointsDiscountAmount: 0
|
|
})
|
|
|
|
// 会员信息
|
|
const orderVIP = ref()
|
|
|
|
//判断是否是打包商品
|
|
const is_type = ref(0)
|
|
|
|
//打包商品切换
|
|
const istype = (newValue) => {
|
|
is_type.value = newValue;
|
|
};
|
|
|
|
//积分
|
|
const freeCheck = ref(false)
|
|
|
|
|
|
// * 获取订单详情接口
|
|
const orderorderInfo = async () => {
|
|
let res = await APIgetOrderById({
|
|
orderId: orderId.value
|
|
})
|
|
if (res) {
|
|
Object.assign(listinfo, res);
|
|
if (listinfo.status == 'unpaid') {
|
|
try {
|
|
let res = await APIhistoryOrder({
|
|
orderId: orderId.value
|
|
})
|
|
} catch (error) {}
|
|
// if (listinfo.couponInfoList) {
|
|
// listinfo.couponInfoList = JSON.parse(listinfo.couponInfoList)
|
|
// }
|
|
}
|
|
|
|
// 历史订单
|
|
if (listinfo.detailMap) {
|
|
let combinedArray = [];
|
|
for (const key in listinfo.detailMap) {
|
|
if (listinfo.detailMap.hasOwnProperty(key)) {
|
|
let subArray = listinfo.detailMap[key];
|
|
combinedArray = [...combinedArray, ...subArray]
|
|
}
|
|
}
|
|
listinfo.combinedArray = combinedArray
|
|
setTimeout(async () => {
|
|
listinfo.packFee = await cartStore.getTotalPackFee(listinfo.combinedArray)
|
|
// 计算购物车商品费用
|
|
listinfo.totalPrices = await cartStore.getTotalTotalPrices(listinfo.combinedArray)
|
|
// 餐位费listinfo.seatNum
|
|
listinfo.Seatcharge = await cartStore.getTotalSeatcharge(listinfo.seatNum)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
// 监听价格算法
|
|
watchEffect(async () => {
|
|
if (listinfo.combinedArray.length > 0) {
|
|
//总价格
|
|
console.log(listinfo.combinedArray, listinfo.packFee, listinfo.totalPrices, listinfo.Seatcharge,
|
|
listinfo.Productroll, listinfo.coupondiscountAmount)
|
|
// 打包费packFee 计算购物车商品费用totalPrices 餐位费Seatcharge
|
|
let sum = (is_type.value != 0 ? listinfo.packFee : 0) + listinfo.totalPrices + (is_type.value ==
|
|
0 ? listinfo.Seatcharge : 0);
|
|
listinfo.originAmount = Math.round(sum * 100) / 100;
|
|
|
|
// 打包费packFee 计算购物车商品费用totalPrices 餐位费Seatcharge 商品卷Productroll 优惠卷coupondiscountAmount 积分listinfo.pointsDiscountAmount
|
|
let sums = (is_type.value != 0 ? listinfo.packFee : 0) + listinfo.totalPrices + (is_type.value ==
|
|
0 ? listinfo.Seatcharge : 0) - (listinfo.Productroll || 0) - (listinfo
|
|
.coupondiscountAmount || 0) - (listinfo.pointsDiscountAmount || 0);
|
|
listinfo.totalCost = Math.round(sums * 100) / 100;
|
|
// 积分
|
|
if (listinfo.totalCost && listinfo.status == 'unpaid') {
|
|
await memberPointscalcUsablePoints()
|
|
}
|
|
}
|
|
});
|
|
|
|
const saveImage = (url) => {
|
|
uni.saveImage({
|
|
url: url,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: "保存成功",
|
|
icon: 'none'
|
|
})
|
|
},
|
|
});
|
|
}
|
|
|
|
// 支付方式切换
|
|
const paymentmethod = reactive({
|
|
radiovalue: 1,
|
|
paymentBtnText: "余额支付",
|
|
payType: 'accountPay'
|
|
})
|
|
|
|
const groupChange = async (e) => {
|
|
paymentmethod.radiovalue = e.type;
|
|
paymentmethod.paymentBtnText = e.name;
|
|
paymentmethod.payType = e.payType;
|
|
}
|
|
|
|
// * 去充值
|
|
const goRecharge = () => {
|
|
uni.pro.navigateTo('/pages/member/index', {
|
|
shopId: listinfo.shopId
|
|
})
|
|
}
|
|
|
|
// 操作下单时候
|
|
const orderInfoAfterRef = ref(null)
|
|
|
|
// 商品卷的id储存
|
|
const uniqueIds = ref([])
|
|
|
|
// 这是优惠卷传的值
|
|
const handleReturnData = async (data) => {
|
|
// 这是优惠卷
|
|
if (data.typeOrder == 1) {
|
|
if (data.item) {
|
|
// 优惠卷减去的金额
|
|
listinfo.coupondiscountAmount = data.item.discountAmount
|
|
uniqueIds.value.push(data.item.id)
|
|
orderInfoAfterRef.value.dataprocessing(data)
|
|
} else {
|
|
if (listinfo.coupondiscountAmount > 0) {
|
|
listinfo.coupondiscountAmount = 0
|
|
uniqueIds.value.pop()
|
|
orderInfoAfterRef.value.dataprocessing({
|
|
typeOrder: 1,
|
|
item: ''
|
|
})
|
|
}
|
|
}
|
|
} else {
|
|
// 筛选出商品卷的id
|
|
uniqueIds.value = [...uniqueIds.value, ...new Set(data.map(item => item.id))]
|
|
// 商品卷总价价格
|
|
listinfo.Productroll = await cartStore.getTotalProductroll(data)
|
|
let res = {
|
|
Productroll: listinfo.Productroll,
|
|
uniqueIds: uniqueIds.value.length
|
|
}
|
|
orderInfoAfterRef.value.dataprocessing(res)
|
|
}
|
|
|
|
};
|
|
|
|
const payPasswordPassword = ref('')
|
|
|
|
// * 去支付
|
|
const goToPay = async () => {
|
|
// 余额支付
|
|
if (paymentmethod.payType == 'accountPay') {
|
|
if (orderVIP.value.isVip == 0) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '您还不是会员,是否去注册会员？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.pro.navigateTo('user/member/index', {
|
|
shopId: orderVIP.value.shopId,
|
|
type: 'detail'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
|
|
})
|
|
} else {
|
|
payPasswordPassword.value = ''
|
|
ispws.value = true
|
|
}
|
|
return false
|
|
}
|
|
let checkOrderPay = {
|
|
orderId: orderId.value,
|
|
vipPrice: orderVIP.value.isVip == 1 && ordershopUserInfo.value.isMemberPrice == 1 ? 1 :
|
|
0, //是否使用会员价0否1是
|
|
userAllPack: is_type.value == 0 ? 0 : 1, //是否整单打包
|
|
seatNum: is_type.value == 0 ? listinfo.seatNum : 0, //用餐人数
|
|
originAmount: listinfo.originAmount, //订单原金额（包含打包费+餐位费） 不含折扣价格
|
|
discountRatio: 1, //折扣比例(计算时 向上取整保留 两位小数) 写死1
|
|
discountAmount: 0, //手动优惠金额 写死0
|
|
productCouponDiscountAmount: listinfo.Productroll, //商品优惠券抵扣金额
|
|
fullCouponDiscountAmount: listinfo.coupondiscountAmount, //满减优惠券抵扣金额
|
|
couponList: uniqueIds.value, //用户使用的卡券
|
|
orderAmount: listinfo.totalCost, // 最中订单金额
|
|
roundAmount: 0, //抹零金额 减免多少钱
|
|
pointsDiscountAmount: listinfo.pointsDiscountAmount, //积分抵扣金额(tb_points_basic_setting表)
|
|
pointsNum: 0, //(扣除各类折扣 enable_deduction后使用)
|
|
remark: '', //用户备注
|
|
}
|
|
let res = await storeMemberpay.actionsltPayOrder({
|
|
checkOrderPay,
|
|
payType: paymentmethod.payType,
|
|
buyerRemark: '',
|
|
returnUrl: ''
|
|
})
|
|
if (res) {
|
|
await orderorderInfo()
|
|
}
|
|
}
|
|
|
|
//002-获取订单可用积分及抵扣金额（支付页面使用）
|
|
const memberPointscalcUsablePoints = async () => {
|
|
let res = await APImemberPointscalcUsablePoints({
|
|
userId: orderVIP.value.id,
|
|
orderAmount: listinfo.totalCost,
|
|
})
|
|
orderInfoAfterRef.value.getCalcUsablePoints(res)
|
|
}
|
|
|
|
//
|
|
const clickPointsamount = (Pointsamount) => {
|
|
listinfo.pointsDiscountAmount = Pointsamount
|
|
}
|
|
|
|
const payPasswordref = ref(null)
|
|
// 余额支付
|
|
const accountPayevent = async (pwd) => {
|
|
console.log('输入的密码是：', pwd);
|
|
ispws.value = false;
|
|
let checkOrderPay = {
|
|
userId: uni.cache.get('userInfo').id,
|
|
orderId: orderId.value,
|
|
vipPrice: orderVIP.value.isVip == 1 && ordershopUserInfo.value.isMemberPrice == 1 ? 1 :
|
|
0, //是否使用会员价0否1是
|
|
userAllPack: is_type.value == 0 ? 0 : 1, //是否整单打包
|
|
seatNum: is_type.value == 0 ? listinfo.seatNum : 0, //用餐人数
|
|
originAmount: listinfo.originAmount, //订单原金额（包含打包费+餐位费） 不含折扣价格
|
|
discountRatio: 1, //折扣比例(计算时 向上取整保留 两位小数) 写死1
|
|
discountAmount: 0, //手动优惠金额 写死0
|
|
productCouponDiscountAmount: listinfo.Productroll, //商品优惠券抵扣金额
|
|
fullCouponDiscountAmount: listinfo.coupondiscountAmount, //满减优惠券抵扣金额
|
|
couponList: uniqueIds.value, //用户使用的卡券
|
|
orderAmount: listinfo.totalCost, // 最中订单金额
|
|
roundAmount: 0, //抹零金额 减免多少钱
|
|
pointsDiscountAmount: listinfo.pointsDiscountAmount, //积分抵扣金额(tb_points_basic_setting表)
|
|
pointsNum: 0, //(扣除各类折扣 enable_deduction后使用)
|
|
remark: '', //用户备注
|
|
}
|
|
try {
|
|
await storeMemberpay.balancePayOrder({
|
|
checkOrderPay,
|
|
payType: paymentmethod.payType,
|
|
pwd: pwd,
|
|
shopUserId: orderVIP.value.id,
|
|
buyerRemark: '',
|
|
returnUrl: ''
|
|
})
|
|
await orderorderInfo()
|
|
} catch (error) {
|
|
//TODO handle the exception
|
|
}
|
|
payPasswordPassword.value = ''
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
uni.$off('returnData', handleReturnData);
|
|
});
|
|
|
|
// 监听页面返回事件
|
|
onMounted(async () => {
|
|
// 获取当前页面栈
|
|
const pages = getCurrentPages();
|
|
// 获取当前页面实例
|
|
const currentPage = pages[pages.length - 1];
|
|
// 获取页面参数
|
|
const options = currentPage.options;
|
|
orderId.value = options.orderId
|
|
if (options.shopId) {
|
|
// 每次进来全局更新shopId
|
|
uni.cache.set('shopId', options.shopId, 30)
|
|
uni.$on('returnData', handleReturnData);
|
|
// * 获取会员信息
|
|
let res = await APIshopUserInfo({
|
|
shopId: options.shopId
|
|
})
|
|
uni.cache.set('orderVIP', res)
|
|
uni.cache.set('ordershopUserInfo', res.shopInfo)
|
|
orderVIP.value = res
|
|
ordershopUserInfo.value = res.shopInfo
|
|
}
|
|
await orderorderInfo()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
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> |