166 lines
7.2 KiB
Vue
166 lines
7.2 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
// "needLogin": true,
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="bg">
|
||
<view>
|
||
<navbar title="购买会员" custom-class='!bg-[#F6F7F8]'></navbar>
|
||
</view>
|
||
|
||
<view class="mt-24rpx mx-30rpx">
|
||
<view class="text-center">
|
||
<view class="text-48rpx leading-66rpx text-[#303133]">￥499.00</view>
|
||
<view class="mt-20rpx text-28rpx leading-40rpx text-[#9CA3AF]">开通会员，解锁更多精彩内容！</view>
|
||
</view>
|
||
|
||
<!-- 支付方式 -->
|
||
<view class="mt-66rpx">
|
||
<view class="mx-30rpx text-32rpx leading-44rpx text-[#303133]">支付方式</view>
|
||
<view class="bg-white rounded-16rpx px-30rpx py-26rpx mt-22rpx">
|
||
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
|
||
<block v-for="(item, index) in PayList" :key="index">
|
||
<view class="flex justify-between items-center" v-if="item.type === PayCategory.WeChatPay">
|
||
<view class="flex items-center">
|
||
<wd-img width="50rpx" height="50rpx" :src="`${OSS}${item.icon}`"></wd-img>
|
||
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
||
</view>
|
||
<view class="flex items-center">
|
||
<wd-radio :value="item.value">
|
||
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
|
||
</wd-radio>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</wd-radio-group>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推广方式 -->
|
||
<view class="mt-60rpx">
|
||
<view class="mx-30rpx text-32rpx leading-44rpx text-[#303133]">推广方式</view>
|
||
<view class="bg-white rounded-16rpx py-26rpx mt-28rpx pay-tabs">
|
||
<wd-tabs v-model="tab" swipeable slidable="always">
|
||
<wd-tab title="门店">
|
||
<view>
|
||
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
|
||
</view>
|
||
<view class="mx-30rpx mt-34rpx flex items-center">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-28rpx">门店推广</view>
|
||
<view class="bg-[#F8F9FA] px-28rpx p-20rpx text-30rpx text-[#C9C9C9] h-80rpx rounded-8rpx flex items-center flex-1" @click="showStorePopup = true">
|
||
<text class="mr-14rpx">请选择门店</text>
|
||
<wd-icon name="arrow-down" size="22rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</wd-tab>
|
||
<wd-tab title="个人">
|
||
<view>
|
||
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
|
||
</view>
|
||
<view class="mx-30rpx mt-34rpx flex items-center">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-28rpx">个人推广</view>
|
||
<view class="flex items-center flex-1">
|
||
<wd-input type="text" v-model="person" no-border custom-class="!bg-[#F6F7F8] !rounded-8rpx w-full" custom-input-class="!px-32rpx !h-80rpx">
|
||
</wd-input>
|
||
</view>
|
||
</view>
|
||
</wd-tab>
|
||
</wd-tabs>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fixed left-0 right-0 bottom-92rpx z-2 bg-[#4C9F44] text-[#fff] flex justify-center items-center h-90rpx rounded-8rpx mx-60rpx" @click="buy.handleBuyVip">
|
||
立即购买
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择门店 -->
|
||
<wd-popup v-model="showStorePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||
<view class="relative">
|
||
<view class="absolute top-18rpx right-30rpx" @click="showStorePopup = false">
|
||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||
</view>
|
||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择门店</view>
|
||
<scroll-view scroll-y class="h-500rpx pb-20rpx">
|
||
<view class="mx-56rpx" v-for="(item, index) in 5" :key="index">
|
||
<view class="flex items-center justify-between mb-66rpx" @click="buy.handleChooseStore(item)">
|
||
<view class="mr-32rpx">
|
||
<wd-img width="80rpx" height='80rpx' :src="`${OSS}icon/icon_location3.png`"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view>这是茶馆名字</view>
|
||
<view class="text-28rpx leading-40rpx text-[#909399] flex items-center mt-10rpx">
|
||
<view>距您5.3km</view>
|
||
<view>
|
||
<wd-divider vertical />
|
||
</view>
|
||
<view class="w-350rpx line-1">北京市海淀区宏福苑西区20号楼2单元30</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script lang="ts" setup>
|
||
import { PayList, PayCategory, PayValue } from '@/utils/pay'
|
||
|
||
const pay = ref<number>(PayValue.WeChatPay) // 默认微信支付方式
|
||
const OSS = inject('OSS')
|
||
|
||
// 三种权益身份(普通会员、VIP会员、合伙人)
|
||
const vipTypes = ['normal', 'vip', 'partner']
|
||
const currentVipType = ref<string>('normal') // 当前权益身份
|
||
|
||
// 推广方式
|
||
const tab = ref<number>(0)
|
||
const person = ref<string>('') // 个人推广码
|
||
const showStorePopup = ref<boolean>(false) // 显示门店列表弹窗
|
||
|
||
onLoad(() => {
|
||
// 模拟获取用户身份
|
||
setTimeout(() => {
|
||
currentVipType.value = 'partner'
|
||
}, 1000)
|
||
})
|
||
|
||
const buy = {
|
||
// 选择门店
|
||
handleChooseStore: (item: any) => {
|
||
|
||
},
|
||
|
||
// 购买会员
|
||
handleBuyVip: () => {
|
||
uni.navigateTo({
|
||
url: '/pages/notice/pay?type=vip'
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: $cz-page-background;
|
||
}
|
||
|
||
.pay-tabs {
|
||
:deep() {
|
||
.wd-tabs__line {
|
||
background-color: #4C9F44;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|