'完成投诉页面'

app.json

@@ -1,9 +1,12 @@
 
 {
     "pages": [
-        "pages/suggesDetail/suggestDetail",
-        "pages/suggestList/suggestList",
         "pages/writeSuggestion/writeSuggestion",
+        "pages/complaintList/complaintList",
+        "pages/complaintDetail/complaintDetail",
+        "pages/writeComplaint/writeComplaint",
+        "pages/suggestList/suggestList",
+        "pages/suggestDetail/suggestDetail",
         "pages/myCollectTeacher/myCollectTeacher",
         "pages/findTeacher/findTeacher",
         "pages/orderDetail/orderDetail",

pages/complaintDetail/complaintDetail.js

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

pages/complaintDetail/complaintDetail.json

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

pages/complaintDetail/complaintDetail.wxml

@@ -0,0 +1,48 @@
+<!--pages/complaintDetail/complaintDetail.wxml-->
+
+<!-- 投诉号和ID -->
+<view class="complaintNumWrapper">
+    <view class="complaintHead">
+        <text>投诉号</text>
+        <text class="complaintNum">xxx</text>
+    </view>
+    <view class="complaintHead">
+        <text class="complaintHeadID">ID</text>
+        <text class="complaintNum">xxx</text>
+    </view>
+</view>
+<!-- 处理人ID和处理人昵称 -->
+<view class="handleComplaint">
+    <view class="complaintHead">
+        <text class="complaintPerId">处理人ID</text>
+        <text class="complaintPerNum">xxxxxxxxxxxxxxxx</text>
+    </view>
+    <view class="complaintHeadRight">
+        <text class="complaintPerNickname">处理人昵称</text>
+        <text class="complaintNum">最多六个字多了要换行</text>
+    </view>
+</view>
+<!-- 投诉标题和日期 -->
+<view class="complaintTitleWrapper">
+    <text class="complaintTtile">投诉标题</text>
+    <text class="complaintTime">{{times}}</text>
+</view>
+<!-- 投诉内容 -->
+<view class="complaintContentWrapper">
+    <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/complaintDetail/complaintDetail.wxss

@@ -0,0 +1,95 @@
+/* pages/complaintDetail/complaintDetail.wxss */
+
+/* 设置背景 */
+page{
+    padding: 20rpx;
+    background-color: #E2F0D9;
+}
+
+/* 设置建议号、处理人的格式 */
+.complaintNumWrapper,
+.handleComplaint{
+    display: flex;
+    margin-top: 20rpx;
+    font-size: 28rpx;
+}
+
+/* 设置顶部标题宽度 */
+.complaintHead,
+.complaintHeadRight{
+    display: flex;
+    width: 45%;
+}
+/* ID和处理人昵称 */
+.complaintHeadRight,
+.complaintHeadID{
+    margin-left: 20rpx;
+}
+/* 处理人ID宽度 */
+.complaintPerId{
+    width: 120rpx;
+}
+/* 处理人ID和处理人昵称公共样式 */
+.complaintPerNum,
+.complaintNum{
+    margin-left: 10rpx;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 处理人ID内容宽度 */
+.complaintPerNum{
+    width: calc(45vw - 130rpx);
+}
+/* 处理人昵称宽度 */
+.complaintPerNickname{
+    width: 160rpx;
+}
+/* 处理人昵称内容宽度 */
+.complaintNum{
+    width: calc(45vw - 160rpx);
+}
+
+/* 建议标题和时间 */
+.complaintTitleWrapper{
+    margin-top: 50rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+/* 单独设置标题 */
+.complaintTtile{
+    font-weight: bold;
+}
+/* 单独设置建议时间 */
+.complaintTime{
+    font-size: 26rpx;
+    color: #A6A6A6;
+}
+
+/* 建议内容 */
+.complaintContentWrapper{
+    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/complaintList/complaintList.js

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

pages/complaintList/complaintList.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "我的投诉"
+}

pages/complaintList/complaintList.wxml

@@ -0,0 +1,30 @@
+<!--pages/complaintList/complaintList.wxml-->
+
+<view>
+    <!-- 建议列表 -->
+    <view class="complaintContainer">
+        <view class="complaint" bindtap="toComplaintDetail">
+            <view class="complain">
+                <view class="complaintHead">
+                    <view>标题</view>
+                    <view class="complaintTitle">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
+                </view>
+                <view class="complaintBody">
+                    <view>内容摘要</view>
+                    <view class="complaintContent">在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式</view>
+                </view>
+            </view>
+            <view>
+                <view class="dispose">已处理</view>
+            </view>
+        </view>
+
+
+    </view>
+    <!-- 开始写建议按钮 -->
+    <view class="toWriteComplaint">
+        <view class="writeComplaint" bindtap="toWriteComplaint">
+            <text>开始写投诉</text>
+        </view>
+    </view>
+</view>

pages/complaintList/complaintList.wxss

@@ -0,0 +1,93 @@
+/* pages/complaintList/complaintList.wxss */
+
+/* 页面背景 */
+page{
+    /* height: 100%; */
+    /* height: auto !important; */
+    background-color: #E2F0D9;
+}
+
+/* 建议列表区 */
+.complaintContainer{
+    height: 100%;
+    padding-bottom: 120rpx;
+}
+
+/* 单条建议的背景 */
+.complaint{
+    display: flex;
+    padding: 20rpx;
+    margin: 20rpx 10rpx;
+    height: 140rpx;
+    border-radius: 30rpx;
+    background-color: #FFF2CC;
+}
+
+/* 单条建议左侧标题和内容摘要 */
+.complain{
+    width: 75%;
+}
+
+/* 标题和内容摘要布局 */
+.complaintHead,
+.complaintBody{
+    display: flex;
+}
+
+/* 摘要 */
+.complaintBody{
+    margin-top: 10rpx;
+}
+
+/* 标题详情和内容详情左边距 */
+.complaintTitle,
+.complaintContent{
+    margin-left: 20rpx;
+    width: 65%;
+}
+
+/* 标题内容详情 */
+.complaintTitle{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 内容摘要详情 */
+.complaintContent{
+    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;
+}
+
+/* 写建议按钮 */
+.toWriteComplaint{
+    display: flex;
+    position: relative;
+    justify-content: center;
+}
+.writeComplaint{
+    text-align: center;    
+    position: fixed;
+    bottom: 0rpx;
+    width: 100%;
+    height: 120rpx;
+    line-height: 120rpx;
+    background-color: #E2F0D9;
+}
+.writeComplaint text{
+    background-color: #8FAADC;
+    font-size: 36rpx;
+    color: white;
+    border-radius: 30rpx;
+    padding: 10rpx 20rpx;
+}

pages/writeComplaint/writeComplaint.js

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

pages/writeComplaint/writeComplaint.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "写投诉"
+}

pages/writeComplaint/writeComplaint.wxml

@@ -0,0 +1,19 @@
+<!--pages/writeComplaint/writeComplaint.wxml-->
+
+<view>
+    <!-- 投诉标题 -->
+    <view class="complaintWrapper">
+        <text class="complaintTitle">投诉标题</text>
+        <textarea name="投诉标题" cols="30" rows="10" maxlength="50" placeholder="不超过50字" class="titleInput" bindinput="getComplaintTitle"></textarea>
+    </view>
+    <!-- 投诉内容 -->
+    <view class="complaintWrapper">
+        <text class="complaintTitle">投诉内容</text>
+        <textarea name="投诉内容" cols="30" rows="10" maxlength="512" placeholder="不超过512字" class="contentInput" bindinput="getComplaintContent"></textarea>
+    </view>
+</view>
+<!-- 取消和提交按钮 -->
+<view class="suggestBtn">
+    <view class="confirmBtn" bindtap="toCancel">取消</view>
+    <view class="confirmBtn" bindtap="toConfirm">提交</view>
+</view>

pages/writeComplaint/writeComplaint.wxss

@@ -0,0 +1,55 @@
+/* pages/writeComplaint/writeComplaint.wxss */
+
+/* 设置页面背景 */
+page{
+    background-color: #E2F0D9;
+    height: 100%;
+}
+
+.complaintWrapper{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 20rpx;
+}
+/* 标题 */
+.complaintTitle{
+    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;
+}

pages/writeSuggestion/writeSuggestion.js

@@ -5,8 +5,8 @@ Page({
      * 页面的初始数据
      */
     data: {
-        suggestTitle:'',    //接收输入的建议标题
-        suggestContent:''   //接收输入的建议内容
+        suggestTitle: '', //接收输入的建议标题
+        suggestContent: '' //接收输入的建议内容
     },
 
     /**
@@ -17,50 +17,62 @@ Page({
     },
 
     // 获取输入的标题内容
-    getSuggestTitle(e){
+    getSuggestTitle(e) {
         // console.log(e.detail.value)
         this.setData({
-            suggestTitle:e.detail.value
+            suggestTitle: e.detail.value
         })
-        console.log('suggestTitle:',this.data.suggestTitle);
+        // console.log('suggestTitle:', this.data.suggestTitle);
     },
 
     // 获取输入的建议内容
-    getSuggestContent(e){
+    getSuggestContent(e) {
         this.setData({
-            suggestContent:e.detail.value
+            suggestContent: e.detail.value
         })
-        console.log('suggestContent:',this.data.suggestContent);
+        // console.log('suggestContent:', this.data.suggestContent);
     },
 
     // 取消按钮功能
-    toCancel(){
+    toCancel() {
         this.setData({
-            suggestTitle:'',
-            suggestContent:''
+            suggestTitle: '',
+            suggestContent: ''
         })
         wx.navigateBack({
-          delta: 1,
+            delta: 1,
         })
         // console.log('取消后suggestTitle：',this.data.suggestTitle);
         // console.log('取消后suggestContent：',this.data.suggestContent);
     },
 
     // 提交按钮功能
-    toConfirm(){
+    toConfirm() {
         // 先判断标题和内容是否为空，如果为空，则不能提交
         let suggestTitle = this.data.suggestTitle
         let suggestContent = this.data.suggestContent
-        if(!suggestTitle){
+        var head = '^[ ]+$'
+        var re = new RegExp(head)
+        if (!suggestTitle) {
             wx.showModal({
-              title:'建议标题未写',
-              content:'请补充标题后再重新提交'
+                title: '建议标题未写',
+                content: '请补充标题后再重新提交'
             })
-        }else if(!suggestContent){
+        } else if (re.test(suggestTitle)) {
             wx.showModal({
-                title:'建议内容未写',
-                content:'建议内容不能为空，请补充建议内容后再提交'
-              })
+                title: '标题不能全为空格',
+                content: '建议标题不能全部为空格，请修改建议标题后再提交'
+            })
+        } else if (!suggestContent) {
+            wx.showModal({
+                title: '建议内容未写',
+                content: '建议内容不能为空，请补充建议内容后再提交'
+            })
+        } else if (re.test(suggestContent)) {
+            wx.showModal({
+                title: '建议内容不能全部为空格',
+                content: '建议内容不能全部为空格，请修改建议内容后再提交'
+            })
         }
     },
 

pages/writeSuggestion/writeSuggestion.wxss

@@ -1,14 +1,11 @@
 /* pages/writeSuggestion/writeSuggestion.wxss */
 
+/* 设置页面背景 */
 page{
     background-color: #E2F0D9;
     height: 100%;
 }
 
-.suggestContainer{
-    height: 100%;
-}
-
 .suggestWrapper{
     display: flex;
     flex-direction: column;