VAVABUY/pages/dashboard/components/cancelModel.vue

<template>
  <Popup title="你想取消付款嘛" isClose ref="popRef">
    <template #content>
      <view class="content">
        <view class="tips">
          <trans _t="订单取消后无法恢复，请选择取消付款的原因" />
        </view>
        <up-textarea
          v-model="form.cancelReason"
          :placeholder="t('请输入取消原因')"
          count
          maxlength="200"
          class="u-textarea"
        ></up-textarea>
        <!-- 快捷词条 -->
        <view class="quick-phrases">
          <view
            v-for="(phrase, index) in phrases"
            :key="index"
            class="phrase-tag"
            @click="insertPhrase(phrase)"
          >
            {{ t(phrase) }}
          </view>
        </view>
      </view>
    </template>

    <!-- footer -->
    <template #footer>
      <view class="footer">
        <view class="submit_btn submit_close" @click="close">
          <trans _t="取消" />
        </view>
        <view class="submit_btn" @click="submit">
          <trans _t="确认" />
        </view>
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { reactive, ref, nextTick } from "vue";
import Popup from "@/components/popup.vue";
import { t } from "@/locale";
import { SHOP_ORDER_CANCEL } from "@/api";
import { Toast } from "@/utils";
import { useTabbarStore } from "@/store";

const useTabbar = useTabbarStore();
const props = defineProps({
  oid: { type: String, default: "" },
});
const form = reactive({
  orderid: 0,
  cancelReason: "",
});

const emit = defineEmits(["open", "close"]);

const popRef = ref(null);

// 快捷词条列表
const phrases = ref(["不想要了", "买错了", "价格太贵"]);

// 插入词条方法
const insertPhrase = (phrase) => {
  if (!form.cancelReason || form.cancelReason.endsWith(" ")) {
    form.cancelReason += t(phrase);
  } else {
    form.cancelReason += `,${t(phrase)}`;
  }
};

const open = (id = 0) => {
  form.orderid = id;
  form.cancelReason = "";
  emit("open");
  popRef.value && popRef.value.open();
};

const close = () => {
  emit("close");
  popRef.value && popRef.value.close();
};

const submit = async () => {
  if (!form.cancelReason) {
    Toast(t("请输入取消原因"));
    return;
  }
  try {
    let res = await SHOP_ORDER_CANCEL(form);
    close();
    Toast(res.msg, 1000).then(() => {
      setTimeout(() => {
        uni.switchTab({ url: "/pages/order/index" });
        useTabbar.getPageCur("order");
      }, 1000);
    });
  } catch (error) {
    Toast(error.msg);
  }
};

defineExpose({ open, close });
</script>


<style lang="less" scoped>
@import url("@/style.less");

.content {
  width: 100%;

  .tips {
    color: var(--text-01);
    .size(24rpx);
    margin: 24rpx 0;
  }

  .u-textarea {
    width: 100%;
    height: 200rpx;
    background-color: var(--inputBg);
    border-radius: 16rpx;
    padding: 16rpx;
    color: var(--text-01);
    .size(24rpx);
    box-sizing: border-box;

    /deep/ .u-textarea__content {
      min-height: 100%;
      line-height: 32rpx;
      color: var(--text-01);
    }
  }

  .quick-phrases {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-top: 10rpx;
  }

  .phrase-tag {
    padding: 12rpx 24rpx;
    background-color: #f0f7ff;
    border-radius: 40rpx;
    color: #2979ff;
    font-size: 26rpx;
    border: 1rpx solid #d9e6ff;
  }

  .phrase-tag:active {
    background-color: #e1eeff;
    transform: scale(0.98);
  }
}

.footer {
  .hor(space-between);
  column-gap: 20rpx;

  .submit_btn {
    height: 76rpx;
    padding: 16rpx 100rpx;
    background-color: var(--black);
    color: var(--light);
    .flex_center();
    border-radius: 16rpx;
    .size(24rpx);

    &.submit_close {
      background-color: var(--bg);
      border: 1rpx solid var(--black);
      color: var(--black);
    }
  }
}
</style>