huihouqin-new-ph/pages/index/index.vue

<template>
	<view>
		<view class="nav-header">
			<view class="nav-header-left">
				<text class="nav-header-left-text">{{orgName}}</text>
			<!-- 	<image class="nav-header-left-icons1" src="../../images/dingwei.png"></image> -->
				<!-- <text class="nav-header-left-text" @click="getLocation">{{orgName}}</text> -->
				<!-- <image class="nav-header-left-icons2" src="../../images/jiantouxia.png"></image> -->
			</view>
			<view class="nav-header-right">
				<image src="../../images/user.png" @click="goUser"></image>
			</view>
		</view>
		
		<view class="calendar-box">
			<template v-for="(item,index) in date">
				<view :key="index" class="calendar-box-list" :class="curDay == item.date?'cur':''" @click="selectDate(item)">
					<view class="calendar-box-list-l1">{{item.week}}</view>
					<view class="calendar-box-list-l2">{{item.day}}</view>
				</view>
			</template>
		</view>
		
		<view class="subnav-box">
			<template v-for="(item,index) in types">
				<view class="subnav-box-list" :class="curType == item.id?'cur':''" @click="selectType(item)">{{item.name}}</view>
			</template>
		</view>
		
		<view class="main">
			<view class="main-cate">
				<template v-for="(item,index) in cate">
					<view :key="index" class="main-cate-list" :class="item.id == curCate?'cur':''" @click="selectCate(item)">
						{{item.name}}
					</view>
				</template>
			</view>
			<view class="main-goods">
				
				<template v-if="goods.length > 0">
					<view class="main-goods-cate">
						{{curCateText}}
					</view>
					<view class="main-goods-list" v-for="(item,index) in goods" :key="index">
						<view class="main-goods-img">
							<image v-if="item.imageLoad" :src="item.img" @error="onErrorImg(item)" @load="onSuccessImg(item)" mode="aspectFill"></image>
							<image v-if="!item.imageLoad" src="../../images/errorbg.png" mode="aspectFill"></image>
						</view>
						<view class="main-goods-box">
							<view class="main-goods-title">
								{{item.title}}
							</view>
							<view class="main-goods-desc">
								{{item.description}}
							</view>
							<view class="main-goods-nums">
								<text class="main-goods-price">￥{{item.price}}</text>
								<image v-if="item.nums > 0" src="../../images/minu.png" @click="minuGoods(item)"></image>
								<text v-if="item.nums > 0">{{item.nums}}</text>
								<image src="../../images/plus.png" @click="plusGoods(item)"></image>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="no-data">
						<image src="../../images/no_data.png" mode=""></image>
						<view class="no-data-text">
							空空如也~
						</view>
					</view>
				</template>
				
				<view>
					<br>
				</view>
			</view>
		</view>
		
		<view class="bottom-box">
			<view class="bottom-box-icon">
				<image src="../../images/plus.png"></image>
				<view v-if="cart > 0" class="bottom-box-count">
					{{cart}}
				</view>
			</view>
			<view class="bottom-box-text">
				<text v-if="totalPrice > 0">总价：￥{{totalPrice}}元</text>
			</view>
			<view class="bottom-box-btn" @click="goOrder">
				确认订单
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				orgId: '',
				orgName: '',
				date: [],
				curDay: '',
				cate: [],
				curCate: 0,
				curCateText: '',
				curType: 0,
				types: [],
				goods: [],
				cart: 0,
				totalPrice: 0
			}
		},
		onLoad() {
			var orgId = this.getUrlCode('orgId');
			console.log('sssss1',orgId);
			if(orgId){
				uni.setStorageSync(app.globalData.storagePre+'orgId',orgId);
				app.globalData.userinfo.orgId = orgId;
			}else{
				orgId = uni.getStorageSync(app.globalData.storagePre+'orgId');
				if(orgId){
					app.globalData.userinfo.orgId = orgId;
				}else{
					uni.showToast({
						title: '参数错误',
						icon: 'none',
						duration: 2000
					})
				}
			}
			
			console.log('sssss',orgId);
			
			app.checkLogin();
			
			this.orgId = uni.getStorageSync(app.globalData.storagePre+'orgId');
			this.orgName = uni.getStorageSync(app.globalData.storagePre+'orgName');
		
		},
		onShow() {
			this.cart = 0;
			this.totalPrice = 0;
			
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'shop'){
					that.orgId = res.data.data.orgId;
					that.orgName = res.data.data.name;
					uni.setStorageSync(app.globalData.storagePre+'orgId',res.data.data.orgId);
					uni.setStorageSync(app.globalData.storagePre+'orgName',res.data.data.name);
					that.getDate();
				} else if (apiname == 'date') {
					that.date = res.data.data;
					that.curDay = that.date[0].date;
					that.getType();
				} else if (apiname == 'types') {
					that.types = res.data.data;
					that.curType = that.types[0].id;
					that.getCate();
				} else if (apiname == 'cate') {
					that.cate = res.data.data;
					this.cart = 0;
					this.totalPrice = 0;
					if(that.cate.length > 0){
						that.cate.forEach((item) => {
							const info = item;
							info.goods.forEach((item2) => {
								const info2 = item2;
								info2.nums = 0;
								info2.imageLoad = true;
							})
						})
						that.curCate = that.cate[0].id;
						that.curCateText = that.cate[0].name;
						that.goods = that.cate[0].goods;
					}
				}else if(apiname == 'orgInfo'){
				
					that.orgId = res.data.data.orgId;
					that.orgName = res.data.data.name;
					uni.setStorageSync(app.globalData.storagePre+'orgName',res.data.name);					
					that.getDate();
				}
			}
			this.getLocation();
		},
		methods: {
			getUrlCode (name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
			goUser(){
				uni.navigateTo({
				    url: '/pages/user/index'
				});
			},
			goOrder(){
				const selectGoods = [];
				this.cate.forEach((item) => {
					item.goods.forEach((item2) => {
						if(item2.nums > 0){
							selectGoods.push(item2);
						}
					})
				});
				try {
					const data = {
						goods: selectGoods,
						type: this.curType,
						day: this.curDay
					}
					if(data.goods.length == 0 || !data.type || !data.day){
						uni.showToast({
							title: '未选择商品',
							icon: 'none',
							duration: 2000
						});
						return;
					}
			
				    uni.setStorageSync(app.globalData.storagePre+'orderData',JSON.stringify(data));
				    uni.navigateTo({
				        url: '/pages/index/order'
				    });
				} catch (e) {
				    uni.showToast({
				    	title: '操作失败，请重试',
				    	icon: 'none',
				    	duration: 2000
				    })
				}
			},
			getLocation(){
			
				app.ajax({
					url: app.globalData.serverUrl + 'org/info',
					type: 'POST',
					apiname: 'orgInfo',
					
				});
				// 	this.orgName = "定位中...";
				// 	// let lat = 34.747486;
				// 	// let lng = 113.666841;
				
				// 	let that = this;
					
				// 	if (this.$wechat && this.$wechat.isWechat()) {//获取定位经纬度
				// 		 this.$wechat.location(function (res) {
				// 			console.log(res)
				// 			let lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
				// 			let lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。
							
				// 			that.getShop(lat,lng);
							
					
				// 			//根据经纬度，解析区域，提示用户输入
				// 		 });
				// 	}
				
				// that.getShop(lat,lng);
			},
			getOrg(){
				app.ajax({
					url: app.globalData.serverUrl + 'org/info',
					type: 'POST',
					apiname: 'orgInfo',
					
				});
			},
			// getShop(lat,lng){
			// 	app.ajax({
			// 		url: app.globalData.serverUrl + 'org/info',
			// 		type: 'POST',
			// 		apiname: 'shop',
			// 		data: {
			// 			lat: lat,
			// 			lng: lng
			// 		}
			// 	});
			// },
			getDate(){
				app.ajax({
					url: app.globalData.serverUrl + 'shopDay/date',
					type: 'POST',
					apiname: 'date'
				});
			},
			getType(){
				app.ajax({
					url: app.globalData.serverUrl + 'shopDay/types',
					type: 'POST',
					apiname: 'types',
					data: {
						day: this.curDay
					}
				});
			},
			getCate(){
				app.ajax({
					url: app.globalData.serverUrl + 'shopDay/cate',
					type: 'POST',
					apiname: 'cate',
					data: {
						type: this.curType
					}
				});
			},
			// getGoods(){
			// 	app.ajax({
			// 		url: app.globalData.serverUrl + 'server/shopDay/goods',
			// 		type: 'POST',
			// 		apiname: 'goods',
			// 		data: {
			// 			type: this.curType,
			// 			cate_id: this.curCate
			// 		}
			// 	});
			// },
			selectDate(item){
				this.curDay = item.date;
				this.goods = [];
				this.cate = [];
				this.formatGoods();
				this.getType();
			},
			selectType(item){
				this.curType = item.id;
				this.goods = [];
				this.cate = [];
				this.formatGoods();
				this.getCate();
			},
			selectCate(item){
				this.curCate = item.id;
				this.curCateText = item.name;
				this.goods = item.goods;
				this.formatGoods();
				// this.getGoods();
			},
			plusGoods(obj){
				this.goods.forEach((item) => {
					const info = item;
					if(info.id == obj.id){
						if(info.nums < 200){
							info.nums++;
						}
					}
				})
				this.formatGoods();
			},
			minuGoods(obj){
				this.goods.forEach((item) => {
					const info = item;
					if(info.id == obj.id){
						if(info.nums > 0){
							info.nums--;
						}
					}
				})
				this.formatGoods();
			},
			onErrorImg(item){
				this.$set(item, 'imageLoad', false);
				this.$forceUpdate();
			},
			onSuccessImg(item){
				this.$set(item, 'imageLoad', true);
				this.$forceUpdate();
			},
			formatGoods(){
				this.cart = 0;
				this.totalPrice = 0;
				
				this.cate.forEach((item) => {
					const info = item;
					if(item.id == this.curCate){
						info.goods = this.goods;
					}
				});
				
				this.cate.forEach((item) => {
					const info = item;
					info.goods.forEach((item2) => {
						this.cart += item2.nums;
						this.totalPrice += item2.nums*parseFloat(item2.price);
					});
				});
				
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.nav-header {
		background-color: $theme-color;
		height: 44px;
		line-height: 44px;
		width: 100%;
		overflow: hidden;
		color: #FFFFFF;
	}
	.nav-header-left{
		display: inline-block;
		width: 500rpx;
		height: 100%;
		float: left;
		padding-left: 20rpx;
	}
	.nav-header-left-icons1{
		width: 38rpx;
		height: 38rpx;
		vertical-align: middle;
	}
	.nav-header-left-text{
		vertical-align: middle;
		font-size: 34rpx;
		padding: 0 15rpx;
		max-width: 450rpx;
	}
	.nav-header-left-icons2{
		width: 24rpx;
		height: 14rpx;
		vertical-align: middle;
	}
	.nav-header-right{
		display: inline-block;
		width: 150rpx;
		height: 100%;
		float: right;
		text-align: right;
		padding-right: 20rpx;
	}
	.nav-header-right image{
		width: 38rpx;
		height: 38rpx;
		vertical-align: middle;
	}
	
	.calendar-box{
		text-align: center;
		overflow: hidden;
		font-size: 32rpx;
		background-color: #F5FBFF;
	}
	.calendar-box-list{
		width: 107rpx;
		height: 114rpx;
		float: left;
		padding-top: 6rpx;
	}
	.calendar-box-list .calendar-box-list-l1{
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
	}
	.calendar-box-list .calendar-box-list-l2{
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50%;
	}
	.calendar-box-list.cur .calendar-box-list-l1{
		color: $theme-color;
	}
	.calendar-box-list.cur .calendar-box-list-l2{
		color: #FFFFFF;
		background-color: $theme-color;
		border-radius: 50%;
	}
	
	.subnav-box{
		color: #333333;
		font-size: 32rpx;
		text-align: center;
		font-weight: 400;
		overflow: hidden;
		background-color: #FFFFFF;
		// border-bottom: 1rpx solid #F3F3F3;
	}
	.subnav-box .subnav-box-list{
		display: inline-block;
		width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		float: left;
		position: relative;
	}
	.subnav-box .subnav-box-list.cur{
		font-weight: bold;
	}
	.subnav-box .cur::after{
		content: '';
		position: absolute;
		z-index: 10;
		width: 30rpx;
		height: 4rpx;
		bottom: 0;
		left: 50%;
		margin-left: -15rpx;
		background-color: $theme-color;
	}
	
	.bottom-box{
		width: 100%;
		height: 100rpx;
		line-height:100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #DDDDDD;
		overflow: hidden;
		z-index: 100;
	}
	.bottom-box .bottom-box-btn{
		display: inline-block;
		width: 196rpx;
		height: 100%;
		background-color: $theme-color;
		font-size: 38rpx;
		color: #FFFFFF;
		float: right;
		text-align: center;
	}
	.bottom-box .bottom-box-icon{
		display: inline-block;
		width: 140rpx;
		height: 100%;
		position: relative;
		text-align: center;
		float: left;
	}
	.bottom-box .bottom-box-icon image{
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		vertical-align: middle;
	}
	.bottom-box .bottom-box-icon .bottom-box-count{
		min-width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		background-color: #FF541F;
		color: #FFFFFF;
		border-radius: 17rpx;
		position: absolute;
		z-index: 10;
		right: 10rpx;
		top: 10rpx;
		font-size: 24rpx;
		padding: 0 5rpx;
	}
	.bottom-box .bottom-box-text{
		width: 410rpx;
		height: 100%;
		color: #949494;
		font-size: 34rpx;
		font-weight: 400;
		float: left;
	}
	
	.main{
		position: fixed;
		top: 290rpx;
		left: 0;
		right: 0;
		bottom: 100rpx;
		z-index: 10;
		background-color: #FFFFFF;
	}
	.main .main-cate{
		width: 180rpx;
		height: 100%;
		background-color: #F3F3F3;
		float: left;
		text-align: center;
		color: #333333;
		font-size: 30rpx;
		overflow: auto;
	}
	.main .main-cate .main-cate-list{
		height: 90rpx;
		line-height: 90rpx;
	}
	.main .main-cate .main-cate-list.cur{
		background-color: #FFFFFF;
	}
	
	.main .main-goods{
		width: 530rpx;
		height: 100%;
		background-color: #FFFFFF;
		float: right;
		// padding-right: 20rpx;
		overflow: auto;
		// padding-top: 10rpx;
		// padding-bottom: 30rpx;
		padding: 20rpx;
	}
	.main-goods-cate{
		font-size: 30rpx;
		line-height: 40rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.main-goods-list{
		width: 530rpx;
		height: 150rpx;
		margin: 20rpx 0;
	}
	.main-goods-list .main-goods-img{
		width: 150rpx;
		height: 150rpx;
		float: left;
	}
	.main-goods-list .main-goods-img image{
		width: 100%;
		height: 100%;
	}
	
	.main-goods-box{
		width: 360rpx;
		height: 100%;
		float: right;
	}
	.main-goods-title{
		display: block;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #333333;
	}
	.main-goods-desc{
		line-height: 30rpx;
		height: 60rpx;
		font-size: 24rpx;
		color: #333333;
	}
	
	.main-goods-nums{
		height: 40rpx;
		line-height: 40rpx;
		text-align: right;
	}
	.main-goods-price{
		width: 100rpx;
		display: inline-block;
		float: left;
		font-size: 28rpx;
		color: #FF541F;
		text-align: left;
		padding: 0 !important;
	}
	.main-goods-nums image{
		width: 44rpx;
		height: 44rpx;
		vertical-align: middle;
	}
	.main-goods-nums text{
		padding: 0 20rpx;
		vertical-align: middle;
	}
	
</style>