jiangping
2023-08-28 cc6980b59225459f47f88b48bf4271e52de347c8
minipro_standard/pages/index/index.vue
@@ -1,149 +1,211 @@
<template>
   <view class="content">
      <view class="p40 nav bbox">
         <view class="">合肥市智改数转诊断服务平台</view>
         <view class="">欢迎登录</view>
      </view>
      <view class="p40 mt30">
         <u--input
            placeholder="请输入账号"
            prefixIcon="account"
            clearable
            v-model="form.account"
            prefixIconStyle="font-size: 40rpx;color: #AAAAAA"
         ></u--input>
         <view class="p20"></view>
         <u--input
            placeholder="请输入密码"
            prefixIcon="lock"
            password
            clearable
            v-model="form.password"
            prefixIconStyle="font-size: 40rpx;color: #AAAAAA"
         ></u--input>
         <view class="ptb50"></view>
         <u-button
            :loading="logining"
            type="primary"
            color="#216EEE"
            text="登录"
            size="large"
            @click="loginAction"
         ></u-button>
      </view>
   <view class="index">
      <!-- <web-view v-if="show" @onPostMessage="onMessage" :src="'https://dmtest.ahapp.net/doumeeplant_h5/#/appletLogin?code=' + code"></web-view> -->
      <!-- {{$store.state.statusbarHeight}} -->
      
      <u-sticky>
         <view class="plr50 pb30 nav-style">
            <view
               :style="{paddingTop: `${statusbarHeight}px`, height: `${navHeight}px`, lineHeight:`${navHeight}px`, textAlign: 'center'}">
               待办</view>
            <view class="cY">
               <u-search placeholder="搜索关键字" bgColor="#f7f7f7" :showAction="false" @search="scrolltoupper"
                  shape="square" v-model="searchForm.name"></u-search>
               <image src="../../static/filter@2x.png" class="img48 ml20" @click="filterAction" mode=""></image>
            </view>
            <view class="cY mt30">
               <view class="sbtn rd8" :class="searchForm.type==0?'sbtn_green':'sbtn_black_rim'"
                  @click="selectType(0)">待办</view>
               <view class="sbtn rd8 ml20" :class="searchForm.type==1?'sbtn_green':'sbtn_black_rim'"
                  @click="selectType(1)">已办</view>
            </view>
         </view>
      </u-sticky>
      <u-list :showScrollbar="false" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper"
         :height="windowHeight - (statusbarHeight + navHeight + 120) + 'px'">
         <u-list-item v-for="(item, index) in projectList" :key="index">
            <view class="box_list">
               <view class="box_list_item" @click="jump(item)">
                  <view class="box_list_item_icon">
                     <image src="../../static/daiban_ic_daiban@2x.png" mode=""></image>
                  </view>
                  <view class="box_list_item_nr">
                     <view class="box_list_item_nr_top">
                        <span>{{item.title}}</span>
                        <span>{{item.createTime}}</span>
                     </view>
                     <view class="box_list_item_nr_bottom">
                        {{item.content}}
                     </view>
                  </view>
               </view>
            </view>
         </u-list-item>
      </u-list>
      <myTabbar :index="0" />
   </view>
</template>
<script>
   import { coustomLogin, wxEmpower } from '@/util/api/index'
