wardrobe/pages/chuanghome/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: 70px !important;">
				<image v-if="(active==1 || active==2)" class="jindu" src="/static/img/49.png" mode="widthFix"></image>
				<image v-if="active==3" class="jindu" src="/static/img/50.png" mode="widthFix"></image>
				<image v-if="active==4" class="jindu" src="/static/img/51.png" mode="widthFix"></image>
				<view class="wenzi flex-between flex-center" style="margin-top: 10px;">
					<view>
						<text class="text-white text-size-m">创建家庭</text>
					</view>
					<view>
						<text class="text-white text-size-m">创建角色</text>
					</view>
					<view>
						<text class="text-white text-size-m">创建成功</text>
					</view>
				</view>
				<!-- <view class="wenzi flex-between flex-center">
					<view>
						<text class="text-size-s">2022-11-28</text>
					</view>
					<view>
						<text class="text-size-s">等待审批</text>
					</view>
					<view>
						<text class="text-size-s">等待审批</text>
					</view>
				</view> -->
				<view v-if="active==1">
					<view class="mt-20 ml-15">
						<text class="text-white text-size-m">*扫描柜体上的二维码和衣柜绑定</text>
					</view>
					<image block class="zhanshi" mode="widthFix" src="/static/img/48.png"></image>
					<tm-button :round="24" class="sao mb-40" @click="saoma()" block>扫二维码</tm-button>
				</view>
				<view v-if="active==2">
					<tm-translate ref="a_1" :auto="true" animation-name="zoomIn">
						<image block class="nicheng" mode="widthFix" src="/static/img/52.png"></image>
					</tm-translate>
					<view class="text-align-center mt-20 mb-40">
						<text class="text-size-m">衣柜和手机关联成功</text>
					</view>
					<view class="black shuru pa-30">
						<tm-form>
							<view class="text-size-m">请输入家庭名称</view>
							<tm-input name="title" v-model="reqData.familyname" clear placeholder="相亲相爱一家人"></tm-input>
						</tm-form>
					</view>
					<tm-button :round="24" class="sao mb-40 mt-40" @click="chuangjianFun()" block>创建家庭</tm-button>
				</view>
				<view v-if="active==3">
					<view>
						<view class="fl zuo" style="width:70px;">
							<view class="flex-center flex-col" style="position: relative;width: 70px;height: 70px;" v-for="(item,index) in reqData.role">
								<image @click="qiehuanren(index)" block v-if="index==0" mode="widthFix" src="/static/img/53.png"></image>
								<image @click="qiehuanren(index)" block v-else mode="widthFix" src="/static/img/61.png"></image>
								<image src="/static/icon/error.png" class="error" @click="shanchu(item.timestamp)" v-if="(show==index && index !=0)"></image>
							</view>
							<view class="flex-center flex-col" style="position: relative;margin-top: 40px;" v-if="reqData.role.length<4">
								<image block mode="widthFix" src="/static/img/54.png" @click="add()"></image>
							</view>
						</view>
						<view class="fr you black mt-30" style="width: calc(100% - 100px);" v-for="(item1,index1) in reqData.role" v-if="show==index1">
							<tm-input  :required="true"  title="用户名" v-model="item1.username" placeholder="你想叫自己什么" align="right"></tm-input>
							<tm-input  :required="true"  title="身高（cm）" v-model="item1.height" align="right"></tm-input>
							<tm-input  :required="true"  title="体重（kg）" v-model="item1.weight" align="right"></tm-input>
							<tm-pickers class="tan" :default-value.sync="item1.body_arr" rang-key="title" :list="chelianglis">
								<tm-input name="shencai" title="身材" placeholder="请选择身材" disabled :value="obTstr2(item1.body_arr)" right-icon="icon-angle-right"></tm-input>
							</tm-pickers>
						</view>
					</view>
					<view style="clear: both;"></view>
					<tm-button :round="24" class="sao mb-40" style="margin-top: 50px;" @click="tijiao()" block>下一步</tm-button>
				</view>
				<view v-if="active==4">
					<tm-translate ref="a_1" :auto="true" animation-name="zoomIn">
						<image block class="nicheng" mode="widthFix" src="/static/img/52.png"></image>
					</tm-translate>
					<view class="text-align-center mt-20">
						<text class="text-size-m text-white">家庭创建成功！</text>
					</view>
					<view class="text-align-center mb-40">
						<text class="text-size-m">衣柜和手机关联成功</text>
					</view>
					<view class="px-24">
						<tm-button theme="primary" @click="quyifu()" :round="24" block class="mt-50 logincla">添加衣服</tm-button>
						<tm-button @click="quindex()" theme="primary" :round="24" block class="mt-30 quindex">进入首页</tm-button>
					</view>
				</view>
			</tm-sheet>
			<tm-dialog @confirm="querentm" :inputVala="inputVala" confirmText="确定" :showCancel="false" model="confirm" v-model="show3" content="请确认条码内容是否正确" theme="split"></tm-dialog>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			show3:false,
			inputVala:'',
			shencaiList:[
				{title:"梨形",id:21},
				{title:"标准",id:31},
				{title:"胖子",id:41},
				{title:"瘦子",id:51},
				{title:"模特",id:61},
			],
			active:1,
			chelianglis:[
				{title:"标准",id:1},
				{title:"偏瘦",id:2},
				{title:"偏胖",id:3},
				{title:"梨形",id:4}
			],
			show:0,
			reqData:{
				wardrode_no:'',
				familyname:'',
				role:[{
					username:'',
					weight:'',
					height:'',
					body_type:'',
					body_arr:[]
				}]
				
			},
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		qiehuanren(index){
			this.show=index;
		},
		quyifu(){
			uni.navigateTo({
				url: "/pages/luru/index",
			})
		},
		quindex(){
			uni.switchTab({
				url: "/pages/index/index",
			})
		},
		tijiao(){
			var that=this;
			var arr=this.reqData.role;
			for(let i=0;i<arr.length;i++){
				if(arr[i].username==""){
					that.$refs.toast.show({model:'warn',label:'请将数据填写完整'})
					return;
				}if(arr[i].weight==""){
					that.$refs.toast.show({model:'warn',label:'请将数据填写完整'})
					return;
				}if(arr[i].height==""){
					that.$refs.toast.show({model:'warn',label:'请将数据填写完整'})
					return;
				}
				if(arr[i].body_arr.length !=0){
					arr[i].body_type=arr[i].body_arr[0].data.id;
				}
			}
			myRequest({
				url: "/api/Family/addFamilyMember",
				method:'post',
				data:that.reqData
			}).then(res => {
				if (res.data.code == 200) {
					uni.setStorageSync("family_id",res.data.data.family_id)
					that.$refs.toast.show({model:'success',label:res.data.msg})
					that.active=4;
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
			
		},
		add(){
			var timestamp = Date.parse(new Date());
			var obj={
				username:'',
				weight:'',
				height:'',
				body_type:'',
				body_arr:[],
				timestamp:timestamp
			}
			this.reqData.role.push(obj);
			this.show=this.reqData.role.length-1;
		},
		shanchu(timestamp){
			var index = this.reqData.role.findIndex((item) => {
			  return item.timestamp == timestamp;
			});
			this.reqData.role.splice(index, 1);
			this.show=this.reqData.role.length-1;
		},
		obTstr2(o){
			if(Array.isArray(o)){
				if(o.length.length===0) return "";
				var name=o[0]?o[0].data.title:'';
				return name
			}
			return ''
		},
		querentm(e){
			this.reqData.wardrode_no=e;
			this.active=2;
		},
		saoma(){
			var that=this;
			uni.scanCode({
				scanType: ['barCode'],
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					that.inputVala=res.result;
					that.show3=true;
				},
				error : function(e) {
					alert("网络异常，请重试");
				}
			})
		},
		chuangjianFun(){
			var that=this;
			if(that.reqData.familyname==""){
				that.$refs.toast.show({model:'warn',label:'请输入家庭名称'})
				return
			}
			that.active=3;
		}
	},
}
</script>

<style lang="scss">
	.zhanshi{
		width: 100%;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 40px;
	}
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .kuang{margin:0 !important;padding: 14px !important;margin-bottom: 40px !important;}
	/deep/ .kuang uni-button{background-color: #303440 !important;}
	.jindu{width: 90%;margin: 0 auto;display: block;}
	.wenzi{width: 94%;margin: 0 auto;}
	.nicheng{width: 130px;height:132px;display: block;margin:0 auto;margin-top: 50px;}
	/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;}
	.zuo image{width:60px;display: block;position: absolute}
	.you{border:1px solid #303030;border-radius: 10px;padding:10px;height: 300px;}
	/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;
	}
	/deep/ .tm--badges{position: absolute;top: 0px !important;right:6px;width: 18px;height: 18px;}
	.logincla{margin-top: 100px;}
	/deep/ .quindex uni-button{background-color: #0A84FF !important;}
	.error{height:18px !important;width: 18px !important;right: 3px !important;top:6px !important}
	
</style>