jmash-core-mp 0.1.76 → 0.1.78

package/src/components/cms/jmash-cms-location-list.mpx

@@ -1,287 +1,287 @@
-<template>
-    <scroll-view class="article-main" type="custom" scroll-y scroll-top="{{ scrollTop }}" bindscrolltolower="loadMore">
-        <view class="article-list" wx:if="{{ styles == '1' }}">
-            <view class="article-border" wx:for="{{ articleList }}" wx:key="index" bind:tap="handleInfo"
-                data-item="{{ item }}">
-                <view class="cms-info">
-                    <view class="cms-image" catch:tap="handlePreview" data-url="{{ item.imgUrl }}">
-                        <image wx:if="{{ imageUrl }}" class="cms-image-thumb" src="{{ imageUrl + item.imgUrl }}"
-                            mode="aspectFill" />
-                    </view>
-                    <view class="cms-text">
-                        <view class="cms-text-title">{{ item.infoTitle }}</view>
-                        <view class="cms-text-desc">{{ item.intro }}</view>
-                        <view class="cms-text-meta">
-                            <text class="cms-meta-icon">📍</text>
-                            <text class="cms-meta-text">{{ item.address }}</text>
-                        </view>
-                    </view>
-                </view>
-            </view>
-        </view>
-        <view wx:if="{{ loading }}">加载中...</view>
-    </scroll-view>
-</template>
-
-<script lang="ts">
-import mpx, { createComponent, ref, watch } from "@mpxjs/core";
-import { EventBase } from "../../api/types";
-import { cmsApi } from '../../api/cms';
-import { CmsInfoModel } from '../../api/cms/types';
-
-createComponent({
-    properties: {
-        // 样式
-        styles: {
-            type: String,
-            value: "0",
-        },
-        // 组织租户
-        organTenant: {
-            type: String,
-            value: ""
-        },
-        // 站点ID
-        siteId: {
-            type: String,
-            value: ""
-        },
-        // 栏目ID
-        channelId: {
-            type: String,
-            value: ""
-        },
-        // 栏目别名
-        channelAlias: {
-            type: String,
-            value: ""
-        },
-        // 数量
-        pageSize: {
-            type: Number,
-            value: 5
-        },
-        // 搜索标题
-        likeInfoTitle: {
-            type: String,
-            value: ""
-        },
-        // refreshKey
-        refreshKey: {
-            type: Number,
-            value: 0
-        },
-    },
-    setup(props) {
-        let config = getApp().globalData.config;
-        const curPage = ref(1)
-        const totalSize = ref(0)
-        const loading = ref(false)
-        const scrollTop = ref(0)
-        // 资源路径
-        let resourceUrl = config.resourceUrl + '/images';
-        // 文章列表
-        let articleList = ref([] as CmsInfoModel[]);
-        console.log("cms", props);
-
-        const loadRecords = function (page: number = 1) {
-            if (!props.channelAlias && !props.channelId) return
-            if (loading.value) return
-            loading.value = true;
-            curPage.value = page;
-            cmsApi.findCmsInfoPage({
-                tenant: props.organTenant || config.siteTenant,
-                siteId: props.siteId,
-                channelId: props.channelId,
-                channelAlias: props.channelAlias,
-                curPage: curPage.value,
-                pageSize: props.pageSize,
-                likeInfoTitle: props.likeInfoTitle,
-                status: 'published',
-            }).then(res => {
-                if (res.statusCode === 200) {
-                    if (curPage.value === 1) {
-                        scrollTop.value = 0
-                        articleList.value = res.data.results || []
-                    } else {
-                        articleList.value = [...articleList.value, ...(res.data.results || [])];
-                    }
-                    totalSize.value = res.data.totalSize as number;
-                }
-            }).finally(() => {
-                loading.value = false
-            });
-        }
-        // 接口图片资源路径 容器宽高度150rpx 裁剪2倍
-        let imageUrl = config.baseUrl + "/v1/file/image/clip/300/300/";
-        const loadMore = () => {
-            if (totalSize.value === articleList.value.length || loading.value) {
-                mpx.showToast({ title: "没有更多数据了", icon: "none" });
-                return;
-            }
-            loadRecords(curPage.value + 1)
-        }
-        loadRecords(1);
-        watch(
-            () => props.refreshKey,
-            () => {
-                loadRecords(1)
-            }
-        )
-        return { resourceUrl, articleList, imageUrl, curPage, totalSize, loading, scrollTop, loadMore }
-    },
-    methods: {
-        // 点击详情事件
-        handleInfo(e: EventBase) {
-            let config = getApp().globalData.config;
-            let item = e.currentTarget.dataset.item;
-            mpx.navigateTo({
-                url: '/jmash/pages/cms/cms-location?tenant=' + this.organTenant + '&siteId=' + this.siteId + '&infoId=' + item.infoId,
-            });
-            // 浏览
-            this.handelBrowse(this.organTenant || config.tenant, item.infoId);
-            this.triggerEvent("info", item);
-        },
-        // 浏览
-        handelBrowse(tenant: string, infoId: string) {
-            const tempData = {
-                // 用于检测重复请求的唯一字符串ID
-                requestId: Math.random() * 10 + "",
-                // 类型
-                type: "information",
-                // 关系
-                relationId: infoId,
-                // 租户
-                tenant: tenant
-            };
-            cmsApi.createfrontBrowseRecord(tempData);
-        },
-    }
-})
-</script>
-
-<style lang="scss">
-@use "../../styles/index.scss" as *;
-
-.article-main {
-    max-height: calc(100vh - 90rpx - env(safe-area-inset-bottom));
-    width: 100vw;
-    box-sizing: border-box;
-    background-color: #fff;
-
-    .article-list {
-        padding: 0 30rpx;
-    }
-}
-
-// 有分割线列表
-.article-border {
-    padding: 24rpx 0;
-    border-bottom: 1rpx solid $border-line;
-
-    &:last-child {
-        border: none;
-    }
-}
-
-// 无分割线列表
-.article-info {
-    position: relative;
-    padding: 24rpx;
-    background-color: #fff;
-    border-radius: 16rpx;
-    margin-bottom: 20rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-}
-
-.cms-info {
-    display: flex;
-    align-items: center;
-    gap: 24rpx;
-
-    .cms-text {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 12rpx;
-
-        .cms-text-title {
-            color: #222;
-            font-size: 30rpx;
-            font-weight: 600;
-            line-height: 1.4;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        .cms-text-desc {
-            color: #888;
-            font-size: 24rpx;
-            line-height: 1.5;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            text-overflow: ellipsis;
-        }
-
-        .cms-text-meta {
-            display: flex;
-            align-items: center;
-            gap: 6rpx;
-
-            .cms-meta-icon {
-                font-size: 22rpx;
-            }
-
-            .cms-meta-text {
-                color: #aaa;
-                font-size: 22rpx;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-    }
-
-    .cms-image {
-        flex-shrink: 0;
-        width: 180rpx;
-        height: 180rpx;
-        border-radius: 12rpx;
-        overflow: hidden;
-        background: #f0f0f0;
-
-        .cms-image-thumb {
-            width: 100%;
-            height: 100%;
-        }
-    }
-}
-
-.cms-arrow {
-    display: none;
-}
-
-// 无分割线列表显示右箭头
-.article-info .cms-arrow {
-    display: block;
-    position: absolute;
-    right: 24rpx;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 36rpx;
-    color: #ccc;
-}
-</style>
-
-<script type="application/json">
-{
-    "component": true,
-    "usingComponents": {
-        "jmash-cms-like": "./jmash-cms-like"
-    }
-}
+<template>
+    <scroll-view class="article-main" type="custom" scroll-y scroll-top="{{ scrollTop }}" bindscrolltolower="loadMore">
+        <view class="article-list" wx:if="{{ styles == '1' }}">
+            <view class="article-border" wx:for="{{ articleList }}" wx:key="index" bind:tap="handleInfo"
+                data-item="{{ item }}">
+                <view class="cms-info">
+                    <view class="cms-image" catch:tap="handlePreview" data-url="{{ item.imgUrl }}">
+                        <image wx:if="{{ imageUrl }}" class="cms-image-thumb" src="{{ imageUrl + item.imgUrl }}"
+                            mode="aspectFill" />
+                    </view>
+                    <view class="cms-text">
+                        <view class="cms-text-title">{{ item.infoTitle }}</view>
+                        <view class="cms-text-desc">{{ item.intro }}</view>
+                        <view class="cms-text-meta">
+                            <text class="cms-meta-icon">📍</text>
+                            <text class="cms-meta-text">{{ item.address }}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view wx:if="{{ loading }}">加载中...</view>
+    </scroll-view>
+</template>
+
+<script lang="ts">
+import mpx, { createComponent, ref, watch } from "@mpxjs/core";
+import { EventBase } from "../../api/types";
+import { cmsApi } from '../../api/cms';
+import { CmsInfoModel } from '../../api/cms/types';
+
+createComponent({
+    properties: {
+        // 样式
+        styles: {
+            type: String,
+            value: "0",
+        },
+        // 组织租户
+        organTenant: {
+            type: String,
+            value: ""
+        },
+        // 站点ID
+        siteId: {
+            type: String,
+            value: ""
+        },
+        // 栏目ID
+        channelId: {
+            type: String,
+            value: ""
+        },
+        // 栏目别名
+        channelAlias: {
+            type: String,
+            value: ""
+        },
+        // 数量
+        pageSize: {
+            type: Number,
+            value: 5
+        },
+        // 搜索标题
+        likeInfoTitle: {
+            type: String,
+            value: ""
+        },
+        // refreshKey
+        refreshKey: {
+            type: Number,
+            value: 0
+        },
+    },
+    setup(props) {
+        let config = getApp().globalData.config;
+        const curPage = ref(1)
+        const totalSize = ref(0)
+        const loading = ref(false)
+        const scrollTop = ref(0)
+        // 资源路径
+        let resourceUrl = config.resourceUrl + '/images';
+        // 文章列表
+        let articleList = ref([] as CmsInfoModel[]);
+        console.log("cms", props);
+
+        const loadRecords = function (page: number = 1) {
+            if (!props.channelAlias && !props.channelId) return
+            if (loading.value) return
+            loading.value = true;
+            curPage.value = page;
+            cmsApi.findCmsInfoPage({
+                tenant: props.organTenant || config.siteTenant,
+                siteId: props.siteId,
+                channelId: props.channelId,
+                channelAlias: props.channelAlias,
+                curPage: curPage.value,
+                pageSize: props.pageSize,
+                likeInfoTitle: props.likeInfoTitle,
+                status: 'published',
+            }).then(res => {
+                if (res.statusCode === 200) {
+                    if (curPage.value === 1) {
+                        scrollTop.value = 0
+                        articleList.value = res.data.results || []
+                    } else {
+                        articleList.value = [...articleList.value, ...(res.data.results || [])];
+                    }
+                    totalSize.value = res.data.totalSize as number;
+                }
+            }).finally(() => {
+                loading.value = false
+            });
+        }
+        // 接口图片资源路径 容器宽高度150rpx 裁剪2倍
+        let imageUrl = config.baseUrl + "/v1/file/image/clip/300/300/";
+        const loadMore = () => {
+            if (totalSize.value === articleList.value.length || loading.value) {
+                mpx.showToast({ title: "没有更多数据了", icon: "none" });
+                return;
+            }
+            loadRecords(curPage.value + 1)
+        }
+        loadRecords(1);
+        watch(
+            () => props.refreshKey,
+            () => {
+                loadRecords(1)
+            }
+        )
+        return { resourceUrl, articleList, imageUrl, curPage, totalSize, loading, scrollTop, loadMore }
+    },
+    methods: {
+        // 点击详情事件
+        handleInfo(e: EventBase) {
+            let config = getApp().globalData.config;
+            let item = e.currentTarget.dataset.item;
+            mpx.navigateTo({
+                url: '/jmash/pages/cms/cms-location?tenant=' + this.organTenant + '&siteId=' + this.siteId + '&infoId=' + item.infoId,
+            });
+            // 浏览
+            this.handelBrowse(this.organTenant || config.tenant, item.infoId);
+            this.triggerEvent("info", item);
+        },
+        // 浏览
+        handelBrowse(tenant: string, infoId: string) {
+            const tempData = {
+                // 用于检测重复请求的唯一字符串ID
+                requestId: Math.random() * 10 + "",
+                // 类型
+                type: "information",
+                // 关系
+                relationId: infoId,
+                // 租户
+                tenant: tenant
+            };
+            cmsApi.createfrontBrowseRecord(tempData);
+        },
+    }
+})
+</script>
+
+<style lang="scss">
+@use "../../styles/index.scss" as *;
+
+.article-main {
+    max-height: calc(100vh - 90rpx - env(safe-area-inset-bottom));
+    width: 100vw;
+    box-sizing: border-box;
+    background-color: #fff;
+
+    .article-list {
+        padding: 0 30rpx;
+    }
+}
+
+// 有分割线列表
+.article-border {
+    padding: 24rpx 0;
+    border-bottom: 1rpx solid $border-line;
+
+    &:last-child {
+        border: none;
+    }
+}
+
+// 无分割线列表
+.article-info {
+    position: relative;
+    padding: 24rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+}
+
+.cms-info {
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+
+    .cms-text {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 12rpx;
+
+        .cms-text-title {
+            color: #222;
+            font-size: 30rpx;
+            font-weight: 600;
+            line-height: 1.4;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .cms-text-desc {
+            color: #888;
+            font-size: 24rpx;
+            line-height: 1.5;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            text-overflow: ellipsis;
+        }
+
+        .cms-text-meta {
+            display: flex;
+            align-items: center;
+            gap: 6rpx;
+
+            .cms-meta-icon {
+                font-size: 22rpx;
+            }
+
+            .cms-meta-text {
+                color: #aaa;
+                font-size: 22rpx;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    .cms-image {
+        flex-shrink: 0;
+        width: 180rpx;
+        height: 180rpx;
+        border-radius: 12rpx;
+        overflow: hidden;
+        background: #f0f0f0;
+
+        .cms-image-thumb {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.cms-arrow {
+    display: none;
+}
+
+// 无分割线列表显示右箭头
+.article-info .cms-arrow {
+    display: block;
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 36rpx;
+    color: #ccc;
+}
+</style>
+
+<script type="application/json">
+{
+    "component": true,
+    "usingComponents": {
+        "jmash-cms-like": "./jmash-cms-like"
+    }
+}
 </script>