mallplus/mallplusui-web-admin/src/views/build/community/components/CommunityDetail.vue

<template> 
	<el-card class="form-container" shadow="never">
		<el-form :model="community" :rules="rules" ref="communityFrom" label-width="130px">

			<el-form-item label="社区名称：">

				<span>{{name}}</span>
			</el-form-item>
			<el-form-item label="取货点名称：" prop="name">
				<el-input v-model="community.name"></el-input>
			</el-form-item>
			<el-form-item label="取货点电话：" prop="phone">
				<el-input v-model="community.phone" maxlength="11"></el-input>
			</el-form-item>
			<el-form-item label="取货点地址：" prop="details">
				<el-input v-model="community.details"></el-input>
			</el-form-item>
			<!-- 
      <el-form-item label="地标：" prop="nearbyLandmarks">
        <el-input v-model="community.nearbyLandmarks"></el-input>
      </el-form-item>
 -->
			<!--  <el-form-item label="电话：" prop="phone">
        <el-input v-model="community.phone"></el-input>
      </el-form-item>
      <el-form-item label="照片：" prop="pic">
        <single-upload v-model="community.pic"></single-upload>
      </el-form-item> -->
			<!--    <el-form-item label="地图：" prop="phone">

        <input v-model.number="center.lng" />
        <input v-model.number="center.lat" />
        <!--<label>关键词：<input v-model="keyword"></label>
        <label>地区：<input v-model="location"></label>-->
			<!-- 
        <baidu-map  ak="15BWmtGEGGkZ8lSPUGah30XZ6IGw57HE"
                    class="map bm-view"

                :scroll-wheel-zoom="true"
                :center="center"
                :zoom="zoom"
                    :auto-resize="true"
                @moving="syncCenterAndZoom"
                @moveend="syncCenterAndZoom"
                @zoomend="syncCenterAndZoom">
          <bm-copyright
                  anchor="BMAP_ANCHOR_TOP_RIGHT"
                  :copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>宇运动多租户商城</a>'}]">
          </bm-copyright>
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" @changeAfter="changeAfters"></bm-city-list>
    <bm-marker :position="center" :dragging="false" />
         <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
        </baidu-map>

      </el-form-item> -->
			<el-form-item>
				<el-button type="primary" @click="onSubmit('communityFrom')">提交</el-button>
				<el-button v-if="!isEdit" @click="resetForm('communityFrom')">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>
<script>
	// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
	// import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch';
	// import BmCityList from 'vue-baidu-map/components/controls/CityList';
	// import BmCopyright from 'vue-baidu-map/components/controls/Copyright';
	// import BmView from 'vue-baidu-map/components/map/MapView';
	// import BmMarker from 'vue-baidu-map/components/overlays/Marker'
	import {
		createCommunity,
		getCommunity,
		updateCommunity
	} from '@/api/build/community'
	import SingleUpload from '@/components/Upload/singleUpload'
	import {
		formatDate
	} from '@/utils/date';
	const defaultCommunity = {
		name: ''
	};
	export default {
		name: 'CommunityDetail',
		// components: {
		// 	SingleUpload,
		// 	BaiduMap,
		// 	BmLocalSearch,
		// 	BmCityList,
		// 	BmView,
		// 	BmCopyright,
		// 	BmMarker
		// },
		props: {
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			var checkSubmit = (rule, value, callback) => {
			  const Submit =
			    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
			  if (value) {
			    if (!Submit.test(value)) {
			      callback(new Error('手机号格式不正确'))
			    }
			    callback()
			  }
			  callback()
			  // if (Submit.test(value)) {
			  //   return callback()
			  // }
			  // callback(new Error('请输入手机号'))
			}
			return {
				name: "",
				community: Object.assign({}, defaultCommunity),
				rules: {
					name: [{
							required: true,
							message: '请输入取货点名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 140,
							message: '长度在 2 到 140 个字符',
							trigger: 'blur'
						}
					],
					phone: [{
						required: true,
						validator: checkSubmit,
						trigger: 'blur'
					}]
				},
				// location: '北京',
				// keyword: '百度',
				// center: {
				// 	lng: 116.404,
				// 	lat: 39.915
				// },
				// zoom: 15
			}
		},
		mounted() {

			// this.handleScroll()
			// window.addEventListener('mousewheel',this.handleScroll,false)
		},
		created() {
			console.log("query>>>", this.$route.query)
			this.name = this.$route.query.cname

			if (this.isEdit) {
				getCommunity(this.$route.query.id).then(response => {
					this.community = response.data;
					// if (this.community.latitude) {
					// 	this.center.lat = this.community.latitude;
					// }
					// if (this.community.longitude) {
					// 	this.center.lng = this.community.longitude;
					// }
					// if (this.community.city) {
					// 	this.location = this.community.city;
					// }
				});
			} else {
				this.community = Object.assign({}, defaultCommunity);
			}
		},

		methods: {
			// changeAfters(e) {
			// 	console.log('123')
			// 	console.log(e)
			// },
			// handleScroll(e) {
			// 	//修复body高度为100%，百度地图鼠标滚轮滚动产生位移问题，以及全景鼠标hover后未显示全景信息问题
			// 	document.body.scrollTop = 0
			// 	document.documentElement.scrollTop = 0
			// },
			// syncCenterAndZoom(e) {

			// 	const {
			// 		lng,
			// 		lat
			// 	} = e.target.getCenter()
			// 	this.center.lng = lng
			// 	this.center.lat = lat
			// 	this.zoom = e.target.getZoom()
			// },
			UpNumber(val, limit = 2) {
				val = val.replace(/[^\d]/g, '') // 保留数字
				val = val.replace(/^00/, '0.') // 开头不能有两个0
				val = val.replace(/^\./g, '0.') // 开头为小数点转换为0.
				val = val.replace(/\.{2,}/g, '.') // 两个以上的小数点转换成一个
				val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只保留一个小数点
				/^0\d+/.test(val) ? val = val.slice(1) : '' // 两位以上数字开头不能为0
				const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
				const reg = new RegExp(str)
				if (limit === 0) {
					// 不需要小数点
					val = val.replace(reg, '$1')
				} else {
					// 通过正则保留小数点后指定的位数
					val = val.replace(reg, '$1.$2')
				}
				return val
			},
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('是否提交数据', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.community.companyId = this.$route.query.cid
							// this.community.latitude = this.center.lat;
							// this.community.longitude = this.center.lng;
							if (this.isEdit) {
								updateCommunity(this.$route.query.id, this.community).then(response => {
									if (response.code == 200) {
										this.$refs[formName].resetFields();
										this.$message({
											message: '修改成功',
											type: 'success',
											duration: 1000
										});
										this.$router.go(-1);
									} else {
										this.$message({
											message: response.msg,
											type: 'error',
											duration: 1000
										});
									}

								});
							} else {
								createCommunity(this.community).then(response => {
									if (response.code == 200) {
										this.$refs[formName].resetFields();
										this.community = Object.assign({}, defaultCommunity);
										this.$message({
											message: '提交成功',
											type: 'success',
											duration: 1000
										});
										this.$router.go(-1);
									} else {
										this.$message({
											message: response.msg,
											type: 'error',
											duration: 1000
										});
									}

								});
							}
						});

					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.community = Object.assign({}, defaultCommunity);
			},


		},

	}
</script>
<style>
	.bm-view {
		width: 100%;
		height: 400px;
	}
</style>