优化 模版详情

src/components/home/temDetails.vue

@@ -37,7 +37,13 @@
                     <div class="q-pt-lg">
                         <div class="addTemplateBoxRec addTemplateBoxRecw136 rounded6 color0 text-center">
                             <template v-if="!showCurrentTemplate.Width">
-                                {{showCurrentTemplate.TempType==1?'横版':'竖版'}}
+                                <template v-if="showCurrentTemplate.TempType==1">
+                                    1754 * 1240
+                                </template>
+                                <template v-else>
+                                    1240 * 1754
+                                </template>
+                                <!-- {{showCurrentTemplate.TempType==1?'横版':'竖版'}} -->
                             </template>
                             <template v-else>
                                 {{showCurrentTemplate.Width?showCurrentTemplate.Width:0}} * {{showCurrentTemplate.Height?showCurrentTemplate.Height:0}} px

src/components/home/vipFooter.vue

+<template>
+    
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, inject, onMounted, watch} from "vue";
+import LineService from '@/services/LineService'
+import ConfigService from '@/services/ConfigService'
+import { useUserStore } from "@/store/user";
+import { useSellTemplateStore } from '@/store'
+import { useScreenStore } from "@/store/screen";
+import { storeToRefs } from "pinia";
+import { injectKeyTemplate } from '@/types/injectKey'
+import { createOpEditorLink, createSaleCreateLink, managerTemplateLink } from '@/utils/common'
+import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+import { useRouter } from "vue-router";
+import UserCard from "@/components/User/UserCard.vue";
+import { Delete,View } from '@element-plus/icons-vue';
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
+import foote from '@/components/footer/index.vue';
+
+import { noDataImg } from "@/utils/common";
+
+const {
+    userInfo
+} = storeToRefs(useUserStore())
+const router = useRouter();
+const scrollContainer = ref<any>()
+const scrollToElement = ref<any>()
+
+
+const searchData = ref({} as any)
+searchData.value = inject(injectKeyTemplate)
+const marketStore = useScreenStore()
+const { market, ConfigId} = storeToRefs(useScreenStore())
+const personVisible = ref(false)
+
+const model = ref(2)
+const showCurrentTemplate = ref<any>()
+const imgList = ref<any>()
+const datas = reactive({
+    scrollTop: 0,
+    currentImg: 0,// 当前查看img
+})
+let TemplateType = 0
+if(router.currentRoute.value.path=='/market') model.value=1
+if(router.currentRoute.value.path.includes('create')) {
+    model.value=2
+    if(router.currentRoute.value.fullPath.indexOf('/ad')!=-1) TemplateType = 2
+    else if(router.currentRoute.value.fullPath.indexOf('/trip')!=-1) TemplateType = 1
+}else if(router.currentRoute.value.path.includes('op')) {
+    model.value=0
+} 
+marketStore.setModel(model.value)
+
+const props = defineProps({
+    DetaTem:{
+        type: Boolean,
+        default: false,
+    },
+    Details:{
+        type: Object,
+        default: {},
+    }
+})
+const emit = defineEmits<{
+    (event: 'close'): void,
+}>()
+
+// 删除监听滚动
+const CloseDetails = () => {
+    emit('close')
+    // document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
+}
+
+const ToggleImg = (text: String) => {
+    if(text=='left'){
+        if(datas.currentImg>0) {
+            datas.currentImg--
+            scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
+        }
+    }
+    if(text=='right'){
+        if(datas.currentImg<imgList.value.length-1) {
+            datas.currentImg++
+            scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
+        }
+    }
+    
+}
+const addTemplate = (type:number) =>{
+    router.push({
+        path:`/create_template/${type}`
+    })
+}
+
+// 图片滚动翻页
+const handleScroll = (e) =>{
+    let temp = document.querySelector("#scrollId .Details-left").scrollTop;
+    let PageImageList = imgList.value
+    for(let i=0;i<PageImageList.length;i++){
+        if(temp>=PageImageList[i].imgTop&&datas.currentImg!=i) datas.currentImg = i
+    }
+}
+// 查看所有子模版
+const getTemplate = async (item:any) => {
+    if(!item) return
+    if(item.PageImageList && item.PageImageList.length>0){
+        datas.currentImg = 0
+        datas.DetailsVisible = true
+        imgList.value = []
+        let arrList = function(list){
+            list.forEach(x=>{
+                imgList.value.push({
+                    url: x,
+                    imgTop: 0
+                })
+            })
+        }
+        arrList(item.PageImageList)
+        showCurrentTemplate.value = item
+        if(item.PageImageList.length>1){
+            setTimeout(()=>{
+                for(let i=0;i<imgList.value.length;i++){
+                    imgList.value[i].imgTop =  (scrollToElement.value[i].offsetHeight+30)*i
+                }
+                document.querySelector("#scrollId .Details-left").addEventListener("scroll", handleScroll);
+            },500)
+        }
+    }else{
+        ElMessage.warning({
+            showClose: true,
+            message: `当前${item.TemplateType==2?'广告':'行程'}没有预览信息，请选择其他操作`,
+        })
+    }
+}
+
+/**
+ * 页面跳转
+ */
+const goToTemplate = (item: any) => {
+    let url = ''
+    if(model.value==2) url = createSaleCreateLink(item.TempId,item.TemplateType)
+    else if(model.value==0 && router.currentRoute.value.params.configId) url = createOpEditorLink(parseInt(router.currentRoute.value.params.configId.toString()),item.TempId)
+    else if(model.value==1) url = managerTemplateLink(item.TempId,item.TemplateType)
+    if(url!='') {
+        router.push({
+            path:url
+        })
+    }
+}
+
+watch(()=>props.Details,()=>{
+    
+})
+</script>
+
+<style lang="scss" scoped>
+    
+    
+</style>
\ No newline at end of file

