mobile_h5/shop/pages/index/index.vue

<template>
	<view class="body body-bg">
		<view class="main uni-column">
			<text class="shopname">{{shopInfo.shopName}}</text>
			<text class="button" @click="btnScanQR">扫码兑换</text>
			<text class="button" @click="btnExchgRecord">兑换记录</text>
			<!-- <text class="">{{qrCode}}</text> -->
		</view>
	</view>
</template>

<script>
	import tools from '/common/tools';
	import {
		apiVerfExchange,
		apiGetWxJsSdkConfig,
		checkResCode
	} from '../../common/api.js';

	import wx from 'weixin-js-sdk';

	export default {
		data() {
			return {
				token: "",
				wxcode: "",
				wxconfig: {},
				shopInfo: {
					shopName: ""
				},
				qrCode: ""
			}
		},
		onLoad() {
			this.token = tools.getToken();
			// console.log("token:", this.token);
			tools.checkToken(this.token);

			this.shopInfo = tools.getShopInfo();
			// console.log("shopInfo:", this.shopInfo);

			this.getWxJsSdkConfig();
		},
		methods: {
			// 获取微信JsConfig
			getWxJsSdkConfig() {
				let that = this;
				var url = location.href.split('#')[0]; //获取当前网页的url
				// console.log("url ", url);
				uni.request({
					url: apiGetWxJsSdkConfig,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					method: "POST",
					data: {
						url: url
					},
					success: (res) => {
						// console.log("getWxJsSdkConfig", res);
						that.wxconfig = res.data.data;

						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: that.wxconfig.appId, // 必填，公众号的唯一标识
							timestamp: that.wxconfig.timestamp, // 必填，生成签名的时间戳
							nonceStr: that.wxconfig.nonceStr, // 必填，生成签名的随机串
							signature: that.wxconfig.signature, // 必填，签名
							jsApiList: ['checkJsApi', 'scanQRCode'] // 必填，需要使用的JS接口列表
						});
					},
					fail: (err) => {
						console.log("getWxJsSdkConfig err", err);
					},
				});
			},
			btnScanQR() {
				try {
					let that = this;
					wx.ready(function() {
						wx.scanQRCode({
							needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
							scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
							success: function(res) {
								console.log("scanQRCode result: ", res);
								that.qrCode = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
								that.verfExchange();
							}
						});
					});

					wx.error(function(res) {
						// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
						console.log("wx.error:", res);
					});
				} catch (e) {
					console.log("btnScanQR err:", e.message);
				}
			},
			// 商家系统核销
			verfExchange() {
				uni.request({
					url: apiVerfExchange,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						qrCode: this.qrCode
					},
					success: (res) => {						
						console.log("verfExchange", res);
						if (checkResCode(res)) {
							uni.showToast({
								icon: "success",
								title: "核销成功",
								duration: 2000
							});
						}
					},
					fail: (err) => {
						console.log("verfExchange err", err);
						uni.showToast({
							icon: "error",
							title: "核销失败",
							duration: 3000
						});
					},
				});
			},
			btnExchgRecord() {
				uni.navigateTo({
					url: "/pages/exchgRecord/exchgRecord"
				})
			}
		}
	}
</script>

<style scoped>
	.body-bg {
		width: 100vw;
		height: 100vh;
		background: url("/static/bg_index.png") no-repeat;
		background-size: 100% 100%;
	}

	.main {
		width: 90%;
		height: 60%;
		justify-content: space-evenly;
	}

	.shopname {
		font-weight: 500;
		color: #000000;
		font-size: 30px;
		text-align: center;
	}

	.button {
		width: 230px;
		height: 80px;
		background: linear-gradient(180deg, #ffffff 0%, #ebebeb 71.96%, #ffffff 100%);
		border: 1px solid;
		border-color: #d8d8d8;
		border-radius: 42px;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

		text-align: center;
		line-height: 80px;
		font-weight: 500;
		color: #000000;
		font-size: 29px;
	}
</style>