Vue實戰—如何實現商家頁面（15）

這篇咱們來實現商家頁面

搭建文件結構

如今咱們須要來搭建項目的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>

到這裏商家頁面的功能咱們就實現了。下篇咱們說下項目的優化。