uas手机版

  静态联系我们 用户反馈界面

uas-office-web/uas-mobile/src/components/private/profile/ProfileList.jsx

@@ -32,15 +32,25 @@ class ProfileList extends Component {
       <div className="mine-setting">
         <Item arrow="horizontal" extra={accountName} onClick={this.changeAccount}>切换账套</Item>
         <Item arrow="horizontal">清除缓存</Item>
-        <Item arrow="horizontal">用户反馈</Item>
-        <Item arrow="horizontal">联系我们</Item>
+        <Item arrow="horizontal" onClick={this.userFeedback}>用户反馈</Item>
+        <Item arrow="horizontal" onClick={this.contactInfo}>联系我们</Item>
       </div>
     )
   }
 
+  //切换账套
   changeAccount = () => {
     this.props.history.push('/changeAccount')
   }
+  //用户反馈
+  userFeedback = () => {
+    this.props.history.push('/userFeedback')
+  }
+  //联系我们
+  contactInfo = () => {
+    this.props.history.push('/contactInfo')
+  }
+
 }
 
 export default withRouter(ProfileList)

uas-office-web/uas-mobile/src/configs/router.config.js

@@ -64,9 +64,15 @@ const ServiceDetail = PageLoadable(
 const ServiceAdd = PageLoadable(
   import(/* webpackChunkName:'subscribe' */'@/pages/private/service/ServiceAdd'))
 
-/*************************************************切换账套************************************************/
+/*************************************************我的信息************************************************/
 const ChangeAccount = PageLoadable(
-  import(/* webpackChunkName:'changeaccount' */'@/pages/private/changeAccount/ChangeAccount'))
+  import(/* webpackChunkName:'mine' */'@/pages/private/mine/ChangeAccount'))
+
+const ContactInfo = PageLoadable(
+  import(/* webpackChunkName:'mine' */'@/pages/private/mine/ContactInfo'))
+
+const UserFeedback = PageLoadable(
+  import(/* webpackChunkName:'mine' */'@/pages/private/mine/UserFeedback'))
 
 /**
  * 自定义页面返回事件拦截框
@@ -152,9 +158,13 @@ class Routes extends React.Component {
           <Route path='/serviceAdd/:id/:caller/:title?'
                  component={ServiceAdd}/>
 
-          {/*************************************切换账套*****************************************/}
+          {/*************************************我的信息*****************************************/}
           {/*切换账套列表*/}
           <Route path='/changeAccount' component={ChangeAccount}/>
