refactor: subscribe module

web/src/views/Subscribe.vue

@@ -1,58 +1,90 @@
 <template>
     <div :style="{ padding: '20px 20px 12px 20px' }">
-        <a-alert message="点击立即购买后，会跳转到支付宝支付页面（沙箱环境，账户名 emrpqt1589@sandbox.com 登录密码/支付密码 111111）" type="info"
-            show-icon /><br />
         <a-row :gutter="30">
-            <a-col :span="8">
+            <a-col :span="12">
                 <a-card :class="activedClass[0]" :bordered="false">
                     <span class="member-tag" style="color: #33B9FE;">基础版</span>
                     <h2 class="title">免费
                         <check-circle-filled v-if="ver == 1" class="icon" />
                     </h2>
-                    <div class="content">满足基础功能需求，永久免费</div><br />
-                    <a-button size="large" class="btn-free" shape="round">免费使用</a-button>
-                    <br />
+                    <div class="content">满足基础功能需求，永久免费</div>
+                    <a-divider />
                     <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理']">
                         <check-circle-filled style="color: #33B9FE;font-size: 20px;;" />
                         <span style="margin-left: 10px;">{{ item }}</span>
                     </div>
+                    <br />
+                    <a-button size="large" class="btn-free" shape="round">免费使用</a-button><br />
                 </a-card>
             </a-col>
-            <a-col :span="8">
+            <a-col :span="12">
                 <a-card :class="activedClass[1]" :bordered="false">
                     <span class="member-tag" style="color: #3788FF;">专业版</span>
-                    <h2 class="title">按月付费，每月18元</h2>
-                    <div class="content">能力不设限，新功能优先体验</div><br />
-                    <a-button v-if="version == 1 || version == 3" type="primary" size="large" class="btn-buy"
-                        @click="onPay(2)" shape="round" :disabled="disabled">立即购买</a-button>
-                    <a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{
+                    <h2 class="title">按订阅时长付费</h2>
+                    <div class="content">能力不设限，新功能优先体验</div>
+                    <a-divider />
+                    <a-row :gutter="0">
+                        <a-col :span="8">
+                            <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理']">
+                                <check-circle-filled style="color: #33B9FE;font-size: 20px;;" />
+                                <span style="margin-left: 10px;">{{ item }}</span>
+                            </div>
+                        </a-col>
+                        <a-col :span="8">
+                            <div class="subscribe-list" v-for="item in ['仪表盘功能', '邮件服务配置', '邮件发送功能']">
+                                <check-circle-filled style="color: #476FFF;font-size: 20px;;" />
+                                <span style="margin-left: 10px;">{{ item }}</span>
+                            </div>
+                        </a-col>
+                    </a-row>
+                    <br />
+                    <a-button v-if="version == 1" type="primary" size="large" class="btn-buy" @click="onBuy"
+                        shape="round" :disabled="disabled">立即购买</a-button>
+                    <a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round"
+                        @click="onBuy">
+                        立即续费
+                    </a-button><br />
+                    <a-button v-if="version == 2" type="link" size="large" class="btn-buy" shape="round">专业版于 {{
                         expired
                     }} 到期</a-button>
-                    <br />
-                    <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验30天']">
-                        <check-circle-filled style="color: #476FFF;font-size: 20px;;" />
-                        <span style="margin-left: 10px;">{{ item }}</span>
-                    </div>
-                </a-card>
-            </a-col>
-            <a-col :span="8">
-                <a-card :class="activedClass[2]" :bordered="false">
-                    <span class="member-tag" style="color: #3788FF;">高级版</span>
-                    <h2 class="title">按年付费，每年198元</h2>
-                    <div class="content">能力不设限，新功能优先体验</div><br />
-                    <a-button v-if="version == 1 || version == 2" type="primary" size="large" class="btn-buy"
-                        @click="onPay(3)" shape="round" :disabled="disabled">立即购买</a-button>
-                    <a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{
-                        expired
-                    }} 到期</a-button>
-                    <br />
-                    <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验365天']">
-                        <check-circle-filled style="color: #476FFF;font-size: 20px;;" />
-                        <span style="margin-left: 10px;">{{ item }}</span>
-                    </div>
                 </a-card>
             </a-col>
         </a-row>
