4-26

api/user.js

@@ -269,4 +269,21 @@ export function getcar_status(data) {
 		data
 	});
 }
-
+
+//获取分享海报
+export function getWxmpInviteQrcode(data) {
+	return request({
+		url: '/api/user/getWxmpInviteQrcode',
+		method: 'post',
+		data
+	});
+}
+
+//获取下级
+export function getChildList(data) {
+	return request({
+		url: '/api/user/getChildList',
+		method: 'post',
+		data
+	});
+}

pages/user/model/model.vue

@@ -10,16 +10,19 @@
 			<view class="user-name">
 				{{cardInfo.name || '暂无'}}
 			</view>
-			<button type="default" class="top-btn fx-btn" v-if="!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look" open-type="share">
+			<button :disabled="is_yl" type="default" class="top-btn fx-btn" v-if="(!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look) || is_yl" open-type="share">
 				<image :src="baseURL + '/resource/icon/model1/fx.png'" mode=""></image>
 			</button>
 			<!-- 模板查看次数 -->
-			<view class="top-btn visit mvisit" v-if="look">
+			<view class="top-btn visit mvisit" v-if="look && !is_yl && !shareId">
 				浏览:{{modelInfo.look_count}} 
 			</view>
 			<!-- 别人查看次数 -->
-			<view class="top-btn visit">
-				浏览: 
+			<view class="top-btn visit" v-if="!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look">
+				浏览：{{userInfo.card_look_count}}
+			</view>
+			<view class="top-btn visit" v-if="shareId">
+				浏览：{{cardInfo.card_look_count}}
 			</view>
 		</view>
 		<view class="m-body gr">
@@ -153,7 +156,7 @@
 					分享名片
 				</view>
 			</button>
-			<view class="nav-model" @click="navto('/pages/user/model/modelrz?type=1')">
+			<view class="nav-model" @click="navto('/pages/user/model/modelrz?type=1&modelid=' + mtype)">
 				修改名片
 			</view>
 		</view>
@@ -161,7 +164,7 @@
 		<view class="ljrz" v-if="userInfo.work_type_id <=0" @click="navto('/pages/user/model/modelrz?modelid=' + mtype + '&type=2')">
 			立即认证
 		</view>
-		<view class="create-model flex" v-if="!shareId && !is_yl && userInfo.work_type_id >0 && look">
+		<view class="create-model flex" v-if="!shareId && !is_yl && userInfo.work_type_id >0 && look && islook == 1">
 			<view class="price-show">
 				模板费用：<text>{{modelInfo.price*1}}</text>
 			</view>
@@ -172,7 +175,7 @@
 				购买使用
 			</view>
 		</view>
-		<view class="yl" v-if="is_yl" @click="is_yl = false">
+		<view class="yl" v-if="is_yl" @click="jsyl">
 			结束预览
 		</view>
 	</view>
@@ -201,7 +204,8 @@
 				modelInfo: {},
 				payType: 'wxpay',
 				is_yl: false,
-				look: true,
+				look: true,//不是个人中心过来
+				islook: 1,
 			}
 		},
 		onLoad(opt) {
@@ -224,17 +228,28 @@
 			
 			// this.getUserCardInfo()
 			this.mtype = opt.mtype
+			
+			
 			uni.hideShareMenu();
-			if (opt.look && opt.look == 1) {
-				uni.showShareMenu();
-				this.look = false
-			}
-			if (opt.uid) {
-				this.shareId = opt.uid
-				this.getCommonUserCardInfo(opt.uid)
-			} else {
-				this.getShowTemplateItem()
+			if(opt.look && opt.look == 2) {
+				console.log('daozhe')
+				this.islook = opt.look
+				this.cardInfo = uni.getStorageSync('modeldata')
+				this.is_yl = true
+				
+			}else {
+				if (opt.look && opt.look == 1) {
+					uni.showShareMenu();
+					this.look = false
+				}
+				if (opt.uid) {
+					this.shareId = opt.uid
+					this.getCommonUserCardInfo(opt.uid)
+				} else {
+					this.getShowTemplateItem()
+				}
 			}
+			
 
 		},
 		computed: {
@@ -292,7 +307,15 @@
 			}
 		},
 		methods: {
-			...mapMutations('user', ['setUserInfo']),
+			...mapMutations('user', ['setUserInfo']),
+			jsyl() {
+				if(this.islook == 2) {
+					uni.navigateBack()
+				}else {
+					this.is_yl = false
+				}
+				
+			},
 			navto(url) {
 				uni.navigateTo({
 					url
@@ -548,6 +571,9 @@
 				border:1px solid #f65486;
 				color: #f65486;
 				padding-left: 24rpx;
+			}
+			.mvisit {
+				top: 70rpx;
 			}
 		}
 	}
@@ -892,7 +918,7 @@
 	.fxmp {
 		position: fixed;
 		width: 750rpx;
-		height: 78rpx;
+		height: 98rpx;
 		bottom: 0;
 		padding: 0;
 
@@ -903,7 +929,7 @@
 			font-weight: 500;
 			color: #FFFFFF;
 			text-align: center;
-			line-height: 78rpx;
+			line-height: 98rpx;
 		}
 	}
 

pages/user/myteam.vue

@@ -1,438 +1,444 @@
-<template>
-	<view class="content">
-		<view class="navbar">
-			<view v-for="(item, index) in navList" :key="index" class="nav-item"
-				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
-				<text>{{ item.text }}</text>
-				<text v-if="item.num>0">({{ item.num || '' }})</text>
-			</view>
-		</view>
-		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
-			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
-				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
-					<view class="searchInput flex">
-						<view class="searchBox flex">
-							<image class="search" src="../../static/icon/search.png" mode="widthFix"></image>
-							<input class="input" type="text" @confirm="changeSearchList('')" v-model='search'
-								confirm-type='搜索' />
-							<image @click="search=''" class="exit" src="../../static/icon/goodsExit.png"
-								mode="widthFix"></image>
-						</view>
-						<view class="searchImg flex">
-							<picker mode="selector" range-key="text" :range="searchList" @change="changeSearchList">
-								<image class="searchList" src="../../static/icon/searchList.png" mode="widthFix">
-								</image>
-							</picker>
-						</view>
-					</view>
-					<!-- 空白页 -->
-					<!-- #ifdef H5 -->
-					<empty src="../../static/error/emptyItem.png"
-						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
-					<!-- #endif -->
-					<!-- #ifndef H5 -->
-					<empty src="../static/error/emptyItem.png"
-						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
-					<!-- #endif -->
-					<!-- 订单列表 -->
-					<view v-for="(item, index) in tabItem.orderList" :key="item.uid" class="andr-mt-lBox flex">
-						<!-- 订单列表 -->
-						<image :src="item.avatar" class="andr-mt-avatar andr-mt-marR20 flex-shrink-false" mode="scaleToFill"></image>
-						<view class="andr-mt-fdC">
-							<view class="andr-mt-lname flex-start">
-							<text class="clamp padding-r-20">
-							{{ item.nickname }}
-							</text>
-							<image v-if="item.level>0" class="tipLevel flex-shrink-false" :src="`../../static/image/level${item.level-1}.png`" mode="heightFix"></image>
-							</view>
-							<view class="andr-mt-ltime margin-t-10">{{ item.time }}</view>
-							<view class="andr-mt-ltime margin-t-20">推广数：{{ item.childCount }}</view>
-						</view>
-						<view class="rightText">
-							<view class="money">
-								{{item.numberCount}}
-							</view>
-							<view class="allOrder margin-t-20">
-								消费{{item.orderCount}}单
-							</view>
-						</view>
-					</view>
-					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
-				</scroll-view>
-			</swiper-item>
-		</swiper>
-	</view>
-</template>
-
-<script>
-	import {
-		spreadPeople
-	} from '@/api/user.js';
-	import {
-		userinfo
-	} from '@/api/user.js';
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex';
-	import {
-		getMoneyStyle
-	} from '@/utils/rocessor.js';
-	export default {
-		filters: {
-			getMoneyStyle
-		},
-		data() {
-			return {
-				// 查询key
-				search: '',
-				searchIndex: 0, //当前选中对象
-				searchList: [{
-						text: '团队排序',
-						key: 'childCount DESC'
-					},
-					{
-						text: '金额排序  ',
-						key: 'numberCount DESC'
-					},
-					{
-						text: '订单排序',
-						key: 'orderCount DESC'
-					}
-				],
-				userInfo: {},
-				// 头部图高度
-				maxheight: '',
-
-				tabCurrentIndex: 0,
-				navList: [{
-						state: 0,
-						text: '一级团队',
-						loadingType: 'more',
-						num: 0, //人数
-						orderList: [],
-						page: 1, //当前页数
-						limit: 10 //每次信息条数
-					},
-					{
-						state: 1,
-						text: '二级团队',
-						num: 0, //团队人数
-						loadingType: 'more',
-						orderList: [],
-						page: 1, //当前页数
-						limit: 10 //每次信息条数
-					}
-				],
-				money: ''
-			};
-		},
-		onLoad(options) {},
-		onShow() {
-			this.loadData();
-			// 获取用户积分
-			let obj = this;
-			userinfo({})
-				.then(({
-					data
-				}) => {
-					console.log(data);
-					obj.userInfo = data;
-				})
-				.catch(e => {});
-		},
-		methods: {
-			// 页面跳转
-			navto(e) {
-				uni.navigateTo({
-					url: e
-				});
-			},
-			//获取收入支出信息
-			async loadData(source) {
-				let obj = this;
-				//这里是将订单挂载到tab列表下
-				let index = obj.tabCurrentIndex;
-				let navItem = obj.navList[index];
-				let state = navItem.state;
-				if (source === 'tabChange' && navItem.loaded === true) {
-					//tab切换只有第一次需要加载数据
-					return;
-				}
-				if (navItem.loadingType === 'loading') {
-					//防止重复加载
-					return;
-				}
-				// 修改当前对象状态为加载中
-				navItem.loadingType = 'loading';
-				spreadPeople({
-						page: navItem.page,
-						limit: navItem.limit,
-						grade: state,
-						keyword: this.search,
-						sort: this.searchList[this.tabCurrentIndex].key
-					})
-					.then(({
-						data
-					}) => {
-						obj.navList[0].num = data.total;
-						obj.navList[1].num = data.totalLevel;
-						if (data.list.length > 0) {
-							navItem.orderList = navItem.orderList.concat(data.list);
-							console.log(navItem.orderList);
-							navItem.page++;
-						}
-						if (navItem.limit == data.list.length) {
-							//判断是否还有数据， 有改为 more， 没有改为noMore
-							navItem.loadingType = 'more';
-							return;
-						} else {
-							//判断是否还有数据， 有改为 more， 没有改为noMore
-							navItem.loadingType = 'noMore';
-						}
-						uni.hideLoading();
-						obj.$set(navItem, 'loaded', true);
-					})
-					.catch(e => {
-						console.log(e);
-					});
-			},
-
-			//swiper 切换
-			changeTab(e) {
-				this.tabCurrentIndex = e.target.current;
-				this.loadData('tabChange');
-			},
-			//顶部tab点击
-			tabClick(index) {
-				this.tabCurrentIndex = index;
-			},
-			// 查询对象数据
-			changeSearchList(e) {
-				if (e) {
-					this.searchIndex = e.detail.value;
-				}
-				// 重新初始化
-				this.navList[tabCurrentIndex].page = 1;
-				this.navList[tabCurrentIndex].limit = 10;
-				this.navList[tabCurrentIndex].loadingType = 'more';
-				this.navList[tabCurrentIndex].orderList = [];
-
-				this.loadData()
-			}
-
-		}
-	};
-</script>
-
-<style lang="scss">
-	page {
-		height: 100%;
-	}
-
-	.searchInput {
-		padding: 0 30rpx;
-
-		.searchBox {
-			background-color: #FFFFFF;
-			border-radius: 100rpx;
-			padding: 0 30rpx;
-			height: 70rpx;
-			flex-grow: 1;
-
-			.input {
-				flex-grow: 1;
-				padding: 0 20rpx;
-			}
-
-			.search {
-				width: 36rpx;
-			}
-
-			.exit {
-				width: 36rpx;
-			}
-		}
-
-		.searchImg {
-			height: 70rpx;
-			width: 70rpx;
-			justify-content: center;
-			margin-left: 30rpx;
-			border-radius: 20rpx;
-			background-color: #FFFFFF;
-
-			.searchList {
-				width: 36rpx;
-			}
-		}
-	}
-
-	.money-box {
-		background-color: $base-color;
-		padding-top: var(--status-bar-height);
-		// height: 368rpx;
-		height: 180rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		color: #ffffff;
-
-		// text-align: center;
-		.text {
-			// padding-top: 147rpx;
-			font-size: $font-sm;
-		}
-
-		.money {
-			font-size: 56rpx;
-		}
-	}
-
-	.navbar {
-		display: flex;
-		height: 40px;
-		padding: 0 5px;
-		background: #fff;
-		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
-		position: relative;
-		z-index: 10;
-
-		.nav-item {
-			flex: 1;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 100%;
-			font-size: 15px;
-			color: $font-color-dark;
-			position: relative;
-
-			&.current {
-				color: $base-color;
-
-				&:after {
-					content: '';
-					position: absolute;
-					left: 50%;
-					bottom: 0;
-					transform: translateX(-50%);
-					width: 44px;
-					height: 0;
-					border-bottom: 2px solid $base-color;
-				}
-			}
-		}
-	}
-
-	// 列表
-
-	.swiper-box {
-		padding-top: 10rpx;
-		height: calc(100% - 40px);
-
-		.order-item {
-			padding: 20rpx 30rpx;
-			line-height: 1.5;
-
-			.title-box {
-				.title {
-					font-size: $font-lg;
-					color: $font-color-base;
-				}
-
-				.time {
-					font-size: $font-base;
-					color: $font-color-light;
-				}
-			}
-
-			.money {
-				color: #fd5b23;
-				font-size: $font-lg;
-			}
-		}
-	}
-
-	.list-scroll-content {
-		height: 100%;
-		padding-top: 30rpx;
-	}
-
-	.content {
-		height: 100%;
-
-		.empty-content {
-			background-color: #ffffff;
-		}
-	}
-
-	.andr-mt-avatar {
-		width: 120rpx;
-		height: 120rpx;
-		border-radius: 10rpx;
-		background-color: $font-color-light;
-	}
-
-	.andr-mt-avatarBd {
-		border: 2px solid #ffffff;
-	}
-
-	.andr-mt-cname {
-		font-size: 28rpx;
-		color: #ffffff;
-	}
-
-	.andr-mt-flex {
-		display: flex;
-	}
-
-	.andr-mt-lBox {
-		background-color: #ffffff;
-		padding: 30rpx;
-		border-bottom: 1px solid #f0f0f0;
-		margin: 30rpx;
-		border-radius: 20rpx;
-	}
-
-	.andr-mt-marR20 {
-		margin-right: 20rpx;
-	}
-
-	.andr-mt-fdC {
-		flex-grow: 1;
-		overflow: hidden;
-	}
-
-	.rightText {
-		line-height: 1;
-
-		.money {
-			font-size: 36rpx;
-			font-weight: bold;
-
-		}
-
-		.allOrder {
-			font-size: 22rpx;
-			color: $font-color-disabled;
-		}
-	}
-
-	.andr-mt-lname {
-		font-size: 32rpx;
-		color: #3f454b;
-		overflow: hidden;
-		.tipLevel{
-			height: 36rpx;
-			margin-right: 20rpx;
-		}
-	}
-
-	.andr-mt-ltime {
-		line-height: 1;
-		font-size: 22rpx;
-		color: $font-color-disabled;
-	}
-</style>
+<template>
+	<view class="content">
+		<view class="content-money">
+			<view class="status_bar">
+				<!-- 这里是状态栏 -->
+			</view>
+			<!-- <view class="body-title">
+				<view class="goback-box" @click="toBack">
+					<image class="goback" src="../../static/icon/fanhui.png" mode=""></image>
+				</view>
+				<view class="header">我的推广</view>
+			</view> -->
+			<view class="content-bg">
+				<image src="../../static/img/tg-bg.png" mode=""></image>
+			</view>
+			<view class="money-box">
+				<view class="money">{{ all|| '0' }}</view>
+				<view>我的推广人数</view>
+			</view>
+			<!-- <view class="money-box flex" style="padding-top: 20rpx;" >
+				<view style="flex-grow: 1;"></view>
+				<view style="flex-grow: 1;">总业绩：{{total_count}}</view>
+			</view> -->
+		</view>
+
+		<scroll-view class="list-scroll-content" :style="{ height: maxheight }" scroll-y @scrolltolower="loadData">
+			<!-- <empty v-if="loaded === true && list.length === 0" :style="{ height: maxheight }"></empty> -->
+
+			<view v-for="(item, index) in list" :key="index" class="order-item flex">
+				<view class="title-box flex_item">
+					<view class="title-avatar">
+						<image :src="item.avatar"></image>
+					</view>
+					<view class="list_tpl">
+						<view class="title">
+							<view class="title-name clamp">{{ item.nickname }}</view>
+						</view>
+						<view class="time">
+							<text>{{ item.mobile }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<uni-load-more :status="loadingType"></uni-load-more>
+		</scroll-view>
+	</view>
+</template>
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		getChildList
+	} from '@/api/user.js'
+	export default {
+		onReady(res) {
+			var _this = this;
+			uni.getSystemInfo({
+				success: resu => {
+					const query = uni.createSelectorQuery();
+					query.select('.list-scroll-content').boundingClientRect();
+					query.exec(function(res) {
+						_this.maxheight = resu.windowHeight - res[0].top + 'px';
+						console.log('打印页面的剩余高度', _this.height);
+					});
+				},
+				fail: res => {}
+			});
+		},
+		data() {
+			return {
+				// 头部图高度
+				maxheight: '',
+				loadingType: 'more',
+				list: [],
+				page: 1, //当前页数
+				all: '',
+				page: 1,
+				pageSize: 10,
+				loaded: false,
+			};
+		},
+		computed: {
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
+			...mapState(['baseURL'])
+		},
+		onLoad(options) {},
+		onShow() {
+			this.loadData();
+		},
+		methods: {
+			// 页面跳转
+			navto(e) {
+				uni.navigateTo({
+					url: e
+				});
+			},
+			//获取收入支出信息
+			async loadData(source) {
+				//这里是将订单挂载到tab列表下
+				let that = this
+				if (that.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (that.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				that.loadingType = 'loading';
+				getChildList({
+						page: that.page,
+						pageSize: that.pageSize,
+					})
+					.then(({
+						data
+					}) => {
+						that.all = data.totalCount
+						that.list = that.list.concat(data.list)
+						that.page++
+
+						if (that.pageSize == data.list.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							that.loadingType = 'more';
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							that.loadingType = 'noMore';
+						}
+						that.$set(that, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+			//swiper 切换
+			changeTab(e) {
+				this.tabCurrentIndex = e.target.current;
+				this.loadData('tabChange');
+			},
+			//顶部tab点击
+			tabClick(index) {
+				this.tabCurrentIndex = index;
+			},
+			// 点击返回 我的页面
+			toBack() {
+				uni.switchTab({
+					url: '/pages/user/user'
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	page {
+		background: #f8f8f8;
+		height: 100%;
+	}
+
+	.status_bar {
+		height: var(--status-bar-height);
+		width: 100%;
+		background: #5dbc7c;
+	}
+
+	.content-money {
+		position: relative;
+		height: 480rpx;
+
+		.content-bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			width: 750rpx;
+			height: 480rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.body-title {
+			height: 80rpx;
+			text-align: center;
+			font-size: 35rpx;
+			position: relative;
+
+			.header {
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				font-size: 36rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #fffeff;
+				height: 80rpx;
+				font-size: 36rpx;
+				font-weight: 700;
+				z-index: 9;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.goback-box {
+				position: absolute;
+				left: 18rpx;
+				top: 0;
+				height: 80rpx;
+				display: flex;
+				align-items: center;
+			}
+
+			.goback {
+				z-index: 100;
+				width: 34rpx;
+				height: 34rpx;
+			}
+		}
+	}
+
+	.money-box {
+		position: relative;
+		z-index: 2;
+		padding-top: 90rpx;
+		color: #ffffff;
+		text-align: center;
+
+		.money {
+			font-size: 72rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #ffffff;
+		}
+
+		.text {
+			font-size: 30rpx;
+		}
+	}
+
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
+		background-color: #fff;
+
+		.title-box {
+			width: 100%;
+
+			.title-avatar {
+				flex-shrink: 0;
+				width: 100rpx;
+				height: 100rpx;
+				margin-right: 25rpx;
+				border-radius: 100%;
+
+				image {
+					width: 100%;
+					height: 100%;
+					border-radius: 100%;
+				}
+			}
+
+			.list_tpl {
+				width: 85%;
+
+				.title {
+					display: flex;
+					justify-content: flex-start;
+					font-size: $font-lg;
+					color: $font-color-base;
+					overflow: hidden; //超出的文本隐藏
+					text-overflow: ellipsis; //溢出用省略号显示
+					white-space: nowrap;
+					line-height: 1;
+					text-align: center;
+
+					.title-name {
+						max-width: 40%;
+					}
+
+					.dl {
+						margin-left: 10rpx;
+						width: 93rpx;
+						height: 32rpx;
+						border-radius: 16rpx;
+
+						image {
+							width: 93rpx;
+							height: 32rpx;
+							border-radius: 16rpx;
+						}
+					}
+
+					.class {
+						display: inline-block;
+						margin-left: 10rpx;
+						padding: 6rpx;
+						text-align: center;
+						border: 1px solid #2e58ff;
+						border-radius: 16rpx;
+						font-size: 20rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #2e58ff;
+					}
+				}
+
+				.time {
+					font-size: $font-lg;
+					color: $font-color-light;
+				}
+			}
+		}
+
+		.money {
+			width: 50%;
+			text-align: right;
+			color: #db1935;
+			font-size: $font-lg;
+		}
+	}
+
+	.yeji {
+		position: relative;
+		margin: -72rpx auto 0;
+		width: 690rpx;
+		height: 143rpx;
+		background: #ffffff;
+		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
+		border-radius: 10rpx;
+		display: flex;
+		align-items: center;
+
+		.yeji-a {
+			width: 50%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			.yeji-top {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+
+			.yeji-buttom {
+				font-size: 42rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+		}
+
+		.border {
+			width: 1rpx;
+			height: 51rpx;
+			background: #dddddd;
+		}
+	}
+
+	.navbar {
+		margin-top: 20rpx;
+		display: flex;
+		height: 88rpx;
+		padding: 0 5px;
+		background: #fff;
+		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+		position: relative;
+		z-index: 10;
+
+		.nav-item {
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			font-size: 15px;
+			color: #999999;
+			position: relative;
+
+			&.current {
+				color: #000;
+
+				&:after {
+					content: '';
+					position: absolute;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+					width: 44px;
+					height: 0;
+					border-bottom: 2px solid #fe5b38;
+				}
+			}
+		}
+	}
+
+	.buttom-box {
+		position: relative;
+		background-color: #ffffff;
+		text-align: center;
+		padding: 30rpx 0;
+
+		.buttom {
+			flex-grow: 1;
+		}
+
+		.money {
+
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #ff4173;
+		}
+
+		.text {
+			padding-bottom: 26rpx;
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #666666;
+
+			&.current {
+				border-bottom: 2px solid #ff4173;
+			}
+		}
+
+		.icon {
+			height: 50rpx;
+			width: 48rpx;
+			margin: 0 auto;
+
+			.icon-img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+</style>

pages/user/shareQrCode.vue

@@ -1,286 +1,431 @@
-<template>
-	<view class="container">
-		<swiper
-			class="posters-box"
-			:autoplay="false" 
-			:circular="false" 
-			:interval="3000" 
-			:duration="500"
-			@change="bindchange" 
-			previous-margin="40px" 
-			next-margin="40px">
-			<block v-for="(item, index ) in shareList" :key="index">
-				<swiper-item>
-					<!-- #ifndef MP -->
-					<image 
-						class="slide-image" 
-						:class="swiperIndex == index ? 'active' : 'quiet'" 
-						mode='aspectFill' 
-						:src="item.wap_poster"
-						
-					></image>
-					<!-- #endif -->
-					
-					<!-- #ifdef MP -->
-					<image
-						class="slide-image" 
-						:class="swiperIndex == index ? 'active' : 'quiet'" 
-						mode='aspectFill' 
-						:src="item.poster"
-						
-					></image>
-					<!-- #endif -->
-					
-				</swiper-item>
-			</block>
-		</swiper>
-		<!-- #ifndef MP -->
-		<div class="preserve">
-			<div class="line"></div>
-			<div class="tip">长按保存图片</div>
-			<div class="line"></div>
-		</div>
-		<!-- #endif -->
-
-		<!-- #ifdef MP -->
-		<view class='keep' @click='savePosterPath'>保存海报</view>
-		<!-- #endif -->
-		
-	</view>
-</template>
-
-<script>
-import { spreadBanner } from '@/api/user.js';
-import { qrcode } from  '@/api/user.js';
-import { mapState } from 'vuex';
-export default {
-	// #ifdef MP
-	onShareAppMessage: function(res) {
-		// if (res.from === 'button') {
-			
-			// 保存邀请人
-			let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
-			console.log('path',path)
-			let data = {
-				path: path,
-				imageUrl: this.poster,
-				title: this.userInfo.nickname + '邀请您进入母婴界严选'
-			};
-			console.log('---data---',data)
-			return data;
-		// }
-	},
-	// #endif
-	data() {
-		return {
-			shareList: [],
-			swiperIndex: 0,
-			poster: '',	// 当前海报
-		}
-	},
-	onLoad(option) {
-		// console.log('---option---',option)
-		// let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
-		// console.log('path',path)
-		// if(option.scene){
-		// 	// 存储邀请人
-		// 	this.spread = opt.pid;
-		// 	uni.setStorageSync('spread', opt.pid);
-		// }
-		this.loadData();
-	},
-	computed: {
-		...mapState(['userInfo']),
-	},
-	methods: {
-		bindchange(e) {
-			let shareList = this.shareList;
-			this.swiperIndex = e.detail.current;
-			// #ifdef MP
-			this.poster = shareList[this.swiperIndex].poster;
-			// #endif 
-			
-			// // #ifndef MP
-			// this.poster = shareList[this.swiperIndex].wap_poster;
-			// // #endif 
-			
-			console.log(this.poster)
-		},
-		
-		// 保存海报
-		savePosterPath: function() {
-			let that = this;
-			if(that.poster==''){
-				that.poster = that.shareList[0].poster;
-			}
-			uni.downloadFile({
-				url: that.poster,
-				success(resFile) {
-					if (resFile.statusCode === 200) {
-						uni.getSetting({
-							success(res) {
-								if (!res.authSetting['scope.writePhotosAlbum']) {
-									uni.authorize({
-										scope: 'scope.writePhotosAlbum',
-										success() {
-											uni.saveImageToPhotosAlbum({
-												filePath: resFile.tempFilePath,
-												success: function(res) {
-													return that.$api.msg( '保存成功' );
-												},
-												fail: function(res) {
-													return that.$api.msg( res.errMsg );
-												},
-												complete: function(res) {},
-											})
-										},
-										fail() {
-											uni.showModal({
-												title: '您已拒绝获取相册权限',
-												content: '是否进入权限管理，调整授权？',
-												success(res) {
-													if (res.confirm) {
-														uni.openSetting({
-															success: function(res) {
-																console.log(res.authSetting)
-															}
-														});
-													} else if (res.cancel) {
-														return that.$api.msg( '已取消！' );
-													}
-												}
-											})
-										}
-									})
-								} else {
-									uni.saveImageToPhotosAlbum({
-										filePath: resFile.tempFilePath,
-										success: function(res) {
-											return that.$api.msg( '保存成功' );
-										},
-										fail: function(res) {
-											return that.$api.msg( res.errMsg );
-										},
-										complete: function(res) {},
-									})
-								}
-							},
-							fail(res) {
-		
-							}
-						})
-					} else {
-						return that.$api.msg( resFile.errMsg );
-					}
-				},
-				fail(res) {
-					return that.$api.msg( res.errMsg );
-				}
-			})
-		},
-		
-		// #ifdef MP-WEIXIN
-		// 保存画图图片到本地
-		seav(url) {
-			uni.showLoading({
-				title: '生成中...',
-				mask: true
-			});
-			uni.saveImageToPhotosAlbum({
-				filePath: this.poster,
-				complete(result) {
-					uni.hideLoading();
-					console.log(result);
-					uni.showToast({
-						title: '保存图片成功！',
-						duration: 2000,
-						icon: 'none'
-					});
-				}
-			});
-		},
-		// #endif
-		
-		// 获取海报
-		loadData() {
-			let obj = this;
-			uni.showLoading({
-				title: '获取中',
-				mask: true,
-			});
-			spreadBanner({
-				// #ifdef H5
-				type: 2,
-				// #endif
-				// #ifdef MP
-				type: 1
-				// #endif
-			}).then(res =>{
-				uni.hideLoading();
-				obj.shareList = res.data;
-				console.log('obj.shareList',obj.shareList);
-			}).catch(err => {
-				uni.hideLoading();
-			});
-		},
-	}
-}
-</script>
-
-<style lang="scss">
-	page {
-		background: #a3a3a3;
-		height: 100%;
-	}
-.container {
-	width: 100%;
-	.posters-box {
-		width: 100%;
-		height: 1000rpx;
-		margin-top: 40rpx;
-		.slide-image {
-			width: 100%;
-			height: 100%;
-			border-radius: 15rpx;
-		}
-	}
-	.posters-box .slide-image.active {
-		transform: none;
-		transition: all 0.2s ease-in 0s;
-	}
-	
-	.posters-box .slide-image.quiet {
-		transform: scale(0.8333333);
-		transition: all 0.2s ease-in 0s;
-	}
-	
-	.keep {
-		font-size: 30rpx;
-		background: $base-color;
-		color: #fff;
-		width: 600rpx;
-		height: 80rpx;
-		border-radius: 50rpx;
-		text-align: center;
-		line-height: 80rpx;
-		margin: 38rpx auto;
-	}
-}
-.preserve {
-	color: #fff;
-	text-align: center;
-	margin-top: 38rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	.line {
-		width: 100rpx;
-		height: 1px;
-		background-color: #fff;
-	}
-	.tip {
-		margin: 0 20rpx;
-		font-size: 28rpx;
-	}
-}
+<template>
+	<view class="container">
+		<canvas :style="{ width:  '554rpx', height: '1200rpx',}" canvas-id="myCanvas" id="myCanvas" class="hb"></canvas>
+		<!-- #ifndef MP -->
+		<div class="preserve">
+			<div class="line"></div>
+			<div class="tip">长按保存图片</div>
+			<div class="line"></div>
+		</div>
+		<!-- #endif -->
+
+		<!-- #ifdef MP -->
+		<view class='keep' @click='saveShareQrcode' v-if="!loading">保存海报</view>
+		<!-- #endif -->
+
+	</view>
+</template>
+
+<script>
+	import {
+		spreadBanner,
+		getWxmpInviteQrcode
+	} from '@/api/user.js';
+	import {
+		qrcode
+	} from '@/api/user.js';
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		// #ifdef MP
+		onShareAppMessage: function(res) {
+			// if (res.from === 'button') {
+
+			// 保存邀请人
+			let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
+			console.log('path', path)
+			let data = {
+				path: path,
+				imageUrl: this.poster,
+				title: this.userInfo.nickname + '邀请您进入母婴界严选'
+			};
+			console.log('---data---', data)
+			return data;
+			// }
+		},
+		// #endif
+		data() {
+			return {
+				bgimg: '',
+				qrimg: '',
+				shareList: [],
+				swiperIndex: 0,
+				poster: '', // 当前海报
+				loading: true
+			}
+		},
+		onLoad(option) {
+			// console.log('---option---',option)
+			// let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
+			// console.log('path',path)
+			// if(option.scene){
+			// 	// 存储邀请人
+			// 	this.spread = opt.pid;
+			// 	uni.setStorageSync('spread', opt.pid);
+			// }
+			this.loadData();
+		},
+		computed: {
+			...mapState(['userInfo']),
+		},
+		methods: {
+			bindchange(e) {
+				let shareList = this.shareList;
+				this.swiperIndex = e.detail.current;
+				// #ifdef MP
+				this.poster = shareList[this.swiperIndex].poster;
+				// #endif 
+
+				// // #ifndef MP
+				// this.poster = shareList[this.swiperIndex].wap_poster;
+				// // #endif 
+
+				console.log(this.poster)
+			},
+
+			// 保存海报
+			savePosterPath: function() {
+				let that = this;
+				if (that.poster == '') {
+					// that.poster = that.shareList[0].poster;
+					that.poster = this.bgimg
+				}
+				uni.downloadFile({
+					url: that.poster,
+					success(resFile) {
+						if (resFile.statusCode === 200) {
+							uni.getSetting({
+								success(res) {
+									if (!res.authSetting['scope.writePhotosAlbum']) {
+										uni.authorize({
+											scope: 'scope.writePhotosAlbum',
+											success() {
+												uni.saveImageToPhotosAlbum({
+													filePath: resFile.tempFilePath,
+													success: function(res) {
+														return that.$api.msg(
+															'保存成功');
+													},
+													fail: function(res) {
+														return that.$api.msg(res
+															.errMsg);
+													},
+													complete: function(res) {},
+												})
+											},
+											fail() {
+												uni.showModal({
+													title: '您已拒绝获取相册权限',
+													content: '是否进入权限管理，调整授权？',
+													success(res) {
+														if (res.confirm) {
+															uni.openSetting({
+																success: function(
+																	res) {
+																	console
+																		.log(
+																			res
+																			.authSetting
+																			)
+																}
+															});
+														} else if (res.cancel) {
+															return that.$api.msg(
+																'已取消！');
+														}
+													}
+												})
+											}
+										})
+									} else {
+										uni.saveImageToPhotosAlbum({
+											filePath: resFile.tempFilePath,
+											success: function(res) {
+												return that.$api.msg('保存成功');
+											},
+											fail: function(res) {
+												return that.$api.msg(res.errMsg);
+											},
+											complete: function(res) {},
+										})
+									}
+								},
+								fail(res) {
+
+								}
+							})
+						} else {
+							return that.$api.msg(resFile.errMsg);
+						}
+					},
+					fail(res) {
+						return that.$api.msg(res.errMsg);
+					}
+				})
+			},
+
+			// #ifdef MP-WEIXIN
+			// 保存画图图片到本地
+			seav(url) {
+				uni.showLoading({
+					title: '生成中...',
+					mask: true
+				});
+				uni.saveImageToPhotosAlbum({
+					filePath: this.poster,
+					complete(result) {
+						uni.hideLoading();
+						console.log(result);
+						uni.showToast({
+							title: '保存图片成功！',
+							duration: 2000,
+							icon: 'none'
+						});
+					}
+				});
+			},
+			// #endif
+
+			// 获取海报
+			loadData() {
+				let obj = this;
+				uni.showLoading({
+					title: '获取中',
+					mask: true,
+				});
+				// spreadBanner({
+				// 	// #ifdef H5
+				// 	type: 2,
+				// 	// #endif
+				// 	// #ifdef MP
+				// 	type: 1
+				// 	// #endif
+				// }).then(res =>{
+				// 	uni.hideLoading();
+				// 	obj.shareList = res.data;
+				// 	console.log('obj.shareList',obj.shareList);
+				// }).catch(err => {
+				// 	uni.hideLoading();
+				// });
+				getWxmpInviteQrcode().then(res => {
+					console.log(res)
+					obj.bgimg = res.data.bgimg
+					obj.qrcode = res.data.qrcode
+					uni.hideLoading();
+					obj.createPoster()
+					
+				})
+			},
+			async createPoster() {
+				let that = this
+				// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
+				this.SystemInfo = await this.getSystemInfo();
+				// 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
+				this.goodsImg = await this.getImageInfo(that.bgimg);
+				this.ewmImg = await this.getImageInfo(that.qrcode);
+				// this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
+				this.ratio = this.SystemInfo.windowWidth / 750;
+				this.canvasW = 554 * this.ratio;
+				this.canvasH = 1200 * this.ratio;
+
+				this.ewmW = 180 * this.ratio;
+	
+				
+				console.log(this.canvasH, 'this.canvasH')
+				// this.canvasH = this.goodsImg.height + this.ewmW + 200;  // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）
+			
+				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
+				if (this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this
+					.SystemInfo.errMsg == 'getSystemInfo:ok') {
+					console.log('ok')
+					uni.showToast({
+						icon: 'loading',
+						mask: true,
+						duration: 10000,
+						title: '海报绘制中',
+					});
+					setTimeout(() => {
+						var ctx = uni.createCanvasContext('myCanvas', this);
+						// 填充背景色，白色
+						ctx.setFillStyle('#fff'); // 默认白色
+						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
+			
+						// 绘制商品主图，二维码
+						ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this
+							.canvasH) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
+							ctx.drawImage(this.ewmImg.path, (this.canvasW / 2 - this.ewmW / 2),this.canvasH - 85*this.ratio - this.ewmW,
+								this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
+						
+			
+						// 3、绘制商品标题，多余文字自动换行
+						ctx.setFontSize(16); // setFontSize() 设置字体字号
+						ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
+						ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
+							console.log(ret)
+							uni.showToast({
+								icon: 'none',
+								title: '生成成功！',
+							});
+							that.loading = false
+							that.fina = true
+							uni.canvasToTempFilePath({ // 保存canvas为图片
+								canvasId: 'myCanvas',
+								quality: 1,
+								fileType: 'jpg',
+								complete: function(res) {
+									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
+									console.log(res)
+									that.canvasShow = false
+									that.shareQrcodeUrl = res.tempFilePath
+									that.$forceUpdate()
+									setTimeout(function() {
+										console.log(that.shareQrcodeUrl, that
+											.canvasShow)
+									}, 2000)
+								},
+							})
+						});
+					}, 1500)
+				} else {
+					console.log('err')
+				}
+			},
+			// 获取设备信息
+			getSystemInfo() {
+				return new Promise((req, rej) => {
+					uni.getSystemInfo({
+						success: function(res) {
+							req(res)
+						}
+					});
+				})
+			},
+			// 获取图片信息
+			getImageInfo(image) {
+				return new Promise((req, rej) => {
+					uni.getImageInfo({
+						src: image,
+						success: function(res) {
+							req(res)
+						},
+					});
+				})
+			},
+			//保存图片
+			saveShareQrcode() {
+				console.log(this.shareQrcodeUrl)
+				uni.saveImageToPhotosAlbum({
+					filePath: this.shareQrcodeUrl,
+					success: (res) => {
+						uni.showToast({
+							icon: 'none',
+							position: 'bottom',
+							title: "成功保存到相册",
+						});
+					},
+					fail: (err) => {
+						//重新提示用户打开保存图片的授权
+						if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
+							uni.showModal({
+								title: '提示',
+								content: '需要您授权保存相册',
+								showCancel: false,
+								success(res) {
+									if (res.confirm) {
+										uni.openSetting({
+											success(settingdata) {
+												if (settingdata.authSetting[
+														'scope.writePhotosAlbum']) {
+													uni.showModal({
+														title: '提示',
+														content: '获取权限成功,再次保存图片即可成功',
+														showCancel: false,
+													})
+												} else {
+													uni.showModal({
+														title: '提示',
+														content: '获取权限失败，无法保存到相册',
+														showCancel: false
+													})
+												}
+											}
+										})
+									}
+								}
+							})
+						}
+					},
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #a3a3a3;
+		height: 100%;
+	}
+
+	.container {
+		width: 100%;
+
+		.posters-box {
+			width: 100%;
+			height: 1000rpx;
+			margin-top: 40rpx;
+
+			.slide-image {
+				width: 100%;
+				height: 100%;
+				border-radius: 15rpx;
+			}
+		}
+
+		.posters-box .slide-image.active {
+			transform: none;
+			transition: all 0.2s ease-in 0s;
+		}
+
+		.posters-box .slide-image.quiet {
+			transform: scale(0.8333333);
+			transition: all 0.2s ease-in 0s;
+		}
+
+		.keep {
+			font-size: 30rpx;
+			background: $base-color;
+			color: #fff;
+			width: 600rpx;
+			height: 80rpx;
+			border-radius: 50rpx;
+			text-align: center;
+			line-height: 80rpx;
+			margin: 38rpx auto;
+		}
+	}
+
+	.preserve {
+		color: #fff;
+		text-align: center;
+		margin-top: 38rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.line {
+			width: 100rpx;
+			height: 1px;
+			background-color: #fff;
+		}
+
+		.tip {
+			margin: 0 20rpx;
+			font-size: 28rpx;
+		}
+	}
+	.hb {
+		margin: auto;
+	}
 </style>

pages/userhome/user.vue

@@ -87,7 +87,28 @@
 								<text></text>
 								<image class="img" src="../../static/icon/next1.png" mode="widthFix"></image>
 							</view>
-						</view> -->
+						</view> -->
+						
+						<view class="flex listItem" @click="navTo('/pages/user/myteam')">
+							<view class="flex titleBox">
+								<image class="listIconImg" src="../../static/icon/myshare.png" mode="widthFix"></image>
+								<text class="title">我的邀请</text>
+							</view>
+							<view class="right flex">
+								<text></text>
+								<image class="img" src="../../static/icon/next1.png" mode="widthFix"></image>
+							</view>
+						</view>
+						<view class="flex listItem" @click="navTo('/pages/user/shareQrCode')">
+							<view class="flex titleBox">
+								<image class="listIconImg" src="../../static/icon/myshareimg.png" mode="widthFix"></image>
+								<text class="title">邀请海报</text>
+							</view>
+							<view class="right flex">
+								<text></text>
+								<image class="img" src="../../static/icon/next1.png" mode="widthFix"></image>
+							</view>
+						</view>
 						<view class="flex listItem" @click="navTo('/pages/user/model/mymodellist')">
 							<view class="flex titleBox">
 								<image class="listIconImg" src="../../static/icon/mymodel.png" mode="widthFix"></image>