zhonglxcx/zhonglmini/pages/index/index.vue

<template>
	<view>
		<!-- 提示添加小程序 -->
		<addtip :tip="tip" :duration="duration" />
		<!-- 搜索框 -->
		<!-- 拖拽悬浮球 -->
		<view class="kf">
			<button class="kfbt" open-type="contact">
				<image src="http://m2.chinause.cn/mini/baixmini/img/kefubt.png" style="width: 100upx;height: 100upx;" /></button>
		</view>
		<view class="top">
			<view class="main-box" v-if="userInfo.khnum>1">
			  <zqs-select
			    :multiple="false"
			    :list="options"
			    :showSearch="false"
			    label-key="label"
			    value-key="value"
			    title="选择客户"
			    clearable
			    v-model="importUserId"
				@input="getValue2($event)"
			  ></zqs-select>
			</view>
			<view class="input-box" @click="toSearch()">
				<input placeholder="请输入商品名称" placeholder-style="color:#c0c0c0;" disabled="disabled" />
				<cjl-icon>&#xe60b;</cjl-icon>
			</view>
		</view>
		<!-- 轮播图方式一 -->
		<swiper class="card-swiper" :indicator-dots="false" circular autoplay interval="3000" duration="500" previous-margin="30px"
		 next-margin="30px" @change="cardSwiper">
			<swiper-item v-for="(item,index) in banner" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item" @click="topcate(item.url)">
					<hyp-image cname="image" :realSrc="item.images"></hyp-image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 轮播图方式二 -->
		<!-- <swiper class="swiper" :indicator-dots="true" circular autoplay interval="3000" duration="500">
			<swiper-item @tap="onBanner" v-for="(item,index) in banner" :key="index">
				<view class="swiper-item">
					<hyp-image cname="image" :realSrc="item.images"></hyp-image>
				</view>
			</swiper-item>
		</swiper> -->
		<!-- 分类列表 -->
		<view class="type">
			<view class="item" v-for="item in typeList" :key="item.id" @tap="toCategory(item.id)">
				<hyp-image cname="image" :realSrc="item.images"></hyp-image>
				<text class="fltext">{{item.fenlmc}}</text>
			</view>
		</view>
		<!-- 公告区 -->
		<view>
			<uni-notice-bar @click="getMore" show-icon="true" speed="12" scrollable="true" single="true" :color="color"
			 :backgroundColor="backcolor" :text="text">
			</uni-notice-bar>
		</view>
		<!-- 广告图
		<view class="ad-1">
			<image src="http://m2.chinause.cn/mini/baixmini/img/adv.jpg" mode="scaleToFill"></image>
		</view>-->

		<!-- 推荐商品 -->
		<view class="tjgoodlist">
			<view class="title">
				<image src="../../static/img/loveicon.png"></image>
				<text>推荐商品</text>
				<image src="../../static/img/loveicon.png"></image>
			</view>
			<view class="tj_list" v-for="(product,index) in tjproductList" :key="product.id" @click="toGoods(product)">

				<view class="tjleft">
					<image :src="product.img"></image>
				</view>
				<view class="tjright">
					<view style="margin-bottom: 20upx;">{{ product.mc }}&nbsp;{{product.gg}}{{product.dw}}</view>
					<view :class="product.miaosstyle" @tap.stop="changemiaosstyle(index)">
						{{product.miaos}}
					</view>
					 <view>
						<text v-if="product.price!=''">￥{{ product.price }}{{product.dw}}</text>
						<!--<text style="margin: 0 18upx;">库存{{ product.kcnum }}</text>-->
					</view> 
					<!-- <view>
						<text class="sdtext">{{ product.sdtext }}</text>
						<text class="sellnum">售量&nbsp;{{ product.sellnum }}</text>
					</view> -->
					<view style="padding: 0upx 8upx; color: grey; display: flex;align-items: center;" @tap.stop v-if="product.inputnum">
						<input style="font-size: 28upx; color: #41A863;" type="text" :value="product.bz" @input="inputchangeBz($event,product.bz,product.id,product.kcnum,2,index)" placeholder="输入备注">
						<input style="font-size: 28upx; color: #41A863;" type="text" :value="product.fudw" @input="inputchangeFudw($event,product.fudw,product.id,product.kcnum,2,index)" placeholder="输入副单位">
					</view>
					<view class="tjroot">
						<view class="p-b-btn" :class="{active: product.iscollect}" @click.stop="toFavorite(product.id,index,0)">
							<text class="yticon icon-shoucang"></text>
						</view>
						<!-- <view class="nosell" v-if="product.kcnum==0"><text>已售空</text></view> -->
						<view class="number" v-if="product.kcnum">
							<view class="sub" @tap.stop="sub(product.id)" >
								<view class="jian">-</view>
							</view>
							<view class="input" @tap.stop="discard" >
								<input type="digit" v-model="product.inputnum==0?'':product.inputnum" @input="inputchange($event,product.inputnum,product.id,product.kcnum,0)" />
							</view>
							<view class="add" @tap.stop="add(product.id,0)">
								<view class="jia">
									<image src="../../static/img/addicon.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢列表 -->
		<view class="goods-list" v-if="productList!=''">
			<view class="title">
				<image src="../../static/img/loveicon.png"></image>
				<text>猜你喜欢</text>
				<image src="../../static/img/loveicon.png"></image>
			</view>
			<view class="product-list">
				<view class="product" v-for="(product,index) in productList" :key="product.id" @click="toGoods(product)">
					<image :src="product.img"></image>
					<view class="name">{{ product.mc }}&nbsp;{{product.gg}}{{product.dw}}</view>
					<view :class="product.miaosstyle" @tap.stop="changemiaosstyle(index)">
						{{product.miaos}}
					</view>
					<!-- <view style="margin-left: 15upx;">
						<text class="sdtext">{{ product.sdtext }}</text>
						<text class="sellnum">售量&nbsp;{{ product.sellnum }}</text>
					</view>-->
					<view class="info">
						<view class="price" v-if="product.price!=''">￥{{ product.price }}{{product.dw}}</view>
						<!--<view class="slogan">库存&nbsp;{{ product.kcnum }}</view>-->
					</view> 
					<view style="padding: 0upx 8upx;color: grey;" @tap.stop v-if="product.inputnum">
						<input style="font-size: 28upx; color: #41A863;" type="text" :value="product.bz" @input="inputchangeBz($event,product.bz,product.id,product.kcnum,2,index)" placeholder="输入备注">
						<input style="font-size: 28upx; color: #41A863;" type="text" :value="product.fudw" @input="inputchangeFudw($event,product.fudw,product.id,product.kcnum,2,index)" placeholder="输入副单位">
					</view>
					<!-- <view class="nosell" v-if="product.kcnum==0"><text>已售空</text></view> -->
					<view class="number" v-if="product.kcnum">
						<view class="p-b-btn" :class="{active: product.iscollect}" @click.stop="toFavorite(product.id,index,1)">
							<text class="yticon icon-shoucang" style="margin-right: 15upx;"></text>
						</view>
						<view class="sub" @tap.stop="sub(product.id)" >
							<view class="jian">-</view>
						</view>
						<view class="input" @tap.stop="discard" >
							<input type="digit" v-model="product.inputnum==0?'':product.inputnum" @input="inputchange($event,product.inputnum,product.id,product.kcnum,1)" />
						</view>
						<view class="add" @tap.stop="add(product.id,1)">
							<view class="jia">
								<image src="../../static/img/addicon.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 介绍 -->
		<!-- <view class="task-title">
			<view class="top">
				<view class="left">
					<view></view>
					<text>产品&业务介绍</text>
				</view>
				<view class="right">
					<text>更多</text>
					<hyp-icon color="#B0B8C7">&#xe603;</hyp-icon>
				</view>
			</view>
		</view> -->
		<!-- <view class="task-list">
			<view class="item" v-for="(item,index) in pcdesc" :key="item.id" @click="todetail(item.id)">
				<view class="header">
					<view class="left">
						<hyp-image cname="avatar" :realSrc="'../../static/img/desc_icon.png'"></hyp-image>
						<text>{{item.type}}</text>
					</view>
					<view class="right">
						<view class="label">售 23</view>
						<view class="label">￥200</view>
					</view>
				</view>
				<view class="body">
					<view class="left">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.contents}}</view>
					</view>
					<view class="right" v-if="item.img">
						<image :src="item.img" style="border-radius: 15upx;"></image>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import addtip from '@/components/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
	import dragButton from "@/components/drag-button/drag-button.vue";
	import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
	import zqsSelect from '@/components/zqs-select/zqs-select.vue'
	export default {
		components: {
			addtip,
			dragButton,
			uniNoticeBar,
			zqsSelect
		},
		data() {
			return {
				bttext: '客服',
				tip: "点击「添加小程序」，下次访问更便捷",
				duration: 5, //提示添加小程序显示时间
				banner: [{
					"id": 121,
					"title": "母亲节",
					"url": "\/pages\/course\/activity?id=101&_from=share_prod_4",
					"images": "http:\/\/statictest.pipacode.cn\/a1a7a201905101726438109.gif",
					"up_time": "2019-12-14 00:00:00",
					"down_time": ""
				}],
				cardCur: 0,
				typeList: [{
					"id": 3,
					"name": "粮油类",
					"sort": 2,
					"icon": "http://m2.chinause.cn:8888/8img/mini/liangyou.png"
				}],
				pcdesc: [],
				//猜你喜欢列表
				productList: [],
				tjproductList: [],
				loadingText: '正在加载...',
				miaosstyle: 'miaos',
				goodsList: [], //购物车商品
				text: '欢迎进入中龙小程序商城',
				backcolor: '#E8E8E8',
				color: '#F23E05',
				gg_zezhao: 'none',
				gg_model: 'none',
				importUserId:[],
				value:'',
				options:[],
				userInfo:[]
			}
		},
		methods: {
			async baseinfo(key) {
				let reinfo = await this.$api.baseinfo({
					action: 'baseinfo',
					key: key
				});
				if (key == 'gscolor') {
					this.color = reinfo.data.info
				} else if (key == 'gsbgcolor') {
					this.backcolor = reinfo.data.info
				}
			},
			//拖拽悬浮球相关事件开始
			btnClick() {
				console.log('btnClick');
			},
			btnTouchstart() {
				console.log('btnTouchstart');
			},
			btnTouchend() {
				console.log('btnTouchend');
			},
			//拖拽悬浮球相关事件结束
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			//搜索跳转
			toSearch() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.navigateTo({
					url: `/pages/search/search`
				})
				uni.hideLoading()
			},
			//到分类
			topcate(url) {
				
				if (url != '#' && url != undefined) {
					let tourl = url.split('?');
					let ids = tourl[1].split('&');
					let dflid = ids[0];
					let xflid = ids[1];
					getApp().globalData.dflid = dflid;
					getApp().globalData.xflid = xflid;
					getApp().globalData.tid = 1;
					uni.switchTab({
						url: tourl[0]
					})
				}
			},
			async addcollection(id, index, dotype) {
				let userinfo = uni.getStorageSync('userinfo');
				let type;
				if (dotype == 0) {
					type = !this.tjproductList[index].iscollect;
				} else {
					type = !this.productList[index].iscollect;
				}

				if (userinfo) {
					let redata = await this.$api.addcollection({
						action: 'addcollection',
						type: type,
						uid: userinfo.uid,
						id: id
					});
					uni.showToast({
						title: redata.msg,
						icon: 'none'
					})
					if (redata.code == 1) {
						if (dotype == 0) {
							this.tjproductList[index].iscollect = !this.tjproductList[index].iscollect;
						} else {
							this.productList[index].iscollect = !this.productList[index].iscollect;
						}
					}
				} else {
					uni.navigateTo({
						url: '/pages/user/login'
					})
				}
			},
			//收藏
			toFavorite(id, index, type) {
				this.addcollection(id, index, type);
			},
			//猜你喜欢商品
			async getgoodlist() {
				let userinfo = uni.getStorageSync('userinfo');
				let getdata = await this.$api.getgoodlist({
					action: 'goodlist2',
					type: 1,
					uid: userinfo.uid
				});
				this.productList = getdata.data.map((item, index) => {
					item.checked = false
					item.shownum = 0
					item.miaosstyle = 'miaos'
					return item
				});
				this.checkshownum();
			},
			//获取推荐商品
			async gettjgoodlist() {
				let userinfo = uni.getStorageSync('userinfo');
				let getdata = await this.$api.getgoodlist({
					action: 'goodlist2',
					type: 2,
					uid: userinfo.uid
				});
				this.tjproductList = getdata.data.map((item, index) => {
					item.checked = false
					item.shownum = 0
					item.miaosstyle = 'miaos'
					return item
				});
				this.checkshownum();
			},
			//轮播图
			async getbanner() {
				let getdata = await this.$api.getbanner({
					action: 'banner'
				});
				if(getdata.code!=0){
					this.banner = getdata.data;	
				}
			},
			//公告
			async getnotice() {
				let getdata = await this.$api.notice({
					action: 'notice'
				});
				this.text = getdata.data[0].info;
			},
			
			//点击公告
			getMore(e) {
				uni.showModal({
					title: '',
					content: this.text,
					showCancel: false,
					buttonText: '确定',
					success: (res) => {
						if (res.confirm) {

						}
					}
				})
			},
			//获取分类导航
			async getitem() {
				let getdata = await this.$api.getitem({
					action: 'item'
				});
				this.typeList = getdata.data;
			},
			//获取产品介绍列表
			async getcpdesc() {
				let getdata = await this.$api.getcpdesc({
					action: 'cpdesc'
				});
				this.pcdesc = getdata.data;
			},
			//跳详情页
			toGoods(good) {
				uni.navigateTo({
					url: '../product/detail?gid=' + good.id + "&price=" + good.price
				})
			},
			//跳转到产品,改跳分类
			toCategory(e) {
				getApp().globalData.dflid = e;
				getApp().globalData.xflid = 0;
				uni.switchTab({
					url: '/pages/category/category'
				})
			},
			//文章详细
			todetail(e) {
				uni.navigateTo({
					url: `/pages/advdetail/advdetail?id=` + e
				})
			},
			//点击改变描述显示
			changemiaosstyle(index) {
				let item = this.productList[index]
				item.checked = !item.checked

				if (item.miaosstyle == 'miaos') {
					item.miaosstyle = 'miaosshow';
				} else {
					item.miaosstyle = 'miaos';
				}
				this.$set(this.productList, index, item)
			},
			//减操作
			sub(id) {
				let getcartlist = uni.getStorageSync('cartlist');
				let isexit = this.findidfromstor(id);
				let delid = 0;
				for (let i = 0; i < getcartlist.length; i++) {
					if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
						getcartlist[i].num--; //数量减
						if (getcartlist[i].num <= 0) {
							//删除当前商品缓存
							getcartlist.splice(i, 1);
							uni.setStorageSync('cartlist', getcartlist)
							break; //跳出循环
						} else {
							getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
							uni.setStorageSync('cartlist', getcartlist)
							break; //跳出循环
						}

					}
				}

				this.checkshownum();
			},
			// 增加数量,type 0-推荐商品，1-猜你喜欢商品
			add(id, type) {
				let getcartlist = uni.getStorageSync('cartlist');
				//首次加购物车
				if (getcartlist == '') {
					this.goodsList = [];
					if (type == 1) {
						this.goodsList.push(this.findarrbyid(id));
					} else {
						this.goodsList.push(this.findarrbyid_tj(id));
					}
					//计算每个商品的总价格
					this.goodsList.map((item, index) => {
						item.total = parseFloat((item.price * item.num) * 100) / 100
					});
					uni.setStorageSync('cartlist', this.goodsList);

				} else {
					//已有商品在购物车
					let isexit = this.findidfromstor(id);
					if (!isexit) {
						//购物车中还没当前商品
						//不存在
						if (type == 1) {
							getcartlist.push(this.findarrbyid(id));
						} else {
							getcartlist.push(this.findarrbyid_tj(id));
						}
						for (let i = 0; i < getcartlist.length; i++) {
							if (id == getcartlist[i].id) {
								getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
							}
						}
						uni.setStorageSync('cartlist', getcartlist);

					} else {
						//存在
						for (let i = 0; i < getcartlist.length; i++) {
							if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
								getcartlist[i].num++; //数量自增
								if (getcartlist[i].num > getcartlist[i].kcnum) {
									uni.showToast({
										title: '库存不足！',
										icon: 'none'
									})
									break; //跳出循环
								} else {
									getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
									uni.setStorageSync('cartlist', getcartlist)
									break; //跳出循环
								}
							}
						}
					}
				}
				this.checkshownum();
			},
			// input框直接加入购物车
			inputadd(id, type,inputnum) {
				let getcartlist = uni.getStorageSync('cartlist');
				//首次加购物车
				if (getcartlist == '') {
					this.goodsList = [];
					if (type == 1) {
						this.goodsList.push(this.findarrbyid(id));
					} else {
						this.goodsList.push(this.findarrbyid_tj(id));
					}
					//计算每个商品的总价格
					this.goodsList.map((item, index) => {
						item.total = parseFloat((item.price * inputnum) * 100) / 100;
						item.num = parseFloat(inputnum);
					});
					uni.setStorageSync('cartlist', this.goodsList);

				} else {
					//已有商品在购物车
					let isexit = this.findidfromstor(id);
					if (!isexit) {
						//购物车中还没当前商品
						//不存在
						if (type == 1) {
							getcartlist.push(this.findarrbyid(id));
						} else {
							getcartlist.push(this.findarrbyid_tj(id));
						}
						for (let i = 0; i < getcartlist.length; i++) {
							if (id == getcartlist[i].id) {
								getcartlist[i].total = parseFloat((inputnum * getcartlist[i].price) * 100) / 100;
								getcartlist[i].num = parseFloat(inputnum);
							}
						}
						uni.setStorageSync('cartlist', getcartlist);

					} else {
						//存在
						for (let i = 0; i < getcartlist.length; i++) {
							if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
								getcartlist[i].num=inputnum; //数量自增
								if (getcartlist[i].num > getcartlist[i].kcnum) {
									uni.showToast({
										title: '库存不足！',
										icon: 'none'
									})
									break; //跳出循环
								} else {
									getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
									uni.setStorageSync('cartlist', getcartlist)
									break; //跳出循环
								}
							}
						}
					}
				}
				this.checkshownum();
			},
			inputchange(inputsl,inputnum, id, kcnum,type) {
				inputnum=parseFloat(inputsl.detail.value);
				let getcartlist = uni.getStorageSync('cartlist');
				if (inputnum > 0) {
					if (inputnum > kcnum) {
						uni.showToast({
							title: '库存不足',
							icon: 'none'
						})
						return;
					}
					this.inputadd(id,type,inputnum);//input框直接添加购物车
				} else {
					for (let i = 0; i < getcartlist.length; i++) {
						if (id == getcartlist[i].id) { //找到商品一样的商品
							getcartlist[i].num = 0;
							uni.setStorageSync('cartlist', getcartlist)
							break; //跳出循环
						}
					}
					this.checkshownum();
				}
			},
			inputchangeBz(inputsl,inputnum, id, kcnum,type,index) {
				inputnum=inputsl.detail.value;
				let getcartlist = uni.getStorageSync('cartlist');
				let isbz=0;
				for (let i = 0; i < getcartlist.length; i++) {
					if (id == getcartlist[i].id) { //找到商品一样的商品
						getcartlist[i].bz = inputnum;
						uni.setStorageSync('cartlist', getcartlist)
						isbz=1;
						break; //跳出循环
					}
				}
				this.checkshownum();
				if(isbz==0){
					uni.showToast({title:'请您输入数量后再填备注',icon:'none'});
					return;
				}
			},
			inputchangeFudw(inputsl,inputnum, id, kcnum,type,index) {
				inputnum=inputsl.detail.value;
				let getcartlist = uni.getStorageSync('cartlist');
				let is=0;
				for (let i = 0; i < getcartlist.length; i++) {
					if (id == getcartlist[i].id) { //找到商品一样的商品
						getcartlist[i].fudw = inputnum;
						uni.setStorageSync('cartlist', getcartlist)
						is=1;
						break; //跳出循环
					}
				}
				this.checkshownum();
				if(is==0){
					uni.showToast({title:'请您输入数量后再填副单位',icon:'none'});
					return;
				}
			},
			//初始化购物车数据
			checkshownum() {
				let getcartlist = uni.getStorageSync('cartlist');
				let carid = [];let carbz = [];let carfudw = [];
				for (let i = 0; i < getcartlist.length; i++) {
					carid[getcartlist[i]['id']] = getcartlist[i]['num'];
					carbz[getcartlist[i]['id']] = getcartlist[i]['bz'];	
					carfudw[getcartlist[i]['id']] = getcartlist[i]['fudw'];	
				}
				for (let i = 0; i < this.productList.length; i++) {
					if (carid[this.productList[i]['id']]) {
						this.$set(this.productList[i], 'inputnum', carid[this.productList[i]['id']])
						this.$set(this.productList[i], 'bz', carbz[this.productList[i]['id']])
						this.$set(this.productList[i], 'fudw', carfudw[this.productList[i]['id']])
					} else {
						this.$set(this.productList[i], 'inputnum', 0)
						this.$set(this.productList[i], 'bz','')
						this.$set(this.productList[i], 'fudw','')
					}
				}
				for (let i = 0; i < this.tjproductList.length; i++) {
					if (carid[this.tjproductList[i]['id']]) {
						this.$set(this.tjproductList[i], 'inputnum', carid[this.tjproductList[i]['id']])
						this.$set(this.tjproductList[i], 'bz', carbz[this.tjproductList[i]['id']])
						this.$set(this.tjproductList[i], 'fudw', carfudw[this.tjproductList[i]['id']])
					} else {
						this.$set(this.tjproductList[i], 'inputnum', 0)
						this.$set(this.tjproductList[i], 'bz', '')
						this.$set(this.tjproductList[i], 'fudw', '')
					}
				}
			},

			//根据数组指定key获取当前数组
			findarrbyid(id) {
				let arr = this.productList;
				for (let i = 0; i < arr.length; i++) {
					if (arr[i]['id'] == id) {
						//console.log(arr[i],'要保存的东西')
						return arr[i];
						break; //跳出循环
					}
				}
			},
			//推荐商品
			findarrbyid_tj(id) {
				let arr = this.tjproductList;
				for (let i = 0; i < arr.length; i++) {
					if (arr[i]['id'] == id) {
						//console.log(arr[i],'要保存的东西')
						return arr[i];
						break; //跳出循环
					}
				}
			},
			//从本地存储中根据id获取数组
			findidfromstor(id) {
				let arr = uni.getStorageSync('cartlist');
				for (let i = 0; i < arr.length; i++) {
					if (arr[i]['id'] == id) {
						return arr[i];
						break; //跳出循环
					}
				}
			},
			discard() {
				//丢弃,防止事件冒泡而设
			},
			async getColor(){
				let reinfo = await this.$api.getitem({
					action: 'baseinfocolor'
				});
				this.color = reinfo.data[0].info
				this.backcolor = reinfo.data[1].info
			},
			async base(){
				let baseinfo=await this.$api.baseset({action:'baseinfo',key:'mininame'});
				uni.setNavigationBarTitle({
				    title: baseinfo.data.info,
				});
			},
			init() {
				this.getbanner();
				this.getitem();
				//this.getcpdesc();
				// this.getgoodlist();
				this.gettjgoodlist();
				this.getnotice();
				// this.getColor();
				// this.baseinfo('gscolor');
				// this.baseinfo('gsbgcolor');
				this.base();
			},
			getValue2(e){
				this.value = e;
				if(!this.value || this.value=='')
				{
					this.importUserId=this.userInfo.uid;
				}else{
					let getuserinfo=uni.getStorageSync('userinfo');
					if(getuserinfo)
					{
						let dataObj = getuserinfo;
						// 修改特定元素的值
						dataObj.uid = this.value;
						uni.setStorageSync('userinfo',dataObj);
						this.userInfo=dataObj;
					}
					this.importUserId=this.value;
				}
				
			}
		},
		onShow() {
			// this.init();
			this.getgoodlist();
			this.gettjgoodlist();
			this.checkshownum();
			// this.baseinfo('gscolor');
			// this.baseinfo('gsbgcolor');
			let getuserinfo=uni.getStorageSync('userinfo');
			//console.log(getuserinfo);
			if(getuserinfo!='')
			{
				this.userInfo=getuserinfo;
				this.importUserId=getuserinfo.uid;
				this.options=getuserinfo.kharr;
			}
		},
		onLoad(e) {
			this.init();
			uni.showShareMenu({
				complete() {
				}
			})
		}
	}
