第二次提交

mh-two-thousand-and-two

2024-03-29 d27fbd63d7840787d7f3ca5333b6e24dc3a860d4

 pages/index/index.vue

@@ -1,153 +1,40 @@
<template>
   <view class="container flex flex-center" style="align-items: flex-start;">
      <view class="repository relative" style="margin-top: 38rpx;">
         <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;">
            <view class="r-top flex flex-center" style="width: 100%;justify-content: space-around;">
               <view class="" style="width: 5%;"></view>
               <view class="" ref="Rtop">
                  <!-- <uni-icons type="heart-filled" size="26" style="margin-right: 18rpx;"></uni-icons> -->
                  <text class="login"></text>
                  <text
                     style="font-size: 72rpx;font-weight: normal;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
      <view class="repository relative">
         <view class="flex Ttop flex-column" style="width: 100%;">
            <view class="flex" style="width: 100%;">
               <view class="" style="width: 2.5rem;"></view>
               <view class=" flex flex-center flex-wrap" style="width: 100%; flex-direction: column;">
                  <view class=""></view>
                  <view class="" ref="Rtop">
                     <text class="login"></text>
                     <text
                        style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
                  </view>
               </view>
               <view class="flex" >
                  <view v-if="!loginTrue" v-for="item in 3" :key="item" :class="'s'+item" class="ss1" style="margin: 0 10rpx;">
               <view class="flex" style="height: .5rem;">
                  <view @click="iconClick(item)" v-for="item in 3" :key="item" :class="'s'+item" class="ss1" style="margin-right:  .3rem;">
                  </view>
               </view>
            </view>
            <view v-if="!loginTrue" class="rbottom " :style="{width:Rtop1+'px'}">
               <uni-easyinput class="search1 uni-mt-12" suffixIcon="search" v-model="value" placeholder="按照姓名搜索"
                  @iconClick="iconClick"></uni-easyinput>

            <!-- 高级搜索 -->
            <view v-if="isSearchTrue" style="margin: .35rem 0 .16rem 0; height: .52rem;">
               <advancedSearch @onSearch="onSearch" :isAvancedTrue="false" :isSearchTrue="false" />
            </view>
         </view>
         <view class="Bbottom relative">
         <view class="Bbottom ">
            <!-- 选项卡 -->
            <ul v-if="!loginTrue" class="secretary  flex relative">
               <li v-for="(item,index) in listData" :key="item">
            <ul class="secretary  flex ">
               <li @click="listDataClick(item)" v-for="(item,index) in listData" :key="index">
                  <span class="font-family"
                     style="font-weight: 700;color: #2C2C2C; width: 36px;display: inline-block; font-size: 45rpx;overflow: hidden;height: 80%;line-height: 1.5;">{{item.name}}</span>
                     style="font-weight: 700;color: #2C2C2C; width: 36px;display: inline-block; font-size: .32rem;overflow: hidden;height: 80%;line-height: 1.5;">{{item.name}}</span>
                  <view class="flex flex-content"
                     style="width: 80rpx;height: 80rpx;border-radius: 50%;background-color: #244A7B;">
                     style="width: .5rem;height: .5rem;border-radius: 50%;background-color: #244A7B;">
                     <image style="width: 40%;height: 20%;" src="@/static/image/eResize.png" mode=""></image>
                  </view> 
                  </view>
               </li>
            </ul>
            <!-- 注册用户 v-if="isRegister"-->
            <el-card  v-if="isRegister" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;" >
               <view class="" style="display: flex; justify-content: space-between;">
                  <h2 style="color: #244a7b;padding-bottom: 20rpx;">用户注册</h2>
                  <view class="" @click="isRegister= !isRegister,isLogin=!isLogin" style="cursor: pointer;font-size: 20rpx;color: #244a7b;">
                     已有账号？返回登录
                  </view>
               </view>
               <el-form :hide-required-asterisk="true" ref="formLogin" label-position="left" :rules="rules"
                  label-width="80px" :model="registerData">
                  <el-form-item label="登录账号" prop="loginID">
                     <el-input v-model="registerData.loginID"></el-input>
                  </el-form-item>
                  <el-form-item label="登录密码" prop="pass">
                     <el-input type="password" v-model="registerData.pass"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="checkPass">
                     <el-input type="password" v-model="registerData.checkPass"></el-input>
                  </el-form-item>
                  <el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
                     <el-input v-model="registerData.cellphoneORmailbox"></el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="verifyCode">
                     <el-input v-model="registerData.verifyCode"></el-input>
                  </el-form-item>
                  <el-form-item class="btn">
                     <el-button class="font-family"
                        style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
                        size="medium" @click="Login1('formLogin')">登录</el-button>
                  </el-form-item>
                  <view class=""
                     style="font-size: 17rpx;color: #9E9E9E;text-align: center;line-height: 1;margin-bottom: 20rpx;">
                     用户注册即代表同意《服务条款》和《用户隐私保护和个人信息条款》</view>
               </el-form>
            </el-card>
            <!-- 用户登录  v-if="isLogin"-->
            <el-card  v-if="isLogin" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
               <view class="" style="display: flex; justify-content: space-between;">
                  <h2 style="color: #244a7b;padding-bottom: 20rpx;">用户登录</h2>
                  <view class=""> </view>
               </view>
               <el-form :hide-required-asterisk="true" ref="formLogin1" label-position="top" label-width="80px" :rules="rules1"
                  :model="loginData">
                  <el-form-item label="登录账号" prop="loginID">
                     <el-input v-model="loginData.loginID"></el-input>
                  </el-form-item>
                  <el-form-item label="登录密码" prop="pass">
                     <el-input v-model="loginData.pass"></el-input>
                  </el-form-item>
                  <el-form-item class="btn">
                     <el-button class="font-family"
                        style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
                        size="medium" @click="Login('formLogin1')">登录</el-button>
                  </el-form-item>
                  <view class="" style="display: flex;font-size: 20rpx;">
                     <view class="" style="display: inline-block;cursor: pointer;" @click="forgetPass">忘记密码
                     </view>
                     <view class="" style="display: inline-block;margin: 0 20rpx;"> | </view>
                     <view class="" style="display: inline-block;cursor: pointer;" @click="quickRegister">快速注册
                     </view>
                  </view>
               </el-form>
            </el-card>
            <!-- 重置密码 -->
            <el-card v-if="isResetPass" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
               <view class="" style="display: flex; justify-content: space-between;">
                  <h2 style="color: #244a7b;padding-bottom: 20rpx;">重置密码 </h2>
                  <view class=""> </view>
               </view>
               <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="left" label-width="80px" :rules="rules"
                  :model="resetDataPass">
                  <el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
                     <el-input v-model="resetDataPass.cellphoneORmailbox"></el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="verifyCode">
                     <el-input v-model="resetDataPass.verifyCode"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="pass">
                     <el-input v-model="resetDataPass.newPass"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="checkPass">
                     <el-input v-model="resetDataPass.checkPass"></el-input>
                  </el-form-item>
                  <el-form-item class="btn">
                     <el-button class="font-family"
                        style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
                        size="medium" @click="Login2('formLogin2')">确定</el-button>
                  </el-form-item>
               </el-form>
            </el-card>
            <!-- 修改密码 -->
            <!-- <el-card style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
               <view class="" style="display: flex; justify-content: space-between;">
                  <h2 style="color: #244a7b;padding-bottom: 20rpx;">修改密码  </h2>
                  <view class="" > </view>
               </view>
               <el-form :hide-required-asterisk="true" ref="formLogin" label-position="left" label-width="80px" :rules="rules" :model="amendDataPass">
                 <el-form-item label="登录账号" prop="loginID">
                   <el-input v-model="amendDataPass.loginID"></el-input>
                 </el-form-item> 
                 <el-form-item label="原密码" prop="pass">
                   <el-input v-model="amendDataPass.originalPass"></el-input>
                 </el-form-item>
                 <el-form-item label="新密码" prop="pass">
                   <el-input v-model="amendDataPass.newPass"></el-input>
                 </el-form-item>
                 <el-form-item label="确认新密码" prop="checkPass">
                   <el-input v-model="amendDataPass.checkPass"></el-input>
                 </el-form-item>
                 <el-form-item class="btn">
                    <el-button class="font-family"
                       style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
                       size="medium" @click="Login('formLogin')">确定</el-button>
                 </el-form-item>
               </el-form> 
            </el-card> -->
         </view>
      </view>
      <view class="hua"></view>
