开发微信公众号-分享功能

<template>
  <div class="appointment">
    <form action>
      <article style="margin-top:0.7rem;" v-for="item in sites">
        <section>
          <div class="imgList">
            <img :src="item.logo" alt>
            <div style="padding-top: 0.1rem;">
              <p style="padding-bottom:0.2rem;">{{item.name}}</p>
              <p style="color:#9b9ba1">{{item.startTime}}</p>
              <div class="info">
                <a href="#"  v-for='(tab,index) in (item.fcLabel).split(",")' :class="{bg1:index%2==0,bg2:index%2!=0}">{{tab}}</a>
              </div>
            </div>
          </div>

          <div style="margin-top:0.6rem" class="clearfix">
            <div class="info" style="float:right">
              <a href="#" class="green" id="shareBtn" @click="share">分享</a>
              <a href="#" class="red" @click="cancelFreeClinic(item.id)">取消预约</a>
            </div>
          </div>
        </section>
      </article>
    </form>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from 'mint-ui'; //弹出框
export default {
  name: "appointment",
  data() {
    return {
      sites: '',
      pageSize: 10,
      pageNum: 1
    };
  },
  methods: {
    fn() {
      var _this = this;
      Indicator.open({
        text: "加载中...",
        //文字
        spinnerType: "fading-circle"
        //样式
      });
      var form = new FormData();
      form.append("pageSize", this.pageSize);
      form.append("pageNum", this.pageNum);
      this.axios
        .post(
          this.GLOBAL.serverSrc + "patient/data/fcActivityBookingList",
          form
        )
        .then(function(response) {
          Indicator.close();
          console.log(response.data.rows);
          _this.sites = response.data.rows; //筛选的数据
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    share() {  //分享
      var _this=this;    
      console.log("share");
      this.axios
        .post(this.GLOBAL.serverSrc + "patient/data/getWchartShareConfig")
        .then(function(response) {
          console.log(response.data.info);
          _this.initWeChatShare(response.data.info)
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    initWeChatShare(data) {  //分享
      var wxConfig = {
        debug: true,
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: [
          "onMenuShareTimeline",
          "onMenuShareAppMessage",
          "checkJsApi",
          "updateAppMessageShareData",
          "updateTimelineShareData"
          
        ]
      };
      wx.config(wxConfig);
      console.log(JSON.stringify(wxConfig));
       wx.ready(function () {
          wx.checkJsApi({
			    jsApiList: [
			        'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'updateAppMessageShareData',
              'updateTimelineShareData'
			           
			    ]
			});
         console.log('11111111');
         wx.onMenuShareTimeline({
		    title: '分享', // 分享标题
		    link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl:'imageUrl', // 分享图标
		    success: function () {
		    	alert('success')
			},
			cancel: function () {
			    // 用户取消分享后执行的回调函数
				cancel();
			}
    });
    wx.onMenuShareAppMessage({
	         title: '分享', // 分享标题
		    link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl:'imageUrl', // 分享图标
	        type: 'link', // 分享类型,music、video或link，不填默认为link
	        success: function () { 
	        	alert('success')
	        },
	        cancel: function () { 
	        	cancel();
	        }
	    });
         wx.updateAppMessageShareData({
		    title: '分享', // 分享标题
		    link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl:'', // 分享图标
		    success: function () {
          // success();
         alert('分享成功')
			},
			cancel: function () {
			    // 用户取消分享后执行的回调函数
        // cancel();
        alert('分享失败')
			}
    });
    wx.updateTimelineShareData({
	        title: '分享', // 分享标题
	        link: data.url, // 分享链接
	        // imgUrl: imageUrl, // 分享图标
	        type: 'link', // 分享类型,music、video或link，不填默认为link
	        success: function () { 
            // success();
               alert('分享成功')
	        },
	        cancel: function () { 
            // cancel();
             alert('分享失败')
	        }
      });
       })
       

		
	    
		
       wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            alert ("errorMSG:"+res);
        });
      
    },
    cancelFreeClinic(id){ //取消预约
      console.log(id);
      var form = new FormData();
      form.append("fcActivityId", id);
      this.axios
        .post(
          this.GLOBAL.serverSrc + "patient/data/cancelFreeClinic",
          form
        )
        .then(function(response) {
           Toast({
                  message: response.data.msg,
                  iconClass: 'icon icon-success'
                });
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    this.fn();
  }
};
</script>

<style scoped>
.bg2 {
    background-color: #f19149!important;
}
p {
  padding-bottom: 0.3rem;
}
.imgList {
  display: flex;
  padding-bottom: 0.7rem;
  border-bottom: 0.01rem solid #217788;
}
article {
  width: 17.25rem;
  background: #ededed;
  margin: 0 auto;
  padding: 0.7rem 0;
  margin-bottom: 0.7rem;
  border-radius: 0.18rem;
}
section {
  padding: 0 0.375rem;
}
img {
  width: 3.25rem;
  height: 3.25rem;
  margin-right: 0.3rem;
}
.bottom {
  width: 16.25rem;
  padding-top: 0.7rem;
  margin: 0 auto;
}

.search {
  width: 17.25rem;
  margin: 0 auto;
  text-align: center;
  margin-top: 0.7rem;
}
.search input {
  width: 100%;
  height: 1.5rem;
  border: 0.07rem solid #217788;
  border-radius: 1rem;
  background: #fff;
}

.info a {
  display: inline-block;
  padding: 0 0.3rem;
  height: 1rem;
  background: #72ae52;
  color: #fff;
  line-height: 1rem;
  text-align: center;
  border-radius: 0.2rem;
  margin-right: 0.25rem;
}

.red {
  background: #b53838 !important;
}
.purple {
  background: #4c4a93 !important;
}
.dpurple {
  background: #593971 !important;
}
.orange {
  background: #f19149 !important;
}
</style>