小程序联系我们功能实现

src/pages/MineUserAll/ContactMe/index.jsx

-
 import CustomNav from '@/components/CustomNav'
-// import { Button } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import withLayout from '@/layouts'
-
-import { Button, Text, Textarea } from '@tarojs/components'
+import { Button} from '@tarojs/components'
 import './style.less'
+import {saveFeedback} from '@/services/mine'
 
 
 export default withLayout((props) => {
-  const { router, person } = props
-
+  const { person } = props
+  const {personId}=person
   const back = () => {
     Taro.navigateBack()
   }
-
+  const submit=()=>{
+    var content=document.getElementById('content').value
+    if(content!=''){
+      saveFeedback({
+        personId,
+        content
+      }).then(()=>{
+        // 成功返回一个模态框提醒用户
+        wx.showModal({
+          title: '提示',
+          content: '反馈成功',
+          showCancel:false,
+          success (res) {
+            if (res.confirm) {
+              back()
+            }
+          }
+        })             
+      })
+    }
+    else{
+      wx.showToast({
+        title: '请重新输入',
+        icon: 'none',
+        duration: 2000
+      }) 
+    }
+  }
   return (
     <view className='box-content'>
       <CustomNav title='联系我们' />
+      <view style={{padding:'60rpx 30rpx'}}>
       <view class='section'>
-        <Textarea placeholder='请输入您的建议或意见!' confirm-type='done' />
+        <textarea placeholder='请输入您的建议或意见!' id='content' />
       </view>
       <view className='button-info'>
-        <Button className='button-box'>提交</Button>
+        <Button className='button-box' onClick={submit}>提交</Button>
         <Button className='button-box-Cancel' onClick={back} >取消</Button>
       </view>
+      </view>
     </view>
   )
 })

src/pages/MineUserAll/ContactMe/style.less

 .box-content {
   .section {
-    width: 690px;
     height: 254px;
-    background: #ffffff;
     border: 1px solid #b5b5b5;
     box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
-    padding: 0 20px 0 20px;
-    margin: auto;
+    padding: 30px;    
+    font-size: 24px;
     textarea {
-      padding-top: 20px;
-      width: 100%;
-      font-size: 24px;
-      font-weight: 400;
-      color: #666666;
+      height: 100%;
     }
   }
+  button{
+    font-size: 30px; 
+    border-radius: 12px;
+    line-height: 88px;
+  }
   .button-info {
+    width: calc(100% - 60px);
+    position: absolute;
+    bottom: 60px;
     .button-box {
-      margin-top: 20%;
-      width: 690px;
-      height: 88px;
-      line-height: 88px;
-
-      background: #274291;
-      border-radius: 12px;
+      background: #274291;     
+      color: #fff;
     }
-    .button-box-Cancel {
-      width: 690px;
-      height: 88px;
-      line-height: 88px;
+    .button-box-Cancel {      
       margin-top: 40px;
       color: #274291;
       border: 2px solid #274291;
-      border-radius: 12px;
     }
   }
 }

src/services/mine.js

  * @param {*} data 
  * @returns 
  */
- export const saveEvaluation = (data) => request('/taEvaluation ', { method: 'post', data })
+ export const saveEvaluation = (data) => request('/taEvaluation', { method: 'post', data })
 
  /**
  * 查看评价详情
   export const getEvaluationDetail = (id) => request(`/taEvaluation/${id}`)
 
  //订单列表用哪个表    
-//收藏列表
+//收藏列表
+
+/**
+ * 联系我们
+ * @param {*} data 
+ * @returns 
+ */
+ export const saveFeedback = (data) => request('/taFeedback', { method: 'post', data })