|
|
@@ -0,0 +1,441 @@
|
|
|
+<!-- 申请退款页面 -->
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <scroll-view :scroll-y="true" @scroll="handleContentScroll">
|
|
|
+ <!-- 导航栏 :leftIconColor="!isTop ? '#fff' : '#000'"-->
|
|
|
+ <u-navbar :placeholder="true" autoBack @click="autoBackFun">
|
|
|
+ <view slot="center">
|
|
|
+ <view class="centerTitle" style="background-color: #fff;">
|
|
|
+ {{ receivedStatus == '1' || receivedStatus == '2' ? '申请退款' : '申请换货' }}</view>
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+
|
|
|
+ <view class="content">
|
|
|
+ <view v-if="tab=='1'">
|
|
|
+ <view class="contentDetail">
|
|
|
+ <view class="tip">请选择取消订单的原因（必选）：</view>
|
|
|
+ <u-radio-group v-model="selectReason" @change="groupChange">
|
|
|
+ <view>
|
|
|
+ <!-- //1 未收到，申请退款 list； 2.已收到货，申请退款 list2 3.已收货-换货申请 list3-->
|
|
|
+ <view class="item" v-for="item in filteredList">
|
|
|
+ <view v-if="item.title" class="title">{{ item.title }}：</view>
|
|
|
+ <view class="obj" v-for="obj in item.data">
|
|
|
+ <view class="radioBox">
|
|
|
+ <u-radio activeColor="#03C1B8 " :name=obj.value></u-radio>{{ obj.text }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-radio-group>
|
|
|
+ </view>
|
|
|
+ <view class="tip2" v-if="receivedStatus == '1'">
|
|
|
+ <view class="title">温馨提示：</view>
|
|
|
+ <view class="textClass">
|
|
|
+ 1.订单一旦取消，无法恢复<br>
|
|
|
+ 2.用户因个人原因申请退货，包邮商品需承担返回运费，非包邮商品需承担送返两程运费<br>
|
|
|
+ 3.如有其他问题，请及时与平台联系，联系电话：****-*******<br>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="tab=='2'">
|
|
|
+ <view class="Box">
|
|
|
+ <view class="questionOrDiscribe">
|
|
|
+ <view>问题与描述：</view>
|
|
|
+ <u--textarea v-model="questionOrDiscribe" placeholder="请输入问题描述" :maxlength="100"
|
|
|
+ count></u--textarea>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="pictures">
|
|
|
+ <view>上传凭证图片：</view>
|
|
|
+ <view style="margin-top: 16rpx;" class="pictureClass">
|
|
|
+ <!-- <view v-for="value in 3" style="position: relative;width: calc(25% - 22rpx)">
|
|
|
+ <image style="width: 144rpx;height: 144rpx;" src="@/static/points/closeIcon.png"
|
|
|
+ mode="">
|
|
|
+ </image>
|
|
|
+ <image style="width: 36rpx;height: 36rpx;position: absolute;right : 0;top:0"
|
|
|
+ src="@/static/points/pictureIcon.png" mode="" @click="deletePictureFun">
|
|
|
+ </image>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <Upload style="" :maxCount="6"
|
|
|
+ :customImg="true" :width="'70'" :height="'70'" :src="'/static/points/picture2.png'"
|
|
|
+ @fileList="onUpload" />
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="buttonClass">
|
|
|
+ <u-button :customStyle="{
|
|
|
+ color: '#fff',
|
|
|
+ background: '#03C1B8'
|
|
|
+ }" @click="goSubmit">提交</u-button>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Upload from '@/components/upload/index.vue';
|
|
|
+export default {
|
|
|
+ components: { Upload },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tab:null,
|
|
|
+ headPhotoImg: [],
|
|
|
+ questionOrDiscribe: '',
|
|
|
+ selectReason: '',
|
|
|
+ selectReasonName: '',
|
|
|
+ receivedStatus: null,//1 未收到，申请退款；2.已收到货，申请退款 3.已收货-换货申请
|
|
|
+ isTop: 0,
|
|
|
+ list: [],
|
|
|
+ //未收到，申请退款
|
|
|
+ list1: [
|
|
|
+ {
|
|
|
+ title: '平台原因',
|
|
|
+ data: [
|
|
|
+ { value: '1', text: '商家无货联系我取消订单' },
|
|
|
+ { value: '2', text: '商家无法按承诺时效送达' },
|
|
|
+ { value: '3', text: '商家其他原因联系我取消订单' },
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ title: '个人原因',
|
|
|
+ data: [
|
|
|
+ { value: '4', text: '不想要' },
|
|
|
+ { value: '5', text: '商品错选 / 多选' },
|
|
|
+ { value: '6', text: '地址信息填写错误' },
|
|
|
+ { value: '7', text: '7天无理由退货' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //已收到货，申请退款
|
|
|
+ list2: [
|
|
|
+ {
|
|
|
+ title: '',
|
|
|
+ data: [
|
|
|
+ { value: '1', text: '买错/买多/不想要' },
|
|
|
+ { value: '2', text: '买错/买多/不想要' },
|
|
|
+ { value: '3', text: '商品与页面描述不符' },
|
|
|
+ { value: '4', text: '商品与页面描述不符' },
|
|
|
+ { value: '5', text: '发错货' },
|
|
|
+ { value: '6', text: '少件/未收到货' },
|
|
|
+ { value: '7', text: '7天无理由退货' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //已收货-换货申请
|
|
|
+ list3: [
|
|
|
+ {
|
|
|
+ title: '',
|
|
|
+ data: [
|
|
|
+ { value: '1', text: '商品质量问题' },
|
|
|
+ { value: '2', text: '商品与页面描述不符' },
|
|
|
+ { value: '3', text: '商品/包装破损' },
|
|
|
+ { value: '4', text: '发错货' },
|
|
|
+ { value: '5', text: '少件/未收到货' },
|
|
|
+ { value: '6', text: '商品大小不合适' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ filteredList() {
|
|
|
+ if (this.receivedStatus === '1') return this.list1;
|
|
|
+ if (this.receivedStatus === '2') return this.list2;
|
|
|
+ return this.list3;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(data) {
|
|
|
+ console.log(data, 'onLoad')
|
|
|
+ if (data) {
|
|
|
+ this.receivedStatus = data.receivedStatus
|
|
|
+ this.tab=data.tab?data.tab:null
|
|
|
+ }
|
|
|
+ setTimeout(()=>{
|
|
|
+ console.log(this.filteredList,'2222')
|
|
|
+ },2000)
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow(data) {
|
|
|
+ if (data) {
|
|
|
+ this.receivedStatus = data.receivedStatus
|
|
|
+ this.tab=data.tab?data.tab:null
|
|
|
+ }
|
|
|
+ console.log(data, 'onShow')
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //console.log("滚动距离为：" + e.scrollTop);
|
|
|
+ this.isTop = e.scrollTop;
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // upload事件
|
|
|
+ onUpload(e, t) {
|
|
|
+ console.log(e, t)
|
|
|
+ //this.form[t] = e.map(item => item.url);
|
|
|
+ },
|
|
|
+ handleContentScroll(e) {
|
|
|
+ this.isTop = e.detail.scrollTop > 0
|
|
|
+ },
|
|
|
+ clichFun() {
|
|
|
+
|
|
|
+ },
|
|
|
+ //点击单选按钮
|
|
|
+ groupChange(val) {
|
|
|
+ this.selectReason = val
|
|
|
+ this.filteredList[0].data.forEach(item => {
|
|
|
+ if (item.value == val) {
|
|
|
+ this.selectReasonName = item.text
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ //提交
|
|
|
+ goSubmit() {
|
|
|
+ //`/pages/test/test?name=${encodeURIComponent(name)}&info=${encodeURIComponent(info)}`
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/points/productDetails/applyExchange?selectReason=${encodeURIComponent(this.selectReasonName)}`
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //查看订单
|
|
|
+ checkOrder() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/points/productDetails/pendingPayment'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //返回上一页
|
|
|
+ autoBackFun() {
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ //去编辑地址
|
|
|
+ goEditAddress() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/address/address-edit'
|
|
|
+ });
|
|
|
+ // /let str = uni.$u.queryParams(params);
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: `/packageA/pages/shop/coupon/couponDetail${str}`
|
|
|
+ // });
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.centerTitle {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #060606;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+
|
|
|
+.buttonClass {
|
|
|
+ position: fixed;
|
|
|
+ padding: 32rpx;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+
|
|
|
+ button {
|
|
|
+ height: 84rpx;
|
|
|
+ border-radius: 98rpx 98rpx 98rpx 98rpx;
|
|
|
+ border: 2rpx solid #03C1B8;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ padding: 32rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ //height: 658rpx;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+
|
|
|
+ ::v-deep .Box {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ padding: 18rpx 22rpx 22rpx 22rpx;
|
|
|
+
|
|
|
+ .questionOrDiscribe {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+
|
|
|
+ .u-textarea {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ height: 206rpx;
|
|
|
+ background: #F8F8F8;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ border: 1rpx solid #DCDCDC;
|
|
|
+
|
|
|
+ .uni-textarea-placeholder {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-textarea-wrapper {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pictures {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pictureClass {
|
|
|
+
|
|
|
+ .u-upload {
|
|
|
+ .u-upload__wrap{
|
|
|
+ /* display: inline-block; */
|
|
|
+ flex-direction: row;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ flex-wrap: wrap;
|
|
|
+ /* flex: 1; */
|
|
|
+ gap: 24rpx;
|
|
|
+ .u-upload__wrap__preview{
|
|
|
+ position: relative;
|
|
|
+ width: calc(25% - 20rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-upload__wrap__preview {
|
|
|
+ margin: 0;
|
|
|
+ width: calc(25% - 22rpx)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contentDetail {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ padding: 0 20rpx 24rpx 20rpx;
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ padding-top: 18rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .obj {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radioBox {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip2 {
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .textClass {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
MS-IOHQJGHXZHQD\Administrator
