jzhw_uni/pages/ucenter/applyRefund/applyRefund.vue

<template>
	<view class="container">
		<!-- 商品信息 -->
		<view class="product-block">
			<view class="refund-title">退款商品</view>
			<view class="product-detail">
				<view class="profuct-info">
					<image mode="aspectFit" class="product-img" :src="orderInfo.picUrl"></image>
					<view class="info-right">
						<view class="info-main">
							<view class="product-name">{{ orderInfo.goodsName }}</view>
							<view class="price">
								¥
								<text style="font-size: 24rpx">{{ orderInfo.actualPrice }}</text>
							</view>
						</view>
						<view class="other-sku">规格：{{ orderInfo.skuName }}</view>
						<view class="other-info">服务{{ orderInfo.serviceTimes }}次</view>
					</view>
				</view>
			</view>
			<view class="real-price">
				实际付款：
				<text>¥{{ orderInfo.actualPrice }}</text>
			</view>
		</view>
		<view class="card">
			<view class="refund-title">退款信息</view>
			<view class="tt-cell">
				<view>退款金额</view>
				<view class="refund-price">￥{{ aftersale.amount }}</view>
			</view>
			<view class="tt-cell" @tap="showReason">
				<view style="width: 150rpx">
					<text class="need">*</text>
					退款原因
				</view>
				<view class="cell-right default" v-if="reasonActive.id == ''">请选择</view>
				<view class="cell-right" v-else>{{ reasonActive.name }}</view>
				<view class="arrow-wrapper">
					<image src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png" mode="aspectFit"
						class="arrow-img"></image>
				</view>
			</view>

			<!-- </picker> -->

			<view class="tt-cell">
				<view style="width: 150rpx">
					<text class="need">*</text>
					补充描述
				</view>
				<input :value="aftersale.reason" placeholder="补充描述，有助于更好的处理售后问题。"
					placeholder-style="font-size:24rpx;color:#ACADB1;" @input="onReasonChange" />
			</view>

			<view class="upload-text">上传凭证</view>
			<view class="comment-tips">最多上传3张</view>
			<!-- 图片上传 -->
			<view class="upload-wrapper">
				<view class="img-item" v-for="(item, index) in imgList" :key="index">
					<image mode="aspectFill" :src="item" class="user-upload" @tap="previewImg" :data-img="item"></image>

					<image class="close-img" mode="aspectFill" src="/static/images/icon-close.png" @tap="delImg"
						:data-index="index"></image>
				</view>
				<view class="upload" @tap="uploadImg">
					<image mode="aspectFill" src="/static/images/icon-add.png"></image>
					<view>上传照片</view>
				</view>
			</view>
		</view>

		<view class="submit-btn" @tap="submit">申请退款</view>

		<!-- 备注退款原因 -->
		<view class="appoint-overlay-wrapper remark-overlay" v-if="reasonPopupShow" @tap="onReasonPopupClose">
			<view class="remark-select" @tap.stop.prevent="onReasonClick">
				<view class="title">选择退款原因</view>
				<view class="remark-list">
					<view class="remark-item" :data-reason="item" @tap.stop.prevent="reasonItemSelect"
						v-for="(item, index) in reasonList" :key="index">
						<view class="remark-value">{{ item.name }}</view>

						<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-huawang/dian2.png"
							class="radio-img" v-if="reasonActive.id == item.id"></image>

						<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-huawang/dian1.png"
							class="radio-img" v-else></image>
					</view>
				</view>
				<view class="remark-conf-btn" @tap.stop.prevent="reasonItemConfirm">确定</view>
			</view>
		</view>

		<van-overlay :show="showOverLay" @click="onClickHide" z-index=999 root-portal='true'>
			<view class="wrapper"
				style="width: 652rpx;height: 627rpx;background-color:#fff;position: absolute;top: 400rpx;left: 49rpx;border-radius: 16rpx;">
				<view class="title-icon"
					style="padding: 30rpx 220rpx;   height: 255rpx; background: #d77958; border-radius: 16rpx 16rpx 0 0;     background: url('https://mall.zhaijieshi.cc/file/wx-huawang/bj3.png') no-repeat; background-size: contain;" >
					<image src="https://mall.zhaijieshi.cc/file/wx-huawang/qq.png" mode=""
						style="height:178rpx;width: 236rpx;"></image>
				</view>
				<text class="tips-content" style="font-weight: bold;font-size: 33rpx;display: block;width: 574rpx;text-align: center;margin: 58rpx 0 30rpx 30rpx;
				">
					{{showErrorMsg}}
				</text>
				<text style="color: #999;display: block;margin-left: 200rpx;font-size: 22rpx;">如需帮助，请联系在线客服</text>
				<view class="btn-service" @tap="toService"
					style="margin-left: 105rpx;  border-radius: 55rpx;  color: #d77958;border: #d77958 1rpx solid;width: 438rpx ;height: 82rpx; line-height: 82rpx;text-align: center;font-size: 29rpx;">
					在线客服
				</view>
			</view>
		</van-overlay>


	</view>
