products/uni-shop/pages/index/index.vue

<template>
	<v-header mode="" async ref="header" @fetch="fetch" :title="config.name">
    <refresh-view @refresh="refresh">
      <view class="container">
        <!-- 小程序头部兼容 -->
        <!-- #ifdef MP -->
        <!-- <view class="mp-search-box"><input class="ser-input" type="text" value="输入关键字搜索" disabled /></view> -->
        <!-- #endif -->

        <!-- 头部轮播 -->
        <view class="carousel-section">
          <!-- 标题栏和状态栏占位符 -->
          <view class="titleNview-placing"></view>
          <swiper class="carousel" circular @change="swiperChange">
            <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({ product_id: item.product_id })">
              <v-image mode="aspectFill" class="screen_all"  :src="item.image" />
            </swiper-item>
          </swiper>
        </view>

        <!-- 新人赠送优惠券 -->
        <view v-if="coupon && coupon.id" class="coupon-container center">
          <layout-coupon></layout-coupon>
        </view>
        <!-- 新人赠送优惠券 -->

        <!-- 分类 -->
        <view class="cate-section">
          <view class="cate-item" v-for="(item, index) in menu" :key="index" @click="trigger(item)">
            <image :src="item.icon" ></image>
            <text>{{item.label}}</text>
          </view>
        </view>

        <!-- 精品推荐-->
        <view class="boutique row center">
          <image :src="require('./images/decorate-left.png')"></image>
          <view class="boutique-title">精品·推荐</view>
          <image :src="require('./images/decorate-right.png')"></image>
        </view>

        <!-- 商品 -->
        <view class="shop-container">
          <view class="shop-item overflow relative"
                v-for="(item,index) in goodsList"
                :key="index"
          >
            <v-image mode="aspectFill" class="screen_all" :src="item.index_bg"></v-image>
            <view class="shop-item-info absolute jEnd aCenter" :style="{color:item.font_color}">
              <view class="absolute shop-item-header row aCenter">
                <image src="/static/images/logo.jpg" class="shop-item-header-logo"></image>
                <view class="flex-all-1">
                  <view class="shop-logo-header-title">{{ config.name }}</view>
                  <view class="shop-logo-en-title">{{config.enName}}</view>
                </view>
              </view>
              <view class="shop-item-title">{{item.title}}</view>
              <text class="shop-item-price-group" v-if="item.id">
                <text class="shop-item-price-em">¥</text>
                <text class="shop-item-price">{{item.price}}</text>
                <text>/1瓶</text>
              </text>
              <view class="shop-item-buy-button relative center" @click="goShopDetail(item)" v-if="item.id">立即购买</view>
            </view>
          </view>
        </view>

        <!-- 查看更多产品 -->
        <view class="center">
          <view @click="goShopMore" class="shop-button row center">
            <text>查看更多商品</text>
            <image mode="aspectFill" :src="require('./images/more.png')"></image>
          </view>
        </view>
      </view>
    </refresh-view>
  </v-header>
</template>

<script>
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';

import menu from './data/menu';

import layoutCoupon from '@/layout/layout-coupon/index.vue';

import vHeader from '@/components/v-header/main.vue';

import refreshView from '@/components/refresh-view/main.vue';

import vImage from '@/components/v-image/main.vue';

import trigger from '@/mixins/trigger/index';

import shop from '@/utils/controls/shop';

import {
  mapState
} from 'vuex';
export default {
	components: {uniCountdown,layoutCoupon,vHeader,refreshView,vImage},
  mixins:[trigger],
	data() {
		return {
			titleNViewBackground: '',
			swiperCurrent: 0,
			swiperLength: 0,
			carouselList: [{}],
			goodsList: [{},{}],
			menu:menu,
      coupon:{}
		};
	},
	computed:{
		...mapState(['config'])
	},

	methods: {

	  fetch(obj){

	    return Promise.all([
        this.$request({
          url: '/index/getAdsList',
          cache:true
        }),
        this.$request({
          url:'index/getNewCoupon',
          token:true
        }),
        this.$request({
          url:'product/getProductList',
          cache:true,
          data:{
            is_recommend:1
          }
        })
      ]).then((data)=>{

        // 执行设置
        ['setBanner','setCoupon','setProduct'].map((item,index)=>{
          return this[item] && this[item](data[index]);
        });

        this.refreshStop && this.refreshStop();

        return obj.success();

      }).catch(()=>{
        this.refreshStop && this.refreshStop();
        obj.fail();
      });

    },

    refresh(stop){
	    this.refreshStop = stop;
	    if (this.$refs.header) {
	      if (this.$refs.header._state!==1) {
	        return this.$refs.header.reload();
        }
      } else {
        stop();
      }
    },

    setBanner(res){
      let carouselList = res.data;
      this.swiperLength = carouselList.length;
      this.carouselList = carouselList;
    },

    setCoupon(data){
      this.coupon = data.data[0];
    },

    setProduct(data){
      this.goodsList = data.data.map((item)=>{
        let price = parseFloat(item.sales_price);
        let intPrice = Math.floor(price);
        if (price === intPrice) price = intPrice;
        item.price = price;
        return item;
      });
    },

    goShopDetail(item){
	    console.log(item);
	    return shop.goShopDetail(item);
    },

    goShopMore(){
	    return this.$router.switchTab('category');
    }

	},
};
</script>

<style lang="scss">
/* #ifdef MP */
.mp-search-box {
	position: absolute;
	left: 0;
	top: 30upx;
	z-index: 9999;
	width: 100%;
	padding: 0 80upx;
	.ser-input {
		flex: 1;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		font-size: 28upx;
		color: $font-color-base;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.6);
	}
}
/* #endif */
page {

	.carousel-section {
		padding: 0;
		.titleNview-placing {
			padding-top: 0;
			height: 0;
		}
		.carousel {
			.carousel-item {
				padding: 0;
			}
		}
		.swiper-dots {
			left: 45upx;
			bottom: 40upx;
		}
	}
}


page {
	background: #f5f5f5;
}
.m-t {
	margin-top: 16upx;
}
/* 头部 轮播图 */
.carousel-section {
	position: relative;
	padding-top: 10px;

	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 44px;
		box-sizing: content-box;
	}

	.titleNview-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 426upx;
		transition: 0.4s;
	}
}

.carousel {
	width: 100%;
	height: 960upx;

	.carousel-item,image {
		width: 100%;
		height: 100%;
	}

}
.swiper-dots {
	display: flex;
	position: absolute;
	left: 60upx;
	bottom: 15upx;
	width: 72upx;
	height: 36upx;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
	background-size: 100% 100%;

	.num {
		width: 36upx;
		height: 36upx;
		border-radius: 50px;
		font-size: 24upx;
		color: #fff;
		text-align: center;
		line-height: 36upx;
	}

	.sign {
		position: absolute;
		top: 0;
		left: 50%;
		line-height: 36upx;
		font-size: 12upx;
		color: #fff;
		transform: translateX(-50%);
	}
}
/* 分类 */
.cate-section {
	display: flex;
	justify-content: space-around;
  margin-top: 20upx;
	padding: 30upx 22upx;
	.cate-item {
		display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
		flex-direction: column;
		font-size: 26upx;
		color: $font-color-dark;
	}
	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 47upx;
		height: 47upx;
		margin-bottom: 14upx;
	}
}

</style>

<style src="./style.scss" lang="scss"></style>