longin

chenyc

2022-10-20 97836fd44abb0d0374f1b0124b57ad70476593f7

longin

 src/App.vue

@@ -13,10 +13,6 @@
    display: grid;
    background-color:#F6FAFF;
}
.fanhui{
    padding-top: 20px;
    width: 100%;
    background: red;
}

</style>


 src/assets/logo.png

 src/assets/pswdLogin.png

 src/assets/yijianLogin.png

 src/main.ts

@@ -5,18 +5,21 @@
// import 'vant/es/toast/style'
// 引入全局样式
import 'vant/lib/index.css'
import { Col, Row,Icon,Button,Field,NavBar  } from 'vant'

import { Button,Form,DatetimePicker,TreeSelect, Field, CellGroup,Tab, Tabs,Popup ,Col, Row ,Icon,Tabbar,RadioGroup, Radio,Dialog,List,
    Switch,Calendar,Collapse,CollapseItem
    ,TabbarItem,Picker,DropdownMenu,Loading, DropdownItem,Image as VanImage,Tag,Rate,NavBar, Divider,Search, DatetimePicker, Checkbox, CheckboxGroup, Uploader,Sidebar,SidebarItem,Stepper,Toast, Step, Steps, Cell } from 'vant'
import { createPinia } from 'pinia'
// mock数据
// import './utils/mock'

const app = createApp(App as any)
app.use(Col)
app.use(Row)
app.use(Icon)
app.use(Button)
app.use(Field)
app.use(NavBar)
app.use(router)
app.use(createPinia())
app.use(Button).use(Form).use(Field).use(CellGroup).use(Tab).use(Tabs).use(Popup).use(Col).use(Row).use(Loading).use(List ).use(Switch)
    .use(TreeSelect).use(CollapseItem).use(Collapse).use(Calendar).use(Icon).use(Tabbar).use(TabbarItem).use(Picker).use(DropdownMenu).use(DropdownItem).use(Tag).use(DatetimePicker).use(Dialog).
    use(VanImage).use(Rate ).use(NavBar).use(Search).use(DatetimePicker).use(RadioGroup).use(Radio).use(Checkbox).use(CheckboxGroup).use(Uploader).use(Sidebar).use(SidebarItem).use(Stepper).use(Toast)
    .use(CollapseItem).use(Collapse).use(Calendar).use(Icon).use(Tabbar).use(TabbarItem).use(Picker).use(DropdownMenu).use(DropdownItem).use(Tag).use(DatetimePicker).use(Dialog).use(Divider).
    use(VanImage).use(Rate ).use(NavBar).use(Search).use(DatetimePicker).use(RadioGroup).use(Radio).use(Checkbox).use(CheckboxGroup).use(Uploader).use(Sidebar).use(SidebarItem).use(Stepper).use(Toast).use(Step).use(Steps).use(Cell)

app.mount('#app')

 src/router/index.ts

@@ -4,6 +4,7 @@
import { cancelRequest } from '@/utils/axios'

const routes: Array<RouteRecordRaw> = [
    { path: '/login', name: 'login', component: () => import('views/login/index.vue'),meta:{title:'登录'}},
    { path: '/', name: 'Home', component: () => import('views/home/index.vue'),meta:{title:'首页'}},
    { path: '/my', name: 'myMine', component: () => import('views/myMine/index.vue'),meta:{title:'我的'}},
    { path: '/paiban', name: 'paiban', component: () => import('views/paiban/index.vue'),meta:{title:'透析排班'}},

 src/stores/userInfo.ts

New file
@@ -0,0 +1,18 @@

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 使用示例一：函数式定义【个人推荐】
export const userInfoStore = defineStore('userInfo', () => {
    const info = ref({
        openid:'',
        headimgurl:'',
        nickname:''
    })
    function setUserInfo(userInfo:{openud:string, headimgurl:string,nickname:string}) {
        info.value.openid=userInfo.openud
        info.value.headimgurl=userInfo.headimgurl
        info.value.nickname=userInfo.nickname
    }

    return { info, setUserInfo }
})

 src/views/home/index.vue

@@ -136,43 +136,6 @@
    const route = useRoute()
    const router=useRouter()
    // const counter = useCounterStore()
    const  loopData0= [
        {
            lanhuBg2:
                'url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng10c918ad8f5eb3b228828f57732dad7ecd28335754916c4012147796e36591d6) 0px 0px no-repeat',
            lanhutext0: '健康趋势',
            lanhutext1: 'Health&nbsp;trends'
        },
        {
            lanhuBg2:
                'url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9dd5bfd8bce302227d8c0ccb89144c1b70b47c2b07da1fcbb144c9347d69e72a) 0px 0px no-repeat',
            lanhutext0: '健康宣教',
            lanhutext1: 'Health&nbsp;Education'
        }
    ]

    const loopData1= [
        {
            lanhuBg1:
                'url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng042226982f8d895d90cdcfefb4ea4846696567d8a40a8e0a1dd0073e7f899480) 100% no-repeat',
            lanhutext0: '检验报告'
        },
        {
            lanhuBg1:
                'url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43a5d2681858b5057217f32705ac557e7fac69348980e05950c034793715775c) 100% no-repeat',
            lanhutext0: '透析排班'
        },
        {
            lanhuBg1:
                'url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5658c304c4e0841738fddace6a4bbb55d801d98a5e769632b0b71ffe48d56937) 100% no-repeat',
            lanhutext0: '透析医嘱'
        },
        {
            lanhuBg1:
                'url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd56bf49c9455a5e530aa3cb0e45df98f9ee00edae6eb83220b2a0d76f6e9b487) 100% no-repeat',
            lanhutext0: '透析记录'
        }
    ]
    const active=ref('home')
    const tabChang=(index:any)=>{
        if (index==='home'){
@@ -185,7 +148,11 @@
        console.log('sss')
        router.push(url)
    }
    const isWechat = () => {
        return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger'
    }
    onMounted(() => {
        if (isWechat()){
        console.log('初始化',route)
        const queryInfo=route.query
        const {code}=queryInfo
@@ -195,6 +162,21 @@
                console.log(re)
            })
        }
            else {
                const appid = 'wx790bd67db6206070' // 微信APPid
                const local = window.location.href
                window.location.href =
                    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                    appid +
                    '&redirect_uri=' +
                    encodeURIComponent(local) +
                    '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'

            }
        } else {
            console.log('不是微信浏览器')
        }

    })
  </script>
  <style scoped lang="css" src="./assets/index.scss" />

 src/views/login/index.vue

