3

tj

2025-05-22 14764dd7679369a650ad1d60be62aacc863755a1

3

 components/card/card-item.vue

对比新文件
@@ -0,0 +1,130 @@
<template>
  <view class="card-container">
    <!-- 卡片图片区域，如果有视频则显示播放图标 -->
    <view class="card-image-container">
      <image class="card-image" :src="item.image" mode="widthFix"></image>
      <view class="video-icon" v-if="item.hasVideo">
        <u-icon name="play-right-fill" color="#ffffff" size="40"></u-icon>
      </view>
    </view>
    
    <!-- 卡片内容区域 -->
    <view class="card-content">
      <!-- 标题 -->
      <view class="card-title">{{ item.title }}</view>
      
      <!-- 描述文字 -->
      <view class="card-desc" v-if="item.desc">{{ item.desc }}</view>
      
      <!-- 作者信息和点赞 -->
      <view class="card-footer">
        <view class="author-info">
          <image class="author-avatar" :src="item.author.avatar" mode="aspectFill"></image>
          <text class="author-name">{{ item.author.name }}</text>
        </view>
        <view class="like-info">
          <u-icon name="heart" color="#999999" size="16"></u-icon>
          <text class="like-count">{{ item.likes }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CardItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-image-container {
  position: relative;
  width: 100%;
}

.card-image {
  width: 100%;
  height: auto;
  display: block;
}

.video-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-content {
  padding: 10px;
}

.card-title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 6px;
}

