visualization-design/src/views/components/ChargeCloudPublish.vue

<template>
  <div class="cloud-charge">
    <div class="body">
      <li
        v-for="(item, index) in data.vips"
        :key="index"
        class="cloud-item"
        :class="{ active: data.selected === index }"
        @click="data.selected = index"
      >
        <h4 class="mt-16">{{ item.name }}</h4>
        <div class="detail mt-8">{{$t('快速发布')}}，{{$t('提升工作效率')}}</div>
        <div class="detail">{{$t('减少运维工作')}}，{{$t('降低成本')}}</div>
        <div class="detail">{{$t('专注业务')}}，{{$t('创新无负担')}}</div>

        <div class="price">
          <span>￥</span>
          {{ item.price }}
        </div>
        <div v-if="item.originalPrice !== item.price" class="original-price">
          <span>{{$t('原价')}}：￥</span>
          {{ item.originalPrice }}
        </div>
      </li>
    </div>
    <div class="btns">
      <t-button @click="onSubmitOrder">{{$t('提交订单')}}</t-button>
    </div>
  </div>

  <t-dialog
    v-if="wechatPayDialog.show"
    v-model:visible="wechatPayDialog.show"
    class="pay-dialog"
    :header="$t('乐吾乐收银台')"
    :close-on-overlay-click="false"
    :top="95"
    :width="700"
    :confirm-btn="$t('支付完成')"
    :cancel-btn="null"
    @close="getPayResult"
    :footer="false"
  >
    <Pay
      :order="data.order"
      :alipay-url="data.order.alipayUrl"
      :code-url="data.order.codeUrl"
      @success="onSuccess"
    />
  </t-dialog>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive } from 'vue';
import axios from 'axios';
import Pay from './Pay.vue';

const { projectId } = defineProps<{
  projectId: string;
}>();

const emit = defineEmits(['success']);

const data = reactive<any>({
  vips: [],
  selected: 0,
  order: { id: '', _id: '', codeUrl: '' },
});

const wechatPayDialog = reactive({
  show: false,
});

onBeforeMount(async () => {
  const ret: { list: any } = await axios.post('/api/goods/list', {
    type: '云发布',
    sort: { createdAt: 1 },
  });
  data.vips = ret.list;
});

const onSubmitOrder = async () => {
  const result: any = await axios.post('/api/order/submit', {
    goods: data.vips[data.selected],
    paymentMethod: '微信',
    data: { id: projectId },
  });
  if (result) {
    data.order = result;
    wechatPayDialog.show = true;
  }
};

const onSuccess = (success: boolean) => {
  emit('success', success);
};

const getPayResult = async () => {
  const result: { state: number } = await axios.post('/api/order/pay/state', {
    id: data.order.id || data.order._id,
  });
  if (result && result.state) {
    return true;
  }
};
</script>

<style lang="postcss" scoped>
.cloud-charge {
  height: 300px;

  display: flex;
  flex-direction: column;

  & > .body {
    flex-grow: 1;
    display: flex;
    margin-left: -10px;
    margin-right: -10px;

    .cloud-item {
      width: 200px;
      border-radius: 6px;
      box-shadow: 0px 1px 20px 0px rgba(0, 10, 38, 0.1);
      margin: 0 10px;
      text-align: center;
      border: 1px solid var(--color-sub-border);

      h1 {
        font-weight: 700;
        line-height: 40px;
        border-radius: 6px 6px 0px 0px;
        box-shadow: 0px 1px 20px 0px rgba(0, 10, 38, 0.1);
        margin-bottom: 16px;
      }

      .detail {
        font-size: 12px;
        line-height: 30px;
        display: flex;
        justify-content: center;
      }

      .price {
        margin-left: -10px;
        margin-top: 20px;
        color: var(--color-bland);
        font-size: 24px;
        text-align: center;

        span {
          font-size: 12px;
          position: relative;
          top: -4px;
        }
      }

      .original-price {
        font-size: 12px;
        color: var(--color-desc);
      }

      &:hover {
        border-color: var(--color-primary);
        cursor: pointer;
      }
      &.active {
        border-color: var(--color-primary);
        cursor: pointer;

        &.disable {
          border-color: transparent;
          cursor: default;
        }
      }
    }
  }

  & > .btns {
    flex-shrink: 0;
    text-align: right;
    margin-top: 20px;
  }
}
</style>