detection-user/pages/detection/details-order.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>