问题咨询

h5_web/pages.json

@@ -378,8 +378,14 @@
 				"navigationBarBackgroundColor": "#3D5D4C",
 				"navigationBarTextStyle": "white"
 			}
-
-		}
+		}, {
+      "path": "pages/questionConsulting/questionConsulting",
+      "style": {
+        "navigationBarTitleText": "问题咨询",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    }
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

h5_web/pages/questionConsulting/questionConsulting.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="questionconsulting">
+    <u-navbar back-icon-name=""
+      title-color="#FFFFFF"
+      :border-bottom="false"
+      back-text="取消"
+      :back-text-style="backTextStyle"
+      :background="{background: '#3D5D4C' }"
+      title="问题咨询" />
+
+    <view class="questionconsulting-problemdesc">
+      <u-input v-model="problemDesc"
+        type="textarea"
+        :border="true"
+        :height="278"
+        :auto-height="true"
+        placeholder="请描述您关于学历提升相关的问题，尽可能详细，便于进行准确分析解答" />
+    </view>
+
+    <view class="questionconsulting-attachment">
+      <u-upload ref="questionUpload"
+        :action="action"
+        :auto-upload="true"
+        :custom-btn="true"
+        :show-upload-list="false"
+        max-count="3"
+        :limitType="['png', 'jpg']"
+        @on-success="questionUploadSuccess">
+        <view class="attachment-upload-box"
+          slot="addBtn">
+          <view class="attachment-upload">
+            <image src="../../static/svg/question-attachment-upload.svg"
+              mode="aspectFill" />
+            <view class="font">添加照片/视频</view>
+          </view>
+          <view class="tips">支持jpg.png格式</view>
+        </view>
+      </u-upload>
+      <view class="attachment-url" v-if="questionClearFiles.length > 0">
+        <view class="icon">
+          <u-icon name="close" color="#fff" size="16" @click="questionClearFile"></u-icon>
+        </view>
+        <image :src="questionClearFiles[0].filesUrl" mode=""/>
+      </view>
+    </view>
+
+    <view class="questionbtn">
+      <view class="questionbtn-container">
+        <view class="questionbtn-content">
+          <view>
+            <u-button type="primary"
+              @click="questionSubmitBtnClick"
+              class="questionsubmitbtn">提交</u-button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+				// 上传地址
+				action: this.config.uploadUrl,
+        problemDesc: '',
+        questionClearFiles: [],
+        backTextStyle: {
+          color: '#FFFFFF',
+          fontSize: '24rpx',
+          fontFamily: 'PingFangSC-Regular, PingFang SC',
+          fontWeight: 400,
+          lineHeight: '33rpx'
+        }
+      }
+    },
+    methods: {
+			/**
+			 * 上传附件成功
+			 */
+			questionUploadSuccess(e) {
+				this.questionClearFiles = []
+				this.questionClearFiles.push({ filesType: 6, filesUrl: e.data.url})
+			},
+			/**
+			 * 清空上传附件
+			 */
+			questionClearFile() {
+				uni.showModal({
+					title: '提示',
+					content: '您确定要删除此项吗？',
+					success: async (res) => {
+						if (res.confirm) {
+							this.questionClearFiles = [];
+						}
+					}
+				});
+			},
+    }
+  }
+</script>
+
+<style lang="scss"
+  scoped>
+  @import './scss/questionConsulting.scss'
+</style>

h5_web/pages/questionConsulting/scss/questionConsulting.scss

@@ -0,0 +1,135 @@
+.questionconsulting{
+  &-problemdesc{
+    padding: 28rpx 30rpx 50rpx;
+    
+    ::v-deep {
+      .uni-textarea-textarea{
+        // background-color: #F5F5F5;
+      }
+      
+      .uni-textarea-placeholder{
+        // font-size: 24rpx;
+        // font-family: PingFangSC-Regular, PingFang SC;
+        // font-weight: 400;
+        // color: #8C8C8C !important;
+        // line-height: 40rpx;
+        // letter-spacing: 1px;
+      }
+    }
+  }
+  
+  &-attachment{
+    padding: 0 30rpx;
+    display: flex;
+    
+    .attachment-upload {
+      width: 184rpx;
+      height: 184rpx;
+      border: solid 1px #BABABA;
+      border-radius: 5rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-right: 32rpx;
+      image {
+        width: 62rpx;
+        height: 62rpx;
+        vertical-align: middle;
+      }
+      .font {
+        color: #4B4B4B;
+        opacity: 0.8;
+        font-size: 22rpx;
+        line-height: 50rpx;
+      }
+    }
+    .attachment-photograph {
+      width: 184rpx;
+      height: 184rpx;
+      border: solid 1px #BABABA;
+      border-radius: 5rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      image {
+        width: 62rpx;
+        height: 48rpx;
+        vertical-align: middle;
+      }
+      .font {
+        color: #4B4B4B;
+        opacity: 0.8;
+        font-size: 22rpx;
+        line-height: 50rpx;
+      }
+    }
+    .tips {
+      color: #5F5F5F;
+      font-size: 20rpx;
+    }
+    .attachment-url {
+      width: 184rpx;
+      height: 184rpx;
+      margin-left: 32rpx;
+      position: relative;
+      image {
+        width: 100%;
+        height: 100%;
+        border-radius: 6rpx;
+      }
+      .icon {
+        position: absolute;
+        top: 10rpx;
+        right: 10rpx;
+        z-index: 1000;
+        width: 36rpx;
+        height: 36rpx;
+        line-height: 36rpx;
+        text-align: center;
+        border-radius: 82rpx;
+        background-color: rgb(253, 49, 48);
+      }
+    }
+  }
+  
+  
+  .questionbtn{
+    .questionbtn-container{
+      padding-bottom: env(safe-area-inset-bottom);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      z-index: 998;
+      box-sizing: content-box;
+      background-color: #FFFFFF;
+      
+      .questionbtn-content{
+        flex: 1;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 6px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        background-color: #FFFFFF;
+        
+        view:first-child{
+          width: 100%;
+          padding: 8rpx 30rpx;
+          
+          .questionsubmitbtn{
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

h5_web/static/svg/question-attachment-upload.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="62px" height="63px" viewBox="0 0 62 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状结合备份</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="问题咨询" transform="translate(-91.000000, -559.000000)" fill="#8E8E8E">
+            <path d="M124.5,559.5 L124.5,588 L153,588 L153,593 L124.5,593 L124.5,621.5 L119.5,621.5 L119.499,593 L91,593 L91,588 L119.5,588 L119.5,559.5 L124.5,559.5 Z" id="形状结合备份"></path>
+        </g>
+    </g>
+</svg>