|
|
@@ -0,0 +1,283 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- <common ref="common" @asynCallBack="asynCallBack"></common> -->
|
|
|
+ <top-header :pageTitle="pageTitle" :leftShow="false"></top-header>
|
|
|
+ <div class="mui-content margin60" v-if="!company">
|
|
|
+ <h1>请扫描正确的二维码</h1>
|
|
|
+ </div>
|
|
|
+ <div class="mui-content margin60" v-if="company">
|
|
|
+ <div class="vongi-yqsb flew-items">
|
|
|
+ <i class="iconfont icon-shouye2 color4fc5f7"></i> {{company.name}}
|
|
|
+ </div>
|
|
|
+ <div class="vongi-meform-pho">
|
|
|
+
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>姓名<span style="color: red;">*</span></label>
|
|
|
+ <input v-model="subForm.personName" type="text" placeholder="请输入姓名"></input>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>联系电话<span style="color: red;">*</span></label>
|
|
|
+ <input v-model="subForm.linkPhone" type="text" placeholder="请输入联系电话"></input>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>详细地址<span style="color: red;">*</span></label>
|
|
|
+ <input v-model="subForm.address" type="text" placeholder="请输入楼栋与寝室号"></input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="vongi-meform-pho">
|
|
|
+ <h5>报修类型</h5>
|
|
|
+ <ul class="mui-table-view mui-table-view-radio flew-sp">
|
|
|
+ <li v-for="(item,index) in categoryList" :key="index" class="mui-table-view-cell">
|
|
|
+ <a @click="subForm.category=item.value" v-text="item.name"></a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="vongi-meform-pho">
|
|
|
+ <h5>报修内容</h5>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <textarea v-model="subForm.content" rows="5" placeholder="请描述您遇到的问题"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vongi-wordcard vongi-meform-pho">
|
|
|
+ <h5>上传图片<span class="color999">（选填,提供问题截图,最多5张）</span></h5>
|
|
|
+ <div class="fyy-upphoto">
|
|
|
+ <div v-for="(item,index) in picList" :key="index" class="mui-col-xs-3 fyy-upphoto-close">
|
|
|
+ <img :src="item" />
|
|
|
+ <a class="mui-icon mui-icon-closeempty" @click="delPic(item)"></a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <input type="file" ref="myFile" style="display: none" class="mui-btn mui-btn-block mui-navigate-right" accept="image/*" @change="uploadPicture($event)"/>
|
|
|
+
|
|
|
+ <div class="mui-col-xs-3" @click="chooseImage" v-show="picList.length<5">
|
|
|
+ <a><span class="mui-icon mui-icon-camera"></span></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="fyy-footer" v-if="company" >
|
|
|
+ <div class="bindfyy-btn"><button @click="submit" type="submit" class="mui-btn mui-btn-primary ">提交</button></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API_Property from '@/apis/Master/property'
|
|
|
+ import Common from '$project/components/Common.vue'
|
|
|
+ import Loading from '$project/components/Loading.vue'
|
|
|
+ import TopHeader from '$project/components/TopHeader.vue'
|
|
|
+ import {
|
|
|
+ mapGetters,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex'
|
|
|
+ import {
|
|
|
+ checkPhone,isWeiXin
|
|
|
+ } from '$project/utils'
|
|
|
+ import * as WxJsApi from '$project/utils/wxJsApi'
|
|
|
+ export default {
|
|
|
+ name: 'MasterPropertyRepairForm',
|
|
|
+ components: {
|
|
|
+ Common,
|
|
|
+ Loading,
|
|
|
+ TopHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: '物业报修',
|
|
|
+
|
|
|
+ isLoading: false,
|
|
|
+
|
|
|
+ subForm: {
|
|
|
+ content: '',
|
|
|
+ type: 2,
|
|
|
+ img: '',
|
|
|
+ category: ''
|
|
|
+ },
|
|
|
+ picList: [],
|
|
|
+ company:{},
|
|
|
+
|
|
|
+ categoryList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.subForm.companyId=this.$route.query.id;
|
|
|
+ this.subForm.openId=this.openId;
|
|
|
+ this.findCompanyById()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ findCompanyById(){
|
|
|
+
|
|
|
+ this.isLoading = true;
|
|
|
+ API_Property.findCompanyById(this.subForm.companyId).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.company=response
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.company=false
|
|
|
+ mui.toast("请扫描正确的二维码");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //选择图片
|
|
|
+ uploadPicture(event) {
|
|
|
+
|
|
|
+
|
|
|
+ var files = event.target.files;
|
|
|
+ var reader = new FileReader();
|
|
|
+ var _this=this;
|
|
|
+ if(files && files[0]) {
|
|
|
+ reader.onload = function (ev) {
|
|
|
+
|
|
|
+
|
|
|
+ var localData=ev.target.result;
|
|
|
+ if (localData.indexOf('data:image') != 0) {
|
|
|
+ //判断是否有这样的头部
|
|
|
+ localData = 'data:image/jpeg;base64,' + localData
|
|
|
+ }
|
|
|
+ localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
|
|
|
+ _this.imgBase64 = localData;
|
|
|
+ //显示裁剪图片
|
|
|
+ //_this.showCropper('photo');
|
|
|
+ _this.uploadpic();
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(files[0]);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //微信选择图片
|
|
|
+ chooseImage() {
|
|
|
+ if(isWeiXin()){
|
|
|
+ WxJsApi.chooseImage().then(res => {
|
|
|
+ var localData = res.localData;
|
|
|
+
|
|
|
+ if (localData.indexOf('data:image') != 0) {
|
|
|
+ //判断是否有这样的头部
|
|
|
+ localData = 'data:image/jpeg;base64,' + localData
|
|
|
+ }
|
|
|
+ localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
|
|
|
+ this.imgBase64 = localData;
|
|
|
+ //显示裁剪图片
|
|
|
+ //_this.showCropper(field);
|
|
|
+ this.uploadpic();
|
|
|
+ }).catch(error => {
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.$refs.myFile.click();
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //上传图片
|
|
|
+ uploadpic() {
|
|
|
+ this.isLoading = true;
|
|
|
+ WxJsApi.uploadPic(this.imgBase64).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ this.picList.push(response);
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //删除图片
|
|
|
+ delPic(item) {
|
|
|
+ let picList = this.picList;
|
|
|
+ let index = picList.indexOf(item);
|
|
|
+ if (index > -1) {
|
|
|
+ picList.splice(index, 1);
|
|
|
+ }
|
|
|
+ this.picList = picList;
|
|
|
+ },
|
|
|
+ //检测表单
|
|
|
+ checkForm() {
|
|
|
+ let phoneResult = checkPhone(this.subForm.linkPhone);
|
|
|
+
|
|
|
+ if (!this.subForm.personName) {
|
|
|
+ mui.toast('请输入姓名');
|
|
|
+ return false;
|
|
|
+ }else if (!this.subForm.linkPhone) {
|
|
|
+ mui.toast('请输入联系电话');
|
|
|
+ return false;
|
|
|
+ }else if (phoneResult!==true) {
|
|
|
+ mui.toast(phoneResult);
|
|
|
+ return false;
|
|
|
+ }else if (!this.subForm.address) {
|
|
|
+ mui.toast('请输入楼栋与寝室号');
|
|
|
+ return false;
|
|
|
+ }else
|
|
|
+ if (!this.subForm.category) {
|
|
|
+ mui.toast('请选择报修类别');
|
|
|
+ return false;
|
|
|
+ } else if (!this.subForm.content) {
|
|
|
+ mui.toast('请输入内容详情');
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //提交
|
|
|
+ submit() {
|
|
|
+ this.subForm.img = this.picList.join(',');
|
|
|
+ var category= this.subForm.category
|
|
|
+ if (this.checkForm()) {
|
|
|
+ this.isLoading = true;
|
|
|
+ API_Property.subRepairAndComplaint2(this.subForm).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.alert('提交成功,请勿重复提交！');
|
|
|
+ this.subForm={}
|
|
|
+ this.subForm.companyId=this.$route.query.id;
|
|
|
+ this.subForm.openId=this.openId;
|
|
|
+ this.subForm.type=2;
|
|
|
+ this.subForm.category=category
|
|
|
+ this.picList=[];
|
|
|
+ //this.$router.go(-1);
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取类别
|
|
|
+ getCategoryList() {
|
|
|
+ this.isLoading = true;
|
|
|
+ API_Property.getCategoryList({
|
|
|
+ type: this.subForm.type
|
|
|
+ }).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.categoryList = response;
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ asynCallBack() {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //获取微信配置
|
|
|
+ WxJsApi.getWxConfig();
|
|
|
+ this.getCategoryList();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ openId: 'wx_openid',
|
|
|
+ token: 'token',
|
|
|
+ person_data: 'person_data',
|
|
|
+ person_popedom: 'person_popedom',
|
|
|
+ menu_list: 'menu_list',
|
|
|
+ common_menu_list: 'common_menu_list',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
+<style src="$project/assets/css/iconfont.css"></style>
|
|
|
+<style>
|
|
|
+</style>
|
zhengkaixin