<template> <div> <div class="contentBox " > <img class="logo" :src="imgUrl" alt=""> <h3>宝宝档案</h3> <div class="inputBox"> <van-radio-group v-model="sex"> <van-radio class='boy' @click="changeActi(1)" name="1"> <span :class="{activity:activity==1}">男</span> <img slot="icon" :src="activity==1 ? bbdaIcon.boy2 : bbdaIcon.boy1" > </van-radio> <van-radio class="girl" @click="changeActi(2)" name="2"> <span :class="{activity:activity==2}">女</span> <img slot="icon" :src="activity==2 ? bbdaIcon.girl2 : bbdaIcon.girl1" > </van-radio> </van-radio-group> </div> <div class="inputBox"> <div class="subName">宝宝昵称</div> <input type="text" @blur="fun" @focus="focus" v-model='baby_name' placeholder="请输入宝宝昵称" > </div> <div class="inputBox"> <div class="subName">宝宝生日</div> <div @click="dateShow=true" class="btnShadow"> </div> <input type="text" v-model='birthday' placeholder="请选择生日" > <!-- <span class="birthday" v-if="birthday&&birthday!='0000-00-00'" @click="dateShow=true">{{birthday}}</!--> </div> <div class="btn" ref="btn" @click="putBabyInfo">确定</div> </div> <van-popup v-model="dateShow" position="bottom"> <van-datetime-picker @confirm="dateConfirm" @cancel='dateShow=false' v-model="currentDate" type="date"/> </van-popup> </div> </template> <script> import { bannerListApi, putBabyInfoApi, getUserDetailApi } from "../../service/api"; import imgUrl from "../../assets/bbda.png"; import {bbdaIcon} from "../../util/imgUrl"; import { DatetimePicker,Popup,RadioGroup, Radio, Toast } from 'vant'; export default { name: "bbda", components:{ [DatetimePicker.name]:DatetimePicker, [Popup.name]:Popup, [RadioGroup.name]:RadioGroup, [Radio.name]:Radio, }, data(){ return{ medList:[], imgUrl:imgUrl, dateShow:false, currentDate: new Date(), birthday:"", sex:'1', baby_name:"", userDesc:{}, bbdaIcon:bbdaIcon, activity:'1', keyUp:false } }, watch: { keyUp() { setTimeout(() => { if (!this.keyUp) { console.log(this.keyUp, 65); document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } }, 100); } }, created() { this.$sa.track('ViewBabypage',{ }); this.userDesc=JSON.parse(localStorage.getItem('userDesc')) this.imgUrl = imgUrl if(this.userDesc.birthday=='0000-00-00'){ this.birthday = null }else{ this.birthday = this.userDesc.birthday this.currentDate = new Date(this.birthday) } if(this.userDesc.baby_name){ this.baby_name = this.userDesc.baby_name } this.userDesc.sex? this.sex = this.userDesc.sex.toString():this.sex='1' this.activity = this.sex // console.log(this.$route.params.index) // this.getBannerListApi(); }, methods:{ focus() { this.keyUp = true; console.log("focus"); }, fun() { this.keyUp = false; console.log("fun"); }, changeActi(name){ // console.log(name) this.activity = name }, putBabyInfo(){ // console.log(this.$common.dateFmt(new Date(this.currentDate),"yyyy/MM/dd")) this.$sa.quick('trackHeatMap',this.$refs.btn) if(this.baby_name==''){ Toast('昵称不能为空') return } let json = { birthday:this.$common.dateFmt(new Date(this.currentDate),"yyyy/MM/dd"), sex:this.sex, baby_name:this.baby_name } putBabyInfoApi(json).then(res =>{ Toast('保存成功') getUserDetailApi().then(res=>{ localStorage.setItem('userDesc',JSON.stringify(res)); if(this.$route.params.index==1){ this.$router.push({ name:"index" }) }else{ this.$router.push({ name:"mine" }) } }) }) }, goMed(index){ this.showObj.audioIndex = index; this.showObj.show = true }, dateConfirm(val){ this.dateShow = false this.birthday = this.currentDate.toLocaleDateString() } } } </script> <style scoped lang="less"> @import "../../util/public"; *{margin: 0;} .child-view{background: white;} .contentBox{ padding: 30*@toVw 59*@toVw; text-align: center; .logo{width: 100*@toVw;} } .van-popup{ width: 100%; .van-picker{width: 100%;} } .btn{ width: 156*@toVw;height: 50*@toVw;background:#40A9FF;color: white;line-height:47*@toVw; border-radius: 4px;border-radius:23*@toVw; margin: 97*@toVw auto 0; } .inputBox{text-align:left; text-align: center; width: 258*@toVw; margin-top: 15*@toVw; position: relative; // line-height: 48*@toVw; .subName{color: #666666;} input{border: none;height: 40*@toVw;width: 258*@toVw;text-align: center;margin-top: 10*@toVw; border-radius: 19*@toVw; background: #F3F3F3;} .van-radio-group{height: 40*@toVw; display: flex;justify-content: space-between; span{color: #999999;} } .van-radio{display: inline-block; width: 100*@toVw; height: 38*@toVw; line-height: 38*@toVw; border-radius: 19*@toVw; background: #F3F3F3; } .girl{img{width: 29*@toVw;}} .boy{img{width: 24*@toVw;}} .girl .activity{color: #FBBCD8;} .boy .activity{color: #4A90E2;} .birthday{height: 40*@toVw;width: 258*@toVw;border-radius: 19*@toVw;background: #F3F3F3;display: block;line-height: 40*@toVw;margin-top: 10*@toVw;} .btnShadow{position: absolute;width: 258*@toVw;height: 60*@toVw;top:24*@toVw;} } </style>