home.vue

<template>
    <div class="main">
        <div class="lists">
            <div v-for="(item, index) of list.main" :key="index">
                <div class="list" @click="listClick(item.redirect)">
                    <div>
                        <img class="list-logo" :src="item.logoUrl" alt/>
                    </div>
                    <div class="list-infos">
                        <div class="list-info-title">{{item.name}}</div>
                        <div class="list-info-dsc">{{item.dsc}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import {ApiTestCfPost, ApiTestEaPost} from "@/api/test/test";
  import {configWx, getUserInfo} from "@/utils/aCommon";
  import * as APIHome from "@/api/sidebar/home";
  import axios from "axios";

  const zlog = console.log.bind(console);

  export default {
    name: "home",
    data() {
      return {
        zcache: {
          nowUrl: "",
          preAuthCodeUrl: "",
          code: "",
          userId: "",
          userInfoResOld: "",
          userInfoResNew: ""
        },
        list: {
          main: [
            {
              name: "顾客画像",
              dsc: "欧亚会员画像，通过一方消费者数据结合三方数据为营业员展示顾客特点",
              redirect: "ManInfo",
              logoUrl: "/mainSale/1.png"
            },
            {
              name: "优惠券推送",
              dsc: "欧亚会员画像，通过一方消费者数据结合三方数据为营业员展示顾客特点",
              redirect: "Discount",
              logoUrl: "/mainSale/2.png"
            },
            {
              name: "爆品推送",
              dsc: "欧亚会员画像，通过一方消费者数据结合三方数据为营业员展示顾客特点",
              redirect: "GoodPost",
              logoUrl: "/mainSale/3.png"
            },
            {
              name: "营销工具箱",
              dsc: "欧亚营销工具箱，通过营销工具箱可以为营业员提供更多的在线营销工具",
              redirect: "register",
              logoUrl: "/mainSale/4.png"
            }
          ]
        }
      };
    },
    mounted() {
      this.zReadyUserId();
      this.zTestGetNowUrlInfo();
    },
    created() {
    },
    methods: {
      zReadyUserId() {
        if (this.$route.query.code === undefined){
          this.zTestPreAuthCode()
        } else {
          this.zTestGetNowUrlInfo()
          this.zTestGetUserInfoByOldToken()
        }
      },
      // 测试-获取当前Url信息
      zTestGetNowUrlInfo() {
        this.zcache.nowUrl = JSON.stringify(this.$route.query)
        this.zcache.code = String(this.$route.query.code)
        zlog("%c--->zTestGetNowUrlInfo: ", "color: orange;", this.zcache.nowUrl)
      },
      zTestPreAuthCode() {
        const basicInfo = {
          head: "https://open.weixin.qq.com/connect/oauth2/authorize?",
          // appId: "wwd1cdbca7b8b2b6c4",
          appId: "ww4df265003b43fa0d",
          redirectUrI: encodeURIComponent("oysales.oywanhao.com"),
          responseType: "code",
          scope: "snsapi_base",
          state: "ztest",
          tail: "#wechat_redirect"
        };

        let url =
          basicInfo.head +
          "appid=" +
          basicInfo.appId +
          "&redirect_uri=" +
          basicInfo.redirectUrI +
          "&response_type=" +
          basicInfo.responseType +
          "&scope=" +
          basicInfo.scope +
          "&state=" +
          basicInfo.state +
          basicInfo.tail;

        zlog("%c--->zTestPreAuthCode: Url =", "background: orange", url);
        this.zcache.preAuthCodeUrl = url;

        window.location.href = url;
      },
      // 测试-获取用户信息
      zTestGetUserInfoByOldToken() {
        let postData = {
          code: this.zcache.code,
        };
        let headerData = {
          agentId: "1000032",
          corpId: "ww4df265003b43fa0d"
        };
        this.zcache.userInfoResOld = "PostData:" + JSON.stringify(postData);
        axios({
          url: "http://139.155.48.151:8085/workWx/auth/oauth2/getUserInfo?code=" + this.zcache.code,
          method: "post",
          headers: headerData,
        })
          .then(res => {
            this.zcache.userInfoResNew = "RESOK:" + res.data.data.userId;
            sessionStorage.setItem("userId", String(res.data.data.userId));
            this.zcache.userId = String(res.data.data.userId);
          })
          .catch(err => {
            this.zcache.userInfoResNew = "RESERR.";
          });
      },
      listClick(inData) {
        this.$router.push({
          name: inData,
          params: {userId: this.zcache.userId}
        });
      },
    }
  };
</script>

<style scoped lang="scss">
    .main {
        background-color: white;
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: start;
        overflow: scroll;
    }

    .lists {
        height: auto;
        padding: 4px 12px;
        padding-bottom: 40px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: scroll;
    }

    .list {
        height: 140px;
        box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);
        margin: 6px 0px;
        padding: 0px 12px;
        border-radius: 6px;

        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .list-logo {
        /* border: 1px solid red; */
        width: 100px;
        height: 100px;
        border-radius: 6px;
    }

    .list-infos {
        /* border: 1px solid orange; */
        height: 100px;
        padding-left: 12px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .list-info-title {
        width: 100%;
        height: 18px;

        font-size: 16px;
        font-weight: bold;
        line-height: 18px;
    }

    .list-info-dsc {
        margin-top: 6px;
        width: 100%;
        height: 16px;

        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
    }
</style>