RiyueGorge/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;">
					夕阳红康养团7日游
				</view>
				<view class="" style="font-size: 22rpx;margin: 20rpx 0;">
					出行日期：2022-04-25
				</view>
				<view class=""  style="font-size: 22rpx;">
					数量  1
				</view>
			</view>
			<view class="r">
				<image src="https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png" mode="widthFix"></image>
				<view class="" style="margin-top: 20rpx;">
					
					<text style="font-size: 22rpx;">订单金额</text><text style="font-size: 32rpx;font-weight: 600;">￥12121</text>
				</view>
			</view>
		</view>
		
		<view class="applyAfterSale-center">
			<u--form :model="form">
			<u-form-item label="退款原因" labelWidth=200 prop="userInfo.name" borderBottom ref="item1">
				<picker @change="bindPickerChange" :value="form.userInfo.name" :range="Array">
					<view class="" style="display: flex;">
						<u--input v-model="form.userInfo.name" 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="userInfo.amount" borderBottom ref="item1">
				<u--input v-model="form.userInfo.amount" border="none" placeholder="最多可退款￥1690" placeholderStyle="color: #555555"></u--input>
			</u-form-item>
			<u-form-item label="备注信息" labelWidth=200 prop="userInfo.mes" borderBottom ref="item1">
				<u--input v-model="form.userInfo.mes" border="none" placeholder="请输入备注" placeholderStyle="color: #555555"></u--input>
			</u-form-item>
			<u-form-item label="联系方式" labelWidth=200 prop="userInfo.number" borderBottom ref="item1">
				<u--input v-model="form.userInfo.number" border="none" placeholder="请输入联系方式" placeholderStyle="color: #555555"></u--input>
			</u-form-item>
			<view class="">
				<view class="" style="margin: 40rpx 0;">
					备注信息
				</view>
				<u--textarea v-model="value" placeholder="请输入退款原因" 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>
		
		<!-- 退款原因选择 -->
		<u-picker :show="show" :columns="columns" confirmColor="#1E9F6A"></u-picker>
		
		<!-- <view class="" style="margin-bottom: 144rpx;"></view> -->
		<view class="navbar">
			申请退款
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				value:'',
				fileList1: [],
				index:0,
				form:{
					userInfo:{
						name:"",
						amount:'',
						mes:"",
						number:''
					}
				},
				show: false,
				Array: ['个人', '产品', '其他'],
			}
		},
		methods:{
			// 选择yuany
			bindPickerChange(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
				// console.log(this.genderArray[e.detail.value])
			   this.form.userInfo.name=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) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</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: 140rpx;
			border-radius: 6rpx;
		}
		
	}
	.applyAfterSale-center{
		margin-top: 24rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 8rpx 8rpx 16rpx 56rpx;
		margin-bottom: 144rpx;
	}
	.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>