@@ -5,6 +5,7 @@ Component({ | |||
*/ | |||
properties: { | |||
paramAtoB: String, | |||
from: String, | |||
data: { | |||
value: {}, | |||
type: Object | |||
@@ -16,6 +17,26 @@ Component({ | |||
*/ | |||
data: {}, | |||
methods: { | |||
gotoDetail(e) { | |||
console.log(e.currentTarget.dataset.couponid); | |||
console.log(e.currentTarget.dataset.title); | |||
console.log(e.currentTarget.dataset.id); | |||
let couponId = e.currentTarget.dataset.couponid; | |||
let title = e.currentTarget.dataset.title; | |||
let id = e.currentTarget.dataset.id; | |||
let targetAd = e.currentTarget.dataset.targetad; | |||
if (targetAd) { | |||
} | |||
if (id && targetAd != 7) { | |||
wx.navigateTo({ | |||
url: `/pages/coupon/detail/index?couponChannelId=${id}&couponId=${couponId}&title=${title}`, | |||
}) | |||
} else if (targetAd == 7) { | |||
wx.navigateTo({ | |||
url: `/pages/spellGroup/mySpellGroup/index?couponChannelId=${id}&couponId=${couponId}&title=${title}`, | |||
}) | |||
} | |||
} | |||
} | |||
}); | |||
}); |
@@ -1,6 +1,18 @@ | |||
<navigator url="/pages/coupon/detail/index?couponChannelId={{data.id}}&couponId={{data.couponId}}&title={{data.title}}"> | |||
<view class='navigator' bindtap='gotoDetail' data-id='{{data.id}}' data-targetAd='{{data.targetAd}}' hover-class='hover' data-couponId='{{data.couponId}}' data-title='{{data.title}}'> | |||
<!-- 首页优惠券列表页面 --> | |||
<view class="coupons"> | |||
<!-- fromMerchant 根据这个字段判断 --> | |||
<view class="superscript" wx:if="{{from == 'fromMerchant'}}"> | |||
<!-- 角标的三种实现 --> | |||
<view class="rect" style='background: #31b968;' wx:if="{{data.targetAd == 2}}"></view> | |||
<view class="rect" style='background: orange;' wx:if="{{data.targetAd == 6}}"></view> | |||
<view class="rect" style='background: #d900ae;' wx:if="{{data.targetAd == 7}}"></view> | |||
<view class="rect" style='background: #5dae01;' wx:if="{{data.targetAd == 5}}"></view> | |||
<view class="desc" wx:if="{{data.targetAd == 2}}">限时券</view> | |||
<view class="desc" wx:if="{{data.targetAd == 6}}">砍价券</view> | |||
<view class="desc" wx:if="{{data.targetAd == 7}}">拼团券</view> | |||
<view class="desc" wx:if="{{data.targetAd == 5}}">消费卡</view> | |||
</view> | |||
<view class="coupons-img"> | |||
<image src="{{data.coverImg}}" mode='aspectFill' lazy-load="true"></image> | |||
</view> | |||
@@ -9,7 +21,11 @@ | |||
<view class="coupons-info-name subtitle">{{data.subTitle}}</view> | |||
<view class="coupons-info-price-p"> | |||
<view class='price'> | |||
<text>{{data.salePriceStr}}<text style="font-size:24rpx;display:inline-block;margin-right:10rpx;font-weight:400;">元</text></text> | |||
<text wx:if="{{data.targetAd == 1||data.targetAd == 5}}">{{data.salePriceStr}}<text class='saleprice'>元</text></text> | |||
<text wx:if="{{data.targetAd == 2}}"><text class='saleprice'>抢购价</text>{{data.salePriceStr}}<text class='saleprice'>元</text></text> | |||
<text wx:if="{{data.targetAd == 6}}"><text class='saleprice'>可砍至</text>{{data.salePriceStr}}<text class='saleprice'>元</text></text> | |||
<text wx:if="{{data.targetAd == 7}}"><text class='saleprice'>拼团价</text>{{data.salePriceStr}}<text class='saleprice'>元</text></text> | |||
<view class="coupons-info-manjian" style="margin-top:10rpx;" wx:if="{{data.type == 1}}"> | |||
<view class='view01' wx:if="{{data.unit==0}}">{{data.priceStr}}元</view> | |||
<view wx:if="{{data.unit==1}}">{{data.priceStr}}小时</view> | |||
@@ -17,21 +33,20 @@ | |||
</view> | |||
<view class="coupons-info-manjian" wx:elif="{{data.type == 2||data.type == 3||data.type==4||data.type==5}}"> | |||
<text class='view01' wx:if="{{data.unit==0}}">{{data.priceStr}}元</text> | |||
<text wx:if="{{data.unit==1}}">{{data.priceStr}}小时</text> | |||
<!-- <text class='txt2'>仅限本店使用</text> --> | |||
<text wx:if="{{data.unit==1}}">{{data.priceStr}}小时</text> | |||
</view> | |||
</view> | |||
<!-- <view class="coupons-info-manjian1" wx:if="{{data.merchantVoList.length==1}}">{{data.merchantVoList[0].merchantName}}</view> | |||
<view class="coupons-info-manjian1" wx:if="{{data.merchantVoList.length>1}}">多商户通用</view> --> | |||
</view> | |||
</view> | |||
<view class="coupons-btn"> | |||
<!-- 优惠券价格 --> | |||
<i-button i-class="coupons-btn-gm" wx:if="{{data.salePriceStr==0&&data.remainInventory!=0}}" data-date='{{data}}'>免费领</i-button> | |||
<i-button i-class="coupons-btn-gm" wx:if="{{data.salePriceStr!=0&&data.remainInventory!=0}}" data-date='{{data}}'>马上购</i-button> | |||
<i-button i-class="coupons-btn-gm" wx:if="{{data.salePriceStr==0&&data.remainInventory!=0&&data.targetAd == 1}}" data-date='{{data}}'>免费领</i-button> | |||
<i-button i-class="coupons-btn-gm" wx:if="{{data.salePriceStr!=0&&data.remainInventory!=0&&data.targetAd == 1||data.salePriceStr!=0&&data.remainInventory!=0&&data.targetAd == 5}}" data-date='{{data}}'>购买</i-button> | |||
<i-button i-class="coupons-btn-gm" wx:if="{{data.remainInventory!=0&&data.targetAd == 2}}" data-date='{{data}}'>去抢购</i-button> | |||
<i-button i-class="coupons-btn-gm" wx:if="{{data.remainInventory!=0&&data.targetAd == 6}}" data-date='{{data}}'>去砍价</i-button> | |||
<i-button i-class="coupons-btn-gm" wx:if="{{data.remainInventory!=0&&data.targetAd == 7}}" data-date='{{data}}'>去拼团</i-button> | |||
<i-button i-class="coupons-btn-gms" wx:if="{{data.remainInventory==0}}" data-date='{{data}}'>已售罄</i-button> | |||
<i-button i-class="coupons-btn-gms" wx:if="{{data.status==1}}" data-date='{{data}}'>已下架</i-button> | |||
</view> | |||
<!-- <view class="coupons-info-name sy">剩余{{data.remainInventory}}</view> --> | |||
</view> | |||
</navigator> | |||
</view> |
@@ -1,10 +1,12 @@ | |||
@import "../../app.wxss"; | |||
.coupons { | |||
position: relative; | |||
width: 335rpx; | |||
display: inline-block; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.coupons-border { | |||
height: 1rpx; | |||
left: 30rpx; | |||
@@ -14,7 +16,6 @@ | |||
bottom: 0; | |||
} | |||
.coupons-img { | |||
border-radius: 10rpx; | |||
} | |||
@@ -30,13 +31,13 @@ | |||
.coupons-info { | |||
width: 335rpx; | |||
height: 152rpx; | |||
border-radius:0rpx 0rpx 10rpx 10rpx; | |||
border-radius: 0rpx 0rpx 10rpx 10rpx; | |||
background: #fff; | |||
} | |||
.coupons-info-name { | |||
font-size: 28rpx; | |||
color: #333333; | |||
color: #333; | |||
letter-spacing: 0; | |||
line-height: 38rpx; | |||
} | |||
@@ -53,17 +54,19 @@ | |||
.coupons-info-price-p { | |||
display: block; | |||
font-size: 50rpx; | |||
color: #FF4949; | |||
} | |||
.price{ | |||
font-size:34rpx; | |||
font-family:PingFang-SC-Bold; | |||
font-weight:bold; | |||
color:rgba(255,50,50,1); | |||
line-height:44rpx; | |||
color: #ff4949; | |||
} | |||
.price { | |||
font-size: 34rpx; | |||
font-family: PingFang-SC-Bold; | |||
font-weight: bold; | |||
color: rgba(255, 50, 50, 1); | |||
line-height: 44rpx; | |||
margin-left: 16rpx; | |||
padding-top: 16rpx; | |||
} | |||
.tit { | |||
overflow: hidden; | |||
white-space: nowrap; | |||
@@ -108,7 +111,6 @@ | |||
} | |||
.coupons-btn-gm { | |||
background: #AF6E34 !important; | |||
border-radius: 10px 0px 5px 0px !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
@@ -118,6 +120,7 @@ | |||
height: 51rpx !important; | |||
width: 100rpx !important; | |||
line-height: 51rpx !important; | |||
background: #af6e34 !important; | |||
} | |||
.coupons-btn-gms { | |||
@@ -138,7 +141,7 @@ | |||
.subtitle { | |||
font-size: 24rpx; | |||
color: #999999; | |||
color: #999; | |||
overflow: hidden; | |||
height: 24rpx; | |||
padding-left: 10rpx; | |||
@@ -153,7 +156,7 @@ | |||
font-size: 20rpx; | |||
line-height: 34rpx; | |||
display: inline-block; | |||
color: #FF4949; | |||
color: #ff4949; | |||
letter-spacing: 0; | |||
} | |||
@@ -169,23 +172,28 @@ | |||
width: 300rpx; | |||
margin-top: 16rpx; | |||
} | |||
.coupons-info-manjian text{ | |||
.coupons-info-manjian text { | |||
display: block; | |||
line-height: 20rpx; | |||
} | |||
.coupons-info-manjian > text:nth-of-type(1){ | |||
.coupons-info-manjian > text:nth-of-type(1) { | |||
display: block; | |||
/* color: #FF4949; */ | |||
opacity: .6; | |||
opacity: 0.6; | |||
} | |||
.view01{ | |||
text-decoration:line-through; | |||
color: #999999 !important; | |||
.view01 { | |||
text-decoration: line-through; | |||
color: #999 !important; | |||
} | |||
.txt2{ | |||
.txt2 { | |||
display: block; | |||
color: #ccc; | |||
} | |||
/**上拉加载更多**/ | |||
.userinfo { | |||
@@ -247,13 +255,70 @@ scroll-view { | |||
font-size: 26rpx; | |||
line-height: 15rpx; | |||
} | |||
.navigator-hover{ | |||
opacity: 1!important; | |||
.navigator-hover { | |||
opacity: 1 !important; | |||
background: #fff; | |||
} | |||
navigator{ | |||
.hover{ | |||
opacity: .6; | |||
} | |||
.navigator { | |||
display: inline-block; | |||
} | |||
navigator:nth-of-type(2n+1){ | |||
.navigator:nth-of-type(2n+1) { | |||
margin-right: 10rpx; | |||
} | |||
.superscript { | |||
position: absolute; | |||
top: -10rpx; | |||
left: -12rpx; | |||
width: 86rpx; | |||
height: 86rpx; | |||
overflow: hidden; | |||
} | |||
/* 使用背景色渐变 */ | |||
.superscript .gradual { | |||
width: 100%; | |||
height: 100%; | |||
background: linear-gradient(135deg, #31b968 50%, transparent 50%); | |||
} | |||
/* 使用三角形 */ | |||
.superscript .triangle { | |||
width: 0; | |||
height: 0; | |||
border-top: 130rpx solid #31b968; | |||
border-right: 130rpx solid transparent; | |||
} | |||
/* 使用矩形旋转, 和父节点的 overflow:hidden 配合 */ | |||
.superscript .rect { | |||
width: 176rpx; | |||
height: 183rpx; | |||
margin: -91rpx 0 0 -91rpx; | |||
transform: rotateZ(45deg); | |||
} | |||
.superscript .desc { | |||
position: absolute; | |||
top: 29%; | |||
left: 16%; | |||
z-index: 1; | |||
color: #fff; | |||
font-size: 23rpx; | |||
transform: rotate(-45deg); | |||
} | |||
.saleprice { | |||
font-size: 24rpx; | |||
display: inline-block; | |||
margin-right: 10rpx; | |||
font-weight: 400; | |||
} |
@@ -369,8 +369,6 @@ Page({ | |||
* 获取用户信息 | |||
*/ | |||
onLoad(options) { | |||
console.log(options) | |||
debugger | |||
let that = this; | |||
wx.showLoading({ | |||
title: "加载中..." | |||
@@ -13,8 +13,6 @@ Page({ | |||
}, | |||
onLoad: function(options) { | |||
var that = this; | |||
console.log(options) | |||
debugger | |||
if (options && options.spellGroup){ | |||
that.setData({ | |||
spellGroup: options.spellGroup | |||
@@ -19,12 +19,10 @@ Page({ | |||
imglist: null, | |||
shopVoList: [], | |||
couponList: [], //活动劵列表 | |||
data: { | |||
currentTab: 0, | |||
isshare: false, | |||
showpost: false, | |||
imgHeight: 0, | |||
}, | |||
currentTab: 0, | |||
isshare: false, | |||
showpost: false, | |||
imgHeight: 0, | |||
id: null, | |||
windowWidth: 0, | |||
windowHeight: 0, | |||
@@ -1,4 +1,3 @@ | |||
<!-- pages/index/detail/index.wxml --> | |||
<view> | |||
<swiper class="index-slide" autoplay="true" circular="false"> | |||
<block wx:for="{{imglist}}" wx:key="unique"> | |||
@@ -50,7 +49,7 @@ | |||
<!-- 商户简介 --> | |||
<view class='merchant-phones'> | |||
<view class="swiper-tab"> | |||
<view class="swiper-tab-item {{currentTab==0?'active-tab':''}}" data-current="0" bindtap="clickTab"> | |||
<view class="swiper-tab-item {{currentTab==0?'active-tab':''}}" data-current="0" bindtap="clickTab"> | |||
优惠信息 | |||
</view> | |||
<view class="swiper-tab-item {{currentTab==1?'active-tab':''}}" data-current="1" bindtap="clickTab"> | |||
@@ -61,7 +60,7 @@ | |||
<!-- 商户对应的活动 --> | |||
<view wx:if="{{currentTab==0}}"> | |||
<view class='coupons clearfix'> | |||
<c-coupons wx:if="{{couponList.length!=0}}" wx:for="{{couponList}}" paramAtoB="{{loading}}" wx:key="unique" data="{{item}}" list="{{couponList}}" /> | |||
<c-coupons wx:if="{{couponList.length!=0}}" wx:for="{{couponList}}" from="fromMerchant" paramAtoB="{{loading}}" wx:key="unique" data="{{item}}" list="{{couponList}}" /> | |||
</view> | |||
<view class='dingdan' wx:if="{{couponList.length==0}}"> | |||
<image src="{{actUrl}}" mode="widthFix"></image> | |||
@@ -80,7 +79,6 @@ | |||
<text wx:else>信息完善中,敬请期待。</text> | |||
</view> | |||
</view> | |||
<!-- </swiper> --> | |||
<view class='merchant-info'> | |||
<view hidden='currentTabsIndex!=0'> | |||
<text wx:if="{{data.summary}}">{{data.summary}}</text> | |||
@@ -101,13 +99,13 @@ | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 分享海报 --> | |||
<!-- 分享海报 --> | |||
<view class='postermodal' wx:if="{{showpost}}" bindtap='hideposter'> | |||
<canvas canvas-id='myCanvas' class='canvas-content' style='height:{{totalHeight * canvasScale}}px;width:{{375*canvasScale}}px'> | |||
<cover-view class='save-button' bindtap='saveImage'> | |||
<cover-image src="./../../../../assets/images/download.png" class="share-image"></cover-image> | |||
</cover-view> | |||
</canvas> | |||
<canvas canvas-id='myCanvas' class='canvas-content' style='height:{{totalHeight * canvasScale}}px;width:{{375*canvasScale}}px'> | |||
<cover-view class='save-button' bindtap='saveImage'> | |||
<cover-image src="./../../../../assets/images/download.png" class="share-image"></cover-image> | |||
</cover-view> | |||
</canvas> | |||
</view> | |||
</view> | |||
@@ -44,12 +44,11 @@ | |||
} | |||
.merchant-detail { | |||
width: 92%; | |||
padding: 30rpx 4% 0; | |||
width: 100%; | |||
padding: 30rpx 0 0; | |||
background: #fff; | |||
border-top-left-radius: 20rpx; | |||
border-top-right-radius: 20rpx; | |||
margin-top: -25rpx; | |||
} | |||
.merchant-brand, .merchant-shop, .merchant-phone { | |||
@@ -61,15 +60,15 @@ | |||
} | |||
.merchant-brand view:nth-child(1) { | |||
width: 160rpx; | |||
width: 130rpx; | |||
border-radius: 16rpx; | |||
height: 160rpx; | |||
height: 130rpx; | |||
} | |||
.merchant-brand view:nth-child(1) image { | |||
display: block; | |||
width: 160rpx; | |||
height: 160rpx; | |||
width: 130rpx; | |||
height: 130rpx; | |||
border-radius: 16rpx; | |||
border: 1px solid #e5e5e5; | |||
} | |||
@@ -106,9 +105,11 @@ | |||
} | |||
.merchant-phones { | |||
border-top:8px solid #efefef; | |||
padding: 20rpx 0; | |||
display: block; | |||
font-size: 30rpx; | |||
background: linear-gradient(0deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 0.8) 100%); | |||
} | |||
.tel { | |||
@@ -149,8 +150,13 @@ | |||
.merchant-brand { | |||
border: none !important; | |||
width: 92%; | |||
margin: 0 auto; | |||
} | |||
.merchant-shop,.merchant-phone{ | |||
width: 92%; | |||
margin: 0 auto; | |||
} | |||
.tabs-item.selected { | |||
color: rgba(171, 149, 109, 0.8); | |||
border-bottom: 2px solid rgba(171, 149, 109, 0.8); | |||
@@ -173,7 +179,7 @@ | |||
flex-flow: row; | |||
height: 88rpx; | |||
line-height: 88rpx; | |||
margin-bottom: 40rpx; | |||
margin-bottom: 30rpx; | |||
} | |||
.swiper-tab-item { | |||
@@ -183,8 +189,8 @@ | |||
} | |||
.active-tab { | |||
color: #1693fc; | |||
border-bottom: 10rpx solid #1693fc; | |||
color: #af6e34; | |||
border-bottom: 6rpx solid #af6e34; | |||
} | |||
.fenxiang { | |||
@@ -193,7 +199,9 @@ | |||
top: 27rpx; | |||
width: 108rpx; | |||
} | |||
.merchant-phones{ | |||
padding: 0 4%; | |||
} | |||
.fenxiang image { | |||
width: 108rpx; | |||
position: absolute; | |||
@@ -244,12 +252,10 @@ | |||
} | |||
.swiperactive { | |||
min-height: 300rpx; | |||
margin-bottom: 20rpx; | |||
min-height: 400rpx; | |||
padding-bottom: 44rpx; | |||
} | |||
/* modal */ | |||
.modal { | |||
width: 100%; | |||
height: 100%; | |||
@@ -75,8 +75,6 @@ Page({ | |||
that.setData({ | |||
list: tmpArr | |||
}) | |||
console.log(that.data.list,222) | |||
// debugger | |||
for (let i = page*8-8; i < that.data.list.length; i++) { | |||
var startTime = util.formatTime(that.data.list[i].endTime, "yyyy-MM-dd hh:mm:ss"); | |||
var beginTimes = util.formatTime(that.data.list[i].beginTime, "yyyy-MM-dd hh:mm:ss"); | |||