首页增加为你推荐模块
This commit is contained in:
Gaoxs
@ -1,20 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="promotionGood" v-if="benefit.length > 0">
|
<view class="promotionGood" v-if="benefit.length > 0">
|
||||||
<view class="item acea-row row-between-wrapper" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex" @click="routerGo(item)">
|
<view class="goods-box" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex" @tap="routerGo(item)">
|
||||||
<view class="pictrue"><image :src="item.image" class="image" /></view>
|
<view class="img-box">
|
||||||
<view class="text">
|
<!-- <image class="tag-img" :src="item.image" mode=""></image> -->
|
||||||
<view class="name line1">{{ item.storeName }}</view>
|
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
|
||||||
<view class="sp-money acea-row">
|
</view>
|
||||||
<view class="moneyCon">
|
<view class="tip one-t">{{ item.storeName }}</view>
|
||||||
促销价: ￥
|
<view class="title more-t">{{ item.storeName }}</view>
|
||||||
<text class="num">{{ item.price }}</text>
|
<view class="price-box">
|
||||||
</view>
|
<view class="flex x-bc align-end">
|
||||||
</view>
|
<view class="current">{{ item.activity_type === 'groupon' ? item.price : item.otPrice }}</view>
|
||||||
<view class="acea-row row-between-wrapper">
|
<view class="sales miso-font">仅剩：{{ item.stock }}{{ item.unitName }}</view>
|
||||||
<view class="money">日常价：￥{{ item.otPrice }}</view>
|
</view>
|
||||||
<view>仅剩：{{ item.stock }}{{ item.unitName }}</view>
|
<view class="x-f tag-box">
|
||||||
</view>
|
<!-- <view class="discount">新人礼</view>
|
||||||
</view>
|
<view class="discount">满100减60</view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -34,3 +36,107 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.goods-box {
|
||||||
|
width: 345rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
width: 345rpx;
|
||||||
|
height: 345rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 345rpx;
|
||||||
|
height: 345rpx;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
width: 346rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
background: rgba(246, 242, 234, 1);
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(168, 112, 13, 1);
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 36rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
margin: 20rpx 20rpx 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-box {
|
||||||
|
padding: 10rpx 20rpx 0;
|
||||||
|
width: 344rpx;
|
||||||
|
.sales {
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
line-height: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.current {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(225, 33, 43, 1);
|
||||||
|
line-height: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
&:before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.original {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
margin-left: 14rpx;
|
||||||
|
line-height: 22rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
&:before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-box {
|
||||||
|
.discount {
|
||||||
|
line-height: 28rpx;
|
||||||
|
border: 1rpx solid rgba(225, 33, 43, 1);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 18rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(225, 33, 43, 1);
|
||||||
|
padding: 0 8rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
|
|
||||||
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
|
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
|
||||||
export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
|
// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
|
||||||
// export const VUE_APP_API_URL = 'https://h5api.dayouqiantu.cn/api';
|
export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
|
||||||
export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static';
|
export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static';
|
||||||
|
|||||||
@ -37,91 +37,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<Menu :list="menus"></Menu>
|
<Menu :list="menus"></Menu>
|
||||||
|
|
||||||
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true" :text="singNew.info"></uni-notice-bar>
|
|
||||||
<view class="wrapper hot" v-if="bastList.length > 0">
|
|
||||||
<image class="bg" src="../../static/images/index-bg.png" mode="widthFix"></image>
|
|
||||||
<view class="title no-border acea-row row-between-wrapper">
|
|
||||||
<div class="text line1">
|
|
||||||
<span class="iconfont icon-remen"></span>
|
|
||||||
<span class="label">热门榜单</span>
|
|
||||||
</div>
|
|
||||||
<view @click="goHotNewGoods(2)" class="more">
|
|
||||||
更多
|
|
||||||
<text class="iconfont icon-jiantou"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="newProducts">
|
|
||||||
<scroll-view :show-scrollbar="false" scroll-y="false" scroll-x="true">
|
|
||||||
<view class="newProductsScroll">
|
|
||||||
<view @click="goGoodsCon(item)" class="newProductsItem" v-for="(item, likeInfoIndex) in likeInfo" :key="likeInfoIndex">
|
|
||||||
<view class="img-box">
|
|
||||||
<image :src="item.image" />
|
|
||||||
</view>
|
|
||||||
<view class="pro-info line1"><text>{{ item.storeName }}</text></view>
|
|
||||||
<view class="money font-color-red"><text>￥{{ item.price }}</text></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="wrapper" v-if="bastList.length > 0">
|
|
||||||
<view class="title no-border acea-row row-between-wrapper">
|
|
||||||
<view class="text">
|
|
||||||
<div class="name line1">
|
|
||||||
<span class="iconfont icon-jingpintuijian"></span>
|
|
||||||
<span class="label">精品推荐</span>
|
|
||||||
</div>
|
|
||||||
</view>
|
|
||||||
<view @click="goHotNewGoods(1)" class="more">
|
|
||||||
更多
|
|
||||||
<text class="iconfont icon-jiantou"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<Good-list :good-list="bastList" :is-sort="false"></Good-list>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="wrapper" v-if="firstList.length > 0">
|
|
||||||
<view class="title acea-row row-between-wrapper">
|
|
||||||
<view class="text">
|
|
||||||
<view class="name line1">
|
|
||||||
<span class="iconfont icon-xinpin"></span>
|
|
||||||
<span class="label">首发新品</span>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view @click="goHotNewGoods(3)" class="more">
|
|
||||||
更多
|
|
||||||
<text class="iconfont icon-jiantou"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="newProducts">
|
|
||||||
<scroll-view :show-scrollbar="false" scroll-y="false" scroll-x="true">
|
|
||||||
<view class="newProductsScroll">
|
|
||||||
<view @click="goGoodsCon(item)" class="newProductsItem" v-for="(item, firstListIndex) in firstList" :key="firstListIndex">
|
|
||||||
<view class="img-box">
|
|
||||||
<image :src="item.image" />
|
|
||||||
</view>
|
|
||||||
<view class="pro-info line1">{{ item.storeName }}</view>
|
|
||||||
<view class="money font-color-red">￥{{ item.price }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="wrapper" v-if="benefit.length > 0">
|
|
||||||
<view class="title acea-row row-center">
|
|
||||||
<view class="text text-center">
|
|
||||||
<div class="name line1 new-name">
|
|
||||||
<span class="iconfont icon-shoucang"></span>
|
|
||||||
<span class="txt">猜你喜欢</span>
|
|
||||||
</div>
|
|
||||||
</view>
|
|
||||||
<!-- <view @click="goGoodsPromotion(4)" class="more">
|
|
||||||
更多
|
|
||||||
<text class="iconfont icon-jiantou"></text>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<PromotionGood :benefit="benefit"></PromotionGood>
|
<PromotionGood :benefit="benefit"></PromotionGood>
|
||||||
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"></Coupon-window>
|
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"></Coupon-window>
|
||||||
</view>
|
</view>
|
||||||
@ -129,7 +45,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import colorThief from 'miniapp-color-thief';
|
import colorThief from 'miniapp-color-thief';
|
||||||
|
|
||||||
// import { swiper, swiperSlide } from "vue-awesome-swiper";
|
|
||||||
import {
|
import {
|
||||||
mapState,
|
mapState,
|
||||||
mapMutations,
|
mapMutations,
|
||||||
@ -139,7 +54,7 @@
|
|||||||
import PromotionGood from '@/components/PromotionGood';
|
import PromotionGood from '@/components/PromotionGood';
|
||||||
import CouponWindow from '@/components/CouponWindow';
|
import CouponWindow from '@/components/CouponWindow';
|
||||||
import Menu from '@/components/Menu';
|
import Menu from '@/components/Menu';
|
||||||
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
|
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
|
||||||
import {
|
import {
|
||||||
getHomeData,
|
getHomeData,
|
||||||
getShare
|
getShare
|
||||||
@ -161,7 +76,7 @@
|
|||||||
GoodList,
|
GoodList,
|
||||||
PromotionGood,
|
PromotionGood,
|
||||||
CouponWindow,
|
CouponWindow,
|
||||||
Menu
|
Menu,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data: function() {
|
data: function() {
|
||||||
@ -178,7 +93,8 @@
|
|||||||
showCoupon: false,
|
showCoupon: false,
|
||||||
logoUrl: '',
|
logoUrl: '',
|
||||||
banner: [],
|
banner: [],
|
||||||
menus: [],
|
menus: [],
|
||||||
|
|
||||||
roll: [],
|
roll: [],
|
||||||
activity: [],
|
activity: [],
|
||||||
activityOne: {},
|
activityOne: {},
|
||||||
|
|||||||
Reference in New Issue
Block a user