product_platform/yxt-yythmall-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

11111111111

Browse Source
This commit is contained in:
guoxing
2024-01-23 15:52:21 +08:00
parent 2600e17338
commit 8bdfcdcb38
6 changed files with 511 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
pages/records/orderDetail.vue Normal file
View File

@@ -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>

137
pages/records/orderRecords.vue Normal file
View File

@@ -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>