|
@@ -1,27 +1,99 @@
|
|
|
<template>
|
|
|
<view :style="{ minHeight: sys.windowHeight + 'px' }"
|
|
|
:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
- <tm-message ref="toast"></tm-message>
|
|
|
- <tm-menubars title="创建家庭" :shadow="0" :showback="false"></tm-menubars>
|
|
|
- <tm-sheet :shadow="24" v-if="active==1">
|
|
|
- <tm-steps model="number" color="bg-gradient-blue-accent" activeFontColor="blue" line-color="bg-gradient-blue-accent" v-model="active" :list="list"></tm-steps>
|
|
|
- <view class="mt-20">
|
|
|
- <text class="text-primary text-size-s">扫柜体上的二维码和衣柜绑定</text>
|
|
|
- </view>
|
|
|
- <image block class="zhanshi" mode="widthFix" src="https://picsum.photos/300?k=1"></image>
|
|
|
- <tm-button theme="bg-gradient-blue-accent" @click="saoma()" block>扫二维码</tm-button>
|
|
|
- </tm-sheet>
|
|
|
- <tm-sheet :shadow="24" v-if="active==2">
|
|
|
- <view class="flex fulled-height" >
|
|
|
- <view style="width: 80px;">
|
|
|
- 111
|
|
|
+ <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="name" 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 mt-30" style="position: relative;" v-for="(item,index) in renList">
|
|
|
+ <image block mode="widthFix" src="/static/img/53.png"></image>
|
|
|
+ <tm-badges icon="icon-times" @click="shanchu(item.timestamp)" v-if="index != 0"></tm-badges>
|
|
|
+ </view>
|
|
|
+ <view class="flex-center flex-col mt-30" style="position: relative;" v-if="renList.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); ">
|
|
|
+ <tm-input :required="true" title="用户名" v-model="reqData.username" placeholder="你想叫自己什么" align="right"></tm-input>
|
|
|
+ <tm-input :required="true" title="身高(cm)" v-model="reqData.height" align="right"></tm-input>
|
|
|
+ <tm-input :required="true" title="体重(kg)" v-model="reqData.weight" align="right"></tm-input>
|
|
|
+ <tm-pickers class="tan" :default-value.sync="reqData.shencai" rang-key="title" :list="chelianglis">
|
|
|
+ <tm-input name="shencai" title="身材" placeholder="请选择车型" disabled :value="obTstr2(reqData.shencai)" 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 style="width:calc(100% - 160rpx);">
|
|
|
- 222
|
|
|
+ <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" :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>
|
|
|
- </view>
|
|
|
- <tm-button theme="bg-gradient-blue-accent" @click="saoma()" block>下一步</tm-button>
|
|
|
- </tm-sheet>
|
|
|
+ </tm-sheet>
|
|
|
+ </div>
|
|
|
+ <!-- 弹出层消息 -->
|
|
|
+ <tm-message ref="toast"></tm-message>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -29,15 +101,31 @@ import{myRequest} from '@/api/request.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- active:1,
|
|
|
- list:['创建家庭','创建角色','创建成功'],
|
|
|
- list2:[
|
|
|
- {text:'苏州'},
|
|
|
- {text:'北京'},
|
|
|
- {text:'广东'},
|
|
|
- {text:'江西',dot:8},
|
|
|
- {text:'深圳'},
|
|
|
+ shencaiList:[
|
|
|
+ {title:"梨形",id:21},
|
|
|
+ {title:"标准",id:31},
|
|
|
+ {title:"胖子",id:41},
|
|
|
+ {title:"瘦子",id:51},
|
|
|
+ {title:"模特",id:61},
|
|
|
+ ],
|
|
|
+ shenxing:'',
|
|
|
+ active:3,
|
|
|
+ name:'',
|
|
|
+ val_1:'',
|
|
|
+ chelianglis:[
|
|
|
+ {title:"标准",id:21},
|
|
|
+ {title:"偏瘦",id:31},
|
|
|
+ {title:"偏胖",id:41},
|
|
|
+ {title:"梨形",id:51},
|
|
|
+ {title:"S型",id:61},
|
|
|
],
|
|
|
+ reqData:{
|
|
|
+ username:'',
|
|
|
+ height:'',
|
|
|
+ weight:'',
|
|
|
+ shencai:[]
|
|
|
+ },
|
|
|
+ renList:[]
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
@@ -45,12 +133,47 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.sys = uni.getSystemInfoSync();
|
|
|
+ this.add()
|
|
|
},
|
|
|
methods: {
|
|
|
+ quindex(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/index/index",
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tijiao(){
|
|
|
+ // console.log(this.renList)
|
|
|
+ // for(let i=0;i<this.renList.length;i++){
|
|
|
+ // if(this.renList[i].){}
|
|
|
+ // }
|
|
|
+ // this.active=4;
|
|
|
+ },
|
|
|
+ add(){
|
|
|
+ var timestamp = Date.parse(new Date());
|
|
|
+ var obj={
|
|
|
+ username:'',
|
|
|
+ height:'',
|
|
|
+ weight:'',
|
|
|
+ shencai:[],
|
|
|
+ timestamp:timestamp
|
|
|
+ }
|
|
|
+ this.renList.push(obj)
|
|
|
+ },
|
|
|
+ shanchu(timestamp){
|
|
|
+ var index = this.renList.findIndex((item) => {
|
|
|
+ return item.timestamp == timestamp;
|
|
|
+ });
|
|
|
+ this.renList.splice(index, 1);
|
|
|
+ },
|
|
|
+ obTstr2(o){
|
|
|
+ if(Array.isArray(o)){
|
|
|
+ if(o.length.length===0) return "";
|
|
|
+ return o[0]?.title??""
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
saoma(){
|
|
|
- console.log("111")
|
|
|
var that=this;
|
|
|
- that.active=2;
|
|
|
uni.scanCode({
|
|
|
scanType: ['barCode'],
|
|
|
success: function (res) {
|
|
@@ -63,6 +186,14 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ chuangjianFun(){
|
|
|
+ var that=this;
|
|
|
+ if(that.name==""){
|
|
|
+ that.$refs.toast.show({model:'warn',label:'请输入家庭名称'})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ that.active=3;
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -77,4 +208,32 @@ export default {
|
|
|
/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;}
|
|
|
+ .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;right:6px}
|
|
|
+ .logincla{margin-top: 100px;}
|
|
|
+ /deep/ .quindex uni-button{background-color: #0A84FF !important;}
|
|
|
</style>
|