jmash-core-mp 0.1.21 → 0.1.23

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

@@ -1,14 +1,51 @@
 <template>
-    <view class="cms_title">{{ article.infoTitle }}</view>
-    <view class="cms_box" wx:for="{{ contents }}" wx:key="*this">
-        <rich-text nodes="{{ item.infoContent }}"></rich-text>
+    <view class="article-header">
+        <view class="article-title">{{ article.infoTitle }}</view>
+        <view class="article-meta">
+            <view class="meta-item">
+                <text class="meta-icon">🕐</text>
+                <text class="meta-text">{{ article.publishDateStr }}</text>
+            </view>
+            <view class="meta-item" style="margin-left: auto;">
+                <text class="meta-icon">✍️</text>
+                <text class="meta-text">{{ article.author }}</text>
+            </view>
+        </view>
+        <view wx:if="{{ article.address }}" class="location-bar" catch:tap="handleNavigate">
+            <view class="location-bar-left">
+                <text class="location-bar-pin">📍</text>
+                <text class="location-bar-text">{{ article.address }}</text>
+            </view>
+            <text class="location-bar-nav">导航</text>
+        </view>
+    </view>
+
+    <view class="article-body">
+        <block wx:for="{{ contents }}" wx:key="*this" wx:for-item="item">
+            <block wx:if="{{ item.infoType === 'image' }}">
+                <view class="article-image-wrap" wx:for="{{ item.infoContentList }}" wx:key="index" wx:for-item="url">
+                    <image class="article-image" src="{{ imageUrl + '/clip/' + winWid + '/0/' + url }}"
+                        mode="widthFix" />
+                </view>
+            </block>
+            <block wx:if="{{ item.infoType === 'movie' }}">
+                <view class="article-video-wrap" wx:for="{{ item.infoContentList }}" wx:key="index" wx:for-item="url">
+                    <video class="article-video" show-mute-btn autoplay="{{ false }}" controls
+                        src="{{ fileUrl + url }}" />
+                </view>
+            </block>
+            <block wx:if="{{ item.infoType === 'text' }}">
+                <rich-text class="article-text" nodes="{{ item.infoContent }}" />
+            </block>
+        </block>
     </view>
 </template>
 
 <script lang="ts">
-import { createComponent, ref, toRefs, watch } from '@mpxjs/core'
+import mpx, { createComponent, ref, toRefs, watch } from '@mpxjs/core'
 import { cmsApi } from '../../api/cms/index'
 import { CmsInfoModel, CmsInfoContentReq, CmsInfoContentModel } from '../../api/cms/types'
