update chat

chat/src/components/index.vue

@@ -1456,6 +1456,7 @@
 	}
 
 	.send img {
+		vertical-align: middle;
 		margin-right: 0.4rem;
 	}
 

chat/src/components/knowledgeLibrary.vue

@@ -1,711 +1,778 @@
 <template>
-  <div>
-    <!-- 留言知识库 -->
-    <div v-if="!flag">
-      <div class="header row item-center allAlignment">
-        <!-- 返回按钮 -->
-        <div style="height:100%;" @click="returnIndex" class="row item-center">
-          <img src="@/assets/return.png" style="height:.35rem;width:.35rem" />
-        </div>
-        <div>留言知识库</div>
-        <div></div>
-      </div>
-      <div class="serch row allAlignment">
-        <!-- 时间选择 -->
-        <div class="serchLeft">
-          <yd-accordion>
-            <yd-accordion-item :title="serchLeftClick">
-              <ul>
-                <li
-                  class="row center list"
-                  v-for="(item,index) in options"
-                  :key="index"
-                  @click="serchLeftClick = item.label,getAjax(item.value)"
-                >
-                  <p :class="serchLeftClick == item.label?'active':''">{{item.label}}</p>
-                </li>
-              </ul>
-            </yd-accordion-item>
-          </yd-accordion>
-        </div>
-        <!-- 搜索框 -->
-        <div class="serchBox row item-center">
-          <input type="text" v-model="serchInputValue"  placeholder="请输入关键词" />
-          <p style="padding:.22rem .2rem" @click="serchClick">
-            <img src="@/assets/serchImg.png" style="width:.24rem;height:.24rem;" />
-          </p>
-        </div>
-      </div>
-      <div class="main">
-        <div class="main-title row allAlignment bottomAlignment">
-          <div
-            v-for="(item) in typeList" :key="item.id"
-            class="main-title-list row center"
-            :class="mainTitle== item.name?'active':''"
-            @click="mainTitle =  item.name"
-          >{{item.name}}</div>
-        </div>
-        <div class="main-box">
-          <yd-accordion v-for="(item,index) in data" :key="index">
-            <yd-accordion-item v-if="item.type_name == mainTitle" :title="item.content">
-              <div slot="txt" style="color:#999;font-size:.24rem;">{{item.add_time}}</div>
-              <div style="color:#555;" class="chatContent">
-                <!-- 留言回复内容 -->
-                      <!-- 模拟客服 -->
-                <div class="contents row allAlignment">
-                  <div class="userPortrait">
-                    <img v-if="1" :src="require('@/assets/userPortrait1.png')" />
-                  </div>
-                  <div class="contentsCenter" :style="0?'text-align: right;':''">
-                    <div class="txt" :class="1?'left':'right'">您好！工号{{item.user_id}}为您服务，请问有什么需要帮助的吗？ <img v-if="item.image" :src="item.image" /></div>
-                  </div>
-                  <div class="userPortrait">
-                    <img v-if="0" :src="require('@/assets/userPortrait2.png')" />
-                  </div>
-                </div>
-                <!-- 模拟用户 -->
-                <div class="contents row allAlignment">
-                  <div class="userPortrait">
-                    <img v-if="0" :src="require('@/assets/userPortrait1.png')" />
-                  </div>
-                  <div class="contentsCenter" :style="1?'text-align: right;':''">
-                    <div class="txt" :class="0?'left':'right'">{{item.content}}</div>
-                  </div>
-                  <div class="userPortrait">
-                    <img v-if="1" :src="require('@/assets/userPortrait2.png')" />
-                  </div>
-                </div>
-                <!-- 模拟客服 -->
-                <div class="contents row allAlignment">
-                  <div class="userPortrait">
-                    <img v-if="1" :src="require('@/assets/userPortrait1.png')" />
-                  </div>
-                  <div class="contentsCenter" :style="0?'text-align: right;':''">
-                    <div class="txt" :class="1?'left':'right'">{{item.reply_content}} <img v-if="item.image" :src="item.image" /></div>
-                  </div>
-                  <div class="userPortrait">
-                    <img v-if="0" :src="require('@/assets/userPortrait2.png')" />
-                  </div>
-                </div>
-                <!-- 模拟系统消息 -->
-                <div class="system row center">{{item.dealWith_time}}</div>
-              </div>
-            </yd-accordion-item>
-          </yd-accordion>
-        </div>
-      </div>
-      <div class="main-bottom row center" @click="flag = true">发起留言</div>
-    </div>
-    <!-- 留言模块 -->
-    <div v-if="flag">
-      <div class="leave">
-        <div class="leave-header row item-center allAlignment">
-          <p>我要留言</p>
-          <img
-            style="width:.3rem;height:.3rem;"
-            @click="flag = false"
-            :src="require('@/assets/Service4.png')"
-          />
-        </div>
-        <div class="leave-main">
-          <div>
+	<div>
+		<!-- 留言知识库 -->
+		<div v-if="!flag">
+			<div class="header row item-center allAlignment">
+				<!-- 返回按钮 -->
+				<div style="height:100%;" @click="returnIndex" class="row item-center">
+					<img src="@/assets/return.png" style="height:.35rem;width:.35rem"/>
+				</div>
+				<div>留言知识库</div>
+				<div></div>
+			</div>
+			<div class="serch row allAlignment">
+				<!-- 时间选择 -->
+				<div class="serchLeft">
+					<yd-accordion>
+						<yd-accordion-item :title="serchLeftClick">
+							<ul>
+								<li
+										class="row center list"
+										v-for="(item,index) in options"
+										:key="index"
+										@click="serchLeftClick = item.label,getAjax(item.value)"
+								>
+									<p :class="serchLeftClick == item.label?'active':''">{{item.label}}</p>
+								</li>
+							</ul>
+						</yd-accordion-item>
+					</yd-accordion>
+				</div>
+				<!-- 搜索框 -->
+				<div class="serchBox row item-center">
+					<input type="text" v-model="serchInputValue" placeholder="请输入关键词"/>
+					<p style="padding:.22rem .2rem" @click="serchClick">
+						<img src="@/assets/serchImg.png" style="width:.24rem;height:.24rem;"/>
+					</p>
+				</div>
+			</div>
+			<div class="main">
+				<div class="main-title row allAlignment bottomAlignment">
+					<div
+							v-for="(item) in typeList" :key="item.id"
+							class="main-title-list row center"
+							:class="mainTitle== item.name?'active':''"
+							@click="mainTitle =  item.name"
+					>{{item.name}}
+					</div>
+				</div>
+				<div class="main-box">
+					<yd-accordion v-for="(item,index) in data" :key="index">
+						<yd-accordion-item v-if="item.type_name == mainTitle" :title="item.content">
+							<div slot="txt" style="color:#999;font-size:.24rem;">{{item.add_time}}</div>
+							<div style="color:#555;" class="chatContent">
+								<!-- 留言回复内容 -->
+								<!-- 模拟客服 -->
+								<div class="contents row allAlignment">
+									<div class="userPortrait">
+										<img v-if="1" :src="require('@/assets/userPortrait1.png')"/>
+									</div>
+									<div class="contentsCenter" :style="0?'text-align: right;':''">
+										<div class="txt" :class="1?'left':'right'">
+											您好！工号{{item.user_id}}为您服务，请问有什么需要帮助的吗？ <img v-if="item.image"
+																						:src="item.image"/></div>
+									</div>
+									<div class="userPortrait">
+										<img v-if="0" :src="require('@/assets/userPortrait2.png')"/>
+									</div>
+								</div>
+								<!-- 模拟用户 -->
+								<div class="contents row allAlignment">
+									<div class="userPortrait">
+										<img v-if="0" :src="require('@/assets/userPortrait1.png')"/>
+									</div>
+									<div class="contentsCenter" :style="1?'text-align: right;':''">
+										<div class="txt" :class="0?'left':'right'">{{item.content}}</div>
+									</div>
+									<div class="userPortrait">
+										<img v-if="1" :src="require('@/assets/userPortrait2.png')"/>
+									</div>
+								</div>
+								<!-- 模拟客服 -->
+								<div class="contents row allAlignment">
+									<div class="userPortrait">
+										<img v-if="1" :src="require('@/assets/userPortrait1.png')"/>
+									</div>
+									<div class="contentsCenter" :style="0?'text-align: right;':''">
+										<div class="txt" :class="1?'left':'right'">{{item.reply_content}} <img
+												v-if="item.image" :src="item.image"/></div>
+									</div>
+									<div class="userPortrait">
+										<img v-if="0" :src="require('@/assets/userPortrait2.png')"/>
+									</div>
+								</div>
+								<!-- 模拟系统消息 -->
+								<div class="system row center">{{item.dealWith_time}}</div>
+							</div>
+						</yd-accordion-item>
+					</yd-accordion>
+				</div>
+			</div>
+			<div class="main-bottom row center" @click="flag = true">发起留言</div>
+		</div>
+		<!-- 留言模块 -->
+		<div v-if="flag">
+			<div class="leave">
+				<div class="leave-header row item-center allAlignment">
+					<p>我要留言</p>
+					<img
+							style="width:.3rem;height:.3rem;"
+							@click="flag = false"
+							:src="require('@/assets/Service4.png')"
+					/>
+				</div>
+				<div class="leave-main">
+					<div>
             <span style="color:#666;">
               您的称呼
               <i style="color:#F04992">*</i>
             </span>
