xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-22 20:13:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

【smart-app更新】1、版本更新记录；2、复杂表单‘3、引入tabs组件

Browse Source
This commit is contained in:
zhuoda
2024-03-15 22:43:39 +08:00
parent d170a9d189
commit 4b36de6de5
47 changed files with 1182 additions and 1678 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
smart-app/.env.production
View File

@@ -1,3 +1,3 @@
NODE_ENV=production
VITE_APP_TITLE='SmartH5 V3.X'
VITE_APP_API_URL='https://preview.smartadmin.vip/smart-admin-api'
VITE_APP_TITLE='Smart App V3.X'
VITE_APP_API_URL='https://app.smartadmin.vip/smart-app-api'

32
smart-app/package.json
View File

@@ -1,6 +1,13 @@
{
"name": "uni-preset-vue",
"version": "0.0.0",
"name": "smart-app",
"version": "3.0.0",
"author": {
"name": "1024创新实验室（1024lab）",
"email": "lab1024@163.com",
"url": "https://www.1024lab.net"
},
"license": "MIT",
"homepage": "https://smartadmin.1024lab.net",
"scripts": {
"dev:app": "uni -p app",
"dev:app-android": "uni -p app-android",
@@ -55,12 +62,13 @@
"@dcloudio/uni-mp-xhs": "3.0.0-3090920231225001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3090920231225001",
"@dcloudio/uni-ui": "1.5.0",
"lodash": "^4.17.21",
"pinia": "^2.0.36",
"vue": "3.2.47",
"vue-i18n": "9.1.9",
"crypto-js": "4.1.1",
"dayjs": "1.11.10",
"lodash": "4.17.21",
"pinia": "2.0.36",
"sm-crypto": "0.3.13",
"crypto-js": "4.1.1"
"vue": "3.2.47",
"vue-i18n": "9.1.9"
},
"devDependencies": {
"@dcloudio/types": "3.3.2",
@@ -69,13 +77,13 @@
"@dcloudio/uni-stacktracey": "3.0.0-3090920231225001",
"@dcloudio/vite-plugin-uni": "3.0.0-3090920231225001",
"@vue/runtime-core": "3.2.45",
"sass": "1.69.7",
"sass-loader": "10.1.1",
"vite": "4.0.3",
"prettier": "3.0.2",
"eslint": "8.16.0",
"eslint-config-prettier": "9.0.0",
"eslint-plugin-prettier": "5.0.0",
"eslint-plugin-vue": "9.17.0"
"eslint-plugin-vue": "9.17.0",
"prettier": "3.0.2",
"sass": "1.69.7",
"sass-loader": "10.1.1",
"vite": "4.0.3"
}
}

3
smart-app/src/App.vue
View File

@@ -14,6 +14,5 @@
</script>
<style lang="scss">
/*每个页面公共css */
@import url('./theme/index.scss');
@import '@/uni_modules/uni-scss/index.scss';
</style>

0
smart-app/src/components/smart-tabs/index.vue → smart-app/src/components/smart-detail-tabs/index.vue
View File

4
smart-app/src/main.js
View File

@@ -1,6 +1,10 @@
import { createSSRApp } from 'vue';
import App from './App.vue';
import { store } from './store/index';
/*每个页面公共css */
import './theme/index.scss';
// 枚举管理
import smartEnumPlugin from '/@/plugins/smart-enums-plugin';
import constantsInfo from '/@/constants/index';

28
smart-app/src/pages.json
View File

@@ -102,15 +102,6 @@
"navigationBarBackgroundColor": "#fff"
}
},
{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText" : "常见列表",
"enablePullDownRefresh" : true,
"navigationStyle": "custom"
}
},
{
"path" : "pages/message/message",
"style" :
@@ -139,10 +130,19 @@
}
},
{
"path" : "pages/pure-list/pure-list",
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText" : "列表",
"navigationBarTitleText" : "常见列表样式1",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
},
{
"path" : "pages/list2/list",
"style" :
{
"navigationBarTitleText" : "常见列表样式2",
"enablePullDownRefresh" : false,
"navigationBarBackgroundColor": "#fff"
}
@@ -180,6 +180,12 @@
"selectedIconPath": "static/images/tabbar/list-icon-h.png",
"text": "常见列表"
},
{
"pagePath": "pages/list2/list",
"iconPath": "static/images/tabbar/list-icon.png",
"selectedIconPath": "static/images/tabbar/list-icon-h.png",
"text": "常见列表2"
},
{
"pagePath": "pages/message/message",
"iconPath": "static/images/tabbar/message-icon.png",

52
smart-app/src/pages/enterprise/enterprise-detail.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="container">
<view>
<smart-tabs :tabsList="tabs" v-model="smartTabIndex" @change="onTabChange" :fixed="true" />
<smart-detail-tabs :tabsList="tabs" v-model="smartTabIndex" @change="onTabChange" :fixed="true" />
</view>
<view class="smart-detail smart-margin-top60 content" id="detail1">
<view class="smart-detail-card">
@@ -83,7 +83,7 @@
</template>
<script setup>
import SmartTabs from '/@/components/smart-tabs/index.vue';
import SmartDetailTabs from '/@/components/smart-detail-tabs/index.vue';
import { ref, reactive } from 'vue';
import { enterpriseApi } from '/@/api/business/oa/enterprise-api';
import { onShow, onLoad } from '@dcloudio/uni-app';
@@ -222,54 +222,6 @@
overflow-y: scroll;
}
.smart-detail {
.smart-detail-card {
background-color: white;
margin: 0 auto 14px auto;
width: 94%;
border-radius: 16rpx;
box-sizing: border-box;
padding: 16rpx 30rpx;
.smart-detail-card-title {
height: 70rpx;
display: flex;
align-items: center;
font-size: $uni-font-size-lg;
color: #323333;
font-weight: bold;
margin-bottom: 16rpx;
&::before {
content: '';
height: 32rpx;
width: 3px;
border-radius: 4rpx;
margin-right: 10rpx;
background-color: $uni-color-primary;
}
}
.smart-detail-card-cell {
display: flex;
min-height: 80rpx;
padding: 10rpx 0;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
border-top: 1rpx solid #ededed;
.smart-detail-card-label {
color: #666666;
font-size: $uni-font-size-lg;
}
.smart-detail-card-value {
color: black;
font-size: $uni-font-size-lg;
padding: 20rpx 0;
}
}
}
}
.content {
margin-bottom: 120px;
}

19
smart-app/src/pages/home/components/menu.vue
View File

@@ -41,22 +41,23 @@
<view class="item-text"> 复杂表单 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="switchTab('/pages/list/list')">
<image class="item-image" src="/@/static/images/index/ic_home_menu9.png"></image>
<view class="item-text"> 常见列表 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="navigateTo('/pages/order-detail/order-detail')">
<image class="item-image" src="/@/static/images/index/ic_home_menu7.png"></image>
<view class="item-text"> 物流快递 </view>
<view class="item-text"> 复杂详情 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="navigateTo('/pages/pure-list/pure-list')">
<view class="menu-item" @click="switchTab('/pages/list/list')">
<image class="item-image" src="/@/static/images/index/ic_home_menu9.png"></image>
<view class="item-text"> 列表样式1 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="switchTab('/pages/list2/list')">
<image class="item-image" src="/@/static/images/index/ic_home_menu8.png"></image>
<view class="item-text"> 优惠券 </view>
<view class="item-text"> 列表样式2 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">

86
smart-app/src/pages/list/components/list-model-one.vue
View File

@@ -1,86 +0,0 @@
<template>
<view class="list-view">
<view class="item">
<view class="item-top">
<view class="item-top-info">
<view class="name"> 彭嘉轩 </view>
<view class="mobile"> 13011112338 </view>
</view>
<view class="item-top-phone"> <image src="/static/images/list/phone.png" mode=""></image> 联系Ta </view>
</view>
<view class="item-title"> 最后跟进内容：上午跟客户谈了下 </view>
<view class="item-bottom"> 2022-08-20 19:15 最后活跃 </view>
</view>
</view>
</template>
<script setup>
defineProps({
list: {
type: Array,
default: [],
},
});
</script>
<style lang="scss" scoped>
.list-view {
margin: 20rpx 24rpx;
}
.item {
box-sizing: border-box;
width: 700rpx;
height: 240rpx;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
padding: 24rpx 30rpx;
.item-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.item-top-info {
display: flex;
align-items: center;
.name {
font-size: 34rpx;
font-weight: 500;
color: #444444;
margin-right: 10rpx;
}
.mobile {
font-size: 32rpx;
font-weight: bold;
text-align: left;
color: #444444;
}
}
.item-top-phone {
color: #1a9aff;
font-size: 28rpx;
display: flex;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
margin-left: 4rpx;
}
}
}
.item-title {
font-size: 28rpx;
color: #777777;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #ededed;
margin-bottom: 24rpx;
}
.item-bottom {
font-size: 28rpx;
color: #777777;
}
}
</style>

