wangzimeng
f5ab9a74e4
2、发布的认证信息弹框的居中 3、首页顶部的搜索框宽度加长，全国缩小 4、个人中心：六个行设置的间距变为40；登录弹框的宽度缩小；未认证和已认证的内间距 5、发布页面的底部按钮的高度调整 6、招租详情的底部按钮栏的高度调整
655 lines
15 KiB
Vue
655 lines
15 KiB
Vue
<template>
|
||
<s-layout title="我的发布">
|
||
<view class="container">
|
||
<!-- tabs页签 -->
|
||
<view class="tabs-box">
|
||
<su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="currentTab"></su-tabs>
|
||
</view>
|
||
|
||
<!-- 推荐列表 -->
|
||
<scroll-view @scrolltolower="onScrolltolower" :refresher-enabled="true" :refresher-triggered="homrS"
|
||
@refresherrefresh="onS" scroll-y="true" class="flex align-items"
|
||
style="height: 85vh;box-sizing: border-box;">
|
||
<view class="recommend-box">
|
||
<view class="rrecommList" v-for="(item,index) in rentList" :key="index" @click="toDetail(item)">
|
||
<!-- 通过的 -->
|
||
<view class="reListItem" v-if="item.status == 1">
|
||
<view class="reItemCon">
|
||
<!-- 左侧图片 -->
|
||
<view class="listItem-images">
|
||
<image class="iamges-mainImg" :src="item.images[0]" mode="aspectFill"></image>
|
||
</view>
|
||
<!-- 右侧内容 -->
|
||
<view class="listItem-contents">
|
||
<view class="title2" style="margin-bottom: 20rpx;">
|
||
{{item.title}}
|
||
</view>
|
||
<scroll-view class="score-box">
|
||
<view class="fs11 flex cate">
|
||
<view class="cate-e" v-for="(e,i) in item.cate" :key="i">
|
||
<view v-show="e" class="status-tag " style="margin-right: 20rpx;">{{e}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="cons-third">
|
||
<view style="display: flex;">
|
||
<image style="width: 24rpx;height: 24rpx;"
|
||
src="https://jiangxiaoxian.0rui.cn/locationList.png"></image>
|
||
<view class="title3" style="margin-left: 10rpx;">{{item.address_city_text}}
|
||
</view>
|
||
</view>
|
||
<view class="title3">{{item.release_time_text}}</view>
|
||
<view style="display: flex;">
|
||
<image style="width: 24rpx;height: 24rpx;"
|
||
src="https://jiangxiaoxian.0rui.cn/eye.png"></image>
|
||
<view class="title3" style="margin-left: 10rpx;">{{item.views}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
style="background-color: #f7f7f7;height: 1rpx;width: 630rpx;border-radius: 12rpx;margin: 30rpx 0;">
|
||
</view>
|
||
<view class="reItemBtn">
|
||
<view class="editItemBtn" @click.stop="rentEdit(item)">修改信息</view>
|
||
<view class="cancelItemBtn" @click.stop="rentCancel(item)">取消发布</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 待审核的的 -->
|
||
<view class="pandListItem" v-if="item.status == 0">
|
||
<view class="pandItemCon">
|
||
<!-- 左侧图片 -->
|
||
<view class="listItem-images">
|
||
<image v-if="item.status == 0"
|
||
style="width: 151rpx;height: 210rpx;z-index: 100;position: relative;top: 78rpx;right: 15rpx;"
|
||
src="https://jiangxiaoxian.0rui.cn/releasePanding.png"></image>
|
||
<image class="iamges-mainImg" :src="item.images[0]" mode="aspectFill"></image>
|
||
</view>
|
||
<!-- 右侧内容 -->
|
||
<view class="listItem-contents">
|
||
<view class="title2" style="margin-bottom: 20rpx;">
|
||
{{item.title}}
|
||
</view>
|
||
<scroll-view class="score-box">
|
||
<view class="fs11 flex cate">
|
||
<view class="cate-e" v-for="(e,i) in item.cate" :key="i">
|
||
<view v-show="e" class="status-tag " style="margin-right: 20rpx;">{{e}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="cons-third">
|
||
<view style="display: flex;">
|
||
<image style="width: 24rpx;height: 24rpx;"
|
||
src="https://jiangxiaoxian.0rui.cn/locationList.png"></image>
|
||
<view class="title3" style="margin-left: 10rpx;">{{item.address_city_text}}
|
||
</view>
|
||
</view>
|
||
<view class="title3">{{item.release_time_text}}</view>
|
||
<view style="display: flex;">
|
||
<image style="width: 24rpx;height: 24rpx;"
|
||
src="https://jiangxiaoxian.0rui.cn/eye.png"></image>
|
||
<view class="title3" style="margin-left: 10rpx;">{{item.views}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view
|
||
style="background-color: #f7f7f7;height: 1rpx;width: 630rpx;border-radius: 12rpx;margin: 30rpx 0;">
|
||
</view>
|
||
<view class="reItemBtn">
|
||
<view class="editItemBtn" @click.stop="rentEdit(item)">修改信息</view>
|
||
<view class="cancelItemBtn" @click.stop="rentCancel(item)">取消发布</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 未通过的 -->
|
||
<view class="unListItem" v-if="item.status == 2">
|
||
<view class="unItemCon">
|
||
<!-- 左侧图片 -->
|
||
<view class="listItem-images">
|
||
<image v-if="item.status == 2"
|
||
style="width: 151rpx;height: 210rpx;z-index: 100;position: relative;top: 78rpx;right: 15rpx;"
|
||
src="https://jiangxiaoxian.0rui.cn/releaseFail.png"></image>
|
||
<image class="iamges-mainImg" :src="item.images[0]" mode="aspectFill"></image>
|
||
</view>
|
||
<!-- 右侧内容 -->
|
||
<view class="listItem-contents">
|
||
<view class="title2" style="margin-bottom: 20rpx;">
|
||
{{item.title}}
|
||
</view>
|
||
<scroll-view class="score-box">
|
||
<view class="fs11 flex cate">
|
||
<view class="cate-e" v-for="(e,i) in item.cate" :key="i">
|
||
<view v-show="e" class="status-tag " style="margin-right: 20rpx;">{{e}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="cons-third">
|
||
<view style="display: flex;">
|
||
<image style="width: 24rpx;height: 24rpx;"
|
||
src="https://jiangxiaoxian.0rui.cn/locationList.png"></image>
|
||
<view class="title3" style="margin-left: 10rpx;">{{item.address_city_text}}
|
||
</view>
|
||
</view>
|
||
<view class="title3">{{item.release_time_text}}</view>
|
||
<view style="display: flex;">
|
||
<image style="width: 24rpx;height: 24rpx;"
|
||
src="https://jiangxiaoxian.0rui.cn/eye.png"></image>
|
||
<view class="title3" style="margin-left: 10rpx;">{{item.views}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="failReasonBox">
|
||
<view class="titltFail">驳回原因：{{item.reason}}</view>
|
||
</view>
|
||
<view class="reItemBtn">
|
||
<view class="editItemBtn" @click.stop="rentEdit(item)">修改信息</view>
|
||
<view class="cancelItemBtn" @click.stop="rentCancel(item)">取消发布</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import sheep from '@/sheep';
|
||
import {
|
||
onLoad,
|
||
onShow,
|
||
onReachBottom
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
ref,
|
||
reactive
|
||
} from 'vue';
|
||
import _ from 'lodash';
|
||
|
||
const listQuery = ref({
|
||
page: 1,
|
||
limit: 10,
|
||
list_rows: 10,
|
||
status: '',
|
||
})
|
||
const tabMaps = [{
|
||
name: '全部',
|
||
value: '3',
|
||
},
|
||
{
|
||
name: '待审核',
|
||
value: '0',
|
||
},
|
||
{
|
||
name: '未通过',
|
||
value: '2',
|
||
},
|
||
{
|
||
name: '已发布',
|
||
value: '1',
|
||
},
|
||
];
|
||
const currentTab = ref(0)
|
||
const rentList = ref([])
|
||
const rentCount = ref(0)
|
||
//切换tabs
|
||
function onChange(e) {
|
||
console.log('onChange', e);
|
||
currentTab.value = e.index
|
||
console.log('切换tabs', currentTab.value);
|
||
if (currentTab.value == 0) {
|
||
listQuery.value.status = ''
|
||
} else {
|
||
listQuery.value.status = tabMaps[currentTab.value].value
|
||
}
|
||
rentList.value = []
|
||
getList();
|
||
}
|
||
|
||
//招租列表
|
||
async function getList() {
|
||
const res = await sheep.$api.rent.rentlist({
|
||
page: listQuery.value.page,
|
||
limit: listQuery.value.limit,
|
||
order: 'normal',
|
||
status: listQuery.value.status,
|
||
my: 1,
|
||
});
|
||
console.log('getList', res);
|
||
|
||
if (res.data && res.data.list) {
|
||
// rentList.value = res.data.list;
|
||
rentList.value = [...rentList.value, ...res.data.list];
|
||
rentCount.value = res.data.count;
|
||
rentList.value = rentList.value.map(item => {
|
||
const newItem = {
|
||
...item
|
||
};
|
||
if (newItem.release_time_text) {
|
||
newItem.release_time_text = newItem.release_time_text.substring(0, 10);
|
||
}
|
||
|
||
return newItem;
|
||
});
|
||
} else {
|
||
rentList.value = [];
|
||
}
|
||
console.log('getList', rentList.value, rentCount.value);
|
||
}
|
||
//加载更多
|
||
function onScrolltolower() {
|
||
if (rentList.value.length < rentCount.value) {
|
||
listQuery.value.page += 1;
|
||
getList();
|
||
}
|
||
}
|
||
//下拉刷新
|
||
function onS() {
|
||
homrS.value = true
|
||
listQuery.value.keywords = ''
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
resetLists();
|
||
|
||
setTimeout(() => {
|
||
homrS.value = false;
|
||
uni.hideLoading();
|
||
uni.stopPullDownRefresh();
|
||
}, 2000)
|
||
}
|
||
// 重置列表
|
||
function resetLists() {
|
||
listQuery.value.page = 1;
|
||
rentList.value = [];
|
||
getList();
|
||
}
|
||
//详情
|
||
function toDetail(e) {
|
||
console.log('跳转详情', e);
|
||
uni.navigateTo({
|
||
url: '/pages/canteenRent/rentDetail?id=' + e.id
|
||
})
|
||
}
|
||
//修改
|
||
function rentEdit(item) {
|
||
console.log('修改招租',item);
|
||
uni.navigateTo({
|
||
url: `/pages/canteenRent/rentEdit?id=${item.id}`
|
||
})
|
||
}
|
||
//取消
|
||
function rentCancel(item) {
|
||
console.log('取消招租',item.id);
|
||
const ids = item.id
|
||
console.log('取消招租',ids);
|
||
sheep.$api.rent.delRent({ids:item.id}).then((res) => {
|
||
if(res.code === 1) {
|
||
console.log('delete:',res);
|
||
uni.showToast({
|
||
title: '取消成功',
|
||
icon: 'none'
|
||
})
|
||
rentList.value = []
|
||
getList()
|
||
}else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
getList()
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.title {
|
||
color: #3d3d3d;
|
||
font-size: 34rpx;
|
||
font-weight: 800;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.intro {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
line-height: 24rpx;
|
||
}
|
||
|
||
.title2 {
|
||
color: #3d3d3d;
|
||
font-size: 30rpx;
|
||
font-weight: 800;
|
||
line-height: 42rpx;
|
||
}
|
||
|
||
.title3 {
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 22rpx;
|
||
}
|
||
|
||
.titltFail {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
line-height: 28rpx;
|
||
color: #3d3d3d;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
}
|
||
|
||
.container {
|
||
|
||
.recommend-box {
|
||
padding: 0rpx 30rpx;
|
||
|
||
.rrecommList {
|
||
margin-top: 30rpx;
|
||
|
||
.reListItem {
|
||
background-color: #ffffff;
|
||
width: 640rpx;
|
||
height: 320rpx;
|
||
padding: 30rpx;
|
||
// display: block;
|
||
// justify-content: ;
|
||
// align-items: center;
|
||
border-radius: 18rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.reItemCon {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.listItem-images {
|
||
display: grid;
|
||
justify-content: flex-start;
|
||
|
||
.iamges-mainImg {
|
||
width: 190rpx;
|
||
height: 190rpx;
|
||
position: relative;
|
||
right: 0rpx;
|
||
bottom: 0rpx;
|
||
z-index: 1;
|
||
|
||
}
|
||
}
|
||
|
||
.listItem-contents {
|
||
margin-left: 20rpx;
|
||
|
||
.score-box {
|
||
display: flex;
|
||
|
||
.cate {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.cate-e {
|
||
|
||
.status-tag {
|
||
padding: 5rpx 15rpx;
|
||
border-radius: 5rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
line-height: 22rpx;
|
||
background-color: rgba(247, 97, 0, 0.2);
|
||
|
||
// opacity: 0.2;
|
||
color: #F76100;
|
||
//flex-shrink: 0
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
|
||
.cons-third {
|
||
width: 428rpx;
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
.unListItem {
|
||
background-color: #ffffff;
|
||
width: 640rpx;
|
||
height: 440rpx;
|
||
padding: 30rpx;
|
||
border-radius: 18rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.unItemCon {
|
||
width: 100%;
|
||
height: 190rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.listItem-images {
|
||
display: grid;
|
||
justify-content: flex-start;
|
||
|
||
.iamges-mainImg {
|
||
width: 190rpx;
|
||
height: 190rpx;
|
||
position: relative;
|
||
right: 0rpx;
|
||
bottom: 108rpx;
|
||
z-index: 1;
|
||
|
||
}
|
||
}
|
||
|
||
.listItem-contents {
|
||
margin-left: 20rpx;
|
||
|
||
.score-box {
|
||
display: flex;
|
||
|
||
.cate {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.cate-e {
|
||
|
||
.status-tag {
|
||
padding: 5rpx 15rpx;
|
||
border-radius: 5rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
line-height: 22rpx;
|
||
background-color: rgba(247, 97, 0, 0.2);
|
||
|
||
// opacity: 0.2;
|
||
color: #F76100;
|
||
//flex-shrink: 0
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
|
||
.cons-third {
|
||
width: 428rpx;
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.failReasonBox {
|
||
height: 69rpx;
|
||
width: 570rpx;
|
||
margin: 30rpx 0;
|
||
padding: 30rpx;
|
||
background-color: #f7f7f7;
|
||
border-radius: 12rpx;
|
||
overflow-wrap: break-word;
|
||
word-break: break-word;
|
||
white-space: normal;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.pandListItem {
|
||
background-color: #ffffff;
|
||
width: 640rpx;
|
||
height: 320rpx;
|
||
padding: 30rpx;
|
||
border-radius: 18rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.pandItemCon {
|
||
width: 100%;
|
||
height: 190rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.listItem-images {
|
||
display: grid;
|
||
justify-content: flex-start;
|
||
|
||
.iamges-mainImg {
|
||
width: 190rpx;
|
||
height: 190rpx;
|
||
position: relative;
|
||
right: 0rpx;
|
||
bottom: 108rpx;
|
||
z-index: 1;
|
||
|
||
}
|
||
}
|
||
|
||
.listItem-contents {
|
||
margin-left: 20rpx;
|
||
|
||
.score-box {
|
||
display: flex;
|
||
|
||
.cate {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.cate-e {
|
||
|
||
.status-tag {
|
||
padding: 5rpx 15rpx;
|
||
border-radius: 5rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
line-height: 22rpx;
|
||
background-color: rgba(247, 97, 0, 0.2);
|
||
|
||
// opacity: 0.2;
|
||
color: #F76100;
|
||
//flex-shrink: 0
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
|
||
.cons-third {
|
||
width: 428rpx;
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.reItemBtn {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
.editItemBtn {
|
||
width: 189rpx;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
border-radius: 128rpx;
|
||
border: 1rpx solid #333333;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 20rpx;
|
||
}
|
||
|
||
.cancelItemBtn {
|
||
width: 189rpx;
|
||
height: 70rpx;
|
||
background: linear-gradient(to right, #FFBD25, #FCCA58);
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
border-radius: 128rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 20rpx;
|
||
}
|
||
|
||
}
|
||
</style> |