eduepos_ui_store/pages/store/codeinfo.vue

<template>
    <view class="qrcode-info">
        <view class="cover-bg">
            <image class="qrcode" :src="backImgUrl" />
			<qrcode-poster ref="poster" :backImagUrl="backImgUrl" :memberName="haibao.memberName"
				:qdImageUrl="code" :codeType="codeType"
				></qrcode-poster>
        </view>
        <view class="desc">
            注：可直接生成店铺专用小程序码，并可保存手机相册，用于店铺宣传。
        </view>
        <view class="save" @click="save">生成推广码</view>
    </view>
</template>
<script>
import QrcodePoster from '@/components/qrcode-poster/qrcode-poster.vue';
import { mapState } from 'vuex';
export default {
	components: {
		QrcodePoster
	},
    data () {
        return {
            getCodeUrl: (getApp().globalData.platApiUrl || getApp().globalData.apiUrl) + '/api/storeQrCodeManage/getStoreQrCode',
			code: {},
			backImgUrl: '',
			codeType: ''
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		getCode() {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			uni.showLoading({
				title: '获取小程序码中'
			})
			this.requst({
				url: this.getCodeUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					code: this.storeInfo.code
				},
				success: res => {
					uni.hideLoading()
					if (res.data.rtnBean.rtnCode == 0) {
						this.code = res.data.obj;
						this.$refs.poster.showCanvas();
						console.log('object :>> ', this.code);
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading()
				}
			})
		},
        save () {
			this.getCode()
			// this.$refs.poster.showCanvas();
        },
        // downLoadImg(){
        //     uni.downloadFile({
        //         url: this.url,
        //         success: (res) =>{
        //             if (res.statusCode === 200){
        //                 uni.saveImageToPhotosAlbum({
        //                     filePath: res.tempFilePath,
        //                     success: function() {
        //                         uni.showToast({
        //                             title: "保存成功",
        //                             icon: "none"
        //                         });
        //                     },
        //                     fail: function() {
        //                         uni.showToast({
        //                             title: "保存失败，请稍后重试",
        //                             icon: "none"
        //                         });
        //                     }
        //                 });
        //             }
        //         }
        //     })
        // },
        //引导用户开启权限
        isAuth() {
            uni.showModal({
                content: '无法进行保存,请点击确定允许授权',
                success: (res) => {
                    if (res.confirm) {
                        uni.openSetting({
                            success: (result) => {
                                console.log(result.authSetting);
                            }
                        });
                    }
                }
            });
        }
    },
    onLoad (opt) {
        console.log('opt :>> ', opt);
		this.backImgUrl = opt.src
		this.codeType = opt.id
		// if (opt.id != null && opt.id != '' && opt.id != undefined){
			
		// }
    }
}
</script>
<style lang="scss" scoped>
.cover-bg {
    height: 760rpx;
    // background-color: #E5CB1E;
    margin-bottom: 100rpx;
    .qrcode {
        width: 440rpx;
        height: 774rpx;
        position: absolute;
        top: 50rpx;
        left: calc((100% - 440rpx) / 2);
        background-color: #fff;
    }
}
.desc {
    font-size: $font-base;
    color: $desc-color;
    padding: 0 30rpx;
}
.save {
    width: 80%;
    height: 80rpx;
    border-radius: 40rpx;
    position: fixed;
    left: 10%;
    bottom: calc(20rpx + env(safe-area-inset-bottom));
    bottom: calc(20rpx + constant(safe-area-inset-bottom));
    background-color: $light-color;
    color: #fff;
    font-size: 36rpx;
    @include flexCenter;
}
</style>