300 lines
9.0 KiB
Vue
300 lines
9.0 KiB
Vue
<template>
|
||
<view class="u-m-l-32 u-m-r-32" style="padding-bottom: 200rpx;">
|
||
<view v-if="orderDetail.order_status == 0" class="u-m-t-48 row">
|
||
<view class="bold-500 mb10 xxxl text-000" >未付款</view>
|
||
<view class="u-m-l-16 sm row text-999" style="line-height: 26rpx" v-if="cancelTime > 0">请在
|
||
<u-count-down separator="zh" :timestamp="cancelTime" separator-color="#999" color="#999"
|
||
:separator-size="26" :font-size="26" bg-color="transparent"></u-count-down>
|
||
内完成支付
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-p-32 br16 bg-white u-m-t-16" v-if="orderDetail.order_status > 0">
|
||
{{ orderDetail.delivery_address }}
|
||
</view>
|
||
|
||
<view class="bg-white u-p-32 u-m-t-36 br8">
|
||
<view class="row u-col-top">
|
||
<!-- <view>
|
||
<u-image :src="cloudPath + 'img/banner.png'" width="124" height="124" border-radius="8"></u-image>
|
||
</view>
|
||
<view>
|
||
<view class="u-font-32 u-m-l-16">
|
||
<text class="bold-600">煎饼果子套餐</text>
|
||
<text class="u-font-24 u-m-l-8">x1</text>
|
||
</view>
|
||
<view class="sm text-999 u-m-l-16 u-m-t-8">
|
||
<text>味浓芳香</text>
|
||
<text class="u-m-l-8 u-m-r-8">|</text>
|
||
<text>味浓芳香</text>
|
||
<text class="u-m-l-8 u-m-r-8">|</text>
|
||
<text>味浓芳香</text>
|
||
</view>
|
||
<view class="u-m-l-16 u-m-t-8 row">
|
||
<view>
|
||
<price-format color="#FF4A18" :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||
</view>
|
||
<view class="u-m-l-8">
|
||
<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<order-goods :link="true" :list="orderDetail.order_goods"
|
||
:order_type="orderDetail.order_type" :mode="orderDetail.order_status == 0 ? 'pay' : 'order_detail'"></order-goods>
|
||
</view>
|
||
|
||
<view class="row-end" v-if="orderDetail.order_status > 0">
|
||
<u-button class="u-m-r-24" @click="mobileLogin" hover-class="none" :customStyle="{height: '46rpx', color: '#454545', border: '1px solid #454545', borderRadius: '8rpx', padding: '0 8rpx', fontSize: '24rpx'}" :plain="true" :hair-line="false">再来一单</u-button>
|
||
<u-button @click="mobileLogin" hover-class="none" :customStyle="{height: '46rpx', color: '#454545', border: '1px solid #454545', borderRadius: '8rpx', padding: '0 8rpx', fontSize: '24rpx'}" :plain="true" :hair-line="false">申请售后</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-white u-p-32 u-m-t-40 br8" v-if="orderDetail.order_status == 0" >
|
||
<view class="bold-600 u-font-28">保温盒地址</view>
|
||
<view class="text-attr u-m-t-16">
|
||
<view class="u-m-t-8 text-999">
|
||
孙婉宛
|
||
</view>
|
||
<view class="u-m-t-8 text-999">
|
||
15271435646
|
||
</view>
|
||
<view class="u-m-t-8 text-999">
|
||
站前北街4号顺义供电公司北50米
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-white u-p-32 u-m-t-40 br8" v-if="orderDetail.order_status == 0">
|
||
<view class="bold-600 u-font-28">订单信息</view>
|
||
<view class="text-attr u-m-t-16">
|
||
<view class="u-m-t-8 text-999">
|
||
<view>买家昵称: 134213234122321232123</view>
|
||
</view>
|
||
|
||
<view class="u-m-t-8 text-999">
|
||
<view>订单编号: {{ orderDetail.order_sn }}</view>
|
||
</view>
|
||
|
||
<view class="u-m-t-8 text-999">
|
||
<view>下单时间: {{ orderDetail.create_time }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-white u-p-32 u-m-t-32" v-if="orderDetail.order_status > 0">
|
||
<view class="row-between">
|
||
<view class="nr">商品总价</view>
|
||
<view>
|
||
<price-format color="#000" :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-m-t-24 u-m-b-24">
|
||
<u-line color="#E5E6EB" />
|
||
</view>
|
||
|
||
<view class="row-between mt10">
|
||
<view>订单运费</view>
|
||
<view>￥130.00</view>
|
||
</view>
|
||
|
||
<view class="u-m-t-24 u-m-b-24">
|
||
<u-line color="#E5E6EB" />
|
||
</view>
|
||
|
||
<view class="row-between mt10">
|
||
<view>优惠券</view>
|
||
<view class="primary">
|
||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-m-t-24 u-m-b-24">
|
||
<u-line color="#E5E6EB" />
|
||
</view>
|
||
|
||
<view class="row-between mt10">
|
||
<view>实付款</view>
|
||
<view class="primary">
|
||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-white u-p-32 u-m-t-40 br8" v-if="orderDetail.order_status > 0">
|
||
<view class="bold-600 u-font-28">订单信息</view>
|
||
<view class="text-attr u-m-t-16">
|
||
<view class="u-m-t-8 row-between">
|
||
<view>订单编号：</view>
|
||
<view>134213234122321232123</view>
|
||
</view>
|
||
<view class="u-m-t-8 row-between">
|
||
<view>支付方式：</view>
|
||
<view>微信支付</view>
|
||
</view>
|
||
<view class="u-m-t-8 row-between">
|
||
<view>下单时间：</view>
|
||
<view>2022-11-10 15:26:07</view>
|
||
</view>
|
||
<view class="u-m-t-8 row-between">
|
||
<view>付款时间：</view>
|
||
<view>2022-11-10 15:26:07</view>
|
||
</view>
|
||
<view class="u-m-t-8 row-between">
|
||
<view>发货时间：</view>
|
||
<view>2022-11-10 15:26:07</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fixed row-start u-text-center btn-group bg-white" v-if="orderDetail.order_status == 0">
|
||
<view class="flex1 btn1" @tap="cancelOrder">取消订单</view>
|
||
<view class="flex1 btn2 bg-default text-fff" @tap="payNow">立即支付</view>
|
||
<!-- <u-button class="flex1" @click="mobileLogin" hover-class="none" :customStyle="{color: themeColor, padding: '16rpx 0'}" :plain="true" :hair-line="false">取消订单</u-button> -->
|
||
<!-- <u-button class="flex1" @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false">立即支付</u-button> -->
|
||
</view>
|
||
|
||
<view class="fixed row-end u-text-center btn-group bg-white u-p-t-20" v-if="orderDetail.order_status > 0">
|
||
<view class="mr20">
|
||
<u-button @click="mobileLogin" hover-class="none" :customStyle="{width: '160rpx', height: '60rpx', color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0', borderRadius: '8rpx'}" :plain="true" :hair-line="false">查看物流</u-button>
|
||
</view>
|
||
<view class="u-m-r-34">
|
||
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0', borderRadius: '8rpx'}" :hair-line="false">确认收货</u-button>
|
||
</view>
|
||
</view>
|
||
<order-dialog ref="orderDialog" :orderId="orderDetail.id" :type="type" @refresh="onRefresh"></order-dialog>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getOrderDetail,
|
||
getwechatSyncCheck,
|
||
getwxReceiveDetail,
|
||
confirmOrder,
|
||
} from "@/api/order"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderDetail: {},
|
||
team: {},
|
||
isFirstLoading: true,
|
||
type: 0,
|
||
cancelTime: 0,
|
||
showCancel: "",
|
||
showLoading: false,
|
||
imageQR: "",
|
||
priceShow: false,
|
||
};
|
||
},
|
||
onLoad: function (options) {
|
||
this.id = options.id;
|
||
this.getOrderDetailFun();
|
||
},
|
||
onUnload() {
|
||
uni.$off("payment");
|
||
},
|
||
methods: {
|
||
onRefresh() {
|
||
uni.$emit("refreshorder");
|
||
const { type } = this;
|
||
if ([0, 2].includes(type)) {
|
||
this.getOrderDetailFun();
|
||
} else if (type == 1) {
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 2000);
|
||
}
|
||
},
|
||
getOrderDetailFun() {
|
||
getOrderDetail(this.id)
|
||
.then((res) => {
|
||
if (res.code == 1) {
|
||
this.cancelTime = res.data.order_cancel_time - Date.now() / 1000;
|
||
this.orderDetail = res.data;
|
||
this.$nextTick(() => {
|
||
this.isFirstLoading = false;
|
||
});
|
||
} else {
|
||
setTimeout(() => uni.navigateBack(), 1500);
|
||
}
|
||
return res.data;
|
||
})
|
||
.then((data) => {
|
||
if (data.delivery_type === 2) {
|
||
// 提货码
|
||
this.$nextTick(function () {
|
||
const refQR = this.$refs["qrcode"];
|
||
refQR._makeCode();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 取消订单
|
||
cancelOrder() {
|
||
this.type = 0;
|
||
this.$nextTick(() => {
|
||
this.orderDialog();
|
||
});
|
||
},
|
||
|
||
orderDialog() {
|
||
this.$refs.orderDialog.open();
|
||
},
|
||
|
||
payNow() {
|
||
uni.$on("payment", (params) => {
|
||
setTimeout(() => {
|
||
if (params.result) {
|
||
this.$toast({
|
||
title: "支付成功",
|
||
});
|
||
this.getOrderDetailFun();
|
||
uni.$emit("refreshorder");
|
||
} else {
|
||
this.$toast({
|
||
title: "支付失败",
|
||
});
|
||
}
|
||
}, 500);
|
||
});
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/payment/payment?from=${"order"}&order_id=${this.id}`,
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F6F8FA;
|
||
}
|
||
|
||
.text-attr {
|
||
color: #86909C;
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.btn-group {
|
||
& > view {
|
||
font-size: 36rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
.btn1 {
|
||
color: #323232;
|
||
}
|
||
}
|
||
</style> |