Vue实战—如何实现商家页面（15）

时间 2019-11-06

标签 vue 实战如何实现商家页面繁體版

原文原文链接

这篇咱们来实现商家页面html

搭建文件结构vue

如今咱们须要来搭建项目的html模板：ios

<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。axios

address-wrapper类用来存放商家地址，与电话图标。api

pics-list类用来配置商家的照片。安全

safety-wrapper类来配置食品安全档案。app

delivery-wrapper类配置配送服务。flex

shipping-wrapper类配置配送时间。优化

server-wrapper类配置商家服务，开发票项。this

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>

到这里商家页面的功能咱们就实现了。下篇咱们说下项目的优化。