职位分享

src/components/PreviewImg/index.vue

@@ -5,7 +5,7 @@
     </div> -->
     <v-window v-model="window" show-arrows @update:model-value="val => window = val">
       <v-window-item v-for="val in list" :key="val">
-        <v-img v-if="checkIsImage(val)" width="1000" height="800" :src="val"></v-img>
+        <v-img v-if="isImage || checkIsImage(val)" width="900" height="800" :src="val"></v-img>
         <video v-else :src="val" controls height="800" width="1000" preload="preload" :showPlay="true"></video>
       </v-window-item>
     </v-window>
@@ -26,16 +26,16 @@ const props = defineProps({
   current: {
     type: Number,
     default: 0
+  },
+  isImage: {
+    type: Boolean,
+    default: false
   }
 })
 
 const overlay = ref(true)
 const window = ref(0)
 if (props.current) window.value = props.current
-// const list = [
-//   'https://fastly.picsum.photos/id/232/500/300.jpg?hmac=fyd8W1w8466rO5Je10xId1ShHAphw8iYnpt8XIkW4w0',
-//   'https://zhipin-company-1251955568.file.myqcloud.com/zhipin-company/99/20231021/fpf81b1cdecd7a27dca3eeb40f661f1a3e_1a3cd48c41c942d0aa084b3dd0262681-OSS11.aac.s44100.stereo.1080x1920.b2000000.libx264.mp4?sign=d840267a7fb629df0a70cbc85702303e&t=1715917059'
-// ]
 
 const handleChange = (e) => {
   if (!e) emits('close')

src/components/VerificationCode/index.vue

@@ -26,7 +26,7 @@
         variant="outlined" 
         density="compact" 
         prepend-inner-icon="mdi-security" 
-        :rules="[v=> !!v || $t('login.enterCode')]"
+        :rules="codeValid"
         @keyup.enter="handleEnter"
       >
         <template #append-inner>
@@ -48,7 +48,7 @@ import Snackbar from '@/plugins/snackbar'
 
 const emits = defineEmits(['handleEnter'])
 const { t } = useI18n()
-const props = defineProps({ phoneDisabled: Boolean })
+const props = defineProps({ phoneDisabled: Boolean, phone: String })
 const phoneRules = ref([
   value => {
     if (value) return true
@@ -60,6 +60,17 @@ const phoneRules = ref([
   }
 ])
 
+const codeValid = ref([
+  value => {
+    if (value) return true
+    return '请输入验证码'
+  },
+  value => {
+    if (/^\d{6}$/.test(value)) return true
+    return '请输入正确格式的六位数字验证码'
+  }
+])
+
 // 手机号区域
 const currentArea = ref('0086')
 const items = [
@@ -119,6 +130,7 @@ const loginData = reactive({
   phone: loginUserPhone,
   code: ''
 })
+if (props.phone) loginData.phone = props.phone
 
 const phoneForm = ref()
 const handleEnter = () => {

src/styles/recruit/position/index.css

@@ -0,0 +1,99 @@
+.banner {
+  background-color: #fff;
+  padding: 18px 0 20px;
+}
+
+.banner-title {
+  line-height: 40px;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.banner-title h1 {
+  display: inline-block;
+  color: #37576c;
+  font-size: 28px;
+  margin-right: 30px;
+  margin-top: 1px;
+  max-width: 360px;
+  vertical-align: middle;
+}
+
+.button-item {
+  min-width: 110px;
+  height: 36px;
+}
+
+.salary {
+  color: var(--v-error-base);
+  line-height: 41px;
+  font-weight: 600;
+  height: auto;
+  display: inline-block;
+  vertical-align: sub;
+}
+
+.refresh-time {
+  float: right;
+  color: var(--color-666);
+  font-size: 14px;
+  line-height: 66px;
+  vertical-align: sub;
+}
+
+.banner-tags span {
+  font-weight: 600;
+}
+
+.radius {
+  border-radius: 8px;
+}
+
+.content-left {
+  width: 810px;
+  padding: 20px 20px;
+}
+
+.content-right {
+  flex: 1;
+  padding: 20px 20px 20px 0;
+}
+
+.label-text {
+  color: #7f7a7a;
+  font-weight: 600;
+}
+
+.value-text {
+  color: #000;
+  font-weight: 400;
+}
+
+.requirement {
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 28px;
+  color: var(--color-333);
+  font-size: 15px;
+  text-align: justify;
+  letter-spacing: 0;
+}
+
+.contact {
+  height: 60px;
+  line-height: 60px;
+}
+
+.contact-name {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--color-222);
+  line-height: 28px;
+}
+
+.contact-info {
+  font-size: 15px;
+  color: var(--color-666);
+  line-height: 21px;
+  margin-top: 8px;
+}

src/styles/recruit/position/index.min.css

@@ -0,0 +1 @@
+.banner{background-color:#fff;padding:18px 0 20px}.banner-title{line-height:40px;font-size:28px;font-weight:600}.banner-title h1{display:inline-block;color:#37576c;font-size:28px;margin-right:30px;margin-top:1px;max-width:360px;vertical-align:middle}.button-item{min-width:110px;height:36px}.salary{color:var(--v-error-base);line-height:41px;font-weight:600;height:auto;display:inline-block;vertical-align:sub}.refresh-time{float:right;color:var(--color-666);font-size:14px;line-height:66px;vertical-align:sub}.banner-tags span{font-weight:600}.radius{border-radius:8px}.content-left{width:810px;padding:20px 20px}.content-right{flex:1;padding:20px 20px 20px 0}.label-text{color:#7f7a7a;font-weight:600}.value-text{color:#000;font-weight:400}.requirement{white-space:pre-wrap;word-break:break-all;line-height:28px;color:var(--color-333);font-size:15px;text-align:justify;letter-spacing:0}.contact{height:60px;line-height:60px}.contact-name{font-size:20px;font-weight:500;color:var(--color-222);line-height:28px}.contact-info{font-size:15px;color:var(--color-666);line-height:21px;margin-top:8px}

src/styles/recruit/position/index.scss

@@ -0,0 +1,84 @@
+.banner {
+  background-color: #fff;
+  padding: 18px 0 20px;
+}
+.banner-title {
+  line-height: 40px;
+  font-size: 28px;
+  font-weight: 600;
+}
+.banner-title h1 {
+  display: inline-block;
+  color: #37576c;
+  font-size: 28px;
+  margin-right: 30px;
+  margin-top: 1px;
+  max-width: 360px;
+  vertical-align: middle;
+}
+.button-item {
+  min-width: 110px;
+  height: 36px
+}
+.salary {
+  color: var(--v-error-base);
+  line-height: 41px;
+  font-weight: 600;
+  height: auto;
+  display: inline-block;
+  vertical-align: sub;
+}
+.refresh-time {
+  float: right;
+  color: var(--color-666);
+  font-size: 14px;
+  line-height: 66px;
+  vertical-align: sub;
+}
+.banner-tags span {
+  font-weight: 600;
+}
+.radius {
+  border-radius: 8px;
+}
+.content-left {
+  width: 810px;
+  padding: 20px 20px;
+}
+.content-right {
+  flex: 1;
+  padding: 20px 20px 20px 0;
+}
+.label-text {
+  color: #7f7a7a;
+  font-weight: 600;
+}
+.value-text {
+  color: #000;
+  font-weight: 400;
+}
+.requirement {
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 28px;
+  color: var(--color-333);
+  font-size: 15px;
+  text-align: justify;
+  letter-spacing: 0;
+}
+.contact {
+  height: 60px;
+  line-height: 60px;
+}
+.contact-name {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--color-222);
+  line-height: 28px;
+}
+.contact-info {
+  font-size: 15px;
+  color: var(--color-666);
+  line-height: 21px;
+  margin-top: 8px;
+}

src/utils/eventList.js

@@ -29,7 +29,7 @@ export const updateEventList = (type) => {
       // 更新账户信息
       if (type) await store.getUserAccountInfo()
       else await store.getEnterpriseUserAccountInfo()
-    }, 200000)
+    }, 180000)
 
   } else {
     clearInterval(timer.value)

src/utils/index.js

@@ -55,4 +55,35 @@ export const generateUUID = () => {
     return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
   })
   return uuid.replace(/-/g, "")
+}
+
+export const downloadBase64 = (content, fileName) => {
+  const base64ToBlob = function (code) {
+    let parts = code.split(';base64,')
+    let contentType = parts[0].split(':')[1]
+    let raw = window.atob(parts[1])
+    let rawLength = raw.length
+    let uInt8Array = new Uint8Array(rawLength)
+    for (let i = 0; i < rawLength; ++i) {
+      uInt8Array[i] = raw.charCodeAt(i)
+    }
+
+    return new Blob([uInt8Array], {
+      type: contentType
+    })
+  }
+  let aLink = document.createElement('a')
+  let blob = base64ToBlob(content)
+  aLink.download = fileName + '.png'
+  aLink.href = URL.createObjectURL(blob)
+  aLink.click()
+}
+
+export const DPR = () => {
+  // 获取设备dpi
+  if (window.devicePixelRatio && window.devicePixelRatio > 1) {
+    return window.devicePixelRatio * 2
+  }
+  // 直接返回高像素比
+  return 8
 }

