所有页面css 规范
This commit is contained in:
hupeng committed
1 parent
50fbcfe27b
commit
b168232fbb
30 files changed
+5026
-3580
No files matched your search
@@ -5,16 +5,16 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container">
|
||||
<view class="container order-page">
|
||||
<view class="bg-white">
|
||||
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
|
||||
</view>
|
||||
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
|
||||
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" >
|
||||
<view class="order-page__list d-flex flex-column w-100">
|
||||
<view class="order-item" v-for="(item, index) in orders" :key="index">
|
||||
<list-cell :hover="false">
|
||||
<view class="w-100 d-flex align-items-center">
|
||||
<view class="flex-fill d-flex flex-column">
|
||||
<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
|
||||
<view class="font-size-lg text-color-base order-item__shop">
|
||||
{{ item.shop.name }}
|
||||
</view>
|
||||
<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
|
||||
@@ -27,9 +27,9 @@
|
||||
</list-cell>
|
||||
<list-cell :hover="false" last>
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
|
||||
<view class="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index">
|
||||
<image :src="good.image" mode="aspectFill" class="image"></image>
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base order-item__goods">
|
||||
<view class="flex order-item__goods-row mb-2" v-for="(good,index) in item.cartInfo" :key="index">
|
||||
<image :src="good.image" mode="aspectFill" class="order-item__thumb"></image>
|
||||
<view class="flex flex-column">
|
||||
<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
|
||||
<view class="font-size-sm mt-1">{{ good.spec }}</view>
|
||||
@@ -37,20 +37,24 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
|
||||
<view class="d-flex justify-content-between align-items-center order-item__meta">
|
||||
<view class="font-size-sm text-color-assist">
|
||||
{{formatDateTime(item.createTime) }}
|
||||
</view>
|
||||
<view class="d-flex font-size-sm text-color-base align-items-center">
|
||||
<view style="margin-right: 10rpx;">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
|
||||
<view class="order-item__summary">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
|
||||
<view class="font-size-lg">￥{{ item.payPrice }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex align-items-center justify-content-end">
|
||||
<view>
|
||||
<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin" plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
|
||||
<button class="left-margin" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
|
||||
</view>
|
||||
<view class="d-flex align-items-center justify-content-end order-item__actions">
|
||||
<button
|
||||
v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
|
||||
class="order-item__btn"
|
||||
plain
|
||||
size="mini"
|
||||
@tap.stop="receive(item)"
|
||||
>确认收到餐</button>
|
||||
<button class="order-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
@@ -62,9 +66,9 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
computed
|
||||
computed
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
@@ -72,7 +76,7 @@ import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
orderGetOrders,
|
||||
orderReceive
|
||||
orderReceive
|
||||
} from '@/api/order'
|
||||
const main = useMainStore()
|
||||
const { isLogin } = storeToRefs(main)
|
||||
@@ -163,13 +167,54 @@ const receive = async(order) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-margin {
|
||||
margin-left: 10rpx;
|
||||
// 订单页局部 token（与 uni.scss 全局变量配合）
|
||||
$order-list-padding-x: $spacing-row-base;
|
||||
$order-list-padding-bottom: 0;
|
||||
$order-item-gap: $spacing-row-lg;
|
||||
$order-section-gap: $spacing-row-base;
|
||||
$order-btn-gap: $spacing-row-base;
|
||||
$order-summary-gap: $spacing-row-base;
|
||||
$order-thumb-size: 160rpx;
|
||||
$order-thumb-radius: 8rpx;
|
||||
|
||||
.order-page {
|
||||
--order-thumb-size: #{$order-thumb-size};
|
||||
|
||||
&__list {
|
||||
padding: $order-list-padding-x;
|
||||
padding-bottom: $order-list-padding-bottom;
|
||||
}
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
margin-bottom: $order-item-gap;
|
||||
|
||||
&__shop {
|
||||
margin-bottom: $order-section-gap;
|
||||
}
|
||||
|
||||
&__goods {
|
||||
margin-bottom: $order-section-gap;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
flex-shrink: 0;
|
||||
width: var(--order-thumb-size);
|
||||
height: var(--order-thumb-size);
|
||||
margin-right: $spacing-row-lg;
|
||||
border-radius: $order-thumb-radius;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
margin-bottom: $order-item-gap;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
margin-right: $order-summary-gap;
|
||||
}
|
||||
|
||||
&__btn + &__btn {
|
||||
margin-left: $order-btn-gap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user