fanyunAi/pages/haibao.vue

<template>
	<view>
		<view style="color: #fff;">
			<tn-nav-bar :isBack="isBack" backgroundColor="#207cf7" :bottomShadow="false">生成海报</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>


		<!-- <u-button type="primary" @click="share_qrcode()">生成海报</u-button> -->
		<!-- <xq-generate-poster ref="draw" /> -->


		<!-- <button @click="authSub">授权</button> -->


		<view class="haibaoBox">
			<view class="picBox">
			<!-- 	<image class="image"
					src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5d88a972-1b34-43ed-8b3a-4a7ebbb900a1%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1709774078&t=fdeadb95e331fcac8780960e7f2e1629">
				</image> -->

				<XQ-GeneratePoster ref="draw" />
			</view>
			<view class="bgList">
				<!-- <view class="item"> -->
				<image @click="handleChangeBg(item,index)" class="image2 " :class="[curBgIndex==index?'image2_a':'']"
					v-for="(item,index) in bgList" :src="item">
				</image>
				<!-- </view> -->
			</view>
		</view>

	</view>
</template>

<script>
	// import XqGeneratePoster from '@/components/XQGeneratePoster.vue';
	// import XqGeneratePoster from '@/uni_modules/XQ-GeneratePoster/components/XQ-GeneratePoster/XQ-GeneratePoster.vue';
	import wechat from '@/common/wechat/sdk.js';
	export default {
		// components: { XqGeneratePoster },
		data() {
			return {
				tobheight: 45,

				curBgIndex: 0,
				bgList: [
					'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg',
					'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg',
					'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg',
					'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg',
					'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg'
				],


				option: {
					//绘制海报内容
					codeUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //小程序太阳码
					picUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //题库图片
					headUrl: 'https://pic1.zhimg.com/80/v2-b9df1fdfe67f2177d5c84af90dcadfc1_720w.jpg?source=1940ef5c', //头像
					bgUrl: require('@/static/shareBg.png'), //图片背景填充，和 fillStyle 只能传一个，bgUrl 优先级高于 fillStyle
					fillStyle: '#0688ff', //纯色背景填充颜色
					nickName: 'X艾拉', //授权登录的用户名
					miniName: '', //小程序名称
					tkName: '免费体验Al生成个人质感艺术照', //题库名称
					tkAuthor: '设计微信/抖音/小红书专属头像', //题库作者
					tkType: '考试', //题库类型
					cost: '免费', //是否需要收费   免费/付费
					isPub: '公开' //公开 还是 私有
				}
			};
		},
		onShow() {

			this.$nextTick(() => {
				this.share_qrcode()
			})

			// wechat.authSubscribe()

			// setTimeout(() => {
			// 	wechat.getLocation(() => {

			// 	})
			// }, 5000)


		},
		methods: {
			handleChangeBg(item, index) {

				this.curBgIndex = index
				console.log('handleChangeBg------------------', item);
				this.option.bgUrl = item
				this.share_qrcode()
			},
			authSub() {
				wechat.initJssdk()
				console.log('weichat---', wechat.authSubscribe);
				// wechat.authSubscribe((res) => {
				// 	uni.showToast({
				// 		title: res
				// 	})
				// })
			},

			share_qrcode() {
				this.$refs.draw.share_qrcode(this.option);
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import url('./haibao.scss');
</style>