|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="d-flex mt-5 list">
|
|
|
- <div v-for="(val, i) in items" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(i)">
|
|
|
+ <div v-for="(val, i) in items" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
|
|
|
<div v-if="val.recommend" class="recommend">推荐</div>
|
|
|
<div class="text-center font-weight-bold">{{ val.title }}</div>
|
|
|
<div class="text-center my-5">
|
|
@@ -17,19 +17,47 @@
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<h3 class="my-3">授权范围:</h3>
|
|
|
- <div>联系客户经理为您定制</div>
|
|
|
+ <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
|
|
|
</div>
|
|
|
<div class="text-center item-btn">
|
|
|
- <v-btn color="error" variant="outlined" size="small" rounded @click="handleOpenMembership(val)">开通会员</v-btn>
|
|
|
+ <v-btn v-if="!val.customized" color="error" variant="outlined" size="small" rounded @click="handleOpenMembership(val)">开通会员</v-btn>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="my-10 tips">若注册资本超500万或特殊、行政事业单位,请联系<span class="font-weight-bold text-decoration-underline">高级客户经理</span>定制套餐</div>
|
|
|
- <div class="scan color-666 d-flex flex-column align-center">
|
|
|
+ <div class="my-10 tips">若注册资本超500万或特殊、行政事业单位,请联系<span class="font-weight-bold">高级客户经理</span>定制套餐</div>
|
|
|
+ <div class="scan color-666 d-flex flex-column align-center" v-if="active === 4">
|
|
|
<div class="font-weight-bold">微信扫一扫</div>
|
|
|
<div class="font-size-15 my-3">高级客户经理为您报价(扫码后可电话联系)</div>
|
|
|
<v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" width="170" height="170"></v-img>
|
|
|
</div>
|
|
|
+ <div v-if="active !== 0 && active !== 4" class="scanCode mb-7">
|
|
|
+ <div class="code pa-5 resume-box">
|
|
|
+ <div class="resume-header">
|
|
|
+ <div class="resume-title">扫码支付</div>
|
|
|
+ </div>
|
|
|
+ <div class="d-flex align-end mt-3">
|
|
|
+ <div class="code-left">
|
|
|
+ <QrCode text="二维码内容二维码内容二维码内容二维码内容" :width="170" />
|
|
|
+ </div>
|
|
|
+ <div class="ml-5">
|
|
|
+ <div class="price">
|
|
|
+ <span class="font-size-13">¥</span>
|
|
|
+ {{ price }}
|
|
|
+ </div>
|
|
|
+ <div class="mt-3 d-flex align-center">
|
|
|
+ <span class="color-666 font-weight-bold mr-5">支付方式</span>
|
|
|
+ <v-chip-group v-model="payment" selected-class="text-primary" mandatory>
|
|
|
+ <v-chip filter v-for="k in paymentList" :key="k.value" :value="k.value" class="mr-3" label>
|
|
|
+ {{ k.label }}
|
|
|
+ <svg-icon class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
|
|
|
+ </v-chip>
|
|
|
+ </v-chip-group>
|
|
|
+ </div>
|
|
|
+ <div class="font-size-14 color-666 mt-3 cursor-pointer">服务协议</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -38,6 +66,12 @@ import { ref } from 'vue'
|
|
|
|
|
|
|
|
|
const active = ref(2)
|
|
|
+const price = ref(33000)
|
|
|
+const payment = ref('wx_native')
|
|
|
+const paymentList = [
|
|
|
+ { label: '微信扫码', icon: 'weChat', size: 21, color: 'success', value: 'wx_native' },
|
|
|
+ { label: '支付宝扫码', icon: 'alipay', size: 23, color: '#3383c6', value: 'alipay_qr' }
|
|
|
+]
|
|
|
const items = ref([
|
|
|
{
|
|
|
title: '普通版',
|
|
@@ -67,8 +101,8 @@ const items = ref([
|
|
|
}
|
|
|
])
|
|
|
|
|
|
-// click
|
|
|
-const handleClickItem = (i) => {
|
|
|
+const handleClickItem = (val, i) => {
|
|
|
+ price.value = val.price
|
|
|
active.value = i
|
|
|
}
|
|
|
|
|
@@ -141,4 +175,30 @@ ul li {
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+.scanCode {
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px;
|
|
|
+ .weChat {
|
|
|
+ border: 1px solid #4cb517;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .alipay {
|
|
|
+ border: 1px solid #00a2f0;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .code-left {
|
|
|
+ border: 1px solid #f1b17a;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #ff9012;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.v-slide-group__content) {
|
|
|
+ background: none !important;
|
|
|
+}
|
|
|
</style>
|