flat:来源标红
This commit is contained in:
Apcallover
@@ -1,35 +1,41 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="v-tabs" :style="{ height: height }">
|
<view class="v-tabs" :style="{ height: height }">
|
||||||
<scroll-view class="scroll-view" :show-scrollbar="false" scroll-x scroll-with-animation :scroll-left="scrollLeft" style="width: auto; height: 100%; overflow: hidden;">
|
<scroll-view
|
||||||
<view class="v-tabs__inner">
|
class="scroll-view"
|
||||||
<view
|
:show-scrollbar="false"
|
||||||
class="v-tabs__item"
|
scroll-x
|
||||||
:style="{
|
scroll-with-animation
|
||||||
color: activeTab == i ? activeColor : color,
|
:scroll-left="scrollLeft"
|
||||||
fontSize: activeTab == i ? activeFontSize : fontSize,
|
style="width: auto; height: 100%; overflow: hidden"
|
||||||
backgroundColor: activeTab == i ? backgroundColor : '',
|
|
||||||
borderRadius,
|
|
||||||
padding,
|
|
||||||
|
|
||||||
}"
|
|
||||||
:data-index="i"
|
|
||||||
:class="{ active: activeTab == i }"
|
|
||||||
@tap="handleTapItem"
|
|
||||||
v-for="(v, i) in tabs"
|
|
||||||
:key="i"
|
|
||||||
>
|
>
|
||||||
<view class="">
|
<view class="v-tabs__inner">
|
||||||
{{ v }}
|
<view
|
||||||
</view>
|
class="v-tabs__item"
|
||||||
<view class="bottomborder"></view>
|
:style="{
|
||||||
</view>
|
color: activeTab == i ? activeColor : color,
|
||||||
</view>
|
fontSize: activeTab == i ? activeFontSize : fontSize,
|
||||||
<!-- <view
|
backgroundColor: activeTab == i ? backgroundColor : '',
|
||||||
|
borderRadius,
|
||||||
|
padding,
|
||||||
|
}"
|
||||||
|
:data-index="i"
|
||||||
|
:class="{ active: activeTab == i }"
|
||||||
|
@tap="handleTapItem"
|
||||||
|
v-for="(v, i) in tabs"
|
||||||
|
:key="i"
|
||||||
|
>
|
||||||
|
<view class="">
|
||||||
|
{{ v }}
|
||||||
|
</view>
|
||||||
|
<view class="bottomborder"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view
|
||||||
class="v-tabs__line"
|
class="v-tabs__line"
|
||||||
:style="{ width: `${lineWidth}px`, height: `${lineHeight}`, backgroundColor: lineColor, transform: `translateX(${lineLeft}px)`, top: `calc(${height} - ${lineHeight})` }"
|
:style="{ width: `${lineWidth}px`, height: `${lineHeight}`, backgroundColor: lineColor, transform: `translateX(${lineLeft}px)`, top: `calc(${height} - ${lineHeight})` }"
|
||||||
></view> -->
|
></view> -->
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -52,190 +58,190 @@
|
|||||||
* @event {Function(activeTab)} change 改变标签触发
|
* @event {Function(activeTab)} change 改变标签触发
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'VTabs',
|
name: 'VTabs',
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: 0
|
default: 0,
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '45px',
|
||||||
|
},
|
||||||
|
tabs: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'transparent',
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
type: String,
|
||||||
|
default: '5px',
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333',
|
||||||
|
},
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#007AFF',
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '14px',
|
||||||
|
},
|
||||||
|
activeFontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '14px',
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
type: String,
|
||||||
|
default: '10rpx 20rpx',
|
||||||
|
},
|
||||||
|
lineScale: {
|
||||||
|
type: Number,
|
||||||
|
default: 0.6,
|
||||||
|
},
|
||||||
|
lineHeight: {
|
||||||
|
type: String,
|
||||||
|
default: '3px',
|
||||||
|
},
|
||||||
|
lineColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#007AFF',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
height: {
|
data() {
|
||||||
type: String,
|
return {
|
||||||
default: '45px'
|
scrollLeft: 0,
|
||||||
|
activeTab: 0,
|
||||||
|
width: 0,
|
||||||
|
lineLeft: 0,
|
||||||
|
lineWidth: 0,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
tabs: {
|
watch: {
|
||||||
type: Array,
|
activeTab(newVal) {
|
||||||
default() {
|
this.$emit('input', newVal * 1);
|
||||||
return []
|
},
|
||||||
}
|
value(newVal) {
|
||||||
|
this.activeTab = newVal;
|
||||||
|
this.getTabsWidth(0);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
backgroundColor: {
|
methods: {
|
||||||
type: String,
|
handleTapItem(e) {
|
||||||
default: 'transparent'
|
const index = e.currentTarget.dataset.index;
|
||||||
},
|
if (this.activeTab != index) {
|
||||||
borderRadius: {
|
this.activeTab = index;
|
||||||
type: String,
|
this.getTabsWidth(e.currentTarget.offsetLeft);
|
||||||
default: '5px'
|
this.$emit('change', this.activeTab);
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#333333'
|
|
||||||
},
|
|
||||||
activeColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#007AFF'
|
|
||||||
},
|
|
||||||
fontSize: {
|
|
||||||
type: String,
|
|
||||||
default: '14px'
|
|
||||||
},
|
|
||||||
activeFontSize: {
|
|
||||||
type: String,
|
|
||||||
default: '14px'
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
type: String,
|
|
||||||
default: '10rpx 20rpx'
|
|
||||||
},
|
|
||||||
lineScale: {
|
|
||||||
type: Number,
|
|
||||||
default: 0.6
|
|
||||||
},
|
|
||||||
lineHeight: {
|
|
||||||
type: String,
|
|
||||||
default: '3px'
|
|
||||||
},
|
|
||||||
lineColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#007AFF'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
scrollLeft: 0,
|
|
||||||
activeTab: 0,
|
|
||||||
width: 0,
|
|
||||||
lineLeft: 0,
|
|
||||||
lineWidth: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
activeTab(newVal) {
|
|
||||||
this.$emit('input', newVal * 1)
|
|
||||||
},
|
|
||||||
value(newVal) {
|
|
||||||
this.activeTab = newVal
|
|
||||||
this.getTabsWidth(0)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleTapItem(e) {
|
|
||||||
const index = e.currentTarget.dataset.index
|
|
||||||
if (this.activeTab != index) {
|
|
||||||
this.activeTab = index
|
|
||||||
this.getTabsWidth(e.currentTarget.offsetLeft)
|
|
||||||
this.$emit('change', this.activeTab)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getTabsWidth(offsetLeft) {
|
|
||||||
const query = uni.createSelectorQuery().in(this)
|
|
||||||
query
|
|
||||||
.select('.v-tabs')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
this.width = data.width
|
|
||||||
})
|
|
||||||
.exec()
|
|
||||||
setTimeout(() => {
|
|
||||||
let i = 0
|
|
||||||
let width = 0
|
|
||||||
query
|
|
||||||
.selectAll('.v-tabs__item')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
width = data.reduce((total, currentValue, currentIndex, arr) => {
|
|
||||||
if (currentIndex < this.activeTab) {
|
|
||||||
total = total + currentValue.width
|
|
||||||
}
|
|
||||||
return total
|
|
||||||
}, 0)
|
|
||||||
const padding = this.padding.split(' ')[0]
|
|
||||||
const res = /(\d+)(upx|rpx|px)/.exec(padding)
|
|
||||||
if (res && (res[2] == 'upx' || res[2] == 'rpx')) {
|
|
||||||
width += uni.upx2px(res[1]) * 2 * this.activeTab
|
|
||||||
} else {
|
|
||||||
width += res[1] * this.activeTab
|
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
.exec()
|
getTabsWidth(offsetLeft) {
|
||||||
query
|
const query = uni.createSelectorQuery().in(this);
|
||||||
.select('.v-tabs__item.active')
|
query
|
||||||
.boundingClientRect(data => {
|
.select('.v-tabs')
|
||||||
const ol = offsetLeft ? offsetLeft : width
|
.boundingClientRect((data) => {
|
||||||
if (data.width) {
|
this.width = data.width;
|
||||||
this.lineLeft = ol + (data.width * (1 - this.lineScale)) / 2
|
})
|
||||||
this.lineWidth = data.width * this.lineScale
|
.exec();
|
||||||
this.scrollLeft = ol - (this.width - data.width) / 2
|
setTimeout(() => {
|
||||||
}
|
let i = 0;
|
||||||
})
|
let width = 0;
|
||||||
.exec()
|
query
|
||||||
}, 10)
|
.selectAll('.v-tabs__item')
|
||||||
}
|
.boundingClientRect((data) => {
|
||||||
},
|
width = data.reduce((total, currentValue, currentIndex, arr) => {
|
||||||
mounted() {
|
if (currentIndex < this.activeTab) {
|
||||||
this.activeTab = this.value
|
total = total + currentValue.width;
|
||||||
this.getTabsWidth(0)
|
}
|
||||||
}
|
return total;
|
||||||
}
|
}, 0);
|
||||||
|
const padding = this.padding.split(' ')[0];
|
||||||
|
const res = /(\d+)(upx|rpx|px)/.exec(padding);
|
||||||
|
if (res && (res[2] == 'upx' || res[2] == 'rpx')) {
|
||||||
|
width += uni.upx2px(res[1]) * 2 * this.activeTab;
|
||||||
|
} else {
|
||||||
|
width += res[1] * this.activeTab;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.exec();
|
||||||
|
query
|
||||||
|
.select('.v-tabs__item.active')
|
||||||
|
.boundingClientRect((data) => {
|
||||||
|
const ol = offsetLeft ? offsetLeft : width;
|
||||||
|
if (data.width) {
|
||||||
|
this.lineLeft = ol + (data.width * (1 - this.lineScale)) / 2;
|
||||||
|
this.lineWidth = data.width * this.lineScale;
|
||||||
|
this.scrollLeft = ol - (this.width - data.width) / 2;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.exec();
|
||||||
|
}, 10);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.activeTab = this.value;
|
||||||
|
this.getTabsWidth(0);
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.v-tabs {
|
.v-tabs {
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
border-bottom: 1rpx solid #dddddd;
|
|
||||||
.v-tabs__inner {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
width: 100%;
|
||||||
align-items: center;
|
white-space: nowrap;
|
||||||
height: 100%;
|
overflow: hidden;
|
||||||
justify-content: center;
|
border-bottom: 1rpx solid #dddddd;
|
||||||
background-color: #fefefe;
|
.v-tabs__inner {
|
||||||
// border-bottom: 1rpx solid #dddddd;
|
position: relative;
|
||||||
border-bottom: 0;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
.active{
|
justify-content: center;
|
||||||
border-radius: 0 !important;
|
background-color: #fefefe;
|
||||||
.bottomborder{
|
// border-bottom: 1rpx solid #dddddd;
|
||||||
width: 42rpx;
|
border-bottom: 0;
|
||||||
height: 6rpx;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: #1B66FF;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
display: block !important;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-tabs__item {
|
|
||||||
// display: inline-flex;
|
|
||||||
margin-right: 20upx;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.v-tabs__line {
|
.active {
|
||||||
position: absolute;
|
border-radius: 0 !important;
|
||||||
z-index: 99;
|
.bottomborder {
|
||||||
transition: all 0.3s linear;
|
width: 42rpx;
|
||||||
border-radius: 4upx;
|
height: 6rpx;
|
||||||
}
|
margin: 0 auto;
|
||||||
|
background-color: #1b66ff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block !important;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.v-tabs__item {
|
||||||
|
// display: inline-flex;
|
||||||
|
margin-right: 20upx;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-tabs__line {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
border-radius: 4upx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ ::-webkit-scrollbar {
|
::v-deep ::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
164
manifest.json
164
manifest.json
@@ -1,82 +1,82 @@
|
|||||||
{
|
{
|
||||||
"name" : "招聘",
|
"name": "招聘",
|
||||||
"appid" : "__UNI__120CBFC",
|
"appid": "__UNI__BFB9B45",
|
||||||
"description" : "",
|
"description": "",
|
||||||
"versionName" : "1.0.0",
|
"versionName": "1.0.0",
|
||||||
"versionCode" : "100",
|
"versionCode": "100",
|
||||||
"transformPx" : false,
|
"transformPx": false,
|
||||||
"sassImplementationName" : "node-sass",
|
"sassImplementationName": "node-sass",
|
||||||
"app-plus" : {
|
"app-plus": {
|
||||||
"usingComponents" : true,
|
"usingComponents": true,
|
||||||
"compilerVersion" : 3,
|
"compilerVersion": 3,
|
||||||
/* 5+App特有相关 */
|
/* 5+App特有相关 */
|
||||||
"modules" : {},
|
"modules": {},
|
||||||
/* 模块配置 */
|
/* 模块配置 */
|
||||||
"distribute" : {
|
"distribute": {
|
||||||
/* 应用发布信息 */
|
/* 应用发布信息 */
|
||||||
"android" : {
|
"android": {
|
||||||
/* android打包配置 */
|
/* android打包配置 */
|
||||||
"permissions" : [
|
"permissions": [
|
||||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"ios" : {},
|
"ios": {},
|
||||||
/* ios打包配置 */
|
/* ios打包配置 */
|
||||||
"sdkConfigs" : {}
|
"sdkConfigs": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/* SDK配置 */
|
/* SDK配置 */
|
||||||
"quickapp" : {},
|
"quickapp": {},
|
||||||
/* 快应用特有相关 */
|
/* 快应用特有相关 */
|
||||||
"mp-weixin" : {
|
"mp-weixin": {
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"appid" : "wx77580889aaf15eb4",
|
"appid": "wx77580889aaf15eb4",
|
||||||
"setting" : {
|
"setting": {
|
||||||
"urlCheck" : false,
|
"urlCheck": false,
|
||||||
"minified" : true,
|
"minified": true,
|
||||||
"es6" : true
|
"es6": true
|
||||||
},
|
},
|
||||||
"usingComponents" : true,
|
"usingComponents": true,
|
||||||
"permission" : {
|
"permission": {
|
||||||
"scope.userLocation" : {
|
"scope.userLocation": {
|
||||||
"desc" : "获取您的位置，以便给您推荐合适工作信息"
|
"desc": "获取您的位置，以便给您推荐合适工作信息"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"h5" : {
|
"h5": {
|
||||||
"sdkConfigs" : {
|
"sdkConfigs": {
|
||||||
"maps" : {}
|
"maps": {}
|
||||||
},
|
},
|
||||||
"template" : "index.html",
|
"template": "index.html",
|
||||||
"router" : {
|
"router": {
|
||||||
"base" : "./",
|
"base": "./",
|
||||||
"mode" : "hash"
|
"mode": "hash"
|
||||||
},
|
},
|
||||||
"optimization" : {
|
"optimization": {
|
||||||
"treeShaking" : {
|
"treeShaking": {
|
||||||
"enable" : true
|
"enable": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,390 +1,386 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="app_container">
|
<view class="app_container">
|
||||||
<view class="app-top">
|
<view class="app-top">
|
||||||
<view class="top-search">
|
<view class="top-search">
|
||||||
<view class="top-input">
|
<view class="top-input">
|
||||||
<input class="put" type="text" placeholder-class="put-pla" v-model="searchValue"
|
<input
|
||||||
placeholder="搜索附近岗位或任务">
|
class="put"
|
||||||
<button class="input-btn" @tap="search">搜索</button>
|
type="text"
|
||||||
</view>
|
placeholder-class="put-pla"
|
||||||
</view>
|
v-model="searchValue"
|
||||||
</view>
|
placeholder="搜索附近岗位或任务"
|
||||||
<view class="view-map">
|
/>
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<button class="input-btn" @tap="search">搜索</button>
|
||||||
:zoom="14" :min-zoom="10" :max-zoom="20" @markertap="clickmark" @regionchange="show = false"
|
</view>
|
||||||
:MapUrl="$config.supperMap" :flag-tip="false"></super-map>
|
</view>
|
||||||
<!-- <view id="map" ></view> -->
|
</view>
|
||||||
<!-- <map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
|
<view class="view-map">
|
||||||
:markers="covers" @markertap="clickmark" @regionchange="show = false"></map> -->
|
<super-map
|
||||||
<view class="position-bottom" v-if="show">
|
ref="uMap"
|
||||||
<view class="uni-margin-wrap">
|
style="width: 100%; height: 100%"
|
||||||
<swiper class="swiper" circular :interval="2000" :duration="500">
|
:latitude="latitude"
|
||||||
<swiper-item class="wiperItem">
|
:longitude="longitude"
|
||||||
<view class="swiper-item uni-bg-red">
|
:zoom="14"
|
||||||
<view class="item-content">
|
:min-zoom="10"
|
||||||
<view class="content-title"> {{productInfo.missionTitle}} </view>
|
:max-zoom="20"
|
||||||
<view class="color_999999 fs_12 mar_top5">
|
@markertap="clickmark"
|
||||||
<uni-icons type="location" color="#999999" size="12"></uni-icons>
|
@regionchange="show = false"
|
||||||
{{ productInfo.cityId }} ｜ {{productInfo.address}} ｜ 距离：{{distance}}
|
:MapUrl="$config.supperMap"
|
||||||
</view>
|
:flag-tip="false"
|
||||||
<view class="color_999999 fs_12 mar_top5">
|
></super-map>
|
||||||
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
<!-- <view id="map" ></view> -->
|
||||||
招聘时间: {{productInfo.stime}}-{{productInfo.etime}}
|
<!-- <map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
|
||||||
</view>
|
:markers="covers" @markertap="clickmark" @regionchange="show = false"></map> -->
|
||||||
<view class="color_999999 fs_12 mar_top5">
|
<view class="position-bottom" v-if="show">
|
||||||
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
<view class="uni-margin-wrap">
|
||||||
{{productInfo.experienceDesc}} | {{education[productInfo.education]}}
|
<swiper class="swiper" circular :interval="2000" :duration="500">
|
||||||
</view>
|
<swiper-item class="wiperItem">
|
||||||
<button class="btns" hover-class="active" @tap="openMap">
|
<view class="swiper-item uni-bg-red">
|
||||||
<image class="btn-img" src="../../static/img/direction2.png" />查看详情
|
<view class="item-content">
|
||||||
</button>
|
<view class="content-title">{{ productInfo.missionTitle }}</view>
|
||||||
</view>
|
<view class="color_999999 fs_12 mar_top5">
|
||||||
</view>
|
<uni-icons type="location" color="#999999" size="12"></uni-icons>
|
||||||
</swiper-item>
|
{{ productInfo.cityId }} ｜ {{ productInfo.address }} ｜ 距离：{{ distance }}
|
||||||
</swiper>
|
</view>
|
||||||
</view>
|
<view class="color_999999 fs_12 mar_top5">
|
||||||
</view>
|
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
||||||
</view>
|
招聘时间: {{ productInfo.stime }}-{{ productInfo.etime }}
|
||||||
</view>
|
</view>
|
||||||
</template>
|
<view class="color_999999 fs_12 mar_top5">
|
||||||
|
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
||||||
<script>
|
{{ productInfo.experienceDesc }} | {{ education[productInfo.education] }}
|
||||||
import {
|
</view>
|
||||||
addZeroPrefix,
|
<button class="btns" hover-class="active" @tap="openMap">
|
||||||
getDistanceFromLatLonInKm
|
<image class="btn-img" src="../../static/img/direction2.png" />
|
||||||
} from '@/untils/tools.js'
|
查看详情
|
||||||
import testData from '@/common/textdata.js';
|
</button>
|
||||||
import {
|
</view>
|
||||||
geQueryJobsByNearby
|
</view>
|
||||||
} from '@/api/map.js'
|
</swiper-item>
|
||||||
let taskpoint = require('../../static/img/taskpoint.png');
|
</swiper>
|
||||||
let gwpoint = require('../../static/img/gwpoint.png');
|
</view>
|
||||||
let mypoint = require('../../static/img/mypoint.png');
|
</view>
|
||||||
export default {
|
</view>
|
||||||
data() {
|
</view>
|
||||||
return {
|
</template>
|
||||||
education: testData.education,
|
|
||||||
show: false,
|
<script>
|
||||||
ID: 1,
|
import { addZeroPrefix, getDistanceFromLatLonInKm } from '@/untils/tools.js';
|
||||||
searchValue: '',
|
import testData from '@/common/textdata.js';
|
||||||
latitude: 31.133980,
|
import { geQueryJobsByNearby } from '@/api/map.js';
|
||||||
longitude: 104.404419,
|
let taskpoint = require('../../static/img/taskpoint.png');
|
||||||
covers: [],
|
let gwpoint = require('../../static/img/gwpoint.png');
|
||||||
rateValue: 2,
|
let mypoint = require('../../static/img/mypoint.png');
|
||||||
productInfo: {},
|
export default {
|
||||||
};
|
data() {
|
||||||
},
|
return {
|
||||||
computed: {
|
education: testData.education,
|
||||||
distance() {
|
show: false,
|
||||||
const {
|
ID: 1,
|
||||||
lon,
|
searchValue: '',
|
||||||
lat
|
latitude: 31.13398,
|
||||||
} = this.productInfo
|
longitude: 104.404419,
|
||||||
if (lon) {
|
covers: [],
|
||||||
const {
|
rateValue: 2,
|
||||||
m,
|
productInfo: {},
|
||||||
km
|
};
|
||||||
} = getDistanceFromLatLonInKm(lat, lon, this.latitude, this.longitude)
|
},
|
||||||
return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`
|
computed: {
|
||||||
}
|
distance() {
|
||||||
return '无'
|
const { lon, lat } = this.productInfo;
|
||||||
}
|
if (lon) {
|
||||||
},
|
const { m, km } = getDistanceFromLatLonInKm(lat, lon, this.latitude, this.longitude);
|
||||||
mounted() {
|
return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`;
|
||||||
const _this = this
|
}
|
||||||
console.log(this.$store.state.user.userLocation)
|
return '无';
|
||||||
if (this.$store.state.user.userLocation) {
|
},
|
||||||
const {
|
},
|
||||||
latitude,
|
mounted() {
|
||||||
longitude
|
const _this = this;
|
||||||
} = this.$store.state.user.userLocation
|
console.log(this.$store.state.user.userLocation);
|
||||||
_this.getList(longitude, latitude).then((covers) => {
|
if (this.$store.state.user.userLocation) {
|
||||||
_this.$refs.uMap.addFeature(covers)
|
const { latitude, longitude } = this.$store.state.user.userLocation;
|
||||||
})
|
_this.getList(longitude, latitude).then((covers) => {
|
||||||
} else {
|
_this.$refs.uMap.addFeature(covers);
|
||||||
_this.$api.msg('无法获得周边信息')
|
});
|
||||||
}
|
} else {
|
||||||
},
|
_this.$api.msg('无法获得周边信息');
|
||||||
onShow() {
|
}
|
||||||
// const _this = this
|
},
|
||||||
// this.mockGetLocation().then((myPoint) => {
|
onShow() {
|
||||||
// this.latitude = myPoint.latitude
|
// const _this = this
|
||||||
// this.longitude = myPoint.longitude
|
// this.mockGetLocation().then((myPoint) => {
|
||||||
// _this.getList(_this.longitude, _this.latitude).then((covers) => {
|
// this.latitude = myPoint.latitude
|
||||||
// _this.$api.msg('成功获得周边信息')
|
// this.longitude = myPoint.longitude
|
||||||
// console.log(covers)
|
// _this.getList(_this.longitude, _this.latitude).then((covers) => {
|
||||||
// _this.$refs.uMap.addFeature(covers)
|
// _this.$api.msg('成功获得周边信息')
|
||||||
// })
|
// console.log(covers)
|
||||||
// })
|
// _this.$refs.uMap.addFeature(covers)
|
||||||
},
|
// })
|
||||||
methods: {
|
// })
|
||||||
openMap(lon, lat) {
|
},
|
||||||
//打开地图，并将门店位置传入
|
methods: {
|
||||||
// type: post 岗位 mission 任务
|
openMap(lon, lat) {
|
||||||
switch (this.productInfo.type) {
|
//打开地图，并将门店位置传入
|
||||||
case 'post':
|
// type: post 岗位 mission 任务
|
||||||
const no = encodeURIComponent(1)
|
switch (this.productInfo.type) {
|
||||||
uni.navigateTo({
|
case 'post':
|
||||||
url: `/pages/projectInfo/workInfo?workId=${encodeURIComponent(no)}&isCan=${1}`
|
const no = encodeURIComponent(1);
|
||||||
})
|
uni.navigateTo({
|
||||||
break
|
url: `/pages/projectInfo/workInfo?workId=${encodeURIComponent(no)}&isCan=${1}`,
|
||||||
case 'mission':
|
});
|
||||||
const no1 = encodeURIComponent(this.productInfo.missionNo)
|
break;
|
||||||
uni.navigateTo({
|
case 'mission':
|
||||||
url: `/pages/projectInfo/projectInfo?missionNo=${no1}&isCan=${1}`
|
const no1 = encodeURIComponent(this.productInfo.missionNo);
|
||||||
})
|
uni.navigateTo({
|
||||||
break
|
url: `/pages/projectInfo/projectInfo?missionNo=${no1}&isCan=${1}`,
|
||||||
}
|
});
|
||||||
},
|
break;
|
||||||
search() {
|
}
|
||||||
const _this = this
|
},
|
||||||
if (this.$store.state.user.userLocation) {
|
search() {
|
||||||
const {
|
const _this = this;
|
||||||
latitude,
|
if (this.$store.state.user.userLocation) {
|
||||||
longitude
|
const { latitude, longitude } = this.$store.state.user.userLocation;
|
||||||
} = this.$store.state.user.userLocation
|
_this.getList(longitude, latitude).then((covers) => {
|
||||||
_this.getList(longitude, latitude).then((covers) => {
|
_this.$refs.uMap.addFeature(covers);
|
||||||
_this.$refs.uMap.addFeature(covers)
|
});
|
||||||
})
|
} else {
|
||||||
} else {
|
_this.$api.msg('无法获得周边信息');
|
||||||
_this.$api.msg('无法获得周边信息')
|
}
|
||||||
}
|
// this.getList(this.longitude, this.latitude).then((covers) => {
|
||||||
// this.getList(this.longitude, this.latitude).then((covers) => {
|
// this.$api.msg('成功获得周边信息')
|
||||||
// this.$api.msg('成功获得周边信息')
|
// console.log(covers)
|
||||||
// console.log(covers)
|
// this.$refs.uMap.addFeature(covers)
|
||||||
// this.$refs.uMap.addFeature(covers)
|
// })
|
||||||
// })
|
},
|
||||||
},
|
clickmark(cover) {
|
||||||
clickmark(cover) {
|
if (cover.markerId === 1) return;
|
||||||
if (cover.markerId === 1) return
|
this.show = true;
|
||||||
this.show = true;
|
this.productInfo = cover.info;
|
||||||
this.productInfo = cover.info
|
},
|
||||||
},
|
mockGetLocation() {
|
||||||
mockGetLocation() {
|
return new Promise((resolve) => {
|
||||||
return new Promise((resolve) => {
|
resolve({
|
||||||
resolve({
|
longitude: 104.40632,
|
||||||
"longitude": 104.40632,
|
latitude: 31.122989,
|
||||||
"latitude": 31.122989,
|
altitude: null,
|
||||||
"altitude": null,
|
accuracy: 25.998,
|
||||||
"accuracy": 25.998,
|
altitudeAccuracy: null,
|
||||||
"altitudeAccuracy": null,
|
heading: null,
|
||||||
"heading": null,
|
speed: null,
|
||||||
"speed": null,
|
errMsg: 'getLocation:ok',
|
||||||
"errMsg": "getLocation:ok",
|
verticalAccuracy: 0,
|
||||||
"verticalAccuracy": 0,
|
horizontalAccuracy: 25.998,
|
||||||
"horizontalAccuracy": 25.998
|
});
|
||||||
})
|
});
|
||||||
})
|
},
|
||||||
},
|
async getList(lon, lat) {
|
||||||
async getList(lon, lat) {
|
return new Promise(async (resolve) => {
|
||||||
return new Promise(async (resolve) => {
|
let params = {
|
||||||
let params = {
|
lon,
|
||||||
lon,
|
lat,
|
||||||
lat,
|
distanceRange: 20,
|
||||||
distanceRange: 20,
|
taskTitle: this.searchValue,
|
||||||
taskTitle: this.searchValue
|
};
|
||||||
}
|
let resData = await geQueryJobsByNearby(params);
|
||||||
let resData = await geQueryJobsByNearby(params)
|
if (resData.data.code === 200) {
|
||||||
if (resData.data.code === 200) {
|
const arr = resData.data.data.map((item) => ({
|
||||||
const arr = resData.data.data.map((item) => ({
|
id: item.id,
|
||||||
id: item.id,
|
longitude: item.lon,
|
||||||
longitude: item.lon,
|
latitude: item.lat,
|
||||||
latitude: item.lat,
|
iconPath: item.type === 'post' ? gwpoint : taskpoint,
|
||||||
iconPath: item.type === 'post' ? gwpoint : taskpoint,
|
width: 20,
|
||||||
width: 20,
|
height: 20,
|
||||||
height: 20,
|
title: item.missionTitle,
|
||||||
title: item.missionTitle,
|
callout: {
|
||||||
callout: {
|
content: item.missionTitle,
|
||||||
content: item.missionTitle,
|
fontSize: 10,
|
||||||
fontSize: 10,
|
borderColor: 'blue',
|
||||||
borderColor: 'blue',
|
},
|
||||||
},
|
info: item,
|
||||||
info: item
|
}));
|
||||||
}))
|
arr.push({
|
||||||
arr.push({
|
id: 1,
|
||||||
id: 1,
|
latitude: lat,
|
||||||
latitude: lat,
|
longitude: lon,
|
||||||
longitude: lon,
|
iconPath: mypoint,
|
||||||
iconPath: mypoint,
|
title: '我的位置',
|
||||||
title: '我的位置',
|
width: 20,
|
||||||
width: 20,
|
height: 20,
|
||||||
height: 20
|
});
|
||||||
})
|
resolve(arr);
|
||||||
resolve(arr)
|
}
|
||||||
}
|
});
|
||||||
|
},
|
||||||
})
|
},
|
||||||
}
|
};
|
||||||
}
|
</script>
|
||||||
}
|
|
||||||
</script>
|
<style lang="scss" scoped>
|
||||||
|
.color_999999 {
|
||||||
<style lang="scss" scoped>
|
color: #999999;
|
||||||
.color_999999 {
|
}
|
||||||
color: #999999;
|
|
||||||
}
|
.fs_12 {
|
||||||
|
font-size: 24rpx;
|
||||||
.fs_12 {
|
}
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
.mar_top5 {
|
||||||
|
margin-top: 10rpx;
|
||||||
.mar_top5 {
|
}
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
.active {
|
||||||
|
background: #eaeaea !important;
|
||||||
.active {
|
color: #afafaf;
|
||||||
background: #EAEAEA !important;
|
}
|
||||||
color: #AFAFAF;
|
|
||||||
}
|
.card_mark {
|
||||||
|
.mark_l {
|
||||||
.card_mark {
|
width: 56rpx;
|
||||||
.mark_l {
|
height: 28rpx;
|
||||||
width: 56rpx;
|
border-radius: 12rpx 0 12rpx 12rpx;
|
||||||
height: 28rpx;
|
background: linear-gradient(157deg, #a043c1 0%, #4133a2 100%);
|
||||||
border-radius: 12rpx 0 12rpx 12rpx;
|
font-size: 28rpx;
|
||||||
background: linear-gradient(157deg, #A043C1 0%, #4133A2 100%);
|
font-family: PingFang-SC-Bold, PingFang-SC;
|
||||||
font-size: 28rpx;
|
font-weight: bold;
|
||||||
font-family: PingFang-SC-Bold, PingFang-SC;
|
color: #ffffff;
|
||||||
font-weight: bold;
|
display: flex;
|
||||||
color: #FFFFFF;
|
align-items: center;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
}
|
||||||
}
|
|
||||||
}
|
.position-bottom {
|
||||||
|
position: absolute;
|
||||||
.position-bottom {
|
left: 0;
|
||||||
position: absolute;
|
right: 0;
|
||||||
left: 0;
|
height: 406rpx;
|
||||||
right: 0;
|
bottom: 50rpx;
|
||||||
height: 406rpx;
|
|
||||||
bottom: 50rpx;
|
.uni-margin-wrap {
|
||||||
|
height: 406rpx;
|
||||||
.uni-margin-wrap {
|
|
||||||
height: 406rpx;
|
.swiper {
|
||||||
|
height: 406rpx;
|
||||||
.swiper {
|
|
||||||
height: 406rpx;
|
.wiperItem {
|
||||||
|
padding-left: 50rpx;
|
||||||
.wiperItem {
|
height: 406rpx;
|
||||||
padding-left: 50rpx;
|
width: 660rpx !important;
|
||||||
height: 406rpx;
|
|
||||||
width: 660rpx !important;
|
.swiper-item {
|
||||||
|
width: 660rpx;
|
||||||
.swiper-item {
|
height: 406rpx;
|
||||||
width: 660rpx;
|
background: #ffffff;
|
||||||
height: 406rpx;
|
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
||||||
background: #FFFFFF;
|
border-radius: 27rpx;
|
||||||
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
overflow: hidden;
|
||||||
border-radius: 27rpx;
|
|
||||||
overflow: hidden;
|
.item-top {
|
||||||
|
display: flex;
|
||||||
.item-top {
|
align-content: center;
|
||||||
display: flex;
|
justify-content: space-between;
|
||||||
align-content: center;
|
|
||||||
justify-content: space-between;
|
.top-img {
|
||||||
|
width: 215rpx;
|
||||||
.top-img {
|
height: 120rpx;
|
||||||
width: 215rpx;
|
}
|
||||||
height: 120rpx;
|
}
|
||||||
}
|
|
||||||
}
|
.item-content {
|
||||||
|
padding: 15rpx 33rpx;
|
||||||
.item-content {
|
|
||||||
padding: 15rpx 33rpx;
|
.content-title {
|
||||||
|
font-size: 32rpx;
|
||||||
.content-title {
|
}
|
||||||
font-size: 32rpx;
|
|
||||||
}
|
.btns {
|
||||||
|
margin-top: 20rpx;
|
||||||
.btns {
|
display: flex;
|
||||||
margin-top: 20rpx;
|
align-items: center;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
align-items: center;
|
width: 223rpx;
|
||||||
justify-content: center;
|
height: 64rpx;
|
||||||
width: 223rpx;
|
background: linear-gradient(to right, #a043c1 0%, #4133a2 100%);
|
||||||
height: 64rpx;
|
border-radius: 15rpx;
|
||||||
background: linear-gradient(to right, #A043C1 0%, #4133A2 100%);
|
color: #ffffff;
|
||||||
border-radius: 15rpx;
|
font-size: 26rpx;
|
||||||
color: #FFFFFF;
|
font-weight: 800;
|
||||||
font-size: 26rpx;
|
color: #ffffff;
|
||||||
font-weight: 800;
|
line-height: 64rpx;
|
||||||
color: #FFFFFF;
|
|
||||||
line-height: 64rpx;
|
.btn-img {
|
||||||
|
width: 32rpx;
|
||||||
.btn-img {
|
height: 32rpx;
|
||||||
width: 32rpx;
|
}
|
||||||
height: 32rpx;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app_container {
|
||||||
}
|
position: fixed;
|
||||||
}
|
left: 0;
|
||||||
|
top: 0;
|
||||||
.app_container {
|
right: 0;
|
||||||
position: fixed;
|
bottom: 0;
|
||||||
left: 0;
|
display: flex;
|
||||||
top: 0;
|
flex-direction: column;
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
.app-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
background: linear-gradient(to right, #e8e8e8, #e8e8e8);
|
||||||
|
padding-bottom: 16rpx;
|
||||||
.app-top {
|
padding-top: 24rpx;
|
||||||
display: flex;
|
|
||||||
background: linear-gradient(to right, #e8e8e8, #e8e8e8);
|
.top-search {
|
||||||
padding-bottom: 16rpx;
|
position: relative;
|
||||||
padding-top: 24rpx;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
.top-search {
|
align-items: center;
|
||||||
position: relative;
|
justify-content: center;
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
.top-input {
|
||||||
align-items: center;
|
width: 710rpx;
|
||||||
justify-content: center;
|
|
||||||
|
.put {
|
||||||
.top-input {
|
padding-left: 30rpx;
|
||||||
width: 710rpx;
|
height: 72rpx;
|
||||||
|
background: #ffffff;
|
||||||
.put {
|
border-radius: 36rpx;
|
||||||
padding-left: 30rpx;
|
}
|
||||||
height: 72rpx;
|
|
||||||
background: #FFFFFF;
|
::v-deep .put-pla {
|
||||||
border-radius: 36rpx;
|
height: 33rpx;
|
||||||
}
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
/deep/ .put-pla {
|
color: #999999;
|
||||||
height: 33rpx;
|
line-height: 33rpx;
|
||||||
font-size: 24rpx;
|
}
|
||||||
font-weight: 400;
|
|
||||||
color: #999999;
|
.input-btn {
|
||||||
line-height: 33rpx;
|
position: absolute;
|
||||||
}
|
right: 30rpx;
|
||||||
|
top: 50%;
|
||||||
.input-btn {
|
transform: translate(0, -50%);
|
||||||
position: absolute;
|
color: #ffffff;
|
||||||
right: 30rpx;
|
width: 120rpx;
|
||||||
top: 50%;
|
height: 56rpx;
|
||||||
transform: translate(0, -50%);
|
line-height: 56rpx;
|
||||||
color: #FFFFFF;
|
font-size: 28rpx;
|
||||||
width: 120rpx;
|
background: linear-gradient(157deg, #a043c1 0%, #4133a2 100%);
|
||||||
height: 56rpx;
|
border-radius: 29rpx;
|
||||||
line-height: 56rpx;
|
}
|
||||||
font-size: 28rpx;
|
}
|
||||||
background: linear-gradient(157deg, #A043C1 0%, #4133A2 100%);
|
}
|
||||||
border-radius: 29rpx;
|
}
|
||||||
}
|
|
||||||
}
|
.view-map {
|
||||||
}
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.view-map {
|
</style>
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,174 +1,172 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view class="sealBox">
|
<view class="sealBox">
|
||||||
<view style="height: 70rpx;"></view>
|
<view style="height: 70rpx"></view>
|
||||||
<view class="name">签名</view>
|
<view class="name">签名</view>
|
||||||
<view v-if="src" class="sealContent">
|
<view v-if="src" class="sealContent">
|
||||||
<image class="img" mode="aspectFit" :src="src"></image>
|
<image class="img" mode="aspectFit" :src="src"></image>
|
||||||
</view>
|
</view>
|
||||||
<view v-else class="sealContent" @click="go">
|
<view v-else class="sealContent" @click="go">
|
||||||
<view class="contentFont">点击输入手写签名</view>
|
<view class="contentFont">点击输入手写签名</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="list" v-if="src">
|
<view class="list" v-if="src">
|
||||||
<view class="listLeft">
|
<view class="listLeft">
|
||||||
<view class="listTitle">签名密码</view>
|
<view class="listTitle">签名密码</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="listRight">
|
<view class="listRight">
|
||||||
<view class="rightContent nochoose">
|
<view class="rightContent nochoose">
|
||||||
<view v-if="src" class="uni-input">已设置</view>
|
<view v-if="src" class="uni-input">已设置</view>
|
||||||
<view v-else class="uni-input">未设置</view>
|
<view v-else class="uni-input">未设置</view>
|
||||||
</view>
|
</view>
|
||||||
<image src="@/static/img/right.svg" mode=""></image>
|
<image src="@/static/img/right.svg" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="!src" class="sealAgreement">
|
<view v-if="!src" class="sealAgreement">
|
||||||
<checkbox :checked="status" @click="checkClick"/>
|
<checkbox :checked="status" @click="checkClick" />
|
||||||
<view>我已阅读并同意</view>
|
<view>我已阅读并同意</view>
|
||||||
<view class="agreement" @click="goAgreement('/pages/user/sealAgreement')">《申请证书协议》</view>
|
<view class="agreement" @click="goAgreement('/pages/user/sealAgreement')">《申请证书协议》</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn">
|
<view class="btn">
|
||||||
<view v-if="src" @click="next" class="bottombtn">完成</view>
|
<view v-if="src" @click="next" class="bottombtn">完成</view>
|
||||||
<view v-if="!src" class="bottombtn nocheck">完成</view>
|
<view v-if="!src" class="bottombtn nocheck">完成</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapGetters} from 'vuex'
|
import { mapGetters } from 'vuex';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
status:false
|
status: false,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// this.$store.dispatch('setAutograph')
|
// this.$store.dispatch('setAutograph')
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goAgreement (url) {
|
goAgreement(url) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url
|
url,
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
checkClick(){
|
checkClick() {
|
||||||
this.status = !this.status
|
this.status = !this.status;
|
||||||
},
|
},
|
||||||
next () {
|
next() {
|
||||||
uni.navigateBack()
|
uni.navigateBack();
|
||||||
// uni.switchTab({
|
// uni.switchTab({
|
||||||
// url: '/pages/index/index'
|
// url: '/pages/index/index'
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
go(url){
|
go(url) {
|
||||||
if (!this.status){
|
if (!this.status) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请先阅读并同意《申请证书协议》',
|
title: '请先阅读并同意《申请证书协议》',
|
||||||
icon: 'none'
|
icon: 'none',
|
||||||
})
|
});
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pageMy/setUserBase/seal/sealCanvas?path=/pageMy/setUserBase/seal/sealCanvas`
|
url: `/pageMy/setUserBase/seal/sealCanvas?path=/pageMy/setUserBase/seal/sealCanvas`,
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
getInpCode: function(e) {
|
getInpCode: function (e) {
|
||||||
console.log(e)
|
console.log(e);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['autograph']),
|
...mapGetters(['autograph']),
|
||||||
src(){
|
src() {
|
||||||
if (this.autograph.data && this.autograph.data.signSrcUrl){
|
if (this.autograph.data && this.autograph.data.signSrcUrl) {
|
||||||
return this.autograph.data.signSrcUrl
|
return this.autograph.data.signSrcUrl;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.sealAgreement{
|
.sealAgreement {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 30rpx;
|
margin: 30rpx;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
.agreement{
|
.agreement {
|
||||||
color: #007AFF;
|
color: #007aff;
|
||||||
}
|
}
|
||||||
/deep/ .uni-checkbox-input{
|
::v-deep .uni-checkbox-input {
|
||||||
border-radius: 22px!important;
|
border-radius: 22px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nocheck {
|
.nocheck {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
.bottombtn {
|
.bottombtn {
|
||||||
background-color: #1B66FF;
|
background-color: #1b66ff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
font-family: PingFangSC-Medium;
|
font-family: PingFangSC-Medium;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
height: 90rpx;
|
height: 90rpx;
|
||||||
line-height: 90rpx;
|
line-height: 90rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
|
||||||
background-color: #fefefe;
|
|
||||||
padding: 70rpx 80rpx;
|
|
||||||
}
|
|
||||||
.sealBox{
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
padding: 0 15px 0 15px;
|
|
||||||
.name{
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333333;
|
|
||||||
line-height: 45rpx;
|
|
||||||
|
|
||||||
}
|
.btn {
|
||||||
.listRight {
|
background-color: #fefefe;
|
||||||
display: flex;
|
padding: 70rpx 80rpx;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: space-between;
|
.sealBox {
|
||||||
font-family: PingFangSC-Regular;
|
background-color: #ffffff;
|
||||||
font-size: 28rpx;
|
padding: 0 15px 0 15px;
|
||||||
color: #999999;
|
.name {
|
||||||
}
|
font-size: 32rpx;
|
||||||
|
font-weight: 400;
|
||||||
.listRight image {
|
color: #333333;
|
||||||
width: 40rpx;
|
line-height: 45rpx;
|
||||||
height: 40rpx;
|
}
|
||||||
margin-left: 15rpx;
|
.listRight {
|
||||||
}
|
display: flex;
|
||||||
.list {
|
align-items: center;
|
||||||
display: flex;
|
justify-content: space-between;
|
||||||
align-items: center;
|
font-family: PingFangSC-Regular;
|
||||||
justify-content: space-between;
|
font-size: 28rpx;
|
||||||
font-family: PingFangSC-Regular;
|
color: #999999;
|
||||||
font-size: 32rpx;
|
}
|
||||||
color: #333333;
|
|
||||||
height: 88rpx;
|
.listRight image {
|
||||||
}
|
width: 40rpx;
|
||||||
.sealContent{
|
height: 40rpx;
|
||||||
background: #F6F6F6;
|
margin-left: 15rpx;
|
||||||
padding: 16rpx;
|
}
|
||||||
margin-top: 14rpx;
|
.list {
|
||||||
position:relative;
|
display: flex;
|
||||||
.img{
|
align-items: center;
|
||||||
width: 100%;
|
justify-content: space-between;
|
||||||
height: 312rpx;
|
font-family: PingFangSC-Regular;
|
||||||
background-color: #FFFFFF;
|
font-size: 32rpx;
|
||||||
}
|
color: #333333;
|
||||||
.contentFont{
|
height: 88rpx;
|
||||||
height: 312rpx;
|
}
|
||||||
line-height: 312rpx;
|
.sealContent {
|
||||||
font-size: 30rpx;
|
background: #f6f6f6;
|
||||||
color: #999999;
|
padding: 16rpx;
|
||||||
background: #FFFFFF;
|
margin-top: 14rpx;
|
||||||
text-align: center;
|
position: relative;
|
||||||
}
|
.img {
|
||||||
}
|
width: 100%;
|
||||||
}
|
height: 312rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
.contentFont {
|
||||||
|
height: 312rpx;
|
||||||
|
line-height: 312rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #999999;
|
||||||
|
background: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -54,7 +54,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 技能标签 end -->
|
<!-- 技能标签 end -->
|
||||||
<view v-if="info.jobSources" class="prolist">来源：{{ info.jobSources || '暂无' }}</view>
|
<view v-if="info.jobSources" style="color: red" class="prolist">来源：{{ info.jobSources || '暂无' }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="head">
|
<view class="head">
|
||||||
<view style="display: flex; align-items: center">
|
<view style="display: flex; align-items: center">
|
||||||
|
|||||||
@@ -59,7 +59,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 技能标签 end -->
|
<!-- 技能标签 end -->
|
||||||
<view v-if="info.jobSources" class="prolist">来源：{{ info.jobSources || '暂无' }}</view>
|
<view v-if="info.jobSources" style="color: red" class="prolist">来源：{{ info.jobSources || '暂无' }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="head">
|
<view class="head">
|
||||||
<!-- <view class="proname proneed">
|
<!-- <view class="proname proneed">
|
||||||
|
|||||||
@@ -13,7 +13,9 @@
|
|||||||
行业类型：{{ info.tradeNames ? info.tradeNames : info.jobCompanyIndustry || '暂无' }}
|
行业类型：{{ info.tradeNames ? info.tradeNames : info.jobCompanyIndustry || '暂无' }}
|
||||||
</view>
|
</view>
|
||||||
<view class="prolist">岗位工种：{{ info.skillNames || '暂无' }}</view>
|
<view class="prolist">岗位工种：{{ info.skillNames || '暂无' }}</view>
|
||||||
<view class="prolist">参考工资：{{info.wage}}～{{info.wageUpper}}{{wageUnit[info.wageUnitCategory]}}</view>
|
<view class="prolist">
|
||||||
|
参考工资：{{ info.wage }}～{{ info.wageUpper }}{{ wageUnit[info.wageUnitCategory] }}
|
||||||
|
</view>
|
||||||
<!-- <view class="fee">
|
<!-- <view class="fee">
|
||||||
{{info.wage}}{{wageUnit[info.wageUnitCategory]}}
|
{{info.wage}}{{wageUnit[info.wageUnitCategory]}}
|
||||||
</view> -->
|
</view> -->
|
||||||
@@ -49,7 +51,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 技能标签 end -->
|
<!-- 技能标签 end -->
|
||||||
<view v-if="info.jobSources" class="prolist">来源：{{ info.jobSources || '暂无' }}</view>
|
<view v-if="info.jobSources" style="color: red" class="prolist">来源：{{ info.jobSources || '暂无' }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="head">
|
<view class="head">
|
||||||
<!-- <view class="proname proneed">
|
<!-- <view class="proname proneed">
|
||||||
@@ -189,7 +191,11 @@
|
|||||||
</view>
|
</view>
|
||||||
<view style="text-align: center; font-size: 28rpx; margin-top: 30rpx">
|
<view style="text-align: center; font-size: 28rpx; margin-top: 30rpx">
|
||||||
{{ info.callName || '联系人 ' }} :
|
{{ info.callName || '联系人 ' }} :
|
||||||
<span style="color: blue" v-if="info.callNumber" @click="tools.onDialingPhoneNumber(info.callNumber)">
|
<span
|
||||||
|
style="color: blue"
|
||||||
|
v-if="info.callNumber"
|
||||||
|
@click="tools.onDialingPhoneNumber(info.callNumber)"
|
||||||
|
>
|
||||||
{{ info.callNumber }}
|
{{ info.callNumber }}
|
||||||
</span>
|
</span>
|
||||||
<span style="color: #333333" v-else>无联系方式</span>
|
<span style="color: #333333" v-else>无联系方式</span>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -38,7 +38,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 技能标签 end -->
|
<!-- 技能标签 end -->
|
||||||
<view v-if="info.jobSources" class="prolist">来源：{{ info.jobSources }}</view>
|
<view v-if="info.jobSources" style="color: red" class="prolist">来源：{{ info.jobSources }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="head">
|
<view class="head">
|
||||||
<!-- <view class="proname proneed">
|
<!-- <view class="proname proneed">
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,363 +1,332 @@
|
|||||||
<template>
|
<template>
|
||||||
<view
|
<view
|
||||||
class="custom-tree-select-content"
|
class="custom-tree-select-content"
|
||||||
:class="{
|
:class="{
|
||||||
border:
|
border: border && node[dataChildren] && node[dataChildren].length && node.showChildren,
|
||||||
border &&
|
}"
|
||||||
node[dataChildren] &&
|
:style="{ marginLeft: `${level ? 14 : 0}px` }"
|
||||||
node[dataChildren].length &&
|
>
|
||||||
node.showChildren
|
<view v-if="node.visible" class="custom-tree-select-item">
|
||||||
}"
|
<view class="item-content">
|
||||||
:style="{ marginLeft: `${level ? 14 : 0}px` }"
|
<view class="left">
|
||||||
>
|
<view
|
||||||
<view v-if="node.visible" class="custom-tree-select-item">
|
v-if="node[dataChildren] && node[dataChildren].length"
|
||||||
<view class="item-content">
|
:class="['right-icon', { active: node.showChildren }]"
|
||||||
<view class="left">
|
@click.stop="nameClick(node)"
|
||||||
<view
|
>
|
||||||
v-if="node[dataChildren] && node[dataChildren].length"
|
<uni-icons type="forward" size="14" color="#333"></uni-icons>
|
||||||
:class="['right-icon', { active: node.showChildren }]"
|
</view>
|
||||||
@click.stop="nameClick(node)"
|
<view v-else class="smallcircle-filled">
|
||||||
>
|
<uni-icons
|
||||||
<uni-icons type="forward" size="14" color="#333"></uni-icons>
|
class="smallcircle-filled-icon"
|
||||||
</view>
|
type="smallcircle-filled"
|
||||||
<view v-else class="smallcircle-filled">
|
size="10"
|
||||||
<uni-icons
|
color="#333"
|
||||||
class="smallcircle-filled-icon"
|
></uni-icons>
|
||||||
type="smallcircle-filled"
|
</view>
|
||||||
size="10"
|
<view v-if="loadingArr.includes(node[dataValue])" class="loading-icon-box">
|
||||||
color="#333"
|
<uni-icons class="loading-icon" type="spinner-cycle" size="14" color="#333"></uni-icons>
|
||||||
></uni-icons>
|
</view>
|
||||||
</view>
|
<view class="name" :style="node.disabled ? 'color: #999' : ''" @click.stop="nameClick(node)">
|
||||||
<view
|
<text>{{ node[dataLabel] }}</text>
|
||||||
v-if="loadingArr.includes(node[dataValue])"
|
</view>
|
||||||
class="loading-icon-box"
|
</view>
|
||||||
>
|
<view
|
||||||
<uni-icons
|
v-if="
|
||||||
class="loading-icon"
|
choseParent ||
|
||||||
type="spinner-cycle"
|
(!choseParent && !node[dataChildren]) ||
|
||||||
size="14"
|
(!choseParent && node[dataChildren] && !node[dataChildren].length)
|
||||||
color="#333"
|
"
|
||||||
></uni-icons>
|
:class="['check-box', { disabled: node.disabled }]"
|
||||||
</view>
|
@click.stop="nodeClick(node)"
|
||||||
<view
|
>
|
||||||
class="name"
|
<view v-if="!node.checked && node.partChecked && linkage" class="part-checked"></view>
|
||||||
:style="node.disabled ? 'color: #999' : ''"
|
<uni-icons
|
||||||
@click.stop="nameClick(node)"
|
v-if="node.checked"
|
||||||
>
|
type="checkmarkempty"
|
||||||
<text>{{ node[dataLabel] }}</text>
|
size="18"
|
||||||
</view>
|
:color="node.disabled ? '#333' : '#007aff'"
|
||||||
</view>
|
></uni-icons>
|
||||||
<view
|
</view>
|
||||||
v-if="
|
</view>
|
||||||
choseParent ||
|
</view>
|
||||||
(!choseParent && !node[dataChildren]) ||
|
<view v-if="node.showChildren && node[dataChildren] && node[dataChildren].length">
|
||||||
(!choseParent && node[dataChildren] && !node[dataChildren].length)
|
<data-select-item
|
||||||
"
|
v-for="item in listData"
|
||||||
:class="['check-box', { disabled: node.disabled }]"
|
:key="item[dataValue]"
|
||||||
@click.stop="nodeClick(node)"
|
:node="item"
|
||||||
>
|
:dataLabel="dataLabel"
|
||||||
<view
|
:dataValue="dataValue"
|
||||||
v-if="!node.checked && node.partChecked && linkage"
|
:dataChildren="dataChildren"
|
||||||
class="part-checked"
|
:choseParent="choseParent"
|
||||||
></view>
|
:border="border"
|
||||||
<uni-icons
|
:linkage="linkage"
|
||||||
v-if="node.checked"
|
:level="level + 1"
|
||||||
type="checkmarkempty"
|
:load="load"
|
||||||
size="18"
|
:lazyLoadChildren="lazyLoadChildren"
|
||||||
:color="node.disabled ? '#333' : '#007aff'"
|
></data-select-item>
|
||||||
></uni-icons>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</template>
|
||||||
</view>
|
|
||||||
<view
|
<script>
|
||||||
v-if="
|
import dataSelectItem from './data-select-item.vue';
|
||||||
node.showChildren && node[dataChildren] && node[dataChildren].length
|
import { paging } from './utils';
|
||||||
"
|
export default {
|
||||||
>
|
name: 'data-select-item',
|
||||||
<data-select-item
|
components: {
|
||||||
v-for="item in listData"
|
'data-select-item': dataSelectItem,
|
||||||
:key="item[dataValue]"
|
},
|
||||||
:node="item"
|
props: {
|
||||||
:dataLabel="dataLabel"
|
node: {
|
||||||
:dataValue="dataValue"
|
type: Object,
|
||||||
:dataChildren="dataChildren"
|
default: () => ({}),
|
||||||
:choseParent="choseParent"
|
},
|
||||||
:border="border"
|
choseParent: {
|
||||||
:linkage="linkage"
|
type: Boolean,
|
||||||
:level="level + 1"
|
default: true,
|
||||||
:load="load"
|
},
|
||||||
:lazyLoadChildren="lazyLoadChildren"
|
dataLabel: {
|
||||||
></data-select-item>
|
type: String,
|
||||||
</view>
|
default: 'name',
|
||||||
</view>
|
},
|
||||||
</template>
|
dataValue: {
|
||||||
|
type: String,
|
||||||
<script>
|
default: 'value',
|
||||||
import dataSelectItem from './data-select-item.vue'
|
},
|
||||||
import { paging } from './utils'
|
dataChildren: {
|
||||||
export default {
|
type: String,
|
||||||
name: 'data-select-item',
|
default: 'children',
|
||||||
components: {
|
},
|
||||||
'data-select-item': dataSelectItem
|
border: {
|
||||||
},
|
type: Boolean,
|
||||||
props: {
|
default: false,
|
||||||
node: {
|
},
|
||||||
type: Object,
|
linkage: {
|
||||||
default: () => ({})
|
type: Boolean,
|
||||||
},
|
default: false,
|
||||||
choseParent: {
|
},
|
||||||
type: Boolean,
|
level: {
|
||||||
default: true
|
type: Number,
|
||||||
},
|
default: 0,
|
||||||
dataLabel: {
|
},
|
||||||
type: String,
|
load: {
|
||||||
default: 'name'
|
type: Function,
|
||||||
},
|
default: function () {},
|
||||||
dataValue: {
|
},
|
||||||
type: String,
|
lazyLoadChildren: {
|
||||||
default: 'value'
|
type: Boolean,
|
||||||
},
|
default: false,
|
||||||
dataChildren: {
|
},
|
||||||
type: String,
|
},
|
||||||
default: 'children'
|
data() {
|
||||||
},
|
return {
|
||||||
border: {
|
listData: [],
|
||||||
type: Boolean,
|
clearTimerList: [],
|
||||||
default: false
|
loadingArr: [],
|
||||||
},
|
};
|
||||||
linkage: {
|
},
|
||||||
type: Boolean,
|
computed: {
|
||||||
default: false
|
watchData() {
|
||||||
},
|
const { node, dataChildren } = this;
|
||||||
level: {
|
|
||||||
type: Number,
|
return {
|
||||||
default: 0
|
node,
|
||||||
},
|
dataChildren,
|
||||||
load: {
|
};
|
||||||
type: Function,
|
},
|
||||||
default: function () {}
|
},
|
||||||
},
|
watch: {
|
||||||
lazyLoadChildren: {
|
watchData: {
|
||||||
type: Boolean,
|
immediate: true,
|
||||||
default: false
|
handler(newVal) {
|
||||||
}
|
const { node, dataChildren } = newVal;
|
||||||
},
|
if (node.showChildren && node[dataChildren] && node[dataChildren].length) {
|
||||||
data() {
|
this.resetClearTimerList();
|
||||||
return {
|
this.renderTree(node[dataChildren]);
|
||||||
listData: [],
|
}
|
||||||
clearTimerList: [],
|
},
|
||||||
loadingArr: []
|
},
|
||||||
}
|
},
|
||||||
},
|
methods: {
|
||||||
computed: {
|
// 懒加载
|
||||||
watchData() {
|
renderTree(arr) {
|
||||||
const { node, dataChildren } = this
|
const pagingArr = paging(arr);
|
||||||
|
this.listData.splice(0, this.listData.length, ...(pagingArr?.[0] || []));
|
||||||
return {
|
this.lazyRenderList(pagingArr, 1);
|
||||||
node,
|
},
|
||||||
dataChildren
|
// 懒加载具体逻辑
|
||||||
}
|
lazyRenderList(arr, startIndex) {
|
||||||
}
|
for (let i = startIndex; i < arr.length; i++) {
|
||||||
},
|
let timer = null;
|
||||||
watch: {
|
timer = setTimeout(() => {
|
||||||
watchData: {
|
this.listData.push(...arr[i]);
|
||||||
immediate: true,
|
}, i * 500);
|
||||||
handler(newVal) {
|
this.clearTimerList.push(() => clearTimeout(timer));
|
||||||
const { node, dataChildren } = newVal
|
}
|
||||||
if (
|
},
|
||||||
node.showChildren &&
|
// 中断懒加载
|
||||||
node[dataChildren] &&
|
resetClearTimerList() {
|
||||||
node[dataChildren].length
|
const list = [...this.clearTimerList];
|
||||||
) {
|
this.clearTimerList.splice(0, this.clearTimerList.length);
|
||||||
this.resetClearTimerList()
|
list.forEach((item) => item());
|
||||||
this.renderTree(node[dataChildren])
|
},
|
||||||
}
|
async nameClick(node) {
|
||||||
}
|
if (!node[this.dataChildren]?.length && this.lazyLoadChildren) {
|
||||||
}
|
this.loadingArr.push(node[this.dataValue]);
|
||||||
},
|
try {
|
||||||
methods: {
|
const res = await this.load(node);
|
||||||
// 懒加载
|
if (Array.isArray(res)) {
|
||||||
renderTree(arr) {
|
uni.$emit('custom-tree-select-load', {
|
||||||
const pagingArr = paging(arr)
|
source: node,
|
||||||
this.listData.splice(0, this.listData.length, ...(pagingArr?.[0] || []))
|
target: res,
|
||||||
this.lazyRenderList(pagingArr, 1)
|
});
|
||||||
},
|
}
|
||||||
// 懒加载具体逻辑
|
} finally {
|
||||||
lazyRenderList(arr, startIndex) {
|
this.loadingArr = [];
|
||||||
for (let i = startIndex; i < arr.length; i++) {
|
}
|
||||||
let timer = null
|
} else {
|
||||||
timer = setTimeout(() => {
|
if (!node.showChildren && node[this.dataChildren] && node[this.dataChildren].length) {
|
||||||
this.listData.push(...arr[i])
|
// 打开
|
||||||
}, i * 500)
|
this.renderTree(node[this.dataChildren]);
|
||||||
this.clearTimerList.push(() => clearTimeout(timer))
|
} else {
|
||||||
}
|
// 关闭
|
||||||
},
|
this.resetClearTimerList();
|
||||||
// 中断懒加载
|
this.listData.splice(0, this.listData.length);
|
||||||
resetClearTimerList() {
|
}
|
||||||
const list = [...this.clearTimerList]
|
uni.$emit('custom-tree-select-name-click', node);
|
||||||
this.clearTimerList.splice(0, this.clearTimerList.length)
|
}
|
||||||
list.forEach((item) => item())
|
},
|
||||||
},
|
nodeClick(node) {
|
||||||
async nameClick(node) {
|
if (!node.disabled) {
|
||||||
if (!node[this.dataChildren]?.length && this.lazyLoadChildren) {
|
uni.$emit('custom-tree-select-node-click', node);
|
||||||
this.loadingArr.push(node[this.dataValue])
|
}
|
||||||
try {
|
},
|
||||||
const res = await this.load(node)
|
},
|
||||||
if (Array.isArray(res)) {
|
options: {
|
||||||
uni.$emit('custom-tree-select-load', {
|
styleIsolation: 'shared',
|
||||||
source: node,
|
},
|
||||||
target: res
|
};
|
||||||
})
|
</script>
|
||||||
}
|
|
||||||
} finally {
|
<style lang="scss" scoped>
|
||||||
this.loadingArr = []
|
* {
|
||||||
}
|
margin: 0;
|
||||||
} else {
|
padding: 0;
|
||||||
if (
|
box-sizing: border-box;
|
||||||
!node.showChildren &&
|
}
|
||||||
node[this.dataChildren] &&
|
|
||||||
node[this.dataChildren].length
|
$primary-color: #007aff;
|
||||||
) {
|
$col-sm: 4px;
|
||||||
// 打开
|
$col-base: 8px;
|
||||||
this.renderTree(node[this.dataChildren])
|
$col-lg: 12px;
|
||||||
} else {
|
$row-sm: 5px;
|
||||||
// 关闭
|
$row-base: 10px;
|
||||||
this.resetClearTimerList()
|
$row-lg: 15px;
|
||||||
this.listData.splice(0, this.listData.length)
|
$radius-sm: 3px;
|
||||||
}
|
$radius-base: 6px;
|
||||||
uni.$emit('custom-tree-select-name-click', node)
|
$border-color: #c8c7cc;
|
||||||
}
|
|
||||||
},
|
.custom-tree-select-content {
|
||||||
nodeClick(node) {
|
&.border {
|
||||||
if (!node.disabled) {
|
border-left: 1px solid $border-color;
|
||||||
uni.$emit('custom-tree-select-node-click', node)
|
}
|
||||||
}
|
|
||||||
}
|
::v-deep .uni-checkbox-input {
|
||||||
},
|
margin: 0 !important;
|
||||||
options: {
|
}
|
||||||
styleIsolation: 'shared'
|
|
||||||
}
|
.item-content {
|
||||||
}
|
margin: 0 0 $col-lg;
|
||||||
</script>
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
<style lang="scss" scoped>
|
align-items: center;
|
||||||
* {
|
position: relative;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
&::after {
|
||||||
box-sizing: border-box;
|
content: '';
|
||||||
}
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
$primary-color: #007aff;
|
left: 0;
|
||||||
$col-sm: 4px;
|
bottom: 0;
|
||||||
$col-base: 8px;
|
width: 3px;
|
||||||
$col-lg: 12px;
|
background-color: #fff;
|
||||||
$row-sm: 5px;
|
transform: translateX(-2px);
|
||||||
$row-base: 10px;
|
z-index: 1;
|
||||||
$row-lg: 15px;
|
}
|
||||||
$radius-sm: 3px;
|
|
||||||
$radius-base: 6px;
|
.left {
|
||||||
$border-color: #c8c7cc;
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
.custom-tree-select-content {
|
align-items: center;
|
||||||
&.border {
|
|
||||||
border-left: 1px solid $border-color;
|
.right-icon {
|
||||||
}
|
transition: 0.15s ease;
|
||||||
|
|
||||||
/deep/ .uni-checkbox-input {
|
&.active {
|
||||||
margin: 0 !important;
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.item-content {
|
|
||||||
margin: 0 0 $col-lg;
|
.smallcircle-filled {
|
||||||
display: flex;
|
width: 14px;
|
||||||
justify-content: space-between;
|
height: 13.6px;
|
||||||
align-items: center;
|
display: flex;
|
||||||
position: relative;
|
align-items: center;
|
||||||
|
|
||||||
&::after {
|
.smallcircle-filled-icon {
|
||||||
content: '';
|
transform-origin: center;
|
||||||
position: absolute;
|
transform: scale(0.55);
|
||||||
top: 0;
|
}
|
||||||
left: 0;
|
}
|
||||||
bottom: 0;
|
|
||||||
width: 3px;
|
.loading-icon-box {
|
||||||
background-color: #fff;
|
margin-right: $row-sm;
|
||||||
transform: translateX(-2px);
|
width: 14px;
|
||||||
z-index: 1;
|
height: 100%;
|
||||||
}
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
.left {
|
align-items: center;
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
.loading-icon {
|
||||||
align-items: center;
|
transform-origin: center;
|
||||||
|
animation: rotating infinite 0.2s ease;
|
||||||
.right-icon {
|
}
|
||||||
transition: 0.15s ease;
|
}
|
||||||
|
|
||||||
&.active {
|
.name {
|
||||||
transform: rotate(90deg);
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.smallcircle-filled {
|
}
|
||||||
width: 14px;
|
|
||||||
height: 13.6px;
|
.check-box {
|
||||||
display: flex;
|
width: 23.6px;
|
||||||
align-items: center;
|
height: 23.6px;
|
||||||
|
border: 1px solid $border-color;
|
||||||
.smallcircle-filled-icon {
|
border-radius: $radius-sm;
|
||||||
transform-origin: center;
|
display: flex;
|
||||||
transform: scale(0.55);
|
justify-content: center;
|
||||||
}
|
align-items: center;
|
||||||
}
|
|
||||||
|
&.disabled {
|
||||||
.loading-icon-box {
|
background-color: rgb(225, 225, 225);
|
||||||
margin-right: $row-sm;
|
}
|
||||||
width: 14px;
|
|
||||||
height: 100%;
|
.part-checked {
|
||||||
display: flex;
|
width: 60%;
|
||||||
justify-content: center;
|
height: 2px;
|
||||||
align-items: center;
|
background-color: $primary-color;
|
||||||
|
}
|
||||||
.loading-icon {
|
}
|
||||||
transform-origin: center;
|
|
||||||
animation: rotating infinite 0.2s ease;
|
@keyframes rotating {
|
||||||
}
|
from {
|
||||||
}
|
transform: rotate(0);
|
||||||
|
}
|
||||||
.name {
|
to {
|
||||||
flex: 1;
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
</style>
|
||||||
}
|
|
||||||
|
|
||||||
.check-box {
|
|
||||||
width: 23.6px;
|
|
||||||
height: 23.6px;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
background-color: rgb(225, 225, 225);
|
|
||||||
}
|
|
||||||
|
|
||||||
.part-checked {
|
|
||||||
width: 60%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotating {
|
|
||||||
from {
|
|
||||||
transform: rotate(0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ module.exports = {
|
|||||||
// target: 'http://192.168.1.115:8000',
|
// target: 'http://192.168.1.115:8000',
|
||||||
target: 'http://39.98.44.136:6013',
|
target: 'http://39.98.44.136:6013',
|
||||||
ws: true,
|
ws: true,
|
||||||
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
'^/api': '/'
|
'^/api': '/'
|
||||||
}
|
}
|
||||||
@@ -18,6 +19,7 @@ module.exports = {
|
|||||||
//本地服务接口地址
|
//本地服务接口地址
|
||||||
target: 'https://apis.map.qq.com',
|
target: 'https://apis.map.qq.com',
|
||||||
ws: true,
|
ws: true,
|
||||||
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
'^/qq/map': '/'
|
'^/qq/map': '/'
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user