hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页接单列表开发、按钮组件增加文本颜色属性、引入占位区域组件

Browse Source
This commit is contained in:
gcd 2025-03-26 17:22:54 +08:00
parent 8e11b6949f
commit e0f316f278
5 changed files with 289 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@ -5,7 +5,7 @@ import {reactive, provide, inject} from 'vue'
//定义全局数据
const globalData = reactive({
appName: '超邦手工单系统',
appIcon: 'https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20230621/444e73968f4c666bdadbe2e1f8e3ba63.png',
appIcon: 'https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20250325/77e65857af564c0dda57e1a195da19c3.png',
statusBarH: '',
customBarH: ''
})

18
components/me-button/me-button.vue
View File

@ -14,19 +14,19 @@
<view class="icon" v-if="iconType">
<me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
</view>
<text>{{ text }}</text>
<text class="text">{{ text }}</text>
</view>
</view>
<!--纯色按钮-->
<view v-else
:class="['flex-c', 'btn', isActive ? 'btn-active' : 'btn-default']"
:style="{backgroundColor: btnBgColor}"
:class="['flex-c', 'btn', isActive ? '' : 'btn-default']"
:style="{backgroundColor: btnBgColor, color: textColor}"
>
<view class="icon" v-if="iconType">
<me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
</view>
<text>{{ text }}</text>
<text class="text">{{ text }}</text>
</view>
</view>
</template>
@ -83,6 +83,12 @@ const props = defineProps({
type: String,
required: false,
default: 'var(--themeColor)',
},
//按钮文本颜色
textColor: {
type: String,
required: false,
default: '#FFFFFF',
}
});
@ -128,6 +134,10 @@ const submit = () => {
text-align: center;
color: transparent;
transition: background .2s ease;
.text {
height: 96rpx;
line-height: 96rpx;
}
}
.btn-active {
color: #FFFFFF;

19
components/me-empty-space/me-empty-space.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<view class="me-empty-space" :style="{height: height + 'rpx'}"></view>
</template>
<script setup>
const props = defineProps({
height: {
type: [Number, String],
required: false,
default: 100,
}
});
</script>
<style lang="scss">
.me-empty-space {
width: 100%;
}
</style>

15
pages.json
View File

@ -1,5 +1,13 @@
{
"pages": [
{
"path" : "pages/index/index",
"style" :
{
"navigationBarTitleText" : "接单大厅",
"navigationStyle": "custom"
}
},
{
"path" : "pages/user/login",
"style" :
@ -8,13 +16,6 @@
"disableScroll": true
}
},
{
"path" : "pages/index/index",
"style" :
{
"navigationBarTitleText" : "接单大厅"
}
},
{
"path" : "pages/workbench/workbench",
"style" :

262
pages/index/index.vue
View File

@ -1,22 +1,254 @@
<template>
<view>
<view class="ctr">
<view class="fixed-top">
<view class="status-bar" :style="{height: data.globalData.statusBarH+'px'}"></view>
<view class="capsule flex-c" :style="{height: data.globalData.customBarH - data.globalData.statusBarH+'px'}">
<view class="icon-ctr flex-c">
<image class="icon" mode="aspectFill" :src="data.globalData.appIcon"></image>
</view>
<text class="title">接单大厅</text>
</view>
</view>
<me-empty-space :height="listMarginTop"></me-empty-space>
<view class="list">
<view class="item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r">平台已收款</view>
</view>
<view class="content flex-sb">
<view class="left">
<view class="address-name flex-l">
金城花园(天府二街)
</view>
<view class="address">
广东省茂名市茂南区金城路26号大院附近
</view>
<view class="time-ctr flex-l">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">周日 10月08日 12:30</text>
</view>
</view>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c">8.34公里</view>
</view>
</view>
<view class="btn-ctr flex-sb">
<me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
</view>
</view>
<view class="item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r important-color">上门报价</view>
</view>
<view class="content flex-sb">
<view class="left">
<view class="address-name flex-l">
金城花园(天府二街)
</view>
<view class="address">
广东省茂名市茂南区金城路26号大院附近
</view>
<view class="time-ctr flex-l">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">周日 10月08日 12:30</text>
</view>
</view>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c">8.34公里</view>
</view>
</view>
<view class="discount flex-l">已支付订金：30元抵扣50元</view>
<view class="btn-ctr flex-sb">
<me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
</view>
</view>
<view class="item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r important-color">上门报价</view>
</view>
<view class="content flex-sb">
<view class="left">
<view class="address-name flex-l">
金城花园(天府二街)
</view>
<view class="address">
广东省茂名市茂南区金城路26号大院附近
</view>
<view class="time-ctr flex-l">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">周日 10月08日 12:30</text>
</view>
</view>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c">8.34公里</view>
</view>
</view>
<view class="discount flex-l">已支付订金：30元抵扣50元</view>
<view class="btn-ctr flex-sb">
<me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
</view>
</view>
</view>
<me-empty-space height="100"></me-empty-space>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
<script setup>
import {onLoad, onShow} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
const data = reactive({
globalData: {},
})
onLoad(() => {
data.globalData = inject('globalData')
})
const listMarginTop = computed(() => {
return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH)) * 2
})
</script>
<style>
<style lang="scss" scoped>
.ctr {
padding: 0 32rpx;
box-sizing: border-box;
.fixed-top {
position: fixed;
top: 0;
background-color: var(--pageBgColor);
width: 100%;
.capsule {
.icon-ctr {
width: 60rpx;
height: 60rpx;
border: 1px solid #E9F1FE;
border-radius: 50%;
position: absolute;
left: 0;
.icon {
width: 80%;
height: 80%;
border-radius: 50%;
}
}
.title {
font-weight: 500;
font-size: 32rpx;
color: var(--titleColor);
margin-left: -60rpx;
}
}
}
.list {
.item {
width: 100%;
background: var(--containerBgColor);
border-radius: 16rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 32rpx;
.top {
height: 60rpx;
.type,.price {
width: 323rpx;
height: 100%;
}
.type {
font-weight: 500;
font-size: 34rpx;
color: var(--titleColor);
}
.price {
font-size: 30rpx;
color: var(--summaryColor);
}
.important-color {
color: var(--importantColor) !important;
}
}
.content {
width: 100%;
.left {
width: 466rpx;
.address-name {
width: 100%;
min-height: 60rpx;
font-size: 30rpx;
color: var(--titleColor);
line-height: 44rpx;
}
.address {
width: 100%;
min-height: 60rpx;
font-size: 28rpx;
color: var(--summaryColor);
line-height: 44rpx;
}
.time-ctr {
width: 100%;
min-height: 80rpx;
font-size: 28rpx;
color: var(--themeColor);
line-height: 44rpx;
.time {
margin-left: 8rpx;
}
}
}
.right {
width: 180rpx;
.icon-ctr {
width: 100%;
height: 60rpx;
}
.distance {
width: 100%;
height: 44rpx;
font-size: 28rpx;
color: var(--titleColor);
line-height: 44rpx;
margin-top: 32rpx;
}
}
}
.discount {
width: 100%;
height: 64rpx;
background: rgba(230,82,31,0.1);
border-radius: 16rpx;
font-size: 28rpx;
color: var(--importantColor);
padding: 0 16rpx;
box-sizing: border-box;
}
.btn-ctr {
width: 100%;
height: 126rpx;
box-sizing: border-box;
margin-top: 10rpx;
}
}
}
}
</style>