共计 5097 个字符，预计需要花费 13 分钟才能阅读完成。
这篇我们来实现商家页面
搭建文件结构
现在我们需要来搭建项目的 html 模板：
<template>
<div class="seller" ref='sellerView'>
<div class="seller-wrapper">
<div class="seller-view">
<div class="address-wrapper">
<div class="address-left">
{{seller.address}}
</div>
<div class="address-right">
<div class="content"></div>
</div>
</div>
<div class="pics-wrapper" v-if="seller.poi_env" ref='picsView'>
<ul class="pics-list" ref='picsList'>
<li class="pics-item" v-for="imgurl in seller.poi_env.thumbnails_url_list" ref='picsItem'>
<img :src="imgurl" />
</li>
</ul>
</div>
<div class="safety-wrapper">
查看食品安全档案
<span class="icon-keyboard_arrow_right"></span>
</div>
</div>
<div class="tip-wrapper">
<div class="delivery-wrapper">
配送服务: {{seller.app_delivery_tip}}
</div>
<div class="shipping-wrapper">
配送时间: {{seller.shipping_time}}
</div>
</div>
<div class="other-wrapper">
<div class="server-wrapper">
商家服务
<div class="poi-server" v-for="item in seller.poi_service">
<img :src="item.icon" /> {{item.content}}
</div>
</div>
<div class="discounts-wrapper">
<div class="discounts-item" v-for="item in seller.discounts2">
<div class="icon">
<img :src="item.icon_url" />
</div>
<div class="text">
{{item.info}}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
我们通过 vue 的特殊特性 ref 引用了 DOM 元素 seller 类。以便我们用 BScroll。
address-wrapper 类用来存放商家地址，与电话图标。
pics-list 类用来配置商家的照片。
safety-wrapper 类来配置食品安全档案。
delivery-wrapper 类配置配送服务。
shipping-wrapper 类配置配送时间。
server-wrapper 类配置商家服务，开发票项。
discounts-item 类配置用户减免金额活动。
接入数据
内容结构完成后我们为其接入数据。
<script>
// 导入 BScroll
import BScroll from 'better-scroll';
export default {data() {
return {seller: {}
}
},
created() {
// 通过 axios 发起 get 请求。let that = this;
// 使用 that 保存 this 的指向。this.$axios.get('/api/seller')
.then(function(response) { // 获取到数据
var dataSource = response.data;
if(dataSource.code == 0) {
that.seller = dataSource.data;
// 初始化
that.$nextTick(() => {if(that.seller.poi_env.thumbnails_url_list) {let imgW = that.$refs.picsItem[0].clientWidth;
let marginR = 11;
let width = (imgW + marginR) * that.seller.poi_env.thumbnails_url_list.length;
that.$refs.picsList.style.width = width + 'px';
that.scroll = new BScroll(that.$refs.picsView, {scrollX: true});
}
that.sellerView = new BScroll(that.$refs.sellerView);
});
}
})
.catch(function(error) { // 出错处理
console.log(error);
});
},
components: {
BScroll
// 注册组件
}
}
</script>
我们通过 data 初始化了 seller。
使用 created 钩子通过 $axios 发起 get 请求。
在 $nextTick 中，通过 BScroll 实现图片的横向滚动以及 sellerView 的滚动。
组件样式
<style>
.seller {
position: absolute;
left: 0;
top: 191px;
bottom: 0px;
width: 100%;
background: #F4F4F4;
overflow: hidden;
}
.seller .seller-wrapper {background: white;}
.seller .seller-wrapper .seller-view {padding-left: 15px;}
.seller .seller-wrapper .seller-view .address-wrapper {
display: flex;
padding: 16px 0;
border-bottom: 1px solid #F4F4F4;
}
.seller .seller-wrapper .seller-view .address-wrapper .address-left {
flex: 1;
background: url(address.png) no-repeat left center;
padding-left: 26px;
padding-right: 31px;
background-size: 14px 16px;
font-size: 14px;
line-height: 19px;
}
.seller .seller-wrapper .seller-view .address-wrapper .address-right {
flex: 0 0 60px;
background: url(line.png) no-repeat left center;
background-size: 1px 15px;
}
.seller .seller-wrapper .seller-view .address-wrapper .address-right .content {
width: 100%;
height: 100%;
background: url(phone.png) no-repeat center center;
background-size: 18px 18px;
}
.seller .seller-wrapper .seller-view .pics-wrapper {
padding: 10px 0;
overflow: hidden;
border-bottom: 1px solid #F4F4F4;
white-space: nowrap;
}
.seller .seller-wrapper .seller-view .pics-wrapper .pics-list {}
.seller .seller-wrapper .seller-view .pics-wrapper .pics-list .pics-item {
display: inline-block;
margin-right: 11px;
width: 93px;
height: 75px;
}
.seller .seller-wrapper .seller-view .pics-wrapper .pics-list .pics-item img {
width: 100%;
height: 100%;
border-radius: 2px;
}
.seller .seller-wrapper .seller-view .safety-wrapper {
padding: 15px 14px 15px 25px;
background: url(safety.png) no-repeat left center;
background-size: 14px 16px;
font-size: 14px;
}
.seller .seller-wrapper .seller-view .safety-wrapper span {
float: right;
font-size: 14px;
}
.seller .seller-wrapper .tip-wrapper {padding-left: 15px;}
.seller .seller-wrapper .tip-wrapper .delivery-wrapper {background: url(delivery.png) no-repeat left center;
background-size: 14px 16px;
padding: 15px 0 15px 25px;
font-size: 14px;
border-bottom: 1px solid #F4F4F4;
}
.seller .seller-wrapper .tip-wrapper .shipping-wrapper {background: url(time.png) no-repeat left center;
padding: 15px 17px 15px 25px;
background-size: 15px 15px;
font-size: 14px;
line-height: 18px;
}
.seller .seller-wrapper .other-wrapper {padding-left: 15px;}
.seller .seller-wrapper .other-wrapper .server-wrapper {background: url(server.png) no-repeat left center;
background-size: 15px 15px;
padding: 15px 0 17px 25px;
font-size: 14px;
border-bottom: 1px solid #F4F4F4;
}
.seller .seller-wrapper .other-wrapper .server-wrapper .poi-server {
display: inline-block;
margin-left: 17px;
}
.seller .seller-wrapper .other-wrapper .server-wrapper .poi-server img {
width: 15px;
height: 15px;
margin-right: 6px;
vertical-align: middle;
}
.seller .seller-wrapper .other-wrapper .discounts-wrapper {padding: 17px 24px 19px 0;}
.seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item {display: flex;}
.seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .icon {flex: 0 0 25px;}
.seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .icon img {
width: 15px;
height: 15px;
}
.seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .text {
flex: 1;
font-size: 14px;
}
</style>
到这里商家页面的功能我们就实现了。下篇我们说下项目的优化。
正文完
