Skip to content

严立 / mini-shimao

Go to a project
Commit ccd11ae1 by zqm
Options

MM-订单详情

parent 538f3685
Inline Side-by-side
Showing with 780 additions and 50 deletions
pages/mine/card/card.js
...@@ -4,7 +4,7 @@ const App = getApp() ...@@ -4,7 +4,7 @@ const App = getApp()
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
passListType: 0, // 0为单张卡 1为多张卡 passListType: 1, // 0为单张卡 1为多张卡
privateStatus: true, privateStatus: true,
swiperCurrent: 0, swiperCurrent: 0,
passList: [ passList: [
......
pages/mine/home/home.js
...@@ -77,7 +77,8 @@ Page({ ...@@ -77,7 +77,8 @@ Page({
img: '', img: '',
title: '日落观光游船体验活动之船行碧波共赏美景', title: '日落观光游船体验活动之船行碧波共赏美景',
num: 3 num: 3
}] }],
orderListBackup: []
}, },
close() { close() {
...@@ -112,6 +113,58 @@ Page({ ...@@ -112,6 +113,58 @@ Page({
url: '/pages/pay/coupon-input/coupon-input', url: '/pages/pay/coupon-input/coupon-input',
}) })
}, },
//获取待使用订单
getWillUseOrders() {
let that = this
App.wxRequest({
url: '/api/v1/order/getOrderList',
data: {
goodType: "", //数据字典(good_type) 商品分类(全部为"")
status: 2, //状态(-1已取消0未付款1未发货2待使用3已使用4已过期)
pageNo: 1,
pageSize: -1
},
success: function (res) {
let tmpArr = []
console.log('daishiyongdingdan', res);
let list = res.data
let listBackUp = JSON.parse(JSON.stringify(list)) //备份数据
let orderList = `myOrder.artOrder.orderList`
list.length = 1
that.setData({
[orderList]: list,
orderListBackup: listBackUp
})
}
})
},
//获取卡数据
getCardList() {
let that = this
App.wxRequest({
url: '/api/v1/volume/getVolumeList',
data: {
status: "", //0已过期1待使用2已使用(""全部)
pageNo: 1,
pageSize: -1
},
success: function (res) {
let tmpArr = []
console.log('卡片数据', res);
let list = res.data.map(item => {
return item
})
let passOrder = `myOrder.passOrder`
that.setData({
[passOrder]: list
})
}
})
},
setUserInfo: function () { setUserInfo: function () {
let funcUserInfo = wx.getStorageSync('userInfo') let funcUserInfo = wx.getStorageSync('userInfo')
...@@ -145,6 +198,8 @@ Page({ ...@@ -145,6 +198,8 @@ Page({
userInfo: funcUserInfo userInfo: funcUserInfo
}) })
this.getMyActivityList() this.getMyActivityList()
this.getCardList()
this.getWillUseOrders()
} else { } else {
this.setData({ this.setData({
isRegister: false, isRegister: false,
...@@ -328,9 +383,30 @@ Page({ ...@@ -328,9 +383,30 @@ Page({
//查看更多 //查看更多
onShowMoreOrder: function () { onShowMoreOrder: function () {
let showMoreOrder = !this.data.showMoreOrder let showMoreOrder = !this.data.showMoreOrder
let orderList = `myOrder.artOrder.orderList`
console.log(JSON.parse(JSON.stringify(this.data.orderListBackup)));
if (showMoreOrder) {
// 展开
this.setData({ this.setData({
showMoreOrder [orderList]: JSON.parse(JSON.stringify(this.data.orderListBackup)),
}) })
} else {
// 收起
let list = JSON.parse(JSON.stringify(this.data.orderListBackup))
list.length = 1
this.setData({
[orderList]: list,
})
}
this.setData({
showMoreOrder,
})
}, },
onShowMoreActivity: function () { onShowMoreActivity: function () {
let showMoreActivity = !this.data.showMoreActivity let showMoreActivity = !this.data.showMoreActivity
......
pages/mine/home/home.wxml
...@@ -128,41 +128,40 @@ ...@@ -128,41 +128,40 @@
<view class="pass-bg-two" wx:if="{{myOrder.passOrder.length > 1}}"></view> <view class="pass-bg-two" wx:if="{{myOrder.passOrder.length > 1}}"></view>
<view class="pass-logo-wrapper row align-c"> <view class="pass-logo-wrapper row align-c">
<image src="{{myOrder.passOrder[0].logo}}"></image> <image src="{{myOrder.passOrder[0].logo}}"></image>
<text>{{myOrder.passOrder[0].store}}</text> <text>{{myOrder.passOrder[0].officeName}}</text>
</view> </view>
<view class="pass-title"> <view class="pass-title">
<text>{{myOrder.passOrder[0].title}}</text> <text>精灵鸟理想国{{myOrder.passOrder[0].name}}</text>
</view> </view>
<view class="pass-time"> <view class="pass-time">
<text>{{myOrder.passOrder[0].time}}</text> <text>有效期至{{myOrder.passOrder[0].expireTime}}</text>
</view> </view>
<view class="pass-name"> <view class="pass-name">
<text>{{myOrder.passOrder[0].name}}</text> <text>{{myOrder.passOrder[0].personName}}</text>
</view> </view>
<view class="pass-idNum"> <view class="pass-idNum">
<text>{{myOrder.passOrder[0].idNum}}</text> <text>{{myOrder.passOrder[0].identityCard}}</text>
</view> </view>
</view> </view>
<!-- 商品 --> <!-- 商品 -->
<view class="goods-wrapper"> <view class="goods-wrapper" wx:for="{{myOrder.artOrder.orderList}}" wx:key="*this">
<view class="goods-logo-wrapper row align-c"> <view class="goods-logo-wrapper row align-c">
<view class="art-logo"> <view class="art-logo">
<image src="{{myOrder.artOrder.logo}}"></image> <image src="{{myOrder.artOrder.logo}}"></image>
</view> </view>
<text>{{myOrder.artOrder.orderList[0].store}}</text> <text>{{item.officeName}}</text>
</view> </view>
<view class="goods-content row align-c"> <view class="goods-content row align-c">
<image src="{{item.cover}}" wx:for="{{myOrder.artOrder.orderList}}" wx:key="id"></image> <image src="{{k.imgUrl}}" wx:for="{{item.smOrderDetails}}" wx:for-item="k" wx:key="*this"></image>
<text wx:if="{{myOrder.artOrder.orderList.length === 1}}">{{myOrder.artOrder.orderList[0].title}}</text> <text wx:if="{{item.smOrderDetails.length == 1}}">{{item.smOrderDetails[0].name}}</text>
</view> </view>
<view class="goods-footer row align-c con-b"> <view class="goods-footer row align-c con-b">
<text>{{myOrder.artOrder.orderList[0].time}}</text> <text>有效期至{{item.time}}</text>
<text>{{myOrder.artOrder.orderList[0].quantity}}</text> <text>共{{item.smOrderDetails.length}}</text>
</view> </view>
</view> </view>
<!-- more --> <!-- more -->
<view class="more row align-c con-c" bindtap="onShowMoreOrder"> <view class="more row align-c con-c" bindtap="onShowMoreOrder">
<text wx:if="{{!showMoreOrder}}">展开更多</text> <text wx:if="{{!showMoreOrder}}">展开更多</text>
......
pages/mine/home/home.wxss
.container { .container {
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%); background: linear-gradient(180deg, #fff 10%, #F3F4F6 20%);
/* background: #F3F4F6 */
} }
.navigation { .navigation {
z-index: 2; z-index: 2;
} }
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.mine { .mine {
position: relative; position: relative;
width: 750rpx; width: 750rpx;
...@@ -25,7 +28,7 @@ ...@@ -25,7 +28,7 @@
margin-right: 32rpx; margin-right: 32rpx;
} }
.mine-avatar > image { .mine-avatar>image {
width: 128rpx; width: 128rpx;
height: 128rpx; height: 128rpx;
border-radius: 50%; border-radius: 50%;
...@@ -61,10 +64,13 @@ ...@@ -61,10 +64,13 @@
padding: 41rpx 32rpx; padding: 41rpx 32rpx;
background-color: #fff; background-color: #fff;
border-radius: 4rpx; border-radius: 4rpx;
margin-top:48rpx;
} }
.cpopon-info { .cpopon-info {
flex: 1; flex: 1;
} }
.cpopon-info text:nth-child(1) { .cpopon-info text:nth-child(1) {
font-size: 34rpx; font-size: 34rpx;
font-weight: 600; font-weight: 600;
...@@ -76,6 +82,7 @@ ...@@ -76,6 +82,7 @@
font-size: 26rpx; font-size: 26rpx;
color: #161A1F; color: #161A1F;
} }
.coupon image { .coupon image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
...@@ -127,7 +134,7 @@ ...@@ -127,7 +134,7 @@
.menu { .menu {
width: 750rpx; width: 750rpx;
margin-top: 16rpx; /* margin-top: 16rpx; */
margin-bottom: 30rpx; margin-bottom: 30rpx;
padding: 0 48rpx; padding: 0 48rpx;
overflow-x: hidden; overflow-x: hidden;
...@@ -328,24 +335,30 @@ ...@@ -328,24 +335,30 @@
background-color: #fff; background-color: #fff;
border-radius: 4rpx; border-radius: 4rpx;
} }
.order-activity image { .order-activity image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
} }
.order-activity-title-wrapper { .order-activity-title-wrapper {
height: 48rpx; height: 48rpx;
} }
.order-activity-title { .order-activity-title {
font-size: 34rpx; font-size: 34rpx;
color: #15191F; color: #15191F;
font-weight: 600; font-weight: 600;
} }
.order-activity-icon-list { .order-activity-icon-list {
margin-top: 56rpx; margin-top: 56rpx;
} }
.order-activity-icon-wrapper { .order-activity-icon-wrapper {
flex: 1; flex: 1;
} }
.order-activity-icon { .order-activity-icon {
position: relative; position: relative;
width: 80rpx; width: 80rpx;
...@@ -353,10 +366,12 @@ ...@@ -353,10 +366,12 @@
background-color: #F5F6F8; background-color: #F5F6F8;
border-radius: 50%; border-radius: 50%;
} }
.order-activity-icon image{
.order-activity-icon image {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
.order-activity-badge { .order-activity-badge {
position: absolute; position: absolute;
top: -10rpx; top: -10rpx;
...@@ -370,9 +385,11 @@ ...@@ -370,9 +385,11 @@
background-color: #E66060; background-color: #E66060;
border-radius: 16rpx; border-radius: 16rpx;
} }
.badge-widen { .badge-widen {
width: 48rpx; width: 48rpx;
} }
.order-activity-icon-wrapper text { .order-activity-icon-wrapper text {
margin-top: 16rpx; margin-top: 16rpx;
font-size: 22rpx; font-size: 22rpx;
...@@ -394,6 +411,7 @@ ...@@ -394,6 +411,7 @@
border-radius: 4rpx; border-radius: 4rpx;
opacity: 0.81; opacity: 0.81;
} }
.pass-bg-one { .pass-bg-one {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -405,6 +423,7 @@ ...@@ -405,6 +423,7 @@
background: rgba(247, 179, 197, 0.5); background: rgba(247, 179, 197, 0.5);
border-radius: 4rpx 4rpx 0 0; border-radius: 4rpx 4rpx 0 0;
} }
.pass-bg-two { .pass-bg-two {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -417,33 +436,40 @@ ...@@ -417,33 +436,40 @@
background: rgba(247, 179, 197, 0.3); background: rgba(247, 179, 197, 0.3);
border-radius: 4rpx 4rpx 0 0; border-radius: 4rpx 4rpx 0 0;
} }
.pass-logo-wrapper { .pass-logo-wrapper {
height: 50rpx; height: 50rpx;
} }
.pass-logo-wrapper image { .pass-logo-wrapper image {
width: 64rpx; width: 64rpx;
height: 50rpx; height: 50rpx;
background-color: #ccc; background-color: #ccc;
} }
.pass-logo-wrapper text { .pass-logo-wrapper text {
height: 50rpx; height: 50rpx;
margin-left: 20rpx; margin-left: 20rpx;
font-size: 26rpx; font-size: 26rpx;
line-height: 50rpx; line-height: 50rpx;
} }
.pass-title { .pass-title {
margin-top: 24rpx; margin-top: 24rpx;
font-size: 42rpx; font-size: 42rpx;
font-weight: 600; font-weight: 600;
} }
.pass-time { .pass-time {
margin-top: 8rpx; margin-top: 8rpx;
font-size: 26rpx; font-size: 26rpx;
} }
.pass-name { .pass-name {
margin-top: 32rpx; margin-top: 32rpx;
font-size: 22rpx; font-size: 22rpx;
} }
.pass-idNum { .pass-idNum {
margin-top: 8rpx; margin-top: 8rpx;
font-size: 22rpx; font-size: 22rpx;
...@@ -456,10 +482,12 @@ ...@@ -456,10 +482,12 @@
background-color: #F5F6F8; background-color: #F5F6F8;
border-radius: 4rpx; border-radius: 4rpx;
} }
.goods-logo-wrapper { .goods-logo-wrapper {
height: 100rpx; height: 100rpx;
margin-top: 40rpx; margin-top: 40rpx;
} }
.goods-logo-wrapper text { .goods-logo-wrapper text {
height: 100rpx; height: 100rpx;
margin-left: 20rpx; margin-left: 20rpx;
...@@ -467,24 +495,29 @@ ...@@ -467,24 +495,29 @@
color: #15191F; color: #15191F;
line-height: 100rpx; line-height: 100rpx;
} }
.goods-content { .goods-content {
height: 136rpx; height: 136rpx;
} }
.goods-content image{
.goods-content image {
width: 140rpx; width: 140rpx;
height: 136rpx; height: 136rpx;
margin-right: 32rpx; margin-right: 32rpx;
background-color: #ccc; background-color: #ccc;
} }
.goods-content text { .goods-content text {
font-size: 30rpx; font-size: 30rpx;
color: #15191F; color: #15191F;
font-weight: 600; font-weight: 600;
line-height: 42rpx; line-height: 42rpx;
} }
.goods-footer { .goods-footer {
height: 84rpx; height: 84rpx;
} }
.goods-footer text { .goods-footer text {
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959DA9;
...@@ -509,6 +542,7 @@ ...@@ -509,6 +542,7 @@
background-color: #F5F6F8; background-color: #F5F6F8;
border-radius: 4rpx; border-radius: 4rpx;
} }
.appointment-time { .appointment-time {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -523,23 +557,26 @@ ...@@ -523,23 +557,26 @@
border-radius: 4rpx; border-radius: 4rpx;
} }
.appointment-activity-content { .appointment-activity-content {}
}
.appointment-activity-img { .appointment-activity-img {
width: 140rpx; width: 140rpx;
height: 136rpx; height: 136rpx;
background-color: #ccc; background-color: #ccc;
} }
.appointment-activity-info { .appointment-activity-info {
flex: 1; flex: 1;
margin-left: 32rpx; margin-left: 32rpx;
} }
.appointment-activity-title { .appointment-activity-title {
color: #15191F; color: #15191F;
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
line-height: 42rpx; line-height: 42rpx;
} }
.appointment-activity-num { .appointment-activity-num {
margin-top: 16rpx; margin-top: 16rpx;
color: #959DA9; color: #959DA9;
...@@ -550,6 +587,7 @@ ...@@ -550,6 +587,7 @@
width: 305rpx; width: 305rpx;
height: 110rpx; height: 110rpx;
} }
.border-right { .border-right {
width: 1rpx; width: 1rpx;
height: 75rpx; height: 75rpx;
...@@ -571,10 +609,12 @@ ...@@ -571,10 +609,12 @@
.more { .more {
margin-top: 32rpx; margin-top: 32rpx;
} }
.more text { .more text {
font-size: 26rpx; font-size: 26rpx;
color: #15191F; color: #15191F;
} }
.more image { .more image {
margin-left: 8rpx; margin-left: 8rpx;
} }
...@@ -587,15 +627,18 @@ ...@@ -587,15 +627,18 @@
background-color: #fff; background-color: #fff;
border-radius: 4rpx; border-radius: 4rpx;
} }
.service text { .service text {
font-size: 34rpx; font-size: 34rpx;
color: #15191F; color: #15191F;
font-weight: 600; font-weight: 600;
} }
.service image { .service image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
} }
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
pages/mine/order/order.js
...@@ -18,7 +18,7 @@ Page({ ...@@ -18,7 +18,7 @@ Page({
'name': '待付款' 'name': '待付款'
}, },
{ {
'value': '1', 'value': '2',
'name': '待使用' 'name': '待使用'
}, },
{ {
...@@ -34,9 +34,16 @@ Page({ ...@@ -34,9 +34,16 @@ Page({
isFinished: false isFinished: false
}, },
onLoad: function (options) { onLoad: function (options) {
App.login({
timeout: 0,
success: (result) => {
this.setOrderType() this.setOrderType()
}, },
})
},
/** /**
* 查询订单列表 * 查询订单列表
* @function * @function
......
pages/pay/order-detail/order-detail.js
...@@ -2,6 +2,8 @@ let App = getApp() ...@@ -2,6 +2,8 @@ let App = getApp()
Page({ Page({
data: { data: {
swiperCurrent: 0,
showCodePopup: false,
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase, resourcesBase: App.globalData.appResourcesBase,
...@@ -15,6 +17,45 @@ Page({ ...@@ -15,6 +17,45 @@ Page({
isFromUse: false, isFromUse: false,
winCode: false, winCode: false,
residuePayTime: "", //剩余支付时间 residuePayTime: "", //剩余支付时间
sealImgs: [{
type: 1,
url: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-2.png'
}],
sealTest: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-2.png',
sealBig: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-1.png',
seals: {
seal1: {
passSrc: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-2.png',
willPaySrc: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-2.png',
},
seal1: {
passSrc: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-2.png',
willPaySrc: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-2.png',
},
seal1: {
passSrc: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-2.png',
willPaySrc: App.globalData.appResourcesBase + 'sealOfOrder/ertongyingdi-2.png',
},
},
codeList: [{
id: 0,
title: '《 阿凡达 》电影票',
img: './image/QRcode.png',
num: '2179 7092 0925'
},
{
id: 1,
title: '《 阿凡达 》电影票',
img: './image/QRcode.png',
num: '2179 7092 0925'
},
{
id: 2,
title: '《 阿凡达 》电影票',
img: './image/QRcode.png',
num: '2179 7092 0925'
}
]
}, },
...@@ -27,11 +68,58 @@ Page({ ...@@ -27,11 +68,58 @@ Page({
fromPage: options.fromPage === 'order' ? 'order' : '', fromPage: options.fromPage === 'order' ? 'order' : '',
isFromUse: options.showCode === 'true' ? true : false, isFromUse: options.showCode === 'true' ? true : false,
}) })
App.login({
console.log(this.data.shopInfo) timeout: 0,
success: (result) => {
this.queryOrderDetail() this.queryOrderDetail()
}, },
})
},
// /api/v1/order/getVolumesByOrderId
// 一键扫码
onFastScan: function (event) {
App.wxRequest({
url: '/api/v1/order/getVolumesByOrderId',
data: {
'orderId': this.data.orderInfo.id
},
success: (response) => {
let funcResponse = response.data
console.log(response, '一键扫码');
let list = response.data
// let funcCodeInfo = {
// 'codeNo': funcResponse.serialNumber,
// 'codeName': funcResponse.name,
// 'codeBase64': funcResponse.qrcode,
// }
this.setData({
showCodePopup: true,
codeList: list
})
}
})
},
swiperChange(e) {
let swiperCurrent = e.detail.current
this.setData({
swiperCurrent
})
},
closeQRcode() {
let showCodePopup = false
this.setData({
showCodePopup,
// swiperCurrent:0
})
},
/** /**
* 订单详情 * 订单详情
* @function * @function
...@@ -59,7 +147,8 @@ Page({ ...@@ -59,7 +147,8 @@ Page({
'tipOrderNo': funcResponse.orderSerialNumber, // 订单编号 'tipOrderNo': funcResponse.orderSerialNumber, // 订单编号
'tipTimeSubmit': funcResponse.createDate, 'tipTimeSubmit': funcResponse.createDate,
'tipTimePay': App.modular.miment(funcResponse.paymentTime).format('YYYY-MM-DD hh:mm:ss'), 'tipTimePay': App.modular.miment(funcResponse.paymentTime).format('YYYY-MM-DD hh:mm:ss'),
'tipIntegral': funcResponse.integral 'tipIntegral': funcResponse.integral,
'officeName': funcResponse.officeName
} }
// 添加订单商品列表 // 添加订单商品列表
...@@ -119,7 +208,7 @@ Page({ ...@@ -119,7 +208,7 @@ Page({
}, },
// 弹出单张二维码
onCouponCode: function (event) { onCouponCode: function (event) {
let funcOrderInfo = event.currentTarget.dataset.item let funcOrderInfo = event.currentTarget.dataset.item
App.wxRequest({ App.wxRequest({
......
pages/pay/order-detail/order-detail.wxml
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</view> </view>
</view> </view>
<view class="state-content state-content-invalid col con-c" wx:if="{{orderInfo.state === 3}}"> <view class="state-content state-content-invalid col con-c" wx:if="{{orderInfo.state === 6}}">
<view class="state-content-title row"> <view class="state-content-title row">
<text>订单已评价</text> <text>订单已评价</text>
</view> </view>
...@@ -56,10 +56,12 @@ ...@@ -56,10 +56,12 @@
<text class="info-content-item-label"></text> <text class="info-content-item-label"></text>
<text class="info-content-item-describe">周一至周日 10:00 - 20:00</text> <text class="info-content-item-describe">周一至周日 10:00 - 20:00</text>
</view> </view>
<image class="seal-shot" src="{{sealTest}}"></image>
</view> </view>
</block> </block>
<!-- 普通商品 --> <!-- 普通商品 -->
<block wx:if="{{orderInfo.commodityType === 2}}"> <block wx:if="{{orderInfo.commodityType === 2}}">
<view class="info-content col con-c"> <view class="info-content col con-c">
<view class="info-content-item row"> <view class="info-content-item row">
...@@ -79,24 +81,28 @@ ...@@ -79,24 +81,28 @@
<text class="info-content-item-tip">18030303030</text> <text class="info-content-item-tip">18030303030</text>
</view> </view>
</view> </view>
<block wx:if="{{orderInfo.state===2}}">
<view class="info-line row con-b align-c"> <view class="info-line row con-b align-c">
<view class="info-line-point-left"></view> <view class="info-line-point-left"></view>
<view class="info-line-line"></view> <view class="info-line-line"></view>
<view class="info-line-point-right"></view> <view class="info-line-point-right"></view>
<image class="seal-long" src="{{sealBig}}"></image>
</view> </view>
<view class="info-code col con-c align-c"> <view class="info-code col con-c align-c">
<text>{{'件餐品可用'}}</text> <text>{{'件餐品可用'}}</text>
<button class="row con-c align-c">一键扫码</button> <button bindtap="onFastScan" class="row con-c align-c">一键扫码</button>
<text>{{'2019.09.30 - 2020.12.30'}}</text> <text>{{'2019.09.30 - 2020.12.30'}}</text>
</view> </view>
</block> </block>
</block>
<!-- 餐品 --> <!-- 餐品 -->
<block wx:if="{{orderInfo.commodityType === 5}}"> <block wx:if="{{orderInfo.commodityType === 5}}">
<view class="info-content col con-c"> <view class="info-content col con-c {{ orderInfo.state!==2?'p-relative':'' }}">
<view class="info-content-item row"> <view class="info-content-item row">
<text class="info-content-item-label">使用门店</text> <text class="info-content-item-label">使用门店</text>
<text class="info-content-item-title">{{shopInfo.name}}</text> <text class="info-content-item-title">{{orderInfo.officeName}}</text>
</view> </view>
<view class="info-content-item row"> <view class="info-content-item row">
<text class="info-content-item-label"></text> <text class="info-content-item-label"></text>
...@@ -104,27 +110,31 @@ ...@@ -104,27 +110,31 @@
</view> </view>
<view class="info-content-item row"> <view class="info-content-item row">
<text class="info-content-item-label">订单信息</text> <text class="info-content-item-label">订单信息</text>
<text class="info-content-item-tip">儿童营地</text> <text class="info-content-item-tip">{{orderInfo.contactName}}</text>
</view> </view>
<view class="info-content-item row"> <view class="info-content-item row">
<text class="info-content-item-label"></text> <text class="info-content-item-label"></text>
<text class="info-content-item-tip">18030303030</text> <text class="info-content-item-tip">{{orderInfo.contactPhone}}</text>
</view> </view>
<image wx:if="{{orderInfo.state!==2}}" class="seal-shot" src="{{sealTest}}"></image>
</view> </view>
<block wx:if="{{orderInfo.state===2}}">
<view class="info-line row con-b align-c"> <view class="info-line row con-b align-c">
<view class="info-line-point-left"></view> <view class="info-line-point-left"></view>
<view class="info-line-line"></view> <view class="info-line-line"></view>
<view class="info-line-point-right"></view> <view class="info-line-point-right"></view>
<image class="seal-long" src="{{sealBig}}"></image>
</view> </view>
<view class="info-code col con-c align-c"> <view class="info-code col con-c align-c">
<text>{{'件餐品可用'}}</text> <text>{{'件餐品可用'}}</text>
<button class="row con-c align-c">一键扫码</button> <button bindtap="onFastScan" class="row con-c align-c">一键扫码</button>
<text>{{'2019.09.30 - 2020.12.30'}}</text> <text>{{'2019.09.30 - 2020.12.30'}}</text>
</view> </view>
</block> </block>
</block>
<!-- 活动 --> <!-- 活动 -->
<block wx:if="{{orderInfo.commodityType === -1}}"> <block wx:if="{{orderInfo.commodityType === -1}}">
<view class="info-content col con-c"> <view class="info-content col con-c">
<view class="info-content-item row"> <view class="info-content-item row">
...@@ -147,21 +157,24 @@ ...@@ -147,21 +157,24 @@
<text class="info-content-item-label"></text> <text class="info-content-item-label"></text>
<text class="info-content-item-tip">18030303030</text> <text class="info-content-item-tip">18030303030</text>
</view> </view>
<block wx:if="{{orderInfo.state===2}}">
<view class="info-line row con-b align-c"> <view class="info-line row con-b align-c">
<view class="info-line-point-left"></view> <view class="info-line-point-left"></view>
<view class="info-line-line"></view> <view class="info-line-line"></view>
<view class="info-line-point-right"></view> <view class="info-line-point-right"></view>
<image class="seal-long" src="{{sealBig}}"></image>
</view> </view>
<view class="info-code col con-c align-c"> <view class="info-code col con-c align-c">
<text>{{'张门票可用'}}</text> <text>{{'张门票可用'}}</text>
<button class="row con-c align-c">一键扫码</button> <button bindtap="onFastScan" class="row con-c align-c">一键扫码</button>
<text>{{'2019.09.30 - 2020.12.30'}}</text> <text>{{'2019.09.30 - 2020.12.30'}}</text>
</view> </view>
</block>
</view> </view>
</block> </block>
<!-- 观影 --> <!-- 观影 -->
<block wx:if="{{orderInfo.commodityType === -2}}"> <block wx:if="{{orderInfo.commodityType === -2}}">
<view class="info-content col con-c"> <view class="info-content col con-c">
<view class="info-content-item row"> <view class="info-content-item row">
...@@ -181,18 +194,21 @@ ...@@ -181,18 +194,21 @@
<text class="info-content-item-tip">18030303030</text> <text class="info-content-item-tip">18030303030</text>
</view> </view>
</view> </view>
<block wx:if="{{orderInfo.state===2}}">
<view class="info-line row con-b align-c"> <view class="info-line row con-b align-c">
<view class="info-line-point-left"></view> <view class="info-line-point-left"></view>
<view class="info-line-line"></view> <view class="info-line-line"></view>
<view class="info-line-point-right"></view> <view class="info-line-point-right"></view>
<image class="seal-long" src="{{sealBig}}"></image>
</view> </view>
<view class="info-code col con-c align-c"> <view class="info-code col con-c align-c">
<text>{{'张电影票可用'}}</text> <text>{{'张电影票可用'}}</text>
<button class="row con-c align-c">一键扫码</button> <button bindtap="onFastScan" class="row con-c align-c">一键扫码</button>
<text>{{'2019.09.30 - 2020.12.30'}}</text> <text>{{'2019.09.30 - 2020.12.30'}}</text>
</view> </view>
</block> </block>
</block>
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
...@@ -203,7 +219,7 @@ ...@@ -203,7 +219,7 @@
<view class="commodity-list"> <view class="commodity-list">
<view class="commodity-shop-info row align-c"> <view class="commodity-shop-info row align-c">
<image src="{{resourcesBase + shopInfo.logo}}"></image> <image src="{{resourcesBase + shopInfo.logo}}"></image>
<text>{{shopInfo.name}}</text> <text>{{orderInfo.officeName}}</text>
</view> </view>
<block wx:for="{{orderInfo.commodity}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{orderInfo.commodity}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-item row align-c"> <view class="commodity-item row align-c">
...@@ -218,7 +234,10 @@ ...@@ -218,7 +234,10 @@
</view> </view>
</view> </view>
<view class="commodity-item-operation" wx:if="{{item.codeId}}"> <view class="commodity-item-operation" wx:if="{{item.codeId}}">
<button class="row con-c align-c" data-item="{{item}}" bindtap="onCouponCode">查看券码</button> <!-- 状态(0已过期1带使用2已使用) -->
<button wx:if="{{item.state==1}}" class="row con-c align-c" data-item="{{item}}" bindtap="onCouponCode">查看券码</button>
<button wx:if="{{item.state==0}}" disabled class="row con-c align-c btn-disabled">已过期</button>
<button wx:if="{{item.state==2}}" disabled class="row con-c align-c btn-disabled">已使用</button>
</view> </view>
</view> </view>
</block> </block>
...@@ -237,14 +256,48 @@ ...@@ -237,14 +256,48 @@
</view> </view>
</view> </view>
<view class="tip-describe col"> <view class="tip-describe col">
<text>{{'订单编号：' + orderInfo.tipOrderNo}}</text> <text>{{'订单编号：' +( orderInfo.tipOrderNo?orderInfo.tipOrderNo:"")}}</text>
<text>{{'下单时间：' + orderInfo.tipTimeSubmit}}</text> <text>{{'下单时间：' + (orderInfo.tipTimeSubmit?orderInfo.tipTimeSubmit:'')}}</text>
<text wx:if="{{orderInfo.state !== 0 && orderInfo.state !== -1}}">{{'付款时间：' + orderInfo.tipTimePay}}</text> <text wx:if="{{orderInfo.state !== 0 && orderInfo.state !== -1}}">{{'付款时间：' + (orderInfo.tipTimePay?orderInfo.tipTimePay:'')}}</text>
<text wx:if="{{orderInfo.state !== 0 && orderInfo.state !== -1}}">{{'获得积分：' + orderInfo.tipIntegral}}</text> <text wx:if="{{orderInfo.state !== 0 && orderInfo.state !== -1}}">{{'获得积分：' + (orderInfo.tipIntegral?orderInfo.tipIntegral:'')}}</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 多张 扫码弹窗 -->
<l-popup show="{{showCodePopup}}" l-class="l-popup-bg">
<view class="scan-code-wrapper col align-c">
<view class="code-header">{{codeList.length}}件商品可用</view>
<view class="code-tips">请将券码出示给门店核销人员</view>
<swiper class="code-main" next-margin="64rpx" bindchange="swiperChange">
<swiper-item wx:for="{{codeList}}" wx:key="id">
<view class="code-item col con-c align-c {{index === swiperCurrent ? 'item-center' : ''}}">
<view class="code-item-title">{{item.name}}</view>
<view class="code-img">
<image mode="widthFix" src="{{'data:image/jpg;base64,'+item.qrcode}}"></image>
</view>
<view class="code-num-wrapper row align-c con-a">
<view class="code-num-title {{codeUsed ? 'code-used' : ''}}">券码{{index+1}}:</view>
<view class="code-num {{codeUsed ? 'code-used' : ''}}">{{item.serialNumber}}</view>
<view class="num-copy" wx:if="{{!codeUsed}}" bindtap="setClipboard" data-index="{{index}}">复制</view>
</view>
<view class="code-used-seal" wx:if="{{codeUsed}}">
<image mode="widthFix" src="./image/used.png"></image>
</view>
</view>
</swiper-item>
</swiper>
<view class="img-num row align-c">
<text class="current-img-num">{{swiperCurrent+1}}</text>
<text class="symbol-img-num"> / </text>
<text class="total-img-num">{{codeList.length}}</text>
</view>
<view class="code-close-btn row con-c align-c" bindtap="closeQRcode">
<image mode="widthFix" src="/image/icon_close.png"></image>
</view>
</view>
</l-popup>
<!-- 二维码弹窗 --> <!-- 二维码弹窗 -->
<view class="code-mask row con-c align-c" wx:if="{{winCode}}"> <view class="code-mask row con-c align-c" wx:if="{{winCode}}">
<view class="code col con-c align-c"> <view class="code col con-c align-c">
......
pages/pay/order-detail/order-detail.wxss
...@@ -45,12 +45,14 @@ ...@@ -45,12 +45,14 @@
} }
.info-content { .info-content {
position: relative;
width: 670rpx; width: 670rpx;
min-height: 206rpx; min-height: 206rpx;
padding: 48rpx 32rpx; padding: 48rpx 32rpx;
background: #F3F4F6; background: #F3F4F6;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.info-content-item { .info-content-item {
...@@ -183,7 +185,7 @@ ...@@ -183,7 +185,7 @@
background: #F3F4F6; background: #F3F4F6;
} }
.commodity-shop-info > image { .commodity-shop-info>image {
max-width: 62rpx; max-width: 62rpx;
max-height: 62rpx; max-height: 62rpx;
margin-right: 16rpx; margin-right: 16rpx;
...@@ -195,7 +197,7 @@ ...@@ -195,7 +197,7 @@
border-bottom: 1px #E2E7EF solid; border-bottom: 1px #E2E7EF solid;
} }
.commodity-item > image { .commodity-item>image {
width: 140rpx; width: 140rpx;
height: 136rpx; height: 136rpx;
margin-right: 24rpx; margin-right: 24rpx;
...@@ -206,7 +208,7 @@ ...@@ -206,7 +208,7 @@
margin-right: 32rpx; margin-right: 32rpx;
} }
.commodity-item-operation > button { .commodity-item-operation>button {
width: 120rpx; width: 120rpx;
height: 56rpx; height: 56rpx;
border-radius: 4px; border-radius: 4px;
...@@ -217,6 +219,10 @@ ...@@ -217,6 +219,10 @@
line-height: 32rpx; line-height: 32rpx;
color: #FFFFFF; color: #FFFFFF;
} }
.commodity-item-operation>button.btn-disabled {
background: #C8E1EC;
color: #FFFFFF;
}
.commodity-list .commodity-item:last-child { .commodity-list .commodity-item:last-child {
border: none; border: none;
...@@ -300,7 +306,7 @@ ...@@ -300,7 +306,7 @@
margin-top: 56rpx; margin-top: 56rpx;
} }
.code-info-qrcode > image { .code-info-qrcode>image {
display: block; display: block;
width: 296rpx; width: 296rpx;
height: 296rpx; height: 296rpx;
...@@ -355,7 +361,463 @@ ...@@ -355,7 +361,463 @@
background: #A9A8A7; background: #A9A8A7;
} }
.code-close > image { .code-close>image {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
/* 印章图 */
.seal-shot {
width: 166rpx;
height: 166rpx;
position: absolute;
right: -30rpx;
bottom: -30rpx;
}
.seal-long {
width: 166rpx;
height: 200rpx;
position: absolute;
right: 0;
bottom: -30rpx;
}
.p-relative {
position: relative;
}
/* 扫码弹窗 */
.order-status {
width: 670rpx;
height: 240rpx;
margin: 64rpx auto 0;
padding-left: 32rpx;
color: #15191F;
background-color: #ECF4F8;
}
.status-text {
font-size: 54rpx;
font-weight: 600;
}
.status-tips {
margin-top: 24rpx;
}
.bgPink {
background-color: #F3E1E1;
}
.ticket-wrapper {
width: 670rpx;
margin: 64rpx auto 0;
}
.ticket-main {
position: relative;
width: 100%;
padding: 48rpx 32rpx 46rpx;
background-color: #F3F4F6;
border-bottom: 1px dashed #E2E7EF;
}
.ticket-left {
width: 152rpx;
display: table-cell;
vertical-align: bottom;
font-size: 26rpx;
color: #959DA9;
}
.ticket-right {
flex: 1;
font-size: 26rpx;
}
.ticket-store {
font-size: 38rpx;
color: #15191F;
font-weight: 600;
}
.ticket-row-time,
.ticket-row-phone {
margin-top: 16rpx;
}
.ticket-time,
.ticket-address,
.ticket-date {
font-size: 30rpx;
line-height: 42rpx;
}
.ticket-info {
margin-top: 48rpx;
}
.seal-wrapper {
position: absolute;
right: 0;
bottom: -32rpx;
width: 166rpx;
height: 200rpx;
}
.seal {
width: 100%;
height: 100%;
}
.circle {
position: absolute;
left: -18rpx;
bottom: -18rpx;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background-color: #fff;
}
.ticket-footer {
padding: 50rpx 32rpx 24rpx;
background-color: #F3F4F6;
}
.ticket-footer-top {
font-size: 34rpx;
color: #15191F;
}
.ticket-footer-middle {
width: 606rpx;
height: 96rpx;
line-height: 96rpx;
margin: 40rpx 0;
color: #fff;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
.ticket-footer-bottom {
font-size: 26rpx;
color: #959DAA;
}
/* 扫码弹窗 */
.scan-code-wrapper {}
.code-header {
height: 70rpx;
color: #fff;
font-size: 30rpx;
text-align: center;
}
.code-tips {
height: 92rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
}
.code-main {
width: 750rpx;
height: 666rpx;
}
.code-item {
position: relative;
width: 526rpx;
height: 666rpx;
background-color: #fff;
border-radius: 4rpx;
}
.item-center {
margin-left: 112rpx;
}
.code-item-title {
color: #15191F;
font-size: 30rpx;
font-weight: 600;
}
.code-img {
width: 296rpx;
height: 296rpx;
margin: 56rpx 0;
}
.code-num-wrapper {
width: 446rpx;
height: 96rpx;
padding: 0 24rpx;
background-color: #F2F3F5;
border-radius: 4rpx;
line-height: 96rpx;
}
.code-num-title {
color: #959DA9;
text-decoration: none !important;
font-size: 26rpx;
}
.code-num {
color: #15191F;
font-size: 30rpx;
}
.code-used {
color: #C2C7CF;
text-decoration: line-through;
}
.num-copy {
color: #5DB5DD;
font-size: 26rpx;
}
.code-used-seal {
position: absolute;
right: -68rpx;
transform: translateY(56rpx);
width: 254rpx;
height: 254rpx;
}
.img-num {
margin-top: 54rpx;
}
.current-img-num {
color: #fff;
font-size: 34rpx;
}
.symbol-img-num,
.total-img-num {
color: #979797;
font-size: 26rpx;
}
.code-close-btn {
width: 80rpx;
height: 80rpx;
margin-top: 35rpx;
background: rgba(254, 252, 249, 0.5);
border-radius: 50%;
}
.code-close-btn image {
width: 60%;
}
.l-popup-bg {
background: rgba(0, 0, 0, .4);
}
.tips-wrapper {
margin: 40rpx 40rpx 0;
}
.notice-wrapper {
width: 100%;
height: 100rpx;
padding: 0 40rpx;
line-height: 100rpx;
}
.notice {
margin-right: 8rpx;
color: #15191F;
font-size: 26rpx;
}
.notice-popup-wrapper {
padding: 56rpx 40rpx 68rpx;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
}
.notice-popup-title {
width: 100%;
height: 90rpx;
}
.notice-content {
max-height: 896rpx;
}
.goods-wrapper {
padding: 32rpx 40rpx 0;
}
.goods-title {
color: #15191F;
font-size: 34rpx;
font-weight: 600;
}
.goods-list {
margin-top: 40rpx;
padding: 0 32rpx 14rpx;
background-color: #F5F6F8;
}
.goods-list-title-wrapper {
width: 100%;
height: 132rpx;
}
.goods-list-title-img {
min-width: 40rpx;
min-height: 54rpx;
max-width: 74rpx;
max-height: 74rpx;
}
.goods-list-title {
margin-left: 16rpx;
color: #15191F;
font-size: 26rpx;
font-weight: 600;
}
.goods-item {
margin-bottom: 22rpx;
padding-bottom: 22rpx;
border-bottom: 1px solid #E2E7EF;
}
.goods-item:last-child {
margin-bottom: 0rpx;
border-bottom: none;
}
.goods-item-img {
width: 140rpx;
height: 136rpx;
}
.goods-item-info {
flex: 1;
padding-left: 24rpx;
}
.goods-item-info-text {
color: #15191F;
font-size: 26rpx;
font-weight: 600;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.goods-item-info-price {
color: #15191F;
font-weight: 600;
}
.price-symbol {
font-size: 22rpx;
}
.price {
font-size: 26rpx;
}
.goods-item-btn {
width: 120rpx;
height: 56rpx;
margin-top: 40rpx;
margin-left: 32rpx;
color: #fff;
font-size: 22rpx;
text-align: center;
line-height: 56rpx;
background-color: #86C5E1;
border-radius: 4rpx;
}
.disabled {
background-color: #C8E1EC;
}
.order-info-wrapper {
position: relative;
width: 670rpx;
margin: 64rpx 40rpx 64rpx;
}
.order-price {
position: absolute;
top: 0;
right: 0;
width: 134rpx;
height: 58rpx;
color: #5DB5DD;
font-size: 34rpx;
font-weight: 600;
}
.order-price-symbol {
font-size: 30rpx;
}
.order-title {
width: 100%;
line-height: 68rpx;
font-size: 34rpx;
font-weight: 600;
}
.order-info {
margin-top: 22rpx;
}
.order-item {
width: 100%;
color: #959DA9;
font-size: 22rpx;
line-height: 42rpx;
}
.footer-btn {
padding: 32rpx 20rpx 0;
border-top: 1px solid #E2E7EF;
}
.delete-btn,
.order-btn {
width: 200rpx;
line-height: 96rpx;
margin-right: 24rpx;
border-radius: 4rpx;
font-size: 30rpx;
font-weight: 600;
text-align: center;
}
.delete-btn {
color: #656E7B;
background-color: #fff;
border: 1px solid #C2C7CF;
}
.order-btn {
color: #fff;
background-color: #86C5E1;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment