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-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()">
						<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">
				<image :src="item.src" mode="widthFix"></image>
				<view class="text-size-m mt-20 mb-20 ml-10">{{item.text}}</view>
			</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">
				<view style="height: 10px;"></view>
				<tm-swiper :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="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 {
			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:[{
				src:'/static/img/44.png',
				text:'日常穿搭'
			},{
				src:'/static/img/44.png',
				text:'日常穿搭'
			},{
				src:'/static/img/44.png',
				text:'日常穿搭'
			},{
				src:'/static/img/44.png',
				text:'日常穿搭'
			},{
				src:'/static/img/44.png',
				text:'日常穿搭'
			},{
				src:'/static/img/44.png',
				text:'日常穿搭',
				off:false
			}],
			alldata:0,
			chukudata:[]
		};
	},
	onLoad(e) {
		this.id=e.id?e.id:'4';
		this.getXiangq()
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		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;
					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;
					that.list1.push(res.data.data[0].image)
					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){
				if(that.category_danarr.length==0){
					that.$refs.toast.show({model:'warn',label:'请选择分类'})
					return
				}else{
					that.reqData.category_id=that.category_danarr[0].id
				}
				if(that.role_danarr.length==0){
					that.$refs.toast.show({model:'warn',label:'请选择成员'})
					return
				}else{
					that.reqData.role_id=that.role_danarr[0].id
				}
				if(that.size_danarr.length!=0){
					that.reqData.size=that.size_danarr[0].id
				}
				that.reqData.goods_name=that.alldata.detail.goods_name;
				if(that.reqData.goods_name==""){
					that.$refs.toast.show({model:'warn',label:'请输入商品名称'})
					return
				}
				that.reqData.year=that.alldata.detail.year;
				that.reqData.color=that.alldata.detail.color;
				that.reqData.type=that.alldata.detail.type;
				that.reqData.brand=that.alldata.detail.brand;
				that.reqData.science=that.alldata.detail.science;
				that.reqData.id=that.alldata.detail.id;
				myRequest({
					url: "/api/Goods/updateGoods",
					method:'post',
					data:that.reqData
				}).then(res => {
					if (res.data.code == 200) {
						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 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;}
</style>