154
smart-app/src/pages/list/components/list-ui1.vue Normal file
View File

@@ -0,0 +1,154 @@
<template>
<view class="list-view">
<view class="item" v-for="item in data">
<view class="item-top">
<view class="item-top-info">
<view class="name"> {{ item.name }} </view>
<view class="mobile"> {{ item.phone }} </view>
</view>
<view class="item-top-phone"> <image src="/static/images/list/phone.png" mode=""></image> 联系Ta </view>
</view>
<view class="item-title"> 最后跟进内容：{{ item.content }} </view>
<view class="item-bottom"> 最后跟进时间：{{ item.time }} </view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const data = ref([
{
name: '卓大',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '胡可',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '开云',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '清野',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '善逸',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '飞叶',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '启阳',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '卓大',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '卓大',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '卓大',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '卓大',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
{
name: '卓大',
phone: '18610241024',
content: '上午跟客户谈了下合作意向，对方比较认可',
time: '2023-01-03 12:14:10',
},
]);
</script>
<style lang="scss" scoped>
.list-view {
margin: 20rpx 24rpx;
}
.item {
box-sizing: border-box;
width: 700rpx;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
padding: 24rpx 30rpx;
border-bottom: 1rpx solid #ededed;
margin-bottom: 24rpx;
.item-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.item-top-info {
display: flex;
align-items: center;
.name {
font-size: 34rpx;
font-weight: 500;
color: #444444;
margin-right: 10rpx;
}
.mobile {
font-size: 32rpx;
font-weight: bold;
text-align: left;
color: #444444;
}
}
.item-top-phone {
color: #1a9aff;
font-size: 28rpx;
display: flex;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
margin-left: 4rpx;
}
}
}
.item-title {
font-size: 28rpx;
color: #777777;
margin-bottom: 24rpx;
}
.item-bottom {
font-size: 28rpx;
color: #777777;
}
}
</style>

42
smart-app/src/pages/list/components/list-model-two.vue → smart-app/src/pages/list/components/list-ui2.vue
View File

@@ -3,19 +3,52 @@
<view class="item">
<view class="item-header">
<view class="item-top">
<view class="item-top-left"> 2023-08-20 19:15 </view>
<view class="item-top-left">订单号：DD238647624875 </view>
<view class="item-top-right">
<view class="tag" type="warring"> 未付款 </view>
</view>
</view>
<view class="line-border-bottom"> </view>
<view class="item-title"> 订单标题 </view>
<view class="item-title"> 小米手机20S </view>
<view class="item-sub-title"> 订单金额：¥5852.00 </view>
<view class="item-sub-title"> 客户：1024创新实验室 </view>
<view class="item-sub-title"> 下单时间： 2023-08-20 19:15 </view>
</view>
<view class="order-end-time"> 剩余 29:35:07 关闭订单 </view>
</view>
<view class="item">
<view class="item-header">
<view class="item-top">
<view class="item-top-left">订单号：DD2382354875 </view>
<view class="item-top-right">
<view class="tag" type="success"> 完成 </view>
</view>
</view>
<view class="line-border-bottom"> </view>
<view class="item-title"> 苹果Iphone30 </view>
<view class="item-sub-title"> 订单金额：¥5852.00 </view>
<view class="item-sub-title"> 客户：卓大 </view>
<view class="item-sub-title"> 下单时间： 2023-08-20 19:15 </view>
</view>
</view>
<view class="item">
<view class="item-header">
<view class="item-top">
<view class="item-top-left">订单号：DD238643287 </view>
<view class="item-top-right">
<view class="tag" type="success"> 完成 </view>
</view>
</view>
<view class="line-border-bottom"> </view>
<view class="item-title"> 华为Mate100 </view>
<view class="item-sub-title"> 订单金额：¥5852.00 </view>
<view class="item-sub-title"> 客户：卓大 </view>
<view class="item-sub-title"> 下单时间： 2023-08-20 19:15 </view>
</view>
</view>
</view>
</template>
@@ -42,6 +75,7 @@
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
padding-top: 24rpx;
margin-bottom: 30rpx;
overflow: hidden;
.item-top {
@@ -67,7 +101,7 @@
background: #fff0ed;
}
&[type='success'] {
color: #323333;
color: $uni-color-success;
background: #f7f8f9;
}
}
@@ -85,7 +119,7 @@
.item-sub-title {
font-size: 28rpx;
color: #777777;
margin-bottom: 10rpx;
margin-top: 20rpx;
&:last-child {
padding-bottom: 20rpx;
margin-bottom: 0;

93
smart-app/src/pages/list/components/list-model-three.vue → smart-app/src/pages/list/components/list-ui3.vue
View File

@@ -45,6 +45,98 @@
</view>
</view>
</view>
<view class="item">
<view class="item-header">
<view class="item-top">
<view class="item-top-left"> 2023-08-20 19:15 </view>
<view class="item-top-right">
<view class="tag" type="warring"> 未付款 </view>
</view>
</view>
<view class="line-border-bottom"> </view>
<view class="item-center">
<view class="item-center-left">
<view class="item-top-z"> 装 </view>
<view class="item-center"> </view>
<view class="item-bottom-x"> 卸 </view>
</view>
<view class="item-center-address">
<view class="m-b-16">
<view class="item-title"> 装货地址 </view>
<view class="item-address"> 河南省洛阳市洛龙区110号 </view>
</view>
<view class="m-b-16">
<view class="item-title"> 卸货地址 </view>
<view class="item-address"> 河南省洛阳市西工区120号 </view>
</view>
</view>
</view>
<view class="line-border-bottom"> </view>
<view class="item-footer">
<view class="item-footer-left">
<text>￥586.00</text>
</view>
<view class="item-footer-right">
<view class="camera">
<image src="/static/images/list/camera.png" mode=""></image>
拍照
</view>
<view class="ok">
<image src="/static/images/list/success.png" mode=""></image>
完成
</view>
</view>
</view>
</view>
</view>
<view class="item">
<view class="item-header">
<view class="item-top">
<view class="item-top-left"> 2023-08-20 19:15 </view>
<view class="item-top-right">
<view class="tag" type="warring"> 未付款 </view>
</view>
</view>
<view class="line-border-bottom"> </view>
<view class="item-center">
<view class="item-center-left">
<view class="item-top-z"> 装 </view>
<view class="item-center"> </view>
<view class="item-bottom-x"> 卸 </view>
</view>
<view class="item-center-address">
<view class="m-b-16">
<view class="item-title"> 装货地址 </view>
<view class="item-address"> 河南省洛阳市洛龙区110号 </view>
</view>
<view class="m-b-16">
<view class="item-title"> 卸货地址 </view>
<view class="item-address"> 河南省洛阳市西工区120号 </view>
</view>
</view>
</view>
<view class="line-border-bottom"> </view>
<view class="item-footer">
<view class="item-footer-left">
<text>￥586.00</text>
</view>
<view class="item-footer-right">
<view class="camera">
<image src="/static/images/list/camera.png" mode=""></image>
拍照
</view>
<view class="ok">
<image src="/static/images/list/success.png" mode=""></image>
完成
</view>
</view>
</view>
</view>
</view>
</view>
</template>
@@ -73,6 +165,7 @@
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
padding-top: 24rpx;
margin-bottom: 30rpx;
overflow: hidden;
.item-top {

95
smart-app/src/pages/list/components/list-model-four.vue → smart-app/src/pages/list/components/list-ui4.vue
View File

@@ -19,28 +19,82 @@
</view>
<view class="item-top-item">
<view class="item-top-label"> 客户经理： </view>
<view class="item-title"> 林jj </view>
<view class="item-title"> 卓大 </view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 生产厂商： </view>
<view class="item-title"> 闫jj </view>
<view class="item-title"> 1024工厂 </view>
</view>
</view>
<!-- <view class="decollator">
<view class="decollator-left">
</view>
<view class="decollator-center">
</view>
<view class="decollator-right">
</view>
</view> -->
<view class="item-footer">
<view class="item-footer-left"> 订单总价： </view>
<!-- <image src="" mode=""></image> -->
<view class="item-footer-left"> 付款金额： </view>
<view class="item-footer-right"> ￥300000.00 </view>
</view>
</view>
<view class="item">
<view class="item-top">
<view class="item-top-item">
<view class="item-top-label"> 创建时间： </view>
<view class="item-title"> 2023-08-27 21:33 </view>
<view class="item-state">
<view class="tag" type="success"> 已付款 </view>
</view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 客户名称： </view>
<view class="item-title"> 六边形工程师 </view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 供应商名称： </view>
<view class="item-title"> 1024数字科技有限公司 </view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 客户经理： </view>
<view class="item-title"> 卓大 </view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 生产厂商： </view>
<view class="item-title"> 1024工厂 </view>
</view>
</view>
<view class="item-footer">
<view class="item-footer-left"> 付款金额： </view>
<view class="item-footer-right"> ￥300000.00 </view>
</view>
</view>
<view class="item">
<view class="item-top">
<view class="item-top-item">
<view class="item-top-label"> 创建时间： </view>
<view class="item-title"> 2024-01-11 21:33 </view>
<view class="item-state">
<view class="tag" type="warring"> 未付款 </view>
</view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 客户名称： </view>
<view class="item-title"> 孙传芳 </view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 供应商名称： </view>
<view class="item-title"> 1024数字科技有限公司 </view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 客户经理： </view>
<view class="item-title"> 胡克 </view>
</view>
<view class="item-top-item">
<view class="item-top-label"> 生产厂商： </view>
<view class="item-title"> 数字工厂 </view>
</view>
</view>
<view class="item-footer">
<view class="item-footer-left"> 付款金额： </view>
<view class="item-footer-right"> ￥300000.00 </view>
</view>
</view>
@@ -101,6 +155,7 @@
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
padding-top: 24rpx;
margin-bottom: 30rpx;
overflow: hidden;
.item-top {
@@ -134,8 +189,12 @@
line-height: 40rpx;
font-size: 24rpx;
&[type='warring'] {
color: #ff6c00;
background: #fff0ed;
background-color: $error-color;
color: white;
}
&[type='success'] {
background-color: $uni-color-success;
color: white;
}
}
}
@@ -180,7 +239,7 @@
}
.item-footer-right {
font-size: 34rpx;
color: #444;
color: red;
font-weight: bold;
}
}

