xinelu-applet-ui/pagesB/ExpertlookOrder/ExpertlookOrder.vue

<template>
	<view class="app">
		<u-navbar :is-back="false" :background="background" class="u-navbar">
			<image src="@/static/fanhui.png" mode="" @tap="goprevious"></image>
			<view class="title" @tap="goprevious">
				专家咨询订单
			</view>
			<view class="inputs">
				<i class="icon"></i>
				<input v-model="orderTypeList.hospitalPersonName" type="text" name="" id="" class="input"
					placeholder="搜索订单" placeholder-class="placeholder">
			</view>
		</u-navbar>
		<u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="tabschange" :show-bar='false'
			active-color='#26A888'></u-tabs>
		<view class="" v-if="total>0" style="margin-top: 80rpx;padding: 3%;">
			<view class="Apayment" v-for='(item,index) in orderlist' :key="index">
				<view class="names">{{item.orderTime}}
					<image class="picture" src="../../static/huijiantou.png" mode=""></image>
					<span v-if="item.orderStatus=='WAIT_PAY'">待付款</span>
					<span v-if="item.orderStatus=='WAIT_REFUND'">退款中</span>
					<span v-if="item.orderStatus=='CANCEL'">已取消</span>
					<span v-if="item.orderStatus=='COMPLETED'">待评价</span>
					<span v-if="item.orderStatus=='WAIT_RECEIVED_GOODS'">待接单</span>
					<span v-if="item.orderStatus=='RECEIVED_GOODS'">待服务</span>
					<!-- <span v-if="item.orderStatus=='RECEIVED_GOODS'">待服务</span> -->
					<span v-if="item.orderStatus=='EVALUATED'">已评价</span>
					<span v-if="item.orderStatus=='PAY'">待发货</span>
					<span v-if="item.orderStatus=='REFUNDED'">已退款</span>
					<span v-if="item.orderStatus=='WAIT_RETURNED_GOODS'">待退货</span>
					<span v-if="item.orderStatus=='RETURNED_GOODS'">退款成功</span>
				</view>
				<view class="details" @tap='goorderdetails(item)'>
					<view class="detailslist">
						<image :src="baseurl+item.personPictureUrl" mode=""
							v-if="item.orderType =='HEALTH_CONSULTATION'"></image>
						<!-- <image :src="baseurl+item.attributePitureUrl" mode=""
							v-if="item.orderType =='HEALTH_CONSULTATION'&&!item.attributePitureUrl"></image>
						<image :src="baseurl+item.attributePitureUrl" mode=""
							v-if="item.orderType !='HEALTH_CONSULTATION'"></image> -->
						<view class="model">
							<view class="top">
								<span v-if="item.orderType =='HEALTH_CONSULTATION'">{{item.hospitalPersonName}}</span>
								<span v-else>{{item.goodsName}}</span>
								<view class="apptime">预约时间：{{item.healthAppointDate}}</view>
								<!-- <span v-if="item.orderType =='HEALTH_CONSULTATION'">￥{{item.totalPrice}}</span> -->
								<span
									v-if="item.goodsPrice&&item.orderType !='HEALTH_CONSULTATION'">￥{{item.goodsPrice}}</span>
							</view>
							<view class="bottom" v-if="item.orderType !='HEALTH_CONSULTATION'">
								<span class="box">型号：{{item.goodsAttributeName}}</span>
								<span class="box">×{{item.goodsCount}}</span>
							</view>
							<view class="refund">
								<span>
									实付款：
								</span>
								<text class="price"
									v-if="item.orderType=='DIRECT_BUY'||item.orderType =='HEALTH_CONSULTATION'">￥{{item.totalPrice}}</text>
								<text class="price"
									v-if="item.orderType=='INTEGRAL_EXCHANGE'">{{item.integralExchangeSill}}</text>
								<text class="price" v-if="item.orderType=='INTEGRAL_EXCHANGE'"
									style='padding-left: 10rpx;'>
									健康豆
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="anniu">
					<view class="logistics" v-if="item.orderStatus=='WAIT_REFUND'" style="background-color: coral;"
						@tap='goorderdetails(item)'>退款中
					</view>
					<view class="logistics"
						v-if="item.orderStatus=='WAIT_RECEIVED_GOODS'&&item.orderType !='HEALTH_CONSULTATION'"
						@tap='gologistics(item)'>查看物流
					</view>
					<view class="logistics harvest" @tap='buy(item)' v-if="item.orderStatus=='WAIT_PAY'">
						去支付</view>
					<view class="logistics harvest" v-if="item.orderStatus == 'COMPLETED'" @tap='rate(item)'>
						<!-- <view class="pay" style="background-color: #26A888;"> -->
						去评价
						<!-- </view> -->
					</view>
					<!-- 	<view class="logistics harvest" @tap='Receipt(item)'
						v-if="item.orderStatus=='WAIT_RECEIVED_GOODS'&&item.orderType !='HEALTH_CONSULTATION'">
						确认收货</view> -->
					<!-- 	<view class="logistics harvest" @tap='Receipt(item)'
						v-if="item.orderStatus=='WAIT_RECEIVED_GOODS'&&item.orderType =='HEALTH_CONSULTATION'">
						咨询完成</view> -->
					<view class="logistics harvest" style="background-color: #60c5f1;" @tap='serve(item)'
						v-if="item.orderStatus=='RECEIVED_GOODS'">
						去咨询</view>
					<view class="logistics harvest" v-if="item.orderStatus=='EVALUATED'" @tap='golookrate(item)'>
						查看评价</view>
				</view>
			</view>
		</view>
		<view class="noorder" v-else>
			<u-empty mode="order" icon-size='220'></u-empty>
		</view>
		<!-- 弹框 -->
		<!-- <view class="frame">
			<u-popup v-model="show" mode="bottom" length="45%" border-radius="30" :closeable='true'>
				<view class="payment">
					<span v-if="orderNoitem.orderType =='HEALTH_CONSULTATION'">确认咨询完成了吗</span>
					<span v-else>确认收到货了吗</span>
				</view>
				<view class="chat">
					<view class="image" style="height:182rpx">
						<image :src="baseurl+img" mode="" v-if="orderNoitem.orderType !='HEALTH_CONSULTATION'"></image>
						<view class="blackground" v-if="orderNoitem.orderType !='HEALTH_CONSULTATION'">共1件</view>
					</view>
					<view class="word" v-if="orderNoitem.orderType =='HEALTH_CONSULTATION'">为了保证您的售后权益，请确认健康咨询无误后再确认完成
					</view>
					<view class="word" v-else>为了保证您的售后权益，请收到商品确认无误后再确认收货</view>
				</view>
				<view class="submits" @tap='Receipts'>确定</view>
			</u-popup>
		</view> -->
		<u-popup v-model="evaluatenurse" mode="bottom" length="50%" border-radius="20" :closeable='true' class='masks'>
			<view class="titleitem">
				服务评价
			</view>
			<view class="mask">
				<u-rate :count="5" v-model="rateval" :size='70' active-color='#F4EA2A'></u-rate>
			</view>
			<view class="rateitem">
				{{rateval==5?'非常满意':''}}
				{{rateval==4?'满意':''}}
				{{rateval==3?'一般':''}}
				{{rateval==2?'差':''}}
				{{rateval==1?'非常差':''}}
			</view>
			<view class="btn" @tap="submit(item)" v-if="show">
				确认
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getRoomId
	} from '@/api/pagesB/solution/solution.js'
	import {
		lookrate
	} from '@/api/pagesB/lookrate/index.js'
	import {
		ssgoodsOrder,
		confirmReceipt
	} from '@/api/pagesB/CommodityOrder/index.js'
	import baseurl from '@/api/baseurl.js'
	import {
		appletGoodsOrderPay
	} from '@/api/pagesB/confirmOrder/index.js'
	import {
		insertGoodsEvaluate,
	} from '@/api/pagesB/Serviceevaluation/Serviceevaluation.js'
	import {
		pushMeg
	} from '@/api/pagesB/ExpertlookOrder/index.js'
	export default {
		data() {
			return {
				rateval: 0,
				show: true,
				evaluatenurse: false,
				tabslist: [{
						name: '全部',
						orderStatus: '',
					},
					{
						name: '待付款',
						orderStatus: 'WAIT_PAY',
					},
					{
						name: '待接单',
						orderStatus: 'WAIT_RECEIVED_GOODS',
					},
					{
						name: '待服务',
						orderStatus: 'RECEIVED_GOODS',
					},
					{
						name: '待评价',
						orderStatus: 'COMPLETED',
					},

					{
						name: '已评价',
						orderStatus: 'EVALUATED',
					},

				],
				tabscurrent: 0,
				background: {
					backgroundColor: '#26A888',
				},
				orderNoitem: null,
				orderTypeList: {
					patientId: '',
					orderType: 'HEALTH_CONSULTATION',
					orderStatus: '',
					// goodsOrderId: '', //
					pageSize: 15, //
					pageNum: 1, //
					hospitalPersonName: '',
				},
				openid: '',
				baseurl: '', //url
				orderlist: [], //商品订单list
				total: 0, //list长度
				// show: false, //确认收获开关
				img: '', //确认收货页面图片
				orderStatus: '', //
				getCodeText: null,
				userId: '',
				userSig: '',
				roomId: '',
			}
		},
		watch: { //监听
			rateval() {
				if (this.rateval == 5) {
					this.evaluateSatisfaction = 'VERYSATISFIED'
				} else if (this.rateval == 4) {
					this.evaluateSatisfaction = 'SATISFIED'
				} else if (this.rateval == 3) {
					this.evaluateSatisfaction = 'COMMONLY'
				} else if (this.rateval == 2) {
					this.evaluateSatisfaction = 'DISSATISFIED'
				} else if (this.rateval == 1) {
					this.evaluateSatisfaction = 'VERYDISSATISFIED'
				}
			},
			'orderTypeList.hospitalPersonName'() {
				this.orderTypeList.pageNum = 1
				this.goodsOrderinfo()
			},
		},
		methods: {
			submit() {
				var obj = {
					"patientId": this.orderTypeList.patientId,
					"openid": this.openid,
					"orderNo": this.orderlist[0].goOrderNo,
					"evaluateChannel": "WE_CHAT_APPLET",
					"evaluateSatisfaction": this.evaluateSatisfaction,
					"compositeScore": this.rateval,
					"orderSource": "SPRING_DOCTOR",
				}
				insertGoodsEvaluate(obj).then(res => {
					if (res.code == 200) {
						uni.setStorageSync("Refresh", 'Refresh')
						this.$refs.uToast.show({
							title: '评价成功',
							type: 'success',
							duration: '1500'
						})
						this.goodsOrderinfo()
						this.evaluatenurse = false;
					} else if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							duration: '1500'
						})
					}
				})
			},
			//点击tabs
			tabschange(index) {
				this.tabscurrent = index;
				this.orderTypeList.orderStatus = this.tabslist[index].orderStatus
				if (this.orderTypeList.orderStatus == "EVALUATED") {
					this.show = false
				}
				// console.log(this.orderTypeList.orderStatus, '999')
				// console.log(this.orderTypeList.orderType, '99')

				this.goodsOrderinfo();
			},
			//评价
			rate(item) {
				if (item.orderStatus == 'COMPLETED') {
					this.rateval = 0
					this.show = true
				}
				this.evaluatenurse = true;
			},
			//返回上一页
			goprevious() {
				uni.navigateBack({
					delta: 1
				})
				return true;
			},
			//查看评价
			golookrate(item) {
				console.log(item, '555')
				if (item.orderStatus == "EVALUATED") {
					this.show = false
				}
				var orderNo = item.goOrderNo
				lookrate(orderNo).then(res => {
					this.rateval = res.data.compositeScore
					this.evaluatenurse = true
				})
			},
			//支付
			buy(item) {
				let obj = {
					patientId: this.orderTypeList.patientId,
					openid: this.openid,
					orderNo: item.goOrderNo,
					orderChannel: "WECHAT_APPLET",
					paymentPrice: item.totalPrice,
					payType: "WECHAT_PAY",
					buySource: item.buySource,
				}
				var that = this
				appletGoodsOrderPay(obj).then(response => {
					if (response.code == 200) {
						uni.requestPayment({
							timeStamp: response.data.timeStamp,
							nonceStr: response.data.nonceStr,
							package: response.data.prepayId,
							signType: response.data.signType,
							paySign: response.data.paySign,
							success: function(res) {
								pushMeg({
									orderId: item.goodsOrderId,
									patientId: item.patientId
								}).then(respp => {
									uni.setStorageSync("Refresh", 'Refresh')
									that.$refs.uToast.show({
										title: '支付成功',
										type: 'success',
										duration: 1500,
										url: `/pagesB/paysuccess/paysuccess?delta=${1}`
									})
								})
							},
							fail: function(err) {
								that.$refs.uToast.show({
									title: '取消支付',
									type: 'error',
									duration: 1500,
								})
							}
						});
					} else {
						that.$refs.uToast.show({
							title: response.msg,
							type: 'error',
							duration: 2000
						})
					}
				})
			},
			//物流页面
			gologistics(item) {
				uni.navigateTo({
					url: `/pagesB/logistics/logistics?item=${JSON.stringify(item)}`
				})
			},
			// 去咨询
			serve(item) {
				getRoomId(item.goodsOrderId).then(res => {
					if (res.msg) {
						this.roomId = res.msg
						this.$refs.uToast.show({
							title: '暂未开放',
							type: 'error'
						})
						// uni.navigateTo({
						// 	url: `/pagesB/solution/solution?item=${JSON.stringify(item)}&&roomId=${this.roomId}`
						// })
					} else {
						this.$refs.uToast.show({
							title: '暂无视频通话',
							type: 'error'
						})
					}
				})
			},
			//订单详情页面
			goorderdetails(item) {
				uni.navigateTo({
					url: `/pagesB/consulted/consulted?item=${JSON.stringify(item)}`
				})
			},
			//商品订单请求
			goodsOrderinfo() {
				// this.orderTypeList.orderType = this.patientId
				ssgoodsOrder(this.orderTypeList).then(
					res => {
						if (res.code == 200) {
							this.orderlist = res.rows
							// this.orderlist.forEach(e => {
							// 	e.timestamp = null
							// 	var time = new Date(e.orderTime).getTime() / 1000 + (60 * 60 * 2)
							// 	var times = new Date().getTime() / 1000
							// 	e.timestamp = time - times
							// })
							uni.removeStorageSync('Refresh');
							this.total = res.total
						}
					})
			},
			//确认收货
			Receipt(item) {
				this.orderNoitem = item
				this.img = item.attributePitureUrl
				this.show = true
			},
		},
		onReady() { //更改导航栏文字
			// uni.setNavigationBarTitle({
			// 	title: this.title,
			// });
		},
		onShow() {
			this.orderTypeList.pageNum = 1;
			this.baseurl = baseurl;
			let that = this
			const value3 = uni.getStorageSync('Refresh');
			if (value3) {
				that.goodsOrderinfo();
			}
		},
		onLoad(options) { //开局调用
			let that = this
			const value = uni.getStorageSync('patientId');
			const value2 = uni.getStorageSync('openid');
			if (value && value2) {
				that.orderTypeList.patientId = value
				that.openid = value2
				if (options.orderStatus) {
					that.tabscurrent = options.toindex
					that.orderStatus = options.orderStatus
					that.goodsOrderinfo();
				} else {
					that.goodsOrderinfo();
				}
			}
		},
		onReachBottom() { //下滑加载
			if (this.orderlist.length >= this.total) {} else {
				this.orderTypeList.pageNum++;
				ssgoodsOrder(this.orderTypeList).then(res => {
					res.rows.forEach(e => {
						// e.timestamp = null
						// var time = new Date(e.orderTime).getTime() / 1000 + (60 * 60 * 2)
						// var times = new Date().getTime() / 1000
						// e.timestamp = time - times
						this.orderlist.push(e)
					})
					this.total = res.total
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.orderTypeList.pageNum = 1;
			this.goodsOrderinfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F5F5;
	}

	.app {
		width: 100%;

		.titleitem {
			position: absolute;
			top: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 42rpx;
		}

		::v-deep .u-star-wrap {
			padding-right: 10rpx;
		}

		.mask {
			position: absolute;
			top: 200rpx;
			left: 70rpx;
		}

		.btn {
			width: 70%;
			height: 71rpx;
			background: #26A888;
			border-radius: 26rpx;
			position: absolute;
			top: 530rpx;
			left: 15%;
			text-align: center;
			line-height: 71rpx;
			color: #fff;
		}

		.rateitem {
			position: absolute;
			top: 350rpx;
			left: 80rpx;
			font-size: 42rpx;
		}

		::v-deep .u-navbar-placeholder {
			background-color: #F7F5F5;
			z-index: 999;
		}

		::v-deep .u-tabs {
			width: 100%;
			position: fixed;
			// top: 200rpx;
			z-index: 999;
			background-color: #F7F5F5 !important;
		}

		.noorder {
			margin-top: 20%;
		}

		.u-navbar {
			display: block;
			// height: 200rpx;

			image {
				margin: 0 4% 0 4%;
				width: 20rpx;
				height: 30rpx;
			}

			.title {
				width: 46%;
				font-size: 34rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.inputs {
				position: relative;
				margin-left: 4%;
				box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
				width: 60%;
				height: 65rpx;
				border-radius: 20rpx;
				z-index: 999;
				background: #65c0a9;
				color: #FFFFFF;

				.placeholder {
					color: #FFFFFF;
				}

				.input {
					margin: 0 auto;
					position: absolute;
					height: 65rpx;
					// top: 8%;
					left: 18%;
					width: 80%;
					font-size: 26rpx;
					color: #FFFFFF;
				}

				.icon {
					background: url(@/static/pagesB/sousuo.png) no-repeat;
					width: 30rpx;
					height: 28rpx;
					background-size: cover;
					position: absolute;
					top: 28%;
					left: 4%;
				}
			}
		}

		.submits {
			width: 501rpx;
			height: 71rpx;
			background: #26A888;
			border-radius: 26rpx;
			text-align: center;
			line-height: 71rpx;
			color: #ffffff;
			font-size: 34rpx;
			margin-top: 5%;
			margin-left: 15%;
		}

		// 弹框确认收货
		.chat {
			.word {
				font-size: 26rpx;
				color: #010000;
				line-height: 36rpx;
				width: 70%;
				margin: 50rpx auto;
				text-align: center;
			}

			.image {
				position: relative;

				.blackground {
					width: 183rpx;
					height: 69rpx;
					background: #030303;
					opacity: 0.5;
					color: #ffffff;
					font-size: 36rpx;
					text-align: center;
					line-height: 69rpx;
					position: absolute;
					bottom: 0%;
					left: 50%;
					transform: translateX(-50%);
				}

				image {
					width: 182rpx;
					display: block;
					margin: 0 auto;
					height: 182rpx;
				}
			}

		}

		.payment {
			width: 100%;
			font-size: 42rpx;
			color: #000000;
			line-height: 120rpx;
			text-align: center;

			span {}

			image {
				width: 31rpx;
				height: 31rpx;
				position: absolute;
				right: 5%;
				top: 5%;
			}
		}

		.Apayment {
			width: 99%;
			height: 400rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			padding: 3%;
			font-size: 30rpx;
			color: #969394;
			margin-top: 3%;
			position: relative;
			// line-height: 70rpx;

			.anniu {
				display: flex;
				position: absolute;
				right: 3%;
				bottom: 20rpx;

				.logistics {
					text-align: center;
					color: #ffffff;
					width: 170rpx;
					height: 60rpx;
					background: #FFFFFF;
					// border: 1px solid #959595;
					border-radius: 5rpx;
					font-weight: 400;
					color: #000000;
					line-height: 60rpx;
				}

				.harvest {
					margin-left: 10rpx;
					background: #26A888;
					color: #FFFFFF !important;
				}
			}

			.details {
				height: 200rpx;
				position: relative;

				.detailslist {

					image {
						position: absolute;
						width: 182rpx;
						height: 182rpx;
					}

					.model {
						.top {
							margin-top: 20rpx;
							height: 100rpx;

							.apptime {
								position: absolute;
								left: 32%;
								top: 30%;
								// background-color: red;
							}

							span:nth-child(1) {
								position: absolute;
								left: 32%;
								font-size: 32rpx;
								color: #000000;
								width: 50%;
								line-height: 40rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;

							}

							span:nth-child(2) {
								position: absolute;
								top: 0%;
								right: 0%;
								line-height: 40rpx;
								font-size: 32rpx;
							}
						}

						.bottom {
							position: absolute;
							left: 32%;
							top: 45%;
							width: 68%;

							.box:nth-child(1) {
								width: 70%;
								display: inline-block;
								font-size: 30rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.box:nth-child(2) {
								width: 30%;
								position: absolute;
								text-align: center;
								right: 0%;
							}
						}

						.refund {
							position: absolute;
							right: 0%;
							top: 70%;

							.price {
								font-size: 41rpx;
								color: #000000;
							}
						}
					}
				}
			}

			.names {
				width: 100%;
				border-bottom: 1rpx solid #D8D4D4;
				position: relative;
				padding-bottom: 20rpx;

				.picture {
					width: 15rpx;
					height: 23rpx;
					margin-left: 20rpx;
				}

				span {
					position: absolute;
					right: 0%;
					color: #26A888;
					// line-height: 67px;
					display: inline-block;

				}
			}
		}
	}
</style>