From 2c7812d078dfdd20b7fcc9c50b84915f692f8642 Mon Sep 17 00:00:00 2001 From: Gaoxs <704041637@qq.com> Date: Wed, 2 Sep 2020 19:59:37 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=A2=9E=E5=8A=A0=E4=B8=BA?= =?UTF-8?q?=E4=BD=A0=E6=8E=A8=E8=8D=90=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/PromotionGood.vue | 136 +++++++++++++++++++++++++++++++---- config/index.js | 4 +- pages/home/index.vue | 94 ++---------------------- 3 files changed, 128 insertions(+), 106 deletions(-) diff --git a/components/PromotionGood.vue b/components/PromotionGood.vue index 7880adb..e0bf637 100644 --- a/components/PromotionGood.vue +++ b/components/PromotionGood.vue @@ -1,20 +1,22 @@ <template> <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="pictrue"><image :src="item.image" class="image" /></view> - <view class="text"> - <view class="name line1">{{ item.storeName }}</view> - <view class="sp-money acea-row"> - <view class="moneyCon"> - 促销价: ¥ - <text class="num">{{ item.price }}</text> - </view> - </view> - <view class="acea-row row-between-wrapper"> - <view class="money">日常价:¥{{ item.otPrice }}</view> - <view>仅剩:{{ item.stock }}{{ item.unitName }}</view> - </view> - </view> + <view class="goods-box" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex" @tap="routerGo(item)"> + <view class="img-box"> + <!-- <image class="tag-img" :src="item.image" mode=""></image> --> + <image class="img" :src="item.image" lazy-load mode="aspectFill"></image> + </view> + <view class="tip one-t">{{ item.storeName }}</view> + <view class="title more-t">{{ item.storeName }}</view> + <view class="price-box"> + <view class="flex x-bc align-end"> + <view class="current">{{ item.activity_type === 'groupon' ? item.price : item.otPrice }}</view> + <view class="sales miso-font">仅剩:{{ item.stock }}{{ item.unitName }}</view> + </view> + <view class="x-f tag-box"> + <!-- <view class="discount">新人礼</view> + <view class="discount">满100减60</view> --> + </view> + </view> </view> </view> </template> @@ -34,3 +36,107 @@ export default { } }; </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> diff --git a/config/index.js b/config/index.js index 48454f6..555847f 100644 --- a/config/index.js +++ b/config/index.js @@ -1,5 +1,5 @@ // 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://h5api.dayouqiantu.cn/api'; +// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api'; +export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api'; export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static'; diff --git a/pages/home/index.vue b/pages/home/index.vue index d4a4daf..babe06d 100644 --- a/pages/home/index.vue +++ b/pages/home/index.vue @@ -37,91 +37,7 @@ </view> <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> <Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"></Coupon-window> </view> @@ -129,7 +45,6 @@ <script> import colorThief from 'miniapp-color-thief'; - // import { swiper, swiperSlide } from "vue-awesome-swiper"; import { mapState, mapMutations, @@ -139,7 +54,7 @@ import PromotionGood from '@/components/PromotionGood'; import CouponWindow from '@/components/CouponWindow'; 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 { getHomeData, getShare @@ -161,7 +76,7 @@ GoodList, PromotionGood, CouponWindow, - Menu + Menu, }, props: {}, data: function() { @@ -178,7 +93,8 @@ showCoupon: false, logoUrl: '', banner: [], - menus: [], + menus: [], + roll: [], activity: [], activityOne: {},