|
|
@@ -1,1256 +1,442 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <!-- 小程序头部兼容 -->
|
|
|
- <!-- #ifdef MP -->
|
|
|
- <view class="input-box flex" @click="clickSearch">
|
|
|
- <view class=" input-content flex">
|
|
|
- <view class="iconfont iconsearch"></view>
|
|
|
- <view class="input"><input type="text" disabled placeholder="搜索关键字"></view>
|
|
|
+ <view class="searchbackground">
|
|
|
+ <view class="backgroundimg">
|
|
|
+ <image src="../../static/image/background01.png" mode=""></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="mp-height"></view>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- 背景色区域 -->
|
|
|
- <view class="bg-contain">
|
|
|
- <image src="./contain.png" mode="scaleToFill">
|
|
|
- </image>
|
|
|
- <!-- 头部轮播 -->
|
|
|
- <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
|
- <swiper-item v-for="(item,index) in carouselList" class="carousel-item" @click="bannerNavToUrl(item)">
|
|
|
- <image src="./lunbo.png" mode="scaleToFill"></image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
- <!-- 自定义swiper指示器 -->
|
|
|
- <!-- <view class="swiper-dots">
|
|
|
- <text class="num">{{ swiperCurrent + 1 }}</text>
|
|
|
- <text class="sign">/</text>
|
|
|
- <text class="num">{{ swiperLength }}</text>
|
|
|
- </view> -->
|
|
|
- <!-- 分类 -->
|
|
|
- <view class="cate-section">
|
|
|
- <view class="cate-item">
|
|
|
- <image src="/static/icon/c3.png"></image>
|
|
|
- <text>联盟礼包</text>
|
|
|
- </view>
|
|
|
- <navigator url="/pages/product/groupBooking/index">
|
|
|
- <view class="cate-item">
|
|
|
- <image src="/static/icon/c5.png"></image>
|
|
|
- <text>超值拼团</text>
|
|
|
+ <view class="content flex">
|
|
|
+ <view class="input-box flex" @click="clickSearch">
|
|
|
+ <view class=" input-content flex">
|
|
|
+ <view class="iconfont iconsearch"></view>
|
|
|
+ <view class="input"><input type="text" disabled placeholder="请输入搜索内容" /></view>
|
|
|
</view>
|
|
|
- </navigator>
|
|
|
- <navigator url="/pages/product/seckill">
|
|
|
- <view class="cate-item">
|
|
|
- <image src="/static/icon/c7.png"></image>
|
|
|
- <text>限时秒杀</text>
|
|
|
+ </view>
|
|
|
+ <swiper class="carousel" autoplay="true" :interval="5000" :duration="400">
|
|
|
+ <swiper-item @click="carouselList" class="carousel-item" v-for="(item,index) in carouselList"
|
|
|
+ :key="index">
|
|
|
+ <image :src="item.pic"></image>
|
|
|
+ </swiper-item <!-- 自定义swiper指示器 -->
|
|
|
+ <view class="swiper-dots">
|
|
|
</view>
|
|
|
- </navigator>
|
|
|
- <navigator url="/pages/index/sign">
|
|
|
- <view class="cate-item">
|
|
|
- <image src="/static/icon/c8.png"></image>
|
|
|
- <text>每日签到</text>
|
|
|
+ </swiper>
|
|
|
+ <view class="customs">
|
|
|
+ <image src="../../static/image/baodan.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="customs-content">
|
|
|
+ <view class="backgroundimg1">
|
|
|
+ <image src="../../static/image/background02.png" mode=""></image>
|
|
|
</view>
|
|
|
- </navigator>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view>
|
|
|
- <!-- 可领取优惠券 -->
|
|
|
- <!-- <scroll-view class="coupon-box clamp" :scroll-x="true">
|
|
|
- <view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
|
|
|
- <view class="row flex">
|
|
|
- <view class="list-money flex">
|
|
|
- <image :src="item.is_use ? '/static/img/img02.png' : '/static/img/img03.png'" mode="scaleToFill"></image>
|
|
|
- <view class="list-money-text">
|
|
|
- <view class="tit" :class="{ noAction: item.is_use }">
|
|
|
- <text>{{ item.coupon_price }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="box">
|
|
|
+ <view class="customs-img">
|
|
|
+ <image src="../../static/img/reduce.png" mode=""></image>
|
|
|
</view>
|
|
|
- <view class="list-interval position-relative">
|
|
|
- <view class="bottom"></view>
|
|
|
- <view class="top"></view>
|
|
|
- </view>
|
|
|
- <view class="row_list_right">
|
|
|
- <view class="right_top"><text class="right_title" :class="{ noAction: item.is_use }">满减券</text></view>
|
|
|
- <view class="right_time">
|
|
|
- <text>满{{ item.use_min_price }}使用</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="right_use" :class="{ noAction: item.is_use }" @click="setCoupons(item)">
|
|
|
- <text>{{ item.is_use ? '已领取' : '立即领取' }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view> -->
|
|
|
-
|
|
|
- <!-- 秒杀楼层 -->
|
|
|
- <seckill></seckill>
|
|
|
- <!-- 砍价 -->
|
|
|
- <view class="hot-goods">
|
|
|
- <view class="hot-headers flex-upDown-center">
|
|
|
- <!-- <image class="img" src="../../static/img/img44.png"></image> -->
|
|
|
- <view class="hot-title">超值砍价</view>
|
|
|
- <view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
|
|
|
- </view>
|
|
|
- <view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
|
|
|
- <view class="hot-produce">
|
|
|
- <view class="produce-image"><image :src="baritem.image"></image></view>
|
|
|
- <view class="produce-content">
|
|
|
- <view class="produce-price1 ">
|
|
|
- <view class="produce-name line2">{{ baritem.title }}</view>
|
|
|
- <!-- <view class="produce-info">
|
|
|
- 已抢
|
|
|
- <text style="color: #FF383E">{{ baritem.sales }}</text>
|
|
|
- 箱/仅剩
|
|
|
- <text style="color:#FF383E">{{ baritem.stock }}</text>
|
|
|
- 箱
|
|
|
- </view> -->
|
|
|
- <view class="produce-center">
|
|
|
- <view class="kanjia_word">
|
|
|
- <view class="word-1">原价:￥{{ baritem.price }}</view>
|
|
|
- <view class="word-2">
|
|
|
- 砍后价
|
|
|
- <text style="font-size: 24rpx;">￥</text>
|
|
|
- <text style="font-size: 36rpx;">{{ baritem.min_price }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="kanjia_button flex-center"
|
|
|
- @tap.stop="openSubscribe('/pages/activity/goods_bargain_details/index?id=' + baritem.id + '&bargain=' + userInfo.uid)"
|
|
|
- >
|
|
|
- <view>查看详情</view>
|
|
|
- </view>
|
|
|
+ <view class="customstext">
|
|
|
+ <view class="customstext1">
|
|
|
+ <view class="customstext-title">
|
|
|
+ 竹胎酵素健康饮
|
|
|
+ </view>
|
|
|
+ <view class="customstext-product">
|
|
|
+ 健康生态饮品纯植物无香精
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 拼团楼层 -->
|
|
|
-
|
|
|
- <view class="recommend flex">
|
|
|
- <view class="recommend_list" @click="change(ls.id)" v-for="ls in recommend">
|
|
|
- <view class="re_title" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_title }}</view>
|
|
|
- <view class="re_name" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_name }}</view>
|
|
|
- <image class="selected_icon" v-bind:class="{ active: ls.id == checkid }" src="/static/img/img04.png"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <swiper id="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="checkid">
|
|
|
- <swiper-item>
|
|
|
- <!-- <scroll-view scroll-y="true" class="list-box-h"> -->
|
|
|
- <view class="guess-section">
|
|
|
- <view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
- <view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
- <text class="title clamp margin-c-20">{{ item.store_name }}</text>
|
|
|
- <view class="cmy-hr"></view>
|
|
|
- <view class="price margin-c-20 flex">
|
|
|
- <view>
|
|
|
- <text class="font-size-sm ">￥</text>
|
|
|
- {{ item.price }}
|
|
|
+ <view class="customsprice">
|
|
|
+ <view class="customsprice-left">
|
|
|
+ 健康价:￥
|
|
|
</view>
|
|
|
- <view class="font-size-sm">
|
|
|
- <text class="font-color-gray">{{ item.sales }}人购买</text>
|
|
|
+ <view class="customsprice-between">
|
|
|
+ 199
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- </scroll-view> -->
|
|
|
- </swiper-item>
|
|
|
- <swiper-item>
|
|
|
- <scroll-view scroll-y="true" class="list-box-h">
|
|
|
- <view class="guess-section">
|
|
|
- <view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
- <view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
- <text class="title clamp margin-c-20">{{ item.store_name }}</text>
|
|
|
- <view class="cmy-hr"></view>
|
|
|
- <view class="price margin-c-20 flex">
|
|
|
- <view>
|
|
|
- <text class="font-size-sm ">￥</text>
|
|
|
- {{ item.price }}
|
|
|
- </view>
|
|
|
- <view class="font-size-sm">
|
|
|
- <text class="font-color-gray">{{ item.sales }}人购买</text>
|
|
|
- </view>
|
|
|
+ <view class="customsprice-right">
|
|
|
+ 立即复购
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- <swiper-item>
|
|
|
- <scroll-view scroll-y="true">
|
|
|
- <view class="guess-section">
|
|
|
- <view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
- <navigator :url="item.link">
|
|
|
- <view class="image-wrappe r"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
- <text class="title clamp margin-c-20">{{ item.store_name }}</text>
|
|
|
- <view class="cmy-hr"></view>
|
|
|
- <view class="price margin-c-20 flex">
|
|
|
- <view>
|
|
|
- <text class="font-size-sm ">￥</text>
|
|
|
- {{ item.price }}
|
|
|
- </view>
|
|
|
- <view class="font-size-sm">
|
|
|
- <text class="font-color-gray">库存{{ item.stock + item.unit_name }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </navigator>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
-
|
|
|
- <!-- 精品 商品 -->
|
|
|
- <view class="f-header m-t">
|
|
|
- <view class="f-left-icon"></view>
|
|
|
- <view class="tit-box"><text class="tit">精品推荐</text></view>
|
|
|
- <navigator url="/pages/product/classify?type=1"><text class="iconfont iconenter">更多</text></navigator>
|
|
|
- </view>
|
|
|
- <view class="guess-section">
|
|
|
- <view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
- <view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
- <text class="title clamp margin-c-20">{{ item.store_name }}</text>
|
|
|
- <view class="cmy-hr"></view>
|
|
|
- <view class="price margin-c-20 flex">
|
|
|
- <view>
|
|
|
- <text class="font-size-sm ">￥</text>
|
|
|
- {{ item.price }}
|
|
|
- </view>
|
|
|
- <view class="font-size-sm">
|
|
|
- <text class="font-color-gray">{{ item.sales }}人购买</text>
|
|
|
- </view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- 最新 商品 -->
|
|
|
- <view class="f-header m-t">
|
|
|
- <view class="f-left-icon"></view>
|
|
|
- <view class="tit-box"><text class="tit">最新商品</text></view>
|
|
|
- <navigator url="/pages/product/classify?type=3"><text class="iconfont iconenter">更多</text></navigator>
|
|
|
- </view>
|
|
|
- <view class="guess-section">
|
|
|
- <view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
- <view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
- <text class="title clamp margin-c-20">{{ item.store_name }}</text>
|
|
|
- <view class="cmy-hr"></view>
|
|
|
- <view class="price margin-c-20 flex">
|
|
|
- <view>
|
|
|
- <text class="font-size-sm ">￥</text>
|
|
|
- {{ item.price }}
|
|
|
- </view>
|
|
|
- <view class="font-size-sm">
|
|
|
- <text class="font-color-gray">{{ item.sales }}人购买</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 促销 商品 -->
|
|
|
- <view class="f-header m-t">
|
|
|
- <view class="f-left-icon"></view>
|
|
|
- <view class="tit-box"><text class="tit">促销商品</text></view>
|
|
|
- <navigator url="/pages/product/classify?type=4"><text class="iconfont iconenter">更多</text></navigator>
|
|
|
- </view>
|
|
|
- <view class="guess-section">
|
|
|
- <view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
- <view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
- <text class="title clamp margin-c-20">{{ item.store_name }}</text>
|
|
|
- <view class="cmy-hr"></view>
|
|
|
- <view class="price margin-c-20 flex">
|
|
|
- <view>
|
|
|
- <text class="font-size-sm ">￥</text>
|
|
|
- {{ item.price }}
|
|
|
- </view>
|
|
|
- <view class="font-size-sm">
|
|
|
- <text class="font-color-gray">{{ item.sales }}人购买</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 会员升级专区 -->
|
|
|
- <!-- <view class="f-header m-t">
|
|
|
- <view class="f-left-icon"></view>
|
|
|
- <view class="tit-box"><text class="tit">会员升级专区</text></view>
|
|
|
- <text class="iconfont iconenter">更多</text>
|
|
|
- </view> -->
|
|
|
- <!-- <view class="uservip flex">
|
|
|
- <image @error="onImageError('userServant', 0)" lazy-load :src="userServant[0].image" mode="aspectFill"></image>
|
|
|
- <view class="detail">
|
|
|
- <view class="title">满园春1999元会员升级礼包</view>
|
|
|
- <view class="icon">自营</view>
|
|
|
- <view class="flex price-box">
|
|
|
- <view class="price">
|
|
|
- <text class="font-size-sm">￥</text>
|
|
|
- 18888
|
|
|
- </view>
|
|
|
- <view class="text">115人购买</view>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <view class="customs">
|
|
|
+ <image src="../../static/image/jifen.png" mode=""></image>
|
|
|
</view>
|
|
|
- </view> -->
|
|
|
-
|
|
|
- <!-- 精品推荐 -->
|
|
|
- <!-- <view class="f-header m-t">
|
|
|
- <view class="f-left-icon"></view>
|
|
|
- <view class="tit-box"><text class="tit">精品推荐</text></view>
|
|
|
- <text class="iconfont iconenter">更多</text>
|
|
|
- </view> -->
|
|
|
- <!-- <view class="guess-section">
|
|
|
- <view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
- <view class="image-wrapper"><image @error="onImageError('goodsList', index)" lazy-load :src="item.image" mode="aspectFill"></image></view>
|
|
|
- <text class="title clamp margin-c-20">
|
|
|
- <text class="icon">自营</text>
|
|
|
- {{ item.title }}
|
|
|
- </text>
|
|
|
- <view class="hr"></view>
|
|
|
- <view class="price margin-c-20 flex">
|
|
|
- <view>
|
|
|
- <text class="font-size-sm ">￥</text>
|
|
|
- {{ item.price }}
|
|
|
+ <view class="jifen-content">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="jifen-box">
|
|
|
+ <view class="img">
|
|
|
+ <image src="../../static/image/jifen1.png" mode=""></image>
|
|
|
</view>
|
|
|
- <view class="font-size-sm">
|
|
|
- <view class='detail'>
|
|
|
- <text class="icon">代理价</text>
|
|
|
- <text></text>
|
|
|
+ <view class="jifen-list">
|
|
|
+ <view class="box-title">
|
|
|
+ <view class="top">
|
|
|
+ 竹胎酵素健康饮
|
|
|
+ </view>
|
|
|
+ <view class="button">
|
|
|
+ 健康生态饮品纯植物
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="detail">
|
|
|
- <text class="font-color-yellow">会员价</text>
|
|
|
- <text class="font-color-yellow">7.5折</text>
|
|
|
+ <view class="box-price">
|
|
|
+ <view class="pricebox">
|
|
|
+ <image src="../../static/image/search.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="price-left">
|
|
|
+ 2690
|
|
|
+ </view>
|
|
|
+ <view class="price-right">
|
|
|
+ ￥360
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="tip">兑换价￥44+44积分</view>
|
|
|
</view>
|
|
|
- </view> -->
|
|
|
- <view class="Mask" v-show="shareShow">
|
|
|
- <image @click="share" src="http://shicai.liuniu946.com/static/img/shareimg4.png"></image>
|
|
|
- <view class="Toshare" @click="Toshare"></view>
|
|
|
- <view class="Tocancel" @click="Tocancel"></view>
|
|
|
+ </view>
|
|
|
+ <view class="fiexd">
|
|
|
+ <image src="../../static/image/background03.png" mode=""></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
-import seckill from '../../components/seckill/seckill.vue';
|
|
|
-import { loadIndexs } from '@/api/index.js';
|
|
|
-import { getUserInfo } from '@/api/user.js';
|
|
|
-import { setCoupons } from '@/api/functionalUnit.js';
|
|
|
-import { getBargainList } from '@/api/product.js';
|
|
|
-import { interceptor } from '@/utils/loginUtils';
|
|
|
-import { mapState } from 'vuex';
|
|
|
+ // import seckill from '../../components/seckill/seckill.vue';
|
|
|
+ // import { loadIndexs } from '@/api/index.js';
|
|
|
+ // import { getUserInfo } from '@/api/user.js';
|
|
|
+ // import { setCoupons } from '@/api/functionalUnit.js';
|
|
|
+ // import { getBargainList } from '@/api/product.js';
|
|
|
+ // import { interceptor } from '@/utils/loginUtils';
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- seckill
|
|
|
- },
|
|
|
- watch: {
|
|
|
- //自适应swiper高度
|
|
|
- checkid(newValue, oldValue) {
|
|
|
- let obj = this;
|
|
|
- if (newValue == 0) {
|
|
|
- let bHeight = Math.ceil(obj.bastList.length / 2);
|
|
|
- obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
|
|
|
- }
|
|
|
- if (newValue == 1) {
|
|
|
- let bHeight = Math.ceil(obj.goodsList.length / 2);
|
|
|
- obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
|
|
|
- }
|
|
|
- if (newValue == 2) {
|
|
|
- let bHeight = Math.ceil(obj.bastBanner.length / 2);
|
|
|
- obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
|
|
|
- }
|
|
|
},
|
|
|
- // 初次加载页面高度时修改页面高度
|
|
|
- bastList(newValue, oldValue) {
|
|
|
- let obj = this;
|
|
|
- let bHeight = Math.ceil(newValue.length / 2);
|
|
|
- obj.$nextTick(function() {
|
|
|
- uni.createSelectorQuery()
|
|
|
- .select('#list-box')
|
|
|
- .fields(
|
|
|
- {
|
|
|
- size: true
|
|
|
- },
|
|
|
- function(data) {
|
|
|
- obj.pageProportion = data.width / 750;
|
|
|
- obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
|
|
|
- }
|
|
|
- )
|
|
|
- .exec();
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- shareShow: false, //分享海报
|
|
|
- pageProportion: 0, //保存页面基于750宽度的比例
|
|
|
- swiperHeight: 0,
|
|
|
- checkid: 0,
|
|
|
- titleNViewBackground: '',
|
|
|
- swiperCurrent: 0,
|
|
|
- swiperLength: 0,
|
|
|
- bargainlist: [], //砍价商品
|
|
|
- carouselList: [{},{},{}], //轮播列表
|
|
|
- goodsList: [], //最新商品列表
|
|
|
- bastList: [], //精品推荐列表
|
|
|
- bastBanner: [], //促销商品列表
|
|
|
- menusList: [], //头部菜单
|
|
|
- page: 1,
|
|
|
- limit: 5,
|
|
|
- userServant: [
|
|
|
- {
|
|
|
- image: ''
|
|
|
+ watch: {
|
|
|
+ //自适应swiper高度
|
|
|
+ checkid(newValue, oldValue) {
|
|
|
+ let obj = this;
|
|
|
+ if (newValue == 0) {
|
|
|
+ let bHeight = Math.ceil(obj.bastList.length / 2);
|
|
|
+ obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
|
|
|
}
|
|
|
- ], //用户推广服务
|
|
|
- couponArray: [], //可领取优惠券
|
|
|
-
|
|
|
- recommend: [
|
|
|
- {
|
|
|
- id: 0,
|
|
|
- re_title: '精选',
|
|
|
- re_name: '为你推荐'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- re_title: '最新',
|
|
|
- re_name: '最新好货优选'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- re_title: '便宜好货',
|
|
|
- re_name: '90天便宜好货'
|
|
|
+ if (newValue == 1) {
|
|
|
+ let bHeight = Math.ceil(obj.goodsList.length / 2);
|
|
|
+ obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
|
|
|
}
|
|
|
- ],
|
|
|
- actTime: new Date()
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['loginInterceptor']),
|
|
|
- ...mapState('user', ['hasLogin','userInfo'])
|
|
|
- },
|
|
|
- onLoad: function(option) {
|
|
|
- // #ifndef MP
|
|
|
- if (option.spread) {
|
|
|
- // 存储其他邀请人
|
|
|
- uni.setStorageSync('spread', option.spread);
|
|
|
- }
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- if (option.scene) {
|
|
|
- // 存储小程序邀请人
|
|
|
- uni.setStorage({
|
|
|
- key: 'spread_code',
|
|
|
- data: option.scene
|
|
|
- });
|
|
|
- }
|
|
|
- // #endif
|
|
|
- },
|
|
|
- onShow: function() {
|
|
|
- // 判断是否强制登录
|
|
|
- if (this.loginInterceptor && !this.hasLogin) {
|
|
|
- // 登录拦截
|
|
|
- interceptor();
|
|
|
- }
|
|
|
- this.loadData();
|
|
|
- this.getBargainList();
|
|
|
- },
|
|
|
- //下拉刷新
|
|
|
- onPullDownRefresh() {
|
|
|
- this.loadData();
|
|
|
- },
|
|
|
- // #ifndef MP
|
|
|
- // 监听导航栏输入框点击事件
|
|
|
- onNavigationBarSearchInputClicked(e) {
|
|
|
- //跳转到搜索页面
|
|
|
- this.clickSearch();
|
|
|
- },
|
|
|
- //点击导航栏 buttons 时触发
|
|
|
- onNavigationBarButtonTap(e) {
|
|
|
- const index = e.index;
|
|
|
- if (index === 0) {
|
|
|
- this.$api.msg('点击了扫描');
|
|
|
- } else if (index === 1) {
|
|
|
- // #ifdef APP-PLUS
|
|
|
- const pages = getCurrentPages();
|
|
|
- const page = pages[pages.length - 1];
|
|
|
- const currentWebview = page.$getAppWebview();
|
|
|
- currentWebview.hideTitleNViewButtonRedDot({
|
|
|
- index
|
|
|
- });
|
|
|
- // #endif
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/user/notice'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // #endif
|
|
|
- methods: {
|
|
|
- //砍价商品推荐详情页
|
|
|
- navToDetailPages(item) {
|
|
|
- let id = item.product_id;
|
|
|
- //let type = 2;
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/product?id=' + id
|
|
|
- });
|
|
|
- },
|
|
|
- openSubscribe: function(e) {
|
|
|
- let page = e;
|
|
|
- // #ifndef MP
|
|
|
- uni.navigateTo({
|
|
|
- url: page
|
|
|
- });
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- uni.showLoading({
|
|
|
- title: '正在加载'
|
|
|
- });
|
|
|
- openBargainSubscribe()
|
|
|
- .then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- uni.navigateTo({
|
|
|
- url: page
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- uni.hideLoading();
|
|
|
- });
|
|
|
- // #endif
|
|
|
- },
|
|
|
- getBargainList() {
|
|
|
- let that = this;
|
|
|
-
|
|
|
- getBargainList({
|
|
|
- page: that.page,
|
|
|
- limit: that.limit
|
|
|
- })
|
|
|
- .then(function(res) {
|
|
|
- that.$set(that, 'bargainlist', res.data.slice(0, 2));
|
|
|
- })
|
|
|
- .catch(res => {
|
|
|
- console.log(res, 'getBargainList');
|
|
|
- });
|
|
|
- },
|
|
|
- Mask() {
|
|
|
- this.MaskShow = false;
|
|
|
- this.shareShow = true;
|
|
|
- uni.setStorage({
|
|
|
- key: 'FirstEntry',
|
|
|
- data: true,
|
|
|
- success: function() {
|
|
|
- console.log(uni.getStorageSync('FirstEntry'), 'Mask');
|
|
|
+ if (newValue == 2) {
|
|
|
+ let bHeight = Math.ceil(obj.bastBanner.length / 2);
|
|
|
+ obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- Toshare() {
|
|
|
- if (this.userInfo == '') {
|
|
|
- getUserInfo({})
|
|
|
- .then(({ data }) => {
|
|
|
- this.setUserInfo(data);
|
|
|
- this.userInfo = data;
|
|
|
- })
|
|
|
- .catch(e => {});
|
|
|
- } else {
|
|
|
- this.shareShow = false;
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid
|
|
|
+ },
|
|
|
+ // 初次加载页面高度时修改页面高度
|
|
|
+ bastList(newValue, oldValue) {
|
|
|
+ let obj = this;
|
|
|
+ let bHeight = Math.ceil(newValue.length / 2);
|
|
|
+ obj.$nextTick(function() {
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select('#list-box')
|
|
|
+ .fields({
|
|
|
+ size: true
|
|
|
+ },
|
|
|
+ function(data) {
|
|
|
+ obj.pageProportion = data.width / 750;
|
|
|
+ obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .exec();
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- Tocancel() {
|
|
|
- this.shareShow = false;
|
|
|
- },
|
|
|
- // 监听切换事件
|
|
|
- listChange(e) {
|
|
|
- this.checkid = e.detail.current;
|
|
|
- },
|
|
|
- // 點擊搜索框
|
|
|
- clickSearch() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/search'
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击触发领取优惠券
|
|
|
- setCoupons(item) {
|
|
|
- // 判断是否已经领取了优惠券
|
|
|
- let obj = this;
|
|
|
- uni.showModal({
|
|
|
- title: '领取提示',
|
|
|
- content: '是否领取优惠券',
|
|
|
- success(e) {
|
|
|
- if (e.confirm) {
|
|
|
- setCoupons({ couponId: item.id }).then(e => {
|
|
|
- item.is_use = true;
|
|
|
- uni.showToast({
|
|
|
- title: '领取成功',
|
|
|
- type: 'top',
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- });
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ carouselList: [{
|
|
|
+ pic: '../../static/image/background02.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pic: '../../static/image/baodan.png'
|
|
|
}
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //商品种类切换
|
|
|
- change(item) {
|
|
|
- let id = item;
|
|
|
- this.checkid = id;
|
|
|
- if (this.checkid == 1) {
|
|
|
- // console.log(1);
|
|
|
- this.detail = this.selected_detail;
|
|
|
- } else if (this.checkid == 2) {
|
|
|
- // console.log(2);
|
|
|
- this.detail = this.new_product;
|
|
|
- } else {
|
|
|
- this.detail = this.cheap_good;
|
|
|
- }
|
|
|
- },
|
|
|
- // 监听图片加载完成
|
|
|
- onImageError(key, index) {
|
|
|
- this[key][index].image = '/static/error/errorImage.jpg';
|
|
|
- },
|
|
|
- // 请求载入数据
|
|
|
- async loadData() {loadIndexs({})
|
|
|
- .then(({ data }) => {
|
|
|
- let goods = data.info;
|
|
|
- // this.carouselList = data.banner;
|
|
|
- // this.swiperLength = this.carouselList.length;
|
|
|
- this.menusList = data.menus;
|
|
|
- this.goodsList = goods.firstList; //最新商品
|
|
|
- this.bastList = goods.bastList; //精品推荐
|
|
|
- this.bastBanner = data.benefit; //促销单品
|
|
|
- this.$set(this, 'couponArray', data.couponList); //保存卡包券
|
|
|
+ ], //轮播列表
|
|
|
+ page: 1,
|
|
|
+ limit: 5,
|
|
|
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
- //轮播图切换修改背景色
|
|
|
- swiperChange(e) {
|
|
|
- const index = e.detail.current;
|
|
|
- this.swiperCurrent = index;
|
|
|
- this.titleNViewBackground = this.carouselList[index].background;
|
|
|
- },
|
|
|
- //详情页
|
|
|
- navToDetailPage(item) {
|
|
|
- let id = item.id;
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/product?id=' + id
|
|
|
- });
|
|
|
+ };
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ carouselList(item) {
|
|
|
|
|
|
- // 轮播图跳转
|
|
|
- bannerNavToUrl(item) {
|
|
|
- // #ifdef H5
|
|
|
- if (item.wap_url.indexOf('http') > 0) {
|
|
|
- window.location.href = item.wap_url;
|
|
|
}
|
|
|
- // #endif
|
|
|
- //测试数据没有写id，用title代替
|
|
|
- uni.navigateTo({
|
|
|
- url: item.wap_url
|
|
|
- });
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
-};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
- .container {
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
background-color: #D4FDF9;
|
|
|
}
|
|
|
-.Mask {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- position: fixed;
|
|
|
- z-index: 99999;
|
|
|
- background-color: rgba(0, 0, 0, 0.7);
|
|
|
- top: 0;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
+
|
|
|
+ .container {
|
|
|
+ min-height: 100%;
|
|
|
+ height: auto;
|
|
|
}
|
|
|
-}
|
|
|
-// 热销商品
|
|
|
- .hot-goods {
|
|
|
- margin: 0 25rpx;
|
|
|
- padding: 5rpx 25rpx 30rpx 25rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10rpx;
|
|
|
- .hot-headers {
|
|
|
- margin: 25rpx 0;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- .img {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
+
|
|
|
+ .searchbackground {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .backgroundimg {
|
|
|
+ position: absolute;
|
|
|
+ width: 750rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- .hot-title {
|
|
|
- font-size: 30rpx;
|
|
|
- margin-right: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fiexd {
|
|
|
+ position: fiexd;
|
|
|
+ bottom: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 750rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .input-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: 66rpx 25rpx;
|
|
|
+ justify-content: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 1rpx 21rpx 0rpx rgba(255, 255, 255, 0.12);
|
|
|
+ border-radius: 35rpx;
|
|
|
+ width: 700rpx;
|
|
|
+ height: 70rpx;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C4C4C4;
|
|
|
+ line-height: 38rpx;
|
|
|
}
|
|
|
- .more {
|
|
|
- line-height: 1;
|
|
|
- padding: 5rpx 10rpx 5rpx 15rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 20rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
- color: #ffffff;
|
|
|
- background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .carousel {
|
|
|
+ margin-top: 165rpx;
|
|
|
+ width: 700rpx;
|
|
|
+ height: 370rpx;
|
|
|
+
|
|
|
+ .carousel-item {
|
|
|
image {
|
|
|
- width: 20rpx;
|
|
|
- height: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .hot-lists {
|
|
|
- line-height: 1;
|
|
|
- display: flex;
|
|
|
- .hot-produce {
|
|
|
+
|
|
|
+ .customs {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 700rpx;
|
|
|
+ height: 180rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
width: 100%;
|
|
|
- height: 260rpx;
|
|
|
- border-top: 1px solid #f0f0f0;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .customs-content {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 14rpx;
|
|
|
+
|
|
|
+ .backgroundimg1 {
|
|
|
+ width: 700rpx;
|
|
|
+ height: 300rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ position: absolute;
|
|
|
+ margin-top: -250rpx;
|
|
|
+ padding: 0 38rpx;
|
|
|
display: flex;
|
|
|
- padding-top: 28rpx;
|
|
|
- .produce-image {
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .customs-img {
|
|
|
width: 200rpx;
|
|
|
height: 200rpx;
|
|
|
+
|
|
|
image {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border: 1px solid #f0f0f0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .produce-content {
|
|
|
- // flex-direction: column;
|
|
|
- margin-left: 30rpx;
|
|
|
+
|
|
|
+ .customstext {
|
|
|
+ margin-left: 14rpx;
|
|
|
height: 200rpx;
|
|
|
- position: relative;
|
|
|
- width: calc(100% - 200rpx - 30rpx);
|
|
|
- .produce-name {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 35rpx;
|
|
|
- color: #343434;
|
|
|
- }
|
|
|
- .produce-info {
|
|
|
- font-size: 20rpx;
|
|
|
- margin-top: 25rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .customstext1 {
|
|
|
+ .customstext-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customstext-product {
|
|
|
+ margin-top: 25rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ABD56F;
|
|
|
+ line-height: 20rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- .produce-price {
|
|
|
+
|
|
|
+ .customsprice {
|
|
|
display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- color: #ff383e;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-top: 70rpx;
|
|
|
- font-weight: bold;
|
|
|
- text {
|
|
|
- font-size: 36rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .customsprice-left {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF0000;
|
|
|
+ line-height: 20rpx;
|
|
|
}
|
|
|
- .produce-price-1 {
|
|
|
- font-size: 22rpx;
|
|
|
+
|
|
|
+ .customsprice-between {
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
- text-decoration: line-through;
|
|
|
- color: rgba(170, 170, 170, 1);
|
|
|
- margin-left: 20rpx;
|
|
|
+ color: #FF0000;
|
|
|
+ line-height: 20rpx;
|
|
|
}
|
|
|
- }
|
|
|
- .produce-price1 {
|
|
|
- height: 100%;
|
|
|
- letter-spacing: 3rpx;
|
|
|
- color: #ff383e;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: bold;
|
|
|
- .produce-center {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
+
|
|
|
+ .customsprice-right {
|
|
|
+ margin-left: 80rpx;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- .kanjia_word {
|
|
|
- .word-1 {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .word-2 {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #ff383e;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .kanjia_button {
|
|
|
- height: 50rpx;
|
|
|
- width: 150rpx;
|
|
|
- border-radius: 25rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #ff383e;
|
|
|
- border: 1px solid rgba(255, 56, 62, 1);
|
|
|
- }
|
|
|
+ width: 137rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ background: #3F7C1F;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-/* #ifdef MP */
|
|
|
-.mp-height {
|
|
|
- height: 44px;
|
|
|
-}
|
|
|
-.input-box {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- padding: 25rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- z-index: 999;
|
|
|
- height: 44px;
|
|
|
- .iconsearch {
|
|
|
- font-size: 50rpx;
|
|
|
- }
|
|
|
- .input-content {
|
|
|
- border-radius: 99rpx;
|
|
|
- flex-grow: 1;
|
|
|
- padding: 10rpx 30rpx;
|
|
|
- background-color: rgba(231, 231, 231, 0.7);
|
|
|
- .input {
|
|
|
- flex-grow: 1;
|
|
|
- input {
|
|
|
- font-size: $font-lg;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .input-button {
|
|
|
- padding-left: 20rpx;
|
|
|
- font-size: $font-lg;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-page {
|
|
|
- .cate-section {
|
|
|
- position: relative;
|
|
|
- z-index: 5;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- margin-top: -20rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-/* #endif */
|
|
|
-.bg-contain {
|
|
|
- height: 460rpx;
|
|
|
- width: 750rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-page {
|
|
|
- background: #f7f8f7;
|
|
|
-}
|
|
|
-.m-t {
|
|
|
- margin-top: 16rpx;
|
|
|
-}
|
|
|
-/* 头部 轮播图 */
|
|
|
-.carousel-section {
|
|
|
- position: relative;
|
|
|
- padding-top: 10px;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .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: 426rpx;
|
|
|
- transition: 0.4s;
|
|
|
- }
|
|
|
- .carousel {
|
|
|
- width: 100%;
|
|
|
- height: 240rpx;
|
|
|
- image {
|
|
|
+ .jifen-content {
|
|
|
+
|
|
|
width: 700rpx;
|
|
|
- height: 370rpx;
|
|
|
- }
|
|
|
- .carousel-item {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0 28rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: $border-radius-sm;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.swiper-dots {
|
|
|
- display: flex;
|
|
|
- position: absolute;
|
|
|
- left: 60rpx;
|
|
|
- bottom: 15rpx;
|
|
|
- width: 72rpx;
|
|
|
- height: 36rpx;
|
|
|
- background-size: 100% 100%;
|
|
|
- .num {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- border-radius: 50px;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- line-height: 36rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .sign {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 50%;
|
|
|
- line-height: 36rpx;
|
|
|
- font-size: 12rpx;
|
|
|
- color: #fff;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
-}
|
|
|
-/* 分类 */
|
|
|
-.cate-section {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 30rpx 22rpx;
|
|
|
- .cate-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- }
|
|
|
- /* 原图标颜色太深,不想改图了,所以加了透明度 */
|
|
|
- image {
|
|
|
- width: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
- margin-bottom: 14rpx;
|
|
|
- border-radius: 50%;
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
-}
|
|
|
-// 中间广告图片
|
|
|
-.ad-1 {
|
|
|
- width: 100%;
|
|
|
- height: 210rpx;
|
|
|
- padding: 10rpx 0;
|
|
|
- background: #fff;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-/*公用边框样式*/
|
|
|
-%icon {
|
|
|
- margin-right: 10rpx;
|
|
|
- display: inline-block;
|
|
|
- padding: 2rpx 10rpx;
|
|
|
- border: 1rpx solid $color-yellow;
|
|
|
- color: $color-yellow;
|
|
|
- line-height: 1;
|
|
|
- font-size: $font-base;
|
|
|
- border-radius: 10rpx;
|
|
|
-}
|
|
|
-.f-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 92rpx;
|
|
|
- padding: 6rpx 30rpx 8rpx;
|
|
|
- image {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- .tit-box {
|
|
|
- @extend %font-title-box;
|
|
|
- }
|
|
|
- .tit {
|
|
|
- @extend %font-title;
|
|
|
- }
|
|
|
- .iconenter {
|
|
|
- font-size: $font-lg + 2rpx;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
- .f-left-icon {
|
|
|
- @extend %f-left-icon;
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- font-size: $font-sm - 2rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-// 会员升级礼包
|
|
|
-.uservip {
|
|
|
- border-radius: $border-radius-sm;
|
|
|
- background-color: white;
|
|
|
- box-shadow: $box-shadow;
|
|
|
- height: 300rpx;
|
|
|
- margin: 0 30rpx;
|
|
|
- image {
|
|
|
- height: 100%;
|
|
|
- width: 300rpx;
|
|
|
- }
|
|
|
- .detail {
|
|
|
- position: relative;
|
|
|
- padding: 20rpx;
|
|
|
- height: 100%;
|
|
|
- .icon {
|
|
|
- @extend %icon;
|
|
|
- }
|
|
|
- .price-box {
|
|
|
- position: absolute;
|
|
|
- bottom: 20rpx;
|
|
|
- width: calc(100% - 40rpx);
|
|
|
- .price {
|
|
|
- font-size: $font-lg + 2rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: $font-color-base;
|
|
|
- }
|
|
|
- .text {
|
|
|
- color: $color-gray;
|
|
|
- font-size: $font-sm;
|
|
|
- }
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-size: $font-lg;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ display: flex;
|
|
|
|
|
|
-/* 猜你喜欢 */
|
|
|
-.guess-section {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 0 30rpx;
|
|
|
- .guess-item {
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: 48%;
|
|
|
- margin-bottom: 4%;
|
|
|
- border-radius: $border-radius-sm;
|
|
|
- background-color: white;
|
|
|
- box-shadow: $box-shadow;
|
|
|
- &:nth-child(2n + 1) {
|
|
|
- margin-right: 4%;
|
|
|
- }
|
|
|
- }
|
|
|
- .image-wrapper {
|
|
|
- width: 100%;
|
|
|
- height: 330rpx;
|
|
|
- border-radius: 3px;
|
|
|
- overflow: hidden;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-dark;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 80rpx;
|
|
|
- }
|
|
|
- .price {
|
|
|
- font-size: $font-lg;
|
|
|
- color: $font-color-base;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 1;
|
|
|
- line-height: 80rpx;
|
|
|
- }
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- .icon {
|
|
|
- @extend %icon;
|
|
|
- }
|
|
|
|
|
|
- .detail {
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- .tip {
|
|
|
- color: white;
|
|
|
- background-color: $color-yellow;
|
|
|
- line-height: 1.5;
|
|
|
- font-size: $font-sm;
|
|
|
- padding-left: 20rpx;
|
|
|
- }
|
|
|
-}
|
|
|
+ .jifen-box {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 336rpx;
|
|
|
+ height: 512rpx;
|
|
|
+ background: #E6FCFA;
|
|
|
+ box-shadow: 0px 7px 10px 1px #8BAFAB;
|
|
|
+ .img {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ height: 312rpx;
|
|
|
+ width: 312rpx;
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jifen-list {
|
|
|
+ margin-left: -80rpx;
|
|
|
+ .box-title {
|
|
|
+ .top {
|
|
|
+ padding: 20rpx 0 10rpx 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
|
|
|
-// 推荐
|
|
|
-.recommend {
|
|
|
- width: 95%;
|
|
|
- height: 155rpx;
|
|
|
- margin: 0rpx auto;
|
|
|
- padding-top: 30rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
- align-items: flex-start;
|
|
|
+ .button {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 35rpx;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .pricebox {
|
|
|
+ height: 25rpx;
|
|
|
+ width: 25rpx;
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .recommend_list {
|
|
|
- width: 33%;
|
|
|
- }
|
|
|
- .re_title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .re_name {
|
|
|
- color: #999999;
|
|
|
- padding-top: 10rpx;
|
|
|
- }
|
|
|
- .selected_icon {
|
|
|
- width: 25rpx;
|
|
|
- height: 10rpx;
|
|
|
- margin: 0px auto;
|
|
|
- display: none;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .active {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .active_color {
|
|
|
- color: #dc4d46 !important;
|
|
|
- }
|
|
|
-}
|
|
|
+ .price-left {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF0000;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
|
|
|
-// 列表
|
|
|
-.list-box-h {
|
|
|
- height: 1550rpx;
|
|
|
-}
|
|
|
-// 优惠券
|
|
|
-.coupon-list {
|
|
|
- display: inline-block;
|
|
|
-}
|
|
|
-.row {
|
|
|
- border-radius: 15rpx;
|
|
|
- margin: 25rpx;
|
|
|
- height: 155rpx;
|
|
|
- // width: 552rpx;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #ffffff;
|
|
|
- padding-right: 25rpx;
|
|
|
- .list-interval {
|
|
|
- border: 1px dashed $border-color-light;
|
|
|
- height: 100%;
|
|
|
- .top,
|
|
|
- .bottom {
|
|
|
- border-radius: 100rpx;
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- position: absolute;
|
|
|
- background-color: $page-color-base;
|
|
|
- right: -15rpx;
|
|
|
- }
|
|
|
- .top {
|
|
|
- top: -18rpx;
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- bottom: -18rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-money {
|
|
|
- height: 100%;
|
|
|
- min-width: 155rpx;
|
|
|
- text-align: center;
|
|
|
- image {
|
|
|
- height: 100%;
|
|
|
- width: 20rpx;
|
|
|
- }
|
|
|
- .list-money-text {
|
|
|
- flex-grow: 1;
|
|
|
- padding: 0 25rpx;
|
|
|
- .tit {
|
|
|
- text-align: center;
|
|
|
- padding: 15rpx 0rpx;
|
|
|
- font-size: 55rpx;
|
|
|
- color: $color-red;
|
|
|
- font-weight: bold;
|
|
|
- &.noAction {
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
- }
|
|
|
- .price {
|
|
|
- padding-bottom: 25rpx;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .row_list_right {
|
|
|
- // flex-grow: 1;
|
|
|
- min-width: 200rpx;
|
|
|
- padding-left: 25rpx;
|
|
|
- line-height: 1;
|
|
|
- .right_time {
|
|
|
- padding: 10rpx 0rpx;
|
|
|
- color: $font-color-light;
|
|
|
- font-size: $font-sm;
|
|
|
- }
|
|
|
- .right_top {
|
|
|
- margin: 15rpx 0;
|
|
|
- .right_name {
|
|
|
- font-size: $font-base;
|
|
|
- color: #bc253a;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .right_title {
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-base;
|
|
|
- font-weight: bold;
|
|
|
- &.noAction {
|
|
|
- color: $font-color-light;
|
|
|
+ .price-right {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 35rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .right_use {
|
|
|
- margin: 15rpx 0;
|
|
|
- padding: 10rpx;
|
|
|
- width: 160rpx;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- background-color: #bc253a;
|
|
|
- border-radius: 50rpx;
|
|
|
- font-size: $font-sm;
|
|
|
- &.noAction {
|
|
|
- background-color: $font-color-light;
|
|
|
- }
|
|
|
- }
|
|
|
- .iconlocation {
|
|
|
- font-size: 36rpx;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-=======
|
|
|
-<template>
|
|
|
- <view class="">
|
|
|
- 1111
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
</style>
|
|
|
->>>>>>> 1062124a14605e6952753b8ba2e3f401c676404f
|
