最近在写点金计划。使用点金计划就可以更加丰富你的返回页面,可以在返回页面展示支付信息 小票和广告等。
在写之前建议先去看看文档:点金计划文档。
效果图:
![](https://img-blog.csdnimg.cn/img_convert/332991b10868fb6122df8c5bab96fec5.png)
一、开通点金计划
一次点击服务商功能–>点金计划–>开通计划
![](https://img-blog.csdnimg.cn/img_convert/1029a50cc3292523fd7db22f00753b69.png)
3. 填写接口人员最多填写5个,这个功能用来给开发者来调试点金计划的页面
二、配置点金计划的商家小票
在点金计划页面点击【商家小票链接配置】,在如图所在的位置,我这边已经是配置好了,这个链接就是服务商支付成功之后跳转的页面
![](https://img-blog.csdnimg.cn/img_convert/e3eb477f5aa55fc6086c1ac1a859227d.png)
下载微信验证文件
![](https://img-blog.csdnimg.cn/img_convert/85a0bbfd623d1a15abb2df0c1ace0bfd.png)
三、编写商家小票界面
我是用的uniapp来开发的微信公众号H5,所以在这里展示的代码是vue格式的,可以直接拿来用
<template>
<view>
<view style="text-align: center;">
<view v-for="item in list" style="text-align: center;">
<view style="margin-left: 100px;">
<uqrcode ref="item.skuName" canvas-id="item.skuNamee" :value="item.barCode"></uqrcode>
</view>
{{item.barCode}}
</view>
</view>
<u-button type="primary" size='medium' shape="circle" @click="toPage" :plain="true">返回查看订单</u-button>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
loading: true,
detail: {},
list: {},
codee: ''
};
},
async onLoad() {
const urlone = window.location.href;
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; //当前页面的全部信息
const route = currentPage.route; //当前路由的路径 pages/login/login
const options = currentPage.options; //url里面的参数json类型
},
async created() {
try {
document.querySelector("html").style.fontSize = "10px"; // 解决进入小票html 的font-size = 0 的问题
const urlone = window.location.href; //获取当前路径
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; //当前页面的全部信息
const route = currentPage.route; //当前路由的路径 pages/login/login
const options = currentPage.options; //url里面的参数json类型
let subMchId = options.sub_mch_id;
let outTradeNo = options.out_trade_no;
let checkCode = options.check_code;
let t = options.t;
let ss = await this.$myRequest({
url: 'index/out/listByCheckCode',
data: {
subMchId,
outTradeNo,
checkCode,
url: urlone
}
})
this.list = ss.data.date;
} catch (err) {
console.log(err)
}
},
mounted() {
const mchData = {
action: "onIframeReady",
displayStyle: "SHOW_CUSTOM_PAGE",
};
const postData = JSON.stringify(mchData);
window.parent.postMessage(postData, "*");
},
methods: {
toPage() {
// 跳转到指定的h5页面
const mchData = {
action: "jumpOut",
jumpOutUrl: `https://XXXX/XX?out_trade_no=${this.$route.query.out_trade_no}`,
}; // 跳转到指定的页面并携带参数
const postData = JSON.stringify(mchData);
window.parent.postMessage(postData, "*");
}
}
};
</script>
<style scoped>
</style>
付款完成之后,看到这个页面样式已经有了,说明已经成功了
本篇文章适合刚开始搞点金计划的人参考