forked from TALL/check-work
17 changed files with 405 additions and 87 deletions
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,52 @@ |
|||||
|
<!-- |
||||
|
Copyright (c) 2020. |
||||
|
author: song |
||||
|
email: 15235360226@163.com |
||||
|
--> |
||||
|
|
||||
|
<template> |
||||
|
<!--百度地图容器--> |
||||
|
<div id="map" style="width:100%;height:392px;"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ContactMap', |
||||
|
components: {}, |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 百度地图API功能 |
||||
|
var map = new BMap.Map('map'); // 创建Map实例 |
||||
|
// 初始化地图,设置中心点坐标和地图级别 |
||||
|
var point = new BMap.Point(112.549977, 37.794254); |
||||
|
map.centerAndZoom(point, 18); |
||||
|
var marker = new BMap.Marker(point); // 创建标注 |
||||
|
// marker.setTitle('绿谷生物'); |
||||
|
map.addOverlay(marker); // 将标注添加到地图中 |
||||
|
var content = '<table>'; |
||||
|
content = content + '<tr><td> 绿谷生物</td></tr>'; |
||||
|
content = content + '<tr><td></td></tr>'; |
||||
|
content = content + '<tr><td> 山西省太原市晋阳街202号英语周报大厦八层</td></tr>'; |
||||
|
content += '</table>'; |
||||
|
var infowindow = new BMap.InfoWindow(content); |
||||
|
marker.openInfoWindow(infowindow); |
||||
|
// 设置标注动画效果。如果参数为null，则取消动画效果。该方法需要在addOverlay方法后设置 |
||||
|
marker.setAnimation(Animation); |
||||
|
|
||||
|
//添加地图类型控件 |
||||
|
map.addControl( |
||||
|
new BMap.MapTypeControl({ |
||||
|
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], |
||||
|
}), |
||||
|
); |
||||
|
map.setCurrentCity('太原'); // 设置地图显示的城市 此项是必须设置的 |
||||
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 |
||||
|
}, |
||||
|
|
||||
|
methods: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped></style> |
||||
@ -0,0 +1,143 @@ |
|||||
|
<!-- |
||||
|
Copyright (c) 2020. |
||||
|
author: song |
||||
|
email: 15235360226@163.com |
||||
|
--> |
||||
|
|
||||
|
<template> |
||||
|
<div class="inner"> |
||||
|
<bread-crumb :arr="arr" class="pb-5 mb-5" /> |
||||
|
<div class="white pa-5 mb-5 d-flex flex-nowrap align-center justify-space-between"> |
||||
|
<div> |
||||
|
<span class="font-16 textColor">联系人：</span> |
||||
|
<a-input :default-value="name" style="width:auto" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span class="font-16 textColor">联系电话：</span> |
||||
|
<a-input :default-value="phone" style="width:auto" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span class="font-16 textColor">公司名称：</span> |
||||
|
<a-input :default-value="company" style="width:200px" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="cart-box"> |
||||
|
<div :key="list.id" class="d-flex flex-column pa-5 white div-box mb-8" v-for="list in lists"> |
||||
|
<p class="font-bold-20 title-color">{{ list.title }}</p> |
||||
|
<div |
||||
|
:key="index" |
||||
|
@click="jumpDetails(item)" |
||||
|
class="d-flex flex-nowrap flex-row pointer mb-8" |
||||
|
v-for="(item, index) in list.list" |
||||
|
> |
||||
|
<img :src="item.src" class="cart-pic mr-8" /> |
||||
|
<div class="flex-1 flex-column"> |
||||
|
<p class="font-bold-20 title-color">{{ item.title }}</p> |
||||
|
<p class="font-14 textColor">{{ item.content }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="d-flex flex-row-reverse pb-10"> |
||||
|
<a-button type="primary">提交</a-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue'; |
||||
|
import { front } from 'config/api'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Cart', |
||||
|
components: { BreadCrumb }, |
||||
|
data() { |
||||
|
return { |
||||
|
arr: [{ name: '购物车', url: '' }], |
||||
|
name: '张三', |
||||
|
phone: '15233330000', |
||||
|
company: '山西传控电子科技有限公司', |
||||
|
lists: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: '服务', |
||||
|
list: [ |
||||
|
{ |
||||
|
src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2059927486,2456161292&fm=26&gp=0.jpg', |
||||
|
title: '检验检测服务', |
||||
|
content: '用户填写的需求描述', |
||||
|
}, |
||||
|
{ |
||||
|
src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2059927486,2456161292&fm=26&gp=0.jpg', |
||||
|
title: '检验检测服务', |
||||
|
content: '用户填写的需求描述', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: '设备', |
||||
|
list: [ |
||||
|
{ |
||||
|
src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2059927486,2456161292&fm=26&gp=0.jpg', |
||||
|
title: '检验检测服务', |
||||
|
content: '用户填写的需求描述', |
||||
|
}, |
||||
|
{ |
||||
|
src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2059927486,2456161292&fm=26&gp=0.jpg', |
||||
|
title: '检验检测服务', |
||||
|
content: '用户填写的需求描述', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('home', []), |
||||
|
created() {}, |
||||
|
methods: { |
||||
|
...mapMutations('home', []), |
||||
|
// 获取活动公告列表 |
||||
|
async getData() { |
||||
|
try { |
||||
|
this.setActIpCon(this.iptCon); |
||||
|
const params = { |
||||
|
param: {}, |
||||
|
}; |
||||
|
// const res = await front(params); |
||||
|
// const { data, msg, code } = res.data; |
||||
|
// if (code === 200) { |
||||
|
// this.lists = data.list; |
||||
|
// this.total = parseInt(data.total); |
||||
|
// } |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 跳转到详情界面 |
||||
|
jumpDetails(item) { |
||||
|
console.log('item: ', item); |
||||
|
// this.$router.push('/ActDetails'); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="stylus"> |
||||
|
.inner { |
||||
|
margin: 40px auto; |
||||
|
} |
||||
|
|
||||
|
.cart-box { |
||||
|
.div-box { |
||||
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
||||
|
} |
||||
|
|
||||
|
.cart-pic { |
||||
|
width: 233px; |
||||
|
height: 128px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue