小程序

Mr.Shi

2023-08-28 bb086627477351918c63d0daae2f8ee7b6a1315d

 minipro_standard/pages/index/index.vue

@@ -1,12 +1,57 @@
<template>

   <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 myTabbar from "@/components/myTabber.vue"	
   import myTabbar from "@/components/myTabber.vue"

   import {

      mapState

   } from 'vuex'

   export default {

      components: {

         myTabbar

@@ -14,14 +59,34 @@
      data() {

         return {

            code: '',

            show: false

            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'},

            ]

         }

      },

      computed: {

         ...mapState(['statusbarHeight', 'navHeight']),

      },

      onLoad() {

         uni.getSystemInfo({

            success: res => {

               this.windowHeight = res.windowHeight

            }

         })



         var that = this

         uni.login({

            provider: 'weixin',

            success: function (loginRes) {

            success: function(loginRes) {

               // console.log(loginRes);

               that.code = loginRes.code

               that.show = true

@@ -31,6 +96,17 @@
      methods: {

         onMessage(e) {

            console.log('12345654321')

         },

         scrolltolower() {},

         scrolltoupper() {},

         selectType(type) {

            if (this.searchForm.type == type) return

            this.searchForm.type = type

            this.scrolltoupper()

         },

         selectProject(item) {},
         filterAction() {
				
         }

      }

   }

@@ -41,4 +117,95 @@
      width: 100vw;

      height: 100vh;

   }



   .nav-style {

      border-bottom: 20rpx #f7f7f7 solid;

   }



   .box_list {

      width: 100%;

      padding: 0 30rpx;

      display: flex;

      flex-direction: column;

      box-sizing: border-box;



      .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>