src/views/recruit/personal/shareJob/components/login.vue → src/views/common/loginDialog.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script setup>
+defineOptions({name: 'dialog-login-common-page'})
 import phoneFrom from '@/components/VerificationCode'
 import { useUserStore } from '@/store/user'; const userStore = useUserStore()
 import { nextTick, ref } from 'vue'
-defineOptions({name: 'shareJob-login'})
 const emit = defineEmits(['loginSuccess'])
 
 const openDialog = ref(false)
@@ -46,7 +46,7 @@ const handleLogin = async () => {
     console.error('error', error)
   }
 }
-
 </script>
+
 <style lang="scss" scoped>
 </style>

src/views/recruit/personal/accountSettings/dynamic/accountBinding.vue

@@ -32,7 +32,7 @@ h3 {
   font-weight: 600;
 }
 .login-user {
-  color: grey;
+  color: var(--color-666);
   font-weight: 600;
 }
 </style>

src/views/recruit/personal/accountSettings/dynamic/editPassword.vue

@@ -2,8 +2,12 @@
   <div>
     <h3>{{ $t('setting.editPassword') }}</h3>
     <v-divider class="mb-4"></v-divider>
-    <div class="login-user mb-4">当前登录账号： <span style="color: var(--v-primary-base);">{{ userInfo.phone }}</span></div>
-    <v-stepper v-model="stepper" color="primary">
+    <div v-if="!showEdit" class="login-user mb-4">
+      当前登录账号： 
+      <span>{{ userInfo.phone }}</span>
+      <span class="color-primary ml-5 text-decoration-underline cursor-pointer" @click="showEdit = true">修改密码</span>
+    </div>
+    <v-stepper v-if="showEdit" v-model="stepper" color="primary">
       <v-stepper-header>
         <v-stepper-item title="手机验证" value="1"></v-stepper-item>
         <v-divider></v-divider>
