jinNiucourseMall_uniapp/pages_user/user/refundOrder.vue

<template>
	<view class="content">
		<view class="inner">
			<!-- 药品列表 -->
			<view class="drug-list">
				<view class="item">
					<!-- 药品信息 -->
					<!-- <view v-if="order!=null&&order.isPackage!=1" class="drug-info" v-for="(item,index) in items" :key="index"> -->
					<view class="drug-info" v-for="(item,index) in items" :key="index">
						<view class="img-box">
							<image :src="JSON.parse(item.jsonInfo).image" mode="aspectFit"></image>
						</view>
						<view class="info">
							<view class="top">
								<view class="title ellipsis2">{{ JSON.parse(item.jsonInfo).productName}}</view>
								<view class="spec">{{JSON.parse(item.jsonInfo).sku}}</view>
							</view>
							<view class="price-num">
								<view class="price-box">
									<text class="unit">¥</text>
									<text class="price">{{JSON.parse(item.jsonInfo).price.toFixed(2)}}</text>
								</view>
								<view class="num">x{{item.num}}</view>
							</view>
						</view>
					</view>
					<view v-if="order!=null&&order.isPackage==1&&packageJson!=null" class="drug-info">
						<view class="img-box">
							<image :src="packageJson.imgUrl" mode="aspectFit"></image>
						</view>
						<view class="info">
							<view class="top">
								<view class="title ellipsis2">
									<view class="tag">套餐</view>{{packageJson.title}}
								</view>
								<view class="spec">{{packageJson.descs}}</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 申请原因 -->
			<view class="reason-apply">
				<view class="title-box">
					<text class="label">退款金额</text>
					<input class="money" type="text" disabled v-model="refundAmount" placeholder="退款金额"
						placeholder-class="form-input" />
				</view>
				<view class="title-box">
					<text class="label">申请原因</text>
					<picker @change="reasonsChange" :value="reasons" range-key="dictLabel" :range="reasonsList">
						<view class="chose-box">
							<text class="text">{{reasons}}</text>
							<image src="https://kntobs.jnmyunl.com/shop/images/arrow_gray.png" mode=""></image>
						</view>
					</picker>
				</view>
				<view class="textarea-box">
					<textarea v-model="explains" placeholder="请描述申请售后服务的具体原因" placeholder-class="textarea-place" />
				</view>
			</view>
			<!-- 退回方式 -->
			<!-- <view class="return-method">
				<view class="title-box">
					<text class="text">退货方式</text>
					<text class="text">用户发货</text>
				</view>
				<view class="return-tips">
					<text class="text">请您在审核通过后7天内，将商品发货到指定点</text>
				</view>
				<view class="info-item">
					<text class="label">联系人</text>
					<text class="text">张三 1572325612</text>
				</view>
				<view class="info-item">
					<text class="label">发货地址</text>
					<text class="text">重庆市江北区建玛特商场5楼</text>
				</view>
			</view> -->
			<!-- 底部按钮 -->
			<view class="btn-box">
				<view class="sub-btn" @click="submit()">申请售后</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		applyAfterSales,
		getMyStoreOrderItemByOrderId
	} from '@/api/storeAfterSales'
	export default {

		data() {
			return {
				packageJson:null,
				orderId: null,
				order: null,
				orderCode: null,
				items: [],
				type: null,
				reasonsList: [],
				reasons: "请选择",
				explains: "",
				orderitems: null
				// refundAmount:0.00,
			}
		},
		onLoad(option) {
			console.log(option);
			this.type = option.type;
			this.orderCode = option.orderCode;
			this.items = uni.getStorageSync('refundItems')
			const isPackage = option.isPackage || 0
			this.reasonsList = this.utils.getDict("storeAfterSalesReasons");
			this.orderId = option.orderId;
			
			if (isPackage == 1) {
				this.getMyStoreOrderItemByOrderId()
			}
		},
		computed: {
			refundAmount() {
				if(this.order&&this.order.isPackage ==1) {
					// return this.order.payMoney.toFixed(2)
					if (this.order.isPayRemain == 0) {
						return this.order.payMoney.toFixed(2)
					} else {
						return this.order.payPrice.toFixed(2)
					}
				} else {
					const counts = this.items.map(item => {
						return {
							...item,
							price: JSON.parse(item.jsonInfo).price * item.num
						}
					});
					const count = counts.reduce((accumulator, item) => accumulator + item.price, 0);
					return count
				}
			}
		},
		methods: {
			getMyStoreOrderItemByOrderId() {
				var data = {
					orderId: this.orderId
				};
				getMyStoreOrderItemByOrderId(data).then(res => {
					if (res.code == 200) {
						this.order = res.order;
						this.orderitems = res.items
						this.packageJson = this.order&&this.order.isPackage ==1 ? JSON.parse(this.order.packageJson): null
					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败",
						});

					}
				});
			},
			reasonsChange(e) {
				console.log(e.detail.value)
				this.reasons = this.reasonsList[e.detail.value].dictLabel
			},
			submit() {
				if (this.reasons == "请选择") {
					uni.showToast({
						icon: 'none',
						title: '请选择原因'
					});
					return;
				}
				if (this.refundAmount < 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入退款金额'
					});
					return;
				}
				const items = this.order&&this.order.isPackage ==1 ? this.orderitems : this.items
				var productIds = items.map(item => item.productId);
				var nums = items.map(item => item.num);
				var products = [];
				for (var i = 0; i < productIds.length; i++) {
					var item = {
						productId: productIds[i],
						num: nums[i]
					};
					products.push(item);
				}
				var data = {
					refundAmount: this.refundAmount,
					orderCode: this.orderCode,
					serviceType: this.type,
					reasons: this.reasons,
					explains: this.explains,
					productList: products
				};
				applyAfterSales(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '提交成功'
						});
						setTimeout(function() {
							uni.$emit('refreshOrder');
							uni.navigateBack({
								delta: 1
							})
						}, 500);

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});

					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		margin-bottom: 170upx;

		.inner {
			padding: 20upx;

			.drug-list {
				.item {
					background: #FFFFFF;
					border-radius: 16upx;
					margin-bottom: 20upx;
					padding: 0 30upx;

					.drug-info {
						display: flex;
						align-items: center;
						padding: 30upx 0;

						.img-box {
							width: 160upx;
							height: 160upx;
							margin-right: 30upx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.info {
							width: calc(100% - 160upx);
							height: 160upx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.top {
								.title {
									font-size: 28upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 1.4;

									.tag {
										display: inline-block;
										padding: 0 6upx;
										height: 30upx;
										background: linear-gradient(90deg, #66b2ef 0%, #2BC7B9 100%);
										border-radius: 4upx;
										margin-right: 10upx;
										font-size: 22upx;
										font-family: PingFang SC;
										font-weight: bold;
										color: #FFFFFF;
										line-height: 30upx;
										float: left;
										margin-top: 7upx;
									}
								}

								.spec {
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #999999;
									line-height: 1;
									margin-top: 14upx;
								}
							}

							.price-num {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.price-box {
									display: flex;
									align-items: flex-end;

									.unit {
										font-size: 24upx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #111111;
										line-height: 1.2;
										margin-right: 5upx;
									}

									.price {
										font-size: 32upx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #111111;
										line-height: 1;
									}
								}

								.num {
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #666666;
								}
							}
						}
					}

				}
			}

			.reason-apply {
				margin-top: 20upx;
				background: #FFFFFF;
				border-radius: 16upx;
				padding: 0 30upx;

				.title-box {
					height: 86upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F0F0F0;

					.label {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.money {

						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}

					.chose-box {
						display: flex;
						align-items: center;

						.text {
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
						}

						image {
							width: 14upx;
							height: 24upx;
							margin-left: 10upx;
						}
					}
				}

				.textarea-box {
					padding: 30upx 0;

					textarea {
						width: 100%;
						box-sizing: border-box;
						background: #F5F5F5;
						border-radius: 16upx;
						padding: 30upx 20upx;
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
					}

					.textarea-place {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.return-method {
				background: #FFFFFF;
				border-radius: 16upx;
				margin-top: 20upx;
				padding: 0 30upx 40upx;

				.title-box {
					height: 86upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F0F0F0;

					.text {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.return-tips {
					margin-top: 30upx;
					margin-bottom: 30upx;
					height: 80upx;
					background: #FFF4E6;
					border-radius: 16upx;
					padding: 0 20upx;
					display: flex;
					align-items: center;

					.text {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #EF8A07;
					}
				}

				.info-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 40upx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 1;
					}

					.text {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 1;
					}

					.detail-box {
						display: flex;
						align-items: center;

						.price-box {
							display: flex;
							align-items: flex-end;
							margin-right: 18upx;

							.unit {
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 1.2;
							}

							.num {
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #111111;
								line-height: 1;
							}
						}

						.det-text {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
						}

						image {
							width: 14upx;
							height: 24upx;
							margin-left: 10upx;
						}
					}
				}
			}
		}

		.reson-box {
			padding: 0 10upx 60upx;

			.reson-item {
				width: 100%;
				height: 110upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
				}
			}
		}
	}

	.btn-box {
		height: 120upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.sub-btn {
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #2BC7B9;
			border-radius: 44upx;
		}
	}

	input {
		text-align: right;
	}

	.form-input {
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text-align: right;
	}
</style>