八 order/refund.vue

<template>
	<view class="container">
	    <!-- 布局用盒子，无额外样式效果 -->
	    <view style="width: 100%;">
	        <!-- 退款 -->
	        <view class="background-block refund">
	            <!-- 退款原因 -->
	            <view class="refund-reason"> 
	               <!-- <van-cell title="{{type == 1?'退货原因':'换货原因'}}" is-link required="true" value="{{refundReason}}" bindtap="showReasonPopup"/> -->
	            </view>
	            <view class="refund-brief">
	                <view style="font-weight: bold;">该商品支持7天无理由退货</view>
	                <view>该商品支持7天无理由退货，自商品签收起7天内，买家可发起退货申请；</view>
	                <view>退回商品应当完好；</view>
	                <view>包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。</view>
	            </view>
	            <!-- 退款金额 -->
	            <view class="refund-amount" v-if="type == 1">
	                <view class="title">退款金额</view>
	                <view class="amount">{{price}}</view>
	            </view>
	        </view>
	
	        <!-- 填写地址信息 -->
	        <view class="background-block address-container" v-if="receipt == 1">
	            <view class="logistics"> 
	                <!-- <van-cell title="选择物流公司" is-link required="true" value="{{logistics}}" bindtap="showlogisticsPopup"/> -->
	            </view>
	            <view class="logistics"> 
	                <!-- <van-field 
	                    value="{{ trackNumber }}" 
	                    type="number"
	                    required="true"
	                    label="快递单号"
	                    placeholder="请输入快递单号" 
	                    placeholder-style="text-align:right;color:#969799"
	                    bind:input="trackNumber"
	                /> -->
	            </view>
	            <view class="address-info">
	                <view class="title">寄出地址</view>
	                <view v-if="isAddressData" class="have-address" @click="fillAddress">
	                    <view class="details-address single-hidden">{{addressInfo.region + addressInfo.address}}</view>
	                    <view class="name">{{addressInfo.name + ' ' + addressInfo.mobile}}</view>
	                </view>
	                <view v-else class="no-address" @click="fillAddress">填写地址信息</view>
	                <view class="address-icon">
	                    <van-icon name="arrow" color="#A1A1A1" bindtap="fillAddress"/>
	                </view>
	            </view>
	        </view>
	
	        <!-- 补充描述与说明 -->
	        <view class="background-block voucher">
	            <view class="title">补充描述和凭证 <text>(最多上传9张图片)</text></view>
	            <view class="description-container">
					<u--textarea 
						v-model="message" 
						placeholder="补充描述，有助于商家更好的处理售后问题"
						maxlength="200"
						style="height:100%;background-color:#F6F7F9;border-radius:10rpx"
					></u--textarea>
	            </view>
	            <view class="image-content">
	                <scroll-view scroll-x="true" style="width: 100%">
						<u-upload
							:fileList="fileList"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							maxCount="9"
							previewImage
						></u-upload>
	                </scroll-view>
	            </view>
	        </view>
	    </view>
	
	    <!-- 底部按钮区域 -->
	    <view class="bottom">
	        <view class="submit-order" @click="submitOrder">提交</view>
	    </view>
	
	</view>
	
</template>

