wardrobe/pages/bianji/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>
		<div class="zhuti">
			<!-- 衣橱 -->
			<tm-sheet class="yichu" style="margin-bottom: 40px !important;">
				<view class="flex-center"><tm-segTabs @change="shifouxuan" :round="24" :margin="[32,10]" font-size="s" :list="list" color="white" activeFontColor="red" bg-color="bg-gradient-red-lighten" v-model="active"></tm-segTabs></view>
				<view v-if="yixuanor==1" class="biaoti text-white mt-10 text-size-m"><view class="mr-10"></view>分类</view>
				<tm-tabs @change="fenlei"  v-if="yixuanor==1" class="C1b1b1b qiehuan" color="white" align="left"  v-model="activeIndexfl" :list="listfl" range-key="title"></tm-tabs>
				<view class="biaoti text-white mt-30 text-size-m"><view class="mr-10" v-if="yixuanor==0"></view>{{yixuanor==0?'场景':'请选择场景'}}</view>
				<tm-tabs @change="changjing" class="C1b1b1b qiehuan" color="white"  align="left"  v-model="activeIndexcj" :list="listcj" range-key="title"></tm-tabs>
				<!-- 可预约 -->
				<view v-if="yixuanor==1" class="yiguicla black pa-6 ma-4 fl" @click="gaoliang(index,item)" :class="chooseindex==index?'C0178FD':''" v-for="(item,index) in quanbuList">
					<image :src="item.image" mode="widthFix"></image>
					<view class="text-size-m mt-20 mb-20 ml-10">{{item.title}}</view>
				</view>
				<!-- 已预约 -->
				<view v-if="yixuanor==0" class="yiguicla black pa-6 ma-4 fl" @click="gaoliang(index,item)" :class="chooseindex==index?'C0178FD':''" v-for="(item,index) in yixuanList">
					<image :src="item.image" mode="widthFix"></image>
					<view class="text-size-m mt-20 mb-20 ml-10">{{item.title}}</view>
				</view>
				<tm-empty v-if="yixuanor==0 && yixuanList.length ==0" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
				<tm-empty v-if="yixuanor==1 && quanbuList.length ==0" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
				<view style="clear: both;"></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>
			<tm-button @click="shanchu" v-if="yixuanor==0 && yixuanList.length !=0" theme="gray" :round="24" class="sao mb-40" block>取消预约</tm-button>
			<tm-button @click="yuyue" v-if="yixuanor==1" :round="24" class="sao mb-40" block>预约</tm-button>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			listflall:[],
			listcjall:[],
			listfl:[],
			yixuanor:0,//0已选
			list:['已预约穿搭','可预约穿搭'],
			listcj:[],
			active:0,
			activeIndexfl:0,
			activeIndexcj:0,
			quanbuList:[],
			yixuanList:[],
			chooseindex:-1,
			type:1
		};
	},
	onLoad(e) {
		this.type=e.type?e.type:1;//1今天2明天
	},
	created() {
		this.sys = uni.getSystemInfoSync();
		this.getCj();
		this.getFl();
	},
	methods: {
		shanchu(){
			var that=this;
			if(this.chooseindex==-1){
				that.$refs.toast.show({model:'warn',label:'请选择要删除的衣物'})
				return
			}
			var id=this.yixuanList[this.chooseindex].id;
			myRequest({
				url: "/api/Collocation/deleteTomorrowAppointment",
				method:'post',
				data:{id:id}
			}).then(res => {
				if (res.data.code == 200) {
					that.$refs.toast.show({model:'success',label:res.data.msg})
					that.chooseindex=-1;
					that.getFl();
					this.getCj();
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
		},
		yuyue(){
			var that=this;
			var scene_id=this.listcjall[this.activeIndexcj].id;
			if(this.chooseindex==-1){
				that.$refs.toast.show({model:'warn',label:'请选择衣物'})
				return
			}
			var id=this.quanbuList[this.chooseindex].id;
			myRequest({
				url: "/api/Collocation/makeAppointmentTomorrow",
				method:'post',
				data:{id:id,scene_id:scene_id}
			}).then(res => {
				if (res.data.code == 200) {
					that.$refs.toast.show({model:'success',label:'预约成功'})
					that.chooseindex=-1;
					that.getFl();
					this.getCj();
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
		},
		fenlei(e){
			var id=this.listflall[e].id;
			this.getKxuan(id)
		},
		changjing(e){
			var id=this.listcjall[e].id;
			this.getYxuan(id)
		},
		shifouxuan(e){
			this.activeIndexcj=0;
			this.chooseindex=-1;
			this.yixuanor=e;
			this.activeIndexfl=0;
			// if(e==0){
			// 	// var id=this.listcjall[0].id;
			// 	this.getCj();
			// }else{
			// 	// var id=this.listflall[0].id;
			// 	this.getCj();
			// 	this.getFl();
			// }
		},
		getYxuan(id){
			var that=this;
			that.yixuanList=[];
			myRequest({
				url: "/api/Collocation/getAppointmentMatching",
				method:'post',
				data:{scene_id:id}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						that.yixuanList=res.data.data;
					}
				}else{
					that.yixuanList=[];
				}
			})
		},
		getKxuan(id){
			var that=this;
			myRequest({
				url: "/api/Collocation/getPlanTomorrow",
				method:'post',
				data:{id:id}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						that.quanbuList=res.data.data;
					}else{
						that.quanbuList=[]
					}
				}else{
					that.quanbuList=[];
				}
			})
		},
		getCj(){
			var that=this;
			myRequest({
				url: "/api/Scene/sceneList",
				method:'post',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						// that.listfl=['全部'];
						that.listcj=[];
						for(let i=0;i<res.data.data.length;i++){
							that.listcj.push(res.data.data[i].scene_name)
						}
						that.listcjall=res.data.data;
						that.getYxuan(that.listcjall[that.activeIndexcj].id)
					}
				}else{
					that.listcj=[];
				}
			})
		},
		getFl(){
			var that=this;
			myRequest({
				url: "/api/Category/getCollocationClassList",
				method:'post',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						// that.listfl=['全部'];
						that.listfl=[];
						for(let i=0;i<res.data.data.length;i++){
							that.listfl.push(res.data.data[i].category_name)
						}
						that.listflall=res.data.data;
						that.getKxuan(that.listflall[that.activeIndexfl].id);
					}
				}else{
					that.listfl=[];
				}
			})
		},
		gengmore(){
			
		},
		gaoliang(index){
			this.chooseindex=index
		}
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	.chuanda{width: 100%;height: 144px;}
	.taiyang{width: 25px;}
	.bianji{border: 1px solid #303440;width: 80px;height: 30px;background: #303440;font-size: 15px;
	text-align: center;line-height: 30px;border-radius: 5px;margin: 0 auto;margin-top: 10px;border:1px solid white;}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		background: #1B1B1B;
		padding-bottom: 15px;
	}
	.scroll-view-item {
		height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 150px;
		text-align: center;
		font-size: 36rpx;
		margin-left: 10px;
		background: #0D0D0D;
		padding: 6px;
		border-radius: 10px;
	}
	.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: 47%;border-radius: 10px;height: 204px;}
	.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;}
	.sao{width: 60%;display: block;margin: 0 auto;margin-bottom: 60px;}
	.biaoti view{width:5px;height:19px;background: #0178FD;float: left;border-radius: 10px;}
</style>