.card-desc {
  font-size: 12px;
  color: #666666;
  line-height: 1.4;
  margin-bottom: 10px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.author-info {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 6px;
}

.author-name {
  font-size: 12px;
  color: #666666;
}

.like-info {
  display: flex;
  align-items: center;
}

.like-count {
  font-size: 12px;
  color: #999999;
  margin-left: 4px;
}
</style>

 components/footer/customer-footer.vue

@@ -62,7 +62,7 @@
            },
            {
                "text": "社区",
                "pagePath": '/pages/user/supplier-user'
                "pagePath": '/sub-pages/community/index'
            },
            {
                "text": "我的",

 components/setting/setting-popup.vue

@@ -115,6 +115,10 @@
        uni.navigateTo({
          url: '/pages/cart/index'
        });
      } else if (item.title === '设置') {
        uni.navigateTo({
          url: '/sub-pages/mine/settings'
        });
      } else {
        // 通用跳转
        uni.navigateTo({

 mixin/mixin - 副本.js

对比新文件
@@ -0,0 +1,279 @@
import {
    mapState
} from 'vuex'
import store from "../store";

// import environments from '@/environments'

const mixinsCommon = {
    computed: {
        ...mapState({
            hasLogin: state => {
                // console.log('computed hasLogin',state.hasLogin,state)
                return state.hasLogin || false
            },
            selftype: state => {
                return (state.currentInfo || {}).type || ''
            },
            currentInfo: state => {
                return state.currentInfo || {}
            },
            cache_address: state => {
                return state.cache_address || {}
            },
            cache_user: state => {
                return state.currentInfo || {}
            },
            sign: state => {
                return state.sign || {}
            },
            // currentEnId: state=>{
            //     // console.log('currentEnId',state.currentInfo.enId,state.currentInfo)
            //     return state.currentInfo.enId || ''
            // }
        }),
    },
    data() {
        return {
            list: [],
            query: {},
            page: {
                size: 10,
                current: 1,
                total: 0,
            },
            style: {
                'color': '#fff'
            },
            listApi: '',
            // regUserName: '用户-' + this.getRandomName(Math.floor(Math.random() * (6 - 2) + 3)),
            // regAvatarUrl: 'https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png',
            regUserName: '',
            regAvatarUrl: '',
        }
    },
    methods: {
        copyTxt(txt) {
            uni.setClipboardData({
                data: txt, //要被复制的内容
                success: () => { //复制成功的回调函数
                    uni.showToast({ //提示
                        title: '复制成功'
                    })
                }
            })
        },
        onChooseavatar(e) {
            let self = this;
            let {
                avatarUrl
            } = e.detail;
            this.regAvatarUrl = avatarUrl
            console.log('avatarUrl', this.regAvatarUrl)
        },
        onBindblur(e) {
            this.regUserName = e.detail.value; // 获取微信昵称
        },
        onBindinput(e) {
            this.regUserName = e.detail.value; // 获取微信昵称
        },

        handleContact(e) {
            console.log(e.detail.path)
            console.log(e.detail.query)
        },



        previewImg(url) {
            if (url) {
                uni.previewImage({
                    urls: [url]
                })
            }
        },
        checkFormValues(dto, keys) {
            if (keys) {
                for (var key of keys) {
                    if (!dto[key]) {
                        return false
                    }
                }
            }
            return true
        },
        async refreshList(type = 'get') {
            this.page.current = 1
            await this.getList(type)
        },
        async getList(type = 'get') {
            if (this.listApi) {
                this.$message.showLoading()
                const {
                    data
                } = await this.$http.request(type, this.listApi, {
                    params: {
                        ...this.query,
                        ...this.page
                    },
                    data: {
                        ...this.query,
                        ...this.page
                    }
                })
                if (data) {
                    if (data && Array.isArray(data)) {
                        this.list = data || []
                        this.page.total = data.length || 0
                    } else {
                        if (this.page.current === 1) {
                            this.list = data.records || []
                        } else {
                            //根据id去重正常
                            var ids = []
                            var idsMap = {}
                            for (var item of this.list) {
                                ids.push(item.id)
                                if (item.id) {
                                    idsMap[item.id] = item
                                }
                            }
                            var hasnew = false
                            for (var item of data.records) {
                                if (ids.indexOf(item.id) < 0) {
                                    this.list.push(item)
                                } else {
                                    //最好更新一下
                                    idsMap[item.id] = {
                                        ...idsMap[item.id],
                                        ...item, //覆盖了
                                    }
                                    hasnew = true
                                }
                            }
                            if (hasnew) {
                                this.$forceUpdate()
                            }

                        }
                        this.page.total = data.total || 0
                    }

                    if (this.getList_after) {
                        this.getList_after()
                    }
                }
                this.$message.hideLoading()
            }

        },
        async getMore(type = 'get') {
            if (this.page.total > this.page.current * this.page.size) {
                this.page.current += 1
                await this.getList(type)
            }
        },
        backHome() {
            uni.reLaunch({
                url: '/pages/home/home'
            })
        },
        goto(url, check = false) {
            if (check) {
                console.log('currentInfo', this.currentInfo)
                if (!this.currentInfo.id) {
                    this.$message.showToast('请先登陆')
                    return
                }

            }
            uni.navigateTo({
                url
            })
        },
        backpage() {
            // this.$router.go(-1)
            uni.navigateBack()
        }
        // #ifdef APP || H5
        ,
        async appdownload(url, name = '') {
            await this.$message.confirm('确定下载此文件吗')
            let _this = this
            if (url) {
                // var url2 = environments.httpBaseUri + `/api/download/file?fileName=${name}&filePath=` + url
                // uni.downloadFile({
                //     url: url2,
                //     success: (res) => {
                //         if (res.statusCode === 200) {
                //             _this.$message.showToast('下载成功')
                //         } else {
                //             console.log(res)
                //             _this.$message.showToast('下载失败')
                //         }
                //     },
                //     fail: (res) => {
                //         console.log(res)
                //         _this.$message.showToast('下载失败')
                //     }
                // });
                _this.$message.showLoading()

                uni.downloadFile({
                    url: url, //下载地址接口返回
                    success: (data) => {
                        _this.$message.hideLoading()
                        console.log('success', data)
                        if (data.statusCode === 200) {
                            //文件保存到本地
                            uni.saveFile({
                                tempFilePath: data.tempFilePath, //临时路径
                                success: function(res) {
                                    uni.showToast({
                                        icon: 'none',
                                        mask: true,
                                        title: '文件已保存：' + res
                                            .savedFilePath, //保存路径
                                        duration: 2000,
                                    });
                                    setTimeout(() => {
                                        //打开文档查看
                                        uni.openDocument({
                                            filePath: res.savedFilePath,
                                            success: function(res) {
                                                // console.log('打开文档成功');
                                            }
                                        });
                                    }, 2000)
                                },
                                fail: (err) => {

                                    console.log(err);
                                    uni.showToast({
                                        icon: 'none',
                                        mask: true,
                                        title: '下载成功保存失败',
                                    });
                                },
                            });
                        }
                    },
                    fail: (err) => {
                        _this.$message.hideLoading()

                        console.log(err);
                        uni.showToast({
                            icon: 'none',
                            mask: true,
                            title: '失败请重新下载',
                        });
                    },
                });
            }
        }
        // #endif


    }
}
export default mixinsCommon

 mixin/mixin.js

@@ -35,7 +35,7 @@
    },
    data() {
        return {
            list: [],
            baseList: [],
            query: {},
            page: {
                size: 10,
@@ -45,7 +45,7 @@
            style: {
                'color': '#fff'
            },
            listApi: '',
            baseListApi: '',
            // regUserName: '用户-' + this.getRandomName(Math.floor(Math.random() * (6 - 2) + 3)),
            // regAvatarUrl: 'https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png',
            regUserName: '',
@@ -107,11 +107,11 @@
            await this.getList(type)
        },
        async getList(type = 'get') {
            if (this.listApi) {
            if (this.baseListApi) {
                this.$message.showLoading()
                const {
                    data
                } = await this.$http.request(type, this.listApi, {
                } = await this.$http.request(type, this.baseListApi, {
                    params: {
                        ...this.query,
                        ...this.page
@@ -123,16 +123,16 @@
                })
                if (data) {
                    if (data && Array.isArray(data)) {
                        this.list = data || []
                        this.baseList = data || []
                        this.page.total = data.length || 0
                    } else {
                        if (this.page.current === 1) {
                            this.list = data.records || []
                            this.baseList = data.records || []
                        } else {
                            //根据id去重正常
                            var ids = []
                            var idsMap = {}
                            for (var item of this.list) {
                            for (var item of this.baseList) {
                                ids.push(item.id)
                                if (item.id) {
                                    idsMap[item.id] = item
@@ -141,7 +141,7 @@
                            var hasnew = false
                            for (var item of data.records) {
                                if (ids.indexOf(item.id) < 0) {
                                    this.list.push(item)
                                    this.baseList.push(item)
                                } else {
                                    //最好更新一下
                                    idsMap[item.id] = {

 pages.json

@@ -58,6 +58,18 @@
            ]
        },
        {
            "root": "sub-pages/community",
            "pages": [
                {
                    "path": "index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": true
                    }
                }
            ]
        }
        ,{
            "root": "sub-pages/mine",
            "pages": [
                {
@@ -67,6 +79,13 @@
                        "enablePullDownRefresh": true
                    }
                }
                ,{
                    "path": "settings",
                    "style": {
                        "navigationBarTitleText": "设置",
                        "enablePullDownRefresh": true
                    }
                }
            ]
        }
    ],

 static/common/umbrella.png

 sub-pages/community/index.vue

对比新文件
@@ -0,0 +1,403 @@
<template>
  <view class="content">
    <!-- 顶部固定导航栏 -->
    <view class="fixed-top">
      <u-navbar :is-fixed="true" :is-back="false" title-color="#333333" :background="{ background: '#FFFFFF' }">
        <view class="navbar-content" slot="left">
          <u-icon name="list" size="28" color="#333333"></u-icon>
        </view>
        <view class="navbar-content" slot="center">
          <view class="tab-bar">
            <view class="tab-item" :class="{ active: currentTab === 'about' }" @click="switchTab('about')">关注</view>
            <view class="tab-item" :class="{ active: currentTab === 'discover' }" @click="switchTab('discover')">发现
            </view>
            <view class="tab-item" :class="{ active: currentTab === 'suzhou' }" @click="switchTab('suzhou')">苏州</view>
          </view>
        </view>
        <view class="navbar-content" slot="right">
          <u-icon name="search" size="28" color="#333333"></u-icon>
        </view>
      </u-navbar>
    </view>

    <!-- 标签页区域 -->
    <view class="tab-scroll-area">
      <scroll-view scroll-x class="tab-scroll" :scroll-left="scrollLeft">
        <view class="tab-scroll-box">
          <view class="tab-scroll-item" v-for="(item, index) in tabList" :key="index"
            :class="{ active: currentScrollTab === item.id }" @click="switchScrollTab(item.id)">
            {{ item.name }}
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 内容区域 - 瀑布流布局 -->
    <view class="content-area">
      <waterfall ref="helangWaterfall" :col="2">
        <template v-slot:default="{ list, colWidth }">
          <waterfall-col v-for="(col, colIndex) in list" :key="colIndex" :colWidth="colWidth">
            <waterfall-item v-for="(item, itemIndex) in col" :key="item.__waterfall_renderId" :colIndex="colIndex"
              :reportHeightTime="item.__waterfall_reportHeightTime" @height="onRenderHeight">
              <!-- 自定义内容 -->
              <view class="card" @click="handleDetailClick(item)">
                <image :src="item.imgurl" mode="widthFix" class="card-image" style="width: 100%;" />
                <view class="card-title">
                  <u--text :lines="2" size="14px" :text="item.title" :bold="true"></u--text>
                </view>
                <view class="card-footer">
                  <view class="user-info">
                    <u-avatar :src="item.avatar" size="40" shape="circle" />
                    <view class="user-text">
                      <text class="nickname">{{ item.username }}</text>
                      <!-- <text class="date">{{ item.date }}</text> -->
                    </view>
                  </view>
                  <view class="opera-info">
                    <u-icon name="heart" size="30" color="#999" />
                    <text>{{ item.likes }}</text>
                  </view>
                </view>
              </view>
            </waterfall-item>
          </waterfall-col>
        </template>
      </waterfall>

    </view>
    <common-footer flg="0"></common-footer>
  </view>
</template>

<script>
import Waterfall from '@/uni_modules/helang-waterfall/components/waterfall/waterfall-list';
import WaterfallCol from '@/uni_modules/helang-waterfall/components/waterfall/waterfall-col';
import WaterfallItem from '@/uni_modules/helang-waterfall/components/waterfall/waterfall-item';
export default {
  components: {
    Waterfall,
    WaterfallCol,
    WaterfallItem,
  },
  data() {

    return {
      currentTab: 'discover', // 顶部主导航当前选中项
      currentScrollTab: 'recommend', // 横向滚动标签当前选中项
      scrollLeft: 0,
      tabList: [
        { id: 'recommend', name: '推荐' },
        { id: 'straight', name: '直播' },
        { id: 'short', name: '短剧' },
        { id: 'food', name: '美食' },
        { id: 'travel', name: '穿搭' },
        { id: 'beauty', name: '美甲' },
        { id: 'more', name: '更多' }
      ],
      flowList: [],
      items: [
        {
          id: 1,
          title: 'iPhone 高清全屏壁纸，划走就后悔',
          url: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
          imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
          username: '草莓喵喵',
          avatar: '/static/avatar1.jpg',
          date: '2024-12-01',
          likes: 1397,
        },
        {
          id: 2,
          title: '高清 4K 全屏手机壁纸 #高质量壁纸高清 4K 全屏手机壁纸 #高质量壁纸高清 4K 全屏手机壁纸 #高质量壁纸',
          url: 'https://img.yzcdn.cn/vant/cat.jpeg',
          imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
          username: '4K wallpaper',
          avatar: '/static/avatar2.jpg',
          date: '02-24',
          likes: 167,
        },
        {
          id: 3,
          title: 'iPhone 实况动态壁纸 #动态壁纸',
          url: '/static/wallpaper3.jpg',
          imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
          username: '图墙精选',
          avatar: '/static/avatar3.jpg',
          date: '03-01',
          likes: 980,
        },
        {
          id: 4,
          title: '高清小清新壁纸 浪漫的人都有自己的海',
          url: '/static/wallpaper4.jpg',
          imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
          username: 'wallpaper',
          avatar: '/static/avatar4.jpg',
          date: '04-10',
          likes: 456,
        }
      ],
    }
  },
  onLoad() {
    // 模拟数据
    this.loadData()
  },
  onShow() {
    console.log("aaaaa")
    this.$refs.helangWaterfall.render(this.items, true);
  },
  methods: {
    // 切换顶部主导航
    switchTab(tab) {
      this.currentTab = tab
    },
    // 切换横向滚动标签
    switchScrollTab(id) {
      this.currentScrollTab = id
      // 可以在这里根据选中的标签加载不同的数据
      this.loadData()
    },
    onRenderHeight({ colIndex, height, reportHeightTimeChange }) {
      console.log("height:",height)
      this.$refs.helangWaterfall.reportHeight({
        colIndex,
        height,
        reportHeightTimeChange
      })
    },
    // 加载瀑布流数据
    loadData() {
      // 模拟数据
      const mockData = [
        {
          id: 1,
          image: '/static/travel1.jpg',
          title: '我们是旅行社！不是许愿池',
          desc: '池油！😊',
          author: {
            avatar: '/static/avatar1.jpg',
            name: '小鹿'
          },
          likes: 66,
          hasVideo: false
        },
        {
          id: 2,
          image: '/static/travel2.jpg',
          title: '不丑和好漂亮区别有多大...',
          desc: '大家都不好好穿...偷偷私藏争气',
          author: {
            avatar: '/static/avatar2.jpg',
            name: 'ZUU'
          },
          likes: 2278,
          hasVideo: true
        },
        {
          id: 3,
          image: '/static/travel3.jpg',
          title: '新疆旅游车上非法改装车辆太过分了',
          desc: '请你记住我的样子',
          author: {
            avatar: '/static/avatar3.jpg',
            name: '旅行达人'
          },
          likes: 158,
          hasVideo: true
        },
        {
          id: 4,
          image: '/static/travel4.jpg',
          title: '天塌了！？江苏国补结束了？？！',
          desc: '',
          author: {
            avatar: '/static/avatar4.jpg',
            name: '旅行家'
          },
          likes: 320,
          hasVideo: false
        }
      ]

      // 将数据添加到瀑布流
      // this.$refs.uWaterfall.clear()
      // setTimeout(() => {
      //   mockData.forEach(item => {
      //     this.$refs.uWaterfall.add(item)
      //   })
      // }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: 180rpx;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.navbar-content {
  display: flex;
  align-items: center;
  height: 44px;
}

.tab-bar {
  display: flex;
  justify-content: center;
  width: 200px;
}

.tab-item {
  padding: 0 15px;
  font-size: 16px;
  color: #666;
  position: relative;

  &.active {
    color: #333;
    font-weight: bold;

    &::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 2px;
      background-color: #333;
    }
  }
}

.tab-scroll-area {
  background-color: #fff;
  position: fixed;
  top: 44px;
  left: 0;
  width: 100%;
  z-index: 998;
  border-bottom: 1px solid #f5f5f5;
}

.tab-scroll {
  width: 100%;
  white-space: nowrap;
  height: 46px;
}

.tab-scroll-box {
  display: flex;
  height: 46px;
  align-items: center;
  padding: 0 10px;
}

.tab-scroll-item {
  display: inline-block;
  padding: 0 15px;
  font-size: 14px;
  color: #666;
  height: 46px;
  line-height: 46px;

  &.active {
    color: #333;
    font-weight: bold;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 2px;
      background-color: #fa3534;
    }
  }
}

.content-area {
  padding: 10px;
  margin-top: 46px; // 为标签页留出空间
}

.waterfall-item {
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
</style>
<style lang="scss">
.card {
  border-radius: 10rpx;
  background-color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  color: rgb(51, 51, 51);
  // border: 1rpx solid rgb(51, 51, 51);

  .card-image {
    border-radius: inherit;
  }

  .card-title {
    padding: 10rpx;
    // font-size: 14px;
    font-weight: 500;

  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx;
  }

  .user-info {
    display: flex;
    align-items: center;

    .user-text {
      font-size: 18rpx;
      line-height: 14px;
      margin-left: 10rpx;

      .nickname {
        font-weight: bold;
        display: block;
        color: #646464;
      }

      .date {
        font-size: 12px;
        color: #aaa;
        margin-top: 10rpx;
      }
    }
  }

  .opera-info {
    display: flex;
    align-items: center;

    text {
      margin-left: 10rpx;
      font-size: 12px;
    }
  }
}
</style>

 sub-pages/film-list/film-detail.vue

@@ -86,22 +86,6 @@
            </view>

        </view>
        <!-- <u-popup :show="commentShow" mode="bottom" @close="close" @open="open" closeOnClickOverlay="true">
            <view class="comment-popup">
                <u--textarea v-model="commentContent" placeholder="请输入内容" count focus="true"></u--textarea>
                <view class="comment-btn-view">
                    <view class="comment-btn-icon">
                        <u-icon name=" " size="40" color="#999999" label="@" @click="close"></u-icon>
                        <u-icon name="/static/common/smile.png" size="40" color="#999999" @click="close"></u-icon>
                        <u-icon name="photo" size="40" color="#999999" @click="close"></u-icon>
                        <u-icon name="plus-circle" size="40" color="#999999" @click="close"></u-icon>
                    </view>
                    <view class="comment-btn">
                        <u-button type="error" shape="circle" text="发送" size="mini" disabled></u-button>
                    </view>
                </view>
            </view>
        </u-popup> -->
        <comment-popup v-model="commentShow" />
    </view>
</template>

 sub-pages/film-list/film-list.vue

@@ -53,7 +53,6 @@
import WaterfallCol from '@/uni_modules/helang-waterfall/components/waterfall/waterfall-col';
import WaterfallItem from '@/uni_modules/helang-waterfall/components/waterfall/waterfall-item';


export default {
  components: {
    Waterfall,
@@ -133,12 +132,19 @@
    console.log("theme", uni.getStorageSync('theme'))
    const theme = uni.getStorageSync('theme') || 'light'
    this.theme = theme

    this.$refs.helangWaterfall.render(this.items, true);
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.helangWaterfall?.render(this.items, true);
    });
  },
  onUnload() {
    if (this.$refs.helangWaterfall?.clear) {
      this.$refs.helangWaterfall.clear();
    }
  },
  methods: {
    onSearch(value) {
      debugger;
      uni.showToast({
        title: `搜索：${value}`,
        icon: 'none'
@@ -158,12 +164,14 @@

    },
    onRenderHeight({ colIndex, height, reportHeightTimeChange }) {
      console.log("height:", height)
      this.$refs.helangWaterfall.reportHeight({
        colIndex,
        height,
        reportHeightTimeChange
      })
    },

  }
}
</script>

 sub-pages/film-list/film-official-detail.vue

@@ -1,66 +1,83 @@
<template>
  <view class="container">
  <view>
    <view class="container">
      <view class="movie-title">
        <view><u-text text="破.地狱" size="30"></u-text></view>
        <view><u-text text="The Last Dance" size="20"></u-text></view>
      </view>

    <view class="movie-title">
      <view><u-text text="破.地狱" size="30"></u-text></view>
      <view><u-text text="The Last Dance" size="20"></u-text></view>
    </view>
      <scroll-view scroll-y class="content">
        <view class="movie-info">

    <scroll-view scroll-y class="content">
      <view class="movie-info">

        <image class="movie-poster" src="https://ai-public.mastergo.com/ai/img_res/1ef11f7a594da679d35cddf809a63ec7.jpg"
          mode="aspectFill" />
        <view class="movie-details">
          <view class="scene-number">
            <text>片场</text>
            <text>17</text>
          <image class="movie-poster"
            src="https://ai-public.mastergo.com/ai/img_res/1ef11f7a594da679d35cddf809a63ec7.jpg" mode="aspectFill" />
          <view class="movie-details">
            <view class="scene-number">
              <text>片场</text>
              <text>17</text>
            </view>
            <view class="movie-tags">
              <text class="tag">剧情/家庭</text>
              <text class="tag">中国香港</text>
              <text class="tag">2024</text>
            </view>
            <u-button text="more" size="normal" icon="play-right-fill" plain type="info"></u-button>
          </view>
          <view class="movie-tags">
            <text class="tag">剧情/家庭</text>
            <text class="tag">中国香港</text>
            <text class="tag">2024</text>
        </view>

        <view class="movie-desc">
          <text class="desc-text">聚焦香港殡葬文化下的人际关系和生死观念，多数取景地都在殡仪服务扎堆的红磡。</text>
          <text class="desc-text">主要拍摄的殡仪馆外景是万国殡仪馆，不过根据电影官方发布的制作花絮，殡仪馆内景大厅是另外搭建的。</text>
          <text
            class="desc-text">道生接手的"长生店"是位于九龙城福佬村道的百年老字号合昌殡仪，"Hello文"吃宵夜的地方在九龙湾的康乐茶居，火化延姐的地方在葵涌火葬场，甄小姐存户的东华义庄是香港目前唯一仍在运营的义庄。</text>
        </view>

        <view class="map-container">
          <map style="width: 100%; height: 500rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"
            scale="16" show-location></map>
        </view>
        <view>
          <u-tabs v-if="tabList.length" :list="tabList" :current="current" @change="onTabChange" @click="onTabChange"
            lineColor="#2979ff" activeStyle="color: #2979ff">
            <view slot="left" style="padding-left: 4px;" @tap="">
              <u-icon name="/static/common/order.png" size="40" bold></u-icon>
            </view>
            <view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
              <u-icon name="list" size="40" bold></u-icon>
            </view>
          </u-tabs>
          <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">
            <swiper-item v-for="(item, index) in tabList" :key="index" class="swiper-item">
              <film-official-timeline></film-official-timeline>
            </swiper-item>
          </swiper>
        </view>
        <view class="comment">

          <comment-item avatar="https://img.yzcdn.cn/vant/cat.jpeg" nickname="图墙精选" :isAuthor="true"
            content="如果路线里全是常规景区，没一个特殊的点位，那就是普通团，除非他的住宿安排的很好。。要不然和普通团没任何区别，都是去景区挤，然后上车赶路" :images="urls2" date="2天前"
            address="湖北" :likes="30" @reply="showCommentLayer" />
        </view>
      </scroll-view>

      <view class="back-to-top" @click="scrollToTop">
        <u-icon name="arrow-up" size="24" color="#666666" />
      </view>

      <view class="comment-box">

        <view class="input-row">
          <view class="comment-input" @click="showCommentLayer">
            <u-text size="12px" text="说点什么......" margin="0rpx 0rpx 0rpx 20rpx" color="#B9B9B9"
              confirmType="send"></u-text>
          </view>
          <u-button text="more" size="normal" icon="play-right-fill" plain type="info"></u-button>
          <u-icon name="heart" size="60" color="#B9B9B9" label="11"></u-icon>
          <u-icon name="star" size="60" color="#B9B9B9" label="22"></u-icon>
          <u-icon name="chat" size="60" color="#B9B9B9" label="33"></u-icon>
        </view>
      </view>

      <view class="movie-desc">
        <text class="desc-text">聚焦香港殡葬文化下的人际关系和生死观念，多数取景地都在殡仪服务扎堆的红磡。</text>
        <text class="desc-text">主要拍摄的殡仪馆外景是万国殡仪馆，不过根据电影官方发布的制作花絮，殡仪馆内景大厅是另外搭建的。</text>
        <text
          class="desc-text">道生接手的"长生店"是位于九龙城福佬村道的百年老字号合昌殡仪，"Hello文"吃宵夜的地方在九龙湾的康乐茶居，火化延姐的地方在葵涌火葬场，甄小姐存户的东华义庄是香港目前唯一仍在运营的义庄。</text>
      </view>

      <view class="map-container">
        <map style="width: 100%; height: 500rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"
          scale="16" show-location></map>
      </view>
      <view>
        <u-tabs v-if="tabList.length" :list="tabList" :current="current" @change="onTabChange" @click="onTabChange"
          lineColor="#2979ff" activeStyle="color: #2979ff">
          <view slot="left" style="padding-left: 4px;" @tap="">
            <u-icon name="/static/common/order.png" size="40" bold></u-icon>
          </view>
          <view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
            <u-icon name="list" size="40" bold></u-icon>
          </view>
        </u-tabs>
        <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">
          <swiper-item v-for="(item, index) in tabList" :key="index" class="swiper-item">
            <film-official-timeline></film-official-timeline>
          </swiper-item>
        </swiper>
      </view>

      <view class="comment-section">
        <u-button class="comment-btn" type="primary" plain>我要发言</u-button>
      </view>
    </scroll-view>

    <view class="back-to-top" @click="scrollToTop">
      <u-icon name="arrow-up" size="24" color="#666666" />
    </view>
    <comment-popup v-model="commentShow" />
  </view>
</template>
<script>
@@ -114,6 +131,8 @@
        { name: '距离' },
        { name: '城市' },
      ],

      commentShow: false,
    };
  },
  methods: {
@@ -131,6 +150,9 @@
    },
    onSwiperChange(e) {
      this.current = e.detail.current; // 同步 tabs
    },
    showCommentLayer(e) {
      this.commentShow = true
    },
  }
};
@@ -270,4 +292,43 @@
    /* 允许滚动内容 */
  }
}
</style>
<style lang="scss" scoped>
.comment-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
  height: 100rpx;

  .input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80%;

    .comment-input {
      width: 300rpx;
      background-color: #F4F4F6;
      border-radius: 50rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
    }
  }

  .flex-input {
    flex: 1;
    margin-right: 10rpx;
  }
}

.comment{
  margin: 10rpx;
  margin-bottom: 180rpx;
}
</style>

 sub-pages/mine/index copy 2.vue

文件已删除

 sub-pages/mine/index copy.vue

文件已删除

 sub-pages/mine/settings.vue

对比新文件
@@ -0,0 +1,152 @@
<template>
  <view class="settings-page">
    <!-- 设置列表 -->
    <view class="section" v-for="(section, index) in menuList" :key="index">
      <view class="cell-group">
        <u-cell-group :border="false">
          <u-cell v-for="(item, i) in section" :key="i" :title="item.title" :icon="item.icon" isLink :value="item.value"
            :border="true" @click="onItemClick(item)">
            <u-icon slot="icon" size="32" :name="item.icon"></u-icon>
          </u-cell>
        </u-cell-group>
      </view>
    </view>

    <!-- 底部操作 -->
    <view class="bottom-actions">
      <u-cell-group :border="false" class="cell-group">
        <u-cell @click="onItemClick('switch')" :border="true">
          <template #title>
            <view class="center-cell-text">切换账号</view>
          </template>
        </u-cell>

        <u-cell @click="onItemClick('logout')" :border="false">
          <template #title>
            <view class="center-cell-text">退出登录</view>
          </template>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="portotal-actions">
      <view class="action-row">
        <u--text  size="20" :bold="true" text="《个人信息收集清单》"  color="#38516E" />
        <u--text  size="20" :bold="true" text="《第三方信息共享清单》"  color="#38516E" />
      </view>
      <view class="action-row">
        <u--text  size="20" :bold="true" text="《用户服务协议》" color="#38516E" />
        <u--text  size="20" :bold="true" text="《用户隐私政策》" color="#38516E" />
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        [
          { title: '账号与安全', icon: 'account' },
          { title: '通用设置', icon: 'setting' },
          { title: '通知设置', icon: 'bell' },
          { title: '隐私设置', icon: 'lock' }
        ],
        [
          { title: '存储空间', icon: 'trash', value: '1.12 GB' },
          { title: '内容偏好调节', icon: 'file-text' },
          { title: '收货地址', icon: 'map' },
          { title: '添加小组件', icon: 'grid' },
          { title: '未成年人模式', icon: '/static/common/umbrella.png', value: '未开启' }
        ],
        [
          { title: '帮助与客服', icon: 'kefu-ermai' },
          { title: '关于小红书', icon: 'info-circle' }
        ]
      ]
    };
  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    onItemClick(item) {
      uni.showToast({
        title: `点击了 ${item.title}`,
        icon: 'none'
      });
    },
    onSwitchAccount() {
      uni.showToast({
        title: '切换账号',
        icon: 'none'
      });
    },
    onLogout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '已退出登录', icon: 'success' });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.settings-page {
  min-height: 100vh;
  margin: 10rpx;

  .section {
    margin-top: 20rpx;

    .cell-group {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
    }
  }

  .bottom-actions {
    margin-top: 30rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    border-radius: 10px;
    overflow: hidden;
  }

  .center-cell-text {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    color: #333;
  }

  .portotal-actions {
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
    /* 每行之间间距 */
  }

  .action-row {
    display: flex;
    justify-content: center;
    gap: 40rpx;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

}
</style>