JiangningUrbanManageApp/pages/public-home/index.vue

<!--
 * @Author: 张涛
 * @Date: 2023-02-17 14:35:18
 * @LastEditors: 张涛
 * @LastEditTime: 2023-02-21 09:24:48
 * @FilePath: \liaoning-uniapp\pages\public-home\index.vue
-->
<template>
  <view class="container-main">
    <view class="header-bg">
      <view class="header-logo"></view>
      <view class="user-data">
        <text>张三 , 欢迎您!</text>
      </view>
    </view>
    <view class="main">
      <view class="ewm" @click="clickEwm()">
        <view class="ewm-logo"></view>
        <view class="ewn-text">
          <text>扫一扫</text>
          <text>产品溯源码 商家营业执照二维码</text>
        </view>
      </view>
      <view class="grid">	
        <view class="grid-item" v-for="(item, index) in gridList" :key="index">
          <view
            class="item-child"
            :style="{ background: item.bg }"
            @click="goPath(item)"
          >
            <image :src="baseImgUrl + item.icon" mode=""></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { setToken } from "@/utils/auth";
import { ControllerLogin } from "@/api/login";
import { getSelfInfo } from "@/api/system/user.js";
export default {
  data() {
    return {
      userName: "",
      baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
      gridList: [
        {
          name: "企业综合查询",
          icon: "liao-ning/icon_qyzhcx.png",
          path: "/sub-public/enterprise-query/enterprise-query",
          bg: "#F2F6FF",
        },
        {
          name: "食品综合查询",
          icon: "liao-ning/icon_spzhcx.png",
          path: "/sub-public/food-query/food-query",
          bg: "#FCF7F1",
        },
        {
          name: "满意度调查",
          icon: "liao-ning/icon_myddc.png",
          path: "/sub-public/survey/survey",
          bg: "#FCF7F1",
        },
        {
          name: "示范创建",
          icon: "liao-ning/icon_sfcj.png",
          path: "/sub-public/shifan-chuangjian/shifan-chuangjian",
          bg: "#EFF9ED",
        },
        {
          name: "社会教育",
          icon: "liao-ning/icon_shjy.png",
          path: "/sub-public/society-teach/society-teach",
          bg: "#F9F7FF",
        },
        {
          name: "食责险理赔",
          icon: "liao-ning/icon_szxlp.png",
          path: "/sub-public/food-lipei/food-lipei",
          bg: "#F2F6FF",
        },
        {
          name: "企业标准公示",
          icon: "liao-ning/icon_qybzgs@2x.png",
          path: "/sub-interaction/publicity/publicity",
          bg: "#F2F6FF",
        },
        {
          name: "食品安全红黑榜",
          icon: "liao-ning/icon_spaqhhb@2x.png",
          path: "/sub-interaction/bang-dan/bang-dan",
          bg: "#F9F7FF",
        },
        {
          name: "食安辽宁线上播放",
          icon: "liao-ning/icon_xsbf@2x.png",
          path: "/sub-interaction/online-video/online-video",
          bg: "#FCF7F1",
        },
        {
          name: "名优展示",
          icon: "liao-ning/icon_myzs@2x.png",
          path: "/sub-interaction/excellent/excellent",
          bg: "#EFF9ED",
        },
        {
          name: "消费者咨询",
          icon: "liao-ning/icon_xfzzx@2x.png",
          path: "/sub-interaction/consumer-consult/consumer-consult",
          bg: "#F2F6FF",
        },
      ],
    };
  },
  onLoad(option) {
    // this.userName = uni.getStorageSync("USER_DATA").userDto.realName;
    // this.getSystemData(option.TRUENAME, option.CREDITID);
  },
  methods: {
    //从外部拿数据
 
    //扫码
    clickEwm() {
      // #ifdef H5
      uni.navigateTo({
        url: "/pages/scanCodes/index",
      });
      // #endif

      // #ifdef  MP-WEIXIN || APP-PLUS
      // uni.scanCode({
      //   scanType: ["qrCode"],
      //   success: (res) => {
      //     let type = res.result
      //       .substr(res.result.lastIndexOf("?"))
      //       .substr(1, 7);
      //     let query = res.result.substr(res.result.lastIndexOf("=")).substr(1);
      //     if (type == "uniscid") {
      //       //企业详情（企业统一社会代码）
      //       uni.navigateTo({
      //         url: `/sub-public/enterprise-new-info/enterprise-new-info?uniscid=${query}`,
      //       });
      //     } else if (type == "certifi") {
      //       //食品详情
      //       uni.navigateTo({
      //         url: `/sub-public/food-query/food-query?certificationld=${query}`,
      //       });
      //     } else {
      //       uni.showToast({
      //         title: "未查到相关数据",
      //         icon: "none",
      //       });
      //     }
      //   },
      // });
      // #endif
    },
    goPath(item) {
      uni.navigateTo({
        url:
          item.name == "满意度调查"
            ? item.path + `?name=${item.name}`
            : item.path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container-main {
  position: relative;
}

.header-bg {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 416rpx;
  background: url("https://yth.scjg.ln.gov.cn/sgfs-enterprise/liaoning-app-file/file/liao-ning/home-header.png");
  background-size: 100% 100%;

  .header-logo {
    position: absolute;
    left: 25rpx;
    top: 114rpx;
    width: 370rpx;
    height: 63rpx;
    background: url("https://yth.scjg.ln.gov.cn/sgfs-enterprise/liaoning-app-file/file/liao-ning/home-bg.png");
    background-size: 100% 100%;
  }

  .user-data {
    position: absolute;
    left: 25rpx;
    top: 220rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 2rpx;
    font-family: "PingFang SC-中黑体";
  }
}

.main {
  position: absolute;
  left: 0;
  z-index: 20;
  top: 300rpx;
  min-height: 100rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  padding-bottom: 150rpx;

  .ewm {
    height: 180rpx;
    background: #ffffff;
    box-shadow: 0px 0px 20rpx 0px rgba(57, 118, 241, 0.102);
    border-radius: 16rpx;
    opacity: 1;
    border: 2rpx solid #dce3ec;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 36rpx;
    overflow: hidden;

    .ewm-logo {
      width: 170rpx;
      height: 100%;
      background: url("https://yth.scjg.ln.gov.cn/sgfs-enterprise/liaoning-app-file/file/liao-ning/img_sys.png");
      background-size: 100% 100%;
    }

    .ewn-text {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;

      & > text:nth-child(1) {
        font-size: 38rpx;
        font-weight: 550;
        color: #34373b;
      }

      & > text:nth-child(2) {
        margin-top: 10rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #616367;
      }
    }
  }

  .grid {
    box-sizing: border-box;
    padding: 30rpx;
    margin-top: 20rpx;
    background: #ffffff;
    box-shadow: 0px 0px 20rpx 0px rgba(57, 118, 241, 0.102);
    border-radius: 16rpx;
    border: 2rpx solid #dce3ec;
    display: flex;
    flex-wrap: wrap;

    & > view {
      width: 50%;
      height: 180rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .item-child {
        width: 315rpx;
        height: 180rpx;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        image {
          height: 85rpx;
          width: 85rpx;
        }

        text {
          font-size: 28rpx;
          font-weight: 550;
          font-family: "PingFang SC-中黑体";
          color: #34373b;
        }
      }
    }

    & > view:nth-child(even) {
      justify-content: flex-end;
    }

    & > view:last-child,
    & > view:nth-last-child(2) {
      margin-bottom: 0;
    }
  }
}
</style>