<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"> <title>積分明細</title> <script type="text/javascript" src="<?php echo RESOURCE_SITE_URL ?>/points/require.js"></script> <script type="text/javascript" src="<?php echo RESOURCE_SITE_URL ?>/points/config.js"></script> <script type="text/javascript">require(['amazeui']);</script> </head> <body> <div id="vue-app"></div> <script type="text/x-template" id="well"> <div class="top am-g"> <div class="order-img am-u-sm-6"></div> <div class="info am-u-sm-6"> <p>積分 <span class="order-num">+{{member_info.member_points}}</span> </p> <button @click="sendScore" type="button" class="checked">贈送積分</button> </div> </div> </script> <script type="text/x-template" id="points"> <ul class="am-list"> <li class="border0"> <div class="content"> <p>收支明細</p> </div> </li> <li v-for="item in list" :key="item.pl_id"> <div class="content am-g"> <div class="time am-u-sm-2"> <p>{{item.date}}</p> <p class="am-text-xs">{{item.time}}</p> </div> <div class="details am-u-sm-7"> <p class="am-text-truncate">{{item.pl_desc}}</p> <p class="am-text-xs">{{item.day}}</p> </div> <div :class="{num:true, 'am-u-sm-3': true, reduce: item.pl_points < 0, plus: item.pl_points > 0}">{{item.pl_points}}</div> </div> </li> </ul> </script> </body> </html>
然后是js
require(['vue', 'jquery', 'http://res.wx.qq.com/open/js/jweixin-1.2.0.js', 'css!/data/resource/points/style/score-details.css'], function(Vue, $, wx) { Vue.component('points', { template: '#points', props: ['list'] }); Vue.component('well', { template: '#well', props: ['member_info', 'isCreated'], methods: { sendScore () { if(this.isCreated) { alert('分享數據已創建，點擊右上角菜單，分享給朋友領取'); } else { $('#my-prompt').modal(); } } } }); new Vue({ // el: '#vue-app', data: { member_info: {"member_id":"27","member_name":"ymjrgwd","member_truename":"","member_avatar":"\/data\/upload\/shop\/avatar\/avatar_27.jpg","member_sex":"0","member_birthday":null,"member_passwd":"e10adc3949ba59abbe56e057f20f883e","member_paypwd":"e10adc3949ba59abbe56e057f20f883e","member_email":"785578897@qq.com","member_email_bind":"1","member_mobile":"","member_mobile_bind":"0","member_qq":"","member_ww":"","member_login_num":"72","member_time":"1438330582","member_login_time":"1494206840","member_old_login_time":"1493691486","member_login_ip":"","member_old_login_ip":"","member_qqopenid":null,"member_qqinfo":"10","member_sinaopenid":null,"member_sinainfo":null,"member_points":"245","available_predeposit":"49914.00","freeze_predeposit":"0.00","available_rc_balance":"0.00","freeze_rc_balance":"0.00","inform_allow":"1","is_buy":"1","is_allowtalk":"1","member_state":"1","member_snsvisitnum":"21","member_areaid":null,"member_cityid":"0","member_provinceid":"0","member_areainfo":"","member_privacy":null,"member_quicklink":null,"member_exppoints":"255","inviter_id":"0","openid":null,"invite_at":"0","inviter_name":"","alipay_account":null,"alipay_account_name":"","alipay_account_phone":"","pdc_bank_name":null,"pdc_bank_no":null,"pdc_bank_user":null,"pdc_bank_phone":null,"member_id_no":null,"member_age":"0","freeze_points":"0"}, points_list: [], page: 0, size: 10, finished: false, score: '', store_info: {"store_id":"7","appid":"wxae950948a16763b4","appsecret":"d0fddcfef6830cd41b0f53e3958436fa","encodingaeskey":"ymjr","token":"weixin","siteurl":"http:\/\/wx.yimayholiday","mchid":"1436606002","mchid_key":"bMkqpDWqFSxTUJypesGYBtUqqTSIvdKY","js_api_call_url":"http:\/\/wx.yimayholiday.com\/wap_shop\/api\/payment\/wxpay\/js_api_call.php","notify_url":"http:\/\/wx.yimayholiday.com\/wap_shop\/api\/payment\/wxpay\/notify_url.php","sslcert_path":"cert\/7\/apiclient_cert.pem","sslkey_path":"cert\/7\/apiclient_key.pem","qr":null}, jsapi_config: [], isCreated: false, }, methods: { bindScroll() { if(document.body.scrollTop + window.innerHeight >= document.body.clientHeight-10){ setTimeout(this.loadPointsList(),5000); } // if($(document).scrollTop() + $(window).height() > $(document).height() - 10) { // this.loadPointsList(); // } }, loadPointsList() { if(this.finished){ return true; } $.get('index.php?act=member&op=score&do=load', {page: this.page, size: this.size}, function(response) { if(response.code == 1){ this.page ++; this.points_list = this.points_list.concat(response.data); if(response.data.length < this.size){ this.finished = true; } } }.bind(this), 'json'); }, sendScore: function(){ var score = parseInt(this.score) || 0; if(score <= 0){ this.score = ''; alert('請輸入您要贈送給TA的積分數'); return false; } if(score > this.member_info.member_points){ alert('積分不足'); this.score = ''; return false; } //do something var that = this; // that.jsapi_config.debug = true; wx.config(that.jsapi_config); if($.isEmptyObject(that.jsapi_config.appId)){ alert('請在微信中打開分享'); return; } $.post('index.php?act=member&op=shareScore', {score: score}, function(response){ if(response.code == 1){ that.member_info.member_points -= score; that.isCreated = true; wx.ready(function(){ var url = new URLSearchParams(); url.append('act', 'member'); url.append('op', 'getScore'); url.append('points_id', response.data.id); url.append('store_id', that.store_info.store_id); url.append('store_member_info', that.store_info.store_id); var query = url.toString(); var sharedata = { title : that.store_info.store_name, desc :'你的朋友' + that.member_info.member_name + '給你贈送了' + score + '積分，快來領取吧', imgUrl : that.member_info.member_avatar, link :'/points/index.php?' + query, success: function(){ }, cancel: function(){ $.post('index.php?act=member&op=cancelScore', {id: response.data.id}, function(req){ alert(req.msg); that.member_info.member_points += score; }, 'json'); } }; wx.onMenuShareAppMessage(sharedata); wx.onMenuShareTimeline(sharedata); alert('點擊右上角菜單，分享給朋友領取'); }); } else { alert(response.msg); } }, 'json'); } }, mounted () { setTimeout(this.loadPointsList(),5000); window.addEventListener('scroll', this.bindScroll); }, template: `<div class="container"><div class="score-details"> <well :member_info="member_info" :isCreated="isCreated"></well> <div class="bottom"> <points :list="points_list"></points> </div> <button type="button" @click="this.loadPointsList" v-show="finished">扯到底了</button> <div class="loading" v-show="!finished" ><span></span><span></span><span></span><span></span><span></span></div> </div> <!-- 模態框 --> <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt" style="display: none;"> <div class="am-modal-dialog"> <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>×</a> <div class="am-modal-bd"> 請輸入您要贈送給TA的積分數 <input type="text" class="am-modal-prompt-input" v-model="score"> </div> <div class="am-modal-footer"> <button class="checked am-modal-btn" style="border-right: 1px solid #f74828" @click="sendScore">確定</button> </div> </div> </div></div>` }).$mount('#vue-app'); })