生成分享招聘会海报

pages.json

@@ -307,6 +307,18 @@
 						"navigationBarTitleText": "招聘会"
 					}
 				},
+				{
+					"path": "jobFair/jobFairShare",
+					"style": {
+						"navigationBarTitleText": "分享招聘会"
+					}
+				},
+				{
+					"path": "jobFair/jobFairEntShare",
+					"style": {
+						"navigationBarTitleText": "分享招聘会参与的企业"
+					}
+				},
 				{
 					"path": "jobFair/enterprises",
 					"style": {

pagesB/jobFair/enterprisesClassification.vue

@@ -56,6 +56,9 @@
         </view>
       </view>
     </scroll-view>
+    <view class="shareButtonBox" @tap="handleShare">
+      <uni-icons type="redo-filled" size="20" color="#fff" />
+    </view>
   </view>
 </template>
 
@@ -169,6 +172,13 @@ const toDetail = (item) =>{
 // 	})
 // }
 
+// 分享招聘会
+const handleShare = () => {
+	uni.navigateTo({
+    url: `/pagesB/jobFair/jobFairShare?jobFairId=${query.jobFairId}`
+	})
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -177,6 +187,15 @@ const toDetail = (item) =>{
   position: sticky;
   top: 0;
 }
+.shareButtonBox {
+  z-index: 1;
+  position: fixed;
+  right: 20px;
+  top: 16px;
+  border-radius: 50%;
+  padding: 8px;
+  background-color: #00897B;
+}
 .box {
   height: 100vh;
   overflow: hidden;

pagesB/jobFair/jobFairEntShare.vue

@@ -0,0 +1,183 @@
+<!-- 招聘会-分享企业 -->
+<template>
+  <view style="position: relative;">
+    <view v-if="shareUrl" class="d-flex align-center flex-column justify-center" style="height: 100vh;">
+      <image v-if="!!shareUrl" :style="imgStyle" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
+      <view class="color-999 ss-m-t-20 font-size-14 ss-m-b-50">点击图片预览，长按图片保存</view>
+    </view>
+		<canvas canvas-id="posterCanvas" class="shareCanvas" style="width: 330px; height: 600px;"></canvas>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getJobAdvertisedShareQrcode } from '@/api/user'
+import { getJobFair } from '@/api/jobFair'
+// import { getEnterpriseDetails } from '@/api/user'
+// import { getEnterpriseDetails } from '@/api/user'
+  // const positionList = listData.value.length ? JSON.stringify(listData.value.slice(0, 2)) : "0"
+
+const shareUrl = ref('')
+const windowWidth = ref(0)
+let jobFairId = '' // 分享会ID
+let enterpriseId = '' // 企业ID
+let shareImg = '' // 分享背景图片-底图
+// let shareImg = 'https://menduner.citupro.com:3443/dev/4dd7dd3c9ef350d62fcbc814b88c1ac1916f484a3ee8d8531ae7a2698a289670.jpg' // 分享背景图片-底图
+
+onLoad(async (options) => {
+  jobFairId = options.jobFairId
+  enterpriseId = options.enterpriseId
+  await getJobFairDetail()
+  // await getJobFairEntDetail()
+  const windowInfo = wx.getWindowInfo()
+  windowWidth.value = windowInfo.windowWidth
+  console.log(windowWidth.value, '当前机型屏幕宽')
+})
+
+const getJobFairDetail = async () => {
+  if (!jobFairId) return
+  const { data } = await getJobFair(jobFairId)
+  shareImg = data?.contentImg || ''
+  if (shareImg) createPoster()
+}
+
+const getEntPositionList = async () => {
+  if (!query.jobFairId) {
+    uni.showToast({ title: '获取企业岗位失败，请重试！', icon: 'none', duration: 2000 })
+    return
+  }
+  try {
+    const params = { ...query }
+    const positionIdValue = tabIndex.value !== -1 ? tabList.value[tabIndex.value]?.value : []
+    positionIdValue?.length && positionIdValue.forEach((value, index) => {
+      params[`positionId[${index}]`] = value
+    })
+    const res = await getJobFairEntJobPage(params)
+    const list = res?.data?.list || []
+    // list.forEach(e => {
+    //   e.job = dealDictObjData({}, e)
+    //   e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
+    // })
+    // listData.value = listData.value.concat(list)
+    // showShareBtn.value = true
+    // if (listData.value?.length === +res?.data?.total) {
+    //   more.value = 'noMore'
+    //   return
+    // }
+  } catch (error) {
+    query.pageNo--
+    more.value = 'more'
+  }
+}
+
+const imgStyle = computed(() => {
+  if (windowWidth.value <= 320) return `width: 259px; height: 460px;`
+  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: 560px;`
+  if (windowWidth.value > 375) return `width: 328px; height: 600px;`
+})
+
+// 图片预览
+const handlePreviewSharePoster = () => {
+	uni.previewImage({
+		current: 0,
+		longPressActions: {
+			itemList: ['发送给朋友', '保存图片', '收藏']
+		},
+		urls: [shareUrl.value]
+	})
+}
+
+const getImageTempRatio = (url) => {
+  return new Promise((req, rej)=>{
+    wx.getImageInfo({
+      src:url,
+      success:(res) =>{
+        req(res)
+      }
+    })
+  })
+}
+
+const getToLocal = (base64data) => {
+  const fsm = wx.getFileSystemManager()
+  const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
+  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []
+  if (!format) {
+    return (new Error('ERROR_BASE64SRC_PARSE'))
+  }
+  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
+  const buffer = wx.base64ToArrayBuffer(bodyData);
+  fsm.writeFile({
+    filePath,
+    data: buffer,
+    encoding: 'binary',
+    success(r) {
+      console.log(filePath,'filePath')
+      qrCode.value = filePath
+    },
+    fail() {
+      return (new Error('ERROR_BASE64SRC_WRITE'))
+    }
+  })
+}
+
+// 生成分享二维码
+const qrCode = ref()
+const handleShareCode = async () => {
+	const query = {
+		scene: `jobFairId=${jobFairId}&enterpriseId=${enterpriseId}&entName=${entName}`,
+		scene: 'jobFairId=' + jobFairId + '&enterpriseId=' + enterpriseId,
+		path: 'pages/login/index',
+    // path: 'pagesB/jobFair/positionClassification',
+		width: 200,
+		autoColor: false,
+		checkPath: true,
+		hyaline: true
+	}
+	const res = await getJobAdvertisedShareQrcode(query)
+	const data = res?.data ? 'data:image/png;base64,' + res.data : ''
+  getToLocal(data)
+}
+
+
+const createPoster = async () => {
+  uni.showLoading({ title: '生成中...', mask: true })
+  await handleShareCode() // 生产分享二维码
+  var context = uni.createCanvasContext('posterCanvas')
+
+  //清空画布
+  context.clearRect(0, 0, 330, 600)
+
+  //背景图片 
+  const { path: bgUrl } = await getImageTempRatio(shareImg)
+  context.drawImage(bgUrl, 0, 0, 330, 600) // 路径、x、y、宽、高
+  
+  //分享二维码
+  context.drawImage(qrCode.value, 105.5, 380, 120, 120)
+
+  context.draw(false, () =>{
+    wx.canvasToTempFilePath({ 
+      canvasId: 'posterCanvas',
+      success:(res)=>{
+        shareUrl.value = res.tempFilePath
+        console.log('canvas-success', shareUrl.value)
+		    uni.hideLoading({})
+      },
+      fail:(err)=>{
+        uni.hideLoading({})
+        console.log('canvas-fail', err)
+      }
+    })
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.shareCanvas {
+	position: fixed;
+	top: -99999upx;
+	left: -99999upx;
+	z-index: -99999;
+}
+</style>

pagesB/jobFair/jobFairShare.vue

@@ -0,0 +1,146 @@
+<!-- 分享招聘会 -->
+<template>
+  <view style="position: relative;">
+    <view v-if="shareUrl" class="d-flex align-center flex-column justify-center" style="height: 100vh;">
+      <image v-if="!!shareUrl" :style="imgStyle" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
+      <view class="color-999 ss-m-t-20 font-size-14 ss-m-b-50">点击图片预览，长按图片保存</view>
+    </view>
+		<canvas canvas-id="posterCanvas" class="shareCanvas" style="width: 330px; height: 600px;"></canvas>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getJobAdvertisedShareQrcode } from '@/api/user'
+import { getJobFair } from '@/api/jobFair'
+
+const shareUrl = ref('')
+const windowWidth = ref(0)
+let jobFairId = '' // 分享会ID
+let shareImg = '' // 分享背景图片-底图
+// let shareImg = 'https://menduner.citupro.com:3443/dev/4dd7dd3c9ef350d62fcbc814b88c1ac1916f484a3ee8d8531ae7a2698a289670.jpg' // 分享背景图片-底图
+
+onLoad(async (options) => {
+  jobFairId = options.jobFairId
+  await getJobFairDetail()
+  const windowInfo = wx.getWindowInfo()
+  windowWidth.value = windowInfo.windowWidth
+  console.log(windowWidth.value, '当前机型屏幕宽')
+})
+
+const getJobFairDetail = async () => {
+  if (!jobFairId) return
+  const { data } = await getJobFair(jobFairId)
+  shareImg = data?.shareImg || ''
+  if (shareImg) createPoster()
+}
+
+const imgStyle = computed(() => {
+  if (windowWidth.value <= 320) return `width: 259px; height: 460px;`
+  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: 560px;`
+  if (windowWidth.value > 375) return `width: 328px; height: 600px;`
+})
+
+// 图片预览
+const handlePreviewSharePoster = () => {
+	uni.previewImage({
+		current: 0,
+		longPressActions: {
+			itemList: ['发送给朋友', '保存图片', '收藏']
+		},
+		urls: [shareUrl.value]
+	})
+}
+
+const getImageTempRatio = (url) => {
+  return new Promise((req, rej)=>{
+    wx.getImageInfo({
+      src:url,
+      success:(res) =>{
+        req(res)
+      }
+    })
+  })
+}
+
+const getToLocal = (base64data) => {
+  const fsm = wx.getFileSystemManager()
+  const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
+  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []
+  if (!format) {
+    return (new Error('ERROR_BASE64SRC_PARSE'))
+  }
+  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
+  const buffer = wx.base64ToArrayBuffer(bodyData);
+  fsm.writeFile({
+    filePath,
+    data: buffer,
+    encoding: 'binary',
+    success(r) {
+      console.log(filePath,'filePath')
+      qrCode.value = filePath
+    },
+    fail() {
+      return (new Error('ERROR_BASE64SRC_WRITE'))
+    }
+  })
+}
+
+// 生成分享二维码
+const qrCode = ref()
+const handleShareCode = async () => {
+	const query = {
+		scene: 'jobFairId=' + jobFairId,
+    path: 'pagesB/jobFair/positionClassification',
+		width: 200,
+		autoColor: false,
+		checkPath: true,
+		hyaline: true
+	}
+	const res = await getJobAdvertisedShareQrcode(query)
+	const data = res?.data ? 'data:image/png;base64,' + res.data : ''
+  getToLocal(data)
+}
+
+
+const createPoster = async () => {
+  uni.showLoading({ title: '生成中...', mask: true })
+  await handleShareCode() // 生产分享二维码
+  var context = uni.createCanvasContext('posterCanvas')
+
+  //清空画布
+  context.clearRect(0, 0, 330, 600)
+
+  //背景图片 
+  const { path: bgUrl } = await getImageTempRatio(shareImg)
+  context.drawImage(bgUrl, 0, 0, 330, 600) // 路径、x、y、宽、高
+  
+  //分享二维码
+  context.drawImage(qrCode.value, 105.5, 380, 120, 120)
+
+  context.draw(false, () =>{
+    wx.canvasToTempFilePath({ 
+      canvasId: 'posterCanvas',
+      success:(res)=>{
+        shareUrl.value = res.tempFilePath
+        console.log('canvas-success', shareUrl.value)
+		    uni.hideLoading({})
+      },
+      fail:(err)=>{
+        uni.hideLoading({})
+        console.log('canvas-fail', err)
+      }
+    })
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.shareCanvas {
+	position: fixed;
+	top: -99999upx;
+	left: -99999upx;
+	z-index: -99999;
+}
+</style>

pagesB/jobFair/positionClassification.vue

@@ -1,4 +1,5 @@
-<!-- 招聘会/企业详情 -->
+<!-- 招聘会职位列表 / 招聘会内的企业下-职位列表 -->
+<!-- 没有企业ID的就是招聘会下的职位列表。存在企业ID的就是招聘会企业下的职位列表。 -->
 <template>
   <view class="box" :style="`background-color: ${backgroundColor}`">
     <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
@@ -21,6 +22,7 @@
               </view>
             </view>
           </scroll-view>
+          <!-- entName 企业》企业内职位列表 -->
           <view v-if="entName" class="enterpriseName" :style="`color: ${entNameColor}`">{{ entName }}</view>
         </view>
         <view v-if="listData?.length" class="listDataBox">
@@ -34,11 +36,13 @@
           <uni-load-more :status="more" :color="textColor" />
         </view>
         <view v-else class="nodata-img-parent">
-          <!-- <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image> -->
           <uni-load-more class="ss-m-t-50" :color="textColor" status="noMore" :content-text="{'contentnomore': '暂无数据，请切换类型查看~'}" />
         </view>
       </view>
     </scroll-view>
+    <view v-if="showShareBtn" class="shareButtonBox" @tap="handleShare">
+      <uni-icons type="redo-filled" size="20" color="#fff" />
+    </view>
   </view>
 </template>
 
@@ -51,6 +55,7 @@ import PositionList from '@/components/PositionList'
 import SwiperAd from '@/components/SwiperAd'
 
 const more = ref('more')
+const showShareBtn = ref(false)
 const listData = ref([])
 const query = reactive({
   pageSize: 20, 
@@ -61,12 +66,15 @@ const query = reactive({
 const entName = ref('')
 
 onLoad(async (options) => {
-  entName.value = options.entName
   if (options?.jobFairId) {
     query.jobFairId = options.jobFairId
-    if (options.enterpriseId) query.enterpriseId = options.enterpriseId
-    if (query.enterpriseId) getData()
-    else getJobFairDetail()
+    if (options.enterpriseId) {
+      query.enterpriseId = options.enterpriseId
+      entName.value = options.entName
+      getEntPositionList()
+    } else {
+      getJobFairDetail()
+    }
   }
   if (options.backgroundColor) backgroundColor.value = options.backgroundColor
 })
@@ -98,7 +106,8 @@ const getJobFairDetail = async () => {
   if (data?.backgroundColour) {
     backgroundColor.value = data.backgroundColour || '#fff'
   }
-  getData()
+  showShareBtn.value= true
+  getEntPositionList()
 }
 
 // 切换类型
@@ -106,10 +115,10 @@ const handClickTab = (index) => {
   tabIndex.value = index
   query.pageNo = 1
   listData.value = []
-  getData()
+  getEntPositionList()
 }
 
-const getData = async () => {
+const getEntPositionList = async () => {
   if (!query.jobFairId) {
     uni.showToast({ title: '获取企业岗位失败，请重试！', icon: 'none', duration: 2000 })
     return
@@ -127,6 +136,7 @@ const getData = async () => {
       e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
     })
     listData.value = listData.value.concat(list)
+    // showShareBtn.value = true
     if (listData.value?.length === +res?.data?.total) {
       more.value = 'noMore'
       return
@@ -149,7 +159,7 @@ const onScroll = (e) =>{
 const loadingMore = () => {
   more.value = 'loading'
   query.pageNo++
-  getData()
+  getEntPositionList()
 }
 
 // const goBack = () => {
@@ -158,6 +168,15 @@ const loadingMore = () => {
 // 	})
 // }
 
+const handleShare = () => {
+  // 分享招聘会
+  let url = `/pagesB/jobFair/${query.enterpriseId ? 'jobFairEntShare' : 'jobFairShare'}?jobFairId=${query.jobFairId}`
+  // 分享招聘会-企业
+  if (query.enterpriseId) url = url + `&enterpriseId=${query.enterpriseId}`
+  // 
+	uni.navigateTo({ url })
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -166,6 +185,15 @@ const loadingMore = () => {
   position: sticky;
   top: 0;
 }
+.shareButtonBox {
+  z-index: 1;
+  position: fixed;
+  right: 20px;
+  top: 16px;
+  border-radius: 50%;
+  padding: 8px;
+  background-color: #00897B;
+}
 .box {
   height: 100vh;
   overflow: hidden;