wardrobe/pages/shop/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
		<view class="C1b1b1b pb-40">
			<view class="sousuo">
				<tm-pickersCity class="dingwei fl" btn-color="bg-gradient-blue-accent" @confirm="okCity"
					:default-value="addr">
					<view>
						<text class="text-size-n">{{addr[1]}}</text>
						<tm-icons :size="24" color="white" name="icon-angle-down"></tm-icons>
					</view>
				</tm-pickersCity>
				<tm-search v-model="soso" class="fr shuruk" color="white" confirm-text="" @click="sosoFun"></tm-search>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view class="lunbo">
			<tm-swiper :previmage="false" @change="lunboFun" :list="list" :height="400" :current="current"></tm-swiper>
			<tm-translate class="anniu1 fl" :auto="true" ref="a_1" :duration="80" animation-name="zoomIn">
				<image v-if="current!=0" @click="xia()" class="qiehuan" src="/static/img/68.png" mode="widthFix">
				</image>
			</tm-translate>
			<tm-translate class="anniu2 fr" :auto="true" ref="a_5" :duration="80" animation-name="zoomIn">
				<image v-if="current<(list.length-1)" @click="shang()" class="qiehuan" src="/static/img/67.png"
					mode="widthFix"></image>
			</tm-translate>
		</view>

		<view class="zhuti">
			<tm-sheet :shadow="24" class="jiaoxi">
				<tm-grid @change="zhonglei" class="mt-20 mb-20" :grid="5" :list="list3" :icon-size="120"
					font-color="white"></tm-grid>
			</tm-sheet>
			<!-- <tm-sheet :shadow="24" class="jiaoxi xiao">
				<view class="yifu1 fl">
					<image src="/static/img/78.png" mode="widthFix"></image>
				</view>
				<view class="yifu2 fr">
					<image class="yifu21" src="/static/img/77.png" mode="widthFix"></image>
					<view>
						<image style="width:50%;" src="/static/img/75.png" mode="widthFix"></image>
						<image style="width:50%;" class="yifu21" src="/static/img/76.png" mode="widthFix"></image>
					</view>
				</view>
				<view style="clear: both;"></view>
			</tm-sheet> -->
			<tm-sheet :shadow="24" class="jiaoxi xiao">
				<tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list2" range-key="title"
					@change="changeTab(activeIndex)"></tm-tabs>
			</tm-sheet>
			<tm-sheet :shadow="24" class="jiaoxi xiao" style="height:160px;">
				<tm-dragGrid :list="list1" :col="3" disabled="false" class="mt-40 mb-40 remen" :icon-size="160"
					v-if="list1.length!=0">
					<template v-slot:default="{item}">
						<view class="flex-center flex-col" @click="tiaozhuan()">
							<tm-icons :size="160" :name="item.icon" :color="item.color"></tm-icons>
							<text class="text-size-m text-white pt-10">{{item.text}}</text>
							<text class="text-size-m text-white pt-10">{{item.jie}}</text>
						</view>
					</template>
				</tm-dragGrid>
			</tm-sheet>
		</view>
		<view class="guanggao" @click="xiangqing">
			<image style="width:100%;" src="/static/img/82.png" mode="widthFix"></image>
			<view class="wenzi">
				<view class="mt-10">额外打九折</view>
				<view>高达75%的折扣！</view>
			</view>
		</view>
		<view style="height:160px;" class="mt-40 jiage pt-40">
			<tm-dragGrid :list="list4" :col="3" disabled="false" class="remen" :icon-size="160" v-if="list4.length!=0">
				<template v-slot:default="{item}">
					<view class="flex-center flex-col" @click.stop="goXiangQing(item)">
						<tm-icons :size="200" :name="item.icon" :color="item.color"></tm-icons>
						<text class="text-size-m text-white pt-10">{{item.text}}</text>
						<text class="text-size-m text-white pt-10">{{item.jie}}</text>
					</view>
				</template>
			</tm-dragGrid>
		</view>
		<tm-sheet :shadow="24" class="jiaoxi xiao">
			<tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list5" range-key="title"></tm-tabs>
		</tm-sheet>
		<!-- 单品 -->
		<view class="zhuti shangpin">
			<tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
				<tm-cartCellListFood v-on:jiaruFun="jiarufuFun" v-on:goXiangQing="goXiangQing(item)"
					v-for="item in test" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy">
				</tm-cartCellListFood>
			</tm-sheet>
		</view>
		<view v-if="gouwuche.length!=0" class="fudong" @click="qugowuche">
			<image src="../../static/img/87.png" mode="widthFix"></image>
			<view class="shuzigwc">{{gouwuche.length}}</view>
		</view>
		<view class="" v-if="isBottom" style="width: 100%;display: flex;justify-content: center;align-items: center;">
			没有更多了~
		</view>
		<view style="width:100%;height:60px;"></view>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>
<script>
	import {
		myRequest
	} from '@/api/request.js'
	import qqmapsdk from '../../js_sdk/qqmap-wx-jssdk.js'
	const QQMapWX = new qqmapsdk({
		key: 'KNABZ-OAVCJ-O5IFJ-KBNST-SVIIZ-2EB3G'
	});
	export default {
		data() {
			return {
				isBottom: false,
				current: 1,
				activeIndex: 0,
				soso: '',
				addr: ['江西省', '南昌市', '西湖区'],
				value: '',
				list: [],
				list1: [],
				list2: ['热门', '折扣'],
				list3: [],
				list4: [],
				list5: ['推荐单品'],
				test: [],
				typeclick: 1, //1加入购物车，2购物车
				gouwuche: [],
				page: 1,
				total: 0
			};
		},
		onLoad() {

		},
		onShow() {
			this.getGwc()
		},
		created() {
			this.sys = uni.getSystemInfoSync();
			this.getSort()
			this.getBanner()
			this.changeTab(1);
			this.getHot();
			this.getRecommend()
			this.getGwc()
			this.getCity()
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			getCity() {
				var that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log("获取经纬度成功");
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
					fail: () => {
						console.log("获取经纬度失败");
					},
					complete: () => {
						// 解析地址
						QQMapWX.reverseGeocoder({
							location: {
								latitude: this.latitude,
								longitude: this.longitude
							},
							success: function(res) {
								console.log("解析地址成功");
								console.log(res);
								// 省
								let province = res.result.ad_info.province;
								// 市
								let city = res.result.ad_info.city;
								//区
								let district = res.result.ad_info.district;
								that.addr = [province, city, district];
								console.log(province);
								console.log(city);
								console.log(district);
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: "none"
								})
								console.log(res);
							},
							complete: function(res) {
								console.log(res);
							}
						})
					}
				})
			},
			getGwc() {
				let that = this;
				myRequest({
					url: "/api/ShopCart/shopCartList",
					method: 'get',
					data: that.reqData
				}).then(res => {
					if (res.data.code == 200) {
						that.gouwuche = res.data.data;
					} else {
						that.gouwuche = []
					}
				})
			},
			getBanner() {
				let that = this;
				myRequest({
					url: "/api/Banner/bannerList",
					method: 'get',
					data: that.reqData
				}).then(res => {
					if (res.data.code == 200) {
						res.data.data.forEach(item => {
							that.list.push({
								src: item.image,
							})
						})
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			//获取分类
			getSort() {
				let that = this;
				myRequest({
					url: "/api/ShopGoods/getMallClassification",
					method: 'get',
					data: that.reqData
				}).then(res => {
					if (res.data.code == 200) {
						res.data.data.forEach(item => {
							that.list3.push({
								icon: item.image,
								text: item.category_name
							})
						})
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			// 热门、折扣
			changeTab(activeIndex) {
				let that = this;
				myRequest({
					url: "/api/ShopGoods/thenBuckle",
					method: 'post',
					data: {
						'type': that.activeIndex + 1
					}
				}).then(res => {
					if (res.data.code == 200) {
						that.list1 = [];
						res.data.data.forEach(item => {
							that.list1.push({
								icon: item.image,
								text: item.category_name
							})
						})
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			// 获取热门下商品
			getHot() {
				let that = this;
				myRequest({
					url: "/api/ShopGoods/popularGoods",
					method: 'get',
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data, '22');
						res.data.data.forEach(item => {
							that.list4.push({
								icon: item.image,
								text: item.goods_name,
								id: item.id,
								category_id: item.category_id,
								jie: item.sale_price,
								sale_num: item.sale_num,
								stock_num: item.stock_num
							})
						})
						that.list4 = that.list4.slice(0, 3);
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			// 获取推荐单品列表
			getRecommend() {
				// this.page = 1;
				let that = this;
				// that.test = [];
				myRequest({
					url: "/api/ShopGoods/recommend",
					method: 'get',
					data: {
						page: that.page
					}
				}).then(res => {
					console.log(res.data.data);
					if (res.data.code == 200) {
						res.data.data.list.forEach(item => {
							that.test.push({
								img: item.image,
								title: item.goods_name,
								price: item.sale_price,
								id: item.id,
								category_id: item.category_id,
								sale_num: item.sale_num,
								stock_num: item.stock_num,
								is_recommend: item.is_recommend,
							})
						})
						that.total = res.data.data.count;
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			// 加载更多
			loadMore() {
				if (this.test.length < this.total) {
					this.isBottom = false;
					this.page++;
					this.getRecommend()
				} else {
					this.isBottom = true;
				}
			},
			tiaozhuan() {
				uni.navigateTo({
					url: "/pages/gengduo/index",
				})
			},
			// 广告详情
			xiangqing() {
				// uni.navigateTo({
				// 	url: "/pages/shopdetail/index",
				// })
			},
			// 去商品详情页
			goXiangQing(data) {
				console.log(data);
				uni.navigateTo({
					url: "/pages/shopdetail/index?cartId=" + data.id + '&classId=' + data.category_id,
				})
			},
			lunboFun(e) {
				this.current = e;
			},
			okCity(e) {
				console.log(e);
				this.addr = e;
			},
			qugowuche() {
				uni.navigateTo({
					url: "/pages/gouwuche/index",
				})
			},
			sosoFun() {
				uni.navigateTo({
					url: "/pages/shopsoso/index",
				})
			},
			shang() {
				this.$refs.a_5.play()
				this.current = this.current + 1;
			},
			xia() {
				this.$refs.a_1.play()
				this.current = this.current - 1;
			},

			// 加入购物车
			jiarufuFun(data) {
				var that = this;
				console.log(data)
				if (data.type == 2) {
					myRequest({
						url: "/api/ShopCart/addShopCart",
						method: 'post',
						data: {
							goods_id: data.data.id,
							// goods_name: data.data.title,
							// goods_image: data.data.img,
							// goods_price: data.data.price,
							goods_num: 1
						}
					}).then(res => {
						if (res.data.code == 200) {
							that.$refs.toast.show({
								model: 'success',
								label: res.data.msg
							})
							that.getGwc()
						} else {
							that.$refs.toast.show({
								model: 'error',
								label: res.data.msg
							})
						}
					})
				}
				// else {
				// 	uni.navigateTo({
				// 		url: "/pages/shopdetail/index",
				// 	})
				// }
			},
			zhonglei(e) {
				uni.navigateTo({
					url: "/pages/gengduo/index",
				})
			}
		},
	}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body {
		background-color: #1b1b1b !important;
	}

	/deep/ .icon-search {
		font-size: 23px !important;
		color: #8E8E93 !important;
	}

	/deep/ .tm-search {
		width: 80%;
		background-color: #414141 !important;
		border-radius: 10px;
	}

	/deep/ .tm-search .grey-darken-5 {
		background-color: #414141 !important;
	}

	.dingwei {
		width: 21%;
		margin-top: 3%;
	}

	.shuruk {
		width: 77%;
	}

	.sousuo {
		width: 94%;
		margin: 0 auto;
	}

	.qiehuan {
		width: 40px;
		height: 40px;
	}

	.lunbo {
		position: relative;
	}

	.anniu1 {
		position: absolute;
		top: 0px;
		z-index: 9999;
		top: 43%;
		left: 0;
	}

	.anniu2 {
		position: absolute;
		top: 0px;
		z-index: 9999;
		top: 43%;
		right: 0;
	}

	/deep/ .jiaoxi {
		margin: 0 !important;
		padding: 8px !important;
	}

	/deep/ .tm-col {
		width: 20% !important;
	}

	.yifu1 {
		width: 40%;
	}

	.yifu2 {
		width: 58%;
	}

	.yifu1 image,
	.yifu21 {
		width: 100%;
	}

	.xiao {
		margin-top: 15px !important;
	}

	/deep/ .qiehuan1 .text-primary {
		color: white !important;
	}

	.guanggao {
		position: relative;
	}

	.wenzi {
		position: absolute;
		bottom: 1px;
		right: 0px;
		background: #000000;
		width: 140px;
		height: 55px;
		font-size: 14px;
		text-align: center;
	}

	/deep/ .jiage {
		background: #1b1b1b;
	}

	/deep/ .shangpin .white.bk {
		background-color: #1b1b1b !important;
	}

	/deep/ .shangpin .tm-cartCellListFood {
		padding: 0px 0px 15px 0px !important;
		margin-top: 5px !important;
		margin-bottom: 20px !important;
		border-bottom: 1px solid #303030;
	}

	/deep/ .shangpin .border-t-1.bk {
		border-top: 1px solid #1b1b1b !important;
	}

	/deep/ .shangpin .round-3 {
		width: 90px !important;
		height: 90px !important;
	}

	/deep/ .shangpin .tm-cartCellListFood-img {
		width: 90px !important;
		height: 90px !important;
	}

	.fudong {
		position: fixed;
		right: 30px;
		bottom: 80px;
		background: #0DABF2;
		width: 60px;
		height: 60px;
		border-radius: 30px;
		text-align: center;
	}

	.fudong image {
		width: 40px;
		margin-top: 6px;
	}

	.shuzigwc {
		color: white;
		font-weight: 700;
		position: absolute;
		right: 5px;
		background: red;
		padding: 2px;
		border-radius: 30px;
		top: 2px;
		width: 15px;
		height: 15px;
		font-size: 12px;
	}

	/deep/ .shangpin .title {
		color: white !important;
	}

	/deep/ .shangpin .text-red {
		color: white !important;
	}
</style>