qjd-user-uniapp/pagesMain/orderItem.vue

<template>
	<view>
		<view class="order-row" @click="goToOrderDetail()">
			<view class="shop-info" v-if="orderData" @click.stop="gotoShop()">
				<text class="iconfont icondianpu"></text>
				<text class="shop-name">{{orderData.supplierName}}</text>
				<text class="iconfont iconfangxiang" v-if="orderData.tenantCode != 'admin'"></text>
				<text class="order-type">{{orderData.auctionStatus == null ? getOrderType(orderData.orderStatus) : getAuctionType(orderData.auctionStatus,orderData.orderStatus)}}</text>
			</view>
			<view class="goods-list" v-if="orderData">
				<view class="goods-row" v-for="(site, index) in orderData.products" :key="index">
					<image class="goods-img" :src="site.imgUrl" mode="aspectFill"></image>
					<view class="goods-info">
						<view class="goods-name">{{site.productName}}</view>
						<view class="goods-type">
							类型：{{site.productType == 1 ? '普通商品' : (site.productType == 2 ? '拍卖' : (site.productType == 3 ? '自助采摘' : '共享种植'))}}
						</view>
						<view class="goods-price-number">
							<text class="goods-unit">￥</text>
							<text class="goods-price">{{site.bizPrice}}</text>
							<text class="goods-number">x{{site.buyNum}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="pay-info">总价￥{{getAllPrice()}}，实付￥{{orderData.paySum}}</view>
			<view class="handle-box" v-if="tabIndex > 1">
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="tabIndex == 2" @click.stop="handleOrder(1)">取消订单</u-button>
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="tabIndex == 2" @click.stop="handleOrder(2)">立即支付</u-button>
				<!-- <u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
			 v-if="tabIndex != 1 && tabIndex != 2" @click.stop="handleOrder(3)">申请售后</u-button> -->
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="(tabIndex == 2 || tabIndex == 3) && pickHandle" @click.stop="handleOrder(4)">自助采摘</u-button>
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="tabIndex == 3 && sharePlant" @click.stop="handleOrder(8)">我的种植</u-button>
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="tabIndex == 4 && sharePlant" @click.stop="handleOrder(8)">我的种植</u-button>
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="tabIndex == 4" @click.stop="handleOrder(5)">确认收货</u-button>
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="tabIndex == 4" @click.stop="handleOrder(6)">追踪物流</u-button>
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="tabIndex == 5 && sharePlant" @click.stop="handleOrder(8)">我的种植</u-button>
				<u-button size="medium" :plain="true" type="success" shape="circle" :ripple="true" :hair-line="false" class="handle-button"
				 v-if="tabIndex == 5 && orderData.evaluateStatus == 1" @click.stop="handleOrder(7)">评价</u-button>
			</view>
			<u-modal v-model="modalShow" :content="modalContent" @confirm="submitHandle" :async-close="true" :show-cancel-button="true"></u-modal>
			<u-top-tips ref="uTips"></u-top-tips>
		</view>
		<view class="uni-popup-dialog" :hidden="show_qx">
			<view class="uni-dialog-title">
				<text class="uni-dialog-title-text">提示</text>
			</view>
			<view class="uni-dialog-content">
				<text class="uni-dialog-content-text">请在设置中开启摄像头权限和麦克风权限</text>
			</view>
			<view class="uni-dialog-button-group">
				<button class="uni-dialog-button uni-border-left" open-type="openSetting" @click="closeSetting">
					设置权限
				</button>
			</view>
		</view>
		<view class="qx_bg" :hidden="show_qx">
		</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		props: {
			tabIndex: {
				default: 1
			},
			orderData: {
				default: {
					auctionStatus: 0,
					orderId: 0,
					orderStatus: 0,
					evaluateReplyStatus: 0,
					nickname: '',
					payStatus: 0,
					paySum: 0,
					products: [{
						bizPrice: 0,
						buyNum: 0,
						imgUrl: '',
						originalPrice: 0,
						productId: 0,
						productName: '',
						productType: 0,
						shoppingcartId: 0,
						tenantCode: ''
					}],
					supplierName: '',
					tenantCode: ''
				}
			},
		},
		data() {
			return {
				show_qx: true,
				pickHandle: false,
				sharePlant: false,
				modalShow: false,
				modalContent: '',
				handleType: '',
				goodType: ''
			}
		},
		mounted() {
			this.pickHandle = this.orderData.products.filter(site => site.productType == 3).length > 0
			this.sharePlant = this.orderData.products.filter(site => site.productType == 4).length > 0
			this.goodType = this.pickHandle ? 3 : ''
		},
		methods: {
			closeSetting: function() {
				this.show_qx = true;
			},
			//  跳转商铺
			gotoShop() {
				if (this.orderData.tenantCode != 'admin') {
					if (this.orderData.products.length) {
						uni.navigateTo({
							url: '/pagesGood/shopDetails?goodId=' + this.orderData.products[0].productId
						});
					}
				}
			},
			//  获取订单总价
			getAllPrice() {
				let price = this.orderData.products.reduce((total, site) => {
					return total + site.bizPrice * site.buyNum
				}, 0)
				return price.toFixed(2)
			},
			//  获取订单类型
			getOrderType(type) {
				switch (type) {
					case 1:
						return '待付款'
						break;
					case 2:
						return '待发货'
						break;
					case 3:
						return '已发货'
						break;
					case 4:
						return '已收货'
						break;
					case 5:
						return '已完成'
						break;
					default:
						return '已取消'
				}
			},
			//  获取拍卖状态
			getAuctionType(type, orderStatus) {
				switch (type) {
					case 1:
						return '竞拍中'
						break;
					case 2:
						return '竞拍成功' + '-' + this.getOrderType(orderStatus)
						break;
					case 3:
						return '竞拍失败'
						break;
				}
			},
			//  操作区分
			handleOrder(type) {
				if (type == 1 || type == 2 || type == 5) {
					this.modalContent = type == 1 ? '请确定是否取消订单' : (type == 2 ? '请确定是否立即支付' : '请确定是否确认收货')
					this.handleType = type
					this.modalShow = true
				} else if (type == 3) {
					//  申请售后
					NET.request(API.applyService, {
						tenantCode: this.orderData.tenantCode
					}, 'GET').then(res => {
						uni.makePhoneCall({
							phoneNumber: res.data.contactTel
						});
					}).catch(error => {
						this.$refs.uTips.show({
							title: error.data.msg,
							type: 'warning',
						})
					})
				} else if (type == 4) {
					//  自助采摘
					// #ifdef MP-WEIXIN
					var that = this;
					if (uni.getStorageSync("firstTimeLiveUser") == "") {
						uni.setStorage({
							key: 'firstTimeLiveUser',
							data: 1
						})
						uni.navigateTo({
							url: '/pagesGood/pickVideo?orderId=' + that.orderData.orderId + '&tenantCode=' + that.orderData.tenantCode
						});
					} else {
						uni.navigateTo({
							url: '/pagesGood/pickVideo?orderId=' + that.orderData.orderId + '&tenantCode=' + that.orderData.tenantCode
						});
					}

					return false;
					// #endif
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pagesGood/pickVideo?orderId=' + this.orderData.orderId + '&tenantCode=' + this.orderData.tenantCode
					});
					// #endif
				} else if (type == 6) {
					//  追踪物流
					uni.navigateTo({
						url: '/pagesMain/logisticsDeatil?logisticCode=' + this.orderData.logisticsNum
					});
				} else if (type == 7) {
					//  评价
					uni.navigateTo({
						url: '/pagesMain/evaluateForm?orderId=' + this.orderData.orderId + '&tenantCode=' + this.orderData.tenantCode +
							'&productIds=' + this.orderData.products.map(site => {
								return site.productId
							}).join(',')
					});
				} else if (type == 8) {
					//  去我的种植
					uni.navigateTo({
						url: '/pagesGood/goodDetails?minePlant=true&goodId=' + this.orderData.products[0].productId + '&orderId=' +
							this.orderData.orderId
					});
				}
			},
			//  跳转订单详情
			goToOrderDetail() {
				uni.navigateTo({
					url: '/pagesMain/orderDetail?orderId=' + this.orderData.orderId + '&orderStatus=' + this.orderData.orderStatus
				});
			},
			//  状态流转
			submitHandle() {
				if (this.handleType == 1) {
					//  取消订单
					NET.request(API.cancelOrder, {
						orderId: this.orderData.orderId
					}, 'GET').then(res => {
						this.modalShow = false
						this.$emit('reasetList');
						this.$refs.uTips.show({
							title: '取消订单成功',
							type: 'success',
						})
					}).catch(error => {
						this.modalShow = false
						this.$refs.uTips.show({
							title: error.data.msg,
							type: 'warning',
						})
					})
				} else if (this.handleType == 2) {
					//  立即支付
					NET.request(API.payOrder, {
						mid: uni.getStorageSync("userData").userId,
						orderCode: this.orderData.orderCode,
						orderId: this.orderData.orderId,
						// #ifdef APP-PLUS
						channel: 2
						//#endif
					}, 'POST').then(res => {
						this.modalShow = false
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.packageValue,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: (payRes) => {
								console.log('success:' + JSON.stringify(payRes));
								// if (this.goodType == 3) {
								// 	uni.navigateTo({
								// 		url: '/pagesMain/paySuccess?orderId=' + this.orderData.orderId + '&goodType=' + this.goodType + '&tenantCode=' + this.orderData.tenantCode
								// 	});
								// } else {
								uni.navigateTo({
									url: '/pagesMain/paySuccess?orderId=' + this.orderData.orderId
								});
								// }
							},
							fail: (error) => {
								console.log('fail:' + JSON.stringify(error));
								this.$refs.uTips.show({
									title: '支付失败',
									type: 'warning',
								})
							}
						})
						//#endif

						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: {
								"package": res.data.packageValue,
								"appid": res.data.appId,
								"sign": res.data.sign,
								"partnerid": res.data.partnerId,
								"prepayid": res.data.prepayId,
								"noncestr": res.data.nonceStr,
								"timestamp": res.data.timeStamp,
							},
							success: (payRes) => {
								console.log('success:' + JSON.stringify(payRes));
								uni.navigateTo({
									url: '/pagesMain/paySuccess?orderId=' + this.orderData.orderId
								});
							},
							fail: (error) => {
								console.log('fail:' + JSON.stringify(error));
								this.$refs.uTips.show({
									title: '支付失败',
									type: 'warning',
								})
							}
						})
						//#endif

					}).catch(error => {
						this.modalShow = false
						this.$refs.uTips.show({
							title: error.data.msg,
							type: 'warning',
						})
					})
				} else if (this.handleType == 5) {
					//  确认收货
					NET.request(API.confirmOrder, {
						orderId: this.orderData.orderId
					}, 'GET').then(res => {
						this.modalShow = false
						this.$emit('reasetList');
						this.$refs.uTips.show({
							title: '确认收货成功',
							type: 'success',
						})
					}).catch(error => {
						this.modalShow = false
						this.$refs.uTips.show({
							title: error.data.msg,
							type: 'warning',
						})
					})
				}
			},
		}
	}
