index.vue

<template>
  <div class="main">
    <div class="contents">
      <div class="zListActive">
        <div class="inputs">
          <div class="button" @click="zReadySetVoucherList">ReLoad</div>
        </div>
      </div>
      <div v-for="item of zlist.voucher" :key="item.coupon_id" >
        <div class="content">
          <div class="content-imgs">
            <img class="imgs-img" :src="zcache.defaultImgUrl" alt />
          </div>
          <div class="content-infos">
            <div class="infos-mains">
              <div class="mains">
                <div class="main-usedPercent">活动ID：{{item.action_id}}</div>
                <div class="main-money">{{item.coupon_title}}</div>
              </div>
              <div class="buttons">
                <button class="button-send" @click="zVoucherPick(item.action_id, item.coupon_id)">推送</button>
              </div>
            </div>
            <div class="infos-tips">
              <div class="tip-shareMan">优惠券ID：{{item.coupon_id}}</div>
              <!-- <div class="tip-commision">佣金：¥ {{item.commision}}</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { ApiTestCfPost, ApiTestEaPost } from "@/api/test/main";
import { ApiEaPost, ApiEaActiveList } from "@/api/test/test";
import { configWx, getUserInfo } from "@/utils/aCommon";
// import * as APISidebarEA from "@/api/sidebar/ea";
import { getVoucherList, getVoucherWxUrl } from "@/api/sidebar/ea";
import { getUserInfoByUserId } from "@/api/sidebar/voucher";
import Vue from "vue";
import { Field } from "vant";
const zlog = console.log.bind(console);

Vue.use(Field);

export default {
  name: "discountIndex",
  data() {
    return {
      zcache: {
        storeId: 1,
        userId: "",
        unionId: "",
        userInfo: "",
        defaultImgUrl: "/mainSale/2.png",
        now: {
          activeId: "",
          voucherId: "",
        }
      },
      zlist: {
        voucher: [],
        voucherUrl: ""
      },
      test: {
        list: {
          main: [
            {
              imgUrl: "/mainSale/test-city.png",
              usedPercent: "10",
              money: "100",
              shareMan: "Alice",
              commision: "11"
            },
            {
              imgUrl: "/mainSale/test-city.png",
              usedPercent: "20",
              money: "200",
              shareMan: "Bob",
              commision: "22"
            }
          ]
        }
      },
      dis: {}
    };
  },
  created() {
    if(this.$route.params.userId) {
      this.zcache.userId = this.$route.params.userId;
    }else {
      this.zcache.userId = sessionStorage.getItem("userId")
    }    
    this.zReadyGetUserFromId();
    this.getAgentAuth();
    // this.zReadySetVoucherList()
  },
  mounted() {
  },
  methods: {
    // 测试-获取预授权码
    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);
      // window.location.href = url
    },
    zReadyGetUserFromId() {
      let postData = {
        userName: this.zcache.userId
      }
      getUserInfoByUserId(postData)
        .then(res => {
          // alert(`--->userInfoFromId: res = ${JSON.stringify(res.data)}`);
          // this.zcache.userInfo = String(res.data[0].departmentId);
          if(res.data[0].oyStallCode == '') {
            alert('您当前没有绑定店铺')
          }else {
            this.zcache.storeId = res.data[0].oyStallCode
            // this.zcache.storeId = Number(res.data[0].stall);
            this.zReadySetVoucherList()
          }         
        })
        .catch(err => {})
    },
    // 获取优惠券列表
    zReadySetVoucherList() {
      this.zReadyDelVoucherList();
      const postData = {
        appCode: "0696",    // j接口编码
        mdid: this.zcache.storeId 
      }
      getVoucherList(postData).then(res => {
        if(res.result.coupons.length == 0) {
          alert('当前店铺暂无优惠券可发放')
        }else {
          this.zVoucherSet(res.result.coupons)
        }
        })
        .catch(err => {
        })
    },
    zReadyDelVoucherList() {
      this.zVoucherDel()
      this.zVoucherUrlDel()
    },

    zVoucherPick(inActiveId, inVoucherId) {
      this.zcache.now.activeId = String(inActiveId)
      this.zcache.now.voucherId = String(inVoucherId)

      this.zVoucherUrlDel()

      const postData = {
        appCode: "0697",
        action_id: Number(inActiveId),
        coupon_id: Number(inVoucherId)
      }
      getVoucherWxUrl(postData).then(res => {
        this.zVoucherUrlSet(res.result.link)
      });
    },

    zpick(inMsgType, inUrl) {
      switch (inMsgType) {

        case "text":
          wx.invoke(
            "sendChatMessage",
            {
              msgtype: "text", //消息类型，必填
              text: {
                content: inUrl
              }
            },
            function(res) {
              if (res.err_msg == "sendChatMessage:ok") {
                // alert("--->discount.vue: zpick: text 分享成功！")
              } else if (res.err_msg != "sendChatMessage:ok") {
                // alert('分享失败')
              }
            }
          );
          break;
        case "h5":
          // alert(`--->discount.vue: zpick: H5: IN.`);
          // alert('zpick')
          wx.invoke(
            "sendChatMessage",
            {
              msgtype: "news", //消息类型，必填
               news: {
                link: `http://oysales.oywanhao.com/qrCode?Url=${inUrl}&activeId=${this.zcache.now.activeId}&voucherId=${this.zcache.now.voucherId}&unionId=1234`, //H5消息页面url 必填
                title: "领取优惠券", //H5消息标题
                desc: inUrl, //H5消息摘要
                imgUrl: inUrl //H5消息封面图片URL
              }
            },
            function(res) {
              // alert('sendChatMessage')
              if (res.err_msg == "sendChatMessage:ok") {
                // alert("--->discount.vue: zpick: h5 分享成功！")
              } else if (res.err_msg != "sendChatMessage:ok") {
                // alert(`--->discount.vue: zpick: h5 分享失败.`)
                // alert(
                //   `--->discount.vue: zpick: h5 分享失败: res =${res.err_msg}`
                // );
              }
            }
          );
          break;
        default:
          break;
      }
    },
    zVoucherSet(inArray) {
      // alert('zVoucherSet')
      this.zlist.voucher = inArray;

    },
    zVoucherDel() {
      this.zlist.voucher = [];
    },
    zVoucherUrlSet(inData) {
      this.zlist.voucherUrl = String(inData);
      this.zpick('h5', String(inData))
    },
    zVoucherUrlDel() {
      this.zlist.voucherUrl = "";
    },

    testEaPost() {
      let postData = {
        appCode: "0696",
        mdid: 1
      };
      ApiEaActiveList(postData).then(res => {
        // console.log(res);
      });
    },

    buttonSingleMarketingClick() {
      // this.$router.push("");
    },
    buttonMainMarketingClick() {
      this.$router.push("MainSale");
    }
  }
};
</script>

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

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

