878 lines
47 KiB
Plaintext
878 lines
47 KiB
Plaintext
@*
|
||
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
|
||
*@
|
||
@{
|
||
}
|
||
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||
<script src="http://lib.baomitu.com/qs/6.10.3/qs.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app" v-loading="loading">
|
||
<h3 style="text-align:center;">宁波既有建筑外墙脱落问卷调查</h3>
|
||
<el-form label-position="left" ref="form" :model="form" :rules="rules" label-width="160px" style="margin-top:15px;">
|
||
<el-form-item label="1.社区/小区名：" prop="communityName">
|
||
<el-input v-model="form.communityName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="2.小区交付年份：" prop="deliveryear">
|
||
<el-input v-model="form.deliveryear"></el-input>
|
||
</el-form-item>
|
||
@*<el-form-item label="物业单位：" prop="hangye">
|
||
<el-input v-model="form.hangye"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="开发商：" prop="hangye">
|
||
<el-input v-model="form.hangye"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="施工单位：" prop="hangye">
|
||
<el-input v-model="form.hangye"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设计单位：" prop="hangye">
|
||
<el-input v-model="form.hangye"></el-input>
|
||
</el-form-item>*@
|
||
<el-form-item label="3.外墙结构：" prop="outsidewallstructurefiles">
|
||
|
||
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :on-change="fileChange">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text"><em>上传外墙照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
@*this.$refs.upload.submit();*@
|
||
@* <el-upload class="upload-demo" ref="upload"
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
:on-preview="handlePreview"
|
||
:on-remove="handleRemove"
|
||
:file-list="fileList"
|
||
:on-change="fileChange"
|
||
list-type="picture" :auto-upload="false">
|
||
<el-button size="small" type="primary">点击上传</el-button>
|
||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>*@
|
||
</el-form-item>
|
||
<el-form-item label="4.楼栋数：" prop="buildcount">
|
||
<el-input v-model="form.buildcount"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="5.住户总数：" prop="householdcount">
|
||
<el-input v-model="form.householdcount"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="6.总建筑面积：" prop="totalfloorage">
|
||
<el-input v-model="form.totalfloorage"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="7.是否存在外墙问题：" prop="isExistProblem">
|
||
<el-radio-group v-model="form.isExistProblem" size="small">
|
||
<el-radio-button label="是" border></el-radio-button>
|
||
<el-radio-button label="否" border></el-radio-button>
|
||
</el-radio-group>
|
||
<span>例如：漏水、开裂、脱落</span>
|
||
</el-form-item>
|
||
<el-form-item label="8.楼栋信息：" prop="buildcount">
|
||
<el-table :data="form.houses" style="width: 100%" ref="table" tooltip-effect="dark" @@selection-change="handleSelectionChange" row-key="id"
|
||
:expand-row-keys="expands" @@row-click="clickRowHandle">
|
||
<el-table-column type="selection" width="55">
|
||
</el-table-column>
|
||
<el-table-column type="expand">
|
||
<template slot-scope="props">
|
||
<el-form label-position="left" class="demo-table-expand" :rules="rules" ref="childForm" :model="props.row">
|
||
<el-form-item label="幢名称：">
|
||
<span>{{ props.row.BuildingName }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="地址：">
|
||
<span>{{ props.row.Address }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="层数：">
|
||
<span>{{ props.row.LevelCount }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="总户数：">
|
||
<span>{{ props.row.Households }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="建设单位：">
|
||
<span>{{ props.row.BuildingUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="设计单位：">
|
||
<span>{{ props.row.DesingerUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="施工单位：">
|
||
<span>{{ props.row.ConstructionUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="监理单位：">
|
||
<span>{{ props.row.MonitorUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="物业单位：">
|
||
<span>{{ props.row.WuYeUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item prop="curwallproblems">
|
||
8.1 墙体问题的类型是
|
||
<el-checkbox-group v-model="props.row.curwallproblems">
|
||
<el-checkbox v-for="w in wallproblems" :label="w" :key="w">{{w}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
<el-input type="textarea" autosize placeholder="请输入其他问题" v-model="props.row.curwallproblems_other">
|
||
@*<el-select v-model="curwallproblems" multiple filterable allow-create default-first-option placeholder="请选择问题类型">
|
||
<el-option v-for="item in wallproblems" :key="item" :label="item" :value="item">
|
||
</el-option>
|
||
</el-select>*@
|
||
</el-form-item>
|
||
<el-form-item label="" v-if="props.row.curwallproblems?.length>1">
|
||
8.2 哪个问题最先开始出现？
|
||
<el-radio-group v-model="props.row.wallproblemsfirst">
|
||
<el-radio v-for="w in wallproblems" :label="w">{{w}}</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="firstproblemdate">
|
||
8.3 第一次出现墙体问题是建成后____年？
|
||
<el-radio-group v-model="props.row.firstproblemdate">
|
||
<el-radio label="建成后0-5年">建成后0-5年</el-radio>
|
||
<el-radio label="建成后6-10年">建成后6-10年</el-radio>
|
||
<el-radio label="建成后11-15年">建成后11-15年</el-radio>
|
||
<el-radio label="建成后15年以上">建成后15年以上</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="problemfrequency">
|
||
8.4 墙体脱落发生频率如何？
|
||
<el-radio-group v-model="props.row.problemfrequency">
|
||
<el-radio label="1年1-2次">1年1-2次</el-radio>
|
||
<el-radio label="1年3-5次">1年3-5次</el-radio>
|
||
<el-radio label="1年5次以上">1年5次以上</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="problemseason">
|
||
8.5 问题多发生在哪个季节？
|
||
<el-checkbox-group v-model="props.row.problemseason">
|
||
<el-checkbox label="春" key="春">春</el-checkbox>
|
||
<el-checkbox label="夏" key="夏">夏</el-checkbox>
|
||
<el-checkbox label="秋" key="秋">秋</el-checkbox>
|
||
<el-checkbox label="冬" key="冬">冬</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item prop="wallproblemtoward">
|
||
8.6 墙体问题发生的朝向是哪面？
|
||
<el-checkbox-group v-model="props.row.wallproblemtoward">
|
||
<el-checkbox label="东" key="东">东</el-checkbox>
|
||
<el-checkbox label="西" key="西">西</el-checkbox>
|
||
<el-checkbox label="南" key="南">南</el-checkbox>
|
||
<el-checkbox label="北" key="北">北</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
8.7 问题照片：
|
||
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="childFileList1" :on-change="fileChange1">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text"><em>上传东面照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="childFileList2" :on-change="fileChange2">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text"><em>上传西面照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="childFileList3" :on-change="fileChange3">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text"><em>上传南面照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="childFileList4" :on-change="fileChange4">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text"><em>上传北面照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item prop="problemfanwei">
|
||
8.8 发生外墙问题的范围有多大？
|
||
<el-radio-group v-model="props.row.problemfanwei">
|
||
<el-radio label="＜外墙面积的25%"></el-radio>
|
||
<el-radio label="外墙面积的25-50%"></el-radio>
|
||
<el-radio label="外墙面积的50-75%"></el-radio>
|
||
<el-radio label="外墙面积的75-100%"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="problemheight">
|
||
8.9 外墙问题发生在哪个高度？
|
||
<el-checkbox-group v-model="props.row.problemheight">
|
||
<el-checkbox label="底层（楼高1/3以下）"></el-checkbox>
|
||
<el-checkbox label="中层"></el-checkbox>
|
||
<el-checkbox label="高层（屋顶往下1/3）"></el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item prop="diaoluowu">
|
||
8.10 掉落物是什么？
|
||
<el-checkbox-group v-model="props.row.diaoluowu">
|
||
<el-checkbox label="墙皮材料"></el-checkbox>
|
||
<el-checkbox label="保温材料"></el-checkbox>
|
||
<el-checkbox label="混凝土块"></el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" plain @@click.prevent="tempSave(props.row)">暂存</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="幢名称" prop="BuildingName">
|
||
</el-table-column>
|
||
<el-table-column label="地址" prop="Address">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
@*
|
||
<el-form-item label="参加时间：" prop="date">
|
||
<el-popover placement="top" title="" width="200" trigger="focus" :content="datePersonNumber">
|
||
<el-radio-group v-model="form.date" @@input="getNumber()" slot="reference" size="small">
|
||
<el-radio-button label="2023-03-18" border></el-radio-button>
|
||
<el-radio-button label="2023-03-19" border></el-radio-button>
|
||
<el-radio-button label="2023-03-25" border></el-radio-button>
|
||
<el-radio-button label="2023-03-26" border></el-radio-button>
|
||
<el-radio-button label="2023-04-08" border></el-radio-button>
|
||
<el-radio-button label="2023-04-09" border></el-radio-button>
|
||
<el-radio-button label="2023-04-15" border></el-radio-button>
|
||
<el-radio-button label="2023-04-16" border></el-radio-button>
|
||
</el-radio-group>
|
||
</el-popover>
|
||
</el-form-item>*@
|
||
<el-form-item prop="problemismodify">
|
||
14.问题发生后是否请人修复了？
|
||
<el-radio-group v-model="problemismodify">
|
||
<el-radio label="是"></el-radio>
|
||
<el-radio label="否"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item v-if="problemismodify=='是'">
|
||
15.请提供修复单位的名称:
|
||
<el-input type="textarea" autosize placeholder="请提供修复单位的名称。" v-model="problemmodifyunitname">
|
||
</el-form-item>
|
||
<el-form-item v-if="problemismodify=='是'">
|
||
16.修复后的部位是否再次发生问题？
|
||
<el-radio-group v-model="problemmodifyisagain">
|
||
<el-radio label="有再发生"></el-radio>
|
||
<el-radio label="没有"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
20.若您愿意接受我们的现场调查，请惠赐您的联系方式。谢谢！
|
||
<el-input type="textarea" autosize placeholder="" v-model="contract">
|
||
</el-form-item>
|
||
<el-form-item label="手机号码：" prop="phone">
|
||
<el-input v-model="form.phone"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="验证码" prop="code" v-if="!isshowmyinfo">
|
||
<el-input type="text" maxlength="4" placeholder="验证码" v-model="form.code">
|
||
<template slot="append">
|
||
<el-button :disabled="disabled" @@click="getCode">{{ valiBtn }}</el-button>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="!isshowmyinfo">
|
||
<el-button type="primary" @@click.prevent="onSubmit('form')">提交报名</el-button>
|
||
<el-button @@click.prevent="showinfo()">我的报名</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-image ref="myImg" class="my-img" :src="dialogImageUrl"
|
||
:preview-src-list="dialogImageUrls">
|
||
</el-image>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
var checkPhone = (rule, value, callback) => {
|
||
const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
|
||
if (regMobile.test(value)) {
|
||
callback()
|
||
}
|
||
callback(new Error("请输入正确的手机号码"))
|
||
};
|
||
var checkCode = (rule, value, callback) => {
|
||
if (value === "") {
|
||
callback(new Error("请输入验证码"))
|
||
} else if (!/^[0-9]+$/.test(value) || !/^\d{4}$/.test(value)) {
|
||
callback(new Error("请输入4位数字的验证码"))
|
||
} else {
|
||
callback()
|
||
}
|
||
};
|
||
var checkNumber = (rule, value, callback) => {
|
||
if (value === "") {
|
||
callback(new Error("不能为空"))
|
||
} else if (!/^[0-9]+$/.test(value)) {
|
||
callback(new Error("必需为数字"))
|
||
} else {
|
||
callback()
|
||
}
|
||
};
|
||
var checkCardNo = (rule, value, callback) => {
|
||
const regMobile = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||
if (regMobile.test(value)) {
|
||
callback()
|
||
}
|
||
callback(new Error("请输入正确的身份证号码"))
|
||
};
|
||
return {
|
||
form: {
|
||
communityName: '',
|
||
phone: '',
|
||
deliveryear: '',
|
||
buildcount: '',
|
||
totalfloorage: 0,
|
||
address: '',
|
||
date: '',
|
||
line: '',
|
||
code: '',
|
||
token: '',
|
||
houses: [{
|
||
id: '12987122',
|
||
BuildingName: '好滋好味鸡蛋仔',
|
||
Address: '江浙小吃、小吃零食',
|
||
LevelCount: '荷兰优质淡奶，奶香浓而不腻',
|
||
Households: '上海市普陀区真北路',
|
||
BuildingUnit: '王小虎夫妻店',
|
||
DesingerUnit: '10333',
|
||
curwallproblems: [],
|
||
wallproblemsfirst: '',
|
||
firstproblemdate: '',
|
||
problemfrequency: '',
|
||
problemseason: [],
|
||
wallproblemtoward: [],
|
||
curwallproblems_other: '',
|
||
problemfanwei: '',
|
||
problemheight: [],
|
||
diaoluowu: [],
|
||
}, {
|
||
id: '12987123',
|
||
BuildingName: '好滋好味鸡蛋仔',
|
||
Address: '江浙小吃、小吃零食',
|
||
LevelCount: '荷兰优质淡奶，奶香浓而不腻',
|
||
Households: '上海市普陀区真北路',
|
||
BuildingUnit: '王小虎夫妻店',
|
||
DesingerUnit: '10333',
|
||
curwallproblems: [],
|
||
wallproblemsfirst: '',
|
||
firstproblemdate: '',
|
||
problemfrequency: '',
|
||
problemseason: [],
|
||
wallproblemtoward: [],
|
||
curwallproblems_other: '',
|
||
problemfanwei: '',
|
||
problemheight: [],
|
||
diaoluowu: [],
|
||
}, {
|
||
id: '12987124',
|
||
BuildingName: '好滋好味鸡蛋仔',
|
||
Address: '江浙小吃、小吃零食',
|
||
LevelCount: '荷兰优质淡奶，奶香浓而不腻',
|
||
Households: '上海市普陀区真北路',
|
||
BuildingUnit: '王小虎夫妻店',
|
||
DesingerUnit: '10333',
|
||
curwallproblems: [],
|
||
wallproblemsfirst: '',
|
||
firstproblemdate: '',
|
||
problemfrequency: '',
|
||
problemseason: [],
|
||
wallproblemtoward: [],
|
||
curwallproblems_other: '',
|
||
problemfanwei: '',
|
||
problemheight: [],
|
||
diaoluowu: [],
|
||
}, {
|
||
id: '12987125',
|
||
BuildingName: '好滋好味鸡蛋仔',
|
||
Address: '江浙小吃、小吃零食',
|
||
LevelCount: '荷兰优质淡奶，奶香浓而不腻',
|
||
Households: '上海市普陀区真北路',
|
||
BuildingUnit: '王小虎夫妻店',
|
||
DesingerUnit: '10333',
|
||
curwallproblems: [],
|
||
wallproblemsfirst: '',
|
||
firstproblemdate: '',
|
||
problemfrequency: '',
|
||
problemseason: [],
|
||
wallproblemtoward: [],
|
||
curwallproblems_other: '',
|
||
problemfanwei: '',
|
||
problemheight: [],
|
||
diaoluowu: [],
|
||
}]
|
||
//,remark: ''
|
||
}, rules: {
|
||
communityName: [{ required: true, trigger: 'blur', message: '请选择社区/小区' }],
|
||
phone: [{ validator: checkPhone, required: true, trigger: 'blur' }],
|
||
code: [{ validator: checkCode, required: true, trigger: 'blur' }],
|
||
deliveryear: [{ required: false, trigger: 'blur', message: '请输入交付年份' }],
|
||
buildcount1: [{ validator: checkCardNo, required: false, trigger: 'blur' }],
|
||
householdcount: [{ required: false, trigger: 'blur', message: '请输入住户总数' }],
|
||
date: [{ required: true, trigger: 'blur', message: '请选择参加时间' }],
|
||
line: [{ required: true, trigger: 'blur', message: '请选择线路' }],
|
||
totalfloorage: [{ required: true, trigger: 'blur', message: '请输入总建筑面积' }, { validator: checkNumber, message: '总建筑面积必须为数字值' }],
|
||
isExistProblem: [{ required: true, trigger: 'blur', message: '请选择是否' }],
|
||
curwallproblems: [{ required: true, trigger: ['change', 'blur'], message: '请选择墙体问题' }],
|
||
firstproblemdate: [{ required: true, trigger: ['change', 'blur'], message: '请选择第一次出现墙体问题时间' }],
|
||
problemfrequency: [{ required: true, trigger: ['change', 'blur'], message: '请选择墙体脱落发生频率' }],
|
||
problemseason: [{ required: true, trigger: ['change', 'blur'], message: '请选择问题发生季节' }],
|
||
wallproblemtoward: [{ required: true, trigger: ['change', 'blur'], message: '请选择问题发生朝向' }],
|
||
problemfanwei: [{ required: true, trigger: ['change', 'blur'], message: '请选择外墙问题的范围' }],
|
||
problemheight: [{ required: true, trigger: ['change', 'blur'], message: '请选择外墙问题发生的高度' }],
|
||
diaoluowu: [{ required: true, trigger: ['change', 'blur'], message: '请选择掉落物' }],
|
||
problemismodify: [{ required: true, trigger: ['blur'], message: '请选择问题发生后是否请人修复' }],
|
||
},
|
||
valiBtn: '获取验证码',
|
||
disabled: false,
|
||
datePersonNumber: '',
|
||
go_disabled: false,
|
||
dates: [],
|
||
pageline: '',
|
||
lineTxt: '',
|
||
isshowmyinfo: false,
|
||
fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224' }],
|
||
childFileList1: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224' }],
|
||
childFileList2: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224' }],
|
||
childFileList3: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224' }],
|
||
childFileList4: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224' }],
|
||
dialogImageUrl: '',
|
||
dialogImageUrls: [],
|
||
dialogVisible: false,
|
||
disabled: false,
|
||
multipleSelection: [],
|
||
wallproblems: ['漏水', '开裂', '脱落', '空鼓', '其他问题'],
|
||
problemismodify: '',
|
||
problemmodifyunitname: '',
|
||
problemmodifyisagain: '',
|
||
contract: '',
|
||
// 获取row的key值
|
||
getRowKeys(row) {
|
||
return row.id;
|
||
},
|
||
// 要展开的行，数值的元素是row的key值
|
||
expands: [],
|
||
}
|
||
},
|
||
created: function () {
|
||
this.loading = true;
|
||
this.loading_false();
|
||
this.form.token = localStorage.getItem("_token");
|
||
if (this.getQueryString("valid") == "1" || this.form.token)
|
||
this.showinfo();
|
||
|
||
//this.get_go_date();
|
||
//this.getdates();
|
||
this.get_line();
|
||
},
|
||
methods: {
|
||
handleValidates(formName) {
|
||
const list = []
|
||
const validas = []
|
||
this.$refs[formName].forEach((item, index) => {
|
||
list.push(new Promise(resolve => {
|
||
item.validate(valida => {
|
||
validas.push(valida)
|
||
resolve()
|
||
})
|
||
})
|
||
)
|
||
})
|
||
Promise.all([...list]).then(() => {
|
||
const res = !validas.some(item => item === false)
|
||
return res
|
||
}).catch(() => {
|
||
return false
|
||
})
|
||
},
|
||
handleValidate(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
//alert('submit!');
|
||
return true;
|
||
} else {
|
||
console.log('error submit!!');
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
tempSave(row) {
|
||
debugger
|
||
if (this.handleValidate('childForm')) {
|
||
|
||
}
|
||
//this.curwallproblems.push(this.curwallproblems_other);
|
||
//if(this.curwallproblems_other.length>0)
|
||
//this.houses.find(a => a.id == row.id).curwallproblems = this.curwallproblems;
|
||
},
|
||
clickRowHandle(row, column, event) {
|
||
debugger
|
||
if (this.expands.includes(row.id)) {
|
||
return;
|
||
this.expands = this.expands.filter(val => val !== row.id);
|
||
} else {
|
||
this.expands.push(row.id);
|
||
}
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
},
|
||
fileChange(a, b) {
|
||
debugger
|
||
this.fileList = b;
|
||
},
|
||
fileChange1(a, b) {
|
||
debugger
|
||
this.childFileList1 = b;
|
||
},
|
||
fileChange2(a, b) {
|
||
debugger
|
||
this.childFileList2 = b;
|
||
},
|
||
fileChange3(a, b) {
|
||
debugger
|
||
this.childFileList3 = b;
|
||
},
|
||
fileChange4(a, b) {
|
||
debugger
|
||
this.childFileList4 = b;
|
||
},
|
||
handleRemove(file, fileList) {
|
||
console.log(file, fileList);
|
||
},
|
||
handlePreview(file) {
|
||
debugger
|
||
console.log(file);
|
||
this.dialogImageUrl = file.url;
|
||
this.dialogImageUrls = this.fileList.map(a => a.url);
|
||
this.$refs.myImg.showViewer = true
|
||
const m = (e) => { e.preventDefault() };
|
||
document.body.style.overflow = 'hidden';
|
||
document.addEventListener("touchmove", m, false); // 禁止页面滑动
|
||
},
|
||
getQueryString(communityName) {
|
||
var reg = new RegExp("(^|&)" + communityName + "=([^&]*)(&|$)", "i");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if (r != null) return unescape(r[2]); return null;
|
||
},
|
||
get_line() {
|
||
let _this = this;
|
||
var line = this.getQueryString("line") ?? "A"
|
||
if (line == "A" || line == "a") {
|
||
_this.lineTxt = '慈溪：“历史之路 文化之路 创新之路 共富之路”的慈溪南部沿山风情共富线。';
|
||
_this.pageline = _this.form.line = '慈溪';
|
||
}
|
||
else if (line == "B" || line == "b") {
|
||
_this.lineTxt = '奉化：“应梦明山入城，剡水桃源归野”的奉化明山剡水共富线。';
|
||
_this.pageline = _this.form.line = '奉化';
|
||
}
|
||
else if (line == "C" || line == "c") {
|
||
_this.lineTxt = '象山：“万象山海，逐梦亚运”象山扬帆亚运风情共富线三条体验游览线。';
|
||
_this.pageline = _this.form.line = '象山';
|
||
}
|
||
},
|
||
get_go_date() {
|
||
//判断上车日期
|
||
let _this = this;
|
||
_this.form.token = localStorage.getItem("_token");
|
||
|
||
},
|
||
getCode() {
|
||
this.$refs['form'].validateField('phone', (err) => {
|
||
if (err) {
|
||
console.log('未通过')
|
||
return;
|
||
} else {
|
||
console.log('已通过')
|
||
console.log(this.form.phone)
|
||
let _this = this;
|
||
//this.$alert("成功", "提示")
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: '/gb/yjb/api/ningbozhichun/sendcode',
|
||
data: _this.form,
|
||
responseType: "json",
|
||
}).then(async response => {
|
||
if (response.data.data != true) {
|
||
_this.$alert(`<div>` + response.data.message + `</div>`, '错误', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
} else {
|
||
_this.tackBtn(); //验证码倒数60秒
|
||
}
|
||
_this.loading = false;
|
||
}).catch(async error => {
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
})
|
||
_this.loading = false;
|
||
})
|
||
}
|
||
})
|
||
},
|
||
tackBtn() { //验证码倒数60秒
|
||
let time = 60;
|
||
let timer = setInterval(() => {
|
||
if (time == 0) {
|
||
clearInterval(timer);
|
||
this.valiBtn = '获取验证码';
|
||
this.disabled = false;
|
||
} else {
|
||
this.disabled = true;
|
||
this.valiBtn = time + '秒后重试';
|
||
time--;
|
||
}
|
||
}, 1000);
|
||
},
|
||
onSubmit(formName) {
|
||
console.log('submit!');
|
||
let _this = this;
|
||
this.$refs[formName].validate((valid) => { // 为表单绑定验证功能
|
||
if (valid) {
|
||
//this.$alert("成功", "提示")
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: '/gb/yjb/api/ningbozhichun/submit',
|
||
data: _this.form,
|
||
responseType: "json",
|
||
}).then(async response => {
|
||
if (response.data?.data?.success == true) {
|
||
let token = response.data.data.token;
|
||
localStorage.setItem("_token", token)
|
||
_this.$alert(`<div>提交成功</div>`, '成功', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
} else {
|
||
_this.$alert(`<div>` + response.data.message + `</div>`, '错误', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
}
|
||
_this.loading = false;
|
||
}).catch(async error => {
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
})
|
||
_this.loading = false;
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
go(formName) {
|
||
console.log('上车!');
|
||
let _this = this;
|
||
this.$refs[formName].validate((valid) => { // 为表单绑定验证功能
|
||
if (valid) {
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: '/gb/yjb/api/ningbozhichun/submit',
|
||
data: _this.form,
|
||
responseType: "json",
|
||
}).then(async response => {
|
||
if (response.data?.data?.success == true) {
|
||
let token = response.data.data.token;
|
||
localStorage.setItem("_token", token)
|
||
_this.$alert(`<div>提交成功</div>`, '成功', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
} else {
|
||
_this.$alert(`<div>` + response.data.message + `</div>`, '错误', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
}
|
||
_this.loading = false;
|
||
}).catch(async error => {
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
})
|
||
_this.loading = false;
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
loading_false() { this.loading = false },
|
||
showinfo() {
|
||
let _this = this;
|
||
_this.form.token = localStorage.getItem("_token");
|
||
if (!_this.form.token) {
|
||
window.location.href = '/gb/yjb/ningbozhichun/myvalid'
|
||
} else {
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: '/gb/yjb/api/ningbozhichun/getmyinfo',
|
||
data: _this.form,
|
||
responseType: "json",
|
||
}).then(async response => {
|
||
if (response.data?.data?.success == true) {
|
||
if (!response.data?.data.entity) {
|
||
localStorage.removeItem("_token");
|
||
_this.$alert(`<div>您还没有报名呢</div>`, '错误', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
} else {
|
||
_this.form = response.data?.data.entity;
|
||
let token = response.data.data.token;
|
||
localStorage.setItem("_token", token);
|
||
_this.isshowmyinfo = true;
|
||
if (_this.form.line != _this.pageline) {
|
||
if (_this.form.line == "慈溪")
|
||
window.location = '/gb/yjb/ningbozhichun/index?line=a&valid=1'
|
||
else if (_this.form.line == "奉化")
|
||
window.location = '/gb/yjb/ningbozhichun/index?line=b&valid=1'
|
||
else
|
||
window.location = '/gb/yjb/ningbozhichun/index?line=c&valid=1'
|
||
}
|
||
}
|
||
} else {
|
||
_this.$alert(`<div>` + response.data.message + `，请再次验证手机号码后继续</div>`, '错误', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
}
|
||
_this.loading = false;
|
||
}).catch(async error => {
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
})
|
||
_this.loading = false;
|
||
})
|
||
}
|
||
},
|
||
getNumber() {
|
||
let _this = this;
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: '/gb/yjb/api/ningbozhichun/getnumber',
|
||
data: _this.form,
|
||
responseType: "json",
|
||
}).then(async response => {
|
||
if (response.data?.data?.success == true) {
|
||
_this.datePersonNumber = _this.form.date + ` 还剩余 ` + response.data?.data?.n + ` 个名额`
|
||
} else {
|
||
_this.$alert(`<div>` + response.data.message + `</div>`, '错误', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
}
|
||
_this.loading = false;
|
||
}).catch(async error => {
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
})
|
||
_this.loading = false;
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="less">
|
||
.my-img {
|
||
display: none;
|
||
width: 100px;
|
||
height: 100px;
|
||
/*.el-image__inner
|
||
{
|
||
visibility: hidden;
|
||
display:none;
|
||
} */
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.el-upload-list__item:first-child {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.el-upload-list__item {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.upload-demo {
|
||
margin-bottom: 20px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
padding: 5px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.el-upload-dragger {
|
||
width: 200px !important;
|
||
height: 50px !important;
|
||
}
|
||
|
||
.el-upload-dragger .el-icon-upload {
|
||
display: none !important;
|
||
}
|
||
|
||
.el-upload-dragger .el-upload__text {
|
||
line-height: 50px !important;
|
||
}
|
||
|
||
.el-upload__tip {
|
||
margin-top: -23px !important;
|
||
}
|
||
|
||
.demo-table-expand {
|
||
font-size: 0;
|
||
}
|
||
|
||
.demo-table-expand label {
|
||
/* width: 90px;*/
|
||
color: #99a9bf;
|
||
}
|
||
|
||
.demo-table-expand .el-form-item {
|
||
margin-right: 0;
|
||
margin-bottom: 5px;
|
||
width: 90%;
|
||
}
|
||
|
||
.buhuanhang {
|
||
white-space: nowrap;
|
||
width: 21%;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.item {
|
||
padding: 18px 0;
|
||
}
|
||
|
||
.box-card {
|
||
width: 98%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.el-card__body {
|
||
padding: 12px;
|
||
}
|
||
|
||
.el-card__body p {
|
||
margin: 0px;
|
||
margin-bottom: 5px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.el-radio.is-bordered {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-radio-button--small .el-radio-button__inner {
|
||
border-left: 1px solid #DCDFE6;
|
||
}
|
||
</style>
|
||
</html> |