src/views/Market/Index.vue

@@ -206,6 +206,8 @@
     
     <!-- 行程、广告图详情 -->
     <temDetails :DetaTem="DetailsVisible" :Details="datas.TemDetails" @close="DetailsVisible=false"/>
+    <!-- vip -->
+    <vipFooter></vipFooter>
 </template>
 
 <script setup lang="ts">
@@ -225,6 +227,7 @@ import { Delete,View } from '@element-plus/icons-vue';
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 import foote from '@/components/footer/index.vue';
 import temDetails from "@/components/home/temDetails.vue";
+import vipFooter from "@/components/home/vipFooter.vue";
 
 import { noDataImg } from "@/utils/common";
 

src/views/UserCenter/Index.vue

 <template>
   <div class="user-header rounded row items-center" :style="{ background: userTheme?.bg }">
-    <el-avatar :size="64" :src="userInfo.photo" shape="square" :style="{ BackgroundColor: userTheme?.color }" style="font-size: 36px;font-weight: bold;"></el-avatar>
+    <el-avatar :size="64" :src="userInfo.photo" shape="square" 
+    :style="{ BackgroundColor: userTheme?.color }" 
+    style="font-size: 36px;font-weight: bold;"></el-avatar>
     <div class="q-ml-lg text-white col">
       <div class="" style="font-size: 20px;">{{ userInfo.nickname }}</div>
       <!-- <div class="q-mt-sm text-info">个人账号ID：{{ userInfo.cardno??'8027970449819221090' }}</div> -->

src/views/UserCenter/Setting.vue

 <template>
     <div class="user-setting">
         <div class="row flex-center">
-            <el-upload drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" class="avatar-upload">
+            <el-upload drag 
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" 
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+            class="avatar-upload">
                 <el-avatar :size="72" :src="userInfo.photo" shape="square" class="bg-transparent"></el-avatar>
                 <div class="after-overlayer">上传</div>
             </el-upload>
@@ -113,6 +117,7 @@ import { ref, reactive } from "vue";
 import { ApiResult } from '@/configs/axios';
 import UserServices from '@/services/UserService'
 import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
+import { domainManager } from '@/utils/domainManager'
 
 const useUser = useUserStore()
 const { userInfo } = storeToRefs(useUser)
@@ -167,6 +172,25 @@ const rules = reactive<FormRules<RuleForm>>({
     ]
 })
 
+//上传头像地址
+const getUploadActionUrl=()=>{
+  let uid=userInfo.value.id;
+   const url=domainManager().domainUrl.replace("common","file")+`?cmd=dmc_post_LocalFileUpload&Type=19&fileType=3&PPTEmployeeId=${encodeURIComponent(uid)}`
+   return url;
+}
+
+const handleAvatarSuccess=async (res:any)=>{
+    if(res.data&&res.data.failUrl){
+        userInfo.value.photo = domainManager().DownloadUrl.replace("common","file")+`${res.data.failUrl}`
+        
+    }
+   console.log("handleAvatarSuccess_res",res);
+}
+
+const beforeAvatarUpload=async (res:any)=>{
+    console.log("beforeAvatarUpload_res",res);
+}
+
 const closeForm = () => {
     bindFormRef.value.clearValidate()
     bindFormRef.value.resetFields()