.tops {
  border: 2px solid lightblue;
  width: 100%;
  height: 100px;
}

.contents {
  /* border: 2px solid lightpink; */
  width: 100%;
  height: 100%;
  padding: 16px;
  padding-bottom: 40px;
}

.content {
  border: 0px solid orange;
  height: 100px;
  width: 100%;
  padding: 4px 0px;
  margin-bottom: 16px;

  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);

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

.content-imgs {
  /* border: 1px solid pink; */
  width: 20%;
  height: 100%;

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

.imgs-img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  border-radius: 50%;
  object-fit: cover;
}

.content-infos {
  /* border: 1px solid orange; */
  width: 80%;
  height: 100%;
}

.infos-mains {
  height: 70%;
  width: 100%;
  /* border: 1px solid green; */

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

.mains {
  /* border: 1px solid red; */
  width: 70%;
  height: 100%;

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

.main-usedPercent {
  font-size: 14px;
  color: grey;
}

.main-money {
  /* border: 1px solid lightgreen; */
  /* font-size: 24px; */
  font-size: 20px;
}

.buttons {
  /* border: 1px solid darkorange; */
  /* background-color: bisque; */
  width: 30%;
  height: 100%;

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

.button-send {
  border: 0px solid blue;
  height: 40px;
  width: 60px;
  border-radius: 4px;
  background-color: rgba(68, 93, 251, 1);
  color: white;

  font-size: 16px;
}

.infos-tips {
  height: 30%;
  width: 100%;
  /* border: 1px solid red; */
  border-top: 1px dashed gray;
  padding-top: 6px;

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

.tip-shareMan {
  /* border: 1px solid orange; */
  width: 70%;
  height: 100%;

  font-size: 14px;
  line-height: 16px;
  color: rgb(150, 150, 150);
}

.tip-commision {
  /* border: 1px solid green; */
  width: 30%;
  height: 100%;

  font-size: 14px;
  line-height: 16px;
  color: rgb(150, 150, 150);
}

.menus {
  border-top: 1px solid rgb(194, 194, 194);

  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background-color: white;

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

.menu {
  /* border: 1px solid red; */
  height: 50px;
  /* width: 120px; */
  width: 50%;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: black;
}

.activeMenu {
  color: lightcoral;
}

.zListActive {
  /*border: 1px solid limegreen;*/
  width: 100%;
  height: auto;
  margin-bottom: 16px;

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

.zListActive > .inputs {
  /*border: 1px solid dodgerblue;*/
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.zListActive > .inputs > .input {
  /*border-bottom: 2px solid red;*/
  border-color: dodgerblue;
  border-radius: 4px;
  width: 70%;
  height: 40px;
  font-size: 16px;
}

.zListActive > .inputs > .button {
  border: 1px solid dodgerblue;
  border-radius: 4px;
  width: 40%;
  height: 40px;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}

.zListActive > .lists {
  /*border: 1px solid red;*/
  width: 100%;
  height: auto;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.zListActive > .lists > .item {
  border: 1px solid red;
  width: 100%;
  height: 100px;
  margin-bottom: 16px;
  padding: 4px 4px;

  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  font-size: 14px;
}

.zListActive > .lists > .voucherUrl {
  border: 1px solid orange;
  width: 100%;
  height: 100px;
  margin-bottom: 16px;
  padding: 4px 4px;

  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 14px;
  /* text-wrap: none; */
}
</style>