|
|
@ -23,33 +23,37 @@ |
|
|
|
<view class="openvip">开通VIP</view> |
|
|
|
|
|
|
|
<view class="options"> |
|
|
|
<view class="option" v-for="(item,index) in 3" :key="index"> |
|
|
|
<view style="font-weight: 600;">普通VIP会员</view> |
|
|
|
<view |
|
|
|
@click="vipId = item.id" |
|
|
|
:class="{option : true, act : vipId == item.id}" |
|
|
|
v-for="(item,index) in list" :key="index"> |
|
|
|
<view style="font-weight: 600;">{{ item.name }}</view> |
|
|
|
<view style="color: #FF2E2E;"> |
|
|
|
<text style="font-size: 20rpx;">¥</text> |
|
|
|
<text style="font-size: 36rpx;">8</text> |
|
|
|
<text style="font-size: 36rpx;">{{ item.price }}</text> |
|
|
|
</view> |
|
|
|
<view>包年</view> |
|
|
|
<view>{{ item.remark }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="block"> |
|
|
|
<view class="privilege">普通专属特权</view> |
|
|
|
<view class="block" v-if="vip.id"> |
|
|
|
<view class="privilege">{{ vip.name }}</view> |
|
|
|
<view class="cells"> |
|
|
|
<view class="cell"> |
|
|
|
<view class="cell" |
|
|
|
v-for="(item, index) in vip.keys"> |
|
|
|
<image src="../static/mine/characteristic.png" mode="aspectFill" /> |
|
|
|
<view class="text"> |
|
|
|
<view>特权一</view> |
|
|
|
<view style="font-size: 24rpx;">该特权每天可免费查看2个号码。</view> |
|
|
|
<view>{{ item[0] }}</view> |
|
|
|
<view style="font-size: 24rpx;">该{{ item[1] }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="cell"> |
|
|
|
<!-- <view class="cell"> |
|
|
|
<image src="../static/mine/integral.png" mode="aspectFill" /> |
|
|
|
<view class="text"> |
|
|
|
<view>特权二</view> |
|
|
|
<view style="font-size: 24rpx;">快速发布,优先审核</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
<view class="tail"> |
|
|
|
<view> |
|
|
@ -65,7 +69,7 @@ |
|
|
|
<view class="confirm"> |
|
|
|
<view class="box"> |
|
|
|
<view> |
|
|
|
总计金额:¥8 |
|
|
|
总计金额:¥{{ vip.price }} |
|
|
|
</view> |
|
|
|
<view> |
|
|
|
确认协议并支付 |
|
|
@ -78,20 +82,50 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import mixinList from '@/mixins/list.js' |
|
|
|
import { mapState } from 'vuex' |
|
|
|
export default { |
|
|
|
mixins : [mixinList], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
radiovalue: false |
|
|
|
radiovalue: false, |
|
|
|
mixinsListApi : 'commonQueryVipType', |
|
|
|
vipId : '' |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
headImage() { |
|
|
|
return '/static/image/center/headImage.png' |
|
|
|
}, |
|
|
|
|
|
|
|
...mapState([ |
|
|
|
'role', |
|
|
|
]), |
|
|
|
vip(){ |
|
|
|
let vip = {} |
|
|
|
this.list.forEach(n => { |
|
|
|
if(n.id == this.vipId){ |
|
|
|
|
|
|
|
let keys = n.perquisite.split('##') |
|
|
|
|
|
|
|
keys.forEach((s, i) => { |
|
|
|
keys[i] = s.split('$$') |
|
|
|
}) |
|
|
|
|
|
|
|
n.keys = keys |
|
|
|
|
|
|
|
vip = n |
|
|
|
} |
|
|
|
}) |
|
|
|
return vip |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
submit(){ |
|
|
|
|
|
|
|
}, |
|
|
|
getDataThen(list){ |
|
|
|
this.vipId = list[0] && list[0].id |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
@ -157,8 +191,7 @@ |
|
|
|
|
|
|
|
.options { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
.option { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
@ -168,12 +201,17 @@ |
|
|
|
width: 220rpx; |
|
|
|
height: 240rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
|
|
|
|
box-sizing: border-box; |
|
|
|
margin: 12rpx; |
|
|
|
view { |
|
|
|
margin-top: 15rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.act{ |
|
|
|
border: 4rpx solid $uni-color; |
|
|
|
box-shadow: 0 0 10rpx 10rpx rgba($uni-color, 0.2); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.block { |
|
|
@ -188,13 +226,11 @@ |
|
|
|
.cells { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
height: 170rpx; |
|
|
|
|
|
|
|
.cell { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
margin: 20rpx 0; |
|
|
|
.text { |
|
|
|
margin-left: 20rpx; |
|
|
|
color: #707070; |
|
|
|