Parcourir la source

[我的订单,立即购买,首页游戏][修改,立即购买,增加]|:我的订单列表样式的修改,首页增加游戏,立即抢购列表页面样式的修改

tags/2.2.4
meo il y a 6 ans
Parent
révision
ef8a1322ce
14 fichiers modifiés avec 198 ajouts et 91 suppressions
  1. BIN
      assets/img/game.png
  2. BIN
      assets/img/lines.png
  3. BIN
      assets/img/liness.png
  4. +3
    -6
      components/coupons/index.wxml
  5. +1
    -0
      components/coupons/index.wxss
  6. +3
    -1
      pages/couponorder/index/index.json
  7. +19
    -13
      pages/couponorder/index/index.wxml
  8. +60
    -34
      pages/couponorder/index/index.wxss
  9. +5
    -0
      pages/index/index.js
  10. +5
    -0
      pages/index/index.wxml
  11. +44
    -3
      pages/index/index.wxss
  12. +8
    -7
      pages/rushToBuy/index.wxml
  13. +49
    -26
      pages/rushToBuy/index.wxss
  14. +1
    -1
      pages/user/index.wxml

BIN
assets/img/game.png Voir le fichier

Avant Après
Largeur: 750  |  Hauteur: 200  |  Taille: 64 KiB

BIN
assets/img/lines.png Voir le fichier

Avant Après
Largeur: 1380  |  Hauteur: 33  |  Taille: 1.5 KiB

BIN
assets/img/liness.png Voir le fichier

Avant Après
Largeur: 1380  |  Hauteur: 26  |  Taille: 2.3 KiB

+ 3
- 6
components/coupons/index.wxml Voir le fichier

@@ -1,4 +1,3 @@

<navigator url="/pages/coupon/detail/index?couponChannelId={{data.id}}&couponId={{data.couponId}}"> <navigator url="/pages/coupon/detail/index?couponChannelId={{data.id}}&couponId={{data.couponId}}">
<!-- 首页优惠券列表页面 --> <!-- 首页优惠券列表页面 -->
<view class="coupons"> <view class="coupons">
@@ -9,10 +8,9 @@
<view class="coupons-info-name tit">{{data.title}}</view> <view class="coupons-info-name tit">{{data.title}}</view>
<view class="coupons-info-name subtitle">{{data.subTitle}}</view> <view class="coupons-info-name subtitle">{{data.subTitle}}</view>
<view class="coupons-info-price-p"> <view class="coupons-info-price-p">
<text class="i">¥</text>
{{data.salePriceStr}}
<text>{{data.salePriceStr}}<text style="font-size:24rpx;display:inline-block;margin-right:10rpx;">元</text></text>
<view class="coupons-info-manjian" style="margin-top:10rpx;" wx:if="{{data.type == 1}}"> <view class="coupons-info-manjian" style="margin-top:10rpx;" wx:if="{{data.type == 1}}">
{{data.usePriceStr}}可用
满{{data.usePriceStr}}可用
</view> </view>
<view class="coupons-info-manjian" wx:elif="{{data.type == 2||data.type == 3||data.type==4||data.type==5}}"> <view class="coupons-info-manjian" wx:elif="{{data.type == 2||data.type == 3||data.type==4||data.type==5}}">
仅限本店使用 仅限本店使用
@@ -26,8 +24,7 @@
<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-gms" wx:if="{{data.remainInventory==0}}" data-date='{{data}}'>已售罄</i-button> <i-button i-class="coupons-btn-gms" wx:if="{{data.remainInventory==0}}" data-date='{{data}}'>已售罄</i-button>
</view> </view>
<view class="coupons-info-name sy">剩余{{data.remainInventory}}</view>
<view class="coupons-info-name sy">剩余{{data.remainInventory}}</view>
<view class="coupons-border"></view> <view class="coupons-border"></view>
</view> </view>
</navigator> </navigator>

+ 1
- 0
components/coupons/index.wxss Voir le fichier

@@ -17,6 +17,7 @@
bottom: 0; bottom: 0;
} }



.coupons-img { .coupons-img {
width: 180rpx; width: 180rpx;
height: 180rpx; height: 180rpx;


+ 3
- 1
pages/couponorder/index/index.json Voir le fichier

@@ -3,5 +3,7 @@
"i-tab": "../../../dist/tab/index", "i-tab": "../../../dist/tab/index",
"i-tabs": "../../../dist/tabs/index" "i-tabs": "../../../dist/tabs/index"
}, },
"navigationBarTitleText": "我的优惠劵"
"navigationBarTitleText": "我的优惠劵",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
} }

+ 19
- 13
pages/couponorder/index/index.wxml Voir le fichier

@@ -3,7 +3,7 @@
<i-tabs class='tabs' current="{{ current_scroll }}" scroll bindchange="handleChangeScroll"> <i-tabs class='tabs' current="{{ current_scroll }}" scroll bindchange="handleChangeScroll">
<i-tab class='i-tab' wx:for="{{tabs}}" wx:key="unique" key="{{item.key}}" title="{{item.name}}"></i-tab> <i-tab class='i-tab' wx:for="{{tabs}}" wx:key="unique" key="{{item.key}}" title="{{item.name}}"></i-tab>
</i-tabs> </i-tabs>
<view style='padding-top:90rpx;'>
<view style='padding-top:120rpx;'>
<view class="nocoupon" wx:if="{{list.length==0}}"> <view class="nocoupon" wx:if="{{list.length==0}}">
<image src="./../../../assets/img/coupon.png" mode="widthFix" /> <image src="./../../../assets/img/coupon.png" mode="widthFix" />
<text class="txt001">请您敬请期待</text> <text class="txt001">请您敬请期待</text>
@@ -14,20 +14,26 @@
</view> </view>


<view class='section' wx:for='{{list}}' wx:key='{{index}}' bindtap="gotouse" data-quancode="{{item.id}}" data-couponorderstatus="{{item.couponOrderStatus}}"> <view class='section' wx:for='{{list}}' wx:key='{{index}}' bindtap="gotouse" data-quancode="{{item.id}}" data-couponorderstatus="{{item.couponOrderStatus}}">
<view class='detail_msg'>
<view class='logo'>
<image src='{{item.coverImg}}'></image>
</view>
<view class='info'>
<view>
<text>{{item.title}}</text>
<view class='mms'>
<view class='detail_msg'>
<view class='logo'>
<image src='{{item.coverImg}}'></image>
</view> </view>
<view>
<text class="txt1">有效期至:</text>
<text class="txt2">{{item.expiredTime}}</text>
<view class='info'>
<view class='title'>
<text>{{item.title}}</text>
</view>
<view class='subtitle'>
<text>{{item.subTitle}}</text>
</view>
<view wx:if="{{item.couponOrderStatus==0}}" class="btns">去使用</view>
<view wx:elif="{{item.couponOrderStatus==1||item.couponOrderStatus==2||item.couponOrderStatus==3}}" class="btns">查看</view>
</view> </view>
<view wx:if="{{item.couponOrderStatus==0}}" class="btns">立即使用</view>
<view wx:elif="{{item.couponOrderStatus==1||item.couponOrderStatus==2||item.couponOrderStatus==3}}" class="btns">查看</view>
</view>
<image class="liness" src='./../../../assets/img/liness.png' mode="widthFix"></image>
<view class='expiretime'>
<text class="txt1">有效期至:</text>
<text class="txt2">{{item.expiredTime}}</text>
</view> </view>
</view> </view>
</view> </view>


+ 60
- 34
pages/couponorder/index/index.wxss Voir le fichier

@@ -1,6 +1,7 @@
.market { .market {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #f5f5f5;
} }


.tabs { .tabs {
@@ -23,33 +24,58 @@
position: relative; position: relative;
} }


