retailStore/pages/index/index.vue

<template>
	<view class="content">
		<image class="logo" :src="pageInfo.picture" mode="widthFix"></image>
		<view class="share-box">
			<!-- <view>分销商分享给好友，好友购买产品成功后即可获</view>
			<view>得分享奖励</view>
			<view>单笔最高可赚￥200.00</view>
			<view>快去分享吧</view> -->
			<u-parse :content="pageInfo.sharecontent"></u-parse>
			<button type="default" @click.stop='showShareModal'>分享</button>
		</view>
		
		<!-- <view class="share-box" style="height: 200upx;margin-top: 2%;" @longpress="copyCode"> -->
			<!-- <view>长按复制框内整段文字，打开 [手淘] 即可购买</view> -->
	<!-- 		<view style="text-align: center;">复制店铺名[{{pageInfo.copycontent || '-'}}],打开[Tao宝]</view>
			<view style="text-align: center;">搜索进入</view>
			<button type="default" @click="copyCode">一键复制</button> -->
		<!-- </view> -->
		
		<view class="product-title">推荐产品</view>
	   
	<!-- 	<view class="recommend-box">
			<view class="product-box" v-for="item in productList" :key="item.id"  @click="goDetail(item.id)">
				<image :src="item.imgUrl"></image>
				<view class="detail-box">
					<view>{{item.productTitle}}</view>
					<view style="color: #999;">￥{{item.price}}</view>
				</view>
			</view>
		</view> -->
		
		<!-- <section class="PullScroll-Page"> -->
		<!--  <s-pull-scroll ref="pullScroll" :back-top="true" :pullDown="pullDown" :pullUp="loadData"> -->
			<view class="recommend-box">
				<view class="product-box" v-for="item in productList" :key="item.id"  @click="goDetail(item.id)">
					<image :src="item.picture" mode='aspectFill'></image>
					<view class="detail-box">
						<view class='product-font'>{{item.desc || '-'}}</view>
						<view style="color: #999;">￥{{item.money || '-'}}</view>
					</view>
				</view>
			</view>
		 <!-- </s-pull-scroll> -->
		<!-- </section> -->
		<uni-popup ref="popup" type="bottom">
			<view class="uni-share">
				<view class="uni-share-content">
					<button class="uni-share-content-box" open-type="share">
						<view class="uni-share-content-image"><image src="/static/userSetIcon.png" class="image" /></view>
						<view class="uni-share-content-text">分享给好友</view>
					</button>
					<button class="uni-share-content-box" @click="goPostShare">
						<view class="uni-share-content-image"><image src="/static/share-icon1.png" class="image" /></view>
						<view class="uni-share-content-text">海报分享</view>
					</button>
					<button class="uni-share-content-box" @click="goRuleList">
						<view class="uni-share-content-image"><image src="/static/note.png" class="image" /></view>
						<view class="uni-share-content-text">分享规则</view>
					</button>
					
				</view>
				<view class="uni-share-btn" @click="cancelModal()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var md5 = require("../../common/md5.js");
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import uParse from '@/components/gaoyia-parse/parse.vue'
	//import sPullScroll from '@/components/s-pull-scroll';
	export default {
		components: {
			uniPopup,
			uParse
		 // sPullScroll
		},
		data() {
			return {
				title: 'Hello',
				pageInfo:{},
				isAuth:getApp().globalData.isAuth,
				productList:[
					// {   
					// 	id:'1',
					// 	imgUrl:'/static/bed-bg.png',
					// 	productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
					// 	price:'13999'
					// },
					// {   
					// 	id:'2',
					// 	imgUrl:'/static/bed2-bg.png',
					// 	productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
					// 	price:'15999'
					// },
					// {   
					// 	id:'3',
					// 	imgUrl:'/static/bed-bg.png',
					// 	productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
					// 	price:'16999'
					// },
					// {   
					// 	id:'4',
					// 	imgUrl:'/static/bed2-bg.png',
					// 	productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
					// 	price:'18999'
					// }
				]
			}
		},
		onLoad(options) {
		  //this.refresh();
		  getApp().globalData.lastId = options.inviteId ? options.inviteId : getApp().globalData.user_id
          this.loginRequest();
		  this.getPageProductList(); 
		},
		onShow() {
			this.isAuth =getApp().globalData.isAuth;
		},
		onShareAppMessage() {
			  return {
			      title: '分销小助手',
			      path:'/pages/index/index?inviteId=' + getApp().globalData.user_id
			    }
		},
		methods: {
			getShareInfo(uid){
				uni.request({
					url: getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'addShare',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						shangjiid:getApp().globalData.lastId || uid,
						userid:uid,
						sign: md5('addShare' + getApp().globalData.globalTimestamp)
					},
					success: res => {
						console.log(res)
					}
				});
			},
			 loginRequest(){
				 	uni.login({
				 		success: (res) => {
				 			uni.request({
				 				url: getApp().globalData.shareUrl, //需要设置为全局
				 				method: 'POST',
				 				header: {
				 					'content-type': 'application/x-www-form-urlencoded'
				 				},
				 				data: {
				 					method: 'login',
				 					timestamp: getApp().globalData.globalTimestamp, //Date.now()
				 					code: res.code,
				 					sign: md5('login' + getApp().globalData.globalTimestamp)
				 				},
				 				success: res => {
				 					// 通过openid发起会员登录
									console.log('userId',res.data.msg.id)
									getApp().globalData.user_id = res.data.msg.id;
									getApp().globalData.open_id = res.data.msg.openid;
									getApp().globalData.isAuth = res.data.msg.auth_status === '1';
									getApp().globalData.user_name = res.data.msg.name;
									getApp().globalData.user_headUrl = res.data.msg.headimg;
									getApp().globalData.session_key = res.data.msg.session_key;
									getApp().globalData.user_phone = res.data.msg.phone;
									getApp().globalData.user_status = res.data.msg.status;
									// getApp().globalData.times = res.data.msg.times;
									// getApp().globalData.total_times = res.data.msg.total_times;
									this.isAuth = getApp().globalData.isAuth;
									this.getPageInfo(res.data.msg.id);
									this.getShareInfo(res.data.msg.id)
				 				}
				 			});
				 	}
				 });
			 },
			 getPageInfo(uId){ //获取首页面基本信息接口
			     uni.showLoading({
			     	title: '加载中',
			     });
				 let that = this;
				uni.request({
					url: getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'getHomePageInfo',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						id: 1,
						sign: md5('getHomePageInfo' + getApp().globalData.globalTimestamp)
					},
					success: res => {
						if (res.data.code === 200) {
							uni.hideLoading();
							that.pageInfo = res.data.msg;
							getApp().globalData.shareImg = res.data.msg.picture;
							getApp().globalData.shareContent = res.data.msg.sharecontent;
							getApp().globalData.shareTaobaoCode = res.data.msg.copycontent;
							getApp().globalData.shareStoreImg = res.data.msg.heading;
						}
					}
				});
			},
			 getPageProductList(pullScroll){ //获取首页面产品列表接口
			    let that = this;
				uni.request({
					url: getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'getProductsList',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						// page: pullScroll.page,
						// pageSize:4,
						page:'',
						pageSize:'',
						sign: md5('getProductsList' + getApp().globalData.globalTimestamp)
					},
					success: res => {
						if (res.data.code === 200) {
							console.log(res.data.msg)
							that.productList = res.data.msg;
							// setTimeout(() => {
							//   if (pullScroll.page == 1) {
							//     this.productList = res.data.msg;
							//   }
							//   const curList = [];
							//   for (let i = res.data.msg.length; i < res.data.msg.length + 4; i++) {
							//     curList.push(i);
							//   }
							//   this.productList = this.productList.concat(curList);
							//   if (this.productList.length > 60) {
							//     // finish(boolean:是否显示finishText,默认显示)
							//     pullScroll.finish(this.productList.length > 4);
							//   } else {
							//     pullScroll.success();
							//   }
							// }, 500);
						}
					}
				});
			},
			 showShareModal(){
			         // 需要在 popup 组件，指定 ref 为 popup
			 		if(!this.isAuth){
			 			uni.navigateTo({
			 				url: '../auth/index',
			 				success: res => {},
			 				fail: () => {},
			 				complete: () => {}
			 			});
			 		}else {
			 			this.$refs.popup.open();
			 		}
			       },
			 cancelModal(){
			 	          // 需要在 popup 组件，指定 ref 为 popup
			 	     this.$refs.popup.close();
			 },
			 goPostShare() {
						this.$refs.popup.close()
						uni.navigateTo({
							url: '/pages/index/postShare/index'
						})
					},
			 goDetail(id){
				uni.navigateTo({
					url: '/pages/index/detailPage/index?detailId='+id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goRuleList(){
					uni.navigateTo({
					url: '/pages/index/ruleList/index',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			 copyCode(){
				let that = this;
				 if(!that.isAuth){
				 	uni.navigateTo({
				 		url: '../auth/index',
				 		success: res => {},
				 		fail: () => {},
				 		complete: () => {}
				 	});
				 }else {
				 	uni.setClipboardData({
				 	data:that.pageInfo.copycontent,
				 	success() {
				 		uni.showToast({
				 			icon:'none',
				 			title:'复制成功'
				 		})
				 	}
				 })
				 }
			},
			refresh () {
			  this.$nextTick(() => {
			    this.$refs.pullScroll.refresh();
			  });
			},
			pullDown (pullScroll) {
			  setTimeout(() => {
			    this.loadData(pullScroll);
			  }, 200);
			},
			loadData (pullScroll) {
			  this.getPageProductList(pullScroll)
			  }
		}
	}
</script>

<style lang="scss">
	// @import url("../../../components/gaoyia-parse/parse.css");
	// .PullScroll-Page {
	//   padding: 40rpx;
	//   .btn {
	//     width: 100%;
	//     height: 80rpx;
	//     font-size: 28rpx;
	//     &:not(:first-child) {
	//       margin-top: 40rpx;
	//     }
	//   }
	// }
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		// height: 400px;
		width: 100%;
		margin-bottom: 30upx;
	}

	.share-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80%;
		height: 300upx;
		border: 1px dashed red;
		background: #fff;
		font-size: 28rpx;
		padding: 5px;
	}
	.share-box button {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 2%;
		background-color: #27BCEF;
		color: #fff;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
	.product-title {
		margin-left: -75%;
		margin-top: 5%;
		margin-bottom: 1%;
	}
	.product-font {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		font-size: 14px;
	}
	.recommend-box {
		width: 95%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.product-box {
		width: 90%;
		height: 200rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius:10px;
		margin-bottom: 2%;
	}
	.product-box image {
		width: 40%!important;
		height: 180rpx;
		margin-right: 5%;
	}
	.detail-box {
		width: 60%!important;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 30rpx;
		height: 190rpx;
	}
	//分享模态框
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
		/* justify-content: center */
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		border: none;
		background: transparent;
		padding-left: 0;
		padding-right: 0;

	}
      .uni-share-content-box::after{
		  border: none;
	  }
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #999;
		padding-top: 5px;
		// padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
		font-size: 30rpx;
	}
</style>