</script>
<style>
</style>
<style lang="less" scoped>
	.order-row {
		width: 100%;
		float: left;
		margin: 0 0 15px 0;
		background: #FFFFFF;
		border-radius: 10px;

		.shop-info {
			width: 100%;
			height: 48px;
			float: left;
			box-sizing: border-box;
			padding: 13px 15px 12px 15px;
			border-bottom: 1px solid #EEEEEE;
			line-height: 22px;

			.icondianpu {
				font-size: 22px;
				color: #333333;
			}

			.shop-name {
				font-size: 15px;
				font-family: PingFang SC;
				color: #333333;
				margin: 0 8px 0 10px;
			}

			.iconshangjia {
				font-size: 12px;
				color: #999999;
			}

			.order-type {
				float: right;
				font-size: 15px;
				font-family: PingFang SC;
				color: #52A63A;
			}
		}

		.goods-list {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 10px 15px 0 15px;

			.goods-row {
				width: 100%;
				height: 90px;
				float: left;
				display: flex;
				margin-bottom: 10px;

				.goods-img {
					width: 90px;
					height: 90px;
					border-radius: 5px;
					object-fit: cover;
				}

				.goods-info {
					width: calc(100% - 106px);
					height: 90px;
					margin-left: 16px;

					.goods-name {
						width: 100%;
						height: 36px;
						float: left;
						font-size: 14px;
						font-family: PingFang SC;
						color: #333333;
						line-height: 18px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
					}

					.goods-type {
						height: 20px;
						float: left;
						background: #F0F0F0;
						border-radius: 4px;
						padding: 0 8px;
						margin: 6px 0;
						font-size: 10px;
						font-family: PingFang SC;
						color: #666666;
						line-height: 20px;
					}

					.goods-price-number {
						width: 100%;
						height: 20px;
						float: left;
						line-height: 20px;
						font-family: PingFang SC;
						color: #333333;

						.goods-unit {
							font-size: 12px;
						}

						.goods-price {
							font-size: 15px;
							margin-right: 6px;
						}

						.goods-number {
							font-size: 12px;
						}
					}
				}
			}
		}

		.pay-info {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 20px 15px 16px 15px;
			font-size: 12px;
			font-family: PingFang SC;
			color: #333333;
			line-height: 16px;
			text-align: right;
		}

		.handle-box {
			width: calc(100% - 30px);
			float: left;
			margin: 0 15px;
			box-sizing: border-box;
			padding: 10px 0 0 0;
			border-top: 1px solid #EEEEEE;
			text-align: right;

			.handle-button {
				height: 30px;
				margin-left: 8px;
				margin-bottom: 10px;
				line-height: 28px;
				text-align: center;
				box-sizing: border-box;
				display: inline-block;
				border-radius: 15px;

				/deep/button {
					padding: 0 12px;
					border: 1px solid #BFBFBF !important;
					background-color: #FFFFFF !important;
					color: #333333 !important;
				}
			}
		}
	}

	/deep/.u-size-medium {
		padding: 0 12px;
	}

	/deep/.u-round-circle {
		padding: 0 12px;
	}

	.uni-popup-dialog {
		width: 80vw;
		border-radius: 15px;
		background-color: #fff;
		position: fixed;
		margin-left: 10vw;
		top: 34vh;
		z-index: 11;
		left: 0px;
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 5px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5px 15px 15px 15px;
		text-align: center;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6e6e6e;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		background: rgba(0, 0, 0, 0);
		border: none;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 0px;
	}

	.uni-dialog-button-text {
		font-size: 14px;
	}

	.uni-button-color {
		color: #007aff;
	}

	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}

	.qx_bg {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.25);
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
	}
</style>