</script>

<style lang="scss">
	.gg_zz {
		position: fixed;
		top: 0;
		z-index: 1;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #3c3c3c;
		opacity: 0.8;
	}

	.gg_model {
		width: 80%;
		color: #666;
		z-index: 2;
		height: auto;
		border-radius: 10px;
		opacity: 1;
		background-color: white;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 10px;
	}

	.gg_model text {
		margin-bottom: 15px;
		font-size: 32rpx;
		line-height: 20px;
	}

	.gg_cennel {
		margin: auto;
		display: block;
		width: 55px;
		text-align: center;
		border-radius: 5px;
		font-size: 35rpx;
		color: #50BAFE;
		border: 1rpx solid #50BAFE;
		height: 60rpx;
		line-height: 60rpx;
	}

	.kefubt {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.kf {

		.kfbt {
			display: flex;
			position: fixed;
			z-index: 999999;
			top: 76%;
			right: 0;
			margin-right: 3rpx;
			background: none;

		}

		.kfbt::after {
			border: 0;
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	// 搜索
	.top {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		// position: absolute;
		// top: 35upx;
		// z-index: 111;
		.main-box {
		  display: flex;
		  margin: 10rpx;
		  justify-content: space-between;
		  background: #fff;
		  width:25%;
		  padding: 10rpx;
		  margin-top:-3px;
		  text-align: left;
		}
		.input-box {
			width: 70%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 15upx;

			input {
				padding-left: 30upx;
				height: 28upx;
				font-size: 28upx;
			}

			margin-bottom: 15upx;
		}
	}

	.icon {
		font-family: 'HMfont-home' !important;
		font-size: 60upx;
		font-style: normal;
		color: #000000;

		&.search {
			&:before {
				content: '\e628';
			}
		}

	}

	.card-swiper {
		height: 300upx !important;

		swiper-item {
			box-sizing: border-box;
			padding: 30upx 0upx 20upx;
			overflow: initial;

			.swiper-item {
				@include size(100%);
				display: block;
				border-radius: 30upx;
				transform: scale(0.9);
				transition: all 0.2s ease-in 0s;
				overflow: hidden;

				.image {
					@include size(100%);
				}
			}

			&.cur {
				.swiper-item {
					transform: none;
					transition: all 0.2s ease-in 0s;
				}
			}
		}
	}

	.type {
		@include fr();
		flex-wrap: wrap;
		margin: 20upx;

		.item {
			flex: 0 0 25%;
			@include fc(c, c);
			margin-bottom: 20upx;

			.image {
				@include size(100upx);
				margin-bottom: 10upx;
				border-radius: 50%;
			}

			text {

				@include font(28upx, #666);
			}
		}
	}

	.ad-1 {
		width: 100%;
		height: 220upx;
		padding: 10upx 20upx;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
			border-radius: 15upx;
		}
	}

	.sellnum {
		font-size: 25upx;
		padding-left: 15upx;
		color: #B9B9B9;
	}

	.sdtext {
		padding: 2upx 8upx;
		border: 1upx #DBDBDB solid;
		border-radius: 5upx;
		color: #B9B9B9;
		font-size: 25upx;
		margin-top: 3upx;

	}

	// 推荐商品样式
	.tjgoodlist {
		padding: 0 30upx;

		.title {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			color: #5FCDA2;
			font-size: 30upx;
			margin: 20upx 0;

			text {
				margin: 0 15upx;
			}

			image {
				width: 40upx;
				height: 40upx;
			}
		}

		.tj_list {
			display: flex;
			justify-content: space-around;
			padding: 10upx 0;
			border-bottom: 1upx #F0F0F0 solid;
			height: 260upx; 
			
			.tjleft {
				width: 50%;

				image {
					width: 180upx;
					height: 180upx;
					border-radius: 20upx;
				}
			}

			.tjright {
				width: 100%;
				padding: 15upx 4%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 28upx;
				color: #747474;

				.tjroot {
					display: flex;
					justify-content: space-between;
					justify-items: center;
					padding-top: 8upx;
				}
			}
		}
	}

	.task-title {
		margin: 30upx;

		.top {
			@include fr(b, c);

			.left {
				@include fr(s, c);

				view {
					@include size(8upx, 36upx);
					border-radius: 4upx;
					margin-right: 10upx;
					background: #50BAFE;
				}

				text {
					@include font(36upx, #3A4E73, bold);
				}
			}

			.right {
				@include fr(s, b);

				text {
					@include font(28upx, #B0B8C7);
				}
			}
		}

		.bottom {
			margin-top: 5upx;
			@include font(24upx, #B0B8C7);
		}
	}

	.task-list {
		padding: 0 30upx;

		.item {
			@include fc();
			@include line(0, 0, 1, 0);
			padding-top: 20upx;

			&:first-child {
				padding-top: 0;
			}

			&:last-child {
				&:after {
					display: none;
				}
			}

			.header {
				@include fr(b, c);

				.left {
					@include fr(s, c);

					.avatar {
						@include size(50upx);
						margin-right: 10upx;
						border-radius: 50%;
					}

					text {
						@include font(24upx, #333);
					}
				}

				.right {
					@include fr(s, c);

					.label {
						@include fr(c, c);
						@include font(22upx, #50BAFE);
						height: 36upx;
						padding: 0 15upx;
						background: #EDF8FF;
						border-radius: 100upx;
						margin-right: 10upx;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}

			.body {
				padding: 20upx 0;
				padding-left: 5upx;
				@include fr(b, s);

				.left {
					width: 60%;
					@include fc();

					.title {
						width: 100%;
						@include ell();
						@include font(28upx, #666);
						padding-bottom: 10upx;
					}

					.desc {
						width: 100%;
						@include ell(2);
						@include font(22upx, #999);
					}
				}

				.right {
					image {
						@include size(200upx);
					}
				}
			}
		}
	}

	// 猜你喜欢列表
	.goods-list {

		// background-color: #f4f4f4;
		.title {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			color: #5FCDA2;
			font-size: 30upx;
			margin: 20upx 0;

			text {
				margin: 0 15upx;
			}

			image {
				width: 40upx;
				height: 40upx;
			}
		}

		.product-list {
			width: 100%;
			padding: 0 4% 3vw 4%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.product {
				width: 48%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 15upx 0;
				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);

				image {
					width: 100%;
					height: 300upx;
					border-radius: 20upx 20upx 0 0;
				}

				.name {
					width: 100%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 28upx;
					color: #747474;
				}

				.miaos {
					width: 100%;
					margin: 10upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					text-align: justify;
					overflow: hidden;
					font-size: 28upx;
					color: #747474;
				}

				.miaosshow {
					margin: 10upx;
					font-size: 28upx;
					color: #747474;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 10upx 4% 10upx 4%;

					.price {
						color: #e65339;
						font-size: 30upx;
						font-weight: 600;
					}

					.slogan {
						color: #807c87;
						font-size: 24upx;
					}
				}

				.add {
					image {
						width: 43upx;
						height: 40upx;
						padding: 7upx;
					}
				}


			}
		}
	}

	.nosell {
		display: flex;
		justify-content: flex-end;

		text {
			position: relative;
			right: 5upx;
			padding: 5upx;
			background-color: #EAEAEA;
			color: white;
			font-size: 28upx !important;
		}
	}

	.number {
		display: flex;
		justify-content: flex-end;
		margin-right: 30upx;
		margin-bottom: 10upx;

		.input {
			width: 70upx;
			height: 45upx;
			margin: 0 10upx;
			// background-color: #f3f3f3;
			border-bottom: 1upx #ADADAD solid;

			input {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 26upx;
			}
		}

		.sub,
		.add {
			width: 45upx;
			height: 45upx;
			border-radius: 5upx;
		}

		.jia {
			display: flex;
			width: 45upx;
			height: 45upx;
			justify-content: center;
			justify-items: center;
			align-items: center;
			background-color: #41A863;
			color: #fff;
			border-radius: 50%;

			image {
				width: 40upx;
				height: 40upx;
				padding: 7upx;
			}
		}

		.jian {
			display: flex;
			width: 45upx;
			height: 45upx;
			justify-content: center;
			justify-items: center;
			align-items: center;
			background-color: #41A863;
			color: #fff;
			border-radius: 50%;
			padding-bottom: 10upx;
		}
	}

	//收藏样式
	.p-b-btn {

		.yticon {
			font-size: 40upx;
			line-height: 48upx;
			color: $font-color-light;
		}

		&.active,
		&.active .yticon {
			color: $uni-color-primary;
		}

		.icon-fenxiang2 {
			font-size: 42upx;
			transform: translateY(-2upx);
		}

		.icon-shoucang {
			font-size: 50upx;
		}
	}
</style>