New file
@@ -0,0 +1,281 @@
<script lang="ts" setup>
    import { Dialog } from 'vant'
    import { useRouter } from 'vue-router'
    import { ref } from 'vue'
    // import { Session } from '@/utils/storage'
    import { Toast } from 'vant'
    import logo from 'assets/logo.png'
    import shoujiLogin from 'assets/yijianLogin.png'
    import pswdLogin from 'assets/pswdLogin.png'
    const username = ref('')
    const password = ref('')
    const visible=ref(1)
    const seconds=ref(60)
    const loadingBUt=ref(false)
    const router = useRouter()
    const ruleForm2=ref({
        newPassword:'',
        pass:'',
        validateCode:'',
        userPhone:''
    })
    const ruleForm3=ref({
        validateCode:'',
        userPhone:''
    })
    const asyncValidator = (val:any) =>{
        return val===ruleForm2.value.pass
    }
    const onSubmit = (values:any) => {
        console.log('submit', values)
        router.push('/')
        // const str=`user_no=${username.value}&user_password=${password.value}`
        loadingBUt.value=true
        // signIn(str).then((res:any)=>{
        //     Session.set('token', res.data)
        //         router.push('/')
        //     })
        // }).catch(()=>{
        //     loadingBUt.value=false
        // })
    }
    const onSubmit2=(values:any)=>{
        console.log('提交表单',ruleForm2.value)
        console.log(values)
        visible.value=1
        Dialog.alert({
            title: '提示',
            message: '密码重置成功请重新登录',
        }).then(() => {
            // on close
        })
    }
    const onSubmit3=(values:any)=>{
        console.log('提交表单',ruleForm3.value)
        console.log(values)
    }
    const sendCode=()=>{
        if (ruleForm2.value.userPhone===''){
            Toast('手机号码不能为空')
            return
        }
        // sendValidateCode('mobileNo='+ruleForm2.value.userPhone).then(re=>{
        //     console.log(re)
        //     const timer= setInterval(() => {
        //         if (seconds.value > 0) {
        //             seconds.value--
        //         } else {
        //             seconds.value = 60
        //             clearInterval(timer)
        //         }
        //     }, 1000)
        // })
    }
    const wjmm=()=>{
        visible.value=2
        ruleForm2.value.newPassword=''
        ruleForm2.value.pass=''
        ruleForm2.value.userPhone=''
        ruleForm2.value.validateCode=''
    }
    const shoujiLoginfun=()=>{
        visible.value=3
        ruleForm3.value.userPhone=''
        ruleForm3.value.validateCode=''
    }
</script>