-            <b style="color:#F04992">{{formText.call}}</b>
-            <br />
-            <input type="text" @focus="leave.call = ''" @blur="leave.call ? '': formText.call = '称呼不能为空' " v-model="leave.call" />
-          </div>
-          <div>
+						<b style="color:#F04992">{{formText.call}}</b>
+						<br/>
+						<input type="text" @focus="leave.call = ''" @blur="leave.call ? '': formText.call = '称呼不能为空' "
+							   v-model="leave.call"/>
+					</div>
+					<div>
             <span style="color:#666;">
               您的手机号
               <i style="color:#F04992">*</i>
             </span>
-            <b style="color:#F04992">{{formText.phone}}</b>
-            <br />
-            <input type="text" @focus="formText.phone = ''" @blur="phoneBlur()" v-model="leave.phone" />
-          </div>
-          <div>
+						<b style="color:#F04992">{{formText.phone}}</b>
+						<br/>
+						<input type="text" @focus="formText.phone = ''" @blur="phoneBlur()" v-model="leave.phone"/>
+					</div>
+					<div>
             <span style="color:#666;">
               您的邮箱地址
-              <i style="color:#F04992">*</i>
+				<!--              <i style="color:#F04992">*</i>-->
             </span>
-            <b style="color:#F04992">{{formText.email}}</b>
-            <br />
-            <input type="email" @blur="emailBlur()" v-model="leave.email" />
-          </div>
-          <p>
+						<b style="color:#F04992">{{formText.email}}</b>
+						<br/>
+						<input type="email" v-model="leave.email"/>
+					</div>
+					<p>
             <span style="color:#666;">
               您的留言信息
               <i style="color:#F04992">*</i>
             </span>
