You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
350 lines
15 KiB
350 lines
15 KiB
<template>
|
|
<view style="display: flex;flex-direction: column;height: 100vh; background: #F7F7F7;">
|
|
<loading-state ref="pageView" @request="request">
|
|
<view style="height: 100vh;overflow: hidden;overflow-y: auto;">
|
|
<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" @click="itemClick(item.goodsSid)"
|
|
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;font-weight: 600;font-family: sans-serif;font-size: 14px;"
|
|
@click="itemClick(item.goodsSid)">{{item.goodsName}}</text>
|
|
<text
|
|
style="font-weight: 600;font-family: sans-serif;font-size: 14px;">￥{{item.priceUnit}}</text>
|
|
</view>
|
|
|
|
<!-- <text style="margin-top: 10px;font-size: 12px;color: #999;">{{item.remarks}}</text> -->
|
|
|
|
<view style="margin-top: 8px;display: flex;flex-direction: column;">
|
|
|
|
<view style="display: flex;flex-direction: row;align-items: center;">
|
|
<!-- <text style="border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px;
|
|
font-size: 10px;color: #EE752F;">{{item.priceUnit}}元/{{item.unitName}}</text> -->
|
|
<text
|
|
style="border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px;
|
|
font-size: 10px;color: #EE752F; margin-right: 10px; ">{{item.numofPart}}{{item.specificationUnit}}/{{item.unitName}}</text>
|
|
</view>
|
|
|
|
<text
|
|
style="margin-top: 12px;font-size: 12px;color: #999;">份数：{{item.partNumber}}</text>
|
|
|
|
</view>
|
|
|
|
</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.totalTee}}</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;color: #FF5006;">￥{{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: 100px;">
|
|
|
|
<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>
|
|
</loading-state>
|
|
|
|
<view v-if="data.payStatus=='2'||data.payStatus=='4'"
|
|
style="position: absolute; bottom: 0px; display: flex;flex-direction: row;width: 100%;align-items: center;
|
|
box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 8vh;border-top: 1px solid #EFEFEF;">
|
|
|
|
<view style="flex: 1;"></view>
|
|
|
|
<text style="font-size: 16px;color: #fff; background-color: #FF9900; height: 5vh;line-height: 5vh;
|
|
padding: 0px 20px;border-radius: 20px;margin-right: 10px;" @click="continuePy"
|
|
v-if="data.payStatus=='2'">继续付款</text>
|
|
|
|
|
|
<view style="display: flex;flex-direction: row;align-items: center;" v-if="data.payStatus=='4'">
|
|
<text style="font-size: 16px;color: #fff; background-color: #FF9900; height: 5vh;line-height: 5vh;
|
|
padding: 0px 20px;border-radius: 20px;margin-right: 10px;" @click="refund">申请退款</text>
|
|
|
|
<text style="font-size: 16px;color: #666; border: 1px #D3D3D3 solid; height: 5vh;line-height: 5vh;
|
|
padding: 0px 20px;border-radius: 20px;" @click="makeInvoice(data.sid)" v-if="data.invoiceStatus=='0'">开具发票</text>
|
|
<text style="font-size: 16px;color: #666; border: 1px #D3D3D3 solid; height: 5vh;line-height: 5vh;
|
|
padding: 0px 20px;border-radius: 20px;" v-if="data.invoiceStatus=='1'">发票开具中</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view v-if="data.payStatus=='4'&&data.invoiceStatus=='3'"
|
|
style="position: absolute; bottom: 0px; display: flex;flex-direction: row;width: 100%;align-items: center;
|
|
box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 8vh;border-top: 1px solid #EFEFEF;">
|
|
|
|
<view style="flex: 1;"></view>
|
|
<view style="display: flex;flex-direction: row;align-items: center;">
|
|
<text style="font-size: 16px;color: #666; border: 1px #D3D3D3 solid; height: 5vh;line-height: 5vh;
|
|
padding: 0px 20px;border-radius: 20px;" @click="makeInvoice(data.sid)">重新开票</text>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- <view v-if="data.payStatus=='2'"
|
|
style="position: absolute; bottom: 0px; display: flex;flex-direction: row;width: 100%;align-items: center;
|
|
box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 8vh;border-top: 1px solid #EFEFEF;">
|
|
|
|
<view style="flex: 1;"></view>
|
|
<text style="font-size: 16px;color: #fff; background-color: #FF9900; height: 5vh;line-height: 5vh;
|
|
padding: 0px 20px;border-radius: 20px;" @click="continuePy">继续付款</text>
|
|
|
|
</view -->
|
|
|
|
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
page: {
|
|
sid: "",
|
|
countdown: "",
|
|
nowDate: ""
|
|
},
|
|
data: {}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
|
|
this.page.sid = options.sid
|
|
|
|
},
|
|
onShow() {
|
|
this.request()
|
|
},
|
|
methods: {
|
|
itemClick(goodsSid) {
|
|
uni.navigateTo({
|
|
url: '/pages/good/goodsDetail?sid=' + goodsSid
|
|
})
|
|
},
|
|
// 获取数据
|
|
request() {
|
|
|
|
let _this = this
|
|
|
|
_this.$api.orderDetails(_this.page.sid).then((resp) => {
|
|
_this.data = resp
|
|
_this.page.nowDate = resp.nowDate
|
|
|
|
if (_this.data.payStatus == 2)
|
|
_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 now = that.data.nowDate;
|
|
// console.log("now", that.page.nowDate);
|
|
var endDate = new Date(that.data.endTime); //设置截止时间
|
|
var end = endDate.getTime();
|
|
// console.log("end", end);
|
|
var leftTime = end - that.page.nowDate; //时间差
|
|
var d, h, m, s, ms;
|
|
// console.log("leftTime", leftTime);
|
|
|
|
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方法，显示动态时间效果
|
|
that.page.nowDate = that.page.nowDate + 1000
|
|
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 => {
|
|
|
|
})
|
|
},
|
|
makeInvoice(sid) {
|
|
// let _this = this
|
|
|
|
// var params = {
|
|
// outTradeNo: _this.data.outTradeNo,
|
|
// totalTee: _this.data.totalTee,
|
|
// // phone: getApp().globalData.mobile,
|
|
// }
|
|
|
|
// console.log("makeInvoice", params);
|
|
|
|
// _this.$api.wxElectronicInvoice(params).then((resp) => {
|
|
|
|
// console.log("wxElectronicInvoice", resp);
|
|
|
|
// wx.navigateToMiniProgram({
|
|
// appId: resp.appid,
|
|
// path: resp.auth_url,
|
|
// success(res) {
|
|
// console.log('navigateToMiniProgram success:', res)
|
|
// },
|
|
// fail(error) {
|
|
// console.log('navigateToMiniProgram fail:', error)
|
|
// },
|
|
// complete(res) {
|
|
// console.log('navigateToMiniProgram complete:', res)
|
|
// }
|
|
// })
|
|
|
|
// }).catch(e => {
|
|
|
|
// })
|
|
|
|
|
|
uni.navigateTo({
|
|
url: "/pages/me/makeInvoice?sid=" + sid
|
|
})
|
|
|
|
},
|
|
|
|
refund() {
|
|
|
|
uni.navigateTo({
|
|
url: "/pages/me/applyRefund?sid=" + this.page.sid
|
|
})
|
|
|
|
// uni.navigateTo({
|
|
// url: "/pages/me/refundDetail?sid=" + this.page.sid
|
|
// })
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|