个人中心模块更新
This commit is contained in:
parent
bd0290dcf8
commit
d62ef9084e
|
|
@ -10,10 +10,33 @@ declare module 'vue' {
|
|||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
EquipCard: typeof import('./src/components/equipCard.vue')['default']
|
||||
FooterInfo: typeof import('./src/components/FooterInfo/index.vue')['default']
|
||||
FormComponent: typeof import('./src/components/FormComponent/index.vue')['default']
|
||||
Navmenu: typeof import('./src/components/Navmenu/index.vue')['default']
|
||||
PagingComponent: typeof import('./src/components/PagingComponent/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
TableComponent: typeof import('./src/components/TableComponent/index.vue')['default']
|
||||
UploadImg: typeof import('./src/components/uploadImg.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ VITE_BUILD_MODE = 'dev'
|
|||
VITE_API_URL = '/proxyApi'
|
||||
|
||||
# 开发环境接口地址
|
||||
# VITE_proxyTarget = 'http://10.40.92.66:9206' #盛旭
|
||||
VITE_proxyTarget = 'http://10.40.92.66:9205' #盛旭
|
||||
|
||||
VITE_proxyTarget = 'http://10.40.92.185:9200'
|
||||
# VITE_proxyTarget = 'http://10.40.92.185:9200' # 赵福海
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
interface Props {
|
||||
formItemList?: []
|
||||
formItemList: any
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
interface Props {
|
||||
tableProps?: []
|
||||
tableProps: any
|
||||
tableData?: []
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// 个人中心 求租下的订单管理
|
||||
|
||||
import { get, post } from '../../index'
|
||||
|
||||
// 获取订单列表
|
||||
export const getOrderListApi = () => {
|
||||
return get('/info/list', {})
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
export const useStore = defineStore('myUser', {
|
||||
state: () => {
|
||||
return {
|
||||
currentMenuType: true,
|
||||
currentMenuItem: 'baseInfo',
|
||||
menuList: [
|
||||
{ title: '基础信息', name: 'baseInfo' },
|
||||
{ title: '订单管理', name: 'orderManagement' },
|
||||
{ title: '子账号管理', name: 'subAccount' }
|
||||
]
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
|
||||
},
|
||||
actions: {
|
||||
updateText() {
|
||||
console.log('updateText')
|
||||
},
|
||||
editCurrentMenuType(val: any) {
|
||||
this.currentMenuType = val
|
||||
},
|
||||
editcurrentMenuItem(val: any) {
|
||||
this.currentMenuItem = val
|
||||
},
|
||||
editcurrentMenuList(val: any) {
|
||||
this.menuList = val
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
enabled: true, // 开启数据缓存
|
||||
strategies: [
|
||||
{
|
||||
// 自定义存储的 key，默认是 store.$id
|
||||
key: 'myUser',
|
||||
storage: sessionStorage, //缓存模式 可选 localStorage sessionStorage
|
||||
// state 中的字段名，按组打包储存
|
||||
paths: ['currentMenuType', 'currentMenuItem', 'menuList'] //需要缓存的字段 与 state中相关联
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import FooterInfo from '../compontents/FooterInfo/index.vue'
|
||||
const route = useRoute()
|
||||
import FooterInfo from 'components/FooterInfo/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const route: any = useRoute()
|
||||
|
||||
const searchIptRef: any = shallowRef(null)
|
||||
|
||||
// 判断是否是个人中心页面 如果是则隐藏页脚
|
||||
const isMyInfoPage = () => {
|
||||
|
|
@ -30,6 +34,9 @@
|
|||
// 点击下方搜索记录时
|
||||
const handleHistory = (hisValue: any) => {
|
||||
keywordIptValue.value = hisValue
|
||||
nextTick(() => {
|
||||
searchIptRef.value.focus()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
|
|
@ -50,11 +57,11 @@
|
|||
<span @click="$router.push({ name: 'myuser' })">个人中心</span>
|
||||
</li>
|
||||
<li @click="$router.push('/collect')">
|
||||
<img src="./assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" />
|
||||
<img src="../assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" />
|
||||
<span>收藏夹</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
|
||||
<img src="../assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
|
||||
<span class="last-span">手机版</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -74,7 +81,8 @@
|
|||
placeholder="输入设备关键词"
|
||||
type="text"
|
||||
v-model="keywordIptValue"
|
||||
@keydown.enter="searchKeywordBtn" />
|
||||
@keydown.enter="searchKeywordBtn"
|
||||
ref="searchIptRef" />
|
||||
<button class="search-btn" @click="searchKeywordBtn">搜索</button>
|
||||
<div class="erweima">
|
||||
<div class="tilte">手机扫码登录</div>
|
||||
|
|
@ -97,7 +105,6 @@
|
|||
<RouterView />
|
||||
</div>
|
||||
<FooterInfo v-if="isMyInfoPage()" />
|
||||
<!-- <FooterInfo /> -->
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@
|
|||
<div class="enterpriseCertification">
|
||||
<div class="baseInfo card">
|
||||
<div class="top">
|
||||
<div class="title">
|
||||
企业基本信息
|
||||
</div>
|
||||
<div class="title">企业基本信息</div>
|
||||
<div class="options">
|
||||
<el-button size="small" type="primary">我的邀请码</el-button>
|
||||
<el-button size="small" type="primary">编辑</el-button>
|
||||
|
|
@ -28,38 +26,34 @@
|
|||
<el-col :span="3">
|
||||
<el-select v-model="thisValue" placeholder="请选择省份">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select v-model="thisValue" placeholder="请选择市">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select v-model="thisValue" placeholder="请选择区">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<el-input placeholder="请输入实际办公地址"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="经营地址">
|
||||
|
|
@ -67,38 +61,34 @@
|
|||
<el-col :span="3">
|
||||
<el-select v-model="thisValue" placeholder="请选择省份">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select v-model="thisValue" placeholder="请选择市">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select v-model="thisValue" placeholder="请选择区">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<el-input placeholder="请输入实际办公地址"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-row :gutter="20">
|
||||
|
|
@ -106,11 +96,10 @@
|
|||
<el-form-item label="法人证件类型">
|
||||
<el-select v-model="thisValue" placeholder="请选择省份">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -181,27 +170,25 @@
|
|||
|
||||
<div class="personInfo card">
|
||||
<div class="top">
|
||||
<div class="title">
|
||||
被授权人信息
|
||||
</div>
|
||||
<div class="title">被授权人信息</div>
|
||||
</div>
|
||||
|
||||
<el-form class="personForm">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="5">
|
||||
<el-form-item label="被授权人姓名">
|
||||
<el-input ></el-input>
|
||||
<el-input></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="被授权人身份证">
|
||||
<el-input ></el-input>
|
||||
<el-input></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="被授权人手机号">
|
||||
<div class="phone">
|
||||
<el-input ></el-input>
|
||||
<el-input></el-input>
|
||||
<div class="tip">
|
||||
被授权人手机号修改且运营审核通过后，企业系统管理员权限将同步到修改后被授权手机号的登录账号。
|
||||
</div>
|
||||
|
|
@ -210,7 +197,7 @@
|
|||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="被授权人邮箱">
|
||||
<el-input ></el-input>
|
||||
<el-input></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -243,16 +230,17 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" class="d-flex align-center">
|
||||
<el-checkbox size="large" />
|
||||
<div class="agreement ">我已阅读并同意相关条款内容《
|
||||
<el-checkbox size="large" />
|
||||
<div class="agreement">
|
||||
我已阅读并同意相关条款内容《
|
||||
<span class="previewExample">服务协议</span>
|
||||
》 《
|
||||
<span class="previewExample">隐私协议</span>
|
||||
》</div>
|
||||
》
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bankInfo card">
|
||||
|
|
@ -263,25 +251,30 @@
|
|||
</div>
|
||||
</div>
|
||||
<el-row class="header">
|
||||
<el-col :span="v.span" v-for="(v,i) in bankTableHeader" :key="i">
|
||||
<div class="item border-top-left" :class="i+1 == bankTableHeader.length && 'border-right'">
|
||||
<el-col :span="v.span" v-for="(v, i) in bankTableHeader" :key="i">
|
||||
<div
|
||||
class="item border-top-left"
|
||||
:class="i + 1 == bankTableHeader.length && 'border-right'">
|
||||
{{ v.label }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="content" v-for="(val,index) in bankTableData" :key="index">
|
||||
<el-col :span="v.span" v-for="(v,i) in bankTableHeader" :key="i">
|
||||
<el-row class="content" v-for="(val, index) in bankTableData" :key="index">
|
||||
<el-col :span="v.span" v-for="(v, i) in bankTableHeader" :key="i">
|
||||
<div
|
||||
v-if="!v.slot"
|
||||
class="item border-top-left"
|
||||
:class="`${i+1 == bankTableHeader.length && 'border-right'} ${index+1 == bankTableData.length && 'border-bottom'}`"
|
||||
>
|
||||
:class="`${i + 1 == bankTableHeader.length && 'border-right'} ${
|
||||
index + 1 == bankTableData.length && 'border-bottom'
|
||||
}`">
|
||||
{{ val[v.prop] || '' }}
|
||||
</div>
|
||||
<div v-else
|
||||
class="item border-top-left"
|
||||
:class="`${i+1 == bankTableHeader.length && 'border-right'} ${index+1 == bankTableData.length && 'border-bottom'}`"
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="item border-top-left"
|
||||
:class="`${i + 1 == bankTableHeader.length && 'border-right'} ${
|
||||
index + 1 == bankTableData.length && 'border-bottom'
|
||||
}`">
|
||||
上传附件
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -290,202 +283,215 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import uploadImg from '@/compontents/uploadImg.vue'
|
||||
import {reactive, ref} from "vue";
|
||||
import uploadImg from 'components/uploadImg.vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
const options = reactive([{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}])
|
||||
const options = reactive([
|
||||
{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
},
|
||||
{
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
},
|
||||
{
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
},
|
||||
{
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
},
|
||||
{
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}
|
||||
])
|
||||
const thisValue = ref('')
|
||||
|
||||
const imageUrl = ref('')
|
||||
|
||||
const bankTableHeader = reactive([
|
||||
{
|
||||
span:4,
|
||||
label:'开户行',
|
||||
prop:'bankName',
|
||||
span: 4,
|
||||
label: '开户行',
|
||||
prop: 'bankName'
|
||||
},
|
||||
{
|
||||
span: 2,
|
||||
label: '账号名称',
|
||||
prop: 'b'
|
||||
},{
|
||||
},
|
||||
{
|
||||
span: 2,
|
||||
label: '银行账号',
|
||||
prop: 'a'
|
||||
},{
|
||||
},
|
||||
{
|
||||
span: 2,
|
||||
label: '开户行所在地',
|
||||
prop: 'a'
|
||||
},{
|
||||
},
|
||||
{
|
||||
span: 2,
|
||||
label: '开户许可证核准号（基本存款账号编号）',
|
||||
prop: 'a'
|
||||
},{
|
||||
},
|
||||
{
|
||||
span: 2,
|
||||
label: '开户行许可证/基本存款账号信息',
|
||||
prop: 'a',
|
||||
slot:'annex'
|
||||
},
|
||||
slot: 'annex'
|
||||
}
|
||||
])
|
||||
|
||||
const bankTableData = reactive([
|
||||
{
|
||||
a:1,
|
||||
bankName:'中国银行'
|
||||
},{
|
||||
a:1,
|
||||
bankName:'test'
|
||||
},{
|
||||
a:1,
|
||||
bankName:'test'
|
||||
},{
|
||||
a:1,
|
||||
bankName:'test'
|
||||
},{
|
||||
a:1,
|
||||
bankName:'test'
|
||||
},{
|
||||
a:1,
|
||||
bankName:'test'
|
||||
a: 1,
|
||||
bankName: '中国银行'
|
||||
},
|
||||
{
|
||||
a: 1,
|
||||
bankName: 'test'
|
||||
},
|
||||
{
|
||||
a: 1,
|
||||
bankName: 'test'
|
||||
},
|
||||
{
|
||||
a: 1,
|
||||
bankName: 'test'
|
||||
},
|
||||
{
|
||||
a: 1,
|
||||
bankName: 'test'
|
||||
},
|
||||
{
|
||||
a: 1,
|
||||
bankName: 'test'
|
||||
}
|
||||
])
|
||||
|
||||
const test = () => {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.d-flex{
|
||||
display: flex;
|
||||
}
|
||||
.align-center{
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep.el-form-item {
|
||||
display: flex;
|
||||
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.enterpriseCertification {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
padding: 15px 10px;
|
||||
|
||||
.card {
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.top {
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.options {
|
||||
}
|
||||
::v-deep.el-form-item {
|
||||
display: flex;
|
||||
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.baseForm {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.enterpriseCertification {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
padding: 15px 10px;
|
||||
|
||||
.previewExample{
|
||||
font-size: 12px;
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
span{
|
||||
margin: 0 5px;
|
||||
.card {
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.personInfo{
|
||||
margin-top: 15px;
|
||||
.personForm{
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.options {
|
||||
}
|
||||
}
|
||||
|
||||
.baseForm {
|
||||
padding: 0 10px;
|
||||
.phone{
|
||||
.tip{
|
||||
line-height: normal;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.agreement{
|
||||
font-size: 13px !important;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.previewExample {
|
||||
font-size: 12px;
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bankInfo{
|
||||
margin-top: 15px;
|
||||
.top{
|
||||
.title{
|
||||
.tip{
|
||||
color: blue;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
.personInfo {
|
||||
margin-top: 15px;
|
||||
.personForm {
|
||||
padding: 0 10px;
|
||||
.phone {
|
||||
.tip {
|
||||
line-height: normal;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.agreement {
|
||||
font-size: 13px !important;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header{
|
||||
.item{
|
||||
background: #e0efff;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.border-top-left{
|
||||
border-top:1px solid black;
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
.border-right{
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
.border-bottom{
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.content{
|
||||
.item{
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
height: 100%;
|
||||
.bankInfo {
|
||||
margin-top: 15px;
|
||||
.top {
|
||||
.title {
|
||||
.tip {
|
||||
color: blue;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
.item {
|
||||
background: #e0efff;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.border-top-left {
|
||||
border-top: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.content {
|
||||
.item {
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { loginApi } from '../../src/http/api/login/index.ts'
|
||||
import { loginApi } from 'http/api/login/index'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'store/main.ts'
|
||||
import { useStore } from 'store/main'
|
||||
const userStore = useStore()
|
||||
const router = useRouter()
|
||||
const loginForm = ref({
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
// 查看设备详情
|
||||
const previewCollectBtn = () => {
|
||||
router.push('/equip/list')
|
||||
router.push('/equipDetail/4')
|
||||
}
|
||||
// 删除设备收藏
|
||||
const deleteCollect = (indx: any) => {
|
||||
|
|
|
|||
|
|
@ -8,62 +8,45 @@
|
|||
<div class="equipInfo">
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<div class="name">
|
||||
220El履带挖掘机
|
||||
</div>
|
||||
<div class="name">220El履带挖掘机</div>
|
||||
<div class="tag">
|
||||
<div class="item">
|
||||
待租
|
||||
</div>
|
||||
<div class="item otherItem">
|
||||
已审核
|
||||
</div>
|
||||
<div class="item">待租</div>
|
||||
<div class="item otherItem">已审核</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="viewNnum">
|
||||
浏览1000+
|
||||
</div>
|
||||
<div class="viewNnum">浏览1000+</div>
|
||||
<div class="infoBox">
|
||||
<div class="item" v-for="(v,i) in equipBaseInfoList" :key="i">
|
||||
<div class="label">
|
||||
{{ v.label }}：
|
||||
</div>
|
||||
<div class="value">
|
||||
操作重量：22吨 铲斗容量：1立方亩
|
||||
</div>
|
||||
<div class="item" v-for="(v, i) in equipBaseInfoList" :key="i">
|
||||
<div class="label">{{ v.label }}：</div>
|
||||
<div class="value">操作重量：22吨 铲斗容量：1立方亩</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="price">
|
||||
￥<span>18500</span>/月
|
||||
￥
|
||||
<span>18500</span>
|
||||
/月
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="item contact">
|
||||
联系商家
|
||||
</div>
|
||||
<div class="item applyFor">
|
||||
我要租
|
||||
</div>
|
||||
<div class="item contact">联系商家</div>
|
||||
<div class="item applyFor">我要租</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="businessInfo">
|
||||
<img class="bgCar" src="@/assets/img/equipDetail/gouwu.png">
|
||||
<img class="bgCar" src="@/assets/img/equipDetail/gouwu.png" />
|
||||
|
||||
<div class="business">
|
||||
<img src="https://img0.baidu.com/it/u=3896113677,3541736724&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=0b8dabbcda79511d6d18aaed664132fd" class="avatar">
|
||||
<img
|
||||
src="https://img0.baidu.com/it/u=3896113677,3541736724&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=0b8dabbcda79511d6d18aaed664132fd"
|
||||
class="avatar" />
|
||||
<div class="fonts">
|
||||
<div class="name">珠海嘉昌设备有限责任公司</div>
|
||||
<div class="other">
|
||||
<div class="item" v-for="(v,i) in businessList" :key="i">
|
||||
<div class="label">
|
||||
{{ v.label }}：
|
||||
</div>
|
||||
<div class="value">
|
||||
111111111{{ v.key }}{{v.unit}}
|
||||
</div>
|
||||
<div class="item" v-for="(v, i) in businessList" :key="i">
|
||||
<div class="label">{{ v.label }}：</div>
|
||||
<div class="value">111111111{{ v.key }}{{ v.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,434 +56,428 @@
|
|||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<div class="publicTitle">
|
||||
装备详情
|
||||
</div>
|
||||
<div class="publicTitle">装备详情</div>
|
||||
<div class="publicLine"></div>
|
||||
<div class="list publicContent">
|
||||
<div class="item" v-for="(v,i) in equipDetailKeyList" :key="i">
|
||||
<div class="label">
|
||||
{{ v.label }}：
|
||||
</div>
|
||||
<div :class="v.fn ? 'fnValue' :'value'">
|
||||
111111111111
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-for="(v, i) in equipDetailKeyList" :key="i">
|
||||
<div class="label">{{ v.label }}：</div>
|
||||
<div :class="v.fn ? 'fnValue' : 'value'">111111111111</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appearance">
|
||||
<div class="publicTitle">
|
||||
装备外观
|
||||
</div>
|
||||
<div class="publicTitle">装备外观</div>
|
||||
<div class="publicLine"></div>
|
||||
<div class="urlList publicContent">
|
||||
<img :src="v" v-for="(v,i) in testUrl" :key="i">
|
||||
<img :src="v" v-for="(v, i) in testUrl" :key="i" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend">
|
||||
<div class="publicTitle">
|
||||
<div>为您推荐</div>
|
||||
|
||||
<div class="change">
|
||||
换一批
|
||||
</div>
|
||||
<div class="change">换一批</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<equip-card class="item" v-for="(v,i) in 3" :key="i" :id="i"></equip-card>
|
||||
<equip-card class="item" v-for="(v, i) in 3" :key="i" :id="i"></equip-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import ShowImg from "./comoonents/showImg.vue"
|
||||
import { reactive, ref} from "vue";
|
||||
import EquipCard from "@/compontents/equipCard.vue";
|
||||
import ShowImg from './comoonents/showImg.vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import EquipCard from 'components/equipCard.vue'
|
||||
|
||||
//设备简略基本信息
|
||||
const equipBaseInfoList = reactive([
|
||||
{
|
||||
label:'设备规格',
|
||||
key:''
|
||||
},{
|
||||
label:'设备单位',
|
||||
key:''
|
||||
},{
|
||||
label:'配备机手',
|
||||
key:''
|
||||
},{
|
||||
label:'发布时间',
|
||||
key:''
|
||||
},{
|
||||
label:'更新时间',
|
||||
key:''
|
||||
},
|
||||
])
|
||||
//商家标签信息
|
||||
const businessList = reactive([
|
||||
{
|
||||
label:'入驻时间',
|
||||
key:'',
|
||||
unit:''
|
||||
},{
|
||||
label:'上架数量',
|
||||
key:'',
|
||||
unit:''
|
||||
},{
|
||||
label:'访问量',
|
||||
key:'',
|
||||
unit:'次'
|
||||
},
|
||||
])
|
||||
//设备简略基本信息
|
||||
const equipBaseInfoList = reactive([
|
||||
{
|
||||
label: '设备规格',
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
label: '设备单位',
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
label: '配备机手',
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
label: '发布时间',
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
key: ''
|
||||
}
|
||||
])
|
||||
//商家标签信息
|
||||
const businessList = reactive([
|
||||
{
|
||||
label: '入驻时间',
|
||||
key: '',
|
||||
unit: ''
|
||||
},
|
||||
{
|
||||
label: '上架数量',
|
||||
key: '',
|
||||
unit: ''
|
||||
},
|
||||
{
|
||||
label: '访问量',
|
||||
key: '',
|
||||
unit: '次'
|
||||
}
|
||||
])
|
||||
|
||||
const equipDetailKeyList = reactive([
|
||||
{
|
||||
label:'装备编号',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'装备类别',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'装备组别',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'装备名称',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'规格/操作重量',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'品牌',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'装备型号',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'序列号码',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'出场时间',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'工作时长',
|
||||
key:'',
|
||||
fn:'',
|
||||
arg:''
|
||||
},{
|
||||
label:'检验信息',
|
||||
key:'',
|
||||
fn:'1',
|
||||
arg:''
|
||||
},{
|
||||
label:'保险信息',
|
||||
key:'',
|
||||
fn:'2',
|
||||
arg:''
|
||||
const equipDetailKeyList = reactive([
|
||||
{
|
||||
label: '装备编号',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '装备类别',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '装备组别',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '装备名称',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '规格/操作重量',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '品牌',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '装备型号',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '序列号码',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '出场时间',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '工作时长',
|
||||
key: '',
|
||||
fn: '',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '检验信息',
|
||||
key: '',
|
||||
fn: '1',
|
||||
arg: ''
|
||||
},
|
||||
{
|
||||
label: '保险信息',
|
||||
key: '',
|
||||
fn: '2',
|
||||
arg: ''
|
||||
}
|
||||
])
|
||||
|
||||
const testUrl = [
|
||||
'https://img0.baidu.com/it/u=3182669744,3015526205&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
|
||||
'https://img2.baidu.com/it/u=2078785911,1809964779&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500',
|
||||
'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
|
||||
]
|
||||
|
||||
const fn = () => {
|
||||
console.log('fn 111111111111111111111')
|
||||
}
|
||||
])
|
||||
|
||||
const testUrl = [
|
||||
'https://img0.baidu.com/it/u=3182669744,3015526205&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
|
||||
'https://img2.baidu.com/it/u=2078785911,1809964779&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500',
|
||||
'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
|
||||
]
|
||||
|
||||
const fn = () => {
|
||||
console.log('fn 111111111111111111111')
|
||||
}
|
||||
|
||||
const that = {
|
||||
fn
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const that = {
|
||||
fn
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.equipDetail{
|
||||
.top{
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
.showImg{
|
||||
width: 38%;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.baseInfo{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.equipInfo{
|
||||
.equipDetail {
|
||||
.top {
|
||||
display: flex;
|
||||
.left{
|
||||
margin-right: 5px;
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name{
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
.tag{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item{
|
||||
font-size: 13px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #005AF2;
|
||||
margin-left: 15px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid #005AF2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.otherItem{
|
||||
border-color: #FF6734;
|
||||
color: #FF6734;
|
||||
}
|
||||
}
|
||||
}
|
||||
.viewNnum{
|
||||
font-size: 13px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #BCBCBC;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.infoBox{
|
||||
margin-top: 20px;
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
.label{
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #8E8E8E;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.value{
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-bottom: 50px;
|
||||
.showImg {
|
||||
width: 38%;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.price{
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #FF4800;
|
||||
text-align: right;
|
||||
span{
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.options{
|
||||
.baseInfo {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.item{
|
||||
width: 110px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.contact{
|
||||
|
||||
color: #FFFFFF;
|
||||
background: #3CABFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.applyFor{
|
||||
border: 1px solid #3CABFF;
|
||||
color: #3CABFF;
|
||||
box-sizing: border-box;
|
||||
line-height: 38px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.businessInfo{
|
||||
width: 100%;
|
||||
height: 147px;
|
||||
background: #F7F9FA;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 25px 15px;
|
||||
.bgCar{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.business{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar{
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.fonts{
|
||||
.name{
|
||||
font-size: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.other{
|
||||
display: flex;
|
||||
.item{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.equipInfo {
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
.label{
|
||||
|
||||
.left {
|
||||
margin-right: 5px;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item {
|
||||
font-size: 13px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #005af2;
|
||||
margin-left: 15px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid #005af2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.otherItem {
|
||||
border-color: #ff6734;
|
||||
color: #ff6734;
|
||||
}
|
||||
}
|
||||
}
|
||||
.viewNnum {
|
||||
font-size: 13px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #bcbcbc;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.infoBox {
|
||||
margin-top: 20px;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
.label {
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #8e8e8e;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.value {
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.value{
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.price {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #ff4800;
|
||||
text-align: right;
|
||||
span {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.item {
|
||||
width: 110px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.contact {
|
||||
color: #ffffff;
|
||||
background: #3cabff;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.applyFor {
|
||||
border: 1px solid #3cabff;
|
||||
color: #3cabff;
|
||||
box-sizing: border-box;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.businessInfo {
|
||||
width: 100%;
|
||||
height: 147px;
|
||||
background: #f7f9fa;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 25px 15px;
|
||||
.bgCar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.business {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.fonts {
|
||||
.name {
|
||||
font-size: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.other {
|
||||
display: flex;
|
||||
.item {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
.label {
|
||||
}
|
||||
.value {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.publicTitle{
|
||||
font-size: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
.publicTitle {
|
||||
font-size: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.publicLine{
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
position: relative;
|
||||
&:before{
|
||||
content: '';
|
||||
height: 3px;
|
||||
width: 40px;
|
||||
background: #2282FF;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
.publicContent{
|
||||
box-sizing: border-box;
|
||||
padding: 40px 70px 10px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.publicLine {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
height: 3px;
|
||||
width: 40px;
|
||||
background: #2282ff;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
.publicContent {
|
||||
box-sizing: border-box;
|
||||
padding: 40px 70px 10px;
|
||||
}
|
||||
|
||||
.detail{
|
||||
.list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
width: calc(100% / 3);
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
margin-bottom: 35px;
|
||||
.label{
|
||||
color: #8E8E8E;
|
||||
.detail {
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
width: calc(100% / 3);
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
margin-bottom: 35px;
|
||||
.label {
|
||||
color: #8e8e8e;
|
||||
}
|
||||
.value {
|
||||
color: #333333;
|
||||
}
|
||||
.fnValue {
|
||||
color: #0087cd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.value{
|
||||
.appearance {
|
||||
margin-bottom: 20px;
|
||||
.urlList {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.fnValue {
|
||||
.recommend {
|
||||
.change {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #9d9d9d;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
color: #0087CD;
|
||||
}
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.item {
|
||||
width: calc((100% - 40px) / 3);
|
||||
&:nth-child(3n - 1) {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.appearance{
|
||||
margin-bottom: 20px;
|
||||
.urlList{
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recommend{
|
||||
.change{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #9D9D9D;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.item{
|
||||
width: calc((100% - 40px) / 3);
|
||||
&:nth-child(3n - 1){
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,22 @@
|
|||
<template>
|
||||
<div class="equipList">
|
||||
<div class="showScreen">
|
||||
<div class="title">
|
||||
筛选条件：
|
||||
</div>
|
||||
<div class="title">筛选条件：</div>
|
||||
<div class="tags">
|
||||
<el-tag
|
||||
v-for="(tag,i) in screenTags"
|
||||
:key="tag.id"
|
||||
class="item"
|
||||
@close="handleClose(tag,i)"
|
||||
closable
|
||||
>
|
||||
v-for="(tag, i) in screenTags"
|
||||
:key="tag.id"
|
||||
class="item"
|
||||
@close="handleClose(tag, i)"
|
||||
closable>
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
<el-tag class="item"
|
||||
v-if="screenTags.length > 0"
|
||||
type="danger"
|
||||
@close="tagClear"
|
||||
closable>
|
||||
<el-tag
|
||||
class="item"
|
||||
v-if="screenTags.length > 0"
|
||||
type="danger"
|
||||
@close="tagClear"
|
||||
closable>
|
||||
清空所有条件
|
||||
</el-tag>
|
||||
</div>
|
||||
|
|
@ -26,463 +24,508 @@
|
|||
|
||||
<div class="screen">
|
||||
<div class="choose">
|
||||
<template v-for="(v,i) in screenChooseList">
|
||||
<div class="line" v-if="v.index < v.list.length " :key="i">
|
||||
<template v-for="(v, i) in screenChooseList">
|
||||
<div class="line" v-if="v.index < v.list.length" :key="i">
|
||||
<div class="label">
|
||||
{{ v.list[v.index].name }}
|
||||
</div>
|
||||
<div class="select">
|
||||
<div class="item"
|
||||
@click="selectScreen(i,val,v.index)"
|
||||
v-for="(val,index) in v.list[v.index].select" :key="index">
|
||||
<div
|
||||
class="item"
|
||||
@click="selectScreen(i, val, v.index)"
|
||||
v-for="(val, index) in v.list[v.index].select"
|
||||
:key="index">
|
||||
{{ val.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="item"
|
||||
@click="changeOption(v)"
|
||||
:class="v.id == optionActive && 'active'"
|
||||
v-for="(v,i) in screenOptionList" :key="i">
|
||||
<div
|
||||
class="item"
|
||||
@click="changeOption(v)"
|
||||
:class="v.id == optionActive && 'active'"
|
||||
v-for="(v, i) in screenOptionList"
|
||||
:key="i">
|
||||
{{ v.name }}
|
||||
<template v-if="v.sort">
|
||||
<el-icon class="icon" v-show="v.sort == 'asc' && v.id == optionActive"><CaretTop /></el-icon>
|
||||
<el-icon class="icon" v-show="v.sort == 'desc' && v.id == optionActive"><CaretBottom /></el-icon>
|
||||
<el-icon class="icon" v-show="v.sort == 'asc' && v.id == optionActive">
|
||||
<CaretTop />
|
||||
</el-icon>
|
||||
<el-icon class="icon" v-show="v.sort == 'desc' && v.id == optionActive">
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="showList">
|
||||
<equip-card class="card" v-for="(v,i) in 10" :key="i" :id="i" @on-click="toDetail"></equip-card>
|
||||
<equip-card
|
||||
class="card"
|
||||
v-for="(v, i) in 10"
|
||||
:key="i"
|
||||
:id="i"
|
||||
@on-click="toDetail"></equip-card>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
:page-size="20"
|
||||
:pager-count="11"
|
||||
layout="prev, pager, next"
|
||||
:total="1000"
|
||||
/>
|
||||
:page-size="20"
|
||||
:pager-count="11"
|
||||
layout="prev, pager, next"
|
||||
:total="1000" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {computed, reactive, ref} from "vue";
|
||||
import EquipCard from "@/compontents/equipCard.vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import { getList } from "@/http/api/equip"
|
||||
const router = useRouter()
|
||||
//筛选条件列表数据
|
||||
const screenChooseList = reactive([
|
||||
{
|
||||
name: 'address',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '省份',
|
||||
value: '',
|
||||
parent: 'address',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '上海'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '北京'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '四川'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '河南'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '城市',
|
||||
value: '',
|
||||
parent: 'address',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '类别',
|
||||
value: '',
|
||||
parent: 'type',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '挖掘机械'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '土方机械'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '组别',
|
||||
value: '',
|
||||
parent: 'type',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '组别1'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '产品名称',
|
||||
value: '',
|
||||
parent: 'type',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '产品1'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '产品2'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '产品3'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'rent',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '租金区间',
|
||||
value: '',
|
||||
parent: 'rent',
|
||||
select: [{
|
||||
id: 1,
|
||||
name: '5千元以下'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '5千-1万'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '1万-5万'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '5万-10万'
|
||||
},]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'age',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '设备机龄',
|
||||
value: '',
|
||||
parent: 'rent',
|
||||
select: [{
|
||||
id: 1,
|
||||
name: '一年以下'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '1年-3年'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '3年-6年'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '10年以上'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'time',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '工作小时',
|
||||
value: '',
|
||||
parent: 'time',
|
||||
select: [{
|
||||
id: 1,
|
||||
name: '500小时以内'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '500-2000小时'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '2000-5000小时'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '5000-10000小时'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '10000小时以上'
|
||||
},]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
// 综合排序 更新时间 月租金 排序按钮
|
||||
const screenOptionList = reactive([
|
||||
{
|
||||
name: '综合排序',
|
||||
id: '1',
|
||||
sort: ''
|
||||
}, {
|
||||
name: '更新时间',
|
||||
id: '2',
|
||||
sort: 'asc' //asc or desc
|
||||
}, {
|
||||
name: '月租金',
|
||||
id: '3',
|
||||
sort: 'asc'
|
||||
},
|
||||
])
|
||||
//激活 排序按钮
|
||||
const optionActive = ref('1')
|
||||
//显示的被选中的筛选条件
|
||||
const screenTags = computed<Array<any>>(() => {
|
||||
let arr = []
|
||||
screenChooseList.forEach(key => {
|
||||
arr = [...arr,...key.select]
|
||||
})
|
||||
return arr
|
||||
})
|
||||
|
||||
//删除条件
|
||||
const handleClose = (tag, index) => {
|
||||
screenChooseList[tag.parentIndex].select.splice(tag.index)
|
||||
screenChooseList[tag.parentIndex].index = tag.index
|
||||
}
|
||||
//清除所有标签
|
||||
const tagClear = () => {
|
||||
screenChooseList.forEach(key => {
|
||||
key.select = []
|
||||
key.index = 0
|
||||
})
|
||||
}
|
||||
|
||||
const changeOption = (val) => {
|
||||
if(val.sort && optionActive.value == val.id){
|
||||
val.sort = val.sort == 'asc' ? 'desc' : 'asc'
|
||||
}
|
||||
optionActive.value = val.id
|
||||
|
||||
}
|
||||
|
||||
//选中后添加到 大类中的select字段
|
||||
const selectScreen = (parentIndex, val, index) => {
|
||||
screenChooseList[parentIndex].select.push(
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import EquipCard from 'components/equipCard.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getList } from 'http/api/equip'
|
||||
const router = useRouter()
|
||||
//筛选条件列表数据
|
||||
const screenChooseList = reactive([
|
||||
{
|
||||
name: 'address',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '省份',
|
||||
value: '',
|
||||
parent: 'address',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '上海'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '北京'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '四川'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '河南'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '城市',
|
||||
value: '',
|
||||
parent: 'address',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '安徽'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '类别',
|
||||
value: '',
|
||||
parent: 'type',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '挖掘机械'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '土方机械'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '组别',
|
||||
value: '',
|
||||
parent: 'type',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '组别1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '产品名称',
|
||||
value: '',
|
||||
parent: 'type',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '产品1'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '产品2'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '产品3'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'rent',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '租金区间',
|
||||
value: '',
|
||||
parent: 'rent',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '5千元以下'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '5千-1万'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '1万-5万'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '5万-10万'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'age',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '设备机龄',
|
||||
value: '',
|
||||
parent: 'rent',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '一年以下'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '1年-3年'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '3年-6年'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '10年以上'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'time',
|
||||
index: 0,
|
||||
select: [],
|
||||
list: [
|
||||
{
|
||||
name: '工作小时',
|
||||
value: '',
|
||||
parent: 'time',
|
||||
select: [
|
||||
{
|
||||
id: 1,
|
||||
name: '500小时以内'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '500-2000小时'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '2000-5000小时'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '5000-10000小时'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '10000小时以上'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
// 综合排序 更新时间 月租金 排序按钮
|
||||
const screenOptionList = reactive([
|
||||
{
|
||||
name: '综合排序',
|
||||
id: '1',
|
||||
sort: ''
|
||||
},
|
||||
{
|
||||
name: '更新时间',
|
||||
id: '2',
|
||||
sort: 'asc' //asc or desc
|
||||
},
|
||||
{
|
||||
name: '月租金',
|
||||
id: '3',
|
||||
sort: 'asc'
|
||||
}
|
||||
])
|
||||
//激活 排序按钮
|
||||
const optionActive = ref('1')
|
||||
//显示的被选中的筛选条件
|
||||
const screenTags = computed<Array<any>>(() => {
|
||||
let arr = []
|
||||
screenChooseList.forEach((key) => {
|
||||
arr = [...arr, ...key.select]
|
||||
})
|
||||
return arr
|
||||
})
|
||||
|
||||
//删除条件
|
||||
const handleClose = (tag, index) => {
|
||||
screenChooseList[tag.parentIndex].select.splice(tag.index)
|
||||
screenChooseList[tag.parentIndex].index = tag.index
|
||||
}
|
||||
//清除所有标签
|
||||
const tagClear = () => {
|
||||
screenChooseList.forEach((key) => {
|
||||
key.select = []
|
||||
key.index = 0
|
||||
})
|
||||
}
|
||||
|
||||
const changeOption = (val) => {
|
||||
if (val.sort && optionActive.value == val.id) {
|
||||
val.sort = val.sort == 'asc' ? 'desc' : 'asc'
|
||||
}
|
||||
optionActive.value = val.id
|
||||
}
|
||||
|
||||
//选中后添加到 大类中的select字段
|
||||
const selectScreen = (parentIndex, val, index) => {
|
||||
screenChooseList[parentIndex].select.push({
|
||||
...val,
|
||||
index,
|
||||
parentIndex
|
||||
}
|
||||
)
|
||||
screenChooseList[parentIndex].index++
|
||||
}
|
||||
|
||||
//装备card被点击
|
||||
const toDetail = (data) => {
|
||||
router.push({
|
||||
path:`/equipDetail/${data.id}`
|
||||
})
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
const res = await getList()
|
||||
console.log('res ============',res)
|
||||
}
|
||||
const init = () => {
|
||||
getData()
|
||||
}
|
||||
init()
|
||||
|
||||
|
||||
})
|
||||
screenChooseList[parentIndex].index++
|
||||
}
|
||||
|
||||
//装备card被点击
|
||||
const toDetail = (data) => {
|
||||
router.push({
|
||||
path: `/equipDetail/${data.id}`
|
||||
})
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
const res = await getList()
|
||||
console.log('res ============', res)
|
||||
}
|
||||
const init = () => {
|
||||
getData()
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.equipList {
|
||||
|
||||
.showScreen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
.tags {
|
||||
.item {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen {
|
||||
.choose {
|
||||
margin-top: 20px;
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
|
||||
.label {
|
||||
width: 100px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
background: #f3f3f3;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.select {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
|
||||
.item {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
color: #939393;
|
||||
font-size: 15px;
|
||||
|
||||
&:hover {
|
||||
color: red;
|
||||
.equipList {
|
||||
.showScreen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
.tags {
|
||||
.item {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen {
|
||||
.choose {
|
||||
margin-top: 20px;
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
|
||||
.label {
|
||||
width: 100px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
background: #f3f3f3;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.select {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
|
||||
.item {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
color: #939393;
|
||||
font-size: 15px;
|
||||
|
||||
&:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #1069ff !important;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.item {
|
||||
background: #f7f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 10px 20px;
|
||||
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #9d9d9d;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.card {
|
||||
width: calc((100% - 40px) / 3);
|
||||
|
||||
&:nth-child(3n - 1) {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #1069FF !important;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.item {
|
||||
background: #F7F9FA;
|
||||
border-radius: 12px;
|
||||
padding: 10px 20px;
|
||||
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #9D9D9D;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.icon{
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.card {
|
||||
width: calc((100% - 40px) / 3);
|
||||
|
||||
&:nth-child(3n - 1) {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import EquipCard from '@/compontents/equipCard.vue'
|
||||
import Navmenu from '@/compontents/Navmenu/index.vue'
|
||||
import { useStore } from 'store/main.ts'
|
||||
import EquipCard from 'components/equipCard.vue'
|
||||
import Navmenu from 'components/Navmenu/index.vue'
|
||||
import { useStore } from 'store/main'
|
||||
const userStore = useStore()
|
||||
onMounted(() => {
|
||||
console.log(userStore.token, '****')
|
||||
|
|
@ -229,7 +229,11 @@
|
|||
<div class="swpier-img">
|
||||
<el-carousel :interval="5000" arrow="always" height="437px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3 text="2xl" justify="center">{{ item }}</h3>
|
||||
<!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
src="https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png"
|
||||
fit="cover" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import EnterpriseCertification from '../../EnterpriseCertification.vue'
|
||||
// 旧手机号码
|
||||
const oldPhoneNumber = ref('15336652321')
|
||||
// 修改新手机号码的数据源
|
||||
|
|
@ -8,6 +9,9 @@
|
|||
})
|
||||
// 修改手机号码弹框显示隐藏
|
||||
const editDialogTableVisible = ref(false)
|
||||
|
||||
// 申请企业认证弹框显示隐藏
|
||||
const certificationVisible = ref(false)
|
||||
// 修改手机号码按钮
|
||||
const handlerEditMobilePhone = () => {
|
||||
console.log('修改***')
|
||||
|
|
@ -43,6 +47,12 @@
|
|||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 申请企业认证
|
||||
const handlerApplyFor = () => {
|
||||
console.log('申请企业认证**')
|
||||
certificationVisible.value = true
|
||||
}
|
||||
// 订单信息
|
||||
const orderInfoList = ref([
|
||||
{
|
||||
|
|
@ -84,10 +94,7 @@
|
|||
<span class="standard-user">标准用户</span>
|
||||
</div>
|
||||
|
||||
<div class="my-enterprise">
|
||||
<span>我的企业：</span>
|
||||
<span class="enterprise-name">安徽博诺斯信息科技有限公司</span>
|
||||
</div>
|
||||
<el-button size="small" type="primary">开通付费</el-button>
|
||||
|
||||
<div class="btn-edit">
|
||||
<span @click="handlerEditMobilePhone">
|
||||
|
|
@ -101,6 +108,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-info">
|
||||
<div class="my-enterprise">
|
||||
<span>我的企业：</span>
|
||||
<span @click="handlerApplyFor" style="cursor: pointer">申请企业认证</span>
|
||||
<span class="enterprise-name">安徽博诺斯信息科技有限公司 (申请被驳回)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单交易信息 -->
|
||||
<div class="goods-box">
|
||||
<ul class="goods-count">
|
||||
|
|
@ -135,6 +150,11 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 申请企业认证弹框 -->
|
||||
<el-dialog v-model="certificationVisible" title="申请企业认证" width="80%" align-center>
|
||||
<EnterpriseCertification />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -150,6 +170,7 @@
|
|||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.number-box {
|
||||
margin-left: 20px;
|
||||
|
|
@ -166,6 +187,10 @@
|
|||
color: #c8c9c9;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.my-enterprise {
|
||||
font-size: 18px;
|
||||
color: #1b7eff;
|
||||
|
|
@ -174,10 +199,14 @@
|
|||
.enterprise-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
margin-left: 60px;
|
||||
margin-left: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c7c7c8;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import TableComponent from '@/compontents/TableComponent/index.vue'
|
||||
import FormComponent from '@/compontents/FormComponent/index.vue'
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
import TableComponent from 'components/TableComponent/index.vue'
|
||||
import FormComponent from 'components/FormComponent/index.vue'
|
||||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const pageSize = 20
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
dialogFormVisibleSettlein.value = true
|
||||
}
|
||||
|
||||
const ruleFormRef = ref(null)
|
||||
const ruleFormRef = ref()
|
||||
|
||||
// 入驻框保存提交
|
||||
const submitBtn = () => {
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
})
|
||||
}
|
||||
|
||||
const tableProps = ref([
|
||||
const tableProps: any = ref([
|
||||
{ v_label: '编码', v_props: 'v_code', v_slot: '', width: '' },
|
||||
{ v_label: '租赁范围', v_props: 'v_lease_scope', v_slot: '', width: '' },
|
||||
{ v_label: '装备类型', v_props: 'v_equipment_type', v_slot: '', width: '' },
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
{ v_label: '操作', v_props: 'v_operate', v_slot: 'operate', width: '140px' }
|
||||
])
|
||||
|
||||
const tableData = [
|
||||
const tableData: any = [
|
||||
{
|
||||
v_code: '123456',
|
||||
v_lease_scope: '2023/12/12',
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
]
|
||||
|
||||
// 表单 lable 数据
|
||||
const formItemList = ref([
|
||||
const formItemList: any = ref([
|
||||
{ v_label: '编码', v_typ: 'ipt' },
|
||||
{ v_label: '状态', v_typ: 'ipt' },
|
||||
{ v_label: '租赁范围', v_typ: 'sel' },
|
||||
|
|
@ -138,7 +138,6 @@
|
|||
|
||||
<template>
|
||||
<!-- 商品管理 -->
|
||||
|
||||
<FormComponent :formItemList="formItemList">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="equipmentDeployment">装备入驻</el-button>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
|
||||
import TableComponent from '@/compontents/TableComponent/index.vue'
|
||||
import FormComponent from '@/compontents/FormComponent/index.vue'
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
import TableComponent from 'components/TableComponent/index.vue'
|
||||
import FormComponent from 'components/FormComponent/index.vue'
|
||||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
console.log(row, '删除当前数据')
|
||||
}
|
||||
|
||||
const tableProps = ref([
|
||||
const tableProps: any = ref([
|
||||
{ v_label: '编码', v_props: 'v_code', v_slot: '', width: '' },
|
||||
{ v_label: '租赁范围', v_props: 'v_lease_scope', v_slot: '', width: '' },
|
||||
{ v_label: '装备类型', v_props: 'v_equipment_type', v_slot: '', width: '' },
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
{ v_label: '操作', v_props: 'v_operate', v_slot: 'operate', width: '140px' }
|
||||
])
|
||||
|
||||
const tableData = [
|
||||
const tableData: any = [
|
||||
{
|
||||
v_code: '123456',
|
||||
v_lease_scope: '2023/12/12',
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
]
|
||||
|
||||
// 表单 lable 数据
|
||||
const formItemList = ref([
|
||||
const formItemList: any = ref([
|
||||
{ v_label: '编码', v_typ: 'ipt' },
|
||||
{ v_label: '状态', v_typ: 'ipt' },
|
||||
{ v_label: '租赁范围', v_typ: 'sel' },
|
||||
|
|
|
|||
|
|
@ -1,73 +1,93 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
// import { userRouter } from 'vue-router'
|
||||
// const router = userRouter()
|
||||
const activeseekingRent: any = ref(true)
|
||||
const activeMenu: any = ref('baseInfo')
|
||||
const menuList: any = ref([
|
||||
{ title: '基础信息', name: 'baseInfo' },
|
||||
{ title: '订单管理', name: 'orderManagement' },
|
||||
{ title: '子账号管理', name: 'subAccount' }
|
||||
])
|
||||
const seekingRentClick = () => {
|
||||
activeseekingRent.value = !activeseekingRent.value
|
||||
menuList.value = [
|
||||
{ title: '基础信息', name: 'baseInfo' },
|
||||
{ title: '订单管理', name: 'orderManagement' },
|
||||
{ title: '子账号管理', name: 'subAccount' }
|
||||
]
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from '../../store/user'
|
||||
import { useRoute } from 'vue-router'
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
}
|
||||
// 求租按钮
|
||||
const seekingRentClick = () => {
|
||||
store.editcurrentMenuItem('baseInfo')
|
||||
store.editCurrentMenuType(true)
|
||||
store.editcurrentMenuList([
|
||||
{ title: '基础信息', name: 'baseInfo' },
|
||||
{ title: '订单管理', name: 'orderManagement' },
|
||||
{ title: '子账号管理', name: 'subAccount' }
|
||||
])
|
||||
router.push({ name: 'baseInfo' })
|
||||
}
|
||||
|
||||
const lesseeClick = () => {
|
||||
activeseekingRent.value = !activeseekingRent.value
|
||||
menuList.value = [
|
||||
{ title: '订单管理', name: 'orderManagementCz' },
|
||||
{ title: '商品管理', name: 'goodsManagement' },
|
||||
{ title: '商品上下架', name: 'goodsUpdown' },
|
||||
{ title: '机手管理', name: 'operatorManagement' }
|
||||
]
|
||||
}
|
||||
// 承租按钮
|
||||
const lesseeClick = () => {
|
||||
store.editcurrentMenuItem('orderManagementCz')
|
||||
store.editCurrentMenuType(false)
|
||||
store.editcurrentMenuList([
|
||||
{ title: '订单管理', name: 'orderManagementCz' },
|
||||
{ title: '商品管理', name: 'goodsManagement' },
|
||||
{ title: '商品上下架', name: 'goodsUpdown' },
|
||||
{ title: '机手管理', name: 'operatorManagement' }
|
||||
])
|
||||
router.push({ name: 'orderManagementCz' })
|
||||
}
|
||||
|
||||
// const handleSelect = (iname) => {
|
||||
// router.push({
|
||||
// name: iname,
|
||||
// params: {
|
||||
// twolevel: true
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
const handleSelect = (name: any, path: any) => {
|
||||
store.editcurrentMenuItem(name)
|
||||
}
|
||||
const activeMenuItem = computed(() => {
|
||||
return store.currentMenuItem
|
||||
})
|
||||
|
||||
const activeseekingRent = computed(() => {
|
||||
return store.currentMenuType
|
||||
})
|
||||
|
||||
const menuList = computed(() => {
|
||||
return store.menuList
|
||||
})
|
||||
|
||||
watch(route, (newVlaue) => {
|
||||
if (newVlaue.path.indexOf('myuser') === -1) {
|
||||
store.editcurrentMenuItem('baseInfo')
|
||||
store.editCurrentMenuType(true)
|
||||
store.editcurrentMenuList([
|
||||
{ title: '基础信息', name: 'baseInfo' },
|
||||
{ title: '订单管理', name: 'orderManagement' },
|
||||
{ title: '子账号管理', name: 'subAccount' }
|
||||
])
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<!-- 个人中心页面 -->
|
||||
<div class="app-container ">
|
||||
<div class="app-container">
|
||||
<div class="left-menu">
|
||||
<!-- 头像 -->
|
||||
<div class="pic-box">
|
||||
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="" />
|
||||
<img
|
||||
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
||||
alt="" />
|
||||
<span>1234566XXX</span>
|
||||
</div>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<div class="btn-box">
|
||||
<span @click="seekingRentClick">
|
||||
<a :class="activeseekingRent ? 'active' : ''">
|
||||
求租
|
||||
</a>
|
||||
<a :class="activeseekingRent ? 'active' : ''">求租</a>
|
||||
</span>
|
||||
<span @click="lesseeClick">
|
||||
<a :class="!activeseekingRent ? 'active' : ''">
|
||||
承租
|
||||
</a>
|
||||
<a :class="!activeseekingRent ? 'active' : ''">承租</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 菜单 -->
|
||||
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" router>
|
||||
<el-menu
|
||||
:default-active="activeMenuItem"
|
||||
class="el-menu-vertical-demo"
|
||||
router
|
||||
@select="handleSelect">
|
||||
<el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.name">
|
||||
{{ item.title }}
|
||||
</el-menu-item>
|
||||
|
|
@ -79,61 +99,60 @@ const lesseeClick = () => {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" >
|
||||
.app-container {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
<style lang="scss">
|
||||
.app-container {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-menu {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
background-color: #f7f9fa;
|
||||
border-radius: 5px;
|
||||
margin-right: 15px;
|
||||
|
||||
.pic-box {
|
||||
.left-menu {
|
||||
width: 260px;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
background-color: #f7f9fa;
|
||||
border-radius: 5px;
|
||||
margin-right: 15px;
|
||||
|
||||
img {
|
||||
margin: 30px 0 10px 0;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
.pic-box {
|
||||
width: 260px;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 30px 0 10px 0;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
height: 45px;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
line-height: 45px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: #82b8ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
height: 45px;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
.right-content {
|
||||
width: calc(100% - 260px);
|
||||
height: 100%;
|
||||
line-height: 45px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: #82B8FF;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #2282ff;
|
||||
border-bottom: 2px solid #2282ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
width: calc(100% - 260px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #2282ff;
|
||||
border-bottom: 2px solid #2282ff;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
const addMachinistVisible = ref(false)
|
||||
// 获取数据列表
|
||||
const getList = () => {
|
||||
console.log('获取数据列表***')
|
||||
}
|
||||
// 新增机手管理
|
||||
const handlerMachinistInfo = () => {
|
||||
console.log('新增机手管理')
|
||||
addMachinistVisible.value = true
|
||||
}
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
|
|
@ -38,7 +44,7 @@
|
|||
|
||||
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
|
||||
<el-form-item>
|
||||
<el-button type="primary">新增</el-button>
|
||||
<el-button type="primary" @click="handlerMachinistInfo">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
|
@ -49,7 +55,8 @@
|
|||
:header-cell-style="{
|
||||
background: '#3E98FF',
|
||||
color: '#fff'
|
||||
}">
|
||||
}"
|
||||
max-height="400">
|
||||
<el-table-column align="center" prop="name" label="机手姓名" />
|
||||
<el-table-column align="center" prop="name" label="机手电话" />
|
||||
<el-table-column align="center" prop="date" label="年龄" />
|
||||
|
|
@ -68,10 +75,65 @@
|
|||
:pageSize="pageSize"
|
||||
:pageNumber="pageNumber"
|
||||
:total="total" />
|
||||
|
||||
<!-- 新增机手管理弹框 -->
|
||||
<el-dialog v-model="addMachinistVisible" title="新增机手信息" align-center width="40%">
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="机手管理">
|
||||
<el-input autocomplete="off" style="width: 290px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="机手电话">
|
||||
<el-input autocomplete="off" placeholder="请输入新手机号码" style="width: 290px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄">
|
||||
<el-input autocomplete="off" placeholder="请输入新手机号码" style="width: 290px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-input autocomplete="off" placeholder="请输入新手机号码" style="width: 290px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input autocomplete="off" placeholder="请输入新手机号码" style="width: 290px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证照片">
|
||||
<el-upload>
|
||||
<img />
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
上传头像面
|
||||
</el-upload>
|
||||
<el-upload>
|
||||
<img />
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
上传国徽面
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="持证信息">
|
||||
<el-upload>
|
||||
<img />
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
上传证件信息
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success">保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
border: 1px solid #333;
|
||||
margin: 0 5px;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'store/main'
|
||||
const userStore = useStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
const total: any = ref(0)
|
||||
import { getOrderListApi } from 'http/api/usercenter/seekorder'
|
||||
// 获取数据列表
|
||||
const getList = () => {
|
||||
console.log('获取数据列表***')
|
||||
const getList = async () => {
|
||||
const res: any = await getOrderListApi()
|
||||
console.log('获取数据列表***', res)
|
||||
tableData.value = res.rows
|
||||
total.value = res.total
|
||||
}
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
}
|
||||
]
|
||||
getList()
|
||||
|
||||
// 查询按钮
|
||||
const queryTableList = () => {
|
||||
getList()
|
||||
}
|
||||
|
||||
const tableData = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -54,7 +49,7 @@
|
|||
<el-input />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">查询</el-button>
|
||||
<el-button type="primary" @click="queryTableList">查询</el-button>
|
||||
<el-button type="success">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -67,12 +62,12 @@
|
|||
background: '#3E98FF',
|
||||
color: '#fff'
|
||||
}">
|
||||
<el-table-column align="center" prop="name" label="订单编号" />
|
||||
<el-table-column align="center" prop="code" label="订单编号" />
|
||||
<el-table-column align="center" prop="name" label="供应商" />
|
||||
<el-table-column align="center" prop="date" label="订单创建日期" />
|
||||
<el-table-column align="center" prop="name" label="装备类型" />
|
||||
<el-table-column align="center" prop="name" label="装备名称" />
|
||||
<el-table-column align="center" prop="name" label="订单状态" />
|
||||
<el-table-column align="center" prop="createTime" label="订单创建日期" />
|
||||
<el-table-column align="center" prop="payType" label="装备类型" />
|
||||
<el-table-column align="center" prop="orderUser" label="装备名称" />
|
||||
<el-table-column align="center" prop="orderStatus" label="订单状态" />
|
||||
<el-table-column align="center" prop="name" label="操作" width="260px">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary">退租</el-button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
|
|
@ -62,11 +62,11 @@
|
|||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#3E98FF',
|
||||
color: '#fff'
|
||||
}">
|
||||
}"
|
||||
fit>
|
||||
<el-table-column align="center" prop="name" label="订单编号" />
|
||||
<el-table-column align="center" prop="address" label="客户单位" />
|
||||
<el-table-column align="center" prop="date" label="订单创建日期" />
|
||||
|
|
@ -75,8 +75,8 @@
|
|||
<el-table-column align="center" prop="name" label="装备名称" />
|
||||
<el-table-column align="center" prop="name" label="订单状态" />
|
||||
<el-table-column align="center" prop="name" label="操作" width="260px">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary">确认</el-button>
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" @click="row">确认</el-button>
|
||||
<el-button size="small" type="success">查看</el-button>
|
||||
<el-button size="small" type="danger">删除</el-button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default ({ mode }: any) => {
|
|||
views: resolve(__dirname, './src/views'),
|
||||
router: resolve(__dirname, './src/router'),
|
||||
utils: resolve(__dirname, './src/utils'),
|
||||
http: resolve(__dirname, './src/http')
|
||||
http: resolve(__dirname, './src/http'),
|
||||
}
|
||||
},
|
||||
css: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue