207 lines
6.7 KiB
Vue
207 lines
6.7 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 顶部状态栏 -->
|
|
<view class="status-bar">
|
|
<view class="status">待付款</view>
|
|
<view class="countdown">剩余支付时间: {{ countdown }}</view>
|
|
<view class="tips">10分钟内未支付订单自动取消</view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<!-- 订单金额 -->
|
|
<view class="amount-section">
|
|
<view class="total-amount">¥{{ orderInfo.totalAmount }}</view>
|
|
<view class="original-price"
|
|
>商品下单应付
|
|
<text> ¥{{ orderInfo.originalPrice }}</text>
|
|
</view>
|
|
<view
|
|
class="goods-item"
|
|
v-for="(item, index) in orderInfo.goodsList"
|
|
:key="index"
|
|
>
|
|
<image :src="item.image" class="goods-img"></image>
|
|
<view class="goods-info">
|
|
<view>
|
|
<view class="goods-name">{{ item.name }}</view>
|
|
<view class="goods-desc">{{ item.desc }}</view>
|
|
</view>
|
|
<view>
|
|
<view class="goods-price">¥{{ item.price }}</view>
|
|
<view class="goods-info-right"> x{{ item.quantity }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="info-item">
|
|
<view class="info-label1"
|
|
>下单总金额( ¥{{ orderInfo.orderAmount }} )</view
|
|
>
|
|
<view class="info-action">明细</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">商品下单总金额</view>
|
|
<view class="info-value">¥{{ orderInfo.goodsTotal }}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">运费总计</view>
|
|
<view class="info-value">¥{{ orderInfo.freight }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 配送信息 -->
|
|
<view class="delivery-info">
|
|
<view class="section-title">配送信息</view>
|
|
<view class="info-item">
|
|
<view class="info-label">配送方式</view>
|
|
<view class="info-value">{{ orderInfo.deliveryType }}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">预计配送时间</view>
|
|
<view class="info-value">{{ orderInfo.deliveryTime }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收货信息 -->
|
|
<view class="recipient-info">
|
|
<view class="section-title">收货信息</view>
|
|
<view class="info-item">
|
|
<view class="info-label">收货人</view>
|
|
<view class="info-value"
|
|
>{{ orderInfo.recipientName }}
|
|
<text> {{ orderInfo.recipientPhone }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">收货地址</view>
|
|
<view class="info-value">{{ orderInfo.recipientAddress }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单信息详情 -->
|
|
<view class="order-detail-info">
|
|
<view class="section-title">订单信息</view>
|
|
<view class="info-item">
|
|
<view class="info-label">订单编号</view>
|
|
<view class="info-value">{{ orderInfo.orderNumber }}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">支付方式</view>
|
|
<view class="info-value">{{ orderInfo.paymentMethod }}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">下单时间</view>
|
|
<view class="info-value">{{ orderInfo.orderTime }}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">备注</view>
|
|
<view class="info-value">{{ orderInfo.remark }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<view class="bottom-buttons">
|
|
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
|
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
countdown: "9:59:59",
|
|
orderInfo: {
|
|
totalAmount: "4704.00",
|
|
payAmount: "4704.00",
|
|
originalPrice: "4704.00",
|
|
orderAmount: "290.00",
|
|
goodsTotal: "4704.00",
|
|
freight: "4704.00",
|
|
deliveryType: "商家配送",
|
|
deliveryTime: "2021-04-16 20:00-22:00",
|
|
recipientName: "杜先生",
|
|
recipientPhone: "15901518415",
|
|
recipientAddress: "河北省衡水市桃城区上海公馆",
|
|
orderNumber: "159144551545654",
|
|
paymentMethod: "微信支付",
|
|
orderTime: "2021-03-16 20:00-22:00",
|
|
remark: "明天9点之前送到",
|
|
goodsList: [
|
|
{
|
|
image: "http://localhost:8080/order_details.png",
|
|
name: "泰国金枕榴莲",
|
|
desc: "泰国金枕榴莲 软糯 香甜",
|
|
price: "125.9",
|
|
quantity: 1,
|
|
},
|
|
{
|
|
image: "http://localhost:8080/order_details.png",
|
|
name: "泰国金枕榴莲",
|
|
desc: "泰国金枕榴莲 软糯 香甜",
|
|
price: "125.9",
|
|
quantity: 1,
|
|
},
|
|
{
|
|
image: "http://localhost:8080/order_details.png",
|
|
name: "泰国金枕榴莲",
|
|
desc: "泰国金枕榴莲 软糯 香甜",
|
|
price: "125.9",
|
|
quantity: 1,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 启动倒计时
|
|
this.startCountdown();
|
|
},
|
|
methods: {
|
|
startCountdown() {
|
|
// 实际项目中应该从服务器获取剩余时间
|
|
// 这里使用模拟倒计时
|
|
let seconds = 10 * 60; // 10分钟
|
|
const timer = setInterval(() => {
|
|
seconds--;
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
const secs = seconds % 60;
|
|
this.countdown = `${hours}:${minutes.toString().padStart(2, "0")}:${secs
|
|
.toString()
|
|
.padStart(2, "0")}`;
|
|
if (seconds <= 0) {
|
|
clearInterval(timer);
|
|
// 倒计时结束，处理订单取消逻辑
|
|
uni.showToast({ title: "订单已取消", icon: "none" });
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
|
}
|
|
}, 1000);
|
|
},
|
|
cancelOrder() {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定要取消订单吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 调用取消订单API
|
|
uni.showToast({ title: "订单已取消", icon: "none" });
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
|
}
|
|
},
|
|
});
|
|
},
|
|
gotoPayment() {
|
|
// 跳转到支付页面
|
|
uni.navigateTo({
|
|
url: "/kitchen/pay/index",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |