在前面随笔《利用微信公众号实现商品的展示和支付(1)》介绍了商品的列表和明细信息的处理,本篇随笔接着上一篇,继续介绍关于商品的微信支付和购物车处理方面,其中微信支付里面,也涉及到了获取微信共享地址的处理,从而个更加方便录入邮寄地址信息;购物车可以从本地的localStorage对象进行获取和处理,也可通过接口获取数据库记录的购物车信息,本案例介绍通过localStorage进行购物车处理方式。
1、商品的微信支付处理
商品的微信支付处理,其中涉及了两个场景,一个是直接购买,一个是通过购物车的结算方式,两个处理界面有所差异,直接付款购买的界面是对当前选中商品进行单项的结算处理,默认数量为1;而购物车订单结算则是利用购物车的记录进行微信支付的处理,购物车可以从本地的localStorage对象进行获取和处理,也可通过接口获取数据库记录的购物车信息,本案例介绍通过localStorage进行购物车处理方式。
对选中商品直接结算界面如下所示。
购物车结算界面如下所示。
先来看看微信共享地址的处理界面,代码如下所示。
<!--配送地址处理-->
<div class="weui-panel">
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_small-appmsg">
<div class="weui-cells">
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p class="font-14"><span class="mg-r-10">配送地址</span><span class="fr"><a onclick="GetAddress()" class="weui-btn_mini weui-btn_primary">获取微信地址</a></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wy-media-box weui-media-box_text address-select">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l" style="width:20px;"><span class="promotion-label-tit"><img src="~/Content/wechat/web/images/icon_nav_city.png" /></span></div>
<div class="weui-media-box__bd">
<a href="/h5/address" class="weui-cell_access">
<h4 class="address-name"></h4>
<div class="address-txt"></div>
</a>
</div>
<div class="weui-media-box__hd proinfo-txt-l" style="width:16px;"><div class="weui-cell_access"><span class="weui-cell__ft"></span></div></div>
</div>
</div>
获取微信共享地址,需要配合微信的JSSDK的JS代码进行处理,如下是处理的代码。
<script language="javascript">
var appid = '@ViewBag.appid';
var noncestr = '@ViewBag.noncestr';
var signature = '@ViewBag.signature';
var timestamp = '@ViewBag.timestamp';
wx.config({
debug: false,
appId: appid, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: noncestr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getLocalImgData',
'openAddress'
]
});
//所有准备好后
wx.ready(function () {
});
//获取微信共享地址
function GetAddress() {
wx.openAddress({
success: function (res) {
var userName = res.userName; // 收货人姓名
var postalCode = res.postalCode; // 邮编
var provinceName = res.provinceName; // 国标收货地址第一级地址(省)
var cityName = res.cityName; // 国标收货地址第二级地址(市)
var countryName = res.countryName; // 国标收货地址第三级地址(国家)
var detailInfo = res.detailInfo; // 详细收货地址信息
var nationalCode = res.nationalCode; // 收货地址国家码
var telNumber = res.telNumber; // 收货人手机号码
//$.alert(`${detailInfo}`);
$(".address-name").html(`<span>${userName}</span><span>${telNumber}</span>`);
$(".address-txt").text(`${detailInfo}`);
}
});
}
</script>
而直接购买的产品信息,就是通过ID获取对应商品信息,绑定在控件上即可,如下界面代码所示。
<!--购买商品信息-->
<div class="wy-media-box weui-media-box_text">
<div class="weui-media-box__bd">
<div class="weui-media-box_appmsg ord-pro-list">
<div class="weui-media-box__hd"><a href="pro_info.html"><img id="productimg" class="weui-media-box__thumb" src="" alt=""></a></div>
<di