<template>
|
<view class="flex-col group_1">
|
<view class="flex-col section_1" v-if="orderInfo && orderInfo.type != 'recharge'&& orderInfo.type != 'role'">
|
<image src="/static/local/f9ca23eb45218e324ec476878fc42fee.png" class="image_2" />
|
<view class="flex-row group_2">
|
<text>{{address.name || '暂无地址'}}</text>
|
<text class="text_2">{{address.phone_number}}</text>
|
</view>
|
<view class="flex-row group_3">
|
<text class="text_3">{{address.province + address.city + address.area + address.detail}}</text>
|
</view>
|
</view>
|
<view class="flex-row section_2">
|
<block v-if="orderInfo && orderInfo.type != 'recharge'&& orderInfo.type != 'role'">
|
<u-image :src="orderInfo.courseInfo.goods_thumb" :lazy-load="true" width="250" height="160"
|
border-radius="8rpx" mode="aspectFill">
|
</u-image>
|
<view class="flex-col group_4">
|
<text class="text_4">{{orderInfo.title}}</text>
|
<text class="text_5">￥{{orderInfo.total_fee / 100}}</text>
|
</view>
|
</block>
|
<block v-else>
|
<view class="group_4_text">
|
<text class="text_4">{{orderInfo.title}}</text>
|
<text class="text_5">￥{{orderInfo.total_fee / 100}}</text>
|
</view>
|
</block>
|
</view>
|
<view class="flex-col section_3">
|
<view class="justify-between group_5">
|
<text class="text_6">订单信息</text>
|
<text class="text_7">{{orderStatus(orderInfo.status)}}</text>
|
</view>
|
<view class="justify-between group_6">
|
<view class="flex-row group_7">
|
<text class="text_8">订单编号</text>
|
<text class="text_9">{{orderInfo.order_no}}</text>
|
</view>
|
<view class="flex-col items-center text-wrapper" @tap="copy">
|
<text>复制</text>
|
</view>
|
</view>
|
<view class="flex-row group_8">
|
<text class="text_11">下单时间</text>
|
<view class="flex-col group_9">
|
<text>{{orderTime}}</text>
|
</view>
|
</view>
|
<view class="flex-row group_10">
|
<text class="text_14">订单总价</text>
|
<text class="text_15">￥{{orderInfo.total_fee / 100}}</text>
|
</view>
|
</view>
|
<u-toast ref="uToast" />
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
orderInfo: {},
|
address: {
|
name: '',
|
phone_number: '',
|
province: '',
|
city: '',
|
area: '',
|
detail: ''
|
}
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
computed: {
|
// 订单状态
|
orderStatus() {
|
return (status) => {
|
switch (status) {
|
case 1:
|
return '待付款';
|
case 2:
|
return '已付款';
|
case 3:
|
return '退款审核中';
|
case 4:
|
return '已退款';
|
case 5:
|
return '退款中';
|
case -1:
|
return '已取消付款/退款';
|
case -2:
|
return '退款拒绝';
|
case -3:
|
return '退款失败';
|
}
|
}
|
},
|
// 订单时间
|
orderTime() {
|
if (!that.orderInfo) return ''
|
let timeStr = that.orderInfo._add_time_str.slice(0, -3)
|
return timeStr
|
}
|
},
|
// 函数
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
// 获取本地存储的订单信息
|
that.orderInfo = vk.getStorageSync('order-detail');
|
if (vk.pubfn.isNotNull(that.orderInfo.courseInfo.address_info)) {
|
that.address = that.orderInfo.courseInfo.address_info
|
}
|
},
|
// 复制订单号
|
copy() {
|
uni.setClipboardData({
|
data: that.orderInfo.order_no,
|
showToast: false,
|
success: () => {
|
this.$refs.uToast.show({
|
title: '复制成功',
|
type: 'success',
|
duration: 1200
|
})
|
}
|
})
|
}
|
},
|
destroyed() {
|
vk.removeStorageSync('order-detail');
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.group_1 {
|
padding: 20rpx 20rpx;
|
flex: 1 1 auto;
|
overflow-y: auto;
|
height: 100vh;
|
padding: 20rpx;
|
background: #F5F5F5;
|
|
.section_1 {
|
padding: 35rpx 20rpx;
|
background-color: rgb(255, 255, 255);
|
box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
|
border-radius: 12rpx;
|
position: relative;
|
|
.image_2 {
|
width: 44rpx;
|
height: 52rpx;
|
position: absolute;
|
top: 50%;
|
transform: translate(0, -50%);
|
}
|
|
.group_2 {
|
padding: 0 70rpx;
|
color: rgb(33, 33, 33);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
|
.text_2 {
|
margin-left: 33rpx;
|
}
|
}
|
|
.group_3 {
|
padding: 0 70rpx;
|
color: rgb(102, 102, 102);
|
font-size: 24rpx;
|
line-height: 28rpx;
|
|
.text_3 {
|
margin-top: 12rpx;
|
flex: 1 1 auto;
|
text-align: left;
|
}
|
}
|
}
|
|
.section_2 {
|
margin-top: 20rpx;
|
padding: 32rpx 18rpx 32rpx 20rpx;
|
background-color: rgb(255, 255, 255);
|
box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
|
border-radius: 12rpx;
|
|
.group_4 {
|
margin-left: 26rpx;
|
margin-bottom: 4rpx;
|
flex: 1 1 auto;
|
|
.text_4 {
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 35rpx;
|
word-break: break-all;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
|
.text_5 {
|
margin-left: 7rpx;
|
margin-top: 43rpx;
|
color: rgb(246, 21, 21);
|
font-size: 36rpx;
|
line-height: 43rpx;
|
white-space: nowrap;
|
}
|
}
|
|
.group_4_text {
|
flex: 1 1 auto;
|
display: flex;
|
justify-content: space-between;
|
|
.text_4 {
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 35rpx;
|
}
|
|
.text_5 {
|
color: rgb(246, 21, 21);
|
font-size: 36rpx;
|
line-height: 43rpx;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
.section_3 {
|
margin-top: 20rpx;
|
background-color: rgb(255, 255, 255);
|
box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
|
border-radius: 12rpx;
|
|
.group_5 {
|
padding: 33rpx 24rpx 31rpx 20rpx;
|
font-weight: bold;
|
|
.text_6 {
|
color: rgb(33, 33, 33);
|
font-size: 30rpx;
|
line-height: 36rpx;
|
white-space: nowrap;
|
}
|
|
.text_7 {
|
color: rgb(255, 12, 12);
|
font-size: 30rpx;
|
line-height: 36rpx;
|
white-space: nowrap;
|
}
|
}
|
|
.group_6 {
|
padding: 28rpx 20rpx 24rpx 30rpx;
|
border-top: solid 2rpx rgb(245, 245, 245);
|
border-bottom: solid 2rpx rgb(245, 245, 245);
|
|
.group_7 {
|
margin: 7rpx 0 6rpx;
|
|
.text_8 {
|
color: rgb(102, 102, 102);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
|
.text_9 {
|
margin-left: 34rpx;
|
color: rgb(33, 33, 33);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
}
|
|
.text-wrapper {
|
padding: 11rpx 0 9rpx;
|
color: rgb(51, 51, 51);
|
font-size: 24rpx;
|
line-height: 29rpx;
|
white-space: nowrap;
|
border-radius: 24rpx;
|
background-image: url('/static/local/7aa0b96b5999998caaeda4fd65173f6f.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 118rpx;
|
height: 48rpx;
|
}
|
}
|
|
.group_8 {
|
padding: 32rpx 30rpx 32rpx;
|
border-bottom: solid 2rpx rgb(245, 245, 245);
|
|
.text_11 {
|
color: rgb(102, 102, 102);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
|
.group_9 {
|
margin-left: 34rpx;
|
color: rgb(33, 33, 33);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
width: 280rpx;
|
position: relative;
|
|
.text_13 {
|
position: absolute;
|
right: 0;
|
top: 0;
|
}
|
}
|
}
|
|
.group_10 {
|
padding: 34rpx 30rpx 30rpx;
|
|
.text_14 {
|
color: rgb(102, 102, 102);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
|
.text_15 {
|
margin-left: 34rpx;
|
color: rgb(33, 33, 33);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
</style>
|
