|
|
@@ -421,12 +421,16 @@
|
|
|
<!-- 用于生成带支付宝背景和文字的结账二维码 -->
|
|
|
<canvas canvas-id="shareCanvas" style="width: 360px; height: 490px; position: fixed; left: -9999px; top: -9999px; z-index: -1;"></canvas>
|
|
|
|
|
|
+ <!-- 支付宝结账海报弹窗 -->
|
|
|
+ <item-poster-popup ref="itemPosterPopup" :poster-url="posterUrl" @close="closePoster" @save="savePosterImg" />
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import TuiListCell from '@/components/plugin/list-cell'
|
|
|
import { share } from "@/mixins";
|
|
|
import ModalModule from "@/components/plugin/modal"
|
|
|
+import ItemPosterPopup from '@/components/item-poster-popup.vue'
|
|
|
import { getUserDet,debt} from "@/api/member";
|
|
|
import { IMGHOST } from '@/config'
|
|
|
import { mapGetters } from "vuex"
|
|
|
@@ -437,7 +441,7 @@ import { getAllWl } from "@/api/shop"
|
|
|
export default {
|
|
|
name: "detail",
|
|
|
components: {
|
|
|
- TuiListCell,ModalModule
|
|
|
+ TuiListCell,ModalModule,ItemPosterPopup
|
|
|
},
|
|
|
mixins: [share],
|
|
|
props: {},
|
|
|
@@ -521,7 +525,8 @@ export default {
|
|
|
title:'付款结账',
|
|
|
needRefresh:0,
|
|
|
allDist:[],
|
|
|
- currentDist:{}
|
|
|
+ currentDist:{},
|
|
|
+ posterUrl: '' // 支付宝结账海报临时本地/线上链接
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -611,6 +616,11 @@ export default {
|
|
|
* @param {String} qrPath 二维码本地临时路径
|
|
|
* 职责：通过 Canvas 绘制支付宝蓝色背景（带圆角剪裁）、白色圆角卡片、二维码图片、以及“推荐使用支付宝”、“支付宝扫一扫”等文字，最后导出并保存到用户相册。
|
|
|
*/
|
|
|
+ /**
|
|
|
+ * @description 使用 Canvas 绘制支付宝收款码海报并打开弹窗展示，不直接保存
|
|
|
+ * @param {String} qrPath 二维码本地临时路径
|
|
|
+ * 职责：通过 Canvas 绘制支付宝蓝色背景（带圆角剪裁）、白色圆角卡片、二维码图片、以及“推荐使用支付宝”、“扫一扫，向商家付款”等文字，最后导出并打开海报弹窗。
|
|
|
+ */
|
|
|
drawAlipayPoster(qrPath) {
|
|
|
const that = this
|
|
|
const ctx = uni.createCanvasContext('shareCanvas', this)
|
|
|
@@ -679,7 +689,7 @@ export default {
|
|
|
|
|
|
ctx.restore() // 恢复画布状态
|
|
|
|
|
|
- // 8. 渲染并导出保存
|
|
|
+ // 8. 渲染并导出至临时路径，然后打开弹窗
|
|
|
ctx.draw(false, () => {
|
|
|
// 延迟 300ms 确保 Canvas 渲染引擎已完全绘制，防止部分平台导出空白图片
|
|
|
setTimeout(() => {
|
|
|
@@ -689,16 +699,8 @@ export default {
|
|
|
quality: 1,
|
|
|
success: (res) => {
|
|
|
uni.hideLoading()
|
|
|
- // 保存图片到系统相册
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
- filePath: res.tempFilePath,
|
|
|
- success: () => {
|
|
|
- uni.showToast({ title: '保存成功', icon: 'success' })
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- uni.showToast({ title: '保存失败，请检查相册权限', icon: 'none' })
|
|
|
- }
|
|
|
- })
|
|
|
+ that.posterUrl = res.tempFilePath
|
|
|
+ that.$refs.itemPosterPopup.open()
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
uni.hideLoading()
|
|
|
@@ -707,6 +709,25 @@ export default {
|
|
|
}, that)
|
|
|
}, 300)
|
|
|
})
|
|
|
+ },
|
|
|
+ closePoster() {
|
|
|
+ this.$refs.itemPosterPopup.close()
|
|
|
+ },
|
|
|
+ savePosterImg() {
|
|
|
+ const that = this
|
|
|
+ uni.showLoading({ title: '正在保存...', mask: true })
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: this.posterUrl,
|
|
|
+ success() {
|
|
|
+ uni.hideLoading()
|
|
|
+ that.$refs.itemPosterPopup.close()
|
|
|
+ uni.showToast({ title: '保存成功', icon: 'success' })
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({ title: '保存失败，请检查相册权限', icon: 'none' })
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
inviteToPay(){
|
|
|
let that = this
|
