Skip to content

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

订单

parent 9882fcc3
Hide whitespace changes
Inline Side-by-side
Showing with 312 additions and 0 deletions
src/pages.json
View file @ a1f95c48
......@@ -16,6 +16,16 @@
"style": {
"navigationBarTitleText": "店铺首页"
}
}, {
"path": "pages/order/order",
"style": {
"navigationBarTitleText": "订单列表"
}
}, {
"path": "pages/order/detail",
"style": {
"navigationBarTitleText": "订单详情"
}
}
],
"globalStyle": {
......
src/pages/order/components/Header/index.vue 0 → 100644
View file @ a1f95c48
<template>
<div class="header">
<div class="headbox">
<wd-icon
class="icon"
name="thin-arrow-left"
color="#333333"
size="18px"
@click="handleBack"
></wd-icon>
<div class="title">{{ props.title }}</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: '',
},
});
const handleBack = () => {
uni.navigateBack();
};
</script>
<style lang="scss" scoped>
.header {
height: 88rpx;
background-color: #ffffff;
position: fixed;
z-index: 999;
width: 100%;
.headbox {
position: relative;
display: flex;
align-items: center;
height: 100%;
width: 100%;
.icon {
padding: 0 20rpx;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36rpx;
font-family: PingFang SC;
color: #333333;
}
}
}
</style>
src/pages/order/components/OrderList/index.vue 0 → 100644
View file @ a1f95c48
<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>
<span class="status">待消费</span>
</div>
<div class="info">
<img
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>
</template>
<script></script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx;
.box {
background-color: #fff;
width: 100%;
border-radius: 16rpx;
padding: 28rpx 18rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
gap: 30rpx;
.header {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
gap: 20rpx;
img {
height: 38rpx;
width: 38rpx;
}
.title {
color: #333;
font-size: 32rpx;
font-family: PingFang SC;
}
}
.status {
color: #666;
font-size: 28rpx;
}
}
.info {
display: flex;
gap: 20rpx;
img {
width: 110rpx;
height: 110rpx;
border-radius: 12rpx;
}
.info-box {
display: flex;
flex-direction: column;
gap: 18rpx;
.text {
color: #666;
line-height: 28rpx;
font-size: 28rpx;
font-family: PingFang SC;
}
}
}
.btn {
display: flex;
justify-content: flex-end;
gap: 14rpx;
.btn-info {
width: 162rpx;
height: 66rpx;
border-radius: 34rpx;
border: 1rpx solid #999999;
color: #666;
font-size: 28rpx;
font-family: PingFang SC;
display: flex;
align-items: center;
justify-content: center;
}
.btn-error {
width: 162rpx;
height: 66rpx;
border-radius: 34rpx;
border: 1rpx solid #e9231b;
color: #e9231b;
font-size: 28rpx;
font-family: PingFang SC;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>
src/pages/order/detail.vue 0 → 100644
View file @ a1f95c48
<template>
<div 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>
</template>
<script setup>
import Header from './components/Header/index.vue';
</script>
<style scoped lang="scss">
.container {
background-color: #f5f5f5;
height: 100vh;
}
.content {
padding-top: 44px;
}
.status {
display: flex;
flex-direction: column;
padding: 32rpx 20rpx;
gap: 6rpx;
.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;
}
}
</style>
src/pages/order/order.vue 0 → 100644
View file @ a1f95c48
<template>
<div class="container">
<Header title="全部订单"></Header>
<div 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">
<OrderList></OrderList>
</wd-tab>
</block>
</wd-tabs>
</div>
</div>
</template>
<script setup>
import Header from './components/Header/index.vue';
import OrderList from './components/OrderList/index.vue';
const tabs = ref(['全部', '待付款', '待收货', '待使用', '待评价', '退款/售后']);
const tab = ref('待使用');
</script>
<style scoped lang="scss">
.container {
background-color: #f5f5f5;
height: 100vh;
}
.tabs {
padding-top: 44px;
.wd-tabs {
background-color: #f5f5f5;
}
&:deep(.wd-tabs__nav) {
background-color: #f5f5f5;
}
&: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