feat(workbenchManage): 新增分享海报功能并优化绑定用户页面

- 在`bindUser`页面中新增分享海报功能，用户可保存海报到相册
- 优化绑定用户页面样式，添加背景图片和点击事件
- 新增`configPopup`组件用于展示配置信息
- 调整`myLevel`页面组件，添加`dataInfo`属性传递数据

components/configPopup.vue

@@ -0,0 +1,55 @@
+<template>
+	<view class="configPopup">
+		<up-popup :show="showConfirmOrder" mode="bottom" @close="close" :round="10" :closeable="true"
+			:safeAreaInsetBottom="false">
+			<view class="content">
+				<up-parse :content="content"></up-parse>
+			</view>
+		</up-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState, mapGetters } from 'vuex'
+	export default {
+		name: 'configPoup',
+		data() {
+			return {
+				content : '',
+				showConfirmOrder : false,
+			}
+		},
+		onShow(){
+		},
+		methods: {
+			//打开配置信息菜单
+			open(key){
+				this.content = this.configList[key].paramValueArea
+				this.showConfirmOrder = true
+			},
+			openText(content){
+				this.content = content
+				this.showConfirmOrder = true
+			},
+			close(){
+				this.showConfirmOrder = false
+			},
+		},
+		computed : {
+			...mapGetters(['configList'])
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.configPopup {
+		.content{
+			min-height: 50vh;
+			max-height: 70vh;
+			padding: 30rpx 20rpx;
+			overflow: scroll;
+			height: 100%;
+			box-sizing: border-box;
+		}
+	}
+</style>

otherPages/workbenchManage/bindUser/index.scss

@@ -38,14 +38,17 @@
 }
 .bind-main-one{
   text-align: center;
-  background: #FAE7E3;
+  // background: #FAE7E3;
   border-radius: 20rpx;
   padding: 40rpx 60rpx;
+  background-size: 100% 100%;
+  // background-image: url('https://image.hhlm1688.com/2025/03/29d85e1fc00ba64d3496fdc5c79be35ff6组件 88 – 1.png');
 }
 .bind-main-two{
   text-align: center;
   background: #D0E5F9;
   border-radius: 20rpx;
+  background-size: 100% 100%;
   padding: 40rpx 50rpx;
 }
 .bind-main-three{
@@ -53,6 +56,7 @@
   background: #FDE7C5;
   border-radius: 20rpx;
   padding: 40rpx 50rpx;
+  background-size: 100% 100%;
 }
 .label1 {
 	width: 120rpx;

otherPages/workbenchManage/bindUser/index.vue

@@ -6,7 +6,7 @@
 				<view class="header-name">
 					<view class="font32 mb20" :style="{color:'#000'}">{{ userInfo?.userName}}</view>
 					<view class="label1">
-						初级合伙人
+						{{ baseInfo.partner_level }}
 					</view>
 					<view class="flex font24">
 						<view :style="{color:'#A55822'}">当前分成比例：
@@ -19,7 +19,8 @@
 				</view>
 			</view>
 			<view class="flex flex-evenly mt60">
-				<view class="header-card card-left box-size">
+				<view class="header-card card-left box-size"
+					@click="configPopupRef.open('pet_attention_details')">
 					<view class="flex-between flex">
 						<view class="mr20">
 							<view class="mb20 ml20" :style="{color:'#A55822',fontWeight:'bold',fontSize:'30rpx'}">推广攻略
@@ -30,7 +31,8 @@
 							width="71rpx" height="85rpx"></up-image>
 					</view>
 				</view>
-				<view class="header-card card-right box-size">
+				<view class="header-card card-right box-size"
+					@click="configPopupRef.open('pet_attention_details')">
 					<view class="flex flex-between">
 						<view class="mr20">
 							<view class="mb20 ml20" :style="{color:'#A55822',fontWeight:'bold',fontSize:'30rpx'}">推广教程
@@ -43,51 +45,77 @@
 				</view>
 			</view>
 		</view>
+		
+		<!-- 
+			:style="{'background-image' : `url(${configList.background_popularize_one.paramValueImage})`}" -->
+		
 		<view class="bind-main">
-			<view class="bind-main-one mb10">
+			<view class="bind-main-one mb10"
+			:style="{'background-image' : `url('${configList.background_popularize_one.paramValueImage}')`}">
 				<view class="mb20 font32">邀请码邀请</view>
 				<view class="mb20">用户输入邀请码，直接完成绑定</view>
-				<up-input disabled v-model="userInfo.invitationCode">
+				<up-input disabled v-model="dataF.code">
 					<template #suffix>
-						<up-button @click="copyMessage(code)" text="复制" type="success" size="small" shape="circle"></up-button>
+						<up-button @click="copyMessage(dataF.code)" text="复制" type="success" size="small" shape="circle"></up-button>
 					</template>
 				</up-input>
 			</view>
-			<view class="bind-main-two mb10">
+			<view class="bind-main-two mb10"
+			:style="{'background-image' : `url('${configList.background_popularize_two.paramValueImage}')`}">
 				<view class="mb20 font32">分享海报邀请</view>
 				<view class="mb20">扫码进入猫妈狗爸完成绑定</view>
-				<up-button text="保存海报" type="primary" shape="circle" plain style="background: transparent;"></up-button>
+				<up-button @click="toSharing" text="保存海报" type="primary" shape="circle" plain style="background: transparent;"></up-button>
 			</view>
-			<view class="bind-main-three">
+			<view class="bind-main-three"
+			:style="{'background-image' : `url('${configList.background_popularize_three.paramValueImage}')`}">
 				<view class="mb20 font32">分享链接邀请</view>
 				<view class="mb20">复制链接给好友，进入直接绑定</view>
-				<up-input disabled v-model="url">
+				<up-input disabled v-model="dataF.code">
 					<template #suffix>
-						<up-button @click="copyMessage(url)" text="复制" type="success" size="small" shape="circle"></up-button>
+						<up-button @click="copyMessage(dataF.code)" text="复制" type="success" size="small" shape="circle"></up-button>
 					</template>
 				</up-input>
 			</view>
 		</view>
+		
+		<configPopup ref="configPopupRef" />
 	</view>
 </template>
 
 <script setup>
 	import {
 		computed,
-		ref
+		ref,
+		onMounted,
 	} from "vue";
 	import {
 		useStore
 	} from "vuex"
+	
+	import {
+		binBaseInfo,
+		bindCode,
+	} from "@/api/home.js"
+	
+	import configPopup from '@/components/configPopup.vue'
+	
+	const store = useStore();
+	
+	
+	const dataF = ref({})
+	const baseInfo = ref({})
 
 
-	const store = useStore();
+	const configPopupRef = ref(null)
+	
+	const configList = computed(() => {
+		return store.getters.configList
+	})
+
 	const userInfo = computed(() => {
 		return store.getters.userInfo
 	})
-	const code = ref('asdasaadsdsa')
-	const url = ref('https://uview-plus.jiangruyi.com/components/button.html');
-
+	
 	//复制
 	const copyMessage = (value) => {
 		uni.setClipboardData({
@@ -104,6 +132,26 @@
 			},
 		});
 	}
+	
+	const getBaseInfo = () => {
+		binBaseInfo(baseInfo.value.userId).then(res => {
+			baseInfo.value = res.data
+		})
+		bindCode(baseInfo.value.userId).then(res => {
+			dataF.value = res.data
+		})
+	}
+	
+	function toSharing(){
+		uni.navigateTo({
+			url: `/otherPages/workbenchManage/bindUser/sharing`
+		})
+	}
+	
+	onMounted(() => {
+		baseInfo.value = JSON.parse(uni.getStorageSync("baseInfo"))
+		getBaseInfo()
+	})
 </script>
 
 

otherPages/workbenchManage/bindUser/sharing - 副本.vue

@@ -0,0 +1,193 @@
+<template>
+  <view class="page">
+    <navbar title="分享好友" leftClick @leftClick="$utils.navigateBack" />
+
+    <view class="flex content">
+
+      <view style="width: 598rpx; height: 1063rpx;">
+        <canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
+      </view>
+      
+      <view class="flex btns">
+        <button class="flex btn btn-back" @click="$utils.navigateBack">返回</button>
+        <button plain class="flex btn btn-save" @click="saveImg" >保存到相册</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+	import { mapState } from 'vuex'
+
+	export default {
+		data() {
+			return {
+        wxCodeImage: null,
+				canvas: {},
+      }
+    },
+		computed : {
+			...mapState(['configList'])
+		},
+    onLoad() {
+    },
+    onReady() {
+      this.fetchQrCode()
+    },
+    methods: {
+      async fetchQrCode() {
+        try {
+          const url = (await this.$fetch('getQrCode'))?.url
+
+          this.wxCodeImage = this.$config.aliOss.url + url
+
+          console.log('--wxCodeImage', this.wxCodeImage)
+
+          this.draw()
+        } catch (err) {
+          
+        }
+      },
+			draw() {
+
+				uni.showLoading({
+					title: "拼命绘画中..."
+				})
+
+				wx.createSelectorQuery()
+					.select('#myCanvas') // 绘制的canvas的id
+					.fields({
+						node: true,
+						size: true
+					})
+					.exec(async (res) => {
+						const canvas = res[0].node
+						// 渲染上下文
+						const ctx = canvas.getContext('2d')
+						// Canvas 画布的实际绘制宽高
+						const width = res[0].width
+						const height = res[0].height
+						// 初始化画布大小
+						const dpr = wx.getWindowInfo().pixelRatio
+
+						//根据dpr调整
+						// dpr  2 4
+						//      3 6
+						console.log("--dpr", dpr)
+						canvas.width = width * dpr
+						canvas.height = height * dpr
+
+						let Ratio = canvas.width / 598
+
+						this.canvas = canvas
+						ctx.scale(dpr, dpr)
+						ctx.clearRect(0, 0, width, height)
+
+            //背景图片
+            const bgImage = canvas.createImage()
+            bgImage.src = this.configList.index_lvxing || 'https://image.hhlm1688.com//upload/组3833x_1742803627396.png'
+						bgImage.onload = () => {
+
+							ctx.drawImage(bgImage, 0, 0, width, height)
+     
+              //二维码图片
+              const coderImage = canvas.createImage()
+              coderImage.src = this.wxCodeImage
+              coderImage.onload = () => {
+                const x = 197 * Ratio / dpr
+                const y = 562 * Ratio / dpr
+                const size = 206 * Ratio / dpr
+                ctx.drawImage(coderImage, x, y, size, size)
+
+                uni.hideLoading()
+              }
+
+						}
+
+					})
+
+			},
+      saveImg(){
+        this.$authorize('scope.writePhotosAlbum').then((res) => {
+          this.imgApi()
+        })
+      },
+			imgApi() {
+        wx.canvasToTempFilePath({
+          x: 0,
+          y: 0,
+          width: this.canvas.width,
+          height: this.canvas.height,
+          canvas: this.canvas,
+          success: (res) => {
+            let tempFilePath = res.tempFilePath;
+            this.saveImgToPhone(tempFilePath)
+          },
+          fail: (err) => {
+            console.log('--canvasToTempFilePath--fail', err)
+          }
+        }, this);
+
+			},
+      saveImgToPhone(image) {
+				/* 获取图片的信息 */
+				uni.getImageInfo({
+					src: image,
+					success: function(image) {
+						/* 保存图片到手机相册 */
+						uni.saveImageToPhotosAlbum({
+							filePath: image.path,
+							success: function() {
+								uni.showModal({
+									title: '保存成功',
+									content: '图片已成功保存到相册',
+									showCancel: false
+								});
+							},
+							complete(res) {
+								console.log(res);
+							}
+						});
+					}
+				});
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+.page {
+  background-color: #111317;
+  height: 100vh;
+}
+
+.content {
+  margin-top: 79rpx;
+  flex-direction: column;
+}
+
+.btns {
+  justify-content: space-between; 
+  margin-top: 53rpx;
+  width: 598rpx;
+}
+
+.btn {
+  display: inline-flex;
+  width: 280rpx; 
+  height: 90rpx;
+  font-size: 36rpx;
+  line-height: 1;
+  color: #FFFFFF;
+  border-radius: 45rpx;
+  margin: 0;
+
+  &-back {
+    background-color: #4E5053;
+  }
+
+  &-save {
+    background-image: linear-gradient(to right, #02DED6, #05D9A2);
+  }
+}
+</style>

otherPages/workbenchManage/bindUser/sharing.vue

@@ -0,0 +1,209 @@
+<template>
+	<view class="page">
+		<view class="flex content">
+
+			<view style="width: 598rpx; height: 1063rpx;">
+				<canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
+			</view>
+
+			<view class="flex btns">
+				<button plain class="flex btn btn-save" @click="saveImg">保存到相册</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	
+	import {
+		binBaseInfo,
+		bindCode,
+	} from "@/api/home.js"
+	
+
+	export default {
+		data() {
+			return {
+				wxCodeImage: null,
+				canvas: {},
+				data : {},
+				baseInfo : {},
+			}
+		},
+		computed: {
+			...mapState(['configList'])
+		},
+		onLoad() {
+			this.baseInfo = JSON.parse(uni.getStorageSync("baseInfo"))
+			this.getBaseInfo()
+		},
+		onReady() {
+			// this.fetchQrCode()
+		},
+		methods: {
+			async fetchQrCode() {
+				try {
+					const url = (await this.$fetch('getQrCode'))?.url
+
+					this.wxCodeImage = this.$config.aliOss.url + url
+
+					console.log('--wxCodeImage', this.wxCodeImage)
+
+					this.draw()
+				} catch (err) {
+
+				}
+			},
+			getBaseInfo(){
+				binBaseInfo(this.baseInfo.userId).then(res => {
+					this.baseInfo = res.data
+				})
+				bindCode(this.baseInfo.userId).then(res => {
+					this.data = res.data
+					this.draw()
+				})
+			},
+			draw() {
+
+				uni.showLoading({
+					title: "拼命绘画中..."
+				})
+
+				wx.createSelectorQuery()
+					.select('#myCanvas') // 绘制的canvas的id
+					.fields({
+						node: true,
+						size: true
+					})
+					.exec(async (res) => {
+						const canvas = res[0].node
+						// 渲染上下文
+						const ctx = canvas.getContext('2d')
+						// Canvas 画布的实际绘制宽高
+						const width = res[0].width
+						const height = res[0].height
+						// 初始化画布大小
+						const dpr = wx.getWindowInfo().pixelRatio
+
+						//根据dpr调整
+						// dpr  2 4
+						//      3 6
+						console.log("--dpr", dpr)
+						canvas.width = width * dpr
+						canvas.height = height * dpr
+
+						let Ratio = canvas.width / 598
+
+						this.canvas = canvas
+						ctx.scale(dpr, dpr)
+						ctx.clearRect(0, 0, width, height)
+
+						//背景图片
+						const bgImage = canvas.createImage()
+						bgImage.src = this.data.bj_url ||
+							'https://image.hhlm1688.com//upload/组3833x_1742803627396.png'
+						bgImage.onload = () => {
+
+							ctx.drawImage(bgImage, 0, 0, width, height)
+
+							//二维码图片
+							const coderImage = canvas.createImage()
+							coderImage.src = this.data.url
+							coderImage.onload = () => {
+								const x = 197 * Ratio / dpr
+								const y = 562 * Ratio / dpr
+								const size = 206 * Ratio / dpr
+								ctx.drawImage(coderImage, x, y, size, size)
+
+								uni.hideLoading()
+							}
+
+						}
+
+					})
+
+			},
+			saveImg() {
+				this.$authorize('scope.writePhotosAlbum').then((res) => {
+					this.imgApi()
+				})
+			},
+			imgApi() {
+				wx.canvasToTempFilePath({
+					x: 0,
+					y: 0,
+					width: this.canvas.width,
+					height: this.canvas.height,
+					canvas: this.canvas,
+					success: (res) => {
+						let tempFilePath = res.tempFilePath;
+						this.saveImgToPhone(tempFilePath)
+					},
+					fail: (err) => {
+						console.log('--canvasToTempFilePath--fail', err)
+					}
+				}, this);
+
+			},
+			saveImgToPhone(image) {
+				/* 获取图片的信息 */
+				uni.getImageInfo({
+					src: image,
+					success: function(image) {
+						/* 保存图片到手机相册 */
+						uni.saveImageToPhotosAlbum({
+							filePath: image.path,
+							success: function() {
+								uni.showModal({
+									title: '保存成功',
+									content: '图片已成功保存到相册',
+									showCancel: false
+								});
+							},
+							complete(res) {
+								console.log(res);
+							}
+						});
+					}
+				});
+			}
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.page {
+		height: 100vh;
+	}
+
+	.content {
+		margin-top: 79rpx;
+		flex-direction: column;
+	}
+
+	.btns {
+		justify-content: center;
+		margin-top: 53rpx;
+		display: flex;
+	}
+
+	.btn {
+		display: flex;
+		width: 520rpx;
+		height: 90rpx;
+		font-size: 36rpx;
+		line-height: 1;
+		color: #FFFFFF;
+		border-radius: 45rpx;
+		margin: 0;
+		justify-content: center;
+		align-items: center;
+		border: none;
+		&-save {
+			background: #FFBF60;
+		}
+	}
+</style>

otherPages/workbenchManage/myLevel/commponents/levelInfo.vue

@@ -22,6 +22,17 @@
 		ref,
 		reactive
 	} from "vue"
+	
+	
+	const props = defineProps({
+		dataInfo : {
+			default : () => {
+				return {}
+			}
+		}
+	})
+	
+	
 	const cardName = ref("距离下一等级要求")
 	const baseList = ref([
 		{

otherPages/workbenchManage/myLevel/commponents/myData.vue

@@ -37,40 +37,55 @@
 	import { useStore } from 'vuex'
 
 	const store = useStore()
+	
+	const props = defineProps({
+		dataInfo : {
+			default : () => {
+				return {}
+			}
+		}
+	})
 
 	const configList = computed(() => {
 		return store.getters.configList
 	})
+	
+	const nounthData = computed(() => {
+		return [{
+				title: '当月注册用户',
+				num: props.dataInfo.register_users + "个",
+			},
+			{
+				title: '当月下单用户',
+				num: props.dataInfo.register_users + "个",
+			},
+			{
+				title: '当月有效用户',
+				num: props.dataInfo.register_users + "个",
+			},
+		]
+	})
+	
+	const totalData = computed(() => {
+		return [{
+				title: '累计注册用户',
+				num: props.dataInfo.register_users + "个",
+			},
+			{
+				title: '累计下单用户',
+				num: props.dataInfo.register_users + "个",
+			},
+			{
+				title: '累计有效用户',
+				num: props.dataInfo.register_users + "个",
+				color:'red'
+			},
+		]
+	})
 
 	const nounthName = ref('当月数据')
 	const totalName = ref('累计数据')
-	const nounthData = reactive([{
-			title: '当月注册用户',
-			num: "0个"
-		},
-		{
-			title: '当月下单用户',
-			num: "0个"
-		},
-		{
-			title: '当月有效用户',
-			num: "0个"
-		},
-	])
-	const totalData = reactive([{
-			title: '累计注册用户',
-			num: "0个"
-		},
-		{
-			title: '累计下单用户',
-			num: "0个"
-		},
-		{
-			title: '累计有效用户',
-			num: "0个",
-			color:'red'
-		},
-	])
+	
 </script>
 
 <style scoped lang="scss">

otherPages/workbenchManage/myLevel/index.vue

@@ -30,8 +30,8 @@
 		</view>
 
 		<view class="bind-main">
-			<myData v-show="showFlag === 'data'"></myData>
-			<levelInfo v-show="showFlag === 'level'"></levelInfo>
+			<myData v-show="showFlag === 'data'" :dataInfo="state.baseInfo"></myData>
+			<levelInfo v-show="showFlag === 'level'" :dataInfo="state.baseInfo"></levelInfo>
 		</view>
 
 		<view class="bind-user-foot flex-around">

otherPages/workbenchManage/myUser/index.vue

@@ -64,7 +64,8 @@
 import {
 	ref,
 	reactive,
-	onMounted
+	onMounted,
+	computed,
 } from "vue"
 import { useStore } from 'vuex'
 import haveOrder from "./components/haveOrder.vue"
@@ -76,16 +77,20 @@ import {
 import {
 	binBaseInfo,
 	bindCode,
-	computed,
 } from "@/api/home.js"
 
 
-const store = useStore()
+const Store = useStore()
 
 const configList = computed(() => {
-	return store.getters.configList
+	return Store.getters.configList
 })
 
+const userInfo = computed(() => {
+	return Store.getters.userInfo
+})
+
+
 const code = ref('asdasaadsdsa')
 const url = ref('https://uview-plus.jiangruyi.com/components/button.html')
 const current = ref(0)

pages.json

@@ -283,12 +283,19 @@
 		{
 			"root": "otherPages/workbenchManage",
 			// 工作台
-			"pages": [{
+			"pages": [
+				{
 					"path": "bindUser/index",
 					"style": {
 						"navigationBarTitleText": "绑定用户"
 					}
 				},
+				{
+					"path": "bindUser/sharing",
+					"style": {
+						"navigationBarTitleText": "分享海报"
+					}
+				},
 				{
 					"path": "myUser/index",
 					"style": {

store/modules/system.js

@@ -1,63 +1,76 @@
-import { getConfigList, getPetTypeList, getIncreaseServiceList } from '@/api/config/config.js'
+import {
+	getConfigList,
+	getPetTypeList,
+	getIncreaseServiceList
+} from '@/api/config/config.js'
 
 const system = {
-  state: {
-    configList: {},
-    petTypeOptions: [],
-    increaseServiceOptions: [],
-  },
-  mutations: {
-    setConfigList(state, list) {
-      const obj = {}
-
-      list.forEach(n => {
-        obj[n.paramCode] = n;
-      })
-
-      state.configList = obj;
-    },
-    setPetTypeOptions(state, list) {
-      state.petTypeOptions = list
-    },
-    setIncreaseServiceOptions(state, list) {
-      state.increaseServiceOptions = list
-    },
-  },
-  actions: {
-    async fetchConfigList({commit, state}) {
-      try {
-        const data = await getConfigList()
-
-        commit('setConfigList', data)
-      } catch (err) {
-
-      }
-    },
-    async fetchPetTypeOptions({commit, state}) {
-      if (state.petTypeOptions.length) {
-        return
-      }
-
-      try {
-        const data = await getPetTypeList()
-        commit('setPetTypeOptions', data)
-      } catch (err) {
-  
-      }
-    },
-    async fetchIncreaseServiceOptions({commit, state}) {
-      if (state.increaseServiceOptions.length) {
-        return
-      }
-
-      try {
-        const data = await getIncreaseServiceList()
-        commit('setIncreaseServiceOptions', data)
-      } catch (err) {
-  
-      }
-    },
-  }
+	state: {
+		configList: {},
+		petTypeOptions: [],
+		increaseServiceOptions: [],
+	},
+	mutations: {
+		setConfigList(state, list) {
+			const obj = {}
+
+			list.forEach(n => {
+				obj[n.paramCode] = n;
+			})
+
+			state.configList = obj;
+		},
+		setPetTypeOptions(state, list) {
+			state.petTypeOptions = list
+		},
+		setIncreaseServiceOptions(state, list) {
+			state.increaseServiceOptions = list
+		},
+	},
+	actions: {
+		async fetchConfigList({
+			commit,
+			state
+		}) {
+			try {
+				const data = await getConfigList()
+
+				commit('setConfigList', data)
+			} catch (err) {
+
+			}
+		},
+		async fetchPetTypeOptions({
+			commit,
+			state
+		}) {
+			if (state.petTypeOptions.length) {
+				return
+			}
+
+			try {
+				const data = await getPetTypeList()
+				commit('setPetTypeOptions', data)
+			} catch (err) {
+
+			}
+		},
+		async fetchIncreaseServiceOptions({
+			commit,
+			state
+		}) {
+			if (state.increaseServiceOptions.length) {
+				return
+			}
+
+			try {
+				const data = await getIncreaseServiceList()
+				commit('setIncreaseServiceOptions', data)
+			} catch (err) {
+
+			}
+		},
+	}
 }
 
 export default system