<template>
|
<div class="w-full h-full">
|
<div class="w-full h-full">
|
<order-nav :title="$t('取消订单')" />
|
<div class="px-30 mt-30">
|
<div class="flex rounded-2xl box-border px-24 pt-24 pb-31 tabBackground">
|
<img class="w-32 h-32 mr-18" src="~@/assets/image/c2c/Group41.png" alt="">
|
<div class="font-26 c2cColor">
|
<p class="font-28">{{ $t('温馨提示') }}</p>
|
<p class="my-20">{{ $t('1. 如果您已经向卖家付款，请千万不要取消订单。') }}</p>
|
<p>2. {{ $t('累计3笔取消，当日不可再购买。') }}</p>
|
</div>
|
</div>
|
<div class="mt-44">
|
<h2 class="font-30 font-400 c2cColor">{{ $t('请告诉我们您为什么要取消订单？') }}</h2>
|
<van-radio-group v-model="radio">
|
<van-radio class="mt-66" v-for="(item, index) in radioItems" :key="index" :name="item.title">
|
<span>{{ item.title }}</span>
|
<template #icon="props">
|
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
|
</template>
|
</van-radio>
|
<div class="flex items-center h-100 mt-30 tabBackground">
|
<van-radio name="其他">
|
<span>{{ $t('其他') }}</span>
|
<template #icon="props">
|
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
|
</template>
|
</van-radio>
|
</div>
|
</van-radio-group>
|
<div class="textarea-wrapper relative mt-30 tabBackground">
|
<textarea @input="changeVal" class="rounded-xl textarea-text" :placeholder="$t('请输入取消理由')" maxlength="160"
|
v-model="other"></textarea>
|
<span class="absolute bottom-30 right-22 font-25 text-grey">{{ inputNum }}/160</span>
|
</div>
|
</div>
|
<div class="w-full mt-60 pb-100">
|
<van-button :disabled="isDisabled" class="w-full rounded-xl" color="#1D91FF" type="info"
|
@click="enterCancelOrder">{{ $t('确认取消订单') }}
|
</van-button>
|
</div>
|
</div>
|
</div>
|
<!-- 取消订单成功 -->
|
<van-popup class="w-full h-full" position="right" v-model="show">
|
<cancel-success :detail="detail" />
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import { Button, Popup, Radio, RadioGroup } from 'vant';
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import CancelSuccess from "@/page/c2cOrder/components/order-generation/CancelSuccess";
|
import otcApi from '@/API/otc'
|
import {
|
mapMutations
|
} from "vuex";
|
|
import {
|
REASON_FOR_CANCELLATION
|
} from "@/store/const.store";
|
|
export default {
|
name: "cancelOrder",
|
data() {
|
return {
|
show: false, // 是否显示取消成功页面
|
radio: this.$t('我不想交易了'),
|
activeIcon: require("@/assets/image/c2c/Group1206.png"),
|
inactiveIcon: require("@/assets/image/c2c/Ellipse112.png"),
|
other: '', // 其他
|
detail: {}, //取消后详情
|
inputNum: 0,
|
radioItems: [
|
{
|
title: this.$t('我不想交易了'),
|
},
|
{
|
title: this.$t('我不满足广告交易条款的要求'),
|
},
|
{
|
title: this.$t('卖家要额外收取费用'),
|
},
|
{
|
title: this.$t('卖家收款方式右问题，无法成功打款'),
|
},
|
]
|
}
|
},
|
methods: {
|
...mapMutations('c2c', [REASON_FOR_CANCELLATION]),
|
changeVal(e) {
|
this.inputNum = e.target.value.length
|
},
|
enterCancelOrder() {
|
let cancelText;
|
if (this.radio === '其他') {
|
cancelText = this.other;
|
} else {
|
cancelText = this.radio;
|
}
|
|
this[REASON_FOR_CANCELLATION](cancelText);
|
|
const remark = this.other || this.radio
|
const order_no = this.$store.state.c2c.order_no
|
console.log(order_no, remark)
|
// 取消订单
|
otcApi.ctcOrderCancel({ order_no, remark }).then(async res => {
|
if (res.code / 1 === 0) {
|
const res = await otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale });
|
this.detail = res.data
|
this.show = true
|
this.$toast(this.$t('取消成功'))
|
}
|
})
|
}
|
},
|
computed: {
|
// ...mapState('c2cBuy', ['count', 'totalPrice', 'createOrderTime', 'orderNumber'])
|
isDisabled() {
|
if (this.radio === '其他') {
|
return this.inputNum === 0
|
} else {
|
return false
|
}
|
}
|
},
|
created() {
|
// console.log(this.count, this.totalPrice, this.createOrderTime, this.orderNumber)
|
// const { detail } = this.$route.query
|
// this.detail = JSON.parse(detail)
|
},
|
components: {
|
[RadioGroup.name]: RadioGroup,
|
[Radio.name]: Radio,
|
[Button.name]: Button,
|
[Popup.name]: Popup,
|
OrderNav,
|
CancelSuccess,
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.img-icon {
|
width: 32px;
|
height: 32px;
|
}
|
|
.textarea-wrapper {
|
textarea {
|
width: 100%;
|
height: 304px;
|
padding: 30px 22px;
|
box-sizing: border-box;
|
background: transparent;
|
|
&::placeholder {
|
color: #B8BCC5;
|
}
|
}
|
}
|
|
.w-full {
|
::v-deep .order-data {
|
.title {
|
color: #5EBA89;
|
}
|
}
|
|
::v-deep {
|
|
.van-radio {
|
align-items: flex-start;
|
padding: 8px 0;
|
}
|
|
.van-radio__label {
|
@include themify() {
|
color: themed("text_color1");
|
}
|
}
|
|
.van-button--info {
|
@include themify() {
|
background: themed("btn_main");
|
}
|
|
@include themify() {
|
border-color: themed("btn_main");
|
}
|
}
|
}
|
.textarea-text{
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
</style>
|
