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.
366 lines
8.1 KiB
366 lines
8.1 KiB
<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>
|
|
|
|
<!-- 底部按钮 -->
|
|
<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
|
|
:commodityList="commodityList"
|
|
@selectSp="selectCommodity"
|
|
/>
|
|
</uv-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import bottomBtn from "../../components/bottom/bottomBtn.vue"
|
|
import commoditySelect from "../components/commodity/commoditySelect.vue"
|
|
|
|
export default {
|
|
onLoad(option) {
|
|
this.titleIndex = option.index
|
|
},
|
|
components: {
|
|
bottomBtn, 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>
|