YFYC-H5/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 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')"
        v-for="item in dataShow"
        :key="item.id"
      >
        <img :src="require(`@/assets/img/interact/row${item.id}.png`)" alt="" />
        <div class="name">{{ item.name }}</div>
        <div class="author">
          <div class="author_ll">
            <img src="../../assets/img/interact/user.png" alt="" />
            <span>{{ item.author }}</span>
          </div>
          <div class="author_rr">{{ item.time }}</div>
        </div>
      </div>
    </div>
    <!-- +号 -->
    <div class="issue">
      <img
        src="../../assets/img/interact/issue.png"
        alt=""
        @click="addInteract"
      />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      txt: "",
      bsData: [
        { id: 1, name: "梦幻游乐王国" },
        { id: 2, name: "古建筑" },
        { id: 3, name: "美食" },
        { id: 4, name: "周边风景游玩" },
        { id: 5, name: "美景" },
      ],
      spotData: [
        {
          id: 1,
          name: "方特梦幻王国万圣夜",
          author: "王大锤",
          time: "2022-11-16",
        },
        { id: 2, name: "芜湖老海关", author: "孔连顺", time: "2022-11-16" },
        { id: 3, name: "中江塔", author: "子墨", time: "2022-11-16" },
        { id: 4, name: "鸠兹古镇", author: "张本钰", time: "2022-11-16" },
      ],
      dataShow: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 点击+号
    addInteract() {
      this.$router.push("/layout/interact/issue");
      // let code = this.getQueryString("code");
      // if (code) this.$router.push("/layout/interact/issue");
      // else {
      //   //此处的ID是在文档的开发-基本配置里面
      //   let appid = "wx779dbafb46bab697";
      //   let url = "http://192.168.20.48:8080/#/layout/interact";
      //   window.location.href =
      //     "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
      //     appid +
      //     "&redirect_uri=" +
      //     url +
      //     "&response_type=code&scope=snsapi_userinfo&state=bc17befd6d5060f16de95e38f6eaf69c&connect_redirect=1#wechat_redirect";
      // }
    },
    searchFu() {
      this.getList();
    },
    // 获取列表的方法
    getList() {
      if (this.txt.trim() === "") this.dataShow = this.spotData;
      else
        this.dataShow = this.spotData.filter((v) => v.name.includes(this.txt));
    },
    // 获取地址栏参数的方法
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
      var context = "";
      if (r != null) context = r[2];
      reg = null;
      r = null;
      return context == null || context == "" || context == "undefined"
        ? ""
        : context;
    },
  },
  created() {
    document.querySelector("#app").style.maxWidth = "500px";

    this.getList();
    let code = this.getQueryString("code");
    console.log("---------", code);
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.My {
  width: 100%;
  height: calc(100% - 80px);
  overflow-y: auto;
  padding: 20px 15px;
  position: relative;
  .issue {
    margin: 20px 0;
    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;
    }
  }
  .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 {
        padding: 10px 10px 5px;
        font-size: 14px;
        font-weight: 700;
      }

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

        .author_ll {
          vertical-align: middle;

          & > img {
            margin-right: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
</style>