wardrobe/pages/index/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">
			<tm-search v-model="soso" color="white" confirm-text="" @click="sosoFun">
				<!-- <template #right>
					<view class="xiangji">
						<image src="/static/img/xiangji.png" mode="widthFix"></image>
					</view>
				</template> -->
			</tm-search>
			<view class="dingwei">
				<tm-quickCity color="blue" v-model="offshow"  :defaultValue.sync="defaultValue" @change="qiehuandizhi">
					<image style="vertical-align: middle;" src="/static/img/dingwei.png" mode="widthFix"></image>
					<text style="vertical-align: middle;" class="text-size-g">{{chengshi}}</text>
				</tm-quickCity>

			</view>
		</view>
		<view class="zhuti mt-50">
			<tm-grid :grid="5" :list="list3" :icon-size="140" font-color="white"></tm-grid>
			<!-- 今日穿搭 -->
			<tm-sheet class="lunbo bushan1">
				<view class="py-10 text-size-g dianz">
					<image src="/static/img/6.png" mode="widthFix"></image>
					<text class="text-white">今日穿搭推荐</text>
				</view>
				<view class="pb-20 text-size-g">
					<view class="text-white" style="display: flex;justify-content: space-between;">
						<view v-if="list.length !=0"
							style="display: flex;align-items: center; justify-content: center;width: 46%;font-size: 16px;font-weight: bold;">
							{{list[current].name}}
						</view>
						<view class="qiehuan" v-if="list.length !=0">
							<tm-translate class="fl a_1" :auto="true" ref="a_1" :duration="80" animation-name="zoomIn">
								<image v-if="current==0" class="anniu mr-10" src="/static/img/14.png" mode="widthFix">
								</image>
								<image v-if="current!=0" @click="xia()" class="anniu mr-10" src="/static/img/12.png"
									mode="widthFix"></image>
							</tm-translate>
							<tm-swiper @click="tiaoclick" @change="jinriFun" class="tu fl" :previmage="false"
								:noSwiping="true" :height="220" :width="250" :current="current" :margin="8"
								:autoplay="false" :list="list"></tm-swiper>
							<tm-translate class="fl a_1" :auto="true" ref="a_5" :duration="80" animation-name="zoomIn">
								<image v-if="current<(list.length-1)" @click="shang()" class="anniu fl ml-10"
									src="/static/img/13.png" mode="widthFix"></image>
								<image v-if="current>(list.length-2)" class="anniu fl ml-10" src="/static/img/11.png"
									mode="widthFix"></image>
							</tm-translate>
						</view>
					</view>
					<tm-empty v-if="list.length ==0" label="暂无推荐" color="white" icon="icon-paperplane-fill"></tm-empty>
				</view>
			</tm-sheet>
			<!-- 明日计划 -->
			<tm-sheet class="lunbo1 bushan2">
				<view class="py-10 text-size-g dianz mingri">
					<image src="/static/img/17.png" mode="widthFix"></image>
					<text class="text-white">明日计划</text>
				</view>
				<view class="mt-20 text-size-g jihua">
					<tm-translate class="a_1" ref="a_6" :auto="true" :duration="80" animation-name="zoomIn">
						<image @click="jihuashang()" class="anniu mr-10" src="/static/img/18.png" mode="widthFix">
						</image>
					</tm-translate>
					<view class="bbb">
						<tm-swiper @click="tiao" class="aaa" :previmage="false" :noSwiping="true" :current="current1"
							:autoplay="false" :list="list1"></tm-swiper>
					</view>
					<tm-translate class="a_1" ref="a_4" :auto="true" :duration="80" animation-name="zoomIn"
						style="right: 0px;">
						<image @click="jihuaxia()" class="anniu mr-10" src="/static/img/19.png" mode="widthFix"></image>
					</tm-translate>
					<view style="clear: both;"></view>
				</view>
			</tm-sheet>
			<!-- 热门穿搭 -->
			<tm-sheet class="lunbo1" style="margin-bottom: 70px !important;">
				<view class="py-10 text-size-g dianz mingri">
					<image src="/static/img/24.png" mode="widthFix"></image>
					<text class="text-white">热门穿搭</text>
				</view>
				<view class="text-size-g jihua remen">
					<view style="width: 48%;" class="fl">
						<view @click="tiaodapei(item.id)" v-for="(item,index) in listdata" v-if="index%2==0"
							class="round-3 shadow-2 overflow pa-10 mt-20"
							:class="[$tm.vx.state().tmVuetify.black ? 'black' : 'white']">
							<image class="logo" :src="item.image" mode="widthFix"></image>
							<view class="pa-10 text-size-s">
								<view class="text-overflow-2">
									<text>{{item.text}}</text>
								</view>
								<view class="mt-2 flex-between flex-center">
									<view>
										<!-- <tm-translate ref="a_2" :duration="80"  animation-name="fadeIn"> -->
										<!-- <image class="remenzan" :src="dianzan1?'/static/img/29.png':'/static/img/9.png'" mode="widthFix"></image> -->
										<!-- </tm-translate> -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="width: 46%;" class="fr">
						<view style="width: 100%;" class="fr round-3 shadow-2 overflow pa-10 mt-20"
							:class="[$tm.vx.state().tmVuetify.black ? 'black' : 'white']">
							<view class="py-10 text-size-m dianz mingri">
								<text style="vertical-align: middle;" class="text-white">销量飙升榜</text>
								<image style="width: 25px;margin-left: 8px;" src="/static/img/36.png" mode="widthFix">
								</image>
							</view>
							<view class="py-10 text-size-s dianz mingri">
								<text class="text-white">亿万新品趋势洞察</text>
							</view>
							<view class="mt-10" v-for="item in shopGoodsList" @click="xiangqing()">
								<image class="chuandaimg fl" :src="item.image" mode="widthFix"></image>
								<view class="chuandazi fr">
									<view class="text-size-m text-weight-b text-overflow-2">{{item.goods_name}}</view>
									<view class="tm-cartCellListFood-label text-size-s text-grey py-8">{{item.goods_details}}
									</view>
									<image class="gengduo fr" src="/static/img/40.png" mode="widthFix"></image>
								</view>
								<view style="clear: both;"></view>
							</view>
						</view>
						<view style="clear: both;"></view>
						<view @click="tiaodapei(item.id)" v-for="(item,index) in listdata" v-if="index%2==1"
							class="round-3 shadow-2 overflow pa-10 mt-20"
							:class="[$tm.vx.state().tmVuetify.black ? 'black' : 'white']">
							<image class="logo" :src="item.image" mode="widthFix"></image>
							<view class="pa-10 text-size-s">
								<view class="text-overflow-2">
									<text>{{item.text}}</text>
								</view>
								<view class="mt-24 flex-between flex-center">
								</view>
							</view>
						</view>
					</view>
					<view style="clear: both;"></view>
					<view v-if="total>listdata.length" style="clear: both;" class="more ma-40 pt-40" @click="gengmore()">
						<image src="/static/img/30.png" mode="widthFix"></image>
						<text class="text-size-s">下拉加载更多~</text>
					</view>
				</view>
			</tm-sheet>
		</view>
	</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 {
				offshow:false,
				chengshi:"南京",
				defaultValue: [],
				soso: '',
				aab: false,
				shoucangsrc: true,
				dianzan: true,
				dianzan1: true,
				list3: [],
				top: 60,
				sys: null,
				list2: [{
					img: '/static/img/39.png',
					title: '单品推荐',
					text: '3.9万人追捧'
				}, {
					img: '/static/img/37.png',
					title: '单品推荐',
					text: '3.9万人追捧'
				}, {
					img: '/static/img/38.png',
					title: '单品推荐',
					text: '3.9万人追捧'
				}],
				list: [],
				list1: [],
				current: 0,
				current1: 0,
				listdata: [],
				pagesize:10,
				page:1,
				total:0,
				shopGoodsList:[]
			};
		},
		onLoad() {
			// #ifdef MP
			this.top = uni.upx2px(150);
			// #endif
							

		},
		created() {
			var that = this;
			setTimeout(function() {
				if (uni.getStorageSync("token") == "") {
					uni.redirectTo({
						url: "/pages/login/index"
					})
				}
			}, 1000)
			this.sys = uni.getSystemInfoSync();
			this.getService();
			this.getremmend();
			this.getHot();
			this.getPlan();
			this.biaoshen();
			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;
								that.chengshi=city;
								console.log(province);
								console.log(city);
							},
							fail: function(res) {
								// uni.showToast({
								// 	title: '定位失败',
								// 	duration: 2000,
								// 	icon: "none"
								// })
							},
							complete: function(res) {
								console.log(res);
							}
						})
					}
				})
			},
			biaoshen(){
				let that = this;
				myRequest({
					url: "/api/ShopGoods/shopGoodsList",
					method: 'get',
					data: {}
				}).then(res => {
					if (res.data.code == 200) {
						that.shopGoodsList=res.data.data;
						// res.data.data.forEach(item => {
						// 	that.list3.push({
						// 		icon: item.img,
						// 		text: item.name,
						// 		sort: item.sort
						// 	})
						// })
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			qiehuandizhi(e){
				if(e[2]!=null){
					this.offshow=false;
					this.chengshi=e[1];
				}
			},
			xiangqing(){
				uni.navigateTo({
					url: "/pages/shopdetail/index",
				})
			},
			// 获取用户服务列表
			getService() {
				let that = this;
				myRequest({
					url: "/api/Service/serviceList",
					method: 'get',
					data: that.reqData
				}).then(res => {
					if (res.data.code == 200) {
						res.data.data.forEach(item => {
							that.list3.push({
								icon: item.img,
								text: item.name,
								sort: item.sort
							})
						})
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			// 获取穿搭推荐
			getremmend() {
				let that = this;
				myRequest({
					url: "/api/Collocation/recommendList",
					method: 'get',
					data: that.reqData
				}).then(res => {
					if (res.data.code == 200) {
						res.data.data.forEach(item => {
							that.list.push({
								src: item.image,
								name: item.title,
								id:item.id
							})
						})
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			// 获取明日计划
			getPlan() {
				let that = this;
				myRequest({
					url: "/api/Scene/sceneList",
					method: 'get',
					data: that.reqData
				}).then(res => {
					if (res.data.code == 200) {
						res.data.data.forEach(item => {
							that.list1.push({
								src: item.img,
								title: item.scene_name
							})
						})
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			// 获取热门穿搭
			getHot() {
				let that = this;
				myRequest({
					url: "/api/ShopCollocation/hotList",
					method: 'post',
					data: {page:that.page,pagesize:that.pagesize}
				}).then(res => {
					if (res.data.code == 200) {
						res.data.data.data.forEach(item => {
							that.listdata.push({
								image: item.image,
								text: item.title,
								id:item.id
							})
						})
						that.total=res.data.data.total;
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			tiaodapei(id) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/shouyedetail/index?id="+id,
				})
			},
			tiao() {
				uni.navigateTo({
					url: "/pages/bianji/index",
				})
			},
			tiaoclick(e) {
				uni.navigateTo({
					url: "/pages/zidingyikan/index?id="+e.data.id+"&type=1",
				})
			},
			jinriFun(e) {
				this.current = e;
			},
			sosoFun() {
				uni.navigateTo({
					url: "/pages/sousuo/index",
				})
			},
			gengmore() {
				this.page=this.page+1;
				this.getHot();
			},
			jihuashang() {
				if (this.current1 == 0) {
					return
				}
				this.$refs.a_6.play()
				this.current1 = this.current1 - 1;
			},
			jihuaxia() {
				if (this.current1 > (this.list1.length - 5)) {
					return
				}
				this.$refs.a_4.play()
				this.current1 = this.current1 + 1;
			},
			shouc() {
				this.shoucangsrc = !this.shoucangsrc;
				this.$refs.a_3.play()
			},
			zan() {
				this.dianzan = !this.dianzan;
				this.$refs.a_2.play()
			},
			shang() {
				this.$refs.a_5.play()
				this.current = this.current + 1;
			},
			xia() {
				this.$refs.a_1.play()
				this.current = this.current - 1;
			}
		},
	}
</script>

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

	/deep/ .aaa uni-image {
		width: 52px !important;
		height: 52px !important;
	}

	/deep/ .aaa uni-swiper-item {
		width: 55px !important;
		height: 80px !important;
		padding: 0 5px !important;
	}

	.xiangji image {
		width: 30px;
		height: 22px;
	}

	.suosou image {
		width: 40px;
	}

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

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

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

	.dingwei {
		width: 92%;
		margin: 0 auto;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.dingwei image {
		width: 25px;
		margin-right: 10px;
	}

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

	.zhuti {
		padding: 10px 10px;
	}

	/deep/ .lunbo {
		margin: 0 !important;
		padding: 8px !important;
		margin-top: 50px !important;
	}

	.dianz image {
		width: 35px;
		vertical-align: middle;
		margin-right: 10px;
	}

	/deep/ .text-size-s span,
	/deep/ .text-size-g {
		font-size: 15px;
	}

	.touxiang image {
		width: 40px;
		margin-right: 10px;
		vertical-align: middle;
	}

	.shoucang image {
		width: 45px;
	}

	.qiehuan {
		float: right;
	}

	.qiehuan .a_1 {
		margin-top: 25%;
	}

	.qiehuan .anniu {
		width: 20px;
		height: 20px !important;
	}

	.di {
		background: #0D0D0D;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 50px;
		border-radius: 30px;
	}

	.mingri image {
		width: 30px;
		margin-right: 12px;
	}

	.di image {
		width: 22px;
		margin: 0 !important;
		height: 20px !important;
	}

	.jihua image {
		width: 30px;
		height: 30px;
	}

	.jihua {
		position: relative;
	}

	.jihua .a_1 {
		position: absolute;
		top: 10%;
	}

	.bbb {
		width: 75% !important;
		margin: 0 auto !important;
	}

	/deep/ .bbb uni-swiper {
		width: 100% !important;
		height: 90px !important;
	}

	/deep/ .bbb .flex-start {
		background: rgba(0, 0, 0, 0) !important;
		padding: 0 !important;
		width: 100% !important;
		text-align: center;
		margin-top: 30px;
	}

	/deep/ .lunbo1 {
		margin: 0 !important;
		padding: 8px !important;
		margin-top: 20px !important;
	}

	.remenzan {
		width: 18px !important;
		margin-top: 10px;
	}

	.remen .logo {
		width: 100%;
	}

	.more {
		text-align: center;
	}

	.more image {
		margin-right: 10px;
		vertical-align: middle;
	}

	.chuandaimg {
		width: 50% !important;
	}

	.chuandazi {
		width: 48% !important;
	}

	/deep/ .lunbo1 .fulled {
		width: 100% !important;
	}

	/deep/ .gengduo {
		width: 30px !important;
		margin-top: 10px !important;
	}
	// 防止闪
	/deep/ .zhuti .tm-grid{min-height: 70px !important;}
	/deep/ .zhuti .bushan1{min-height: 160px !important;}
	/deep/ .zhuti .bushan2{min-height: 157px !important;}
	/deep/ .uni-tabbar{background-color: #1B1B1B !important;}
</style>