.detail_msg {
width: 92%;
height: 186rpx !important;
.mms {
width: 690rpx;
height: 170rpx !important;
background: #fff; background: #fff;
padding: 30rpx 0 0;
margin: 0 auto 30rpx;
border-radius: 16rpx;
border-top: 8rpx solid #02b7ff;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.10);
}

.detail_msg {
display: flex; display: flex;
padding: 30rpx 4%;
border-bottom: 1rpx solid #ededed;
padding-bottom: 30rpx;
}

.expiretime {
display: block;
width: 100%;
text-align: left;
text-indent: 1em;
height: 40rpx;
line-height: 40rpx;
font-size: 22rpx;
color: #333;
letter-spacing: 0;
}

.liness {
display: block;
width: 100%;
} }


.logo { .logo {
width: 180rpx;
height: 180rpx;
width: 60rpx;
height: 60rpx;
border: 1px solid #f8f8f8; border: 1px solid #f8f8f8;
border-radius: 15rpx;
border-radius: 50rpx;
display: block; display: block;
margin-left: 20rpx;
} }


.logo image { .logo image {
width: 180rpx;
height: 180rpx;
border-radius: 15rpx;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
} }


.info view:nth-child(1) { .info view:nth-child(1) {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 4%;
padding: 0 2%;
} }


.info { .info {
@@ -57,16 +83,18 @@
} }


.info view:nth-child(1) text { .info view:nth-child(1) text {
font-size: 30rpx;
margin-top: 10rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #333; color: #333;
letter-spacing: 0;
} }


.info view:nth-child(2) { .info view:nth-child(2) {
color: #ff3434;
font-size: 24rpx;
padding-left: 4%; padding-left: 4%;
margin-top: 1%;
font-size: 22rpx;
color: #333;
letter-spacing: 0;
margin-top: 6rpx;
} }


.info view:nth-child(3) { .info view:nth-child(3) {
@@ -75,26 +103,22 @@


.btns { .btns {
position: absolute; position: absolute;
right: 30rpx;
bottom: 39rpx;
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
right: 57rpx;
top: 38rpx;
width: 120rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center; text-align: center;
background: #00c0ff;
color: #fff;
border-radius: 15rpx;
border: 2rpx solid #02c0ff;
border-radius: 60rpx;
color: #02c0ff;
font-size: 28rpx; font-size: 28rpx;
} }


.txt1 { .txt1 {
font-size: 22rpx; font-size: 22rpx;
color: #999;
}

.txt2 {
font-size: 22rpx;
color: #f96563;
color: #333;
letter-spacing: 0;
} }


.nocoupon image { .nocoupon image {
@@ -127,7 +151,7 @@
color: #fff; color: #fff;
font-style: 30rpx; font-style: 30rpx;
width: 100%; width: 100%;
border-radius:60rpx;
border-radius: 60rpx;
} }


.loading { .loading {
@@ -144,9 +168,11 @@
vertical-align: middle; vertical-align: middle;
margin-right: 10rpx; margin-right: 10rpx;
} }
.active{
opacity: .6;

.active {
opacity: 0.6;
} }

.nav { .nav {
position: absolute; position: absolute;
bottom: 3.3%; bottom: 3.3%;


+ 5
- 0
pages/index/index.js Voir le fichier

@@ -14,6 +14,11 @@ Page({
swiperCurrent: e.detail.current swiperCurrent: e.detail.current
}); });
}, },
gotogame:function(){
wx.navigateTo({
url: '/pages/game/game',
})
},
/** /**
* 生命周期函数--监听页面初次渲染完成 * 生命周期函数--监听页面初次渲染完成
*/ */


+ 5
- 0
pages/index/index.wxml Voir le fichier

@@ -1,5 +1,10 @@
<view class="container"> <view class="container">
<c-banner wx:key="unique" list="{{list}}" /> <c-banner wx:key="unique" list="{{list}}" />
<c-rushToBuy /> <c-rushToBuy />
<view class='game' bindtap="gotogame">
<image src='./../../assets/img/game.png' mode='widthFix'></image>
<text>新用户专享神秘礼物</text>
<text>独家福利,抢完即止</text>
</view>
<c-coupons id="lists" bind:myevent="onGetCode" /> <c-coupons id="lists" bind:myevent="onGetCode" />
</view> </view>

