443 lines
10 KiB
Vue
443 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="c-top">
|
|||
|
|
<view class="ding">
|
|||
|
|
<view class="c-zuo" @click="getback()">
|
|||
|
|
<uni-icons type="left" color="#ffffff" size="18"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<view class="c-title">我的订单</view>
|
|||
|
|
<view class="c-you"></view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 底部 -->
|
|||
|
|
<view class="d-bai" v-if="orderStatus == '1'">待使用</view>
|
|||
|
|
<view class="d-bai" v-if="orderStatus == '2'">待评价</view>
|
|||
|
|
<view class="d-bai" v-if="orderStatus == '3'">已评价</view>
|
|||
|
|
<view class="d-bai" v-if="orderStatus == '4'">退款中</view>
|
|||
|
|
<view class="d-bai" v-if="orderStatus == '5'">已退款</view>
|
|||
|
|
<view class="x-bai">请到订单预约店铺进行车辆检测</view>
|
|||
|
|
<view class="cont-box">
|
|||
|
|
<view class="b-top" v-if="orderdetails.orderStatus == '1'">
|
|||
|
|
<view class="rwm">
|
|||
|
|
<canvas style="width:125px; height: 125px;" canvas-id="myQrcode"></canvas>
|
|||
|
|
</view>
|
|||
|
|
<view class="mzi">核销码：{{orderdetails.accessCode}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-top" v-if="orderdetails.orderStatus == '2'">
|
|||
|
|
<!-- 星星 文本框 -->
|
|||
|
|
<view style="display: flex; align-items: ;">
|
|||
|
|
<view class="b-hui">请留下您的评价</view>
|
|||
|
|
<uni-rate v-model="rateValue" @change="postxing" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<u--textarea v-model="reviewStr" @blur="tijiao()" @confirm="tijiao()" placeholder="请输入您的评价" border="none"></u--textarea>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-top" v-if="orderdetails.orderStatus == '3'">
|
|||
|
|
<!-- 已评价 -->
|
|||
|
|
<view style="display: flex; align-items: ;">
|
|||
|
|
<view class="b-hui">请留下您的评价</view>
|
|||
|
|
<uni-rate v-model="orderdetails.commentStar" />
|
|||
|
|
</view>
|
|||
|
|
<u--textarea v-model="orderdetails.commentDesc" placeholder="该用户暂无评价" border="none"></u--textarea>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-top" v-if="orderdetails.orderStatus == '4'">
|
|||
|
|
<view class="b-title">退款中</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-top" v-if="orderdetails.orderStatus == '5'">
|
|||
|
|
<view class="b-title">已退款</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="b-box">
|
|||
|
|
<view class="b-title">{{orderdetails.partnerName}}</view>
|
|||
|
|
<view class="b-hui">{{orderdetails.partnerAddress}}</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">下单时间</view>
|
|||
|
|
<view class="b-hei">{{orderdetails.payTime}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">商家手机号</view>
|
|||
|
|
<view class="b-hei">{{orderdetails.contactNumber}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">营业时间</view>
|
|||
|
|
<view class="b-hei">{{orderdetails.workTimeStr}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-box">
|
|||
|
|
<view class="b-title">订单信息</view>
|
|||
|
|
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">订单号</view>
|
|||
|
|
<view class="b-hei">{{orderdetails.orderNo}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">检测商品</view>
|
|||
|
|
<view class="b-hei">{{orderdetails.goodsTitle}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">价格</view>
|
|||
|
|
<view class="b-hei">{{orderdetails.goodsPrice/100}}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="on-input">
|
|||
|
|
<view class="b-hui">下单时间</view>
|
|||
|
|
<view class="b-hei">2023-07-20 12:00</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">优惠券折扣</view>
|
|||
|
|
<view class="b-hei">-{{orderdetails.couponDiscount?orderdetails.couponDiscount/100:0 }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">折扣</view>
|
|||
|
|
<view class="b-hei">-{{orderdetails.reduceMoney?orderdetails.reduceMoney/100:0 }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">使用余额</view>
|
|||
|
|
<view class="b-hei">-{{orderdetails.balance/100 }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">微信支付</view>
|
|||
|
|
<view class="ju">￥{{orderdetails.payMoney/100}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="on-input">
|
|||
|
|
<view class="b-hui">合计支付</view>
|
|||
|
|
<view class="ju">￥{{orderdetails.payMoney /100 + orderdetails.balance /100}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="anniu">
|
|||
|
|
<text>提交</text>
|
|||
|
|
</view> -->
|
|||
|
|
<view style="width: 100%; height: 55px; margin-top: 10px;"></view>
|
|||
|
|
<!-- 底部 -->
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="v-bottom">
|
|||
|
|
<view class="b-zuo" @click="gettel()">
|
|||
|
|
<view class="lanquan">
|
|||
|
|
<uni-icons type="phone-filled" color="#0D2E8D" size="24"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<view class="">联系商家</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="anniu" @click="Daohang()">
|
|||
|
|
<view class="baiqiu">
|
|||
|
|
<uni-icons type="paperplane-filled" color="#0D2E8D" size="14"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<view class="">到这里去</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import drawQrcode from 'weapp-qrcode'
|
|||
|
|
import request from '../../utils/request';
|
|||
|
|
import config from '@/config';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
orderId:'',
|
|||
|
|
orderdetails:{},
|
|||
|
|
orderStatus:2,
|
|||
|
|
intervalId: null,
|
|||
|
|
reviewStr:"",
|
|||
|
|
rateValue:5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(opion) {
|
|||
|
|
this.orderId = opion.id
|
|||
|
|
this.getindex()
|
|||
|
|
this.intervalId = setInterval(() => {
|
|||
|
|
console.log("我在执行方法");
|
|||
|
|
this.getindex()
|
|||
|
|
}, 2000);
|
|||
|
|
// uni.showLoading()
|
|||
|
|
// this.intervalId = setInterval(() => {
|
|||
|
|
// uni.hideLoading()
|
|||
|
|
|
|||
|
|
// }, 3000);
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
orderStatus(newVal, oldVal) {
|
|||
|
|
// 监听message数据的变化，并执行相应的方法
|
|||
|
|
console.log('message发生变化', newVal, oldVal);
|
|||
|
|
if(newVal == 2){
|
|||
|
|
uni.showToast({
|
|||
|
|
title:"核销成功",
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
async getindex(){
|
|||
|
|
let res = await request({
|
|||
|
|
url:'/appInspection/order/orderDetail?orderId='+this.orderId,
|
|||
|
|
method: 'get',
|
|||
|
|
})
|
|||
|
|
console.log(res);
|
|||
|
|
this.orderdetails = res.data
|
|||
|
|
this.orderStatus = res.data.orderStatus
|
|||
|
|
this.orderdetails.payMoney = res.data.payMoney
|
|||
|
|
this.orderdetails.balance = res.data.balance
|
|||
|
|
this.showCode()
|
|||
|
|
},
|
|||
|
|
async tijiao(){
|
|||
|
|
if(this.reviewStr == ""){
|
|||
|
|
uni.showToast({
|
|||
|
|
title:'评论不能为空',
|
|||
|
|
icon:'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let data = {
|
|||
|
|
orderId:this.orderId,
|
|||
|
|
starLevel:this.rateValue,
|
|||
|
|
reviewStr:this.reviewStr
|
|||
|
|
}
|
|||
|
|
let res = await request({
|
|||
|
|
url:'/appInspection/order/reviewOrder',
|
|||
|
|
method: 'post',
|
|||
|
|
params:data
|
|||
|
|
})
|
|||
|
|
console.log(res);
|
|||
|
|
if(res.code == 200){
|
|||
|
|
uni.showToast({
|
|||
|
|
title:"发布成功"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
showCode() {
|
|||
|
|
drawQrcode({
|
|||
|
|
width: 125,
|
|||
|
|
height: 125,
|
|||
|
|
canvasId: 'myQrcode',
|
|||
|
|
text:this.orderdetails.accessCode
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
gettel(){
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: this.orderdetails.contactNumber
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
Daohang(){
|
|||
|
|
console.log('触发',this.orderdetails);
|
|||
|
|
uni.openLocation({
|
|||
|
|
latitude: parseFloat(this.orderdetails.latitude) ,
|
|||
|
|
longitude: parseFloat(this.orderdetails.longitude),
|
|||
|
|
success: function () {
|
|||
|
|
console.log('success');
|
|||
|
|
},
|
|||
|
|
fail:function (res) {
|
|||
|
|
console.log(res);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
getback(){
|
|||
|
|
clearInterval(this.intervalId);
|
|||
|
|
uni.navigateBack()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
postxing(e) {
|
|||
|
|
console.log(this.rateValue);
|
|||
|
|
console.log('rate发生改变:' + JSON.stringify(e))
|
|||
|
|
|
|||
|
|
// console.log(this.rateValue);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
beforeRouteLeave(to, from, next) {
|
|||
|
|
// 在离开当前页面时清除定时器
|
|||
|
|
clearInterval(this.intervalId);
|
|||
|
|
next();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.content {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(130vh);
|
|||
|
|
background-color: #F6F6F6;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.c-top{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 229px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 15px;
|
|||
|
|
padding-top: 45px;
|
|||
|
|
background: #0D2E8D;
|
|||
|
|
}
|
|||
|
|
.ding{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.c-title{
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: white;
|
|||
|
|
width: 80%;
|
|||
|
|
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.c-zuo{
|
|||
|
|
width: 10%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.c-you{
|
|||
|
|
width: 10%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.d-bai{
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.x-bai{
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.cont-box{
|
|||
|
|
width: 98%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 15px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.b-top{
|
|||
|
|
width: 100%;
|
|||
|
|
border-bottom: 1px solid #DDDDDD;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
.b-box{
|
|||
|
|
width: 100%;
|
|||
|
|
border-bottom: 1px solid #DDDDDD;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20px 0px;
|
|||
|
|
}
|
|||
|
|
.rwm{
|
|||
|
|
width: 125px;
|
|||
|
|
height: 125px;
|
|||
|
|
background: #D9D9D9;
|
|||
|
|
margin: 40px auto;
|
|||
|
|
}
|
|||
|
|
.mzi{
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.on-input{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
}
|
|||
|
|
.v-bottom{
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0px ;
|
|||
|
|
z-index: 99;
|
|||
|
|
height: 60px;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.b-zuo{
|
|||
|
|
width: 40%;
|
|||
|
|
height: 100%;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #0D2E8D;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.anniu{
|
|||
|
|
background: #0D2E8D;
|
|||
|
|
width: 60%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
border-radius: 4px ;
|
|||
|
|
}
|
|||
|
|
.b-title{
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.b-hui{
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #999999;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.b-hei{
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.ju{
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #FF571A;
|
|||
|
|
}
|
|||
|
|
.lanquan{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2px solid #0D2E8D;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: white;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
.baiqiu{
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
</style>
|