jmash-core-mp 0.1.21 → 0.1.23

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

@@ -0,0 +1,257 @@
+<template>
+
+    <view class="location-card">
+        <view class="location-body" catch:tap="handleNavigate">
+            <view class="location-image" catch:tap="handlePreview" data-url="{{ article.imgUrl }}">
+                <image class="location-image-thumb" src="{{ imageUrl + '/clip/300/300/'+ article.imgUrl }}"
+                    mode="aspectFill" />
+            </view>
+            <view class="location-text">
+                <view class="location-name">{{ article.infoTitle }}</view>
+                <view class="location-desc">{{ article.intro }}</view>
+                <view class="location-address">
+                    <text class="address-pin">📍</text>
+                    <text class="address-text">{{ article.address }}</text>
+                </view>
+            </view>
+            <view class="location-arrow">›</view>
+        </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 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: {
+        // 租户
+        tenant: {
+            type: String,
+            value: ""
+        },
+        // 站点ID
+        siteId: {
+            type: String,
+            value: ""
+        },
+        // 信息ID
+        infoId: {
+            type: String,
+            value: ""
+        }
+    },
+    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,
+            imageUrl,
+            fileUrl,
+            winWid,
+            handleNavigate
+        };
+    },
+})
+</script>
+
+<style lang="scss">
+.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;
+    }
+}
+
+// 位置卡片
+.location-card {
+    margin: 0 16rpx 24rpx;
+    background: linear-gradient(135deg, #e8f4fd 0%, #fff 40%);
+    border-radius: 20rpx;
+    overflow: hidden;
+
+    .location-label {
+        padding: 20rpx 24rpx 0;
+        font-size: 22rpx;
+        color: #69b1e7;
+        font-weight: 500;
+        letter-spacing: 2rpx;
+    }
+
+    .location-body {
+        display: flex;
+        align-items: center;
+        padding: 20rpx 24rpx;
+        gap: 20rpx;
+        position: relative;
+        transition: background 0.2s;
+
+        &:active {
+            background: rgba(0, 0, 0, 0.03);
+        }
+
+        .location-image {
+            flex-shrink: 0;
+            width: 140rpx;
+            height: 140rpx;
+            border-radius: 12rpx;
+            overflow: hidden;
+            background: #f0f0f0;
+
+            .location-image-thumb {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .location-text {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 10rpx;
+
+            .location-name {
+                font-size: 28rpx;
+                font-weight: 600;
+                color: #222;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .location-desc {
+                font-size: 24rpx;
+                color: #888;
+                line-height: 1.5;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                text-overflow: ellipsis;
+            }
+
+            .location-address {
+                display: flex;
+                align-items: center;
+                gap: 6rpx;
+
+                .address-pin {
+                    font-size: 22rpx;
+                    flex-shrink: 0;
+                }
+
+                .address-text {
+                    font-size: 22rpx;
+                    color: #aaa;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+
+        .location-arrow {
+            flex-shrink: 0;
+            font-size: 32rpx;
+            color: #69b1e7;
+            font-weight: 300;
+            width: 40rpx;
+            text-align: center;
+        }
+    }
+}
+</style>
+
+<script type="application/json">
+{
+    "component": true,
+    "usingComponents": {}
+}
+</script>

package/src/components/common/jmash-upload-picture.mpx

@@ -1,172 +1,175 @@
 <template>
-    <!-- 上传图片组件 -->
-    <view class="upload-picture-box">
-        <block wx:for="{{ imageArray }}" wx:key="index">
-            <view class="image_box">
-                <image class="upload_image" src="{{ baseUrl + item }}" />
-                <image class="del_image" src="{{ resourceUrl + 'file_del_icon.png' }}" mode="widthFix"
-                    data-index="{{ index }}" bind:tap="handleDel" />
-            </view>
-        </block>
-        <view wx:if="{{ imageArray.length < limit }}" class="upload-box" bind:tap="handleUploadImage">
-            <image class="upload-icon" src="{{ resourceUrl + 'upload_icon.png' }}" mode="widthFix" />
-            <text>添加图片</text>
-        </view>
+  <!-- 上传图片组件 -->
+  <view class="upload-picture-box">
+    <block wx:for="{{ imageArray }}" wx:key="index">
+      <view class="image_box">
+        <image class="upload_image" src="{{ baseUrl + item }}" />
+        <image class="del_image" src="{{ resourceUrl + 'file_del_icon.png' }}" mode="widthFix" data-index="{{ index }}"
+          bind:tap="handleDel" />
+      </view>
+    </block>
+    <view wx:if="{{ imageArray.length < limit }}" class="upload-box" bind:tap="handleUploadImage">
+      <image class="upload-icon" src="{{ resourceUrl + 'upload_icon.png' }}" mode="widthFix" />
+      <text>添加图片</text>
     </view>
+  </view>
 
 </template>
 
 <script lang="ts">
 import mpx, { createComponent, ref } from "@mpxjs/core";
 import { EventBase } from "../../api/types";
+// import { config } from "../../utils/config";
 
 createComponent({
-    properties: {
-        // 上传图片数量限制
-        limit: {
-            type: Number,
-            value: 6
-        }
-    },
-    setup() {
-        let config = getApp().globalData.config;
-        // 资源路径
-        let resourceUrl = config.resourceUrl + "/images/mall/";
-        // 图片路径
-        let baseUrl = config.baseUrl + "/v1/file/image/clip/100/100/";
-        // 上传图片数组
-        let imageArray = ref([] as Array<string>);
+  properties: {
+    // 上传图片数量限制
+    limit: {
+      type: Number,
+      value: 6
+    }
+  },
+  setup() {
+    let config = getApp().globalData.config;
+    // 资源路径
+    let resourceUrl = config.resourceUrl + "/images/mall/";
+    // 图片路径
+    let baseUrl = config.baseUrl + "/v1/file/image/clip/100/100/";
+    // 上传图片数组
+    let imageArray = ref([] as Array<string>);
 
-        return {
-            resourceUrl,
-            baseUrl,
-            imageArray,
+    return {
+      resourceUrl,
+      baseUrl,
+      imageArray,
+    }
+  },
+  methods: {
+    handleUploadImage() {
+      if (this.imageArray.length > this.limit - 1) {
+        mpx.showToast({
+          title: "图片最多上传" + this.limit + "张",
+          icon: "none",
+          duration: 2000
+        });
+        return;
+      }
+      mpx.showActionSheet({
+        itemList: ["从相册中选择", "拍照"],
+        itemColor: "#486aff",
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            this.chooseWxHeadImage("album");
+          } else if (res.tapIndex === 1) {
+            this.chooseWxHeadImage("camera");
+          }
         }
+      });
     },
-    methods: {
-        handleUploadImage() {
-            if (this.imageArray.length > this.limit - 1) {
-                mpx.showToast({
-                    title: "图片最多上传" + this.limit + "张",
+    chooseWxHeadImage: function (type: any) {
+      let config = getApp().globalData.config;
+      const token: string = mpx.getStorageSync("token") ? "Bearer " + mpx.getStorageSync("token") : "";
+      mpx.chooseMedia({
+        count: this.limit,
+        mediaType: ['image'],
+        sizeType: ["original", "compressed"],
+        sourceType: [type],
+        success: (res) => {
+          console.log('chooseImage success, temp path is', res)
+          const files = res.tempFiles || [];
+          // 逐个上传
+          files.forEach((file: any) => {
+            mpx.uploadFile({
+              url: config.baseUrl + "/v1/file/upload?tenant=" + config.tenant,
+              filePath: file.tempFilePath,
+              header: {
+                "Content-Type": "multipart/form-data",
+                "Authorization": token
+              },
+              formData: {
+                method: "POST",
+              },
+              name: "file",
+              success: (response) => {
+                console.log(response);
+                if (response.statusCode === 200) {
+                  const src = JSON.parse(response.data).fileSrc;
+                  this.imageArray.push(src);
+                  this.triggerEvent("getImageArray", this.imageArray);
+                } else {
+                  mpx.showToast({
+                    title: "图片上传失败",
                     icon: "none",
                     duration: 2000
-                });
-                return;
-            }
-            mpx.showActionSheet({
-                itemList: ["从相册中选择", "拍照"],
-                itemColor: "#486aff",
-                success: (res) => {
-                    if (res.tapIndex === 0) {
-                        this.chooseWxHeadImage("album");
-                    } else if (res.tapIndex === 1) {
-                        this.chooseWxHeadImage("camera");
-                    }
-                }
-            });
-        },
-        chooseWxHeadImage: function (type: any) {
-            let config = getApp().globalData.config;
-            const token: string = mpx.getStorageSync("token") ? "Bearer " + mpx.getStorageSync("token") : "";
-            mpx.chooseMedia({
-                count: this.limit,
-                sizeType: ["original", "compressed"],
-                sourceType: [type],
-                success: (res) => {
-                    console.log('chooseImage success, temp path is', res)
-                    const tempFilePaths = res.tempFiles[0].tempFilePath;
-                    // 上传文件
-                    mpx.uploadFile({
-                        url: config.baseUrl + "/v1/file/upload?tenant=" + config.tenant,
-                        filePath: tempFilePaths,
-                        header: {
-                            "Content-Type": "multipart/form-data",
-                            "Authorization": token
-                        },
-                        formData: {
-                            method: "POST",   //请求方式
-                        },
-                        name: "file",
-                        success: (response) => {
-                            console.log(response);
-                            if (response.statusCode === 200) {
-                                const src = JSON.parse(response.data).fileSrc;
-                                this.imageArray.push(src);
-                                // 使用this.triggerEvent传索引值给页面
-                                this.triggerEvent("getImageArray", this.imageArray);
-                            } else {
-                                mpx.showToast({
-                                    title: "图片上传失败",
-                                    icon: "none",
-                                    duration: 2000
-                                });
-                            }
-                        }
-                    })
+                  });
                 }
+              }
             })
-        },
-        // 删除图片
-        handleDel(e: EventBase) {
-            this.imageArray.splice(e.currentTarget.dataset.index, 1);
-            // 使用this.triggerEvent传索引值给页面
-            this.triggerEvent("getImageArray", this.imageArray);
+          });
         }
+      })
+    },
+    // 删除图片
+    handleDel(e: EventBase) {
+      this.imageArray.splice(e.currentTarget.dataset.index, 1);
+      // 使用this.triggerEvent传索引值给页面
+      this.triggerEvent("getImageArray", this.imageArray);
     }
+  }
 })
 </script>
 
 <style lang="scss">
 .upload-picture-box {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .upload_image {
-    width: 100%;
-    height: 196rpx;
-    vertical-align: top;
+  width: 100%;
+  height: 196rpx;
+  vertical-align: top;
 }
 
 .upload-box {
-    border: 2rpx dashed #dddddd;
-    font-size: 24rpx;
-    display: flex;
-    flex-direction: column;
-    height: 192rpx;
-    justify-content: center;
-    align-items: center;
-    flex: 0 0 calc((100% - 42rpx)/3);
+  border: 2rpx dashed #dddddd;
+  font-size: 24rpx;
+  display: flex;
+  flex-direction: column;
+  height: 192rpx;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 calc((100% - 42rpx)/3);
 
-    .upload-icon {
-        width: 60rpx;
-        margin-bottom: 10rpx;
-    }
+  .upload-icon {
+    width: 60rpx;
+    margin-bottom: 10rpx;
+  }
 }
 
 .image_box {
-    position: relative;
-    height: 196rpx;
-    flex: 0 0 calc((100% - 42rpx)/3);
-    margin: 0 20rpx 20rpx 0;
+  position: relative;
+  height: 196rpx;
+  flex: 0 0 calc((100% - 42rpx)/3);
+  margin: 0 20rpx 20rpx 0;
 }
 
 .image_box:nth-child(3n) {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .del_image {
-    width: 36rpx;
-    position: absolute;
-    right: -10rpx;
-    top: -10rpx;
+  width: 36rpx;
+  position: absolute;
+  right: -10rpx;
+  top: -10rpx;
 }
 </style>
 
 <script type="application/json">
 {
-    "component": true,
-    "usingComponents": {}
+  "component": true,
+  "usingComponents": {}
 }
-</script>
+</script>

package/src/index.ts

@@ -69,3 +69,8 @@ export {
   validateRules,
   validateRequired,
 } from "./utils/common";
+
+import * as dayjsLocaleZhCn from "dayjs/locale/zh-cn";
+import * as dayjs from "dayjs";
+dayjs.locale(dayjsLocaleZhCn);
+export { dayjs };

package/src/packages/index.mpx

@@ -5,7 +5,9 @@
         "./pages/auth/update-user",
         "./pages/auth/cms-protocol",
         "./pages/cms/cms-article",
-        "./pages/cms/cms-article-list"
+        "./pages/cms/cms-location-list",
+        "./pages/cms/cms-location",
+        "./pages/cms/cms-activity-list",
     ]
 }
 </script>

package/src/packages/pages/cms/cms-activity-list.mpx

@@ -0,0 +1,95 @@
+<template>
+    <!-- 搜索框 -->
+    <view class="search-box">
+        <jmash-search placeholder="搜索" bind:handleSearch="handleInput" />
+    </view>
+    <!-- 栏目列表 -->
+
+    <jmash-cms-activity-page isInfo="false" style="1" organTenant="{{ queryParams.tenant }}"
+        siteId="{{ queryParams.siteId }}" likeInfoTitle="{{ queryParams.likeInfoTitle }}"
+        channelAlias="{{ queryParams.channelAlias }}" pageSize="10" refreshKey="{{ refreshKey }}" />
+
+</template>
+
+<script lang="ts">
+import mpx, { createPage, ref } from "@mpxjs/core";
+import { CmsChannelModel } from '../../../api/cms/types'
+import { EventBase } from "../../../api/types";
+
+createPage({
+    setup() {
+        let config = getApp().globalData.config;
+        // 搜索参数
+        let queryParams = ref({
+            tenant: mpx.getStorageSync("tenant"),
+            siteId: config.siteId,
+            channelAlias: "hdzx",
+            likeInfoTitle: "",
+            status: true,
+            isOpen: true,
+        });
+        // 栏目列表
+        let channelList = ref([] as CmsChannelModel[]);
+
+        let refreshKey = ref(0);
+
+        return {
+            queryParams,
+            channelList,
+            refreshKey,
+        }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     * @param options 页面跳转参数{title: string, tenant: string, siteId: string, alias: string}
+     */
+    onLoad(options) {
+        console.log("cms文章列表页面参数 ==>", options);
+        let config = getApp().globalData.config;
+        mpx.setNavigationBarTitle({ title: options.title || "列表" });
+        this.queryParams.tenant = options.tenant || mpx.getStorageSync("tenant") || config.tenant;
+        this.queryParams.siteId = options.siteId as string || config.siteId;
+        this.queryParams.channelAlias = options.channelAlias as string || "hdzx";
+        this.refreshKey = this.refreshKey + 1;
+    },
+
+    // 搜索
+    handleInput(e: EventBase) {
+        console.log("搜索 ==>", e.detail);
+        this.queryParams.likeInfoTitle = e.detail;
+        this.refreshKey = this.refreshKey + 1;
+    },
+
+})
+</script>
+
+<style lang="scss">
+@use "../../../styles/index.scss" as *;
+
+page {
+    display: flex;
+    flex-direction: column;
+    height: 70vh;
+    margin: 0 0;
+}
+
+.search-box {
+    padding: 15rpx 30rpx;
+}
+
+.article-list {
+    max-height: calc(100vh - 90rpx - env(safe-area-inset-bottom));
+    box-sizing: border-box;
+}
+</style>
+
+<script type="application/json">
+{
+    "navigationBarTitleText": "列表",
+    "usingComponents": {
+        "jmash-search": "../../../components/common/jmash-search",
+        "jmash-cms-activity-page": "../../../components/cms/jmash-cms-activity-page.mpx"
+    }
+}
+</script>