|
|
@@ -1,1251 +1,1243 @@
|
|
|
-<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>
|
|
|
- </view>
|
|
|
- <view class="mp-height"></view>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- 背景色区域 -->
|
|
|
- <view class="bg-contain">
|
|
|
- <image src="./contain.png" mode="scaleToFill"></image>
|
|
|
- <image class="lunbo" src="./lunbo.png" mode="scaleToFill"></image>
|
|
|
- </view>
|
|
|
- <!-- 头部轮播 -->
|
|
|
- <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
|
- <!-- <view class="lunbo">
|
|
|
- <image src="./lunbo.png" mode=""></image>
|
|
|
- </view> -->
|
|
|
- <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <!-- 自定义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>
|
|
|
- </navigator>
|
|
|
- <navigator url="/pages/product/seckill">
|
|
|
- <view class="cate-item">
|
|
|
- <image src="/static/icon/c7.png"></image>
|
|
|
- <text>限时秒杀</text>
|
|
|
- </view>
|
|
|
- </navigator>
|
|
|
- <navigator url="/pages/index/sign">
|
|
|
- <view class="cate-item">
|
|
|
- <image src="/static/icon/c8.png"></image>
|
|
|
- <text>每日签到</text>
|
|
|
- </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>
|
|
|
- <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>
|
|
|
- </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>
|
|
|
- <view class="font-size-sm">
|
|
|
- <text class="font-color-gray">{{ item.sales }}人购买</text>
|
|
|
- </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>
|
|
|
- </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>
|
|
|
- </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>
|
|
|
- <view class="font-size-sm">
|
|
|
- <view class='detail'>
|
|
|
- <text class="icon">代理价</text>
|
|
|
- <text></text>
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- <text class="font-color-yellow">会员价</text>
|
|
|
- <text class="font-color-yellow">7.5折</text>
|
|
|
- </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>
|
|
|
-</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';
|
|
|
-
|
|
|
-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: ''
|
|
|
- }
|
|
|
- ], //用户推广服务
|
|
|
- couponArray: [], //可领取优惠券
|
|
|
-
|
|
|
- recommend: [
|
|
|
- {
|
|
|
- id: 0,
|
|
|
- re_title: '精选',
|
|
|
- re_name: '为你推荐'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- re_title: '最新',
|
|
|
- re_name: '最新好货优选'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- re_title: '便宜好货',
|
|
|
- re_name: '90天便宜好货'
|
|
|
- }
|
|
|
- ],
|
|
|
- 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');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- 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
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- 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
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //商品种类切换
|
|
|
- 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); //保存卡包券
|
|
|
-
|
|
|
- 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
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 轮播图跳转
|
|
|
- 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 {
|
|
|
- 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;
|
|
|
- }
|
|
|
-}
|
|
|
-// 热销商品
|
|
|
- .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;
|
|
|
- }
|
|
|
- .hot-title {
|
|
|
- font-size: 30rpx;
|
|
|
- margin-right: 15rpx;
|
|
|
- }
|
|
|
- .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%);
|
|
|
- image {
|
|
|
- width: 20rpx;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .hot-lists {
|
|
|
- line-height: 1;
|
|
|
- display: flex;
|
|
|
- .hot-produce {
|
|
|
- width: 100%;
|
|
|
- height: 260rpx;
|
|
|
- border-top: 1px solid #f0f0f0;
|
|
|
- display: flex;
|
|
|
- padding-top: 28rpx;
|
|
|
- .produce-image {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- image {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border: 1px solid #f0f0f0;
|
|
|
- }
|
|
|
- }
|
|
|
- .produce-content {
|
|
|
- // flex-direction: column;
|
|
|
- margin-left: 30rpx;
|
|
|
- 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;
|
|
|
- }
|
|
|
- .produce-price {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- color: #ff383e;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-top: 70rpx;
|
|
|
- font-weight: bold;
|
|
|
- text {
|
|
|
- font-size: 36rpx;
|
|
|
- }
|
|
|
- .produce-price-1 {
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 500;
|
|
|
- text-decoration: line-through;
|
|
|
- color: rgba(170, 170, 170, 1);
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .produce-price1 {
|
|
|
- height: 100%;
|
|
|
- letter-spacing: 3rpx;
|
|
|
- color: #ff383e;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: bold;
|
|
|
- .produce-center {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- 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);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-/* #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;
|
|
|
- position: relative;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .lunbo {
|
|
|
- width: 700rpx;
|
|
|
- height: 370rpx;
|
|
|
- position: absolute;
|
|
|
- top: 175rpx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-}
|
|
|
-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;
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 猜你喜欢 */
|
|
|
-.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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 推荐
|
|
|
-.recommend {
|
|
|
- width: 95%;
|
|
|
- height: 155rpx;
|
|
|
- margin: 0rpx auto;
|
|
|
- padding-top: 30rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 列表
|
|
|
-.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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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="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>
|
|
|
+ </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>
|
|
|
+ </navigator>
|
|
|
+ <navigator url="/pages/product/seckill">
|
|
|
+ <view class="cate-item">
|
|
|
+ <image src="/static/icon/c7.png"></image>
|
|
|
+ <text>限时秒杀</text>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ <navigator url="/pages/index/sign">
|
|
|
+ <view class="cate-item">
|
|
|
+ <image src="/static/icon/c8.png"></image>
|
|
|
+ <text>每日签到</text>
|
|
|
+ </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>
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ <view class="font-size-sm">
|
|
|
+ <text class="font-color-gray">{{ item.sales }}人购买</text>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ <view class="font-size-sm">
|
|
|
+ <view class='detail'>
|
|
|
+ <text class="icon">代理价</text>
|
|
|
+ <text></text>
|
|
|
+ </view>
|
|
|
+ <view class="detail">
|
|
|
+ <text class="font-color-yellow">会员价</text>
|
|
|
+ <text class="font-color-yellow">7.5折</text>
|
|
|
+ </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>
|
|
|
+</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';
|
|
|
+
|
|
|
+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: ''
|
|
|
+ }
|
|
|
+ ], //用户推广服务
|
|
|
+ couponArray: [], //可领取优惠券
|
|
|
+
|
|
|
+ recommend: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ re_title: '精选',
|
|
|
+ re_name: '为你推荐'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ re_title: '最新',
|
|
|
+ re_name: '最新好货优选'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ re_title: '便宜好货',
|
|
|
+ re_name: '90天便宜好货'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ 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');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //商品种类切换
|
|
|
+ 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); //保存卡包券
|
|
|
+
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 轮播图跳转
|
|
|
+ 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 {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 热销商品
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .hot-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ }
|
|
|
+ .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%);
|
|
|
+ image {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hot-lists {
|
|
|
+ line-height: 1;
|
|
|
+ display: flex;
|
|
|
+ .hot-produce {
|
|
|
+ width: 100%;
|
|
|
+ height: 260rpx;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ display: flex;
|
|
|
+ padding-top: 28rpx;
|
|
|
+ .produce-image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .produce-content {
|
|
|
+ // flex-direction: column;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .produce-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ color: #ff383e;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 70rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .produce-price-1 {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: rgba(170, 170, 170, 1);
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .produce-price1 {
|
|
|
+ height: 100%;
|
|
|
+ letter-spacing: 3rpx;
|
|
|
+ color: #ff383e;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .produce-center {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+/* #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 {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 猜你喜欢 */
|
|
|
+.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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 推荐
|
|
|
+.recommend {
|
|
|
+ width: 95%;
|
|
|
+ height: 155rpx;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 列表
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|
xiemingyang