@@ -12,11 +16,14 @@
       <v-stepper-window>
         <v-stepper-window-item value="1">
           <div class="d-flex justify-center">
-            <PhonePage ref="phoneRef" style="width: 300px;"></PhonePage>
+            <PhonePage ref="phoneRef" style="width: 300px;" :phone="userInfo.phone" :phoneDisabled="true"></PhonePage>
           </div>
-          <div class="text-center">
+          <div class="text-center mt-5">
             <v-btn class="buttons" color="primary" @click="handleValidate">立即验证</v-btn>
           </div>
+          <div class="text-end">
+            <v-btn color="primary" variant="outlined" @click="handleClose">取 消</v-btn>
+          </div>
         </v-stepper-window-item>
         <v-stepper-window-item value="2">
           <div class="d-flex justify-center">
@@ -47,9 +54,12 @@
               ></v-text-field>
             </v-form>
           </div>
-          <div class="text-center">
+          <div class="text-center mt-5">
             <v-btn class="buttons" color="primary" @click="handleSubmit" :loading="loading">确认密码</v-btn>
           </div>
+          <div class="text-end">
+            <v-btn color="primary" variant="outlined" @click="handleClose">取 消</v-btn>
+          </div>
         </v-stepper-window-item>
       </v-stepper-window>
     </v-stepper>
