You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1416 lines
31 KiB
1416 lines
31 KiB
<template>
|
|
<view class="detail">
|
|
<view>
|
|
<u-navbar title="订单详情" back-icon-color="#fff" :border-bottom="false" title-color="#333"
|
|
:background="background"></u-navbar>
|
|
</view>
|
|
<view class="send">
|
|
<!-- 进行中的订单 -->
|
|
<block v-if="order.order_status == OrderStatusEnum.NORMAL.value">
|
|
<!-- 待支付 -->
|
|
<block v-if="order.pay_status == PayStatusEnum.PENDING.value">
|
|
<image class="car" src="/static/order/status/wait_pay.png" mode="aspectFit"></image>
|
|
</block>
|
|
<!-- 待发货 -->
|
|
<block v-else-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
|
|
<image class="car" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image>
|
|
</block>
|
|
<!-- 待收货 -->
|
|
<block v-else-if="order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
|
|
<image class="car" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image>
|
|
</block>
|
|
</block>
|
|
<!-- 已完成 -->
|
|
<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value">
|
|
<image class="car" 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="car" src="/static/order/status/close.png" mode="aspectFit"></image>
|
|
</block>
|
|
<view class="sendInfo">
|
|
<view class="shopInfo">
|
|
<text>{{order.state_text}}</text>
|
|
</view>
|
|
<view class="sendTime">
|
|
{{order.create_time}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="consignee" v-if="order.delivery_type == DeliveryTypeEnum.EXTRACT.value">
|
|
<view class="conLeft">
|
|
<view class="thr">
|
|
<view class="peo">提货人</view>
|
|
<view class="name">{{ order.extract_shop.linkman }}</view>
|
|
</view>
|
|
<view class="thr">
|
|
<view class="peo">手机号</view>
|
|
<view class="name">{{ order.extract_shop.phone }}</view>
|
|
</view>
|
|
<!-- <view class="thr">
|
|
<view class="peo">预计到店时间</view>
|
|
<view class="name">2023-12-20 09:15</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="conRight" @click="openCode">
|
|
<view class="code">
|
|
核销码
|
|
</view>
|
|
<view class="codeNum">
|
|
<image :src="qrcodeImage" @click="clickImg" mode=""></image>
|
|
</view>
|
|
<view class="openCode">
|
|
点击放大核销码
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sendHome"
|
|
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
|
|
<view class="fline">
|
|
<view class="leftInfo">
|
|
<image src="/static/order/am.png" mode="" class="am"></image>
|
|
<view class="gp">
|
|
<text>{{ order.address.name }}</text>
|
|
{{ order.address.phone }}
|
|
</view>
|
|
</view>
|
|
<view class="up" @click="onAdress(order.goods_id)"
|
|
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
|
|
修改
|
|
</view>
|
|
</view>
|
|
<view class="sl">
|
|
<text v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text>
|
|
{{order.address.detail}}
|
|
</view>
|
|
<view class="fline">
|
|
<view class="leftInfo">
|
|
<image src="/static/order/cd.png" mode="" class="am"></image>
|
|
<view class="gp">
|
|
<text>收货方式：</text>
|
|
{{order.delivery_type==10?'快递配送':'门店自提'}}
|
|
</view>
|
|
</view>
|
|
<view class="up" @click="onCdDia(order.goods_id)"
|
|
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
|
|
我要催单
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goodsDetail">
|
|
<view class="goodsType">
|
|
<image v-if="order.storeInfo" :src="order.storeInfo.image_url" mode="" class="bag"></image>
|
|
<text v-if="order.storeInfo">{{order.storeInfo.store_name}}</text>
|
|
</view>
|
|
<view class="goods" v-for="(goods, idx) in order.goods" :key="idx"
|
|
@click="handleTargetGoods(goods.goods_id)">
|
|
<view class="goodsImg">
|
|
<image :src="goods.goods_image" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="goodsInfo">
|
|
<view class="goodsName">{{ goods.goods_name }}</view>
|
|
<view class="goodsPrice">
|
|
<text>￥{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="goodsNum">
|
|
x{{ goods.total_num }}
|
|
</view>
|
|
<view class="up2" style="margin-top: 20rpx;" @tap.stop="onRefund(goods.order_id,goods,order)"
|
|
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
|
|
退款
|
|
</view>
|
|
<view class="up2" style="margin-top: 20rpx;" @tap.stop="onRefund(goods.order_id,goods,order)"
|
|
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.receipt_status == ReceiptStatusEnum.RECEIVED.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
|
|
换货
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fd">
|
|
共{{ order.total_num }}件商品，实付款￥<text>{{ order.pay_price }}</text>
|
|
</view>
|
|
<view class="line" v-if="order.pay_status == PayStatusEnum.PENDING.value">
|
|
</view>
|
|
<view class="cancel" @click="onCancel(order.order_id)"
|
|
v-if="order.pay_status == PayStatusEnum.PENDING.value">
|
|
取消订单
|
|
</view>
|
|
</view>
|
|
|
|
<view class="orderTips">
|
|
<view class="orderTitle">
|
|
<view class="total">
|
|
订单编号:
|
|
</view>
|
|
<view class="price">
|
|
{{ order.order_no }}
|
|
</view>
|
|
<view class="copy" @click="handleCopy(order.order_no)">
|
|
复制
|
|
</view>
|
|
</view>
|
|
<view class="orderTitle" v-if="order.pay_status == PayStatusEnum.SUCCESS.value">
|
|
<view class="total">
|
|
支付方式：
|
|
</view>
|
|
<view class="price">
|
|
{{order.pay_method}}
|
|
</view>
|
|
</view>
|
|
<view class="orderTitle">
|
|
<view class="total">
|
|
商品快照：
|
|
</view>
|
|
<view class="price">
|
|
核对交易细节时，可作为判断依据
|
|
</view>
|
|
<view class="copy">
|
|
查看
|
|
</view>
|
|
</view>
|
|
<view class="orderTitle" v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
|
|
<view class="total" v-if="order.delivery[0].delivery_method != DeliveryMethodEnum.UNWANTED.value">
|
|
物流公司：
|
|
</view>
|
|
<view class="price">
|
|
{{order.delivery[0].express ? order.delivery[0].express.express_name : '--' }}
|
|
</view>
|
|
</view>
|
|
<view class="orderTitle">
|
|
<view class="total">
|
|
下单时间：
|
|
</view>
|
|
<view class="price">
|
|
{{ order.create_time }}
|
|
</view>
|
|
</view>
|
|
<view class="orderTitle" v-if="order.pay_status == PayStatusEnum.SUCCESS.value">
|
|
<view class="total">
|
|
支付时间：
|
|
</view>
|
|
<view class="price">
|
|
{{order.pay_time}}
|
|
</view>
|
|
</view>
|
|
<view class="orderTitle">
|
|
<view class="total">
|
|
期待配送时间：
|
|
</view>
|
|
<view class="price">
|
|
{{order.receipt_time}}
|
|
</view>
|
|
</view>
|
|
<view class="line">
|
|
</view>
|
|
<view class="amount">
|
|
<view class="share">
|
|
<image src="/static/order/share.png" mode=""></image>
|
|
分享
|
|
</view>
|
|
<view class="sp">
|
|
|
|
</view>
|
|
<view class="callShop" @click="callStore(order.storeInfo.phone)">
|
|
<image src="/static/order/share.png" mode=""></image>
|
|
联系商家
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pickedUp" v-if="order.delivery_type == DeliveryTypeEnum.EXTRACT.value">
|
|
<view class="orderTitle">
|
|
<view class="total">
|
|
提货状态:
|
|
</view>
|
|
<view class="price">
|
|
{{order.ziti_status==0?'没提':'已提货'}}
|
|
</view>
|
|
</view>
|
|
<view class="orderTitle">
|
|
<view class="total">
|
|
提货日期：
|
|
</view>
|
|
<view class="price">
|
|
{{order.ziti_time}}
|
|
</view>
|
|
</view>
|
|
<view class="orderTitle">
|
|
<view class="total">
|
|
提货照片：
|
|
</view>
|
|
<view class="price" v-if="order.ziti_image.length">
|
|
<image v-for="(img, idx) in order.ziti_image" :key="idx" :src="img" mode="" class="goodsImag">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="menushow" class="menuarea">
|
|
<view class="menulist">
|
|
<view class="" @click="onInvoicing(order.order_id)" v-if="order.order_status == OrderStatusEnum.COMPLETED.value">
|
|
申请开票
|
|
</view>
|
|
<view class="" @click="onDelete(order.order_id)"
|
|
v-if="order.order_status == OrderStatusEnum.COMPLETED.value">
|
|
删除订单
|
|
</view>
|
|
<view class="" v-if="order.pay_status == PayStatusEnum.PENDING.value" @click="onCancel(order.order_id)">
|
|
取消订单
|
|
</view>
|
|
</view>
|
|
<view class="trangle"></view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="meetPrice" @click="changeMenu"
|
|
v-if="order.order_status == OrderStatusEnum.COMPLETED.value || order.pay_status == PayStatusEnum.PENDING.value">
|
|
更多
|
|
</view>
|
|
<view v-else style="color: #fff;">-</view>
|
|
<view class="fooRight">
|
|
<view class="buyAgain" @click="handleTargetGoods(order.goods[0].goods_id)"
|
|
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == ReceiptStatusEnum.NOT_RECEIVED.value">
|
|
再次购买
|
|
</view>
|
|
<view class="buyAgain" @click="onPay(order.order_id)"
|
|
v-if="order.pay_status == PayStatusEnum.PENDING.value">
|
|
继续付款
|
|
</view>
|
|
<view class="buyAgain" @click="onExtractQRCode(order.order_id)" v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_type == DeliveryTypeEnum.EXTRACT.value
|
|
&& order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
|
|
核销码
|
|
</view>
|
|
<view class="buyAgain" @click="handleTargetExpress(order.order_id)"
|
|
v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
|
|
查看物流
|
|
</view>
|
|
<view class="buyAgain" @click="onReceipt(order.order_id)"
|
|
v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
|
|
确认收货
|
|
</view>
|
|
<view class="buyAgain" @click="onCdDia(order.order_id)"
|
|
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
|
|
催发货
|
|
</view>
|
|
<view class="buyAgain" @click="onCancel(order.order_id)"
|
|
v-if="order.order_status == OrderStatusEnum.NORMAL.value && order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
|
|
取消订单
|
|
</view>
|
|
<!-- <view class="buyAgain"
|
|
v-if="order.order_status == OrderStatusEnum.COMPLETED.value && order.is_comment == 0"
|
|
@click="handleTargetComment(order.order_id)">
|
|
评价
|
|
</view> -->
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 催单弹框 -->
|
|
<view class="dia" v-if="cdDia">
|
|
<view class="diaMain">
|
|
<image src="/static/order/ld.png" mode="" class="ld"></image>
|
|
<view class="cdTitle">
|
|
催单成功
|
|
</view>
|
|
<view class="cdInfo">
|
|
商家已收到您的催单提醒，您精心挑选的商品正在配送中，属于正常配送时效内，请您耐心等待，谢谢！
|
|
</view>
|
|
<view class="iKnow" @click="meKone()">
|
|
我知道了
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bigCode" v-if="showQRCodePopup" style="display: none;">
|
|
<view class="cm">
|
|
<view class="cm_text">
|
|
核销码
|
|
</view>
|
|
<view class="txm">
|
|
<image src="" mode="" class="codeImg"></image>
|
|
</view>
|
|
<view class="cline">
|
|
<u-line border-style="dashed" color="#D0D0D0" />
|
|
</view>
|
|
<view class="sm">
|
|
可前往门店扫码完成操作
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import img from "@/static/home/top.png"
|
|
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() {
|
|
let img = 'https://www.royaum.com.cn/static/home/top.png'
|
|
return {
|
|
background: {
|
|
background: 'url(' + img + ') center top no-repeat',
|
|
backgroundSize: '100% auto',
|
|
},
|
|
// 枚举类
|
|
OrderTypeEnum,
|
|
DeliveryStatusEnum,
|
|
DeliveryTypeEnum,
|
|
OrderStatusEnum,
|
|
PayStatusEnum,
|
|
ReceiptStatusEnum,
|
|
DeliveryMethodEnum,
|
|
// 当前订单ID
|
|
orderId: null,
|
|
// 加载中
|
|
isLoading: true,
|
|
// 当前订单详情
|
|
order: {},
|
|
// 当前设置
|
|
setting: {},
|
|
// 核销二维码弹窗
|
|
showQRCodePopup: false,
|
|
// 核销二维码图片url (通过后端获取)
|
|
qrcodeImage: '',
|
|
// 控制onShow事件是否刷新订单信息
|
|
canReset: false,
|
|
cdDia: false,
|
|
menushow: 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: {
|
|
// 联系商家
|
|
callStore(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
});
|
|
},
|
|
changeMenu() {
|
|
this.menushow = !this.menushow
|
|
},
|
|
meKone() {
|
|
this.cdDia = false
|
|
},
|
|
onCdDia(orderId) {
|
|
const app = this
|
|
OrderApi.orderfast(orderId)
|
|
.then(result => {
|
|
if (result.status == 200) {
|
|
this.cdDia = true
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
clickImg() {
|
|
uni.previewImage({
|
|
urls: [this.qrcodeImage], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
|
|
current: '', // 当前显示图片的http链接，默认是第一个
|
|
success: function(res) {},
|
|
fail: function(res) {},
|
|
complete: function(res) {},
|
|
})
|
|
},
|
|
// 获取当前订单信息
|
|
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
|
|
})
|
|
},
|
|
// 修改地址
|
|
onAdress(orderId) {
|
|
this.$navTo('pages/address/index', {
|
|
orderId
|
|
})
|
|
},
|
|
// 点击去开票
|
|
onInvoicing(orderId) {
|
|
uni.navigateTo({
|
|
url: '/pages/invoice/edit?orderId=' + orderId + '&source=' + 0 + "&order=" + JSON.stringify(this
|
|
.order)
|
|
})
|
|
},
|
|
// 取消订单
|
|
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)
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 删除订单
|
|
onDelete(orderId) {
|
|
const app = this
|
|
uni.showModal({
|
|
title: '友情提示',
|
|
content: '删除之后订单无法恢复，无法处理您的售后问题 ，请慎重考虑，确认要删除该订单吗？',
|
|
success(o) {
|
|
if (o.confirm) {
|
|
OrderApi.del(orderId)
|
|
.then(result => {
|
|
// 显示成功信息
|
|
app.$toast(result.message)
|
|
uni.$emit('syncRefresh');
|
|
uni.navigateBack(1)
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 确认收货
|
|
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
|
|
})
|
|
},
|
|
// 点击去退款
|
|
onRefund(orderId, order, item) {
|
|
uni.navigateTo({
|
|
url: '/pages/order/refund/index?orderId=' + orderId + '&order=' + JSON.stringify(order) +
|
|
"&deliveryStatus=" + item.delivery_status + '&receiptStatus=' + item.receipt_status
|
|
})
|
|
},
|
|
// 点击去支付
|
|
onPay(orderId) {
|
|
this.$navTo('pages/checkout/cashier/index', {
|
|
orderId
|
|
})
|
|
},
|
|
|
|
// 跳转到订单评价页
|
|
handleTargetComment(orderId) {
|
|
this.$navTo('pages/order/comment/index', {
|
|
orderId
|
|
})
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail {
|
|
width: 750rpx;
|
|
padding-bottom: 150rpx;
|
|
background-image: url('https://www.royaum.com.cn/static/home/homeback.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.menuarea {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.menulist {
|
|
background-color: #FFF;
|
|
border: 1rpx solid #F4F4F4;
|
|
width: 150rpx;
|
|
min-height: 50rpx;
|
|
position: fixed;
|
|
left: 28rpx;
|
|
bottom: 90rpx;
|
|
border-radius: 14rpx;
|
|
text-align: center;
|
|
padding: 10rpx 0;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.menulist view {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
color: #333;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
line-height: 50rpx;
|
|
|
|
}
|
|
|
|
.trangle {
|
|
width: 0px;
|
|
height: 0px;
|
|
position: absolute;
|
|
border: 10rpx solid #FFF;
|
|
border-top-color: #FFF;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
left: 16rpx;
|
|
bottom: 60rpx;
|
|
}
|
|
|
|
.leftText {
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #F21A1C;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.address {
|
|
margin-left: 26rpx;
|
|
background-image: url('../../static/order/map.png');
|
|
width: 694rpx;
|
|
height: 154rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 52rpx 0 32rpx;
|
|
|
|
.addAddress {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #F32E2E;
|
|
}
|
|
|
|
.leftImg {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.send {
|
|
width: 694rpx;
|
|
height: 154rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
opacity: 1;
|
|
margin: 12rpx 0 0 26rpx;
|
|
display: flex;
|
|
padding: 32rpx 46rpx 32rpx 38rpx;
|
|
|
|
.car {
|
|
width: 42rpx;
|
|
height: 35rpx;
|
|
margin-right: 40rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.sendInfo {
|
|
|
|
.shopInfo {
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.sendTime {
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #606060;
|
|
line-height: 34rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
|
|
.sendIcon {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
margin: 40rpx 0 0 150rpx;
|
|
}
|
|
}
|
|
|
|
.sendHome {
|
|
width: 694rpx;
|
|
height: 218rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
opacity: 1;
|
|
margin: 14rpx 0 0 26rpx;
|
|
padding: 18rpx 16rpx 16rpx 34rpx;
|
|
|
|
.fline {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.leftInfo {
|
|
display: flex;
|
|
}
|
|
|
|
.up {
|
|
width: 114rpx;
|
|
height: 50rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 88rpx 88rpx 88rpx 88rpx;
|
|
opacity: 1;
|
|
border: 1rpx solid #D9D9D9;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #676767;
|
|
}
|
|
|
|
.am {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.gp {
|
|
height: 28rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #838383;
|
|
line-height: 28rpx;
|
|
|
|
text {
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sl {
|
|
width: 474rpx;
|
|
height: 68rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #838383;
|
|
line-height: 28rpx;
|
|
margin-top: 6rpx;
|
|
margin-left: 60rpx;
|
|
}
|
|
}
|
|
|
|
.consignee {
|
|
width: 694rpx;
|
|
height: 200rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
opacity: 1;
|
|
margin: 12rpx 0 0 26rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 24rpx 36rpx 6rpx 32rpx;
|
|
|
|
.conLeft {
|
|
.thr {
|
|
display: flex;
|
|
width: 474rpx;
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #838383;
|
|
line-height: 34rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.peo {
|
|
width: 160rpx;
|
|
}
|
|
|
|
.name {
|
|
color: #333333;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.conRight {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #F21A1C;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.code {
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.codeNum {
|
|
width: 80rpx;
|
|
height: 78rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.openCode {
|
|
height: 28rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
color: #848484;
|
|
line-height: 23rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsDetail {
|
|
width: 694rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
opacity: 1;
|
|
margin: 12rpx 0 0 26rpx;
|
|
padding: 32rpx 24rpx 24rpx 38rpx;
|
|
|
|
.goodsType {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
|
|
.bag {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.leftIcon {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.goods {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 28rpx;
|
|
|
|
.goodsImg {
|
|
width: 162rpx;
|
|
height: 148rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.goodsInfo {
|
|
margin-left: 20rpx;
|
|
|
|
.goodsName {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
line-height: 40rpx;
|
|
margin-bottom: 4rpx;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
width: 420rpx;
|
|
}
|
|
|
|
.goodsPrice {
|
|
height: 50rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #F21A1C;
|
|
line-height: 50rpx;
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsNum {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #1E1E1E;
|
|
margin-left: 100rpx;
|
|
}
|
|
}
|
|
|
|
.serve {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.serveTitle {
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.chose {
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9E9E9E;
|
|
line-height: 34rpx;
|
|
|
|
image {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 100%;
|
|
height: 0rpx;
|
|
opacity: 1;
|
|
border: 2rpx solid #F4F4F4;
|
|
margin: 32rpx 0 20rpx 0;
|
|
}
|
|
|
|
.up {
|
|
width: 114rpx;
|
|
height: 50rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 88rpx 88rpx 88rpx 88rpx;
|
|
opacity: 1;
|
|
border: 1rpx solid #D9D9D9;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #676767;
|
|
}
|
|
|
|
.cancel {
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
line-height: 34rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.orderTips {
|
|
width: 694rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
opacity: 1;
|
|
margin: 12rpx 0 0 26rpx;
|
|
padding: 22rpx 36rpx 50rpx 24rpx;
|
|
|
|
.orderTitle {
|
|
position: relative;
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
height: 34rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #2D2D2D;
|
|
line-height: 34rpx;
|
|
|
|
.total {
|
|
font-size: 24rpx;
|
|
color: #7E7E7E;
|
|
}
|
|
|
|
.price {
|
|
.couponNum {
|
|
font-size: 28rpx;
|
|
color: #F42B17;
|
|
}
|
|
|
|
font-size: 28rpx;
|
|
|
|
image {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
margin-left: 18rpx;
|
|
}
|
|
}
|
|
|
|
.copy {
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #F63016;
|
|
line-height: 34rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.amount {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
|
|
.share {
|
|
image {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.sp {
|
|
width: 0rpx;
|
|
height: 38rpx;
|
|
opacity: 1;
|
|
border: 2rpx solid #ECECEC;
|
|
}
|
|
|
|
.callShop {
|
|
image {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 100%;
|
|
height: 0rpx;
|
|
opacity: 1;
|
|
border: 2rpx solid #F1F1F1;
|
|
}
|
|
|
|
.pickedUp {
|
|
width: 694rpx;
|
|
height: 310rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
opacity: 1;
|
|
margin: 14rpx 0 0 26rpx;
|
|
padding: 32rpx 50rpx 0 42rpx;
|
|
|
|
.orderTitle {
|
|
position: relative;
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
height: 34rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #2D2D2D;
|
|
line-height: 34rpx;
|
|
|
|
.total {
|
|
font-size: 24rpx;
|
|
color: #7E7E7E;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.price {
|
|
.couponNum {
|
|
font-size: 28rpx;
|
|
color: #F42B17;
|
|
}
|
|
|
|
font-size: 28rpx;
|
|
|
|
image {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
margin-left: 18rpx;
|
|
}
|
|
|
|
.goodsImag {
|
|
width: 144rpx;
|
|
height: 132rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
margin-right: 26rpx;
|
|
}
|
|
}
|
|
|
|
.copy {
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #F63016;
|
|
line-height: 34rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
width: 100%;
|
|
height: 120rpx;
|
|
position: fixed;
|
|
background-color: #FFF;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.meetPrice {
|
|
margin-left: 26rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
|
|
.type {
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #F42B17;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.price {
|
|
font-size: 40rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #F42B17;
|
|
}
|
|
}
|
|
|
|
.fooRight {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.buyAgain {
|
|
width: 146rpx;
|
|
height: 68rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 76rpx 76rpx 76rpx 76rpx;
|
|
opacity: 1;
|
|
border: 2rpx solid #D9D9D9;
|
|
text-align: center;
|
|
line-height: 68rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 214rpx;
|
|
height: 74rpx;
|
|
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
|
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
opacity: 1;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 74rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.dia {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: 99;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.diaMain {
|
|
width: 560rpx;
|
|
height: 432rpx;
|
|
background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
opacity: 1;
|
|
position: relative;
|
|
|
|
.ld {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
position: absolute;
|
|
top: -50rpx;
|
|
left: 230rpx;
|
|
}
|
|
|
|
.cdTitle {
|
|
width: 128rpx;
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
line-height: 44rpx;
|
|
margin: 80rpx 0 0 216rpx;
|
|
}
|
|
|
|
.cdInfo {
|
|
width: 498rpx;
|
|
height: 120rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #727272;
|
|
line-height: 33rpx;
|
|
margin-left: 48rpx;
|
|
margin-top: 28rpx;
|
|
}
|
|
|
|
.iKnow {
|
|
width: 412rpx;
|
|
height: 72rpx;
|
|
background: #F55349;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
opacity: 1;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 72rpx;
|
|
margin: 36rpx 0 0 74rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bigCode {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(65, 65, 65, 0.46);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.cm {
|
|
width: 560rpx;
|
|
height: 714rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
opacity: 1;
|
|
padding-top: 44rpx;
|
|
|
|
.cm_text {
|
|
width: 100%;
|
|
height: 42rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #424242;
|
|
line-height: 42rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.txm {
|
|
.codeImg {
|
|
width: 394rpx;
|
|
height: 458rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
.cline {
|
|
padding: 0 34rpx;
|
|
margin: 46rpx 0 30rpx 0;
|
|
}
|
|
|
|
.sm {
|
|
width: 100%;
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #979797;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.up2 {
|
|
width: 114rpx;
|
|
height: 50rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 88rpx 88rpx 88rpx 88rpx;
|
|
opacity: 1;
|
|
border: 1rpx solid #D9D9D9;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #676767;
|
|
}
|
|
|
|
.fd {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: flex-end;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #1E1E1E;
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
</style>
|
|
|