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.
 
 
 
 
 
 
yanzong_qianduan/pages/order/detail.vue

1687 lines
41 KiB

<template>
<view class="detail">
<view>
<u-navbar title="订单详情" back-icon-color="#333" :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.shop_name }}</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">{{ order.extract_shop.full_address }}</view>
</view>
<view class="thr">
<view class="peo">营业时间</view>
<view class="name">{{ order.extract_shop.shop_hours }}</view>
</view>
<view class="thr">
<view class="peo">到店时间</view>
<view class="name">{{ order.to_store_time }}</view>
</view>
</view>
<view class="conRight" @click="openCode"
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_type == DeliveryTypeEnum.EXTRACT.value">
<view class="code">
核销码
</view>
<view class="codeNum" @click="onQrcodeImage">
<image :src="qrcodeImage" mode=""></image>
</view>
<view class="openCode">
点击放大核销码
</view>
</view>
</view>
<view class="sendHome" v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.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?Number(goods.grade_goods_price):goods.grade_goods_price) : (goods.goods_price?Number(goods.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_goods_id,goods,order)"
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
退款
</view> -->
<view class="up2" style="margin-top: 20rpx;" @tap.stop="onRefund(goods.order_goods_id,goods,order)"
v-if="order.isAllowRefund && order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
售后
</view>
<!-- <view class="up2" style="margin-top: 20rpx;" @tap.stop="onRefund(goods.order_goods_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?Number(order.pay_price):order.pay_price }}</text>
</view>
<view class="line"
v-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value&&order.order_status == OrderStatusEnum.NORMAL.value">
</view>
<view class="cancel" @click="onCancel(order.order_id)"
v-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value&&order.order_status == OrderStatusEnum.NORMAL.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_text}}
</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">
物流公司:
</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="remarkTitle" v-if="order.merchant.length>0">
<view class="total">
商家备注:
</view>
<view style="overflow: hidden;">
<view class="merchant" v-for="(item, idx) in order.merchant">
<view class="merchantImg" v-if="item.image_url">
<image @click="previewImage(idxs,item.image_url)" :src="img.preview_url"
v-for="(img, idxs) in item.image_url" mode=""></image>
</view>
<view class="remark">
{{item.remark}}
</view>
</view>
</view>
</view>
<view class="line">
</view>
<view class="amount">
<view class="share">
<button open-type="share">
<image src="/static/order/share.png" mode=""></image>
分享
</button>
</view>
<view class="sp">
</view>
<!-- / @click="callStore(order.storeInfo.phone)" -->
<view class="callShop" v-if="setting.provider=='wxqykf' || setting.provider == 'ewmkf'" @click="handleContact">
<image src="/static/order/share.png" mode=""></image>
联系商家
</view>
<view class="callShop" v-else>
<image src="/static/order/share.png" mode=""></image>
联系商家
<button open-type="contact"></button>
</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" v-if="order.ziti_time">
<view class="total">
提货日期:
</view>
<view class="price">
{{order.ziti_time}}
</view>
</view>
<view class="orderTitle" v-if="order.ziti_image">
<view class="total">
提货照片:
</view>
<view class="price" v-if="order.ziti_image">
<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,order)"
v-if="order.order_status == OrderStatusEnum.COMPLETED.value&&order.pay_status == PayStatusEnum.SUCCESS.value">
申请开票
</view>
<view class="" @click="onDelete(order.order_id)"
v-if="order.order_status == OrderStatusEnum.COMPLETED.value&&order.pay_status == PayStatusEnum.SUCCESS.value">
删除订单
</view>
<view class=""
v-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value&&order.order_status == OrderStatusEnum.NORMAL.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.SUCCESS.value) || (order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value&&order.order_status == OrderStatusEnum.NORMAL.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)||order.order_status == OrderStatusEnum.CANCELLED.value">
再次购买
</view>
<view class="buyAgain" @click="onCopyLink(order.jd_link)" v-if="order.jd_link">
复制链接
</view>
<view class="buyAgain" @click="onPay(order.order_id)"
v-if="order.pay_status == PayStatusEnum.PENDING.value &&order.order_status == OrderStatusEnum.NORMAL.value">
立即支付
</view>
<view class="buyAgain" @click="onQrcodeImage(order.order_id)"
v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_type == DeliveryTypeEnum.EXTRACT.value">
核销码
</view>
<view class="buyAgain" @click="handleTargetExpress(order.order_id,order)"
v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value&&order.delivery_type == DeliveryTypeEnum.EXPRESS.value">
查看物流
</view>
<view class="buyAgain" @click="onReceipt(order.order_id)"
style="color:#fff;background: linear-gradient( 180deg, #FD5D06 0%, #F3211A 100%);"
v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value&&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.delivery_type == DeliveryTypeEnum.EXPRESS.value&&order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value&&order.order_status == OrderStatusEnum.NORMAL.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 class="buyAgain" v-if="userInfo.user_type == 40" @click="onCopyOrderInfo(order.copy_text)"
style="width: 200rpx;color:#fff;background: linear-gradient( 180deg, #FD5D06 0%, #F3211A 100%);">
复制订单详情
</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" @click="showQRCodePopup=false">
<view class="cm">
<view class="cm_text">
自提核销二维码
</view>
<view class="txm">
<image :src="qrcodeImage" @click="clickImg" 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: {},
// 当前设置
// 核销二维码弹窗
showQRCodePopup: false,
// 核销二维码图片url (通过后端获取)
qrcodeImage: '',
// 控制onShow事件是否刷新订单信息
canReset: false,
cdDia: false,
menushow: false,
Store: '',
userInfo: {},
setting: {}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad({
orderId
}) {
// 当前订单ID
this.orderId = orderId
// 获取当前订单信息
this.getOrderDetail()
this.Store = uni.getStorageSync('Store')
this.userInfo = uni.getStorageSync("userInfo")
// 注册全局事件订阅: 是否刷新当前订单数据
uni.$on('syncRefresh', (val, isCur) => {
if (!isCur) {
this.canReset = val
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.canReset && this.getOrderDetail()
this.canReset = false
},
onShareAppMessage(res) {
return {
title: this.Store.storeInfo.store_name,
path: "/pages/index/index", //这是打开后的跳转路径
imageUrl: this.Store.storeInfo.image_url,
success: function(res) {
// 转发成功之后的回调
if (res.errMsg == 'shareAppMessage:ok') {
this.$toast('分享成功')
}
},
fail: function() {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
this.$toast('取消分享')
} else if (res.errMsg == 'shareAppMessage:fail') {
this.$toast('分享失败')
}
}
}
},
methods: {
// 在线客服
handleContact() {
// 商城客服设置
const setting = this.setting
// 企业微信客服
if (setting.provider == 'ewmkf') {
uni.previewImage({
urls: [setting.config.ewmkf.qrCode],
});
} else if (setting.provider == 'wxqykf') {
if (!setting.config.wxqykf.url || !setting.config.wxqykf.corpId) {
this.$toast('客服链接和企业ID不能为空')
return
}
// #ifdef H5
window.open(setting.config.wxqykf.url)
// #endif
// #ifdef MP-WEIXIN
console.log(setting.config.wxqykf.url, setting.config.wxqykf.corpId)
wx.openCustomerServiceChat({
extInfo: {
url: setting.config.wxqykf.url
},
corpId: setting.config.wxqykf.corpId,
success(res) {},
fail(res) {
console.log(res, '企业微信')
}
})
// #endif
} else {
this.$toast('暂不支持企业微信客服')
}
},
previewImage(index, list) {
let newList = []
list.forEach(item => {
newList.push(item.preview_url)
});
uni.previewImage({
current: index, // 当前显示图片索引
urls: newList, // 需要预览的图片http链接列表
});
},
onCopyLink(str) {
uni.setClipboardData({
data: str, // 这里是个坑接受字符串类型 value转化为字符串
success: function() {
//调用方法成功
uni.showToast({
title: '复制成功',
icon: 'none',
duration: 2000
})
}
})
},
onCopyOrderInfo(obj) {
console.log(obj)
/**
* 1.订单编号:
2.商品型号:
3.商品编码:
4.商品单价:
5.商品数量:
6.商品总价:
7.收件人名字:
8.收件人电话:
9.收件人地址:
*/
// let goods_no = "";
// if(obj.goods && obj.goods.length > 0){
// obj.goods.map(a=>{
// goods_no+=`商品型号: ${(a.goods_sku_id !=0?a.goods_sku_id:'无')};商品编码: ${a.goods_no?a.goods_no:'无编码'};商品单价: ¥${a.goods_price}元;商品数量: ${a.total_num};商品总价: ¥${a.total_price}元`
// })
// }
// const str =`订单编号:${obj.order_no};${goods_no};收件人名字:${obj.address.name};收件人电话:${obj.address.phone};收件人地址:${obj.address.region.province+obj.address.region.city+obj.address.region.region+obj.address.detail};`
// console.log(str)
uni.setClipboardData({
data: obj,
success() {
uni.getClipboardData({
success() {
uni.showToast({
icon: "none",
title: "复制成功"
})
}
})
}
})
},
// 联系商家
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 => {
if (result.data.order.delivery_type == 20) {
app.onExtractQRCode(result.data.order.order_id)
}
app.order = result.data.order
app.setting = result.data.customer
app.isLoading = false
app.menushow = 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
})
},
containsLetterMix(str, mix) {
return new RegExp(mix.split('').join('\\w*')).test(str)
},
//
// 跳转到物流跟踪页面
handleTargetExpress(orderId, item) {
if (item.delivery) {
let url = item.delivery[0].express_no
if (this.containsLetterMix(url, 'http') && item.delivery.length > 0) {
uni.navigateTo({
url: '/pages/order/express/webView?src=' + encodeURIComponent(url) //url是h5的展示地址pageB
})
} else {
this.$navTo('pages/order/express/index', {
orderId
})
}
} else {
this.$navTo('pages/order/express/index', {
orderId
})
}
},
// 跳转到商品详情页面
handleTargetGoods(goodsId) {
uni.redirectTo({
url: '/pages/goods/detail?goodsId=' + goodsId // 目标页面路径
})
},
// 修改地址
onAdress(orderId) {
this.$navTo('/pages/address/index', {
orderId
})
},
// 点击去开票
onInvoicing(orderId, order) {
uni.setStorageSync("orderInfor", order);
uni.navigateTo({
url: '/pages/invoice/edit?orderId=' + orderId
})
},
// 取消订单
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
})
},
onQrcodeImage() {
this.showQRCodePopup = true
},
// 点击去退款
onRefund(orderId, order, item) {
uni.navigateTo({
url: '/pages/order/refund/index?orderId=' + orderId + '&order=' + encodeURIComponent(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>
page {
height: 100%;
}
::v-deep .qrcode-popup {
padding: 44rpx 80rpx !important;
}
.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;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 14rpx 0 0 26rpx;
padding: 34rpx 20rpx 25rpx 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;
margin-bottom: 20rpx;
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 {
overflow: hidden;
// 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;
// justify-content: flex-start;
.peo {
width: 150rpx;
float: left;
}
.name {
color: #333;
float: left;
word-wrap: break-word;
width: 300rpx;
}
}
}
.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: 160rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
image {
width: 162rpx;
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: 12rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 310rpx;
}
.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 35rpx 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: 30rpx;
.share {
image {
width: 26rpx;
height: 26rpx;
margin-right: 14rpx;
}
button {
background: none !important;
border: none !important;
padding: 0;
line-height: 34rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC,
PingFang SC;
font-weight: 400;
}
button:after {
border: none !important;
}
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 {
position: relative;
image {
width: 26rpx;
height: 26rpx;
margin-right: 14rpx;
}
height: 34rpx;
font-size: 24rpx;
font-weight: 400;
color: #1E1E1E;
line-height: 34rpx;
button {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
}
}
}
.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 32rpx 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 {
display: flex;
justify-content: center;
margin-top: 30rpx;
.codeImg {
width: 394rpx;
height: 394rpx;
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;
padding: 15rpx 0;
text {
font-size: 36rpx;
}
}
.remarkTitle {
overflow: hidden;
margin-bottom: 20rpx;
.total {
float: left;
font-size: 24rpx;
color: #7E7E7E;
}
.merchantImg {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.merchantImg image {
width: 100rpx;
height: 100rpx;
margin: 0 20rpx 20rpx 0;
}
.merchant {
margin-top: 5rpx;
overflow: hidden;
border-top: 1rpx solid #F4F4F4;
padding: 20rpx 0;
.remark {
font-size: 24rpx;
font-weight: 500;
color: #1E1E1E;
line-height: 34rpx;
}
}
.merchant:nth-child(1) {
padding-top: 0;
border-top: none;
}
}
</style>