cbz/page_shop/pages/order/apply.vue

<template>
	<view class="content vflex jbetween">
		<view>
			<view class="box">
				<view class="title">退款商品</view>
				<view class="hflex acenter ">
					<image :src="pageData.src" mode="aspectFill" class="img"></image>
					<view class="img_right">
						<view class="hflex acenter jbetween">
							<view class="item_name text_hide" style="width: 374rpx;">{{pageData.name}}</view>
							<view class="item_name">￥{{pageData.price}}</view>
						</view>
						<view class="hflex jbetween" style="padding: 20rpx 0 0;">
							<view class="norm">{{pageData.norm}}</view>
							<view class="left_text">X{{pageData.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="title">选择退款类型</view>
				<view class="hflex acenter">
					<block v-for="(item,index) in typeList" :key="index">
						<view class="hflex acenter" style="padding-right: 80rpx;" @click="selectType(index)">
							<image :src="active_type == index ? item.icon1 : item.icon2" class="select_img"></image>
							<view class="select_text">{{item.name}}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="box">
				<view class="title">退款信息</view>
				<view class="hflex acenter jbetween cell" @click="selectState" v-if="active_type == 0">
					<view class="left">货物状态</view>
					<u-input v-model="state" inputAlign="right" disabled disabledColor="#fff" placeholder="请选择货物状态>" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell" @click="selectReason">
					<view class="left">退款原因</view>
					<u-input v-model="reason" inputAlign="right" disabled disabledColor="#fff" placeholder="请选择退款原因>" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">退款金额</view>
					<view class="right">￥{{money}}</view>
				</view>
			</view>
			<view class="box" v-if="active_type == 1">
				<view class="hflex acenter jbetween">
					<view class="left" style="font-size: 30rpx;font-weight: 500;">退货方式</view>
					<view class="left">自行寄回</view>
				</view>
			</view>
			<view class="box">
				<view class="title">补充描述和凭证</view>
				<view class="bg">
					<u-textarea autoHeight  v-model="remarks" placeholder="补充描述,便于商家更好的处理售后问题" border="none"></u-textarea>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9" width="132rpx" height="132rpx">
						<view class="upload vflex acenter jcenter">
							<u-icon name="camera" color="#B5B5B5" size="18"></u-icon>
							<view class="text">上传凭证</view>
						</view>
					</u-upload>
				</view>
			</view>
			<u-popup :show="show" :round="20" :closeable="true" mode="bottom" @close="close">
				<view class="popu">
					<view class="popu_title">退款原因</view>
					<view class="text_style2">请选择退款的原因（必选）</view>
					<u-radio-group v-model="reason" placement="column">
						<block v-for="(item, index) in cancelList" :key="index" >
							<u-radio :name="item.name" @change="radioChange" :customStyle="{padding: '28rpx 0'}" :label="item.name"></u-radio>
						</block>
					</u-radio-group>
					<view class="sure_btn" @click="sure">确定</view>
				</view>
			</u-popup>
		</view>
		<view class="btn" @click="applyRefund">申请退款</view>
		<u-popup :show="state_show" :round="20" :closeable="true" mode="bottom" @close="close">
			<view class="popu">
				<view class="popu_title">货物状态</view>
				<u-radio-group v-model="state" placement="column">
					<block v-for="(item, index) in stateList" :key="index" >
						<u-radio :name="item.name" @change="radioChange2" :customStyle="{padding: '28rpx 0'}" :label="item.name"></u-radio>
					</block>
				</u-radio-group>
				<view class="sure_btn" style="margin: 80rpx 0 20rpx;" @click="sure2">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageData: {
					src: '/static/images/index/class_img3.png',
					name: '扬子柴油发电机3kw/5kw…',
					price: '29.90',
					num: '1',
					remarks: '',
					norm: '规格类型:3kw单相手启动;颜色:黑色;配置:128G',
				},
				reason: '',
				state: '',
				money: '89.00',
				cancelList: [
					{
						name: '商品无货'
					},
					{
						name: '发货时间问题'
					},
					{
						name: '不想要了'
					},
					{
						name: '商品错选/多选'
					},
					{
						name: '地址信息填写错误'
					},
					{
						name: '其他原因'
					}
				],
				typeList: [
					{
						name: '仅退款',
						icon1: '/static/images/comment/select2.png',
						icon2: '/static/images/comment/select1.png',
					},
					{
						name: '退货退款',
						icon1: '/static/images/comment/select2.png',
						icon2: '/static/images/comment/select1.png',
					}
				],
				stateList: [
					{
						name: '未收到货'
					},
					{
						name: '已收到货'
					}
				],
				active_type: 0,
				show: false,
				fileList1: [],
				active: 0,
				state_show: false
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			selectType(index) {
				that.active_type = index
			},
			// 选择退款原因
			selectReason() {
				that.show = true
			},
			selectState() {
				that.state_show = true
			},
			// 关闭
			close() {
				that.show = false
				that.state_show = false
			},
			radioChange(e) {
				console.log(e);
				that.reason = e
			},
			radioChange2(e) {
				that.state = e
			},
			// 确定
			sure() {
				if(that.reason !== '') {
					that.close()
				} else {
					$api.info('请先选择原因')
				}
			},
			sure2() {
				if(that.state !== '') {
					that.close()
				} else {
					$api.info('请先选择状态')
				}
				
			},
			applyRefund() {
				$api.jump('/page_shop/pages/order/refundDetail')
			},
			// 删除图片
			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 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="scss" scoped>
	.content::v-deep {
		background: #F4F4F4;
		padding: 0 30rpx;
		.box {
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 12px;
			box-sizing: border-box;
			padding: 28rpx 20rpx;
			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				padding-bottom: 28rpx;
			}
			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
			}
			.img_right {
				width:calc(100% - 160rpx);
				padding-left: 20rpx;
				.item_name {
					font-size: 30rpx;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}
				.norm {
					width: 288rpx;
					// height: 42px;
					background: #F5F5F5;
					border-radius: 12rpx;
					box-sizing: border-box;
					padding: 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #888888;
					line-height: 28rpx;
				}
				
			}
			.cell {
				padding: 16rpx 0 30rpx;
				.left {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
				.right {
					font-size: 24rpx;
					font-weight: bold;
					color: #EE5850;
					line-height: 28rpx;
				}
			}
			.bg {
				width: 100%;
				background: #F4F4F4;
				border-radius: 24rpx;
				// padding: 20rpx;
				box-sizing: border-box;
				.u-textarea {
					background-color: #F4F4F4;
				}
				.upload {
					width: 132rpx;
					height: 132rpx;
					border-radius: 16rpx;
					border: 1px dashed #C8C8C8;
					margin: 20rpx;
					.text {
						font-size: 20rpx;
						font-weight: 400;
						color: #A4A4A4;
						line-height: 28rpx;
						padding-top: 12rpx;
					}
					
				}
				.u-upload__wrap__preview {
					margin: 20rpx;
				}
			}
			.select_img {
				width: 31rpx;
				height: 31rpx;
				padding-right: 14rpx;
			}
		}
		.btn {
			margin-bottom: 74rpx;
			width: 100%;
			height: 84rpx;
			text-align: center;
			background: #506DFF;
			border-radius: 42rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 84rpx;
		}
		.popu {
			width: 100%;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0px 0px;
			box-sizing: border-box;
			padding: 0 30rpx;
			.popu_title {
				width: 100%;
				text-align: center;
				padding: 48rpx 0 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
			}
			.popu_price {
				font-size: 36rpx;
				font-weight: 400;
				color: #FF2626;
				line-height: 44rpx;
				padding: 0 0 36rpx;
			}
			.type {
				font-size: 30rpx;
				font-weight: 400;
				color: #222222;
				line-height: 42rpx;
			}
			.way {
				width: 100%;
				margin: 28rpx 0 60rpx;
				background: #F4F4F4;
				border-radius: 12px;
				box-sizing: border-box;
				padding: 36rpx 20rpx;
				.pay_icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}
			}
			.sure_btn {
				margin: 200rpx 0 20rpx;
				width: 100%;
				height: 84rpx;
				background: #506DFF;
				border-radius: 42rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 84rpx;
			}
			.u-radio-group {
				flex: unset;
			}
		}
	}
</style>