wardrobe/pages/wardrobe/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 class="touxiang" style="vertical-align: middle;" src="/static/img/41.png" mode="widthFix"></image>
				<text style="vertical-align: middle;" class="text-size-m mr-20">“我”的衣橱</text>
				<image @click="qiehuanFun" style="vertical-align: middle;" src="/static/img/42.png" mode="widthFix"></image>
				<text @click="qiehuanFun" style="vertical-align: middle;" class="text-size-m">切换</text>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="zhuti">
			<div>
				<tm-sheet class="lunbo1 fl">
					<view class="flex-between flex-center">
						<view class="tuijian">
							<text class="text-white text-size-lg">校园穿搭</text>
						</view>
						<view >
							<text class="text-size-s C929297">详情</text>
						</view>
					</view>
					<view class="flex-between flex-center mt-20 pa-8" style="border-radius: 4px;" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
						<view class="tuijiantp">
							<image style="vertical-align: middle;" src="/static/img/43.png" mode="widthFix"></image>
						</view>
						<view class="tuijiantp">
							<image class="fr" style="vertical-align: middle;" src="/static/img/44.png" mode="widthFix"></image>
						</view>
					</view>
				</tm-sheet>
				<tm-sheet class="lunbo1 fr">
					<view class="flex-between flex-center">
						<view class="tuijian">
							<text class="text-white text-size-lg">日常出勤</text>
						</view>
						<view >
							<text class="text-size-s C929297">详情</text>
						</view>
					</view>
					<view class="flex-between flex-center mt-20 pa-8" style="border-radius: 4px;" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
						<view class="tuijiantp">
							<image style="vertical-align: middle;" src="/static/img/43.png" mode="widthFix"></image>
						</view>
						<view class="tuijiantp">
							<image class="fr" style="vertical-align: middle;" src="/static/img/44.png" mode="widthFix"></image>
						</view>
					</view>
				</tm-sheet>
				<view style="clear: both;"></view>
			</div>
			<!-- 衣橱 -->
			<tm-sheet class="yichu" style="margin-bottom: 70px !important;">
				<tm-tabs class="C1b1b1b qiehuan" color="white"  align="split"  v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
				<view class="yiguicla black pa-6 ma-4 fl" v-for="item in quanbuList" @click="yifu()">
					<image :src="item.src" mode="widthFix"></image>
					<view class="text-align-center text-size-m mt-8">{{item.text}}</view>
					<view class="text-align-center text-size-m mt-6 mb-6">{{item.type}}</view>
				</view>
				<view style="clear: both;" class="more ma-30 pt-40" @click="gengmore()">
					<image src="/static/img/30.png" mode="widthFix"></image>
					<text class="text-size-s">下拉加载更多~</text>
				</view>
			</tm-sheet>
		</view>
	</view>
</template>	
<script>
	
export default {
	data() {
		return {
			soso:'',
			activeIndex:0,
			list:[ '全部','上衣','裤子','鞋子','配饰'],
			quanbuList:[{
				src:'/static/img/45.png',
				text:'NEO CITY 涂鸦',
				type:'手提包'
			},{
				src:'/static/img/46.png',
				text:'满印迷你标识',
				type:'围巾'
			},{
				src:'/static/img/47.png',
				text:'大号版型夹克',
				type:'新品'
			},{
				src:'/static/img/45.png',
				text:'NEO CITY 涂鸦',
				type:'手提包'
			},{
				src:'/static/img/46.png',
				text:'满印迷你标识',
				type:'围巾'
			},{
				src:'/static/img/47.png',
				text:'大号版型夹克',
				type:'新品'
			}]
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		yifu(){
			uni.navigateTo({
				url: "/pages/yifu/index",
			})
		},
		qiehuanFun(){
			uni.navigateTo({
				url: "/pages/qiehuan/index",
			})
		},
		randouh(){
			let list2 = [],that=this;
			for(let i=0;i<6;i++){
				list2.push({
					src:'/static/img/47.png',
					text:'大号版型夹克',
					type:'新品'
				})
			}
			this.quanbuList=this.quanbuList.concat(list2)
			console.log(this.quanbuList)
		},
		gengmore(){
			this.randouh()
		},
		change(e){
			uni.$tm.toast(`你选中了${e}`);
		},
		changece(e){
			uni.$tm.toast(`您选中了:${e}`)
		},
		dapei(item){
			console.log(item)
		},
		xiangqing(item){
			console.log(item)
		},
		ruku(){
			uni.navigateTo({
				url: "/pages/putstorage/index",
			})
		}
	},
}
</script>

<style lang="scss">
	/deep/ uni-scroll-view{
		height: auto !important;
	}
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	.shangright{
		padding: 10px;
	}
	// 
	.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;	}
	.dingwei .touxiang{width: 50px;margin-right: 3px;	}
	/deep/ .lunbo1{margin:0 !important;padding: 4px !important;margin-top: 5px !important;width: 46.6% !important;}
	.tuijiantp{width: 100%;}
	.tuijiantp image{width: 97% !important;}
	.yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;}
	/deep/ .qiehuan .text-white{
		font-size: 14px;
		background: #303440;
		height: 28px;
		vertical-align: middle;
		line-height: 28px;
		border-radius: 20px;
		padding-left: 14px;
		padding-right: 14px;
		margin-top: 17%;
	}
	/deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
	.yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
	.yiguicla{width: 30%;border-radius: 10px;}
	.more{text-align: center;}
	.more image{margin-right: 10px;vertical-align: middle;width: 30px;}
</style>