@@ -5,15 +5,15 @@ | |||||
</view> | </view> | ||||
<view class="coupons-info"> | <view class="coupons-info"> | ||||
<view class="coupons-info-name">{{data.title}}</view> | <view class="coupons-info-name">{{data.title}}</view> | ||||
<view class="coupons-info-name">{{data.subTitle}}</view> | |||||
<view class="coupons-info-name subtitle ">{{data.subTitle}}</view> | |||||
<view class="coupons-info-price"> | <view class="coupons-info-price"> | ||||
<text class="coupons-info-price-p">¥{{data.salePrice/100}}</text> | <text class="coupons-info-price-p">¥{{data.salePrice/100}}</text> | ||||
<text class="coupons-info-price-o">¥{{data.price/100}}</text> | <text class="coupons-info-price-o">¥{{data.price/100}}</text> | ||||
</view> | </view> | ||||
<view class="coupons-info-distance"> | |||||
<!-- <view class="coupons-info-distance"> | |||||
<text class="iconfont icon-dingweib"></text> | <text class="iconfont icon-dingweib"></text> | ||||
{{data.salePrice}} | {{data.salePrice}} | ||||
</view> | |||||
</view> --> | |||||
<!-- | <!-- | ||||
<view class="coupons-info-address">{{data.}}</view> | <view class="coupons-info-address">{{data.}}</view> | ||||
--> | --> | ||||
@@ -37,6 +37,7 @@ | |||||
color: #000000; | color: #000000; | ||||
letter-spacing: 0; | letter-spacing: 0; | ||||
line-height: 42rpx; | line-height: 42rpx; | ||||
font-weight: bold; | |||||
} | } | ||||
.coupons-info-price{ | .coupons-info-price{ | ||||
padding:10rpx 0 15rpx; | padding:10rpx 0 15rpx; | ||||
@@ -52,7 +53,7 @@ | |||||
.coupons-info-price-o { | .coupons-info-price-o { | ||||
display: inline-block; | display: inline-block; | ||||
padding-left: 20rpx; | padding-left: 20rpx; | ||||
font-size: 24rpx; | |||||
font-size: 20rpx; | |||||
color: #B4B4B4; | color: #B4B4B4; | ||||
letter-spacing: 0.96rpx; | letter-spacing: 0.96rpx; | ||||
text-decoration: line-through; | text-decoration: line-through; | ||||
@@ -92,4 +93,9 @@ | |||||
height: 50rpx !important; | height: 50rpx !important; | ||||
width: 114rpx !important; | width: 114rpx !important; | ||||
line-height: 50rpx !important; | line-height: 50rpx !important; | ||||
} | |||||
.subtitle{ | |||||
font-size: 26rpx; | |||||
color: #666; | |||||
font-weight:100; | |||||
} | } |
@@ -1,51 +1,51 @@ | |||||
<view class='coupons'> | <view class='coupons'> | ||||
<view class="coupons-body"> | <view class="coupons-body"> | ||||
<view class='banner'> | |||||
<image src='{{data.coverImg}}'></image> | |||||
</view> | |||||
<view class='coupons_info'> | |||||
<view> | |||||
<text>{{data.title}}<text>限购{{data.useLimitQuantity}}件</text></text> | |||||
<text>剩余时间:<text>2天12小时25分钟</text></text> | |||||
<text>剩余件数:<text>{{data.remainInventory}}件</text></text> | |||||
</view> | |||||
<view> | |||||
<text>¥{{data.salePriceStr}}</text> | |||||
<text>¥{{data.priceStr}}</text> | |||||
<view class='banner'> | |||||
<image src='{{data.coverImg}}'></image> | |||||
</view> | </view> | ||||
</view> | |||||
<!-- 未解决 商场的名称 --> | |||||
<view class='posi'> | |||||
<view class='posi_logo'> | |||||
<view class='coupons_info'> | |||||
<view> | <view> | ||||
<image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> | |||||
<text>{{data.title}}<text>限购{{data.useLimitQuantity}}件</text></text> | |||||
<text>剩余时间:<text>2天12小时25分钟</text></text> | |||||
<text>剩余件数:<text>{{data.remainInventory}}件</text></text> | |||||
</view> | </view> | ||||
<view> | <view> | ||||
<text>iFORMALL(西单大悦城店)</text> | |||||
<text>北京市西城区西单北大街131号</text> | |||||
<text>¥{{data.salePriceStr}}</text> | |||||
<text>¥{{data.priceStr}}</text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view> | |||||
<!-- 未解决 商场的名称 --> | |||||
<view class='posi'> | |||||
<view class='posi_logo'> | |||||
<view> | |||||
<image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> | |||||
</view> | |||||
<view> | |||||
<text>iFORMALL(西单大悦城店)</text> | |||||
<text>北京市西城区西单北大街131号</text> | |||||
</view> | |||||
</view> | |||||
<!-- <view> | |||||
<text>更多适用门店</text> | <text>更多适用门店</text> | ||||
<text class='iconfont icon-right'></text> | <text class='iconfont icon-right'></text> | ||||
</view> --> | |||||
</view> | </view> | ||||
</view> | |||||
<view class='notes'> | |||||
<view> | |||||
<text>购买须知</text> | |||||
</view> | |||||
<view> | |||||
<text><text class='spot'></text>有效期2018.01.16 至 2018.09.20</text> | |||||
<text><text class='spot'></text>除特价酒水及特价菜外全场通用</text> | |||||
<text><text class='spot'></text>无需预约,消费g高峰时可能需要等位</text> | |||||
<text><text class='spot'></text>没人最多购买2张</text> | |||||
<text><text class='spot'></text>不可使用包间</text> | |||||
<text><text class='spot'></text>堂食外带均可,可免费打包</text> | |||||
<text><text class='spot'></text>每桌限用2张</text> | |||||
<view class='notes'> | |||||
<view> | |||||
<text>购买须知</text> | |||||
</view> | |||||
<view> | |||||
<text><text class='spot'></text>有效期2018.01.16 至 2018.09.20</text> | |||||
<text><text class='spot'></text>除特价酒水及特价菜外全场通用</text> | |||||
<text><text class='spot'></text>无需预约,消费g高峰时可能需要等位</text> | |||||
<text><text class='spot'></text>没人最多购买2张</text> | |||||
<text><text class='spot'></text>不可使用包间</text> | |||||
<text><text class='spot'></text>堂食外带均可,可免费打包</text> | |||||
<text><text class='spot'></text>每桌限用2张</text> | |||||
</view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | |||||
<view class="buy-view app-border-top"> | <view class="buy-view app-border-top"> | ||||
<button bindtap='orderFunc' class='buy'>立即购买</button> | <button bindtap='orderFunc' class='buy'>立即购买</button> | ||||
</view> | </view> |
@@ -1,4 +1,4 @@ | |||||
@import '../../../app.wxss'; | |||||
@import "../../../app.wxss"; | |||||
.coupons { | .coupons { | ||||
width: 100%; | width: 100%; | ||||
height: 100vh; | height: 100vh; | ||||
@@ -1,14 +1,53 @@ | |||||
//index.js | |||||
const util = require('../../../utils/util'); | |||||
const util = require("../../../utils/util"); | |||||
const config = require("../../../config/config.js"); | |||||
const Http = require("../../../utils/HttpBasics"); | |||||
//券详情页面 | |||||
Page({ | Page({ | ||||
data: { | |||||
code: "", | |||||
data: {}, | |||||
createDate:'', | |||||
expiredTime:'' | |||||
}, | |||||
onLoad: function(options) { | |||||
console.log(options); | |||||
let that = this; | |||||
that.setData({ | |||||
code: options.quancode | |||||
}); | |||||
data: { | |||||
code: '1234567890123456789' | |||||
}, | |||||
onLoad: function() { | |||||
util.barcode('barcode', '1234567890123456789', 680, 200); | |||||
util.qrcode('qrcode', '1234567890123456789', 420, 420); | |||||
//获得优惠券的详情 | |||||
if ( | |||||
options.quancode != null && | |||||
(options.quancode != "" && options.quancode) != undefined | |||||
) { | |||||
Http.get({ | |||||
url: config.api.couponOrderDetail, | |||||
data: { | |||||
couponOrderId: options.quancode | |||||
} | |||||
}).then(res => { | |||||
console.log(res); | |||||
that.setData({ | |||||
data: res.data.data | |||||
}); | |||||
that.setData({ | |||||
expiredTime:util.fmtDate(that.data.data.expiredTime), | |||||
createDate:util.fmtDate(that.data.data.createDate) | |||||
}) | |||||
}); | |||||
} | |||||
util.barcode("barcode", options.quancode, 680, 100); | |||||
util.qrcode("qrcode", options.quancode, 400, 400); | |||||
}, | |||||
phone: function() { | |||||
let that = this; | |||||
console.log(that.data); | |||||
if (that.data.data.merchantLinkPhone) { | |||||
wx.makePhoneCall({ | |||||
phoneNumber: that.data.data.merchantLinkPhone //仅为示例,并非真实的电话号码 | |||||
}); | |||||
} | } | ||||
}) | |||||
} | |||||
}); |
@@ -1 +1,3 @@ | |||||
{} | |||||
{ | |||||
"navigationBarTitleText": "使用优惠券" | |||||
} |
@@ -1,14 +1,64 @@ | |||||
<!--index.wxml--> | <!--index.wxml--> | ||||
<view class="container page"> | <view class="container page"> | ||||
<view class="panel"> | |||||
<view class="header"> | |||||
<view class="coupon_detail clearfix"> | |||||
<image class="fl" src="{{data.coverImg}}" mode="widthFix" /> | |||||
<view class="fr"> | |||||
<text class="title">{{data.title}}</text> | |||||
<view class="time">{{data.subTitle}}</view> | |||||
<view class="money"> | |||||
<text>¥{{data.salePrice/100}}</text> | |||||
<del>¥{{data.price/100}}</del> | |||||
<text wx:if="data.usePrice=='undefined'" class="manjian">满{{data.usePrice}}元可用</text> | |||||
</view> | |||||
</view> | </view> | ||||
</view> | |||||
<view class="timevalidity"> | |||||
<text>有效期至:</text> | |||||
<text>{{expiredTime}}</text> | |||||
</view> | |||||
<view class="panel"> | |||||
<view class="barcode"> | <view class="barcode"> | ||||
<view class="barnum">{{code}}</view> | |||||
<canvas canvas-id="barcode" /> | <canvas canvas-id="barcode" /> | ||||
</view> | </view> | ||||
<view class="qrcode"> | <view class="qrcode"> | ||||
<canvas canvas-id="qrcode" /> | <canvas canvas-id="qrcode" /> | ||||
</view> | </view> | ||||
<view class="barnum"><text>兑换码:</text>{{code}}</view> | |||||
</view> | |||||
<view class="posi"> | |||||
<view class="tit"> | |||||
适用门店 | |||||
</view> | |||||
<view class='posi_logo'> | |||||
<view> | |||||
<image src='{{data.merChantImgUrl}}'></image> | |||||
</view> | |||||
<view> | |||||
<text>{{data.merchantName}}</text> | |||||
<text>北京市西城区西单北大街131号</text> | |||||
</view> | |||||
<image bindtap='phone' class="tel" src="../../../../assets/img/tel.gif" mode="widthFix" /> | |||||
</view> | |||||
</view> | |||||
<view class='note'> | |||||
<view><text>下单时间</text><text>{{createDate}}</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> | |||||
<text>购买须知</text> | |||||
</view> | |||||
<view> | |||||
<text><text class='spot'></text>有效期2018.01.16 至 2018.09.20</text> | |||||
<text><text class='spot'></text>除特价酒水及特价菜外全场通用</text> | |||||
<text><text class='spot'></text>无需预约,消费g高峰时可能需要等位</text> | |||||
<text><text class='spot'></text>没人最多购买2张</text> | |||||
<text><text class='spot'></text>不可使用包间</text> | |||||
<text><text class='spot'></text>堂食外带均可,可免费打包</text> | |||||
<text><text class='spot'></text>每桌限用2张</text> | |||||
</view> | |||||
</view> | </view> | ||||
</view> | |||||
</view> |
@@ -1,70 +1,264 @@ | |||||
/**index.wxss**/ | |||||
page { | |||||
background-color: #439057; | |||||
} | |||||
.page { | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.container { | .container { | ||||
padding-bottom: 10rpx; | |||||
padding-bottom: 10rpx; | |||||
} | } | ||||
.panel { | .panel { | ||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-between; | |||||
align-items: stretch; | |||||
box-sizing: border-box; | |||||
width: 710rpx; | |||||
margin-top: 40rpx; | |||||
border-radius: 10rpx; | |||||
background-color: #fff; | |||||
} | |||||
.header { | |||||
height: 140rpx; | |||||
background-color: #f0f0f0; | |||||
border-radius: 10rpx 10rpx 0 0; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-between; | |||||
align-items: stretch; | |||||
box-sizing: border-box; | |||||
width: 710rpx; | |||||
margin-top: 40rpx; | |||||
border-radius: 10rpx; | |||||
background-color: #fff; | |||||
margin: 30rpx auto 0; | |||||
} | } | ||||
.barcode { | .barcode { | ||||
display: flex; | |||||
height: 320rpx; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
display: flex; | |||||
height: 100rpx; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | } | ||||
.barnum { | .barnum { | ||||
width: 670rpx; | |||||
height: 100rpx; | |||||
line-height: 100rpx; | |||||
font-size: 38rpx; | |||||
font-weight: bold; | |||||
text-align: center; | |||||
letter-spacing: 10rpx; | |||||
white-space: nowrap; | |||||
width: 670rpx; | |||||
height: 46rpx; | |||||
line-height: 46rpx; | |||||
font-size: 32rpx; | |||||
text-align: center; | |||||
letter-spacing: 2rpx; | |||||
white-space: nowrap; | |||||
color: #999; | |||||
} | |||||
.barnum text { | |||||
color: #333; | |||||
} | } | ||||
.barcode > canvas { | .barcode > canvas { | ||||
width: 680rpx; | |||||
height: 200rpx; | |||||
width: 680rpx; | |||||
height: 100rpx; | |||||
} | } | ||||
.qrcode { | .qrcode { | ||||
height: 420rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: flex-end; | |||||
align-items: center; | |||||
height: 370rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: flex-end; | |||||
align-items: center; | |||||
} | } | ||||
.qrcode > canvas { | .qrcode > canvas { | ||||
width: 420rpx; | |||||
height: 420rpx; | |||||
width: 400rpx; | |||||
height: 400rpx; | |||||
} | |||||
.coupon_detail { | |||||
padding: 0 20rpx; | |||||
} | |||||
.fl { | |||||
float: left; | |||||
} | |||||
.fr { | |||||
float: right; | |||||
} | |||||
.coupon_detail image { | |||||
display: block; | |||||
width: 260rpx; | |||||
height: 100rpx; | |||||
border-radius: 16rpx; | |||||
} | |||||
.coupon_detail .fr { | |||||
width: 400rpx; | |||||
} | |||||
.coupon_detail .title { | |||||
font-size: 36rpx; | |||||
font-weight: bold; | |||||
} | |||||
.time { | |||||
font-size: 26rpx; | |||||
color: #999; | |||||
} | |||||
.time text { | |||||
font-size: 26rpx; | |||||
color: red; | |||||
} | |||||
.money text { | |||||
color: red; | |||||
font-size: 36rpx; | |||||
} | |||||
.money del { | |||||
color: #999; | |||||
font-size: 26rpx; | |||||
text-decoration: line-through; | |||||
margin-left: 20rpx; | |||||
} | |||||
.clearfix:after { | |||||
content: "."; | |||||
display: block; | |||||
height: 0; | |||||
clear: both; | |||||
visibility: hidden; | |||||
} | |||||
.timevalidity { | |||||
margin-top: 20rpx; | |||||
text-indent: 20rpx; | |||||
} | |||||
.timevalidity text:nth-of-type(1) { | |||||
color: #333; | |||||
font-size: 30rpx; | |||||
} | |||||
.timevalidity text:nth-of-type(2) { | |||||
font-size: 30rpx; | |||||
color: red; | |||||
} | |||||
.posi { | |||||
width: 100%; | |||||
display: flex; | |||||
flex-direction: column; | |||||
margin-top: 50rpx; | |||||
background: #fff; | |||||
border-bottom: 20rpx solid #f5f5f5; | |||||
border-top: 20rpx solid #f5f5f5; | |||||
} | |||||
.posi_logo { | |||||
width: 92%; | |||||
padding: 30rpx 4%; | |||||
display: flex; | |||||
position: relative; | |||||
} | |||||
.posi_logo view:nth-child(1) { | |||||
width: 126rpx; | |||||
height: 126rpx; | |||||
border-radius: 50%; | |||||
overflow: hidden; | |||||
flex: 2; | |||||
} | |||||
.posi_logo view:nth-child(1) image { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.posi_logo view:nth-child(2) { | |||||
display: flex; | |||||
flex-direction: column; | |||||
flex: 8; | |||||
padding-top: 20rpx; | |||||
padding-left: 30rpx; | |||||
} | |||||
.posi_logo view:nth-child(2) text:nth-child(1) { | |||||
font-size: 30rpx; | |||||
} | |||||
.posi_logo view:nth-child(2) text:nth-child(2) { | |||||
font-size: 24rpx; | |||||
color: #b8b8b8; | |||||
padding-top: 10rpx; | |||||
} | |||||
.tit { | |||||
font-size: 30rpx; | |||||
color: #000; | |||||
font-weight: bold; | |||||
padding: 24rpx 0 33rpx; | |||||
border-bottom: 1px solid #eee; | |||||
text-indent: 20rpx; | |||||
} | |||||
.tel { | |||||
position: absolute; | |||||
right: 50rpx; | |||||
top: 0; | |||||
bottom: 0; | |||||
margin: auto; | |||||
width: 50rpx; | |||||
height: 50rpx; | |||||
} | |||||
.notes { | |||||
margin-top: 2%; | |||||
border-top: 20rpx solid #f5f5f5; | |||||
} | |||||
.notes view:nth-child(1) { | |||||
width: 92%; | |||||
height: 87rpx; | |||||
padding: 0 4%; | |||||
line-height: 87rpx; | |||||
background: #fff; | |||||
border-bottom: 1rpx solid #f5f5f5; | |||||
} | |||||
.notes view:nth-child(1) text { | |||||
font-size: 30rpx; | |||||
font-weight: bold; | |||||
} | |||||
.notes view:nth-child(2) { | |||||
width: 92%; | |||||
height: 400rpx; | |||||
padding: 0 4%; | |||||
background: #fff; | |||||
display: flex; | |||||
flex-direction: column; | |||||
padding-top: 2%; | |||||
} | |||||
.notes view:nth-child(2) > text { | |||||
font-size: 28rpx; | |||||
color: #a9a9a9; | |||||
line-height: 56rpx; | |||||
} | |||||
.note view { | |||||
height: 94rpx; | |||||
line-height: 94rpx; | |||||
border-bottom: 2rpx solid #f9f9f9; | |||||
} | |||||
.note view text { | |||||
display: inline-block; | |||||
} | |||||
.note text:nth-of-type(1) { | |||||
width: 30%; | |||||
text-indent: 30rpx; | |||||
text-align: left; | |||||
font-size: 30rpx; | |||||
color: #000; | |||||
} | |||||
.note text:nth-of-type(2) { | |||||
width: 67%; | |||||
padding-right: 3%; | |||||
text-align: right; | |||||
color: #bdbdbd; | |||||
font-size: 30rpx; | |||||
} | |||||
.manjian { | |||||
margin-left: 26rpx; | |||||
color: #666 !important; | |||||
font-size: 26rpx !important; | |||||
} | } |
@@ -1,11 +1,12 @@ | |||||
let format = require('../../../utils/util.js') | |||||
let config = require('../../../config/config.js') | |||||
let app = getApp() | |||||
const Http = require("../../../utils/HttpBasics") | |||||
let format = require("../../../utils/util.js"); | |||||
let config = require("../../../config/config.js"); | |||||
let app = getApp(); | |||||
const Http = require("../../../utils/HttpBasics"); | |||||
//1535126400000 | //1535126400000 | ||||
Page({ | Page({ | ||||
data: { | data: { | ||||
tabs: [{ | |||||
tabs: [ | |||||
{ | |||||
key: 0, | key: 0, | ||||
name: "未使用" | name: "未使用" | ||||
}, | }, | ||||
@@ -23,45 +24,61 @@ Page({ | |||||
} | } | ||||
], | ], | ||||
list: [], | list: [], | ||||
current: '', | |||||
current_scroll: '1' | |||||
current: "", | |||||
current_scroll: "1" | |||||
}, | }, | ||||
onLoad() { | onLoad() { | ||||
this.getList(0, 1) | |||||
this.getList(0, 1); | |||||
}, | |||||
//点击跳转到券详情页面 | |||||
gotouse: function(e) { | |||||
console.log(e.currentTarget.dataset.quancode); | |||||
console.log("点击跳转到券详情"); | |||||
wx.navigateTo({ | |||||
url: `/pages/couponorder/detail/index?quancode=${e.currentTarget.dataset.quancode}`, | |||||
success: function(res){ | |||||
// success | |||||
console.log("点击跳转到券详情页面") | |||||
}, | |||||
fail: function() { | |||||
// fail | |||||
}, | |||||
complete: function() { | |||||
// complete | |||||
} | |||||
}) | |||||
}, | }, | ||||
getList(key, pageNum) { | getList(key, pageNum) { | ||||
var that = this | |||||
var that = this; | |||||
Http.get({ | Http.get({ | ||||
url: config.api.couponOrderList, | |||||
data: { | |||||
pageNum: pageNum, | |||||
pageSize: 10, | |||||
orderStatus: key | |||||
} | |||||
}) | |||||
.then(res => { | |||||
console.log(res) | |||||
res.data.list.map(file => { | |||||
file.expiredTime = format.formatTime(file.expiredTime, 'yyyy-MM-dddd hh:mm:ss') | |||||
}) | |||||
that.setData({ | |||||
list: res.data.list | |||||
}) | |||||
}) | |||||
url: config.api.couponOrderList, | |||||
data: { | |||||
pageNum: pageNum, | |||||
pageSize: 10, | |||||
orderStatus: key | |||||
} | |||||
}).then(res => { | |||||
console.log(res); | |||||
res.data.list.map(file => { | |||||
file.expiredTime = format.formatTime( | |||||
file.expiredTime, | |||||
"yyyy-MM-dddd hh:mm:ss" | |||||
); | |||||
}); | |||||
that.setData({ | |||||
list: res.data.list | |||||
}); | |||||
}); | |||||
}, | }, | ||||
handleChange({ | |||||
detail | |||||
}) { | |||||
handleChange({ detail }) { | |||||
this.setData({ | this.setData({ | ||||
current: detail.key | current: detail.key | ||||
}); | }); | ||||
}, | }, | ||||
handleChangeScroll({ | |||||
detail | |||||
}) { | |||||
this.getList(detail.key) | |||||
handleChangeScroll({ detail }) { | |||||
this.getList(detail.key); | |||||
this.setData({ | this.setData({ | ||||
current_scroll: detail.key | current_scroll: detail.key | ||||
}); | }); | ||||
}, | |||||
}) | |||||
} | |||||
}); |
@@ -1,24 +1,22 @@ | |||||
<view class="market"> | <view class="market"> | ||||
<!-- 券包 我的优惠券 --> | |||||
<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 class='section' wx:for='{{list}}' wx:key='{{index}}'> | <view class='section' wx:for='{{list}}' wx:key='{{index}}'> | ||||
<view class='detail_msg'> | <view class='detail_msg'> | ||||
<view class='logo'> | <view class='logo'> | ||||
<image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> | |||||
<image src='{{item.coverImg}}'></image> | |||||
</view> | </view> | ||||
<view class='info'> | <view class='info'> | ||||
<view> | <view> | ||||
<text>{{item.title}}</text> | <text>{{item.title}}</text> | ||||
</view> | </view> | ||||
<view> | |||||
<text>{{item.subTitle}}</text> | |||||
</view> | |||||
<view> | <view> | ||||
<text class="txt1">有效期至:</text> | <text class="txt1">有效期至:</text> | ||||
<text class="txt2">{{item.expiredTime}}</text> | <text class="txt2">{{item.expiredTime}}</text> | ||||
</view> | </view> | ||||
<view class="btns">立即使用</view> | |||||
<view class="btns" bindtap="gotouse" data-quancode="{{item.id}}">立即使用</view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> |
@@ -17,10 +17,13 @@ | |||||
.section { | .section { | ||||
margin-top: 2%; | margin-top: 2%; | ||||
} | } | ||||
.section:nth-of-type(1){ | |||||
margin-top:30rpx; | |||||
} | |||||
.detail_msg { | .detail_msg { | ||||
width: 92%; | width: 92%; | ||||
height: 220rpx !important; | |||||
height: 202rpx !important; | |||||
background: #fff; | background: #fff; | ||||
display: flex; | display: flex; | ||||
padding: 0 4%; | padding: 0 4%; | ||||
@@ -51,6 +54,7 @@ | |||||
.info view:nth-child(1) text { | .info view:nth-child(1) text { | ||||
font-size: 30rpx; | font-size: 30rpx; | ||||
margin-top: 10rpx; | |||||
} | } | ||||
.info view:nth-child(2) { | .info view:nth-child(2) { | ||||
@@ -60,34 +64,29 @@ | |||||
margin-top: 1%; | margin-top: 1%; | ||||
} | } | ||||
.info view:nth-child(2) text { | |||||
font-size: 22rpx; | |||||
color: #b8b8b8; | |||||
} | |||||
.info view:nth-child(3) { | .info view:nth-child(3) { | ||||
display: flex; | |||||
justify-content: space-between; | |||||
margin-left: 20rpx; | |||||
} | } | ||||
.btns{ | |||||
.btns { | |||||
width: 200rpx; | width: 200rpx; | ||||
height: 60rpx; | height: 60rpx; | ||||
line-height: 60rpx; | line-height: 60rpx; | ||||
text-align: center; | text-align: center; | ||||
background: #00C0FF; | |||||
background: #00c0ff; | |||||
color: #fff; | color: #fff; | ||||
float: right; | float: right; | ||||
border-radius:15rpx; | |||||
font-size: 30rpx; | |||||
border-radius: 15rpx; | |||||
font-size: 30rpx; | |||||
margin-top: 20rpx; | |||||
} | } | ||||
.txt1{ | |||||
.txt1 { | |||||
font-size: 22rpx; | font-size: 22rpx; | ||||
color: #999; | color: #999; | ||||
} | } | ||||
.txt2{ | |||||
.txt2 { | |||||
font-size: 22rpx; | font-size: 22rpx; | ||||
color: red; | color: red; | ||||
} | } |
@@ -14,6 +14,7 @@ | |||||
} | } | ||||
page { | page { | ||||
width: 100%; | width: 100%; | ||||
height: auto; | |||||
overflow-x: hidden; | overflow-x: hidden; | ||||
} | } | ||||
.txt{ | .txt{ | ||||
@@ -9,6 +9,7 @@ | |||||
letter-spacing: 0.75rpx; | letter-spacing: 0.75rpx; | ||||
padding-top: 20rpx; | padding-top: 20rpx; | ||||
padding-left: 30rpx; | padding-left: 30rpx; | ||||
padding-bottom: 30rpx | |||||
} | } | ||||
.index-scroll-view { | .index-scroll-view { | ||||
@@ -1,9 +1,11 @@ | |||||
<view class="user"> | <view class="user"> | ||||
<view class="user-title"> | <view class="user-title"> | ||||
<view class="user-avatar"> | <view class="user-avatar"> | ||||
<image src="{{user.avatar}}" /> | |||||
<open-data class="open" type="userAvatarUrl"></open-data> | |||||
</view> | |||||
<view class="user-phone"> | |||||
<open-data type="userNickName"></open-data> | |||||
</view> | </view> | ||||
<view class="user-phone">电话</view> | |||||
</view> | </view> | ||||
<view class="margin"></view> | <view class="margin"></view> | ||||
<view class="user-btns"> | <view class="user-btns"> | ||||
@@ -1,83 +1,104 @@ | |||||
.margin { | .margin { | ||||
background: #f5f5f5; | |||||
height: 20rpx; | |||||
background: #f5f5f5; | |||||
height: 20rpx; | |||||
} | } | ||||
.user{ | |||||
background: #f5f5f5; | |||||
min-height: 100vh; | |||||
.user { | |||||
background: #f5f5f5; | |||||
min-height: 100vh; | |||||
} | } | ||||
.user-title { | .user-title { | ||||
height: 186rpx; | |||||
padding: 30rpx; | |||||
display: flex; | |||||
flex-direction: row; | |||||
box-sizing: border-box; | |||||
background: #FFFFFF; | |||||
height: 186rpx; | |||||
padding: 30rpx; | |||||
display: flex; | |||||
flex-direction: row; | |||||
box-sizing: border-box; | |||||
background: #fff; | |||||
} | } | ||||
/* | |||||
.user-avatar { | .user-avatar { | ||||
padding-right: 30rpx; | |||||
width: 126rpx; | |||||
height: 126rpx; | |||||
} | |||||
padding-right: 30rpx; | |||||
width: 126rpx; | |||||
height: 126rpx; | |||||
border-radius: 16rpx; | |||||
overflow: hidden; | |||||
border: 1px solid red; | |||||
} */ | |||||
.user-avatar image { | |||||
width: 100%; | |||||
height: 100%; | |||||
border-radius: 100%; | |||||
.user-avatar open-data { | |||||
display: block; | |||||
width: 100%; | |||||
height: 100%; | |||||
} | } | ||||
.user-phone { | .user-phone { | ||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
font-family: PingFangSC-Regular; | |||||
font-size: 30rpx; | |||||
color: #000000; | |||||
letter-spacing: 0.64rpx; | |||||
font-family: PingFangSC-Regular; | |||||
font-size: 30rpx; | |||||
height: 120rpx; | |||||
line-height: 120rpx; | |||||
margin-left: 20rpx; | |||||
color: #000; | |||||
letter-spacing: 0.64rpx; | |||||
} | |||||
.user-avatar{ | |||||
display: block; | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
border-radius:16rpx; | |||||
overflow: hidden; | |||||
} | } | ||||
.user-btns{ | |||||
background: #FFFFFF; | |||||
.open01 { | |||||
display: block; | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
} | } | ||||
.user-btns { | |||||
background: #fff; | |||||
} | |||||
.user-btns .user-btn { | .user-btns .user-btn { | ||||
display: flex; | |||||
height: 88rpx; | |||||
font-size: 30rpx; | |||||
color: #000000; | |||||
line-height: 88rpx; | |||||
display: flex; | |||||
height: 88rpx; | |||||
font-size: 30rpx; | |||||
color: #000; | |||||
line-height: 88rpx; | |||||
border-bottom: 1rpx solid #eee; | |||||
} | } | ||||
.user-btns .user-btn>view { | |||||
flex: 1; | |||||
padding: 0 10px 0 32rpx; | |||||
.user-btns .user-btn > view { | |||||
flex: 1; | |||||
padding: 0 10px 0 32rpx; | |||||
} | } | ||||
.user-btns .user-btn>view:last-child { | |||||
text-align: right; | |||||
color: #B8B8B8; | |||||
font-size: 24rpx; | |||||
.user-btns .user-btn > view:last-child { | |||||
text-align: right; | |||||
color: #b8b8b8; | |||||
font-size: 24rpx; | |||||
} | } | ||||
.user-btns .user-btn>view:last-child .iconfont { | |||||
color: #A8A8A8; | |||||
font-size: 44rpx; | |||||
.user-btns .user-btn > view:last-child .iconfont { | |||||
color: #a8a8a8; | |||||
font-size: 44rpx; | |||||
} | } | ||||
.user-out-btn { | .user-out-btn { | ||||
background-color: #fff; | |||||
height: 88rpx; | |||||
line-height: 88rpx; | |||||
font-family: PingFangSC-Semibold; | |||||
font-size: 30rpx; | |||||
color: #000000; | |||||
text-align: center; | |||||
border-radius:0; | |||||
border: none; | |||||
background-color: #fff; | |||||
height: 88rpx; | |||||
line-height: 88rpx; | |||||
font-family: PingFangSC-Semibold; | |||||
font-size: 30rpx; | |||||
color: #000; | |||||
text-align: center; | |||||
border-radius: 0; | |||||
border: none; | |||||
} | } | ||||
.user-out-btn.button-hover{ | |||||
background-color: rgba(237, 237, 237, 1); | |||||
.user-out-btn.button-hover { | |||||
background-color: rgba(237, 237, 237, 1); | |||||
} | |||||
.user-out-btn::after { | |||||
opacity: 0; | |||||
} | } | ||||
.user-out-btn::after{ | |||||
opacity: 0; | |||||
} |
@@ -1,5 +1,5 @@ | |||||
var barcode = require('./barcode'); | |||||
var qrcode = require('./qrcode'); | |||||
var barcode = require("./barcode"); | |||||
var qrcode = require("./qrcode"); | |||||
const formatTime = (date, fmt) => { | const formatTime = (date, fmt) => { | ||||
try { | try { | ||||
@@ -17,28 +17,43 @@ const formatTime = (date, fmt) => { | |||||
"m+": date.getMinutes(), //分 | "m+": date.getMinutes(), //分 | ||||
"s+": date.getSeconds(), //秒 | "s+": date.getSeconds(), //秒 | ||||
"q+": Math.floor((date.getMonth() + 3) / 3), //季度 | "q+": Math.floor((date.getMonth() + 3) / 3), //季度 | ||||
"S": date.getMilliseconds() //毫秒 | |||||
S: date.getMilliseconds() //毫秒 | |||||
}; | }; | ||||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); | |||||
if (/(y+)/.test(fmt)) | |||||
fmt = fmt.replace( | |||||
RegExp.$1, | |||||
(date.getFullYear() + "").substr(4 - RegExp.$1.length) | |||||
); | |||||
for (var k in o) | for (var k in o) | ||||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); | |||||
if (new RegExp("(" + k + ")").test(fmt)) | |||||
fmt = fmt.replace( | |||||
RegExp.$1, | |||||
RegExp.$1.length == 1 | |||||
? o[k] | |||||
: ("00" + o[k]).substr(("" + o[k]).length) | |||||
); | |||||
return fmt; | return fmt; | ||||
} catch (error) { | } catch (error) { | ||||
return date; | return date; | ||||
} | } | ||||
} | |||||
}; | |||||
const formatNumber = n => { | const formatNumber = n => { | ||||
n = n.toString() | |||||
return n[1] ? n : '0' + n | |||||
} | |||||
n = n.toString(); | |||||
return n[1] ? n : "0" + n; | |||||
}; | |||||
function convert_length(length) { | function convert_length(length) { | ||||
return Math.round(wx.getSystemInfoSync().windowWidth * length / 750); | |||||
return Math.round((wx.getSystemInfoSync().windowWidth * length) / 750); | |||||
} | } | ||||
function barc(id, code, width, height) { | function barc(id, code, width, height) { | ||||
barcode.code128(wx.createCanvasContext(id), code, convert_length(width), convert_length(height)) | |||||
barcode.code128( | |||||
wx.createCanvasContext(id), | |||||
code, | |||||
convert_length(width), | |||||
convert_length(height) | |||||
); | |||||
} | } | ||||
function qrc(id, code, width, height) { | function qrc(id, code, width, height) { | ||||
@@ -46,11 +61,24 @@ function qrc(id, code, width, height) { | |||||
ctx: wx.createCanvasContext(id), | ctx: wx.createCanvasContext(id), | ||||
width: convert_length(width), | width: convert_length(width), | ||||
height: convert_length(height) | height: convert_length(height) | ||||
}) | |||||
}); | |||||
} | |||||
function fmtDate(obj) { | |||||
var date = new Date(obj); | |||||
var y = 1900 + date.getYear(); | |||||
var m = "0" + (date.getMonth() + 1); | |||||
var d = "0" + date.getDate(); | |||||
return ( | |||||
y + | |||||
"-" + | |||||
m.substring(m.length - 2, m.length) + | |||||
"-" + | |||||
d.substring(d.length - 2, d.length) | |||||
); | |||||
} | } | ||||
module.exports = { | module.exports = { | ||||
formatTime: formatTime, | formatTime: formatTime, | ||||
barcode: barc, | barcode: barc, | ||||
qrcode: qrc | |||||
} | |||||
qrcode: qrc, | |||||
fmtDate: fmtDate | |||||
}; |