</template>

<script>
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	export default {
		data() {
			return {
				index: '',
				orderId: 0,

				orderInfo: {
					picUrl: '',
					goodsName: '',
					actualPrice: '',
					serviceTimes: '',
					skuName: ''
				},

				orderGoods: [],

				aftersale: {
					pictures: [],
					typeDesc: '',
					reason: '',
					amount: '',
					comment: '',
					type: ''
				},

				reasonActive: {
					id: '',
					name: ''
				},

				reasonPopupShow: false,
				reasonList: [],
				columns: ['地址约错', '约不到想要的服务时间', '活动/优惠未享受', '服务质量问题'],
				contentLength: 0,
				fileList: [],
				imgList: [],
				showPicker: false,
				showOverLay: false,
				showErrorMsg: ''
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			this.setData({
				orderId: options.id
			});
			this.getOrderDetail();
			this.getRefudnType();
			this.getAmount();
		},
		onReady: function() {
			// 页面渲染完成
		},
		onShow: function() {
			// 页面显示
		},
		onHide: function() {
			// 页面隐藏
		},
		onUnload: function() {
			// 页面关闭
		},
		methods: {
			onClickHide() {
				this.setData({
					showOverLay: false
				})
			},
			getRefudnType() {
				let that = this;
				util.request(api.AftersaleRefundType).then(function(res) {
					if (res.errno === 0) {
						that.setData({
							reasonList: res.data,
							columns: res.data.map((obj) => obj.name)
						});
						console.info(that.refundTypes);
					}
				});
			},

			getAmount: function() {
				util.request(api.AftersaleAmount, {
					orderId: this.orderId
				}).then((res) => {
					if (res.errno === 0) {
						console.log(res.data);
						this.setData({
							'aftersale.amount': res.data.refundAmount
						});
					}
				});
			},

			getOrderDetail: function() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				let that = this;
				util.request(api.OrderDetail, {
					orderId: that.orderId
				}).then(function(res) {
					if (res.errno === 0) {
						console.log("商品信息", res.data);
						that.setData({
							orderInfo: res.data
						});
					}
					uni.hideLoading();
				});
			},

			deleteImage(event) {
				const {
					fileList = []
				} = this;
				fileList.splice(event.detail.index, 1);
				this.setData({
					fileList: fileList
				});
				let urls = [];
				fileList.forEach(function(e) {
					urls.push(e.url);
				});
				this.setData({
					'aftersale.pictures': urls
				});
			},

			afterRead(event) {
				const {
					file
				} = event.detail;
				let that = this;
				const uploadTask = uni.uploadFile({
					url: api.StorageUpload,
					filePath: file.path,
					name: 'file',
					success: function(res) {
						var _res = JSON.parse(res.data);
						if (_res.errno === 0) {
							var url = _res.data.url;
							that.aftersale.pictures.push(url);
							const {
								fileList = []
							} = that;
							fileList.push({
								...file,
								url: url
							});
							that.setData({
								fileList: fileList
							});
						}
					},
					fail: function(e) {
						uni.showModal({
							title: '错误',
							content: '上传失败',
							showCancel: false
						});
					}
				});
			},

			previewImage: function(e) {
				uni.previewImage({
					current: e.currentTarget.id,
					// 当前显示图片的http链接
					urls: this.files // 需要预览的图片http链接列表
				});
			},

			contentInput: function(e) {
				this.setData({
					contentLength: e.detail.cursor,
					'aftersale.comment': e.detail.value
				});
			},

			onReasonChange: function(e) {
				console.log(e);
				this.setData({
					'aftersale.reason': e.detail.value
				});
			},

			onCommentChange: function(e) {
				console.log(e);
				this.setData({
					'aftersale.comment': e.detail.value
				});
			},

			showTypePicker: function() {
				this.setData({
					showPicker: true
				});
			},

			onCancel: function() {
				this.setData({
					showPicker: false
				});
			},

			bindPickerChange: function(event) {
				console.log(event);
				this.setData({
					'aftersale.type': event.detail.value,
					'aftersale.typeDesc': this.columns[event.detail.value]
				});
			},

			submit: function() {
				let that = this;
				if (that.reasonActive.id == '') {
					util.showErrorToast('请选择退款原因');
					return false;
				}
				if (that.aftersale.reason == '') {
					util.showErrorToast('请填写补充描述');
					return false;
				}
				// uni.showLoading({
				// 	title: '提交中...',
				// 	mask: true,
				// 	success: function() {}
				// });

				let params = {
					orderId: this.orderId,
					pictures: this.imgList,
					type: this.reasonActive.id,
					typeDesc: this.reasonActive.name,
					reason: this.aftersale.reason,
					amount: this.aftersale.amount
				};
				util.request(api.AftersaleSubmit, params, 'POST').then(function(res) {
					// uni.hideLoading();
					if (res.errno === 0) {
						uni.showToast({
							title: '退款申请成功，请留意原支付账户!',
							icon: 'none'
						});
						setTimeout(function() {
							uni.hideToast()
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					} else {
						that.setData({
							showOverLay: true,
							showErrorMsg: res.errmsg
						})
					}
				});
			},

			previewImg(e) {
				let img = e.currentTarget.dataset.img;
				let imgs = this.imgList;
				uni.previewImage({
					current: img,
					// 当前显示图片的http链接
					urls: imgs // 需要预览的图片http链接列表
				});
			},

			delImg(e) {
				let imgs = this.imgList;
				let index = e.currentTarget.dataset.index;
				imgs.splice(index, 1);
				this.setData({
					imgList: imgs
				});
			},

			uploadImg() {
				if (this.imgList.length >= 3) {
					uni.showToast({
						title: '最多上传3张图片',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				let that = this;
				let count = 3 - that.imgList.length;
				uni.chooseImage({
					count: count,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log(res);
						let tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '上传中...'
						});
						for (let i = 0; i < tempFilePaths.length; i++) {
							let imgs = that.imgList;
							if (imgs.length >= 3) {
								that.setData({
									imgList: imgs
								});
								return false;
							} else {
								uni.uploadFile({
									url: api.StorageUpload,
									filePath: tempFilePaths[i],
									name: 'file',
									success(res) {
										console.log(res);
										let data = JSON.parse(res.data);
										if (data.errno == 0) {
											imgs.push(data.data.url);
											that.setData({
												imgList: imgs
											});
										} else {
											console.log('上传失败');
										}
									}
								});
							}
						}
						uni.hideLoading();
					}
				});
			},

			showReason() {
				this.setData({
					reasonPopupShow: true
				});
			},

			onReasonPopupClose() {
				this.setData({
					reasonPopupShow: false
				});
			},

			onReasonClick() {
				//阻止事件冒泡，不要删
			},

			reasonItemSelect(e) {
				let reason = e.currentTarget.dataset.reason;
				this.setData({
					reasonActive: reason
				});
			},

			reasonItemConfirm() {
				if (this.reasonActive.id === '') {
					util.showErrorToast('请选择退款原因');
					return false;
				}
				this.setData({
					reasonPopupShow: false
				});
			},
			toService() {
				uni.navigateTo({
					url: "/pages/im/im"
				})
			}
		}
	};
</script>
<style>
	page {
		/* height: 100%; */
		width: 100%;
		background: #f4f4f4;
		padding: 0 0 80rpx;
	}

	.container {
		padding: 0 30rpx;
	}

	.order-goods {
		margin-top: 30rpx;
		background: #fff;
		border-radius: 10rpx;
		width: 690rpx;
		padding: 30rpx 20rpx;
	}

	.order-goods .h {
		height: 30rpx;
		line-height: 30rpx;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.order-goods .h .label {
		float: left;
		font-size: 30rpx;
		color: #333;
	}

	.order-goods .h .status {
		float: right;
		font-size: 30rpx;
		color: #b4282d;
	}

	.order-goods .item {
		display: flex;
		align-items: center;
		height: 190rpx;
	}

	.order-goods .item:last-child {
		border-bottom: none;
	}

	.order-goods .item .img {
		height: 190rpx;
		width: 190rpx;
		background: #f4f4f4;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.order-goods .item .img image {
		height: 190rpx;
		border-radius: 10rpx;
		width: 190rpx;
	}

	.order-goods .item .info {
		flex: 1;
		height: 190rpx;
	}

	.order-goods .item .t {
		margin-top: 10rpx;
		/* height: 33rpx; */
		line-height: 34rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.order-goods .item .t .name {
		max-height: 68rpx;
		line-height: 34rpx;
		color: #333;
		font-size: 30rpx;
		width: 360rpx;
		margin-right: 40rpx;
		/* text-overflow: ellipsis;
   white-space: nowrap;*/
		overflow: hidden;
	}

	.order-goods .item .t .number {
		line-height: 36rpx;
		color: #666;
		font-size: 26rpx;
	}

	.order-goods .item .attr {
		height: 26rpx;
		line-height: 26rpx;
		color: #666;
		font-size: 26rpx;
	}

	.order-goods .item .price {
		height: 26rpx;
		line-height: 26rpx;
		color: #666;
		font-size: 26rpx;
		margin-top: 16rpx;
	}

	.module-title {
		height: 80rpx;
		padding: 0 8rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333;
		border-bottom: 1rpx solid #efefef;
	}

	.tt-cell {
		display: flex;
		/* padding:0 4rpx 0 8rpx; */
		align-items: flex-end;
		justify-content: space-between;
		background: #fff;
		height: 78rpx;
		padding-bottom: 12rpx;
		/* border-bottom:2rpx solid #ebedf0; */
	}

	.tt-cell view {
		font-size: 26rpx;
		color: #191919;
		font-weight: bold;
	}

	.tt-cell view.cell-right {
		font-family: normal;
		flex: 1;
		border-bottom: 2rpx solid #e0e0e0;
		padding-bottom: 8rpx;
	}

	.arrow-wrapper {
		border-bottom: 2rpx solid #e0e0e0;
		height: 40rpx;
	}

	.arrow-img {
		width: 28rpx;
		height: 28rpx;
	}

	.tt-cell view.cell-right.default {
		color: #acadb1;
		font-size: 24rpx;
		font-weight: normal;
	}

	.tt-cell input {
		flex: 1;
		border-bottom: 2rpx solid #e0e0e0;
	}

	.need {
		color: red;
	}

	.tt-cell.comment-cell {
		border: none;
	}

	.tt-cell.comment-cell view {
		padding-left: 14rpx;
	}

	.comment-tips {
		/* padding-left:22rpx; */
		height: 50rpx;
		line-height: 30rpx;
		color: #777;
		font-size: 20rpx;
		background: #fff;
	}

	.submit-btn {
		text-align: center;
		color: #fff;
		margin: 120rpx 26rpx 60rpx;
		width: 650rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #d77958;
		border-radius: 90rpx;
		font-size: 34rpx;
	}

	.upload-text {
		height: 88rpx;
		line-height: 88rpx;
		/* padding-left:22rpx; */
		background: #fff;
		font-size: 26rpx;
		color: #191919;
		font-weight: bold;
	}

	.upload-wrapper {
		/* margin:18rpx -20rpx 56rpx 0; */
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		padding: 0 24rpx 40rpx 0;
	}

	.upload {
		width: 160rpx;
		height: 160rpx;
		background: #fafafa;
		border-radius: 4rpx;
		border: 1rpx solid #d9d9d9;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-right: 16rpx;
		box-sizing: border-box;
	}

	.upload image {
		width: 38rpx;
		height: 38rpx;
		margin-bottom: 22rpx;
	}

	.upload view {
		font-weight: 400;
		color: #c5c3c3;
		line-height: 48rpx;
		font-size: 26rpx;
	}

	.img-item {
		width: 160rpx;
		height: 160rpx;
		background: #fff;
		border-radius: 2rpx;
		border: 1rpx solid #d9d9d9;
		margin: 0 20rpx 24rpx 0;
		padding: 8rpx;
		position: relative;
		box-sizing: border-box;
	}

	.img-item .user-upload {
		width: 144rpx;
		height: 144rpx;
	}

	.img-item .close-img {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.refund-tips {
		color: #ee0a24;
		font-size: 22rpx;
		line-height: 40rpx;
		padding-left: 8rpx;
		margin: 4rpx 0 8rpx;
	}

	.card {
		background: #fff;
		border-radius: 24rpx;
		padding: 30rpx 24rpx;
	}

	.tt-cell input {
		flex: 1;
		font-size: 26rpx;
		color: #666;
	}

	/* 产品订单信息 */
	.product-block {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 24rpx;
		margin: 28rpx 0 30rpx;
	}

	.product-block .title {
		height: 88rpx;
		line-height: 78rpx;
	}

	.profuct-info {
		height: 190rpx;
		display: flex;
		align-items: flex-start;
	}

	.product-img {
		width: 190rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.info-right {
		/* padding-top: 10rpx; */
		flex: 1;
	}

	.info-main {
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
	}

	.product-name {
		line-height: 40rpx;
		font-size: 28rpx;
		/* padding-left: 20rpx;
    text-indent: -16rpx; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 328rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.9);
	}

	.info-main .price {
		color: rgba(0, 0, 0, 0.9);
		font-size: 18rpx;
		font-weight: bold;
	}

	.info-right .other-info {
		font-size: 22rpx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 34rpx;
		font-weight: bold;
	}

	.refund-title {
		color: #191919;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 28rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.real-price {
		display: flex;
		align-items: center;
		height: 36rpx;
		justify-content: flex-end;
		font-size: 26rpx;
		font-weight: bold;
		margin: 20rpx 0 12rpx;
	}

	.real-price text {
		color: #ff004e;
		font-size: 26rpx;
	}

	.tt-cell view.refund-price {
		color: #ff004e;
	}

	/* 选择备注 */
	.appoint-overlay-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
	}

	.appoint-overlay-wrapper.remark-overlay {
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.remark-select {
		width: 750rpx;
		padding: 0 24rpx 56rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
	}

	.remark-select .title {
		font-weight: 600;
		color: #191919;
		font-size: 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-bottom: 2rpx solid #e0e0e0;
	}

	.remark-list {
		height: 340rpx;
		overflow-y: scroll;
	}

	.remark-item .remark-value {
		color: #191919;
		font-size: 26rpx;
		font-weight: bold;
		flex: 1;
		text-align: left;
	}

	.remark-list .remark-item {
		height: 84rpx;
		display: flex;
		border-bottom: 2rpx solid #e0e0e0;
		align-items: center;
	}

	.remark-item .radio-img {
		width: 26rpx;
		height: 26rpx;
	}

	.remark-conf-btn {
		width: 652rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 90rpx;
		border: 4rpx solid #d77958;
		text-align: center;
		font-size: 36rpx;
		color: #d77958;
		margin: 0 auto;
		margin-top: 54rpx;
	}

	.other-sku {
		color: #999;
		font-size: 22rpx;
		margin-bottom: 25rpx;
	}
</style>