parking_h5/pages/applyRefund/applyRefund.vue

<template>
	<view class="apply-refund">
		<view class="apply-refund-form">
			<view class="apply-refund-form-item">
				<view class="apply-refund-form-label">
					退款金额：
				</view>
				<view class="apply-refund-form-content">
					<text class="money">{{Number(refundForm.refundAmount).toFixed(2)}}</text>元
				</view>
			</view>
			<view class="apply-refund-form-item">
				<view class="apply-refund-form-label">
					退款原因：
				</view>
				<view class="apply-refund-form-content full-width">
					<textarea v-model="refundForm.refundReason" maxlength="200" placeholder="请填写申请退款原因"
						:data-maxnum="refundForm.refundReason.length+'/200'" />
					<u-upload :header="{
							Authorization: 'Bearer ' + vuex_token
						}" max-count="3" ref="uUpload" :action="action"></u-upload>
				</view>
			</view>
		</view>
		<view class="apply-refund-form-submit">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
		<view class="refund-tips" v-if="refundTipsContent">
			<u-parse :html="refundTipsContent"></u-parse>
		</view>
		<u-mask :show="successPop" :zoom="true" :custom-style="{background: 'rgba(255, 255, 255, 0.8)'}">
			<view class="pop-warp">
				<view class="pop-warp-icon">
					<u-icon name="checkbox-mark" color="#fff" size="50"></u-icon>
				</view>
				<view class="pop-warp-tips">
					<text>提交成功！预计3-7个工作日内处理</text>
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		config
	} from '@/common/config.js'
	export default {
		data() {
			return {
				refundForm: {
					orderId: '',
					refundAmount: '',
					refundReason: '',
					images: []
				},
				action: config.baseUrl + '/file/tencent/upload',
				successPop: false,
				// 退款温馨提示
				refundTipsContent: ''
			}
		},
		computed: {
			...mapState(['vuex_token'])
		},
		onLoad(page) {
			this.refundForm.orderId = page.orderId
			this.refundForm.refundAmount = Number(page.payAmount)
			this.getSysterms(4)
		},
		methods: {
			submit() {
				let files = [];
				// 是否有未完成上传的图片标识
				let isHas = false
				this.$refs.uUpload.lists.forEach(item => {
					if (item.progress === 100 && item.response) {
						const url = item?.response?.data?.url
						if (url) {
							files.push(url)
						}
					} else {
						isHas = true
					}
				})
				this.refundForm.images = files
				if (this.refundForm.refundReason && !isHas) {
					this.$u.api.updateOrderRefund(this.refundForm)
						.then(res => {
							this.successPop = true
							if (res.code === 200) {
								setTimeout(() => {
									this.$u.route('pages/applyRefundDetails/applyRefundDetails', {
										orderId: this.refundForm.orderId
									})
								}, 2000)
							} else {
								this.successPop = false
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						})
						.catch(err => {
							this.$refs.uToast.show({
								title: '操作失败!',
								type: 'error'
							})
						})
				} else if (this.refundForm.refundReason == '') {
					this.$refs.uToast.show({
						title: '请填写申请退款原因',
						type: 'warning'
					})
				} else if (isHas) {
					this.$refs.uToast.show({
						title: '还有图片未完成上传,请稍等!',
						type: 'warning'
					})
				}
			},
			/**
			 * 获取收费标准
			 * */
			getSysterms(termsType) {
				this.$u.api.getSysterms({
						termsType: Number(termsType)
					})
					.then(res => {
						if (res.code === 200) {
							this.refundTipsContent = res.data?.content
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							})
						}
					})
					.catch(err => {
						this.$refs.uToast.show({
							title: '系统错误!',
							type: 'error',
						})
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './applyRefund.scss';
</style>