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> |