Skip to content

严立 / mini-shimao

Go to a project
Commit d5c5049f by wjw
Options

wjw--订单详情增加报名状态

parent be976f6f
Inline Side-by-side
Showing with 222 additions and 149 deletions
pages/pay/order-detail/order-detail.js
// pages/orderDetail/index.js // pages/orderDetail/index.js
Page({ Page({
data: { data: {
showNotice: false, showNotice: false,
isFoodOrder: true, isFoodOrder: true,
orderBtnText: '去评价', orderBtnText: '去评价',
bottom: '0rpx', bottom: '0rpx',
swiperCurrent: 0, swiperCurrent: 0,
showCodePopup: false, showCodePopup: false,
// ticketInfo: { codeUsed: false,
// store: '元养水韵SPA', statusTips: '',
// status: 1, // 0未使用 1待评价 2已过期 3已取消 4已评价 // ticketInfo: {
// time: '周一至周日 10:00 - 20:00', // store: '元养水韵SPA',
// name: '文碧海', // status: 1, // 0未使用 1待评价 2已过期 3已取消 4已评价
// phone: '17612345222', // time: '周一至周日 10:00 - 20:00',
// useNum:'1件商品可用', // name: '文碧海',
// useTime: '2019.09.30 - 2020.12.30', // phone: '17612345222',
// sealImg: './image/seal.png' // useNum:'1件商品可用',
// }, // useTime: '2019.09.30 - 2020.12.30',
// ticketInfo: { // sealImg: './image/seal.png'
// status: 1, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款 // },
// store: '拾光花坊插花分享会', ticketInfo: {
// date: '8月24日', status: 3, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款
// time: '10:00 - 12:30', ticketType: 'food',
// address: '拾光花坊2号厅', store: '拾光花坊插花分享会',
// name: '文碧海', date: '8月24日',
// phone: '17612345222', time: '10:00 - 12:30',
// useNum:'1件商品可用', address: '拾光花坊2号厅',
// useTime: '2019.09.30 - 2020.12.30', name: '文碧海',
// sealImg: './image/seal2.png' phone: '17612345222',
// }, useNum:'1件商品可用',
useTime: '2019.09.30 - 2020.12.30',
sealImg: './image/seal2.png'
},
// ticketInfo: {
// status: 1, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款
// store: '夏日音乐盛典星光之夜主题演唱会',
// date: '8月24日 - 10月30日',
// time: '10:00 - 12:30',
// address: '世茂 · 碧海银湖营销展示中心前100米星光广场',
// name: '文碧海',
// phone: '17612345222',
// useNum:'1件商品可用',
// useTime: '2019.09.30 - 2020.12.30',
// sealImg: './image/seal2.png',
// sealImg2: './image/seal2-1.png'
// },
// ticketInfo: { // ticketInfo: {
// status: 1, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款 // type: 'movie',
// store: '夏日音乐盛典星光之夜主题演唱会', // status: 0, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款
// date: '8月24日 - 10月30日', // store: '阿凡达',
// time: '10:00 - 12:30', // date: '8月24日 10:00 - 12:30',
// address: '世茂 · 碧海银湖营销展示中心前100米星光广场',
// name: '文碧海', // name: '文碧海',
// phone: '17612345222', // phone: '17612345222',
// useNum:'1件商品可用', // useNum:'3张电影票',
// useTime: '2019.09.30 - 2020.12.30', // useTime: '2019.09.30 - 2020.12.30',
// sealImg: './image/seal2.png', // sealImg: './image/seal2.png',
// sealImg2: './image/seal2-1.png' // sealImg2: './image/seal2-1.png'
// }, // },
ticketInfo: {
type: 'movie',
status: 0, // 0未使用 1待评价 2已过期 3已取消 4已评价 5待付款
store: '阿凡达',
date: '8月24日 10:00 - 12:30',
name: '文碧海',
phone: '17612345222',
useNum:'3张电影票',
useTime: '2019.09.30 - 2020.12.30',
sealImg: './image/seal2.png',
sealImg2: './image/seal2-1.png'
},
goodsInfo:{ goodsInfo:{
titleImg: './image/goods_title.png', titleImg: './image/goods_title.png',
title: '海错图展馆', title: '海错图展馆',
list: [ list: [
{ {
id: 0, id: 0,
infoText: '《海错图》展览单人门票', infoText: '拾光花坊国际花艺设计咖啡烘焙基础知识交流分享会',
img: './image/goods_item.png', img: './image/goods_item.png',
price: '30.60', price: '30.60',
used: '查看券码' used: '查看券码'
}, },
{ {
id: 1, id: 1,
infoText: '《海错图》展览单人门票', infoText: '《海错图》展览单人门票',
img: './image/goods_item.png', img: './image/goods_item.png',
price: '30.60', price: '30.60',
used: '已使用' used: '已使用'
}, },
] ]
}, },
// goodsInfo:{ // goodsInfo:{
// titleImg: './image/good2.png', // titleImg: './image/good2.png',
...@@ -102,77 +105,131 @@ Page({ ...@@ -102,77 +105,131 @@ Page({
score: 50 score: 50
}, },
codeList: [ codeList: [
{ {
id: 0, id: 0,
title: '《 阿凡达 》电影票', title: '《 阿凡达 》电影票',
img: './image/QRcode.png', img: './image/QRcode.png',
num: '2179 7092 0925' num: '2179 7092 0925'
}, },
{ {
id: 1, id: 1,
title: '《 阿凡达 》电影票', title: '《 阿凡达 》电影票',
img: './image/QRcode.png', img: './image/QRcode.png',
num: '2179 7092 0925' num: '2179 7092 0925'
}, },
{ {
id: 2, id: 2,
title: '《 阿凡达 》电影票', title: '《 阿凡达 》电影票',
img: './image/QRcode.png', img: './image/QRcode.png',
num: '2179 7092 0925' num: '2179 7092 0925'
} }
] ]
}, },
onShow() { onShow() {
let statusText = '' let statusText = ''
let status = this.data.ticketInfo.status let statusTips = ''
let orderBtnText = this.data.orderBtnText let ticketInfo = this.data.ticketInfo
let bottom = '' let orderBtnText = this.data.orderBtnText
if (status === 0) { let bottom = ''
console.log(0) if (ticketInfo.ticketType === 'active') {
bottom = '-32rpx' switch (ticketInfo.status) {
} else if (status === 1) { case 0:
console.log(1) bottom = '-32rpx'
statusText = '订单待评价', break
orderBtnText = '去评价' case 1:
} else if (status === 2) { statusText = '活动待评价',
statusText = '订单已过期' statusTips = '评价本单获得10积分'
} else if (status === 3) { orderBtnText = '去评价'
statusText = '订单已取消' break
orderBtnText = '再次下单' case 2:
} else if (status === 4) { statusText = '活动已结束'
statusText = '订单已评价' statusTips = '有效期2019.09.30 - 2020.12.30'
} else { break
statusText = '订单待付款' case 3:
orderBtnText = '去支付' statusText = '报名已取消'
} statusTips = '报名后15分钟内未付款，自动取消报名'
this.setData({ orderBtnText = '再次报名'
statusText, break
orderBtnText, case 4:
bottom statusText = '活动已评价'
}) break
}, case 5:
handleQRcode() { statusText = '报名待付款'
let showCodePopup = true statusTips = '请在14:59内付款，否则讲自动取消订单'
this.setData({ orderBtnText = '去支付'
showCodePopup break
}) }
}, } else {
closeQRcode() { switch (ticketInfo.status) {
let showCodePopup = false case 0:
this.setData({ bottom = '-32rpx'
showCodePopup break
}) case 1:
}, statusText = '订单待评价',
handleNotice() { orderBtnText = '去评价'
let showNotice = true break
this.setData({ case 2:
showNotice statusText = '订单已过期'
}) statusTips = '有效期2019.09.30 - 2020.12.30'
}, break
swiperChange(e) { case 3:
let swiperCurrent = e.detail.current statusText = '订单已取消'
this.setData({ statusTips = '下单后15分钟内未付款，自动取消订单'
swiperCurrent orderBtnText = '再次下单'
break
case 4:
statusText = '订单已评价'
break
case 5:
statusText = '订单待付款'
statusTips = '请在14:59内付款，否则讲自动取消订单'
orderBtnText = '去支付'
break
}
}
this.setData({
statusText,
orderBtnText,
statusTips,
bottom
})
},
handleQRcode() {
let showCodePopup = true
this.setData({
showCodePopup
})
},
closeQRcode() {
let showCodePopup = false
this.setData({
showCodePopup
})
},
handleNotice() {
let showNotice = true
this.setData({
showNotice
})
},
swiperChange(e) {
let swiperCurrent = e.detail.current
this.setData({
swiperCurrent
})
},
setClipboard(e) {
const index = e.currentTarget.dataset.index
const data = this.data.codeList[index].num
wx.setClipboardData({
data: data,
success (res) {
wx.getClipboardData({
success (res) {
console.log(res.data) // data
}
})
}
}) })
} }
}) })
\ No newline at end of file
pages/pay/order-detail/order-detail.wxml
<view class="order-status col con-c {{ticketInfo.status === 1 ? 'bgPink' : ''}}" wx:if="{{ticketInfo.status !== 0}}"> <view class="order-status col con-c {{ticketInfo.status === 1 ? 'bgPink' : ''}}" wx:if="{{ticketInfo.status !== 0}}">
<view class="status-text">{{statusText}}</view> <view class="status-text">{{statusText}}</view>
<view class="status-tips" wx:if="{{ticketInfo.status === 2}}">有效期2019.09.30 - 2020.12.30</view> <view class="status-tips" wx:if="{{statusTips}}">{{statusTips}}</view>
<view class="status-tips" wx:elif="{{ticketInfo.status === 3}}">下单后15分钟内未付款，自动取消订单</view>
<view class="status-tips" wx:elif="{{ticketInfo.status === 5}}">请在14:59内付款，否则讲自动取消订单</view>
</view> </view>
<view class="ticket-wrapper"> <view class="ticket-wrapper">
...@@ -66,10 +64,13 @@ ...@@ -66,10 +64,13 @@
<view class="code-img"> <view class="code-img">
<image mode="widthFix" src="{{item.img}}"></image> <image mode="widthFix" src="{{item.img}}"></image>
</view> </view>
<view class="code-num-wrapper row align-c con-b"> <view class="code-num-wrapper row align-c con-a">
<view class="code-num-title">券码{{index+1}}:</view> <view class="code-num-title {{codeUsed ? 'code-used' : ''}}">券码{{index+1}}:</view>
<view class="code-num">{{item.num}}</view> <view class="code-num {{codeUsed ? 'code-used' : ''}}">{{item.num}}</view>
<view class="num-copy">复制</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>
</view> </view>
</swiper-item> </swiper-item>
...@@ -118,7 +119,7 @@ ...@@ -118,7 +119,7 @@
<view class="goods-item-img"> <view class="goods-item-img">
<image mode="widthFix" src="{{item.img}}"></image> <image mode="widthFix" src="{{item.img}}"></image>
</view> </view>
<view class="goods-item-info"> <view class="goods-item-info col con-a">
<view class="goods-item-info-text">{{item.infoText}}</view> <view class="goods-item-info-text">{{item.infoText}}</view>
<view class="goods-item-info-price"> <view class="goods-item-info-price">
<text class="price-symbol">￥</text> <text class="price-symbol">￥</text>
...@@ -126,7 +127,6 @@ ...@@ -126,7 +127,6 @@
</view> </view>
</view> </view>
<view class="goods-item-btn {{item.used === '已使用'?'disabled':''}}" bindtap="handleQRcode">{{item.used}}</view> <view class="goods-item-btn {{item.used === '已使用'?'disabled':''}}" bindtap="handleQRcode">{{item.used}}</view>
<!-- <view class="goods-item-btn"></view> -->
</view> </view>
</view> </view>
</view> </view>
......
pages/pay/order-detail/order-detail.wxss
...@@ -122,6 +122,7 @@ ...@@ -122,6 +122,7 @@
height: 666rpx; height: 666rpx;
} }
.code-item { .code-item {
position: relative;
width: 526rpx; width: 526rpx;
height: 666rpx; height: 666rpx;
background-color: #fff; background-color: #fff;
...@@ -146,19 +147,32 @@ ...@@ -146,19 +147,32 @@
padding: 0 24rpx; padding: 0 24rpx;
background-color: #F2F3F5; background-color: #F2F3F5;
border-radius: 4rpx; border-radius: 4rpx;
line-height: 96rpx;
} }
.code-num-title { .code-num-title {
color: #959DA9; color: #959DA9;
text-decoration: none !important;
font-size: 26rpx; font-size: 26rpx;
} }
.code-num { .code-num {
color: #15191F; color: #15191F;
font-size: 30rpx; font-size: 30rpx;
} }
.code-used {
color: #C2C7CF;
text-decoration: line-through;
}
.num-copy { .num-copy {
color: #5DB5DD; color: #5DB5DD;
font-size: 26rpx; font-size: 26rpx;
} }
.code-used-seal {
position: absolute;
right: -68rpx;
transform: translateY(56rpx);
width: 254rpx;
height: 254rpx;
}
.img-num { .img-num {
margin-top: 54rpx; margin-top: 54rpx;
} }
...@@ -219,6 +233,7 @@ ...@@ -219,6 +233,7 @@
.goods-title { .goods-title {
color: #15191F; color: #15191F;
font-size: 34rpx; font-size: 34rpx;
font-weight: 600;
} }
.goods-list { .goods-list {
margin-top: 40rpx; margin-top: 40rpx;
...@@ -256,7 +271,7 @@ ...@@ -256,7 +271,7 @@
} }
.goods-item-info { .goods-item-info {
flex: 1; flex: 1;
padding: 0 32rpx 0 24rpx; padding-left: 24rpx;
} }
.goods-item-info-text { .goods-item-info-text {
color: #15191F; color: #15191F;
...@@ -268,7 +283,6 @@ ...@@ -268,7 +283,6 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.goods-item-info-price { .goods-item-info-price {
margin-top: 18rpx;
color: #15191F; color: #15191F;
font-weight: 600; font-weight: 600;
} }
...@@ -279,9 +293,10 @@ ...@@ -279,9 +293,10 @@
font-size: 26rpx; font-size: 26rpx;
} }
.goods-item-btn { .goods-item-btn {
margin-top: 40rpx;
width: 120rpx; width: 120rpx;
height: 56rpx; height: 56rpx;
margin-top: 40rpx;
margin-left: 32rpx;
color: #fff; color: #fff;
font-size: 22rpx; font-size: 22rpx;
text-align: center; text-align: center;
......
project.config.json
...@@ -119,8 +119,8 @@ ...@@ -119,8 +119,8 @@
}, },
{ {
"id": 7, "id": 7,
"name": "pages/pay/order-input/order-input", "name": "pages/pay/order-detail/order-detail",
"pathName": "pages/pay/order-input/order-input", "pathName": "pages/pay/order-detail/order-detail",
"query": "", "query": "",
"scene": null "scene": null
} }
......
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