+ 44
- 3
pages/index/index.wxss Voir le fichier

@@ -6,17 +6,58 @@
width: 100%; width: 100%;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 30rpx; font-size: 30rpx;
color: #ffffff;
color: #fff;
letter-spacing: 0.75rpx; letter-spacing: 0.75rpx;
z-index: 9; z-index: 9;
line-height: 88rpx; line-height: 88rpx;
overflow: hidden; overflow: hidden;
} }

page { page {
width: 100%; width: 100%;
height: auto; height: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.txt{
margin-left: 20rpx;

.txt {
margin-left: 20rpx;
}

.game {
position: relative;
width: 750rpx;
height: 200rpx;
z-index: 10000000;
}

.game text {
display: block;
position: relative;
z-index: 100;
}

.game text:nth-of-type(1) {
display: inline-block;
padding-top: 65rpx;
padding-left: 70rpx;
font-size: 32rpx;
color: #333;
line-height: 36rpx;
}

.game text:nth-of-type(2) {
font-size: 24rpx;
color: #999;
line-height: 24rpx;
padding-left: 70rpx;
}

.game image {
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
} }

+ 8
- 7
pages/rushToBuy/index.wxml Voir le fichier

@@ -13,23 +13,24 @@
<text class='small'>{{item.subTitle}}</text> <text class='small'>{{item.subTitle}}</text>
</view> </view>
<view class='flashSaleItemTopRBottom'> <view class='flashSaleItemTopRBottom'>
<text class='presentPrice'>¥{{item.salePriceStr}}</text>
<text class='originalPrice'>{{item.priceStr}}</text>
<text class='presentPrice'><text class='sale'>售价:</text>{{item.salePriceStr}}<text class='yuan'>元</text></text>
<text class='originalPrice'>{{item.priceStr}}</text>
</view> </view>
</view> </view>
</view> </view>
<image class='lines' src='./../../assets/img/lines.png' mode='widthFix'></image>
<view class='flashSaleItemBottom'> <view class='flashSaleItemBottom'>
<view class='flashSaleItemBottomTop'> <view class='flashSaleItemBottomTop'>
<text class='remainingTime'>剩余时间:</text>
<text class='remainingTime'>距结束:</text>
<text class='realRemainingTime'>{{item.endtime}}</text> <text class='realRemainingTime'>{{item.endtime}}</text>
</view> </view>
<view class='flashSaleItemBottomBottm'> <view class='flashSaleItemBottomBottm'>
<view class="view1"> <view class="view1">
<text class="remainingNumber">剩余件数:</text>
<text class='realnumber'>{{item.remainInventory}}</text>
<text class="remainingNumber">剩余:</text>
<text class='realnumber'>{{item.remainInventory}}</text>
</view> </view>
<view class='buy' wx:if="{{item.salePriceStr!=0}}">购买</view>
<view class='buy' wx:if="{{item.salePriceStr==0}}">领取</view>
<view class='buy' hover-class='active' wx:if="{{item.salePriceStr!=0}}">购买</view>
<view class='buy' hover-class='active' wx:if="{{item.salePriceStr==0}}">领取</view>
</view> </view>
</view> </view>
</view> </view>


+ 49
- 26
pages/rushToBuy/index.wxss Voir le fichier

@@ -1,9 +1,11 @@
.flashSale {
.flashSale,page{
width: 100%; width: 100%;
height: 100%;
background: #fff;
background: #f5f5f5;
padding-bottom: 30rpx;
}
.flashSale > view:nth-of-type(1){
margin-top: 0!important;
} }
.loading { .loading {
text-align: center; text-align: center;
height: 80rpx; height: 80rpx;
@@ -11,7 +13,6 @@
font-size: 26rpx; font-size: 26rpx;
color: #999; color: #999;
} }
.loading image { .loading image {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
@@ -21,25 +22,28 @@
.flashSaleItemWrap { .flashSaleItemWrap {
width: 100%; width: 100%;
height: 410rpx;
border-bottom: 10rpx solid #f8f8f8;
margin-top: 30rpx;
} }
.flashSaleItem { .flashSaleItem {
width: 90%;
height: 410rpx;
width: 690rpx;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #fff; background: #fff;
margin: 0 auto;
border-radius: 16rpx;
padding-bottom: 30rpx;
}
.lines {
display: block;
width: 100%;
} }
.flashSaleItemTop { .flashSaleItemTop {
display: flex; display: flex;
padding-top: 28rpx;
flex-direction: row; flex-direction: row;
padding-bottom: 25rpx;
border-bottom: 1rpx solid #ededed;
padding: 28rpx 30rpx 10rpx;
} }
.flashSaleItemTopL { .flashSaleItemTopL {
@@ -47,15 +51,14 @@
} }
.food { .food {
width: 248rpx;
width: 180rpx;
border-radius: 10rpx; border-radius: 10rpx;
height: 184rpx;
height: 180rpx;
} }
.flashSaleItemTopR { .flashSaleItemTopR {
flex: 2; flex: 2;
flex-direction: column; flex-direction: column;
margin-left: 20rpx;
} }
.flashSaleItemTopRTop { .flashSaleItemTopRTop {
@@ -75,7 +78,8 @@
.small { .small {
font-size: 24rpx; font-size: 24rpx;
color: #00c0ff;
color: #333;
letter-spacing: 0;
margin-top: 15rpx; margin-top: 15rpx;
} }
@@ -96,8 +100,8 @@
} }
.flashSaleItemBottom { .flashSaleItemBottom {
margin-top: 20rpx;
position: relative; position: relative;
padding: 0 30rpx;
} }
.remainingTime { .remainingTime {
@@ -107,7 +111,7 @@
.realRemainingTime { .realRemainingTime {
margin-left: 10rpx; margin-left: 10rpx;
color: #f96563;
color: #FF4949;
font-size: 28rpx; font-size: 28rpx;
} }
@@ -119,6 +123,7 @@
.view1 { .view1 {
width: 550rpx; width: 550rpx;
display: block; display: block;
line-height: 33rpx;
} }
.remainingNumber { .remainingNumber {
@@ -134,15 +139,33 @@
.buy { .buy {
position: absolute; position: absolute;
top: 34rpx;
top: 27rpx;
bottom: 0; bottom: 0;
right: 0rpx;
width: 138rpx;
height: 50rpx;
line-height: 50rpx;
right: 30rpx;
width: 140rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center; text-align: center;
background: #00c0ff;
background: #ff4949;
border-radius: 60rpx;
color: #fff; color: #fff;
border-radius: 10rpx;
font-size: 28rpx; font-size: 28rpx;
} }
.sale {
font-size: 24rpx;
color: #999;
letter-spacing: 0;
display: inline-block;
margin-right: 6rpx;
}
.yuan {
font-size: 24rpx;
color: #ff4949;
letter-spacing: 0;
}
.active {
opacity: 0.6;
}

+ 1
- 1
pages/user/index.wxml Voir le fichier

@@ -67,7 +67,7 @@
<view class="margin"></view> <view class="margin"></view>
<!-- <button bindtap="navigateTo" class="user-out-btn">退出登陆</button> --> <!-- <button bindtap="navigateTo" class="user-out-btn">退出登陆</button> -->
<view bindlongtap='showVersion' class='version'> <view bindlongtap='showVersion' class='version'>
<view wx:if="{{flag=='show'}}">版本号:1.0.1</view>
<view wx:if="{{flag=='show'}}">版本号:2.0.0</view>
<view wx:if="{{flag=='hidden'}}"></view> <view wx:if="{{flag=='hidden'}}"></view>
</view> </view>
</view> </view>

Chargement…
Annuler
Enregistrer