分享 二维码， 锁定裁剪

.env.development

+VUE_APP_API_URL = 'http://192.168.10.214/api/common/post'
+VUE_APP_UPLOADURLAPI_URL = 'http://192.168.10.214:8120'
+VUE_APP_SHARE_URL = 'http://127.0.0.1:8080'
\ No newline at end of file

.env.production

+VUE_APP_API_URL = 'http://reborn.oytour.com/api/common/post'
+VUE_APP_UPLOADURLAPI_URL = 'http://upload.oytour.com'
+VUE_APP_SHARE_URL = 'http://vitto.com'
\ No newline at end of file

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode development",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "build:fonts": "node scripts/build-fonts"
@@ -13,6 +13,7 @@
     "@icon-park/vue-next": "^1.4.2",
     "@types/ali-oss": "^6.16.11",
     "@types/psd": "^3.4.3",
+    "@vueuse/integrations": "^10.7.0",
     "ali-oss": "^6.18.1",
     "animate.css": "^4.1.1",
     "axios": "^1.6.2",
@@ -45,12 +46,14 @@
     "prosemirror-state": "^1.4.1",
     "prosemirror-view": "^1.27.2",
     "psd.js": "^3.9.0",
+    "qrcode": "^1.5.3",
     "register-service-worker": "^1.7.2",
     "svg-arc-to-cubic-bezier": "^3.2.0",
     "svg-pathdata": "^6.0.3",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
     "vue": "^3.3.7",
+    "vue-router": "^4.2.5",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

src/App.vue

@@ -6,12 +6,17 @@
     <Editor v-else-if="_isPC" />
     <Mobile v-else />
   </div>
+  <el-result v-if="loading" title="404" :sub-title="ShareTips">
+    <template #icon></template>
+    <template #extra></template>
+  </el-result>
 </template>
 
 <script lang="ts" setup>
 import { onMounted,ref,provide } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useScreenStore, useMainStore, useSnapshotStore, useFontStore,useSellTemplate } from '@/store'
+import { useScreenStore, useMainStore, useSnapshotStore, 
+  useFontStore, useSellTemplateStore, useSlidesStore } from '@/store'
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
 import { deleteDiscardedDB } from '@/utils/database'
 import { isPC, query } from './utils/common'
@@ -19,6 +24,7 @@ import { userStore } from './store/user'
 import { injectKeyTemplate } from '@/types/injectKey'
 import ConfigService from '@/services/ConfigService'
 import { domainManager } from '@/utils/domainManager'
+import { enterFullscreen, exitFullscreen, isFullscreen } from '@/utils/fullscreen'
 
 import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
@@ -32,6 +38,9 @@ provide(injectKeyTemplate,searchData)
 
 const isFinish = ref(false)
 
+const loading = ref(false)
+const ShareTips = ref('')
+
 
 const _isPC = isPC()
 
@@ -43,31 +52,44 @@ const ConfigIdStore = useScreenStore()
 const marketStore = useScreenStore()
 const isModelStore = useScreenStore()
 const TempIdStore = useScreenStore()
+const ScreenStore = useScreenStore()
+const SellTemplateStore = useSellTemplateStore()
+const slidesStore = useSlidesStore()
 const { databaseId } = storeToRefs(mainStore)
 const { screening, market, model, ConfigId } = storeToRefs(useScreenStore())
 const { userInfo } = storeToRefs(userStore())
