Преглед изворни кода

[我的优惠券详情页面修改][修改]:我的优惠券详情页面修改

tags/2.2.4
meo пре 6 година
родитељ
комит
a3dc9ee563
3 измењених фајлова са 114 додато и 84 уклоњено
  1. +8
    -27
      pages/couponorder/detail/index.js
  2. +30
    -8
      pages/couponorder/detail/index.wxml
  3. +76
    -49
      pages/couponorder/detail/index.wxss

+ 8
- 27
pages/couponorder/detail/index.js Прегледај датотеку

@@ -56,9 +56,9 @@ Page({
}); });
} }
that.setData({ that.setData({
expiredTime: util.fmtDate(that.data.data.expiredTime),
updateDate: util.fmtDate(that.data.data.updateDate),
createDate: util.fmtDate(that.data.data.createDate)
expiredTime: util.formatTime(that.data.data.expiredTime, "yyyy-MM-dddd hh:mm:ss"),
updateDate: util.formatTime(that.data.data.updateDate, "yyyy-MM-dddd hh:mm:ss"),
createDate: util.formatTime(that.data.data.createDate, "yyyy-MM-dddd hh:mm:ss")
}); });
}); });
} }
@@ -79,32 +79,13 @@ Page({
data: res.data data: res.data
}); });
that.setData({ that.setData({
expiredTime: util.fmtDate(that.data.data.expiredTime),
updateDate: util.fmtDate(that.data.data.updateDate),
createDate: util.fmtDate(that.data.data.createDate)
expiredTime: util.formatTime(that.data.data.expiredTime, "yyyy-MM-dddd hh:mm:ss"),
updateDate: util.formatTime(that.data.data.updateDate, "yyyy-MM-dddd hh:mm:ss"),
createDate: util.formatTime(that.data.data.createDate, "yyyy-MM-dddd hh:mm:ss")
}); });
util.barcode("barcode", options.quancode, 510, 100); util.barcode("barcode", options.quancode, 510, 100);
util.qrcode("qrcode", options.quancode, 350, 350); util.qrcode("qrcode", options.quancode, 350, 350);
});

// Http.get({
// url: config.api.couponOrderDetail,
// data: {
// couponOrderId: options.quancode
// }
// }).then(res => {
// console.log(res);
// that.setData({
// data: res.data
// });
// that.setData({
// expiredTime: util.fmtDate(that.data.data.expiredTime),
// updateDate: util.fmtDate(that.data.data.updateDate),
// createDate: util.fmtDate(that.data.data.createDate)
// });
// util.barcode("barcode", options.quancode, 510, 100);
// util.qrcode("qrcode", options.quancode, 350, 350);
// });
})
}, },
phone: function() { phone: function() {
let that = this; let that = this;
@@ -115,4 +96,4 @@ Page({
}); });
} }
} }
});
});

+ 30
- 8
pages/couponorder/detail/index.wxml Прегледај датотеку

@@ -18,10 +18,12 @@
<text>有效期至:</text> <text>有效期至:</text>
<text>{{expiredTime}}</text> <text>{{expiredTime}}</text>
</view> </view>
<image class='line' mode="widthFix" src="./../../../assets/img/line.png"></image>
<view class="zhuangtai"> <view class="zhuangtai">
<image wx:if="{{data.couponOrderStatus==1}}" src="./../../../assets/img/wm01.jpg"></image> <image wx:if="{{data.couponOrderStatus==1}}" src="./../../../assets/img/wm01.jpg"></image>
<image wx:if="{{data.couponOrderStatus==2}}" src="./../../../assets/img/wm02.jpg"></image> <image wx:if="{{data.couponOrderStatus==2}}" src="./../../../assets/img/wm02.jpg"></image>
<image wx:if="{{data.couponOrderStatus==3}}" src="./../../../assets/img/wm03.jpg"></image> <image wx:if="{{data.couponOrderStatus==3}}" src="./../../../assets/img/wm03.jpg"></image>

<view class="panel" wx:if="{{data.couponOrderStatus==0}}"> <view class="panel" wx:if="{{data.couponOrderStatus==0}}">
<view class="barcode"> <view class="barcode">
<canvas canvas-id="barcode" /> <canvas canvas-id="barcode" />
@@ -29,7 +31,8 @@
<view class="qrcode"> <view class="qrcode">
<canvas canvas-id="qrcode" /> <canvas canvas-id="qrcode" />
</view> </view>
<view class="barnum buy"><text>兑换码:</text>{{code}}</view>
<view class="barnum buy">
<text>优惠券码:</text>{{code}}</view>
</view> </view>
</view> </view>