<script>
export default{
	data () {
		return {
			reasonPopup: false,                    // 退款原因弹出层
			refundReason: '请选择',                 // 显示退款原因
			reasonType: '',                        // 退款原因类型          
			reasonColumns: [],                     // 从后台请求到的退款原因
			price: '181.14',                       // 退款金额
			logisticsPopup: false,                 // 物流公司弹出层
			logistics: '请选择',                    // 显示物流公司
			logisticsId: '',                        // 物流公司id
			logisticsColumns: [],                   // 从后台请求到的物流公司信息
			trackNumber: '',                        // 快递单号
			isAddressData: false,                   // 是否有地址信息
			addressInfo: {},                        // 地址信息
			message: '',                            // 补充描述
			fileList: [],                           // 上传的图片
			imgArray: [],                            // 后端返回的文件新地址
			type: 1,                               // 退换货类型 (1：退货，2：换货)
			receipt: 1,                             // 是否收到商品 (1：已收货，2：未收货)
			orderNumber: ''                         // 订单号
		}
	},
	onLoad(options) {
		this.type = options.type;
		this.receipt = options.receipt;
		this.orderNumber = options.orderNumber;
	},
	methods:{
		//上传图片后
		async afterRead( event ){
			console.log( event );
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList`].length;
			lists.map((item) => {
				this[`fileList`].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`][fileListLen]
				this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		//上传到指定服务器
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: 'http://uat.banlu.xuexiluxian.cn/upload/uploadFile',
					method: 'POST',
					header: {
					    'Authorization': uni.getStorageSync('token')
					},
					filePath: url,
					name: 'file',
					formData: { user: 'test' },
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
	}
}
</script>

<style>
.container {
    overflow-y: auto;
    justify-content: space-between;
    padding: 20rpx;
    background-color: #F6F7F9;
}

/* 白色圆角背景块样式 */
.background-block {
    width: 100%;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    background-color: #ffffff;
}

/* 退款 */
.refund {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 退款原因 */
.refund-reason .van-cell {
    padding: 0;
}

.refund-reason .van-cell--required:before {
    left: 0;
    position: relative;
}

.refund-reason .van-cell__value {
    color: #000 !important;
    font-weight: bold;
    flex: 3 !important;
}

.refund-brief {
    margin-top: 20rpx;
    padding: 20rpx;
    font-size: 24rpx;
    color: #969799;
    background-color: #F6F7F9;
    border-radius: 20rpx;
}

/* 退款金额 */
.refund-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
}

.refund-amount .title{
    font-size: 28rpx;
}

.refund-amount .amount:before {
    color: #db6b22;
    content: "¥";
    font-size: 28rpx;
    margin-right: 4rpx;
}

.refund-amount .amount {
    display: flex;
    align-items: center;
    color: #db6b22;
    font-size: 36rpx;
    font-weight: bold;
}


/* 填写地址信息 */
.address-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.address-container .logistics {
    height: 80rpx;
}

.address-container .van-cell {
    padding: 0 0 10rpx 0;
}

.address-container .van-cell--required:before {
    left: 0;
    position: relative;
}

.address-container .van-field__label {
    color: #000000 !important;
}

.address-container .address-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.address-container .address-info .title:before{
    color: #ee0a24;
    content: "*";
    font-size: 28rpx;
}

.address-container .address-info .title{
    width: 130rpx;
    font-size: 28rpx;
}

.address-container .address-info .no-address{
    display: flex;
    justify-content: flex-end;
    color: #969799;
    font-size: 28rpx;
    width: calc(100% - 160rpx);
}

.address-container .address-info .have-address{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 28rpx;
    width: calc(100% - 160rpx);
    padding-left: 20rpx;
}

.address-container .address-info .have-address .details-address {
    font-weight: bold;
    width: 100%;
    text-align: end;
}

.address-container .address-info .have-address .name {
    margin-top: 12rpx;
    color: #A1A1A1;
    font-size: 24rpx;
}

.address-container .address-info .address-icon{
    width: 30rpx;
}

/* 补充描述与说明 */
.voucher {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.voucher .title {
    font-weight: bold;
    font-size: 32rpx;
}

.voucher text {
    font-size: 12px;
}

.voucher .description-container {
    margin-top: 20rpx;
    height: 300rpx;
}

.voucher .image-content {
    height: 200rpx;
    padding: 20rpx 0;  
}

/* 修改上传图片组件样式 */
.voucher .van-uploader__wrapper {
    flex-wrap: nowrap !important;
}

.voucher .van-uploader__preview {
    display: inline-block;
}

/* 底部按钮区域 */
.bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
}

.bottom .submit-order {
    width: 600rpx;
    line-height: 70rpx;
    text-align: center;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 40rpx;
    background: linear-gradient(128deg, #FC9238 0%, #FF1010 100%);
}
</style>