shopdetail.vue 9.9 KB
<template>
	<view clas="content ">
		<view class="shopdetailtop flextwo boxsizing">
			<view class="nearitem flexfour">
				<view class="nearitemimg">
					<image src="../../static/doorin.png" mode=""></image>
				</view>
				<view class="nearitemname">室外温度</view>
				<view class="neardoor">12℃</view>
			</view>
			<view class="nearitem flexfour">
				<view class="nearitemimg">
					<image src="../../static/doorin.png" mode=""></image>
				</view>
				<view class="nearitemname">室内温度</view>
				<view class="neardoor">{{shopdetail.temperature}}℃</view>
			</view>
			<view class="nearitem flexfour">
				<view class="nearitemimg">
					<image src="../../static/doorin.png" mode=""></image>
				</view>
				<view class="nearitemname">室内湿度</view>
				<view class="neardoor">{{shopdetail.humidity}}%RH</view>
			</view>
			<view class="nearitem flexfour">
				<view class="nearitemimg">
					<image src="../../static/doorin.png" mode=""></image>
				</view>
				<view class="nearitemname">空气质量指数</view>
				<view class="neardoor">{{shopdetail.battery}}</view>
			</view>
		</view>

		<view class="detailgood boxsizing flexone" v-if="shexianglist.length!=0">
			<view class="detailgooditem" v-for="(item,index) in shexianglist" :key="index" @click="gojiankong(item)">
				<image src="../../static/shopdetailtop.png" mode=""></image>
				<view class="goodbot flextwo boxsizing">
					<view class="goodbotleft">
						<image src="../../static/openkai.png" mode=""></image>
					</view>
					<view class="goodbotleft">
						<image src="../../static/play.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- <view class="detailgooditem">
				<image src="../../static/shopdetailtop.png" mode=""></image>
				<view class="goodbot flextwo boxsizing">
					<view class="goodbotleft">
						<image src="../../static/openkai.png" mode=""></image>
					</view>
					<view class="goodbotleft">
						<image src="../../static/play.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="detailgooditem">
				<image src="../../static/shopdetailtop.png" mode=""></image>
				<view class="goodbot flextwo boxsizing">
					<view class="goodbotleft">
						<image src="../../static/openkai.png" mode=""></image>
					</view>
					<view class="goodbotleft">
						<image src="../../static/play.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="detailgooditem">
				<image src="../../static/shopdetailtop.png" mode=""></image>
				<view class="goodbot flextwo boxsizing">
					<view class="goodbotleft">
						<image src="../../static/openkai.png" mode=""></image>
					</view>
					<view class="goodbotleft">
						<image src="../../static/play.png" mode=""></image>
					</view>
				</view>
			</view>
		
		 -->
		</view>
		<view class="addressbox boxsizing">
			<view class="addressname">{{shopdetail.name}}</view>
			<view class="addressin">
				<view class="addressimitem flextwo boxsizing">
					<view class="addressinleft flexone">
						<view class="addressimg">
							<image src="../../static/userpeople.png" mode=""></image>
						</view>
						<view class="peoplename">{{shopdetail.contact}}</view>
					</view>
					<view class="collect flexone" v-if="shopdetail.is_collect==2" @click="collet">
						<view class="collectimg">
							<image src="../../static/collect.png" mode=""></image>
						</view>
						<view class="collectname">收藏</view>
					</view>
					<view class="collect flexone yicollect" v-else @click="collet">
						<view class="collectimg">
							<image src="../../static/yicollect.png" mode=""></image>
						</view>
						<view class="collectname yiname">取消收藏</view>
					</view>
				</view>
			</view>

			<view class="addressin">
				<view class="addressimitem boxsizing flexone">
					<view class="addressinleft flexone">
						<view class="addressimg">
							<image src="../../static/phonepeople.png" mode=""></image>
						</view>
						<view class="peoplename mobilename">{{shopdetail.mobile}}</view>
					</view>
					
					<view class="phoneplay" @click="phone">拨号</view>
				</view>
			</view>
			<view class="addressin">
				<view class="addressimitem boxsizing flexone">
					<view class="addressinleft flexone">
						<view class="addressimg">
							<image src="../../static/addresspeope.png" mode=""></image>
						</view>
						<view class="peoplename">{{shopdetail.province_name}}{{shopdetail.city_name}}{{shopdetail.county_name}}{{shopdetail.address}}</view>
					</view>

				</view>
			</view>


		</view>

		<view class="tapnav flextwo">
			<view class="tapnavitem" :class="order==0?'tapnavactive':''" @click="kindlist" :data-id="0">分类</view>
			<view class="tapnavitem" :class="order==1?'tapnavactive':''" @click="orderrange" :data-id="1">综合</view>
			<view class="tapnavitem" :class="order==2?'tapnavactive':''" @click="orderrange" :data-id="2">销量</view>
			<view class="tapnavitem flexone" :class="order==3||order==4?'tapnavactive':''" @click="selprice">
				<view class="tapprice">价格</view>
				<view class="tapbox flexfour">
					<view class="tapboxtop">
						<image src="../../static/toprow.png" mode=""></image>
					</view>
					<view class="tapboxtop">
						<image src="../../static/xiarow.png" mode=""></image>
					</view>
				</view>
			</view>
					
					
		</view>

		<view class="homeshoplist flexone goodboxlist">
			<view class="homeshopitem goodboxitem" v-for="(item,index) in goodlist" :key="index" @click="goodtail" :data-id="item.id"> 
				<view class="gooditemimg goodboximg">
					<image :src="item.image" mode=""></image>
					<view class="sale boxsale">已售{{item.sales}}件</view>
				</view>
				<view class="goodname hidden boxgoodname">{{item.name}}</view>
				<view class="saleprice">¥{{item.price}}</view>
				<!-- <view class="flextwo">
					<view class="huiyuanprice dikou">抵扣:¥200</view>
					<view class="goodshou">已售76</view>
				</view> -->

			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				showbanben: false,
				store_id:'',
				shopdetail:'',
				order:'',
				page:1,
				score_category_id:'',
				goodlist:[],
				shexianglist:[]
			}
		},
		onLoad(options) {
			console.log(options)
			this.store_id=options.shopid,
			
			// 获取店铺详情
			this.getshopdetail();
			// 获取店铺列表
			this.getgoodlist();
			// 获取监控列表
			this.getjiankonglist()



		},
		methods: {
			//获取监控列表
			getjiankonglist(){
				let that = this;
				var url = 'store/get_store_camera';
				var params = {
					store_id: that.store_id,
					
				}
				console.log('参数', params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					that.shexianglist=res.data.data
					
				}).catch((err) => {
					console.log(err)
				
				})
			},
			// 去监控页面
			gojiankong(item){
				uni.navigateTo({
					url:"/pages/nearshop/jiankong?src="+item.url
				})
			},
			// 拨打电话
			phone(item){
				uni.makePhoneCall({
				    phoneNumber: this.shopdetail.mobile //仅为示例
				});
			},
			
			// 分类
			kindlist(e){
				this.order=e.currentTarget.dataset.id;
				uni.setStorageSync("selectId","")
				uni.navigateTo({
					url:'/pages/homepage/goodkind'
				})
			},
			// 排序
			orderrange(e) {
				this.order = e.currentTarget.dataset.id;
				this.shoplist = [],
					this.page = 1;
				 this.getgoodlist();
			},
			selprice() {
				this.price = !this.price;
				if (this.price == true) {
					this.order = 4;
				} else {
					this.order = 5;
				}
				this.shoplist = [],
					this.page = 1;
				this.getgoodlist();
			},
			// 获取店铺详情
			getshopdetail() {
				let that = this;
				var url = 'store/get_store_detail';
				var params = {
					store_id: that.store_id,
					
				}
				console.log('参数', params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					 that.shopdetail = res.data.data

				}).catch((err) => {
					console.log(err)

				})
				},
				// 收藏和取消收藏
				collet(){
					let that = this;
					var url = 'store/collect';
					var params = {
						store_id: that.store_id,
						
					}
					console.log('参数', params)
					app.post(url, params, "post").then((res) => {
						if(that.shopdetail.is_collect==2){
							uni.showToast({
								title:'收藏成功',
								icon:"none"
							})
							
							that.shopdetail.is_collect=1
						}else{
							uni.showToast({
								title:'取消收藏成功',
								icon:"none"
							})
							
							that.shopdetail.is_collect=2
						}
						that.shopdetail=that.shopdetail;
							
						console.log(res);
						 // that.shopdetail = res.data.data
					
					}).catch((err) => {
						console.log(err)
					
					})
				},
				// 获取商品列表
				getgoodlist(){
					let that = this;
					var url = 'store_goods/get_store_goods';
					var params = {
						store_id: that.store_id,
						store_category_id:that.store_category_id,
						order:that.order,
						page:that.page,
						pageNum:10
					}
					console.log('参数', params)
					app.post(url, params, "post").then((res) => {
						console.log(res);
						that.goodlist=that.goodlist.concat(res.data.data);
						console.log(that.goodlist)
					}).catch((err) => {
						console.log(err)
					
					})
				},
				// 进入商品详情页
				goodtail(e) {
					let id = e.currentTarget.dataset.id;
					console.log(this.shopdetail)
					let obj={
						free_postage:this.shopdetail.free_postage,
						postage:this.shopdetail.postage
					}
					obj=JSON.stringify(obj)
					// type 1 面访商品 2积分商城商品
					uni.navigateTo({
						url: '/pages/nearshop/goodtail?id=' + id + '&type=' + 3+'&obj='+obj
					})
				}
			},
			onShow(){
				this.score_category_id=uni.getStorageSync("selectId")!=''?uni.getStorageSync("selectId"):''
				this.shoplist=[];
				this.page=1;
			}

		}
</script>

<style>
	@import url('../../base/nearshop');
	@import url('../../base/homepage');
	.mobilename{
		margin-right:10rpx;
	}
</style>