+        <a-modal v-model:visible="visible" title="选择订阅类型" @ok="onPay" @cancel="onCancel" cancelText="取消" okText="支付"
+            width="600px" :centered="true">
+            <div style="height: 45vh;overflow-y: scroll;padding: 0 15px;">
+                <a-alert message="支付提示"
+                    description="点击支付后，会跳转到支付宝支付页面。您可以使用支付宝沙箱环境的账户名 emrpqt1589@sandbox.com 和 登录密码/支付密码 111111，完成支付。"
+                    type="info" show-icon /><br />
+                <a-form ref="subscribeFormRef" :model="subscribe" name="subscribe" :rules="rules">
+                    <a-row :gutter="16">
+                        <a-col :span="24">
+                            <a-form-item label="订阅时长" name="duration">
+                                <a-select v-model:value="subscribe.duration" placeholder="请选择">
+                                    <a-select-option :value="30">1个月</a-select-option>
+                                    <a-select-option :value="90">3个月</a-select-option>
+                                    <a-select-option :value="180">6个月</a-select-option>
+                                    <a-select-option :value="365">一年</a-select-option>
+                                    <a-select-option :value="730">两年</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                            <a-form-item label="支付方式" name="payMode">
+                                <a-radio-group v-model:value="subscribe.payMode">
+                                    <a-radio :value="1">支付宝</a-radio>
+                                    <a-radio :value="2">微信</a-radio>
+                                </a-radio-group>
+                            </a-form-item>
+                            <a-form-item label="合计支付" name="payment">
+                                <span style="color: #ff991f;font-size: 18px;font-weight: 550;">￥{{
+                                    subscribe.duration *
+                                        0.6
+                                }}</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+        </a-modal>
     </div>
 </template>
 
@@ -60,40 +92,74 @@
 import { ref, reactive, onBeforeMount } from 'vue';
 import { CheckCircleFilled } from '@ant-design/icons-vue';
 import { subscribePay, getSubscribeInfo } from '../api/subscribe';
-import { useRouter } from 'vue-router'
-import moment from 'moment'
-
-const router = useRouter()
+import moment from 'moment';
+import { message, Modal } from 'ant-design-vue';
 
 const version = ref(0)
 const expired = ref(undefined)
-const payUrl = ref()
 const visible = ref(false)
 const disabled = ref(false)
 const activedClass = reactive(['card', 'card', 'card'])
 
-const payResult = ref(false)
-const title = ref('')
-const buttonText = ref(undefined)
+const subscribe = reactive({
+    duration: 30,
+    payMode: 1,
+    payment: 0.00
+})
 
-const isClick = (index) => {
-    active.value = index
-}
+// 表单校验
+const rules = {
+    duration: [{
+        required: true,
+        message: '请选择订阅时长',
+        trigger: 'blur',
+    }],
+    payMode: [{
+        required: true,
+        message: '请选择支付方式',
+        trigger: 'blur',
+    }],
+    payment: [{
+        required: true,
+    }],
+};
+
+const payResult = ref(false)
+const subscribeFormRef = ref()
 
 // 初始化数据
 onBeforeMount(() => { subscribeInfo() })
 
+// 点击购买
+const onBuy = () => {
+    visible.value = true
+}
+
 // 点击支付
-const onPay = (ver) => {
-    let param = {
-        version: ver
+const onPay = () => {
+    if (subscribe.payMode == 2) {
+        message.error('暂不支持微信支付！')
+        return
     }
-    subscribePay(param).then((res) => {
-        if (res.data.code == 0) {
-            visible.value = false
-            payResult.value = true
-            window.open(res.data.data.payUrl, '_self')
+    subscribeFormRef.value.validateFields().then(() => {
+        let param = {
+            duration: subscribe.duration
         }
+        subscribePay(param).then((res) => {
+            if (res.data.code == 0) {
+                visible.value = false
+                payResult.value = true
+                Modal.info({
+                    title: '正在跳转到支付宝支付页面...',
+                    centered: true,
+                    okText: '返回',
+                    onOk() {
+                        window.stop()
+                    },
+                });
+                window.open(res.data.data.payUrl, '_self')
+            }
+        })
     })
 }
 
@@ -147,19 +213,19 @@ const subscribeInfo = () => {
 }
 
 .card {
-    min-height: 450px;
+    min-height: 480px;
     box-shadow: 0 1px 10px 0 rgb(33 41 48 / 5%);
 }
 
 .selected-free-card {
-    min-height: 450px;
+    min-height: 480px;
     box-shadow: 0 1px 10px 0 rgb(33 41 48 / 5%);
     border: 2px solid #ceebfa;
     background: #f0faff;
 }
 
 .selected-card {
-    min-height: 450px;
+    min-height: 480px;
     box-shadow: 0 1px 10px 0 rgb(33 41 48 / 5%);
     border: 2px solid #d6ddf9;
     background: #f3f6fd;