+import * as dayjs from 'dayjs';
 
 createComponent({
     properties: {
@@ -29,35 +66,161 @@ createComponent({
         }
     },
     setup(props) {
+        let config = getApp().globalData.config;
         let contents = ref([{} as CmsInfoContentModel]);
         let article = ref({} as CmsInfoModel);
         const { infoId } = toRefs(props)
         watch(infoId, (newVal) => {
             cmsApi.findCmsInfoById({ infoId: newVal, tenant: props.tenant }).then(({ data }) => {
                 article.value = data;
+                article.value.publishDateStr = dayjs(article.value.publishDate).format("YYYY-MM-DD");
             })
             cmsApi.findCmsInfoContent({ siteId: props.siteId, infoId: newVal, tenant: props.tenant } as CmsInfoContentReq).then(({ data }) => {
                 contents.value = data.results;
+                for (let item of contents.value) {
+                    if (item.infoType !== "text") {
+                        item.infoContentList = item.infoContent?.split(',') || [];
+                    }
+                }
                 console.log(contents)
             })
         })
+        let imageUrl = config.baseUrl + "/v1/file/image";
+        // 视频资源路径
+        let fileUrl = config.baseUrl + "/v1/file/range/";
+        let winWid = mpx.getWindowInfo().screenWidth;
+
+        const handleNavigate = () => {
+            const { address, geoLatitude, geoLongitude, infoTitle } = article.value;
+            if (!geoLatitude || !geoLongitude) {
+                mpx.showToast({ title: '暂无坐标信息', icon: 'none' });
+                return;
+            }
+            wx.openLocation({
+                latitude: geoLatitude,
+                longitude: geoLongitude,
+                name: infoTitle,
+                address: address,
+                scale: 16
+            });
+        };
+
         return {
             article,
-            contents
+            contents,
+            imageUrl,
+            fileUrl,
+            winWid,
+            handleNavigate
         };
     },
 })
 </script>
 
 <style lang="scss">
-.cms_box {
-    padding: 15px 3%;
-    font-size: 28rpx;
-    line-height: 25px;
+.article-header {
+    padding: 32rpx 30rpx 24rpx;
+    border-bottom: 1rpx solid #f0f0f0;
+
+    .article-title {
+        font-size: 36rpx;
+        font-weight: 700;
+        color: #111;
+        line-height: 1.5;
+        margin-bottom: 20rpx;
+    }
+
+    .article-meta {
+        display: flex;
+        align-items: center;
+        gap: 32rpx;
+
+        .meta-item {
+            display: flex;
+            align-items: center;
+            gap: 8rpx;
+
+            .meta-icon {
+                font-size: 22rpx;
+            }
+
+            .meta-text {
+                font-size: 24rpx;
+                color: #999;
+            }
+        }
+    }
+
+    .location-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 20rpx;
+        padding: 18rpx 20rpx;
+        background: #f7f8fa;
+        border-radius: 12rpx;
+
+        .location-bar-left {
+            display: flex;
+            align-items: center;
+            gap: 8rpx;
+            min-width: 0;
+            flex: 1;
+
+            .location-bar-pin {
+                font-size: 22rpx;
+                flex-shrink: 0;
+            }
+
+            .location-bar-text {
+                font-size: 24rpx;
+                color: #666;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .location-bar-nav {
+            flex-shrink: 0;
+            font-size: 24rpx;
+            color: #409eff;
+            font-weight: 500;
+        }
+    }
 }
 
-.cms_title {
-    text-align: center;
+.article-body {
+    padding: 30rpx;
+    line-height: 1.8;
+
+    .article-image-wrap {
+        margin-bottom: 24rpx;
+        border-radius: 12rpx;
+        overflow: hidden;
+
+        .article-image {
+            display: block;
+            width: 100%;
+        }
+    }
+
+    .article-video-wrap {
+        margin-bottom: 24rpx;
+        border-radius: 12rpx;
+        overflow: hidden;
+
+        .article-video {
+            width: 100%;
+        }
+    }
+
+    .article-text {
+        font-size: 30rpx;
+        color: #333;
+        line-height: 1.8;
+        margin-bottom: 16rpx;
+    }
 }
 </style>
 

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

@@ -0,0 +1,275 @@
+<template>
+    <scroll-view class="article-main" type="custom" scroll-y scroll-top="{{ scrollTop }}" bindscrolltolower="loadMore">
+        <block wx:for="{{ articleList }}" wx:key="index" wx:if="{{ style == '1' }}">
+            <view class="article-border" bind:tap="handleInfo" data-item="{{ item }}">
+                <view class="cms-info">
+                    <view class="cms-image" catch:tap="handlePreview" data-url="{{ item.imgUrl }}">
+                        <image 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 class="cms-arrow">›</view>
+            </view>
+        </block>
+        <view wx:if="{{ loading }}" class="load-tip">加载中...</view>
+        <view wx:elif="{{ !hasMore && articleList.length > 0 }}" class="load-tip">没有更多了</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: {
+        // 样式
+        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
+        },
+        // 搜索标题
+        likeInfoTitle: {
+            type: String,
+            value: ""
+        },
+        //refreshKey
+        refreshKey: {
+            type: Number,
+            value: 0
+        },
+    },
+    setup(props) {
+        let config = getApp().globalData.config;
+        const curPage = ref(1)
+        const hasMore = ref(true)
+        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 (loading.value) return
+            loading.value = true;
+            cmsApi.findCmsInfoPage({
+                tenant: props.organTenant || config.tenant,
+                siteId: props.siteId,
+                channelId: props.channelId,
+                channelAlias: props.channelAlias,
+                curPage: curPage.value,
+                pageSize: props.pageSize,
+                likeInfoTitle: props.likeInfoTitle,
+            }).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 || [])];
+                    }
+                }
+            }).finally(() => {
+                loading.value = false
+            });
+        }
+        // 接口图片资源路径 容器宽高度150rpx 裁剪2倍
+        let imageUrl = config.baseUrl + "/v1/file/image/clip/300/300/";
+        const loadMore = () => {
+            if (!hasMore.value || loading.value) return
+            loadRecords(curPage.value + 1)
+        }
+        loadRecords(1);
+        watch(
+            () => props.refreshKey,
+            () => {
+                loadRecords(1)
+            }
+        )
+        return { resourceUrl, articleList, imageUrl, curPage, hasMore, 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?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: 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>