6 changed files with 511 additions and 72 deletions
@ -0,0 +1,230 @@ |
|||
<template> |
|||
<view style="display: flex;flex-direction: column;height: 100vh; background: #F7F7F7;overflow-y: auto;"> |
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<view v-if="data.payStatus=='2'" |
|||
style="display: flex;flex-direction: row;align-items: center;width: 100%;justify-content: center;margin-top: 10px;padding: 10px;"> |
|||
<text style="font-size: 14px;">还剩</text> |
|||
<text |
|||
style="font-weight: 600;color: #FF5006;font-size: 18px;margin-left: 2px;margin-right: 2px;">{{page.countdown}}</text> |
|||
<text style="font-size: 14px;">订单自动取消</text> |
|||
|
|||
</view> |
|||
|
|||
<view |
|||
style="background: #fff;border-radius: 10px;display: flex;flex-direction: column;padding: 15px;margin-top: 15px; margin-left: 10px;margin-right: 10px;"> |
|||
|
|||
<view v-for="(item,index) in data.ordOrderDetails" |
|||
style=" display: flex;flex-direction: row;align-items: center; margin-bottom: 15px;"> |
|||
|
|||
<image :src="item.picUrl" style="width: 70px;height: 70px;border-radius: 15px;" mode="scaleToFill"> |
|||
</image> |
|||
|
|||
<view style="margin-left: 10px;display: flex;flex-direction: column;flex: 1;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;"> |
|||
|
|||
<text style="flex: 1;">{{item.goodsName}}</text> |
|||
<text>￥{{item.pricePart}}</text> |
|||
</view> |
|||
|
|||
<text style="margin-top: 10px;font-size: 12px;color: #999;">{{item.remarks}}</text> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column; |
|||
border-top: 1px solid #EFEFEF;padding-top: 15px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;"> |
|||
<text>商品总额</text> |
|||
<text>￥{{data.meet}}</text> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 15px;"> |
|||
<text>附加费</text> |
|||
<text>￥{{data.surcharge}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center; |
|||
border-top: 1px solid #EFEFEF;padding-top: 15px;margin-top: 15px;"> |
|||
|
|||
<view style="flex: 1;"> |
|||
</view> |
|||
|
|||
<view v-if="data.payStatus=='4'" |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;"> |
|||
<text>实付</text> |
|||
<text style="font-size: 16px;font-weight: 600;">￥{{data.totalTee}}</text> |
|||
</view> |
|||
|
|||
<view v-if="data.payStatus=='2'" |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;"> |
|||
<text style="color: #FF5006;margin-right: 3px;font-size: 14px;">需付款</text> |
|||
<text style="color: #FF5006;font-size: 16px;font-weight: 600;">￥{{data.totalTee}}</text> |
|||
</view> |
|||
|
|||
<view v-if="data.payStatus=='3'" |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;"> |
|||
<text style="color: #666;margin-right: 3px;font-size: 14px;">需付款</text> |
|||
<text style="color: #666;font-size: 16px;font-weight: 600;">￥{{data.totalTee}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view style="background: #fff;border-radius: 10px;margin-top: 12px;margin-left: 10px;margin-right: 10px; |
|||
display: flex;flex-direction: column;padding: 12px 16px;margin-bottom: 150px;"> |
|||
|
|||
<text style="font-size: 16px;">订单信息</text> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 15px; "> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
|
|||
<text style="font-size: 14px;color: #999;">订单编号</text> |
|||
<text |
|||
style="margin-left: 15px;font-size: 14px;color: #333;word-break: break-all;">{{data.outTradeNo}}</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
|
|||
<text style="font-size: 14px;color: #999;">下单时间</text> |
|||
<text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.createTime}}</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
|
|||
<text style="font-size: 14px;color: #999;">支付方式</text> |
|||
<text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.payType}}</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;" |
|||
v-if="data.payStatus=='4'"> |
|||
|
|||
<text style="font-size: 14px;color: #999;">付款时间</text> |
|||
<text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.payTime}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view v-if="data.payStatus=='2'" style="width: 100%; background-color: #fff;height: 15vw;position: fixed;bottom: 0;overflow:hidden; |
|||
display: flex;flex-direction: row;align-items: center;box-sizing: border-box;"> |
|||
|
|||
<view style="flex: 1;"></view> |
|||
<text style="font-size: 16px;color: #fff; height: 5vw; background-color: #FF9900;margin-right: 25px; |
|||
padding: 5px 20px;border-radius: 20px;" @click="continuePy">继续付款</text> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</loading-state> |
|||
|
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: "", |
|||
countdown: "" |
|||
}, |
|||
data: { |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
this.page.sid = options.sid |
|||
this.request() |
|||
}, |
|||
methods: { |
|||
// 获取数据 |
|||
|
|||
request() { |
|||
let _this = this |
|||
|
|||
_this.$api.orderDetails(_this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
_this.countTime() // 倒计时 |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
continuePy() { |
|||
|
|||
var list = this.page.countdown.split(":") |
|||
var mm = list[0] // 获取分钟数 |
|||
var ss = list[1] // 获取秒数 |
|||
|
|||
var totalSeconds = Number(mm)*60+ Number(ss) |
|||
|
|||
this.data.result.remainder = totalSeconds |
|||
// console.log("==============",this.data.result.remainder); |
|||
this.$pay(this.data.result) |
|||
}, |
|||
countTime() { |
|||
var that = this; |
|||
var date = new Date(); |
|||
var now = date.getTime(); |
|||
var endDate = new Date(that.data.endTime); //设置截止时间 |
|||
var end = endDate.getTime(); |
|||
var leftTime = end - now; //时间差 |
|||
var d, h, m, s, ms; |
|||
if (leftTime >= 0) { |
|||
d = Math.floor(leftTime / 1000 / 60 / 60 / 24); |
|||
h = Math.floor(leftTime / 1000 / 60 / 60 % 24); |
|||
m = Math.floor(leftTime / 1000 / 60 % 60); |
|||
s = Math.floor(leftTime / 1000 % 60); |
|||
ms = Math.floor(leftTime % 1000); |
|||
ms = ms < 100 ? "0" + ms : ms |
|||
s = s < 10 ? "0" + s : s |
|||
m = m < 10 ? "0" + m : m |
|||
h = h < 10 ? "0" + h : h |
|||
that.page.countdown = m + ":" + s, |
|||
//递归每秒调用countTime方法，显示动态时间效果 |
|||
setTimeout(that.countTime, 1000); |
|||
} else { |
|||
that.page.countdown = '00:00:00' |
|||
that.data.payStatus = '3' |
|||
that.changePayState() |
|||
} |
|||
|
|||
}, |
|||
|
|||
changePayState() { |
|||
let _this = this |
|||
|
|||
_this.$api.changePayState(_this.page.sid).then((resp) => { |
|||
|
|||
}).catch(e => { |
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,137 @@ |
|||
<template> |
|||
<view style="display: flex;flex-direction: column;height: 100vh;background: #f7f7f7; |
|||
padding: 10px;"> |
|||
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
|||
<view style="display: flex;flex-direction: row;align-items: center; |
|||
padding-left: 10px;padding-bottom: 10px; "> |
|||
|
|||
<text class="label" :class="{'label2':selectIndex===0}" @click="tab(0)">全部</text> |
|||
<text class="label" :class="{'label2':selectIndex===1}" @click="tab(1)">待付款</text> |
|||
<text class="label" :class="{'label2':selectIndex===2}" @click="tab(2)">已付款</text> |
|||
<text class="label" :class="{'label2':selectIndex===3}" @click="tab(3)">已失效</text> |
|||
</view> |
|||
<z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :use-page-scroll='false'> |
|||
|
|||
<view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;background: #fff;margin-top: 10px; |
|||
border-radius: 10px;padding: 15px;box-sizing: border-box;" @click="itemClick(item)"> |
|||
|
|||
<view style="display: flex;flex-direction: row;justify-content: space-between;"> |
|||
|
|||
<text style="font-size: 16px;color: #333;">{{item.createTime}}</text> |
|||
<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;"> |
|||
<text v-if="item.payStatus=='2'" style="font-size: 14px;color: #FF9900;">待付款</text> |
|||
<text v-if="item.payStatus=='4'" style="font-size: 14px;color: #666;">已完成</text> |
|||
<text v-if="item.payStatus=='3'" style="font-size: 14px;color: #999;">已失效</text> |
|||
<image src="../../static/more.png" style="width: 15px;height: 15px;"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex;margin-top: 15px;" |
|||
bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
<view v-for="(children,pos) in item.picUrls" style="display: inline-block;"> |
|||
|
|||
<image :src="children" style="margin-right: 10px; width: 70px;height: 70px;border-radius: 10px;" |
|||
mode="scaleToFill"></image> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 15px;"> |
|||
|
|||
<view style="flex: 1;"></view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;"> |
|||
<text style="font-size: 14px;color: #333;margin-right: 20px;">共{{item.count}}种商品</text> |
|||
<text style="font-size: 12px;color: #333;margin-right: 5px;">实付</text> |
|||
<text |
|||
style="font-size: 18px;color: #333;font-weight: 6000;font-family: sans-serif;">￥{{item.totalTee}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</z-paging> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
selectIndex: 0, |
|||
orderState: "", |
|||
styleObject: { |
|||
'padding-bottom': '10px', |
|||
'background': '#f7f7f7', |
|||
'margin-top': '40px' |
|||
}, |
|||
data: [ |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
tab(index) { |
|||
this.selectIndex = index |
|||
if (index == 0) |
|||
this.orderState = "" |
|||
if (index == 1) |
|||
this.orderState = "2" |
|||
if (index == 2) |
|||
this.orderState = "4" |
|||
if (index == 3) |
|||
this.orderState = "3" |
|||
|
|||
this.$refs.paging.reload() |
|||
}, |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
|
|||
_this.$api.ordersList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid, |
|||
"state": _this.orderState, //2 待付款 3已取消 4支付成功 |
|||
|
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
_this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
itemClick(item){ |
|||
|
|||
uni.navigateTo({ |
|||
url:"/pages/records/orderDetail?sid="+item.sid |
|||
}) |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.label { |
|||
color: #666; |
|||
font-size: 14px; |
|||
margin-right: 30px; |
|||
} |
|||
|
|||
.label2 { |
|||
color: #FF9900; |
|||
font-size: 14px; |
|||
border-bottom: 1px #FF9900 solid; |
|||
padding-bottom: 5px; |
|||
margin-right: 30px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue