152 lines
5.2 KiB
Vue
152 lines
5.2 KiB
Vue
<template>
|
|
<view class="apply-container">
|
|
<!-- 确认退款信息弹窗 -->
|
|
<view class="refund-info-container">
|
|
<view class="refund-item">
|
|
<view class="refund-label">物流单号<text class="required">*</text></view>
|
|
<input class="refund-value" v-model="selectedServiceType" placeholder="请填写物流单号" type="text">
|
|
</view>
|
|
<view class="refund-item">
|
|
<view class="refund-label">物流公司<text class="required">*</text></view>
|
|
<view class="refund-value" @click="openAfterSalePopup2('refundReason')">
|
|
{{ selectedRefundReason || '请选择' }}
|
|
<text class="arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="refund-item" style="border-bottom: none;">
|
|
<view class="refund-label">联系电话</view>
|
|
<view class="refund-value">
|
|
111111111
|
|
</view>
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="refund-item2">
|
|
<view class="refund-label">补充描述和凭证</view>
|
|
<textarea class="refund-description" placeholder="有助于小二更好的处理售后问题" v-model="refundDescription"
|
|
maxlength="200"></textarea>
|
|
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
|
:maxCount="3">
|
|
<view class="imgCon">
|
|
<image
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
|
mode="widthFix"></image>
|
|
上传凭证
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
<button class="submit-btn" @click="submitRefundApplication">提交</button>
|
|
|
|
<!-- 选择退款原因弹窗 -->
|
|
<u-popup ref="popup2" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
|
|
:mask-close-able="false">
|
|
<view class="cancel-reason-container">
|
|
<view class="title">选择物流公司</view>
|
|
<view class="reason-list">
|
|
<view v-for="(company, index) in logisticsCompanies" :key="index" class="reason-item"
|
|
@click="selectLogisticsCompany(index)">
|
|
<view :class="['radio', selectedRefundReason === company ? 'active' : '']"></view>
|
|
<text>{{ company }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isPhone,
|
|
picUrl,
|
|
request,
|
|
upload,
|
|
NavgateTo
|
|
} from '../../../utils';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
afterSalePopup2: false,
|
|
selectedServiceType: '',
|
|
selectedRefundReason: '',
|
|
refundDescription: '',
|
|
imgList: [],
|
|
logisticsCompanies: [
|
|
'顺丰速运',
|
|
'京东物流',
|
|
'中通快递',
|
|
'圆通速递',
|
|
'申通快递',
|
|
'韵达快递',
|
|
'百世快递',
|
|
'邮政EMS'
|
|
]
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 可以在这里添加物流相关的初始化逻辑
|
|
},
|
|
methods: {
|
|
// 关闭弹窗
|
|
closeAfterSalePopup2() {
|
|
this.afterSalePopup2 = false;
|
|
},
|
|
|
|
// 打开选择物流公司弹窗
|
|
openAfterSalePopup2(type) {
|
|
this.afterSalePopup2 = true;
|
|
},
|
|
|
|
// 上传图片
|
|
afterReadImg(e) {
|
|
e.file.forEach(item => {
|
|
upload(item.url, res => {
|
|
this.imgList.push({ url: picUrl + res.data.path });
|
|
console.log('imgList:', this.imgList);
|
|
});
|
|
});
|
|
},
|
|
|
|
// 删除图片
|
|
deletePic(e) {
|
|
this.imgList.splice(e.index, 1);
|
|
},
|
|
|
|
// 选择物流公司
|
|
selectLogisticsCompany(index) {
|
|
this.selectedRefundReason = this.logisticsCompanies[index];
|
|
this.afterSalePopup2 = false;
|
|
},
|
|
|
|
// 提交物流信息
|
|
submitRefundApplication() {
|
|
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
|
uni.showToast({
|
|
title: '请完善物流信息',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 输出提交的物流信息
|
|
const logisticsInfo = {
|
|
serviceType: this.selectedServiceType,
|
|
refundReason: this.selectedRefundReason,
|
|
refundDescription: this.refundDescription,
|
|
imgList: this.imgList
|
|
};
|
|
console.log('提交物流信息:', logisticsInfo);
|
|
|
|
// 这里可以添加提交后的处理逻辑
|
|
uni.showToast({
|
|
title: '物流信息提交成功',
|
|
icon: 'success'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css');
|
|
</style> |