@@ -68,11 +78,23 @@ const passwordType = ref(false)
 const show = ref(false)
 const loading = ref(false)
 const stepper = ref('1')
-const query = reactive({
+const showEdit = ref(false)
+let query = reactive({
   password: '',
   checkPassword: ''
 })
 
+const handleClose = () => {
+  showEdit.value = false
+  query = {
+    password: '',
+    checkPassword: ''
+  }
+  stepper.value = '1'
+  passwordType.value = false
+  loading.value = false
+}
+
 // 密码效验
 const regex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{4,10}$/
 const validPassword = computed(() => {
@@ -94,6 +116,7 @@ const handleSubmit = async () => {
     Snackbar.success('修改成功')
   } finally {
     loading.value = false
+    showEdit.value = false
   }
 }
 

src/views/recruit/personal/position/components/details.vue

@@ -94,21 +94,29 @@
 
     <!-- 选择简历 -->
     <selectResumeDialog v-model="showResume" :list="resumeList" @submit="handleSubmit" @close="handleClose"></selectResumeDialog>
-    <!-- 复制分享链接 -->
+
+    <!-- 职位分享 -->
     <Dialog
       :visible="shareDialog" :widthType="2" :footer="false" titleClass="text-h6"
       :title="$t('position.rewardsShared')"
       @close="shareDialog = false"
     >
       <div>
-        <div class="mb-3">方式一：生成图片并下载</div>
-        <v-btn color="primary" variant="outlined" @click="generateAndDownloadImage">点击生成职位详情图片并下载</v-btn>
+        <div class="mb-3">方式一：保存图片分享给好友</div>
+        <div class="d-flex align-center flex-column">
+          <v-img :src="previewSrc" width="200" height="250"></v-img>
+          <div>
+            <v-btn color="primary" variant="outlined" prepend-icon="mdi-eye-outline" @click="showPreview = true">预览</v-btn>
+            <v-btn class="ml-3" color="primary" variant="outlined" prepend-icon="mdi-arrow-down-bold-box-outline" @click="handleDownloadImage">保存到本地</v-btn>
+          </div>
+        </div>
       </div>
-      <div class="mt-10" v-if="getToken()">
+      <div class="mt-10">
         <div class="mb-3">方式二：复制以下链接分享给好友</div>
         <div class="pa-4" style="background-color: #f0f0f0; border-radius: 8px;">{{ shareUrlTxt }}</div>
-        <v-btn v-if="!getToken()" class="mt-1" color="warning" variant="text">您还未登录，登录后分享可享受分享有礼活动！</v-btn>
-        <v-btn class="mt-4 ml-3" color="primary" variant="outlined" v-clipboard="() => shareUrlTxt" @click="copyText">点击复制分享链接</v-btn>
+        <div class="text-center">
+          <v-btn class="mt-5 ml-3" color="primary" variant="outlined" v-clipboard="() => shareUrlTxt" @click="copyText">点击复制分享链接</v-btn>
+        </div>
       </div>
       <template #footer>
         <v-divider></v-divider>
@@ -117,17 +125,21 @@
         </div>
       </template>
     </Dialog>
+    <PreviewImg v-if="showPreview" :list="[previewSrc]" @close="showPreview = false" :isImage="true"></PreviewImg>
 
     <Loading :visible="loading"></Loading>
     <div style="position: absolute; left: -9999px; bottom: 0">
       <PosterPage :jobId="id" ref="share"></PosterPage>
     </div>
+
+    <!-- 快速登录 -->
+    <login-page v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></login-page>
   </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
 </template>
 
 <script setup>
-import { commissionCalculation } from '@/utils/position'
 defineOptions({ name: 'position-details' })
+import { commissionCalculation } from '@/utils/position'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { timesTampChange } from '@/utils/date'
@@ -145,64 +157,57 @@ import { prologue, defaultText } from '@/hooks/web/useIM'
 import { getUserAvatar } from '@/utils/avatar'
 import PosterPage from './poster.vue'
 import html2canvas from 'html2canvas'
+import { downloadBase64, DPR } from '@/utils'
+import loginPage from '@/views/common/loginDialog.vue'
 
 const { t } = useI18n()
 const router = useRouter()
 const { id } = router.currentRoute.value.params
 const delivery = ref(false) // 是否已投递简历
 const loading = ref(false)
-
-const DPR = () => {
-  // 获取设备dpi
-  if (window.devicePixelRatio && window.devicePixelRatio > 1) {
-    return window.devicePixelRatio * 2
-  }
-  // 直接返回高像素比
-  return 8
-}
-
-const downloadBase64 = (content, fileName) => {
-  const base64ToBlob = function (code) {
-    let parts = code.split(';base64,')
-    let contentType = parts[0].split(':')[1]
-    let raw = window.atob(parts[1])
-    let rawLength = raw.length
-    let uInt8Array = new Uint8Array(rawLength)
-    for (let i = 0; i < rawLength; ++i) {
-      uInt8Array[i] = raw.charCodeAt(i)
-    }
-
-    return new Blob([uInt8Array], {
-      type: contentType
-    })
-  }
-  let aLink = document.createElement('a')
-  let blob = base64ToBlob(content)
-  aLink.download = fileName + '.png'
-  aLink.href = URL.createObjectURL(blob)
-  aLink.click()
-  loading.value = false
-}
+const showLogin = ref(false)
+const previewSrc = ref('')
+const showPreview = ref(false)
 
 const share = ref()
 // 生成图片
-const generateAndDownloadImage = async () => {  
-  if (!share.value) {  
-    return
-  }
+const generateAndDownloadImage = async () => {
+  if (!share.value) return
   loading.value = true
-  shareDialog.value = false
   try {  
     const canvas = await html2canvas(share.value.$el, { scale: DPR(), useCORS: true })
     const image = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
-    const base64img = `data:image/png;base64,${image}`
-    const { name, areaName, payFrom, payTo } = info.value
-    downloadBase64(base64img, `${name}_${areaName}_${payFrom}-${payTo}-${positionInfo.value.payName}`)
+    previewSrc.value = `data:image/png;base64,${image}`
+    loading.value = false
   } catch (error) {  
     console.error('Error generating image:', error)
     Snackbar.error('图片生成失败')
   }
-}  
+}
+
+// 保存图片到本地
+const handleDownloadImage = () => {
+  const { name, areaName, payFrom, payTo } = info.value
+  downloadBase64(previewSrc.value, `${name}_${areaName}_${payFrom}-${payTo}-${positionInfo.value.payName}`)
+}
+
+// 快速登录
+const loginSuccess = () => {
+  showLogin.value = false
+  Snackbar.success('登录成功')
+  userInfo.value = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
+  shareUrl.value = '/shareJob?' + new URLSearchParams({
+    jobId: id,
+    sharedById: userInfo.value?.id,
+  }).toString()
+  shareDialog.value = true
+  generateAndDownloadImage()
+}
+
+const loginClose = () => {
+  showLogin.value = false
+  Snackbar.warning('您已取消登录，无法分享职位给好友')
+}
 
 // 相似职位
 const similarList = ref([])
@@ -249,31 +254,29 @@ getCollectionStatus()
 // 分享有礼
 const shareDialog = ref(false)
 const shareUrl = ref('')
-const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
+const userInfo = ref(localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {})
 const handleShare = async () => {
   // 分享链接携带参数: 用户id、职位id
-  // if (!id || !userInfo.id) return
+  if (!getToken()) {
+    Snackbar.warning('您还未登录，请先登录后再试')
+    showLogin.value = true
+    return
+  }
+  generateAndDownloadImage()
   shareUrl.value = '/shareJob?' + new URLSearchParams({
     jobId: id,
-    sharedById: userInfo?.id,
+    sharedById: userInfo.value?.id,
   }).toString()
   shareDialog.value = true
 }
-// const openShareLink = () => { window.open(shareUrl.value) }
 
 // 复制分享链接
 const accessUrl = import.meta.env.VITE_ACCESS_BASE_URL
 const shareUrlTxt = computed(() => {
   return accessUrl + shareUrl.value
 })
-const copyText = async () => {
+const copyText = () => {
   Snackbar.success('复制成功')
-  // try {
-  //   await navigator.clipboard.writeText(shareUrlTxt.value)
-  //   Snackbar.success('复制成功')
-  // } catch (err) {
-  //   Snackbar.error('复制失败，请手动复制。')
-  // }
 }
 
 // 收藏&取消收藏职位
@@ -335,6 +338,7 @@ const handleSubmit = async (val) =>{
   }, 3000)
 }
 
+// 沟通
 const toDetails = async (info) => {
   const userId = info.contact.userId
   const enterpriseId = info.contact.enterpriseId
@@ -353,88 +357,5 @@ const toDetails = async (info) => {
 </script>
 
 <style lang="scss" scoped>
-.banner {
-  background-color: #fff;
-  padding: 18px 0 20px;
-}
-.banner-title {
-  line-height: 40px;
-  font-size: 28px;
-  font-weight: 600;
-}
-.banner-title h1 {
-  display: inline-block;
-  color: #37576c;
-  font-size: 28px;
-  margin-right: 30px;
-  margin-top: 1px;
-  max-width: 360px;
-  vertical-align: middle;
-}
-.button-item {
-  min-width: 110px;
-  height: 36px
-}
-.salary {
-  color: var(--v-error-base);
-  line-height: 41px;
-  font-weight: 600;
-  height: auto;
-  display: inline-block;
-  vertical-align: sub;
-}
-.refresh-time {
-  float: right;
-  color: var(--color-666);
-  font-size: 14px;
-  line-height: 66px;
-  vertical-align: sub;
-}
-.banner-tags span {
-  font-weight: 600;
-}
-.radius {
-  border-radius: 8px;
-}
-.content-left {
-  width: 810px;
-  padding: 20px 20px;
-}
-.content-right {
-  flex: 1;
-  padding: 20px 20px 20px 0;
-}
-.label-text {
-  color: #7f7a7a;
-  font-weight: 600;
-}
-.value-text {
-  color: #000;
-  font-weight: 400;
-}
-.requirement {
-  white-space: pre-wrap;
-  word-break: break-all;
-  line-height: 28px;
-  color: var(--color-333);
-  font-size: 15px;
-  text-align: justify;
-  letter-spacing: 0;
-}
-.contact {
-  height: 60px;
-  line-height: 60px;
-}
-.contact-name {
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--color-222);
-  line-height: 28px;
-}
-.contact-info {
-  font-size: 15px;
-  color: var(--color-666);
-  line-height: 21px;
-  margin-top: 8px;
-}
+@import '@/styles/recruit/position/index.scss'
 </style>

src/views/recruit/personal/position/components/poster.vue

@@ -3,7 +3,7 @@
   <div style="background-color: #f0f0f0;" :style="{'padding': '10px'}">
     <v-card
       class="py-3 px-5"
-      style="min-height: calc(100vh - 20px); box-sizing: border-box; margin: 0 auto;"
+      style="min-height: calc(100vh - 20px); box-sizing: border-box; margin: 0 auto;width: 900px;"
     >
       <div v-if="!Object.keys(info).length">加载失败</div>
       <div v-else>

src/views/recruit/personal/shareJob/index.vue

@@ -100,7 +100,7 @@
 <script setup>
 import { commissionCalculation } from '@/utils/position'
 defineOptions({name: 'recruit-personal-shareJob-index'})
-import loginPage from './components/login.vue'
+import loginPage from '@/views/common/loginDialog.vue'
 import simplePage from './sendResume/simple.vue'
 import selectPage from './sendResume/select.vue'
 import { onMounted, reactive, ref } from 'vue';