Skip to content

G
groupPurchase-miniapp
Commit 6eedea24 authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

订单

parent 102586e1
Hide whitespace changes
Inline Side-by-side
Showing with 645 additions and 88 deletions
src/pages/order/components/Header/index.vue
View file @ 6eedea24
<template>
<div class="header">
<div class="headbox">
<view class="header">
<view class="headbox">
<wd-icon
class="icon"
name="thin-arrow-left"
......@@ -8,9 +8,9 @@
size="18px"
@click="handleBack"
></wd-icon>
<div class="title">{{ props.title }}</div>
</div>
</div>
<view class="title">{{ props.title }}</view>
</view>
</view>
</template>
<script setup>
......
src/pages/order/components/OrderList/index.vue
View file @ 6eedea24
<template>
<div class="content">
<div class="box">
<div class="header">
<div class="left">
<img src="@/static/order/shop.png" />
<div class="title">宽带融合5G 169套餐</div>
</div>
<view class="content">
<view class="box">
<view class="header">
<view class="left">
<image src="@/static/order/shop.png" />
<view class="title">宽带融合5G 169套餐</view>
</view>
<span class="status">待消费</span>
</div>
</view>
<div class="info">
<img
<view class="info">
<image
mode="aspectFill"
src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg"
/>
<div class="info-box">
<div class="text">下单时间：2023-06-27 15:53</div>
<div class="text">预约时间：2023-07-04 10:00-12:00</div>
<div class="text">数量：1</div>
<div class="text">实付：￥169</div>
</div>
</div>
<div class="btn">
<div class="btn-info">删除</div>
<div class="btn-info">查看预约</div>
<div class="btn-error">再来一单</div>
</div>
</div>
</div>
<view class="info-box">
<view class="text">下单时间：2023-06-27 15:53</view>
<view class="text">预约时间：2023-07-04 10:00-12:00</view>
<view class="text">数量：1</view>
<view class="text">实付：￥169</view>
</view>
</view>
<view class="btn">
<view class="btn-info">删除</view>
<view class="btn-info">查看预约</view>
<view class="btn-error">再来一单</view>
</view>
</view>
</view>
</template>
<script></script>
......@@ -61,7 +61,7 @@
align-items: center;
gap: 20rpx;
img {
image {
height: 38rpx;
width: 38rpx;
}
......@@ -83,7 +83,7 @@
display: flex;
gap: 20rpx;
img {
image {
width: 110rpx;
height: 110rpx;
border-radius: 12rpx;
......
src/pages/order/detail.vue
View file @ 6eedea24
<template>
<div class="container">
<view class="container">
<Header title="订单详情"></Header>
<div class="content">
<div class="status">
<div class="status-box">
<wd-icon name="check-outline" size="26px" color="#333"></wd-icon>
<div class="status-text">已使用</div>
</div>
<div class="detail">请在2023年07月04前到店消费</div>
</div>
<div>
</div>
</div>
</div>
<view class="content">
<!-- 使用状态 -->
<view class="status">
<view class="status-box">
<!-- <wd-icon name="check-outline" size="26px" color="#333"></wd-icon> -->
<view class="status-text">待到店使用</view>
</view>
<view class="detail">请在2023年07月04前到店消费</view>
</view>
<!-- 券码信息 -->
<view class="info">
<view class="box">
<view class="left">
<image
mode="aspectFill"
src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg"
/>
<view class="left-box">
<text class="title">酸汤鱼双人套餐</text>
<text class="detail">周一至周日 到店吃</text>
<text class="detail">随时退·过期自动退·免预约</text>
<view class="price-box">
<text class="icon">￥</text>
<text class="price">89</text>
</view>
</view>
</view>
<wd-icon name="chevron-right" size="22px" color="#333"></wd-icon>
</view>
<view class="rectangle-with-semicircles"></view>
<view class="qrcode line">
<!-- 二维码 -->
<view class="qr-box">
<image src="@/static/order/QR-code.png" class="qr"></image>
</view>
<view class="info-box">
<view class="between">
<view class="column">
<text class="title">券码信息（1张可用）</text>
<text class="text">2023-07-04 23:59 到期</text>
</view>
<view class="btn">申请退款</view>
</view>
<view class="between">
<text class="phone">0115 8156 9126</text>
<text class="text">待使用</text>
</view>
</view>
</view>
</view>
<!-- 地址 -->
<view class="info">
<view class="info-box padding">
<view class="between" style="margin-bottom: 0">
<text class="name">老凯里酸汤（花果园店）</text>
<view class="rowbox">
<image src="@/static/order/telephone.png" class="img"></image>
<text class="text">联系商家</text>
</view>
</view>
<view class="rowbox">
<image src="@/static/order/time.png" class="img1"></image>
<text class="address">营业时间 10:00-00:00</text>
</view>
<view class="rowbox">
<image src="@/static/order/address.png" class="img1"></image>
<text class="address">南明区花果园中环广场2号楼3楼119号门面 距您300m</text>
</view>
</view>
</view>
<!-- 套餐信息 -->
<view class="info">
<view class="menu padding">
<text class="title">到店吃套餐</text>
<view class="menu-box">
<view class="header">
<view class="circle"></view>
<text class="h-name">锅底</text>
</view>
<view class="list-box">
<text class="name">苗家酸汤锅底 ></text>
<view class="right-box">
<text class="num">(1份)</text>
<view class="price-box">
<text class="icon">￥</text>
<text class="num">20</text>
</view>
</view>
</view>
</view>
<view class="menu-box">
<view class="header">
<view class="circle"></view>
<text class="h-name">涮菜</text>
</view>
<view class="list-box" v-for="(item, index) in 3" :key="index">
<text class="name">娃娃菜</text>
<view class="right-box">
<text class="num">(1份)</text>
<view class="price-box">
<text class="icon">￥</text>
<text class="num">18</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 温馨提示 -->
<view class="info">
<view class="tips padding">
<text class="title">温馨提示</text>
<view class="tips-box">
<view class="row">
<text class="name">使用时间：</text>
<text class="text">11:30-23:59</text>
</view>
<view class="row">
<text class="name">使用规则：</text>
<text class="textarea">
不可以使用包间\n本单发票由商家提供，详情请咨询商家仅限 堂食
</text>
</view>
</view>
</view>
</view>
<!-- 订单详情 -->
<view class="info">
<view class="tips padding">
<text class="title">实付金额：￥89</text>
<view class="tips-box">
<view class="row">
<text class="name">订单号：</text>
<view class="copybox">
<text class="text">491758727559582056</text>
<view class="copy">复制</view>
</view>
</view>
<view class="row">
<text class="name">手机号：</text>
<text class="text">187****8562</text>
</view>
<view class="row">
<text class="name">付款时间：</text>
<text class="text">2023-06-27 15:53:05</text>
</view>
<view class="row">
<text class="name">下单时间：</text>
<text class="text">2023-06-27 15:53:05</text>
</view>
<view class="row">
<text class="name">数量：</text>
<text class="text">1</text>
</view>
<view class="row">
<text class="name">总价：</text>
<text class="text">￥120</text>
</view>
<view class="row">
<text class="name">优惠明细：</text>
<text class="text">-￥31</text>
</view>
<view class="row">
<text class="name">实付：</text>
<text class="text">￥89</text>
</view>
</view>
</view>
</view>
<view style="height: 340rpx"></view>
</view>
<view class="footer">
<view class="btn">再来一单</view>
</view>
</view>
</template>
<script setup>
......@@ -22,38 +191,426 @@ import Header from './components/Header/index.vue';
</script>
<style scoped lang="scss">
.container {
background-color: #f5f5f5;
height: 100vh;
}
.content {
padding-top: 44px;
page {
background: #f3f3f3;
}
.status {
display: flex;
flex-direction: column;
padding: 32rpx 20rpx;
gap: 6rpx;
.container {
.content {
padding-top: 44px;
display: flex;
flex-direction: column;
gap: 20rpx;
}
.status-box {
.status {
display: flex;
align-items: center;
flex-direction: column;
padding: 32rpx 20rpx 12rpx;
gap: 6rpx;
.status-text {
font-size: 48rpx;
font-weight: bold;
color: #333;
.status-box {
display: flex;
align-items: center;
gap: 6rpx;
.status-text {
font-size: 48rpx;
font-weight: bold;
color: #333;
font-family: PingFang SC;
}
}
.detail {
font-size: 28rpx;
color: #999;
font-family: PingFang SC;
}
}
.detail {
font-size: 28rpx;
color: #999;
font-family: PingFang SC;
.info {
background-color: #fff;
border-radius: 16rpx;
margin: 0 20rpx;
// 二维码头部
.box {
padding: 20rpx;
display: flex;
justify-content: space-between;
.left {
display: flex;
gap: 20rpx;
image {
height: 128rpx;
width: 128rpx;
border-radius: 8rpx;
}
.left-box {
display: flex;
flex-direction: column;
gap: 6rpx;
text {
font-family: PingFang SC;
color: #333;
font-size: 24rpx;
}
.title {
font-size: 28rpx;
font-weight: bold;
}
.price-box {
display: flex;
align-items: last baseline;
.icon {
font-weight: bold;
}
.price {
font-size: 32rpx;
font-weight: bold;
}
}
}
}
}
.line {
border-top: 1px dashed #999;
}
.rectangle-with-semicircles {
width: 100%;
position: relative;
z-index: 10;
height: 20rpx;
}
.rectangle-with-semicircles::after {
position: absolute;
content: '';
height: 32rpx;
width: 32rpx;
border-radius: 50%;
background-color: #f5f5f5;
left: 0;
top: 50%;
transform: translate(-50%);
}
.rectangle-with-semicircles::before {
position: absolute;
content: '';
height: 32rpx;
width: 32rpx;
border-radius: 50%;
background-color: #f5f5f5;
right: 0;
top: 50%;
transform: translate(50%);
}
// 二维码
.qrcode {
padding: 20rpx;
display: flex;
flex-direction: column;
gap: 36rpx;
.qr-box {
display: flex;
justify-content: center;
align-items: center;
.qr {
width: 320rpx;
height: 320rpx;
}
}
}
.padding {
padding: 20rpx;
}
// 券码&地址信息
.info-box {
display: flex;
flex-direction: column;
gap: 10rpx;
.between {
display: flex;
justify-content: space-between;
margin-bottom: 28rpx;
}
.column {
display: flex;
flex-direction: column;
gap: 18rpx;
}
text {
font-family: PingFang SC Heavy;
letter-spacing: 0em;
color: #333;
}
.title {
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
.text {
font-size: 24rpx;
line-height: 24rpx;
}
.phone {
font-size: 28rpx;
line-height: 28rpx;
font-weight: bold;
}
.name {
font-size: 32rpx;
line-height: 56rpx;
font-weight: bold;
}
.btn {
width: 142rpx;
height: 58rpx;
border-radius: 30rpx;
border: 1rpx solid #999999;
color: #333;
font-size: 24rpx;
font-family: PingFang SC;
display: flex;
align-items: center;
justify-content: center;
}
.rowbox {
display: flex;
align-items: center;
gap: 4rpx;
.img {
width: 26rpx;
height: 26rpx;
}
.img1 {
width: 28rpx;
height: 28rpx;
}
.address {
color: #666;
font-family: PingFang SC Regular;
font-size: 24rpx;
font-weight: normal;
line-height: 24rpx;
letter-spacing: 0em;
}
}
}
// 套餐信息
.menu {
display: flex;
flex-direction: column;
gap: 14rpx;
.title {
color: #333;
font-family: PingFang SC Bold;
font-weight: bold;
font-size: 36rpx;
line-height: 36rpx;
letter-spacing: 0rem;
}
.menu-box {
display: flex;
flex-direction: column;
gap: 24rpx;
margin-bottom: 16rpx;
.header {
display: flex;
align-items: center;
gap: 6rpx;
.circle {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background-color: #333;
}
.h-name {
font-family:
PingFang SC,
PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #333333;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.list-box {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 14rpx;
.name {
font-family: PingFang SC Bold;
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0rem;
color: #333333;
}
.right-box {
display: flex;
align-items: center;
gap: 20rpx;
.num {
font-family: PingFang SC Regular;
font-size: 26rpx;
font-weight: normal;
line-height: 26rpx;
letter-spacing: 0rem;
color: #999999;
}
.price-box {
display: flex;
align-items: last baseline;
text {
font-family: PingFang SC Bold;
font-size: 32rpx;
font-weight: bold;
letter-spacing: 0rem;
color: #333;
}
.icon {
font-size: 26rpx;
}
}
}
}
}
}
// 提示&订单信息
.tips {
display: flex;
flex-direction: column;
gap: 24rpx;
.title {
color: #333;
font-family: PingFang SC Bold;
font-weight: bold;
font-size: 36rpx;
line-height: 36rpx;
letter-spacing: 0rem;
}
.tips-box {
display: flex;
flex-direction: column;
gap: 24rpx;
margin-bottom: 10rpx;
.row {
display: flex;
gap: 8rpx;
.name {
width: 140rpx;
font-family: PingFang SC Regular;
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0rem;
color: #999999;
text-align-last: justify;
}
.text {
font-family: PingFang SC Regular;
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0rem;
color: #333333;
}
.textarea {
width: 510rpx;
text-align: justify;
font-family: PingFang SC Regular;
font-size: 28rpx;
font-weight: normal;
line-height: 42rpx;
letter-spacing: 0rem;
color: #333333;
}
.copybox {
display: flex;
align-items: center;
gap: 8rpx;
}
.copy {
width: 60rpx;
height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
color: #707070;
font-size: 24rpx;
border-radius: 6rpx;
border: 1rpx solid #707070;
}
}
}
}
}
.footer {
position: fixed;
bottom: 0;
background-color: #fff;
height: 188rpx;
width: 100%;
z-index: 10;
.btn {
}
}
}
</style>
src/pages/order/order.vue
View file @ 6eedea24
<template>
<div class="container">
<view class="container">
<Header title="全部订单"></Header>
<div class="tabs">
<view class="tabs">
<wd-tabs v-model="tab" animated lineWidth="38" lineHeight="3">
<block v-for="item in tabs" :key="item">
<wd-tab :title="`${item}`" :name="item">
......@@ -9,8 +9,8 @@
</wd-tab>
</block>
</wd-tabs>
</div>
</div>
</view>
</view>
</template>
<script setup>
......@@ -22,25 +22,25 @@ const tab = ref('待使用');
</script>
<style scoped lang="scss">
.container {
background-color: #f5f5f5;
height: 100vh;
page {
background: #f3f3f3;
}
.container {
.tabs {
padding-top: 44px;
.tabs {
padding-top: 44px;
.wd-tabs {
background-color: #f5f5f5;
}
.wd-tabs {
background-color: #f5f5f5;
}
&:deep(.wd-tabs__nav) {
background-color: #f5f5f5;
}
&:deep(.wd-tabs__nav) {
background-color: #f5f5f5;
}
&:deep(.wd-tabs__line) {
background-color: #e9231b;
bottom: 2px;
&:deep(.wd-tabs__line) {
background-color: #e9231b;
bottom: 2px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment