wardrobe/pages/shouye/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="">
				<!-- <template #right>
					<view class="xiangji">
						<image src="/static/img/xiangji.png" mode="widthFix"></image>
					</view>
				</template> -->
			</tm-search>
			<view class="dingwei">
				<image style="vertical-align: middle;" src="/static/img/dingwei.png" mode="widthFix"></image>
				<text style="vertical-align: middle;" class="text-size-g">北京Beijing</text>
			</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">
				<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="mt-20 text-size-g">
					<view class="text-white">
						西装夹克高级感穿搭 | 彰显
						<view class="qiehuan">
							<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 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>
					<view class="text-white">秋冬复古型男典范</view>
				</view>
				<view class="touxiang mt-30">
					<image src="/static/img/7.png" mode="widthFix"></image>
					<text class="text-white text-size-m">可樂crys</text>
				</view>
				<view class="shoucang mt-30">
					<view class="fl di mr-20" @click="shouc">
						<tm-translate ref="a_3" :auto="true" :duration="80"  animation-name="zoomIn">
							<image :src="shoucangsrc?'/static/img/15.png':'/static/img/8.png'" mode="widthFix" style="margin-right: 15px;"></image>
						</tm-translate>
					</view>
					<view class="fl di" @click="zan">
						<tm-translate ref="a_2" :auto="true" :duration="80"  animation-name="zoomIn">
							<image :src="dianzan?'/static/img/16.png':'/static/img/9.png'" mode="widthFix" style="margin-right: 15px;"></image>
						</tm-translate>
					</view>
					<view style="clear: both;"></view>
				</view>
			</tm-sheet>
			<!-- 明日计划 -->
			<tm-sheet class="lunbo1">
				<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 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 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-24 flex-between flex-center">
									<view class="touxiang mt-30">
										<image src="/static/img/7.png" mode="widthFix"></image>
										<text class="text-white text-size-m">可樂crys</text>
									</view>
									<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 list2">
								<image class="chuandaimg fl" :src="item.img" mode="widthFix"></image>
								<view class="chuandazi fr">
									<view class="text-size-m text-weight-b text-overflow-2">{{item.title}}</view>
									<view class="tm-cartCellListFood-label text-size-s text-grey py-8">{{item.text}}</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 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 class="touxiang mt-30">
										<image src="/static/img/7.png" mode="widthFix"></image>
										<text class="text-white text-size-m">可樂crys</text>
									</view>
									<view >
										<!-- <tm-translate ref="a_7" :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="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'
	export default {
		data() {
			return {
				soso:'',
				aab:false,
				shoucangsrc:true,
				dianzan:true,
				dianzan1:true,
				list3:[
					{icon:'/static/img/1.png',text:'预约家政'},
					{icon:'/static/img/2.png',text:'预约服务'},
					{icon:'/static/img/3.png',text:'自助录入'},
					{icon:'/static/img/4.png',text:'鞋服洗护'},
					{icon:'/static/img/5.png',text:'闲置交换'},
				],
				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:[
					'/static/img/10.png',
					'/static/img/10.png',
					'/static/img/10.png',
					'/static/img/10.png',
					'/static/img/10.png',
					'/static/img/10.png',
				],
				list1:[			
					{src:'/static/img/20.png',title:'开会'},
					{src:'/static/img/21.png',title:'聚餐'},
					{src:'/static/img/22.png',title:'运动'},
					{src:'/static/img/23.png',title:'娱乐'},
					{src:'/static/img/20.png',title:'开会'},
					{src:'/static/img/21.png',title:'聚餐'},
					{src:'/static/img/22.png',title:'运动'},
				],
				current:0,
				current1:0,
				listdata:[]
			};
		},
		onLoad() {
			// #ifdef MP
			this.top = uni.upx2px(150);
			// #endif
			
		},
		created() {
			var that=this;
			
			setTimeout(function(){
				console.log(1111)
				// if(uni.getStorageSync("token")==""){
				// 	uni.redirectTo({
				// 		url:"/pages/login/index"
				// 	})
				// }
				// that.$refs.a_2.play();
				// that.$refs.a_3.play();
				// that.$refs.a_1.play();
				// that.$refs.a_5.play();
			},1000)
			
			this.sys = uni.getSystemInfoSync();
			this.randouh()
			
		},
		methods: {
			gengmore(){
				
				this.randouh()
			},
			itemClick(e){
				console.log(e);
				uni.$tm.toast(e.dirIndex+':'+e.childrenIndex)
			},
			randouh(){
				let list2 = [],that=this;
				for(let i=0;i<8;i++){
					list2.push({
						image:'../../static/img/25.png',
						text:'西装穿搭 | 韩系又A又飒休闲西装 高级感'
					})
				}
				this.listdata=this.listdata.concat(list2)
				console.log(this.listdata)
			},
			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;}
</style>