VAVABUY/pages/shop/components/successModel.vue

<template>
  <Popup ref="popRef" mode="center" closeOnClickOverlay>
    <template #content>
      <view class="content">
        <view class="content_success">
          <image src="/static/shop/success.png" class="img"></image>
          <trans _t="支付成功"></trans>
        </view>
      </view>
    </template>
    <template #footer>
      <slot name="footer">
        <view class="footer">
          <view class="submit_btn submit_shop" @click="toShop">
            <trans _t="继续购物" />
          </view>
          <view class="submit_btn" @click="seeOrder">
            <trans _t="查看订单" />
          </view>
        </view>
      </slot>
    </template>
  </Popup>
</template>

<script setup>
import { ref } from "vue";
import Popup from "@/components/popup.vue";
import { t } from "@/locale";
import { useTabbarStore } from "@/store";

const useTabbar = useTabbarStore();

const popRef = ref(null);

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

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

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

const toShop = () => {
  uni.navigateTo({ url: "/pages/index/products?channel=1" });
};

const seeOrder = () => {
  uni.switchTab({ url: "/pages/order/index" });
  useTabbar.getPageCur("order");
};

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

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

:deep(.conts) {
  min-width: 65vw;
}

.content {
  flex: 1;
  .flex_center();

  &_success {
    .flex_center();
    flex-direction: column;
    gap: 20rpx;
  }

  .img {
    width: 90rpx;
    height: 90rpx;
  }
}

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

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

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