xiamen-sb-uniapp/pages/home/home.vue

<template>
  <view>
    <!-- 轮播 -->
    <u-swiper :list="list" height="280"></u-swiper>
    <!-- 分类 -->
    <view class="px3 py2 d-flex f-wrap mt-1 bg-color-white cate">
      <block v-for="(item, index) in cateList" :key="index">
        <view @tap="handleView(item.type, item.url)" class="d-flex a-center j-center f-column col4 mb-2">
          <image :src="item.logo" class="mb-1" mode=""></image>
          <text class="f-size-24">{{ item.name }}</text>
        </view>
      </block>
    </view>
    <!-- 广告 -->
    <!--        <view class="px3 ad bg-color-white">
            <view class="py2">
                <u-section
                    title="灵活用工优势"
                    font-size="34"
                    :show-line="false"
                >
                    <view slot="right" class="f-size-26 text-color-6">
                        <text class="mr-1">灵活结算</text>
                        <text class="mr-1">员工自由</text>
                        <text>效能提升</text>
                    </view>
                </u-section>
            </view>
            <view class="d-flex j-between f-wrap bottom pb-2">
                <block v-for="(item, index) in adList" :key="index">
                    <view class="mt-2" style="width: 330rpx">
                        <image
                            :src="item.icon"
                            class="bottom-img"
                            mode=""
                        ></image>
                    </view>
                </block>
            </view>
        </view>-->
    <!-- 最新消息 -->
    <view style="background-color: #f2f3f4" class="pb-1">
      <view class="f-size-32 f-weight-bold py2 border-bottom main-color-text" style="padding-left: 15px">最新消息</view>
      <view class="mx3 my2 p3 bg-color-white" v-for="(item, index) in listData" :key="index" @tap="handleDetail(item)" style="border-radius: 16rpx">
        <view class="d-flex j-between">
          <view class="f-size-32 f-weight-bold main-color-text">{{
                        typeDict[item.detailType]
                    }}</view>
          <view class="f-size-26 text-color-b">{{
                        item.createdTime
                    }}</view>
        </view>
        <view class="f-size-28 text-color-3 f-weight-4 mt-2">
          <rich-text :nodes="item.content"></rich-text>
        </view>
      </view>
    </view>
    <!-- 维修工单 -->
    <!--        <view style="background-color: #f2f3f4" class="" >
            <view class="mx3 pb-1 pt-3" @tap="handleRepair()">
                <u-section
                    title="维修工单"
                    sub-title="查看更多"
                    font-size="34"
                    :show-line="false"
                ></u-section>
            </view>
            <serve-list :order-list="orderList" />
        </view>-->
    <!-- 热门 -->
    <!--        <view class="hot-p">
            <view class="mx3 py3">
                <u-section
                    title="热门接单人"
                    sub-title="查看更多"
                    font-size="34"
                    :show-line="false"
                    @click="goMineList"
                >
                </u-section>
            </view>
            <view class="mx3 d-flex f-wrap bottom">
                <view class="d-flex j-center">
                    <view
                        class="d-flex f-column bg-color-white mb-2 pl-3 pt-3 pb-2 bottom-item"
                    >
                        <image
                            src="https://www.xingzhits.cn/xzts/static/images/avatar1.png"
                            class="bg-color-light mb-2 bottom-img"
                        ></image>
                        <text class="f-weight-6 one-ellipsis">慕容晓晓</text>

                        <view class="f-size-24 mt-1 one-ellipsis bottom-desc">
                            UI设计师</view
                        >
                    </view>
                </view>

                <view class="d-flex j-center">
                    <view
                        class="d-flex f-column bg-color-white mb-2 pl-3 pt-3 pb-2 bottom-item"
                    >
                        <image
                            src="https://www.xingzhits.cn/xzts/static/images/avatar1.png"
                            class="bg-color-light mb-2 bottom-img"
                        ></image>
                        <text class="f-weight-6 one-ellipsis">慕容晓晓</text>

                        <view class="f-size-24 mt-1 one-ellipsis bottom-desc">
                            UI设计师</view
                        >
                    </view>
                </view>
            </view>
        </view>-->
    <u-popup v-model="show" :mask-close-able="false" :border-radius="20" mode="bottom">
      <view class="account-title">
        <u-avatar src="../../static/logo.png" :size="30"></u-avatar>
        <span class="ml-3">设备管理系统</span>
      </view>
      <view class="px3 py3 f-size-24 f-weight-bold text-color-6">请选择以下账号做为你的登录账号</view>
      <view class="accounts">
        <view class="account-item" v-for="item in accounts" :key="item" @click="handleSelectLogin(item)">{{item}}</view>
      </view>
    </u-popup>
    <u-tabbar :list="tabbar" :mid-button="true" active-color="#0082ff"></u-tabbar>
  </view>
