会员
This commit is contained in:
Vinjor
parent
d5070e970f
commit
26245f1099
2
App.vue
2
App.vue
@ -32,5 +32,5 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '@/static/scss/index.scss'
|
@import '@/static/scss/index.scss';
|
||||||
</style>
|
</style>
|
||||||
47
config.js
47
config.js
@ -1,24 +1,27 @@
|
|||||||
// 应用全局配置
|
// 应用全局配置
|
||||||
module.exports = {
|
module.exports = {
|
||||||
baseUrl: 'http://192.168.1.17:8080',
|
baseUrl: 'http://192.168.1.17:8080',
|
||||||
// baseUrl: 'http://localhost:8080',
|
// baseUrl: 'http://localhost:8080',
|
||||||
// 应用信息
|
// 应用信息
|
||||||
appInfo: {
|
appInfo: {
|
||||||
// 应用名称
|
// 应用名称
|
||||||
name: "多点通告",
|
name: "多点通告",
|
||||||
// 应用版本
|
// 应用版本
|
||||||
version: "1.1.0",
|
version: "1.1.0",
|
||||||
// 应用logo
|
// 应用logo
|
||||||
logo: "/static/logo.png",
|
logo: "/static/logo.png",
|
||||||
// 政策协议
|
// 政策协议
|
||||||
agreements: [{
|
agreements: [{
|
||||||
title: "隐私协议",
|
title: "隐私协议",
|
||||||
code: "privacy_agreement"
|
code: "privacy_agreement"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "用户服务协议",
|
title: "用户服务协议",
|
||||||
code: "privacy_agreement"
|
code: "privacy_agreement"
|
||||||
}
|
}, {
|
||||||
]
|
title: "会员协议",
|
||||||
}
|
code: "member_agreement"
|
||||||
}
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -6,7 +6,7 @@
|
|||||||
<view class="vip-box">
|
<view class="vip-box">
|
||||||
<view class="dl-menu-box">
|
<view class="dl-menu-box">
|
||||||
<view v-for="(item,index) in memberCardList" @click="itemClick(index)" class="dl-menu"
|
<view v-for="(item,index) in memberCardList" @click="itemClick(index)" class="dl-menu"
|
||||||
:class="item.id==chooseCardId?'dl-menu click':'dl-menu'">
|
:class="index==chooseCardIndex?'dl-menu click':'dl-menu'">
|
||||||
<!-- 这里的图标要换成动态配置的 -->
|
<!-- 这里的图标要换成动态配置的 -->
|
||||||
<image src="@/static/mine/huang.png" mode="aspectFit"></image>
|
<image src="@/static/mine/huang.png" mode="aspectFit"></image>
|
||||||
{{item.cardName}}
|
{{item.cardName}}
|
||||||
@ -15,12 +15,24 @@
|
|||||||
<!-- 会员卡详情 -->
|
<!-- 会员卡详情 -->
|
||||||
<view class="card-detail-box">
|
<view class="card-detail-box">
|
||||||
<view class="price-box">
|
<view class="price-box">
|
||||||
<view class="price-item">
|
<view
|
||||||
<view>年付会员</view>
|
:class="['price-item',choosePriceIndex==index?'choose':'',1==index?'margin-left-right':'']"
|
||||||
<view><text>¥</text>228</view>
|
v-for="(item,index) in memberCardList[chooseCardIndex].priceList"
|
||||||
<view>折合0.82</view>
|
@click="changePriceIndex(index)">
|
||||||
|
<image v-if="item.isHot" class="hot-img" src="@/static/mine/hot.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<view class="text1">{{item.title}}</view>
|
||||||
|
<view class="text2"><text>¥</text>{{item.price}}</view>
|
||||||
|
<view class="text3">折合{{item.dayPrice}}元/天</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 购买 -->
|
||||||
|
<view class="buy-button">立即开通</view>
|
||||||
|
<!-- 协议 -->
|
||||||
|
<view class="xieyi-box">
|
||||||
|
开通即代表您已阅读并同意<text
|
||||||
|
@click="handleUserAgrement(globalConfig.appInfo.agreements[2])">《{{globalConfig.appInfo.agreements[2].title}}》</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 权益展示区 -->
|
<!-- 权益展示区 -->
|
||||||
@ -62,31 +74,60 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
navigationBarVue
|
navigationBarVue
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
//当前选中的会员卡ID
|
globalConfig: getApp().globalData.config,
|
||||||
|
ifAgree: 0,
|
||||||
|
//当前选中的会员卡下标
|
||||||
chooseCardIndex: 0,
|
chooseCardIndex: 0,
|
||||||
|
//当前选中的会员卡付款下标
|
||||||
|
choosePriceIndex: 0,
|
||||||
// 会员卡数组
|
// 会员卡数组
|
||||||
memberCardList: [{
|
memberCardList: [{
|
||||||
id: "1",
|
id: "1",
|
||||||
cardName: "箐英会员",
|
cardName: "箐英会员",
|
||||||
image: "",
|
image: "",
|
||||||
monthPrice: 28,
|
priceList: [{
|
||||||
quarterPrice: 78,
|
title: "年付会员",
|
||||||
yearPrice: 228,
|
price: 228,
|
||||||
dayPrice: 0.82
|
dayPrice: 0.82,
|
||||||
|
isHot: true
|
||||||
|
}, {
|
||||||
|
title: "季付会员",
|
||||||
|
price: 78,
|
||||||
|
dayPrice: 0.82,
|
||||||
|
isHot: false
|
||||||
|
}, {
|
||||||
|
title: "月付会员",
|
||||||
|
price: 28,
|
||||||
|
dayPrice: 0.82,
|
||||||
|
isHot: false
|
||||||
|
}]
|
||||||
}, {
|
}, {
|
||||||
id: "2",
|
id: "2",
|
||||||
cardName: "钻石会员",
|
cardName: "钻石会员",
|
||||||
image: "",
|
image: "",
|
||||||
monthPrice: 28,
|
priceList: [{
|
||||||
quarterPrice: 78,
|
title: "年付会员",
|
||||||
yearPrice: 228,
|
price: 1228,
|
||||||
dayPrice: 0.82
|
dayPrice: 0.82,
|
||||||
|
isHot: true
|
||||||
|
}, {
|
||||||
|
title: "季付会员",
|
||||||
|
price: 178,
|
||||||
|
dayPrice: 0.82,
|
||||||
|
isHot: false
|
||||||
|
}, {
|
||||||
|
title: "月付会员",
|
||||||
|
price: 128,
|
||||||
|
dayPrice: 0.82,
|
||||||
|
isHot: false
|
||||||
|
}]
|
||||||
}],
|
}],
|
||||||
//权益对比的数组
|
//权益对比的数组
|
||||||
cardList: [{
|
cardList: [{
|
||||||
@ -127,6 +168,21 @@
|
|||||||
*/
|
*/
|
||||||
itemClick(index) {
|
itemClick(index) {
|
||||||
this.chooseCardIndex = index
|
this.chooseCardIndex = index
|
||||||
|
this.choosePriceIndex = 0
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 切换选中的会员卡付款类型
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
changePriceIndex(index) {
|
||||||
|
this.choosePriceIndex = index
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 阅读会员协议
|
||||||
|
*/
|
||||||
|
// 查看相关协议
|
||||||
|
handleUserAgrement(site) {
|
||||||
|
this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -195,7 +251,7 @@
|
|||||||
.card-detail-box {
|
.card-detail-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
padding: 30rpx 20rpx 30rpx 20rpx;
|
padding: 40rpx 20rpx 30rpx 20rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
border: 1rpx solid #96948C;
|
border: 1rpx solid #96948C;
|
||||||
background-color: #1A1A1A;
|
background-color: #1A1A1A;
|
||||||
@ -203,7 +259,95 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
.price-box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.price-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 33%;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
color: #FAE4C8;
|
||||||
|
background-color: #302D29;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.hot-img {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text1 {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text2 {
|
||||||
|
margin: 15rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text3 {
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-left-right {
|
||||||
|
margin: 0 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choose {
|
||||||
|
color: #603B25 !important;
|
||||||
|
background-image: linear-gradient(to bottom, #F8DFC0, #EFCBA0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
color: #010000;
|
||||||
|
background-image: linear-gradient(to right, #F8DFC0, #EFCBA0);
|
||||||
|
margin-top: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xieyi-box {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #707070;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rights-box {
|
.rights-box {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user