初始项目
This commit is contained in:
liupopo
266
mallplusui-web-admin/src/views/sys/store/components/detail.vue
Normal file
266
mallplusui-web-admin/src/views/sys/store/components/detail.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<el-card class="form-container" shadow="never">
|
||||
<el-form :model="sysStore" :rules="rules" ref="SysStoreFrom" label-width="150px">
|
||||
|
||||
|
||||
<el-form-item
|
||||
label=" 店铺名称"
|
||||
prop="name">
|
||||
<el-input v-model="sysStore.name" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="服务手机"
|
||||
prop="servicePhone">
|
||||
<el-input v-model="sysStore.supportPhone" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="服务电话"
|
||||
prop="contactMobile">
|
||||
<el-input v-model="sysStore.contactMobile" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item
|
||||
label="负责人"
|
||||
prop="contactName">
|
||||
<el-input v-model="sysStore.contactName" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标：" prop="logo">
|
||||
<single-upload v-model="sysStore.logo"></single-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证照：" prop="servicePhone">
|
||||
<single-upload v-model="sysStore.servicePhone"></single-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 营业执照：" prop="supportName">
|
||||
<single-upload v-model="sysStore.supportName"></single-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="地址细节"
|
||||
prop="addressDetail">
|
||||
<el-input v-model="sysStore.addressDetail" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item
|
||||
label="联系QQ"
|
||||
prop="contactQq">
|
||||
<el-input v-model="sysStore.contactQq" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="支持电话"
|
||||
prop="supportPhone">
|
||||
<el-input v-model="sysStore.supportPhone" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
<el-form-item
|
||||
label="描述"
|
||||
prop="description">
|
||||
<el-input v-model="sysStore.description" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="地图：" prop="phone">
|
||||
|
||||
<input v-model.number="center.lng" />
|
||||
<input v-model.number="center.lat" />
|
||||
|
||||
<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>mallplus多租户商城</a>'}]">
|
||||
</bm-copyright>
|
||||
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" @changeAfter="changeAfters"></bm-city-list>
|
||||
<!-- <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('SysStoreFrom')">提交</el-button>
|
||||
<el-button v-if="!isEdit" @click="resetForm('SysStoreFrom')">重置</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 {createSysStore, getSysStore, updateSysStore} from '@/api/sys/sysStore'
|
||||
import SingleUpload from '@/components/Upload/singleUpload'
|
||||
|
||||
const defaultSysStore = {
|
||||
name: ''
|
||||
};
|
||||
export default {
|
||||
name: 'SysStoreDetail',
|
||||
components: {SingleUpload,BaiduMap,BmLocalSearch,BmCityList,BmView,BmCopyright},
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sysStore:
|
||||
Object.assign({},
|
||||
defaultSysStore),
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入品牌名称', trigger: 'blur'},
|
||||
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
|
||||
],
|
||||
|
||||
sort :
|
||||
[
|
||||
{type: 'number', message: '排序必须为数字'}
|
||||
],
|
||||
}, location: '北京',
|
||||
keyword: '百度',
|
||||
center: {
|
||||
lng: 116.404,
|
||||
lat: 39.915
|
||||
},
|
||||
zoom: 15
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.isEdit) {
|
||||
getSysStore(this.$route.query.id).then(response => {
|
||||
this.sysStore = response.data;
|
||||
})
|
||||
;
|
||||
} else {
|
||||
this.sysStore = Object.assign({},
|
||||
defaultSysStore)
|
||||
;
|
||||
}
|
||||
},
|
||||
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()
|
||||
},
|
||||
onSubmit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
this.sysStore.addressLat=this.center.lat;
|
||||
this.sysStore.addressLng=this.center.lng;
|
||||
if(valid) {
|
||||
this.$confirm('是否提交数据', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
if(this.isEdit
|
||||
)
|
||||
{
|
||||
updateSysStore(this.$route.query.id, this.sysStore).then(response => {
|
||||
if(response.code == 200
|
||||
)
|
||||
{
|
||||
this.$refs[formName].resetFields();
|
||||
this.$message({
|
||||
message: '修改成功',
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
});
|
||||
this.$router.back();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.$message({
|
||||
message: response.msg,
|
||||
type: 'error',
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
;
|
||||
}
|
||||
else
|
||||
{
|
||||
createSysStore(this.sysStore).then(response => {
|
||||
if(response.code == 200
|
||||
)
|
||||
{
|
||||
this.$refs[formName].resetFields();
|
||||
this.sysStore = Object.assign({},
|
||||
defaultSysStore)
|
||||
;
|
||||
this.$message({
|
||||
message: '提交成功',
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
});
|
||||
this.$router.back();
|
||||
}
|
||||
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.sysStore = Object.assign({},
|
||||
defaultSysStore)
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.bm-view {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user