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="xiangqing">
						<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-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 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 {
			current:1,
			activeIndex:0,
			soso:'',
			addr:['江西省','南昌市','西湖区'],
			value:'',
			list:[],
			list1:[],
			list2:[ '热门','折扣'],
			list3:[],
			list4:[],
			list5:[ '推荐单品'],
			test: [],
			typeclick:1,//1加入购物车，2购物车
			gouwuche:[],
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.getGwc()
	},
	created() {
		this.sys = uni.getSystemInfoSync();
		this.getSort()
		this.getBanner()
		this.changeTab(1);
		this.getHot();
		this.getRecommend()
		this.getGwc()
		this.getCity()
	},
	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) {
					res.data.data.forEach(item => {
						that.list4.push({
							icon: item.image,
							text:item.goods_name,
							// jie:item.sale_price
						})
					})
				} else {
					that.$refs.toast.show({
						model: 'error',
						label: res.data.msg
					})
				}
			})
		},
		getRecommend(){
			let that = this;
			myRequest({
				url: "/api/ShopGoods/recommend",
				method: 'get',
			}).then(res => {
				if (res.data.code == 200) {
					res.data.data.forEach(item => {
						that.test.push({
							img: item.image,
							title:item.goods_name,
							price:item.sale_price,
							itemId:item.id
						})
					})
				} else {
					that.$refs.toast.show({
						model: 'error',
						label: res.data.msg
					})
				}
			})
		},
		tiaozhuan(){
			uni.navigateTo({
				url: "/pages/gengduo/index",
			})
		},
		xiangqing(e){
			uni.navigateTo({
				url: "/pages/shopdetail/index",
			})
		},
		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.itemId,
						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>