add tid1807 style

src/pages.json

@@ -901,6 +901,29 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "subpackage/message",
+			"pages": [
+				{
+					"path": "pages/complaint/edit",
+					"style" : {
+						"navigationBarTitleText": "投诉建议" 
+					}
+				},
+				{
+					"path": "pages/complaint/list",
+					"style" : {
+						"navigationBarTitleText": "投诉建议" 
+					}
+				},
+				{
+					"path": "pages/complaint/detail",
+					"style" : {
+						"navigationBarTitleText": "投诉详情" 
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

src/subpackage/message/components/detail/answer_item.vue

@@ -0,0 +1,39 @@
+<template>
+    <view class="answer-item">
+        <view class="ai-user">
+            <view class="au-name">李小小</view>
+            <view class="au-time">[回复] 20241220 10:12:31</view>
+        </view>
+        <view class="ai-content">情况已核实，目前正在解决中</view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .answer-item{
+        padding: 30upx 22upx;
+        background: #fff;
+        border-radius: 10upx;
+    }
+    .ai-user{
+        @include ctf;
+        @include flcw(32upx, 44upx, #1A1A1A);
+        .au-name{
+            @include tHide;
+        }
+        .au-time{
+            flex-shrink: 0;
+            color: #9C9C9F;
+        }
+    }
+    .ai-content{
+        padding-left: 26upx;
+        margin-top: 24upx;
+        @include flcw(28upx, 40upx, #9C9C9F);
+    }
+</style>

src/subpackage/message/components/detail/image_flow.vue

@@ -0,0 +1,30 @@
+<template>
+    <view class="image-flow">
+        <image class="if-img" v-for="i in 5" :key="i"></image>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .image-flow{
+        padding: 30upx 14upx;
+        background: #fff;
+        border-radius: 20upx;
+        font-size: 0;
+        .if-img{
+            margin: 0 14upx;
+            width: 200upx;
+            height: 200upx;
+            border-radius: 10upx;
+            background: skyblue;
+            &:nth-of-type(n+4){
+                margin-top: 28upx;
+            }
+        }
+    }
+</style>

src/subpackage/message/components/detail/info.vue

@@ -0,0 +1,46 @@
+<template>
+    <view class="detail-info">
+        <view class="di-line">
+            <view class="dl-name">标题：</view>
+            <view class="dl-value">门禁开门异常</view>
+        </view>
+        <view class="di-line">
+            <view class="dl-name">类型：</view>
+            <view class="dl-value">硬件</view>
+        </view>
+        <view class="di-line">
+            <view class="dl-name">反馈内容：</view>
+            <view class="dl-value">开不了门</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .detail-info{
+        padding: 30upx 24upx;
+        border-radius: 10upx;
+        background: #fff;
+        .di-line{
+            @include ctf(space-between);
+            &+.di-line{
+                margin-top: 10upx;
+            }
+            .dl-name{
+                flex-shrink: 0;
+                @include flcw(28upx, 40upx, #1a1a1a);
+            }
+            .dl-value{
+                flex-grow: 1;
+                text-align: right;
+                @include flcw(28upx, 40upx, #1a1a1a);
+                @include tHide;
+            }
+        }
+    }
+</style>

src/subpackage/message/components/edit/fixed_button.vue

@@ -0,0 +1,36 @@
+<template>
+    <view class="fixed-button">
+        <button class="fb-btn">取消</button>
+        <button class="fb-btn">提交</button>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .fixed-button{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        padding: 10upx 20upx;
+        width: 100%;
+        @include ctf(center);
+        .fb-btn{
+            margin: 0 20upx;
+            width: 240upx;
+            text-align: center;
+            border: 2upx solid $mColor;
+            border-radius: 44upx;
+            background: #fff;
+            @include flcw(32upx, 88upx, $mColor);
+            &+.fb-btn{
+                background: $mColor;
+                color: #fff;
+            }
+        }
+    }
+</style>

src/subpackage/message/components/edit/upload_img.vue

@@ -0,0 +1,95 @@
+<template>
+    <view class="upload-img">
+        <view class="ui-title">上传照片<text class="ut-txt">(最多上传3张，只支持.jpg、png 格式)</text></view>
+        <view class="ui-ls">
+            <view class="ul-item" v-for="i in 4" :key="i">
+                <image class="ui-pic"></image>
+                <image class="ui-close"></image>
+            </view>
+            <view class="ul-item ul-add">
+                <view class="ua-icon"></view>
+                <view class="ua-txt">上传照片</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .upload-img{
+        padding: 30upx 18upx;
+        border-radius: 20upx;
+        background: #fff;
+        .ui-title{
+            padding: 0 10upx;
+            @include flcw(32upx, 44upx, #333333);
+            .ut-txt{
+                font-size: 24upx;
+                color: #9A9A9D;
+            }
+        }
+        .ui-ls{
+            margin-top: 24upx;
+            font-size: 0;
+            .ul-item{
+                position: relative;
+                margin: 0 12upx;
+                vertical-align: top;
+                display: inline-block;
+                width: 200upx;
+                height: 200upx;
+                &:nth-of-type(n+4){
+                    margin-top: 24upx;
+                }
+                .ui-pic{
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 10upx;
+                    background: skyblue;
+                }
+                .ui-close{
+                    position: absolute;
+                    top: 6upx;
+                    right: 6upx;
+                    width: 40upx;
+                    height: 40upx;
+                    background: darkblue;
+                }
+            }
+            .ul-add{
+                padding-top: 36upx;
+                border: 2upx solid #D8D8D8;
+                .ua-icon{
+                    position: relative;
+                    margin: 0 auto;
+                    width: 60upx;
+                    height: 60upx;
+                    &::before, &::after{
+                        content: '';
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
+                        display: block;
+                        width: 100%;
+                        height: 4upx;
+                        background: #D8D8D8;
+                    }
+                    &::after{
+                        transform: translate(-50%, -50%) rotate(90deg);
+                    }
+                }
+                .ua-txt{
+                    text-align: center;
+                    margin-top: 28upx;
+                    @include flcw(28upx, 40upx, #9A9A9D);
+                }
+            }
+        }
+    }
+</style>

src/subpackage/message/components/fixed_button.vue

@@ -0,0 +1,32 @@
+<template>
+    <view class="fixed-button">
+        <button class="fb-btn" hover-class="hover-active">新建投诉</button>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .fixed-button{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        padding: 10upx 24upx;
+        .fb-btn{
+            @include clearBtn;
+            text-align: center;
+            height: 112upx;
+            background: $mColor;
+            border-radius: 10upx;
+            @include flcw(32upx, 112upx, #fff, 500);
+        }
+        .hover-active{
+            opacity: .9;
+        }
+    }
+</style>

src/subpackage/message/components/message_item.vue

@@ -0,0 +1,74 @@
+<template>
+    <view class="message-item">
+        <image class="mi-icon"></image>
+        <view class="mi-content">
+            <view class="mc-info">
+                <view class="mi-top">
+                    <view class="mt-title">标题</view>
+                    <view class="mt-tag">返回的状态</view>
+                </view>
+                <view class="mi-content">巴拉巴拉巴拉....</view>
+            </view>
+            <image class="mc-arrow"></image>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .message-item{
+        padding: 30upx 24upx;
+        border-radius: 10upx;
+        background: #fff;
+        @include ctf;
+        .mi-icon{
+            flex-shrink: 0;
+            margin-right: 24upx;
+            width: 108upx;
+            height: 108upx;
+            background: skyblue;
+        }
+        .mi-content{
+            flex-grow: 1;
+            @include ctf;
+            .mc-info{
+                flex-grow: 1;
+                .mi-top{
+                    @include ctf;
+                    .mt-title{
+                        @include flcw(32upx, 44upx, #1A1A1A);
+                        @include tHide;
+                    }
+                    .mt-tag{
+                        flex-shrink: 0;
+                        margin-left: 20upx;
+                        padding: 4upx 12upx;
+                        border: 2upx solid $mColor;
+                        border-radius: 6upx;
+                        text-align: center;
+                        @include flcw(24upx, 34upx, $mColor);
+                    }
+                }
+                .mi-content{
+                    margin-top: 18upx;
+                    @include flcw(28upx, 40upx, #9C9C9F);
+                    @include tHide(2);
+                }
+            }
+            .mc-arrow{
+                align-self: flex-start;
+                flex-shrink: 0;
+                margin-left: 20upx;
+                margin-top: 8upx;
+                width: 28upx;
+                height: 28upx;
+                background: skyblue;
+            }
+        }
+    }
+</style>

src/subpackage/message/pages/complaint/detail.vue

@@ -0,0 +1,47 @@
+<template>
+    <view class="complaint-detail">
+        <view class="top-status">当前状态：xxx处理中</view>
+        <view class="heigh-space" style="height: 24upx;"></view>
+        <detail-info></detail-info>
+        <view class="heigh-space" style="height: 24upx;"></view>
+        <image-flow></image-flow>
+        <view class="heigh-space" style="height: 24upx;"></view>
+        <button class="right-btn">回复</button>
+        <view class="heigh-space" style="height: 24upx;"></view>
+        <answer-item></answer-item>
+    </view>
+</template>
+
+<script>
+import detailInfo from "../../components/detail/info.vue";
+import imageFlow from "../../components/detail/image_flow.vue";
+import answerItem from "../../components/detail/answer_item.vue";
+export default {
+    components: {
+        detailInfo, imageFlow, answerItem
+    },
+}
+</script>
+
+<style lang="scss">
+    .complaint-detail{
+        padding: 24upx;
+    }
+    .top-status{
+        padding: 0 24upx;
+        text-align: center;
+        border-radius: 10upx;
+        background: #fff;
+        @include tHide;
+        @include flcw(28upx, 84upx, #1A1A1A);
+    }
+    .right-btn{
+        margin-left: auto;
+        margin-right: 0upx;
+        width: 192upx;
+        text-align: center;
+        border-radius: 10upx;
+        background: $mColor;
+        @include flcw(32upx, 88upx, #FFFFFF);
+    }
+</style>

src/subpackage/message/pages/complaint/edit.vue

@@ -0,0 +1,24 @@
+<template>
+    <view class="complaint-edit">
+        <upload-img></upload-img>
+        <fixed-button></fixed-button>
+    </view>
+</template>
+
+<script>
+import uploadImg from "../../components/edit/upload_img.vue";
+import fixedButton from "../../components/edit/fixed_button.vue";
+export default {
+    components: {
+        uploadImg,
+        fixedButton,
+    },
+}
+</script>
+
+<style lang="scss">
+    .complaint-edit{
+        padding: 24upx;
+        @include isPd(110upx);
+    }
+</style>

src/subpackage/message/pages/complaint/list.vue

@@ -0,0 +1,29 @@
+<template>
+    <view class="complaint-list">
+        <view class="cl-ls">
+            <message-item></message-item>
+        </view>
+        <fixed-button></fixed-button>
+    </view>
+</template>
+
+<script>
+import fixedButton from "../../components/fixed_button.vue";
+import messageItem from "../../components/message_item.vue";
+export default {
+    components: {
+        fixedButton,
+        messageItem,
+    },
+}
+</script>
+
+<style lang="scss">
+    .complaint-list{
+        @include isPd(132upx);
+        .cl-ls{
+            padding: 28upx 24upx 0;
+
+        }
+    }
+</style>

src/uni.scss

@@ -106,3 +106,15 @@ $mColor: #009874;
     padding-bottom: calc( $height + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
     padding-bottom: calc( $height + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
 }
+
+@mixin clearBtn{
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    background-color: transparent;
+    border-radius: 0;
+    &::after{
+        position: unset !important;
+        border: unset;
+    }
+}