|
|
@@ -6,8 +6,8 @@
|
|
|
<li v-for="(item, index) in 4" :key="index">小标题优惠文案</li>
|
|
|
</ul> -->
|
|
|
</div>
|
|
|
- <ul class="member-list">
|
|
|
- <li v-for="(item, index) in list" :key="index">
|
|
|
+ <div class="member-list">
|
|
|
+ <div v-for="(item, index) in list" :key="index" class="li">
|
|
|
<div class="name">{{ item.typeName }}</div>
|
|
|
<div class="desc">{{ item.description }}</div>
|
|
|
<div class="flex-align-center price">
|
|
|
@@ -18,31 +18,55 @@
|
|
|
</div>
|
|
|
<!-- <div class="price-right">￥79.00/月</div> -->
|
|
|
</div>
|
|
|
- <div class="btn" :class="{btns:item.memberType == 2}" @click="confirmBuy({
|
|
|
- callback: getList,
|
|
|
- appStore,
|
|
|
- router,
|
|
|
- type: 'baoMiBalance',
|
|
|
- price: item.price,
|
|
|
- t,
|
|
|
- productId: item.typeId,
|
|
|
- orderType: 'member_recharge',
|
|
|
- payMethod: 'BMI'
|
|
|
- })">{{ $t('personalCenter.activate') }}{{ item.typeName }}</div>
|
|
|
+ <div class="btn" :class="{ btns: item.memberType == 2 }" @click="pay(item)">{{ $t('personalCenter.activate')
|
|
|
+ }}{{
|
|
|
+ item.typeName }}</div>
|
|
|
<div class="line">
|
|
|
<div class=""></div>
|
|
|
<div class="">{{ $t('personalCenter.zxqy') }}</div>
|
|
|
<div class=""></div>
|
|
|
</div>
|
|
|
- <div class="ul">
|
|
|
- <div v-for="(em, ind) in privilegeRes[item.memberType]" :key="ind" class="li flex-center-between">
|
|
|
+ <div class="uls">
|
|
|
+ <div v-for="(em, ind) in privilegeRes[item.memberType]" :key="ind" class="lis flex-center-between">
|
|
|
<div class="">{{ em.privilegeName }}</div>
|
|
|
<div class="">{{ em.privilegeValue == -1 ? $t('personalCenter.wx') : `${em.privilegeValue}${em.unit ?
|
|
|
em.unit : ''}` }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog v-model="dialogVisible" title="Tips" width="600" align-center>
|
|
|
+ <span>{{ $t('common.payNow') }} {{ itemData.price }} {{ $t('common.baomibi') }}？</span>
|
|
|
+ <template #footer>
|
|
|
+ <div class="flex-center-between">
|
|
|
+ <div class="">
|
|
|
+ <el-checkbox v-model="checked" label="Option 1" size="large">
|
|
|
+ <template #default>
|
|
|
+ <div class="">{{ $t('personalCenter.qydbty') }} <span @click="changeShow"
|
|
|
+ style="color: #2D71FF;font-weight: bold;">《{{ $t('personalCenter.hyxy') }}》</span> </div>
|
|
|
+ </template>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click.stop.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
|
+ <el-button class="gradient" type="primary" @click.stop.prevent="closeDialog">
|
|
|
+ {{
|
|
|
+ $t('common.confirm') }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog v-model="showWithdraw" :title="$t('personalCenter.hyxy')" width="50%" align-center>
|
|
|
+ <div class="" style="height: 500px;overflow-y: scroll;" v-html="agreementContent"></div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer flex-center">
|
|
|
+ <el-button class="gradient" type="primary" @click="confirmAgreement">{{
|
|
|
+ $t('common.confirm') }}</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
@@ -62,6 +86,15 @@ import { confirmBuy } from '@/utils/util.js'
|
|
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
|
|
+import { getAgreementType } from '@/api/common.js'
|
|
|
+
|
|
|
+import { createOrder } from '@/api/order.js'
|
|
|
+
|
|
|
+import DGTMessage from '@/utils/message'
|
|
|
+
|
|
|
+
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+
|
|
|
const { t } = useI18n()
|
|
|
|
|
|
const appStore = useAppStore()
|
|
|
@@ -71,6 +104,88 @@ const router = useRouter()
|
|
|
const list = ref([]);
|
|
|
const privilegeRes = ref({ 1: [], 2: [] })
|
|
|
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const itemData = ref({});
|
|
|
+const checked = ref(false);
|
|
|
+const showWithdraw = ref(false);
|
|
|
+const agreementContent = ref('');
|
|
|
+
|
|
|
+const confirmAgreement = async () => {
|
|
|
+ checked.value = true;
|
|
|
+ showWithdraw.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+const changeShow = async () => {
|
|
|
+ let res = await getAgreementType({
|
|
|
+ agreementType: 'membership_agreement'
|
|
|
+ });
|
|
|
+ if (res.code === 200) {
|
|
|
+ agreementContent.value = res.data.content || '';
|
|
|
+ showWithdraw.value = true;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const closeDialog = async () => {
|
|
|
+
|
|
|
+ if (!checked.value) {
|
|
|
+ return DGTMessage.warning(t('personalCenter.qydbtyhyxy'));
|
|
|
+ }
|
|
|
+ dialogVisible.value = false;
|
|
|
+ if (appStore.userInfo.baoMiBalance < itemData.value.price) {
|
|
|
+ ElMessageBox.confirm(t('common.balanceNotEnough'), t('common.tip'), {
|
|
|
+ confirmButtonText: t('common.confirm'),
|
|
|
+ cancelButtonText: t('common.cancel'),
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ // 确认购买
|
|
|
+ router.push({
|
|
|
+ path: `/order-confirm`,
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ // 取消购买
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const res = await createOrder({
|
|
|
+ payMethod:'BMI',
|
|
|
+ orderType:'member_recharge',
|
|
|
+ orderAmt: itemData.value.price,
|
|
|
+ productId: itemData.value.typeId,
|
|
|
+ orderNum: 1
|
|
|
+ })
|
|
|
+ if (res.code === 200) {
|
|
|
+ DGTMessage.success(t('common.paySuccess'))
|
|
|
+ appStore.USERINFO();
|
|
|
+ router.push({ path: '/personal-center/wallet' });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const pay = async (item) => {
|
|
|
+ console.log('item', item)
|
|
|
+ itemData.value = item;
|
|
|
+ dialogVisible.value = true;
|
|
|
+ // let res = await confirmBuy({
|
|
|
+ // memberType: item.memberType,
|
|
|
+ // price: item.price
|
|
|
+ // });
|
|
|
+ // if (res) {
|
|
|
+ // appStore.getUserInfo();
|
|
|
+ // router.push({ path: '/personal-center' });
|
|
|
+ // }
|
|
|
+
|
|
|
+ // confirmBuy({
|
|
|
+ // callback: getList,
|
|
|
+ // appStore,
|
|
|
+ // router,
|
|
|
+ // type: 'baoMiBalance',
|
|
|
+ // price: item.price,
|
|
|
+ // t,
|
|
|
+ // productId: item.typeId,
|
|
|
+ // orderType: 'member_recharge',
|
|
|
+ // payMethod: 'BMI'
|
|
|
+ // })
|
|
|
+}
|
|
|
+
|
|
|
const getprivilegeRes = async (memberType) => {
|
|
|
let privilegeRes = await privilege(memberType);
|
|
|
return privilegeRes.data;
|
|
|
@@ -97,12 +212,6 @@ onMounted(() => {
|
|
|
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
-ul,
|
|
|
-li {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-
|
|
|
.member {
|
|
|
max-width: 1246px;
|
|
|
margin: 0 auto;
|
|
|
@@ -128,7 +237,7 @@ li {
|
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
|
- li {
|
|
|
+ .li {
|
|
|
font-size: 18px;
|
|
|
margin-right: 66px;
|
|
|
|
|
|
@@ -144,7 +253,7 @@ li {
|
|
|
gap: 48px;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
- li {
|
|
|
+ .li {
|
|
|
width: 383px;
|
|
|
padding: 24px 32px;
|
|
|
background: #FFFFFF;
|
|
|
@@ -195,6 +304,7 @@ li {
|
|
|
background: linear-gradient(270deg, #FBE8CF 0%, #F8C79D 52.05%, #FADCB9 100%);
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
+
|
|
|
.btns {
|
|
|
color: #FAD8B4;
|
|
|
background: #3B3843;
|
|
|
@@ -204,6 +314,7 @@ li {
|
|
|
// width: 164px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
// background: url('/src/assets/imgs/line@2x.png') no-repeat;
|
|
|
// background-size: 164px 3px;
|
|
|
// background-position: center center;
|
|
|
@@ -220,24 +331,26 @@ li {
|
|
|
&:last-child {
|
|
|
width: 46px;
|
|
|
height: 3px;
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
&:first-child {
|
|
|
- background: linear-gradient(270deg, #8B3D22 0%, rgba(139, 61, 34, 0) 100%);
|
|
|
+ background: linear-gradient(270deg, #8B3D22 0%, rgba(139, 61, 34, 0) 100%);
|
|
|
}
|
|
|
+
|
|
|
&:last-child {
|
|
|
background: linear-gradient(90deg, #8B3D22 0%, rgba(139, 61, 34, 0) 100%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .ul {
|
|
|
+ .uls {
|
|
|
width: 100%;
|
|
|
color: #8B3D22;
|
|
|
font-size: 14px;
|
|
|
|
|
|
- .li {
|
|
|
+ .lis {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
}
|
zhangningning