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

<template>
	<view class="app">
		<u-navbar :is-back="false" :background="background" class="u-navbar">
			<image src="@/static/pagesB/fanhui.png" mode="" @tap="goprevious"></image>
			<view class="title" @tap="goprevious">
				商品订单
			</view>
			<view class="inputs">
				<i class="icon"></i>
				<input v-model="goodsName" 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='#000000'></u-tabs>
		<view class="" v-if="total>0">
			<view class="Apayment" v-for='(item,index) in orderlist' :key="index">
				<view class="names">店铺名称
					<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=='WAIT_RECEIVED_GOODS'&&item.orderType !='HEALTH_CONSULTATION'">待收货</span>
					<span
						v-if="item.orderStatus=='WAIT_RECEIVED_GOODS'&&item.orderType =='HEALTH_CONSULTATION'">待咨询</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'&&item.personPictureUrl"></image>
						<image src="@/static/pagesB/yis.png" mode=""
							v-if="item.orderType =='HEALTH_CONSULTATION'&&!item.personPictureUrl"></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'">健康咨询</span>
								<span v-else>{{item.goodsName}}</span>
								<!-- <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" @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='rate(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-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		ssgoodsOrder,
		confirmReceipt
	} from '@/api/pagesB/CommodityOrder/index.js'
	import baseurl from '@/api/baseurl.js'
	import {
		appletGoodsOrderPay
	} from '@/api/pagesB/confirmOrder/index.js'
	export default {
		data() {
			return {
				tabslist: [{
					name: '全部',
					orderStatus: '',
				}, {
					name: '待付款',
					orderStatus: 'WAIT_PAY',
				}, {
					name: '待收货',
					orderStatus: 'WAIT_RECEIVED_GOODS',
				}, {
					name: '待评价',
					orderStatus: 'RECEIVED_GOODS',
				}, {
					name: '已完成',
					orderStatus: 'EVALUATED',
				}],
				tabscurrent: 0,
				background: {
					backgroundColor: '#26A888',
				},
				orderNoitem: null,
				patientId: '',
				openid: '',
				baseurl: '', //url
				orderlist: [], //商品订单list
				total: 0, //list长度
				show: false, //确认收获开关
				img: '', //确认收货页面图片
				orderStatus: '', //
				goodsOrderId: '', //
				pageSize: 15, //
				pageNum: 1, //
				goodsName: '',
				getCodeText: null,
			}
		},
		methods: {
			//点击tabs
			tabschange(index) {
				this.tabscurrent = index;
				this.orderStatus = this.tabslist[index].orderStatus
				this.goodsOrderinfo();
			},
			//返回上一页
			goprevious() {
				uni.navigateBack({
					delta: 1
				})
			},
			//查看评价
			golookrate(item) {
				uni.navigateTo({
					url: `/pagesB/lookrate/lookrate?item=${JSON.stringify(item)}`
				})
			},
			//收货
			Receipts() {
				confirmReceipt(this.orderNoitem.goOrderNo).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '收货成功',
							type: 'success',
							duration: '1000'
						})
						this.show = false
						uni.setStorageSync("Refresh", 'Refresh')
						setTimeout(e => {
							uni.navigateTo({
								url: `/pagesB/goodsorderRate/goodsorderRate?item=${JSON.stringify(this.orderNoitem)}&delta=${1}`
							})
							// uni.navigateTo({
							// 	url: `/pagesB/orderDetails/orderDetails?goodsOrderId=${this.orderNoitem.goodsOrderId}`
							// })
						}, 1000)
					} else {
						this.$refs.uToast.show({
							title: '收货失败',
							type: 'error',
							duration: '1000'
						})
						this.show = false
					}
				})
			},
			//支付
			buy(item) {
				let obj = {
					patientId: this.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) {
								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)}`
				})
			},
			//评价
			rate(item) {
				uni.navigateTo({
					url: `/pagesB/goodsorderRate/goodsorderRate?item=${JSON.stringify(item)}&delta=${1}`
				})
			},
			//订单详情页面
			goorderdetails(item) {
				uni.navigateTo({
					url: `/pagesB/orderDetails/orderDetails?goodsOrderId=${item.goodsOrderId}`
				})
			},
			//商品订单请求
			goodsOrderinfo() {
				ssgoodsOrder(this.patientId, this.orderStatus, this.goodsOrderId, this.pageSize, this.pageNum, this
					.goodsName).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
						} else if (res.code == 9999) {
							this.$refs.uToast.show({
								title: '未登录,请先登录',
								type: 'error',
							})
						}
					})
			},
			//确认收货
			Receipt(item) {
				this.orderNoitem = item
				this.img = item.attributePitureUrl
				this.show = true
			},
		},
		watch: { //监听
			goodsName() {
				this.pageNum = 1
				this.goodsOrderinfo()
			},
		},
		onReady() { //更改导航栏文字
			// uni.setNavigationBarTitle({
			// 	title: this.title,
			// });
		},
		onShow() {
			this.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.patientId = value
				that.openid = value2
				if (options.orderStatus) {
					that.tabscurrent = options.toindex
					that.orderStatus = options.orderStatus
					that.goodsOrderinfo();
				} else {
					that.goodsOrderinfo();
				}
			} else {
				that.$refs.uToast.show({
					title: '未登录,请先登录',
					type: 'error',
				})
			}
		},
		onReachBottom() { //下滑加载
			if (this.orderlist.length >= this.total) {} else {
				this.pageNum++;
				ssgoodsOrder(this.patientId, this.orderStatus, this.goodsOrderId, this.pageSize, this.pageNum, this
					.goodsName).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.pageNum = 1;
			this.goodsOrderinfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	@import "./CommodityOrder.scss";
</style>