772 lines
24 KiB
Vue
772 lines
24 KiB
Vue
<template>
|
||
<view class="order-details" style="padding: 30rpx;">
|
||
<!-- 给header上与data上加on为退款订单-->
|
||
<view class="header acea-row row-middle" :class="refundOrder ? 'on' : ''"
|
||
style="background: #0DC5C5;border-radius: 24rpx;">
|
||
<view class="status-img-box">
|
||
<image class="status-img" :src="getStatusImg(orderInfo)" mode=""></image>
|
||
</view>
|
||
<view class="data" :class="refundOrder ? 'on' : ''">
|
||
<view class="state" v-if="orderInfo.isTickets===1 && orderInfo._status._type == 2">待核销</view>
|
||
<view class="state" v-else>{{ getStatus(orderInfo) }}</view>
|
||
<view v-if="getStatus(orderInfo)!=='待付款'">{{ orderInfo._status._msg }}</view>
|
||
<view class="pending-payments flex ai-center" v-else>
|
||
<text>请在</text>
|
||
<u-count-down :time="$global.diffSSS(this.orderInfo.paymentTimeout)"/>
|
||
<text>内支付，逾期订单将自动取消</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="reject-reason" v-if="orderInfo._status._type==-3 && orderInfo.refundRejectReason">驳回原因：{{ orderInfo.refundRejectReason }}</view>
|
||
|
||
<template v-if="!refundOrder">
|
||
<view class="code-box flex jc-center ai-center" v-if="orderInfo.isTickets===1 && orderInfo._status._type==2">
|
||
<image class="code-img" :src="orderInfo.code"/>
|
||
</view>
|
||
<template v-else>
|
||
<div class="writeOff" v-if="orderInfo.shippingType === 2 && orderInfo.paid === 1"
|
||
style="margin-top: 30rpx;border-radius: 24rpx;">
|
||
<div class="title">核销信息</div>
|
||
<div class="grayBg">
|
||
<div class="pictrue">
|
||
<img :src="orderInfo.code"/>
|
||
</div>
|
||
</div>
|
||
<div class="gear">
|
||
<img :src="webUrl+'/20230526114305172550.jpg'"/>
|
||
</div>
|
||
<div class="num">{{ orderInfo.verifyCode }}</div>
|
||
<div class="rules">
|
||
<div class="item">
|
||
<div class="rulesTitle acea-row row-middle">
|
||
<span class="iconfont icon-shijian"></span>核销时间
|
||
</div>
|
||
<div class="info">
|
||
每日：
|
||
<span class="time">{{ system_store.dayTime }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="rulesTitle acea-row row-middle">
|
||
<span class="iconfont icon-shuoming1"></span>使用说明
|
||
</div>
|
||
<div class="info">可将二维码出示给店员扫描或提供数字核销码</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="map acea-row row-between-wrapper" v-if="orderInfo.shippingType === 2 && orderInfo.paid === 1">
|
||
<div>自提地址信息</div>
|
||
<div class="place cart-color acea-row row-center-wrapper" @click="showChang(orderInfo.systemStore)">
|
||
<span class="iconfont icon-weizhi"></span>查看位置
|
||
</div>
|
||
</div>
|
||
<view class="address acea-row row-middle" style="margin-top: 30rpx;border-radius: 24rpx;flex-wrap: nowrap;"
|
||
v-if="orderInfo.shippingType === 1">
|
||
<view class="" style="flex-shrink: 0;margin-right: 20rpx;">
|
||
<image style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20230304135530688212.png'" mode=""></image>
|
||
</view>
|
||
<view class="acea-row row-middle" style="flex-grow: 1;">
|
||
<view class="name acea-row row-middle row-between" style="flex-wrap: nowrap;width: 100%;">
|
||
<view class="acea-row row-middle">
|
||
{{ orderInfo.realName }}
|
||
<text class="phone">{{ orderInfo.userPhone }}</text>
|
||
</view>
|
||
<view class="acea-row row-middle">
|
||
<image style="width: 32rpx;height: 32rpx;" :src="webUrl+'/20210808005541949297.png'" mode=""
|
||
@click="call(orderInfo.userPhone)"></image>
|
||
</view>
|
||
</view>
|
||
<view>{{ orderInfo.userAddress }}</view>
|
||
</view>
|
||
</view>
|
||
<div class="address" v-else>
|
||
<div class="name">
|
||
{{ system_store.name }}
|
||
<span class="phone">{{ system_store.phone }}</span>
|
||
<span class="iconfont icon-tonghua font-color-red" :href="'tel:' + system_store.phone"></span>
|
||
</div>
|
||
<div>{{ system_store.address }}</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<view style="margin-top: 30rpx;border-radius:24rpx;overflow: hidden;">
|
||
<OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []" title="商品信息"></OrderGoods>
|
||
</view>
|
||
|
||
<view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
|
||
<view class="item acea-row row-middle"
|
||
style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
|
||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003431044270.png'"
|
||
mode=""></image>
|
||
<text style="font-size: 26rpx;color: #080F1A;">订单信息</text>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">订单编号：</view>
|
||
<view class="conter acea-row row-middle row-right">
|
||
{{ orderInfo.orderId }}
|
||
<image @click="copyClipboard(orderInfo.orderId)" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
|
||
:src="webUrl+'/20210808003517657208.png'" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">下单时间：</view>
|
||
<view class="conter">
|
||
<text>{{ orderInfo.createTime }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">订单类型：</view>
|
||
<view class="conter">{{ orderTypeName }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">支付状态：</view>
|
||
<view class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">支付方式：</view>
|
||
<view class="conter">{{ orderInfo._status._payType }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between" v-if="orderInfo.mark">
|
||
<view class="flex-0">买家留言：</view>
|
||
<view class="conter">{{ orderInfo.mark }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="orderInfo.status != 0">
|
||
<view class="wrapper" v-if="true">
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">配送方式：</view>
|
||
<view class="conter">发货</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">快递公司：</view>
|
||
<view class="conter">{{ orderInfo.deliveryName || "" }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">快递号：</view>
|
||
<view class="conter">{{ orderInfo.deliveryId || "" }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="wrapper" v-else>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">配送方式：</view>
|
||
<view class="conter">送货</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">配送人：</view>
|
||
<view class="conter">{{ orderInfo.deliveryName || "" }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view class="flex-0">配送电话：</view>
|
||
<view class="conter acea-row row-middle row-right">
|
||
{{ orderInfo.deliveryId || "" }}
|
||
<text class="copy">拨打</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 退款订单详情 -->
|
||
<view class="wrapper" v-if="refundOrder">
|
||
<view class="item acea-row row-between">
|
||
<view>收货人：</view>
|
||
<view class="conter">{{ orderInfo.realName }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view>联系电话：</view>
|
||
<view class="conter">{{ orderInfo.userPhone }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between">
|
||
<view>收货地址：</view>
|
||
<view class="conter">{{ orderInfo.userAddress }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
|
||
<view class="item acea-row row-between" style="flex-wrap: nowrap;">
|
||
<view class="acea-row row-middle" style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
|
||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003453973795.png'"
|
||
mode=""></image>
|
||
<text style="font-size: 26rpx;color: #080F1A;">支付金额：</text>
|
||
</view>
|
||
<view class="conter" style="width: auto !important;">￥{{ force2Decimal(orderInfo.totalPrice) }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between" v-if="orderInfo.couponPrice > 0">
|
||
<view>优惠券抵扣：</view>
|
||
<view class="conter">-￥{{ force2Decimal(orderInfo.couponPrice) }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between" v-if="orderInfo.useIntegral > 0">
|
||
<view>积分抵扣：</view>
|
||
<view class="conter">-￥{{ force2Decimal(orderInfo.deductionPrice) }}</view>
|
||
</view>
|
||
<view class="item acea-row row-between" v-if="orderInfo.payPostage > 0">
|
||
<view>运费：</view>
|
||
<view class="conter">￥{{ force2Decimal(orderInfo.payPostage) }}</view>
|
||
</view>
|
||
<view class="actualPay acea-row row-right row-middle">
|
||
<text style="font-size: 24rpx;">实付款：</text>
|
||
<text class="money font-color-red">￥{{ force2Decimal(orderInfo.payPrice) }}</text>
|
||
</view>
|
||
</view>
|
||
<view style="height:100rpx;" v-if="!refundOrder && offlineStatus"></view>
|
||
<view class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
|
||
<template v-if="status.type == 0">
|
||
<view class="bnt cancel" @click="cancelOrder">取消订单</view>
|
||
<view class="bnt bg-color-red" @click="subscribePay">立即付款</view>
|
||
</template>
|
||
<template v-if="status.type == 1">
|
||
<view class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
|
||
</template>
|
||
<template v-if="status.type == 2">
|
||
<view class="bnt default"
|
||
@click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
|
||
v-if="orderInfo.isTickets!==1">查看物流
|
||
</view>
|
||
<view class="bnt bg-color-red" @click="takeOrder">确认收货</view>
|
||
</template>
|
||
<template v-if="status.type == 3">
|
||
<view class="bnt default" @click="
|
||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||
" v-if="orderInfo.isTickets!==1">查看物流
|
||
</view>
|
||
</template>
|
||
<template v-if="status.type == 4">
|
||
<view class="bnt cancel" @click="delOrder">删除订单</view>
|
||
<view class="bnt default" @click="
|
||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||
" v-if="orderInfo.isTickets!==1">查看物流
|
||
</view>
|
||
</template>
|
||
<template v-if="status.type == 6">
|
||
<view class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</view>
|
||
</template>
|
||
</view>
|
||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||
<view class="geoPage" v-if="mapShow">
|
||
<iframe width="100%" height="100%" frameborder="0" scrolling="no"
|
||
:src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey"></iframe>
|
||
</view>
|
||
|
||
<passkeyborad :money="orderInfo.payPrice" showMoney :show="isShowPayPwdPop" ref='payPwdPop' @close="pwdPopClose"
|
||
@finish="pwdPopFinish"></passkeyborad>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
|
||
import OrderGoods from "@/components/OrderGoods";
|
||
import {orderDetail} from "@/api/order";
|
||
import Payment from "@/components/Payment";
|
||
import DataFormat from "@/components/DataFormat";
|
||
import {copyClipboard} from "@/utils";
|
||
import {mapGetters} from "vuex";
|
||
import {cancelOrderHandle, delOrderHandle, payOrderHandle, takeOrderHandle, yuePayOrderHandle} from "@/libs/order";
|
||
|
||
const STATUS = [
|
||
"待付款",
|
||
"待发货",
|
||
"待收货",
|
||
"待评价",
|
||
"已完成",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"待付款"
|
||
];
|
||
const NAME = "OrderDetails";
|
||
|
||
export default {
|
||
name: NAME,
|
||
components: {
|
||
OrderGoods,
|
||
Payment,
|
||
DataFormat,
|
||
passkeyborad
|
||
},
|
||
props: {},
|
||
data: function () {
|
||
return {
|
||
isShowPayPwdPop: false,
|
||
offlinePayStatus: 2,
|
||
orderTypeName: "普通订单",
|
||
orderTypeNameStatus: true,
|
||
offlineStatus: true,
|
||
id: "",
|
||
orderInfo: {
|
||
_status: {}
|
||
},
|
||
status: {},
|
||
pay: false,
|
||
payType: ["yue", "weixin"],
|
||
from: this.$deviceType,
|
||
system_store: {},
|
||
mapKay: "",
|
||
mapShow: false,
|
||
payPassword: null,
|
||
webUrl: this.$VUE_APP_RESOURCES_URL
|
||
};
|
||
},
|
||
computed: {
|
||
refundOrder() {
|
||
return this.orderInfo.refund_status > 0;
|
||
},
|
||
...mapGetters(["userInfo"])
|
||
},
|
||
onShow() {
|
||
this.id = this.$yroute.query.id;
|
||
this.getDetail();
|
||
},
|
||
// inject: ["app"],
|
||
mounted: function () {
|
||
this.id = this.$yroute.query.id;
|
||
},
|
||
methods: {
|
||
copyClipboard,
|
||
force2Decimal(v) {
|
||
return this.$force2Decimal(v);
|
||
},
|
||
getStatus(order) {
|
||
const type = Number(order._status._type);
|
||
let status = "";
|
||
switch (type) {
|
||
case 0:
|
||
status = "待付款";
|
||
break;
|
||
case 1:
|
||
status = "待发货";
|
||
break;
|
||
case 2:
|
||
status = "待收货";
|
||
break;
|
||
case 3:
|
||
status = "待评价";
|
||
break;
|
||
case 4:
|
||
status = "已完成";
|
||
break;
|
||
case -1:
|
||
status = "退款中";
|
||
break;
|
||
case -2:
|
||
status = "已退款";
|
||
break;
|
||
case -3:
|
||
status = "已驳回";
|
||
break;
|
||
}
|
||
return status;
|
||
},
|
||
getStatusImg(order) {
|
||
const type = parseInt(order._status._type);
|
||
let imgUrl = "";
|
||
switch (type) {
|
||
case 0: //待付款
|
||
case 9:
|
||
imgUrl = this.webUrl + '/20230526114342425681.png';
|
||
break;
|
||
case 1: //待发货
|
||
imgUrl = this.webUrl + '/20230526114347797204.png';
|
||
break;
|
||
case 2: //待收货
|
||
imgUrl = this.webUrl + '/20230526114355462982.png';
|
||
break;
|
||
case 3: //待评价
|
||
imgUrl = this.webUrl + '/20230526114414134581.png';
|
||
break;
|
||
case 4: //已完成
|
||
imgUrl = this.webUrl + '/20230526114421118668.png';
|
||
break;
|
||
case -1: //退款中
|
||
imgUrl = this.webUrl + '/20230526114324286938.png';
|
||
break;
|
||
case -2: //已退款
|
||
imgUrl = this.webUrl + '/20230526114329894562.png';
|
||
break;
|
||
case -3: //已驳回
|
||
imgUrl = this.webUrl + '/20230526114336281750.png';
|
||
break;
|
||
}
|
||
return imgUrl;
|
||
},
|
||
subscribePay() {
|
||
uni.requestSubscribeMessage({
|
||
tmplIds: ['7O3wKw7_D4t7yfSOlvecKuOQP8QEPY88uBx2FJg43HE', 'TSmTnGibZ8IxWCiRWOvLxha6-0u7tE-V1-WbDCiPkKU', '9Q6xLHe6HyjkU5Zn5k_2zxYPf2y4MxVyUbOSW8pcZRU'],
|
||
complete: () => this.pay = true
|
||
})
|
||
},
|
||
goGoodsReturn(orderInfo) {
|
||
this.$yrouter.push({
|
||
path: "/pages/order/GoodsReturn/index",
|
||
query: {
|
||
id: orderInfo.orderId
|
||
}
|
||
});
|
||
},
|
||
goGroupRule(orderInfo) {
|
||
this.$yrouter.push({
|
||
path: "/pages/activity/GroupRule/index",
|
||
query: {
|
||
id: orderInfo.pinkId
|
||
}
|
||
});
|
||
},
|
||
showChang: function (data) {
|
||
// 这里判断是不是微信小程序
|
||
this.$yrouter.push({
|
||
path: "/pages/map/index",
|
||
query: data
|
||
});
|
||
},
|
||
async toYuePay(payPwd) {
|
||
var that = this;
|
||
//网络请求
|
||
await yuePayOrderHandle(this.orderInfo.orderId, "yue", that.from, payPwd);
|
||
that.getDetail();
|
||
this.payPassword = "";
|
||
},
|
||
pwdPopClose() {
|
||
this.isShowPayPwdPop = false;
|
||
},
|
||
pwdPopFinish(payPwd) {
|
||
this.payPassword = payPwd;
|
||
|
||
this.toYuePay(payPwd);
|
||
|
||
this.isShowPayPwdPop = false;
|
||
},
|
||
call: function (phone) {
|
||
uni.makePhoneCall({
|
||
|
||
// 手机号
|
||
phoneNumber: phone,
|
||
|
||
// 成功回调
|
||
success: (res) => {
|
||
console.log('调用成功!')
|
||
},
|
||
|
||
// 失败回调
|
||
fail: (res) => {
|
||
console.log('调用失败!')
|
||
}
|
||
|
||
});
|
||
},
|
||
goBack() {
|
||
if (this.name === "MyOrder") {
|
||
this.$yrouter.back();
|
||
return;
|
||
} else {
|
||
console.log(this);
|
||
this.$yrouter.replace({
|
||
path: "/pages/order/MyOrder/index"
|
||
});
|
||
return;
|
||
}
|
||
},
|
||
cancelOrder() {
|
||
cancelOrderHandle(this.orderInfo.orderId)
|
||
.then(() => {
|
||
setTimeout(() => this.goBack(), 300);
|
||
})
|
||
.catch(() => {
|
||
this.getDetail();
|
||
});
|
||
},
|
||
takeOrder() {
|
||
takeOrderHandle(this.orderInfo.orderId).finally(() => {
|
||
this.getDetail();
|
||
});
|
||
},
|
||
delOrder() {
|
||
delOrderHandle(this.orderInfo.orderId).then(() => {
|
||
setTimeout(() => this.goBack(), 300);
|
||
});
|
||
},
|
||
setOfflinePayStatus: function (status) {
|
||
var that = this;
|
||
that.offlinePayStatus = status;
|
||
if (status === 1 && that.orderTypeNameStatus === true) {
|
||
that.payType.push("offline");
|
||
}
|
||
},
|
||
getOrderStatus: function () {
|
||
let orderInfo = this.orderInfo || {},
|
||
_status = orderInfo._status || {
|
||
_type: 0
|
||
},
|
||
status = {};
|
||
let type = parseInt(_status._type),
|
||
delivery_type = orderInfo.deliveryType,
|
||
seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0,
|
||
bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0,
|
||
combination_id = orderInfo.combinationId ?
|
||
parseInt(orderInfo.combinationId) :
|
||
0;
|
||
status = {
|
||
type: type,
|
||
class_status: 0
|
||
};
|
||
if (type == 1 && combination_id > 0) {
|
||
status.type = 6;
|
||
status.class_status = 1;
|
||
} //查看拼团
|
||
if (type == 2 && delivery_type == "express") status.class_status = 2; //查看物流
|
||
if (type == 2) status.class_status = 3; //确认收货
|
||
if (type == 4 || type === 0) status.class_status = 4; //删除订单
|
||
if (
|
||
!seckill_id &&
|
||
!bargain_id &&
|
||
!combination_id &&
|
||
(type == 3 || type == 4)
|
||
)
|
||
status.class_status = 5; //再次购买
|
||
if (type == 9) {
|
||
//线下付款
|
||
status.class_status = 0;
|
||
this.offlineStatus = false;
|
||
}
|
||
this.status = status;
|
||
},
|
||
getDetail() {
|
||
const id = this.id;
|
||
if (!id) {
|
||
uni.showToast({
|
||
title: "订单不存在",
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
orderDetail(id)
|
||
.then(res => {
|
||
this.orderInfo = res.data;
|
||
this.getOrderStatus();
|
||
if (this.orderInfo.combinationId > 0) {
|
||
this.orderTypeName = "拼团订单";
|
||
this.orderTypeNameStatus = false;
|
||
} else if (this.orderInfo.bargainId > 0) {
|
||
this.orderTypeName = "砍价订单";
|
||
this.orderTypeNameStatus = false;
|
||
} else if (this.orderInfo.seckillId > 0) {
|
||
this.orderTypeName = "秒杀订单";
|
||
this.orderTypeNameStatus = false;
|
||
}
|
||
this.system_store = res.data.systemStore || {};
|
||
this.mapKey = res.data.mapKay;
|
||
this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
|
||
})
|
||
.catch(err => {
|
||
uni.showToast({
|
||
title: err.response.data.msg,
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
});
|
||
},
|
||
async toPay(type) {
|
||
var that = this;
|
||
console.log(type, "支付方式");
|
||
|
||
//余额支付需要输入支付密码
|
||
if (type == "yue") {
|
||
this.isShowPayPwdPop = true;
|
||
return;
|
||
} else {
|
||
await payOrderHandle(this.orderInfo.orderId, type, that.from);
|
||
that.getDetail();
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.geoPage {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.order-details .writeOff {
|
||
background-color: #fff;
|
||
margin-top: 0.13 * 100rpx;
|
||
padding-bottom: 0.3 * 100rpx;
|
||
}
|
||
|
||
.order-details .writeOff .title {
|
||
font-size: 0.3 * 100rpx;
|
||
color: #282828;
|
||
height: 0.87 * 100rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
padding: 0 0.3 * 100rpx;
|
||
line-height: 0.87 * 100rpx;
|
||
}
|
||
|
||
.order-details .writeOff .grayBg {
|
||
background-color: #f2f5f7;
|
||
width: 5.9 * 100rpx;
|
||
height: 3.84 * 100rpx;
|
||
border-radius: 0.2 * 100rpx 0.2 * 100rpx 0 0;
|
||
margin: 0.5 * 100rpx auto 0 auto;
|
||
padding-top: 0.55 * 100rpx;
|
||
}
|
||
|
||
.order-details .writeOff .grayBg .pictrue {
|
||
width: 2.9 * 100rpx;
|
||
height: 2.9 * 100rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.order-details .writeOff .grayBg .pictrue img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.order-details .writeOff .gear {
|
||
width: 5.9 * 100rpx;
|
||
height: 0.3 * 100rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.order-details .writeOff .gear img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.order-details .writeOff .num {
|
||
background-color: #f0c34c;
|
||
width: 5.9 * 100rpx;
|
||
height: 0.84 * 100rpx;
|
||
color: #282828;
|
||
font-size: 0.48 * 100rpx;
|
||
margin: 0 auto;
|
||
border-radius: 0 0 0.2 * 100rpx 0.2 * 100rpx;
|
||
text-align: center;
|
||
padding-top: 0.04 * 100rpx;
|
||
}
|
||
|
||
.order-details .writeOff .rules {
|
||
margin: 0.46 * 100rpx 0.3 * 100rpx 0 0.3 * 100rpx;
|
||
border-top: 0.01 * 100rpx solid #f0f0f0;
|
||
padding-top: 0.1 * 100rpx;
|
||
}
|
||
|
||
.order-details .writeOff .rules .item {
|
||
margin-top: 0.15 * 100rpx;
|
||
}
|
||
|
||
.order-details .writeOff .rules .item .rulesTitle {
|
||
font-size: 0.28 * 100rpx;
|
||
color: #282828;
|
||
}
|
||
|
||
.order-details .writeOff .rules .item .rulesTitle .iconfont {
|
||
font-size: 0.3 * 100rpx;
|
||
color: #333;
|
||
margin-right: 0.08 * 100rpx;
|
||
margin-top: 0.05 * 100rpx;
|
||
}
|
||
|
||
.order-details .writeOff .rules .item .info {
|
||
font-size: 0.28 * 100rpx;
|
||
color: #999;
|
||
margin-top: 0.05 * 100rpx;
|
||
}
|
||
|
||
.order-details .writeOff .rules .item .info .time {
|
||
margin-left: 0.2 * 100rpx;
|
||
}
|
||
|
||
.order-details .map {
|
||
height: 0.86 * 100rpx;
|
||
font-size: 0.3 * 100rpx;
|
||
color: #282828;
|
||
line-height: 0.86 * 100rpx;
|
||
border-bottom: 0.01 * 100rpx solid #f0f0f0;
|
||
margin-top: 0.13 * 100rpx;
|
||
background-color: #fff;
|
||
padding: 0 0.3 * 100rpx;
|
||
}
|
||
|
||
.order-details .map .place {
|
||
font-size: 0.26 * 100rpx;
|
||
width: 1.76 * 100rpx;
|
||
height: 0.5 * 100rpx;
|
||
border-radius: 0.25 * 100rpx;
|
||
line-height: 0.5 * 100rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.order-details .map .place .iconfont {
|
||
font-size: 0.27 * 100rpx;
|
||
height: 0.27 * 100rpx;
|
||
line-height: 0.27 * 100rpx;
|
||
margin: 0.02 * 100rpx 0.03 * 100rpx 0 0;
|
||
}
|
||
|
||
.order-details .address .name .iconfont {
|
||
font-size: 0.34 * 100rpx;
|
||
margin-left: 0.1 * 100rpx;
|
||
}
|
||
|
||
.status-img-box {
|
||
width: 86rpx;
|
||
height: 86rpx;
|
||
background: rgba(255, 255, 255, 1);
|
||
border-radius: 50%;
|
||
position: relative;
|
||
}
|
||
|
||
.status-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.wrapper .item {
|
||
flex-wrap: nowrap;
|
||
|
||
.flex-0 {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.code-box {
|
||
margin-top: 30rpx;
|
||
padding: 30rpx;
|
||
background: #fff;
|
||
|
||
.code-img {
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
}
|
||
}
|
||
|
||
/deep/ .pending-payments {
|
||
font-size: 26rpx;
|
||
|
||
.u-count-down__text {
|
||
color: #FF5C5C;
|
||
font-size: 26rpx;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
.reject-reason {
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 32rpx;
|
||
border-radius: 24rpx;
|
||
background: #fff;
|
||
color: #FE5261;
|
||
font-size: 26rpx;
|
||
}
|
||
</style>
|