123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288 |
- <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 mt-30" style="position: relative;" 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>
- <tm-badges icon="icon-times" @click="shanchu(item.timestamp)" v-if="(show==index && index !=0)"></tm-badges>
- </view>
- <view class="flex-center flex-col mt-30" style="position: relative;" 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:'6943819164690',
- 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].id;
- }
- }
- console.log(this.reqData)
- myRequest({
- url: "/api/Family/addFamilyMember",
- method:'post',
- data:that.reqData
- }).then(res => {
- console.log(res.data)
- 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 "";
- return o[0]?.title??""
- }
- return ''
- },
- querentm(e){
- console.log(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;}
- .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>
|