wardrobe/pages/baocun/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="/static/img/108.png" mode="widthFix"></image>
					<view class="shuru">
						<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>
						<view class="biaoti text-white mt-30 text-size-m"><view class="mr-10"></view>分类</view>
						<tm-tabs @change="fenlei" class="C1b1b1b qiehuan" color="white"  align="left"  v-model="activeIndex" :list="listfl" 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 v-if="off==1" class="text-align-center mt-20 text-white">丝缎质感纹理风衣</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==1" >
			<view class="pt-20"><text class="ml-20">衣物名</text><text class="fr mr-20 text-gray text-size-s">丝缎质感纹理风衣</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">
			<tm-tabs align="center" class="qiehuan1" v-model="activeIndex5" :list="list5" range-key="title"></tm-tabs>
		</tm-sheet>
		<!-- 单品 -->
		<view class="zhuti shangpin">
			<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-sheet>
		</view>
		<!-- <tm-button :round="24" class="sao mb-40 mt-40" block>保存</tm-button> -->
		<view class="anniu" v-if="off==2">
			<tm-button @click="shanchu()" :round="24" theme="gray" size="n">删除</tm-button>
			<tm-button @click="baocun()" :round="24" class="fr" theme="primary" size="n">保存</tm-button>
		</view>
		<view class="anniu" v-if="off==1">
			<tm-button class="anniubaocun " @click="baocun()" :round="24" theme="primary" size="n">保存</tm-button>
		</view>
		<view style="clear: both;"></view>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			listfl:[],
			listflall:[],
			familyname:'',
			off:1,
			activeIndex:0,
			activeIndex5:0,
			list1:[],
			list1all:[],
			activeIndex1:0,
			list5:[ '搭配内的购物清单'],
			test: [],
			test1: [{
				img: '../../static/img/83.png',
				title: '丝缎质感纹理风衣',
				label: '黑色 - 6518/320',
				id: 3,
				buy: 0,
				itemId: 0
			}],
			typeclick1:6,//1加入购物车，2购物车，3前往购买，4,5
			typeclick:7,//1加入购物车，2购物车，3前往购买，4,5
			ids:[],
			alldata:{}
		};
	},
	onLoad(e) {
		this.off=e.type?e.type:1;//1保存2是修改
		this.id=e.id?e.id:13;
		if(this.off==1){
			this.huancun();
		}else{
			this.getDate();
		}
	},
	created() {
		this.sys = uni.getSystemInfoSync();
		this.fenleichange();
	},
	methods: {
		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.list1=[];
						for(let i=0;i<res.data.data.length;i++){
							that.list1.push(res.data.data[i].scene_name)
							if(res.data.data[i].id==that.alldata.scene_id){
								that.activeIndex1=i
							}
						}
						that.list1all=res.data.data;
					}
				}else{
					that.list1=[];
				}
			})
		},
		huancun(){
			var ids=[];
			console.log(11111111111)
			console.log(uni.getStorageSync("datalist"))
			if(uni.getStorageSync("datalist")){
				var datalist=uni.getStorageSync("datalist");
				this.test=[];
				for(let i=0;i<datalist.length;i++){
					this.test.push({
						img: datalist[i].image,
						title: datalist[i].goods_name,
						label: datalist[i].description,
						price: '',
						id: datalist[i].id,
						buy: 0,
						itemId: 0
					})
					ids.push(datalist[i].id)
				}
				this.ids=ids;
			}
		},
		genghuan(data){
			var that=this;
			uni.navigateTo({
				url: "/pages/genghuan/index?type=tihuan&id="+data.data.id,
			})
		},
		getDate(){
			var that=this;
			myRequest({
				url: "/api/Collocation/matchingSchemeDetails",
				method:'post',
				data:{type:2,id:that.id}
			}).then(res => {
				if (res.data.code == 200) {
					that.familyname=res.data.data.data.title;
					that.alldata=res.data.data.data;
					var datalist=res.data.data.details,datalist1=[];
					for(let i=0;i<datalist.length;i++){
						datalist1.push(datalist[i].goods)
					}
					uni.setStorageSync("datalist",datalist1)
					that.huancun();
					that.getFl();
					that.getCj();
				}else{
					
				}
			})
		},
		shanchu(){
			var that=this;
			myRequest({
				url: "/api/Collocation/customizedDeleteCollocation",
				method:'post',
				data:{id:that.id}
			}).then(res => {
				console.log(res.data)
				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})
				}
			})
		},
		fenleichange(){
			var that=this;
			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];
						}
					}else{
						that.itemuser=0;
					}
				}else{
					that.itemuser=0;
				}
			})
		},
		fenlei(e){
			this.activeIndex=e;
		},
		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)
							if(res.data.data[i].id==that.alldata.category_id){
								that.activeIndex=i
							}
						}
						that.listflall=res.data.data;
					}
				}else{
					that.listfl=[];
				}
			})
		},
		baocun(){
			var that=this;
			if(that.familyname==""){
				that.$refs.toast.show({model:'error',label:'请输入搭配名称'})
				return
			}
			var obj={
				title:that.familyname,
				category_id:that.listflall[that.activeIndex].id,
				memberinfo_id:that.itemuser.id,
				ids:this.ids,
				scene_id:that.list1all[that.activeIndex1].id
			}
			if(this.off==1){
				// 保存
				var url="/api/Collocation/customizedCollocation"
			}else{
				obj['id']=that.id;
				var url="/api/Collocation/customizedUpdateCollocation"
			}
			myRequest({
				url: url,
				method:'post',
				data:obj
			}).then(res => {
				console.log(res.data)
				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(obj)
		},
		jiarufuFun(data){
			// uni.navigateTo({
			// 	url: "/pages/shopdetail/index",
			// })
			console.log(data)
		},
	},
}
</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/ .anniubaocun{width: 100%;}
	/deep/ .anniubaocun .flex-center{width: 100% !important;}
</style>