qjd-user-uniapp/pagesMain/orderItem.vue

<template>
	<view class="order-row" @click="goToOrderDetail()">
		<view class="shop-info" v-if="orderData" @click="gotoShop()">
			<text class="iconfont icondianpu"></text>
			<text class="shop-name">{{orderData.supplierName}}</text>
			<text class="iconfont iconfangxiang"></text>
			<text class="order-type">{{getOrderType(orderData.orderStatus)}}</text>
		</view>
		<view class="goods-list" v-if="orderData">
			<view class="goods-row" v-for="(site, index) in orderData.products" :key="index">
				<cover-image class="goods-img" :src="site.imgUrl"></cover-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 == 3" @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 == 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 && 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>
</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: ''
				}
			},
		},
		data() {
			return {
				modalShow: false,
				modalContent: '',
				handleType: '',
			}
		},
		onLoad() {},
		methods: {
			//  跳转商铺
			gotoShop() {
				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 '已取消'
				}
			},
			//  操作区分
			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) {
					//  自助采摘
					uni.navigateTo({
						url: '/pagesGood/pickVideo?orderId=' + this.orderData.orderId
					});
				} 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(',')
					});
				}
			},
			//  跳转订单详情
			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,
					}, 'POST').then(res => {
						this.modalShow = false
						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));
								uni.navigateTo({
									url: '/pagesMain/paySuccess'
								});
							},
							fail: (error) => {
								console.log('fail:' + JSON.stringify(error));
								this.$refs.uTips.show({
									title: '支付失败',
									type: 'warning',
								})
							}
						})
					}).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 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 {
				color: #333333 !important;
				border-color: #BFBFBF !important;
				background-color: #FFFFFF !important;
				padding: 0;
				margin-left: 8px;
				margin-bottom: 10px;
				height: 30px;
				line-height: 30px;
				display: inline-block;
			}
		}
	}

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

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