用工小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

271 lines
6.9 KiB

<template>
<view>
<view class="se-bgc-orange se-pos se-pos-lt se-w-vw-100 se-h-vh-30"
style="z-index: -1;border-bottom-left-radius: 120rpx;border-bottom-right-radius: 120rpx;"></view>
<view class="se-flex se-flex-h-sb se-px-40 se-pb-30 se-pt-10 se-bgc-orange se-zi-s">
<view class="se-c-white se-fs-28" @click="getLocation()">
<view class="se-bgc-white se-py-5 se-px-10 se-fw-6 se-br-12 se-c-orange se-fs-24 se-display-ib">
</view>
<text class="se-ml-10 se-fw-6 se-fs-28">智选猎头</text>
</view>
<!-- <view class="se-br-30 se-bgc-white se-fw-6 se-c-orange se-fs-28 se-px-20 se-py-10">
企业/个人端
</view> -->
</view>
<view class="se-px-20 se-pt-10 se-zi-s">
<u-search height="40" placeholder="搜索" :showAction="false" v-model="keyword"></u-search>
</view>
<view class="se-pb-20 se-pt-40 se-zi-s">
<view class="se-px-20">
<u-swiper height="300rpx" :indicator="true" style="background-color: #f5f5f5;height: 300rpx;"
:list="swiperList" keyName="image" @change="change" @click="click"></u-swiper>
</view>
<swiper :autoplay="true" :interval="3000" :duration="1000" circular class="notice" vertical>
<swiper-item v-for="item in noticeData" :key="item.id">
<view
class="se-pt-10 se-bgc-white se-px-0 se-py-10 se-ta-l se-c-orange se-flex se-flex-ai-c se-fs-26">
<image class="se-a-80" src="@/static/image/aed60x.png" mode=""></image>
<text class="se-ml-10">{{item.title}}</text>
</view>
</swiper-item>
</swiper>
</view>
<view class="se-my-20 se-bgc-white se-grid">
<navigator :url="`/pages_subpack/category/index`+item.id" v-for="(item, index) in tabList" :key="index"
class="se-flex-v-c se-pt-30 se-mb-20">
<image class="se-a-100 se-br-20 se-bgc-f5" :src="item.icon" mode=""></image>
<text
class="se-w-150 se-h-60 se-lh-30 se-c-black se-fs-22 se-ta-c se-mt-10 se-toe-2">{{item.name}}</text>
</navigator>
</view>
<view class="se-my-20 se-bgc-white se-p-20 se-flex">
<view @click="toNavigator(1)"
class="se-flex-1 se-flex-h-c se-flex-ai-c se-c-white se-py-20 se-fw-6 enterprise">
<!-- 找工作 -->
招聘
</view>
<view @click="toNavigator(2)"
class="se-flex-1 se-ml-20 se-flex-h-c se-flex-ai-c se-c-white se-py-20 se-fw-6 master">
<!-- 找师傅 -->
求职
</view>
</view>
<u-tabs :current="current" lineWidth="30" lineColor="#FF7A31" :activeStyle="{
color: '#303133',
fontWeight: 'bold',
transform: 'scale(1.05)'
}" :inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :list="navList" @click="navClick($event)">
</u-tabs>
<!-- 企业端 求职大厅 -->
<enterpriseBox :rolelist="rlist" v-if="current==0" />
<!-- 师傅端 招聘大厅 -->
<masterBox :taskList="tList" v-if="current==1" />
<view class="se-h-80"></view>
</view>
</template>
<script>
import {
bannerList,
taskList,
rolelist,
industryList,
getSysText,
noticeList
} from "@/common/api.js"
import enterpriseBox from "./component/enterprise.vue"
import masterBox from "./component/master.vue"
import QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
export default {
components: {
enterpriseBox,
masterBox
},
data() {
return {
status: 1,
list: [
"https://cdn.uviewui.com/uview/swiper/swiper1.png"
],
tabList: [], //导航栏
swiperList: [], //轮播
current: 0,
navList: [{
name: '求职大厅',
},
{
name: '招聘大厅',
}
],
rpageNo: 1,
rpageSize: 20,
rlist: [],
latitude: '34.00',
longitude: '134.65',
tpageNo: 1,
tpageSize: 20,
tList: [],
noticeData: [], //公告列表
}
},
mounted() {
this.onBannerList()
this.onTaskList()
this.onRolelist()
this.onIndustryList()
this.getLocation()
this.onSysText()
this.getNotice()
},
onPullDownRefresh() {
let that = this
that.rpageNo = 1
that.rlist = []
that.onRolelist()
},
onReachBottom() {
let that = this
that.rpageNo = that.rpageNo + 1
that.onRolelist()
},
methods: {
// 获取公告列表
async getNotice() {
const {
code,
result
} = await noticeList()
if (code === 200) {
this.noticeData = result || []
}
},
onSysText() {
let that = this
let params = {}
getSysText(params).then(response => {
localStorage.setItem("sysList", response.result)
}).catch(error => {
})
},
getLocation() {
const that = this;
console.log('当前位置的经度:');
wx.getLocation({
type: 'wgs84',
success: function(res) {
console.log('位置', res);
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
const qqmapsdk = new QQMapWX({
key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
});
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(response) {
// that.city = response.result.ad_info.city
console.log('逆地理编码结果:', response);
},
fail: function(error) {
console.error('逆地理编码失败:', error);
}
});
}
})
},
onIndustryList() {
industryList({}).then(response => {
console.info("industryList", response);
this.tabList = response.result
}).catch(error => {
})
},
onBannerList() {
bannerList({}).then(response => {
console.info("banner", response)
this.swiperList = response.result[0]
}).catch(error => {
})
},
onTaskList() {
taskList({
latitude: this.latitude,
longitude: this.longitude,
pageNo: this.tpageNo,
pageSize: this.tpageSize
}).then(response => {
if (this.tpageNo == 1) {
this.tList = response.result.records
} else {
this.tList = this.tList.concat(response.result.records)
}
console.info("taskList", response)
}).catch(error => {
})
},
onRolelist() {
rolelist({
pageNo: this.rpageNo,
pageSize: this.rpageSize
}).then(response => {
if (this.rpageNo == 1) {
this.rlist = response.result.records
} else {
this.rlist = this.rlist.concat(response.result.records)
}
}).catch(error => {
})
},
navClick(event) {
this.current = event.index
},
change(event) {
console.info(event)
},
click(event) {
console.info(event)
},
toNavigator(event) {
uni.navigateTo({
url: "/pages_subpack/release/index?status=" + event
})
},
}
}
</script>
<style scoped>
page {
background-color: #f5f5f5;
}
.enterprise {
background: #ff7a31;
border: 4rpx solid rgba(255, 255, 255, 0.50);
border-radius: 14rpx;
}
.master {
background: #f0b744;
border: 4rpx solid rgba(255, 255, 255, 0.50);
border-radius: 14rpx;
}
.notice {
height: 108rpx;
}
</style>