购买会员页面调整

master
wangxiaoping 5 years ago
parent 96dbcd5b7e
commit 723e99e211

@ -53,6 +53,7 @@ Vue.prototype.reqByToken = (url, params, cb, method) => {
method = method || 'POST' method = method || 'POST'
const phone_token = uni.getStorageSync('phone_token') const phone_token = uni.getStorageSync('phone_token')
params.token = phone_token.token params.token = phone_token.token
console.log(url)
uni.request({ uni.request({
url: appConfig.baseUrl + url, url: appConfig.baseUrl + url,
method: method, method: method,

@ -49,18 +49,20 @@
dueDate: currentDate, dueDate: currentDate,
token: '', token: '',
phone: '', phone: '',
productId: '', productId: ''
}, },
token: '', token: '',
openid: '', openid: '',
package_id: '',
} }
}, },
onLoad() { onLoad(options) {
const phone_token = uni.getStorageSync('phone_token') const phone_token = uni.getStorageSync('phone_token')
this.info.phone = phone_token.phone this.info.phone = phone_token.phone
this.token = phone_token.token this.token = phone_token.token
let user_info = weixin.getUserInfoCache() let user_info = weixin.getUserInfoCache()
this.openid = user_info.openid this.openid = user_info.openid
this.package_id = options.package_id
}, },
methods: { methods: {
pay() { pay() {

@ -18,7 +18,7 @@
</view> </view>
<view class="couponList"> <view class="couponList">
<view class="couponTop"> <view class="couponTop">
<image class="couponPic" mode="scaleToFill" src="../../static/banner@3x.png"></image> <image class="couponPic" mode="scaleToFill" src="../../static/banner@3x.jpg"></image>
<view class="info"> <view class="info">
<text class="h3">5折优惠券<text class="iconfont icon-info"></text></text> <text class="h3">5折优惠券<text class="iconfont icon-info"></text></text>
<text class="p">2021.02.10-2021.03.08 14:00</text> <text class="p">2021.02.10-2021.03.08 14:00</text>

Before

Width:  |  Height:  |  Size: 694 B

After

Width:  |  Height:  |  Size: 694 B

Before

Width:  |  Height:  |  Size: 928 B

After

Width:  |  Height:  |  Size: 928 B

@ -1,10 +1,11 @@
{ {
"pages": [{ "pages": [
"path": "pages/member/member", {
"path": "pages/home/home",
"style": { "style": {
"navigationBarTitleText": "加入会员", "navigationBarTitleText": "优孕课堂",
"navigationBarBackgroundColor": "#fff", "navigationBarBackgroundColor": "#FF578A",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "white"
} }
}, },
@ -17,7 +18,15 @@
} }
}, },
{
"path": "pages/member/member",
"style": {
"navigationBarTitleText": "加入会员",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
},
{ {
"path": "pages/my/my", "path": "pages/my/my",
"style": { "style": {
@ -279,23 +288,23 @@
"borderStyle": "black", "borderStyle": "black",
"position": "bottom", "position": "bottom",
"list": [{ "list": [{
"text": "活动", "text": "首页",
"pagePath": "pages/active/active", "pagePath": "pages/home/home",
"iconPath": "static/tabs/active.png", "iconPath": "static/tabs/active.png",
"selectedIconPath": "static/tabs/active_cur.png" "selectedIconPath": "static/tabs/active_cur.png"
}, },
{ // {
"text": "商城", // "text": "商城",
"pagePath": "pages/shop/shop", // "pagePath": "pages/shop/shop",
"iconPath": "static/tabs/shop.png", // "iconPath": "static/tabs/shop.png",
"selectedIconPath": "static/tabs/shop_cur.png" // "selectedIconPath": "static/tabs/shop_cur.png"
}, // },
{ // {
"text": "促销", // "text": "促销",
"pagePath": "pages/promotion/promotion", // "pagePath": "pages/promotion/promotion",
"iconPath": "static/tabs/promotion.png", // "iconPath": "static/tabs/promotion.png",
"selectedIconPath": "static/tabs/promotion_cur.png" // "selectedIconPath": "static/tabs/promotion_cur.png"
}, // },
{ {
"text": "我的", "text": "我的",
"pagePath": "pages/my/my", "pagePath": "pages/my/my",

@ -0,0 +1,28 @@
<template>
<view class="content">
<image class="banner" mode="widthFix" src="../../static/member_01.jpg"></image>
<view class="joinBTn" @tap="joinUs"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
joinUs(){
uni.navigateTo({
url:"../member/member"
});
}
}
}
</script>
<style>
</style>
<style lang="scss" scoped>
.banner{display:block;width:100%}
.joinBTn{width:690rpx;height:88rpx;color:#fff;margin:30rpx auto;border-radius:8px;font-size:28rpx;text-align: center;line-height: 88rpx;background: #FF578A;}
</style>

@ -2,8 +2,8 @@
<view class="content"> <view class="content">
<image class="logo" src="../../static/logo@3x.png"></image> <image class="logo" src="../../static/logo@3x.png"></image>
<!-- <button v-show="!hasProfile" @click="getUserProfile"></button> --> <button v-show="showProfile" @click="getUserProfile"></button>
<button v-show="hasProfile" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button> <button v-show="!showProfile" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
</view> </view>
</template> </template>
<script> <script>
@ -11,20 +11,21 @@
export default { export default {
data(){ data(){
return{ return{
hasProfile: true, showProfile: false,
openid: '', openid: '',
session_key: '', session_key: '',
userInfo: {} userInfo: {}
} }
}, },
onLoad(options) { onLoad(options) {
this.showProfile = options.showProfile ? true : false
this.getSessionKey() this.getSessionKey()
}, },
methods: { methods: {
getUserProfile() { getUserProfile() {
weixin.getUserProfile((userInfo) => { weixin.getUserProfile((userProfile) => {
this.userInfo = userInfo console.log(userProfile)
this.hasProfile = true uni.navigateBack()
}) })
}, },
getPhoneNumber(e) { getPhoneNumber(e) {

@ -21,18 +21,14 @@
<image class="i_close" @click="close" src="../../static/details_close@2x.png"></image> <image class="i_close" @click="close" src="../../static/details_close@2x.png"></image>
<view class="title">购会员享特权</view> <view class="title">购会员享特权</view>
<view class="cardOuter"> <view class="cardOuter">
<view :class="{cur: cardActive == 0, cardCol: true}" @click="cardActive = 0"> <view v-for="(i, k) in packages" :class="{cur: cardActive == k, cardCol: true}" @click="cardActive = k">
<view>福利卡</view> <view>{{i.name}}</view>
<view class="cardTit">19.9</view> <view class="cardTit">{{i.price}}</view>
</view> </view>
<view :class="{cur: cardActive == 1, cardCol: true}" @click="cardActive = 1"> <!-- <view :class="{cur: cardActive == 1, cardCol: true}" @click="cardActive = 1">
<view>福利卡</view> <view>福利卡</view>
<view class="cardTit">99</view> <view class="cardTit">99</view>
</view> </view> -->
<view :class="{cur: cardActive == 2, cardCol: true}" @click="cardActive = 2">
<view>福利卡</view>
<view class="cardTit">680</view>
</view>
</view> </view>
<button class="buyNow" @click="goBuy"></button> <button class="buyNow" @click="goBuy"></button>
</view> </view>
@ -75,6 +71,7 @@
// //
cropperW: SCREEN_WIDTH, cropperW: SCREEN_WIDTH,
cropperH: SCREEN_HEIGHT, cropperH: SCREEN_HEIGHT,
packages: [],
} }
}, },
onLoad() { onLoad() {
@ -82,6 +79,11 @@
this.user_info = info this.user_info = info
}) })
}, },
onShow() {
if (this.checkLogin()) {
this.getPackages()
}
},
onShareAppMessage() { onShareAppMessage() {
return { return {
title: '加入会员', title: '加入会员',
@ -108,31 +110,44 @@
src: this.baseUrl + r.data.data, // src: this.baseUrl + r.data.data, //
success: res => { success: res => {
let ctx = uni.createCanvasContext('firstCanvas') let ctx = uni.createCanvasContext('firstCanvas')
// ctx.fillStyle = '#fff'; // ctx.fillStyle = '#fff';
// ctx.fillRect(0, 0, 214, 342); // ctx.fillRect(0, 0, 214, 342);
ctx.drawImage('../../static/bg_haibao@2x.jpg', SCREEN_WIDTH * ctx.drawImage('../../static/bg_haibao@2x.jpg', SCREEN_WIDTH *
0.1, (SCREEN_HEIGHT - 50 - SCREEN_WIDTH * 0.8 * 1.65) / 0.1, (SCREEN_HEIGHT - 50 - SCREEN_WIDTH * 0.8 * 1.65) /
2, SCREEN_WIDTH * 0.8, SCREEN_WIDTH * 0.8 * 1.5); 2, SCREEN_WIDTH * 0.8, SCREEN_WIDTH * 0.8 * 1.5);
ctx.drawImage('../../static/bg_haibao1.png', ctx.drawImage('../../static/bg_haibao1.png',
SCREEN_WIDTH * SCREEN_WIDTH *
0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) / 0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) /
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.6 * 1.5); 2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.6 * 1.5);
ctx.drawImage('../../static/member_01.jpg',
ctx.beginPath(); SCREEN_WIDTH * 0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) /
ctx.arc(SCREEN_WIDTH * 0.62+SCREEN_WIDTH * 0.2*0.5, (SCREEN_HEIGHT - 2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.695/ 1.6);
ctx.font = "22px bold";
//
ctx.fillStyle = "#fff";
// xy
ctx.fillText("会员福利孕产礼包", SCREEN_WIDTH * 0.26, SCREEN_WIDTH * 0.695/ 1.4 );
ctx.font = "16px bold";
//
ctx.fillStyle = "#333";
// xy
ctx.fillText("专享大礼包", SCREEN_WIDTH * 0.2, SCREEN_WIDTH * 0.695/ 0.63 );
// ctx.beginPath();
// ctx.arc(SCREEN_WIDTH * 0.62+SCREEN_WIDTH * 0.2*0.5, (SCREEN_HEIGHT -
// 50 - SCREEN_WIDTH * 0.8 * 1.5) / 2 + SCREEN_WIDTH *
// 0.8 * 1.02+SCREEN_WIDTH * 0.2*0.5, SCREEN_WIDTH * 0.2, 2 * Math.PI);
// ctx.clip();
this.circleImg(ctx,res.path, SCREEN_WIDTH * 0.62, (SCREEN_HEIGHT -
50 - SCREEN_WIDTH * 0.8 * 1.5) / 2 + SCREEN_WIDTH * 50 - SCREEN_WIDTH * 0.8 * 1.5) / 2 + SCREEN_WIDTH *
0.8 * 1.02+SCREEN_WIDTH * 0.2*0.5, SCREEN_WIDTH * 0.2, 2 * Math.PI); 0.8 * 1.05, SCREEN_WIDTH * 0.2/2);
ctx.clip();
ctx.drawImage(res.path, SCREEN_WIDTH * 0.62, (SCREEN_HEIGHT -
50 - SCREEN_WIDTH * 0.8 * 1.5) / 2 + SCREEN_WIDTH *
0.8 * 1.02, SCREEN_WIDTH * 0.2, SCREEN_WIDTH * 0.2 );
ctx.draw();
ctx.draw(),
// r:
setTimeout(() => { setTimeout(() => {
uni.canvasToTempFilePath({ uni.canvasToTempFilePath({
canvasId: 'firstCanvas', canvasId: 'firstCanvas',
@ -154,11 +169,22 @@
} }
}) })
}, },
circleImg: function (ctx, img, x, y, r){
ctx.save()
var d = 2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore()
},
shareClose() { shareClose() {
this.$refs.shareCode.close() this.$refs.shareCode.close()
}, },
open() { open() {
this.$refs.popup.open('top') this.$refs.popup.open('top')
}, },
close() { close() {
this.$refs.popup.close() this.$refs.popup.close()
@ -166,8 +192,9 @@
goBuy() { goBuy() {
if (this.checkLogin()) { if (this.checkLogin()) {
this.$refs.popup.close() this.$refs.popup.close()
let package_id = this.packages.length > 0 ? this.packages[this.cardActive].id : 0
uni.navigateTo({ uni.navigateTo({
url: "../../packages/packageBuy/pages/buyMember/buyMember" url: "../../packages/packageBuy/pages/buyMember/buyMember?package_id=" + package_id
}); });
} }
}, },
@ -189,6 +216,11 @@
}); });
// #endif // #endif
}, },
getPackages() {
this.reqByToken('/api/member/get-packages', {}, r => {
this.packages = r
}, 'GET')
},
} }
} }
</script> </script>
@ -284,12 +316,12 @@
.cardOuter { .cardOuter {
display: flex; display: flex;
justify-content: space-between; justify-content:flex-start;
padding: 20rpx; padding: 20rpx;
.cardCol { .cardCol {
width: 224rpx; width: 224rpx;
height: 156rpx; height: 156rpx;
margin:0 15rpx;
border-radius: 8rpx; border-radius: 8rpx;
box-sizing: border-box; box-sizing: border-box;
border: 2rpx solid #F5DFB5; border: 2rpx solid #F5DFB5;

@ -12,33 +12,33 @@
</view> </view>
<view class="myMain"> <view class="myMain">
<view class="myInfo"> <view class="myInfo">
<image mode="scaleToFill" src="../../static/banner@3x.png"></image> <image mode="scaleToFill" :src="userProfile.avatarUrl ? userProfile.avatarUrl : '../../static/banner@3x.jpg'"></image>
<view class="title">王大宝</view> <view class="title">{{userProfile.nickName || '匿名用户'}}</view>
</view> </view>
<view class="myOrder"> <view class="myOrder">
<view class="orderTab"> <view class="orderTab">
<uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem" styleType="text" activeColor="#666"></uni-segmented-control> <uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem" styleType="text" activeColor="#FF578A"></uni-segmented-control>
</view> </view>
<view class="content"> <view class="content">
<view class="tabCol" v-show="current === 0"> <view class="tabCol" v-show="current === 0">
<view class="orderMenu"> <view class="orderMenu">
<view class="menuCol"> <view class="menuCol" @tap="nodata()">
<image src="../../static/icon_daifukuan@2x.png"></image> <image src="../../static/icon_daifukuan@2x.png"></image>
<text>待付款</text> <text>待付款</text>
</view> </view>
<view class="menuCol"> <view class="menuCol" @tap="nodata()">
<image src="../../static/icon_daifuwu@2x.png"></image> <image src="../../static/icon_daifuwu@2x.png"></image>
<text>待服务</text> <text>待服务</text>
</view> </view>
<view class="menuCol"> <view class="menuCol" @tap="nodata()">
<image src="../../static/icon_yifuwu@2x.png"></image> <image src="../../static/icon_yifuwu@2x.png"></image>
<text>已服务</text> <text>已服务</text>
</view> </view>
<view class="menuCol"> <view class="menuCol" @tap="nodata()">
<image src="../../static/icon_daipingjia@2x.png"></image> <image src="../../static/icon_daipingjia@2x.png"></image>
<text>待评价</text> <text>待评价</text>
</view> </view>
<view class="menuCol allOrder"> <view class="menuCol allOrder" @tap="nodata()">
<image src="../../static/icon_dingdan@2x.png"></image> <image src="../../static/icon_dingdan@2x.png"></image>
<text>全部订单</text> <text>全部订单</text>
<image class="line" src="../../static/bg_yinying@2x.png"></image> <image class="line" src="../../static/bg_yinying@2x.png"></image>
@ -47,23 +47,23 @@
</view> </view>
<view class="tabCol" v-show="current === 1"> <view class="tabCol" v-show="current === 1">
<view class="orderMenu"> <view class="orderMenu">
<view class="menuCol"> <view class="menuCol" @tap="nodata()">
<image src="../../static/icon_daifukuan@2x.png"></image> <image src="../../static/icon_daifukuan@2x.png"></image>
<text>待付款</text> <text>待付款</text>
</view> </view>
<view class="menuCol"> <view class="menuCol" @tap="nodata()">
<image src="../../static/icon_daifahuo@2x.png"></image> <image src="../../static/icon_daifahuo@2x.png"></image>
<text>待发货</text> <text>待发货</text>
</view> </view>
<view class="menuCol"> <view class="menuCol" @tap="nodata()">
<image src="../../static/icon_yishouhuo@2x.png"></image> <image src="../../static/icon_yishouhuo@2x.png"></image>
<text>待收货</text> <text>待收货</text>
</view> </view>
<view class="menuCol"> <view class="menuCol" @tap="nodata()">
<image src="../../static/icon_daipingjia@2x.png"></image> <image src="../../static/icon_daipingjia@2x.png"></image>
<text>待评价</text> <text>待评价</text>
</view> </view>
<view class="menuCol allOrder"> <view class="menuCol allOrder" @tap="nodata()">
<image src="../../static/icon_dingdan@2x.png"></image> <image src="../../static/icon_dingdan@2x.png"></image>
<text>全部订单</text> <text>全部订单</text>
<image class="line" src="../../static/bg_yinying@2x.png"></image> <image class="line" src="../../static/bg_yinying@2x.png"></image>
@ -76,74 +76,62 @@
<view class="introBox"> <view class="introBox">
<view class="normal_tit">更多服务</view> <view class="normal_tit">更多服务</view>
<view class="serviceBox"> <view class="serviceBox">
<navigator class="serviceCol" url="../myCollect/myCollect"> <view class="serviceCol" @tap="nodata()">
<view>
<image src="../../static/icon_shoucang_1@2x.png"></image> <image src="../../static/icon_shoucang_1@2x.png"></image>
<text>我的收藏</text> <text>我的收藏</text>
</view> </view>
</navigator> <view class="serviceCol" @tap="nodata()">
<view class="serviceCol">
<image src="../../static/icon_pingjia@2x.png"></image> <image src="../../static/icon_pingjia@2x.png"></image>
<text>评价中心</text> <text>评价中心</text>
</view> </view>
<view class="serviceCol"> <view class="serviceCol" @tap="nodata()">
<image src="../../static/icon_tousu@2x.png"></image> <image src="../../static/icon_tousu@2x.png"></image>
<text>用户投诉</text> <text>用户投诉</text>
</view> </view>
<view class="serviceCol"> <view class="serviceCol" @tap="nodata()">
<image src="../../static/icon_tuikuan@2x.png"></image> <image src="../../static/icon_tuikuan@2x.png"></image>
<text>我的退款</text> <text>我的退款</text>
</view> </view>
<view class="serviceCol"> <view class="serviceCol" @tap="nodata()">
<image src="../../static/icon_fenxiang@2x.png"></image> <image src="../../static/icon_fenxiang@2x.png"></image>
<text>分享</text> <text>分享</text>
</view> </view>
<navigator class="serviceCol" url="../myCoupon/myCoupon"> <view class="serviceCol" @tap="nodata()">
<view>
<image src="../../static/icon_youhuiquan@2x.png"></image> <image src="../../static/icon_youhuiquan@2x.png"></image>
<text>优惠券</text> <text>优惠券</text>
</view> </view>
</navigator>
</view> </view>
</view> </view>
<!--推广业绩--> <!--推广业绩-->
<view class="introBox"> <view class="introBox">
<view class="normal_tit">推广业绩</view> <view class="normal_tit">推广业绩</view>
<view class="serviceBox"> <view class="serviceBox">
<navigator class="serviceCol" url="../myspeadOrder/myspeadOrder"> <view class="serviceCol" @tap="nodata()">
<view >
<image src="../../static/icon_daifukuan@2x.png"></image> <image src="../../static/icon_daifukuan@2x.png"></image>
<text>我的订单</text> <text>我的订单</text>
</view> </view>
</navigator> <view class="serviceCol" @tap="nodata()">
<navigator class="serviceCol" url="../speadApply/speadApply">
<view>
<image src="../../static/icon_shenqingzhuce@2x.png"></image> <image src="../../static/icon_shenqingzhuce@2x.png"></image>
<text>申请注册</text> <text>申请注册</text>
</view> </view>
</navigator>
</view> </view>
</view> </view>
<!--推广工具--> <!--推广工具-->
<view class="introBox"> <view class="introBox">
<view class="normal_tit">推广工具</view> <view class="normal_tit">推广工具</view>
<view class="serviceBox"> <view class="serviceBox">
<navigator class="serviceCol" url="../poster/poster"> <view class="serviceCol" @tap="nodata()">
<view >
<image src="../../static/icon_poster@2x.png"></image> <image src="../../static/icon_poster@2x.png"></image>
<text>专属海报</text> <text>专属海报</text>
</view> </view>
</navigator> <view class="serviceCol" @tap="goTuiguang()">
<navigator class="serviceCol" url="../speadPro/speadPro">
<view>
<image src="../../static/icon_shangpin@2x.png"></image> <image src="../../static/icon_shangpin@2x.png"></image>
<text>推广商品</text> <text>推广申请</text>
</view> </view>
</navigator>
</view> </view>
</view> </view>
<!--为您精选--> <!--为您精选-->
<view class="introBox"> <!--<view class="introBox">
<view class="normal_tit">为您精选</view> <view class="normal_tit">为您精选</view>
<view class="intro_row"> <view class="intro_row">
<view class="row_col"> <view class="row_col">
@ -165,7 +153,7 @@
<view class="price"><text class="font_red">免费</text></view> <view class="price"><text class="font_red">免费</text></view>
</view> </view>
</view> </view>
</view> </view> -->
</view> </view>
</view> </view>
</template> </template>
@ -180,14 +168,22 @@
{title:"活动订单"}, {title:"活动订单"},
{title:"商品订单"} {title:"商品订单"}
], ],
current:0 current:0,
userProfile: {},
} }
}, },
onLoad() { onLoad() {
this.stytemInfo(); this.stytemInfo();
}, },
onShow() {
let userProfile = uni.getStorageSync('user_profile')
if (userProfile) {
this.userProfile = userProfile
} else {
uni.navigateTo({ url: '../login/index?showProfile=1'})
}
},
onPageScroll(e) { onPageScroll(e) {
console.log(e)
var that = this; var that = this;
if(e.scrollTop > 60 ){ if(e.scrollTop > 60 ){
that.showTiele = true; that.showTiele = true;
@ -206,6 +202,17 @@
} }
}) })
}, },
goTuiguang(){
uni.navigateTo({
url:"../../packages/packagePromotion/pages/speadApply/speadApply"
})
},
nodata(){
uni.showToast({
title: '正在建设中',
duration: 1000
});
},
onClickItem(e){ onClickItem(e){
if(this.current !== e.currentIndex) if(this.current !== e.currentIndex)
{ {

@ -38,7 +38,7 @@ export const weixin = {
wx.getUserProfile({ wx.getUserProfile({
desc: '用于完善会员资料', desc: '用于完善会员资料',
success: (res) => { success: (res) => {
uni.setStorageSync(user_info_key, res.userInfo) uni.setStorageSync('user_profile', res.userInfo)
cb(res.userInfo) cb(res.userInfo)
} }
}) })

Loading…
Cancel
Save