分类

package.json

@@ -48,7 +48,7 @@
         "@vue/runtime-core": "^3.3.11",
         "@vue/tsconfig": "^0.1.3",
         "add": "^2.0.6",
-        "rexma-cli": "^1.9.0",
+        "rexma-cli": "^1.9.3",
         "sass": "^1.77.6",
         "typescript": "^4.9.4",
         "uni-mini-router": "^0.1.6",

src/pages.json

@@ -17,7 +17,8 @@
 			"path": "pages/classify/index",
             "name": "classify",
 			"style": {
-				"navigationBarTitleText": "分类"
+				"navigationBarTitleText": "分类",
+                "navigationStyle": "custom"
 			}
 		},
         {
@@ -78,7 +79,7 @@
 			"path": "pages/subject/list",
             "name": "subject-list",
 			"style": {
-				"navigationBarTitleText": "专题"
+				"navigationBarTitleText": "专题列表"
 			},
             "meta": {
                 "requireAuth": true

src/pages/account/login.vue

@@ -9,14 +9,14 @@
         </div>
     </div>
     <div class="tab-account">
-        <ul class="nav nav-tabs login-tabs">
-            <!-- <li :class="{ active: activeIndex == 0 }" @click="activeIndex = 0">
+        <!-- <ul class="nav nav-tabs login-tabs">
+            <li :class="{ active: activeIndex == 0 }" @click="activeIndex = 0">
                 <a data-toggle="tab">登录</a>
-            </li> -->
-            <!-- <li :class="{ active: activeIndex == 1 }" @click="activeIndex = 1">
+            </li>
+            <li :class="{ active: activeIndex == 1 }" @click="activeIndex = 1">
                 <a data-toggle="tab">注册</a>
-            </li> -->
-        </ul>
+            </li>
+        </ul> -->
         <div class="tab-content">
             <div class="tab-pane fade" v-if="activeIndex == 0">
                 <form>
@@ -35,7 +35,6 @@
                             v-if="!passwordVisible"></i>
                         <i class="iconfont xian-mi icon-close-eye" @click="passwordVisible = false" v-else></i>
                     </div>
-                    <!-- <button type="button" class="conf-btn login-btns" @click="login">登录</button> -->
                     <div class="login-btns">
                         <van-button class="btn" type="primary" round @click="login">登录</van-button>
                         <!-- #ifdef H5-SGY -->

src/pages/classify/index.vue

 <template>
-    <div>分类</div>
+    <div class="bg">
+        <van-sticky>
+            <div class="header">
+                <div class="title">分类</div>
+                <div class="search">
+                    <div class="s-box">
+                        <van-icon name="search" color="#303030" />
+                        <input class="placeholder" placeholder="请输入关键词" v-model="value" />
+                    </div>
+                    <van-icon v-if="value" name="clear" color="#969696" />
+                </div>
+            </div>
+        </van-sticky>
+        <div class="content">
+            <div class="list">
+                <div class="item" v-for="(item, index) in 20" :key="index">
+                    <img src="/static/image/cover-1.png">
+                    <div class="blurbox">
+                        <div class="bg"></div>
+                        <div class="title">XXX专题</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <img src="/static/image/cover-2.png">
+                    <div class="blurbox">
+                        <div class="bg"></div>
+                        <div class="title">XXX专题</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <img src="/static/image/cover-3.png">
+                    <div class="blurbox">
+                        <div class="bg"></div>
+                        <div class="title">XXX专题</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 
 <script setup>
-
+const value = ref('')
 </script>
+
+<style scoped lang="scss">
+.bg {
+    height: 100vh;
+    background: linear-gradient(to bottom, #D2E4FF 5%, #fff 25%);
+
+    .header {
+        display: flex;
+        align-items: center;
+        padding: 0 20px;
+        height: 50px;
+        gap: 15px;
+        background-color: #D2E4FF;
+
+        .title {
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .search {
+            width: 45%;
+            background-color: #F7F8FA;
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 32px;
+            opacity: 0.7;
+            padding: 0 10px;
+
+            .s-box {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+
+                .placeholder {
+                    color: #303030;
+                    font-size: 14px;
+                }
+            }
+
+
+        }
+    }
+
+    .content {
+        padding: 10px 10px 0 10px;
+        min-height: 100vh;
+
+        .list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+
+            .item {
+                break-inside: avoid;
+                background-color: #ffffff;
+                border-radius: 5px;
+                margin-bottom: 10px;
+                width: 32%;
+                position: relative;
+
+                img {
+                    width: 100%;
+                    height: 170px;
+                    object-fit: cover;
+                    border-radius: 5px;
+                }
+
+                .blurbox {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    bottom: 0;
+                    height: 32px;
+                    width: 100%;
+                    border-radius: 0 0 5px 5px;
+
+                    .bg {
+                        position: absolute;
+                        border-radius: 0 0 5px 5px;
+                        width: 100%;
+                        height: 100%;
+                        background: rgba(255, 255, 255, 0.25);
+                        backdrop-filter: blur(10px);
+                    }
+
+                    .title {
+                        font-size: 28rpx;
+                        color: #fff;
+                        font-weight: bold;
+                        z-index: 1;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/mine/components/MoreOperations/index.vue

@@ -66,7 +66,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 .more {
-    padding: 20px;
+    padding: 10px;
 
     .delete {
         color: #E23535;

src/pages/mine/components/PictureList.vue

@@ -41,15 +41,14 @@
 </template>
 <script setup>
 import useUserStore from '@/store/user'
-import { selectMinePictureList, selectCollectPictureList, publishPicture } from '@/api/publish'
-import { showLoadingToast, closeToast, showToast } from 'vant'
+import { selectMinePictureList, selectCollectPictureList } from '@/api/publish'
 const props = defineProps({
     active: {
         type: Number,
         default: 0
     }
 })
-const emits = defineEmits(["total", "refresh", "opreation"])
+const emits = defineEmits(["total", "refresh", "opreation", "publish"])
 const router = useRouter()
 const userStore = useUserStore()
 const refreshing = ref(false)
@@ -109,24 +108,8 @@ const handleMore = (e) => {
     emits('opreation', e)
 }
 
-const handlePublishPicture = async (e) => {
-    showLoadingToast({
-        message: '发布中',
-        forbidClick: true,
-        duration: 0
-
-    })
-    const data = {
-        materialId: e.materialId,
-        organizeId: e.organizeId,
-        organizeName: e.organizeName,
-        collect: 1
-    }
-    await publishPicture(data)
-    closeToast()
-    showToast('发布成功')
-    handleRefresh()
-    emits('refresh')
+const handlePublishPicture = (e) => {
+    emits('publish', e)
 }
 
 defineExpose({

src/pages/mine/components/Publish/index.vue

+<template>
+    <van-popup v-model:show="showPublish" round position="bottom" closeable>
+        <div class="popbox">
+            <div class="title">发布图组</div>
+            <van-form @submit="handleSubmit" required colon>
+                <van-field v-model="formData.organizeName" is-link readonly name="picker" label="选择组织"
+                    placeholder="请选择组织" @click="showOrganize = true" :rules="[{ required: true, message: '请选择组织' }]" />
+                <div class="btn">
+                    <van-button round type="primary" native-type="submit" size="small">立即发布</van-button>
+                </div>
+            </van-form>
+        </div>
+
+    </van-popup>
+    <van-popup v-model:show="showOrganize" round position="bottom">
+        <van-cascader v-model="formData.organizeName" title="请选择组织" :options="options" :field-names="fieldNames"
+            @close="showOrganize = false" @finish="onFinish" />
+    </van-popup>
+</template>
+
+<script setup>
+import useUserStore from '@/store/user'
+import { publishPicture } from '@/api/publish'
+import { selectOrganizeList } from '@/api/prefecture'
+import { showLoadingToast, closeToast, showToast } from 'vant'
+
+const emits = defineEmits(["refresh"])
+const userStore = useUserStore()
+
+const dataList = ref([])
+const options = ref([])
+const getList = async () => {
+    const data = {
+        userId: userStore.userinfo.user.id,
+        sysCode: import.meta.env.VITE_APP_SYSTEM_CODE,
+        moduleCode: 'practice-mediaCatalog'
+    }
+    const res = await selectOrganizeList(data)
+    dataList.value = res.data
+    options.value = buildTree(res.data)
+}
+
+const formData = ref({
+    materialId: null,
+    organizeId: '',
+    organizeName: '',
+    collect: 1
+})
+const showOrganize = ref(false)
+const fieldNames = {
+    text: 'organName',
+    value: 'id',
+    children: 'children',
+};
+
+const buildTree = (items) => {
+    const tree = [{
+        id: '0',
+        organName: '无组织',
+        children: []
+    }]
+    const lookup = {}
+
+    // 初始化lookup对象，方便后续快速查找  
+    items.forEach(item => {
+        lookup[item.id] = { ...item, id: item.id.toString(), children: [] };
+    });
+
+    // 构建树  
+    items.forEach(item => {
+        if (item.superiorId == 0) {
+            // superiorId=0的项是顶级项  
+            tree.push(lookup[item.id]);
+        } else {
+            // 否则，添加到对应父节点的children数组中  
+            if (!lookup[item.superiorId]) {
+                // 如果父节点不存在（理论上不应该发生，除非数据有误），可以创建一个空的占位符  
+                lookup[item.superiorId] = { children: [] };
+            }
+            lookup[item.superiorId].children.push(lookup[item.id]);
+        }
+    });
+
+    return removeEmptyChildren(tree)
+}
+
+const removeEmptyChildren = (nodes) => {
+    nodes.forEach(node => {
+        if (node.children.length === 0) {
+            delete node.children;
+        } else {
+            removeEmptyChildren(node.children);
+        }
+    });
+    return nodes
+}
+
+// 全部选项选择完毕后，会触发 finish 事件
+const onFinish = ({ selectedOptions }) => {
+    showOrganize.value = false;
+    console.log(selectedOptions)
+    formData.value.organizeId = selectedOptions[selectedOptions.length - 1].id
+    formData.value.organizeName = selectedOptions[selectedOptions.length - 1].organName
+};
+
+const handleSubmit = async () => {
+    showLoadingToast({
+        message: '发布中',
+        forbidClick: true,
+        duration: 0
+    })
+    await publishPicture(formData.value)
+    closeToast()
+    showToast('发布成功')
+    showPublish.value = false
+    emits('refresh')
+}
+
+const showPublish = ref(false)
+const open = (e) => {
+    console.log(e)
+    formData.value.materialId = e.materialId
+    showPublish.value = true
+    getList()
+}
+const close = () => {
+    showPublish.value = false
+}
+defineExpose({
+    open,
+    close
+})
+</script>
+
+<style lang="scss" scoped>
+.popbox {
+    padding: 20px;
+
+    .title {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 20px;
+    }
+
+    .btn {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+
+        .van-button {
+            width: 100%;
+        }
+    }
+}
+</style>
\ No newline at end of file

src/pages/mine/index.vue

@@ -47,7 +47,7 @@
         <div class="content">
             <van-tabs v-model:active="active" background="#f8f8f8" animated swipeable sticky>
                 <van-tab title="待发布">
-                    <picture-list :active="0" @total="setTotal" @refresh="handleRefreshPublishPicture"></picture-list>
+                    <picture-list ref="waitingPublishPicture" :active="0" @total="setTotal" @refresh="handleRefreshPublishPicture" @publish="handlePublishPicture"></picture-list>
                 </van-tab>
                 <van-tab title="已发布">
                     <picture-list ref="publishPicture" :active="1" @total="setTotal" @opreation="handleOperation"></picture-list>
@@ -59,6 +59,7 @@
         </div>
     </div>
     <MoreOperations ref="morePopupRef" @refresh="handleRefreshPublishPicture"></MoreOperations>
+    <Publish ref="publishPopupRef"  @refresh="handleRefreshWaitingPublishPicture"></Publish>
 </template>
 
 <script setup>
@@ -67,6 +68,7 @@ import useUserStore from '@/store/user'
 import PictureList from './components/PictureList'
 import { useInitScroll } from '@/hooks/useScroll'
 import MoreOperations from './components/MoreOperations/index.vue'
+import Publish from './components/Publish/index.vue'
 
 useInitScroll()
 const router = useRouter()
@@ -97,6 +99,16 @@ const publishPicture = ref()
 const handleRefreshPublishPicture = () => {
     publishPicture.value.refresh()
 }
+const publishPopupRef = ref()
+const handlePublishPicture = (e) => {
+    publishPopupRef.value.open(e)
+}
+
+const waitingPublishPicture = ref()
+const handleRefreshWaitingPublishPicture = () => {
+    handleRefreshPublishPicture()
+    waitingPublishPicture.value.refresh()
+}
 
 const logout = () => {
     showConfirmDialog({

yarn.lock

@@ -4113,10 +4113,10 @@ reusify@^1.0.4:
   resolved "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rexma-cli@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.npmmirror.com/rexma-cli/-/rexma-cli-1.9.1.tgz#811beb9fec3a453adec7fe758bb1e01e5d6c092d"
-  integrity sha512-/cjtaQrnkzfUZwpkdJRa6/uVmeGwsPTF6tTnNlEovfRYlPIqrkpdjqdeoDk5K43D+yacN8FxdOXxLU5q+s6iMg==
+rexma-cli@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.npmmirror.com/rexma-cli/-/rexma-cli-1.9.3.tgz#3e32146525db962d70ee2c0dd2c760084efa99ef"
+  integrity sha512-fXDag7i5wXpXUOoXdQ6h8L/kF+1b7OtetPQZJEr2Ucfvgua81h7IB0LkSLffeC2jrxHazT8vy6QP21A2yibUAA==
   dependencies:
     chalk "4.1.2"
     cli-spinners "2.9.2"