YFYC-H5/yfyc/src/views/Interact/index.vue

<template>
  <div class="My">
    <!-- 输入框 -->
    <div class="inputBox" @keydown.enter="searchFu()">
      <div class="searInco">
        <van-icon name="search" />
      </div>
      <div class="searBtn" @click="searchFu()">搜索</div>
      <van-field
        maxlength="10"
        v-model="txt"
        placeholder="输入您感兴趣的内容"
      />
    </div>
    <!-- 精彩必体验 -->
    <div class="titleTit">精彩必体验</div>
    <div class="bsBox">
      <div
        @click="bsInd = item.id"
        :class="{ bsAc: bsInd === item.id }"
        v-for="item in bsData"
        :key="item.id"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="mainBoxNull" v-if="dataShow.length === 0">暂无内容</div>
    <div class="mainBox" v-else>
      <div
        class="row"
        @click="$router.push(`/layout/interact/info/${item.id}`)"
        v-for="item in dataShow"
        :key="item.id"
      >
        <img v-lazy="baseURL + item.thumb" alt="" />
        <div class="name">{{ item.name }}</div>
        <div class="author">
          <div class="author_ll">
            <img :src="item.avatarUrl" alt="" />
            <p>{{ item.nickName }}</p>
          </div>
          <div class="author_rr">{{ item.createTime.slice(0, 10) }}</div>
        </div>
      </div>
    </div>
    <!-- +号 -->
    <div class="issue">
      <img
        src="../../assets/img/interact/issue.png"
        alt=""
        @click="addInteract"
      />
    </div>
  </div>
</template>

<script>
import { baseURL } from "@/utils/request";
import { getCodeAPI, getDictAPI, getListAPI } from "@/api/interact.js";
export default {
  components: {},
  data() {
    return {
      baseURL,
      txt: "",
      bsInd: null,
      bsData: [
        // { id: 1, name: "景点" },
        // { id: 2, name: "美食" },
        // { id: 3, name: "游玩" },
        // { id: 4, name: "酒店" },
      ],

      dataShow: [],
    };
  },
  computed: {},
  watch: {
    bsInd() {
      this.getListFu();
    },
  },
  methods: {
    // 封装获取用户code的方法
    getUserCode() {
      //此处的ID是在文档的开发-基本配置里面
      let appid = "wx3255043d1b21a4f7";
      // let url = "http://192.168.20.48:8080/#/layout/interact";
      let url = "https://yifangyice.4dage.com/web/index.html#/layout/interact";
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        encodeURIComponent(url) +
        "&response_type=code&scope=snsapi_userinfo&state=bc17befd6d5060f16de95e38f6eaf69c&connect_redirect=1#wechat_redirect";
    },
    // 点击+号
    async addInteract() {
      let userInfo = localStorage.getItem("YFYC_userInfo");
      let nowTime = Date.now();
      if (userInfo) {
        let data = JSON.parse(userInfo);
        // 超过了6个小时
        if (nowTime - data.time >= 1000 * 60 * 60 * 6) this.getUserCode();
        else this.$router.push("/layout/interact/issue");
      } else this.getUserCode();
    },
    searchFu() {
      this.getListFu();
    },

    // 获取地址栏参数的方法
    getQueryCode(name) {
      // 未传参，返回空
      if (!name) return null;
      // 查询参数：先通过search取值，如果取不到就通过hash来取
      var after = window.location.search;
      after = after.substr(1) || window.location.hash.split("?")[1];
      // 地址栏URL没有查询参数，返回空
      if (!after) return null;
      // 如果查询参数中没有"name"，返回空
      if (after.indexOf(name) === -1) return null;

      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      // 当地址栏参数存在中文时，需要解码，不然会乱码
      var r = decodeURI(after).match(reg);
      // 如果url中"name"没有值，返回空
      if (!r) return null;

      return r[2];
    },

    // getQueryCode() {
    //   return this.$route.query.code ? this.$route.query.code : "";
    // },
    // 封装一个获取列表的方法
    async getListFu() {
      const obj = {
        dictTopicId: this.bsInd,
        pageNum: 1,
        pageSize: 9999,
        searchKey: this.txt,
      };
      const res = await getListAPI(obj);
      this.dataShow = res.data.records;
    },
  },
  async created() {
    document.querySelector("#app").style.maxWidth = "500px";

    this.getListFu();

    // 获取话题列表
    const res1 = await getDictAPI("topic");
    this.bsData = res1.data;
    this.bsData.unshift({ id: null, name: "全部" });

    let code = this.getQueryCode("code");
    console.log("-----------", code);
    if (code) {
      let res = await getCodeAPI(code);
      if (res.code === 0) {
        localStorage.setItem("YFYC_token", res.data.token);
        localStorage.setItem(
          "YFYC_userInfo",
          JSON.stringify({ ...res.data.wxUser, time: Date.now() })
        );
        this.$router.push("/layout/interact/issue");
      }
      // else {
      //   Toast.fail("登录失败，请联系管理人员");
      // }
    }
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.My {
  width: 100%;
  height: calc(100% - 130px);
  overflow-y: auto;
  padding: 20px 15px;
  position: relative;
  .issue {
    position: fixed;
    z-index: 10;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    text-align: center;
    & > img {
      width: 40px;
    }
  }
  .inputBox {
    margin: 0px auto;
    width: 100%;
    height: 30px;
    position: relative;

    .searBtn {
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 30px;
      border-radius: 3px;
      z-index: 2;
      background-color: #fe6e69;
      font-size: 14px;
      color: #fff;
      line-height: 30px;
      text-align: center;
    }

    .searInco {
      color: #a0a0a0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      position: absolute;
      top: 0;
      left: 10px;
      z-index: 3;
      width: 20px;
      height: 30px;
    }

    /deep/.van-cell {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0px 0 0px 36px;
      background-color: #f4f4f4;
      border-radius: 5px;
    }
  }

  .titleTit {
    font-size: 16px;
    font-weight: 700;
    margin: 15px 0;
    color: #000000;
  }

  .bsBox {
    display: flex;
    flex-wrap: wrap;

    & > div {
      text-align: center;
      min-width: 60px;
      padding: 0 5px;
      height: 30px;
      line-height: 30px;
      border-radius: 2px;
      background-color: #f4f4f4;
      margin: 0 15px 15px 0;
      font-size: 12px;
      color: #333333;
    }
    .bsAc {
      background-color: #333333;
      color: #f4f4f4;
    }
  }
  .mainBoxNull {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
  .mainBox {
    display: flex;
    flex-wrap: wrap;

    .row {
      margin-right: 4%;
      margin-bottom: 4%;
      overflow: hidden;
      width: 48%;
      height: 260px;
      background-color: #f7f8fa;
      border-radius: 4px;
      color: #333333;
      &:nth-of-type(2n) {
        margin-right: 0;
      }

      & > img {
        width: 100%;
        height: 180px;
        object-fit: cover;
      }

      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        padding: 10px 8px 5px;
        font-size: 14px;
        font-weight: 700;
      }

      .author {
        margin-top: 10px;
        height: 20px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;

        .author_ll {
          height: 100%;
          width: calc(100% - 65px);
          display: flex;
          align-items: center;
          & > img {
            margin-top: -3px;
            margin-right: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
          }
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            width: calc(100% - 18px);
          }
        }
        .author_rr {
          width: 61px;
        }
      }
    }
  }
}
</style>