You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
466 lines
10 KiB
466 lines
10 KiB
<template>
|
|
<view class="refundsOrExchange">
|
|
<navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="frame">
|
|
|
|
<!-- 商品简介 -->
|
|
<view class="itme1" @click="openSpPopup">
|
|
<view class="left">
|
|
<image :src="commodity.goodsPic" mode="aspectFill" />
|
|
</view>
|
|
<view class="center">
|
|
<view>{{ commodity.goodsName }}</view>
|
|
<view v-if="commodity.sku">商品规格:{{ commodity.sku }}</view>
|
|
<view v-if="commodity.createTime">下单时间:{{ $dayjs(commodity.createTime).format('YYYY-MM-DD') }}</view>
|
|
</view>
|
|
<view class="right" v-if="commodity.num">×{{ commodity.num }}</view>
|
|
</view>
|
|
<!-- 暂未选择商品的时候 -->
|
|
<!-- <view v-else style="height: 200rpx;;display: flex;justify-content: center;align-items: center;font-size: 36px;">
|
|
请选择商品...
|
|
</view> -->
|
|
|
|
<!-- 地址 -->
|
|
<view class="address" @click="openAddress">
|
|
<image src="/static/image/address/selectIcon.png" mode=""></image>
|
|
<view class="">
|
|
{{ address.name }}
|
|
</view>
|
|
<view class="">
|
|
{{ address.addressDetail }}
|
|
</view>
|
|
<view class="icon">
|
|
<uv-icon size="30rpx" name="arrow-right"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 申请类型&申请原因 -->
|
|
<view class="item2">
|
|
<view class="type">
|
|
<span>申请类型</span>
|
|
<span>{{ titleIndex == 0?'退货退款':'换货'}}</span>
|
|
</view>
|
|
<uv-line></uv-line>
|
|
<view class="reason">
|
|
<view>申请原因</view>
|
|
<view>
|
|
<uv-input v-model="form.reason" placeholder="请输入申请原因" border="none" clearable></uv-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退货数量&申请金额-->
|
|
<view class="item3">
|
|
<view class="type">
|
|
<span>{{ titleIndex == 0 ? '退货数量' : '换货数量' }}</span>
|
|
<span>
|
|
<uv-number-box v-model="form.refundNum" :min="1" :max="commodity.num"></uv-number-box>
|
|
</span>
|
|
</view>
|
|
<uv-line v-if='titleIndex == 0 ? true :false'></uv-line>
|
|
<view class="reason" v-if='titleIndex == 0 ? true :false'>
|
|
<view>申请金额</view>
|
|
<view>
|
|
<uv-input v-model="form.reasonPrice" disabled border="none" clearable></uv-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 申请说明 -->
|
|
<view class="item4">
|
|
<view>申请说明(选填)</view>
|
|
<view>
|
|
<uv-input v-model="form.reasonInfo" placeholder="请您详细填写申请说明" border="none" clearable></uv-input>
|
|
</view>
|
|
<view>
|
|
<uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx"
|
|
@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 联系电话 -->
|
|
<!-- <view class="item5">
|
|
<view class="phone">
|
|
<view>联系电话</view>
|
|
<view>
|
|
<uv-input v-model="form.phone" placeholder="请输入联系电话" border="none" clearable></uv-input>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor'
|
|
:fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width"
|
|
:height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius' :bottom='bottomBtnStyle.bottom'>
|
|
</bottomBtn>
|
|
|
|
<!--商品选择-->
|
|
<uv-popup ref="spPopup" :round="30">
|
|
<commoditySelect height="60vh" leaseFlag="1" status="0" @selectSp="selectCommodity" ref="commoditySelect" />
|
|
</uv-popup>
|
|
|
|
<uv-popup ref="addressPopup" :round="30">
|
|
<addressList ref="addressList" height="60vh" @select="selectAddress" />
|
|
</uv-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import bottomBtn from "../../components/bottom/bottomBtn.vue"
|
|
import commoditySelect from "../components/commodity/commoditySelect.vue"
|
|
|
|
import addressList from '@/components/address/addressList.vue'
|
|
export default {
|
|
onLoad(option) {
|
|
this.titleIndex = option.index
|
|
},
|
|
components: {
|
|
bottomBtn,
|
|
addressList,
|
|
commoditySelect
|
|
},
|
|
data() {
|
|
return {
|
|
titleIndex: 0,
|
|
title: ['申请退货', '申请换货'],
|
|
fileList: [],
|
|
bottomBtnStyle: {
|
|
color: '#FFF',
|
|
backgroundColor: '#fd5100',
|
|
fontSize: '34rpx',
|
|
text: '提交申请',
|
|
width: '400rpx',
|
|
height: '80rpx',
|
|
borderRadius: '100rpx',
|
|
bottom: '40rpx'
|
|
},
|
|
commodity: {
|
|
goodsName: '请选择租赁物品',
|
|
sku: '',
|
|
num: 0,
|
|
startTime: '',
|
|
goodsPic: '',
|
|
},
|
|
form: {
|
|
id: "",
|
|
phone: "",
|
|
reason: "",
|
|
reasonInfo: "",
|
|
reasonPic: "",
|
|
reasonPrice: "",
|
|
refundNum: "",
|
|
type: '', //0退货 1换货
|
|
},
|
|
addressTotal: 0,
|
|
address: {
|
|
name: '请选择联系人',
|
|
addressDetail: '',
|
|
},
|
|
}
|
|
},
|
|
onShow() {
|
|
this.$refs.commoditySelect.getList()
|
|
// 获取地址列表
|
|
this.$refs.addressList.getAddressList().then(res => {
|
|
this.addressTotal = res.total
|
|
if (this.addressTotal != 0) {
|
|
this.address = res.records[0]
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
|
|
openSpPopup() {
|
|
this.$refs.spPopup.open('bottom');
|
|
},
|
|
|
|
// 打开选择地址
|
|
openAddress() {
|
|
if (this.addressTotal == 0) {
|
|
this.$refs.popup.close()
|
|
return uni.navigateTo({
|
|
url: '/pages_order/mine/address?type=back'
|
|
})
|
|
}
|
|
this.$refs.addressPopup.open('bottom')
|
|
},
|
|
// 选择地址
|
|
selectAddress(e) {
|
|
this.address = e
|
|
this.$refs.addressPopup.close()
|
|
},
|
|
|
|
// 选择退换货商品回调
|
|
selectCommodity(e) {
|
|
console.log(e, "selectCommodity--e")
|
|
console.log(e.id, 'e.id');
|
|
this.form.id = e.id //设置租赁ID
|
|
this.form.reasonPrice = e.price //设置退款金额(押金)
|
|
this.form.refundNum = e.num //设置数量
|
|
this.commodity = e
|
|
this.$refs.spPopup.close()
|
|
},
|
|
|
|
//确认退换货
|
|
confirm() {
|
|
this.form.type = this.titleIndex
|
|
this.form.reasonPic = this.fileList.map(item=>item.url).join(",")
|
|
this.form.addressId = this.address.id
|
|
if (this.$utils.verificationAll(this.form, {
|
|
id: '请选择租赁物品',
|
|
reason: '请输入申请原因',
|
|
addressId: '请选择地址',
|
|
})) {
|
|
return
|
|
}
|
|
|
|
this.$api('refundOrder', this.form, res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
icon: "success",
|
|
title: "申请成功"
|
|
})
|
|
setTimeout(uni.navigateBack, 1000, -1)
|
|
}
|
|
})
|
|
},
|
|
deleteImage(e) {
|
|
this.fileList.splice(e.index, 1)
|
|
},
|
|
afterRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
console.log(url);
|
|
self.fileList.push({
|
|
url
|
|
})
|
|
})
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.refundsOrExchange {
|
|
|
|
.address {
|
|
display: flex;
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin: 20rpx;
|
|
}
|
|
|
|
view {
|
|
margin: 20rpx;
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
}
|
|
|
|
.icon {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.frame {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
// width: 100%;
|
|
padding: 40rpx 40rpx 0 40rpx;
|
|
background-color: #f5f5f5;
|
|
|
|
|
|
.itme1 {
|
|
display: flex;
|
|
height: 200rpx;
|
|
background-color: #ffffff;
|
|
|
|
.left {
|
|
padding: 20rpx;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #ffffff;
|
|
flex-shrink: 0;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 20rpx;
|
|
width: 60%;
|
|
padding: 0rpx 0 0 20rpx;
|
|
background-color: #ffffff;
|
|
|
|
// 给第一个 view 设置样式
|
|
>view:first-of-type {
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
}
|
|
|
|
// 给第二个 view 设置样式
|
|
>view:nth-of-type(2) {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
// 给第三个 view 设置样式
|
|
>view:nth-of-type(3) {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 10%;
|
|
color: #666666;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.item2 {
|
|
// width: 100vw;
|
|
|
|
.type {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FFF;
|
|
height: 80rpx;
|
|
padding: 0 0 0 20rpx;
|
|
|
|
>span:nth-of-type(1) {
|
|
width: 30%;
|
|
}
|
|
|
|
>span:nth-of-type(2) {
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
.reason {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FFF;
|
|
height: 80rpx;
|
|
// margin: 10rpx 0 0 0;
|
|
padding: 10rpx 0 0 20rpx;
|
|
|
|
>view:nth-of-type(1) {
|
|
width: 30%;
|
|
}
|
|
|
|
>view:nth-of-type(2) {
|
|
width: 70%;
|
|
padding: 0 20rpx 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item3 {
|
|
// width: 100vw;
|
|
|
|
.type {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FFF;
|
|
height: 80rpx;
|
|
padding: 0 0 0 20rpx;
|
|
|
|
>span:nth-of-type(1) {
|
|
width: 70%;
|
|
}
|
|
|
|
>span:nth-of-type(2) {
|
|
width: 30%;
|
|
}
|
|
}
|
|
|
|
.reason {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FFF;
|
|
height: 80rpx;
|
|
// margin: 10rpx 0 0 0;
|
|
padding: 10rpx 0 0 20rpx;
|
|
|
|
>view:nth-of-type(1) {
|
|
width: 30%;
|
|
}
|
|
|
|
>view:nth-of-type(2) {
|
|
width: 70%;
|
|
padding: 0 20rpx 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item4 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10rpx 0 0 20rpx;
|
|
background-color: #FFF;
|
|
|
|
>view:nth-of-type(1) {
|
|
background-color: #FFF;
|
|
}
|
|
|
|
>view:nth-of-type(2) {
|
|
margin: 10rpx 0 10rpx 0;
|
|
background-color: #FFF;
|
|
|
|
}
|
|
}
|
|
|
|
.item5 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 0 0 20rpx;
|
|
background-color: #FFF;
|
|
|
|
.phone {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FFF;
|
|
height: 80rpx;
|
|
// margin: 10rpx 0 0 0;
|
|
padding: 10rpx 0 0 20rpx;
|
|
|
|
>view:nth-of-type(1) {
|
|
width: 30%;
|
|
}
|
|
|
|
>view:nth-of-type(2) {
|
|
width: 70%;
|
|
padding: 0 20rpx 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|