-            <b style="color:#F04992">{{formText.describe}}</b>
-            <br />
-            <textarea class="leave-main-txt" v-model="leave.describe" @focus="leave.describe = ''" @blur="leave.describe ? '': formText.describe = '留言内容不能为空'" style="margin-top:.1rem;width:100%;height:1.6rem"></textarea>
-          </p>
-          <div style="height:2.2rem;margin-top:.3rem;overflow-x: hidden;overflow-y: auto;">
+						<b style="color:#F04992">{{formText.describe}}</b>
+						<br/>
+						<textarea class="leave-main-txt" v-model="leave.describe" @focus="leave.describe = ''"
+								  @blur="leave.describe ? '': formText.describe = '留言内容不能为空'"
+								  style="margin-top:.1rem;width:100%;height:1.6rem"></textarea>
+					</p>
+					<div style="height:2.2rem;margin-top:.3rem;overflow-x: hidden;overflow-y: auto;">
             <span style="color:#666;">
               您的图片预览
               <i style="color:#F04992">*</i>
             </span>
-            <b style="color:#F04992">（单次最多4张图片）</b>
-            <br />
-            <section class="imgMsg row item-center" style="margin-bottom:.1rem;">
-              <div
-                style="height:100%;"
-                :style="imgSrcList.length==4?'width:100%;':''"
-                class="row allAlignment"
-              >
-                <div
-                  class="row center"
-                  style="width:1.4rem;height:1.4rem"
-                  v-for="(item,index) in imgSrcList"
-                  :key="index"
-                >
-                  <img
-                    @click="leaveImgDel(index)"
-                    style="max-height:1.2rem;max-width:1.2rem;"
-                    :src="item.imgSrc"
-                  />
-                </div>
-              </div>
-              <input
-                type="file"
-                accept="image/jpeg, image/jpg, image/png, image/svg"
-                id="fileBtn"
-                @change="leaveFile($event)"
-                style="display:none;"
-              />
-              <label
-                v-if="imgSrcList.length<4"
-                for="fileBtn"
-                class="row center"
-                style="width:.8rem;height:.8rem;border:.02rem solid #ccc;border-radius: .1rem;background:#fff;color:#999;font-size:.5rem;margin-left:.3rem"
-              >+</label>
-            </section>
-          </div>
-          <input type="file" id="fileBtn" @change="leaveFile($event)" style="display:none;" />
-          <label
-            for="fileBtn"
-            class="row center"
-            style="width:100%;height:.8rem;border:.01rem solid #ddd;border-radius: .1rem;background:#fff;color:#999;"
-          >上传图片</label>
-          <button
-            style="background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);box-shadow:0 .03rem .03rem rgba(0,0,0,0.2);border-radius:.1rem;height:1rem;width:100%;border:none;font-size:.34rem;color:#fff;margin-top:.17rem;"
-            @click="leaveSubmit"
-          >提交留言</button>
-        </div>
-      </div>
-    </div>
-  </div>
+						<b style="color:#F04992">（单次最多4张图片）</b>
+						<br/>
+						<section class="imgMsg row item-center" style="margin-bottom:.1rem;">
+							<div
+									style="height:100%;"
+									:style="imgSrcList.length==4?'width:100%;':''"
+									class="row allAlignment"
+							>
+								<div
+										class="row center"
+										style="width:1.4rem;height:1.4rem"
+										v-for="(item,index) in imgSrcList"
+										:key="index"
+								>
+									<img
+											@click="leaveImgDel(index)"
+											style="max-height:1.2rem;max-width:1.2rem;"
+											:src="item.imgSrc"
+									/>
+								</div>
+							</div>
+							<input
+									type="file"
+									accept="image/jpeg, image/jpg, image/png, image/svg"
+									id="fileBtn"
+									@change="leaveFile($event)"
+									style="display:none;"
+							/>
+							<label
+									v-if="imgSrcList.length<4"
+									for="fileBtn"
+									class="row center"
+									style="width:.8rem;height:.8rem;border:.02rem solid #ccc;border-radius: .1rem;background:#fff;color:#999;font-size:.5rem;margin-left:.3rem"
+							>+</label>
+						</section>
+					</div>
+					<input type="file" id="fileBtn" @change="leaveFile($event)" style="display:none;"/>
+					<label
+							for="fileBtn"
+							class="row center"
+							style="width:100%;height:.8rem;border:.01rem solid #ddd;border-radius: .1rem;background:#fff;color:#999;"
+					>上传图片</label>
+					<button
+							style="background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);box-shadow:0 .03rem .03rem rgba(0,0,0,0.2);border-radius:.1rem;height:1rem;width:100%;border:none;font-size:.34rem;color:#fff;margin-top:.17rem;"
+							@click="leaveSubmit"
+					>提交留言
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-export default {
-  name: "knowledgeLibrary",
-  data() {
-    return {
-      data:'',//留言数据
-      flag: false, //留言和知识库开关
-      options: [
-        {
-          value: "week",
-          label: "最近一周"
-        },
-        {
-          value: "oneMonth",
-          label: "最近一个月"
-        },
-        {
-          value: "threeMonth",
-          label: "最近三个月"
-        }
-      ],
-      typeList:'',//留言知识库类型
-      serchLeftClick: "最近一周", //时间选择开关
-      mainTitle: "充值", // 留言知识库开关
-      //用户留言信息
-      leave: {
-        call: "", //称呼
-        phone: "", //手机号
-        email: "", //邮箱
-        describe: "", //留言描述问题
-        imgArr: [],// 上传的图片地址
-      },
-      formText:{  //表单验证错误提示
-        phone:'',
-        email:'',
-        describe:'',
-        call:'',
-      },
-      imgSrcList: [], //上传图片列表
-      serchInputValue: "", //搜索输入框的值
-      setImgList:[],//上传图片
-    };
-  },
-  props: ["currentTime"],
-  methods: {
-    // 设置apiToken
-    setApiToken(name, controller, time, modules) {
-      let txetVal = name + "customer-service" + controller + time + modules;
-      // let sssd = txetVal.toLowerCase();
-      // console.log(sssd);
-      return this.$md5(txetVal.toLowerCase());
-    },
-    //   返回上级 子传父
-    returnIndex() {
-      this.$emit("returnIndex", false);
-    },
-
-    /*******************************************/
-    // 留言图片删除
-    leaveImgDel(i) {
-      this.$dialog.confirm({
-        title: "删除图片",
-        mes: "你确定要删除吗？",
-        opts: () => {
-          this.imgSrcList.splice(i, 1);
-        }
-      });
-    },
-
-    /*******************************************/
-    // 用户留言上传图片
-    leaveFile(e) {
-      let self = this;
-      let files = e.target.files || e.dataTransfer.files;
-      if (!files.length) return;
-      let picavalue = files[0];
-      // console.log(picavalue.type == "image/png");
-      if (picavalue.size / 1024 > 5000) {
-        this.$message({
-          message: "图片过大不支持上传",
-          type: "warning"
-        });
-      } else {
-        this.$public.imgPreview(picavalue, function(imgSrc, config, formData) {
-          console.log(imgSrc,'a',config,'b',formData,);
-          let obj = {
-              imgSrc,
-              config,
-              formData
-          }
-          self.imgSrcList.push(obj);
-          self.setImgList.push(config)
-        });
-      }
-    },
-    // 留言知识库数据获取
-    getAjax(val = "week") {
-      // /index/Message/index
-      console.log(val,'213')
-      let obj = {
-        headers: {
-          apiToken: this.setApiToken("index","message",this.currentTime[0],"index")
-        }
-      };
-      this.post(
-        "api/index/Message/index",
-        {
-          time: val,
-          key:this.serchInputValue,
-        },
-        obj
-      ).then(res => {
-        if(res.data.status == 1){
-          this.data = res.data.data
-          if(this.data.length == 0){
-            this.$dialog.toast({mes: '当前没有你要的内容，请发起留言',timeout: 1500});
-          }
-          console.log(this.data)
-        }
-      });
-    },
-    // 留言知识库类型获取
-    getAjaxType(){
-       let obj = {
-        headers: {
-          apiToken: this.setApiToken("type","message",this.currentTime[0],"index")
-        }
-      }
-      this.post('api/index/Message/type',{},obj).then((res)=>{
-        if(res.data.status == 1){
-          this.typeList = res.data.data
-        }
-        console.log(res)
-      })
-    },
-    // 留言信息提交
-    leaveSubmit() {
-      console.log(this.imgSrcList,'aaa')
-      let obj = {
-        headers: {
-          apiToken: this.setApiToken("LeavingMessage","User",this.currentTime[0],"index")
-        }
-      }
-      this.post('api/index/User/LeavingMessage',{
-        name:this.leave.call,
-        email:this.leave.email,
-        content:this.leave.describe,
-        phone:this.leave.phone,
-        file:this.setImgList,
-        qq:'',
-        wechat:'',
-      },obj).then((res)=>{
-        console.log(res)
-      })
-      this.flag = false;
-    },
-    // 搜索按钮被点击
-    serchClick() {
-      // 如果输入框的值存在就调用接口
-      if (this.serchInputValue.length>0) {
-        this.getAjax()
-      }else{
-        this.serchInputValue = '';
-        this.getAjax()
-        this.$dialog.toast({mes: '请输入关键词再搜索',timeout: 1500});
-      }
-    },
-    // 验证手机号
-    phoneBlur(){
-      if(!(/^1[3456789]\d{9}$/.test(this.leave.phone))){ 
-        this.leave.phone = ''
-       this.formText.phone = "手机号码有误，请重填"
-      } 
-    },
-    // 验证邮箱
-    emailBlur(){
-      if(!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.leave.email))){
-        this.leave.email = ''
-        this.formText.email = "邮箱格式错误，请重填"
-      }
-    }
-  },
-  mounted() {
-    this.getAjaxType()
-    this.getAjax();
-  }
-};
+	export default {
+		name: "knowledgeLibrary",
+		data() {
+			return {
+				data: '',//留言数据
+				flag: false, //留言和知识库开关
+				options: [
+					{
+						value: "week",
+						label: "最近一周"
+					},
+					{
+						value: "oneMonth",
+						label: "最近一个月"
+					},
+					{
+						value: "threeMonth",
+						label: "最近三个月"
+					}
+				],
+				typeList: '',//留言知识库类型
+				serchLeftClick: "最近一周", //时间选择开关
+				mainTitle: "充值", // 留言知识库开关
+				//用户留言信息
+				leave: {
+					call: "", //称呼
+					phone: "", //手机号
+					email: "", //邮箱
+					describe: "", //留言描述问题
+					imgArr: [],// 上传的图片地址
+				},
+				formText: {  //表单验证错误提示
+					phone: '',
+					email: '',
+					describe: '',
+					call: '',
+				},
+				imgSrcList: [], //上传图片列表
+				serchInputValue: "", //搜索输入框的值
+				setImgList: [],//上传图片
+			};
+		},
+		props: ["currentTime"],
+		methods: {
+			// 设置apiToken
+			setApiToken(name, controller, time, modules) {
+				let txetVal = name + "customer-service" + controller + time + modules;
+				// let sssd = txetVal.toLowerCase();
+				// console.log(sssd);
+				return this.$md5(txetVal.toLowerCase());
+			},
+			//   返回上级 子传父
+			returnIndex() {
+				this.$emit("returnIndex", false);
+			},
+
+			/*******************************************/
+			// 留言图片删除
+			leaveImgDel(i) {
+				this.$dialog.confirm({
+					title: "删除图片",
+					mes: "你确定要删除吗？",
+					opts: () => {
+						this.imgSrcList.splice(i, 1);
+					}
+				});
+			},
+
+			/*******************************************/
+			// 用户留言上传图片
+			leaveFile(e) {
+				let self = this;
+				let files = e.target.files || e.dataTransfer.files;
+				if (!files.length) return;
+				let picavalue = files[0];
+				// console.log(picavalue.type == "image/png");
+				if (picavalue.size / 1024 > 5000) {
+					this.$message({
+						message: "图片过大不支持上传",
+						type: "warning"
+					});
+				} else {
+					this.$public.imgPreview(picavalue, function (imgSrc, formData) {
+						console.log(imgSrc);
+						let obj = {
+							imgSrc,
+							formData
+						}
+						self.imgSrcList.push(obj);
+						self.setImgList.push(formData.get("file"))
+
+					});
+				}
+			},
+			// 留言知识库数据获取
+			getAjax(val = "week") {
+				// /index/Message/index
+				console.log(val, '213')
+				let obj = {
+					headers: {
+						apiToken: this.setApiToken("index", "message", this.currentTime[0], "index")
+					}
+				};
+				this.post("api/index/Message/index", {
+				        time: val,
+						key: this.serchInputValue,
+					},
+					obj
+				).then(res => {
+					if (res.data.status == 1) {
+						this.data = res.data.data
+						if (this.data.length == 0) {
+							this.$dialog.toast({mes: '当前没有你要的内容，请发起留言', timeout: 1500});
+						}
+						console.log(this.data)
+					}
+				});
+			},
+			// 留言知识库类型获取
+			getAjaxType() {
+				let obj = {
+					headers: {
+						apiToken: this.setApiToken("type", "message", this.currentTime[0], "index")
+					}
+				}
+				this.post('api/index/Message/type', {}, obj).then((res) => {
+					if (res.data.status == 1) {
+						this.typeList = res.data.data
+					}
+					console.log(res)
+				})
+			},
+			// 留言信息提交
+			leaveSubmit() {
+
+				if (this.leave.call == '') {
+					this.$dialog.toast({mes: '请填写称呼', timeout: 1500});
+				} else if (this.leave.phone == '') {
+					this.$dialog.toast({mes: '请填写手机号!', timeout: 1500});
+				} else if (this.leave.describe == '') {
+					this.$dialog.toast({mes: '请填写留言信息!', timeout: 1500});
+				} else {
+					let obj = {
+						headers: {
+							apiToken: this.setApiToken("LeavingMessage", "User", this.currentTime[0], "index")
+						}
+					}
+					let formData = new FormData();
+					formData.append("file",this.setImgList);
+					formData.append("name",this.leave.call);
+					formData.append("email",this.leave.email);
+					formData.append("describe",this.leave.describe);
+					formData.append("phone",this.leave.phone);
+					this.post('api/index/User/LeavingMessage', formData, obj).then((res) => {
+						console.log(res)
+					})
+					this.flag = false;
+				}
+
+			},
+			// 搜索按钮被点击
+			serchClick() {
+				// 如果输入框的值存在就调用接口
+				if (this.serchInputValue.length > 0) {
+					this.getAjax()
+				} else {
+					this.serchInputValue = '';
+					this.getAjax()
+					this.$dialog.toast({mes: '请输入关键词再搜索', timeout: 1500});
+				}
+			},
+			// 验证手机号
+			phoneBlur() {
+				if (!(/^1[3456789]\d{9}$/.test(this.leave.phone))) {
+					this.leave.phone = ''
+					this.formText.phone = "手机号码有误，请重填"
+				}
+			},
+			// 验证邮箱
+			// emailBlur(){
+			//   if(!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.leave.email))){
+			//     this.leave.email = ''
+			//     this.formText.email = "邮箱格式错误，请重填"
+			//   }
+			// }
+		},
+		mounted() {
+			this.getAjaxType()
+			this.getAjax();
+		}
+	};
 </script>
 
 <style scoped>
-/* 留言知识库 */
-.header {
-  height: 1rem;
-  background: linear-gradient(
-    90deg,
-    rgba(22, 84, 209, 1) 0%,
-    rgba(9, 52, 173, 1) 100%
-  );
-  box-shadow: 0px 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
-  color: #fff;
-  font-size: 0.34rem;
-  padding: 0 0.3rem;
-}
-.serch {
-  padding: 0.3rem;
-}
-.serchLeft {
-  position: relative;
-  width: 2.2rem;
-  height: 0.8rem;
-}
-.serchLeft div /deep/ .yd-accordion-head {
-  padding: 0.2rem;
-  border: 0.02rem solid #ddd;
-  border-radius: 0.1rem;
-  height: 0.8rem;
-}
-.serchLeft div /deep/ .yd-accordion-title,
-.serchLeft div /deep/ .yd-accordion-head-arrow {
-  display: flex;
-  min-height: 0rem !important;
-  align-items: center;
-  font-size: 0.28rem;
-}
-.serchLeft div /deep/ .yd-accordion-head:after {
-  display: none;
-}
-.serchLeft div /deep/ .yd-accordion-content:after {
-  display: none;
-}
-.serchLeft div /deep/ .yd-accordion-head-arrow:after {
-  width: 0.22rem;
-  height: 0.22rem;
-  background: url("../assets/bottom.png");
-  background-size: 100% 100%;
-}
-.serchLeft div /deep/ .yd-accordion-head-arrow.yd-accordion-rotated:after {
-  transform: rotate(180deg);
-}
-.serchLeft div /deep/ .yd-accordion-content {
-  position: absolute;
-  left: 0;
-  top: 0.84rem;
-  z-index: 99;
-  border-radius: 0 0 0.1rem 0.1rem;
-}
-.list {
-  width: 2.2rem;
-  height: 0.6rem;
-  background: #fff;
-  padding: 0 0.2rem;
-}
-.list p {
-  width: 100%;
-  font-size: 0.26rem;
-  text-align: center;
-  border-bottom: 0.01rem solid #ddd;
-  line-height: 0.6rem;
-}
-.list p.active {
-  color: #5ea0f7;
-}
-.serchBox {
-  width: 4.5rem;
-  height: 0.8rem;
-  border-radius: 0.1rem;
-  background: #fff;
-  border: 0.02rem solid #ddd;
-}
-.serchBox input {
-  width: 100%;
-  height: 100%;
-  border: none;
-  padding: 0.2rem;
-  font-size: 0.28rem;
-  color: #999;
-}
-.serchBox input:focus {
-  color: #666;
-}
-.serchBox input::placeholder {
-  color: #999;
-}
-.main {
-  padding: 0 0.3rem;
-}
-.main-title {
-  height: 0.8rem;
-  background: #5ea0f7;
-  color: #fff;
-  border-radius: 0.1rem 0.1rem 0 0;
-  padding: 0 0.1rem;
-}
-.main-title-list {
-  width: 1.46rem;
-  height: 0.7rem;
-  border-radius: 0.1rem 0.1rem 0 0;
-  font-size: 0.28rem;
-}
-.main-title-list.active {
-  background: #fff;
-  color: #5ea0f7;
-}
-.main {
-  height: 68vh;
-}
-.main-box {
-  height: 90%;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.main-box div /deep/ .yd-accordion-head-content {
-  justify-content: space-between;
-  padding-right: 0.3rem;
-}
-.main-box div /deep/ .yd-accordion-title {
-  max-width: 80%;
-  color: #666;
-  font-size: 0.26rem;
-}
-.main-box div /deep/ .yd-accordion-title span {
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-div /deep/ .yd-accordion-head-content {
-  width: 80%;
-}
-div /deep/ .yd-accordion-content {
-  border-radius: 0;
-}
-div /deep/ .yd-accordion {
-  border-radius: 0;
-  border-top: none;
-}
-div /deep/ .yd-accordion-head {
-  border: 0.02rem solid #ddd;
-  border-top: none;
-}
-.main-bottom {
-  background: linear-gradient(
-    90deg,
-    rgba(22, 84, 209, 1) 0%,
-    rgba(9, 52, 173, 1) 100%
-  );
-  box-shadow: 0px 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
-  border-radius: 0.1rem;
-  font-size: 0.34rem;
-  color: #fff;
-  height: 1rem;
-  margin: 0.3rem;
-}
-.chatContent {
-  background: #f5f5f5;
-  border: 0.02rem solid #ddd;
-  border-top: none;
-  padding: 0.3rem 0.2rem;
-}
-.userPortrait {
-  width: 1rem;
-  height: 1rem;
-}
-.userPortrait img {
-  width: 100%;
-  height: 100%;
-}
-.contentsCenter {
-  width: 69%;
-}
-.contents {
-  margin-top: 0.3rem;
-}
-.txt {
-  padding: 0.2rem;
-  border-radius: 0.1rem;
-  display: inline-block;
-  font-size: 0.28rem;
-  max-width: 92.5%;
-  word-wrap: break-word;
-  position: relative;
-}
-.left {
-  color: #555;
-  margin-left: 0.3rem;
-  border: 0.01rem solid #dfdfdf;
-  background: #fff;
-}
-.left::after {
-  position: absolute;
-  content: "";
-  display: inline-block;
-  left: -0.08rem;
-  top: 0.2rem;
-  width: 0.125rem;
-  height: 0.2rem;
-  background: #fff;
-  transform: skewX(30deg);
-  border-left: 0.02rem solid #dfdfdf;
-  border-top: 0.02rem solid #dfdfdf;
-}
-.right {
-  color: #fff;
-  margin-right: 0.3rem;
-  background: #5ea0f7;
-}
-.right::after {
-  position: absolute;
-  content: "";
-  display: inline-block;
-  right: -0.06rem;
-  top: 0.2rem;
-  width: 0.125rem;
-  height: 0.2rem;
-  background: #5ea0f7;
-  transform: skewX(-30deg);
-}
-.system {
-  font-size: 0.24rem;
-  color: #bbb;
-  margin-top: 0.3rem;
-}
-div /deep/ .yd-tab-nav .yd-tab-active:before {
-  content: none;
-  display: none;
-}
-
-/* 
-*留言模块
-*/
-.leave-header {
-  height: 1rem;
-  background: linear-gradient(
-    90deg,
-    rgba(22, 84, 209, 1) 0%,
-    rgba(9, 52, 173, 1) 100%
-  );
-  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
-  color: #fff;
-  font-size: 0.34rem;
-  padding: 0 0.3rem;
-}
-.leave-main {
-  height: 10rem;
-  background: #f5f5f5;
-  font-size: 0.28rem;
-  padding: 0.3rem 0.3rem 0.2rem 0.3rem;
-}
-.leave-main > div {
-  height: 1.3rem;
-  margin-bottom: 0.2rem;
-}
-.leave-main > div input {
-  height: 0.8rem;
-  border: 0.01rem solid #ddd;
-  border-radius: 0.1rem;
-  background: #fff;
-  padding: 0.2rem;
-  width: 100%;
-  margin-top: 0.1rem;
-}
-.leave-main-txt {
-  background: #fff;
-  padding: 0.2rem;
-  border: 0.01rem solid #ddd;
-  border-radius: 0.1rem;
-}
-.imgMsg {
-  height: 1.5rem;
-  padding: 0 0.2rem;
-  margin-top: 0.1rem;
-  font-size: 0.24rem;
-  background: #fff;
-  border: 0.01rem solid #ddd;
-  border-radius: 0.1rem;
-}
-.yd-cell-box {
-  width: 60%;
-  min-height: 1.2rem;
-
-  border: none;
-  padding-right: 0.3rem;
-  padding-left: 0.3rem;
-}
-div /deep/ .yd-textarea > textarea {
-  box-sizing: border-box;
-  height: auto;
-  min-height: 1.2rem;
-  font-size: 0.28rem;
-  padding-top: 0.4rem;
-}
-.yd-textarea {
-  padding: 0;
-}
-.yd-cell-box {
-  margin: 0;
-}
-.yd-cell-item {
-  padding: 0;
-}
-div /deep/ .yd-cell:after {
-  height: 0;
-}
-div /deep/ .yd-textarea-counter {
-  display: none;
-}
+	/* 留言知识库 */
+	.header {
+		height: 1rem;
+		background: linear-gradient(
+				90deg,
+				rgba(22, 84, 209, 1) 0%,
+				rgba(9, 52, 173, 1) 100%
+		);
+		box-shadow: 0px 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
+		color: #fff;
+		font-size: 0.34rem;
+		padding: 0 0.3rem;
+	}
+
+	.serch {
+		padding: 0.3rem;
+	}
+
+	.serchLeft {
+		position: relative;
+		width: 2.2rem;
+		height: 0.8rem;
+	}
+
+	.serchLeft div /deep/ .yd-accordion-head {
+		padding: 0.2rem;
+		border: 0.02rem solid #ddd;
+		border-radius: 0.1rem;
+		height: 0.8rem;
+	}
+
+	.serchLeft div /deep/ .yd-accordion-title,
+	.serchLeft div /deep/ .yd-accordion-head-arrow {
+		display: flex;
+		min-height: 0rem !important;
+		align-items: center;
+		font-size: 0.28rem;
+	}
+
+	.serchLeft div /deep/ .yd-accordion-head:after {
+		display: none;
+	}
+
+	.serchLeft div /deep/ .yd-accordion-content:after {
+		display: none;
+	}
+
+	.serchLeft div /deep/ .yd-accordion-head-arrow:after {
+		width: 0.22rem;
+		height: 0.22rem;
+		background: url("../assets/bottom.png");
+		background-size: 100% 100%;
+	}
+
+	.serchLeft div /deep/ .yd-accordion-head-arrow.yd-accordion-rotated:after {
+		transform: rotate(180deg);
+	}
+
+	.serchLeft div /deep/ .yd-accordion-content {
+		position: absolute;
+		left: 0;
+		top: 0.84rem;
+		z-index: 99;
+		border-radius: 0 0 0.1rem 0.1rem;
+	}
+
+	.list {
+		width: 2.2rem;
+		height: 0.6rem;
+		background: #fff;
+		padding: 0 0.2rem;
+	}
+
+	.list p {
+		width: 100%;
+		font-size: 0.26rem;
+		text-align: center;
+		border-bottom: 0.01rem solid #ddd;
+		line-height: 0.6rem;
+	}
+
+	.list p.active {
+		color: #5ea0f7;
+	}
+
+	.serchBox {
+		width: 4.5rem;
+		height: 0.8rem;
+		border-radius: 0.1rem;
+		background: #fff;
+		border: 0.02rem solid #ddd;
+	}
+
+	.serchBox input {
+		width: 100%;
+		height: 100%;
+		border: none;
+		padding: 0.2rem;
+		font-size: 0.28rem;
+		color: #999;
+	}
+
+	.serchBox input:focus {
+		color: #666;
+	}
+
+	.serchBox input::placeholder {
+		color: #999;
+	}
+
+	.main {
+		padding: 0 0.3rem;
+	}
+
+	.main-title {
+		height: 0.8rem;
+		background: #5ea0f7;
+		color: #fff;
+		border-radius: 0.1rem 0.1rem 0 0;
+		padding: 0 0.1rem;
+	}
+
+	.main-title-list {
+		width: 1.46rem;
+		height: 0.7rem;
+		border-radius: 0.1rem 0.1rem 0 0;
+		font-size: 0.28rem;
+	}
+
+	.main-title-list.active {
+		background: #fff;
+		color: #5ea0f7;
+	}
+
+	.main {
+		height: 68vh;
+	}
+
+	.main-box {
+		height: 90%;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	.main-box div /deep/ .yd-accordion-head-content {
+		justify-content: space-between;
+		padding-right: 0.3rem;
+	}
+
+	.main-box div /deep/ .yd-accordion-title {
+		max-width: 80%;
+		color: #666;
+		font-size: 0.26rem;
+	}
+
+	.main-box div /deep/ .yd-accordion-title span {
+		display: inline-block;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	div /deep/ .yd-accordion-head-content {
+		width: 80%;
+	}
+
+	div /deep/ .yd-accordion-content {
+		border-radius: 0;
+	}
+
+	div /deep/ .yd-accordion {
+		border-radius: 0;
+		border-top: none;
+	}
+
+	div /deep/ .yd-accordion-head {
+		border: 0.02rem solid #ddd;
+		border-top: none;
+	}
+
+	.main-bottom {
+		background: linear-gradient(
+				90deg,
+				rgba(22, 84, 209, 1) 0%,
+				rgba(9, 52, 173, 1) 100%
+		);
+		box-shadow: 0px 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
+		border-radius: 0.1rem;
+		font-size: 0.34rem;
+		color: #fff;
+		height: 1rem;
+		margin: 0.3rem;
+	}
+
+	.chatContent {
+		background: #f5f5f5;
+		border: 0.02rem solid #ddd;
+		border-top: none;
+		padding: 0.3rem 0.2rem;
+	}
+
+	.userPortrait {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.userPortrait img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.contentsCenter {
+		width: 69%;
+	}
+
+	.contents {
+		margin-top: 0.3rem;
+	}
+
+	.txt {
+		padding: 0.2rem;
+		border-radius: 0.1rem;
+		display: inline-block;
+		font-size: 0.28rem;
+		max-width: 92.5%;
+		word-wrap: break-word;
+		position: relative;
+	}
+
+	.left {
+		color: #555;
+		margin-left: 0.3rem;
+		border: 0.01rem solid #dfdfdf;
+		background: #fff;
+	}
+
+	.left::after {
+		position: absolute;
+		content: "";
+		display: inline-block;
+		left: -0.08rem;
+		top: 0.2rem;
+		width: 0.125rem;
+		height: 0.2rem;
+		background: #fff;
+		transform: skewX(30deg);
+		border-left: 0.02rem solid #dfdfdf;
+		border-top: 0.02rem solid #dfdfdf;
+	}
+
+	.right {
+		color: #fff;
+		margin-right: 0.3rem;
+		background: #5ea0f7;
+	}
+
+	.right::after {
+		position: absolute;
+		content: "";
+		display: inline-block;
+		right: -0.06rem;
+		top: 0.2rem;
+		width: 0.125rem;
+		height: 0.2rem;
+		background: #5ea0f7;
+		transform: skewX(-30deg);
+	}
+
+	.system {
+		font-size: 0.24rem;
+		color: #bbb;
+		margin-top: 0.3rem;
+	}
+
+	div /deep/ .yd-tab-nav .yd-tab-active:before {
+		content: none;
+		display: none;
+	}
+
+	/*
+	*留言模块
+	*/
+	.leave-header {
+		height: 1rem;
+		background: linear-gradient(
+				90deg,
+				rgba(22, 84, 209, 1) 0%,
+				rgba(9, 52, 173, 1) 100%
+		);
+		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
+		color: #fff;
+		font-size: 0.34rem;
+		padding: 0 0.3rem;
+	}
+
+	.leave-main {
+		height: 10rem;
+		background: #f5f5f5;
+		font-size: 0.28rem;
+		padding: 0.3rem 0.3rem 0.2rem 0.3rem;
+	}
+
+	.leave-main > div {
+		height: 1.3rem;
+		margin-bottom: 0.2rem;
+	}
+
+	.leave-main > div input {
+		height: 0.8rem;
+		border: 0.01rem solid #ddd;
+		border-radius: 0.1rem;
+		background: #fff;
+		padding: 0.2rem;
+		width: 100%;
+		margin-top: 0.1rem;
+	}
+
+	.leave-main-txt {
+		background: #fff;
+		padding: 0.2rem;
+		border: 0.01rem solid #ddd;
+		border-radius: 0.1rem;
+	}
+
+	.imgMsg {
+		height: 1.5rem;
+		padding: 0 0.2rem;
+		margin-top: 0.1rem;
+		font-size: 0.24rem;
+		background: #fff;
+		border: 0.01rem solid #ddd;
+		border-radius: 0.1rem;
+	}
+
+	.yd-cell-box {
+		width: 60%;
+		min-height: 1.2rem;
+
+		border: none;
+		padding-right: 0.3rem;
+		padding-left: 0.3rem;
+	}
+
+	div /deep/ .yd-textarea > textarea {
+		box-sizing: border-box;
+		height: auto;
+		min-height: 1.2rem;
+		font-size: 0.28rem;
+		padding-top: 0.4rem;
+	}
+
+	.yd-textarea {
+		padding: 0;
+	}
+
+	.yd-cell-box {
+		margin: 0;
+	}
+
+	.yd-cell-item {
+		padding: 0;
+	}
+
+	div /deep/ .yd-cell:after {
+		height: 0;
+	}
+
+	div /deep/ .yd-textarea-counter {
+		display: none;
+	}
 </style>