466 lines
10 KiB
Vue
466 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/newRequest';
|
||
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: '/app-api/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: '/app-api/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> |