wardrobe/pages/yifu/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="衣物信息" :shadow="0" :showback="true"></tm-menubars>
		<view class="C1b1b1b">
			<view style="width: 90%;margin:0 auto;">
				<tm-tabs align="left" class="qiehuan1" v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
			</view>
			<image v-if="activeIndex==0" class="touxiang" src="/static/img/63.png" mode="widthFix"></image>
		</view>
		<div class="zhuti" style="padding-bottom:60px !important;" v-if="activeIndex==0">
			<view class="text-align-center text-size-lg">新款冬季羽绒服</view>
			<view class="text-align-center text-size-s mt-10 text-gray">蓬松、轻盈、温暖</view>
			<tm-sheet class="kuang" style="padding-bottom: 30px !important;">
				<view style="width: 98%;margin:0 auto;margin-top:20px !important;position: relative;">
					<view class="text-white text-align-center pt-20">衣物参数</view>
					<view class="fr mr-20 xiugai" @click="xiugaiFun()">
						<image src="/static/img/64.png" mode="widthFix"></image>
						<text>修改</text>
					</view>
					<view class="you black mt-30">
						<tm-input :disabled="xianshi" title="衣长" v-model="reqData.username" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="上市年份" v-model="reqData.height" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="颜色" v-model="reqData.weight" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="尺码" v-model="reqData.username" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="品牌" v-model="reqData.height" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="主材含量" v-model="reqData.weight" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="适用对象" v-model="reqData.weight" align="right"></tm-input>
					</view>
				</view>
			</tm-sheet>
			<tm-sheet class="kuang">
				<view style="width: 98%;margin:0 auto;margin-top:20px !important;">
					<view class="text-white text-align-center pt-20">类似衣物</view>
					<view class="yiguicla black pa-6 ma-4 fl mb-20" 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;"></view>
				</view>
			</tm-sheet>
			<!-- <tm-sheet class="kuang">
				<view style="width: 98%;margin:0 auto;margin-top:20px !important;">
					<view class="text-white text-align-center pt-20">品牌信息</view>
					<tm-listitem
						class="pb-20"
						:left-icon-size="100"
						value="100件商品"
						title="巴黎世家"
						label="只此一瞬,狂爱一生"
						left-icon="../../static/img/65.png"
						show-left-icon
					></tm-listitem>
				</view>
			</tm-sheet> -->
			<tm-button :round="24" class="sao mb-40" block @click="show_1=true">出库</tm-button>
		</div>
		
		<div class="zhuti" v-if="activeIndex==1">
			<tm-sheet class="kuang" style="padding-bottom: 10px !important;">
				<view style="width: 94%;margin:0 auto;">
					<image class="chuanda" src="/static/img/108.png" mode="widthFix"></image>
					<view class="text-align-center mt-20 text-white">丝缎质感纹理风衣</view>
					<view class="text-align-center mt-10 text-size-s">丝滑如肌肤</view>
				</view>
			</tm-sheet>
		</div>
		<view class="goumai shangpin" v-if="activeIndex==1">
			<view class="pt-20"><text class="ml-20">衣物名</text><text class="fr mr-20 text-gray text-size-s">丝缎质感纹理风衣</text></view>
			<view class="pa-20"><tm-cartCellListFood  v-on:jiaruFun="jiarufuFun" v-for="item in test1" :typeclick="typeclick1" :mdata="item" :cart-num.sync="item.buy"></tm-cartCellListFood></view>
		</view>
		<tm-sheet :shadow="24" class="jiaoxi xiao" v-if="activeIndex==1">
			<tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list5" range-key="title"></tm-tabs>
		</tm-sheet>
		<!-- 单品 -->
		<view class="zhuti shangpin" v-if="activeIndex==1">
			<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 class="anniu" v-if="activeIndex==1">
			<tm-button :round="24" theme="gray" size="n">预约明日</tm-button>
			<tm-button :round="24" class="fr" theme="primary" size="n">全部取出</tm-button>
		</view>
		
		<tm-poup v-model="show_1" :position="pos" class="tcc">
			<view style="position: relative !important;">
				<view style="height: 10px;"></view>
				<tm-swiper :current="1" :indicator-dots="false" :round="6" :ani3d="190"  :autoplay="false" :list="list1"></tm-swiper>
				<view class="text-white text-align-center mt-15">丝缎质感纹理风衣</view>
				<view class="text-white text-align-center mt-10 text-size-s">黑色 - 6518/320</view>
				<image class="guayi" src="/static/img/102.png" mode="widthFix"></image>
				<view class="text-white text-align-center mt-15">衣物位于 挂衣区 5号衣柜</view>
				<view class="text-white text-align-center mt-15">
					<image class="aniOn deng" src="/static/img/101.png" mode="widthFix"></image>
					<text style="vertical-align: middle;">指示灯已亮，请取出衣柜</text>
				</view>
				<view class="anniu">
					<tm-button @click="quxiao()" theme="gray" size="n">取消</tm-button>
					<tm-button @click="chuFun()" class="fr" theme="primary" size="n">确认</tm-button>
				</view>
			</view>
		</tm-poup>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			show_1:false,
			pos:'center',
			xianshi:true,
			list1:[		
				'../../static/img/100.png',
				'../../static/img/100.png',
				'../../static/img/100.png',
			],
			list:[ '商品介绍','搭配方案'],
			activeIndex:0,
			reqData:{
				username:'1',
				height:'1',
				weight:'1',
			},
			quanbuList:[{
				src:'/static/img/45.png',
				text:'NEO CITY 涂鸦',
				type:'手提包'
			},{
				src:'/static/img/46.png',
				text:'满印迷你标识',
				type:'围巾'
			},{
				src:'/static/img/47.png',
				text:'大号版型夹克',
				type:'新品'
			}],
			test1: [{
				img: '../../static/img/83.png',
				title: '丝缎质感纹理风衣',
				label: '黑色 - 6518/320',
				id: 3,
				buy: 0,
				itemId: 0
			}],
			typeclick1:3,//1加入购物车，2购物车，3前往购买，4,5
			typeclick:5,//1加入购物车，2购物车，3前往购买，4,5
			list5:[ '搭配内的购物清单'],
			test: [{
				img: '../../static/img/83.png',
				title: '丝缎质感纹理风衣',
				label: '黑色 - 6518/320',
				price: '1299',
				id: 3,
				buy: 0,
				itemId: 0
			},{
				img: '../../static/img/84.png',
				title: '产品3（任选）',
				label: '这个产品是只有几个融会',
				price: 36.2,
				id: 3,
				buy: 0,
				itemId: 0
			},{
				img: '../../static/img/83.png',
				title: '产品3（任选）',
				label: '这个产品是只有几个融会',
				price: 36.2,
				id: 3,
				buy: 0,
				itemId: 0
			}],
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		xiugaiFun(){
			this.xianshi=false;
		},
		quxiao(){
			this.show_1=false;
		},
		chuFun(){
			uni.navigateTo({
				url: "/pages/index/index?index=1",
			})
		}
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .zhuti{padding: 10px 10px;}
	/deep/ .kuang{margin:0 !important;padding: 0px !important;}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	.touxiang{width: 100%;display: block;margin-top: 10px;}
	.xiugai image{width: 18px;vertical-align: middle;margin-right:5px;}
	.xiugai text{vertical-align: middle;}
	.xiugai{position: absolute;right:5px;top:10px;}
	.you{border-radius: 10px;padding:10px;width: 88%;margin:0 auto;margin-top:20px;}
	/deep/ .you .grey-darken-5{
		background-color: #0d0d0d!important;
		padding: 0px !important;
	}
	/deep/ .you .text-red{color: white;}
	/deep/ .tan .active{background-color: #AAAAAA !important;}
	/deep/ .tan .tm-poups .grey-darken-5{background-color: gray !important;}
	/deep/ .tan uni-input{text-align: right;}
	/deep/ .you .border-grey-darken-4-b-1 {
	    border-bottom: solid 1px #313131 !important;
	}
	.yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
	.yiguicla{width: 30%;border-radius: 10px;}
	.sao{width: 88%;margin:0 auto;margin-top:40px;}
	/deep/ .mx-32{margin:0px !important;margin-top:15px !important;}
	/deep/ .tcc .tm-poup-wk{width: 90% !important;position:relative;height: 580px !important;}
	/deep/ .tcc .uni-swiper-slides{width: 100%;}
	/deep/ .tcc uni-swiper{width: 100% !important;}
	/deep/ .uni-swiper-slides{width: 160px !important;}
	/deep/ .tcc uni-image{width: 160px !important;}
	.tcc .guayi{width: 90% !important;display: block;margin:0 auto;margin-top:15px !important;}
	.tcc .deng{width:25px !important;height:25px !important;vertical-align: middle;margin-right:8px;}
	.aniOn{
		animation:doudong 0.5s linear infinite;
		background:linear-gradient();
		background: -webkit-linear-gradient();
	}
	@keyframes doudong {
		0%{
			transform: rotate(-2deg) translateX(2rpx) translateY(2rpx);
		}
		25%{
			transform: rotate(0deg) translateX(-2rpx) translateY(-2rpx);
		}
		50%{
			transform: rotate(0deg) translateX(0rpx) translateY(-2rpx);
		}
		75%{
			transform: rotate(0deg) translateX(0rpx) translateY(2rpx);
		}
		100%{
			transform: rotate(-2deg) translateX(2rpx) translateY(2rpx);
		}
	}
	.anniu{width: 80%;margin: 0 auto;margin-top: 20px;}
	/deep/ .anniu .gray.bk{color: white !important;}
	.biaoti view{width:5px;height:19px;background: #0178FD;float: left;border-radius: 10px;}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	/deep/ .jiaoxi{margin:0 !important;padding: 8px !important;}
	/deep/ .shangpin .white.bk{background-color:#1b1b1b!important;}
	/deep/ .shangpin .tm-cartCellListFood{padding: 0px 0px 5px 0px !important;
	margin-top: 5px !important;border-bottom: 1px solid #1B1B1B;}
	/deep/ .shangpin .border-t-1.bk{border-top:1px solid #1b1b1b!important;}
	/deep/ .shangpin .round-3{width:120px !important;height:110px !important;}
	/deep/ .shangpin .tm-cartCellListFood-img{width:120px !important;height:110px !important;}
	/deep/ .shangpin .title{color: white !important;}
	/deep/ .shangpin .text-red{color: white !important;}
	.sao{width: 88%;display: block;margin: 0 auto;padding-bottom: 60px;margin-top: 20px;}
	.goumai{background: #1B1B1B;margin-bottom: 10px;}
	.anniu{width: 70%;margin: 0 auto;margin-top: 20px;padding-bottom: 30px;}
</style>