wardrobe/pages/zidingyikan/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="kuang" style="padding-bottom: 10px !important;">
				<view style="width: 94%;margin:0 auto;">
					<image class="chuanda" :src="alldata.image" mode="widthFix"></image>
					<!-- <view class="shuru" v-if="off==2">
						<tm-form>
							<view class="text-size-m text-white">请输入搭配名称</view>
							<tm-input v-model="familyname" name="title" clear placeholder="出席重要场合" clear></tm-input>
						</tm-form>
					</view>
					<view v-if="off==2" >
						<view class="biaoti text-white mt-30 text-size-m"><view class="mr-10"></view>分类</view>
						<tm-tabs class="C1b1b1b qiehuan" color="white"  align="left"  v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
						<view class="biaoti text-white mt-30 text-size-m"><view class="mr-10"></view>场景</view>
						<tm-tabs class="C1b1b1b qiehuan" color="white"  align="left"  v-model="activeIndex1" :list="list1" range-key="title"></tm-tabs>
					</view> -->
					<view class="text-align-center mt-20 text-white">{{alldata.title}}</view>
					<!-- <view v-if="off==1" class="text-align-center mt-10 text-size-s">丝滑如肌肤</view> -->
				</view>
			</tm-sheet>
		</div>
		<view class="goumai shangpin" v-if="off==2">
			<view class="pt-20"><text class="ml-20">套装名</text><text class="fr mr-20 text-gray text-size-s">{{alldata.title}}</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="off==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="off==1">
			<tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
				<tm-cartCellListFood  v-on:genghuan="genghuan" v-for="item in test" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy"></tm-cartCellListFood>
				<tm-empty v-if="test.length ==0" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
			</tm-sheet>
		</view>
		<view class="anniu" v-if="off==1">
			<tm-menu direction="top" :list="listmingri" @change="yuyue">
				<tm-button :round="24" theme="gray" size="n">预约明日</tm-button>
			</tm-menu>
			<tm-button :round="24"@click="chuku" class="fr" theme="primary" size="n">全部出库</tm-button>
		</view>
		<tm-poup v-model="show_1" :position="pos" class="tcc">
			<view style="position: relative !important;" v-if="chukudata.length !=0">
				<image @click="quxiao()" class="close" src="/static/img/close.png" mode="widthFix"></image>
				<view style="clear: both;"></view>
				<tm-swiper class="lunbohhh" @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="daojishi">
					<text>倒计时：</text>
					<tm-countdown format="HH时MM分数SS秒哈"  ref="testCountdown"  :time="2*60*60*1000">
						<template 
						v-slot:default=" { timeData } ">
							<view class="flex-center">
								<view v-for="(item,key) in timeData.data" :key="key" class="pa-10 primary  mr-10 round-2" :class="$tm.vx.state().tmVuetify.black?'bk':''">
									{{item}}
								</view>
							</view>
						</template> 
					</tm-countdown>
					<text>结束后若衣服仍未取出，出库将自动取消</text>
				</view>
				<!-- <view class="anniu">
					<tm-button @click="quxiao()" theme="gray" size="n">关闭弹框</tm-button>
					<tm-button @click="quxchuFun()" 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 {
			familyname:'',
			off:1,
			alldata:0,
			list:['时尚','商务'],
			activeIndex:0,
			activeIndex:0,
			activeIndex1:0,
			list5:[ '搭配内的购物清单'],
			test: [],
			test1: [{
				img: '../../static/img/83.png',
				title: '丝缎质感纹理风衣',
				label: '黑色 - 6518/320',
				id: 3,
				buy: 0,
				itemId: 0
			}],
			typeclick1:3,//1加入购物车，2购物车，3前往购买，4,5
			typeclick:6,//1加入购物车，2购物车，3前往购买，4,5
			listmingri:[],
			show_1:false,
			pos:'center',
			chukudata:[],
			current:0,
			list1:[],
			mingriyuanList:[],
			qiu_id:''
		};
	},
	onLoad(e) {
		this.off=e.type?e.type:2;//1是自己的
		this.id=e.id?e.id:9;//1是自己的
		if(this.off==1){
			this.typeclick=6;
			this.getDate();
			this.getmingri();
		}else{
			this.getShp()
		}
	},
	created() {
		this.sys = uni.getSystemInfoSync();
		
	},
	methods: {
		jiarufuFun(data){
			uni.navigateTo({
				url: "/pages/shopdetail/index?cartId="+data.data.id+'&classId='+data.data.category_id,
			})
		},
		getShp(){
			var that=this;
			myRequest({
				url: "/api/Collocation/matchingSchemeDetails",
				method:'post',
				data:{id:that.id,type:1}
			}).then(res => {
				if (res.data.code == 200) {
					that.alldata=res.data.data.data;
					that.test1=[];
					res.data.data.details.forEach(item => {
						that.test1.push({
							img: item.shopGoods.image,
							title: item.shopGoods.goods_name,
							label: item.shopGoods.goods_details,
							id: item.shopGoods.id,
							buy: 0,
							itemId: 0,
							price:item.shopGoods.sale_price,
							category_id:item.shopGoods.category_id
						})
					})
				}else{
					
				}
			})
		},
		getmingri(){
			var that=this;
			myRequest({
				url: "/api/Scene/sceneList",
				method:'post',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					var data=res.data.data;
					that.listmingri=[];
					for(let i=0;i<data.length;i++){
						that.listmingri.push(data[i].scene_name)
					}
					that.mingriyuanList=data;
					this.$forceUpdate()
				}else{
					
				}
			})
		},
		getDate(){
			var that=this;
			myRequest({
				url: "/api/Collocation/getCollocationDetails",
				method:'post',
				data:{id:that.id}
			}).then(res => {
				if (res.data.code == 200) {
					that.alldata=res.data.data.data;
					that.test=[];
					res.data.data.details.forEach(item => {
						that.test.push({
							img: item.goods.image,
							title: item.goods.goods_name,
							label: item.goods.description,
							goods_id:item.goods_id,
							price: 36.2,
							id: item.id,
							buy: 0
						})
					})
				}else{
					
				}
			})
		},
		yuyue(e){
			var that=this;
			var scene_id=that.mingriyuanList[e.index].id;
			myRequest({
				url: "/api/Collocation/makeAppointmentTomorrow",
				method:'post',
				data:{id:that.id,scene_id:scene_id}
			}).then(res => {
				if (res.data.code == 200) {
					that.$refs.toast.show({model:'success',label:'预约成功'})
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
		},
		quxchuFun(){
			var that=this;
			myRequest({
				url: "/api/Goods/cancelDelivery",
				method:'post',
				data:{qiu_id:that.qiu_id,id:that.chukudata[that.current].id}
			}).then(res => {
				if (res.data.code == 200) {
					that.show_1=false;
					that.$refs.toast.show({model:'success',label:res.data.msg})
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
		},
		quxiao(){
			this.show_1=false;
		},
		qiehuanLb(e){
			var that=this;
			this.current=e;
		},
		chuku(){
			var ids=[];
			var that=this;
			for(let i=0;i<this.test.length;i++){
				ids.push(this.test[i].goods_id)
			}
			myRequest({
				url: "/api/Goods/takeClothes",
				method:'post',
				data:{id:ids}
			}).then(res => {
				if (res.data.code == 200) {
					that.show_1=true;
					that.list1=[];
					that.chukudata=res.data.data.goodInfo;
					for(let i=0;i<res.data.data.goodInfo.length;i++){
						that.list1.push(res.data.data.goodInfo[i].image)
						
					}
					that.qiu_id=res.data.data.qiu_id;
					// 倒计时开始
					var countdownstart=Date.parse(new Date(res.data.data.stock_time))/1000;
					var countdownend=countdownstart+2*60*60;
					var countdownnow=Date.parse(new Date())/1000
					var daojishi=countdownend-countdownnow;
					if(daojishi<0){
						that.countdown=0;
					}else{
						that.countdown=daojishi*1000;
					}
					// 倒计时结束
					that.$refs.toast.show({model:'success',label:'出库成功'})
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
		},
		genghuan(data){
			var that=this;
			if(data.type==1){
				uni.navigateTo({
					url: "/pages/genghuan/index?goods_id="+data.data.goods_id+"&id="+data.data.id,
				})
			}else{
				// 出库
				var ids=[];
				ids.push(data.data.goods_id)
				myRequest({
					url: "/api/Goods/takeClothes",
					method:'post',
					data:{id:ids}
				}).then(res => {
					if (res.data.code == 200) {
						that.show_1=true;
						that.list1=[];
						that.chukudata=res.data.data.goodInfo;
						for(let i=0;i<res.data.data.goodInfo.length;i++){
							that.list1.push(res.data.data.goodInfo[i].image)
						}
						that.qiu_id=res.data.data.qiu_id;
						// 倒计时开始
						var countdownstart=Date.parse(new Date(res.data.data.stock_time))/1000;
						var countdownend=countdownstart+2*60*60;
						var countdownnow=Date.parse(new Date())/1000
						var daojishi=countdownend-countdownnow;
						if(daojishi<0){
							that.countdown=0;
						}else{
							that.countdown=daojishi*1000;
						}
						// 倒计时结束
						that.$refs.toast.show({model:'success',label:'出库成功'})
					}else{
						that.$refs.toast.show({model:'error',label:res.data.msg})
					}
				})
			}
		},
	},
}
</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;}
	.chuanda{width: 100%;margin-top:10px;}
	.shuru{background: #0D0D0D;padding: 10px;margin-top: 20px;}
	/deep/ .shuru .grey-darken-5{
		background-color: #0d0d0d!important;
		padding: 0px !important;
	}
	.shuru{border:1px solid #303030;border-radius: 10px;}
	/deep/ .shuru .text-primary.bk{color:#303030 !important;}
	/deep/ .shuru .border-grey-darken-4-b-1{border-bottom:none !important;}
	/deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
	/deep/ .qiehuan .tm-tabs-con-item-text{background: #303440;height: 26px;line-height: 26px;
	padding-left: 14px;padding-right: 14px;margin-top: 17%;border-radius: 20px;margin-left: 10px;}
	/deep/ .qiehuan .text-white{
		font-size: 14px;
		background: #0178FD;
		height: 26px;
		vertical-align: middle;
		line-height: 26px;
		border-radius: 20px;
		padding-left: 14px;
		padding-right: 14px;
		margin-top: 17%;
	}
	.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;}
	
	/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 .lunbohhh 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;}
	.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/ .tcc .anniu .gray.bk{color: white !important;}
	.tcc .anniu{width: 88%;margin: 0 auto;margin-top: 20px;}
	/deep/ .close{width: 30px !important;height: 30px !important;float: right;right: 6px;}
	.daojishi{width: 90%;margin: 15px auto;font-size: 14px;}
</style>