58
smart-app/src/pages/list/components/tabs.vue
View File

@@ -1,58 +0,0 @@
<template>
<view class="tabs">
<view class="item" @click="value = item.value" v-for="(item,index) in list" :key="index">
{{item.title}}
<view class="tabs-slide" v-if="value === item.value">
</view>
</view>
</view>
</template>
<script setup>
import { ref, watch } from 'vue';
const emits = defineEmits(['update:value'])
const props = defineProps({
value:{
type:Number,
default:0
},
list:{
type:Array,
default:[]
}
})
watch(()=>props.value,(newValue,oldValue)=>{
emits('update:value',newValue)
})
</script>
<style lang="scss" scoped>
.tabs{
box-sizing: border-box;
height: 100rpx;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 30rpx;
align-items: center;
position: relative;
background-color: #fff;
.item{
position: relative;
height: 100%;
line-height: 100rpx;
}
.tabs-slide{
position: absolute;
transition: 0.3s;
width: 50%;
background: #1a9aff;
border-radius: 4rpx;
height: 8rpx;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
}
</style>

78
smart-app/src/pages/list/list.vue
View File

@@ -1,53 +1,50 @@
<template>
<view>
<uni-nav-bar :border="false" fixed>
<view class="input">
<icon type="search" size="16"/>
<input placeholder="请输入搜索关键字" placeholder-class="placeolder-input"/>
</view>
<template #right>
<uni-icons type="list" size="30"></uni-icons>
</template>
</uni-nav-bar>
<Tabs v-model:value="active" :list="tabsList"/>
<ListModelOne v-if="active==0"></ListModelOne>
<ListModelTwo v-if="active==1"/>
<ListModelThree v-if="active==2"/>
<ListModelFour v-if="active==3"/>
<y-tabs v-model="active" sticky :offsetTop="0" color="#007aff">
<y-tab class="y-tab-virtual" v-for="item in tabsList" :key="item.value" :title="item.title"> </y-tab>
</y-tabs>
<ListUI1 v-if="active === 0" />
<ListUI2 v-if="active === 1" />
<ListUI3 v-if="active === 2" />
<ListUI4 v-if="active === 3" />
</view>
</template>
<script setup>
import { ref } from 'vue'
import Tabs from './components/tabs.vue'
import ListModelOne from './components/list-model-one.vue'
import ListModelTwo from './components/list-model-two.vue'
import ListModelThree from './components/list-model-three.vue'
import ListModelFour from './components/list-model-four.vue'
import { ref } from 'vue';
import ListUI1 from './components/list-ui1.vue';
import ListUI2 from './components/list-ui2.vue';
import ListUI3 from './components/list-ui3.vue';
import ListUI4 from './components/list-ui4.vue';
const active = ref(0);
const tabsList = [{
title:'线索列表',
value:0
},{
title:'我的订单',
value:1
},{
title:'我的运单',
value:2
},{
title:'付款单',
value:3
}]
const active = ref(0);
const tabsList = [
{
title: '线索列表',
value: 0,
},
{
title: '我的订单',
value: 1,
},
{
title: '我的运单',
value: 2,
},
{
title: '付款单',
value: 3,
},
];
</script>
<style lang="scss" scoped>
page{
page {
background: #f5f6f8;
}
.input{
.input {
width: 526rpx;
height: 72rpx;
background: #f7f8f9;
@@ -55,16 +52,15 @@ const tabsList = [{
margin: 8rpx 0;
display: flex;
align-items: center;
icon{
icon {
margin-left: 20rpx;
}
input{
input {
margin-left: 8rpx;
font-size: 28rpx;
}
.placeolder-input{
.placeolder-input {
color: #ccc;
}
}
</style>

108
smart-app/src/pages/list2/components/course-list.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<view class="item" v-for="item in 10">
<view class="item-header">
<view class="header-title"> 商业环境快速变化带来的挑战 </view>
<view class="header-right"> 共15讲> </view>
</view>
<view class="item-tags">
<view class="primary"> 房地产 </view>
<view class="success"> 国债 </view>
<view class="warning"> 贸易 </view>
</view>
<view class="content">
<view class="content-box">
<view class="c-top"> 授课老师 </view>
<view class="c-bottom"> 秦始皇 </view>
</view>
<view class="content-box">
<view class="c-top"> 开课时间 </view>
<view class="c-bottom"> 2023.08.20 20:00 </view>
</view>
</view>
</view>
</template>
<script setup>
defineProps({
list: {
type: Array,
default: [],
},
});
</script>
<style lang="scss" scoped>
.item {
width: 700rpx;
margin: 20rpx auto 0;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
padding: 26rpx 30rpx 20rpx;
box-sizing: border-box;
.item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
.header-title {
width: 480rpx;
font-size: 34rpx;
color: #444;
font-weight: 600;
}
.header-right {
margin-top: 4rpx;
font-size: 28rpx;
color: #777777;
}
}
.item-tags {
display: flex;
margin: 10rpx 0;
view {
width: 112rpx;
height: 42rpx;
border-radius: 4rpx;
text-align: center;
line-height: 42rpx;
font-size: 24rpx;
margin-right: 24rpx;
&.primary {
background: #eef7fd;
color: #1a9aff;
}
&.success {
color: #1ce36d;
background: #e5f8e9;
}
&.warning {
background: #fff0ed;
color: #ff6c00;
}
}
}
.content {
width: 100%;
height: 140rpx;
background: #f7f8f9;
border-radius: 4px;
display: flex;
justify-content: space-around;
align-items: center;
.content-box {
display: flex;
flex-direction: column;
align-items: center;
}
.c-top {
font-size: 24rpx;
color: #777777;
margin-bottom: 4rpx;
}
.c-bottom {
font-size: 30rpx;
color: #444444;
}
}
}
</style>

52
smart-app/src/pages/pure-list/components/list-model-three.vue → smart-app/src/pages/list2/components/discount-list.vue
View File

@@ -1,20 +1,60 @@
<template>
<view class="item" v-for="(item, index) in 2" :key="index">
<view v-if="index == 1" class="forbidden">
<view class="item">
<view class="header">
<view class="header-left">
<view class="header-left-title"> 手机优惠券 </view>
<view class="header-left-time"> 有效期至2024.08.28 </view>
</view>
<view class="header-right-price"> ￥<text>10</text> </view>
</view>
<view class="footer">
<view class="footer-left"> 适用于：双11商品 </view>
<view v-if="index != 1" class="footer-right"> 去使用 </view>
</view>
</view>
<view class="item">
<view class="forbidden">
<image src="/static/images/pure-list/employ.png" mode=""></image>
</view>
<view class="header">
<view class="header-left">
<view class="header-left-title"> 双十一课程优惠券 </view>
<view class="header-left-time"> 有效期至2023.08.28 </view>
<view class="header-left-title"> 笔记本优惠券 </view>
<view class="header-left-time"> 有效期至2024.08.28 </view>
</view>
<view class="header-right-price" :class="index == 1 ? 'grayscale' : ''"> ￥<text>10</text> </view>
<view class="header-right-price grayscale"> ￥<text>99</text> </view>
</view>
<view class="footer">
<view class="footer-left"> 适用于：直播课 </view>
<view class="footer-left"> 适用于：双11商品 </view>
</view>
</view>
<view class="item">
<view class="header">
<view class="header-left">
<view class="header-left-title"> 汽车优惠券 </view>
<view class="header-left-time"> 有效期至2024.08.28 </view>
</view>
<view class="header-right-price"> ￥<text>9999</text> </view>
</view>
<view class="footer">
<view class="footer-left"> 适用于：双11商品 </view>
<view v-if="index != 1" class="footer-right"> 去使用 </view>
</view>
</view>
<view class="item">
<view class="forbidden">
<image src="/static/images/pure-list/employ.png" mode=""></image>
</view>
<view class="header">
<view class="header-left">
<view class="header-left-title"> 笔记本优惠券 </view>
<view class="header-left-time"> 有效期至2024.08.28 </view>
</view>
<view class="header-right-price grayscale"> ￥<text>99</text> </view>
</view>
<view class="footer">
<view class="footer-left"> 适用于：双11商品 </view>
</view>
</view>
</template>
<script setup>

16
smart-app/src/pages/pure-list/components/list-model-two.vue → smart-app/src/pages/list2/components/express-list.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="item" v-for="(item, index) in 2">
<view class="item" v-for="(item, index) in 6">
<view class="item-header">
<view class="header-title"> 订单号：HUMU2268394 </view>
<view class="header-title"> 快递号：KD12382387 </view>
<view class="header-right" :class="index == 1 ? 'pay' : 'nopay'">
{{ index == 1 ? '已支付' : '未支付' }}
</view>
@@ -12,7 +12,7 @@
<view> </view>
</view>
<view class="start-address-right">
<view class="start-address-text"> 出发地：洛阳西工百货楼 </view>
<view class="start-address-text"> 出发地：洛阳市六边形科技园 </view>
<view class="start-time"> 出发时间：2023.08.23 </view>
</view>
</view>
@@ -20,7 +20,7 @@
<view class="atom end">
<view> </view>
</view>
<view class="start-address-text"> 目的地：洛阳宜阳县 </view>
<view class="start-address-text"> 目的地：上海市壹零贰肆软件园 </view>
</view>
</view>
<view class="footer">
@@ -42,7 +42,7 @@
<style lang="scss" scoped>
.item {
width: 700rpx;
margin: 20rpx auto 0;
margin: 30rpx auto 0;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
@@ -56,9 +56,9 @@
margin-bottom: 26rpx;
.header-title {
width: 480rpx;
font-size: 34rpx;
font-size: 28rpx;
font-weight: bold;
color: #444;
font-weight: 600;
}
.header-right {
position: absolute;
@@ -117,7 +117,7 @@
align-items: flex-start;
}
.start-address-text {
font-size: 30x;
font-size: 30rpx;
font-weight: bold;
color: #444444;
margin-bottom: 4rpx;

94
smart-app/src/pages/list2/components/iot-list.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<view class="item" v-for="(item, index) in 12" :key="index" :class="type[index]">
<view class="header"> PLC控制柜 </view>
<view class="footer">
<view class="footer-left"> 气路总阀：{{ date }} </view>
<view class="footer-state" :class="type[index]"> 关闭 </view>
</view>
</view>
</template>
<script setup>
import dayjs from 'dayjs';
defineProps({
list: {
type: Array,
default: [],
},
});
const date = dayjs().format('YYYY-MM-DD HH:mm:ss');
const type = [
'info',
'primary',
'warning',
'',
'info',
'primary',
'warning',
'',
'info',
'primary',
'warning',
'',
'info',
'primary',
'warning',
'',
];
</script>
<style lang="scss" scoped>
.item {
width: 700rpx;
margin: 20rpx auto 0;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
padding: 26rpx 40rpx 20rpx;
box-sizing: border-box;
border-left: 8rpx solid #4f4d4d;
&.primary {
border-color: #007ff2;
}
&.warning {
border-color: #ff6c00;
}
&.info {
border-color: #cccccc;
}
.header {
display: flex;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #ededed;
margin-bottom: 19rpx;
font-size: 34rpx;
color: #444;
}
.footer {
display: flex;
justify-content: space-between;
font-size: 28rpx;
.footer-left {
color: #777777;
}
.footer-state {
&.primary {
color: #007ff2;
}
&.warning {
color: #ff6c00;
}
&.info {
color: #cccccc;
}
color: #4f4d4d;
}
}
}
</style>

26
smart-app/src/pages/pure-list/components/list-model-four.vue → smart-app/src/pages/list2/components/service-list.vue
View File

@@ -1,28 +1,32 @@
<template>
<view class="item" v-for="(item, index) in 2" :key="index">
<view class="item" v-for="(item, index) in 6" :key="index">
<view class="header">
<view class="header-left">
<image class="header-left-image" src="/static/images/pure-list/maintain.png" mode=""></image>
<view class="header-left-title"> 报修信息 </view>
<view class="header-left-title"> 反馈信息 </view>
</view>
<view class="header-right-id"> 保修单还：12876 </view>
</view>
<view class="footer">
<view class="footer-item">
<view class="label"> 设备： </view>
<view class="info"> 灭火控制柜（plc） </view>
<view class="label"> 商品名称：</view>
<view class="info"> 家用净水器 </view>
</view>
<view class="footer-item">
<view class="label"> 描述： </view>
<view class="info"> 总设备压力过大，导致气压不稳 </view>
<view class="label"> 描述情况：</view>
<view class="info"> 水有杂志且存在异味 </view>
</view>
<view class="footer-item">
<view class="label"> 报修人： </view>
<view class="info"> 闫jj </view>
<view class="label">提交人：</view>
<view class="info"> 刘邦</view>
</view>
<view class="footer-item">
<view class="label"> 受理人： </view>
<view class="info"> 王jj </view>
<view class="label"> 受理人员： </view>
<view class="info"> 迪丽热巴 </view>
</view>
<view class="footer-item">
<view class="label"> 提交时间： </view>
<view class="info"> 2023-01-01 12:12:12 </view>
</view>
</view>
</view>
@@ -81,7 +85,7 @@
align-items: center;
margin-bottom: 16rpx;
.label {
width: 112rpx;
width: 80px;
font-size: 28rpx;
color: #777777;
}

53
smart-app/src/pages/list2/list.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<y-tabs v-model="active" sticky :offsetTop="0" color="#007aff">
<y-tab class="y-tab-virtual" v-for="item in tabsList" :key="item.value" :title="item.title"> </y-tab>
</y-tabs>
<ExpressList v-if="active === 0" />
<DiscountList v-if="active === 1" />
<IotList v-if="active === 2" />
<ServiceList v-if="active === 3" />
<CourseList v-if="active === 4" />
</template>
<script setup>
import CourseList from './components/course-list.vue';
import ExpressList from './components/express-list.vue';
import DiscountList from './components/discount-list.vue';
import ServiceList from './components/service-list.vue';
import IotList from './components/iot-list.vue';
import { ref } from 'vue';
const active = ref(0);
const tabsList = [
{
title: '快递',
value: 0,
},
{
title: '优惠卷',
value: 1,
},
{
title: '物联网',
value: 2,
},
{
title: '售后',
value: 3,
},
{
title: '课程',
value: 4,
},
];
</script>
<style lang="scss" scoped>
page {
background: #f5f6f8;
}
</style>

10
smart-app/src/pages/login/login.vue
View File

@@ -15,7 +15,7 @@
:clearable="true"
placeholderStyle="color:#CCCCCC"
border="none"
v-model="loginForm.username"
v-model="loginForm.loginName"
/>
</view>
@@ -72,10 +72,10 @@
const loginForm = reactive({
loginName: 'admin',
password: '',
password: '123456',
captchaCode: '',
captchaUuid: '',
loginDevice: LOGIN_DEVICE_ENUM.PC.value,
loginDevice: LOGIN_DEVICE_ENUM.H5.value,
});
const loginCheckBoxRef = ref();
@@ -87,7 +87,7 @@
});
return;
}
if (!loginForm.username) {
if (!loginForm.loginName) {
uni.showToast({
icon: 'none',
title: '请输入用户名',
@@ -103,7 +103,7 @@
}
try {
uni.showLoading('登录中');
uni.showLoading({ title: '登录中' });
// 密码加密
let encryptPasswordForm = Object.assign({}, loginForm, {
password: encryptData(loginForm.password),

25
smart-app/src/pages/message/message.vue
View File

@@ -1,16 +1,19 @@
<template>
<view>
<view class="container">
<view class="message" v-for="(item, index) in 10">
<view class="message-header">
<view class="header-left">
<image src="/src/static/images/message/message.png" mode=""></image>
<view> 系统通知 </view>
</view>
<view class="header-time"> 2023-08-20 20:48 </view>
<view class="header-time"> 2023-08-20 20:48:21 </view>
</view>
<view class="header-content">
<view class="content-title"> 报销-付款已完成 </view>
<view class="content"> 您的费用保修单已完成，付款金额300.00元，请注意查收。 </view>
<view class="content">
<view class="message-title">
报销-付款已完成
<uni-icons v-if="index % 2 === 1" color="red" class="smart-margin-left10" type="info-filled" :size="14"></uni-icons>
</view>
<view class="message-body"> 您的费用保修单已完成，付款金额300.00元，请注意查收。 </view>
</view>
</view>
</view>
@@ -53,22 +56,26 @@
.header-time {
font-size: 28rpx;
font-weight: 400;
color: #cccccc;
color: #999999;
}
}
.header-content {
.content {
box-sizing: border-box;
padding: 24rpx;
background-color: #f7f8f9;
width: 100%;
border-radius: 8rpx;
.content-title {
.message-title {
color: #323333;
font-size: 34rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.content {
.message-body {
font-size: 28rpx;
color: #777777;
}

73
smart-app/src/pages/mine/components/mine-menu.vue
View File

@@ -1,11 +1,41 @@
<template>
<view>
<view class="menu-list">
<uni-list>
<uni-list-item title="消息通知" link showBadge badgeText="6" badgeType="error">
<uni-list-item title="切换样式" link showBadge @click="changeStyle">
<template #header>
<image class="icon" src="/static/images/mine/mine-account.png" mode=""></image>
</template>
</uni-list-item>
<uni-list-item title="消息通知" link showBadge badgeText="6" badgeType="error" @click="gotoMessage">
<template #header>
<image class="icon" src="/static/images/mine/mine-message.png" mode=""></image>
</template>
</uni-list-item>
<uni-list-item title="意见反馈" link rightText="欢迎吐槽" showBadge>
<template #header>
<image class="icon" src="/static/images/mine/mine-feedback.png" mode=""></image>
</template>
</uni-list-item>
<uni-list-item title="联系客服" showBadge>
<template #header>
<image class="icon" src="/static/images/mine/mine-service.png" mode=""></image>
</template>
<template #footer>
<view style="font-size: 30rpx; color: #1a9aff; line-height: 45rpx"> 18810241024 </view>
</template>
</uni-list-item>
<uni-list-item title="账号管理" showBadge link>
<template #header>
<image class="icon" src="/static/images/mine/mine-account.png" mode=""></image>
</template>
</uni-list-item>
</uni-list>
</view>
<view class="menu-list">
<uni-list>
<uni-list-item title="关于我们" link showBadge>
<template #header>
<image class="icon" src="/static/images/mine/mine-about-us.png" mode=""></image>
@@ -16,48 +46,45 @@
<image class="icon" src="/static/images/mine/mine-version-info.png" mode=""></image>
</template>
</uni-list-item>
<uni-list-item title="意见反馈" link rightText="欢迎吐槽" showBadge>
<template #header>
<image class="icon" src="/static/images/mine/mine-feedback.png" mode=""></image>
</template>
</uni-list-item>
<uni-list-item title="隐私条款" link showBadge>
<template #header>
<image class="icon" src="/static/images/mine/user-agreement-icon.png" mode=""></image>
</template>
</uni-list-item>
<uni-list-item title="用户协议" link showBadge>
<template #header>
<image class="icon" src="/static/images/mine/mine-about-us.png" mode=""></image>
</template>
</uni-list-item>
<uni-list-item title="设置" link showBadge>
<template #header>
<image class="icon" src="/static/images/mine/mine-protocol.png" mode=""></image>
</template>
</uni-list-item>
<uni-list-item title="联系客服" showBadge>
<template #header>
<image class="icon" src="/static/images/mine/mine-service.png" mode=""></image>
</template>
<template #footer>
<view style="font-size: 30rpx; color: #1a9aff; line-height: 45rpx"> 400-888-666 </view>
</template>
</uni-list-item>
<uni-list-item title="账号管理" showBadge link>
<template #header>
<image class="icon" src="/static/images/mine/mine-account.png" mode=""></image>
</template>
</uni-list-item>
</uni-list>
</view>
</view>
</template>
<script setup></script>
<script setup>
const emits = defineEmits(['changeStyle']);
function changeStyle() {
emits('changeStyle');
}
function gotoMessage() {
uni.switchTab({ url: '/pages/message/message' });
}
</script>
<style scoped lang="scss">
.menu-list {
box-sizing: border-box;
background-color: #fff;
width: 700rpx;
margin: 20rpx auto 0;
margin: 16px 12px 0 12px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 3px 4px 0 rgba(24, 144, 255, 0.06);
padding: 0 30rpx;
padding: 0 10rpx;
.icon {
width: 42rpx;

19
smart-app/src/pages/mine/components/mine-user-blue.vue
View File

@@ -6,15 +6,11 @@
<!-- 用户信息 -->
<view class="user-info-box">
<view class="user-icon">
<image
:src="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d40b566-1f0a-4f8d-bc97-c513df8775b3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708226948&t=a9a155669b60f13d6a32c00de2477f22'"
class="user-image"
>
</image>
<image src="https://img.smartadmin.1024lab.net/hexagon/logo.png" class="user-image"> </image>
</view>
<view class="user-info">
<view class="user-name">{{ actualName }}</view>
<view class="user-phone">{{ phone }}</view>
<view class="user-phone">{{ departmentName }}</view>
</view>
<view class="vip-flag">
<image src="/@/static/images/mine/no-vip-flag.png" mode=""></image>
@@ -31,18 +27,21 @@
const phone = computed(() => {
return useUserStore().phone;
});
const departmentName = computed(() => {
return useUserStore().departmentName;
});
</script>
<style scoped lang="scss">
.nav-container {
flex-shrink: 0;
width: 100%;
height: 312rpx;
height: 200rpx;
background: url('@/static/images/mine/top-background.png') center/100% no-repeat;
position: relative;
.title {
text-align: center;
margin-top: 100rpx;
font-size: 34rpx;
margin-top: 30rpx;
font-size: 36rpx;
color: #fff;
font-weight: bold;
}
@@ -50,7 +49,7 @@
.user-info-box {
z-index: 10;
margin: -53px 12px 0;
margin: -60rpx 12px 0;
background: #ffffff;
border-radius: 6px;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);

11
smart-app/src/pages/mine/components/mine-user-white.vue
View File

@@ -1,15 +1,11 @@
<template>
<view class="user-info-box">
<view class="user-icon">
<image
class="user-image"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d40b566-1f0a-4f8d-bc97-c513df8775b3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708226948&t=a9a155669b60f13d6a32c00de2477f22"
>
</image>
<image class="user-image" src="https://img.smartadmin.1024lab.net/hexagon/logo.png"> </image>
</view>
<view class="user-info">
<view class="user-name">{{ actualName }}</view>
<view class="user-phone">{{ phone }}</view>
<view class="user-phone">{{ departmentName }}</view>
</view>
</view>
@@ -42,6 +38,9 @@
const phone = computed(() => {
return useUserStore().phone;
});
const departmentName = computed(() => {
return useUserStore().departmentName;
});
const menuList = [
{
title: '地址',

12
smart-app/src/pages/mine/mine.vue
View File

@@ -1,11 +1,11 @@
<template>
<view class="container">
<!-- 用户 -->
<!-- <MineUserBlue />-->
<MineUserWhite />
<MineUserBlue v-if="blueUserFlag" />
<MineUserWhite v-if="!blueUserFlag" />
<!---功能菜单--->
<MineMenu />
<MineMenu @change-style="onChangeStyle" />
<!---退出--->
<view class="logout-btn" @click="logout">
@@ -17,7 +17,13 @@
import MineMenu from './components/mine-menu.vue';
import MineUserBlue from './components/mine-user-blue.vue';
import MineUserWhite from './components/mine-user-white.vue';
import { ref } from 'vue';
const logout = () => {};
const blueUserFlag = ref(true);
function onChangeStyle() {
blueUserFlag.value = !blueUserFlag.value;
}
</script>
<style lang="scss" scoped>
.container {

107
smart-app/src/pages/order-detail/components/address-card.vue
View File

@@ -1,107 +0,0 @@
<template>
<view class="view">
<view class="line"> </view>
<view class="view-item">
<view class="itme-top">
<view class="itme-top-icon-text" type="default"> 提 </view>
<view class="item-top-text"> 湖北省武汉市东西湖区东湖区（东湖区） </view>
</view>
<view class="item-bottom"> 河南省洛阳市洛龙区119号 </view>
</view>
<view class="view-item">
<view class="itme-top">
<view class="itme-top-icon-text" type="warning"> 装 </view>
<view class="item-top-text"> 广东省东莞 </view>
</view>
<view class="item-bottom"> 河南省洛阳市西工区110</view>
</view>
<view class="view-item">
<view class="itme-top">
<view class="itme-top-icon-text" type="error"> 卸 </view>
<view class="item-top-text"> 湖北省武汉市东西湖区东湖区（东湖区） </view>
</view>
<view class="item-bottom"> 河南省洛阳市洛龙区110号 </view>
</view>
<view class="view-item">
<view class="itme-top">
<view class="itme-top-icon-text" type="success"> 还 </view>
<view class="item-top-text"> 湖北省武汉市东西湖区东湖区（东湖区） </view>
</view>
<view class="item-bottom"> 河南省洛阳市洛龙区119号 </view>
</view>
</view>
</template>
<script setup></script>
<style lang="scss" scoped>
.view {
box-sizing: border-box;
width: 94%;
border-radius: 16rpx;
background-color: #fff;
padding: 30rpx;
margin: 0 auto 20rpx;
position: relative;
.line {
position: absolute;
height: 300rpx;
border-left: 1rpx dashed #444;
z-index: 0;
top: 40rpx;
left: 50rpx;
}
.view-item {
&:last-child {
margin-bottom: 0;
}
position: relative;
z-index: 1;
margin-bottom: 16rpx;
.item-bottom {
font-size: 28rpx;
color: #777777;
margin-left: 58rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.itme-top {
display: flex;
align-items: center;
}
.itme-top-icon-text {
width: 40rpx;
height: 40rpx;
border-radius: 12rpx;
text-align: center;
line-height: 40rpx;
color: #fff;
font-size: 26rpx;
margin-right: 18rpx;
&[type='default'] {
background: #1a9aff;
}
&[type='warning'] {
background: #f3c35b;
}
&[type='error'] {
background: #ff6c00;
}
&[type='success'] {
background: #6ec98a;
}
}
.item-top-text {
font-size: 32rpx;
color: #444;
font-weight: bold;
padding-bottom: 5rpx;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
</style>

172
smart-app/src/pages/order-detail/components/detail-model-base-info.vue
View File

@@ -1,172 +0,0 @@
<template>
<view class="view">
<view class="view-title">
<view class="title-left-bg">
</view>
<view class="title-text">
运单信息
</view>
</view>
<view class="view-item">
<view class="item-left">
运单号
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
订单号
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
客户订单号
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
箱号
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
铅封号
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
柜型
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
最迟提箱时间
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
货主
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
业务时间
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
结算方式
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
结算类型
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
司机
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
车辆
</view>
<view class="item-right">
TDD202304950
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
List:{
type:Array,
default:[]
}
})
</script>
<style lang="scss" scoped>
.view{
width: 94%;
margin: 0 auto;
background: #fff;
border-radius: 16rpx;
box-sizing: border-box;
padding: 0 30rpx;
}
.view-title{
height: 84rpx;
display: flex;
align-items: center;
.title-left-bg{
height: 28rpx;
width: 6rpx;
background: #1A9AFF;
border-radius: 4rpx;
margin-right: 14rpx;
}
.title-text{
font-size: 32rpx;
color: #323333;
font-weight: bold;
}
}
.view-item{
display: flex;
height: 100rpx;
justify-content: space-between;
align-items: center;
color: 323333;
border-bottom: 1rpx solid #ededed;
&:last-child{
border: none;
}
.item-left{
font-size: 32rpx;
}
.item-right{
font-size: 30rpx;
}
}
</style>

165
smart-app/src/pages/order-detail/components/detail-model-due-pay.vue
View File

@@ -1,165 +0,0 @@
<template>
<view class="view">
<view class="view-title">
<view class="title-left-bg">
</view>
<view class="title-text">
费用明细
</view>
<view class="sub-title">
已收金额/已收金额/费用
</view>
</view>
<view class="view-item">
<view class="item-left">
运费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
过磅费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
压夜费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
超重费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
提箱费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
报关费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
其他费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
保税绕园费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
放空费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
修箱费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
服务费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
List:{
type:Array,
default:[]
}
})
</script>
<style lang="scss" scoped>
.view{
width: 94%;
margin: 0 auto;
background: #fff;
border-radius: 16rpx;
box-sizing: border-box;
padding: 0 30rpx;
}
.view-title{
height: 84rpx;
display: flex;
align-items: center;
.title-left-bg{
height: 28rpx;
width: 6rpx;
background: #1A9AFF;
border-radius: 4rpx;
margin-right: 14rpx;
}
.title-text{
font-size: 32rpx;
color: #323333;
font-weight: bold;
}
.sub-title{
font-size: 28rpx;
color: #ccc;
flex: 1;
text-align: right;
}
}
.view-item{
display: flex;
height: 100rpx;
justify-content: space-between;
align-items: center;
color: 323333;
border-bottom: 1rpx solid #ededed;
&:last-child{
border: none;
}
.item-left{
font-size: 32rpx;
}
.item-right{
font-size: 30rpx;
}
}
</style>

12
smart-app/src/pages/order-detail/components/detail-model-final.vue
View File

@@ -1,12 +0,0 @@
<template>
<InfoCardModelTwo/>
<InfoCardModelTwo/>
</template>
<script setup>
import InfoCardModelTwo from './info-card-model-two.vue'
</script>
<style lang="scss" scoped>
</style>

117
smart-app/src/pages/order-detail/components/detail-model-path.vue
View File

@@ -1,13 +1,118 @@
<template>
<AddressCard/>
<InfoCardModelOne/>
<view class="smart-detail-card">
<view class="smart-detail-card-title"> 物流信息</view>
<view class="view-item">
<view class="title">
<view class="title-icon-text" type="default"> 提 </view>
<view class="title-content"> 河南省洛阳市洛龙区龙门石窟</view>
</view>
<view class="sub-title"> 河南省洛阳市洛龙区开元大道1024号1024大厦10层1024室 </view>
<view class="sub-title"> 2023-11-23 12:12:12，快递员：刘备（188123123123）</view>
</view>
<view class="view-item">
<view class="title">
<view class="title-icon-text" type="warning"> 装 </view>
<view class="title-content"> 山东省济南市高新区齐鲁软件园 </view>
</view>
<view class="sub-title"> 山东省济南市高新区六边形大楼10层</view>
<view class="sub-title"> 快递员：卓大 188123123123</view>
</view>
<view class="view-item">
<view class="title">
<view class="title-icon-text" type="error"> 卸 </view>
<view class="title-content"> 河南省郑州市郑东新区龙子湖大厦 </view>
</view>
<view class="sub-title"> 河南省郑州市郑东新区高铁路120号 </view>
</view>
<view class="view-item">
<view class="title">
<view class="title-icon-text" type="success"> 还 </view>
<view class="title-content"> 河南省洛阳市洛龙区白马寺 （胡克） </view>
</view>
<view class="sub-title"> 河南省洛阳市洛龙区119号 </view>
</view>
</view>
</template>
<script setup>
import AddressCard from './address-card.vue'
import InfoCardModelOne from './info-card-model-one.vue'
</script>
<script setup></script>
<style lang="scss" scoped>
.line {
position: absolute;
height: 100px;
border-left: 1rpx dashed #444;
z-index: 0;
top: 40rpx;
}
.view-item {
margin-top: 20px;
position: relative;
z-index: 1;
:before {
content: '';
position: absolute;
left: 20rpx;
right: 0;
top: 44rpx;
height: 100%;
width: 1px;
background: #eeeeee;
}
.sub-title {
font-size: 28rpx;
color: #777777;
margin-left: 58rpx;
margin-top: 10px;
}
.title {
display: flex;
align-items: center;
}
.title-content {
font-size: 32rpx;
color: #444;
font-weight: bold;
padding-bottom: 5rpx;
flex: 1;
}
.title-icon-text {
width: 40rpx;
height: 40rpx;
border-radius: 12rpx;
text-align: center;
line-height: 40rpx;
color: #fff;
font-size: 26rpx;
margin-right: 18rpx;
&[type='default'] {
background: #1a9aff;
}
&[type='warning'] {
background: #f3c35b;
}
&[type='error'] {
background: #ff6c00;
}
&[type='success'] {
background: #6ec98a;
}
&:last-child {
margin-bottom: 0;
}
}
}
.view-item:last-child {
:before {
content: '';
position: absolute;
left: 20rpx;
right: 0;
top: 44rpx;
height: 100%;
width: 0;
}
}
</style>

165
smart-app/src/pages/order-detail/components/detail-model-receivable.vue
View File

@@ -1,165 +0,0 @@
<template>
<view class="view">
<view class="view-title">
<view class="title-left-bg">
</view>
<view class="title-text">
费用明细
</view>
<view class="sub-title">
已付费用/预付费用/费用
</view>
</view>
<view class="view-item">
<view class="item-left">
运费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
过磅费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
压夜费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
超重费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
提箱费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
报关费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
其他费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
保税绕园费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
放空费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
修箱费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
<view class="view-item">
<view class="item-left">
服务费
</view>
<view class="item-right">
TDD202304950
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
List:{
type:Array,
default:[]
}
})
</script>
<style lang="scss" scoped>
.view{
width: 94%;
margin: 0 auto;
background: #fff;
border-radius: 16rpx;
box-sizing: border-box;
padding: 0 30rpx;
}
.view-title{
height: 84rpx;
display: flex;
align-items: center;
.title-left-bg{
height: 28rpx;
width: 6rpx;
background: #1A9AFF;
border-radius: 4rpx;
margin-right: 14rpx;
}
.title-text{
font-size: 32rpx;
color: #323333;
font-weight: bold;
}
.sub-title{
font-size: 28rpx;
color: #ccc;
flex: 1;
text-align: right;
}
}
.view-item{
display: flex;
height: 100rpx;
justify-content: space-between;
align-items: center;
color: 323333;
border-bottom: 1rpx solid #ededed;
&:last-child{
border: none;
}
.item-left{
font-size: 32rpx;
}
.item-right{
font-size: 30rpx;
}
}
</style>

12
smart-app/src/pages/order-detail/components/detail-model-voucher.vue
View File

@@ -1,12 +0,0 @@
<template>
<InfoCardModelThree/>
<InfoCardModelThree/>
</template>
<script setup>
import InfoCardModelThree from './info-card-model-three.vue'
</script>
<style lang="scss" scoped>
</style>

131
smart-app/src/pages/order-detail/components/info-card-model-one.vue
View File

@@ -1,131 +0,0 @@
<template>
<view class="view">
<view class="view-title">
<view class="title-left-bg">
</view>
<view class="title-text">
货物信息1
</view>
<view class="sub-title">
</view>
</view>
<view class="view-item">
<view class="item-left">
货物类型：
</view>
<view class="item-right">
其他
</view>
</view>
<view class="view-item">
<view class="item-left">
货物名称：
</view>
<view class="item-right">
其他
</view>
</view>
<view class="view-item">
<view class="item-left">
货物单位：
</view>
<view class="item-right">
吨
</view>
</view>
<view class="view-item">
<view class="item-left">
货物毛重/吨：
</view>
<view class="item-right">
64
</view>
</view>
<view class="view-item">
<view class="item-left">
货物数量：
</view>
<view class="item-right">
2
</view>
</view>
<view class="view-item">
<view class="item-left">
备注：
</view>
<view class="item-right">
这是备注信息～
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
List:{
type:Array,
default:[]
}
})
</script>
<style lang="scss" scoped>
.view{
width: 94%;
margin: 0 auto;
background: #fff;
border-radius: 16rpx;
box-sizing: border-box;
padding: 0 30rpx;
padding-bottom: 24rpx;
}
.view-title{
height: 84rpx;
display: flex;
align-items: center;
margin-bottom: 16rpx;
.title-left-bg{
height: 28rpx;
width: 6rpx;
background: #1A9AFF;
border-radius: 4rpx;
margin-right: 14rpx;
}
.title-text{
font-size: 32rpx;
color: #323333;
font-weight: bold;
}
.sub-title{
font-size: 28rpx;
color: #ccc;
flex: 1;
text-align: right;
}
}
.view-item{
display: flex;
height: 40rpx;
align-items: center;
margin-bottom: 16rpx;
&:last-child{
margin-bottom: 0;
}
.item-left{
width: 180rpx;
margin-right: 20rpx;
font-size: 28rpx;
color: #777777;
}
.item-right{
font-size: 30rpx;
color: #323333;
font-weight: bold;
font-size: 28rpx;
}
}
</style>

117
smart-app/src/pages/order-detail/components/info-card-model-three.vue
View File

@@ -1,117 +0,0 @@
<template>
<view class="view">
<view class="view-title">
<view class="title-left-bg">
</view>
<view class="title-text">
凭证/磅单【装货】
</view>
</view>
<view class="view-item">
<view class="item-left">
时间：
</view>
<view class="item-right">
2023-08-08 12:24:05
</view>
</view>
<view class="view-item">
<view class="item-left">
位置：
</view>
<view class="item-right">
河南省许昌市襄城县书岗线
</view>
</view>
<view class="view-item">
<view class="item-left">
经度：
</view>
<view class="item-right">
33.45767
</view>
</view>
<view class="view-item">
<view class="item-left">
纬度：
</view>
<view class="item-right">
113.45585
</view>
</view>
<view class="image-box">
<image src="/static/logo.png" mode=""></image>
<image src="/static/logo.png" mode=""></image>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.view{
width: 94%;
margin: 0 auto;
background: #fff;
border-radius: 16rpx;
box-sizing: border-box;
padding: 0 30rpx;
padding-bottom: 24rpx;
margin-bottom: 24rpx;
}
.view-title{
height: 84rpx;
display: flex;
align-items: center;
margin-bottom: 16rpx;
.title-left-bg{
height: 28rpx;
width: 6rpx;
background: #FED453;
border-radius: 4rpx;
margin-right: 14rpx;
}
.title-text{
font-size: 32rpx;
color: #323333;
font-weight: bold;
}
}
.view-item{
display: flex;
height: 40rpx;
align-items: center;
margin-bottom: 16rpx;
&:last-child{
margin-bottom: 0;
}
.item-left{
width: 90rpx;
margin-right: 20rpx;
font-size: 28rpx;
color: #777777;
}
.item-right{
font-size: 30rpx;
color: #323333;
font-weight: bold;
font-size: 28rpx;
}
}
.image-box{
display: flex;
justify-content: space-between;
image{
width: 308rpx;
height: 172rpx;
border-radius: 8rpx;
}
padding-top: 20rpx;
border-top: 1rpx solid #ededed;
}
</style>

32
smart-app/src/pages/order-detail/components/order-detail-base-info.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<view class="smart-detail-card smart-margin-top60">
<view class="smart-detail-card-title"> 商品</view>
<view class="smart-detail-card-cell">
<view class="smart-detail-card-label"> 商品名称 </view>
<view class="smart-detail-card-value"> 华为MateBook 14</view>
</view>
<view class="smart-detail-card-cell">
<view class="smart-detail-card-label"> 价格 </view>
<view class="smart-detail-card-value uni-error">12,345元 </view>
</view>
<view class="smart-detail-card-cell">
<view class="smart-detail-card-label"> 颜色/产地 </view>
<view class="smart-detail-card-value">玫瑰金/中国·洛阳 </view>
</view>
<view class="smart-detail-card-cell">
<view class="smart-detail-card-label"> 材质/电压 </view>
<view class="smart-detail-card-value">金属/220V </view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
List: {
type: Array,
default: [],
},
});
</script>
<style lang="scss" scoped></style>

27
smart-app/src/pages/order-detail/components/info-card-model-two.vue → smart-app/src/pages/order-detail/components/order-detail-settle.vue
View File

@@ -1,16 +1,15 @@
<template>
<view class="view">
<view class="view-title">
<view class="title-left-bg"> </view>
<view class="title-text"> 付款单号1 </view>
<view class="sub-title">
<view class="success"> 已审核 </view>
<view class="warning"> 待支付 </view>
</view>
<view class="smart-detail-card">
<view class="smart-detail-card-title"> 结算信息 </view>
<view class="view-item">
<view class="item-left"> 订单号： </view>
<view class="item-right"> TYD2023080979 </view>
</view>
<view class="view-item">
<view class="item-left"> 运单号： </view>
<view class="item-right"> TYD2023080979 </view>
<view class="item-left"> 付款状态： </view>
<view class="item-right">
<view class="success"> 已审核 </view>
</view>
</view>
<view class="view-item">
<view class="item-left"> 应付金额： </view>
@@ -22,7 +21,7 @@
</view>
<view class="view-item">
<view class="item-left"> 收款账户： </view>
<view class="item-right"> 王强/623457910384 </view>
<view class="item-right"> 项羽/61248348910384 </view>
</view>
</view>
</template>
@@ -32,13 +31,11 @@
<style lang="scss" scoped>
.view {
width: 94%;
margin: 0 auto;
background: #fff;
border-radius: 16rpx;
box-sizing: border-box;
padding: 0 30rpx;
padding-bottom: 24rpx;
margin-bottom: 24rpx;
padding: 0 30rpx 24rpx;
margin: 0 auto 24rpx;
}
.view-title {

80
smart-app/src/pages/order-detail/components/scroll-tabs.vue
View File

@@ -1,80 +0,0 @@
<template>
<scroll-view class="scroll-view" scroll-x="true" :show-scrollbar="false">
<view class="item" :class="active == item.value ? 'active' : ''" v-for="item in tabsList" :key="item.value" @click="change(item.value)">
{{ item.lable }}
</view>
</scroll-view>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
modelValue: {
type: Number,
default: 0,
},
tabsList: {
type: Array,
default: [],
},
});
const active = ref(0);
watch(
() => props.modelValue,
(newValue) => {
active.value = newValue;
}
);
const emit = defineEmits(['update:modelValue']);
const change = (value) => {
active.value = value;
emit('update:modelValue', value);
};
</script>
<style lang="scss" scoped>
.item {
padding: 0 24rpx;
height: 72rpx;
font-size: 30rpx;
color: #777;
background: #fff;
display: inline-block;
border-radius: 8rpx;
line-height: 72rpx;
margin-left: 24rpx;
margin: 24rpx 0 24rpx 24rpx;
}
.active {
color: #ffffff;
background: #1a9aff;
}
.scroll-view ::v-deep ::-webkit-scrollbar {
height: 0 !important;
width: 0 !important;
background: transparent;
}
.smart-form-submit {
border-top: #eee 1px solid;
height: 80px;
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
bottom: 0;
background-color: white;
width: 100%;
.smart-form-submit-btn {
margin: 10px;
height: 2.5;
flex: 1;
}
}
</style>

80
smart-app/src/pages/order-detail/order-detail.vue
View File

@@ -1,52 +1,52 @@
<template>
<view>
<ScrollTabs v-model="active" :tabsList="tabsList"></ScrollTabs>
<DetailModelBaseInfo v-if="active==0"/>
<DetailModelPath v-if="active==1"/>
<DetailModelDuePay v-if="active==2"/>
<DetailModelReceivable v-if="active==3"/>
<DetailModelFinal v-if="active==4"/>
<DetailModelVoucher v-if="active==5"/>
<view class="container">
<smart-detail-tabs :tabsList="tabsList" v-model="active" :fixed="true" @change="scrollTo" />
<view class="smart-detail">
<OrderDetailBaseInfo id="detail0" />
<DetailModelPath id="detail1" />
<OrderDetailSettle id="detail2" />
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import ScrollTabs from './components/scroll-tabs.vue'
import DetailModelBaseInfo from './components/detail-model-base-info.vue'
import DetailModelPath from './components/detail-model-path.vue'
import DetailModelDuePay from './components/detail-model-due-pay.vue'
import DetailModelReceivable from './components/detail-model-receivable.vue'
import DetailModelFinal from './components/detail-model-final.vue'
import DetailModelVoucher from './components/detail-model-voucher.vue'
import SmartDetailTabs from '/@/components/smart-detail-tabs/index.vue';
import OrderDetailBaseInfo from './components/order-detail-base-info.vue';
import DetailModelPath from './components/detail-model-path.vue';
import OrderDetailSettle from './components/order-detail-settle.vue';
const tabsList = [{
lable:'基本路线',
value:0
},{
lable:'路线/货物',
value:1
},{
lable:'应付费用信息',
value:2
},{
lable:'应收费用信息',
value:3
},{
lable:'结算信息',
value:4
},{
lable:'凭证/磅单',
value:5
}]
const tabsList = [
{
label: '基本信息',
value: 0,
},
{
label: '物流信息',
value: 1,
},
{
label: '结算信息',
value: 2,
},
];
const active = ref(0)
const active = ref(0);
function scrollTo(tab) {
uni.pageScrollTo({
selector: '#detail' + tab,
duration: 300,
success: console.log,
fail: console.log,
});
}
</script>
<style lang="scss" scoped>
page{
background: #f4f4f4;
}
.container {
background-color: #f4f4f4;
height: 100vh;
overflow-y: scroll;
}
</style>

80
smart-app/src/pages/pure-list/components/list-model-five.vue
View File

@@ -1,80 +0,0 @@
<template>
<view class="item" v-for="(item,index) in 4" :key="index" :class="type[index]">
<view class="header">
Plc控制柜
</view>
<view class="footer">
<view class="footer-left">
A区气路总阀：
</view>
<view class="footer-state" :class="type[index]">
关闭
</view>
</view>
</view>
</template>
<script setup>
defineProps({
list: {
type: Array,
default: []
}
})
const type = ['info','primary','warning','']
</script>
<style lang="scss" scoped>
.item {
width: 700rpx;
margin: 20rpx auto 0;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
padding: 26rpx 40rpx 20rpx;
box-sizing: border-box;
border-left: 8rpx solid #4F4D4D;
&.primary{
border-color: #007FF2;
}
&.warning{
border-color: #FF6C00;
}
&.info{
border-color: #CCCCCC;
}
.header {
display: flex;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #ededed;
margin-bottom: 19rpx;
font-size: 34rpx;
color: #444;
}
.footer {
display: flex;
justify-content: space-between;
font-size: 28rpx;
.footer-left{
color: #777777;
}
.footer-state{
&.primary{
color: #007FF2;
}
&.warning{
color: #FF6C00;
}
&.info{
color: #CCCCCC;
}
color: #4F4D4D;
}
}
}
</style>

126
smart-app/src/pages/pure-list/components/list-model-one.vue
View File

@@ -1,126 +0,0 @@
<template>
<view class="item">
<view class="item-header">
<view class="header-title">
商业环境快速变化带来的挑战
</view>
<view class="header-right">
共15讲>
</view>
</view>
<view class="item-tags">
<view class="primary">
商务
</view>
<view class="success">
专题
</view>
<view class="warning">
付费
</view>
</view>
<view class="content">
<view class="content-box">
<view class="c-top">
授课老师
</view>
<view class="c-bottom">
王老师
</view>
</view>
<view class="content-box">
<view class="c-top">
开课时间
</view>
<view class="c-bottom">
2023.08.20 20:00
</view>
</view>
</view>
</view>
</template>
<script setup>
defineProps({
list:{
type:Array,
default:[]
}
})
</script>
<style lang="scss" scoped>
.item{
width: 700rpx;
margin: 20rpx auto 0;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0px 3px 4px 0px rgba(24,144,255,0.06);
padding: 26rpx 30rpx 20rpx;
box-sizing: border-box;
.item-header{
display: flex;
justify-content: space-between;
align-items: flex-start;
.header-title{
width: 480rpx;
font-size: 34rpx;
color: #444;
font-weight: 600;
}
.header-right{
margin-top: 4rpx;
font-size: 28rpx;
color: #777777;
}
}
.item-tags{
display: flex;
margin: 10rpx 0;
view{
width: 112rpx;
height: 42rpx;
border-radius: 4rpx;
text-align: center;
line-height: 42rpx;
font-size: 24rpx;
margin-right: 24rpx;
&.primary{
background: #eef7fd;
color: #1A9AFF;
}
&.success{
color: #1CE36D;
background: #e5f8e9;
}
&.warning{
background: #fff0ed;
color: #FF6C00;
}
}
}
.content{
width: 100%;
height: 140rpx;
background: #f7f8f9;
border-radius: 4px;
display: flex;
justify-content: space-around;
align-items: center;
.content-box{
display: flex;
flex-direction: column;
align-items: center;
}
.c-top{
font-size: 24rpx;
color: #777777;
margin-bottom: 4rpx;
}
.c-bottom{
font-size: 30rpx;
color: #444444;
}
}
}
</style>

21
smart-app/src/pages/pure-list/pure-list.vue
View File

@@ -1,21 +0,0 @@
<template>
<ListModelOne></ListModelOne>
<ListModelTwo/>
<ListModelThree/>
<ListModelFour/>
<ListModelFive/>
</template>
<script setup>
import ListModelOne from './components/list-model-one.vue'
import ListModelTwo from './components/list-model-two.vue'
import ListModelThree from './components/list-model-three.vue'
import ListModelFour from './components/list-model-four.vue'
import ListModelFive from './components/list-model-five.vue'
</script>
<style lang="scss" scoped>
page{
background: #f5f6f8;
}
</style>

BIN
smart-app/src/static/images/mine/app-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB

BIN
smart-app/src/static/images/mine/default-header.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

64
smart-app/src/theme/index.scss
View File

@@ -8,7 +8,6 @@
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*/
.scroll-view {
white-space: nowrap;
width: 100%;
@@ -96,9 +95,6 @@
margin-top: 60px;
}
.smart-margin-top60 {
margin-top: 60px;
}
/******************************** 下间距 ********************************/
.smart-margin-bottom5 {
@@ -197,3 +193,63 @@
bottom: 0;
}
}
/******************************** 详情 ********************************/
.smart-detail {
.smart-detail-card {
background-color: white;
margin-right: auto;
margin-left: auto;
margin-bottom: 15px;
width: 94%;
border-radius: 16rpx;
box-sizing: border-box;
padding: 16rpx 30rpx;
.smart-detail-card-title {
height: 70rpx;
display: flex;
align-items: center;
font-size: $uni-font-size-lg;
color: #323333;
font-weight: bold;
margin-bottom: 16rpx;
&::before {
content: '';
height: 32rpx;
width: 3px;
border-radius: 4rpx;
margin-right: 10rpx;
background-color: $uni-color-primary;
}
}
.smart-detail-card-cell {
display: flex;
min-height: 80rpx;
padding: 10rpx 0;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
border-top: 1rpx solid #ededed;
.smart-detail-card-label {
color: #666666;
font-size: $uni-font-size-lg;
}
.smart-detail-card-value {
font-size: $uni-font-size-lg;
padding: 20rpx 0;
}
}
}
}

3
smart-app/src/uni.scss
View File

@@ -111,6 +111,9 @@ $answer-right-bg-color: #f6fbff; // 做题选项答对背景
$collapse-bg-color: #F3F6FB; // 折叠面板二级背景颜色
// 颜色 ------------------- end -------------
// 样式 ------------------- begin -------------
// 这里导出的样式在APP端无效，APP端不要再引用了
:export {