index.vue

<template>
  <div class="main">
    <div class="main-manInfos">
      <div class="manInfo-logos">
        <img class="logos-logo" :src="test.manInfo.logoUrl" />
      </div>
      <div
        class="manInfo-name"
        @click="manInfoClick"
      >我的专柜：{{test.manInfo.barName}}</div>
      <div class="manInfo-switch" @click="switchBarClick">
        <div class="switch-text">切换</div>
        <img class="switch-icon" :src="test.manInfo.icon['1']" />
      </div>
    </div>
    <div class="main-tips">
      <div class="tips-tip">店铺粉丝 {{test.barInfo.fans}}</div>
      <div class="tips-tip">个人粉丝 {{test.barInfo.personalFans}}</div>
      <div class="tips-tip">
        昨日新增 <span>{{test.barInfo.newFans}}</span>
        <span>/</span>
        <span>{{test.barInfo.allNewFans}}</span>
      </div>
    </div>
    <div class="main-menus">
      <div class="menus-row">
        <div class="menu" @click="menu02Click">
          <img class="menu-logo" :src="test.menuInfo.icon['2']" />
          <div class="menu-text">任务列表</div>
        </div>
        <div class="menu" @click="menu05Click">
          <img class="menu-logo" :src="test.menuInfo.icon['5']" />
          <div class="menu-text">活动模版</div>
        </div>
        <div class="menu" @click="menu03Click">
          <img class="menu-logo" :src="test.menuInfo.icon['3']" />
          <div class="menu-text">活动列表</div>
        </div>
      </div>
      <div class="menus-row">
        <div class="menu" @click="menu04Click">
          <img class="menu-logo" :src="test.menuInfo.icon['4']" />
          <div class="menu-text">专柜维护</div>
        </div>
        <div class="menu" @click="menu06Click">
          <img class="menu-logo" :src="test.menuInfo.icon['6']" />
          <div class="menu-text">商品管理</div>
        </div>
        <div class="menu" @click="handleCoupon" v-if="flag == 1">
          <img class="menu-logo" :src="test.menuInfo.icon['1']" />
          <div class="menu-text">优惠券管理</div>
        </div>
      </div>
    </div>
    <div class="main-actives">
      <div class="actives-banners">
        <div class="actives-banner-title">现有开展活动</div>
      </div>
      <div class="actives-main">
        <div class="active-logos">
          <img class="active-logo" :src="test.activeInfo.icon['1']" />
        </div>
        <div class="active-infos">
          <div class="active-title">大转盘</div>
          <div class="active-dsc">{{test.cache.actDsc}}</div>
        </div>
      </div>
      <div class="actives-main">
        <div class="active-logos">
          <img class="active-logo" :src="test.activeInfo.icon['2']" />
        </div>
        <div class="active-infos">
          <div class="active-title">现金券发放</div>
          <div class="active-dsc">{{test.cache.actDsc}}</div>
        </div>
      </div>
      <div class="actives-main">
        <div class="active-logos">
          <img class="active-logo" :src="test.activeInfo.icon['3']" />
        </div>
        <div class="active-infos">
          <div class="active-title">集卡</div>
          <div class="active-dsc">{{test.cache.actDsc}}</div>
        </div>
      </div>
      <div class="actives-mores">
        <div class="mores-title">查看更多</div>
        <img class="mores-icon" :src="test.cache.arrowRightDark" />
      </div>
    </div>
    <div class="main-menuBar">
      <div class="menuBar-menu" @click="menuBarClick('MainSale')">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']" />
        <div class="menuBar-title menuBar-title-ac">活动</div>
      </div>
      <div class="menuBar-menu" @click="menuCase()">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['2']" />
        <div class="menuBar-title">案例</div>
      </div>
      <div class="menuBar-menu" @click="menuProfit()">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']" />
        <div class="menuBar-title">收益</div>
      </div>
      <div class="menuBar-menu" @click="menuTask()">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['4']" />
        <div class="menuBar-title">任务</div>
      </div>
      <div class="menuBar-menu" @click="menuBarClick('Me')">
        <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['5']" />
        <div class="menuBar-title">我的</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getStoreDetail, getMemberListByCode, getDirector } from "@/api/sidebar/voucher";
import { configWx, getUserInfo } from "@/utils/aCommon";
import { getUserInfoByUserId } from "@/api/sidebar/voucher";
import { log } from 'util';
export default {
  name: "discountIndex",
  data() {
    return {
      test: {
        cache: {
          imgUrl: "/hi.jpg",
          actDsc: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。",
          nowMenuBar: "1",
          arrowRightDark: "/mainSale/icon-arrow-right-dark.png"
        },
        manInfo: {
          bk_logoUrl: "https://ezhq.xyz/img/main/logo_sona.jpg",
          logoUrl: "/photo.png",
          barFrom: "alice",
          barName: "未配置",
          icon: {
            "1": "/mainSale/icon-arrow-right-light.png"
          }
        },
        barInfo: {
          fans: "299",
          personalFans: "77",
          newFans: "11",
          allNewFans: '15'
        },
        menuInfo: {
          icon: {
            "1": "/mainSale/icon-menu-01.png",
            "2": "/mainSale/icon-menu-02.png",
            "3": "/mainSale/icon-menu-03.png",
            "4": "/mainSale/icon-menu-04.png",
            "5": "/mainSale/icon-menu-05.png",
            "6": "/mainSale/icon-menu-06.png"
          }
        },
        activeInfo: {
          icon: {
            "0": "/mainSale/icon-active-title.png",
            "1": "/mainSale/icon-active-1.png",
            "2": "/mainSale/icon-active-2.png",
            "3": "/mainSale/icon-active-3.png"
          }
        },
        menuBarInfo: {
          list: {
            main: [
              {
                name: "",
                iconUaUrl: "",
                iconAcUrl: ""
              }
            ]
          },
          icon: {
            now: {
              "1": "",
              "2": "",
              "3": "",
              "4": "",
              "5": ""
            },
            ua: {
              "1": "/mainSale/icon-menuBar-1-ua.png",
              "2": "/mainSale/icon-menuBar-2-ua.png",
              "3": "/mainSale/icon-menuBar-3-ua.png",
              "4": "/mainSale/icon-menuBar-4-ua.png",
              "5": "/mainSale/icon-menuBar-5-ua.png"
            },
            ac: {
              "1": "/mainSale/icon-menuBar-1-ac.png",
              "2": "/mainSale/icon-menuBar-2-ac.png",
              "3": "/mainSale/icon-menuBar-3-ac.png",
              "4": "/mainSale/icon-menuBar-4-ac.png",
              "5": "/mainSale/icon-menuBar-5-ac.png"
            }
          }
        }
      },
      dis: {},
      oyStallCode: "",
      userId: "",
      zcache: {
        nowUrl: "",
        preAuthCodeUrl: "",
        code: "",
        userId: "",
        userInfoResOld: "",
        userInfoResNew: ""
      },
      flag: 1
    }
  },
  created() {
    this.checkNowMenuBar() 
    if(sessionStorage.getItem('userId')) {
      if(sessionStorage.getItem('avatar')) {
        this.test.manInfo.logoUrl = sessionStorage.getItem('avatar')
      }
      if(sessionStorage.getItem('personalFan')) {
        this.test.barInfo.personalFans = sessionStorage.getItem('personalFan')
      }
      if(sessionStorage.getItem('barName')) {
        this.test.manInfo.barName = sessionStorage.getItem('barName')
      }
      if(sessionStorage.getItem('allFans')) {
        this.test.barInfo.fans = sessionStorage.getItem('allFans')
      }
      if(sessionStorage.getItem('newFans')) {
        this.test.barInfo.newFans = sessionStorage.getItem('newFans')
      }
      if(sessionStorage.getItem('allNewFans')) {
        this.test.barInfo.allNewFans = sessionStorage.getItem('allNewFans')
      }
      if(sessionStorage.getItem('role')) {
        this.flag = sessionStorage.getItem('role')
      }
    }else  {
      this.zReadyUserId()
      this.zTestGetNowUrlInfo()
    }
  },
  methods: {
    // 获取用户角色
    getDirector(userId) {
      getDirector({userId}).then(res => {
        if(res.data == true) {
          this.flag = 1
        }else {
          this.flag = 2
        }       
        sessionStorage.setItem("role", this.flag)
      })
    },
    // 获取用户信息
    getUserInfo() {
      let headerData = {
        agentId: "1000033",
        corpId: "ww4df265003b43fa0d"
      }
      axios({
        url:
          "http://139.155.48.151:8085/workWx/auth/user/get?userId=" +
          this.zcache.userId,
        method: "get",
        headers: headerData
      })
        .then(res => {
          this.test.manInfo.barFrom = res.data.data.name
          sessionStorage.setItem("barFrom", res.data.data.name)
          this.test.manInfo.logoUrl = res.data.data.avatar
          sessionStorage.setItem("avatar", res.data.data.avatar)
        })
        .catch(err => {
          console.log(err);
        });
    },
    getFans() {
      let headerData = {
        agentId: "1000033",
        corpId: "ww4df265003b43fa0d"
      };

      axios({
        url:
          "http://139.155.48.151:8085/workWx/auth/contact/listExternalContacts?userId=" +
          this.zcache.userId,
        method: "get",
        headers: headerData
      })
        .then(res => {
          this.test.barInfo.personalFans = res.data.data.length
          sessionStorage.setItem("personalFan",  res.data.data.length)
        })
        .catch(err => {
          console.log(err);
        });
    },
    getAllFans() {
      let headerData = {
        agentId: "1000033",
        corpId: "ww4df265003b43fa0d"
      }
      axios({
        url: "http://139.155.48.151:8085/workWx/auth/contact/getCustomerInfoByOyStallCode?oyStallCode=" + this.oyStallCode,
        method: "get",
        headers: headerData
      })
        .then(res => {
          console.log(res,'粉丝')         
          this.test.barInfo.fans = res.data.data.length
          sessionStorage.setItem("allFans",  res.data.data.length)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getNewFans() { 
      this.getAddFans(1,this.zcache.userId)
    },
    getAllNewFans() { 
      let params = {
        oyStallCode: this.oyStallCode
      }
      getMemberListByCode(params).then(res => {
        console.log(res,'res');
        this.getAddFans(2,res.data)
      })
    },
    getAddFans(flag,userId) {
       let JsonStr = {}
      if(flag == 1) {
        JsonStr.userid = [userId]
      }else {
        JsonStr.userid = userId
      }
      let timeNow = Math.round(new Date() / 1000)
      JsonStr.start_time = timeNow-24*60*60
      JsonStr.end_time = timeNow
      console.log(JsonStr,'obj')     
      axios({
        url: "http://139.155.48.151:8085/workWx/auth/contact/getUserBehaviorData",
        method: "post",
        headers: {
          'Content-Type': 'application/json',
          'agentId': "1000033",
          'corpId': "ww4df265003b43fa0d"
        },   
        data: JsonStr
      })
        .then(res => { 
          let data = JSON.parse(res.data.data)
          if(flag == 1) {
            this.test.barInfo.newFans = data.behavior_data[0].new_contact_cnt + data.behavior_data[1].new_contact_cnt
            sessionStorage.setItem("newFans",  this.test.barInfo.newFans)   
          }else {
            this.test.barInfo.allNewFans = data.behavior_data[0].new_contact_cnt + data.behavior_data[1].new_contact_cnt
            sessionStorage.setItem("allNewFans",  this.test.barInfo.allNewFans) 
          }                        
                     
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取店铺信息
    getStore() {
      let params = {
        oyStallCode: this.oyStallCode
      };
      getStoreDetail(params).then(res => {
        if(res.data.stallInfo != null) {
          this.test.manInfo.barName = res.data.stallInfo.name
          sessionStorage.setItem("barName",  res.data.stallInfo.name)
        }
      });
    },
    checkNowMenuBar() {
      let inData = "1";
      this.test.menuBarInfo.icon.now = this.test.menuBarInfo.icon.ua;
      this.test.menuBarInfo.icon.now[inData] = this.test.menuBarInfo.icon.ac[inData];
    },
    manInfoClick() {
      this.$router.push("counterInfo");
    },
    switchBarClick() {
      this.$router.push({
        path: "ChangeCounter",
        query: {
          userId: this.zcache.userId
        }
      });
    },
    testButtonClick() {},
    menu01Click() {},
    menu02Click() {
      this.$router.push("Task")
    },
    menu03Click() {
      this.$router.push("activeList")
    },
    menu04Click() {
      this.$router.push("counterInfo")
    },
    menu05Click() {
      this.$router.push("ActTemplate")
    },
    menu06Click() {
      this.$router.push("goodManage")
    },
    handleCoupon() {
      this.$router.push("coupon")
    },
    buttonMainMarketingClick() {
      // this.$router.push("home")
    },
    menuBarClick(inData) {
      this.$router.push(inData);
    },
    menuCase() {
      this.$router.push({ path: "/case" });
    },
    menuProfit() {
      this.$router.push({ path: "/profitList" });
    },
    menuTask() {
      this.$router.push({ path: "/taskList" });
    },
    // 获取code
    zReadyUserId() {
      if (this.$route.query.code === undefined) {
        // alert('没code')
        this.zTestPreAuthCode()
      } else {
        // alert('有code')
        this.zTestGetNowUrlInfo()
        this.zTestGetUserInfoByOldToken()
      }
    },
    // 测试-获取当前Url信息
    zTestGetNowUrlInfo() {
      this.zcache.nowUrl = JSON.stringify(this.$route.query);
      this.zcache.code = String(this.$route.query.code);
      this.url = this.zcache.nowUrl;
    },
    zTestPreAuthCode() {
      // alert('获取code')
      const basicInfo = {
        head: "https://open.weixin.qq.com/connect/oauth2/authorize?",
        // appId: "wwd1cdbca7b8b2b6c4",
        appId: "ww4df265003b43fa0d",
        redirectUrI: encodeURIComponent("oysales.oywanhao.com:8087"),
        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;
      this.zcache.preAuthCodeUrl = url;
      window.location.href = url;
    },
    // 获取userId
    zTestGetUserInfoByOldToken() {
      let postData = {
        code: this.zcache.code
      };
      let headerData = {
        agentId: "1000033",
        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 => {
          sessionStorage.setItem("userId", String(res.data.data.userId));
          this.zcache.userId = String(res.data.data.userId);
          this.getUserFromId(this.zcache.userId);
          this.getUserInfo();
          this.getNewFans()
          this.getDirector(res.data.data.userId) 
        })
        .catch(err => {
          console.log(err);
        });
    },
    getUserFromId(id) {
      let userName = id;
      getUserInfoByUserId({ userName })
        .then(res => {
          sessionStorage.setItem("oyStallCode", res.data[0].oyStallCode)
          this.oyStallCode = res.data[0].oyStallCode
          this.getStore()
          this.getFans()
          this.getAllFans()
          this.getNewFans()
          this.getAllNewFans()
        })
        .catch(err => {})
    }
  }
};
</script>

<style scoped>
.testCube {
  width: 60px;
  height: 10px;
  background-color: lightcoral;
  border: 1px solid white;
}

.main {
  background-color: rgb(237, 239, 243);
  width: 100%;
  height: auto;
  /*padding: ;*/
  padding-bottom: 94px;
  display: flex;
  flex-direction: column;
  justify-content: start;

  overflow: auto;
}

.main-manInfos {
  width: 100%;
  height: 72px;
  background-color: #4377bc;
  padding: 0px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.manInfo-logos {
  width: 48px;
  height: 48px;
  /*border: 1px solid white;*/

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

.logos-logo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;

  border: 2px solid white;
}

.manInfo-name {
  width: 100%;
  height: 18px;
  padding: 0px 12px;
  margin-right: 60px;

  color: white;

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

.manInfo-switch {
  /*border: 1px solid greenyellow;*/
  width: 100px;
  height: 18px;

  font-size: 14px;
  line-height: 18px;
  font-weight: bold;

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

.switch-icon {
  width: 5px;
  height: 8px;
}

.switch-text {
  color: white;

  padding-right: 4px;

  font-size: 14px;
  line-height: 16px;
  font-weight: normal;
}

.main-tips {
  width: 100%;
  height: 48px;
  background-color: #f8f8f8;

  padding: 0px 16px;

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

.tips-tip {
  /*border: 1px solid darkorange;*/
  width: 30%;
  height: 16px;

  color: #4377bc;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  text-align: center;
}

.main-menus {
  /*border: 1px solid lightseagreen;*/
  width: 100%;
  height: 240px;

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

.menus-row {
  width: 100%;
  height: 120px;

  padding: 12px 16px 0px 16px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menu {
  width: 108px;
  height: 108px;
  background-color: #f8f8f8;

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

.menu-logo {
  width: 48px;
  height: 48px;

  object-fit: cover;
}

.menu-text {
  font-size: 14px;
  font-weight: bold;
  color: #2d476a;
}

.main-actives {
  /*border: 1px solid lightcoral;*/
  width: 100%;
  height: 380px;
  /*margin-bottom: 94px;*/
  margin-top: 36px;
  padding: 0px 12px;
  background-color: white;

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

.actives-banners {
  border-bottom: 1px solid #eeeeee;
  width: 100%;
  height: 25px;

  display: flex;
  flex-direction: row;
  justify-content: center;
}

.actives-banner-small {
  width: 220px;
  height: 30px;

  object-fit: cover;

  position: relative;
  bottom: 7px;
}

.actives-banner-title {
  background: url(/mainSale/icon-active-title.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  width: 220px;
  height: 30px;

  font-size: 16px;
  line-height: 16px;
  color: #2d476a;
  text-align: center;

  position: relative;
  bottom: 7px;
}

.actives-banner-main {
  width: 148px;
  height: 24px;
  border-radius: 40px;
  margin: 0px 4px;

  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  color: #2d476a;

  background: linear-gradient(#ffffff, 50%, #e4f9ff);
  box-shadow: 0px 1px 1px 0px #96cedc;

  position: relative;
  bottom: 12px;
}

.actives-main {
  border-bottom: 1px solid #eeeeee;
  width: 100%;
  height: 105px;
  padding: 12px 0px;

  display: flex;
  flex-direction: row;
  justify-content: start;
}

.active-logos {
  background-color: #f8f8f8;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.active-logo {
  width: 56px;
  height: 56px;
}

.active-infos {
  width: 100%;
  height: 80px;
  padding-left: 12px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.active-title {
  height: 16px;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  margin-bottom: 8px;
}

.active-dsc {
  height: 36px;
  width: 100%;
  font-size: 12px;
  font-weight: normal;
}

.actives-mores {
  width: 100%;
  height: 40px;
  /*border: 1px solid red;*/

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

.mores-title {
  width: auto;
  height: 14px;

  margin-right: 4px;

  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  color: #2d476a;
}

.mores-icon {
  width: 10px;
  height: 14px;
}

.main-menuBar {
  /*border: 1px solid darkviolet;*/
  box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
  width: 100%;
  height: 82px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: #fafafa;
  padding: 0px 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menuBar-menu {
  /*background-color: greenyellow;*/
  width: 48px;
  height: 47px;

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

.menuBar-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.menuBar-title {
  width: auto;
  height: 12px;
  font-size: 10px;
  font-weight: bold;
  color: rgba(67, 119, 188, 0.4);
  text-align: center;
}

.menuBar-title-ac {
  color: rgba(67, 119, 188, 1);
}
</style>