<template> <view class="goods-shop"> <view class="title flex"> <u-image width="100rpx" height="100rpx" border-radius="50%" :src="shop.logo"></u-image> <view class="flex-1 shop-name m-l-20 m-r-20"> <view class="bold lg line-1">{{shop.name}}</view> <view class="xs m-t-10">在售商品 {{shop.goods_on_sale}}件</view> </view> <router-link class="flex-none" :to="{path: '/pages/store_index/store_index', query: {id: shop.id}}"> <view class="primary btn br60 sm">进入店铺</view> </router-link> </view> <view v-if="list.length"> <scroll-view style="white-space: nowrap;" scroll-x="true" scroll-with-animation="true" @scroll="scrollBarChange"> <view class="goods"> <goods-list type="row" :list="list"></goods-list> </view> </scroll-view> <view class="flex row-center progress" v-if="list.length > 3"> <cu-progress :progress-bar-color="colorConfig.primary" :left="progressPer"></cu-progress> </view> </view> </view> </template> <script> import { mapGetters } from 'vuex'; import { getRect } from '@/utils/tools'; export default { data() { return { progressPer: 0, list: [] }; }, props: { shop: { type: Object, default: () => ({}) } }, computed: { ...mapGetters([ 'appConfig', ]) }, watch: { shop: { handler: function(val) { this.list = val.goods_list || [] this.$nextTick(() => { getRect(".goods-shop", false, this).then(res => { this.rectWidth = res.width; }); }) }, immediate: true, deep: true } }, methods: { scrollBarChange(e) { let { progressPer } = this; let { scrollLeft, scrollWidth } = e.detail; progressPer = scrollLeft / (scrollWidth - this.rectWidth) * 100; progressPer = Number(progressPer.toFixed(0)) this.progressPer = progressPer } } }; </script> <style lang="scss" scoped> .goods-shop { .title { padding: 20rpx; border-bottom: $-solid-border; .shop-name { width: 300rpx; } .btn { border: 1px solid $-color-primary; padding: 6rpx 28rpx; } } .progress { padding-bottom: 20rpx; } .goods { display: inline-block; padding: 20rpx; } } </style>