<script>
   import myTabbar from "@/components/myTabber.vue"
   import {
      mapState
   } from 'vuex'
   export default {
      components: {
         myTabbar
      },
      data() {
         return {
            form: {
               account: '',
               password: '',
            },
            logining: false,
            openId: ''
            code: '',
            windowHeight: '',
            show: false,
            searchForm: {
               name: '',
               type: 0
            },
            projectList: [
               {title: '212132', createTime: '2023-08-28', content: 'asdsadsax手打大萨达的啊实打as'},
               {title: '212132', createTime: '2023-08-28', content: 'asdsadsax手打大萨达的啊实打as'},
               {title: '212132', createTime: '2023-08-28', content: 'asdsadsax手打大萨达的啊实打as'},
               {title: '212132', createTime: '2023-08-28', content: 'asdsadsax手打大萨达的啊实打as'},
            ]
         }
      },
      onLoad() {
         uni.login({
            success: data => {
               this.wxLogin(data.code)
            },
            fail: err => {
               uni.$u.toast(err)
            }
         })
      },
      computed: {
         ...mapState(['statusbarHeight', 'navHeight']),
      },
      onLoad() {
         uni.getSystemInfo({
            success: res => {
               this.windowHeight = res.windowHeight
            }
         })
         var that = this
         uni.login({
            provider: 'weixin',
            success: function(loginRes) {
               // console.log(loginRes);
               that.code = loginRes.code
               that.show = true
            }
         });
      },
      methods: {
         loginAction() {
            if (!this.form.account || !this.form.password) {
               uni.$u.toast('账号或者密码不能为空')
            }
            this.logining = true
            coustomLogin({...this.form, openid: this.openId})
               .then(res => {
                  this.$store.commit('SETTOKEN', res.token)
                  this.$store.commit('SETUSERINFO', res)
                  uni.navigateTo({
                     url:'/pages/projectList/projectList'
                  })
               })
               .finally(() => {
                  this.logining = false
               })
         },
         wxLogin(code) {
            wxEmpower({code})
               .then(res => {
                  this.openId = res.openid
                  if (res.userInfo) {
                     this.$store.commit('SETTOKEN', res.userInfo.token)
                     this.$store.commit('SETUSERINFO', res.userInfo)
                     uni.navigateTo({
                        url:'/pages/projectList/projectList'
                     })
                  }
               })
               .catch(err => {
                  uni.$u.toast(err)
               })
         onMessage(e) {
            console.log('12345654321')
         },
         scrolltolower() {},
         scrolltoupper() {},
         selectType(type) {
            if (this.searchForm.type == type) return
            this.searchForm.type = type
            this.scrolltoupper()
         },
         selectProject(item) {},
         filterAction() {
         }
      }
   }
</script>
<style lang="scss" scoped>
   .content {
      // display: flex;
      // flex-direction: column;
      // align-items: center;
      // justify-content: center;
      height: 100vh;
      background-color: #FFFFFF;
      .nav {
         width: 750rpx;
         height: 520rpx;
         background: linear-gradient(180deg, #C7EBFF 0%, #FFFFFF 100%);
         display: flex;
         flex-direction: column-reverse;
         color: #293C5B;
         :first-child {
            height: 52rpx;
            font-size: 36rpx;
            line-height: 52rpx;
         }
         :last-child {
            height: 80rpx;
            font-size: 56rpx;
            font-weight: 500;
            line-height: 80rpx;
            margin-bottom: 16rpx;
         }
      }
   .index {
      width: 100vw;
      height: 100vh;
   }
   .logo {
      height: 200rpx;
      width: 200rpx;
      margin-top: 200rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50rpx;
   .nav-style {
      border-bottom: 20rpx #f7f7f7 solid;
   }
   .text-area {
   .box_list {
      width: 100%;
      padding: 0 30rpx;
      display: flex;
      justify-content: center;
   }
      flex-direction: column;
      box-sizing: border-box;
   .title {
      font-size: 36rpx;
      color: #8f8f94;
      .box_list_item {
         padding: 30rpx 0;
         display: flex;
         border-bottom: 1rpx solid #E5E5E5;
         &:last-child {
            border: none;
         }
         .box_list_item_icon {
            flex-shrink: 0;
            width: 64rpx;
            height: 64rpx;
            margin-right: 24rpx;
            position: relative;
            .box_list_item_icon_active {
               position: absolute;
               right: 0;
               top: 0;
               width: 18rpx;
               height: 18rpx;
               border-radius: 50%;
               background: #DE5243;
               border: 2rpx solid #FFFFFF;
            }
            image {
               width: 100%;
               height: 100%;
            }
         }
         .box_list_item_nr {
            flex: 1;
            display: flex;
            flex-direction: column;
            .box_list_item_nr_top {
               display: flex;
               align-items: center;
               justify-content: space-between;
               span {
                  &:first-child {
                     font-size: 30rpx;
                     font-weight: 500;
                     max-width: 450rpx;
                     color: #222222;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     -o-text-overflow: ellipsis;
                  }
                  &:last-child {
                     flex-shrink: 0;
                     font-size: 24rpx;
                     font-weight: 400;
                     color: #999999;
                     margin-left: 10rpx;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     -o-text-overflow: ellipsis;
                  }
               }
            }
            .box_list_item_nr_bottom {
               font-size: 28rpx;
               font-weight: 400;
               color: #666666;
               margin-top: 16rpx;
               word-break: break-all;
            }
         }
      }
   }
</style>