@@ -155,18 +42,8 @@
      <view class="fff"></view>
      <!-- 底部花的背景图右侧 -->
      <view class="rrr"></view>
      <view class="BottomColumn flex flex-center">
         <view class="Bbar flex">
            <img style="display: block;margin-right: 20rpx;" src="@/static/image/logo.png" alt="" srcset="" />
            <view class="font-family">
               <view class="">
                  92017中国中医科学院中医药信息研究所版权所有京ICP备业方安大业方业方
               </view>
               <view class="">地址:北京市东城区东直门内南小街16号邮编:100700
                  电话:8610-64089611Email:tcmbase@126.com</view>
            </view>
         </view>
      </view>

      <Footer1 />
   </view>
</template>

@@ -174,109 +51,14 @@
   import {
      nextTick
   } from "vue";
   import Footer1 from '@/components/footer/footer.vue'
   export default {
      data() {
         // 密码
         var validatePass = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请输入密码'));
            } else {
               if (this.registerData.checkPass !== '') {
                  this.$nextTick(() => {
                     this.$refs.formLogin.validateField('checkPass');
                  });
               }
               callback();
            }
         };
         // 确认密码
         var validatePass2 = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请再次输入密码'));
            } else if (value !== this.registerData.pass) {
               callback(new Error('两次输入密码不一致!'));
            } else {
               callback();
            }
         };
         return {
            // 用户注册
            isRegister: false,
            // 用户登录
            isLogin: true,
            // 修改密码
            isAmendPass: false,
            // 重置密码
            isResetPass: false,
            // 注册用户账号的校验
            rules: {
               loginID: [{
                  required: true,
                  message: '请输入登录账号',
                  trigger: 'blur'
               }],
               pass: [{
                     required: true,
                     message: '请输入密码',
                     trigger: 'blur'
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '密码长度在 6 到 12 个字符',
                     trigger: 'blur'
                  },
                  {
                     validator: validatePass,
                     trigger: 'blur'
                  }
               ],
               checkPass: [{
                  validator: validatePass2,
                  trigger: 'blur'
               }],
               cellphoneORmailbox: [{
                     required: true,
                     message: '请输入邮箱地址',
                     trigger: 'blur'
                  },
                  {
                     type: 'email',
                     message: '请输入正确的邮箱地址',
                     trigger: ['blur', 'change']
                  }
               ],
               verifyCode: [{
                     required: true,
                     message: '请输入验证码',
                     trigger: 'blur'
                  },
                  {
                     validator: (rule, value, callback) => this.validateVerificationCode(rule, value, callback),
                     trigger: 'blur'
                  }
               ]
            },
            rules1: {
               loginID: [{
                  required: true,
                  message: '请输入登录账号',
                  trigger: 'blur'
               }],
               pass: [{
                     required: true,
                     message: '请输入密码',
                     trigger: 'blur'
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '密码长度在 6 到 12 个字符',
                     trigger: 'blur'
                  }
               ],
            },
				
      components: {
         Footer1
      },
      data() {return {
         // 搜索的显示
            isSearchTrue:true,
            // 登录注册框
            loginTrue: true,
            Rtop1: 0,
@@ -342,18 +124,42 @@
         this.getElementWidth();
      },
      methods: {
         // 忘记密码
         forgetPass() {
            this.isLogin = !this.isLogin
            this.isResetPass = !this.isResetPass
            console.log('忘记密码');
         onSearch(val){
            uni.navigateTo({
               url:'/pages/knowledgeBase/knowledgeBase?name='+val
            })
            console.log('vv',val);
         },
         // 快速注册
         quickRegister() {
            this.isLogin = !this.isLogin
            this.isRegister = !this.isRegister
            console.log('快速注册');
         // 列表项跳转
         listDataClick(item) {
            console.log(item);
            // 在当前页面设置全局变量
            // uni.setStorageSync('globalData', { id: 123, name: 'example' });
            if (item.id == 1) {
               uni.navigateTo({
                  url: '/pages/repository/repository?id=' + item.id
               })
            } else if (item.id == 2) {
               console.log(item.name);
               // uni.navigateTo({
               //    url:'/pages/repository/repository?id='+item.id
               // })
            } else if (item.id == 3) {
               uni.navigateTo({
                  url: '/pages/dataDisplay/dataDisplay?id=' + item.id
               })
            } else if (item.id == 4) {
               uni.navigateTo({
                  url: '/pages/territory/territory?id=' + item.id
               })
            } else if (item.id == 5) {
               uni.navigateTo({
                  url: '/pages/TcmSystem/TcmSystem?id=' + item.id
               })
            }

         },
			
         // 验证码校验
         validateVerificationCode(rule, value, callback) {
            if (value !== '123456') {
@@ -370,49 +176,64 @@
               console.log('Element width:', width);
            })
         },
         // 用户登录
         Login(formName) {
            console.log('用户登录的登录按钮');
            this.isLogin=!this.isLogin
            this.loginTrue=!this.loginTrue
            this.$refs[formName].validate((valid) => {
               if (valid) {
                  alert('submit!成功');
               } else {
                  console.log('error submit!!失败');
                  return false;
               }
            });
         },
         // 用户注册
         Login1(formName) {
            console.log('用户注册的登录按钮');
            this.$refs[formName].validate((valid) => {
               if (valid) {
                  alert('submit!成功');
               } else {
                  console.log('error submit!!失败');
                  return false;
               }
            });
         },
         // 忘记密码
         Login2(formName) {
            console.log('忘记密码的登录按钮');
            this.$refs[formName].validate((valid) => {
               if (valid) {
                  alert('submit!成功');
               } else {
                  console.log('error submit!!失败');
                  return false;
               }
            });
         iconClick(index){
            console.log(index);
            // 搜索的显示
            if(index==1){
               this.isSearchTrue = !this.isSearchTrue
            }
         }
      }
   }
</script>

<style scoped>
   /*
   在屏幕宽度超过 1440px 时的样式设置 */
   @media screen and (min-width: 1441px) {
      ::v-deep .el-card {
         top: 60% !important;
      }

      .BottomColumn {
         padding: .10rem 0;
      }
      .Ttop{
         margin-bottom: .6rem !important;
      }
      .secretary{
         li{
            height: 4.5rem !important;
         }
      }
      .LoginTop {
         margin-bottom: .17rem !important;
      }

      .btn ::v-deep .el-button {
         margin-top: 0.1rem !important;
         font-size: 0.2rem !important;
         width: 100%;
         padding: 0.12rem !important;
      }

      .LoginBg {
         height: .3rem !important;
      }

      .hua {
         height: 4rem !important;
      }

      .fff {
         height: 3.5rem !important;
      }

      .rrr {
         height: 2.5rem !important;
      }
   }

   .btn>>>.el-form-item__content {
      margin-left: 0 !important;
   }
@@ -454,22 +275,23 @@
   .ss1 {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 40rpx;
      height: 40rpx;
      width: .34rem;
      height: .34rem;
      background-size: 100% 100%;
   }

   .s1 {
      background-image: url(@/static/image/search.png);
      background-image: url(@/static/image/search.svg);

   }

   .s2 {
      background-image: url(@/static/image/question.png);
      background-image: url(@/static/image/profile.svg);
   }

   .s3 {
      background-image: url(@/static/image/question.png);
      background-image: url(@/static/image/quote.svg);
      margin-right: .59rem !important;
   }

   .container {
@@ -481,15 +303,16 @@

      .repository {
         width: 100% !important;
         margin-top: 19px;
         height: 68%;
         /* margin-top: 19px; */
         /* height: 68%; */
         display: flex;
         flex-direction: column;
         justify-content: space-around;
         align-items: center;

         .Ttop {
            /* width: 500rpx; */
            margin: -100px 0 40px 0;
            margin-top: .38rem;
            margin-bottom: 1.22rem;
         }

         .r-top {
@@ -512,18 +335,18 @@

   .rrr {
      position: absolute;
      right: 180rpx;
      bottom: 120.5rpx;
      width: 255rpx;
      height: 350.5rpx;
      right: .53rem;
      bottom: .36rem;
      width: 2.5rem;
      height: 3.07rem;
      opacity: 1;
      background: url(@/static/image/bg4.png);
      background-size: 100% 100%;
   }

   .hua {
      width: 95%;
      height: 60%;
      width: 13.81rem;
      height: 5.965rem;
      position: absolute;
      background: url(@/static/image/bg3.png) no-repeat 0 0;
      background-size: 100% 100%;
@@ -533,10 +356,10 @@
   .fff {
      background: url(@/static/image/bg2.png) no-repeat 0 0;
      background-size: 100% 100%;
      width: 400rpx;
      height: 600rpx;
      width: 2.74rem;
      height: 4.52rem;
      position: fixed;
      bottom: 130rpx;
      bottom: 0;
      z-index: 9999999999999;
      left: 0;
   }
@@ -548,54 +371,34 @@


   .secretary {
      width: 1300rpx !important;
      height: 50rpx;
      /* width: 1300rpx !important; */
      /* height: 50rpx; */
      /* height: 80%; */
      /* flex-wrap: wrap; */
      padding: 0 20px;
      text-align: center;




      li {
         background-color: #fff;
         color: black;
         height: 600rpx;
         width: 1.6rem;
         height: 4.8rem;
         display: flex;
         justify-content: space-between;
         justify-content: center;
         flex-direction: column;
         align-items: center;
         border: 1rpx solid #fff;
         padding: 50rpx 65rpx;
         /*          padding: 58rpx 128rpx 88rpx; */
         text-align: center;
         background: #EBF4FF;
         font-weight: 600;
         margin: 0 .21rem;
      }
   }

   .BottomColumn {
      position: fixed;
      left: 0px;
      bottom: 0px;
      padding: 20rpx 0;
      width: 100%;
      background-color: #e6eff8;
      font-size: 10px;
      color: #000;

      .Bbar {
         img {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
         }
      }
   }

   .Bbottom {
   /*    .Bbottom {
      display: flex;
      justify-content: center;

   }
	
   } */
</style>