-const { SalesEditor } = storeToRefs(useSellTemplate())
+const { SalesEditor, SalesTripId } = storeToRefs(useSellTemplateStore())
+const { slides } = storeToRefs(useSlidesStore())
+const { enterScreeningFromStart } = storeToRefs(useScreenStore())
 
 if (process.env.NODE_ENV === 'production') {
   window.onbeforeunload = () => false
 }
 const userLoginHandler = async ()=>{
   let param = query()
-  let userId = 1
+  let userId = 0
   let ConfigId = 0 // 9117
   let model = 0
+  let SalesTripId = ''
+  await useFontStore().loadAllFonts()
   if(param.uid) userId=parseInt(param.uid)
   if(param.ConfigId) ConfigId=parseInt(param.ConfigId)
   if(param.model) model=parseInt(param.model)
+  if(param.SalesTripId) {
+    SalesTripId = param.SalesTripId
+    SellTemplateStore.setSalesTripId(SalesTripId)
+    try {
+      await sellGetTripTemplate()
+    } catch (error) {}
+  }
   ConfigIdStore.setConfigId(ConfigId)
   modelStore.setModel(model)
   try {
     await userStore().setUserLoginAsync(userId,ConfigId) 
-    await useFontStore().loadAllFonts()
     if(ConfigId>0&&model!=2) await GetTripConfig(ConfigId)
   } catch (error) {}
-  isFinish.value=true
-  if(!ConfigId&&!model) ElMessageBox.confirm(
+  if(userId>0)isFinish.value=true
+  if(!ConfigId&&!model&&(param.SalesTripId&&param.SalesTripId=='')) ElMessageBox.confirm(
     '当前没有权限进行任何操作，请联系管理员！',
     '提示',
     {
@@ -79,13 +101,55 @@ const userLoginHandler = async ()=>{
   .catch(() => {})
   
 }
-
 onMounted(async () => {
   await deleteDiscardedDB()
   snapshotStore.initSnapshotDatabase()
   mainStore.setAvailableFonts()
 })
 
+// 销售模版数据
+const sellGetTripTemplate = async () =>{
+  
+  const loadingObj = ElLoading.service({
+    text:'正在渲染数据',
+    lock:true
+  })
+  try {
+      let queryMsg = {
+        Code: SalesTripId.value
+      }
+      const slidesData = slides.value
+      let dataRes = await ConfigService.GetTripOtherByCode(queryMsg);
+      if (dataRes.data.resultCode == 1) {
+        loadingObj.close()
+        loading.value = false
+        isFinish.value=true
+        let dataObj = dataRes.data.data
+        let viewportRatio = 1.414
+        if(dataRes.data.data.TempType==1) viewportRatio = 0.7069
+        slidesStore.setViewportRatio(viewportRatio)
+        let SlidesData = JSON.parse(dataObj.TempData)
+        let newSlides = []
+        await SlidesData.forEach((x,i)=>{
+          newSlides.push(x)
+        })
+        slidesStore.setSlides(newSlides)
+        slidesStore.updateSlideIndex(0)
+        ScreenStore.setScreening(true)
+        enterScreeningFromStart
+      }else{
+        loading.value = true
+        ShareTips.value = dataRes.data.message
+        loadingObj.close()
+      }
+  } catch (error) {
+    loading.value = true
+    ShareTips.value = error
+    loadingObj.close()
+  }
+}
+
+
 /**
  * 根据团期配置编号获取行程详情
  */

src/components/QRCode/QRCode.vue

+<script setup lang="ts">
+    import { useQRCode } from '@vueuse/integrations/useQRCode'
+    /*
+      参考文档：https://vueuse.org/integrations/useQRCode/
+      https://www.npmjs.com/package/qrcode#qr-code-options
+    */
+    interface Props {
+      value?: string // 扫描后的文本或地址
+      size?: number // 二维码大小，单位px
+      color?: string // 二维码颜色，Value must be in hex format (十六进制颜色值)
+      bgColor?: string // 二维码背景色，Value must be in hex format (十六进制颜色值)
+      bordered?: boolean // 是否有边框
+      borderColor?: string // 边框颜色
+      scale?: number // 每个black dots多少像素
+      /*
+        纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
+        通常情况下二维码分为 4 个纠错级别：L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。
+        并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。
+        当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
+      */
+      errorLevel?: 'L'|'M'|'Q'|'H' // 二维码纠错等级
+    }
+    const props = withDefaults(defineProps<Props>(), {
+      value: '',
+      size: 160,
+      color: '#000',
+      bgColor: '#FFF',
+      bordered: true,
+      borderColor: '#0505050f',
+      scale: 8,
+      errorLevel: 'H' // 可选 L M Q H
+    })
+     
+    // `qrcode` will be a ref of data URL
+    const qrcode = useQRCode(props.value, {
+      errorCorrectionLevel: props.errorLevel,
+      type: 'image/png',
+      quality: 1,
+      margin: 3,
+      scale: props.scale, // 8px per modules(black dots)
+      color: {
+        dark: props.color, // 像素点颜色
+        light: props.bgColor // 背景色
+      }
+    })
+</script>
+<template>
+      <div class="m-qrcode" :class="{'bordered': bordered}" :style="`width: ${size}px; height: ${size}px; border-color: ${borderColor};`">
+        <img :src="qrcode" class="u-qrcode" alt="QRCode" />
+      </div>
+</template>
+<style scoped>
+    .m-qrcode {
+      display: inline-block;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .u-qrcode {
+        width: 100%;
+        height: 100%;
+      }
+    .bordered {
+      border-width: 1px;
+      border-style: solid;
+    }
+</style>
\ No newline at end of file

src/configs/axios.ts

@@ -3,7 +3,7 @@ import Axios, {
 	InternalAxiosRequestConfig,
 	AxiosError,
   } from 'axios';
-import { domainManager } from '@/utils/domainManager'
+// import { domainManager } from '@/utils/domainManager'
 let datas: AxiosResponse
 
 export enum ApiResult{
@@ -66,7 +66,7 @@ const getErrorCode2text = (response: AxiosResponse): string => {
  * service.get<{data: string; code: number}>('/test').then(({data}) => { console.log(data.code) })
  */
 const service = Axios.create({
-	baseURL: `${domainManager().domainUrl}`,//'http://192.168.10.214/api/common/post'
+	baseURL: process.env.VUE_APP_API_URL,//'http://192.168.10.214/api/common/post'
 	timeout: 20000,
 	headers: {
 		'User-Type': 'bus',

src/configs/axiosUpload.ts

@@ -3,7 +3,7 @@ import Axios, {
 	InternalAxiosRequestConfig,
 	AxiosError,
   } from 'axios';
-import { domainManager } from '../utils/domainManager'
+// import { domainManager } from '../utils/domainManager'
 let datas: AxiosResponse
 
 export enum ApiResult{
@@ -66,7 +66,7 @@ const getErrorCode2text = (response: AxiosResponse): string => {
  * service.get<{data: string; code: number}>('/test').then(({data}) => { console.log(data.code) })
  */
 const service = Axios.create({
-	baseURL: domainManager().UploadUrl,
+	baseURL: process.env.VUE_APP_UPLOADURLAPI_URL,
 	timeout: 20000,
 	headers: {
 		"Content-Type": "application/x-www-form-urlencoded;"

src/services/ConfigService.ts

@@ -4,6 +4,14 @@ import Api,{ HttpResponse, Result } from './../utils/request';
  * 配置相关方法
  */
 class ConfigService{
+     
+    /**
+     * 分享销售模版详情
+     */
+     static async GetTripOtherByCode(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTripOtherByCode",params)
+    }
+
     /**
      * 销售模版详情
      */

src/store/index.ts

@@ -4,7 +4,7 @@ import { useSnapshotStore } from './snapshot'
 import { useKeyboardStore } from './keyboard'
 import { useScreenStore } from './screen'
 import { useFontStore } from './font'
-import { useSellTemplate } from './sellTemplate'
+import { useSellTemplateStore } from './sellTemplate'
 
 export {
   useMainStore,
@@ -13,5 +13,5 @@ export {
   useKeyboardStore,
   useScreenStore,
   useFontStore,
-  useSellTemplate
+  useSellTemplateStore
 }
\ No newline at end of file

src/store/screen.ts

@@ -38,6 +38,7 @@ export const useScreenStore = defineStore('screen', {
 
   actions: {
     setScreening(screening: boolean) {
+      if(location.href.indexOf(process.env.VUE_APP_SHARE_URL)!=-1&&!screening) return
       this.screening = screening
       if (screening) {
         this.market = false

src/store/sellTemplate.ts

@@ -3,12 +3,14 @@ import { defineStore } from 'pinia'
 export interface SalesState {
     SalesEditor: number,
     SalesBack: number,
+    SalesTripId: string,
 }
 
-export const useSellTemplate = defineStore('sales', {
+export const useSellTemplateStore = defineStore('sales', {
   state: (): SalesState => ({
     SalesEditor: 0, // 1 新增 2编辑
-    SalesBack: 0,// 0
+    SalesBack: 0,// 0 销售首页  1 模版首页
+    SalesTripId: '', // 销售行程id
   }),
 
   actions: {
@@ -18,5 +20,8 @@ export const useSellTemplate = defineStore('sales', {
     setSalesBack(SalesBack: number) {
       this.SalesBack = SalesBack
     },
+    setSalesTripId(SalesTripId: string) {
+      this.SalesTripId = SalesTripId
+    },
   },
 })
\ No newline at end of file

src/utils/common.ts

@@ -18,14 +18,24 @@ export const isPC = () => {
 
 export const query = (url?:string)=>{
   url = url??location.href
-  let str = url.substr(url.indexOf('?') + 1)
-  let json = {} as any
-  const arr = str.split('&')
-  for(let i = 0; i < arr.length; i++) {
-    let item = arr[i].split('=')
-    json[item[0]] = item[1]
+  if(url.indexOf(process.env.VUE_APP_SHARE_URL)!=-1){
+    let str = process.env.VUE_APP_SHARE_URL.indexOf('127.0.0.1:8080')?url.split('8080/'):url.split('vitto.com/')
+    let json = {
+      SalesTripId: ''
+    } as any
+    json.SalesTripId = str[1]
+    return json
+  }else{
+    let str = url.substr(url.indexOf('?') + 1)
+    let json = {} as any
+    const arr = str.split('&')
+    for(let i = 0; i < arr.length; i++) {
+      let item = arr[i].split('=')
+      json[item[0]] = item[1]
+    }
+    return json
   }
-  return json
+  
 }
 
 /**

src/views/Editor/CanvasTool/UploadPicture.vue

@@ -249,10 +249,12 @@ const setImgs = async () => {
                 tempSize.width = Math.ceil(tempSize.width*ratio)
                 tempSize.height = Math.ceil(tempSize.height*ratio)
             }
-            propsDatas.value.left -= (tempSize.width - width) / 2
-            propsDatas.value.top -= (tempSize.height - height) / 2
-            propsDatas.value.width = tempSize.width
-            propsDatas.value.height = tempSize.height
+            if(tempSize.width) {
+                propsDatas.value.left -= (tempSize.width - width) / 2
+                propsDatas.value.top -= (tempSize.height - height) / 2
+                propsDatas.value.width = tempSize.width
+                propsDatas.value.height = tempSize.height
+            }
         } else{
             var img = new Image()
             img.src = propsDatas.value.src
@@ -277,10 +279,12 @@ const setImgs = async () => {
                     img.width = Math.ceil(img.width*ratio)
                     img.height = Math.ceil(img.height*ratio)
                 }
-                propsDatas.value.left -= (img.width - width) / 2
-                propsDatas.value.top -= (img.height - height) / 2
-                propsDatas.value.width = img.width
-                propsDatas.value.height = img.height
+                if(img.width) {
+                    propsDatas.value.left -= (img.width - width) / 2
+                    propsDatas.value.top -= (img.height - height) / 2
+                    propsDatas.value.width = img.width
+                    propsDatas.value.height = img.height
+                }
             }
         }
         propsDatas.value.fixedRatio = true

src/views/Editor/EditorHeader/index.vue

@@ -139,7 +139,7 @@ import { nextTick, ref, reactive, inject, computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { toPng, toJpeg } from 'html-to-image'
 import message from '@/utils/message'
-import { useMainStore, useSlidesStore, useSellTemplate } from '@/store'
+import { useMainStore, useSlidesStore, useSellTemplateStore } from '@/store'
 import useScreening from '@/hooks/useScreening'
 import useImport from '@/hooks/useImport'
 import useSlideHandler from '@/hooks/useSlideHandler'
@@ -173,9 +173,9 @@ const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
 const layoutsStore = useSlidesStore()
 const { title, slides, slideIndex, viewportRatio } = storeToRefs(slidesStore)
-const { SalesEditor, SalesBack } = storeToRefs(useSellTemplate())
-const SalesEditorStore = useSellTemplate()
-const SalesBackStore = useSellTemplate()
+const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
+const SalesEditorStore = useSellTemplateStore()
+const SalesBackStore = useSellTemplateStore()
 const { enterScreening, enterScreeningFromStart } = useScreening()
 const { importSpecificFile, importPPTXFile, exporting } = useImport()
 const { resetSlides } = useSlideHandler()

src/views/Editor/Thumbnails/index.vue

@@ -51,7 +51,7 @@
 <script lang="ts" setup>
 import { computed, nextTick, ref, reactive, watch, inject } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore, useKeyboardStore, useScreenStore, useSellTemplate } from '@/store'
+import { useMainStore, useSlidesStore, useKeyboardStore, useScreenStore, useSellTemplateStore } from '@/store'
 import { fillDigit } from '@/utils/common'
 import { isElementInViewport } from '@/utils/element'
 import type { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -79,7 +79,7 @@ const keyboardStore = useKeyboardStore()
 const { selectedSlidesIndex: _selectedSlidesIndex, thumbnailsFocus } = storeToRefs(mainStore)
 const { slides, currentSlide, slideIndex, layoutSlides } = storeToRefs(slidesStore)
 const { ctrlKeyState, shiftKeyState } = storeToRefs(keyboardStore)
-const { SalesEditor, SalesBack } = storeToRefs(useSellTemplate())
+const { SalesEditor, SalesBack, SalesTripId } = storeToRefs(useSellTemplateStore())
 
 const { slidesLoadLimit } = useLoadSlides()
 const TemplateTypeStore = useScreenStore()
@@ -130,10 +130,13 @@ watch(() => slideIndex.value, () => {
 
 // 监听请求保存成功 重新请求数据 1模版
 watch(() => dataLoading.value, (n,o) =>{
-  if(dataLoading.value==1){
-    GetTripTemplate()
-  }else if(dataLoading.value==2){
-    if(ConfigId.value) GetTripConfig()
+  if(searchData.value.sellId) sellGetTripTemplate()
+  else{
+    if(dataLoading.value==1){
+      GetTripTemplate()
+    }else if(dataLoading.value==2){
+      if(ConfigId.value) GetTripConfig()
+    }
   }
 })
 
@@ -282,10 +285,12 @@ const GetTripFiledData = async () =>{
                         tempSize.width = Math.ceil(tempSize.width*ratio)
                         tempSize.height = Math.ceil(tempSize.height*ratio)
                       }
-                      y.left -= (tempSize.width - width) / 2
-                      y.top -= (tempSize.height - height) / 2
-                      y.width = tempSize.width
-                      y.height = tempSize.height
+                      if(tempSize.width){
+                        y.left -= (tempSize.width - width) / 2
+                        y.top -= (tempSize.height - height) / 2
+                        y.width = tempSize.width
+                        y.height = tempSize.height
+                      }
                       y.fixedRatio = true
                     } catch (error) {
                       console.log(error)
@@ -428,7 +433,7 @@ const GetTripTemplate = async () =>{
         queryObj.value.TempType = dataRes.data.data.TempType
         
 
-        if(searchData.value.sellId) sellGetTripTemplate()
+        
         if(ConfigId.value==0) return 
         if(TempId.value&&!searchData.value.TempId) await GetTripConfig()
         await GetTripFiledData()
@@ -443,12 +448,17 @@ const GetTripTemplate = async () =>{
 // 销售模版数据
 const sellGetTripTemplate = async () =>{
   try {
+      let Id = 0
+      if(searchData.value.sellId) Id = searchData.value.sellId
       let queryMsg = {
-        Id: searchData.value.sellId
+        Id: Id
       }
       let dataRes = await ConfigService.sellGetTemplateDetails(queryMsg);
       if (dataRes.data.resultCode == 1) {
         let dataObj = dataRes.data.data
+        let viewportRatio = 1.414
+        if(dataRes.data.data.TempType==1) viewportRatio = 0.7069
+        slidesStore.setViewportRatio(viewportRatio)
         if(SalesBack.value==0) slidesStore.setTitle(dataRes.data.data.Title)
         if(SalesBack.value==0&&searchData.value.sellTempId){
           let SlidesData = JSON.parse(dataObj.TempData)
@@ -651,7 +661,9 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
     },
   ]
 }
-  GetTripTemplate()
+if(searchData.value.sellId) sellGetTripTemplate()
+else GetTripTemplate()
+  
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -6,7 +6,13 @@
     ></div>
 
     <ElementFlip />
-
+    <div class="element-data-mapping">
+      <divider />
+      <div class="q-mb-md row items-center">
+          <div class="text-small col">锁定裁剪</div>
+          <el-checkbox v-model="ctrlKeyState" label="锁定裁剪比列" size="small" @change="getLockCutRatio"/>
+      </div>
+    </div>
     <ButtonGroup class="row" passive>
       <Button first style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
       <Popover trigger="click" v-model:value="clipPanelVisible" style="width: calc(100% / 6);">
@@ -67,7 +73,7 @@
 <script lang="ts" setup>
 import { type Ref, ref, provide } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore, useScreenStore } from '@/store'
+import { useMainStore, useSlidesStore, useScreenStore, useKeyboardStore } from '@/store'
 import type { PPTImageElement, SlideBackground } from '@/types/slides'
 import { CLIPPATHS } from '@/configs/imageClip'
 import { getImageDataURL } from '@/utils/image'
@@ -123,8 +129,11 @@ const ratioClipOptions = [
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
+const keyboardStore = useKeyboardStore()
 const { handleElement, handleElementId } = storeToRefs(mainStore)
 const { currentSlide } = storeToRefs(slidesStore)
+const { ctrlKeyState } = storeToRefs(useKeyboardStore())
+
 const param = query()
 const mode = parseInt(param.model??1)
 
@@ -138,6 +147,10 @@ const { imgReplaceVisible } = storeToRefs(useScreenStore())
 
 provide('imgType',2)
 
+const getLockCutRatio = () =>{
+  keyboardStore.setCtrlKeyState(ctrlKeyState.value)
+}
+
 const getImgVis = () =>{
   imgReplaceVisible.value = true
 }

src/views/Market/Index.vue

@@ -26,12 +26,14 @@
                 </el-col>
             </el-row>
             <div class="q-mt-lg bg-white rounded text-nowrap" style="padding: 20px 20px 0 20px;">
-                <div class="row text-small items-center wrap">
+                <div class="row text-small items-center nowrap">
                     <span style="margin-right: 50px;">适用线路：</span>
-                    <el-check-tag :checked="queryObj.LineId == 0" @change="onLineChangeHandler(0)"
+                    <div class="row wrap">
+                        <el-check-tag :checked="queryObj.LineId == 0" @change="onLineChangeHandler(0)"
                         class="text-small q-mr-md">全部</el-check-tag>
-                    <el-check-tag :checked="queryObj.LineId == x.LineID" @change="onLineChangeHandler(x.LineID)"
-                        class="text-small q-mr-md" v-for="x in lines" :key="x.LineID">{{x.LineName}}</el-check-tag>
+                        <el-check-tag :checked="queryObj.LineId == x.LineID" @change="onLineChangeHandler(x.LineID)"
+                            class="text-small q-mr-md" v-for="x in lines" :key="x.LineID">{{x.LineName}}</el-check-tag>
+                    </div>
                 </div>
                 <el-divider style="margin:12px 0;border-top-color:#f3f6fb;"></el-divider>
                 <div class="row wrap items-center q-pb-md">
@@ -201,7 +203,7 @@
     import LineService from '@/services/LineService'
     import ConfigService from '@/services/ConfigService'
     import { userStore } from "@/store/user";
-    import { useSlidesStore, useSellTemplate } from '@/store'
+    import { useSlidesStore, useSellTemplateStore } from '@/store'
     import { useScreenStore } from "@/store/screen";
     import { storeToRefs } from "pinia";
     import { injectKeyTemplate } from '@/types/injectKey'
@@ -255,8 +257,8 @@
     const TempIdStore = useScreenStore()
     const { screening, market, model, isModel, ConfigId, TempId} = storeToRefs(useScreenStore())
     
-    const SalesEditorStore = useSellTemplate()
-    const { SalesEditor, SalesBack } = storeToRefs(useSellTemplate())
+    const SalesEditorStore = useSellTemplateStore()
+    const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
 
     const addTemplate = () =>{
         marketStore.setMarket(!market)

src/views/SellTemplate/SellTemplate.vue

@@ -30,20 +30,41 @@
                     </div>
                     <div>{{item.UpdateTime}}</div>
                     <div class="row flex-between">
-                        <el-tooltip
-                            class="box-item"
-                            effect="dark"
-                            content="编辑"
-                            placement="top">
-                            <el-button type="primary" icon="Edit" size="small" @click="editDelete(item,0)"></el-button>
-                        </el-tooltip> 
-                        <el-tooltip
-                            class="box-item"
-                            effect="dark"
-                            content="删除"
-                            placement="top">
-                            <el-button type="primary" icon="Delete" size="small" @click="editDelete(item,1)"></el-button>
-                        </el-tooltip>
+                        <div>
+                            <el-tooltip
+                                class="box-item"
+                                effect="dark"
+                                content="编辑"
+                                placement="top">
+                                <el-button type="primary" icon="Edit" size="small" @click="editDelete(item,0)"></el-button>
+                            </el-tooltip> 
+                        </div>
+                        <div>
+                            <el-tooltip
+                                class="box-item q-mr-md"
+                                effect="dark"
+                                content="删除"
+                                placement="top">
+                                <el-button type="primary" icon="Delete" size="small" @click="editDelete(item,1)"></el-button>
+                            </el-tooltip>
+                        </div>
+                        <div>
+                            <Popover trigger="click" placement="bottom-start" v-model:value="item.show">
+                                <template #content>
+                                    <QRCode
+                                    :value="item.ShareUrl"
+                                    :bordered="false" />
+                                </template>
+                                <el-tooltip
+                                    class="box-item"
+                                    effect="dark"
+                                    content="分享"
+                                    placement="top">
+                                    <el-button type="primary" icon="Share" size="small"></el-button>
+                                </el-tooltip>
+                            </Popover>
+                        </div>
+                       
                     </div>
                 </div>
             </div>
@@ -64,13 +85,16 @@
     import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
 
     import { injectKeyTemplate } from '@/types/injectKey'
-    import { useSellTemplate, useScreenStore } from '@/store'
+    import { useSellTemplateStore, useScreenStore } from '@/store'
     import ConfigService from '@/services/ConfigService'
     import { query } from '@/utils/common'
+
+    
+    import QRCode from '@/components/QRCode/QRCode.vue'
     
 
     import navItem from '@/views/components/navs/index.vue'
-    const SalesEditorStore = useSellTemplate()
+    const SalesEditorStore = useSellTemplateStore()
     const marketStore = useScreenStore()
     const searchData = ref({} as any)
     searchData.value = inject(injectKeyTemplate)
@@ -146,6 +170,12 @@
             if(queryObj.pageIndex == 1) dataList.value =[]
             let pageRes = await ConfigService.sellGetTripOtherPage(queryObj);
             if (pageRes.data.resultCode == 1) {
+                let arrList = function(list){
+                    list.forEach(x => {
+                        x.show = false
+                    });
+                }
+                arrList(pageRes.data.data.pageData)
                 dataList.value = dataList.value.concat(pageRes.data.data.pageData);
                 queryObj.pageCount = pageRes.data.data.pageCount;
             }
@@ -205,7 +235,7 @@
         flex-shrink: 0;
     }
     .sellHeader>div:last-child,.sellList>div:last-child{
-        flex: 0 0 80px;
+        flex: 0 0 120px;
     }
     .sellCreateTime{
         color: #a3a3a3;

src/views/components/sellNavs/index.vue

@@ -19,13 +19,13 @@
 <script setup lang="ts">
     import { reactive, ref, inject, watch, onMounted} from "vue";
     import { storeToRefs } from 'pinia'
-    import { useSellTemplate,useScreenStore } from '@/store'
+    import { useSellTemplateStore,useScreenStore } from '@/store'
 
     import { injectKeyTemplate } from '@/types/injectKey'
 
     const searchData = ref({} as any)
     searchData.value = inject(injectKeyTemplate)
-    const SalesEditorStore = useSellTemplate()
+    const SalesEditorStore = useSellTemplateStore()
     const marketStore = useScreenStore()
     const { market } = storeToRefs(useScreenStore())