xiongmao/pages/my-order/apply-for-refund/apply-for-refund.vue

<!-- 申请退款 -->
<template>
	<view class="wrap">

		<view class="item">
			<view class="item-top">
				<text>限源预售</text>
			</view>
			<view class="item-content">
				<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
				<view class="item-content-sidebar">
					<view class="product-item-row-between">
						<view class="product-item-name">
							冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
						</view>
						<view class="row-end">
							<text class="product-item-price">￥394.00</text>
							<text class="product-item-num">x <text>1</text></text>
						</view>
					</view>
					<view class="product-item-tag">
						<text>一盒15g*20袋</text>
					</view>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="box-label">
				退款信息
			</view>
			<view class="refund-list">
				<view class="refund-item">
					<view class="row-between" @tap="showCargoStatus">
						<text class="row-name">货物状态</text>
						<view class="select-row">
							请选择
							<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="refund-item">
					<view class="row-between" @tap="showRefundReason">
						<text class="row-name">退款原因</text>
						<view class="select-row">
							请选择
							<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="refund-item">
					<view class="row-between">
						<text class="row-name">退款金额</text>
						<text class="refund-price">￥980.00</text>
					</view>
					<view class="refund-msg">
						不可修改,最多￥980.00，含发货邮费￥0.00，其中包含积分
					</view>
				</view>
			</view>
		</view>

		<view class="upload-box">
			<view class="upload-box-label">
				上传凭证<text>（最多3张照片）</text>
			</view>
			<view class="img-container">
				<view class="note-image-box">
					<view class="note-image-item" v-for="(item,index) in imageLists" :key="index">
						<view class="close-icon" @click="del(index)">
							<image src="../../../static/close-2.png" mode=""></image>
						</view>
						<view class="image-box" @click="previewImg(index)">
							<image :src="item.url" class="img" mode="aspectFill"></image>
						</view>
					</view>
					<view v-if="imageLists.length < 9" class="note-image-item" @click="addImage">
						<image src="../../../static/add-3.png" class="add-img" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<button type="default" class="active">提交</button>
		</view>

		<!-- 货物状态-弹窗 -->
		<view v-show="isShowCargoStatus">
			<view class="mask" @tap="closeCargoStatus"></view>
			<view class="window">
				<view class="window-label">
					货物状态
				</view>
				<scroll-view scroll-y="true" class="window-select-box">
					<view class="radio-wrap">
						<view class="radio-row" v-for="(item, index) in list" :key="index" @click="choseItem(item.id)">
							<view class="leftsidebar">
								<text>{{item.name}}</text>
							</view>
							<image class="circle-img"
								:src="id == item.id ? '../../../static/circle-active.png' : '../../../static/circle.png'"
								mode="" />
						</view>
					</view>
				</scroll-view>
				<view class="window-bottom">
					<button type="default">确定</button>
				</view>
			</view>
		</view>
		<!-- 货物状态-弹窗  -->

		<!-- 退款原因-弹窗 -->
		<view v-show="isShowRefundReason">
			<view class="mask" @tap="closeRefundReason"></view>
			<view class="window">
				<view class="window-label">
					退款原因
				</view>
				<scroll-view scroll-y="true" class="window-select-box">
					<view class="radio-wrap">
						<view class="radio-row" v-for="(item, index) in reasonList" :key="index"
							@click="selectItem(item.isActive)">
							<view class="leftsidebar">
								<text>{{item.name}}</text>
							</view>
							<image class="circle-img"
								:src="isActive == item.isActive ? '../../../static/circle-active.png' : '../../../static/circle.png'"
								mode="" />
						</view>
					</view>
				</scroll-view>
				<view class="window-bottom">
					<button type="default">确定</button>
				</view>
			</view>
		</view>
		<!-- 退款原因-弹窗  -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageLists: [], //存放图片数组

				//货物状态-弹窗
				isShowCargoStatus: false,

				//货物状态列表-单选
				list: [{
						id: 1,
						name: '未收到货',
					},
					{
						id: 2,
						name: '已收到货',
					},
				],
				id: 1, //单选 初始化第一个高亮 

				//退款原因-弹窗
				isShowRefundReason: false,


				reasonList: [{
						isActive: 1,
						name: '不喜欢/不想要',
					},
					{
						isActive: 2,
						name: '空包裹',
					}, {
						isActive: 3,
						name: '快递/物流一直未送达',
					}, {
						isActive: 4,
						name: '快递/物流无跟踪记录',
					}, {
						isActive: 5,
						name: '货物破损已拒签',
					}, {
						isActive: 6,
						name: '其他',
					},
				],
				isActive: 1, //单选 初始化第一个高亮 
			}
		},
		methods: {
			//删除图片
			del(index) {
				this.imageLists.splice(index, 1)
			},
			//添加图片
			addImage() {
				const count = 9 - this.imageLists.length
				uni.chooseImage({
					count: count,
					success: res => {
						let tempfilepaths = res.tempFilePaths
						tempfilepaths.forEach((item, index) => {
							// 处理h5多选的情况
							if (index < count) {
								this.imageLists.push({
									url: item
								})
							}
						})
					}
				})
			},
			//查看图片
			previewImg(index) {
				let urls = []
				for (let i = 0; i < this.imageLists.length; i++) {
					urls.push(this.imageLists[i].url)
				}
				uni.previewImage({
					current: index,
					urls: urls,
				})
			},
			/**
			 * 货物状态-弹窗
			 */
			showCargoStatus() {
				this.isShowCargoStatus = true;
			},
			closeCargoStatus() {
				this.isShowCargoStatus = false;
			},
			//单选-选择货物状态
			choseItem: function(index) {
				this.id = index;
			},

			/**
			 * 退款原因-弹窗
			 */
			showRefundReason() {
				this.isShowRefundReason = true;
			},
			closeRefundReason() {
				this.isShowRefundReason = false;
			},
			//单选-选择退款原因
			selectItem: function(index) {
				this.isActive = index;
			},
		}
	}
</script>

<style scoped>
	@import "./apply-for-refund.css";
</style>