销售首页列表

src/assets/styles/common.css

@@ -19,6 +19,9 @@ page {
 	src: url("https://im.oytour.com/tripfont/PingFangR.ttf") format("truetype");
 	font-display: swap;
 }
+.block{
+	display: block;
+}
 .relative{
 	position: relative;
 }
@@ -69,6 +72,9 @@ page {
 	color: #1F2429;
 	/* padding-top:constant(safe-area-inset-top); */
 }
+.text-5B5D62{
+	color: #5B5D62;
+}
 .bg-default{
 	background-color: #F7F8FA;
 }
@@ -111,6 +117,9 @@ page {
 .bg-white{
 	background-color: #FFF;
 }
+.just-safe{
+	justify-content:left ;
+}
 .just-center{
 	justify-content:center;
 }
@@ -118,6 +127,9 @@ page {
 	display:flex;
 	
 }
+.text-left{
+	text-align: left;
+}
 .text-center{
 	text-align: center;
 }
@@ -210,6 +222,9 @@ page {
 	left: 0;
 	top: 0;
 }
+.q-pt-sm{
+	padding-top: 12px;
+}
 .q-pb-md{
 	padding-bottom: 10px;
 }
@@ -238,6 +253,9 @@ page {
 .q-pa-md{
 	padding:10px;
 }
+.q-mb-sm{
+	margin-bottom:5px
+}
 .q-mb-md{
 	margin-bottom:10px
 }

src/plugins/icon.ts

@@ -126,7 +126,9 @@ import {
   Earth,
   RotationHorizontal,
   RotationVertical,
-  AssemblyLine
+  AssemblyLine,
+  More,
+  Setting,
 } from '@icon-park/vue-next'
 
 export interface Icons {
@@ -257,7 +259,9 @@ export const icons: Icons = {
   IconEarth: Earth,
   IconRotationHorizontal: RotationHorizontal,
   IconRotationVertical: RotationVertical,
-  IconAssemblyLine: AssemblyLine
+  IconAssemblyLine: AssemblyLine,
+  IconMore: More,
+  IconSetting: Setting,
 }
 
 export default {

src/utils/common.ts

+import { number } from '@amcharts/amcharts4/core'
 import { padStart } from 'lodash'
 
 /**
@@ -49,3 +50,12 @@ export const getHtmlPlainText = (html_str:string) => {
     return ''
   }
 }
+
+export const recentTime = (date1:string, date2:string) => {
+  const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
+  const firstDate = new Date(date1); // 第一个日期对象
+  const secondDate = new Date(date2); // 第二个日期对象
+  // const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay)); // 差异天数的绝对值，取整
+
+  // return diffDays;
+}
\ No newline at end of file

src/views/SellTemplate/Workspace.vue

@@ -54,8 +54,8 @@
                         </el-button>
                         <template #dropdown>
                             <el-dropdown-menu>
-                            <el-dropdown-item>创建行程</el-dropdown-item>
-                            <el-dropdown-item>创建广告图</el-dropdown-item>
+                            <el-dropdown-item @click="searchData.TemplateType=1,sellAdd(1)">创建行程</el-dropdown-item>
+                            <el-dropdown-item @click="searchData.TemplateType=2,sellAdd(3)">创建广告图</el-dropdown-item>
                             </el-dropdown-menu>
                         </template>
                     </el-dropdown>
@@ -85,14 +85,36 @@
 <script setup lang="ts">
 import { userStore } from '@/store/user';
 import { storeToRefs } from 'pinia';
-import { ref } from 'vue';
+import { ref,reactive,provide,inject } from 'vue';
 import SearchDocument from './components/SearchDocument.vue'
 import Example from './components/Example.vue'
 import { Plus,ArrowDown,Clock,Star,Share,Picture,Management,Delete } from '@element-plus/icons-vue';
 
+import { injectKeyTemplate } from '@/types/injectKey'
+import { useSellTemplateStore, useScreenStore, useSlidesStore } from '@/store'
+
 const {userInfo} = storeToRefs(userStore())
 const currentMenu = ref<number>(0)
 
+const datas = reactive({
+    SellDatas:{
+        currentMenu: 3,
+    }
+})
+provide('SellDatas',datas.SellDatas)
+
+const searchData = ref({} as any)
+searchData.value = inject(injectKeyTemplate)
+const SalesEditorStore = useSellTemplateStore()
+const marketStore = useScreenStore()
+
+const sellAdd = (type:number) =>{
+    searchData.value.sellId = 0
+    searchData.value.sellTempId = 0
+    SalesEditorStore.setSalesEditor(type)
+    marketStore.setMarket(true)
+}
+
 const setCurrentMenuHandler=(i:number)=>{
     currentMenu.value=i
 }

src/views/SellTemplate/components/Example.vue

 <template>
+    <div ref="SellTemplateRef" style="height: 100%; overflow: auto;">
         <el-scrollbar height="100%" class="q-px-md">
-        <pre class="q-pa-md" style="width:1000px;">
-            storeToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefs
-            sdfsdf
-            sdfsdfs
+            <div class="row items-center q-pt-md" style="min-width:1000px; ">
+                <el-checkbox size="sm" v-model="datas.selectAll"
+                    @click="clickSelectAll"/>
+                <div class="col row" style="border-bottom: 1px solid #F6F6F6;margin-left: 65px;">
+                    <div class="col text-small q-pb-md">
+                        文档名称
+                    </div>
+                    <div class="row Example-right text-small">
+                        <div class="col text-center">最近修改</div>
+                        <div class="col text-center">创建者</div>
+                        <div class="text-center Example-More Example-Controls">
+                            <Popover trigger="click" placement="bottom-start" v-model:value="datas.showControls" center class="col">
+                                <template #content>
+                                    <div class="column">
+                                        <div class="pointer q-mb-sm">重命名</div>
+                                        <div class="pointer">历史版本</div>
+                                    </div>
+                                </template>
+                                <div class="select-btn row items-center"><IconSetting /></div>
+                            </Popover>
+                        </div>
+                    </div>
+                </div> 
+                
+            </div>
+            <pre style="min-width:1000px;height: 50px;" v-for="(item,index) in dataList">
+                    <div class="row items-center text-5B5D62 Example-box">
+                        <div class="row items-center">
+                            <el-checkbox size="sm" v-model="item.singleChoice"
+                                 @click="singleChoice(item)"/>
+                            <img class="q-px-lg" :src="item.TemplateType==1?datas.pdfImg:datas.adsImg" 
+                            style="height: 25px;" />
+                        </div>
+                        <div class="col row Example-borderBot q-pt-sm q-pb-md">
+                            <div class="col row">
+                                <span>{{item.Title}}</span>
+                            </div>
+                            <div class="row items-center Example-right text-small">
+                                <div class="col text-center">{{item.UpdateTime}}</div>
+                                <div class="col text-center">{{item.CreateByName}}</div>
+                                <div class="Example-More Example-Controls">
+                                    <Popover trigger="click" placement="bottom-start" v-model:value="item.showMore" center class="col">
+                                        <template #content>
+                                            <div class="column">
+                                                <div class="pointer q-mb-sm">重命名</div>
+                                                <div class="pointer">历史版本</div>
+                                            </div>
+                                        </template>
+                                        <div class="select-btn row items-center"><IconMore /></div>
+                                    </Popover>
+                                </div>
+                            </div>
+                        </div>
+                        
+                    </div>
                 
-
-
-            563435
-
-
-            535635
-
-            sdfsdf
-
-
-
-
-
-
-
-
-            1
-
-            1
-
-            2
-
-            3
-
-            4
-
-            5
-            storeToRefs
-            sdfsdf
-            sdfsdfs
-
-
-
-            563435
-
-
-            535635
-
-            sdfsdf
-
-
-
-
-
-
-
-
-            1
-
-            1
-
-            2
-
-            3
-
-            4
-
-            5
-            storeToRefs
-            sdfsdf
-            sdfsdfs
-
-
-
-            563435
-
-
-            535635
-
-            sdfsdf
-
-
-
-
-
-
-
-
-            1
-
-            1
-
-            2
-
-            3
-
-            4
-
-            5
             </pre>
+            <div>
+                    <div v-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
+                    style="padding: 30px 10px 30px 10px;">
+                        <el-empty description="暂无数据" />
+                    </div>
+                    <el-divider class="no-bg q-mt-lg" v-if='queryObj.pageCount == queryObj.pageIndex && !loading'>
+                        <span class="text-samll bg-white" style="background: #f3f6fb;padding: 0 10px;color:#a3a3a3">已加载完成所有数据</span>
+                    </el-divider>
+                    <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading" element-loading-text="正在加载中"></div>
+                </div>
         </el-scrollbar>
+        
+    </div>
+    
 </template>
 <script setup lang="ts">
-
+    import { ref, reactive, provide, watch, inject, onMounted } from 'vue'
+    import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+    import ConfigService from '@/services/ConfigService'
+    import { injectKeyTemplate } from '@/types/injectKey'
+    import { recentTime } from '@/utils/common'
+    
+
+    const PopoverVisibleControls = ref(false)
+    const dataList = ref([] as Array < any > )
+    const searchData = ref({} as any)
+    searchData.value = inject(injectKeyTemplate)
+    const datas = reactive({
+        selectAll: false,
+        showControls: false,
+        SellDatas:{
+            currentMenu: 3,
+        },
+        pdfImg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_558.png',
+        adsImg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png',
+    })
+    let TemplateType = 0
+    if(searchData.value.SellTemplateType) TemplateType = searchData.value.SellTemplateType
+    const queryObj = reactive({
+        Title: '',
+        pageIndex: 1,
+        pageSize: 20,
+        pageCount: 0, //总页数
+        TemplateType: TemplateType,
+    })
+    datas.SellDatas = inject('SellDatas')
+    const loading = ref(false as any)
+    const SellTemplateRef = ref<any>()
+
+    // 全选按钮
+    const clickSelectAll = () => {
+
+    }
+    const singleChoice = (row:any) => {
+
+    }
+    const setTemplateType = (Id:number) => {
+        console.log(Id)
+        queryObj.TemplateType = Id
+        searchData.value.SellTemplateType = Id
+        queryObj.pageIndex = 1
+        querySearchHandler()
+    }
+    const DeleteTemplate = async (item:any) => {
+        ElMessageBox.confirm(
+            '此操作将删除该模版，是否确定?',
+            '提示',
+            {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            }
+        ).then(async () => {
+            try {
+                let queryMsg = {
+                    Id: item.Id
+                }
+                deleteLoading.value = ElLoading.service({
+                    lock:true,
+                    text:'正在处理'
+                })
+                let pageRes = await ConfigService.sellSetRemoveTemplate(queryMsg);
+                if (pageRes.data.resultCode == 1) {
+                    queryObj.pageIndex = 1
+                    ElMessage({
+                        showClose: true,
+                        message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
+                        type: 'success',
+                    })
+                    querySearchHandler()
+                }else {
+                    ElMessage({
+                        showClose: true,
+                        message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
+                        type: 'warning',
+                    }) 
+                }
+                deleteLoading.value.close()
+                deleteLoading.value = null
+            } catch (error) {}
+        }).catch(() => {})
+        
+    }
+    const editDelete = async (row:any,type:Number) => {
+        if(type==1){
+            DeleteTemplate(row)
+        }else{
+            let list = [
+                {
+                    id: 'test-slide-1',
+                    pageType: 0,
+                    elements: [],
+                    background: {
+                        type: 'solid',
+                        color: '#ffffff',
+                    },
+                }
+            ]
+            useSlidesStore().setSlides(list)
+            searchData.value.sellId = row.Id
+            searchData.value.sellTempId = row.TempId
+            searchData.value.TemplateType = row.TemplateType
+            SalesEditorStore.setSalesEditor(2)
+            marketStore.setMarket(false)
+        }
+    }
+    const querySearchHandler = async () => {
+        loading.value = true
+        try {
+            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
+                        x.showMore = false
+                    });
+                }
+                arrList(pageRes.data.data.pageData)
+                dataList.value = dataList.value.concat(pageRes.data.data.pageData);
+                queryObj.pageCount = pageRes.data.data.pageCount;
+            }
+            loading.value = false
+        } catch (error) {
+            loading.value = false
+        }
+    }
+    const scrollingHandler = () =>{
+        if(SellTemplateRef.value && !loading.value){
+            let maxHeight = SellTemplateRef.value.scrollHeight - SellTemplateRef.value.offsetHeight
+            let scrollTop = SellTemplateRef.value.scrollTop
+            if((maxHeight - scrollTop==0||maxHeight - scrollTop<1) && queryObj.pageCount > queryObj.pageIndex) {
+                queryObj.pageIndex++
+                querySearchHandler()
+            }
+        }
+        
+    }
+
+    watch(() => datas.SellDatas.currentMenu, () => {
+        queryObj.pageIndex = 1
+        querySearchHandler()
+    })
+
+    onMounted(()=>{
+        SellTemplateRef.value.addEventListener("scroll", scrollingHandler);
+    })
+
+    querySearchHandler()
 </script>
+<style lang="scss" scoped>
+     @import url('../../../assets/styles/common.css');
+     .Example-box{
+        
+     }
+     .Example-right{
+        width: 300px;
+     }
+     .Example-borderBot{
+        border-bottom: 1px solid #F6F6F6;
+     }
+     .Example-Controls{
+        width: 50px;
+     }
+     .Example-More{
+        height: 20px;
+        font-size: 12px;
+        display: flex;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .btn {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &:hover {
+                background-color: $lightGray;
+            }
+        }
+        .select-btn {
+            width: 30px;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &:hover {
+                background-color: $lightGray;
+            }
+        }
+
+        .icon {
+            margin-right: 3px;
+            font-size: 14px;
+        }
+     }
+     
+</style>
\ No newline at end of file