wepy代码知识点
index-page
<style lang="less">
.index-nood-modal {
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 99999999999;
.step1 {
position: relative;
width: 100%;
height: 100%;
.long-click {
position: absolute;
right: 53rpx;
top: 21rpx;
width: 532rpx;
height: 488rpx;
}
.next {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 180rpx;
width: 280rpx;
height: 105rpx;
}
}
.step2 {
position: relative;
width: 100%;
height: 100%;
.switch {
position: absolute;
width: 726rpx;
height: 756rpx;
left: 12rpx;
right: 12rpx;
top: 0;
margin: 0 auto;
}
.known {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 180rpx;
width: 280rpx;
height: 105rpx;
}
}
}
#indexPage .wx-swiper-dot {
margin-bottom: 20rpx;
width: 12rpx;
height: 12rpx;
opacity: 0.2;
background: #ffffff;
}
#indexPage .wx-swiper-dot-active {
opacity: 1;
background: #ffffff;
}
#indexPage::-webkit-scrollbar {
display: none;
height: 0;
width: 0;
color: transparent;
}
#indexPage {
height: 100vh;
.over::-webkit-scrollbar {
display: none;
height: 0;
width: 0;
color: transparent;
}
.ip-head {
position: relative;
z-index: 999;
top: 0;
}
.head {
position: absolute;
left: 0;
top: 0;
right: 0;
padding: 42rpx;
z-index: 9999;
transition: all 0.5s linear;
.search {
height: 72rpx;
line-height: 72rpx;
position: relative;
background: rgb(250, 250, 250);
border-radius: 36rpx;
.search-icon {
position: absolute;
top: 50%;
left: 38rpx;
width: 44rpx;
height: 44rpx;
transform: translateY(-50%);
}
input {
height: 100%;
padding-left: 94rpx;
font-size: 28rpx;
color: rgb(178, 178, 178);
}
}
}
.swipe {
.item {
height: 100%;
image {
width: 100%;
height: 100%;
}
}
}
}
.i-mango {
width: 240rpx;
height: 260rpx;
margin: 0 auto;
margin-top: 160rpx;
margin-bottom: 160rpx;
image {
width: 100%;
height: 100%;
}
}
.topWord {
width: 100%;
height: 227rpx;
margin-left: 36rpx;
margin-bottom: -66rpx;
position: relative;
.tpArrow {
width: 58rpx;
height: 58rpx;
position: absolute;
right: 76rpx;
bottom: 93rpx;
display: none;
image {
width: 100%;
height: 100%;
}
}
view {
width: 100%;
}
.topBox {
height: 136rpx;
view {
width: 72rpx;
height: 72rpx;
background-color: white;
margin-top: -7rpx;
}
.newProductCn {
height: 72rpx;
font-size: 36rpx;
width: 267rpx;
background-color: white;
}
}
.bottomBox {
.newProductEn {
font-size: 18rpx;
line-height: 22rpx;
color: #c2c2c2;
letter-spacing: 15rpx;
background-color: white;
height: 18rpx;
line-height: 18rpx;
width: 620rpx;
overflow: hidden;
}
view {
width: 72rpx;
height: 72rpx;
background-color: white;
}
}
}
.scroll-tab-bar {
width: 100%;
height: 120rpx;
line-height: 120rpx;
white-space: nowrap;
padding: 0rpx 41rpx;
background-color: #ffffff;
box-sizing: border-box;
position: sticky;
position: -webkit-sticky;
z-index: 99;
top: 0;
.cpb-bar-item {
display: inline-block;
line-height: 120rpx;
height: 120rpx;
padding: 0rpx 36rpx;
font-size: 30rpx;
color: #171717;
letter-spacing: 3.44rpx;
background-color: #ffffff;
overflow: hidden;
}
.currentCategoryStyle {
font-family: PingFangSC-Semibold;
font-size: 42rpx;
color: #353535;
letter-spacing: 4.5rpx;
font-weight: 700;
}
.categoryPoint {
width: 3px;
height: 15.9rpx;
background-color: #ff8080;
transform: rotate(-135deg);
display: inline-block;
position: relative;
top: -4rpx;
}
.category-point-left {
left: -12rpx;
}
.category-point-right {
right: -12rpx;
}
}
.cpb-products {
width: 100%;
// 开启3d加速
transform: translate3d(0, 0, 0);
.odd-bgc {
background-color: #f4f4f4;
}
.even-bgc {
background-color: #dcebf2;
}
.cpb-line {
width: 100%;
height: 86rpx;
display: flex;
flex-direction: row-reverse;
align-items: center;
.cpb-right-line {
width: 387rpx;
border-bottom: 1rpx solid #eeeeee;
margin-right: 42rpx;
}
}
.cpb-line:nth-last-child(1) {
display: none;
}
.cpb-category-name {
height: 122rpx; // 减去描述之后的高度, 标题距离顶部和底部都是21px
.cpb-category-name-top {
height: 45rpx;
margin-top: 42rpx;
position: relative;
.tt {
width: 20rpx;
height: 20rpx;
position: absolute;
top: -140rpx;
left: 0rpx;
}
.cpb-category-name-top-line {
border: none;
width: 168rpx;
border-bottom: 1rpx solid #b2b2b2;
}
.cpb-category-name-top-text {
font-size: 32rpx;
letter-spacing: 3rpx;
line-height: 45rpx;
padding: 0rpx 24rpx;
background-color: #ffffff;
color: #353535;
font-weight: 700;
}
}
.cpb-category-name-bottom {
font-size: 18rpx;
letter-spacing: 2rpx;
line-height: 25rpx;
text-align: center;
background-color: #ffffff;
color: #b2b2b2;
margin-top: 12rpx;
}
}
.cpb-product {
padding-left: 42rpx;
.cpb-left-img {
width: 240rpx;
height: 240rpx;
margin-right: 36rpx;
position: relative;
border-radius: 18rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.idForScroll {
position: absolute;
top: -200rpx;
left: 0rpx;
width: 10rpx;
height: 1rpx;
background-color: rgba(0, 0, 0, 0);
}
}
.cpb-right-text {
width: 382rpx;
justify-content: space-between;
.cpb-title {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
font-size: 30rpx;
letter-spacing: 3.4rpx;
color: #353535;
line-height: 42rpx;
}
.cpb-des {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
font-size: 22rpx;
letter-spacing: 3rpx;
color: rgba(155, 155, 155, 0.87);
line-height: 30rpx;
margin-top: 18rpx;
}
.pro-activity {
background: #ff5b21;
border-radius: 6rpx;
padding: 11rpx 12rpx;
height: 36rpx;
font-size: 20rpx;
line-height: 1;
color: #ffffff;
letter-spacing: 1rpx;
box-sizing: border-box;
text-align: center;
margin-top: 30rpx;
font-weight: bold;
}
.pro-new-upload {
background: #78e6b2;
border-radius: 6rpx;
padding: 11rpx 12rpx;
height: 36rpx;
font-size: 20rpx;
line-height: 1;
color: #fff;
letter-spacing: 1rpx;
box-sizing: border-box;
text-align: center;
margin-right: 24rpx;
margin-top: 30rpx;
font-weight: bold;
}
.activityLabel {
background-color: #ff8375;
border-radius: 6rpx;
font-family: PingFangTC-Regular;
font-size: 18rpx;
color: #ffffff;
letter-spacing: 1px;
display: inline-block;
padding: 5rpx 12rpx;
margin-top: 18rpx;
line-height: 25rpx;
}
.cpb-bottom {
align-items: center;
justify-content: flex-start;
width: 100%;
overflow: hidden;
margin-bottom: 10rpx;
.cpb-after-account {
font-size: 22rpx;
height: 36rpx;
width: 60rpx;
box-sizing: border-box;
border: 2rpx solid #ff5b21;
color: #ff5b21;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
letter-spacing: 0;
}
.cpb-now-price {
font-size: 36rpx;
line-height: 36rpx;
color: #ff675a;
margin-right: 10rpx;
align-self: center;
.cpb-now-price-rmb {
font-size: 36rpx;
line-height: 36rpx;
color: #ff5b21;
letter-spacing: 0;
margin-right: 6rpx;
}
.cpb-now-price-num {
font-size: 36rpx;
line-height: 36rpx;
color: #ff5b21;
letter-spacing: 0;
}
.cpb-now-price-param {
font-size: 22rpx;
color: #ff5b21;
letter-spacing: 1.69rpx;
margin-left: 10rpx;
}
}
.cpb-old-price {
font-size: 24rpx;
color: #bbbbbb;
letter-spacing: 1rpx;
text-decoration: line-through;
line-height: 24rpx;
align-self: center;
}
}
}
}
}
.new-coupon-container {
z-index: 99999;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.75);
align-items: center;
.coupon-fail {
margin-top: 492rpx;
font-size: 32rpx;
color: #ffffff;
letter-spacing: 3rpx;
text-align: center;
line-height: 50rpx;
}
.coupon-item {
margin-top: 415rpx;
height: 250rpx;
width: 590rpx;
background: url(https://image.velo.top/image/product/1525333541120.jpg)
no-repeat;
background-size: 100% 100%;
padding: 42rpx 88rpx 42rpx 182rpx;
box-sizing: border-box;
.coupon-item-content {
align-items: center;
width: 320rpx;
color: #353535;
.coupon-content-left {
.coupon-icon {
font-size: 36rpx;
letter-spacing: 2rpx;
}
.conpon-price {
font-size: 72rpx;
letter-spacing: 0;
}
}
.coupon-content-right {
margin-left: 18rpx;
.coupon-name {
font-family: PingFang-SC-Medium;
font-size: 28rpx;
font-weight: bold;
}
.coupon-date {
white-space: nowrap;
font-family: PingFangSC-Regular;
font-size: 22rpx;
letter-spacing: 0;
}
}
}
.coupon-btn {
line-height: 0;
width: 320rpx;
height: 52rpx;
border-radius: 26rpx;
background: #ff7e5a;
font-size: 24rpx;
color: #ffffff;
letter-spacing: 2.4rpx;
}
}
}
</style>
<template>
<view>
<!-- 新人优惠券 -->
<newerCoupon :isShow.sync="isShowNewerCoupon"></newerCoupon>
<!-- 固定在顶部的标题, 需要商品有滚动效果时启用该代码 -->
<view class="index-nood-modal" wx:if="{{noodStatus===1 || noodStatus===2}}">
<view class="step1" wx:if="{{noodStatus===1}}">
<image class="long-click" src="../asserts/img/long-click.png"></image>
<image class="next" @tap="nextNoodGuide" src="../asserts/img/next.png"></image>
</view>
<view class="step2" wx:if="{{noodStatus===2}}">
<view class="switch-applet-box">
<image class="switch" src="../asserts/img/switch-applet.png"></image>
</view>
<image class="known" @tap="knowNoodGuide" src="../asserts/img/know.png"></image>
</view>
</view>
<scroll-view scroll-y="true" id="indexPage" enable-back-to-top='{{true}}' @scroll="mainScroll" scroll-into-view="scrollId{{pageScrollTo}}">
<!-- 新年物流通知 -->
<newYearNotice wx:if='{{showMailTip}}'></newYearNotice>
<view class='over'>
<view class="ip-head">
<view class="head flex-h flex-cc">
<view class="search flex-1" @tap="toSearch">
<image class="search-icon" src="../asserts/img/search.png"></image>
<input placeholder="{{searchKeyWord?searchKeyWord:'搜索商品'}}" disabled="true" />
</view>
</view>
<view class="swipe">
<swiper style="height:660rpx" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{bannerData.imgUri}}" wx:key='{{index}}'>
<swiper-item class="item" id="{{index}}" @tap.stop='bannerPush' >
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
</view>
</view>
<!-- 固定吸顶的tab list -->
<scroll-view class="scroll-tab-bar" scroll-x="true" scroll-into-view="categoryTitleTop{{currentTitleIndex}}" scroll-with-animation="true">
<repeat for="{{categArr}}" key="index">
<view id="categoryTitleTop{{index}}" style="{{index==0?'padding-left:20rpx;':''}}" class="cpb-bar-item {{currentTitleIndex==index?'currentCategoryStyle':''}}" @tap.stop="showCurrentCategoryProducts" data-sourceid="{{item.sourceId}}" data-category="{{index}}" >
<view class="categoryPoint category-point-left" wx:if="{{currentTitleIndex===index}}"></view>
{{item.title}}
<view class="categoryPoint category-point-right" wx:if="{{currentTitleIndex===index}}"></view>
</view>
</repeat>
</scroll-view>
<!-- 商品列表 -->
<view class="cpb-products flex-v">
<repeat for="{{productArrs}}" key="idx" index="idx" item="item">
<view class="cpb-category-name" wx:if="{{item.title}}">
<view class="cpb-category-name-top flex-h flex-cc">
<view class="cpb-category-name-top-line"></view>
<view class="cpb-category-name-top-text">{{item.title}}</view>
<view class="cpb-category-name-top-line"></view>
<view class="tt" style="{{idx == 0 ? 'top:0rpx;':''}}"></view>
</view>
</view>
<view class="cpb-product flex-h" style="" @tap.stop="gotoProductDetail" data-productid="{{item.productId}}" data-index="{{(idx+1)%2}}" >
<view class="cpb-left-img flex-h flex-cc {{ (idx+1)%2?'pro-even-bk':'pro-odd-bk'}}">
<image @load="bindloadImage" src="{{item.productUri}}"></image>
<view class="idForScroll" id="scrollId{{item.sourceIndex}}" style="{{idx?'':'top:-240rpx;'}}"></view>
</view>
<view class="cpb-right-text flex-v">
<view>
<view class="cpb-title" style='-webkit-line-clamp: {{item.actName||item.newProduct?1:2}}'> {{item.productName}} </view>
<view class="cpb-des">{{item.shortDescription}}</view>
<view class="flex-h">
<view class="{{android6?'pro-new-upload':'flex-h flex-cc pro-new-upload-flex'}}" wx:if="{{item.newProduct}}">上新</view>
<view class="{{android6?'pro-activity':'flex-h flex-cc pro-active'}}" wx:if='{{item.actName}}'>{{item.actName?item.actName:''}}</view>
</view>
</view>
<view class="cpb-bottom flex-h flex-cc">
<!-- <view class="cpb-after-account">券后</view> -->
<view class="cpb-now-price flex-h flex-cc">
<view class="cpb-now-price-rmb">¥</view>
<view class="cpb-now-price-num">{{item.priceAfterDiscount/100}}</view>
<view class="cpb-now-price-param" wx:if="{{item.params}}"> / {{item.params}}</view>
</view>
<view class="cpb-old-price" hidden='{{item.price==item.priceAfterDiscount}}'>¥{{(item.price/100)}}</view>
</view>
</view>
</view>
<view class="cpb-line" wx:if="{{item.isCategoryLastProduct!='yes'}}" >
<view class="cpb-right-line"></view>
</view>
</repeat>
</view>
<!-- 新品推荐 -->
<repeat for="{{ newProductMoreGoodsData }}" key="index" index="index" item="item">
<newProduct wx:if="{{item.floorType == 'new_launch'}}" :allInfo="item" ></newProduct>
</repeat>
<!-- footer -->
<view class="i-mango" style="{{addImangoMargin?'margin-top:100rpx;':''}}">
<image src="../asserts/img/end_wanwei.png"></image>
</view>
</view>
<custoast/>
</scroll-view>
<!-- new 优惠券组件 -->
<view class="new-coupon-container flex-v" wx:if='{{detail.isPopup}}' catchtouchmove>
<view class="coupon-item flex-v flex-bc" wx:if='{{detail.allowAccept}}'>
<view class="coupon-item-content flex-h" >
<view class="coupon-content-left flex-h flex-cc">
<view class="coupon-icon">￥</view>
<view class="conpon-price">{{(detail.couponInfo.discount||0)/100}}</view>
</view>
<view class="coupon-content-right">
<view class="coupon-name">{{detail.couponInfo.couponName}}</view>
<view class="coupon-date">{{detail.couponInfo.validTime}}</view>
</view>
</view>
<view class='coupon-btn flex-h flex-cc' @tap='receiveCoupon'><view>立即领取</view></view>
</view>
<view class='coupon-fail flex-v flex-cc' hidden='{{detail.allowAccept}}' wx:if='{{detail.recieveResult===0}}'>
<view>领券成功</view>
<view>请通过购买链接下单~</view>
</view>
<view class='coupon-fail flex-v flex-cc' hidden='{{detail.allowAccept}}' wx:if='{{detail.recieveResult===1||detail.recieveResult===3}}'>
<view>抱歉，你来晚啦~</view>
<view>券已领完，下次要早点哦~</view>
</view>
<view class='coupon-fail flex-v flex-cc' hidden='{{detail.allowAccept}}' wx:if='{{detail.recieveResult===2}}'>
<view>抱歉，您的领券数量已达上限</view>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import toast from '../components/toast'
import moreGoodsProd from '../components/more-goods-prod'
import newProduct from '../components/new-product'
import tabBar from '../components/tab-bar'
import NewYearNotice from '../components/new-year-notice'
import newerCoupon from '../components/newer-coupon'
import { checkUpdateApplet } from '../utils/util.js'
var event = require('../utils/event.js')
import {
getIndexFrame,
getFloorProductList,
shareProduct,
getNotice,
pageRecord,
wanweiIndexProductListV2,
linkBindFromMP,
pushRegisterDot,
getCouponConfig,
receiveCoupon
// generateShareId
} from '../service/api'
export default class Index extends wepy.page {
config = {
navigationBarTitleText: '大叔家Ocandy'
}
components = {
newProduct: newProduct,
moreGoodsProd: moreGoodsProd,
custoast: toast,
tabBar: tabBar,
newYearNotice: NewYearNotice,
newerCoupon: newerCoupon
}
data = {
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 300,
bannerData: {},
bannerTarget: null,
bannerTargetTypeArr: null,
bannerTargetTitle: null,
addShopCarProductId: '',
indexFrame: [],
newProductMoreGoodsData: [],
pageScrollTo: '',
addImangoMargin: false,
noodStatus: 0,
showMailTip: false,
// 是否显示新手的优惠券
isShowNewerCoupon: false,
// 主页和搜索页输入框里的推荐搜索文字
searchKeyWord: '',
noRepeat: false,
pageLoadTime: {},
categoryAllData: [],
categArr: [],
productArrs: [],
currentTitleIndex: 0,
noReapClick: false,
iosFixed: false,
isIOS: false,
scrollTopArr: [],
current: -1,
tabHeight: 70,
isTabClick: false,
detail: null
}
methods = {
gotoProductDetail(e) {
if (this.$parent.globalData.preventMoreTap(e)) {
return
}
var type = e.currentTarget.dataset.index
var productId = e.currentTarget.dataset.productid
wx.navigateTo({
url: `/pages/product-detail-page?type=${type}&productId=${productId}`,
complete: () => {
this.$emit('clearTimeOut')
}
})
},
bindloadImage() {
if (!this.noRepeat) {
this.noRepeat = true
// 第一张图片加载完毕去获取dom的高度数组
this.getScrollArray()
this.pageLoadTime.imgTime = new Date().getTime()
pageRecord({
path: 'pages/index-page',
readyTime: this.pageLoadTime.startTime,
loadTime: this.pageLoadTime.imgTime
}).then(res => {})
console.log(
'index-page=>bindloadImage=>总耗时',
this.pageLoadTime.imgTime - this.pageLoadTime.startTime
)
setTimeout(() => {
this.noRepeat = true
this.$apply()
}, 3000)
}
},
showCurrentCategoryProducts(e) {
// 如果是点击tabbar 则禁止滚动事件触发,1s后解开
this.isTabClick = true
setTimeout(() => {
this.isTabClick = false
this.$apply()
}, 1000)
if (this.noReapClick === false) {
this.noReapClick = true
setTimeout(() => {
this.noReapClick = false
this.$apply()
}, 500)
this.pageScrollTo = e.currentTarget.dataset.sourceid + '0'
setTimeout(() => {
this.pageScrollTo = ''
this.$apply()
}, 1000)
// title
this.currentTitleIndex = e.currentTarget.dataset.category
this.$apply()
}
},
knowNoodGuide() {
this.noodStatus = 3
wx.showTabBar()
},
nextNoodGuide() {
wepy.setStorageSync('indexNood', 1)
this.noodStatus = 2
},
mainScroll(e) {
if (this.isTabClick) {
return
}
this.getCategoryNameTop()
},
toSearch(e) {
if (this.$parent.globalData.preventMoreTap(e)) {
return
}
wx.navigateTo({
url: '/subPackage/search-page'
})
},
bannerPush(e) {
if (this.$parent.globalData.preventMoreTap(e)) {
return
}
let target = this.bannerTarget[e.currentTarget.id]
let targetType = this.bannerTargetTypeArr[e.currentTarget.id]
let shareTitle = this.bannerTargetTitle[e.currentTarget.id]
if (targetType === '0') {
// 0不跳转
console.log('index-page=>bannerPush=>不跳转')
} else if (targetType === '1') {
// 1跳转活动
wx.navigateTo({
url: `/pages/newer-coupon-page?shareTitle=${shareTitle}`
})
} else if (targetType === '2') {
// 2跳转h5
wx.navigateTo({
url: `/pages/activity-page?url=${target}&shareTitle=${shareTitle}`
})
} else if (targetType === '3') {
// 3跳转商品详情
wx.navigateTo({
url: `/pages/product-detail-page?productId=${target}`
})
}
},
receiveCoupon() {
receiveCoupon({ couponConfigId: this.detail.couponConfigId }).then(
res => {
console.log('product-detial=>receiveCoupon=>领取优惠券', res)
if (res && res.data) {
return
}
if (res.allowWatch) {
wx.showTabBar()
this.detail.isPopup = false
this.toast({ title: res.msg, time: 1000 })
} else {
this.detail.recieveResult = res.recieveResult
this.detail.allowAccept = 0
}
this.$apply()
}
)
}
}
onShareAppMessage(res) {
var _this = this
var productId = res.target ? res.target.dataset.productid : ''
var shareId = res.target ? res.target.dataset.shareid : ''
var type = res.target ? res.target.dataset.type : ''
var floorIndex = res.target ? res.target.dataset.floorindex : ''
var index = res.target ? res.target.dataset.index : ''
var bindRelationshareId = this.$parent.globalData.bindRelationshareId
console.log(
'index-page =>onShareAppMessge =>bindRelationshareId',
bindRelationshareId
)
var path =
res.from !== 'menu'
? `/pages/index-page?productId=${productId}&isShare=1&type=${type}&shareId=${shareId}`
: `/pages/index-page?bindRelationshareId=${bindRelationshareId}`
return {
title: res.target ? res.target.dataset.title : '好吃的，在大叔家Ocandy',
path: path,
imageUrl: res.target ? res.target.dataset.imgurl : '',
success: function(_) {
// 转发成功
if (res.from !== 'menu') {
shareProduct({ productId: productId }).then(res => {
_this.newProductMoreGoodsData[floorIndex].products[index].shareNum++
_this.$apply()
})
} else {
// 更换shareId方法
_this.$parent.changeRelationShareId()
}
}
}
}
toast(obj) {
return new Promise((resolve, reject) => {
this.$invoke('custoast', 'showToast', obj).then(res => {
resolve(res)
})
})
}
events = {
emitCategoryAllData(categoryAllData) {
this.$broadcast('broadcastCategoryAllData', categoryAllData)
},
'index-emit': (...args) => {
let $event = args[args.length - 1]
console.log(
`index-page=>emitCategoryAllData=> ${this.$name} receive ${
$event.name
} from ${$event.source.$name}`
)
},
openShopCar: arg => {
this.addShopCarProductId = arg
this.$invoke('attrbox', 'setAnimation', {
productId: this.addShopCarProductId,
from: 'index'
})
this.$apply()
}
}
getIndexData() {
this.newProductMoreGoodsData = []
getIndexFrame({}).then(res => {
this.indexFrame = res
if (res[res.length - 1].floorType === 'recommend') {
this.addImangoMargin = true
}
// 获取初始数据, 将先后顺序放到新数组
res.forEach((item, index) => {
var idx = this.newProductMoreGoodsData.length
// 新品发布
if (item.sourceId && item.floorType === 'new_launch') {
this.newProductMoreGoodsData[idx] = {}
this.newProductMoreGoodsData[idx].floorType = item.floorType // 楼层信息
this.newProductMoreGoodsData[idx].sourceData = item // 原始数据, 用于渲染'新品发布'
setTimeout(() => {
getFloorProductList({ sourceId: item.sourceId }).then(res => {
this.newProductMoreGoodsData[idx].products = res // 商品数据
this.$apply()
})
}, 2000)
// 更多优选
} else if (item.sourceId && item.floorType === 'recommend') {
this.newProductMoreGoodsData[idx] = {}
this.newProductMoreGoodsData[idx].floorType = item.floorType // 楼层信息
this.newProductMoreGoodsData[idx].sourceData = item // 原始数据, 用于渲染'更多优选'
setTimeout(() => {
getFloorProductList({ sourceId: item.sourceId }).then(res => {
this.newProductMoreGoodsData[idx].products = res // 商品数据
this.$apply()
})
}, 2000)
// banner数据
} else if (item.floorType === 'banner') {
this.bannerData = item
this.bannerData.imgUri = item.imgUri.split(',')
this.bannerTarget = item.target.split(',')
this.bannerTargetTypeArr = item.targetType.split(',')
this.bannerTargetTitle = item.title.split(',')
console.log(
'index-page=>getIndexData=>this.bannerTargetTitle',
this.bannerTargetTitle
)
}
})
this.$apply()
})
}
indexNood() {
const indexNood = wepy.getStorageSync('indexNood')
if (indexNood === 0) {
this.noodStatus = 1
wx.hideTabBar()
}
}
onReady() {
this.pageLoadTime.domTime =
new Date().getTime() - this.pageLoadTime.startTime
}
getScrollArray() {
var query = wx.createSelectorQuery()
query
.selectAll('.cpb-category-name')
.boundingClientRect(res => {
res.forEach(element => {
this.scrollTopArr.push(element.top - this.tabHeight)
})
})
.exec()
wx.hideLoading()
}
findPlace(code, arr) {
let array = arr.slice(0)
var codeMin = Math.min.apply(null, array)
var codeIndex = 0
if (code <= codeMin) {
codeIndex = 0
} else {
array.push(code)
array.sort(function(x, y) {
return x - y
})
codeIndex = array.indexOf(code) - 1
}
return codeIndex
}
getCategoryNameTop() {
wx
.createSelectorQuery()
.select('#indexPage')
.fields({ scrollOffset: true }, res => {
this.current = this.findPlace(res.scrollTop, this.scrollTopArr)
if (this.current !== this.currentTitleIndex) {
this.currentTitleIndex = this.current
this.$apply()
}
})
.exec()
}
async initData() {
this.categoryAllData = await wanweiIndexProductListV2({})
if (!this.categoryAllData.length) {
return
}
this.categoryAllData.forEach((item, index) => {
if (item.productList.length) {
item.productList[item.productList.length - 1].isCategoryLastProduct =
'yes'
}
let title = item.title
let description = item.description
let flag = true
// 如果某个分类的商品个数为0则不往下执行
if (!item.productList.length) {
return
}
// 记录此分类的商品数量
item.productsLength = item.productList.length
item.productList.forEach((itm, idx) => {
if (typeof item === 'object') {
if (flag) {
itm.title = title
itm.description = description
// 将此分类的商品数量挂载到此分类的第一个商品上
itm.productsLength = item.productsLength
flag = false
this.productArrs.push(itm)
} else {
this.productArrs.push(itm)
}
}
})
// 获取分类的数据
this.categArr.push({
title: item.title,
sourceId: item.sourceId,
productsLength: item.productList[0].productsLength
})
})
this.categoryScrollTo = this.categArr[0].sourceId
this.$apply()
}
GZHToGroupDetail(opts) {
if (opts.openRecordId) {
wx.navigateTo({
url: `/pages/group/group-detail-page?openRecordId=${opts.openRecordId}`
})
} else if (opts.toPage === 'couponPage') {
wx.navigateTo({
url: `/pages/coupon-page`
})
} else {
if (opts.toPage) {
wx.navigateTo({
url: opts.toPage
})
}
}
}
noticeCardCoupon() {
event.emit('readyToGetGlobalData', 1)
}
async onLoad(opt) {
wx.hideShareMenu()
wx.showLoading({
title: '加载中...'
})
console.log('index-page =>onload =>opt', opt)
// 获取设备信息
const deviceInfo = wx.getSystemInfoSync()
if (deviceInfo.platform === 'ios') {
this.isIOS = true
} else {
this.isIOS = false
}
this.$parent.globalData.isAndroid = deviceInfo.platform === 'android'
// 初始化图片打点时间
this.pageLoadTime.startTime = new Date().getTime()
await this.$parent.userLogin()
// 首页领取优惠券
if (opt.scene) {
this.getCoupon(opt.scene)
}
// 运营打点
this.yyDot(opt)
// 从首页或活动分享menu分享进来，绑定关系
this.judgeRelation(opt)
// 通知卡片, 获取优惠券信息
this.noticeCardCoupon()
// 公众号跳转到拼团详情
this.GZHToGroupDetail(opt)
// 输入框的搜索关键字
this.searchKeyWord = this.$parent.globalData.searchKeyWord
// 获取分类信息
this.initData()
this.getNoticeList()
// 获取主页信息
this.getIndexData()
this.$apply()
// 判断推手身份,展示推手新手引导
if (this.$parent.globalData.isPush === 1) {
this.indexNood()
}
// 判断不是推手且(此处不确定)
console.log(
'index-page=>onload=>opt.recommend',
opt.recommend,
this.$parent.globalData.isPush
)
if (opt.recommend && this.$parent.globalData.isPush === 0) {
wx.navigateTo({
url: `/pages/product-detail-page?type=${opt.type}&productId=${
opt.productId
}&shareId=${opt.shareId}`
})
}
await this.$broadcast('onLoadFuc')
// 如果为1则弹框, 领券
this.isShowNewerCoupon = this.$parent.globalData.newWxCoupon
this.$apply()
}
// 扫码首页领取优惠券
getCoupon(couponConfigId) {
getCouponConfig({ couponConfigId: couponConfigId }).then(res => {
this.detail = res
wx.hideTabBar()
console.log('index-page=>getCoupon=>获取优惠券', res)
})
}
// 运营来源打点
yyDot(opts) {
if (opts.yysource) {
pushRegisterDot({
yysource: opts.yysource,
velo: 'ww',
accId: this.$parent.globalData.accId || ''
}).then(res => {
console.log('index-page=>yyDot=>res', res)
})
}
}
onShow() {
checkUpdateApplet()
}
getNoticeList() {
getNotice({}).then(res => {
console.log('index-page=>getNoticeList=>获取notice', res)
this.noticeList = res || []
if (res && res.length > 0) {
this.showMailTip = true
this.$parent.globalData.addBannerHeight = 72
} else {
this.showMailTip = false
this.$parent.globalData.addBannerHeight = 0
}
this.$apply()
})
}
/**
* 请求绑定关系的接口,绑定上级关系
*/
bindRelation(opt) {
linkBindFromMP({ fromId: opt.bindRelationshareId }).then(
res => {
console.log(
'index-page =>onload =>linkBindFromMP绑定成功',
opt.bindRelationshareId,
res
)
},
err => {
console.log('index-page =>onload =>linkBindFromMP绑定失败=>err', err)
}
)
}
/**
* 判断是否需要绑定从首页和活动页右上角分享出来的页面
*/
async judgeRelation(opt) {
// 请求shareId
await this.$parent.getIndexShareId().then(res => {
console.log('index-page =>judgeRelation =>获取shareId成功')
wx.showShareMenu()
})
// 判断是否需要绑定关系
if (opt.bindRelationshareId && this.$parent.globalData.isPush !== 1) {
this.bindRelation(opt)
}
// 判断是否需要跳转到活动页
if (opt.pagePath) {
var url = opt.actUrl
? `${opt.pagePath}?shareTitle=${opt.shareTitle}&url=${opt.actUrl}`
: `${opt.pagePath}?shareTitle=${opt.shareTitle}`
wx.navigateTo({
url: url
})
}
}
}
</script>home-page-old
<style lang="less">
.homePage {
.tabbar {
height: 80rpx;
width: 100%;
align-items: center;
.bar-item {
height: 100%;
.content {
height: 100%;
position: relative;
.title {
font-size: 30rpx;
line-height: 50rpx;
letter-spacing: 1rpx;
color: #333333;
}
.select-bar {
color: #ff8080;
}
.border-line {
position: absolute;
width: 100%;
height: 5rpx;
background: #ff8080;
left: 0;
bottom: 0;
}
}
}
}
.banner {
height: 400rpx;
width: 100%;
position: relative;
.search-box {
width: 691rpx;
height: 80rpx;
position: absolute;
left: 30rpx;
top: 20rpx;
background: #fff;
border-radius: 40rpx;
align-items: center;
font-size: 28rpx;
color: #cccccc;
z-index: 99;
.icon {
height: 24rpx;
width: 24rpx;
margin-left: 25rpx;
margin-right: 21rpx;
}
}
.swiper {
width: 100%;
height: 100%;
.swiper-item {
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
}
}
}
}
.discount {
width: 690rpx;
height: 140rpx;
background: #000;
margin: 40rpx 0;
}
.tag-bar {
margin-top: 30rpx;
width: 100%;
justify-content: flex-start;
.item {
min-width: 25%;
max-width: 25%;
margin-bottom: 20rpx;
.icon {
height: 90rpx;
width: 90rpx;
min-width: 90rpx;
margin-bottom: 20rpx;
}
.tag-name {
font-size: 24rpx;
color: #666666;
}
}
}
.activity {
margin-top: 30rpx;
width: 100%;
.act-title {
height: 140rpx;
width: 100%;
.act-name {
padding: 0 38rpx;
height: 60rpx;
border: 2rpx solid #ff8080;
border-radius: 30rpx;
font-size: 32rpx;
color: #333333;
background: #fff5f1;
}
}
.act-title-1 {
height: 400rpx;
width: 100%;
.act-name {
padding: 0 38rpx;
height: 60rpx;
border: 2rpx solid #ff8080;
border-radius: 30rpx;
font-size: 32rpx;
color: #333333;
background: #fff5f1;
}
}
.goods-top {
width: 100%;
}
.goods-item {
margin-top: 40rpx;
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
.goods-img {
height: 200rpx;
width: 200rpx;
border-radius: 20rpx;
}
.goods-right {
margin-left: 20rpx;
height: 200rpx;
.goods-name {
font-size: 28rpx;
color: #333333;
overflow: hidden;
margin-bottom: 15rpx;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
display: -webkit-box;
text-overflow: ellipsis;
word-wrap: break-word;
}
.goods-desc {
font-size: 24rpx;
color: #999999;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
display: -webkit-box;
text-overflow: ellipsis;
word-wrap: break-word;
}
.goods-price {
width: 100%;
font-size: 36rpx;
color: #ff8080;
align-items: flex-end;
line-height: 40rpx;
.fail-price {
line-height: 40rpx;
font-size: 24rpx;
color: #999;
margin-left: 33rpx;
text-decoration: line-through;
}
}
}
}
.act-goods {
margin-top: 40rpx;
height: 280rpx;
width: 100%;
white-space: nowrap;
.act-item {
margin-right: 54rpx;
display: inline-block;
height: 240rpx;
width: 636rpx;
background: #f7f7f7;
padding: 0 30rpx;
box-sizing: border-box;
.act-item-container {
align-items: center;
height: 100%;
width: 100%;
}
.goods-img {
height: 200rpx;
width: 200rpx;
border-radius: 20rpx;
}
.goods-right {
margin-left: 20rpx;
height: 200rpx;
.goods-name {
font-size: 26rpx;
color: #666666;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
display: -webkit-box;
text-overflow: ellipsis;
word-wrap: break-word;
}
.goods-desc {
margin-bottom: 25rpx;
font-size: 24rpx;
color: #666666;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
display: -webkit-box;
text-overflow: ellipsis;
word-wrap: break-word;
}
.goods-price {
width: 100%;
font-size: 36rpx;
color: #ff8080;
align-items: flex-end;
line-height: 40rpx;
.fail-price {
line-height: 40rpx;
font-size: 24rpx;
color: #999;
margin-left: 10rpx;
text-decoration: line-through;
}
}
}
}
}
}
.adv-title {
width: 100%;
height: 360rpx;
}
.adv-list {
margin-top: 40rpx;
// margin-bottom: 70rpx;
width: 100%;
white-space: nowrap;
.adv-item-container {
display: inline-block;
margin-left: 30rpx;
.adv-item {
align-items: center;
margin-bottom: 20rpx;
.adv-img {
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
background: #f5f5f5;
margin-bottom: 20rpx;
}
.adv-name {
width: 200rpx;
height: 60rpx;
overflow: hidden;
line-height: 30rpx;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
display: -webkit-box;
text-overflow: ellipsis;
word-wrap: break-word;
font-size: 26rpx;
color: #333333;
text-align: center;
margin-bottom: 20rpx;
}
.adv-price {
font-size: 28rpx;
color: #ff8080;
text-align: center;
}
}
}
}
}
</style>
<template>
<view class='container homePage'>
<view class="tabbar flex-h">
<view class="bar-item flex-v flex-1 flex-cc" wx:for='{{tagBar}}' wx:key='index' @tap='tagChange' id='{{index}}'>
<view class="content flex-v flex-cc">
<view class="title {{currentIndex==index ? 'select-bar':''}}">{{item.title}}</view>
<view class="border-line" wx:if='{{currentIndex==index}}'></view>
</view>
</view>
</view>
<view class="banner">
<view class="search-box flex-h" @tap='toSearch'>
<image class="icon"></image>
<view class="search-content">搜索商品</view>
<!-- 大家都在搜：水光针 -->
</view>
<!--轮播图-->
<swiper class='swiper' autoplay interval='5000' circular>
<swiper-item wx:for='{{banner}}' wx:key='index' class='swiper-item'>
<image src='{{item.imgUri}}' @tap='bannerTap' id='{{item.target}}'></image>
</swiper-item>
</swiper>
</view>
<!-- 优惠券 -->
<view class="discount" wx:if='{{false}}'></view>
<!-- tag -->
<view class="tag-bar flex-h flex-wrap">
<view class="item flex-v flex-cc flex-1" wx:for='{{tabBar}}' wx:key='index' @tap='tagTap' id='{{index}}'>
<image class="icon" src='{{item.icon}}'></image>
<view class="tag-name">{{item.tagName}}</view>
</view>
</view>
<block wx:for='{{floorList}}' wx:key='index'>
<view class="activity flex-v flex-cc" wx:if='{{item.type==0}}'>
<image class="act-title flex-cc flex-h" src='{{item.icon}}' @tap='tagTap' id='{{index}}' data-type='banner'>
<!-- <view class="act-name flex-cc flex-h">限时购</view> -->
</image>
<view class="goods-item flex-h" wx:for='{{item.products}}' wx:key='index' wx:for-item='pItem' @tap='toGoodsDetail' id='{{pItem.productId}}'>
<image class="goods-img" src="{{pItem.imgUri}}"></image>
<view class="goods-right flex-1 flex-v flex-bc">
<view class="goods-top">
<view class="goods-name">{{pItem.productName}}</view>
<view class="goods-desc">{{pItem.shortDescription}}</view>
</view>
<view class="goods-price flex-h">
<view class="real-price">￥{{pItem.SELL_PRICE/100 || 0}}</view>
<view class="fail-price">￥{{pItem.underlinePrice/100 || 0}}</view>
</view>
</view>
</view>
<!-- <scroll-view class="act-goods" scroll-x=‘{{true}}’>
<view class="act-item" wx:for='{{[0,0,0,0,0]}}'>
<view class="act-item-container flex-h">
<image class="goods-img"></image>
<view class="goods-right flex-1 flex-v flex-bc">
<view class="goods-top">
<view class="goods-desc">两盒大套装</view>
<view class="goods-name">私人定制美眼打造 超靓玻尿酸 极致美白享受 不一样的体验</view>
</view>
<view class="goods-price flex-h">
<view class="real-price">￥999</view>
<view class="fail-price">￥999</view>
</view>
</view>
</view>
</view>
</scroll-view> -->
</view>
<block wx:if='{{item.type==1}}' >
<image src='{{item.icon}}' class="adv-title" style='margin-top:30rpx;' @tap='tagTap' id='{{index}}' data-type='banner'></image>
<view class="adv-list flex-h flex-wrap">
<view class="adv-item-container" wx:for='{{item.products}}' wx:key='index' wx:for-item='pItem'>
<view class="adv-item flex-v" @tap='toGoodsDetail' id='{{pItem.productId}}'>
<image class="adv-img" src='{{pItem.imgUri}}'></image>
<view class="adv-name">{{pItem.productName}}</view>
<view class="adv-price">¥ {{pItem.SELL_PRICE/100||0}}</view>
</view>
</view>
</view>
</block>
<view class="activity flex-v flex-cc" wx:if='{{item.type==2}}' style='margin-bottom:50rpx'>
<image class="act-title-1 flex-cc flex-h" src='{{item.icon}}' @tap='tagTap' id='{{index}}' data-type='banner'>
<!-- <view class="act-name flex-cc flex-h">限时购</view> -->
</image>
<view class="goods-item flex-h" wx:for='{{item.products}}' wx:key='index' wx:for-item='pItem' @tap='toGroupGoodsDetail' id='{{pItem.groupId}}' data-opid='{{pItem.groupOpenRecordId}}'>
<image class="goods-img" src='{{pItem.imgUri}}'></image>
<view class="goods-right flex-1 flex-v flex-bc">
<view class="goods-top">
<view class="goods-name">{{pItem.productName}}</view>
<view class="goods-desc">{{pItem.shortDescription}}</view>
</view>
<view class="goods-price flex-h">
<view class="real-price">￥{{pItem.SELL_PRICE/100||0}}</view>
<view class="fail-price">￥{{pItem.underlinePrice/100||0}}</view>
</view>
</view>
</view>
</view>
</block>
<authBox></authBox>
</view>
</template>
<script>
import wepy from 'wepy'
import toast from '../components/toast'
import authBox from '../components/auth-box'
import { indexData, indexBannerAndTag } from '../service/api.js'
var event = require('../utils/event.js')
export default class Home extends wepy.page {
config = {
navigationBarTitleText: '大叔家Ocandy'
}
components = {
custoast: toast,
authBox: authBox
}
data = {
banner: [],
tabBar: [],
// recommendList: [],
floorList: [],
currentIndex: 0
}
methods = {
bannerTap(e) {
if (e.currentTarget.id) {
wx.navigateTo({ url: e.currentTarget.id })
}
},
toSearch() {
wx.navigateTo({
url: '/subPackage/search-page?autoFocus=true'
})
},
tagChange(e) {
this.currentIndex = e.currentTarget.id
this.$apply()
},
toGoodsDetail(e) {
wx.navigateTo({
url: '/pages/product-detail-page?productId=' + e.currentTarget.id
})
},
toGroupGoodsDetail(e) {
wx.navigateTo({
url:
'/pages/group/group-product-page?groupId=' +
e.currentTarget.id +
'&openRecordId=' +
e.currentTarget.dataset.opid
})
},
tagTap(e) {
let index = e.currentTarget.id
if (e.currentTarget.dataset.type == 'banner') {
wx.navigateTo({
url: this.floorList[index].redictTarget
? this.floorList[index].redictTarget
: `/subPackage/search-page?tagId=${this.floorList[index].id}`
})
} else {
wx.navigateTo({
url: this.tabBar[index].redictTarget
? this.tabBar[index].redictTarget
: `/subPackage/search-page?tagId=${this.tabBar[index].id}`
})
}
console.log('index==:>', this.tabBar[index].redictTarget)
// this.tabBar[index].redictTarget &&
// wx.navigateTo({
// url: this.tabBar[index].redictTarget
// ? this.tabBar[index].redictTarget
// : `/subPackage/search-page?tagId=${this.tabBar[index].id}`
// })
}
}
onShareAppMessage(res) {
return {
title: '大叔家Ocandy'
}
}
toast(obj) {
return new Promise((resolve, reject) => {
this.$invoke('custoast', 'showToast', obj).then(res => {
resolve(res)
})
})
}
// _indexBannerAndTag() {
// indexBannerAndTag({}).then(res => {
// console.log('banner+tag==>', res)
// this.banner = res.banner
// this.tagBar = res.tagBar
// this.$apply()
// })
// }
_indexData() {
indexData({}).then(res => {
// this.recommendList = res.recommendList
this.floorList = res.tagList
this.banner = res.banners
this.tabBar = res.tabBar
this.$apply()
console.log('indexData==>', res)
})
}
events = {}
// onReady() {}
async onLoad(opt) {
// wx.hideShareMenu()
wx.showLoading({
title: '加载中...'
})
let isLogin = await this.$parent.userLogin()
console.log('进入首页，当前登录状态===>', isLogin)
wx.hideLoading()
// 调起授权框 登陆&授权成功走请求
if (!isLogin) {
console.log('---------', !isLogin)
this.$invoke('authBox', 'showAuthBox')
event.on('getAuthSuc', this, () => this.onLoad())
} else {
// this._indexBannerAndTag()
this._indexData()
}
}
}
</script>home-page
<style lang="less">
.box {
position: relative;
.images-box {
width: 100%;
height: 400rpx;
}
.sign {
position: absolute;
bottom: 32rpx;
right: 30rpx;
width: 100rpx;
height: 46rpx;
font-size: 26rpx;
text-align: center;
background: rgba(0, 0, 0, .4);
border-radius: 20rpx;
line-height: 46rpx;
color: #ffffff;
}
}
.group-person {
align-items: center;
background-color: #F5F5F5;
height: 100rpx;
text-align: center;
.list-person {
color: #666666;
line-height: 100rpx;
font-size: small;
margin-left: 30rpx;
}
.avatar-list {
margin-left: 280rpx;
.avatar {
width: 60rpx;
height: 60rpx;
line-height: 100rpx;
border-radius: 50%;
margin-right: -15rpx;
}
}
}
.clear{
clear: both;
overflow: hidden;
}
navigator{
display:inline;
}
.list{
margin-top: 20rpx;
.list_item{
margin-top:10px;
margin-bottom: 30rpx;
padding: 30rpx;
height:100px;
/*border-bottom:1px solid #E8E8E8;*/
.img{
float:left;
image{
width: 210rpx;
height: 210rpx;
border-radius: 10rpx;
}
}
}
}
.list .list_item .info{
width: 69%;
float: right;
height: 110px;
position: relative;
}
.list .list_item .info .title{
color:#333;
margin-left: 22rpx;
font-size: 30rpx;
}
.list .list_item .info .flex-h .group-price{
color: #8d8d8d;
margin-left: 22rpx;
margin-top: 30rpx;
margin-bottom: 58rpx;
font-size: 26rpx;
}
.list .list_item .info .flex-h .price{
color: #ff5050;
margin-top: 30rpx;
margin-bottom: 58rpx;
font-size: 22rpx;
}
.list .list_item .info .flex-h .rel-price{
color: #afafaf;
margin-left: 24rpx;
margin-bottom: 58rpx;
margin-top: 30rpx;
font-size: 20rpx;
}
.list .list_item .info .flex-h .num{
position: absolute;
right: 20rpx;
bottom: 15rpx;
color: #afafaf;
font-size: 22rpx;
}
.line {
background-color: #f5f5f5;
height: 10rpx;
}
.scroll-view-x {
height: 400rpx;
white-space:nowrap;
display:flex;
padding-top:10rpx;
}
.scroll-view-x .pic {
width: 260rpx;
height: 260rpx;
margin-left: 15rpx;
}
.slider {
height: 452rpx;
overflow-x: auto;
white-space: nowrap;
}
.slider::-webkit-scrollbar {
display: none; /*不展示横向滚动条*/
}
.slide_son{
margin-left: 30rpx;
width: 260rpx;
display: inline-block;
}
.slide_son image{
width: 260rpx;
height: 260rpx;
display: block;
border-radius: 10rpx;
}
.slider_title {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space:normal;
word-break: break-all;
word-wrap : break-word;
width: 208rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
font-size: 26rpx;
}
.slide_price{
color: #FF4D4D;
font-size: 28rpx;
line-height: 28rpx;
height: 28rpx;
}
.slider_sale{
color: #666666;
font-size: 26rpx;
line-height: 28rpx;
height: 28rpx;
margin-right: 10rpx;
}
.slider-v {
float: left;
margin-left: 0%;
width: 50%;
margin-top: 35rpx;
/*margin-bottom: 44rpx;*/
height: 512rpx;
.slide_son{
display: inline-block;
width: 335rpx;
margin: 20rpx;
}
}
.slider-v .slide_son image{
width: 320rpx;
height: 320rpx;
display: block;
}
.slider-v .slide_son .slider_title {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space:normal;
word-break: break-all;
word-wrap : break-word;
width: 328rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
font-size: 26rpx;
}
.slider-v .slide_son .slider_sale {
color: #afafaf;
font-size: 13px;
line-height: 30px;
height: 30px;
margin-right: 5px;
margin-left: 10rpx;
}
.slider-v .slide_son .slider_btn {
color: white;
text-align: center;
width: 190rpx;
height: 40rpx;
margin-top: 20rpx;
line-height: 40rpx;
border-radius: 5rpx;
background-color: #FF4D4D;
display: block;
font-size: 24rpx;
}
.list .list_item .info .flex-h .group-persons {
position:absolute;
left:20rpx;
bottom:10rpx;
color:white;
text-align:center;
width:110rpx;
height:36rpx;
line-height:40rpx;
border-top-left-radius: 10rpx;
border-bottom-left-radius: 10rpx;
background: linear-gradient(to left,#FFB2B2,#FF4D4D);
display:block;
font-size:24rpx;
border: 1rpx solid #ff4d4d;
border-right:none;
}
.list .list_item .info .flex-h .group-persons-price {
position: absolute;
right: 180rpx;
bottom: 10rpx;
color: #ff4d4d;
border: 1rpx solid #ff4d4d;
border-left:none;
text-align: center;
width: 165rpx;
height: 36rpx;
line-height: 40rpx;
border-top-right-radius: 10rpx;
border-bottom-right-radius: 10rpx;
display: block;
font-size: 24rpx;
}
.newgroup {
margin-bottom: 40rpx;
width: 100%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
position: relative;
margin-top: 100rpx;
}
.newproduct {
height: 100rpx;
margin-top: 70rpx;
margin-bottom: 40rpx;
width: 100%;
line-height: 70rpx;
text-align: center;
position: relative;
margin-top: 100rpx;
}
.hotproduct {
margin-top: 100rpx;
margin-bottom: 40rpx;
width: 100%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
position: relative;
}
.newgroup .right image {
position: absolute;
height: 16rpx;
width: 294rpx;
float: left;
left: 0rpx;
}
.newproduct .right image {
position: absolute;
height: 16rpx;
width: 294rpx;
float: left;
left: 0rpx;
}
.hotproduct .right image {
position: absolute;
height: 16rpx;
width: 294rpx;
float: left;
left: 0rpx;
}
.newgroup .title{
width: 120rpx;
height: 50rpx;
position: absolute;
top: -30rpx;
margin-left: 317rpx;
font-size: 30rpx;
color: #333333;
}
.newproduct .title{
width: 120rpx;
height: 50rpx;
text-align: center;
position: absolute;
top: -30rpx;
margin-left: 317rpx;
font-size: 30rpx;
color: #333333;
}
.hotproduct .title{
width: 120rpx;
height: 50rpx;
position: absolute;
top: -30rpx;
margin-left: 317rpx;
font-size: 30rpx;
color: #333333;
}
.newgroup .left image {
position: absolute;
height: 16rpx;
width: 294rpx;
float: right;
right: 0rpx;
}
.newproduct .left image {
position: absolute;
height: 16rpx;
width: 294rpx;
float: right;
right: 0rpx;
}
.hotproduct .left image {
position: absolute;
height: 16rpx;
width: 294rpx;
float: right;
right: 0rpx;
}
.newgroup .us-title {
font-size: 18rpx;
margin-top: 20rpx;
color: #333333;
}
.newproduct .us-title {
font-size: 18rpx;
margin-top: 20rpx;
color: #333333;
}
.hotproduct .us-title {
font-size: 18rpx;
margin-top: 20rpx;
color: #333333;
}
.wrap{
margin-top: 30rpx;
height: 300rpx;
display: flex;
justify-content: space-around;
image {
width: 150rpx;
height: 230rpx;
}
}
</style>
<template>
<view class="box">
<swiper class="images-box" autoplay interval='5000' circular duration='500' @change="swiperChange">
<block wx:for="{{banners}}" wx:key='index'>
<swiper-item>
<image src="{{item.imgUri}}" style="width:100%; height:400rpx;" @tap='bannerTap' id='{{item.target}}'/>
</swiper-item>
</block>
</swiper>
<view class="sign" >{{currentIndex}}/{{banners.length}}</view>
</view>
<block wx:if="{{canGetCoupon}}">
<view class="wrap">
<image src="../pages/images/10@2x.png"></image>
<image src="../pages/images/20@2x.png"></image>
<image src="../pages/images/50@2x.png"></image>
<image src="../pages/images/all@2x.png" @tap="getCoupon"></image>
</view>
</block>
<block wx:for='{{floorList}}' wx:key='list'>
<view wx:if='{{item.type==0}}'>
<!--新品拼团 GROUP PURCHASE-->
<view class="newgroup flex-v">
<view class="flex-h">
<view class="left"><image src="images/right.png"></image></view>
<sapn class="title">{{item.tagName}}</sapn>
<view class="right"><image src="images/left.png"></image></view>
</view>
<view class="us-title">{{item.remarks}}</view>
</view>
<!--新品拼团列表-->
<view>
<image src="{{item.icon}}" style="width: 100%; height: 360rpx;" @tap='toGroupListPage' id='{{item.redictTarget}}' data-type='banner'/>
</view>
<view class="group-person flex-h">
<view class="list-person">
已有900人拼团
</view>
<view class="avatar-list">
<image class="avatar" src="images/1.png"></image>
<image class="avatar" src="images/2.png"></image>
<image class="avatar" src="images/3.png"></image>
<image class="avatar" src="images/4.png"></image>
<image class="avatar" src="images/5.png"></image>
</view>
</view>
<!--团购详情页-->
<view class="list">
<block wx:for='{{item.products}}' wx:key='list' wx:for-index='index' >
<view class="list_item" @tap='toGroupGoodsDetail' id='{{item.groupId}}' data-opid='{{item.groupOpenRecordId}}'>
<navigator url="details?id={{item.goods_id}}">
<view class="img">
<image src="{{item.imgUri}}" mode="scaleToFill"/>
</view>
<view class="info">
<view class="title">{{item.productName}}</view>
<view class="flex-h" style="height: 26rpx; line-height: 26rpx;">
<view class="group-price">拼团价:</view>
<view class="price">￥{{item.SELL_PRICE/100}}</view>
<view class="rel-price">￥<span style="text-decoration: line-through;">{{item.underlinePrice/100}}</span></view>
</view>
<view class="flex-h" style="margin-top: 20rpx;">
<view class="group-persons">{{item.num}}人团</view>
<view class="group-persons-price" >拼团省{{item.currentPrice/100}}元</view>
<view class="num">已拼{{item.productNum}}件</view>
</view>
</view>
</navigator>
<view class="clear"></view>
</view>
</block>
<view wx:if="{{index !== item.products.length-1}}" class="line"></view>
</view>
</view>
<block wx:if='{{item.type==1}}'>
<!--新品预售 NEW COMMODITY-->
<view class="newproduct flex-v">
<view class="flex-h">
<view class="left"><image src="images/right.png"></image></view>
<sapn class="title">{{item.tagName}}</sapn>
<view class="right"><image src="images/left.png"></image></view>
</view>
<view class="us-title">{{item.remarks}}</view>
</view>
<!--新品预售列表-->
<view style="margin-bottom: 30rpx; margin-top: -20rpx; height: 400rpx; background-color: white;">
<image style="width: 100%; height: 360rpx;" src='{{item.icon}}' @tap='tagnewTap' id='{{item.redictTarget}}' data-type='banner'/>
</view>
<view class="slider" wx:for="{{item.products}}" wx:key='index' wx:for-item='item' @tap='toappointGoodsDetail' id='{{item.appointId}}'>
<view class="slide_son">
<image src="{{item.imgUri}}"/>
<view class="slider_title">{{item.productName}}</view>
<view class="flex-h" style="height: 26rpx; line-height: 26rpx;">
<view class="slider_sale">定金:</view>
<view class="slide_price">{{item.appointPrice/100}}抵{{item.currentPrice/100}}</view>
<view class="slider_sale">元</view>
</view>
</view>
</view>
</block>
<view wx:if='{{item.type==3}}'>
<!--爆品推荐-->
<view class="hotproduct flex-v">
<view class="flex-h">
<view class="left"><image src="images/right.png"></image></view>
<sapn class="title">{{item.tagName}}</sapn>
<view class="right"><image src="images/left.png"></image></view>
</view>
<view class="us-title">{{item.remarks}}</view>
</view>
<!--爆品推荐列表-->
<view @tap='tagTap' id='{{item.redictTarget}}' data-type='banner'>
<image src="{{item.icon}}" style="width: 100%; height: 360rpx;"/>
</view>
<view wx:for="{{item.products}}" @tap='toGoodsDetail' id='{{item.productId}}'>
<view class="slider-v" style="margin-bottom: 100rpx;">
<view class="slide_son" style="float: left; width: 40%; margin-left: 5%;">
<image src="{{item.imgUri}}"/>
<view class="slider_title">{{item.productName}}</view>
<span class="slide_price">￥{{item.currentPrice/100}}</span>
<span class="slider_sale">￥<span style="text-decoration: line-through;">{{item.underlinePrice/100}}</span></span>
<!--<span class="slider_btn">领券享7折优惠</span>-->
</view>
</view>
</view>
</view>
</block>
<foot></foot>
<authBox></authBox>
</template>
<script>
import wepy from 'wepy'
import toast from '../components/toast'
import authBox from '../components/auth-box'
import Foot from '../components/foot'
import { indexData, getCoupon } from '../service/api.js'
var event = require('../utils/event.js')
export default class Home extends wepy.page {navigationBarTitleText
config = {
navigationBarTitleText: '大叔家Ocandy'
}
components = {
custoast: toast,
foot: Foot,
authBox: authBox
}
data = {
tabBar: [],
// recommendList: [],
floorList: [],
banners: [],
currentIndex: 1,
canGetCoupon: false
}
methods = {
getCoupon: function (e) {
this._getCoupon()
},
swiperChange: function (e) {
this.currentIndex = e.detail.current + 1
},
bannerTap(e) {
if (e.currentTarget.id) {
wx.navigateTo({
url: e.currentTarget.id
})
}
},
toSearch() {
wx.navigateTo({
url: '/subPackage/search-page?autoFocus=true'
})
},
tagChange(e) {
this.currentIndex = e.currentTarget.id
this.$apply()
},
// 爆品详情
toGoodsDetail(e) {
wx.navigateTo({
url: '/pages/product-detail-page?productId=' + e.currentTarget.id
})
},
// 新品拼团列表
toGroupListPage(e) {
if (e.currentTarget.id) {
wx.navigateTo({
url: e.currentTarget.id
})
}
},
// 新品拼团产品详情
toGroupGoodsDetail(e) {
wx.navigateTo({
url:
'/pages/group/group-product-page?groupId=' +
e.currentTarget.id +
'&openRecordId=' +
e.currentTarget.dataset.opid
})
},
// 预售列表
tagnewTap(e) {
if (e.currentTarget.id) {
wx.navigateTo({
url: e.currentTarget.id
})
}
},
// 新品预售详情
toappointGoodsDetail(e) {
wx.navigateTo({
url: '/pages/appoint/appoint-product-page?appointId=' + e.currentTarget.id
})
},
// 爆品列表
tagTap(e) {
if (e.currentTarget.id) {
wx.navigateTo({
url: e.currentTarget.id
})
}
}
}
onShareAppMessage(res) {
return {
title: '大叔家Ocandy'
}
}
toast(obj) {
return new Promise((resolve, reject) => {
this.$invoke('custoast', 'showToast', obj).then(res => {
resolve(res)
})
})
}
// _indexBannerAndTag() {
// indexBannerAndTag({}).then(res => {
// console.log('banner+tag==>', res)
// this.banner = res.banner
// this.tagBar = res.tagBar
// this.$apply()
// })
// }
_indexData() {
indexData({}).then(res => {
this.floorList = res.tagList
this.banners = res.banners
this.$apply()
console.log('indexData-page-new==>', res)
})
}
_getCoupon() {
getCoupon({}).then(res => {
console.log('indexData-getCoupon==>', res)
})
wx.showToast({
title: '获取成功',
icon: 'success',
duration: 1000,
mask: true
})
}
events = {}
// onReady() {}
async onLoad(opt) {
// wx.hideShareMenu()
wx.showLoading({
title: '加载中...'
})
let isLogin = await this.$parent.userLogin()
console.log('进入首页，当前登录状态===>', isLogin)
wx.hideLoading()
// 调起授权框 登陆&授权成功走请求
if (!isLogin) {
console.log('---------', !isLogin)
this.$invoke('authBox', 'showAuthBox')
event.on('getAuthSuc', this, () => this.onLoad())
} else {
// this._indexBannerAndTag()
this._indexData()
this.canGetCoupon = this.$parent.globalData.canGetCoupon
console.log('进入首页，当前登录状态===>获取优惠券===>', this.canGetCoupon)
this.$apply()
}
}
}
</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.05.30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
