fangliaoxiaochengxv/subPages/afterSales/afterSales.vue

<template>
	<view class="common-page">
		<view class="content-box mt10">
			<!-- 已选商品 -->
			<view class="common-card-box">
				<view class="goods-list display-flex-center" v-for="(item, index) in goodsList" :key="index">
					<image
						style="width: 155rpx; height: 155rpx; border-radius: 10rpx;margin-right: 10rpx;flex-shrink: 0;"
						:src="item.goods_cover" mode="aspectFill">
					</image>
					<view>
						<view class="display-flex-between goods-name">
							<text>{{item.goods_name}}</text>
							<text>￥{{item.price_selling}}</text>
						</view>
						<view class="display-flex-between goods-number">
							<text class="gray-tag">{{item.goods_spec}}</text>
							<text>×{{item.stock_sales}}</text>
						</view>
					</view>
				</view>
				<view class="goods-total display-flex-center">
					<text class="fs13 color-4a mr10">共{{data.number_goods}}件商品</text>
				</view>
			</view>
			<!-- 运费信息 -->
			<view class="common-card ">
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">商品总价：</text>
					<text class="fw600 text-overflow-single">￥{{ data.amount_total}}</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">运费：</text>
					<text class="fw600 text-overflow-single">￥{{ data.amount_express}}</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">优惠券：</text>
					<text class="fw600 text-overflow-single">￥{{ data.coupon_price}}</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">使用积分：</text>
					<text class="fw600 text-overflow-single">0</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">{{[1, 2].includes(data.status) ? '需付款' : '实付'}}：</text>
					<text class="fw600 text-overflow-single">￥{{data.amount_real}}</text>
				</view>
				<view class="display-flex-between" v-if="!([1, 2].includes(data.status))">
					<text class="color-71 flex-shrink">支付方式：</text>
					<text class="fw600 text-overflow-single">微信</text>
				</view>
			</view>
			<!-- 留言 -->
			<view class="common-card">
				<view class="display-flex-between" @click="showReson = true">
					<view>
						<text class="fw700 mr20">退款原因</text>
						<text v-if="formData.refund_reason">{{formData.refund_reason}}</text>
						<text v-else class="color-c8">请选择原因</text>
					</view>
					<u-icon name="arrow-right" color="#C8C8C8" size="18"></u-icon>
				</view>
				<u-line color="#F4F4F4" margin="15px 0"></u-line>
				<view class="display-flex-between">
					<text class="fw700">退款金额</text>
					<text class="color-orange">￥{{data.payment_amount}}</text>
				</view>
				<u-line color="#F4F4F4" margin="15px 0"></u-line>
				<view>
					<view class="fw700 mb10">申请说明</view>
					<u--textarea height="110" v-model="formData.refund_explain" placeholder="100字以内" maxlength="100" count></u--textarea>
				</view>
			</view>
			<!-- 下单信息 -->
			<view class="common-card">
				<view class="fw700 mb10">
					上传凭证 <text class="color-c8 fw500">(最多三张)</text>
				</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"
					customStyle="margin:0 20rpx 20rpx 20rpx;">
				</u-upload>
			</view>
		</view>
		<view class="bottom-box display-flex-end" @click="submit">
			<text class="common-btn ml10">提交申请</text>
		</view>
	<!-- 取消订单原因 -->
	<AfterReson v-model="showReson" @confirm="cancelConfirm"></AfterReson>
	</view>
</template>

<script>
	import AfterReson from '@/components/AfterReson.vue'
	import {config} from '@/common/utils/config.js'
	export default {
		components: { AfterReson },
		data() {
			return {
				value1: '',
				fileList1: [],
				data: {},
				formData: {refund_reason: '', refund_explain: ''},
				goodsList: [],
				topData: {
					top: 0,
					height: 0
				},
				pageOptions: {},
				showReson: false,
			}
		},
		onLoad(options) {
			this.pageOptions = options
			this.getOrderDetail()
			// const mData = uni.getStorageSync('selectTaskData') || undefined
		},
		onShow() {
			const topData = uni.getMenuButtonBoundingClientRect()
			this.topData.top = topData.top
			this.topData.height = topData.height
			
		},
		methods: {
			submit() {
				if (!this.formData.refund_reason) {
					 uni.$u.toast("请选择退款原因");
					 return
				}
				if (!this.formData.refund_explain) {
					 uni.$u.toast("请输入申请说明");
					 return
				}
				if(!this.fileList1.length) {
					uni.$u.toast("请上传照片凭证");
					return
				}
				let sendData = {
					order_no: this.pageOptions.orderNo,
					refund_img: this.fileList1.map(item => item.url),
					...this.formData
				}
				this.$api.applyAfterSales(sendData).then(res => {
					uni.showToast({
						title: '申请成功'
					})
					uni.setStorageSync('orderIndex', 5)
					this.$nextTick(() => {
						uni.reLaunch({
							url: '/subPages/myOrder/myOrder'
						})
					})			
				})
			},
			getOrderDetail() {
				this.$api.orderDetail({order_no: this.pageOptions.orderNo}).then(res => {
					this.goodsList = res.data.items
					this.data = res.data
				})
			},
			cancelConfirm(data) {
				this.formData.refund_reason = data
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			}, // 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let token = uni.getStorageSync(`token`)
					let a = uni.uploadFile({
						url: this.$C.baseUrl + '/wechat/auth.files/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							"api-token": token,
							"api-type": 'wxapp',
						},
						success: (res) => {
							console.log(res);
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.url)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.common-page {
		height: 100vh;
		overflow-y: auto;
		// padding: 20rpx;
		color: #2C2C2C;
		padding-bottom: 188rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		::v-deep {
			.u-textarea {
				background: #FAFAFA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: none;
				padding: 18rpx;
		
				.u-textarea__count {
					background-color: transparent !important;
				}
			}
		}
	}
.success-con {
	padding: 0 50rpx 0 40rpx;
}
	
	.content-box {
		padding: 20rpx;
	}
	
	.navbar-box {
		position: relative;
	}

	.good-card {
		padding: 38rpx 22rpx;
		color: #7A7A7A;

		
	}

	.goods-list {
		margin: 0 30rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.goods-total {
		justify-content: flex-end;
		margin: 27rpx 20rpx;
	}
	
	
</style>