'完成建议页面'

app.json

@@ -1,6 +1,9 @@
 
 {
     "pages": [
+        "pages/suggesDetail/suggestDetail",
+        "pages/suggestList/suggestList",
+        "pages/writeSuggestion/writeSuggestion",
         "pages/myCollectTeacher/myCollectTeacher",
         "pages/findTeacher/findTeacher",
         "pages/orderDetail/orderDetail",

pages/suggesDetail/suggestDetail.js

@@ -0,0 +1,67 @@
+// pages/suggesDetail/suggestDetail.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        times:'2022-12-22 11:11:11',
+        handleStatus:'已处理'
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/suggesDetail/suggestDetail.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "我的建议详情"
+}

pages/suggesDetail/suggestDetail.wxml

@@ -0,0 +1,48 @@
+<!--pages/suggesDetail/suggestDetail.wxml-->
+
+<!-- 建议号和ID -->
+<view class="suggestNumWrapper">
+    <view class="suggestHead">
+        <text>建议号</text>
+        <text class="suggestNum">xxx</text>
+    </view>
+    <view class="suggestHead">
+        <text class="suggestHeadID">ID</text>
+        <text class="suggestNum">xxx</text>
+    </view>
+</view>
+<!-- 处理人ID和处理人昵称 -->
+<view class="handleSuggest">
+    <view class="suggestHead">
+        <text class="suggestPerId">处理人ID</text>
+        <text class="suggestPerNum">xxxxxxxxxxxxxxxx</text>
+    </view>
+    <view class="suggestHeadRight">
+        <text class="suggestPerNickname">处理人昵称</text>
+        <text class="suggestNum">最多六个字多了要换行</text>
+    </view>
+</view>
+<!-- 建议标题和日期 -->
+<view class="suggestTitleWrapper">
+    <text class="suggestTtile">建议标题</text>
+    <text class="suggestTime">{{times}}</text>
+</view>
+<!-- 建议内容 -->
+<view class="suggestContentWrapper">
+    <text>建议内容：</text>
+    <text>xxxxx</text>
+</view>
+<!-- 处理结果 -->
+<view class="handleResult">
+    <text>处理结果描述：</text>
+    <text>xxx</text>
+</view>
+<!-- 日期 -->
+<view class="handleResult">
+    <text>结案日期时间：</text>
+    <text class="handleTime">xxx</text>
+</view>
+<!-- 处理状态 -->
+<view class="handleStatus">
+    <text>{{handleStatus}}</text>
+</view>

pages/suggesDetail/suggestDetail.wxss

@@ -0,0 +1,95 @@
+/* pages/suggesDetail/suggestDetail.wxss */
+
+/* 设置背景 */
+page{
+    padding: 20rpx;
+    background-color: #E2F0D9;
+}
+
+/* 设置建议号、处理人的格式 */
+.suggestNumWrapper,
+.handleSuggest{
+    display: flex;
+    margin-top: 20rpx;
+    font-size: 28rpx;
+}
+
+/* 设置顶部标题宽度 */
+.suggestHead,
+.suggestHeadRight{
+    display: flex;
+    width: 45%;
+}
+/* ID和处理人昵称 */
+.suggestHeadRight,
+.suggestHeadID{
+    margin-left: 20rpx;
+}
+/* 处理人ID宽度 */
+.suggestPerId{
+    width: 120rpx;
+}
+/* 处理人ID和处理人昵称公共样式 */
+.suggestPerNum,
+.suggestNum{
+    margin-left: 10rpx;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 处理人ID内容宽度 */
+.suggestPerNum{
+    width: calc(45vw - 130rpx);
+}
+/* 处理人昵称宽度 */
+.suggestPerNickname{
+    width: 160rpx;
+}
+/* 处理人昵称内容宽度 */
+.suggestNum{
+    width: calc(45vw - 160rpx);
+}
+
+/* 建议标题和时间 */
+.suggestTitleWrapper{
+    margin-top: 50rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+/* 单独设置标题 */
+.suggestTtile{
+    font-weight: bold;
+}
+/* 单独设置建议时间 */
+.suggestTime{
+    font-size: 26rpx;
+    color: #A6A6A6;
+}
+
+/* 建议内容 */
+.suggestContentWrapper{
+    margin-top: 40rpx;
+    display: flex;
+    flex-direction: column;
+    height: 800rpx;
+}
+/* 处理结果 */
+.handleResult{
+    margin-top: 30rpx;
+}
+/* 处理时间 */
+.handleTime{
+    font-weight: bold;
+}
+/* 处理状态 */
+.handleStatus{
+    margin: 60rpx 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-weight: bold;
+    color: red;
+}

pages/suggestList/suggestList.js

@@ -0,0 +1,80 @@
+// pages/suggestList/suggestList.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    // 点击建议列表，跳转到对应的建议详情页
+    toSuggestDetail(){
+        wx.navigateTo({
+          url: '/pages/suggesDetail/suggestDetail',
+        })
+    },
+
+    // 跳转到写建议页面
+    toWriteSuggestion(){
+        wx.navigateTo({
+          url: '/pages/writeSuggestion/writeSuggestion',
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/suggestList/suggestList.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "我的建议"
+}

pages/suggestList/suggestList.wxml

@@ -0,0 +1,59 @@
+<!--pages/suggestList/suggestList.wxml-->
+
+<view>
+    <!-- 建议列表 -->
+    <view class="suggestContainer">
+        <view class="suggest" bindtap="toSuggestDetail">
+            <view class="suggestion">
+                <view class="suggestHead">
+                    <view>标题</view>
+                    <view class="suggestTitle">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
+                </view>
+                <view class="suggestBody">
+                    <view>内容摘要</view>
+                    <view class="suggestContent">在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式</view>
+                </view>
+            </view>
+            <view>
+                <view class="dispose">已处理</view>
+            </view>
+        </view>
+        <view class="suggest" bindtap="toSuggestDetail">
+            <view class="suggestion">
+                <view class="suggestHead">
+                    <view>标题</view>
+                    <view class="suggestTitle">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
+                </view>
+                <view class="suggestBody">
+                    <view>内容摘要</view>
+                    <view class="suggestContent">在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式</view>
+                </view>
+            </view>
+            <view>
+                <view class="dispose">已处理</view>
+            </view>
+        </view>
+        <view class="suggest" bindtap="toSuggestDetail">
+            <view class="suggestion">
+                <view class="suggestHead">
+                    <view>标题</view>
+                    <view class="suggestTitle">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
+                </view>
+                <view class="suggestBody">
+                    <view>内容摘要</view>
+                    <view class="suggestContent">在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式</view>
+                </view>
+            </view>
+            <view>
+                <view class="dispose">已处理</view>
+            </view>
+        </view>
+
+    </view>
+    <!-- 开始写建议按钮 -->
+    <view class="toWriteSuggestion">
+        <view class="writeSuggestion" bindtap="toWriteSuggestion">
+            <text>开始写建议</text>
+        </view>
+    </view>
+</view>

pages/suggestList/suggestList.wxss

@@ -0,0 +1,94 @@
+/* pages/suggestList/suggestList.wxss */
+
+/* 页面背景 */
+page{
+    /* height: 100%; */
+    /* height: auto !important; */
+    background-color: #E2F0D9;
+}
+
+/* 建议列表区 */
+.suggestContainer{
+    height: 100%;
+    padding-bottom: 120rpx;
+}
+
+/* 单条建议的背景 */
+.suggest{
+    display: flex;
+    padding: 20rpx;
+    margin: 20rpx 10rpx;
+    height: 140rpx;
+    border-radius: 30rpx;
+    background-color: #FFF2CC;
+}
+
+/* 单条建议左侧标题和内容摘要 */
+.suggestion{
+    width: 75%;
+}
+
+/* 标题和内容摘要布局 */
+.suggestHead,
+.suggestBody{
+    display: flex;
+}
+
+/* 摘要 */
+.suggestBody{
+    margin-top: 10rpx;
+}
+
+/* 标题详情和内容详情左边距 */
+.suggestTitle,
+.suggestContent{
+    margin-left: 20rpx;
+}
+
+/* 标题内容详情 */
+.suggestTitle{
+    width: 65%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 内容摘要详情 */
+.suggestContent{
+    width: 65%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+/* 处理状态 */
+.dispose{
+    font-weight: bold;
+    color: red;
+    margin-left: 30rpx;
+}
+
+/* 写建议按钮 */
+.toWriteSuggestion{
+    display: flex;
+    position: relative;
+    justify-content: center;
+}
+.writeSuggestion{
+    text-align: center;    
+    position: fixed;
+    bottom: 0rpx;
+    width: 100%;
+    height: 120rpx;
+    line-height: 120rpx;
+    background-color: #E2F0D9;
+}
+.writeSuggestion text{
+    background-color: #8FAADC;
+    font-size: 36rpx;
+    color: white;
+    border-radius: 30rpx;
+    padding: 10rpx 20rpx;
+}

pages/writeSuggestion/writeSuggestion.js

@@ -0,0 +1,115 @@
+// pages/writeSuggestion/writeSuggestion.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        suggestTitle:'',    //接收输入的建议标题
+        suggestContent:''   //接收输入的建议内容
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    // 获取输入的标题内容
+    getSuggestTitle(e){
+        // console.log(e.detail.value)
+        this.setData({
+            suggestTitle:e.detail.value
+        })
+        console.log('suggestTitle:',this.data.suggestTitle);
+    },
+
+    // 获取输入的建议内容
+    getSuggestContent(e){
+        this.setData({
+            suggestContent:e.detail.value
+        })
+        console.log('suggestContent:',this.data.suggestContent);
+    },
+
+    // 取消按钮功能
+    toCancel(){
+        this.setData({
+            suggestTitle:'',
+            suggestContent:''
+        })
+        wx.navigateBack({
+          delta: 1,
+        })
+        // console.log('取消后suggestTitle：',this.data.suggestTitle);
+        // console.log('取消后suggestContent：',this.data.suggestContent);
+    },
+
+    // 提交按钮功能
+    toConfirm(){
+        // 先判断标题和内容是否为空，如果为空，则不能提交
+        let suggestTitle = this.data.suggestTitle
+        let suggestContent = this.data.suggestContent
+        if(!suggestTitle){
+            wx.showModal({
+              title:'建议标题未写',
+              content:'请补充标题后再重新提交'
+            })
+        }else if(!suggestContent){
+            wx.showModal({
+                title:'建议内容未写',
+                content:'建议内容不能为空，请补充建议内容后再提交'
+              })
+        }
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/writeSuggestion/writeSuggestion.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "写建议"
+}

pages/writeSuggestion/writeSuggestion.wxml

@@ -0,0 +1,19 @@
+<!--pages/writeSuggestion/writeSuggestion.wxml-->
+
+<view>
+    <!-- 建议标题 -->
+    <view class="suggestWrapper">
+        <text class="suggestTitle">建议标题</text>
+        <textarea name="建议标题" cols="30" rows="10" maxlength="50" suggestTitle placeholder="不超过50字" class="titleInput" bindinput="getSuggestTitle"></textarea>
+    </view>
+    <!-- 建议内容 -->
+    <view class="suggestWrapper">
+        <text class="suggestTitle">建议内容</text>
+        <textarea name="建议内容" cols="30" rows="10" maxlength="512" suggestTitle placeholder="不超过512字" class="contentInput" bindinput="getSuggestContent"></textarea>
+    </view>
+</view>
+<!-- 取消和提交按钮 -->
+<view class="suggestBtn">
+    <view class="confirmBtn" bindtap="toCancel">取消</view>
+    <view class="confirmBtn" bindtap="toConfirm">提交</view>
+</view>

pages/writeSuggestion/writeSuggestion.wxss

@@ -0,0 +1,58 @@
+/* pages/writeSuggestion/writeSuggestion.wxss */
+
+page{
+    background-color: #E2F0D9;
+    height: 100%;
+}
+
+.suggestContainer{
+    height: 100%;
+}
+
+.suggestWrapper{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 20rpx;
+}
+/* 标题 */
+.suggestTitle{
+    text-align: center;
+    padding-bottom: 20rpx;
+    font-weight: bold;
+}
+/* 输入的建议标题和内容公共样式 */
+.titleInput,
+.contentInput{
+    width: 93%;
+    padding: 10rpx;
+    /* border: 1rpx solid gray; */
+    border-radius: 20rpx;
+    background-color: #fff;
+}
+/* 建议标题输入框的高度 */
+.titleInput{
+    height: 150rpx;
+}
+
+/* 建议内容输入框的高度 */
+.contentInput{
+    height: 800rpx;
+}
+
+/* 下方按钮 */
+.suggestBtn{
+    display: flex;
+    margin-top: 40rpx;
+    justify-content: space-around;
+}
+
+.confirmBtn{
+    font-size: 42rpx;
+    width: 120rpx;
+    padding: 10rpx 20rpx;
+    border-radius: 40rpx;
+    text-align: center;
+    background-color: #8FAADC;
+    color: white;
+}