<template>
    <div class="login">
        <div class="titlebiaoti">
            <van-image
                fit="cover"
                width="95px"
                height="84px"
                :src="logo"
            />
        </div>
        <div>
            <van-form ref="form1" v-show="visible === 1" @submit="onSubmit" label-width="4em">
                <van-cell-group inset>
                    <van-field
                        v-model="username"
                        name="登录名"
                        label="登录名"
                        placeholder="请输入登录名"
                        :rules="[{ required: true, message: '请输入登录名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密  码"
                        label="密&nbsp&nbsp码"
                        placeholder="6-16位数字或者字母组合"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    >
                        <template #button>
                            <van-button size="small" type="default" @click="wjmm">忘记密码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;text-align:center;">
                    <div class="tss"><van-icon name="circle" /> 登录即视为已经阅读并同意<b style="color: #769AFF;">网站服务条款、法律声明及隐私权政策</b></div>
                    <van-button :loading="loadingBUt" round block type="primary" native-type="submit">
                        登  录
                    </van-button>
                </div>
            </van-form>
            <van-form ref="form2" v-show="visible === 3" @submit="onSubmit3" label-width="80px">
                <van-cell-group inset>
                    <van-field
                        v-model="ruleForm3.userPhone"
                        label="手机号码"
                        placeholder="请输入手机号码"
                        :rules="[{ required: true, message: '请输入手机号码' }]"
                    />
                    <van-field
                        v-model="ruleForm3.validateCode"
                        center
                        clearable
                        label="短信验证码"
                        placeholder="请输入短信验证码"
                        :rules="[{ required: true, message: '请输入短信验证码' }]"
                    >
                        <template #button>
                            <van-button size="small" :disabled="seconds < 60" @click="sendCode" type="primary">{{seconds}}发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;text-align:center;">
                    <div class="tss"><van-icon name="circle" /> 登录即视为已经阅读并同意<b style="color: #769AFF;">网站服务条款、法律声明及隐私权政策</b></div>
                    <van-button :loading="loadingBUt" round block type="primary" native-type="submit">
                        登  录
                    </van-button>
                </div>
            </van-form>
            <van-row class="loginType">
                <div class="toptype">
                    <van-divider
                        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
                    >
                        登录方式
                    </van-divider>
                </div>
            </van-row>
            <van-row>
                <van-col span="12" @click="shoujiLoginfun" class="logintt">
                    <van-image
                        fit="cover"
                        width="42px"
                        height="42px"
                        :src="shoujiLogin"
                    />
                    <div class="loginwenz">
                        手机登录
                    </div>
                </van-col>
                <van-col span="12" @click="visible = 1" class="logintt">
                    <van-image
                        fit="cover"
                        width="42px"
                        height="42px"
                        :src="pswdLogin"
                    />
                    <div class="loginwenz">密码登录</div>
                </van-col>
            </van-row>
        </div>
        <transition name="van-slide-up">
            <div v-show="visible === 2">
                <van-form @submit="onSubmit2" label-width="80px">
                    <van-cell-group inset>
                        <van-field
                            v-model="ruleForm2.userPhone"
                            label="手机号码"
                            placeholder="请输入手机号码"
                            :rules="[{ required: true, message: '请输入手机号码' }]"
                        />
                        <van-field
                            v-model="ruleForm2.validateCode"
                            center
                            clearable
                            label="短信验证码"
                            placeholder="请输入短信验证码"
                            :rules="[{ required: true, message: '请输入短信验证码' }]"
                        >
                            <template #button>
                                <van-button size="small" :disabled="seconds < 60" @click="sendCode" type="primary">{{seconds}}发送验证码</van-button>
                            </template>
                        </van-field>
                        <van-field
                            v-model="ruleForm2.pass"
                            type="password"
                            label="密&nbsp&nbsp码"
                            placeholder="6-16位数字或者字母组合"
                            :rules="[{ required: true, message: '请填写密码' }]"
                        />
                        <van-field
                            v-model="ruleForm2.newPassword"
                            type="password"
                            label="确认密码"
                            placeholder="6-16位数字或者字母组合"
                            :rules="[{ validator: asyncValidator, message: '密码输入不一致' }]"
                        />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button :loading="loadingBUt" round block type="primary" native-type="submit">
                            确认
                        </van-button>
                    </div>
                    <div style="text-align: right; padding-right: 20px;">
                        <span type="primary" @click="visible = 1" native-type="submit">
                            返回到登录
                        </span>
                    </div>
                </van-form>
            </div>
        </transition>

    </div>
</template>
<style lang="scss">
.login{
    width: 100%;
    min-height: 900px;
}
.logintt{
    text-align: center;
}
.loginwenz{
    font-size: 12px;
    font-weight: 400;
    color: #AAAAAA;
}
.loginType{
    width: 100%;
    margin-top: 120px;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    color: #AAAAAA;
    // background: black;
    .toptype{
        width: 100%;
    }
}
.titlebiaoti{
    padding-top: 70px;
    text-align:center;
    padding-left: 30px;
    // border: 1px solid black;
    font-size: 15px;
    padding-bottom: 70px;
}
.tss{
    font-size: 10px;
    font-weight: 400;
    color: #AAAAAA;
    height: 50px;
    // line-height: 50px;
}
</style>