ryx/pages/order/applyAfterSale.vue

<template>
	<view class="">
		<view class="applyAfterSale-top">
			<view class="l">
				<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
					{{msg.good_name}}
				</view>
				<view class="" style="font-size: 22rpx;margin: 20rpx 0;">
					出行日期：{{msg.start_at}}
				</view>
				<view class="" style="font-size: 22rpx;">
					数量 {{msg.number}}
				</view>
			</view>
			<view class="r">
				<image :src="msg.cover_picture" mode="aspectFill"></image>
				<view class="" style="margin-top: 20rpx;">

					<text style="font-size: 22rpx;">订单金额</text><text
						style="font-size: 32rpx;font-weight: 600;padding-left: 10rpx;">￥{{msg.amount}}</text>
				</view>
			</view>
		</view>

		<view class="applyAfterSale-center">
			<u--form :model="form">
				<u-form-item label="退款原因" labelWidth=200 prop="info.reason" borderBottom ref="item1" :required="true">
					<picker @change="bindPickerChange" :value="info.reason" :range="Array">
						<view class="" style="display: flex;">
							<u--input v-model="info.reason" disabled disabledColor="#ffffff" border="none"
								placeholder="请输入退款原因" placeholderStyle="color: #555555"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</view>
					</picker>

				</u-form-item>
				<u-form-item label="退款金额" labelWidth=200 prop="info.amount" borderBottom ref="item1" :required="true">
					<u--input v-model="info.amount" border="none" :placeholder="'最多可退款'+msg.amount"
						placeholderStyle="color: #555555" type="digit"></u--input>
				</u-form-item>
				<!-- <u-form-item label="备注信息" labelWidth=200 prop="info.memo" borderBottom ref="item1">
					<u--input v-model="info.memo" border="none" placeholder="请输入备注" placeholderStyle="color: #555555">
					</u--input>
				</u-form-item> -->
				<u-form-item label="联系方式" labelWidth=200 prop="info.phone" borderBottom ref="item1" :required="true">
					<u--input v-model="info.phone" border="none" placeholder="请输入联系方式" placeholderStyle="color: #555555"
						type="number"></u--input>
				</u-form-item>
				<view class="">
					<view class="" style="margin: 40rpx 0;">
						备注信息
					</view>
					<u--textarea v-model="info.memo" placeholder="请输入退款原因" :customStyle="{'background':'#F4F4F4'}"
						placeholderStyle="color: #555555" height=160 border="none"></u--textarea>
				</view>

				<view class="" style="font-size: 36rpx;font-weight: 600;margin: 24rpx 0;">
					退款说明
				</view>
				<view class="" style="margin-bottom: 40rpx;">
					退款将退到原账户，请知悉！
				</view>
				<view class="applyAfterSale-footer">
					<view class="" style="margin: 20rpx 0;">
						上传凭证
					</view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="6" width="200rpx" height="200rpx"></u-upload>
				</view>
			</u--form>
		</view>
		<view style="margin-bottom: 170rpx;"></view>
		<!-- 退款原因选择 -->
		<u-picker :show="show" :columns="columns" confirmColor="#1E9F6A"></u-picker>

		<!-- <view class="" style="margin-bottom: 144rpx;"></view> -->
		<view class="navbar" @click="applyRefund">
			申请退款
		</view>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				msg: '',
				value: '',
				fileList1: [],
				index: 0,
				info: {
					reason: "",
					amount: '',
					phone: "",
					memo: ''
				},
				show: false,
				Array: ['个人', '产品', '其他'],
				photolist: []
			}
		},
		onLoad(o) {
			that = this
			if (o.obj) {
				let msg = JSON.parse(decodeURIComponent(o.obj))
				this.msg = msg
			}
		},
		methods: {
			// 选择yuany
			bindPickerChange(e) {
				this.info.reason = this.Array[e.detail.value]
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 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) {
				let token = uni.getStorageSync("token")
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://t38.9026.com/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							Authorization: `Bearer ${token}`
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							let pic = JSON.parse(res.data)
							this.photolist.push(pic.data.url)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			applyRefund() {
				if (!this.info.reason) {
					this.$toast("请选择退款原因")
					return
				}
				if (!this.info.amount) {
					this.$toast("请输入退款金额")
					return
				}
				if (!this.info.phone) {
					this.$toast("请输入手机号码")
					return
				}

				var pic = []
				this.fileList1.forEach(item => {
					pic.push(item.thumb)
				})
				this.info.picture = this.photolist
				this.info.order_id = this.msg.id
				let form = this.info
				uni.showLoading({})
				uni.$u.http.post('/api/refund/add', form, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					// uni.hideLoading()
					that.$toast("申请成功")
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/order/order"
						})
					}, 500)
				}).catch((err) => {
					uni.hideLoading()
					this.$toast(err.message)
				})
			},
		}
	}
</script>

<style lang="less">
	// .u-form-item__body.data-v-5e7216f1{
	// 	padding: 18px 0 !important;
	// }
	// .u-textarea.data-v-81cd9d32{
	// 	background-color:#F4F4F4 !important; 
	// }
	page {
		background-color: #F4F4F4;
		font-size: 32rpx;
	}

	.applyAfterSale-top {
		margin: 24rpx 0 0;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 4px 0px rgba(0, 0, 0, 0.02);
		border-radius: 16rpx 56rpx 8rpx 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.r {
			text-align: right;
		}

		image {
			width: 136rpx;
			height: 91rpx;
			border-radius: 6rpx;
		}

	}

	.applyAfterSale-center {
		margin-top: 24rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 8rpx 8rpx 16rpx 56rpx;
		padding-bottom: 40rpx;

	}

	.navbar {
		padding: 30rpx 0;
		text-align: center;
		background: #1E9F6A;
		color: #fff;
		bottom: 0;
		margin: 0 auto;
		left: 0;
		position: fixed;
		width: 100%;
		border-radius: 16rpx 16rpx 0px 0px;
	}
</style>