<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>
|
