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 && alldata !=0" class="touxiang" :src="alldata.detail.image" mode="widthFix"></image>
		</view>
		<div class="zhuti" style="padding-bottom:60px !important;" v-if="activeIndex==0">
			<view class="text-align-center text-size-lg" v-if="alldata !=0">{{alldata.detail.brand}}{{alldata.detail.color}}{{alldata.detail.goods_name}}</view>
			<view class="text-align-center text-size-s mt-10 text-gray" v-if="alldata !=0">{{alldata.detail.description}}</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>{{xianshi?'修改':'保存'}}</text>
					</view>
					<view class="you black mt-30" v-if="alldata !=0">
						<!-- <tm-pickers :default-value="selected" @confirm="xuanzeaa" :list="['苹果','香蕉','可口可乐','新西兰','日本']">
							<tm-input title="嗷嗷" align="right" v-model="selected[0]" disabled right-icon="icon-angle-right"></tm-input>
						</tm-pickers> -->
						<view v-for="(item,index) in alldata.detail.parameter">
							<tm-pickers :default-value="getshow(item)" :disabled="xianshi" class="tan" v-if="item.type=='select'"  @confirm="xuanze" :indexfu="item.name" :list="item.value">
								<tm-input :title="item.name" align="right" :placeholder="'请选择'+item.name" v-model="item.choosevalue" disabled right-icon="icon-angle-right"></tm-input>
							</tm-pickers>
							<tm-input :disabled="xianshi" v-if="item.type=='text' && item.name !='颜色'" :title="item.name" v-model="item.choosevalue" align="right"></tm-input>
							<view class="border-b-0 border-grey-darken-4-b-1 py-24 flex-between" v-if="item.name=='颜色'">
								<text class="text-size-n ">{{item.name}}</text>
								<view>
									<view  class="seka" :style="{'backgroundColor':item.choosevalue}" @tap="showPickerColorPop"></view>
									<picker-color :isShow="showPickerColor" :bottom="bottomPickerColor"  @callback='getPickerColor' />
								</view>
							</view>
						</view>
						<!-- <tm-input :disabled="xianshi" :required="true" title="商品名称" v-model="alldata.detail.goods_name" align="right"></tm-input>
						<tm-pickers :disabled="xianshi" class="tan" :default-value.sync="category_danarr" rang-key="category_name" :list="category_arr">
							<tm-input :required="true" title="分类" placeholder="请选择分类" disabled :value="obTstr1(category_danarr,'category_name')" right-icon="icon-angle-right"></tm-input>
						</tm-pickers>
						<tm-pickers :disabled="xianshi" class="tan" :default-value.sync="role_danarr" rang-key="username" :list="role_arr">
							<tm-input title="所属成员" :required="true" placeholder="请选择所属成员" disabled :value="obTstr3(role_danarr)" right-icon="icon-angle-right"></tm-input>
						</tm-pickers>
						<tm-input :disabled="xianshi" title="年份" v-model="alldata.detail.year" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="颜色" v-model="alldata.detail.color" align="right"></tm-input>
						<tm-pickers :disabled="xianshi" class="tan" :default-value.sync="size_danarr" rang-key="title" :list="size_arr">
							<tm-input title="尺码" placeholder="请选择尺码" disabled :value="obTstr2(size_danarr)" right-icon="icon-angle-right"></tm-input>
						</tm-pickers>
						<tm-input :disabled="xianshi" title="适用人群" v-model="alldata.detail.type" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="品牌" v-model="alldata.detail.brand" align="right"></tm-input>
						<tm-input :disabled="xianshi" title="材料" v-model="alldata.detail.science" align="right"></tm-input> -->
					</view>
				</view>
			</tm-sheet>
			<tm-sheet class="kuang" v-if="alldata !=0 && alldata.data.length !=0">
				<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 alldata.data" @click="yifu(item.id)">
						<image :src="item.image" mode="widthFix"></image>
						<view class="text-align-center text-size-m mt-8">{{item.brand}}{{item.color}}</view>
						<view class="text-align-center text-size-m mt-6 mb-6">{{item.goods_name}}</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 v-if="alldata!=0 && alldata.detail.is_have !=0" :round="24" class="sao mb-40" block @click="chuku()">出库</tm-button>
		</div>
		<!-- 搭配 -->
		<tm-sheet v-if="activeIndex==1" class="yichu" style="margin-bottom: 40px !important;">
			<!-- <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> -->
			<!-- <tm-tabs class="C1b1b1b qiehuan" color="white"  align="left"  v-model="activeIndex1" :list="list1" range-key="title"></tm-tabs> -->
			<view class="yiguicla1 black pa-6 ma-4 fl" v-for="(item,index) in quanbuList1" @click="yuyue(item.id)">
				<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="quanbuList1.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-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" :current="0" :indicator-dots="false" :round="6" :ani3d="190"  :autoplay="false" :list="list1"></tm-swiper>
				<view class="text-white text-align-center mt-15">{{chukudata[0].brand}}{{chukudata[0].color}}{{chukudata[0].goods_name}}</view>
				<view class="text-white text-align-center mt-10 text-size-s">{{chukudata[0].description}}</view>
				<image class="guayi" :src="chukudata[0].ygimage" mode="widthFix"></image>
				<view class="text-white text-align-center mt-15">衣物位于 {{chukudata[0].ygposition}} {{chukudata[0].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  theme="gray" size="n">关闭弹框</tm-button> -->
					<tm-button @click="quxchuFun()" theme="primary" :round="24" block>取消出库</tm-button>
				</view>
			</view>
		</tm-poup>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
export default {
	components: {
		"picker-color":pickerColor,
	},
	data() {
		return {
			selected:['裤子'],
			buttonColor:"#0099FF",
			showPickerColor:false,
			bottomPickerColor:0,
			arrbig:[],
			category_arr:[],
			category_danarr:[],
			role_arr:[],
			role_danarr:[],
			size_arr:[
				{title:"S",id:1},
				{title:"M",id:2},
				{title:"L",id:3},
				{title:"XL",id:4},
				{title:"XXL",id:5},
				{title:"其他",id:6},
			],
			size_danarr:[],
			show_1:false,
			pos:'center',
			xianshi:true,
			list1:[],
			list:[ '商品介绍','搭配方案'],
			activeIndex:0,
			activeIndex5:0,
			reqData:{
				goods_name:'',
				category_id:'',
				year:'',
				color:'',
				type:'',
				size:'',
				brand:'',
				science:'',
				role_id:''
			},
			typeclick1:3,//1加入购物车，2购物车，3前往购买，4,5
			typeclick:6,//1加入购物车，2购物车，3前往购买，4,5
			list5:[ '搭配内的购物清单'],
			quanbuList1:[],
			alldata:0,
			chukudata:[],
			qiu_id:''
		};
	},
	onLoad(e) {
		this.id=e.id?e.id:'4';
		this.getXiangq();
		this.getfangan();
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		getshow(data){
			return [data.choosevalue]
		},
		/* 显示获取颜色选择弹窗 */
		showPickerColorPop(){
			if(this.xianshi){
				return
			}
			this.showPickerColor=true;
		},
		/* 获取颜色选择回调 */
		getPickerColor(color){
			/* 隐藏弹窗 */
			this.showPickerColor=false;
			/* 判断颜色值是否有效 */
			if(color){
				this.buttonColor=color;
				var xunhuan=this.alldata.detail.parameter;
				for(let i=0;i<xunhuan.length;i++){
					if(xunhuan[i].name=="颜色"){
						xunhuan[i].choosevalue=color
					}
				}
			}
		},
		xuanzeaa(data){
			console.log(data)
			this.selected=[data[0].data]
		},
		xuanze(data){
			for(let i=0;i<this.alldata.detail.parameter.length;i++){
				if(this.alldata.detail.parameter[i].name==data[0].name){
					this.alldata.detail.parameter[i].choosevalue=data[0].data
				}
			}
		},
		quxchuFun(){
			var that=this;
			console.log(that.chukudata[0].id)
			myRequest({
				url: "/api/Goods/cancelDelivery",
				method:'post',
				data:{qiu_id:that.qiu_id,id:that.chukudata[0].id}
			}).then(res => {
				console.log(res.data)
				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})
				}
			})
		},
		getfangan(){
			var that=this;
			myRequest({
				url: "/api/Collocation/matchingScheme",
				method:'post',
				data:{id:that.id}
			}).then(res => {
				if (res.data.code == 200) {
					that.quanbuList1=res.data.data;
				}else{
					that.quanbuList1=[];
				}
			})
		},
		yifu(id){
			this.id=id;
			this.getXiangq();
			this.getfangan();
		},
		yuyue(id){
			uni.navigateTo({
				url: "/pages/zidingyikan/index?id="+id+"&type=1",
			})
		},
		obTstr2(o){
			if(Array.isArray(o)){
				if(o.length.length===0) return "";
				return o[0]?.title??""
			}
			return ''
		},
		getCY(){
			var that=this;
			myRequest({
				url: "/api/MemberInfo/getFamilyMember",
				method:'post',
				data:{family_id:uni.getStorageSync("family_id")}
			}).then(res => {
				if (res.data.code == 200) {
					that.role_arr=res.data.data;
					var id=that.alldata.detail.role_id;
					for(let i=0;i<res.data.data.length;i++){
						if(id==res.data.data[i].id){
							this.role_danarr=[{
								username:res.data.data[i].username,
								id:res.data.data[i].id
							}]
						}
					}
					var sid=that.alldata.detail.size;
					for(let i=0;i<that.size_arr.length;i++){
						if(sid==that.size_arr[i].id){
							this.size_danarr.push(that.size_arr[i])
						}
					}
					
				}else{
					that.role_arr=[];
				}
			})
		},
		obTstr3(o){
			if(Array.isArray(o)){
				if(o.length.length===0) return "";
				return o[0]?.username??""
			}
			return ''
		},
		getFl(){
			var that=this;
			myRequest({
				url: "/api/Category/list",
				method:'post',
				data:{}
			}).then(res => {
				
				if (res.data.code == 200) {
					this.category_arr=res.data.data;
					var id=that.alldata.detail.category_id;
					for(let i=0;i<res.data.data.length;i++){
						if(id==res.data.data[i].id){
							this.category_danarr=[{
								category_name:res.data.data[i].category_name,
								id:res.data.data[i].id
							}]
						}
					}
				}else{
					that.category_arr=[];
				}
			})
		},
		obTstr1(o){
			if(Array.isArray(o)){
				if(o.length.length===0) return "";
				return o[0]?.category_name??""
			}
			return ''
		},
		getXiangq(){
			var that=this;
			myRequest({
				url: "/api/Goods/getDetail",
				method:'post',
				data:{id:that.id}
			}).then(res => {
				if (res.data.code == 200) {
					that.alldata=res.data.data;
					// var xunhuan=that.alldata.detail.parameter;
					// for(let i=0;i<xunhuan.length;i++){
					// 	if(xunhuan[i].name=="颜色"){
					// 		that.buttonColor="#"+xunhuan[i].choosevalue
					// 	}
					// }
					that.getFl();
					that.getCY();
				}else{
					that.alldata=[];
				}
			})
		},
		gengmore(){
			
		},
		chuku(){
			var that=this;
			that.list1=[];
			myRequest({
				url: "/api/Goods/takeClothes",
				method:'post',
				data:{id:[that.id]}
			}).then(res => {
				if (res.data.code == 200) {
					that.show_1=true;
					that.chukudata=res.data.data.goodInfo;
					that.qiu_id=res.data.data.qiu_id;
					that.list1.push(res.data.data.goodInfo[0].image)
					// 倒计时开始
					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})
				}
			})
		},
		xiugaiFun(){
			var that=this;
			if(! this.xianshi){
				var databaocun=that.alldata.detail.parameter;
				console.log(databaocun)
				for(let i=0;i<databaocun.length;i++){
					if(databaocun[i].choosevalue==""){
						that.$refs.toast.show({model:'warn',label:'请将数据填写完整'})
						return
					}
				}
				// 分类id
				for(let i=0;i<that.category_arr.length;i++){
					if(that.category_arr[i].category_name==databaocun[0].choosevalue){
						databaocun[0].classid=that.category_arr[i].id
					}
				}
				// // 成员id
				for(let i=0;i<that.role_arr.length;i++){
					if(that.role_arr[i].username==databaocun[1].choosevalue){
						databaocun[1].memberid=that.role_arr[i].id
					}
				}
				// 去掉图片的头
				var img=""
				if(that.alldata.detail.image){
					var oldimg=that.alldata.detail.image;
					img=oldimg.substr(24)
				}
				myRequest({
					url: "/api/Goods/updateGoods",
					method:'post',
					data:{
						img:img,
						id:that.alldata.detail.id,
						parm:databaocun
					}
				}).then(res => {
					if (res.data.code == 200) {
						setTimeout(function(){
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							uni.navigateBack({
								delta: 1,
								success: function() {
									beforePage.$vm.shuaxin()
								}
							});
						},2000)
						that.$refs.toast.show({model:'success',label:res.data.msg})
					}else{
						that.$refs.toast.show({model:'error',label:res.data.msg})
					}
				})
				console.log(this.reqData)
			}
			this.xianshi=!this.xianshi;
		},
		quxiao(){
			this.show_1=false;
		},
	},
}
</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 .lunbohhh uni-image{width: 160px !important;}
	.tcc .guayi{width: 60% !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: 88%;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: 80%;margin: 0 auto;margin-top: 20px;padding-bottom: 30px;}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	.yiguicla1 image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
	.yiguicla1{width: 47%;border-radius: 10px;}
	.more{text-align: center;}
	.more image{margin-right: 10px;vertical-align: middle;width: 30px;}
	.seka{width: 40px;height: 20px;border:1px solid white;}
	/deep/ .close{width: 30px !important;height: 30px !important;float: right;right: 6px;}
	.daojishi{width: 90%;margin: 15px auto;font-size: 14px;}
</style>