index.vue

<template>
    <div class="register_container">
        <div v-for="(item, index) of list" :key="index" >
            <div class="list">
                <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>
                <button class="button-send" @click="sendMessage">邀请</button>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'register',
    data() {
      return {
        list:[
          {
            name: "会员拉新",
            dsc: "推荐完成注册，完成会员拉新",
            logoUrl: "/mainSale/4.png"
          }
        ]
      }
    },
    created() {
      this.getAgentAuth();
    },
    mounted(){

    },
    methods:{
      sendMessage(){
        const url = 'http://www.baidu.com'
        wx.invoke(
          "sendChatMessage",
          {
            msgtype: "news", //消息类型，必填
            news: {
              link: "http://qywx2.100smartdata.com/register", //H5消息页面url 必填
              title: "会员拉新", //H5消息标题
              desc: "注册成为欧亚会员", //H5消息摘要
              imgUrl: "" //H5消息封面图片URL
            }
            /* news:
            {
              link: url, //H5消息页面url 必填
              title: "", //H5消息标题
              desc: "", //H5消息摘要
              imgUrl: "", //H5消息封面图片URL
            } */
          },
          function(res) {
            alert('sendChatMessage')
            if (res.err_msg == "sendChatMessage:ok") {
              alert('发送成功')
              // alert("--->register.vue: zpick: h5 分享成功！");
            } else if (res.err_msg != "sendChatMessage:ok") {
              alert('发送失败')
              // alert(`--->register.vue: zpick: h5 分享失败.`);
            }
          }
        );
      }
    }
  }
</script>
<style lang="scss" scoped>
    .register_container{
        padding: 4px 12px 40px 12px;
        .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 {
                width: 80px;
                height: 80px;
                border-radius: 6px;
            }
            .list-infos {
                height: 80px;
                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;
            }
            .button-send {
                border: 0px solid blue;
                margin-left: 5px;
                height: 40px;
                width: 84px;
                border-radius: 4px;
                background-color: rgba(68, 93, 251, 1);
                color: white;
                font-size: 16px;
            }
        }
    }
</style>