+          {/* 联系我们 */}
+          <Route path='/contactInfo' component={ContactInfo}/>
+          {/* 用户反馈 */}
+          <Route path='/userFeedback' component={UserFeedback}/>
 
           {/*所有错误路由跳转页面*/}
           <Route render={() => (

uas-office-web/uas-mobile/src/pages/private/mine/ContactInfo.jsx

@@ -0,0 +1,48 @@
+/**
+ * Created by Hujs on 2020/12/25
+ * Desc: 联系我们
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { Toast, List, Modal } from 'antd-mobile'
+import './contact-info.less'
+
+class ContactInfo extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {}
+  }
+
+  componentDidMount () {
+    document.title = this.title || '联系我们'
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    return (
+      <div className="contact—info">
+        <div className="info-box">
+          <p className="title">电话</p>
+          <p className="detail">400-830-1818</p>
+          <p className="title">Email</p>
+          <p className="detail">info@usoftchina.com</p>
+          <p className="title">优软科技官网</p>
+          <p className="detail">https://uas.usoftchina.com/</p>
+          <p className="title">地址</p>
+          <p className="detail">深圳市宝安区新安街道海旺社区宝兴路6号海纳百川总部大厦B座6、7楼</p>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(ContactInfo)

uas-office-web/uas-mobile/src/pages/private/mine/UserFeedback.jsx

@@ -0,0 +1,130 @@
+/**
+ * Created by Hujs on 2020/12/25
+ * Desc: 用户反馈
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { Toast, List, Modal, Button, TextareaItem } from 'antd-mobile'
+import { Upload, message } from 'antd'
+import {
+  EditOutlined,
+  LoadingOutlined,
+  PlusOutlined,
+} from '@ant-design/icons'
+import { _baseURL, _host, API } from '../../../configs/api.config'
+import './user-feedback.less'
+
+class UserFeedback extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {
+      inputValue: '',
+      loading: false,
+    }
+  }
+
+  componentDidMount () {
+    document.title = this.title || '用户反馈'
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    const { loading, imageUrl } = this.state
+    const uploadButton = (
+      <div>
+        {loading ? <LoadingOutlined/> : <PlusOutlined/>}
+        <div style={{ marginTop: 8 }}>上传图片</div>
+      </div>
+    )
+    return (
+      <div className="user-feedback">
+        <div className="feedback-input-panel">
+          <EditOutlined/> 反馈信息
+          <TextareaItem
+            rows={4}
+            placeholder="请输入您的问题...(400字以内)"
+            onChange={this.onTextChange}
+          />
+        </div>
+        <div className="upload-panel">
+          <Upload
+            name="avatar"
+            listType="picture-card"
+            className="avatar-uploader"
+            showUploadList={false}
+            action={_baseURL + '/mobile/uploadAttachs.action'}
+            beforeUpload={this.beforeUpload}
+            onChange={this.handleChange}
+          >
+            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }}/> : uploadButton}
+          </Upload>
+        </div>
+
+
+        <div className="feedback-btn-panel">
+          <Button
+            className='feedback-btn-panel-button'
+            type="primary"
+            onClick={this.onCommit}
+            inline>提交</Button>
+        </div>
+      </div>
+    )
+  }
+
+  //提交
+  onCommit = () => {
+  }
+
+  //反馈内容
+  onTextChange = (val) => {
+    this.setState({
+      inputValue: val,
+    })
+  }
+
+  getBase64 = (img, callback) => {
+    const reader = new FileReader()
+    reader.addEventListener('load', () => callback(reader.result))
+    reader.readAsDataURL(img)
+  }
+
+  beforeUpload = (file) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+    if (!isJpgOrPng) {
+      Toast.fail('请只上传JPG/PNG文件!')
+      return false
+    }
+    if (file.size && file.size > 100 * 1024 * 1024) {
+      Toast.fail('文件大小不能超过100M')
+      return false
+    }
+  }
+
+  handleChange = info => {
+    if (info.file.status === 'uploading') {
+      this.setState({ loading: true })
+      return
+    }
+    if (info.file.status === 'done') {
+      // Get this url from response in real world.
+      this.getBase64(info.file.originFileObj, imageUrl =>
+        this.setState({
+          imageUrl,
+          loading: false,
+        }),
+      )
+    }
+  }
+
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(UserFeedback)

uas-office-web/uas-mobile/src/pages/private/mine/contact-info.less

@@ -0,0 +1,27 @@
+.contact—info {
+  p {
+    margin: 0;
+  }
+
+  width: 100%;
+  height: 100vh;
+  position: relative;
+
+  .info-box {
+    width: 78%;
+    position: absolute;
+    top: 50px;
+    left: 50%;
+    transform: translate(-50%);
+
+    .title {
+      color: #333333;
+      font-size: 18px;
+      line-height: 36px;
+    }
+
+    .detail {
+      margin-bottom: 25px;
+    }
+  }
+}

uas-office-web/uas-mobile/src/pages/private/mine/user-feedback.less

@@ -0,0 +1,44 @@
+.user-feedback {
+  width: 100%;
+  height: 100vh;
+  background: #f5f5f9;
+  padding: 8px;
+
+  .feedback-input-panel {
+    background: #fff;
+    font-size: 14px;
+    padding-left: 6px;
+  }
+
+  .upload-panel {
+    background: #fff;
+
+    .ant-upload {
+      margin: 8px;
+    }
+  }
+
+  .feedback-btn-panel {
+    width: 100%;
+    background: #fff;
+    position: fixed;
+    bottom: 0px;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    justify-content: center;
+    padding-right: 12px;
+
+    .feedback-btn-panel-button {
+      flex: 1;
+      margin: 12px;
+      border: 1px solid #108ee9;
+
+      &:before {
+        border: none !important;
+      }
+    }
+
+  }
+}