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.
514 lines
14 KiB
514 lines
14 KiB
<template>
|
|
<view class="backcor9 pd-main pdb50">
|
|
<!-- 已送达 -->
|
|
<view v-if="status == 1" class="order-de-title pd-main">
|
|
<view class="font22 fcor333">
|
|
已送达
|
|
</view>
|
|
<view class="font16 fcor666 mart10">
|
|
感谢您的支持，如有问题可以联系我们
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 待支付 -->
|
|
<view v-if="status == 0" class="order-de-title pd-main">
|
|
<view class="font22 fcor333">
|
|
待支付
|
|
</view>
|
|
<view class="font16 fcor666 mart10">
|
|
<text class="fcorred paddtright10" >{{countdownm}}:{{countdowns}}</text>后订单自动取消
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="status == 2" class="order-de-title pd-main">
|
|
<view class="font22 fcor333">
|
|
订单已取消
|
|
</view>
|
|
<view class="font16 fcor666 mart10">
|
|
您的订单已取消
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 待支付时支持修改地址 -->
|
|
<view v-if="status == 0" class="marb20 pd-main backcolorfff border-8r">
|
|
<view class="flex-center-sp pd-tb10">
|
|
<view class="">
|
|
<view class="fontwig6 font18">金科才能收到你看得出纳思达</view>
|
|
<view class="mart5 fcor666">利<text class="paddleft10">15652365478</text></view>
|
|
</view>
|
|
<view class="align-fs edit-msg " @click="editOrder">
|
|
修改
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="marb20 pd-main backcolorfff border-8r">
|
|
<!-- 商品信息 -->
|
|
<view v-for="(item,index) in [1,2,3]" :key="index" class="marb10 flex-center-sp">
|
|
<view class="">
|
|
<image class="st-img" :src="images[0]" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="flex-1 flex-center-sp">
|
|
<view class="width60 paddleft10">
|
|
<view class="marb10">单只甜玉米 单只/250-300g</view>
|
|
<view class="marb5">单价: ¥ 3.99/个</view>
|
|
<view class="fcor666">数量: 1个</view>
|
|
</view>
|
|
<view class="font16 tr align-fs">
|
|
<view class="fontwig6">实付: ¥ 3.42</view>
|
|
<view class="fcor666">¥ 3.99</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 当商品超过3个的时候 -->
|
|
<view v-if="!moreThanThree" class="goodsMore flex-center" @click="checkMore">
|
|
还有{{3}}种商品<text class="icon-ymt to-down"></text>
|
|
</view>
|
|
<block v-if="moreThanThree">
|
|
<view v-for="(item,index) in [1,2,3]" :key="index" class="marb10 flex-center-sp">
|
|
<view class="">
|
|
<image class="st-img" :src="images[0]" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="flex-1 flex-center-sp">
|
|
<view class="width60 paddleft10">
|
|
<view class="marb10">单只甜玉米 单只/250-300g</view>
|
|
<view class="marb5">单价: ¥ 3.99/个</view>
|
|
<view class="fcor666">数量: 1个</view>
|
|
</view>
|
|
<view class="font16 tr align-fs">
|
|
<view class="fontwig6">实付: ¥ 3.42</view>
|
|
<view class="fcor666">¥ 3.99</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view v-if="moreThanThree" class="goodsMore flex-center" @click="checkMore">
|
|
共{{6}}种商品<text class="icon-ymt to-up"></text>
|
|
</view>
|
|
|
|
<!-- 商品金额 -->
|
|
<view class="flex-center-sp pd-tb10">
|
|
<view class="">商品金额</view>
|
|
<view class="fontwig6"><text class="paddtright5">¥</text>69.89</view>
|
|
</view>
|
|
<!-- 优惠券 -->
|
|
<view class="flex-center-sp pd-tb10">
|
|
<view class="">优惠券</view>
|
|
<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>10</view>
|
|
</view>
|
|
|
|
<!-- 运费 -->
|
|
<view class="flex-center-sp pd-tb10">
|
|
<view class="">运费
|
|
<!-- <text class="icon-ymt question fcor666 font16 paddleft5"></text> -->
|
|
</view>
|
|
<view class="fontwig6">
|
|
<text class="fcor666 td-lt">¥6</text>
|
|
<text class="paddleft10"><text class="paddtright5">¥</text>0</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 积分 -->
|
|
<view class="flex-center-sp pd-tb10">
|
|
<view class="">积分</view>
|
|
<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>2</view>
|
|
</view>
|
|
<!--支付优惠 -->
|
|
<view class="flex-center-sp pd-tb10">
|
|
<view class="">支付优惠</view>
|
|
<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>0.01</view>
|
|
</view>
|
|
<!-- 价格总额 -->
|
|
<view class="tr fontwig6 pd-tb10">
|
|
<text class="paddtright10">已优惠<text class="fcorred">¥ 12.01</text></text>
|
|
<text>实付¥<text class="font20 paddleft5">58.88</text></text>
|
|
</view>
|
|
|
|
<!-- 待支付时开始 -->
|
|
<!-- 订单编号 -->
|
|
<block v-if="status == 0">
|
|
<view class="flex-center-sp pd-tb10 bordert">
|
|
<view class="fcor666">订单编号</view>
|
|
<view class=" flex-center-sp">
|
|
<text class="tr flex-1">1209 2418 0001 0039</text>
|
|
<text class=" margle10 font12 copy-num fcor666" @click="copyText('1209 2418 0001 0039')">复制</text>
|
|
</view>
|
|
</view>
|
|
<!-- 下单时间 -->
|
|
<view class="flex-center-sp pd-tb10 ">
|
|
<view class="fcor666">下单时间</view>
|
|
<view class=" ">
|
|
2023-03-04 17:05:27
|
|
</view>
|
|
</view>
|
|
<!-- 待支付时结束 -->
|
|
</block>
|
|
</view>
|
|
|
|
<!-- 物流信息 -->
|
|
<view v-if="status == 1 ||status == 2" class=" pd-main backcolorfff border-8r">
|
|
<!-- 预约时间 -->
|
|
<!-- <view class="flex-center-sp pd-tb10">
|
|
<view class="fcor666">预约时间</view>
|
|
<view class=" ">尽快送达(预计18:10前)</view>
|
|
</view> -->
|
|
<!-- 收货信息 -->
|
|
<view class="flex-center-sp pd-tb10">
|
|
<view class="fcor666 align-fs">收货信息</view>
|
|
<view class=" tr">
|
|
<view class=" ">重庆市出厂时都曾经常吃的后面2楼</view>
|
|
<view class=" ">陈女士 175896546526</view>
|
|
</view>
|
|
</view>
|
|
<!-- 物流信息 -->
|
|
<view class="flex-center-sp pd-tb10 ">
|
|
<view class="fcor666">物流信息</view>
|
|
<view class=" " @click="checkWuliu">
|
|
查看物流信息<text class="icon-ymt to-right fcor666 font16 paddleft5"></text>
|
|
</view>
|
|
</view>
|
|
<!-- 订单编号 -->
|
|
<view class="flex-center-sp pd-tb10 bordert">
|
|
<view class="fcor666">订单编号</view>
|
|
<view class=" flex-center-sp">
|
|
<text class="tr flex-1">{{orderID}}</text>
|
|
<text class=" margle10 font12 copy-num fcor666"
|
|
@click="copyText(orderID)"
|
|
>复制</text>
|
|
</view>
|
|
</view>
|
|
<!-- 下单时间 -->
|
|
<view class="flex-center-sp pd-tb10 ">
|
|
<view class="fcor666">下单时间</view>
|
|
<view class=" ">
|
|
2023-03-04 17:05:27
|
|
</view>
|
|
</view>
|
|
<!-- 支付方式 -->
|
|
<view class="flex-center-sp pd-tb10 ">
|
|
<view class="fcor666">支付方式</view>
|
|
<view class=" ">
|
|
微信支付
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 待支付时底部的按钮 -->
|
|
<view v-if="status == 0" class="toPay font14 backcolorfff">
|
|
<view class="btn" @click="cancelOrder">取消订单</view>
|
|
<view class="btn" @click="editOrder">修改订单</view>
|
|
<view class="btn bgred" @click="payOrder">立即支付{{countdownm}}:{{countdowns}}</view>
|
|
</view>
|
|
<!-- 订单取消时 -->
|
|
<view v-if="status == 2" class="toPay font14 backcolorfff">
|
|
<view class="btn oneMore" @click="oneMoreOrder">再来一单</view>
|
|
<view class="btn" @click="deleteOrder">删除订单</view>
|
|
|
|
</view>
|
|
|
|
<wuliuPopup ref="wuliu"></wuliuPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wuliuPopup from '@/components/wuliuPupup/wuliuPupup.vue'
|
|
const app =getApp()
|
|
import {getDetailByOrderNo} from '@/Utils/Api.js'
|
|
export default {
|
|
data(){
|
|
return{
|
|
// 0:代表未支付，1代表已支付,2代表已取消
|
|
status:0,
|
|
orderID:'1209 2418 0001 0039',
|
|
moreThanThree:false,
|
|
images: ["https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg"],
|
|
countdownh: '', //倒计时时
|
|
countdownm: '', // 倒计时分
|
|
countdowns:'',//倒计时秒
|
|
timers:null,
|
|
// recinfo:{
|
|
// createTime:1680744355375,
|
|
// },
|
|
//
|
|
orderId:'',//订单id
|
|
recinfo: [],
|
|
|
|
}
|
|
},
|
|
components:{
|
|
wuliuPopup
|
|
},
|
|
onLoad(option) {
|
|
this.orderId = option.id
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.timers);
|
|
},
|
|
onShow(){
|
|
// 待支付状态
|
|
// if(this.status == 0){
|
|
// this.timers = setInterval(() => {
|
|
// this.showtime()
|
|
// }, 1000)
|
|
// }
|
|
|
|
//页面显示时，加载订单信息
|
|
this.getDetailByOrderNo();
|
|
|
|
},
|
|
methods:{
|
|
//查询订单详情
|
|
getDetailByOrderNo() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let params = {
|
|
orderNo: this.orderId,
|
|
}
|
|
getDetailByOrderNo(params).then(res => {
|
|
uni.hideLoading();
|
|
if (res.return_code == '000000') {
|
|
this.recinfo = res.return_data;
|
|
// if (res.return_data.productType == 6) {
|
|
// this.getOrderByOrderNo();
|
|
// }
|
|
|
|
if (res.return_data.orderStatus == 1) {
|
|
this.timers = setInterval(() => {
|
|
this.showtime()
|
|
}, 1000)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
showtime() {
|
|
var nowtime = (new Date()).getTime();//获取当前时间
|
|
var endtime = this.recinfo.createTime + 600000; //定义结束时间 600000是10分钟
|
|
var lefttime = endtime - nowtime; //距离结束时间的毫秒数
|
|
var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)); //计算天数
|
|
var lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
|
|
(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
|
|
24); //计算小时数
|
|
var leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
|
|
Math.floor(lefttime / (1000 * 60) % 60); //计算分钟数
|
|
var lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
|
|
lefttime / 1000 % 60); //计算秒数
|
|
this.countdownh = lefth; //返回倒计时的字符串
|
|
this.countdownm = leftm; //返回倒计时的字符串
|
|
this.countdowns = lefts; //返回倒计时的字符串
|
|
// 倒计时结束时，显示00:00:00
|
|
if (lefttime < 0) {
|
|
clearInterval(this.timers);
|
|
// this.getDetailByOrderNo();
|
|
this.countdownh = this.countdownm = this.countdowns = "00";
|
|
}
|
|
},
|
|
// 查看更多商品
|
|
checkMore(){
|
|
this.moreThanThree = !this.moreThanThree
|
|
},
|
|
// 查看物流
|
|
checkWuliu(){
|
|
this.$refs.wuliu.$refs.popup.show()
|
|
},
|
|
|
|
// 点击修改订单
|
|
editOrder(){
|
|
uni.navigateTo({
|
|
url:'/pages/classify/order/editOrder'
|
|
})
|
|
},
|
|
// 取消订单
|
|
cancelOrder(){
|
|
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '取消订单',
|
|
content: '确定取消此订单？',
|
|
success: (res) => {
|
|
// if (res.confirm) {
|
|
// uni.showLoading({
|
|
// title: '加载中...'
|
|
// })
|
|
// let params = {
|
|
// orderNo: this.recinfo.orderNo
|
|
// }
|
|
// cancel(params).then(res => {
|
|
// if (res.return_code == '000000') {
|
|
// uni.hideLoading();
|
|
// uni.showToast({
|
|
// title: res.return_data,
|
|
// icon: 'none',
|
|
// duration: 2000
|
|
// })
|
|
// let pages = getCurrentPages() //页面栈
|
|
// let prePage = pages[pages.length - 2] //上一页
|
|
// prePage.$vm.reFresh = Math.random() //触发上一页监听器
|
|
// uni.navigateBack() //返回上一页
|
|
// } else {
|
|
// uni.showToast({
|
|
// title: res.return_msg,
|
|
// icon: 'none',
|
|
// duration: 2000
|
|
// })
|
|
// uni.hideLoading()
|
|
// }
|
|
// })
|
|
// } else if (res.cancel) {
|
|
// console.log('用户点击取消');
|
|
// }
|
|
}
|
|
});
|
|
|
|
},
|
|
// 支付订单
|
|
payOrder(){
|
|
|
|
},
|
|
|
|
// 订单取消时的再来一单
|
|
oneMoreOrder(){
|
|
|
|
},
|
|
// 订单取消时的删除订单
|
|
deleteOrder(){
|
|
|
|
},
|
|
// 复制的
|
|
copyText(text){
|
|
|
|
|
|
|
|
// #ifdef H5
|
|
this.$copyText(text).then(
|
|
res => {
|
|
uni.showToast({
|
|
title: '复制成功'
|
|
})
|
|
}
|
|
)
|
|
// #endif
|
|
// #ifndef H5
|
|
uni.setClipboardData({
|
|
data: text,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '复制成功'
|
|
})
|
|
}
|
|
})
|
|
// #endif
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.flex-center-sp{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.flex-center{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.align-fs{
|
|
align-self: flex-start;
|
|
}
|
|
.tr{
|
|
text-align: right;
|
|
}
|
|
.flex-1{
|
|
flex:1;
|
|
}
|
|
.st-img{
|
|
width: 82px;
|
|
height: 82px;
|
|
}
|
|
|
|
|
|
.goodsMore{
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
border-top: 1px solid #f6f6f6;
|
|
border-bottom:1px solid #f6f6f6;
|
|
}
|
|
|
|
// 商品金额
|
|
.pd-tb10{
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.td-lt{
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.bordert{
|
|
border-top: 2px solid #f6f6f6;
|
|
}
|
|
|
|
// 复制按钮
|
|
.copy-num{
|
|
padding: 0 5px;
|
|
border: 1px solid #666666;
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
}
|
|
// 修改按钮
|
|
.edit-msg{
|
|
border: 1px solid #D7D3D0;
|
|
width: 50px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.pdb50{
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
// 底部待支付按钮
|
|
.toPay{
|
|
height: 40px;
|
|
padding: 0 15px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
border-top: 1px solid #f6f6f6;
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
.btn{
|
|
// height: 20px;
|
|
padding:1px 5px;
|
|
border-radius: 10px;
|
|
margin-left: 15px;
|
|
border:1px solid #666666;
|
|
color: #666666;
|
|
&.bgred{
|
|
color: #ffffff;
|
|
background-color: #FF2342;
|
|
border:1px solid #FF2342;
|
|
}
|
|
&.oneMore{
|
|
color: #FF2342;
|
|
|
|
border:1px solid #FF2342;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |