wx-yunyubang-miniprogram/pages/member/member.vue

<template>
	<view class="content">
		<view class="memberBanner"><image mode="widthFix" src="../../static/1_01.jpg"></image></view>
		<view class="memberBanner"><image mode="widthFix" src="../../static/1_02.jpg"></image></view>
		<view class="joinBox" @click="open"><button>加入会员</button></view>
		<view class="shareIcon" @click="shareOpen"><image src="../../static/share.png"></image></view>
		<uni-popup ref="popup" :mask-click="false" type="bottom" class="popBox">
			<view class="memberPop">
				<image class="i_close" @click="close" src="../../static/details_close@2x.png"></image>
				<view class="title">购会员，享特权</view>
				<view class="cardOuter">
					<view class="cardCol cur">
						<view>福利卡</view>
						<view class="cardTit">19.9元</view>
					</view>
					<view class="cardCol">
						<view>福利卡</view>
						<view class="cardTit">99元</view>
					</view>
					<view class="cardCol">
						<view>福利卡</view>
						<view class="cardTit">680元</view>
					</view>
				</view>
				<view class="buyNow" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即购买</view>
			</view>
		</uni-popup>
		<uni-popup ref="shareCode" :mask-click="true" type="bottom" class="shareBox">
			<view class="codeOuter">
				<view class="shareCon"> 
					<image class="shareBg" mode="widthFix" src="../../static/bg_haibao@2x.png"></image>
					<image class="code" src="../../static/300_qr.png"></image>
				</view>
				<view class="shareBott">
					<view class="shareCol" @click="shareClose">发给朋友</view>
					<view class="shareCol" @click="shareClose">保存相册</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {weixin} from '../../utils/weixin.js';
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
			shareOpen() {
				this.$refs.shareCode.open()
			},
			shareClose() {
				this.$refs.shareCode.close()
			},		
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			goBuy() {
				this.$refs.popup.close()
                uni.navigateTo({
                    url:"../buyMember/buyMember"
                });				
			},
			getPhoneNumber(e) {
				console.log(e)
				if (e.detail.iv) {
				  weixin.getOpenidInfo(openidInfo => {
					  uni.request({
						url: this.baseUrl + '/api/member/get-phone-by-openid',
						method: 'POST',
						data: {
						  session_key: openidInfo.session_key,
						  iv: e.detail.iv,
						  encryptedData: e.detail.encryptedData
						},
						success: (r) => {
							if (r.data.code == 0) {
								const phone = r.data.data.purePhoneNumber
								uni.navigateTo({
								    url:"../buyMember/buyMember?phone=" + phone
								});	
							} else {
							  uni.showToast({title: '手机号获取失败', duration: 2000, icon: 'none'})
							}
						}
					  })
				  })
				}
			},
		}
	}
</script>
<style>
	page{background: #fff;padding-bottom:160rpx;}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.memberBanner{
		display:block;width:100%;
		image{display:block;width:100%;}
	}
	.joinBox{
		width:100%;padding:30rpx;box-sizing: border-box;position:fixed;left:0;bottom:0;background: #fff;box-shadow:-5rpx 0px 20rpx rgba(0,0,0,0.1);
		button{width:100%;height:100rpx;color:#fff;font-size:28rpx;text-align: center;line-height: 100rpx;text-align: center;background: #FF578A;}
	}
	.popBox{background: #fff;width:100%;}
	.shareIcon{
		position: fixed;
		width:136rpx;
		height:136rpx;
		bottom:150rpx;
		right:30rpx;
		z-index:9;
		image{display:block;width:136rpx;height:136rpx;}
	}
	.memberPop{
		background: #fff;width:100%;position: fixed;padding-bottom:50rpx;bottom:0;left:0;
		.title{font-size:36rpx;color:#000;text-align: center;padding:25rpx 0;}
		.i_close{display:block;width:38rpx;height:36rpx;position: absolute;top:30rpx;right:30rpx;}
		.cardOuter{
			display:flex;justify-content: space-between;padding:20rpx;
			.cardCol{
				width:224rpx;height:156rpx;border-radius: 8rpx;box-sizing: border-box;border:2rpx solid #F5DFB5;font-size:28rpx;color:#999;text-align: center;line-height: 2;display:flex;flex-direction: column;justify-content:center;align-items: center;align-content: center;
				.cardTit{color:#333;font-size:32rpx;font-weight:700;}
			}
			.cardCol.cur{
				border:2rpx solid #E40280;box-shadow: 0 0 15rpx rgba(228,2,128,0.4);color:#FF578A;
				.cardTit{color:#FF578A;}
			}
		}
		.buyNow{width:500rpx;height:80rpx;border-radius:40rpx;color:#fff;font-size:30rpx;text-align: center;line-height: 80rpx;text-align: center;background: #FF578A;margin:30rpx auto 0 auto;}
	}
	.shareBox{background:rgba(0,0,0,0.5);}
	.codeOuter{width:100%;height:100vh;background:rgba(0,0,0,0.5);padding-top:13vh;box-sizing: border-box;position: relative;}
	.shareCon{
		width:500rpx;margin:0 auto;position: relative;
		.code{width:300rpx;height:300rpx;display:block;position: absolute;left:50%;margin-left:-150rpx;top:50%;margin-top:-150rpx;}
	}
	.shareBott{
		position: fixed;bottom:0;left:0;width:100%;display:flex;justify-content: flex-start;
		.shareCol{width:50%;height:100rpx;text-align:center;line-height: 100rpx;font-size:30rpx;background:#FF578A;color:#fff;}
		.shareCol:first-child{background:#e8e8e8;color:#666;}
	}
</style>