From c9734741656ce605d3ddc0148c404952cfe236c6 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Fri, 21 Feb 2025 18:25:29 +0800
Subject: [PATCH] add style for tid1867

---
 package.json                                       |   1 +
 src/pages.json                                     |   5 +-
 src/subpackage/community/components/tab_bar.vue    |   2 +-
 src/subpackage/community/pages/index.vue           |  17 +-
 .../community/pages/modules/tab_pages/three.vue    | 187 +++++++++++++++++++++
 vue.config.js                                      |   2 +-
 yarn.lock                                          |   5 +
 7 files changed, 211 insertions(+), 8 deletions(-)
 create mode 100644 src/subpackage/community/pages/modules/tab_pages/three.vue

diff --git a/package.json b/package.json
index f172bc3..7c6b818 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "@dcloudio/uni-quickapp-webview": "2.0.1-36520221121002",
     "@dcloudio/uni-stacktracey": "2.0.1-36520221121002",
     "@dcloudio/uni-stat": "2.0.1-36520221121002",
+    "@dcloudio/uni-ui": "^1.5.7",
     "@vue/shared": "^3.0.0",
     "core-js": "^3.6.5",
     "flyio": "^0.6.2",
diff --git a/src/pages.json b/src/pages.json
index ae7c01e..7a82110 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,8 +1,9 @@
 {
 	"easycom": {
 		"autoscan": true,
-		"custom": {
-			"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue"
+		"custom": { // yarn add @dcloudio/uni-ui @climblee/uv-ui
+			"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue",
+			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
 		}
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
diff --git a/src/subpackage/community/components/tab_bar.vue b/src/subpackage/community/components/tab_bar.vue
index 4f913c5..d67216b 100644
--- a/src/subpackage/community/components/tab_bar.vue
+++ b/src/subpackage/community/components/tab_bar.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="tab-bar" id="tabBar">
-        <view class="tab-bar-item" v-for="i in 5" :key="i">
+        <view class="tab-bar-item" v-for="i in 5" :key="i" @click="$emit('click:item', i)">
             <view class="tbi-img"></view>
             <view class="tbi-view">tab{{i}}</view>
         </view>
diff --git a/src/subpackage/community/pages/index.vue b/src/subpackage/community/pages/index.vue
index 798dbbe..a594250 100644
--- a/src/subpackage/community/pages/index.vue
+++ b/src/subpackage/community/pages/index.vue
@@ -1,18 +1,22 @@
 <template>
     <view class="index-container">
-        <pages-one :safe-height="safeHeight"></pages-one>
-        <tab-bar ref="tabBar"></tab-bar>
+        <pages-one v-show="tabIdx === 0" :safe-height="safeHeight"></pages-one>
+        <pages-three v-show="tabIdx === 2" :tab-bar-height="tabBarHeight" :safe-height="safeHeight"></pages-three>
+        <tab-bar ref="tabBar" @click:item="tabChange"></tab-bar>
     </view>
 </template>
 
 <script>
 import pagesOne from "./modules/tab_pages/one.vue";
+import pagesThree from "./modules/tab_pages/three.vue";
 import tabBar from "../components/tab_bar.vue";
 export default {
-    components:{ tabBar, pagesOne },
+    components:{ tabBar, pagesOne, pagesThree },
     data() {
         return {
+            tabBarHeight: 0,
             safeHeight: 0,
+            tabIdx: 0,
         }
     },
     async onLoad(){
@@ -22,9 +26,14 @@ export default {
         async initSafeHeight(){
             let _tabBarInfo = await this.$refs?.tabBar?.getDomInfo?.();
             let _winInfo = uni.getWindowInfo();
-            let _remainHeight = (_winInfo?.windowHeight ?? 0) - (_tabBarInfo?.height ?? 0);
+            let _tHeight = _tabBarInfo?.height ?? 0;
+            let _remainHeight = (_winInfo?.windowHeight ?? 0) - _tHeight;
+            this.tabBarHeight = _tHeight;
             this.safeHeight = _remainHeight;
         },
+        tabChange(idx){
+            this.tabIdx = idx;
+        }
     }
 }
 </script>
diff --git a/src/subpackage/community/pages/modules/tab_pages/three.vue b/src/subpackage/community/pages/modules/tab_pages/three.vue
new file mode 100644
index 0000000..1c20fde
--- /dev/null
+++ b/src/subpackage/community/pages/modules/tab_pages/three.vue
@@ -0,0 +1,187 @@
+<template>
+    <scroll-view class="pages-tree" scroll-y :style="scrollStyle">
+        
+        <view class="pt-release">
+            <view class="pr-tit">上传图片</view>
+            <uv-upload
+                :fileList="fileList1"
+                name="1"
+                multiple 
+                :maxCount="10"
+                @afterRead="afterRead" 
+                @delete="deletePic" 
+            ></uv-upload>
+            <view class="line"></view>
+            <input class="title-input" type="text" placeholder="输入标题(可选)" :maxlength="20">
+            <view class="line"></view>
+            <textarea class="content-textarea" auto-height :show-confirm-bar="false"
+				:cursor-spacing="50" placeholder="添加正文" :maxlength="9999"></textarea>
+        </view>
+        <picker>
+            <uv-cell icon="bag" title="商品卡" isLink></uv-cell>
+        </picker>
+        <uv-cell icon="map" title="XXX店"></uv-cell>
+
+        <view class="fixed-box" :style="fixedStyle">
+			<view class="fixed-line-container">
+				<view class="item-box">
+					<uni-icons type="compose" size="30"></uni-icons>
+					<view class="text"> 存草稿 </view>
+				</view>
+				<view class="send-box">
+					发布帖子
+				</view>
+			</view>
+		</view>
+    </scroll-view>
+</template>
+
+<script>
+export default {
+    props: {
+        safeHeight: {
+            type: Number,
+            default: 0
+        },
+        tabBarHeight: {
+            type: Number,
+            default: 0
+        }
+    },
+    computed: {
+        scrollStyle(){
+            let { safeHeight } = this;
+            return `height: ${safeHeight}px;`;
+        },
+        fixedStyle(){
+            let { tabBarHeight } = this;
+            return `bottom: ${tabBarHeight}px;`;
+        }
+    },
+    data() {
+        return {
+            fileList1: []
+        }
+    },
+    methods: {
+        // 删除图片
+        deletePic(event) {
+            this[`fileList${event.name}`].splice(event.index, 1)
+        },
+        // 新增图片
+        async afterRead(event) {
+            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
+            let lists = [].concat(event.file)
+            let fileListLen = this[`fileList${event.name}`].length
+            lists.map((item) => {
+                this[`fileList${event.name}`].push({
+                    ...item,
+                    status: 'uploading',
+                    message: '上传中'
+                })
+            })
+            for (let i = 0; i < lists.length; i++) {
+                const result = await this.uploadFilePromise(lists[i].url)
+                let item = this[`fileList${event.name}`][fileListLen]
+                this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
+                    status: 'success',
+                    message: '',
+                    url: result
+                }))
+                fileListLen++
+            }
+        },
+        uploadFilePromise(url) {
+            return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    resolve(url)
+                }, 1000)
+                // let a = uni.uploadFile({
+                //     url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
+                //     filePath: url,
+                //     name: 'file',
+                //     formData: {
+                //         user: 'test'
+                //     },
+                //     success: (res) => {
+                //         setTimeout(() => {
+                //             resolve(res.data.data)
+                //         }, 1000)
+                //     }
+                // });
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .pages-tree{
+        padding-bottom: 130upx;
+        position: relative;
+        background: #fff;
+        .fixed-box {
+            position: fixed;
+            z-index: 90;
+            bottom: 0;
+            width: 100%;
+            display: flex;
+            background-color: #f7f7f7;
+            .fixed-line-container {
+                width: 100%;
+                display: inline-flex;
+                align-items: center;
+                box-sizing: border-box;
+                padding: 20rpx 30rpx;
+                .item-box {
+                    margin-right: 30rpx;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    .icon {
+                        flex-shrink: 0;
+                        height: 40rpx;
+                        width: 40rpx;
+                        margin-bottom: 10rpx;
+                    }
+                    .text {
+                        font-size: 24rpx;
+                    }
+                }
+                .send-box {
+                    flex: 1;
+                    border-radius: 100rpx;
+                    background-color: $mColor;
+                    color: #fff;
+                    text-align: center;
+                    @include flcw(32upx, 88upx, #fff);
+                }
+            }
+        }
+    }
+    .pt-release{
+        padding: 10rpx 30rpx 20rpx;
+        .pr-tit{
+            margin-bottom: 24upx;
+            @include flcw(32upx, 42upx, #333, 500);
+        }
+        .title-input {
+			margin-top: 10rpx;
+			height: 80rpx;
+			font-size: 32rpx;
+			// border: 2rpx #eee solid;
+		}
+
+		.line {
+			border: 2rpx #eee solid;
+			margin: 20rpx 0;
+
+		}
+
+		.content-textarea {
+			min-height: 400rpx;
+			width: 100%;
+			// border: 2rpx #eee solid;
+		}
+    }
+</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 746e797..cdef5c4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-    transpileDependencies: ['@climblee/uv-ui']
+    transpileDependencies: ['@climblee/uv-ui', '@dcloudio/uni-ui']
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index a8c3955..2bd22ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1088,6 +1088,11 @@
     "@babel/types" "^7.3.3"
     vue-template-compiler "^2.6.10"
 
+"@dcloudio/uni-ui@^1.5.7":
+  version "1.5.7"
+  resolved "https://registry.npmmirror.com/@dcloudio/uni-ui/-/uni-ui-1.5.7.tgz#74daef1f537ae2b9320e51f44163fe56bdd19c87"
+  integrity sha512-DugxSIrQrze1FLdUOj9a+JEQ0bHGjnJTcGUK1mN/MivKg7nuKJBRWk5Ipa9sUdoBznX6ndz5h2e7Uao6x1CdCw==
+
 "@dcloudio/vue-cli-plugin-hbuilderx@2.0.1-36520221121002":
   version "2.0.1-36520221121002"
   resolved "https://registry.npmmirror.com/@dcloudio/vue-cli-plugin-hbuilderx/-/vue-cli-plugin-hbuilderx-2.0.1-36520221121002.tgz"