Переглянути джерело

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

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({
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
});
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.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() {
let that = this;
@@ -115,4 +96,4 @@ Page({
});
}
}
});
});

+ 30
- 8
pages/couponorder/detail/index.wxml Переглянути файл

@@ -18,10 +18,12 @@
<text>有效期至:</text>
<text>{{expiredTime}}</text>
</view>
<image class='line' mode="widthFix" src="./../../../assets/img/line.png"></image>
<view class="zhuangtai">
<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==3}}" src="./../../../assets/img/wm03.jpg"></image>

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

@@ -48,16 +51,35 @@
<image bindtap='phone' class="tel" src="./../../../assets/img/tel.jpg" mode="widthFix" />
</view>
</view>
<image class='line' mode="widthFix" src="./../../../assets/img/line.png"></image>
<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>{{data.couponPrice/100}}元</text></view>
</view>
<view class='notes' style="border-bottom:0">
<view>


+ 76
- 49
pages/couponorder/detail/index.wxss Переглянути файл

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

page {
background: #02c0ff;
}

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

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



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

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

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

.coupon_detail .title {
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 {
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 {
@@ -172,17 +176,20 @@ line-height: 37rpx;

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

.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) {
font-size: 30rpx;
color: red;
font-size: 22rpx;
color: #999;
letter-spacing: 0;
text-align: left;
}

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

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

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

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

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

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

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

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

.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) {
@@ -278,19 +295,21 @@ letter-spacing: 0;
}

.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;
padding-bottom: 30rpx;
}

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

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

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

.note text:nth-of-type(2) {
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 {
@@ -318,3 +338,10 @@ line-height: 42rpx;
color: #666 !important;
font-size: 26rpx !important;
}

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

Завантаження…
Відмінити
Зберегти