项目初始化

web/src/views/backend/module/components/buy.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <el-dialog v-model="state.dialog.buy" class="buy-dialog" :title="t('module.Confirm order info')" top="20vh" width="28%">
+            <div v-loading="state.loading.buy">
+                <el-alert :title="t('module.Module installation warning')" type="error" :center="true" :closable="false" />
+                <div v-if="!isEmpty(state.buy.info)" class="order-info">
+                    <div class="order-info-item">{{ t('module.Order title') }}：{{ state.buy.info.title }}</div>
+                    <div class="order-info-item">{{ t('module.Order No') }}：{{ state.buy.info.sn }}</div>
+                    <div class="order-info-item">{{ t('module.Purchase user') }}：{{ specificUserName(baAccount) }}</div>
+                    <div class="order-info-item">
+                        {{ t('module.Order price') }}：
+                        <span v-if="!state.buy.info.purchased" class="order-price">
+                            {{ currency(state.buy.info.amount, state.buy.info.pay.money ? 1 : 0) }}
+                        </span>
+                        <span v-else class="order-price">{{ t('module.Purchased, can be installed directly') }}</span>
+                    </div>
+                    <div class="order-footer">
+                        <div class="order-agreement">
+                            <el-checkbox v-model="state.buy.agreement" size="small" label="" />
+                            <span>
+                                {{ t('module.Understand and agree') }}《
+                                <a
+                                    href="https://doc.buildadmin.com/guide/other/appendix/templateAgreement.html"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    {{ t('module.Module purchase and use agreement') }}
+                                </a>
+                                》
+                            </span>
+                        </div>
+                        <div class="order-info-buttons">
+                            <template v-if="!state.buy.info.purchased">
+                                <el-button
+                                    v-if="state.buy.info.pay.score"
+                                    :loading="state.loading.common"
+                                    @click="onPay('score')"
+                                    v-blur
+                                    type="warning"
+                                >
+                                    {{ t('module.Point payment') }}
+                                </el-button>
+                                <template v-if="state.buy.info.pay.money">
+                                    <el-button :loading="state.loading.common" @click="onPay('balance')" v-blur type="warning">
+                                        {{ t('module.Balance payment') }}
+                                    </el-button>
+                                    <el-button :loading="state.loading.common" @click="onPay('wx')" v-blur type="success">
+                                        {{ t('module.Wechat payment') }}
+                                    </el-button>
+                                    <el-button :loading="state.loading.common" @click="onPay('zfb')" v-blur type="primary">
+                                        {{ t('module.Alipay payment') }}
+                                    </el-button>
+                                </template>
+                            </template>
+                            <el-button
+                                v-else
+                                :loading="state.loading.common"
+                                @click="onPreInstallModule(state.buy.info.uid, state.buy.info.id, true)"
+                                v-blur
+                                type="warning"
+                            >
+                                {{ t('module.Install now') }}
+                            </el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from 'lodash-es'
+import { useI18n } from 'vue-i18n'
+import { currency, onPay, onPreInstallModule, specificUserName } from '../index'
+import { state } from '../store'
+import { useBaAccount } from '/@/stores/baAccount'
+
+const { t } = useI18n()
+const baAccount = useBaAccount()
+</script>
+
+<style scoped lang="scss">
+.order-info {
+    padding: 10px 0;
+    .order-info-item {
+        padding-top: 6px;
+    }
+    .order-footer {
+        padding-top: 20px;
+        .order-agreement {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            span {
+                padding-left: 4px;
+            }
+            a {
+                text-decoration: none;
+                color: var(--el-color-primary);
+            }
+        }
+        .order-info-buttons {
+            padding-top: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}
+@media screen and (max-width: 1440px) {
+    :deep(.buy-dialog) {
+        --el-dialog-width: 26% !important;
+    }
+}
+@media screen and (max-width: 1280px) {
+    :deep(.buy-dialog) {
+        --el-dialog-width: 32% !important;
+    }
+}
+@media screen and (max-width: 1024px) {
+    :deep(.buy-dialog) {
+        --el-dialog-width: 70% !important;
+    }
+}
+</style>