From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/c2cOrder/cancel-order/cancelOrder.vue | 143 +++++++++++++++++++++++++++++------------------
1 files changed, 87 insertions(+), 56 deletions(-)
diff --git a/src/page/c2cOrder/cancel-order/cancelOrder.vue b/src/page/c2cOrder/cancel-order/cancelOrder.vue
index dd31016..de4812a 100644
--- a/src/page/c2cOrder/cancel-order/cancelOrder.vue
+++ b/src/page/c2cOrder/cancel-order/cancelOrder.vue
@@ -3,41 +3,74 @@
<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="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>
+ <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>
+ <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">
+ <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" />
+ <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>
+ <span>{{ $t("其他") }}</span>
<template #icon="props">
- <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
+ <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>
+ <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
+ :disabled="isDisabled"
+ class="w-full rounded-xl"
+ color="#1D91FF"
+ type="info"
+ @click="enterCancelOrder"
+ >{{ $t("确认取消订单") }}
</van-button>
</div>
</div>
@@ -50,53 +83,49 @@
</template>
<script>
-import { Button, Popup, Radio, RadioGroup } from 'vant';
+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 otcApi from "@/API/otc";
+import { mapMutations } from "vuex";
-import {
- REASON_FOR_CANCELLATION
-} from "@/store/const.store";
+import { REASON_FOR_CANCELLATION } from "@/store/const.store";
export default {
name: "cancelOrder",
data() {
return {
show: false, // 是否显示取消成功页面
- radio: this.$t('我不想交易了'),
+ radio: this.$t("我不想交易了"),
activeIcon: require("@/assets/image/c2c/Group1206.png"),
inactiveIcon: require("@/assets/image/c2c/Ellipse112.png"),
- other: '', // 其他
+ other: "", // 其他
detail: {}, //取消后详情
inputNum: 0,
radioItems: [
{
- title: this.$t('我不想交易了'),
+ title: this.$t("我不想交易了"),
},
{
- title: this.$t('我不满足广告交易条款的要求'),
+ title: this.$t("我不满足广告交易条款的要求"),
},
{
- title: this.$t('卖家要额外收取费用'),
+ title: this.$t("卖家要额外收取费用"),
},
{
- title: this.$t('卖家收款方式右问题，无法成功打款'),
+ title: this.$t("卖家收款方式右问题，无法成功打款"),
},
- ]
- }
+ ],
+ };
},
methods: {
- ...mapMutations('c2c', [REASON_FOR_CANCELLATION]),
+ ...mapMutations("c2c", [REASON_FOR_CANCELLATION]),
changeVal(e) {
- this.inputNum = e.target.value.length
+ this.inputNum = e.target.value.length;
},
enterCancelOrder() {
let cancelText;
- if (this.radio === '其他') {
+ if (this.radio === "其他") {
cancelText = this.other;
} else {
cancelText = this.radio;
@@ -104,29 +133,32 @@
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)
+ 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 => {
+ 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('取消成功'))
+ 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
+ if (this.radio === "其他") {
+ return this.inputNum === 0;
} else {
- return false
+ return false;
}
- }
+ },
},
created() {
// console.log(this.count, this.totalPrice, this.createOrderTime, this.orderNumber)
@@ -140,8 +172,8 @@
[Popup.name]: Popup,
OrderNav,
CancelSuccess,
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
@@ -159,7 +191,7 @@
background: transparent;
&::placeholder {
- color: #B8BCC5;
+ color: #b8bcc5;
}
}
}
@@ -167,12 +199,11 @@
.w-full {
::v-deep .order-data {
.title {
- color: #5EBA89;
+ color: #5eba89;
}
}
::v-deep {
-
.van-radio {
align-items: flex-start;
padding: 8px 0;
@@ -194,10 +225,10 @@
}
}
}
- .textarea-text{
+ .textarea-text {
@include themify() {
- color: themed("text_color");
- }
+ color: themed("text_color");
+ }
}
}
</style>
--
Gitblit v1.9.3