</template>

<script>
const basePath = 'https://www.xingzhits.cn/xzts/static'
export default {
  data() {
    return {
      listData: [],
      typeDict: {},
      list: [
        {
          image: 'http://www.qykh2009.com/images/sbgl_banner.png'
        },
        {
          image: 'http://www.qykh2009.com/upload/pic/50921544089534569.jpg'
        },
        {
          image: 'http://www.qykh2009.com/upload/pic/84401544089632806.jpg'
        },
        {
          image: 'http://www.qykh2009.com/upload/pic/69531466063518453.png'
        }
      ],
      cateList: [
        {
          logo: basePath + '/images/icon1.png',
          name: '设备扫码',
          url: '',
          type: 1
        },
        /* {
                    logo: basePath + '/images/icon2.png',
                    name: '点检管理',
                    url: '../check/check',
                    type: 2
                },
                {
                    logo: basePath + '/images/icon4.png',
                    name: '巡检填报',
                    url: '../inspection/inspection',
                    type: 2
                }, */
        {
          logo: basePath + '/images/icon3.png',
          name: '保养管理',
          url: '../maintain/maintain',
          type: 2
        },
        /* {
                    logo: basePath + '/images/icon4.png',
                    name: '运行填报',
                    url: '../running/running',
                    type: 2
                }, */
        {
          logo: basePath + '/images/icon5.png',
          name: '设备报修',
          url: '../repair/repair',
          type: 2
        },
        /* {
                    logo: basePath + '/images/icon7.png',
                    name: '备品备件',
                    url: '../receive/receive',
                    type: 2
                }, */
        {
          logo: basePath + '/images/icon8.png',
          name: '设备台账',
          url: '../equipment/equipment',
          type: 2
        }
      ],
      adList: [
        {
          icon: basePath + '/images/ad1.png'
        },
        {
          icon: basePath + '/images/ad2.png'
        },
        {
          icon: basePath + '/images/ad3.png'
        },
        {
          icon: basePath + '/images/ad4.png'
        }
      ],
      orderList: [{}, {}],
      companyList: [{}, {}],
      accounts: [],
      tabbar: [
        {
          iconPath: '/static/tabars/home.png',
          pagePath: '/pages/home/home',
          selectedIconPath: '/static/tabars/home_s.png',
          text: '首页'
        },
        {
          iconPath: '/static/tabars/order.png',
          pagePath: '/pages/operate/operate',
          selectedIconPath: '/static/tabars/order_s.png',
          text: '功能'
        },
        {
          iconPath: '/static/tabars/publish.png',
          pagePath: '/pages/middle/middle',
          selectedIconPath: '/static/tabars/publish.png',
          text: '报修',
          midButton: true
        },
        {
          iconPath: '/static/tabars/tiding.png',
          pagePath: '/pages/tidings/tidings',
          selectedIconPath: '/static/tabars/tiding_s.png',
          text: '消息'
        },
        {
          iconPath: '/static/tabars/mine.png',
          pagePath: '/pages/my/my',
          selectedIconPath: '/static/tabars/mine_s.png',
          text: '我的'
        }
      ],
      show: false
    }
  },
  onLoad(options) {
    this.initData()
    if (options.code) {
      this.login(options.code)
    }
  },
  onShow() {
    this.initData()
  },
  methods: {
    login(code) {
      this.$Http.loginQuicklyOauth(code).then(res => {
        if (res.data.length > 1) {
          this.accounts = res.data
          this.show = true
        } else {
          this.handleSelectLogin(res.data[0])
        }
      })
    },
    handleSelectLogin(params) {
      console.log(2)
      this.$Http
        .mobileLogin({
          username: params,
          password: 'quickly_login',
          grant_type: 'quickly_login',
          scope: 'server'
        })
        .then(res => {
          this.show = false
        })
    },
    handleRepair() {
      uni.navigateTo({
        url: '/pages/repair/repair'
      })
    },
    handleView(type, url) {
      if (type === 1) {
        this.handleCode()
      } else {
        uni.navigateTo({
          url: url
        })
      }
    },
    handleMessage() {
      uni.navigateTo({
        url: '/pages/tidings/tidings'
      })
    },
    // 去详情
    handleDetail(detail) {
      if (detail.status == 1) {
        this.$Http.updateWorkplaceBacklog({ id: detail.backlogId }).then(res => {
          console.log('已置为已办')
        })
      }
      uni.navigateTo({
        url: '/pages/tidings-detail/tidings-detail?detail=' + JSON.stringify(detail)
      })
    },
    handleCode() {
      // #ifdef H5
      uni.showToast({
        title: '暂不支持该功能',
        icon: 'none'
      })
      // #endif
      // #ifndef H5
      uni.scanCode({
        success(e) {
          const sbId = e.result.split('=')[1]
          if (sbId != null) {
            uni.navigateTo({
              url: '/pages/equipment-detail/equipment-detail?detailId=' + sbId
            })
          } else {
            uni.showToast('非本系统二维码，无法识别')
          }
        }
      })
      // #endif
    },
    getDict() {
      this.typeDict = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
    },
    initData() {
      const that = this
      this.$Http
        .getWorkplaceBacklogUserPage({
          pageNum: 1,
          pageSize: 4,
          dataScope: {
            sortBy: 'desc',
            sortName: 'task_create_time'
          }
        })
        .then(res => {
          that.getDict()
          console.log(res)
          const data = res.data.rows
          that.listData = data
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.uni-swiper-slides {
  inset: 0px 0px !important;
}
.cate {
  image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }

  text {
    color: #595c68;
  }
}
.hot-p {
  .bottom {
    & > view {
      width: 33%;
    }
    .bottom-item {
      border-radius: 15rpx;
      width: 210rpx;
      .bottom-desc {
        border: 1rpx solid #fa5445;
        width: 150rpx;
        text-align: center;
        border-radius: 7rpx;
        color: #fa5445;
      }
    }
  }
}

.ad {
  .bottom {
    &-img {
      width: 330rpx;
      height: 240rpx;
      border-radius: 20rpx;
    }
  }
}

.hot-p {
  background-color: #f2f3f4;

  .bottom {
    &-img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }
}
.account-title {
  padding: 30rpx;
  display: flex;
  align-items: center;
  font-weight: bold;
  background: #fff;
}
.accounts {
  padding: 40rpx;
  height: 600rpx;
  line-height: 60rpx;
  overflow-y: auto;
  .account-item {
    padding: 40rpx;
    margin: 0 auto;
    font-size: 40rpx;
    text-align: center;
    border-radius: 20rpx;
    background: #fff;
    margin-bottom: 20rpx;
    &:hover {
      cursor: pointer;
    }
  }
}
::v-deep .u-drawer-content {
  background: #eee !important;
}
</style>