jmash-core-mp 0.1.21 → 0.1.22

package/src/components/cms/jmash-cms-article-item.mpx

@@ -1,242 +1,242 @@
-/**
-* 文章内容列表item 组织组件
-* @param isInfo 是否是文章详情页 Boolean 默认值为false
-* @param style 样式 0：默认图片在右侧 1：默认图片在左侧 String 默认值为0
-* @param organTenant 租户 String
-* @param siteId 站点ID String
-* @param channelId 栏目ID String
-* @param channelAlias 栏目别名 String
-* @param pageSize 数量 String 默认值为5
-* @event info 文章详情点击事件,参数为文章项item
-*/
-<template>
-    <!-- 文章内容列表item -->
-    <view class="{{ isInfo ? '' : 'article-main' }}">
-        <!-- 默认图片在右侧的样式  枚举值为0  -->
-        <block wx:for="{{ articleList }}" wx:key="index" wx:if="{{ style == '0' }}">
-            <view class="{{ isInfo ? 'article-info' : 'article-border' }}" bind:tap="handleInfo" data-item="{{ item }}">
-                <!-- 内容 -->
-                <view class="cms-info">
-                    <view class="cms-left">
-                        <!-- 标题 -->
-                        <view class="cms-left-title">{{ item.infoTitle }}</view>
-                        <!-- 内容 -->
-                        <view class="cms-left-info">{{ item.intro }}</view>
-                    </view>
-                    <view bind:tap="handlePreview" data-url="{{ item.imgUrl }}">
-                        <image class="cms-right-image" src="{{ imageUrl + item.imgUrl }}" mode="widthFix" />
-                    </view>
-                </view>
-                <!-- 底部时间、点赞数、预览数 -->
-                <jmash-cms-like organTenant="{{ organTenant }}" interactId="{{ item.infoId }}"
-                    publishDate="{{ item.publishDate }}"></jmash-cms-like>
-            </view>
-        </block>
-        <!-- 默认图片在左侧的样式  枚举值为1  -->
-        <block wx:for="{{ articleList }}" wx:key="index" wx:if="{{ style == '1' }}">
-            <view class="{{ isInfo ? 'article-info' : 'article-border' }}" bind:tap="handleInfo" data-item="{{ item }}">
-                <!-- 内容 -->
-                <view class="cms-info">
-                    <view bind:tap="handlePreview" data-url="{{ item.imgUrl }}">
-                        <image class="cms-right-image" src="{{ imageUrl + item.imgUrl }}" mode="widthFix" />
-                    </view>
-                    <view class="cms-left">
-                        <!-- 标题 -->
-                        <view class="cms-left-title">{{ item.infoTitle }}</view>
-                        <!-- 内容 -->
-                        <view class="cms-left-info">{{ item.intro }}</view>
-                    </view>
-                </view>
-                <!-- 底部时间、点赞数、预览数 -->
-                <jmash-cms-like organTenant="{{ organTenant }}" interactId="{{ item.infoId }}"
-                    publishDate="{{ item.publishDate }}"></jmash-cms-like>
-            </view>
-        </block>
-    </view>
-</template>
-
-<script lang="ts">
-import mpx, { createComponent, ref, onMounted } from "@mpxjs/core";
-import { EventBase } from "../../api/types";
-import { cmsApi } from '../../api/cms';
-import { CmsInfoModel } from '../../api/cms/types';
-
-createComponent({
-    properties: {
-        // 是否更多详情
-        isInfo: {
-            type: Boolean,
-            value: false
-        },
-        // 样式
-        style: {
-            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
-        },
-    },
-    setup(props) {
-        let config = getApp().globalData.config;
-        // 资源路径
-        let resourceUrl = config.resourceUrl + '/images';
-        // 文章列表
-        let articleList = ref([] as CmsInfoModel[]);
-        console.log("cms", props);
-        onMounted(() => {
-            cmsApi.findCmsInfoPage({
-                tenant: props.organTenant || config.tenant,
-                siteId: props.siteId,
-                channelId: props.channelId,
-                channelAlias: props.channelAlias,
-                curPage: 1,
-                pageSize: props.pageSize,
-            }).then(res => {
-                if (res.statusCode === 200) {
-                    articleList.value = res.data.results;
-                }
-            });
-        });
-        // 接口图片资源路径 容器宽高度150rpx 裁剪2倍
-        let imageUrl = config.baseUrl + "/v1/file/image/clip/300/300/";
-        return { resourceUrl, articleList, imageUrl }
-    },
-    methods: {
-        // 点击详情事件
-        handleInfo(e: EventBase) {
-            let config = getApp().globalData.config;
-            let item = e.currentTarget.dataset.item;
-            mpx.navigateTo({
-                url: '/jmash/pages/cms/cms-article?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 {
-    padding: 0 30rpx;
-    border-radius: 20rpx;
-    background-color: #fff;
-}
-
-// 有分割线列表
-.article-border {
-    padding: 30rpx 0;
-    border-bottom: 1rpx solid $border-line;
-
-    // 分割线最后一条内容无分割线
-    &:last-child {
-        border: none;
-    }
-}
-
-// 无分割线列表
-.article-info {
-    padding: 30rpx;
-    background-color: #fff;
-    border-radius: 20rpx;
-    margin-bottom: 20rpx;
-}
-
-.cms-info {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 30rpx;
-    margin-bottom: 30rpx;
-
-    // 文章左侧内容
-    .cms-left {
-        width: 450rpx;
-        display: flex;
-        flex-direction: column;
-
-        .cms-left-title {
-            color: #333;
-            font-size: 28rpx;
-            font-weight: 600;
-            margin-bottom: 20rpx;
-            overflow: hidden;
-            /* 隐藏超出部分 */
-            white-space: nowrap;
-            /* 强制文本不换行 */
-            text-overflow: ellipsis;
-            /* 超出部分以省略号显示 */
-        }
-
-        .cms-left-info {
-            color: #666;
-            font-size: 26rpx;
-            line-height: 37rpx;
-            overflow: hidden;
-            /* 隐藏超出部分 */
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            /* 文本只显示两行 */
-            text-overflow: ellipsis;
-            /* 超出部分以省略号显示 */
-        }
-    }
-
-    // 文章右侧图片
-    .cms-right-image {
-        width: 150rpx;
-        height: 150rpx;
-        border-radius: 10rpx;
-    }
-}
-</style>
-
-<script type="application/json">
-{
-    "component": true,
-    "usingComponents": {
-        "jmash-cms-like": "./jmash-cms-like"
-    }
-}
+/**
+* 文章内容列表item 组织组件
+* @param isInfo 是否是文章详情页 Boolean 默认值为false
+* @param style 样式 0：默认图片在右侧 1：默认图片在左侧 String 默认值为0
+* @param organTenant 租户 String
+* @param siteId 站点ID String
+* @param channelId 栏目ID String
+* @param channelAlias 栏目别名 String
+* @param pageSize 数量 String 默认值为5
+* @event info 文章详情点击事件,参数为文章项item
+*/
+<template>
+    <!-- 文章内容列表item -->
+    <view class="{{ isInfo ? '' : 'article-main' }}">
+        <!-- 默认图片在右侧的样式  枚举值为0  -->
+        <block wx:for="{{ articleList }}" wx:key="index" wx:if="{{ style == '0' }}">
+            <view class="{{ isInfo ? 'article-info' : 'article-border' }}" bind:tap="handleInfo" data-item="{{ item }}">
+                <!-- 内容 -->
+                <view class="cms-info">
+                    <view class="cms-left">
+                        <!-- 标题 -->
+                        <view class="cms-left-title">{{ item.infoTitle }}</view>
+                        <!-- 内容 -->
+                        <view class="cms-left-info">{{ item.intro }}</view>
+                    </view>
+                    <view bind:tap="handlePreview" data-url="{{ item.imgUrl }}">
+                        <image class="cms-right-image" src="{{ imageUrl + item.imgUrl }}" mode="widthFix" />
+                    </view>
+                </view>
+                <!-- 底部时间、点赞数、预览数 -->
+                <jmash-cms-like organTenant="{{ organTenant }}" interactId="{{ item.infoId }}"
+                    publishDate="{{ item.publishDate }}"></jmash-cms-like>
+            </view>
+        </block>
+        <!-- 默认图片在左侧的样式  枚举值为1  -->
+        <block wx:for="{{ articleList }}" wx:key="index" wx:if="{{ style == '1' }}">
+            <view class="{{ isInfo ? 'article-info' : 'article-border' }}" bind:tap="handleInfo" data-item="{{ item }}">
+                <!-- 内容 -->
+                <view class="cms-info">
+                    <view bind:tap="handlePreview" data-url="{{ item.imgUrl }}">
+                        <image class="cms-right-image" src="{{ imageUrl + item.imgUrl }}" mode="widthFix" />
+                    </view>
+                    <view class="cms-left">
+                        <!-- 标题 -->
+                        <view class="cms-left-title">{{ item.infoTitle }}</view>
+                        <!-- 内容 -->
+                        <view class="cms-left-info">{{ item.intro }}</view>
+                    </view>
+                </view>
+                <!-- 底部时间、点赞数、预览数 -->
+                <jmash-cms-like organTenant="{{ organTenant }}" interactId="{{ item.infoId }}"
+                    publishDate="{{ item.publishDate }}"></jmash-cms-like>
+            </view>
+        </block>
+    </view>
+</template>
+
+<script lang="ts">
+import mpx, { createComponent, ref, onMounted } from "@mpxjs/core";
+import { EventBase } from "../../api/types";
+import { cmsApi } from '../../api/cms';
+import { CmsInfoModel } from '../../api/cms/types';
+
+createComponent({
+    properties: {
+        // 是否更多详情
+        isInfo: {
+            type: Boolean,
+            value: false
+        },
+        // 样式
+        style: {
+            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
+        },
+    },
+    setup(props) {
+        let config = getApp().globalData.config;
+        // 资源路径
+        let resourceUrl = config.resourceUrl + '/images';
+        // 文章列表
+        let articleList = ref([] as CmsInfoModel[]);
+        console.log("cms", props);
+        onMounted(() => {
+            cmsApi.findCmsInfoPage({
+                tenant: props.organTenant || config.tenant,
+                siteId: props.siteId,
+                channelId: props.channelId,
+                channelAlias: props.channelAlias,
+                curPage: 1,
+                pageSize: props.pageSize,
+            }).then(res => {
+                if (res.statusCode === 200) {
+                    articleList.value = res.data.results;
+                }
+            });
+        });
+        // 接口图片资源路径 容器宽高度150rpx 裁剪2倍
+        let imageUrl = config.baseUrl + "/v1/file/image/clip/300/300/";
+        return { resourceUrl, articleList, imageUrl }
+    },
+    methods: {
+        // 点击详情事件
+        handleInfo(e: EventBase) {
+            let config = getApp().globalData.config;
+            let item = e.currentTarget.dataset.item;
+            mpx.navigateTo({
+                url: '/jmash/pages/cms/cms-article?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 {
+    padding: 0 30rpx;
+    border-radius: 20rpx;
+    background-color: #fff;
+}
+
+// 有分割线列表
+.article-border {
+    padding: 30rpx 0;
+    border-bottom: 1rpx solid $border-line;
+
+    // 分割线最后一条内容无分割线
+    &:last-child {
+        border: none;
+    }
+}
+
+// 无分割线列表
+.article-info {
+    padding: 30rpx;
+    background-color: #fff;
+    border-radius: 20rpx;
+    margin-bottom: 20rpx;
+}
+
+.cms-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 30rpx;
+    margin-bottom: 30rpx;
+
+    // 文章左侧内容
+    .cms-left {
+        width: 450rpx;
+        display: flex;
+        flex-direction: column;
+
+        .cms-left-title {
+            color: #333;
+            font-size: 28rpx;
+            font-weight: 600;
+            margin-bottom: 20rpx;
+            overflow: hidden;
+            /* 隐藏超出部分 */
+            white-space: nowrap;
+            /* 强制文本不换行 */
+            text-overflow: ellipsis;
+            /* 超出部分以省略号显示 */
+        }
+
+        .cms-left-info {
+            color: #666;
+            font-size: 26rpx;
+            line-height: 37rpx;
+            overflow: hidden;
+            /* 隐藏超出部分 */
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            /* 文本只显示两行 */
+            text-overflow: ellipsis;
+            /* 超出部分以省略号显示 */
+        }
+    }
+
+    // 文章右侧图片
+    .cms-right-image {
+        width: 150rpx;
+        height: 150rpx;
+        border-radius: 10rpx;
+    }
+}
+</style>
+
+<script type="application/json">
+{
+    "component": true,
+    "usingComponents": {
+        "jmash-cms-like": "./jmash-cms-like"
+    }
+}
 </script>