|
|
|
@ -1,360 +0,0 @@ |
|
|
|
<template> |
|
|
|
<view class="refundsOrExchange"> |
|
|
|
<navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack"/> |
|
|
|
|
|
|
|
<view class="frame"> |
|
|
|
|
|
|
|
<!-- 商品简介 --> |
|
|
|
<view class="itme1" @click="openSpPopup"> |
|
|
|
<view class="left"> |
|
|
|
<img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;"> |
|
|
|
</view> |
|
|
|
<view class="center"> |
|
|
|
<view>{{ commodity.title }}</view> |
|
|
|
<view>{{ commodity.smallTitle }}</view> |
|
|
|
</view> |
|
|
|
<view class="right">×{{ commodity.total }}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!--<commoditySelect ></commoditySelect>--> |
|
|
|
|
|
|
|
<!-- 申请类型&申请原因 --> |
|
|
|
<view class="item2"> |
|
|
|
<view class="type"> |
|
|
|
<span>申请类型</span> |
|
|
|
<span>退货退款</span> |
|
|
|
</view> |
|
|
|
<uv-line></uv-line> |
|
|
|
<view class="reason"> |
|
|
|
<view>申请原因</view> |
|
|
|
<view> |
|
|
|
<uv-input placeholder="请输入申请原因" border="none" clearable></uv-input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 退货数量&申请金额--> |
|
|
|
<view class="item3"> |
|
|
|
<view class="type"> |
|
|
|
<span>{{ titleIndex == 0 ? '退货数量' : '换货数量' }}</span> |
|
|
|
<span> |
|
|
|
<uv-number-box :min="1" :max="100"></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 disabled placeholder="$" border="none" clearable></uv-input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 申请说明 --> |
|
|
|
<view class="item4"> |
|
|
|
<view>申请说明(选填)</view> |
|
|
|
<view> |
|
|
|
<uv-input 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 placeholder="请输入联系电话" border="none" clearable></uv-input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 底部按钮 --> |
|
|
|
|
|
|
|
|
|
|
|
<!--商品选择--> |
|
|
|
<uv-popup ref="spPopup" :round="30"> |
|
|
|
<commoditySelect |
|
|
|
:commodityList="commodityList" |
|
|
|
@selectSp="selectCommodity" |
|
|
|
/> |
|
|
|
</uv-popup> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import commoditySelect from "../components/commodity/commoditySelect.vue" |
|
|
|
|
|
|
|
export default { |
|
|
|
onLoad(option) { |
|
|
|
this.titleIndex = option.index |
|
|
|
}, |
|
|
|
components: { |
|
|
|
commoditySelect |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
titleIndex: 0, |
|
|
|
title: ['申请换货', '申请退货'], |
|
|
|
fileList: [], |
|
|
|
bottomBtnStyle: { |
|
|
|
color: '#FFF', |
|
|
|
backgroundColor: '#fd5100', |
|
|
|
fontSize: '34rpx', |
|
|
|
text: '提交申请', |
|
|
|
width: '400rpx', |
|
|
|
height: '80rpx', |
|
|
|
borderRadius: '100rpx', |
|
|
|
bottom: '40rpx' |
|
|
|
}, |
|
|
|
commodityList: [ |
|
|
|
{ |
|
|
|
|
|
|
|
title: '商品名称', |
|
|
|
smallTitle: '产品规格：120*4*75【桌子尺寸】', |
|
|
|
total:1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '商品名称1', |
|
|
|
smallTitle: '产品规格：120*4*75【桌子尺寸】', |
|
|
|
total:1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '商品名称2', |
|
|
|
smallTitle: '产品规格：120*4*75【桌子尺寸】', |
|
|
|
total:1, |
|
|
|
|
|
|
|
} |
|
|
|
], |
|
|
|
commodity: { |
|
|
|
title: '商品名称', |
|
|
|
smallTitle: '产品规格：120*4*75【桌子尺寸】', |
|
|
|
total:1, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
openSpPopup() { |
|
|
|
this.$refs.spPopup.open('bottom'); |
|
|
|
}, |
|
|
|
|
|
|
|
// 选择退换货商品回调 |
|
|
|
selectCommodity(e) { |
|
|
|
console.log(e, "selectCommodity--e") |
|
|
|
this.commodity = e |
|
|
|
this.$refs.spPopup.close() |
|
|
|
}, |
|
|
|
|
|
|
|
confirm() { |
|
|
|
console.log("==="); |
|
|
|
}, |
|
|
|
deleteImage(e) { |
|
|
|
this.fileList.splice(e.index, 1) |
|
|
|
}, |
|
|
|
afterRead(e) { |
|
|
|
let self = this |
|
|
|
e.file.forEach(file => { |
|
|
|
self.$Oss.ossUpload(file.url).then(url => { |
|
|
|
self.fileList.push({ |
|
|
|
url |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
* { |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.refundsOrExchange { |
|
|
|
.frame { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 30rpx; |
|
|
|
width: 100%; |
|
|
|
padding-top: 40rpx; |
|
|
|
background-color: #f5f5f5; |
|
|
|
|
|
|
|
|
|
|
|
.itme1 { |
|
|
|
display: flex; |
|
|
|
height: 200rpx; |
|
|
|
background-color: #ffffff; |
|
|
|
|
|
|
|
.left { |
|
|
|
padding: 40rpx; |
|
|
|
width: 20%; |
|
|
|
border-radius: 10rpx; |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.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> |