@@ -48,16 +51,35 @@
<image bindtap='phone' class="tel" src="./../../../assets/img/tel.jpg" mode="widthFix" /> <image bindtap='phone' class="tel" src="./../../../assets/img/tel.jpg" mode="widthFix" />
</view> </view>
</view> </view>
<image class='line' mode="widthFix" src="./../../../assets/img/line.png"></image>
<view class='note'> <view class='note'>
<view style='height:60rpx;line-height:60rpx;'>
<text class="shiji">实付金额:</text>
<text class='moneys'>{{data.couponPrice/100}}</text>
<text style='font-size:24rpx;text-align:right;'>元</text>
</view>
<view wx:if="{{data.couponOrderStatus==0}}">
<text>下单时间:</text>
<text>{{createDate}}</text>
</view>
<view wx:if="{{data.couponOrderStatus==1}}">
<text>核销时间:</text>
<text>{{updateDate}}</text>
</view>
<view wx:if="{{data.couponOrderStatus==2}}">
<text>过期时间:</text>
<text>{{updateDate}}</text>
</view>
<view wx:if="{{data.couponOrderStatus==3}}">
<text>退款时间:</text>
<text>{{updateDate}}</text>
</view>


<view wx:if="{{data.couponOrderStatus==0}}"><text>下单时间</text><text>{{createDate}}</text></view>
<view wx:if="{{data.couponOrderStatus==1}}"><text>核销时间</text><text>{{updateDate}}</text></view>
<view wx:if="{{data.couponOrderStatus==2}}"><text>过期时间</text><text>{{updateDate}}</text></view>
<view wx:if="{{data.couponOrderStatus==3}}"><text>退款时间</text><text>{{updateDate}}</text></view>

<view><text>订单编号</text><text>{{data.orderId}}</text></view>
<view>
<text>订单编号:</text>
<text>{{data.orderId}}</text>
</view>
<!-- <view><text>手机号</text><text>2018.05.25</text></view> --> <!-- <view><text>手机号</text><text>2018.05.25</text></view> -->
<view><text>实付金额</text><text>{{data.couponPrice/100}}元</text></view>
</view> </view>
<view class='notes' style="border-bottom:0"> <view class='notes' style="border-bottom:0">
<view> <view>


+ 76
- 49
pages/couponorder/detail/index.wxss Прегледај датотеку

@@ -2,11 +2,12 @@
background: #fff; background: #fff;
width: 92%; width: 92%;
margin: 8% auto 6%; margin: 8% auto 6%;
border-radius:16rpx;
border-radius: 16rpx;
overflow: hidden; overflow: hidden;
} }
page{
background: #02C0FF;

page {
background: #02c0ff;
} }


.panel, .zhuangtai image { .panel, .zhuangtai image {
@@ -14,7 +15,6 @@ page{
width: 600rpx; width: 600rpx;
display: block; display: block;
border-radius: 10rpx; border-radius: 10rpx;
background-color: #fff;
margin: 22rpx auto 0; margin: 22rpx auto 0;
padding: 30rpx 0 0; padding: 30rpx 0 0;
z-index: 10000000000; z-index: 10000000000;
@@ -58,7 +58,7 @@ page{
font-size: 36rpx; font-size: 36rpx;
color: #333; color: #333;
letter-spacing: 0; letter-spacing: 0;
text-align:center;
text-align: center;
} }


.barnum text { .barnum text {
@@ -91,8 +91,6 @@ page{
height: 350rpx; height: 350rpx;
} }




/* .fl { /* .fl {
float: left; float: left;
} }
@@ -101,9 +99,10 @@ page{
float: right; float: right;
} */ } */


..coupon_detail{
position:relative;
..coupon_detail {
position: relative;
} }

.coupon_detail .wmfl { .coupon_detail .wmfl {
position: absolute; position: absolute;
width: 120rpx; width: 120rpx;
@@ -129,20 +128,25 @@ page{


.coupon_detail .title { .coupon_detail .title {
font-size: 32rpx; font-size: 32rpx;
color: #1F2D3D;
letter-spacing: 0;
text-align: center;
display: block;
padding-top: 73rpx;
line-height: 45rpx;
color: #1f2d3d;
letter-spacing: 0;
text-align: center;
display: block;
padding-top: 92rpx;
line-height: 45rpx;
}
.line{
height: 10rpx;
display: block;
width: 100%;
} }


.time { .time {
font-size: 26rpx; font-size: 26rpx;
color: #999999;
letter-spacing: 0;
text-align: center;
line-height: 37rpx;
color: #999;
letter-spacing: 0;
text-align: center;
line-height: 37rpx;
} }


.time text { .time text {
@@ -172,17 +176,20 @@ line-height: 37rpx;


.timevalidity { .timevalidity {
text-align: center; text-align: center;
margin-top: 20rpx;
} }


.timevalidity text:nth-of-type(1) { .timevalidity text:nth-of-type(1) {
color: #333;
font-size: 30rpx;
font-size: 22rpx;
color: #999;
letter-spacing: 0;
text-align: left;
} }


.timevalidity text:nth-of-type(2) { .timevalidity text:nth-of-type(2) {
font-size: 30rpx;
color: red;
font-size: 22rpx;
color: #999;
letter-spacing: 0;
text-align: left;
} }


.posi { .posi {
@@ -201,12 +208,19 @@ line-height: 37rpx;
z-index: 100; z-index: 100;
} }


.shiji {
font-size: 24rpx !important;
color: #919191 !important;
letter-spacing: 0;
}

.posi_logo view:nth-child(1) { .posi_logo view:nth-child(1) {
width: 126rpx; width: 126rpx;
height: 126rpx; height: 126rpx;
border-radius: 50%;
overflow: hidden; overflow: hidden;
flex: 2; flex: 2;
border: 2rpx solid #e7e7e7;
border-radius: 6rpx;
} }


.posi_logo view:nth-child(1) image { .posi_logo view:nth-child(1) image {
@@ -225,6 +239,10 @@ line-height: 37rpx;


.posi_logo view:nth-child(2) text:nth-child(1) { .posi_logo view:nth-child(2) text:nth-child(1) {
font-size: 30rpx; font-size: 30rpx;
width: 320rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }


.posi_logo view:nth-child(2) text:nth-child(2) { .posi_logo view:nth-child(2) text:nth-child(2) {
@@ -234,17 +252,17 @@ line-height: 37rpx;
} }


.tit { .tit {
font-size: 30rpx;
color: #000;
font-weight: bold;
padding: 24rpx 0 33rpx; padding: 24rpx 0 33rpx;
border-bottom: 1rpx solid #eee; border-bottom: 1rpx solid #eee;
text-indent: 20rpx; text-indent: 20rpx;
font-size: 24rpx;
color: #919191;
letter-spacing: 0;
} }


.tel { .tel {
position: absolute; position: absolute;
right: 50rpx;
right: 30rpx;
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
@@ -259,13 +277,12 @@ line-height: 37rpx;
padding: 0 4%; padding: 0 4%;
line-height: 87rpx; line-height: 87rpx;
background: #fff; background: #fff;
border-bottom: 1rpx solid #f5f5f5;
} }


.notes view:nth-child(1) text { .notes view:nth-child(1) text {
font-size: 24rpx;
color: #919191;
letter-spacing: 0;
font-size: 24rpx;
color: #919191;
letter-spacing: 0;
} }


.notes view:nth-child(2) { .notes view:nth-child(2) {
@@ -278,19 +295,21 @@ letter-spacing: 0;
} }


.notes view:nth-child(2) > text { .notes view:nth-child(2) > text {
font-size: 24rpx;
color: #333333;
letter-spacing: 0;
line-height: 42rpx;
font-size: 24rpx;
color: #333;
letter-spacing: 0;
line-height: 42rpx;
} }
.notes{
border-bottom-left-radius:16rpx;

.notes {
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx; border-bottom-right-radius: 16rpx;
padding-bottom: 30rpx;
} }

.note view { .note view {
height: 94rpx;
line-height: 94rpx;
border-bottom: 2rpx solid #f9f9f9;
height: 48rpx;
line-height: 48rpx;
} }


.note view text { .note view text {
@@ -298,19 +317,20 @@ line-height: 42rpx;
} }


.note text:nth-of-type(1) { .note text:nth-of-type(1) {
width: 30%;
width: 22%;
text-indent: 30rpx; text-indent: 30rpx;
text-align: left; text-align: left;
font-size: 30rpx;
color: #000;
font-size: 24rpx;
color: #333;
letter-spacing: 1.16rpx;
} }


.note text:nth-of-type(2) { .note text:nth-of-type(2) {
width: 67%; width: 67%;
padding-right: 3%;
text-align: right;
color: #bdbdbd;
font-size: 30rpx;
padding-right: 1%;
font-size: 24rpx;
color: #333;
letter-spacing: 1.16rpx;
} }


.manjian { .manjian {
@@ -318,3 +338,10 @@ line-height: 42rpx;
color: #666 !important; color: #666 !important;
font-size: 26rpx !important; font-size: 26rpx !important;
} }

.moneys {
font-size: 40rpx !important;
color: #ff4949 !important;
letter-spacing: 0;
text-align: right;
}

Loading…
Откажи
Сачувај