forked from TALL/check-work
18 changed files with 496 additions and 176 deletions
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,48 @@ |
|||
<!-- |
|||
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,142 @@ |
|||
<!-- |
|||
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 { SearchCar } 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() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
...mapMutations('home', []), |
|||
|
|||
// 获取购物车列表 |
|||
async getData() { |
|||
try { |
|||
const params = { param: { pageNum: 1, pageSize: 10 } }; |
|||
const res = await SearchCar(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
console.log('data: ', data); |
|||
// this.lists = data.list; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
|
|||
// 跳转到详情界面 |
|||
jumpDetails(item) { |
|||
console.log('item: ', item); |
|||
}, |
|||
}, |
|||
}; |
|||
</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