<template>
|
<div id="full" class="w-full h-full">
|
<order-nav :title="$t('申诉')" />
|
<div class="pt-22 px-32 mainBackground pb-50">
|
<c2c-input class="mb-44" :label="$t('申诉理由 （必选）')" :placeholder="$t('我已付款，但订单已取消')" v-model="info.reason" />
|
<c2c-input :label="$t('申诉描述')">
|
<textarea class="w-full h-250 inputBackground c2cColor" :placeholder="$t('请尽可能完整的描述信息')"
|
v-model="info.description" />
|
</c2c-input>
|
<div class="mt-66">
|
<div class="font-28 mb-13 c2cColor">{{ $t('添加凭证 （必填）') }}</div>
|
<p class="font-22 text-grey">{{ $t('付款及沟通记录的截图或音视频，最多5个文件，总大小不超过50MB。') }}</p>
|
<div class="mt-32">
|
<van-uploader v-model="fileList" :afterRead="afterRead" multiple :max-count="1" :max-size="50000 * 1024"
|
accept="image/*,video/*" @oversize="oversize">
|
<div class="uploader">
|
<van-icon name="plus" />
|
</div>
|
</van-uploader>
|
</div>
|
</div>
|
</div>
|
<div class="px-32 mt-16 pt-28 pb-26 mainBackground connect">
|
<van-cell-group>
|
<van-cell>
|
<template #title>
|
<span class="font-28">{{ $t('联系人') }}</span>
|
</template>
|
<template #default>
|
<input class="w-244" type="text" :placeholder="$t('联系人')" v-model="info.name">
|
</template>
|
</van-cell>
|
<van-cell class="mt-88">
|
<template #title>
|
<span class="font-28">{{ $t('联系电话') }}</span>
|
</template>
|
<template #default>
|
<div class="flex items-center justify-end">
|
<input class="w-244" type="text" :placeholder="$t('请输入联系方式')" v-model="info.phone">
|
<img class="w-23 h-23 ml-16" src="~@/assets/image/c2c/Group1222.png" alt="">
|
</div>
|
</template>
|
</van-cell>
|
</van-cell-group>
|
</div>
|
<div class="px-32 mt-200 mainBackground pt-36 pb-156">
|
<van-button :disabled="!fullDisabled" color="#1D91FF" class="w-full h-100 rounded-xl" type="info"
|
@click="onAppeal">{{ $t('我要申述') }}
|
</van-button>
|
</div>
|
<!-- 弹窗 -->
|
<van-popup position="right" class="w-full h-full" v-model="show">
|
<appeal-waiting @back="back" />
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Uploader,
|
Icon,
|
Toast,
|
CellGroup,
|
Cell,
|
Popup,
|
} from "vant";
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import C2cInput from "@/page/placeAnOrder/components/c2cInput/C2cInput";
|
import OtcCircle from "@/components/otcCircle";
|
import AppealWaiting from "@/page/c2cOrder/components/appeal/AppealWaiting";
|
import AppealSuccess from "@/page/c2cOrder/components/appeal/AppealSuccess";
|
import {
|
mapGetters,
|
mapMutations,
|
} from "vuex";
|
import {
|
REASON_FOR_CANCELLATION
|
} from "@/store/const.store";
|
import { _uploadImage } from "@/API/fund.api";
|
import otcApi from "@/API/otc";
|
|
export default {
|
name: "Appeal",
|
data() {
|
return {
|
show: false,
|
disable: false,
|
info: {
|
reason: '', // 理由
|
description: '', // 描述
|
name: '',
|
phone: '',
|
},
|
fileList: [],
|
}
|
},
|
computed: {
|
...mapGetters('c2c', ['getReasonForCancellation', 'orderNo']),
|
fullDisabled() {
|
return this.disable && this.fileList.length > 0
|
}
|
},
|
created() {
|
this.info.reason = this.getReasonForCancellation
|
},
|
beforeDestroy() {
|
this[REASON_FOR_CANCELLATION]('');
|
},
|
methods: {
|
...mapMutations('c2c', [REASON_FOR_CANCELLATION]),
|
afterRead(file) {
|
file.status = 'uploading'
|
file.message = this.$t('上传中...')
|
// 上传图片到服务器
|
_uploadImage(file).then(res => {
|
file.status = 'success';
|
file.message = this.$t('上传成功');
|
file.resURL = res
|
}).catch(err => {
|
file.status = 'failed';
|
file.message = this.$t('图片上传失败');
|
})
|
},
|
// 超出大小
|
oversize() {
|
Toast(this.$t('超出50MB！'))
|
},
|
back() {
|
this.show = false;
|
this.$router.push('/wantBuy')
|
},
|
// 申诉
|
async onAppeal() {
|
Toast.loading()
|
const params = {
|
order_no: this.orderNo,
|
...this.info,
|
img: this.fileList[0].resURL
|
}
|
|
console.log(params);
|
|
const res = await otcApi.c2cAppeal(params);
|
Toast.clear();
|
this.show = true;
|
}
|
},
|
watch: {
|
info: {
|
deep: true,
|
handler() {
|
const res = Object.keys(this.info).filter(key => {
|
return this.info[key] === "" || this.info[key] === undefined
|
})
|
console.log(res);
|
this.disable = res.length === 0;
|
},
|
immediate: true
|
}
|
},
|
components: {
|
[Uploader.name]: Uploader,
|
[Icon.name]: Icon,
|
[CellGroup.name]: CellGroup,
|
[Cell.name]: Cell,
|
[Popup.name]: Popup,
|
OrderNav,
|
C2cInput,
|
OtcCircle,
|
AppealWaiting,
|
AppealSuccess,
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .payment-input {
|
input {
|
height: 90px;
|
}
|
}
|
|
textarea {
|
&::placeholder {
|
color: #B8BCC5;
|
}
|
}
|
|
.uploader {
|
position: relative;
|
width: 180px;
|
height: 180px;
|
border: 2px dashed #EAEBEE;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
.van-icon {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
font-weight: 700;
|
font-size: 50px;
|
color: #9399A4;
|
}
|
|
}
|
|
.connect {
|
input {
|
margin: 0;
|
font-size: 28px;
|
box-sizing: border-box;
|
border: none;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
}
|
|
#full {
|
::v-deep {
|
|
.van-cell-group,
|
.van-cell {
|
@include themify() {
|
color: themed("text_color1");
|
}
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.van-cell__value {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.van-button--info {
|
@include themify() {
|
background: themed("btn_main");
|
}
|
|
@include themify() {
|
border-color: themed("btn_main");
|
}
|
}
|
}
|
|
}
|
</style>
|
