hly
/
universal-wechat-uniapp-241007
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
前端-胡立永 6 months ago
parent
d4af4c2e1e
commit
a1a596b14c
22 changed files with 1950 additions and 98 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -2
      App.vue
  2. +1
    -1
      README.md
  3. +1
    -1
      api/api.js
  4. +1
    -1
      components/post/postList.vue
  5. +1
    -1
      manifest.json
  6. +24
    -0
      pages.json
  7. +5
    -1
      pages/index/activity.vue
  8. +5
    -1
      pages/index/center.vue
  9. +147
    -89
      pages/index/index.vue
  10. +99
    -0
      pages_order/components/list/workList/index.vue
  11. +123
    -0
      pages_order/components/list/workList/workItem.vue
  12. +57
    -0
      pages_order/components/list/workList/workListSwipe.vue
  13. +22
    -0
      pages_order/post/addPost.vue
  14. +137
    -0
      pages_order/post/postDetail.vue
  15. +22
    -0
      pages_order/recruit/addRecruit.vue
  16. +224
    -0
      pages_order/recruit/recruitDetail.vue
  17. +29
    -0
      pages_order/recruit/recruitList.vue
  18. +22
    -0
      pages_order/renting/addRenting.vue
  19. +216
    -0
      pages_order/renting/rentingDetail.vue
  20. +187
    -0
      pages_order/renting/rentingList.vue
  21. +616
    -0
      uni.css
  22. +8
    -1
      utils/utils.js

+ 3
- 2
App.vue View File

@ -12,8 +12,9 @@
<style>
/*每个页面公共css */
body{
background-color: #f7f7f7;
@import url("uni.css");
body,page{
background-color: #f3f3f3;
font-size: 30rpx;
}
.page{


+ 1
- 1
README.md View File

@ -1,4 +1,4 @@
#酒店桌布小程序
#瑶都万能墙
![](./doc/home.png)
![](./doc/home-s.png)


+ 1
- 1
api/api.js View File

@ -47,7 +47,7 @@ export function api(key, data, callback, loadingTitle) {
let req = config[key]
if (!req) {
console.error('无效key' + key);
console.error('无效key--------' + key);
return
}


+ 1
- 1
components/post/postList.vue View File

@ -1,7 +1,7 @@
<template>
<view class="postList">
<view class="item" v-for="(item, index) in list"
@click="$utils.navigateTo('/publish/postDetail?id=' + item.id)"
@click="$utils.navigateTo('/pages_order/post/postDetail?id=' + item.id)"
:key="index">
<image
:src="item.image &&


+ 1
- 1
manifest.json View File

@ -52,7 +52,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wxe7ae8cbe1673834c",
"appid" : "wxa4d29e67e8a58d38",
"setting" : {
"urlCheck" : false
},


+ 24
- 0
pages.json View File

@ -79,6 +79,30 @@
},
{
"path": "mine/help"
},
{
"path": "renting/rentingList"
},
{
"path": "renting/rentingDetail"
},
{
"path": "renting/addRenting"
},
{
"path": "recruit/recruitList"
},
{
"path": "recruit/addRecruit"
},
{
"path": "recruit/recruitDetail"
},
{
"path": "post/postDetail"
},
{
"path": "post/addPost"
}
]
}],


+ 5
- 1
pages/index/activity.vue View File

@ -21,7 +21,11 @@
},
data() {
return {
list : [
{
title : '这是一条活动',
}
]
}
},
methods: {


+ 5
- 1
pages/index/center.vue View File

@ -62,7 +62,11 @@
</view>
<view class="Content">
<uv-tabs :list="list" @click="click" lineColor="black" lineWidth="35" lineHeight="5" ></uv-tabs>
<uv-tabs :list="list" @click="click"
:activeStyle="{color : '#000', fontWeight : 900}"
lineColor="#00f"
lineHeight="8rpx"
lineWidth="50rpx"></uv-tabs>
</view>


+ 147
- 89
pages/index/index.vue View File

@ -13,7 +13,7 @@
</view>
<view class="dynamics">
13542动态|23212江华人
13542动态<text>|</text>23212江华人
</view>
</view>
@ -24,22 +24,30 @@
</view>
<view class="life">
<view class="mouse"
v-for="(item, index) in 4">
<view class="mouse" @click="menuClick(index)"
:key="index"
v-for="(item, index) in menu">
<view class="RentingAhouseimg">
<image
:src="`../../static/image/home/${index}.png`"
style="width: 90rpx;height: 90rpx;" mode=""></image>
</view>
<view class="RentingAhouse">
租房
{{ item.name }}
</view>
</view>
</view>
<view class="LabelOptions">
<uv-tabs :list="list" @click="click"></uv-tabs>
<uv-tabs :list="list"
:activeStyle="{color : '#000', fontWeight : 900}"
lineColor="#00f"
lineHeight="8rpx"
lineWidth="50rpx"
@click="tabsClick"></uv-tabs>
</view>
<view class="works"
v-for="(item, index) in 10">
<view class="works" :key="index" v-for="(item, index) in 10">
<view class="box">
<view class="headPortraitimg">
</view>
@ -61,7 +69,7 @@
官方认证
</view>
</view>
<view class="Times">
<view class="TimeMonth">
10-08
@ -80,12 +88,13 @@
漫时光蛋糕店私人蛋糕订制
</view>
<view class="">
</view>
<view class="Artworkimages">
<view class="wrokimg"
v-for="(img, i) in 10">
<image src="https://img2.baidu.com/it/u=731471589,1077533873&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" alt="" />
<view class="wrokimg" v-for="(img, i) in 3">
<image
src="https://img2.baidu.com/it/u=731471589,1077533873&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067"
alt="" />
</view>
</view>
<view class="bottom">
@ -96,12 +105,14 @@
231条评论
</view>
<view class="Leavingamessage">
<uv-icon
size="30rpx"
name="chat"></uv-icon>
<uv-icon size="30rpx" name="chat"></uv-icon>
</view>
</view>
</view>
<view class="createDetail">
</view>
<PrivacyAgreementPoup />
<tabber select="0" />
@ -138,38 +149,67 @@
name: '财经'
}, {
name: '手工'
}]
}],
menu : [
{
name : '租房',
},
{
name : '工作',
},
{
name : '活动',
},
{
name : '美食',
},
],
}
},
computed: {},
methods: {
click(item) {
tabsClick(item) {
console.log('item', item);
}
},
menuClick(index) {
console.log(index);
// 跳转页面
if (index == 0) {
uni.navigateTo({
url: '/pages_order/renting/rentingList'
})
} else if (index == 1) {
uni.navigateTo({
url: '/pages_order/recruit/recruitList'
})
} else if (index == 2) {
uni.reLaunch({
url: '/pages/index/activity'
})
}
},
}
}
</script>
<style scoped lang="scss">
.Headbackground {
padding-top: 200rpx;
display: flex;
align-items: center;
height: 400rpx;
background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));
.top {
display: flex;
color: white;
padding: 35rpx;
align-items: center;
.profilePicture {
width: 100rpx;
height: 100rpx;
background-color: greenyellow;
border-radius: 15rpx;
}
.UniversalWall {
@ -183,16 +223,18 @@
.dynamics {
margin-top: 20rpx;
font-size: 25rpx;
}
text {
margin: 0 20rpx;
}
}
}
.join {
width: 125rpx;
height: 50rpx;
background-color: #1671ff;
margin-top: 50rpx;
margin-left: 80rpx;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
@ -207,56 +249,63 @@
display: flex;
justify-content: space-around;
text-align: center;
flex-wrap: wrap;
.mouse {
.RentingAhouseimg {
display: flex;
justify-content: center;
text-align: center;
margin-bottom: 15rpx;
width: 125rpx;
height: 85rpx;
background-color: #ffffff;
}
}
}
.works {
margin: 24rpx;
margin: 40rpx 24rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 10rpx;
padding: 40rpx;
border-radius: 20rpx;
box-shadow: 0 0 6rpx 6rpx #00000011;
.box {
display: flex;
align-items: center;
.headPortraitimg {
width: 100rpx;
height: 100rpx;
background-color: greenyellow;
border-radius: 15rpx;
}
.YaoduUniversalWall{
.YaoduUniversalWall {
padding: 0rpx 10rpx;
.heide{
.heide {
display: flex;
justify-content: center;
align-items: center;
}
.inde{
.inde {
display: flex;
justify-content: center;
align-items: center;
padding: 0rpx 10rpx;
margin: 0rpx 5rpx;
font-size: 20rpx;
height: 30rpx;
font-size: 20rpx;
height: 30rpx;
color: white;
background-color:rgb(124,136,242);
background-color: rgb(124, 136, 242);
border-radius: 7rpx;
}
.authentication{
.authentication {
display: flex;
justify-content: center;
align-items: center;
@ -266,67 +315,76 @@
height: 34rpx;
padding: 0rpx 10rpx;
color: white;
background-color:#ffd036;
background-color: #ffd036;
border-radius: 7rpx;
}
.Times{
.Times {
display: flex;
padding: 5rpx 0rpx;
font-size: 20rpx;
.Month{
margin-top: 10rpx;
.Month {
margin: 0rpx 15rpx;
}
}
}
}
.personalInformation{
display: flex;
.inde{
font-size: 25rpx;
padding: 0rpx 8rpx;
}
.authentication{
font-size: 25rpx;
}
.personalInformation {
display: flex;
.inde {
font-size: 25rpx;
padding: 0rpx 8rpx;
}
.dynamics{
margin-top: 20rpx;
font-size: 20rpx;
font-weight: bold;
line-height: 35rpx;
letter-spacing: 5rpx;
.authentication {
font-size: 25rpx;
}
.Artworkimages{
display: flex;
flex-wrap: wrap;
.wrokimg{
margin: 10rpx;
image{
height: 190rpx;
width: 190rpx;
border-radius: 20rpx;
}
}
.dynamics {
margin-top: 20rpx;
font-size: 20rpx;
font-weight: bold;
line-height: 35rpx;
letter-spacing: 5rpx;
}
.Artworkimages {
display: flex;
flex-wrap: wrap;
.wrokimg {
margin: 10rpx;
image {
height: 190rpx;
width: 190rpx;
border-radius: 20rpx;
}
}
.bottom{
display: flex;
font-size: 20rpx;
.browse{
margin: 0rpx 30rpx;
color: rgb(132,132,132);
}
.Leavingamessage{
height: 20rpx;
width: 20rpx;
margin-left: auto;
}
}
.bottom {
display: flex;
font-size: 20rpx;
.browse {
margin: 0rpx 30rpx;
color: rgb(132, 132, 132);
}
.Leavingamessage {
height: 20rpx;
width: 20rpx;
margin-left: auto;
}
}
}
</style>

+ 99
- 0
pages_order/components/list/workList/index.vue View File

@ -0,0 +1,99 @@
<template>
<scroll-view
scroll-y="true"
:style="{height: height}"
@scrolltolower="loadMoreData">
<view class="workList">
<view
@click="$utils.navigateTo('/pages_order/recruit/recruitDetail?id=' + item.id)"
:key="index"
v-for="(item, index) in list">
<workItem :item="item"/>
</view>
</view>
</scroll-view>
</template>
<script>
import workItem from './workItem.vue'
export default {
components : {
workItem,
},
props : {
height : {
default : 'auto'
},
api : {
default : 'employeeQueryJobList'
}
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
},
total : 0,
list : [
{
title : 'Java工程师',
salaryLow : 9000,
salaryUp : 12000,
tab : '应届生、包吃',
workAddress : '长沙',
},
{
title : 'Java工程师',
salaryLow : 9000,
salaryUp : 12000,
tab : '应届生、包吃',
workAddress : '长沙',
},
{
title : 'Java工程师',
salaryLow : 9000,
salaryUp : 12000,
tab : '应届生、包吃',
workAddress : '长沙',
},
{
title : 'Java工程师',
salaryLow : 9000,
salaryUp : 12000,
tab : '应届生、包吃',
workAddress : '长沙',
},
],
}
},
methods: {
getData(){
if(uni.getStorageSync('token')){
this.queryParams.token = uni.getStorageSync('token')
}
this.$api(this.api, this.queryParams, res => {
if(res.code == 200){
this.list = res.result.records || res.result
this.total = res.result.total || res.result.length
}
})
},
loadMoreData(){
if(this.queryParams.pageSize <= this.list.length){
this.queryParams.pageSize += 10
this.getData()
}
},
}
}
</script>
<style scoped lang="scss">
.workList {
&>view{
margin: 20rpx;
}
}
</style>

+ 123
- 0
pages_order/components/list/workList/workItem.vue View File

@ -0,0 +1,123 @@
<template>
<view class="work-item">
<view class="top">
<view class="title">
{{ item.title }}
</view>
<view class="price"
v-if="item.salaryLow > 1000">
<text>
{{ (item.salaryLow / 1000).toFixed(0) }}
</text>
<text
v-if="item.salaryUp">
-{{ (item.salaryUp / 1000).toFixed(0) }}
</text>
K
</view>
<view class="price" v-else>
<text>{{ item.salaryLow }}</text>
<text
v-if="item.salaryUp">-{{ item.salaryUp }}</text>
</view>
</view>
<view class="tag-list">
<view
v-for="(t, i) in item.tab && item.tab.split('、')"
:key="i">
{{ t }}
</view>
</view>
<view class="bottom">
<view class="address">
<!-- <text>2.5km | 楚河汉区</text> -->
{{ item.workAddress }}
</view>
<view class="time">
<!-- 09月23日 16：20 -->
{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
</view>
<view class="phone"
@click.stop="callPhone">
<image src="/static/image/home/phone.png" mode=""></image>
联系老板
</view>
</view>
</view>
</template>
<script>
export default {
props : {
item : {
default : {}
}
},
data() {
return {
}
},
methods: {
callPhone(){
uni.makePhoneCall({
phoneNumber: this.item.phone,
success() {
console.log('安卓拨打成功');
},
fail() {
console.log('安卓拨打失败');
}
})
},
}
}
</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;
}
}
.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;
}
}
}
}
.tag-list{
display: flex;
flex-wrap: wrap;
}
.tag-list > view{
margin: 10rpx;
padding: 10rpx;
background-color: #EFF2F1;
font-size: 24rpx;
border-radius: 10rpx;
}
</style>

+ 57
- 0
pages_order/components/list/workList/workListSwipe.vue View File

@ -0,0 +1,57 @@
<template>
<uv-swipe-action>
<view
v-for="(item, index) in list"
class="item"
:key="index"
>
<uv-swipe-action-item
@click="e => clickSwipeAction(e, item)"
:options="options">
<workItem :item="item"/>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</template>
<script>
import workItem from './workItem.vue'
export default {
components : {
workItem
},
props : {
options : {
default : [
{
text: '删除',
style: {
backgroundColor: '#FA5A0A'
}
},
],
},
list : {
default : []
},
},
data() {
return {
}
},
methods: {
clickSwipeAction(e, item){
this.$emit('clickSwipeAction', {e, item})
},
}
}
</script>
<style scoped lang="scss">
.item{
margin: 20rpx;
border-radius: 20rpx;
overflow: hidden;
}
</style>

+ 22
- 0
pages_order/post/addPost.vue View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

+ 137
- 0
pages_order/post/postDetail.vue View File

@ -0,0 +1,137 @@
<template>
<view class="postDetail">
<navbar leftClick @leftClick="$utils.navigateBack" title="动态详情" />
<view class="swipe">
<uv-swiper :list="item.image &&
item.image.split(',')" indicator height="420rpx"></uv-swiper>
</view>
<view class="box">
<view class="title">
{{ item.title }}
</view>
<view class="createBy">
<view class="">
发布人：{{ item.userId }}
</view>
<view class="">
发布时间：{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
</view>
</view>
<view class="content">
<uv-parse :content="item.content"></uv-parse>
</view>
<!-- <view class="controls">
<contentControls
:type="2"
:up="isThumbs_up"
:down="isThumbs_down"
@loadData="getData"
:detail="item"/>
</view> -->
</view>
</view>
</template>
<script>
// import contentControls from '@/components/content/contentControls.vue'
export default {
components: {
// contentControls
},
data() {
return {
list: [
],
item: {},
isThumbs_up: undefined,//是否点赞
isThumbs_down: undefined,//是否踩
id : 0,
}
},
onLoad(options) {
// this.$route.query的参数
console.log(options)
this.id = options.id
},
onPullDownRefresh(){
this.getData()
},
onShow() {
this.getData()
},
onShareAppMessage(res) {
// if (res.from === 'button') {// 来自页面内分享按钮
// console.log(res.target)
// }
return {
title: this.item.title,
desc: this.item.content && this.item.content.slice(0, 30),
path: '/pages/publish/postDetail?id=' + this.id
}
},
methods: {
getData() {
this.$api('indexGetTrendsDetail', {
id : this.id
}, res => {
uni.stopPullDownRefresh()
if (res.code == 200) {
this.item = res.result.details
this.isThumbs_up = res.result.isThumbs_up//是否点赞
this.isThumbs_down = res.result.isThumbs_down//是否踩
}
})
},
}
}
</script>
<style lang="scss" scoped>
.postDetail {
.box {
padding: 20rpx;
width: 100vw;
.title {
font-size: 34rpx;
font-weight: 600;
color: #000;
}
.createBy {
display: flex;
margin-top: auto;
margin-bottom: 10rpx;
font-size: 24rpx;
margin-top: 20rpx;
color: #555;
&>view {
display: flex;
align-items: center;
justify-content: center;
padding-right: 20rpx;
}
}
.controls {
margin-top: 30rpx;
}
.content {
margin-top: 30rpx;
font-size: 28rpx;
}
}
}
</style>

+ 22
- 0
pages_order/recruit/addRecruit.vue View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

+ 224
- 0
pages_order/recruit/recruitDetail.vue View File

@ -0,0 +1,224 @@
<template>
<view class="page">
<navbar title="工作详情" leftClick @leftClick="$utils.navigateBack" />
<view class="box">
<view class="title">
{{ detail.title }}
</view>
<view class="price">
{{ detail.salaryLow }}-{{ detail.salaryUp }}元
</view>
<view class="line">
<!-- <view>
<image src="../static/work/address.png" mode=""></image>
{{ detail.workAge }}
</view> -->
<view>
<image src="../static/work/g.png" mode=""></image>
{{ detail.workAge }}
</view>
<view>
<image src="../static/work/x.png" mode=""></image>
{{ detail.qulification }}
</view>
</view>
<view class="line">
该职位位于{{ $dayjs(detail.createTime).format('YYYY-MM-DD') }}
</view>
<!-- <view class="userHead">
<userHead :headImage="detail.headImage"
:name="detail.name" :phoneCall="detail.phone"/>
</view> -->
<view class="address">
<view class="title2">
工作地址
</view>
<!--
深圳罗湖区深圳市百货广场大厦罗湖区百货广场大厦东深圳罗湖区深圳市百货广场大厦罗湖区百货广场大厦东
-->
<view class="line"
style="justify-content: space-between;">
{{ detail.workAddress }}
<uv-icon
size="30rpx"
color="666"
name="arrow-right"
></uv-icon>
</view>
<view class="tag-list">
<view>
距您14.6千米
</view>
</view>
</view>
<view class="info">
<view class="title2">
<text>职位详情</text>
<view>
<uv-icon
size="30rpx"
color="666"
name="star"
></uv-icon>
收藏
</view>
</view>
<view class="tag-list">
<view v-for="(t, i) in detail.tab && detail.tab.split('、')">
{{ t }}
</view>
</view>
<view
class="text"
v-html="text">
</view>
<!-- <view
class="text">
<uv-parse :content="detail.workDetail"></uv-parse>
</view> -->
</view>
</view>
</view>
</template>
<script>
let text = `岗位要求
1、全日制大专以上学历，艺术设计类相关专业;
2、两年以上平面、品牌、视觉设计等相关工作经验，能独立完成项目的设计工作，有 3C数码/个护健 康 类产品服务经验优先，有乙方工作经验佳;
3、具备一定的设计提案能力，能完整的呈现设计思路与创意，能清晰的表达设计逻辑与思考;
4、热爱设计，平面基本功扎实，拥有优良的审美与创意想法，对版式、色彩把控能力强;对工作富有责任心，具备团队沟通与协作能力;
5、精通 PS、AI、CDR 等平面设计软件，能独立完成日常平面设计工作内容，熟练使用 PPT/Keynote，能完成提案内容的材料美化工作。
`
export default {
components : {
},
data() {
return {
text : '',
id : 0,
detail : {
title : 'Java工程师',
salaryLow : 9000,
salaryUp : 12000,
tab : '应届生、包吃',
workAddress : '长沙',
},
collectionFlag : false,
}
},
onLoad({id}) {
this.id = id
},
onShow() {
this.text = this.$utils.stringFormatHtml(text)
this.getData()
},
methods: {
getData(){
let data = {
jobId : this.id
}
if(uni.getStorageSync('token')){
data.token = uni.getStorageSync('token')
}
this.$api('employeeQueryJobById', data, res => {
if(res.code == 200){
this.detail = res.result.employJob
this.collectionFlag = res.result.collectionFlag
}
})
},
}
}
</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;
}
.title2{
font-size: 28rpx;
font-weight: 900;
display: flex;
justify-content: space-between;
align-items: center;
view{
display: flex;
align-items: center;
justify-content: center;
}
}
.price{
font-size: 30rpx;
font-weight: 900;
color: $uni-color;
}
.line{
display: flex;
font-size: 24rpx;
color: #666666;
margin-top: 30rpx;
image{
width: 30rpx;
height: 30rpx;
}
&>view{
margin-right: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.userHead{
padding: 50rpx 0;
border-bottom: 1px solid #00000011;
}
.address{
padding: 30rpx 0;
.line{
margin-top: 20rpx;
}
}
.info{
.text{
font-size: 24rpx;
color: #666666;
line-height: 44rpx;
}
}
}
}
.tag-list{
display: flex;
flex-wrap: wrap;
}
.tag-list > view{
margin: 10rpx;
padding: 10rpx;
background-color: #EFF2F1;
font-size: 24rpx;
border-radius: 10rpx;
}
</style>

+ 29
- 0
pages_order/recruit/recruitList.vue View File

@ -0,0 +1,29 @@
<template>
<view>
<navbar title="招聘列表" leftClick @leftClick="$utils.navigateBack" />
<workList ref="workList"/>
</view>
</template>
<script>
import workList from '../components/list/workList/index.vue'
export default {
components : {
workList,
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
</style>

+ 22
- 0
pages_order/renting/addRenting.vue View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

+ 216
- 0
pages_order/renting/rentingDetail.vue View File

@ -0,0 +1,216 @@
<template>
<view>
<view style="width: 100vw; height: 553rpx;">
<image style="width: 100vw; height: 553rpx;"
src="https://pic1.ajkimg.com/display/anjuke/ea5773-%E8%83%9C%E9%80%B8%E5%9C%B0%E4%BA%A7/3b5e900e0ed231e6154759c8c885b6cc-800x650.jpg?frame=1"
mode="scaleToFill" />
</view>
<view
style="padding: 36rpx; background: #FFF; position: absolute; z-index: 1; width: calc(100vw - 72rpx); min-height: 780rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;margin-top: -20rpx;">
<view class="t0">2400元/月</view>
<view class="t1">整租·康卓新城 1室1卫</view>
<view class="t2">房源编号:HC42012205JC33V</view>
<view class="t2">今天10:33更新·浏览 168</view>
<view class="driver"></view>
<view class="flex-wrap xr">
<view class="sb-w4 h70">
<view class="font-a">南</view>
<view class="font-b">朝向</view>
</view>
<view class="sb-w4 h70">
<view class="font-a">60</view>
<view class="font-b">面积</view>
</view>
<view class="sb-w4 h70">
<view class="font-a">32层/32层</view>
<view class="font-b">楼层</view>
</view>
<view class="sb-w4 h70">
<view class="font-a">精装</view>
<view class="font-b">装修</view>
</view>
</view>
<view class="driver"></view>
<view class="line64">
<view class="flex-sb">
<view class="w50">
<span class="font-b">付款：</span>
<span class="font-c">季付</span>
</view>
<view class="w50">
<span class="font-b">电梯：</span>
<span class="font-c">有</span>
</view>
</view>
<view class="flex-sb">
<view class="w50">
<span class="font-b">交付：</span>
<span class="font-c">即时交付</span>
</view>
<view class="w50">
<span class="font-b">看房：</span>
<span class="font-c">随时可看</span>
</view>
</view>
<view class="flex-sb">
<view>
<span class="font-b">投诉：</span>
<span class="font-c">
<uni-icons type="phone" size="12" />
199 1888 8888
</span>
</view>
</view>
<view class="flex-sb">
<view>
<span class="font-b">小区：</span>
<span class="font-c">
<uni-icons type="paperplane" size="12" />
长岸江边新民小区
</span>
</view>
</view>
</view>
</view>
<view class="b-fiexd flex" style="height: 98rpx; z-index: 2;">
<view style="padding-left: 20rpx;">
<image src="/static/logo.png" class="radius80 test" />
</view>
<view style="padding: 12rpx 20rpx; width: 280rpx;">
<view class="font-d">廖吃翔</view>
<view class="font-b">新城国际花都</view>
</view>
<view style="padding: 20rpx" @click="clickShare()">
<uni-icons type="redo"></uni-icons>
</view>
<view class="d-btn" @click="clickService">
<span>打电话</span>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onShow() {
},
methods: {
clickShare() {
uni.share({
provider: 'weixin',
type: 5,
success: (res) => {
console.log(res);
}
});
},
clickService() {
uni.makePhoneCall({
phoneNumber: '10086',
});
},
}
}
</script>
<style scoped lang="scss">
.t0 {
font-weight: 1000;
font-size: 32rpx;
color: #FF0000;
line-height: 64rpx;
}
.t1 {
font-weight: bold;
font-size: 36rpx;
color: #3D3D3D;
line-height: 64rpx;
}
.t2 {
font-weight: 400;
font-size: 24rpx;
color: #ADADAD;
line-height: 42rpx;
}
.driver {
width: 100%;
height: 2rpx;
background-color: #D5D5D5;
opacity: .4;
margin: 20rpx auto;
}
.xr {
padding: 10rpx 0 20rpx;
}
.font-a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 30rpx;
color: #3D3D3D;
line-height: 46rpx;
text-align: center;
}
.font-b {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 24rpx;
color: #ADADAD;
line-height: 46rpx;
}
.font-d {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 800;
font-size: 28rpx;
color: #333;
line-height: 32rpx;
}
.font-c {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 24rpx;
color: #333;
line-height: 46rpx;
}
.d-btn {
width: 200rpx;
height: 72rpx;
line-height: 72rpx;
background: #4255E4;
border-radius: 36rpx 36rpx 36rpx 36rpx;
font-weight: 400;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
margin: 12rpx;
}
</style>

+ 187
- 0
pages_order/renting/rentingList.vue View File

@ -0,0 +1,187 @@
<template>
<view>
<navbar title="租房列表" leftClick @leftClick="$utils.navigateBack" />
<view class="flex"
style="padding: 30rpx;">
<!-- <view class="flex area">
<view>永州</view>
<uv-icon name="down" color="#333" size="30rpx" />
</view>
<view class="s-div b-relative">
</view> -->
<uv-search
bgColor="#fff"
@search="getData"
@custom="getData"
searchIconSize="30rpx"
placeholder="请输入搜索关键字..."
v-model="queryParams.title"></uv-search>
</view>
<view class="flex-wrap rx">
<view class="sb-w3">
<image src="/static/image/home/1.png" />
<view>居住</view>
</view>
<view class="sb-w3">
<image src="/static/2.png" />
<view>办公</view>
</view>
<view class="sb-w3">
<image src="/static/3.png" />
<view>做生意</view>
</view>
</view>
<view class="container">
<view class="re-empty font-c" style="display: none;">暂无数据</view>
<view class="card-item flex-sb" v-for="i in 10" @click="clickDetail()">
<view>
<image class="imx" src="/static/R01.png" />
</view>
<view style="width: calc(100% - 330rpx);">
<view class="t1">整租·康卓新城</view>
<view class="t2">1室1卫 ｜ 60m2 | 南</view>
<view class="flex">
<view class="t3">优选</view>
<view class="t3">低价</view>
</view>
<view class="t4">2400元/月</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyword : '',
}
},
methods: {
clickDetail(){
uni.navigateTo({
url: '/pages_order/renting/rentingDetail'
})
}
}
}
</script>
<style scoped lang="scss">
.container {
padding: 0 30rpx;
}
.area {
width: 154rpx;
line-height: 78rpx;
margin: 0 20rpx;
}
.s-div {
margin: 0 10rpx;
}
.seacher {
width: 486rpx;
height: 78rpx;
background: #F3F3F3;
border-radius: 44rpx 44rpx 44rpx 44rpx;
font-weight: 400;
font-size: 28rpx;
text-align: left;
font-style: normal;
text-transform: none;
padding: 0 0 0 80rpx;
}
.seacher-placeholder {
color: #BFBFBF;
}
.icon {
position: absolute;
left: 30rpx;
top: 18rpx;
}
.rx {
height: 214rpx;
width: 100%;
padding: 40rpx 0 0;
}
.sb-w3 image {
width: 100rpx;
height: 100rpx;
}
.sb-w3 view {
line-height: 52rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.card-item {
width: 690rpx;
height: 250rpx;
background: #FFFFFF;
box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin-bottom: 36rpx;
}
.imx {
width: 300rpx;
height: 250rpx;
}
.t1 {
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
line-height: 80rpx;
text-align: left;
}
.t2 {
font-weight: 400;
font-size: 20rpx;
color: #656565;
line-height: 20rpx;
text-align: left;
}
.t3 {
font-weight: 400;
font-size: 20rpx;
line-height: 32rpx;
color: #00B90C;
text-align: center;
height: 32rpx;
width: 60rpx;
margin: 15rpx 10rpx 0 0;
background: rgba(121, 255, 179, 0.21);
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
.t4 {
font-weight: 400;
font-size: 32rpx;
color: #FF0000;
line-height: 100rpx;
text-align: left;
}
</style>

+ 616
- 0
uni.css View File

@ -0,0 +1,616 @@
:root {
font-family: PingFang SC;
--re-color: #F40000;
--re-backage: #F6F6F6;
}
.re-fcolor{
color: #F40000 !important;
}
.test{
border: 1rpx dashed red;
}
.re-card{
background-color: #FFFFFF;
border-radius: 20rpx;
width: 690rpx;
min-height: 120rpx;
margin: 0 calc(50vw - 690rpx / 2);
margin-bottom: 30rpx;
position: relative;
}
.re-card-p32{
background-color: #FFFFFF;
border-radius: 20rpx;
width: calc(690rpx - 64rpx);
min-height: 120rpx;
margin: 0 calc(50vw - 690rpx / 2);
margin-bottom: 30rpx;
padding: 32rpx;
position: relative;
}
.re-from-line{
margin-bottom: 28rpx;
}
.re-from-label{
font-size: 28rpx;
font-weight: normal;
letter-spacing: 0px;
margin-bottom: 10rpx;
color: #1c1c1c;
}
.re-from-input{
box-sizing: border-box;
width: 630rpx;
height: 70rpx;
line-height: 70rpx;
border-radius: 10rpx;
padding-left: 70rpx;
border: 2rpx solid #CCCCCC;
font-size: 28rpx;
font-weight: normal;
letter-spacing: 0px;
color: #000;
}
.re-card-textarea{
width: 570rpx;
height: 152rpx;
border-radius: 8rpx;
padding: 20rpx;
background: #EEEEEE;
font-size: 26rpx;
line-height: normal;
letter-spacing: 0em;
color: #0d0d0d;
}
.re-from-icon {
position: absolute;
left: 26rpx;
top: 18rpx;
width: 32rpx;
height: 32rpx;
}
.re-card-context{
font-size: 24rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #9E9E9E;
line-height: 36rpx;
}
/*
.re-card-context span {
color: #F40000;
}
*/
.re-card-context label {
color: #F40000;
}
.re-card-show{
color: #9E9E9E;
font-size: 24rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
}
.re-card-select{
height: 72rpx;
line-height: 72rpx;
font-size: 28rpx;
color: #333333;;
}
.re-end-pand{
width: 100vw;
height: 88rpx;
opacity: 1;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
padding: 30rpx 0;
}
.re-end-pand button{
width: 620rpx;
height: 88rpx;
line-height: 88rpx;
border-radius: 10rpx;
background: #F40000;
color: #FFF;
text-align: center;
margin: 0 auto;
font-size: 30rpx;
font-weight: 400;
transition: all 0.2s ease-in-out;
}
.re-end-pand button:active{
transform: translateY(2rpx) translateX(1rpx);
}
.re-item{
width: calc(100% - 64rpx);
height: 120rpx;
line-height: 120rpx;
background-color: #FFF;
margin: 0 32rpx;
font-size: 32rpx;
color: #152748;
}
.re-empty {
position: absolute;
color: #888;
top: 50%;
text-align: center;
width: 100%;
}
/* 定制机型-微信单选框 */
radio .wx-radio-input{
border-color: #000000;
width: 32rpx !important;
height: 32rpx !important;
}
::v-deep .wx-radio-input.wx-radio-input-checked {
background-color: #F40000 !important;
border-color: #F40000 !important;
background-clip: content-box !important;
box-sizing: content-box;
}
::v-deep .wx-radio-input.wx-radio-input-checked::before {
/* transform: scale(0.7); */
}
/* radio[checked]{
background-color: #F40000 !important;
border-color: #F40000 !important;
} */
.font-title{
font-size: 36rpx;
font-weight: 500;
line-height: 36rpx;
letter-spacing: 0;
color: #333333;
}
.font-subtitle{
font-size: 32rpx;
font-weight: 500;
line-height: 36rpx;
letter-spacing: 0px;
color: #9E9E9E;
}
.font-botton{
font-size: 36rpx;
font-weight: bolder;
line-height: 36rpx;
color: #F40000;
}
.font-justify{
text-align: justify;
}
.re-radio{
transform: scale(0.7);
margin-left:-48rpx
}
.re-width2{
width:50%;
}
.re-width3{
width:33.33%;
}
.uni-checkbox-input-checked,
.uni-radio-input-checked,
.uni-switch-input-checked {
background-color:var(--re-color) !important;
border-color: var(--re-color) !important;
}
uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
border-color: var(--re-color);
}
.uni-radio-wrapper,
.uni-radio-input{
margin: 0;
}
.wx-checkbox-input-checked,
.wx-radio-input-checked,
.wx-switch-input-checked {
background-color: var(--re-color) !important;
border-color: var(--re-color) !important;
}
.wx-checkbox-input,
.wx-radio-input,
.wx-switch-input {
border-color: var(--re-color) !important;
}
.font-c{
color: #ccc;
font-size: 26rpx;
}
.w50{
width: 50%;
}
.h375{
width: 100%;
height: 375rpx;
}
.h238{
width: 238rpx;
height: 238rpx;
margin: auto;
}
.h220{
width: 100%;
height: 220rpx;
}
.h120 {
width: 100%;
height: 120rpx;
line-height: 120rpx;
}
.h70{
width: 100%;
height: 70rpx;
line-height: 70rpx;
}
.h22{
width: 100%;
height: 22rpx;
line-height: 22rpx;
}
.h32{
width: 100%;
height: 32rpx;
line-height: 32rpx;
}
.h44{
width: 100%;
height: 44rpx;
line-height: 44rpx;
}
.h88{
width: 100%;
height: 88rpx;
line-height: 88rpx;
}
.mb120{
margin-bottom: 120rpx;
}
.mb88{
margin-bottom: 88rpx;
}
.mb80{
margin-bottom: 80rpx;
}
.mb40{
margin-bottom: 40rpx;
}
.mb22{
margin-bottom: 22rpx;
}
.mb20{
margin-bottom: 20rpx;
}
.mt20{
margin-top: 20rpx;
}
.mt22{
margin-top: 22rpx;
}
.mt32{
margin-top: 32rpx;
}
.mt56{
margin-top: 56rpx;
}
.mt100{
margin-top: 100rpx;
}
.mt40{
margin-top: 40rpx;
}
.m120{
margin-top: 120rpx;
margin-bottom: 120rpx;
}
.mr5{
margin-right: 5rpx;
}
.mr10{
margin-right: 10rpx;
}
.mr20{
margin-right: 20rpx;
}
.m5{
margin-top: 5rpx;
margin-bottom: 5rpx;
}
.m10{
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.m20{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.m36{
margin-top: 36rpx;
margin-bottom: 36rpx;
}
.pt10{
padding-top: 10rpx;
}
.pb10{
padding-bottom: 10rpx;
}
.pb20{
padding-bottom: 20rpx;
}
.pb120{
padding-bottom: 120rpx;
}
.m10auto{
margin: 10 auto;
}
.m20auto{
margin: 20 auto;
}
.flex{
display: flex;
}
.flex-sb{
display: flex;
justify-content: space-between;
}
.flex-wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.flex-reverse{
display: flex;
flex-direction: row-reverse;
}
.sb-w2{
width: calc(100% / 2);
text-align: center;
}
.sb-w3{
width: calc(100% / 3);
text-align: center;
}
.sb-w4{
width: calc(100% / 4);
text-align: center;
}
.sb-w5{
width: calc(100% / 5);
text-align: center;
}
.sb-w8{
width: calc(100% / 8);
text-align: center;
}
.line36{
line-height: 36rpx;
font-size: 30rpx;
}
.line42{
line-height: 42rpx;
font-size: 32rpx;
}
.line64{
line-height: 64rpx;
font-size: 36rpx;
}
.line72{
line-height: 72rpx;
font-size: 42rpx;
}
.bottom-line{
border-bottom: 2rpx solid #eee;
}
.bottom-line:last-child{
border-bottom: none;
}
.square20{
width: 20rpx;
height: 20rpx;
}
.square32{
width: 32rpx;
height: 32rpx;
}
.square40{
width: 40rpx;
height: 40rpx;
}
.square80{
width: 80rpx;
height: 80rpx;
}
.square120{
width: 120rpx;
height: 120rpx;
}
.square256{
width: 256rpx;
height: 256rpx;
}
.square375{
width: 375rpx;
height: 375rpx;
}
.garden{
overflow: hidden;
border-radius: 50%;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.4);
}
.b-fiexd{
min-height: 120rpx;
width: calc(100vw - 40rpx);
padding: 0 20rpx;
position: fixed;
left: 0;
bottom: 0;
box-shadow: -20rpx 10rpx 10rpx #000;
background-color: #ffffff;
}
.b-relative{
position: relative;
}
.b-button{
background-color: 10rpx;
height:72rpx;
line-height: 72rpx;
text-align:center;
color: #ffffff;
width: 376rpx;
background-color: #fe8a00;
border-radius: 10rpx;
margin: 24rpx auto;
}
/**
* 滑动定位
*/
.bg-white{
background-color: white;
}
.box-shadow-gray{
box-shadow: #ccc 0 0rpx 40rpx 0.1rpx;
}
.box-shadow-light{
box-shadow: #ccc 0 1rpx 8rpx;
}
.sticky{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
transition: background-color 0.3s;
}
/**
* 模拟药丸
*/
.back-feixd {
background-color: #fff8ef;
border: 1rpx solid #dbc9ba;
border-radius: 50%;
width: 60rpx;
height: 60rpx;
position: fixed;
top: 100rpx;
left: 12rpx;
z-index: 101;
line-height: 60rpx;
text-align: center;
opacity: .7;
}
/**
* 搜索
*/
.s-input {
padding: 16rpx 40rpx;
margin: 0 20rpx;
width: 590rpx;
border-radius: 40rpx;
height: 40rpx;
line-height: 40rpx;
border: 1rpx solid #ccc;
color: #0d0d0d;
font-size: 28rpx;
}
.s-input-line {
height: 72rpx;
line-height: 72rpx;
margin: 0 78rpx;
color: #666;
font-size: 28rpx;
}
/**
* 超出隐藏
*/
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/**
* 圆形图片
*/
.radius80{
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
/**
* 隐藏滚动条
*/
/* env(safe-area-inset-top) */
.driver{
width: 100%;
height: 2rpx;
background-color: #D5D5D5;
opacity: .4;
margin: 20rpx auto;
}

+ 8
- 1
utils/utils.js View File

@ -144,6 +144,12 @@ export function copyText(content) {
})
}
// 将字符串中的文本格式化html
export function stringFormatHtml(str){
return str && str.replace(/\n/gi, '<br>')
.replace(/ /gi, ' ')
}
function params(url){
if(typeof url == 'object'){
return url
@ -185,5 +191,6 @@ export default {
navigateTo,
navigateBack,
redirectTo,
copyText
copyText,
stringFormatHtml
}

Write Preview
Loading…
Cancel
Save