修改购买产品和购买vip的页面

This commit is contained in:
zhl 2019-03-01 11:19:56 +08:00
parent 11fa47302e
commit e8382f2774
3 changed files with 75 additions and 58 deletions

View File

@ -29,7 +29,7 @@
"list": [] "list": []
}, },
"miniprogram": { "miniprogram": {
"current": 0, "current": 1,
"list": [ "list": [
{ {
"id": 0, "id": 0,
@ -39,10 +39,10 @@
"scene": null "scene": null
}, },
{ {
"id": -1, "id": 1,
"name": "vip_page", "name": "vip_page",
"pathName": "pages/buyvip", "pathName": "pages/buyvip",
"query": "", "query": "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjNmUxYjk3NDA5MGY5NTYxM2M3YjgxOSIsImFjY291bnRfaWQiOiI2MDAxXzgwMDNfb0pZYXA1WlZSV0RGRm9Qd09GcGllQmVNRkVocyIsInNlc3Npb25faWQiOiIxNTUwNzU0Njg5XzE1NTA3MTc1OTRfYjA5YTVmOWYxODM0NDFmOWUxMDk1MGJmOTUyZTRjMjFfNTcyOWRkOWYyMzQ5NzdlM2IwMGNjOGFjYWRjMjFiOTQiLCJpYXQiOjE1NTA3NTQ2ODl9.GkUGGb2vwTE1xgZ-UKwl6Tfs3NFawE2V3ZAH91_syY4",
"scene": null "scene": null
} }
] ]

View File

@ -1,69 +1,69 @@
<style lang="less"> <style lang="less">
.msg-box{ .one-product{
width: 750rpx;
height: 300rpx;
border-radius:5px;
background-color: #fff;
display: flex; display: flex;
flex-flow: column; border: 1rpx solid #e5e5e5;
} border-radius: 5rpx;
.msg-title { margin-left: 40rpx;
height: 200rpx; margin-right: 40rpx;
widht: 600rpx; width: 670rpx;
align-items: center;
padding: 10px;
font-size:18px;
color:#777;
}
.msg-action-bar {
height: 80rpx;
overflow: hidden;
display: flex;
border-top: 1rpx solid #e5e5e5;
}
.msg-action-bar .msg-action-btn {
width: 50%;
height: 80rpx;
justify-content: center;
align-items: center;
display: flex;
font-size: 20px;
}
.msg-action-bar .msg-action-btn:first-child {
border-right: 1rpx solid #e5e5e5 ;
}
.msg-action-bar .msg-action-btn:last-child {
color: #3283fa;
}
.row{
width: 750rpx;
text-align: center; text-align: center;
height: 100rpx;
justify-items: center;
align-items: center;
margin-top: 20rpx;
} }
.price {
width: 70%;
border-right: 1rpx solid #e5e5e5;
height: 100%;
position:relative;
}
.price-txt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.product-name {
width: 30%;
}
.selected {
border: 4rpx solid #f85;
}
.product_img {
width: 750rpx;
}
</style> </style>
<template> <template>
<view class="container"> <view class="container">
<view class="msg-box"> <image class="product_img" mode="widthFix" src="https://resource.kingsome.cn/voodoo/5c789e6e486f49165aa057b8.jpeg"/>
<view class="msg-title"> <view class="one-product {{currentType === 'vip'? 'selected' : ''}}" @tap="selectType('vip')">
<view class="row">5元购买一个月</view> <view class="price"><view class="price-txt">30元</view></view>
<view class="row">30元购买终身卡</view> <view class="product-name">终身</view>
</view>
<view class="msg-action-bar">
<view class="msg-action-btn" @tap="buyMonth"><text>购买一个月</text></view>
<view class="msg-action-btn" @tap="buyAll">购买终身VIP</view>
</view>
</view> </view>
<view class="one-product {{currentType === 'vip_month'? 'selected' : ''}}" @tap="selectType('vip_month')">
<view class="price"><view class="price-txt">10元</view></view>
<view class="product-name">一个月</view>
</view>
</view> </view>
<gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap"
@bottomSecondTap.user="bottomSecondTap"/>
</template> </template>
<script> <script>
import wepy from 'wepy'; import wepy from 'wepy';
import http from '../utils/http'; import http from '../utils/http';
import jcEvent from '../common/jc-event'; import jcEvent from '../common/jc-event';
import gameBottomBar from '../components/game-bottom-bar';
export default class BuyVipPage extends wepy.page { export default class BuyVipPage extends wepy.page {
config = { config = {
navigationBarTitleText: '购买VIP' navigationBarTitleText: '购买VIP'
}; };
components = {
gameBottomBar: gameBottomBar
};
data = { data = {
gid: '', gid: '',
bottomActionCfg: { bottomActionCfg: {
@ -73,14 +73,24 @@
secondBtnIconClass: 'icon-forbid', secondBtnIconClass: 'icon-forbid',
secondBtnTitle: '取消' secondBtnTitle: '取消'
}, },
tid: '' tid: '',
currentType: 'vip'
}; };
methods = { methods = {
buyMonth(){ selectType(type) {
this.buy('vip_month'); this.currentType = type;
}, },
buyAll() { bottomMainTap(e) {
this.buy('vip'); console.log('bottomMainTap');
this.buy(this.currentType)
},
bottomSecondTap(e) {
console.log('bottomSecondTap');
wepy.navigateBackMiniProgram({
extraData: {
success: false
}
})
} }
}; };

View File

@ -1,8 +1,11 @@
<style lang="less"> <style lang="less">
.product_img {
width: 750rpx;
}
</style> </style>
<template> <template>
<view class="container"> <view class="container">
<image class="product_img" mode="widthFix" src="https://resource.kingsome.cn/voodoo/5c788d47486f49165aa057b6.jpeg"/>
</view> </view>
<gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap" <gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap"
@bottomSecondTap.user="bottomSecondTap"/> @bottomSecondTap.user="bottomSecondTap"/>
@ -82,7 +85,7 @@
console.log('bottomSecondTap'); console.log('bottomSecondTap');
wepy.navigateBackMiniProgram({ wepy.navigateBackMiniProgram({
extraData: { extraData: {
foo: 'bar' success: false
} }
}) })
} }
@ -102,7 +105,11 @@
icon: 'none', icon: 'none',
duration: 2000 duration: 2000
}) })
jcEvent.emit(jcEvent.events.BUY_GAME_SUCCESS, {}); wepy.navigateBackMiniProgram({
extraData: {
success: true
}
})
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err);