From 14764dd7679369a650ad1d60be62aacc863755a1 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期四, 22 五月 2025 16:29:01 +0800
Subject: [PATCH] 3
---
mixin/mixin - 副本.js | 279 ++++++++++
sub-pages/mine/settings.vue | 152 +++++
components/card/card-item.vue | 130 ++++
sub-pages/community/index.vue | 403 ++++++++++++++
sub-pages/film-list/film-official-detail.vue | 171 ++++--
pages.json | 19
mixin/mixin.js | 16
components/setting/setting-popup.vue | 4
/dev/null | 397 --------------
components/footer/customer-footer.vue | 2
sub-pages/film-list/film-detail.vue | 16
sub-pages/film-list/film-list.vue | 16
static/common/umbrella.png | 0
13 files changed, 1,124 insertions(+), 481 deletions(-)
diff --git a/components/card/card-item.vue b/components/card/card-item.vue
new file mode 100644
index 0000000..d9dea6c
--- /dev/null
+++ b/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>
diff --git a/components/footer/customer-footer.vue b/components/footer/customer-footer.vue
index 16688bc..893dd3a 100644
--- a/components/footer/customer-footer.vue
+++ b/components/footer/customer-footer.vue
@@ -62,7 +62,7 @@
},
{
"text": "社区",
- "pagePath": '/pages/user/supplier-user'
+ "pagePath": '/sub-pages/community/index'
},
{
"text": "我的",
diff --git a/components/setting/setting-popup.vue b/components/setting/setting-popup.vue
index cb2a3c4..f9f1246 100644
--- a/components/setting/setting-popup.vue
+++ b/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({
diff --git "a/mixin/mixin - \345\211\257\346\234\254.js" "b/mixin/mixin - \345\211\257\346\234\254.js"
new file mode 100644
index 0000000..ad5ad6e
--- /dev/null
+++ "b/mixin/mixin - \345\211\257\346\234\254.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
\ No newline at end of file
diff --git a/mixin/mixin.js b/mixin/mixin.js
index ad5ad6e..2fae82f 100644
--- a/mixin/mixin.js
+++ b/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] = {
diff --git a/pages.json b/pages.json
index 43a9597..0c3cd2f 100644
--- a/pages.json
+++ b/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
+ }
+ }
]
}
],
diff --git a/static/common/umbrella.png b/static/common/umbrella.png
new file mode 100644
index 0000000..2dd3100
--- /dev/null
+++ b/static/common/umbrella.png
Binary files differ
diff --git a/sub-pages/community/index.vue b/sub-pages/community/index.vue
new file mode 100644
index 0000000..d87f2e9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/sub-pages/film-list/film-detail.vue b/sub-pages/film-list/film-detail.vue
index 14c12fe..ca47aba 100644
--- a/sub-pages/film-list/film-detail.vue
+++ b/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>
diff --git a/sub-pages/film-list/film-list.vue b/sub-pages/film-list/film-list.vue
index 741f665..6baa20d 100644
--- a/sub-pages/film-list/film-list.vue
+++ b/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>
diff --git a/sub-pages/film-list/film-official-detail.vue b/sub-pages/film-list/film-official-detail.vue
index 8531ea6..1561de8 100644
--- a/sub-pages/film-list/film-official-detail.vue
+++ b/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>
\ No newline at end of file
diff --git a/sub-pages/mine/index copy 2.vue b/sub-pages/mine/index copy 2.vue
deleted file mode 100644
index e6a7c3d..0000000
--- a/sub-pages/mine/index copy 2.vue
+++ /dev/null
@@ -1,416 +0,0 @@
-<template>
- <view class="page">
- <view class="profile-section" :style="backgroundStyle">
-
- <view class="top-bar">
- <u-icon name="list" size="60" color="#D0E1E9" />
- <view class="top-bar-right">
- <!-- <u-icon name="edit-pen" size="60" color="#ffffff" class="icon-margin" /> -->
- <u-sticky><u-icon name="share" size="60" color="#D0E1E9" /></u-sticky>
- </view>
- </view>
-
- <view class="profile-content">
-
- <view class="profile-header">
- <view class="avatar-container">
- <image class="avatar"
- src="https://ai-public.mastergo.com/ai/img_res/e8ae645c666c247b895b488e60b048f5.jpg"
- mode="aspectFill" />
- <view class="add-icon">
- <u-icon name="plus" size="20" color="#333" />
- </view>
- </view>
- <view class="user-info">
- <view class="username">小红薯 6786F040</view>
- <view class="user-id">小红书号：95619601810</view>
- <view class="location">IP 属地：江苏</view>
- </view>
- </view>
-
- <view class="edit-profile">点击这里，填写简介</view>
-
- <view class="stats">
- <view class="stat-row">
- <view class="stat-item">
- <text class="number">0</text>
- <text class="label">关注</text>
- </view>
- <view class="stat-item">
- <text class="number">0</text>
- <text class="label">粉丝</text>
- </view>
- <view class="stat-item">
- <text class="number">1</text>
- <text class="label">获赞与收藏</text>
- </view>
- </view>
- <view class="action-buttons">
- <u-button text="编辑资料" size="mini" type="info" plain hairline
- :custom-style="{ backgroundColor: 'transparent', borderColor: '#B1ABA9' }"></u-button>
- <u-icon name="setting" size="40"></u-icon>
- </view>
- </view>
- </view>
- <scroll-view class="function-cards" scroll-x="true" show-scrollbar="false">
- <view class="card">
- <view class="card-content">
- <text class="card-title">购物车</text>
- <text class="card-subtitle">查看推荐好物</text>
- </view>
- </view>
- <view class="card">
- <view class="card-content">
- <text class="card-title">创作灵感</text>
- <text class="card-subtitle">学创作找灵感</text>
- </view>
- </view>
- <view class="card">
- <view class="card-content">
- <text class="card-title">浏览记录</text>
- <text class="card-subtitle">看过的笔记</text>
- </view>
- </view>
- <view class="card">
- <view class="card-content">
- <text class="card-title">浏览记录</text>
- <text class="card-subtitle">看过的笔记</text>
- </view>
- </view>
- </scroll-view>
- </view>
-
-
- <view class="tab-section">
- <u-sticky>
- <u-tabs :list="tabList" :current="current" @change="onTabChange" lineColor="#2979ff"
- activeStyle="color: #2979ff"></u-tabs>
- </u-sticky>
- <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">
- <swiper-item v-for="(item, index) in tabList" :key="index">
- <view class="empty-state">
- <image class="empty-icon"
- src="https://ai-public.mastergo.com/ai/img_res/fc3cb775274ef0f5e58ac01687a9c121.jpg"
- mode="aspectFit" />
- <text class="empty-text">快去发布你的笔记吧</text>
- <u-button class="publish-btn" size="mini" type="warning" shape="circle">去发布</u-button>
- </view>
- </swiper-item>
- </swiper>
- </view>
-
-
- <common-footer flg="0"></common-footer>
- </view>
-</template>
-<script>
-export default {
- data() {
- return {
- backgroundUrl2: 'https://ai-public.mastergo.com/ai/img_res/25f5105167f00aff148acc9bb83aed54.jpg', // 可能是动态获取的图片 URL
- backgroundUrl: '',
- current: 0,
- tabList: [
- { name: '笔记' },
- { name: '收藏' },
- { name: '赞过' },
- ],
- }
- },
-
- computed: {
- backgroundStyle() {
- return this.backgroundUrl
- ? `background: url(${this.backgroundUrl}) center center / cover no-repeat;`
- : 'background-color: #1e1e1e;';
- }
- },
- methods: {
- getBackgroundStyle() {
- if (this.backgroundUrl) {
- return `background: url(${this.backgroundUrl}) center center / cover no-repeat;`;
- } else {
- return 'background-color: #f5f5f5;';
- }
- },
- onTabChange(index) {
- this.current = index; // 切换 swiper 面板
- },
- onSwiperChange(e) {
- this.current = e.detail.current; // 同步 tabs
- },
- },
-}
-
-</script>
-
-<style>
-.page {
- height: 100vh;
- overflow-y: auto;
-}
-
-.top-bar {
- position: relative;
- z-index: 3;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 24rpx 32rpx;
-}
-
-.top-bar-right {
- display: flex;
- align-items: center;
-}
-
-.icon-margin {
- margin-right: 32rpx;
-}
-
-.profile-section {
- position: relative;
- /* height: 680rpx; */
-}
-
-.bg-image {
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 1;
-}
-
-.profile-content {
- position: relative;
- z-index: 2;
- padding: 30rpx;
-}
-
-.profile-header {
- display: flex;
- align-items: flex-start;
- margin-bottom: 24rpx;
-}
-
-.avatar-container {
- position: relative;
- margin-right: 24rpx;
-}
-
-.avatar {
- width: 120rpx;
- height: 120rpx;
- border-radius: 60rpx;
- border: 2px solid #ffffff;
-}
-
-.add-icon {
- position: absolute;
- right: -8rpx;
- bottom: -8rpx;
- width: 40rpx;
- height: 40rpx;
- background-color: #FFE411;
- border-radius: 20rpx;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.user-info {
- flex: 1;
-}
-
-.username {
- font-size: 30rpx;
- color: #FCFFFE;
- font-weight: bold;
- margin-bottom: 8rpx;
-}
-
-.user-id,
-.location {
- font-size: 26rpx;
- color: #666666;
- margin-bottom: 4rpx;
-}
-
-.edit-profile {
- color: #999999;
- font-size: 26rpx;
- margin-bottom: 20rpx;
-}
-
-.stats {
- display: flex;
- /* margin-bottom: 20rpx; */
- align-items: center;
- justify-content: space-between;
-}
-
-.stat-row {
- display: flex;
-}
-
-.stat-item {
- margin-right: 48rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.stat-item:last-child {
- margin-right: auto;
-}
-
-.number {
- font-size: 30rpx;
- color: #A19B99;
- font-weight: bold;
- margin-bottom: 4rpx;
-}
-
-.label {
- font-size: 24rpx;
- color: #B1ABA9;
-}
-
-.action-buttons {
- display: flex;
- gap: 16rpx;
-}
-
-.edit-btn {
- padding: 0 24rpx !important;
- background-color: #f5f5f5 !important;
- color: #333333 !important;
- border: none !important;
-}
-
-.settings-btn {
- width: 80rpx !important;
- background-color: #f5f5f5 !important;
- color: #333333 !important;
- border: none !important;
- padding: 0 !important;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.function-cards {
- /* padding: 32rpx 0; */
- white-space: nowrap;
- overflow: auto;
- padding-bottom: 20rpx;
-}
-
-.card {
- display: inline-block;
- width: 180rpx;
- height: 80rpx;
- margin-left: 20rpx;
- background-color: rgba(60, 60, 60, 0.4);
- /* 灰色 + 20% 透明度 */
- border-radius: 16rpx;
- padding: 10rpx;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-
-.card:last-child {
- margin-right: 24rpx;
-}
-
-.card-content {
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-
-.card-title {
- font-size: 30rpx;
- color: #E7E1DF;
- font-weight: bold;
-}
-
-.card-subtitle {
- font-size: 20rpx;
- color: #BEBBB8;
-}
-
-.tab-section {
- padding: 0 32rpx;
-}
-
-.tab-header {
- display: flex;
- justify-content: space-between;
- margin-bottom: 48rpx;
-}
-
-.tab {
- position: relative;
- padding: 16rpx 0;
- display: flex;
- align-items: center;
-}
-
-.tab.active::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 48rpx;
- height: 4rpx;
- background-color: #333;
- border-radius: 2rpx;
-}
-
-.tab-text {
- font-size: 16px;
- color: #333;
- margin-right: 8rpx;
-}
-
-.tab-count {
- font-size: 16px;
- color: #999;
-}
-
-.empty-state {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 48rpx 0;
- min-height: 600rpx;
-}
-
-.empty-icon {
- width: 200rpx;
- height: 200rpx;
- margin-bottom: 24rpx;
-}
-
-.empty-text {
- font-size: 14px;
- color: #999;
- /* margin-bottom: 24rpx; */
-}
-
-.publish-btn {
- background-color: #ffe411 !important;
- color: #333 !important;
- border: none !important;
- border-radius: 32rpx !important;
- padding: 0 48rpx !important;
-}
-</style>
-<style lang="scss" scoped>
-.swiper-box {
- // min-height: 600rpx;
- /* 或 100vh，或具体 px */
- height: 800px;
-}
-</style>
\ No newline at end of file
diff --git a/sub-pages/mine/index copy.vue b/sub-pages/mine/index copy.vue
deleted file mode 100644
index 11c2c89..0000000
--- a/sub-pages/mine/index copy.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<template>
- <view class="page">
- <view class="profile-section" :style="backgroundStyle">
- <view class="top-bar">
- <u-icon name="list" size="60" color="#D0E1E9" />
- <view class="top-bar-right">
- <!-- <u-icon name="edit-pen" size="60" color="#ffffff" class="icon-margin" /> -->
- <u-icon name="share" size="60" color="#D0E1E9" />
- </view>
- </view>
- <view class="profile-content">
-
- <view class="profile-header">
- <view class="avatar-container">
- <image class="avatar"
- src="https://ai-public.mastergo.com/ai/img_res/e8ae645c666c247b895b488e60b048f5.jpg"
- mode="aspectFill" />
- <view class="add-icon">
- <u-icon name="plus" size="20" color="#333" />
- </view>
- </view>
- <view class="user-info">
- <view class="username">小红薯 6786F040</view>
- <view class="user-id">小红书号：95619601810</view>
- <view class="location">IP 属地：江苏</view>
- </view>
- </view>
-
- <view class="edit-profile">点击这里，填写简介</view>
-
- <view class="stats">
- <view class="stat-row">
- <view class="stat-item">
- <text class="number">0</text>
- <text class="label">关注</text>
- </view>
- <view class="stat-item">
- <text class="number">0</text>
- <text class="label">粉丝</text>
- </view>
- <view class="stat-item">
- <text class="number">1</text>
- <text class="label">获赞与收藏</text>
- </view>
- </view>
- <view class="action-buttons">
- <u-button text="编辑资料" size="mini" type="info" plain hairline
- :custom-style="{ backgroundColor: 'transparent', borderColor: '#B1ABA9' }"></u-button>
- <u-icon name="setting"></u-icon>
- </view>
- </view>
- </view>
- <scroll-view class="function-cards" scroll-x="true" show-scrollbar="false">
- <view class="card">
- <view class="card-content">
- <text class="card-title">购物车</text>
- <text class="card-subtitle">查看推荐好物</text>
- </view>
- </view>
- <view class="card">
- <view class="card-content">
- <text class="card-title">创作灵感</text>
- <text class="card-subtitle">学创作找灵感</text>
- </view>
- </view>
- <view class="card">
- <view class="card-content">
- <text class="card-title">浏览记录</text>
- <text class="card-subtitle">看过的笔记</text>
- </view>
- </view>
- <view class="card">
- <view class="card-content">
- <text class="card-title">浏览记录</text>
- <text class="card-subtitle">看过的笔记</text>
- </view>
- </view>
- </scroll-view>
- </view>
-
- <view class="tab-section">
- <view class="tab-header">
- <view class="tab active">
- <text class="tab-text">笔记</text>
- <text class="tab-count">0</text>
- </view>
- <view class="tab">
- <text class="tab-text">收藏</text>
- <text class="tab-count">0</text>
- </view>
- <view class="tab">
- <text class="tab-text">赞过</text>
- <text class="tab-count">0</text>
- </view>
- </view>
-
- <view class="empty-state">
- <image class="empty-icon"
- src="https://ai-public.mastergo.com/ai/img_res/fc3cb775274ef0f5e58ac01687a9c121.jpg"
- mode="aspectFit" />
- <text class="empty-text">快去发布你的笔记吧</text>
- <u-button class="publish-btn" size="mini" type="warning" shape="circle">去发布</u-button>
- </view>
- </view>
-
- <common-footer flg="0"></common-footer>
- </view>
-</template>
-<script>
-export default {
- data() {
- return {
- backgroundUrl2: 'https://ai-public.mastergo.com/ai/img_res/25f5105167f00aff148acc9bb83aed54.jpg', // 可能是动态获取的图片 URL
- backgroundUrl: '',
- }
- },
-
- computed: {
- backgroundStyle() {
- return this.backgroundUrl
- ? `background: url(${this.backgroundUrl}) center center / cover no-repeat;`
- : 'background-color: #1e1e1e;';
- }
- },
- methods: {
- getBackgroundStyle() {
- if (this.backgroundUrl) {
- return `background: url(${this.backgroundUrl}) center center / cover no-repeat;`;
- } else {
- return 'background-color: #f5f5f5;';
- }
- }
- },
-}
-
-</script>
-
-<style>
-.page {
- height: 100%;
- /* background-color: #ffffff; */
-}
-
-.top-bar {
- position: relative;
- z-index: 3;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 24rpx 32rpx;
-}
-
-.top-bar-right {
- display: flex;
- align-items: center;
-}
-
-.icon-margin {
- margin-right: 32rpx;
-}
-
-.profile-section {
- position: relative;
- height: 680rpx;
-}
-
-.bg-image {
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 1;
-}
-
-.profile-content {
- position: relative;
- z-index: 2;
- padding: 30rpx;
-}
-
-.profile-header {
- display: flex;
- align-items: flex-start;
- margin-bottom: 24rpx;
-}
-
-.avatar-container {
- position: relative;
- margin-right: 24rpx;
-}
-
-.avatar {
- width: 120rpx;
- height: 120rpx;
- border-radius: 60rpx;
- border: 2px solid #ffffff;
-}
-
-.add-icon {
- position: absolute;
- right: -8rpx;
- bottom: -8rpx;
- width: 40rpx;
- height: 40rpx;
- background-color: #FFE411;
- border-radius: 20rpx;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.user-info {
- flex: 1;
-}
-
-.username {
- font-size: 30rpx;
- color: #FCFFFE;
- font-weight: bold;
- margin-bottom: 8rpx;
-}
-
-.user-id,
-.location {
- font-size: 26rpx;
- color: #666666;
- margin-bottom: 4rpx;
-}
-
-.edit-profile {
- color: #999999;
- font-size: 26rpx;
- margin-bottom: 32rpx;
-}
-
-.stats {
- display: flex;
- margin-bottom: 32rpx;
- align-items: center;
- justify-content: space-between;
-}
-.stat-row{
- display: flex;
-}
-
-.stat-item {
- margin-right: 48rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.stat-item:last-child {
- margin-right: auto;
-}
-
-.number {
- font-size: 30rpx;
- color: #A19B99;
- font-weight: bold;
- margin-bottom: 4rpx;
-}
-
-.label {
- font-size: 24rpx;
- color: #B1ABA9;
-}
-
-.action-buttons {
- display: flex;
- gap: 16rpx;
-}
-
-.edit-btn {
- padding: 0 24rpx !important;
- background-color: #f5f5f5 !important;
- color: #333333 !important;
- border: none !important;
-}
-
-.settings-btn {
- width: 80rpx !important;
- background-color: #f5f5f5 !important;
- color: #333333 !important;
- border: none !important;
- padding: 0 !important;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.function-cards {
- /* padding: 32rpx 0; */
- white-space: nowrap;
- overflow: auto;
-}
-
-.card {
- display: inline-block;
- width: 180rpx;
- height: 80rpx;
- margin-left: 20rpx;
- background-color: rgba(60, 60, 60, 0.4);
- /* 灰色 + 20% 透明度 */
- border-radius: 16rpx;
- padding: 24rpx;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-
-.card:last-child {
- margin-right: 24rpx;
-}
-
-.card-content {
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-
-.card-title {
- font-size: 30rpx;
- color: #E7E1DF;
- font-weight: bold;
-}
-
-.card-subtitle {
- font-size: 20rpx;
- color: #BEBBB8;
-}
-
-.tab-section {
- padding: 0 32rpx;
-}
-
-.tab-header {
- display: flex;
- justify-content: space-around;
- margin-bottom: 48rpx;
-}
-
-.tab {
- position: relative;
- padding: 16rpx 0;
- display: flex;
- align-items: center;
-}
-
-.tab.active::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 48rpx;
- height: 4rpx;
- background-color: #333;
- border-radius: 2rpx;
-}
-
-.tab-text {
- font-size: 16px;
- color: #333;
- margin-right: 8rpx;
-}
-
-.tab-count {
- font-size: 16px;
- color: #999;
-}
-
-.empty-state {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 48rpx 0;
-}
-
-.empty-icon {
- width: 200rpx;
- height: 200rpx;
- margin-bottom: 24rpx;
-}
-
-.empty-text {
- font-size: 14px;
- color: #999;
- margin-bottom: 24rpx;
-}
-
-.publish-btn {
- background-color: #ffe411 !important;
- color: #333 !important;
- border: none !important;
- border-radius: 32rpx !important;
- padding: 0 48rpx !important;
-}
-</style>
\ No newline at end of file
diff --git a/sub-pages/mine/settings.vue b/sub-pages/mine/settings.vue
new file mode 100644
index 0000000..74cbb5f
--- /dev/null
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3