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 @click="sosoFun" disabled="true" v-model="soso" color="white" confirm-text=""></tm-search>
			<view class="dingwei" v-if="itemuser!=0">
				<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">{{itemuser.username}}的衣橱</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>
				<tm-button class="fr mt-20" theme="primary" size="s" @click="luru">衣服录入</tm-button>
			</view>
			<view class="dingwei" v-if="itemuser==0">
				<text style="vertical-align: middle;" class="text-size-m mr-20">暂无家庭成员去添加</text>
				<image @click="chuangjian" style="vertical-align: middle;" src="/static/img/42.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="zhuti">
			<div>
				<tm-sheet class="lunbo1 fl" v-for="item in quanbuchang">
					<view class="flex-between flex-center">
						<view class="tuijian">
							<text class="text-white text-size-lg">{{item.title}}</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" v-for="item1 in item.info" @click="tiao(item1.id)">
							<image style="vertical-align: middle;" :src="item1.image" 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" @change="fenleichangeFun" color="white"  align="left"  v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
				<view class="pa-10 text-size-s">柜中{{have}}件 共{{total}}条</view>
				<view style="position: relative;" class="yiguicla black pa-6 ma-4 fl" v-for="(item,index) in quanbuList" @longtap="longtap()" @click="xiangqing(item)">
					<image :src="item.image" mode="widthFix"></image>
					<view class="text-align-center text-size-m mt-8">{{item.brand}}</view>
					<view class="text-align-center text-size-m mt-6 mb-6">{{item.goods_name}}</view>
					<view v-if="item.is_have==0" class="hui"></view>
				</view>
				<view style="clear: both;"></view>
				<tm-empty v-if="wushuju" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
				<view v-if="total>quanbuList.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>
			</tm-sheet>
		</view>
		<!-- 待取衣服 -->
			<tm-flotbutton class="qiu" @change="anniu" show-actions position="bottomRight" actions-pos="top" label="" :show-text="true"
				 :actions="listqiu">
			</tm-flotbutton>
		<!-- <css-float-ball v-model="floatBallPosition" >
		  <view class="float-ball-icon" hover-class="default-icon-hover">
		    <tm-translate ref="a_1" :auto="true" animation-name="fadeLeft">
		    	<view class="fudong" @click="show_1=true">
		    		<image src="/static/img/96.png" class="fudimg fl"></image>
		    		<view class="pt-20">待取衣物</view>
		    		<view>(<text style="color: #FFCC00;">3</text>件)</view>
		    	</view>
		    </tm-translate>
		  </view>
		</css-float-ball> -->
		<!-- 弹出 -->
		<tm-poup v-model="show_1" :position="pos" class="tcc">
			<view style="position: relative !important;" v-if="chukudata.length !=0">
				<view style="height: 10px;"></view>
				<tm-swiper @change="qiehuanLb" :current="current" :indicator-dots="false" :round="6" :ani3d="190"  :autoplay="false" :list="list1"></tm-swiper>
				<view class="text-white text-align-center mt-15">{{chukudata[current].brand}}{{chukudata[current].color}}{{chukudata[current].goods_name}}</view>
				<view class="text-white text-align-center mt-10 text-size-s">{{chukudata[current].description}}</view>
				<image class="guayi" :src="chukudata[current].ygimage" mode="widthFix"></image>
				<view class="text-white text-align-center mt-15">衣物位于 {{chukudata[current].ygposition}} {{chukudata[current].is_have}}号衣柜</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 {
			listqiu:[],
			wushuju:false,
			gengduo:false,
			offset: [0, 0],
			show_1:false,
			pos:'center',
			floatBallPosition:{x: 400, y: 750},
			itemuser:0,
			soso:'',
			activeIndex:0,
			list:[],
			listlx:[],
			quanbuList:[],
			list1:[],
			pagesize:9,
			page:1,
			total:0,
			count:0,
			have:0,
			chukudata:[],
			current:0,
			qiuid:'',
			quanbuchang:[]
		};
	},
	onLoad(e) {
		this.offset = [16, 99]
		if(!uni.getStorageSync("token")){
			uni.navigateTo({
				url: "/pages/login/index",
			})
		}
		
	},
	onShow(){
		this.sys = uni.getSystemInfoSync();
		this.getQiu()
		this.fenleichange();
		this.getfenltext();
	},
	created() {
		
	},
	methods: {
		shuaxin(){
			// console.log(99999)
			// this.quanbuList=[];
			// this.fenleichange();
			// this.getfenltext();
		},
		qiehuanLb(e){
			var that=this;
			this.current=e;
		},
		anniu(e){
			var that=this;
			console.log(this.chukudata)
			that.qiuid=that.listqiu[e].id;
			myRequest({
				url: "/api/Goods/getBallClothing",
				method:'post',
				data:{id:that.qiuid}
			}).then(res => {
				if (res.data.code == 200) {
					that.current=0;
					that.show_1=true;
					that.chukudata=res.data.data;
					that.list1=[];
					for(let i=0;i<res.data.data.length;i++){
						that.list1.push(res.data.data[i].image)
					}
				}else{
					
				}
			})
		},
		getQiu(){
			var that=this;
			myRequest({
				url: "/api/Goods/getBall",
				method:'post',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						that.listqiu=res.data.data;
						for(let i=0;i<that.listqiu.length;i++){
							that.listqiu[i]["icon"]='/static/img/96.png'
						}
					}
				}else{
					that.listqiu=[];
				}
			})
		},
		getList(){
			var that=this;
			myRequest({
				url: "/api/Goods/classificationData",
				method:'post',
				data:{role_id:that.itemuser.id,id:that.activeIndex,page:that.page,pagesize:that.pagesize}
			}).then(res => {
				if (res.data.code == 200) {
					that.quanbuchang=res.data.data.chang;
					that.quanbuList=that.quanbuList.concat(res.data.data.data);
					if(that.quanbuList.length==0){
						that.wushuju=true
					}else{
						that.wushuju=false
					}
					that.total=res.data.data.total;
					that.count=res.data.data.count;
					that.have=res.data.data.have;
				}else{
					that.quanbuList=[];
					if(that.quanbuList.length==0){
						that.wushuju=true
					}
				}
			})
		},
		quxiao(){
			this.show_1=false;
		},
		chuFun(){
			var that=this;
			myRequest({
				url: "/api/Goods/cancelDelivery",
				method:'post',
				data:{qiu_id:that.qiuid,id:that.chukudata[that.current].id}
			}).then(res => {
				console.log(res.data)
				if (res.data.code == 200) {
					that.show_1=false;
					that.getQiu()
					that.$refs.toast.show({model:'success',label:res.data.msg})
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
			
		},
		chuangjian(){
			uni.navigateTo({
				url: "/pages/chuanghome/index",
			})
		},
		longtap(){
			uni.navigateTo({
				url: "/pages/changan/index",
			})
		},
		tiao(id){
			uni.navigateTo({
				url: "/pages/zidingyikan/index?id="+id+"&type=1",
			})
		},
		xiangqing(item){
			uni.navigateTo({
				url: "/pages/yifu/index?id="+item.id,
			})
		},
		fenleichangeFun(){
			this.page=1;
			this.quanbuList=[]
			this.getList()
		},
		sosoFun(){
			uni.navigateTo({
				url: "/pages/sousuo/index",
			})
		},
		fenleichange(){
			var that=this;
			console.log("11199")
			myRequest({
				url: "/api/MemberInfo/getFamilyMember",
				method:'post',
				data:{family_id:uni.getStorageSync("family_id")}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						var wu=0;
						for(let i=0;i<res.data.data.length;i++){
							if(res.data.data[i].checked==1){
								wu=1;
								that.itemuser=res.data.data[i];
							}
						}
						if(wu==0){
							that.itemuser=res.data.data[0];
						}
						that.quanbuList=[];
						this.getList()
					}else{
						that.itemuser=0;
					}
				}else{
					that.itemuser=0;
				}
			})
		},
		getfenltext(){
			var that=this;
			myRequest({
				url: "/api/Category/list",
				method:'post',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						that.list=['全部'];
						for(let i=0;i<res.data.data.length;i++){
							that.list.push(res.data.data[i].category_name)
						}
						that.listlx=res.data.data;
					}
				}else{
					that.list=[];
					that.listlx=[];
				}
			})
		},
		qiehuanFun(){
			uni.navigateTo({
				url: "/pages/qiehuan/index",
			})
		},
		gengmore(){
			this.page=this.page+1;
			this.getList();
		},
		luru(){
			uni.navigateTo({
				url: "/pages/luru/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: 76px !important;height: 76px !important;}
	.yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;min-height: 235px !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;height: 90px;}
	.yiguicla{width: 30%;border-radius: 10px;height: 130px;overflow: hidden;}
	.more{text-align: center;}
	.more image{margin-right: 10px;vertical-align: middle;width: 30px;}
	.fudong{position:fixed;right:10px;bottom:150px;background: #303030;width: 130px;height: 60px;
	border-radius: 30px 0px 0px 30px;font-size: 14px;text-align: center;}
	.fudimg{width: 60px;height:60px}
	/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: 70% !important;display: block;margin:0 auto;margin-top:15px !important;}
	.tcc .deng{width:25px !important;height:25px !important;vertical-align: middle;margin-right:8px;}
	.anniu{width: 80%;margin: 0 auto;margin-top: 20px;}
	/deep/ .anniu .gray.bk{color: white !important;}
	.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);
		}
	}
	/deep/ .qiu .flex-center{width: 45px !important;height:45px !important;background: none !important;}
	/deep/ .qiu .flex-center uni-image{width: 45px !important;height:45px !important;}
	/deep/ .showValue{display: none !important;}
	/deep/ .menulistAction{height: 350px;overflow: auto;}
	/deep/ .hui{position: absolute;background: rgba(0,0,0,0.4);z-index: 1;top: 0;left: 0;width: 100%;height: 100%;}
</style>