parent
734b3b8101
commit
dd4163ceca
@ -1,141 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import newsItem from './components/newsItem.vue'
|
||||
import noticeItem from './components/noticeItem.vue'
|
||||
// 获取屏幕边界到安全区域距离
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
|
||||
// tabs 数据
|
||||
const orderTabs = ref([
|
||||
{ orderState: 0, title: '通知', isRender: false },
|
||||
{ orderState: 1, title: '私信', isRender: false },
|
||||
])
|
||||
// 高亮下标
|
||||
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(0)))
|
||||
|
||||
// 默认渲染容器
|
||||
orderTabs.value[activeIndex.value].isRender = true
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <CartMain /> -->
|
||||
<view class="viewport">
|
||||
<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
|
||||
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
|
||||
<view class="wrap">
|
||||
<navigator open-type="navigateBack" class="back icon-left"></navigator>
|
||||
<view class="title"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<text
|
||||
class="item"
|
||||
:class="{ active: activeIndex == index }"
|
||||
v-for="(item, index) in orderTabs"
|
||||
:key="item.title"
|
||||
@tap="
|
||||
() => {
|
||||
activeIndex = index
|
||||
item.isRender = true
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ item.title }}
|
||||
</text>
|
||||
<!-- 游标 -->
|
||||
<view class="cursor" :style="{ left: activeIndex ? '65%' : '14%' }"></view>
|
||||
</view>
|
||||
<!-- 滑动容器 -->
|
||||
<swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
|
||||
<!-- 滑动项 -->
|
||||
<swiper-item v-for="item in orderTabs" :key="item.title">
|
||||
<newsItem v-if="activeIndex" />
|
||||
<noticeItem v-else />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
.viewport {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// background-color: #3775F6;
|
||||
.navbar {
|
||||
width: 750rpx;
|
||||
color: #000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
/* background-color: #f8f8f8; */
|
||||
background-color: #3775f6;
|
||||
.wrap {
|
||||
position: relative;
|
||||
background-color: #3775f6;
|
||||
.title {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
/* color: #000; */
|
||||
color: #fff;
|
||||
}
|
||||
.back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
font-size: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* color: #000; */
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 60rpx;
|
||||
background-color: #3775f6;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
margin-top: 128rpx;
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
// &.active {
|
||||
// border-bottom: 2rpx solid #5386e4;
|
||||
// }
|
||||
}
|
||||
|
||||
.cursor {
|
||||
position: absolute;
|
||||
left: 13%;
|
||||
bottom: 0;
|
||||
width: 20%;
|
||||
height: 6rpx;
|
||||
padding: 0 50rpx;
|
||||
background-color: #fff;
|
||||
/* 过渡效果 */
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
// swiper
|
||||
.swiper {
|
||||
background-color: #f7f7f8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,121 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const handleSubmit = async () => {}
|
||||
</script>
|
||||
<template>
|
||||
<view class="viewport">
|
||||
<view class="section-auto">
|
||||
<view class="left">
|
||||
<view class="title">自动接单</view>
|
||||
<view class="desc">开启后将根据配置情况自动接单</view>
|
||||
</view>
|
||||
<view class="switch">
|
||||
<switch checked color="#3775F6" style="transform: scale(0.7)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="section-time">
|
||||
<view class="start-time item">
|
||||
<view class="left">
|
||||
<view class="title">开始接单时间</view>
|
||||
<view class="val">2024-01-16 13:25:22</view>
|
||||
</view>
|
||||
<view class="edit">修改</view>
|
||||
</view>
|
||||
<view class="end-time item">
|
||||
<view class="left">
|
||||
<view class="title">结束接单时间</view>
|
||||
<view class="val">2024-01-16 13:25:22</view>
|
||||
</view>
|
||||
<view class="edit">修改</view>
|
||||
</view>
|
||||
<view class="auto-num item">
|
||||
<view class="left">
|
||||
<view class="title">自动接单范围</view>
|
||||
<view class="val">4km</view>
|
||||
</view>
|
||||
<view class="edit">修改</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action" @click="handleSubmit"> 保存修改 </view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #fafafd;
|
||||
}
|
||||
.viewport {
|
||||
padding: 10rpx;
|
||||
|
||||
.section-auto {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0rpx;
|
||||
margin: 20rpx 0;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 8px 0px rgba(164, 182, 203, 0.33);
|
||||
|
||||
.left {
|
||||
margin-left: 30rpx;
|
||||
.title {
|
||||
color: #3d3d3d;
|
||||
font-size: 34rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.desc {
|
||||
color: #999a9f;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-time {
|
||||
padding: 30rpx 30rpx;
|
||||
margin: 20rpx 0;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0px 0px 8px 0px rgba(164, 182, 203, 0.33);
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 20rpx 0;
|
||||
padding-bottom: 10rpx;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
.left {
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
color: #3d3d3d;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.val {
|
||||
color: #999a9f;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.edit {
|
||||
color: #3775f6;
|
||||
font-size: 40rpx;
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.action {
|
||||
width: 344rpx;
|
||||
margin: 100rpx auto 0;
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30rpx 30rpx;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
background: linear-gradient(152deg, #51b6ff 16%, #3775f6 86%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in new issue