hly
/
recruitment-wechat-uniapp-241012
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传修改

master
前端-胡立永 4 months ago
parent
c9c8358b3f
commit
5946fadab8
12 changed files with 651 additions and 221 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      App.vue
  2. +2
    -2
      components/base/navbar.vue
  3. +92
    -0
      components/list/workItem.vue
  4. +67
    -0
      components/list/workList.vue
  5. +3
    -0
      pages.json
  6. +193
    -171
      pages/index/center.vue
  7. +137
    -47
      pages/index/index.vue
  8. +67
    -0
      pages_order/components/user/userHead.vue
  9. BIN
      pages_order/static/work/address.png
  10. BIN
      pages_order/static/work/g.png
  11. BIN
      pages_order/static/work/x.png
  12. +89
    -0
      pages_order/work/workDetail.vue

+ 1
- 1
App.vue View File

@ -13,7 +13,7 @@
<style>
/*每个页面公共css */
body{
background-color: #f7f7f7;
background-color: #f3f3f3;
font-size: 30rpx;
}
.page{


+ 2
- 2
components/base/navbar.vue View File

@ -63,7 +63,7 @@
},
bgColor : {
default : '#fff'
default : '#F9FEFE'
}
},
created() {
@ -93,7 +93,7 @@
padding-top: calc(var(--status-bar-height) + 20rpx);
width: 100%;
height: 100rpx;
background-color: #fff;
background-color: #F9FEFE;
display: flex;
justify-content: center;
font-size: 32rpx;


+ 92
- 0
components/list/workItem.vue View File

@ -0,0 +1,92 @@
<template>
<view class="work-item">
<view class="top">
<view class="title">
产品经理
</view>
<view class="price">
12-18K
</view>
</view>
<view class="tag-list">
<view
v-for="(item, index) in 5"
:key="index">
包吃
</view>
</view>
<view class="bottom">
<view class="address">
2.5km | 楚河汉区
</view>
<view class="time">
09月23日 16：20
</view>
<view class="phone">
<image src="/static/image/home/phone.png" mode=""></image>
联系老板
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.work-item{
background-color: #fff;
padding: 20rpx;
border-radius: 20rpx;
.top{
display: flex;
justify-content: space-between;
font-weight: 900;
.title{
}
.price{
color: $uni-color;
}
}
.tag-list{
display: flex;
flex-wrap: wrap;
&>view{
margin: 10rpx;
padding: 10rpx;
background-color: #EFF2F1;
font-size: 24rpx;
border-radius: 10rpx;
}
}
.bottom{
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 24rpx;
.time{
color: #999999;
}
.phone{
background-color: rgba($uni-color, 0.2);
color: $uni-color;
padding: 8rpx 16rpx;
border-radius: 10rpx;
image{
width: 20rpx;
height: 20rpx;
}
}
}
}
</style>

+ 67
- 0
components/list/workList.vue View File

@ -0,0 +1,67 @@
<template>
<scroll-view
scroll-y="true"
:style="{height: height}"
@scrolltolower="loadMoreData">
<view class="workList">
<view
@click="$utils.navigateTo('/pages_order/work/workDetail?id=' + 123)"
:key="index"
v-for="(item, index) in list">
<workItem class="work-item"/>
</view>
</view>
</scroll-view>
</template>
<script>
import workItem from './workItem.vue'
export default {
components : {
workItem,
},
props : {
height : {
default : 'auto'
},
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
},
total : 0,
list : 10,
}
},
methods: {
queryVideoList(){
if(uni.getStorageSync('token')){
this.queryParams.token = uni.getStorageSync('token')
}
this.$api('queryVedioById', this.queryParams, res => {
if(res.code == 200){
this.list = res.result
// this.total = res.result.total
}
})
},
loadMoreData(){
if(this.queryParams.pageSize <= this.list.length){
this.queryParams.pageSize += 10
this.queryVideoList()
}
},
}
}
</script>
<style scoped lang="scss">
.workList {
&>view{
margin: 20rpx;
}
}
</style>

+ 3
- 0
pages.json View File

@ -61,6 +61,9 @@
},
{
"path": "mine/help"
},
{
"path": "work/workDetail"
}
]
}],


+ 193
- 171
pages/index/center.vue View File

@ -1,131 +1,215 @@
<template>
<view class="page">
<navbar title="个人中心" />
<navbar bgColor="#3796F8"/>
<view class="head">
<view class="headImage">
<image src="" mode=""></image>
<image :src="headImage" mode=""></image>
</view>
<view class="info">
<view class="name">
倾心.
倾心.
<view>
<uv-icon name="edit-pen" size="40rpx" color="#fff"></uv-icon>
修改资料
</view>
</view>
<!-- <view class="vip">
VIP1
</view> -->
<view class="tips">
今天是您来的的第32天
手机号：1300000000
</view>
</view>
<view class="headBtn" @click="headBtn">
<!-- <view class="headBtn" @click="headBtn">
角色切换
</view>
<view class="setting">
<uv-icon name="setting" size="40rpx"></uv-icon>
</view>
</view> -->
</view>
<!-- 酒店 -->
<view class="user">
<!-- 实名认证 -->
<view class="auth">
<uv-cell
icon="setting-fill"
title="完成实名认证，信息优先推荐！"
value="去认证"
isLink></uv-cell>
</view>
<!-- 轮播图 -->
<view class="swipe">
<uv-swiper
:list="bannerList"
indicator
height="220rpx"
keyName="url"></uv-swiper>
</view>
<view class="line">
<view class="item">
<view class="image">
<image src="/static/image/center/1.png" mode=""></image>
<view class="">
30000
</view>
<view class="">
余额￥3000
正式积分
</view>
</view>
<view class="item">
<view class="image">
<image src="/static/image/center/4.png" mode=""></image>
<view class="">
30000
</view>
<view class="">
临时积分
</view>
</view>
<view class="item">
<view class="">
30000
</view>
<view class="">
押金￥30000
我的收藏
</view>
</view>
<view class="item">
<view class="">
30000
</view>
<view class="">
联系记录
</view>
</view>
</view>
<view class="line grid">
<view class="title">
我的工作
</view>
<uv-grid :col="4" :border="false">
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">我的找活</text>
</uv-grid-item>
<uv-grid-item @click="$utils.redirectTo('/index/order')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">谁看过我的简历</text>
</uv-grid-item>
</uv-grid>
</view>
<view class="line grid">
<view class="title">
我的服务
</view>
<uv-grid :col="4" :border="false">
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
<!-- <image class="image" src="/static/image/center/7.png" mode=""></image> -->
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">会员充值</text>
</uv-grid-item>
<uv-grid-item @click="$utils.redirectTo('/index/order')">
<!-- <image class="image" src="/static/image/center/8.png" mode=""></image> -->
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">获取积分</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
<!-- <image class="image" src="/static/image/center/5.png" mode=""></image> -->
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">积分记录</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
<!-- <image class="image" src="/static/image/center/7.png" mode=""></image> -->
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">实名认证</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">兑换码</text>
</uv-grid-item>
<uv-grid-item @click="$utils.redirectTo('/index/order')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">考证咨询</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">电子合同</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">面对面分享</text>
</uv-grid-item>
</uv-grid>
</view>
<view class="line grid">
<view class="title">
设置与帮助
</view>
<uv-grid :col="4" :border="false">
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">系统设置</text>
</uv-grid-item>
<uv-grid-item @click="$utils.redirectTo('/index/order')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">帮助与反馈</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">关于本程序</text>
</uv-grid-item>
</uv-grid>
</view>
</view>
<tabber select="4" />
<tabber select="3" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import {
mapGetters
mapState
} from 'vuex'
import userShopCommission from '@/components/userShop/userShopCommission.vue'
export default {
components: {
tabber,
userShopCommission,
},
computed: {
...mapGetters(['userShop']),
customStyle1() {
return {
height: '60rpx',
background: '#FFF',
color: '#000000',
fontSize: '36rpx',
borderRadius: '40rpx', //圆角
// nvue中必须是下方的写法
'border-top-right-radius': '40rpx',
'border-bottom-left-radius': '40rpx',
'border-bottom-right-radius': '40rpx',
'width': '150rpx',
}
...mapState(['userInfo']),
headImage(){
},
username(){
},
customStyle2() {
return {
height: '60rpx',
background: '#fd5100',
color: '#FFF',
fontSize: '34px',
borderRadius: '40rpx', //圆角
// nvue中必须是下方的写法
'border-top-right-radius': '40rpx',
'border-bottom-left-radius': '40rpx',
'border-bottom-right-radius': '40rpx',
'width': '150rpx',
}
}
},
data() {
return {
show: false,
bannerList: [
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
],
}
},
methods: {
@ -162,50 +246,8 @@
<style scoped lang="scss">
.page {
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 600rpx;
height: 300rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
.title {
padding: 10rpx 0 0 15rpx;
background-color: #fd5100;
color: #FFF;
text-align: left;
width: 100%;
height: 18%;
font-size: 36rpx;
}
.center {
height: 40%;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
}
.bottom {
display: flex;
justify-content: center;
gap: 50rpx;
}
}
}
image {
width: 100%;
height: 100%;
@ -213,11 +255,12 @@
.head {
display: flex;
background-color: #fff;
background-color: $uni-color;
padding: 40rpx 20rpx;
align-items: center;
position: relative;
color: #fff;
padding-bottom: 70rpx;
.headImage {
width: 120rpx;
height: 120rpx;
@ -230,101 +273,81 @@
.info {
font-size: 28rpx;
.vip {
background-color: #FCCC92;
color: #FA6239;
width: 100rpx;
display: flex;
justify-content: center;
align-items: center;
height: 40rpx;
border-radius: 20rpx;
margin-top: 20rpx;
}
.name {
font-size: 32rpx;
display: flex;
padding-bottom: 10rpx;
view{
display: flex;
font-size: 20rpx;
align-items: center;
padding-left: 20rpx;
}
}
.tips {
font-size: 26rpx;
color: #ABABAB;
color: #fff;
}
}
.headBtn {
margin-left: auto;
padding: 15rpx 20rpx;
background-color: $uni-color;
color: #fff;
border-radius: 20rpx;
margin-top: 50rpx;
}
.setting {
position: absolute;
right: 50rpx;
top: 50rpx;
}
// .headBtn {
// margin-left: auto;
// padding: 15rpx 20rpx;
// background-color: $uni-color;
// color: #fff;
// border-radius: 20rpx;
// margin-top: 50rpx;
// }
// .setting {
// position: absolute;
// right: 50rpx;
// top: 50rpx;
// }
}
.userShop {
.userList {
.title {
font-size: 32rpx;
font-weight: 900;
padding: 20rpx;
}
.list {
display: flex;
flex-wrap: wrap;
.item {
width: 270rpx;
margin: 20rpx;
display: flex;
flex-direction: column;
padding: 40rpx 30rpx;
background-color: #fff;
border-radius: 30rpx;
line-height: 60rpx;
.name {}
.num {
color: $uni-color;
font-weight: 600;
font-size: 28rpx;
}
}
.user {
position: relative;
padding-top: 30rpx;
.auth{
width: 690rpx;
position: absolute;
top: -50rpx;
left: 30rpx;
z-index: 99;
background-color: #fff;
border-radius: 20rpx;
/deep/ text{
font-size: 26rpx;
}
}
}
.user {
.swipe{
margin: 30rpx;
border-radius: 20rpx;
overflow: hidden;
}
.line {
display: flex;
background-color: #fff;
margin-top: 20rpx;
padding: 20rpx 0;
margin: 30rpx;
border-radius: 20rpx;
overflow: hidden;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20rpx 0;
&:nth-child(1) {
border-right: 1px solid #00000013;
}
.image {
width: 100rpx;
height: 70rpx;
margin-right: 20rpx;
font-size: 24rpx;
padding: 10rpx 0;
view{
padding: 5rpx 0;
}
}
}
@ -337,18 +360,17 @@
.title {
margin-bottom: 30rpx;
font-size: 28rpx;
font-weight: 600;
}
.image {
width: 70rpx;
height: 70rpx;
width: 45rpx;
height: 45rpx;
margin-bottom: 10rpx;
}
text {
text-align: center;
width: 120rpx;
margin-bottom: 20rpx;
}
}
}

+ 137
- 47
pages/index/index.vue View File

@ -1,6 +1,45 @@
<template>
<view class="page">
<view class="banner">
<uv-swiper
:list="bannerList"
indicator
height="620rpx"
indicatorStyle="bottom: 100rpx;"
keyName="imageContent"></uv-swiper>
<view class="top">
<view class="search">
<uv-search
placeholder="请输入搜索文章"
:showAction="false"
search-icon-size="40rpx"
@search="search"
v-model="keyword"></uv-search>
</view>
</view>
</view>
<view class="content">
<view class="grid">
<uv-grid :border="false"
:col="5">
<uv-grid-item
v-for="(item,index) in baseList"
@click="$utils.navigateTo(item.path)"
:key="index">
<image class="grid-icon" :src="item.icon" mode="aspectFill"></image>
<text class="grid-text">{{item.title}}</text>
</uv-grid-item>
</uv-grid>
</view>
</view>
<!-- 筛选器 -->
<!-- 列表 -->
<workList ref="workList"/>
<PrivacyAgreementPoup/>
@ -10,77 +49,128 @@
<script>
import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
import Position from '@/utils/position.js'
import workList from '@/components/list/workList.vue'
import tabber from '@/components/base/tabbar.vue'
import { mapGetters } from 'vuex'
// import selectArea from '../../components/selectArea.vue';
export default {
components : {
tabber,
PrivacyAgreementPoup,
workList,
tabber
},
data() {
return {
baseList : [
{
icon : '/static/image/home/1.png',
title : '电工',
path : '/pages_order/service/applyRelic',
},
{
icon : '/static/image/home/1.png',
title : '焊工',
path : '/pages_order/service/applyRelic',
},
{
icon : '/static/image/home/1.png',
title : '叉车',
path : '/pages_order/service/applyRelic',
},
{
icon : '/static/image/home/1.png',
title : '钳工',
path : '/pages_order/service/applyRelic',
},
{
icon : '/static/image/home/1.png',
title : '其他招工',
path : '/pages_order/service/applyRelic',
},
],
bannerList: [
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
},
],
productList: [],
keyword : '',
}
},
computed : {
...mapGetters(['userShop']),
},
// onPullDownRefresh(){
// this.$refs.videoList.queryVideoList()
// this.queryBannerList()
// },
// onShow() {
// this.$refs.videoList.queryVideoList()
// this.queryBannerList()
// },
// //滚动到屏幕底部
// onReachBottom() {
// this.$refs.videoList.loadMoreData()
// },
methods: {
//显示选择地区
showSelectArea() {
// this.$refs.selectArea.open()
},
//搜索地址
searchAddress() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
let address = this.extractProvinceAndCity(success)
this.queryParams.title = address.city
})
})
},
//提取用户选择的地址信息(省市县信息)
extractProvinceAndCity(res) { //提取用户选择的地址信息(省市)
if (!res.address && res.name) { //用户直接选择城市的逻辑
return {
province: '',
city: res.name
};
}
}
</script>
<style scoped lang="scss">
.page{
.banner{
position: relative;
background-color: $uni-color;
.top{
position: absolute;
top: var(--status-bar-height);
left: 0;
padding-top: 30rpx;
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
.search{
width: 400rpx;
margin-left: -100rpx;
/deep/ .uv-search__content__icon{
padding: 30rpx 0;
}
}
if (res.address) { //用户选择了详细地址，要从详细地址中提取出省市县信息
// 使用正则表达式匹配省市县
const regex = /(?<province>[\u4e00-\u9fa5]+?省)(?<city>[\u4e00-\u9fa5]+?(?:市|自治州|盟|地区))/;
const match = res.address.match(regex);
if (match) { // 如果匹配成功，则返回省和市的信息
return {
province: match.groups.province,
city: match.groups.city
};
.title{
image{
width: 600rpx;
height: 300rpx;
}
}
return { //用户没选择地址就点了确定按钮
province: '',
city: ''
}
}
.content{
position: relative;
margin-top: -60rpx;
.grid{
padding-bottom: 30rpx;
background-color: #fff;
// border-radius: 60rpx;
border-top-left-radius: 60rpx;
border-top-right-radius: 60rpx;
// box-shadow: 0 -10rpx 10rpx 10rpx #00000013;
.grid-icon{
width: 80rpx;
height: 80rpx;
margin-bottom: 10rpx;
margin-top: 30rpx;
}
.grid-text{
font-size: 24rpx;
font-weight: 900;
}
},
}
}
}
</script>
<style scoped lang="scss">
</style>

+ 67
- 0
pages_order/components/user/userHead.vue View File

@ -0,0 +1,67 @@
<template>
<view class="head">
<view class="headImage">
<image src="/static/image/center/3.png" mode=""></image>
</view>
<view class="info">
<view class="name">
倾心.
</view>
<view class="tips">
手机号：1300000000
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.head {
display: flex;
align-items: center;
position: relative;
image{
width: 100%;
height: 100%;
}
.headImage {
width: 70rpx;
height: 70rpx;
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.info {
font-size: 28rpx;
.name {
font-size: 32rpx;
display: flex;
padding-bottom: 10rpx;
view{
display: flex;
font-size: 20rpx;
align-items: center;
padding-left: 20rpx;
}
}
.tips {
font-size: 26rpx;
}
}
}
</style>

BIN
pages_order/static/work/address.png View File

Before After
Width: 24  |  Height: 31  |  Size: 939 B

BIN
pages_order/static/work/g.png View File

Before After
Width: 23  |  Height: 20  |  Size: 335 B

BIN
pages_order/static/work/x.png View File

Before After
Width: 22  |  Height: 20  |  Size: 693 B

+ 89
- 0
pages_order/work/workDetail.vue View File

@ -0,0 +1,89 @@
<template>
<view class="page">
<navbar title="工作详情" leftClick @leftClick="$utils.navigateBack" />
<view class="box">
<view class="title">
平面设计
</view>
<view class="price">
6000-11000元
</view>
<view class="line">
<view>
<image src="../static/work/address.png" mode=""></image>
深圳·罗湖区·东门
</view>
<view>
<image src="../static/work/g.png" mode=""></image>
1-3年
</view>
<view>
<image src="../static/work/x.png" mode=""></image>
大专
</view>
</view>
<view class="">
<userHead/>
</view>
</view>
</view>
</template>
<script>
import userHead from '../components/user/userHead.vue'
export default {
components : {
userHead,
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.page{
background-color: #fff;
min-height: 100vh;
.box{
padding: 30rpx;
.title{
font-size: 34rpx;
font-weight: 900;
padding-bottom: 20rpx;
}
.price{
font-size: 30rpx;
font-weight: 900;
color: $uni-color;
}
.line{
display: flex;
font-size: 22rpx;
color: #666666;
margin-top: 30rpx;
image{
width: 30rpx;
height: 30rpx;
}
&>view{
margin-right: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save