去掉BNB充值，调试好充值接口

dcc

2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4

 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>