You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

698 lines
20 KiB

4 years ago
<template>
<view class="content">
<view class="memberBanner">
<image mode="widthFix" src="../../static/member_01.jpg"></image>
4 years ago
</view>
<view class="memberCon">
<view class="topTit">
<text class="titInner">
<text class="titCon"><text class="f_blue"><text class="f_big">19.9</text></text>专享大礼包</text>
<text class="line"></text>
</text>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">超值产后修复套餐</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="mealCol flex_start flex_wrap">
<view class="colInfo">
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>上门黄疸检测</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后中药熏蒸</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后肩颈调理</text><text class="f_black">1</text></view>
</view>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">超值拍摄套餐1套</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">游泳洗澡</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">早教</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">平江医院四维彩超</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
</view>
<view class="memberCon">
<view class="topTit">
<text class="titInner">
<text class="titCon"><text class="f_blue"><text class="f_big">99</text></text>超级修复女王卡</text>
<text class="line"></text>
</text>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">套餐项目</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="mealCol flex_start flex_wrap">
<view class="colInfo">
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>黄疸检测</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>腹直肌修复</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>磁疗发汗排毒</text><text class="f_black">2</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>经络头疗</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>肩颈调理</text><text class="f_black">2</text></view>
</view>
<view class="colInfo width_453">
<view class="flex_between"><text>露安适尿不湿</text><text class="f_black">1S/56PCS</text></view>
</view>
</view>
4 years ago
</view>
<view class="memberCon">
<view class="topTit">
<text class="titInner">
<text class="titCon"><text class="f_blue"><text class="f_big">680</text></text>超级福利卡</text>
<text class="line"></text>
</text>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">套餐项目</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="mealCol flex_start flex_wrap">
<view class="colInfo">
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>黄疸检测</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>腹直肌修复</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>磁疗发汗排毒</text><text class="f_black">2</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>经络头疗</text><text class="f_black">1</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>肩颈调理</text><text class="f_black">2</text></view>
</view>
<view class="colInfo width_453">
<view class="flex_between"><text>露安适尿不湿</text><text class="f_black">1S/56PCS</text></view>
</view>
</view>
</view>
4 years ago
<view class="joinBox" @click="open"><button>加入会员</button></view>
<view class="shareIcon" @click="shareOpen" v-if="user_info.promotion == 1">
4 years ago
<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">
4 years ago
<view v-for="(i, k) in packages" :class="{cur: cardActive == k, cardCol: true}"
@click="cardActive = k">
<view class="flex_between" >
<view>{{i.name}}</view>
<view class="cardTit">{{i.price}}</view>
</view>
<view class="note">备注{{i.name}}</view>
</view>
<!-- <view :class="{cur: cardActive == 1, cardCol: true}" @click="cardActive = 1">
4 years ago
<view>福利卡</view>
<view class="cardTit">99</view>
</view> -->
4 years ago
</view>
<button class="buyNow" @click="goBuy"></button>
</view>
</uni-popup>
<uni-popup ref="shareCode" :mask-click="true" type="bottom" class="shareBox">
<view class="codeOuter">
4 years ago
<view class="shareCon" @click="shareClose">
4 years ago
<canvas style="width:80%;margin-left:10%;position: absolute;"
:style="{ height:(shareHeight*scare) + 'px', marginTop:(cropperH-(shareHeight*scare))/2+'rpx'}" canvas-id="firstCanvas" id="firstCanvas"></canvas>
<!-- <image class="shareBg" mode="widthFix" src="../../static/bg_haibao@2x.png"></image> -->
<!-- <image class="code" src="../../static/300_qr.png"></image> -->
4 years ago
</view>
<view class="shareBott" :style="{display: shareBtnDisplay}">
4 years ago
<button class="shareCol" @click="shareClose" open-type="share"
style="border-radius:0;flex:1;">发给朋友</button>
<button class="shareCol" @click="save" style="border-radius:0;flex:1;">保存相册</button>
4 years ago
</view>
</view>
4 years ago
</uni-popup>
4 years ago
</view>
</template>
<script>
let sysInfo = uni.getSystemInfoSync();
let SCREEN_WIDTH = sysInfo.screenWidth
4 years ago
let SCREEN_HEIGHT = sysInfo.screenHeight;
let WindowHeight=sysInfo.windowHeight;
let windowWidth=sysInfo.windowWidth;
4 years ago
import {
weixin
} from '../../utils/weixin.js';
export default {
data() {
4 years ago
return {
cardActive: 0,
img: '',
user_info: {
promotion: ''
},
shareBtnDisplay: 'none',
4 years ago
// 动态的宽高
cropperW: SCREEN_WIDTH,
cropperH: SCREEN_HEIGHT,
packages: [],
4 years ago
sharePath: "",
scare:1,
shareHeight:500
4 years ago
}
},
4 years ago
onLoad(option) {
if (option.promotion_id) {
uni.setStorageSync("base_promotion_id", option.promotion_id)
}
4 years ago
weixin.getOpenidInfo(info => {
this.user_info = info
4 years ago
}, false)
this.scare=windowWidth/375;
4 years ago
},
onShow() {
if (this.checkLogin()) {
this.getPackages()
}
},
4 years ago
onShareAppMessage() {
return {
title: '加入会员',
path: 'pages/member/member?promotion_id=' + this.user_info.id,
imageUrl: this.img
4 years ago
}
},
methods: {
4 years ago
shareOpen() {
uni.showLoading({
title: '加载中'
});
4 years ago
var that = this;
4 years ago
this.$refs.shareCode.open()
uni.request({
url: this.baseUrl + '/api/member/get-wxa-qrcode',
method: 'GET',
data: {
4 years ago
path: 'pages/member/member',
scene: 'promotion_id=' + this.user_info.id
4 years ago
},
success: r => {
if (r.data.status === 1) {
uni.getImageInfo({
src: this.baseUrl + r.data.data, // 二维码
success: res => {
4 years ago
var ctx = uni.createCanvasContext('firstCanvas')
var w = SCREEN_WIDTH * 0.8;
var h = this.shareHeight*this.scare;
4 years ago
// ctx.fillStyle = '#fff';
// ctx.fillRect(0, 0, 214, 342);
4 years ago
ctx.drawImage('../../static/bg_haibao@2x.jpg', 0, 0,
w, h
); //(SCREEN_HEIGHT - 50 - SCREEN_WIDTH * 0.8 * 1.65) /2, SCREEN_WIDTH * 0.8, SCREEN_WIDTH * 0.8 * 1.5);
ctx.drawImage('../../static/bg_haibao1.png', 20, 30 + 40, w -
40, h - 100);
/* SCREEN_WIDTH *
0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) /
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.6 * 1.5); */
ctx.drawImage('../../static/member_01.jpg', 20, 30 + 40, w -
40, (h - 60 - 60) * 0.5);
/* SCREEN_WIDTH * 0.15, (SCREEN_HEIGHT - SCREEN_WIDTH *
0.6 * 1.65) /
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.695 / 1.6); */
ctx.font = "22rpx bold";
// 设置颜色
ctx.fillStyle = "#fff";
// 绘制文字参数要写的字x坐标y坐标
4 years ago
ctx.fillText("会员福利孕产礼包", 20, 50);
ctx.font = "16rpx bold";
// 设置颜色
4 years ago
ctx.fillStyle = "#000";
// 绘制文字参数要写的字x坐标y坐标
4 years ago
ctx.fillText("专享大礼包", 40, (h + 50) * 0.5 + 20);
ctx.font = "14rpx bold";
// 设置颜色
ctx.fillStyle = "#3377b7";
// 绘制文字参数要写的字x坐标y坐标
ctx.fillText("¥19.9元起福利卡", 40, (h + 50) * 0.5 + 20 + 30);
let user_info = uni.getStorageSync("user_info_yunyubang");
let userProfile = uni.getStorageSync('user_profile');
var img = '../../static/avatar.jpg';
uni.getImageInfo({
src: userProfile.avatarUrl, // 头像
success: rlogo => {
img = rlogo.path;
}
});
that.circleImg(ctx,
img,
40, h - 60 - w * 0.15,
w * 0.15 / 2);
ctx.font = "12rpx normal";
// 设置颜色
ctx.fillStyle = "#000";
// 绘制文字参数要写的字x坐标y坐标
ctx.fillText(user_info.name + "/" + user_info.phone,
40, h - 40);
this.circleImg(ctx, res.path, w - 40 - w * 0.2, h - 40 - w *
0.2, w * 0.2 / 2);
ctx.draw(),
// r: 半径
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
fileType: 'jpg',
success: (res) => {
this.shareBtnDisplay = 'flex'
uni.hideLoading();
this.img =
'../../static/member_01.jpg'
this.sharePath = res
.tempFilePath;
},
})
}, 100)
4 years ago
}
})
} else {
uni.hideLoading()
4 years ago
this.$refs.shareCode.close()
this.alert(r.data.msg)
}
}
})
4 years ago
},
4 years ago
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);
4 years ago
ctx.restore();
},
4 years ago
shareClose() {
this.$refs.shareCode.close()
},
open() {
this.$refs.popup.open('top')
4 years ago
4 years ago
},
close() {
this.$refs.popup.close()
},
4 years ago
goBuy() {
if (this.checkLogin()) {
this.$refs.popup.close()
let package_id = this.packages.length > 0 ? this.packages[this.cardActive].id : 0
4 years ago
if (this.packages.length == 0) {
4 years ago
uni.showToast({
4 years ago
title: '请选择套餐',
icon: 'none',
duration: 1000
});
} else {
4 years ago
uni.navigateTo({
url: "../../packages/packageBuy/pages/buyMember/buyMember?package_id=" + package_id
});
}
4 years ago
}
},
//保存图片时h5端不能直接保存只能通过预览长按保存
save() {
4 years ago
console.log(1)
4 years ago
let _this = this;
// #ifdef H5
uni.previewImage({
4 years ago
urls: [_this.sharePath]
4 years ago
})
// #endif
// #ifdef APP-PLUS||MP-WEIXIN
uni.saveImageToPhotosAlbum({
4 years ago
filePath: _this.sharePath,
4 years ago
success: function() {
_this.$refs.shareCode.close()
_this.alert('保存成功')
}
});
// #endif
},
getPackages() {
4 years ago
// this.reqByToken('/api/member/get-packages', {}, r => {
// this.packages = r
// }, 'GET')
const phone_token = uni.getStorageSync('phone_token')
4 years ago
weixin.request({
api: '/api/member/get-packages',
4 years ago
method: 'GET',
4 years ago
utilSuccess: r => {
this.packages = r.data
4 years ago
},
4 years ago
utilFail: r => {
console.log(r);
4 years ago
}
4 years ago
})
},
4 years ago
}
}
</script>
<style>
page {
background: linear-gradient(to right, #488e4c 0%,#039786 100%);
4 years ago
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;
z-index:5;
4 years ago
left: 0;
bottom: 0;
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: linear-gradient(to bottom, #488e4c 0%,#039786 100%);
4 years ago
}
}
.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;
flex-direction: column;
4 years ago
padding: 20rpx;
.note{
color:#999;
font-size:24rpx;
text-align: left;
}
4 years ago
.cardCol {
flex:1;
4 years ago
height: 156rpx;
margin: 0 15rpx 15rpx 15rpx;
4 years ago
border-radius: 8rpx;
box-sizing: border-box;
border: 2rpx solid #F5DFB5;
font-size: 28rpx;
color: #999;
text-align: center;
line-height: 2;
padding:10rpx 30rpx;
4 years ago
.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;
4 years ago
box-sizing: border-box;
position: relative;
}
.shareCon {
// width: 500rpx;
// margin: 0 auto;
4 years ago
//position: absolute;
//top: 45%;
//left: 50%;
// transform: translate(-50%, -50%);
4 years ago
.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;
}
}
.memberCon{
width:690rpx;
background: #fff;
border-radius: 8rpx;
padding:30rpx 0;
box-sizing: border-box;
margin-top:20rpx;
.topTit{
font-size:33rpx;
color:#302c2f;
font-weight:700;
padding:0 30rpx;
.titInner{position: relative;}
.titCon{position: relative;z-index:3;}
.line{
display:inline-block;
height:30rpx;
width:110%;
position: absolute;
left:0;
bottom:0;
background: linear-gradient(to bottom, #FDFEFD 0%,#91E4C1 100%);
z-index:1;
}
.f_blue{
color:#0079b8;
}
.f_big{
font-size:43rpx;
padding:0 5rpx;
}
}
.title{
padding:20rpx 30rpx;
.i_left{
image{display:block;width:23rpx;height:23rpx;}
}
.i_right{
image{display:block;width:23rpx;height:23rpx;}
}
.tit_center{
font-size:28rpx;
color:#0c967f;
font-weight: bold;
min-width:250rpx ;
text-align: center;
}
}
.mealCol{
padding:0 20rpx;
.width_453{width:480rpx!important;}
.colInfo{
width:310rpx;
margin:10rpx;
background: #def6eb;
height:50rpx;
border-radius:25rpx;
padding:0 30rpx;
font-size:26rpx;
font-weight:700;
line-height:50rpx;
box-sizing: border-box;
color:#079683;
.f_black{color:#044238;}
}
.colInfo:nth-child(even){
margin:10rpx 0 10rpx 10rpx;
}
}
}
4 years ago
</style>