<template>
<view class="content">
<view class="container">
<view class="my-header">
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
<view class="my-text">订单详情</view>
<view class="my-icons"></view>
</view>
<view class="top-box">
<view class="tiao"></view>
<view class="t-top">
<view class="top-icon">
<uni-icons type="checkmarkempty" color="#ffffff" size="18"></uni-icons>
</view>
<view class="">
<view class="title-lan">兑换成功</view>
<view class="size-hui">商品正在路上，请耐心等待</view>
</view>
</view>
<view class="t-b-box">
<view class="goodsimg">
<image :src="baseUrl+form.coverImage" mode="aspectFit"></image>
</view>
<view class="right-r-box">
<view class="-title">{{form.giftName}}</view>
<view class="b-bt">
<view class="h-size"> X{{form.exchangeQuantity}} </view>
<view class="r-size">
{{form.amount?"￥"+form.amount:''}}
{{form.amount && form.integral ? '+':''}}
{{form.integral ? form.integral+'积分':''}}
</view>
</view>
</view>
</view>
</view>
<view class="d-box">
<view class="t-top">订单信息</view>
<view class="gang-box">
<view class="left-size">订单编号</view>
<view class="right-size">{{form.orderNumber}}</view>
</view>
<view class="gang-box">
<view class="left-size">快递单号</view>
<view class="right-size" v-if="form.shippingType == '物流配送'">
<span>{{form.courierCompanies?form.courierCompanies:'暂无物流信息'}}:{{form.theTrackingNumber?form.theTrackingNumber:''}}</span>
</view>
<view v-else class="right-size">门店自提</view>
</view>
<view class="gang-box">
<view class="left-size">兑换时间</view>
<view class="right-size">{{form.createTime}}</view>
</view>
<view class="gang-box">
<view class="left-size">所需积分</view>
<view class="right-size">
{{form.amount?"￥"+form.amount:''}}
{{form.amount && form.integral ? '+':''}}
{{form.integral ? form.integral+'积分':''}}
</view>
</view>
</view>
<view class="d-box">
<view class="t-top">物流信息</view>
<u-steps :current="flag" direction="column">
<u-steps-item title="已下单" :desc="form.createTime">
</u-steps-item>
<u-steps-item title="已发货" :desc="form.shippingTime?form.shippingTime:'--'">
</u-steps-item>
<u-steps-item :title="this.form.orderStatus"></u-steps-item>
</u-steps>
</view>
</view>
</view>
</template>
<script>
import config from '@/config'
import request from '../../utils/request'
export default {
data() {
return {
title: '',
baseUrl: config.baseUrl,
pointsGoodsDetails: '',
flag: '0',
form: {
orderNumber: '',
createTime: '',
shippingTime: '',
integral: '',
coverImage: '',
giftName: '',
exchangeQuantity: '',
exchangeMethod: '',
shippingType: '',
amount: '',
courierCompanies: '',
theTrackingNumber: '',
orderStatus: ''
}
}
},
components: {
},
onShow() {
uni.$on('pointsGoodsDetails', (data) => {
this.pointsGoodsDetails = data
console.log("this.pointsGoodsDetails", this.pointsGoodsDetails)
if (this.pointsGoodsDetails != null) {
// this.dataProcessing()
this.form.orderNumber = this.pointsGoodsDetails.orderNumber
this.form.createTime = this.pointsGoodsDetails.createTime
this.form.coverImage = this.pointsGoodsDetails.coverImage
this.form.giftName = this.pointsGoodsDetails.giftName
this.form.exchangeQuantity = this.pointsGoodsDetails.exchangeQuantity
this.form.exchangeMethod = this.pointsGoodsDetails.exchangeMethod
this.form.integral = this.pointsGoodsDetails.integral
this.form.amount = this.pointsGoodsDetails.amount
this.form.shippingTime = this.pointsGoodsDetails.shippingTime
this.form.shippingType = this.pointsGoodsDetails.shippingType
this.form.courierCompanies = this.pointsGoodsDetails.courierCompanies
this.form.theTrackingNumber = this.pointsGoodsDetails.theTrackingNumber
this.form.orderStatus = this.pointsGoodsDetails.orderStatus
// 当前订单状态
if (this.pointsGoodsDetails.orderStatus) {
let status = this.pointsGoodsDetails.orderStatus;
if (status == '已发货') {
this.flag = 1
} else if (status == '已完成') {
this.flag = 2
}
}
}
})
uni.$emit('pointsGoodsDetailsUn')
},
methods: {
goback() {
uni.navigateBack()
}
}
}
</script>
<style scoped lang="scss">
.content {
background: #f4f5f6;
}
.container {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding-top: 88px;
}
.my-header {
width: 100%;
height: 88px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
color: #000;
box-sizing: border-box;
padding: 0px 15px;
padding-top: 40px;
.my-icons {
width: 20px;
}
position: fixed;
top: 0px;
}
.top-box {
width: 95%;
box-sizing: border-box;
background: #ffffff;
border-radius: 6px;
overflow: hidden;
margin: 10px auto;
}
.tiao {
width: 100%;
height: 4px;
background-color: #0082FC;
}
.t-top {
width: 95%;
box-sizing: border-box;
margin: 0 auto;
border-bottom: 1px solid #EEEEEE;
padding: 10px 0px;
display: flex;
align-items: center;
}
.top-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #0082FC;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
margin-right: 10px;
}
.size-hui {
font-size: 12px;
color: #999999;
}
.title-lan {
font-size: 20px;
font-weight: bold;
color: #0082FC;
margin-bottom: 5px;
}
.t-b-box {
width: 95%;
box-sizing: border-box;
margin: 0 auto;
padding: 10px 0px;
display: flex;
justify-content: space-between;
}
.goodsimg {
width: 90px;
height: 90px;
border-radius: 8px;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.right-r-box {
width: 70%;
}
.-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 50px;
}
.b-bt {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.h-size {
font-size: 14px;
color: #999999;
}
.r-size {
font-size: 14px;
font-weight: bold;
color: #FB3524;
}
.d-box {
width: 95%;
border-radius: 8px;
background: #ffffff;
box-sizing: border-box;
padding: 10px;
margin: 10px auto;
}
.gang-box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 10px;
}
.left-size {
color: #666666;
}
.right-size {
color: #333333;
}
</style>