jufubao-base 1.0.381 → 1.0.382-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.381",
+  "version": "1.0.382-beta5",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseFeedBack/Api.js

@@ -0,0 +1,22 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Feed
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    //设置方法名字当别忘记加上【模块名字】：Feed
+    mapFnName: 'getFeedByIdFilmSquate',
+    title: '获取电影广场列表',
+    path: '/api/account/film/list-film-square',
+    isRule: false,
+    params: {
+      last_key: ['当前页', 'Number', '必选'],
+      page_size: ['每页数量', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  
+];

package/src/components/JfbBaseFeedBack/Attr.js

@@ -0,0 +1,21 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'bgColor',
+        value: data.bgColor || '',
+        placeholder: '请输入占位框背景颜色',
+        groupKey:'content',
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseFeedBack/JfbBaseFeedBack.vue

@@ -0,0 +1,474 @@
+<template>
+  <view
+    class="jfb-base-feed-back"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-feed-back__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-feed-back__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-feed-back__body">
+      <!-- 反馈类型 -->
+      <view class="jfb-feed-back__section">
+        <view class="jfb-feed-back__section-title">反馈类型</view>
+        <view class="jfb-feed-back__types">
+          <view
+            v-for="type in feedbackTypes"
+            :key="type.value"
+            class="jfb-feed-back__type-btn"
+            :class="{ active: selectedType === type.value }"
+            @click="selectedType = type.value"
+          >
+            {{ type.label }}
+          </view>
+        </view>
+      </view>
+
+      <!-- 反馈内容 -->
+      <view class="jfb-feed-back__section">
+        <view class="jfb-feed-back__section-title">反馈内容</view>
+        <view class="jfb-feed-back__textarea-wrapper">
+          <textarea
+            class="jfb-feed-back__textarea"
+            v-model="feedbackContent"
+            placeholder="请输入至少10个字"
+            maxlength="100"
+            @input="onContentInput"
+          />
+          <view class="jfb-feed-back__char-count">{{ feedbackContent.length }}/100</view>
+        </view>
+      </view>
+
+      <!-- 上传图片 -->
+      <view class="jfb-feed-back__section">
+        <view class="jfb-feed-back__section-title">上传图片（选填）</view>
+        <view class="jfb-feed-back__upload-area">
+          <view class="jfb-feed-back__upload-item" @click="chooseImage">
+            <xd-font-icon name="camera" class="jfb-feed-back__upload-icon" />
+            <view class="jfb-feed-back__upload-text">添加图片</view>
+          </view>
+          <view
+            v-for="(img, index) in uploadImages"
+            :key="index"
+            class="jfb-feed-back__upload-preview"
+          >
+            <image :src="img" class="jfb-feed-back__upload-preview-img" mode="aspectFill" />
+            <view class="jfb-feed-back__upload-delete" @click="removeImage(index)">
+              <xd-font-icon name="close" class="jfb-feed-back__upload-delete-icon" />
+            </view>
+          </view>
+        </view>
+        <view class="jfb-feed-back__upload-tip">最多可上传6张图片，每张不超过5MB</view>
+      </view>
+
+      <!-- 联系方式 -->
+      <view class="jfb-feed-back__section">
+        <view class="jfb-feed-back__section-title">联系方式（选填）</view>
+        <input
+          class="jfb-feed-back__contact-input"
+          v-model="contactInfo"
+          placeholder="手机号/邮箱，方便我们联系您"
+        />
+      </view>
+
+      <!-- 匿名反馈 -->
+      <view class="jfb-feed-back__section jfb-feed-back__section--no-border">
+        <view class="jfb-feed-back__anonymous">
+          <view class="jfb-feed-back__anonymous-label">
+            <xd-font-icon name="anonymous" class="jfb-feed-back__anonymous-icon" />
+            <text>匿名反馈</text>
+          </view>
+          <switch
+            class="jfb-feed-back__anonymous-switch"
+            :checked="isAnonymous"
+            @change="onAnonymousChange"
+            color="#e8272c"
+          />
+        </view>
+      </view>
+
+      <!-- 底部操作栏 -->
+      <view class="jfb-feed-back__footer">
+        <view class="jfb-feed-back__footer-btn jfb-feed-back__footer-btn--record" @click="goToFeedbackRecord">
+          <xd-font-icon name="clock" class="jfb-feed-back__footer-btn-icon" />
+          <text>反馈记录</text>
+        </view>
+        <view class="jfb-feed-back__footer-btn jfb-feed-back__footer-btn--submit" @click="submitFeedback">
+          提交反馈
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseFeedBackMixin from "./JfbBaseFeedBackMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  export default {
+    name: "JfbBaseFeedBack",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseFeedBackMixin
+    ],
+    data() {
+      return {
+        // 反馈类型
+        feedbackTypes: [
+          { label: '咨询', value: 'consult' },
+          { label: '商品问题', value: 'product' },
+          { label: '订单问题', value: 'order' },
+          { label: '支付问题', value: 'payment' },
+          { label: '配送问题', value: 'delivery' },
+          { label: '产品建议', value: 'suggestion' },
+          { label: '投诉', value: 'complaint' }
+        ],
+        selectedType: 'consult',
+        feedbackContent: '',
+        uploadImages: [],
+        contactInfo: '',
+        isAnonymous: false,
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.init(this.container);
+
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+
+        // jfbRootExec('baiduUserLogin', {
+
+        //   vm: this,//   data: {
+
+        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+
+        //   }
+
+        // }).then().catch()
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+
+        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+
+        //this.height = getContainerPropsValue(container, 'content.height', 10);
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      // 内容输入
+      onContentInput() {
+        // 字数限制已在 maxlength 控制
+      },
+      // 选择图片
+      chooseImage() {
+        if (this.uploadImages.length >= 6) {
+          uni.showToast({ title: '最多上传6张图片', icon: 'none' });
+          return;
+        }
+        uni.chooseImage({
+          count: 6 - this.uploadImages.length,
+          sizeType: ['compressed'],
+          sourceType: ['album', 'camera'],
+          success: (res) => {
+            this.uploadImages = this.uploadImages.concat(res.tempFilePaths);
+          }
+        });
+      },
+      // 删除图片
+      removeImage(index) {
+        this.uploadImages.splice(index, 1);
+      },
+      // 匿名反馈切换
+      onAnonymousChange(e) {
+        this.isAnonymous = e.detail.value;
+      },
+      // 提交反馈
+      submitFeedback() {
+        if (!this.selectedType) {
+          uni.showToast({ title: '请选择反馈类型', icon: 'none' });
+          return;
+        }
+        if (this.feedbackContent.length < 10) {
+          uni.showToast({ title: '请输入至少10个字', icon: 'none' });
+          return;
+        }
+        // TODO: 调用提交接口
+        uni.showToast({ title: '提交成功', icon: 'success' });
+      },
+      // 跳转反馈记录
+      goToFeedbackRecord() {
+        // TODO: 跳转到反馈记录页面
+        console.log('跳转反馈记录');
+      }
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseFeedBackLess.less";
+
+  .jfb-base-feed-back {
+    &__body{
+      background: #f5f5f5;
+      min-height: 100vh;
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+
+  .jfb-feed-back {
+    &__section {
+      background: #fff;
+      padding: 24rpx 30rpx;
+      margin-bottom: 16rpx;
+
+      &--no-border {
+        background: transparent;
+        margin-bottom: 0;
+      }
+    }
+
+    &__section-title {
+      font-size: 30rpx;
+      color: #333;
+      margin-bottom: 24rpx;
+    }
+
+    // 反馈类型
+    &__types {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16rpx;
+    }
+
+    &__type-btn {
+      padding: 16rpx 36rpx;
+      border: 2rpx solid #e5e5e5;
+      border-radius: 12rpx;
+      font-size: 28rpx;
+      color: #999;
+      background: #fff;
+      transition: all 0.2s;
+
+      &.active {
+        background: #e8272c;
+        border-color: #e8272c;
+        color: #fff;
+      }
+    }
+
+    // 反馈内容
+    &__textarea-wrapper {
+      position: relative;
+      border: 2rpx solid #e5e5e5;
+      border-radius: 12rpx;
+      overflow: hidden;
+    }
+
+    &__textarea {
+      width: 100%;
+      min-height: 200rpx;
+      padding: 24rpx;
+      font-size: 28rpx;
+      color: #333;
+      box-sizing: border-box;
+    }
+
+    &__char-count {
+      text-align: right;
+      padding: 12rpx 24rpx;
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    // 上传图片
+    &__upload-area {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16rpx;
+    }
+
+    &__upload-item,
+    &__upload-preview {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 12rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__upload-item {
+      background: #f5f5f5;
+      border: 2rpx dashed #e5e5e5;
+    }
+
+    &__upload-icon {
+      font-size: 48rpx;
+      color: #999;
+      margin-bottom: 8rpx;
+    }
+
+    &__upload-text {
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    &__upload-preview {
+      position: relative;
+    }
+
+    &__upload-preview-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 12rpx;
+    }
+
+    &__upload-delete {
+      position: absolute;
+      top: -12rpx;
+      right: -12rpx;
+      width: 36rpx;
+      height: 36rpx;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__upload-delete-icon {
+      font-size: 20rpx;
+      color: #fff;
+    }
+
+    &__upload-tip {
+      font-size: 24rpx;
+      color: #999;
+      margin-top: 16rpx;
+    }
+
+    // 联系方式
+    &__contact-input {
+      width: 100%;
+      height: 72rpx;
+      padding: 0 24rpx;
+      border: 2rpx solid #e5e5e5;
+      border-radius: 12rpx;
+      font-size: 28rpx;
+      color: #333;
+      box-sizing: border-box;
+    }
+
+    // 匿名反馈
+    &__anonymous {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 24rpx 0;
+    }
+
+    &__anonymous-label {
+      display: flex;
+      align-items: center;
+      font-size: 28rpx;
+      color: #333;
+    }
+
+    &__anonymous-icon {
+      font-size: 32rpx;
+      color: #333;
+      margin-right: 12rpx;
+    }
+
+    &__anonymous-switch {
+      transform: scale(0.8);
+    }
+
+    // 底部操作栏
+    &__footer {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: #fff;
+      padding: 20rpx 30rpx;
+      padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+      display: flex;
+      align-items: center;
+      gap: 20rpx;
+      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+    }
+
+    &__footer-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 80rpx;
+      border-radius: 40rpx;
+      font-size: 28rpx;
+      transition: all 0.2s;
+
+      &--record {
+        flex: 0 0 auto;
+        padding: 0 32rpx;
+        border: 2rpx solid #e8272c;
+        color: #e8272c;
+        background: #fff;
+      }
+
+      &--submit {
+        flex: 1;
+        background: #e8272c;
+        color: #fff;
+      }
+
+      &-icon {
+        margin-right: 8rpx;
+        font-size: 28rpx;
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseFeedBack/JfbBaseFeedBackLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-feed-back {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-feed-back {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseFeedBack/JfbBaseFeedBackMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-feed-back'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseFeedBack/Mock.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  
+  getFeedByIdFilmSquate:{},
+}

package/src/components/JfbBaseFeedBackList/Api.js

@@ -0,0 +1,21 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Feed
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    //设置方法名字当别忘记加上【模块名字】：Feed
+    mapFnName: 'getFeedByIdFilmSquate',
+    title: '获取电影广场列表',
+    path: '/api/account/film/list-film-square',
+    isRule: false,
+    params: {
+      last_key: ['当前页', 'Number', '必选'],
+      page_size: ['每页数量', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseFeedBackList/Attr.js

@@ -0,0 +1,21 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'bgColor',
+        value: data.bgColor || '',
+        placeholder: '请输入占位框背景颜色',
+        groupKey:'content',
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseFeedBackList/JfbBaseFeedBackList.vue

@@ -0,0 +1,566 @@
+<template>
+  <view
+    class="jfb-base-feed-back-list"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-feed-back-list__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-feed-back-list__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-feed-back-list__body">
+      <view class="jfb-feed-back-list__container">
+        <view
+          v-for="item in feedbackList"
+          :key="item.id"
+          class="jfb-feed-back-list__item"
+          @click="goToDetail(item)"
+        >
+          <!-- 顶部：类型 + 状态 -->
+          <view class="jfb-feed-back-list__item-header">
+            <view
+              class="jfb-feed-back-list__type-tag"
+              :class="getTypeTagClass(item.type)"
+            >
+              <xd-font-icon :name="getTypeIcon(item.type)" class="jfb-feed-back-list__type-icon" />
+              <text>{{ getTypeLabel(item.type) }}</text>
+            </view>
+            <view class="jfb-feed-back-list__status">
+              <text :class="item.status === 'replied' ? 'text-green' : 'text-orange'">
+                {{ item.status === 'replied' ? '已回复' : '待回复' }}
+              </text>
+            </view>
+          </view>
+
+          <!-- 内容摘要 -->
+          <view class="jfb-feed-back-list__content">{{ item.content }}</view>
+
+          <!-- 图片 -->
+          <view class="jfb-feed-back-list__images">
+            <view
+              v-for="(img, index) in (item.images && item.images.length ? item.images : [null])"
+              :key="index"
+              class="jfb-feed-back-list__image-wrapper"
+            >
+              <image
+                v-if="img"
+                :src="img"
+                class="jfb-feed-back-list__image"
+                mode="aspectFill"
+              />
+              <view v-else class="jfb-feed-back-list__image-placeholder">
+                <xd-font-icon name="image" class="jfb-feed-back-list__image-placeholder-icon" />
+              </view>
+            </view>
+          </view>
+
+          <!-- 底部：时间 + 查看详情 -->
+          <view class="jfb-feed-back-list__item-footer">
+            <text class="jfb-feed-back-list__time">{{ item.createTime }}</text>
+            <view class="jfb-feed-back-list__detail-link">
+              <text>查看详情</text>
+              <xd-font-icon name="arrow-right" class="jfb-feed-back-list__detail-icon" />
+            </view>
+          </view>
+        </view>
+
+        <!-- 空状态 -->
+        <view v-if="!loading && feedbackList.length === 0" class="jfb-feed-back-list__empty">
+          <xd-font-icon name="empty" class="jfb-feed-back-list__empty-icon" />
+          <text>暂无反馈记录</text>
+        </view>
+
+        <!-- 加载状态 -->
+        <view v-if="loading" class="jfb-feed-back-list__loading">
+          <text>加载中...</text>
+        </view>
+        <view v-if="noMore && feedbackList.length > 0" class="jfb-feed-back-list__no-more">
+          <text>没有更多了</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 反馈详情弹框 -->
+    <xd-down-drawer
+      :show.sync="showDetailModal"
+      :z-index="2000"
+      @close="closeDetailModal"
+    >
+      <!-- 弹框头部 -->
+      <view class="jfb-feed-back-list__drawer-header">
+        <text class="jfb-feed-back-list__drawer-title">反馈详情</text>
+      </view>
+
+      <!-- 弹框内容 -->
+      <view class="jfb-feed-back-list__drawer-body">
+        <!-- 反馈类型 + 状态 -->
+        <view class="jfb-feed-back-list__drawer-row">
+          <view class="jfb-feed-back-list__drawer-label">反馈类型</view>
+          <view class="jfb-feed-back-list__drawer-type-row">
+            <view
+              class="jfb-feed-back-list__type-tag"
+              :class="getTypeTagClass(detailItem.type)"
+            >
+              <xd-font-icon :name="getTypeIcon(detailItem.type)" class="jfb-feed-back-list__type-icon" />
+              <text>{{ getTypeLabel(detailItem.type) }}</text>
+            </view>
+            <text :class="detailItem.status === 'replied' ? 'text-green' : 'text-orange'">
+              <xd-font-icon
+                :name="detailItem.status === 'replied' ? 'check-circle' : 'clock'"
+                class="jfb-feed-back-list__drawer-status-icon"
+              />
+              {{ detailItem.status === 'replied' ? '已回复' : '待回复' }}
+            </text>
+          </view>
+        </view>
+
+        <!-- 是否匿名 -->
+        <view class="jfb-feed-back-list__drawer-row">
+          <view class="jfb-feed-back-list__drawer-label">是否匿名</view>
+          <view class="jfb-feed-back-list__drawer-anonymous-tag">
+            {{ detailItem.isAnonymous ? '匿名' : detailItem.contactInfo || '未留联系方式' }}
+          </view>
+        </view>
+
+        <!-- 反馈时间 -->
+        <view class="jfb-feed-back-list__drawer-row">
+          <view class="jfb-feed-back-list__drawer-label">反馈时间</view>
+          <text class="jfb-feed-back-list__drawer-value">{{ detailItem.createTime }}</text>
+        </view>
+
+        <!-- 反馈内容 -->
+        <view class="jfb-feed-back-list__drawer-row">
+          <view class="jfb-feed-back-list__drawer-label">反馈内容</view>
+          <view class="jfb-feed-back-list__drawer-content-box">
+            {{ detailItem.content }}
+          </view>
+        </view>
+
+        <!-- 图片 -->
+        <view v-if="detailItem.images && detailItem.images.length" class="jfb-feed-back-list__drawer-row">
+          <view class="jfb-feed-back-list__drawer-images">
+            <image
+              v-for="(img, index) in detailItem.images"
+              :key="index"
+              :src="img"
+              class="jfb-feed-back-list__drawer-image"
+              mode="aspectFill"
+            />
+          </view>
+        </view>
+      </view>
+    </xd-down-drawer>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseFeedBackListMixin from "./JfbBaseFeedBackListMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  export default {
+    name: "JfbBaseFeedBackList",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseFeedBackListMixin
+    ],
+    data() {
+      return {
+        feedbackList: [],
+        loading: false,
+        noMore: false,
+        page: 1,
+        pageSize: 10,
+        showDetailModal: false,
+        detailItem: {},
+        typeMap: {
+          consult: { label: '咨询', icon: 'message' },
+          product: { label: '商品问题', icon: 'product' },
+          order: { label: '订单问题', icon: 'order' },
+          payment: { label: '支付问题', icon: 'payment' },
+          delivery: { label: '配送问题', icon: 'delivery' },
+          suggestion: { label: '产品建议', icon: 'suggestion' },
+          complaint: { label: '投诉', icon: 'complaint' }
+        }
+      }
+    },
+    computed: {
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.init(this.container);
+      this.fetchFeedbackList();
+    },
+    methods: {
+      // 获取反馈列表
+      async fetchFeedbackList() {
+        if (this.loading || this.noMore) return;
+        this.loading = true;
+        try {
+          // TODO: 替换为真实接口
+          // const res = await this.$api.getFeedbackList({ page: this.page, pageSize: this.pageSize });
+          // this.feedbackList = [...this.feedbackList, ...res.data];
+          // this.noMore = res.data.length < this.pageSize;
+
+          // 模拟数据
+          this.feedbackList = [...this.feedbackList, ...this.getMockData()];
+          this.noMore = this.page >= 3;
+          this.page++;
+        } catch (e) {
+          console.error('获取反馈列表失败', e);
+        } finally {
+          this.loading = false;
+        }
+      },
+      // 查看详情
+      goToDetail(item) {
+        this.detailItem = item;
+        this.showDetailModal = true;
+      },
+      // 关闭详情弹框
+      closeDetailModal() {
+        this.showDetailModal = false;
+      },
+      // 获取类型标签 class
+      getTypeTagClass(type) {
+        return `jfb-feed-back-list__type-tag--${type}`;
+      },
+      // 获取类型图标
+      getTypeIcon(type) {
+        return (this.typeMap[type] && this.typeMap[type].icon) || 'message';
+      },
+      // 获取类型文案
+      getTypeLabel(type) {
+        return (this.typeMap[type] && this.typeMap[type].label) || type;
+      },
+      // 模拟数据
+      getMockData() {
+        const types = ['product', 'order', 'delivery', 'suggestion', 'complaint', 'payment'];
+        const statuses = ['replied', 'pending'];
+        const contents = [
+          '订单配送太慢了，希望能加快配送速度，昨天下的单今天还没送到，体验不太好...',
+          '商品质量有问题，申请退换货，收到的商品有破损，包装也不完整...',
+          '客服态度很好，问题已解决，感谢工作人员的耐心解答...',
+          '建议增加更多配送方式，目前只有快递不够方便...'
+        ];
+        return Array.from({ length: 3 }, (_, i) => ({
+          id: Date.now() + i,
+          type: types[(this.page - 1 + i) % types.length],
+          status: statuses[i % statuses.length],
+          content: contents[i % contents.length],
+          images: i % 3 === 0 ? ['data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIHJ4PSIxMiIgZmlsbD0iI2Y1ZjVmNSIvPjxwYXRoIGQ9Ik00MCA0NUw1MCA2MEw2MCA0NUw3MCA2MEw4MCA0NSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3N2Zz4='] : [],
+          createTime: '2026-05-01 12:00',
+          isAnonymous: i % 2 === 0,
+          contactInfo: i % 2 === 0 ? '' : '138****1234'
+        }));
+      },
+      onJfbLoad(options) {
+
+        // jfbRootExec('baiduUserLogin', {
+
+        //   vm: this,//   data: {
+
+        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+
+        //   }
+
+        // }).then().catch()
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+
+        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+
+        //this.height = getContainerPropsValue(container, 'content.height', 10);
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseFeedBackListLess.less";
+
+  .jfb-base-feed-back-list {
+    &__body {
+      background: #f5f5f5;
+      min-height: 100vh;
+    }
+  }
+
+  .jfb-feed-back-list {
+    &__container {
+      padding: 10rpx;
+      padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+    }
+
+    &__item {
+      background: #fff;
+      border-radius: 10rpx;
+      padding: 20rpx;
+      margin-bottom: 10rpx;
+    }
+
+    // 顶部：类型 + 状态
+    &__item-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 14rpx;
+    }
+
+    &__type-tag {
+      display: flex;
+      align-items: center;
+      padding: 6rpx 14rpx;
+      border-radius: 6rpx;
+      font-size: 26rpx;
+      color: #e8272c;
+      background: #fde8e8;
+
+      &--product,
+      &--order,
+      &--payment,
+      &--delivery,
+      &--suggestion,
+      &--complaint,
+      &--consult {
+        background: #fde8e8;
+        color: #e8272c;
+      }
+    }
+
+    &__type-icon {
+      font-size: 26rpx;
+      margin-right: 4rpx;
+    }
+
+    &__status {
+      font-size: 24rpx;
+    }
+
+    .text-green {
+      color: #52c41a;
+    }
+
+    .text-orange {
+      color: #fa8c16;
+    }
+
+    // 内容摘要
+    &__content {
+      font-size: 28rpx;
+      color: #333;
+      line-height: 1.6;
+      margin-bottom: 14rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    // 图片
+    &__images {
+      display: flex;
+      gap: 10rpx;
+      margin-bottom: 14rpx;
+    }
+
+    &__image-wrapper {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 8rpx;
+      overflow: hidden;
+      background: #f5f5f5;
+    }
+
+    &__image {
+      width: 100%;
+      height: 100%;
+    }
+
+    &__image-placeholder {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__image-placeholder-icon {
+      font-size: 36rpx;
+      color: #ddd;
+    }
+
+    // 底部
+    &__item-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &__time {
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    &__detail-link {
+      display: flex;
+      align-items: center;
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    &__detail-icon {
+      font-size: 22rpx;
+      margin-left: 4rpx;
+    }
+
+    // 空状态
+    &__empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 120rpx 0;
+      color: #999;
+      font-size: 28rpx;
+    }
+
+    &__empty-icon {
+      font-size: 80rpx;
+      color: #ccc;
+      margin-bottom: 20rpx;
+    }
+
+    // 加载状态
+    &__loading,
+    &__no-more {
+      text-align: center;
+      padding: 30rpx 0;
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    // Drawer 弹框样式
+    &__drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 30rpx;
+      border-bottom: 1rpx solid #f0f0f0;
+    }
+
+    &__drawer-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+    }
+
+    &__drawer-body {
+      padding: 30rpx;
+      padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+    }
+
+    &__drawer-row {
+      margin-bottom: 30rpx;
+    }
+
+    &__drawer-row:last-child {
+      margin-bottom: 0;
+    }
+
+    &__drawer-label {
+      font-size: 26rpx;
+      color: #999;
+      margin-bottom: 16rpx;
+    }
+
+    &__drawer-type-row {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+    }
+
+    &__drawer-status-icon {
+      font-size: 26rpx;
+      margin-right: 4rpx;
+    }
+
+    &__drawer-anonymous-tag {
+      display: inline-block;
+      padding: 8rpx 24rpx;
+      background: #f5f5f5;
+      border-radius: 8rpx;
+      font-size: 26rpx;
+      color: #666;
+    }
+
+    &__drawer-value {
+      font-size: 28rpx;
+      color: #333;
+    }
+
+    &__drawer-content-box {
+      padding: 20rpx;
+      background: #f9f9f9;
+      border-radius: 12rpx;
+      font-size: 28rpx;
+      color: #333;
+      line-height: 1.6;
+      word-break: break-all;
+    }
+
+    &__drawer-images {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10rpx;
+    }
+
+    &__drawer-image {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 12rpx;
+    }
+  }
+</style>

package/src/components/JfbBaseFeedBackList/JfbBaseFeedBackListLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-feed-back-list {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-feed-back-list {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseFeedBackList/JfbBaseFeedBackListMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-feed-back-list'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseFeedBackList/Mock.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  getFeedByIdFilmSquate:{},
+}

package/get.package.path.js

@@ -1,22 +0,0 @@
-'use strict';
-
-/**
- * @description 第三方库
- * @param threePackagePath {String} 第三方库所在项目路径存放路径路
- * @param packname {String} 包名字
- * @returns {string|*}
- */
-const getPackagePath = (threePackagePath, packname = 'gxd-commands-bussiness')=>{
-  if(packname === 'gxd-commands-bussiness') {
-    return `/Users/shiyonggao/home/root/Base-Jufubao/xd-commands-bussiness/${threePackagePath}`;
-  }
-
-  if (packname === 'gxd-uni-library-editx') {
-    return `/Users/shiyonggao/home/root/Base-Jufubao/xd-uni-library-editx/${threePackagePath}`;
-  }
-
-};
-
-module.exports = {
-  getPackagePath
-}