<template>
<view>
<view class="container">
<!-- S-导航栏 -->
<u-navbar
title=""
:autoBack="true"
:placeholder="true"
bgColor="#F7F7F7"
>
<view slot="right">
<button class="button" open-type="contact">
</button>
</view>
</u-navbar>
<!-- E-导航栏 -->
<!-- S-支付状态 -->
<view class="status-wrap w1 mt-40">
<view class="ac f-40 fb">等待支付，剩余 <view class="orange ml-6">
<u-count-down
:time="30 * 60 * 60 * 1000"
format="HH:mm:ss"
autoStart
millisecond
@change="onChange"
>
<view class="ac">
{{ timeData.minutes }}:{{ timeData.seconds }}
</view>
</u-count-down>
</view> <view class="iconfont c-6 f-28 ml-12"></view></view>
<view class="ac f-40 fb">订单已取消 <view class="iconfont c-6 f-28 ml-12"></view></view>
<view class="ac f-40 fb">订单已完成 <view class="iconfont c-6 f-28 ml-12"></view></view>
</view>
<!-- E-支付状态 -->
<!-- S-通知 -->
<view class="ac w1 mt-36 notice">
<view class="iconfont"></view>
<view class="con f-24 pl-14 c-9">支付后预计送达时间将更新，早支付早送达，超过 <text class="orange">15分钟未支付，</text>订单将被自动取消，快去支付吧</view>
</view>
<!-- E-通知 -->
<!-- S-预计送达时间 -->
<view class="time-card w1 mt-22">
<view class="ac sb mt-10">
<view class="f-24">预计送达时间</view>
<view class="label b-bug orange f-24">乐旭快送</view>
</view>
<view class="ac f-48 fb mt-12">13:44-13:59</view>
<view class="f-24 mt-16">
<text class="iconfont f-22"></text>
<text class="fb">准时包</text>
<text class="c-9 ml-10">商家接单后生效，14：09未送达，可获赔¥3</text>
</view>
<view class="f-24 mt-16">
<text class="c-9 ml-10">支付超市，订单已取消</text>
</view>
<view class="f-24 mt-16">
<text class="c-3 ml-10">感谢你对乐旭外卖的信任，期待再次光临。</text>
</view>
<view class="f-24 mt-12">
<text class="c-9 ml-10">温馨提示:请厉行节约，拒绝浪费。</text>
</view>
<view class="func mt-20">
<view class="li col c mt-6">
<view class="iconfont"></view>
<view class="f-24 mt-8">立即支付</view>
</view>
<view class="li col c mt-6">
<view class="iconfont"></view>
<view class="f-24 mt-8">改订单信息</view>
</view>
<view class="li col c mt-6">
<view class="iconfont"></view>
<view class="f-24 mt-8">联系商家</view>
</view>
<view class="li col c mt-6">
<view class="iconfont"></view>
<view class="f-24 mt-8">取消订单</view>
</view>
</view>
</view>
<!-- E-预计送达时间 -->
<!-- S-商品信息 -->
<view class="goods-wrap w1 mt-20">
<view class="hd ac sb">
<view class="ac">
<view class="f-32 to" style="width: 450rpx;">猪老六隆江猪脚饭（观音桥）猪老六隆江猪脚饭（观音桥）</view>
<view class="iconfont c-9 f-32 mt-2"></view>
</view>
<view class="star c">
<view class="iconfont f-28 mr-10 f-20"></view>
<view class="f-24">收藏</view>
</view>
</view>
<view class="cd">
<view class="li ac sb" v-for="(item,index) in 2" :key="index">
<image class="thumb" mode="aspectFill" src=""></image>
<view class="con">
<view class="ac pl-14">
<view class="ze f-20 fff c">折</view>
<view class="tit to f-30 pl-20">爆款双拼 猪肘人十分士大夫</view>
<view class="old-text f-28 c-9 mr-8 mt-2 ml-8">¥46.88</view>
<view class="new-text f-32">¥20.9</view>
</view>
<view class="ac f-26 c-9 mt-4">1人份，加剁椒，猪肘，麻辣香肠</view>
<view class="ac f-26 c-9 mt-4">×1</view>
</view>
</view>
</view>
<view class="bd">
<view class="li ac sb">
<view class="f-30 c-3">打包费</view>
<view class="f-30 c-3">¥2</view>
</view>
<view class="li ac sb">
<view class="f-30 c-3">用户配送费</view>
<view class="f-30 c-3"><text class="c-9 mr-14 old-text">¥2</text>¥0</view>
</view>
<view class="li ac sb">
<view class="f-30 c-3">放心吃(商家赠送)</view>
<view class="f-30 c-3"><text class="c-9 mr-14 old-text">¥2</text>¥0</view>
</view>
<view class="li ac sb">
<view class="f-30 c-3">准时宝(商家赠送)</view>
<view class="f-30 c-3"><text class="c-9 mr-14 old-text">¥2</text>¥0</view>
</view>
<view class="li ac sb mt-20" style="border-top: 1rpx solid #f1f1f2;padding-top: 30rpx;padding-bottom: 30rpx;">
<view class="ac">
<view class="ze f-20 fff mr-8 c">新</view>
<view class="f-30 c-3">门店新客立减</view>
</view>
<view class="f-30 red">-¥2</view>
</view>
<view class="li">
<view class="ac sb">
<view class="f-28 c-9">实付满1元返券</view>
<view class="f-28 orange">满25减2商家券</view>
</view>
</view>
<view class="li">
<view class="ac sb">
<view></view>
<view class="ac">
<view class="f-28">已优惠<text class="red ml-8">¥30.98</text></view>
<view class="f-28 ml-28">合计</view>
<view class="f-34 ml-28">¥20.9</view>
</view>
</view>
</view>
</view>
</view>
<!-- E-商品信息 -->
<view class="info-wrap w1 mt-14">
<view class="li flex sb">
<view class="c-9 f-30">期望地址</view>
<view class="c-3 f-30">立即配送</view>
</view>
<view class="li flex sb">
<view class="c-9 f-30">配送地址</view>
<view class="c-3 f-30 col" style="align-items: flex-end;">
<view class="f-30 c-3">金刚大厦(11)</view>
<view class="f-30 c-3 mt-10">周**(先生) 131****1234</view>
</view>
</view>
<view class="li flex sb">
<view class="c-9 f-30">配送服务</view>
<view class="c-3 f-30">乐旭快送</view>
</view>
<view class="li flex sb">
<view class="c-9 f-30">订单号码</view>
<view class="c-3 f-30">1100 7786 2283 3454 183 <view class="copy ml-18 b-bug c" @click="copyTap('xx')">复制</view></view>
</view>
<view class="li flex sb">
<view class="c-9 f-30">下单时间</view>
<view class="c-3 f-30">2023-10-16 18：22：23</view>
</view>
<view class="li flex sb">
<view class="c-9 f-30">支付方式</view>
<view class="c-3 f-30">在线支付</view>
</view>
<view class="li flex sb">
<view class="c-9 f-30">餐具数量</view>
<view class="c-3 f-30">无需餐具</view>
</view>
</view>
<view class="f-24 c-9 c pt-40 pb-40">-到底了-</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timeData: {},
};
},
methods:{
onChange(e) {
this.timeData = e
},
copyTap(data){
uni.setClipboardData({
data,
success() {
this.$showToast('复制成功')
}
})
}
}
}
</script>
<style lang="scss">
@import "@/static/common/css/iconfont.scss";
@import "@/common/style/basex.scss";
.copy{
display: inline-flex;
font-size: 24rpx;
padding: 4rpx 14rpx;
border-radius: 6rpx;
border: 1rpx solid #ddd;
}
.info-wrap{
padding: 20rpx 20rpx;
border-radius: 20rpx;
background-color: #fff;
box-shadow: 0 0 10rpx #F1F1F2;
.li{
padding: 18rpx 0;
}
}
.goods-wrap{
.bd{
.li{
padding: 18rpx 0;
}
padding: 10rpx 0;
}
.cd{
.li{
.con{
.tit{
flex: 1;
}
padding-left: 12rpx;
width: 548rpx;
min-height: 98rpx;
}
.thumb{
width: 98rpx;
height: 98rpx;
border-radius: 10rpx;
background-color: #f5f5f5;
}
height: 173rpx;
border-bottom: 1rpx solid #f5f5f5;
// &:last-child{ border-bottom: none; }
}
}
.star{
.iconfont{
transform: scale(.8);
}
background-color: #f2f2f2;
padding: 14rpx 30rpx;
border-radius: 88rpx;
}
.hd{
height: 95rpx;
border-bottom: 1rpx solid #f1f1f2;
}
padding: 0 24rpx;
// padding: 20rpx 20rpx;
border-radius: 20rpx;
background-color: #fff;
box-shadow: 0 0 10rpx #F1F1F2;
}
.label{
border: 1rpx solid #FFD8B3;
padding: 2rpx 10rpx;
border-radius: 6rpx;
}
.notice{
.con{
flex: 1;
}
}
.time-card{
.func{
.li{
padding: 20rpx 0;
padding-bottom: 10rpx;
width: 25%;
}
width: 100%;
border-top: 1rpx solid #f1f1f2;
display: flex;
flex-wrap: wrap;
}
padding: 20rpx 20rpx;
border-radius: 20rpx;
background-color: #fff;
box-shadow: 0 0 10rpx #F1F1F2;
}
.w1{ width: 702rpx; }
.container{
min-height: 100vh;
/* #ifdef H5 */
min-height: calc(100vh - 44px);
/* #endif */
width: 750rpx;
background-color: #F7F7F7;
}
.old-text{
text-decoration: line-through;
}
.ze{
width: 30rpx;
height: 30rpx;
border-radius: 8rpx;
background-color: #EB5938;
}
</style>
时间：2023-10-17 作者：熊永生 分类： uniapp
标签: uniapp