liveShop/pages/shop/shop.vue

<template>
	<view class="content">
		<view class="titleNview-placing">
			
		</view>
		<!-- 小店头部start -->
		<view class="shop-top">
			<view class="shop-box">
				<view class="left">
					<view class="avatar"><image :src="avatar || '/static/error/missing-face.png'" mode=""></image></view>
					<view class="avatar-right">
						<view class="username">{{store_name}}</view>
						<view class="member">{{phone}}</image></view>
					</view>
				</view>
				<view class="right">
					<view class="sharing-online-store">分享网店</view>
					<view class="img" @click="shareLink"><image src="https://zhibo.liuniu946.com/img/share.png" mode=""></image></view>
				</view>
			</view>
		</view>
		<!-- 小店头部end -->
		<!-- 小店主体start -->
		<view class="shop-buttom">
			<view class="commodity-box" v-for="item in list" :key="item.id">
				<view class="commodity-left"><image :src="item.image" mode=""></image></view>
				<view class="commodity-right">
					<view class="commodity-right-top">
						<view class="top-two">{{item.store_name}}</view>
					</view>
					<view class="commodity-right-buttom">
						<view class="buttom-left">
							<view class="price" v-if="userInfo.level > 0">￥{{item.vip_price}}</view>
							<view class="price" v-else>￥{{item.price}}</view>
							<!-- <view class="original-price">￥{{item.price}}</view> -->
						</view>
						<view class="buttom-right" @click="navToDetailPage(item)">马上购</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="shareShow" class="Shraremask" @click="cancel">
			<view class="mask-content">
				<scroll-view class="view-content" scroll-y>
					<view class="share-header">分享到</view>
					<view class="share-list">
						<view class="share-item">
							<!-- 微信 -->
							<button class="wechat-box" open-type="share">
								<image class="itemImage" src="../../static/img/weixin.png" mode=""></image>
								<text class="itemText">微信</text>
							</button>
							<!-- 朋友圈 -->
							<!-- <view class="wechat-box" @click="shareToFriend()">
								<image class="itemImage" src="https://tmp01.kktv6.com/img/img002.png" mode=""></image>
								<text class="itemText">朋友圈</text>
							</view> -->
						</view>
					</view>
				</scroll-view>
				<view class="bottomButtom b-t" @click="cancel">取消</view>
			</view>
		</view>
		<!-- 小店主体end -->
		<u-tabbar v-if="mystore" v-model="current" :list="tabbar" active-color="#FF0000" inactive-color="#f19c99"></u-tabbar>
		<u-tabbar v-else v-model="current" :list="tabbar1" active-color="#FF0000" inactive-color="#f19c99"></u-tabbar>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import { tabbar } from "@/utils/tabbar.js";
	import { tabbar1 } from "@/utils/tabbar.js";
	import {getStoreGoods} from '@/api/product.js';
	// getStoreGoods
	import {  userinfo } from '@/api/user.js';
	import { getStoreInfo } from '@/api/anchor.js';
	// #ifdef H5
	import { weixindata } from '@/utils/wxAuthorized';
	// #endif
	export default{
		// #ifdef MP
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/' + page.route + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				// 保存邀请人
				path += 'shopId=' + this.userInfo.store_info.id + '&spread=' + this.userInfo.uid;
				let data = {
					path: path,
					imageUrl: this.userInfo.store_info.image,
					title: this.userInfo.store_info.name
				};
				console.log('data',data)
				return data;
			}
		},
		// #endif
		data(){	
			return{
				level:'',
				spstore_id:false,
				store_id: '',
				store_switch:'',
				mystore:'',
				tabbar: tabbar,
				tabbar1: tabbar1,
				current: 0,
				store_name:'',
				avatar:'',
				phone:'',
				list:[],
				shareShow: false, //分享
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(option) {
			if(option.shopId){
				// 存储商店id
				this.store_id = option.shopId;
				// 存储传入的商店id
				uni.setStorageSync('mystore',this.store_id);
				// 存储邀请人
				if(option.spread){
					uni.setStorageSync('spread', option.spread);
				}
			}else{
				// 当没有传过来商店id时获取缓存商店id
				this.store_id = uni.getStorageSync('mystore');
				console.log('当没有传过来商店id时获取缓存商店id',this.store_id)
			}
			this.loadData()
		},
		// 进入页面刷新数据
		onShow() {
			this.store_id = uni.getStorageSync('mystore');
			console.log('当没有传过来商店id时获取缓存商店id',this.store_id)
			this.mystore = uni.getStorageSync('mystore');
			this.loadData()
		},
		methods:{
			loadData(){	
					getStoreInfo({},this.store_id).then(({ data }) =>{
						this.store_name = data.name
						this.phone = data.phone
						this.avatar = data.image
					})
					getStoreGoods({
						page:1,
						limit:10,
						store_id:this.store_id
					}).then(( {data }) =>{
						this.list = data
					})
					// loadIndexs({}).then(({
					// 	data
					// }) => {
					// 	this
					// 	console.log('--store_switch---', data.store_switch);
						
					// })
			},
			
			shareLink(){
				console.log('dainjideniang')
				this.shareShow = true;
			},
			//取消分享
			cancel() {
				this.shareShow = false;
			},
			// 具体分享
			shareToFriend(item) {
				let obj = this;
				uni.showLoading({
					title: 'Loading...',
					mask: true
				})
				// #ifdef H5
				let url = location.href;
				// #endif
				productCode({
					id: obj.goodsid,
					type: 1,
					// #ifdef MP-WEIXIN
					user_type: 'routine', //来源
					// #endif
					// #ifdef H5
					user_type: 'wechat', //来源
					// #endif
					// #ifdef H5
					qurl: url
					// #endif
				}).then(({ data }) => {
					this.backShare = true;
					this.shareImage = data.url;
					uni.hideLoading();
					console.log(data);
				}).catch(e=> {
					uni.hideLoading()
				})
			},
			// 跳转普通商品
			navToDetailPage(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id  + '&sid=' + this.store_id
				})
			}
		}
	}

</script>

<style lang="scss">
.content {
	height: 100%;
	// 	height:var(--status-bar-height);
	// padding-top: var(--status-bar-height);
	.titleNview-placing{
		height:var(--status-bar-height);
		background: #ff0000;
		width: 100%;
	}
	.shop-top {
		padding-top: 88rpx;
		width: 750rpx;
		height: 305rpx;
		background-color: #FF0000;
		border-radius: 0 0 7% 7%;
		display: flex;
		justify-content: center;

		.shop-box {
			width: 710rpx;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				// width: 230rpx;
				height: 90rpx;
				display: flex;
				flex-direction: row;
				.avatar {
					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
				}
				.avatar-right {
					padding-left: 13rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.username {
						// width: 100rpx;
						height: 32rpx;
						font-size: 30rpx;

						// font-weight: bold;
						color: #ffffff;
						line-height: 24px;
					}
					.member {
						width: 93rpx;
						height: 34rpx;
						font-size: 30rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						image {
							width: 93rpx;
							height: 34rpx;
						}
					}
				}
			}
			.right {
				display: flex;
				flex-direction: row;
				.sharing-online-store {
					width: 118rpx;
					height: 29rpx;

					color: #ffffff;
				}
				.img {
					width: 42rpx;
					height: 42rpx;

					image {
						width: 42rpx;
						height: 42rpx;
					}
				}
			}
		}
	}
	.shop-buttom {
		width: 710rpx;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 10rpx;
		margin-top: -70rpx;
		.commodity-box {
			display: flex;
			flex-direction: row;
			// padding: 40rpx 20rpx;
			padding: 24rpx;
			border-bottom: 1px solid #F0F0F0;
			.commodity-left {
				padding-right: 22rpx;
				image {
					width: 144rpx;
					height: 144rpx;
				}
			}
			.commodity-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;
				.commodity-right-top {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.top-two {
						font-size: 32rpx;
						font-weight: 500;
						color: #666666;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}
				.commodity-right-buttom {
					display: flex;
					justify-content: space-between;
					.buttom-left {
						display: flex;
						justify-content: space-between;
						padding-bottom: 15rpx;
						
						.price {
							// width: 117rpx;
							height: 36rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #FF0000;
							
						}
						.original-price {
							height: 18rpx;
							font-size: 22rpx;
							margin-left: 12rpx;
							margin-top: 12rpx;
							text-decoration: line-through;
							color: #AAAAAA;
						}
					}
					.buttom-right {
						
						// background: linear-gradient(180deg,#FD4646,#FF3535);
						background-color: #ff0000;
						border-radius: 26px;
						
						padding: 6rpx 18rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}
}
.Shraremask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 998;
	transition: 0.3s;
	background-color: rgba(51, 51, 51, 0.6);
	.bottomButtom {
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90rpx;
		background: #fff;
		z-index: 9;
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
	}
}
.mask-content {
	margin-bottom: 88rpx;
	width: 100%;
	height: 380rpx;
	transition: 0.3s;
	background: #fff;
	&.has-bottom {
		padding-bottom: 90rpx;
	}
	.view-content {
		height: 100%;
	}
}
.share-header {
	height: 110rpx;
	font-size: $font-base + 2rpx;
	color: font-color-dark;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10rpx;
	&:before,
	&:after {
		content: '';
		width: 240rpx;
		height: 0;
		border-top: 1px solid $border-color-base;
		transform: scaleY(0.5);
		margin-right: 30rpx;
	}
	&:after {
		margin-left: 30rpx;
		margin-right: 0;
	}
}
.share-list {
	display: flex;
	width: 80%;
	margin: 0rpx auto;
}
.share-item {
	min-width: 33.33%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180rpx;
	width: 100%;
	.wechat-box {
		width: 50%;
		height: 100%;
		background: #ffffff;
		border: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		&::after {
			border: 0;
		}
		.itemImage {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 16rpx;
		}
		.itemText {
			font-size: $font-base;
			color: $font-color-base;
			line-height: 2;
		}
	}
}
</style>