zhouzhenyuan
1 year ago
parent
63bff7b0d1
commit
bf7d09909e
@ -0,0 +1,12 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// api地址
|
||||
const api = { |
||||
list: 'goods/list', |
||||
} |
||||
|
||||
// 商品列表
|
||||
export const list = (param, option) => { |
||||
return request.get(api.list, param, option) |
||||
} |
||||
|
||||
@ -0,0 +1,99 @@ |
||||
<template> |
||||
<view class="member"> |
||||
<view class="title"> |
||||
邀请记录 |
||||
</view> |
||||
<view class="tab"> |
||||
<view class="tabList"> |
||||
<view v-for="(item,index) in tabList" :key="index" class="tabItem"> |
||||
<view class="name" :style="{'color':item.value==chosed?'#FF4C4B':'#7A7A7A'}"> |
||||
{{item.name}} |
||||
</view> |
||||
<view class="line" v-if="item.value==chosed"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
chosed:'0', |
||||
tabList:[ |
||||
{ |
||||
name:'待完成', |
||||
value:'0' |
||||
},{ |
||||
name:'已完成', |
||||
value:'1' |
||||
},{ |
||||
name:'已完成', |
||||
value:'2' |
||||
} |
||||
] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.member{ |
||||
width: 100%; |
||||
height: 1296rpx; |
||||
background: url('../../static/member/merBack.png') 100% no-repeat; |
||||
background-size: 100% 100%; |
||||
padding-top: 120rpx; |
||||
position:relative; |
||||
} |
||||
.title{ |
||||
width: 128rpx; |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #424242; |
||||
line-height: 44rpx; |
||||
left: 0; |
||||
right: 0; |
||||
margin: auto; |
||||
} |
||||
.tab{ |
||||
width: 682rpx; |
||||
height: 692rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx 10rpx 10rpx 10rpx; |
||||
opacity: 1; |
||||
margin: 48rpx 0 0 42rpx; |
||||
padding-top: 20rpx; |
||||
.tabList{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
.tabItem{ |
||||
.name{ |
||||
width: 96rpx; |
||||
height: 60rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
line-height: 44rpx; |
||||
} |
||||
|
||||
.line{ |
||||
width: 48rpx; |
||||
height: 6rpx; |
||||
background: #FF4C4B; |
||||
border-radius: 56rpx 56rpx 56rpx 56rpx; |
||||
opacity: 1; |
||||
margin-top: 10rpx; |
||||
margin-left: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,559 @@ |
||||
<template> |
||||
<view class="member"> |
||||
<view class="title"> |
||||
会员中心 |
||||
</view> |
||||
<view class="khy"> |
||||
开通Ultra会员，人均立省￥<text>2389</text> |
||||
<image src="/static/order/left.png" mode=""></image> |
||||
</view> |
||||
<view class="tips"> |
||||
<image src="/static/default-logo.png" mode="" class="headIcon"></image> |
||||
<view class="meInfo"> |
||||
<view class="info"> |
||||
<view class="name"> |
||||
Deioio |
||||
</view> |
||||
<view class="hy"> |
||||
v月卡会员 |
||||
</view> |
||||
</view> |
||||
<view class="time"> |
||||
有效期至2024.01.21 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="notVip" v-if="!isVip"> |
||||
<view class="openVip"> |
||||
开通Ultra会员获得以下 <text>10项</text>特权 |
||||
</view> |
||||
<view class="vipList"> |
||||
<view v-for="(item,index) in 10" :key="index" class="vipItem"> |
||||
<image src="/static/member/my.png" mode="" class="itemImg"></image> |
||||
<view class="vipInfo"> |
||||
天天免邮 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="choseType"> |
||||
<view class="typeTitle"> |
||||
选择开卡套餐 |
||||
</view> |
||||
<view class="typeList"> |
||||
<view class="first common"> |
||||
<view class="limitPrice"> |
||||
限时活动价 |
||||
</view> |
||||
<view class="timeLong"> |
||||
3个月 |
||||
</view> |
||||
<view class="firPrice"> |
||||
￥99 |
||||
</view> |
||||
<view class="avePrice"> |
||||
￥12/月 |
||||
</view> |
||||
</view> |
||||
<view class="first common"> |
||||
<view class="timeLong sec"> |
||||
6个月 |
||||
</view> |
||||
<view class="firPrice"> |
||||
￥99 |
||||
</view> |
||||
<view class="avePrice"> |
||||
￥12/月 |
||||
</view> |
||||
</view> |
||||
<view class="first common"> |
||||
<view class="timeLong sec"> |
||||
1个月 |
||||
</view> |
||||
<view class="firPrice"> |
||||
￥99 |
||||
</view> |
||||
<view class="avePrice"> |
||||
￥12/月 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="payType"> |
||||
<view class="firLine"> |
||||
<view class="left"> |
||||
<image src="/static/order/wChat.png" mode="" class="weChatImg"></image> |
||||
<text>微信支付</text> |
||||
</view> |
||||
<image src="../../static/order/right.png" mode="" class="choseImg"></image> |
||||
</view> |
||||
<view class="line"> |
||||
|
||||
</view> |
||||
<view class="firLine"> |
||||
<view class="left"> |
||||
<image src="/static/order/wChat.png" mode="" class="weChatImg"></image> |
||||
<text>找微信好友代付</text> |
||||
</view> |
||||
<image src="../../static/order/right.png" mode="" class="choseImg"></image> |
||||
</view> |
||||
<view class="line"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="main" v-if="isVip"> |
||||
<view class="mTitle"> |
||||
月卡订单记录 |
||||
</view> |
||||
<view class="card"> |
||||
<view class="tp"> |
||||
<view class="info"> |
||||
生效中 |
||||
</view> |
||||
</view> |
||||
<view class="detail"> |
||||
<view class="topLine"> |
||||
<view class="send"> |
||||
省钱月卡1个月 |
||||
</view> |
||||
<view class="btn"> |
||||
活动赠送 |
||||
</view> |
||||
</view> |
||||
<view class="time"> |
||||
2023.12.22-2024.01.21 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="showInfo"> |
||||
已展示近18个月省钱月卡订单 |
||||
</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="fLeft"> |
||||
<view class="ys"> |
||||
已省 <text>￥3.2</text> |
||||
</view> |
||||
<view class="yj"> |
||||
原价 ￥30 |
||||
</view> |
||||
</view> |
||||
<view class="btn"> |
||||
<text>￥36</text>开卡3个月 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
isVip:false, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.member{ |
||||
width: 100%; |
||||
height: 1296rpx; |
||||
background: url('../../static/member/merBack.png') 100% no-repeat; |
||||
background-size: 100% 100%; |
||||
padding-top: 120rpx; |
||||
position:relative; |
||||
} |
||||
.title{ |
||||
width: 128rpx; |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #424242; |
||||
line-height: 44rpx; |
||||
left: 0; |
||||
right: 0; |
||||
margin: auto; |
||||
} |
||||
.khy{ |
||||
height: 36rpx; |
||||
font-size: 26rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 36rpx; |
||||
text-align: center; |
||||
margin: 40rpx 0 28rpx 0; |
||||
image{ |
||||
width: 15rpx; |
||||
height: 10rpx; |
||||
} |
||||
text{ |
||||
height: 56rpx; |
||||
font-size: 40rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #785B45; |
||||
line-height: 56rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
} |
||||
.tips{ |
||||
width: 698rpx; |
||||
height: 234rpx; |
||||
margin:46rpx 0 0 26rpx; |
||||
background-image: url('/static/member/bg.png'); |
||||
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0rpx 0 0 34rpx; |
||||
.headIcon{ |
||||
width: 114rpx; |
||||
height: 114rpx; |
||||
margin-right: 30rpx; |
||||
margin-top: 12rpx; |
||||
} |
||||
.meInfo{ |
||||
.info{ |
||||
display: flex; |
||||
margin-bottom: 26rpx; |
||||
.name{ |
||||
height: 50rpx; |
||||
font-size: 36rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #785B45; |
||||
line-height: 50rpx; |
||||
margin-right: 18rpx; |
||||
} |
||||
.hy{ |
||||
width: 126rpx; |
||||
height: 42rpx; |
||||
background: rgba(255,255,255,0.71); |
||||
border-radius: 62rpx 62rpx 62rpx 62rpx; |
||||
opacity: 1; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 42rpx; |
||||
|
||||
} |
||||
} |
||||
.time{ |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 34rpx; |
||||
|
||||
} |
||||
} |
||||
} |
||||
.notVip{ |
||||
.openVip{ |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #8B4338; |
||||
line-height: 44rpx; |
||||
margin: 30rpx 0 0 38rpx; |
||||
text{ |
||||
color: #EF2C21; |
||||
|
||||
} |
||||
} |
||||
.vipList{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin: 24rpx 0 0 34rpx; |
||||
.vipItem{ |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
margin-right: 40rpx; |
||||
.itemImg{ |
||||
width: 88rpx; |
||||
height: 88rpx; |
||||
} |
||||
.vipInfo{ |
||||
width: 96rpx; |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #7D2D21; |
||||
line-height: 34rpx; |
||||
margin-top: 30rpx; |
||||
} |
||||
} |
||||
} |
||||
.choseType{ |
||||
width: 726rpx; |
||||
height: 546rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 12rpx 12rpx 12rpx 12rpx; |
||||
opacity: 1; |
||||
margin:28rpx 0 0 12rpx ; |
||||
padding: 18rpx 0 0 26rpx; |
||||
.typeTitle{ |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #8B4338; |
||||
line-height: 44rpx; |
||||
} |
||||
.typeList{ |
||||
display: flex; |
||||
margin: 28rpx 0 0 22rpx; |
||||
.first{ |
||||
margin-right: 12rpx; |
||||
width: 220rpx; |
||||
height: 242rpx; |
||||
background: #FFEEE8; |
||||
border-radius: 8rpx 8rpx 8rpx 8rpx; |
||||
opacity: 1; |
||||
border: 2rpx solid #F34A40; |
||||
|
||||
.limitPrice{ |
||||
width: 169rpx; |
||||
height: 46rpx; |
||||
background: linear-gradient(180deg, #FFFFFF 0%, #FEF8F5 100%); |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
opacity: 1; |
||||
margin: 0 0 20rpx 32rpx; |
||||
} |
||||
.timeLong{ |
||||
width: 100%; |
||||
text-align: center; |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #7D2D21; |
||||
line-height: 40rpx; |
||||
margin: 30rpx 0 12rpx 0; |
||||
} |
||||
.sec{ |
||||
margin-top: 62rpx; |
||||
} |
||||
.firPrice{ |
||||
width: 100%; |
||||
text-align: center; |
||||
height: 72rpx; |
||||
font-size: 52rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #F34A40; |
||||
line-height: 72rpx; |
||||
} |
||||
.avePrice{ |
||||
width: 100%; |
||||
text-align: center; |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #F34A40; |
||||
line-height: 34rpx; |
||||
} |
||||
} |
||||
} |
||||
.payType{ |
||||
margin-top: 30rpx; |
||||
.firLine{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.left{ |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #7D2D21; |
||||
line-height: 40rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
.weChatImg{ |
||||
width: 28rpx; |
||||
height: 24rpx; |
||||
margin-right: 12rpx; |
||||
} |
||||
} |
||||
.choseImg{ |
||||
width: 34rpx; |
||||
height: 24rpx; |
||||
margin-right: 60rpx; |
||||
} |
||||
} |
||||
.line{ |
||||
width: 622rpx; |
||||
height: 0rpx; |
||||
opacity: 1; |
||||
border: 2rpx solid #F6F6F6; |
||||
margin: 26rpx 0 0 60rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.main{ |
||||
width: 750rpx; |
||||
height: 1296rpx; |
||||
background: #FFFFFF; |
||||
opacity: 1; |
||||
border-radius: 50rpx 50rpx 0 0; |
||||
position: relative; |
||||
top: -30rpx; |
||||
padding-top: 56rpx; |
||||
} |
||||
.mTitle{ |
||||
width: 192rpx; |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #8B4338; |
||||
line-height: 44rpx; |
||||
margin: 0rpx 0 0 38rpx; |
||||
} |
||||
.card{ |
||||
width: 654rpx; |
||||
height: 192rpx; |
||||
background: #FFF4F4; |
||||
border-radius: 8rpx 8rpx 8rpx 8rpx; |
||||
opacity: 1; |
||||
margin: 26rpx 0 0 38rpx; |
||||
display:flex; |
||||
.tp{ |
||||
|
||||
width: 84rpx; |
||||
height: 84rpx; |
||||
background-image: url('../../static/member/tip.png'); |
||||
background-size: 100% 100%; |
||||
.info{ |
||||
width: 84rpx; |
||||
height: 40rpx; |
||||
line-height: 40rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
transform: rotate(-45deg); |
||||
} |
||||
} |
||||
.detail{ |
||||
margin-top: 48rpx ; |
||||
.topLine{ |
||||
display: flex; |
||||
align-items: center; |
||||
.send{ |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #785B45; |
||||
line-height: 40rpx; |
||||
} |
||||
.btn{ |
||||
width: 106rpx; |
||||
height: 36rpx; |
||||
border-radius: 50rpx 50rpx 50rpx 50rpx; |
||||
opacity: 1; |
||||
border: 2rpx solid rgba(134,102,77,0.45); |
||||
text-align: center; |
||||
line-height: 36rpx; |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: rgba(120,91,69,0.63); |
||||
line-height: 36rpx; |
||||
margin-left: 8rpx; |
||||
} |
||||
} |
||||
.time{ |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 34rpx; |
||||
margin-top: 28rpx; |
||||
} |
||||
} |
||||
} |
||||
.showInfo{ |
||||
width: 100%; |
||||
|
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 40rpx; |
||||
text-align: center; |
||||
margin-top:46rpx; |
||||
} |
||||
.footer{ |
||||
position: fixed; |
||||
bottom: 0rpx; |
||||
height: 200rpx; |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.fLeft{ |
||||
margin: 24rpx 0 0 74rpx; |
||||
.ys{ |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #7D2D21; |
||||
line-height: 40rpx; |
||||
text{ |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #F34A40; |
||||
line-height: 40rpx; |
||||
} |
||||
} |
||||
.yj{ |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #CAABA6; |
||||
line-height: 34rpx; |
||||
} |
||||
} |
||||
.btn{ |
||||
|
||||
width: 440rpx; |
||||
height: 80rpx; |
||||
background: #F34A40; |
||||
border-radius: 8rpx 8rpx 8rpx 8rpx; |
||||
opacity: 1; |
||||
margin:22rpx 70rpx 0 0 ; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
text{ |
||||
font-size: 44rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height:80rpx; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,915 @@ |
||||
<template> |
||||
<view v-if="!isLoading" class="container" :style="appThemeStyle"> |
||||
|
||||
<view class="header"> |
||||
<!-- 订单状态 --> |
||||
<view class="order-status"> |
||||
<view class="status-icon"> |
||||
<!-- 进行中的订单 --> |
||||
<block v-if="order.order_status == OrderStatusEnum.NORMAL.value"> |
||||
<!-- 待支付 --> |
||||
<block v-if="order.pay_status == PayStatusEnum.PENDING.value"> |
||||
<image class="image" src="/static/order/status/wait_pay.png" mode="aspectFit"></image> |
||||
</block> |
||||
<!-- 待发货 --> |
||||
<block v-else-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
||||
<image class="image" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image> |
||||
</block> |
||||
<!-- 待收货 --> |
||||
<block v-else-if="order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"> |
||||
<image class="image" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image> |
||||
</block> |
||||
</block> |
||||
<!-- 已完成 --> |
||||
<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value"> |
||||
<image class="image" src="/static/order/status/received.png" mode="aspectFit"></image> |
||||
</block> |
||||
<!-- 已取消/待取消 --> |
||||
<block v-if="order.order_status == OrderStatusEnum.CANCELLED.value || order.order_status == OrderStatusEnum.APPLY_CANCEL.value"> |
||||
<image class="image" src="/static/order/status/close.png" mode="aspectFit"></image> |
||||
</block> |
||||
</view> |
||||
<view class="status-text"> |
||||
<text>{{ order.state_text }}</text> |
||||
</view> |
||||
</view> |
||||
<!-- 下一步操作 --> |
||||
<view class="next-action" v-if="order.order_status == OrderStatusEnum.NORMAL.value"> |
||||
<view v-if="order.pay_status == PayStatusEnum.PENDING.value" class="action-btn" @click="onPay(order.order_id)"> |
||||
去支付</view> |
||||
<view |
||||
v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value" |
||||
class="action-btn" @click="onReceipt(order.order_id)">确认收货</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="card-area"> |
||||
<!-- 实物订单 --> |
||||
<block v-if="order.order_type == OrderTypeEnum.PHYSICAL.value"> |
||||
<!-- 快递配送：配送地址 --> |
||||
<view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value" class="delivery-address i-card"> |
||||
<view class="link-man"> |
||||
<text class="name">{{ order.address.name }}</text> |
||||
<text class="phone">{{ order.address.phone }}</text> |
||||
</view> |
||||
<view class="address"> |
||||
<text class="region" v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text> |
||||
<text class="detail">{{ order.address.detail }}</text> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 快递配送：门店自提 --> |
||||
<view v-if="order.delivery_type == DeliveryTypeEnum.EXTRACT.value" class="delivery-extract i-card" |
||||
@click="handleTargetExtract(order.extract_shop.shop_id)"> |
||||
<view class="extract-top"> |
||||
<text class="title">自提门店</text> |
||||
<text class="subtitle">您须到该自提点取货</text> |
||||
</view> |
||||
<view class="shop-info"> |
||||
<view class="icon-location"> |
||||
<text class="iconfont icon-dingwei"></text> |
||||
</view> |
||||
<view class="shop-content"> |
||||
<view class="shop-name"> |
||||
<text>{{ order.extract_shop.shop_name }}</text> |
||||
</view> |
||||
<view class="shop-describe"> |
||||
<text class="item-text">{{ order.extract_shop.region.province }}</text> |
||||
<text class="item-text">{{ order.extract_shop.region.city }}</text> |
||||
<text class="item-text">{{ order.extract_shop.region.region }}</text> |
||||
<text class="item-text">{{ order.extract_shop.address }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="icon-arrow"> |
||||
<text class="iconfont icon-arrow-right"></text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</block> |
||||
|
||||
<!-- 物流信息 --> |
||||
<view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value |
||||
&& order.delivery_status == DeliveryStatusEnum.DELIVERED.value |
||||
&& order.delivery |
||||
&& order.delivery.length" class="express i-card" @click="handleTargetExpress()"> |
||||
<view v-if="order.delivery.length > 1" class="main"> |
||||
<view class="info-item"> |
||||
<view class="item-content"> |
||||
<text>订单已拆分多个包裹发货</text> |
||||
</view> |
||||
</view> |
||||
<view class="info-item"> |
||||
<view class="item-content"> |
||||
<text>已发货{{ order.delivery.length }}个包裹</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view v-else class="main"> |
||||
<view class="info-item"> |
||||
<view class="item-lable">物流公司</view> |
||||
<view class="item-content"> |
||||
<text |
||||
v-if="order.delivery[0].delivery_method != DeliveryMethodEnum.UNWANTED.value">{{ order.delivery[0].express ? order.delivery[0].express.express_name : '--' }}</text> |
||||
<text v-else>无需物流</text> |
||||
</view> |
||||
</view> |
||||
<view class="info-item"> |
||||
<view class="item-lable">物流单号</view> |
||||
<view class="item-content"> |
||||
<text>{{ order.delivery[0].express_no ? order.delivery[0].express_no : '--' }}</text> |
||||
<view v-if="order.delivery[0].express_no" class="act-copy" @click.stop="handleCopy(order.delivery[0].express_no)"> |
||||
<text>复制</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="right-arrow"> |
||||
<text class="iconfont icon-arrow-right"></text> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 商品列表 --> |
||||
<view class="goods-list i-card"> |
||||
<view class="goods-item" v-for="(goods, idx) in order.goods" :key="idx"> |
||||
<view class="goods-main" @click="handleTargetGoods(goods.goods_id)"> |
||||
<!-- 商品图片 --> |
||||
<view class="goods-image"> |
||||
<image class="image" :src="goods.goods_image" mode="scaleToFill"></image> |
||||
</view> |
||||
<!-- 商品信息 --> |
||||
<view class="goods-content"> |
||||
<view class="goods-title"><text class="twoline-hide">{{ goods.goods_name }}</text></view> |
||||
<view class="goods-props clearfix"> |
||||
<view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx"> |
||||
<text>{{ props.value.name }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 交易信息 --> |
||||
<view class="goods-trade"> |
||||
<view class="goods-price"> |
||||
<text class="unit">￥</text> |
||||
<text class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text> |
||||
</view> |
||||
<view class="goods-num"> |
||||
<text>×{{ goods.total_num }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 商品售后 --> |
||||
<view class="goods-refund"> |
||||
<text v-if="goods.refund" class="stata-text">已申请售后</text> |
||||
<view v-else-if="order.isAllowRefund" class="action-btn" @click.stop="handleApplyRefund(goods.order_goods_id)">申请售后</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 订单信息 --> |
||||
<view class="order-info i-card"> |
||||
<view class="info-item"> |
||||
<view class="item-lable">订单编号</view> |
||||
<view class="item-content"> |
||||
<text>{{ order.order_no }}</text> |
||||
<view class="act-copy" @click="handleCopy(order.order_no)"> |
||||
<text>复制</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="info-item"> |
||||
<view class="item-lable">下单时间</view> |
||||
<view class="item-content"> |
||||
<text>{{ order.create_time }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="info-item"> |
||||
<view class="item-lable">买家留言</view> |
||||
<view class="item-content"> |
||||
<text>{{ order.buyer_remark ? order.buyer_remark : '--' }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 结算信息 --> |
||||
<view class="trade-info i-card"> |
||||
<view class="info-item"> |
||||
<view class="item-lable">订单金额</view> |
||||
<view class="item-content"> |
||||
<text>￥{{ order.total_price }}</text> |
||||
</view> |
||||
</view> |
||||
<view v-if="order.coupon_money > 0" class="info-item"> |
||||
<view class="item-lable">优惠券抵扣</view> |
||||
<view class="item-content"> |
||||
<text>-￥{{ order.coupon_money }}</text> |
||||
</view> |
||||
</view> |
||||
<view v-if="order.points_money > 0" class="info-item"> |
||||
<view class="item-lable">{{ setting.points_name }}抵扣</view> |
||||
<view class="item-content"> |
||||
<text>-￥{{ order.points_money }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="info-item"> |
||||
<view class="item-lable">运费</view> |
||||
<view class="item-content"> |
||||
<text>+￥{{ order.express_price }}</text> |
||||
</view> |
||||
</view> |
||||
<view v-if="order.update_price.value != '0.00'" class="info-item"> |
||||
<view class="item-lable">后台改价</view> |
||||
<view class="item-content"> |
||||
<text>{{ order.update_price.symbol }}</text> |
||||
<text>￥{{ order.update_price.value }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="divider"></view> |
||||
<view class="trade-total"> |
||||
<text class="lable">实付款</text> |
||||
<view class="goods-price"> |
||||
<text class="unit">￥</text> |
||||
<text class="value">{{ order.pay_price }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 底部操作按钮 --> |
||||
<view v-if="order.order_status != OrderStatusEnum.CANCELLED.value" class="footer-fixed"> |
||||
<view class="btn-wrapper"> |
||||
<!-- 未支付取消订单 --> |
||||
<block v-if="order.pay_status == PayStatusEnum.PENDING.value"> |
||||
<view class="btn-item" @click="onCancel(order.order_id)">取消</view> |
||||
</block> |
||||
<!-- 已支付进行中的订单 --> |
||||
<block v-if="order.order_status != OrderStatusEnum.APPLY_CANCEL.value"> |
||||
<block v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
||||
<view class="btn-item" @click="onCancel(order.order_id)">申请取消</view> |
||||
</block> |
||||
<!-- 订单核销码 --> |
||||
<block v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_type == DeliveryTypeEnum.EXTRACT.value |
||||
&& order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
||||
<view class="btn-item active" @click="onExtractQRCode(order.order_id)"> |
||||
<text class="iconfont icon-qr-extract"></text> |
||||
<text class="m-l-10">核销码</text> |
||||
</view> |
||||
</block> |
||||
</block> |
||||
<!-- 已申请取消 --> |
||||
<view v-else class="f-28 col-8">取消申请中</view> |
||||
<!-- 未支付的订单 --> |
||||
<block v-if="order.pay_status == PayStatusEnum.PENDING.value"> |
||||
<view class="btn-item active" @click="onPay(order.order_id)">去支付</view> |
||||
</block> |
||||
<!-- 确认收货 --> |
||||
<block |
||||
v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"> |
||||
<view class="btn-item active" @click="onReceipt(order.order_id)">确认收货</view> |
||||
</block> |
||||
<!-- 订单评价 --> |
||||
<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value && order.is_comment == 0"> |
||||
<view class="btn-item" @click="handleTargetComment(order.order_id)">评价</view> |
||||
</block> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 核销二维码弹窗 --> |
||||
<u-popup v-model="showQRCodePopup" mode="center" border-radius="26" :closeable="true"> |
||||
<view class="qrcode-popup"> |
||||
<view class="title">自提核销二维码</view> |
||||
<view class="pop-content"> |
||||
<image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image> |
||||
</view> |
||||
</view> |
||||
</u-popup> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
OrderTypeEnum, |
||||
DeliveryStatusEnum, |
||||
DeliveryTypeEnum, |
||||
OrderStatusEnum, |
||||
PayStatusEnum, |
||||
ReceiptStatusEnum |
||||
} from '@/common/enum/order' |
||||
import { DeliveryMethodEnum } from '@/common/enum/order/delivery' |
||||
import * as OrderApi from '@/api/order' |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
// 枚举类 |
||||
OrderTypeEnum, |
||||
DeliveryStatusEnum, |
||||
DeliveryTypeEnum, |
||||
OrderStatusEnum, |
||||
PayStatusEnum, |
||||
ReceiptStatusEnum, |
||||
DeliveryMethodEnum, |
||||
// 当前订单ID |
||||
orderId: null, |
||||
// 加载中 |
||||
isLoading: true, |
||||
// 当前订单详情 |
||||
order: {}, |
||||
// 当前设置 |
||||
setting: {}, |
||||
// 核销二维码弹窗 |
||||
showQRCodePopup: false, |
||||
// 核销二维码图片url (通过后端获取) |
||||
qrcodeImage: '', |
||||
// 控制onShow事件是否刷新订单信息 |
||||
canReset: false, |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面加载 |
||||
*/ |
||||
onLoad({ orderId }) { |
||||
// 当前订单ID |
||||
this.orderId = orderId |
||||
// 获取当前订单信息 |
||||
this.getOrderDetail() |
||||
// 注册全局事件订阅: 是否刷新当前订单数据 |
||||
uni.$on('syncRefresh', (val, isCur) => { |
||||
if (!isCur) { |
||||
this.canReset = val |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面显示 |
||||
*/ |
||||
onShow() { |
||||
this.canReset && this.getOrderDetail() |
||||
this.canReset = false |
||||
}, |
||||
|
||||
methods: { |
||||
|
||||
// 获取当前订单信息 |
||||
getOrderDetail(canReset = false) { |
||||
const app = this |
||||
app.isLoading = true |
||||
OrderApi.detail(app.orderId) |
||||
.then(result => { |
||||
app.order = result.data.order |
||||
app.setting = result.data.setting |
||||
app.isLoading = false |
||||
}) |
||||
// 相应全局事件订阅: 刷新上级页面数据 |
||||
canReset && uni.$emit('syncRefresh', true, true) |
||||
}, |
||||
|
||||
// 复制指定内容 |
||||
handleCopy(value) { |
||||
const app = this |
||||
uni.setClipboardData({ |
||||
data: value, |
||||
success: () => app.$toast('复制成功'), |
||||
fail: ({ errMsg }) => app.$toast('复制失败 ' + errMsg) |
||||
}) |
||||
}, |
||||
|
||||
// 跳转到门店详情页 |
||||
handleTargetExtract(shopId) { |
||||
this.$navTo('pages/shop/detail', { shopId }) |
||||
}, |
||||
|
||||
// 跳转到物流跟踪页面 |
||||
handleTargetExpress() { |
||||
this.$navTo('pages/order/express/index', { orderId: this.orderId }) |
||||
}, |
||||
|
||||
// 跳转到商品详情页面 |
||||
handleTargetGoods(goodsId) { |
||||
this.$navTo('pages/goods/detail', { goodsId }) |
||||
}, |
||||
|
||||
// 跳转到申请售后页面 |
||||
handleApplyRefund(orderGoodsId) { |
||||
this.$navTo('pages/refund/apply', { orderGoodsId }) |
||||
}, |
||||
|
||||
// 取消订单 |
||||
onCancel(orderId) { |
||||
const app = this |
||||
uni.showModal({ |
||||
title: '友情提示', |
||||
content: '确认要取消该订单吗？', |
||||
success(o) { |
||||
if (o.confirm) { |
||||
OrderApi.cancel(orderId) |
||||
.then(result => { |
||||
// 显示成功信息 |
||||
app.$toast(result.message) |
||||
setTimeout(() => { |
||||
// 刷新当前订单数据 |
||||
app.getOrderDetail(true) |
||||
}, 1500) |
||||
}) |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
// 确认收货 |
||||
onReceipt(orderId) { |
||||
const app = this |
||||
uni.showModal({ |
||||
title: '友情提示', |
||||
content: '确认收到商品了吗？', |
||||
success(o) { |
||||
if (o.confirm) { |
||||
OrderApi.receipt(orderId) |
||||
.then(result => { |
||||
// 显示成功信息 |
||||
app.$success(result.message) |
||||
setTimeout(() => { |
||||
// 刷新当前订单数据 |
||||
app.getOrderDetail(true) |
||||
}, 1500) |
||||
}) |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
// 获取核销二维码 |
||||
onExtractQRCode(orderId) { |
||||
const app = this |
||||
OrderApi.extractQrcode(orderId, { channel: app.platform }) |
||||
.then(result => { |
||||
app.qrcodeImage = result.data.qrcode |
||||
app.showQRCodePopup = true |
||||
}) |
||||
}, |
||||
|
||||
// 点击去支付 |
||||
onPay(orderId) { |
||||
this.$navTo('pages/checkout/cashier/index', { orderId }) |
||||
}, |
||||
|
||||
// 跳转到订单评价页 |
||||
handleTargetComment(orderId) { |
||||
this.$navTo('pages/order/comment/index', { orderId }) |
||||
}, |
||||
|
||||
}, |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
page { |
||||
background: #f4f4f4; |
||||
} |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
.container { |
||||
// 设置ios刘海屏底部横线安全区域 |
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx); |
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx); |
||||
} |
||||
|
||||
// 页面顶部 |
||||
.header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
background-color: #e8c269; |
||||
height: 280rpx; |
||||
padding: 56rpx 30rpx 0 30rpx; |
||||
|
||||
.order-status { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 128rpx; |
||||
|
||||
.status-icon { |
||||
width: 128rpx; |
||||
height: 128rpx; |
||||
|
||||
.image { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.status-text { |
||||
padding-left: 20rpx; |
||||
color: #fff; |
||||
font-size: 38rpx; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
.next-action { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 128rpx; |
||||
|
||||
.action-btn { |
||||
min-width: 152rpx; |
||||
height: 56rpx; |
||||
padding: 0 30rpx; |
||||
background-color: #fff; |
||||
border-radius: 28rpx; |
||||
border-color: rgb(102, 102, 102); |
||||
cursor: pointer; |
||||
user-select: none; |
||||
color: #c7a157; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 卡片区域 |
||||
.card-area { |
||||
margin-top: -50rpx; |
||||
} |
||||
|
||||
// 通栏卡片 |
||||
.i-card { |
||||
background: #fff; |
||||
padding: 24rpx 24rpx; |
||||
width: 94%; |
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
||||
margin: 0 auto 20rpx auto; |
||||
border-radius: 20rpx; |
||||
} |
||||
|
||||
// 自提门店 |
||||
.delivery-extract { |
||||
|
||||
.extract-top { |
||||
margin-bottom: 20rpx; |
||||
|
||||
.title { |
||||
font-size: 28rpx; |
||||
margin-right: 30rpx; |
||||
} |
||||
|
||||
.subtitle { |
||||
font-size: 24rpx; |
||||
color: #888; |
||||
} |
||||
} |
||||
|
||||
.shop-info { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.icon-location { |
||||
font-size: 34rpx; |
||||
} |
||||
|
||||
.shop-content { |
||||
flex: 1; |
||||
margin-left: 26rpx; |
||||
font-size: 24rpx; |
||||
|
||||
.shop-name { |
||||
font-size: 28rpx; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
|
||||
.shop-describe { |
||||
color: #777; |
||||
|
||||
.item-text { |
||||
margin-right: 8rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 收货地址 |
||||
.delivery-address { |
||||
|
||||
.link-man { |
||||
line-height: 46rpx; |
||||
color: #333; |
||||
|
||||
.name { |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
|
||||
.address { |
||||
margin-top: 12rpx; |
||||
color: #999; |
||||
font-size: 24rpx; |
||||
|
||||
.detail { |
||||
margin-left: 6rpx; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
// 物流公司 |
||||
.express { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.main { |
||||
flex: 1; |
||||
} |
||||
|
||||
.info-item { |
||||
display: flex; |
||||
margin-bottom: 20rpx; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.item-lable { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
margin-right: 30rpx; |
||||
} |
||||
|
||||
.item-content { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 26rpx; |
||||
color: #333; |
||||
|
||||
.act-copy { |
||||
margin-left: 20rpx; |
||||
padding: 2rpx 20rpx; |
||||
font-size: 22rpx; |
||||
color: #666; |
||||
border: 1rpx solid #c1c1c1; |
||||
border-radius: 16rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 右侧箭头 |
||||
.right-arrow { |
||||
margin-left: 16rpx; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
} |
||||
|
||||
// 商品列表 |
||||
.goods-list { |
||||
|
||||
// 商品项 |
||||
.goods-item { |
||||
margin-bottom: 40rpx; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
// 商品信息 |
||||
.goods-main { |
||||
display: flex; |
||||
} |
||||
|
||||
// 商品图片 |
||||
.goods-image { |
||||
width: 180rpx; |
||||
height: 180rpx; |
||||
|
||||
.image { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 8rpx; |
||||
} |
||||
} |
||||
|
||||
// 商品内容 |
||||
.goods-content { |
||||
flex: 1; |
||||
padding-left: 16rpx; |
||||
padding-top: 16rpx; |
||||
|
||||
.goods-title { |
||||
font-size: 26rpx; |
||||
max-height: 76rpx; |
||||
} |
||||
|
||||
.goods-props { |
||||
margin-top: 14rpx; |
||||
color: #ababab; |
||||
font-size: 24rpx; |
||||
overflow: hidden; |
||||
|
||||
.goods-props-item { |
||||
padding: 4rpx 16rpx; |
||||
border-radius: 12rpx; |
||||
background-color: #fcfcfc; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
// 交易信息 |
||||
.goods-trade { |
||||
padding-top: 16rpx; |
||||
width: 150rpx; |
||||
text-align: right; |
||||
color: $uni-text-color-grey; |
||||
font-size: 26rpx; |
||||
|
||||
.goods-price { |
||||
vertical-align: bottom; |
||||
margin-bottom: 16rpx; |
||||
|
||||
.unit { |
||||
margin-right: -2rpx; |
||||
font-size: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 商品售后 |
||||
.goods-refund { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
.stata-text { |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
} |
||||
|
||||
.action-btn { |
||||
border-radius: 28rpx; |
||||
padding: 8rpx 26rpx; |
||||
font-size: 24rpx; |
||||
color: #383838; |
||||
border: 1rpx solid #a8a8a8; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// 订单信息 |
||||
.order-info { |
||||
|
||||
.info-item { |
||||
display: flex; |
||||
margin-bottom: 24rpx; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.item-lable { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
margin-right: 30rpx; |
||||
} |
||||
|
||||
.item-content { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 26rpx; |
||||
color: #333; |
||||
|
||||
.act-copy { |
||||
margin-left: 20rpx; |
||||
padding: 2rpx 20rpx; |
||||
font-size: 22rpx; |
||||
color: #666; |
||||
border: 1rpx solid #c1c1c1; |
||||
border-radius: 16rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
// 交易信息 |
||||
.trade-info { |
||||
|
||||
.info-item { |
||||
display: flex; |
||||
margin-bottom: 24rpx; |
||||
|
||||
.item-lable { |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
margin-right: 24rpx; |
||||
} |
||||
|
||||
.item-content { |
||||
flex: 1; |
||||
font-size: 26rpx; |
||||
color: #333; |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
.divider { |
||||
height: 1rpx; |
||||
background: #f1f1f1; |
||||
margin-bottom: 24rpx; |
||||
} |
||||
|
||||
.trade-total { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
.goods-price { |
||||
margin-left: 12rpx; |
||||
vertical-align: bottom; |
||||
color: $main-bg; |
||||
|
||||
.unit { |
||||
margin-right: -2rpx; |
||||
font-size: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
// 底部操作栏 |
||||
.footer-fixed { |
||||
position: fixed; |
||||
bottom: var(--window-bottom); |
||||
left: 0; |
||||
right: 0; |
||||
z-index: 11; |
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24); |
||||
background: #fff; |
||||
|
||||
// 设置ios刘海屏底部横线安全区域 |
||||
padding-bottom: constant(safe-area-inset-bottom); |
||||
padding-bottom: env(safe-area-inset-bottom); |
||||
|
||||
.btn-wrapper { |
||||
height: 106rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-end; |
||||
padding: 0 30rpx; |
||||
} |
||||
|
||||
.btn-item { |
||||
min-width: 180rpx; |
||||
border-radius: 30rpx; |
||||
padding: 12rpx 26rpx; |
||||
font-size: 28rpx; |
||||
color: #383838; |
||||
text-align: center; |
||||
border: 1rpx solid #a8a8a8; |
||||
margin-left: 24rpx; |
||||
|
||||
&.active { |
||||
border: none; |
||||
background: linear-gradient(to right, $main-bg, $main-bg2); |
||||
color: $main-text; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 弹出层 - 核销二维码 |
||||
.qrcode-popup { |
||||
padding: 36rpx 30rpx; |
||||
|
||||
.title { |
||||
font-size: 30rpx; |
||||
margin-bottom: 26rpx; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
} |
||||
|
||||
.pop-content { |
||||
min-height: 260rpx; |
||||
padding: 0 10rpx; |
||||
|
||||
.image { |
||||
display: block; |
||||
width: 510rpx; |
||||
height: 510rpx; |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 803 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 842 B |
|
After Width: | Height: | Size: 613 B |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 757 B |
Loading…
Reference in new issue