wangzimeng/zhongtuanCatering
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、首页的平台推荐的列表对接，和顶部省市搜索的实现

Browse Source 
2、个人首页的我的积分（采用原版的）和意见反馈（采用原版的）跳转和页面调整
3、首页的食堂招租页面的搜索功能实现
This commit is contained in:
wangzimeng 2025-07-23 15:54:47 +08:00
parent 414da254b2
commit 54f0643445
6 changed files with 558 additions and 411 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
pages/canteenRent/rentList.vue
View File

@ -7,27 +7,26 @@
<view class="locTop"> <view class="locTop">
<view class="locTop-right"> <view class="locTop-right">
<uni-section style="border-radius: 192rpx;padding: 0;" type="line"> <uni-section style="border-radius: 192rpx;padding: 0;" type="line">
<uni-search-bar :value="listQuery.keywords" style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息" <uni-search-bar v-model="listQuery.keywords" style="border-radius: 192rpx;" radius="23"
bgColor="#EEEEEE" clearButton="none" cancelButton="none" @confirm="searchRent" placeholder="搜索您需要的信息" bgColor="#EEEEEE" clearButton="none" cancelButton="none"
@blur="searchRent1" /> @confirm="searchRent" />
</uni-section> </uni-section>
<!-- <uni-search-bar></uni-search-bar> @confirm="search"--> <!-- @blur="searchRent1"-->
</view> </view>
<view class="locTop-left"> <view class="locTop-left">
<view class="locTop-left-left" @click="state.showRegion = true"> <view class="locTop-left-left" @click="state.showRegion = true">
<view <view @click="state.showRegion = true"
style="font-size: 28rpx;font-weight: 400;line-height: 32rpx;color: #999999;width: auto;"> style="font-size: 28rpx;font-weight: 400;line-height: 32rpx;color: #999999;max-width: 140rpx;">
{{state.model.city_name ? proCity:'地区' }} {{state.model.city_name ? state.model.city_name:'全国' }}
</view> </view>
<image style="width: 27rpx;height: 27rpx;margin-left: 10rpx;" <image @click="state.showRegion = true"
style="width: 27rpx;height: 27rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rentMore.png" mode=""></image> src="https://jiangxiaoxian.0rui.cn/rentMore.png" mode=""></image>
</view> </view>
<picker mode="selector" :value="tagList" :range="tagList" range-key="dictLabel" <picker mode="selector" :value="tagList.id" :range="tagList" range-key="name"
@change="onChangeTag"> @change="onChangeTag">
<view class="picker" <view class="picker" style="width: auto; position: relative;display: flex;justify-content: flex-start;align-items: center;">
style="width: auto; position: relative;font-size: 28rpx;font-weight: 400;color: #999999;line-height: 32rpx;"> <view style="max-width: 110rpx; position: relative;font-size: 28rpx;font-weight: 400;color: #999999;line-height: 32rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{dictLabel || '标签'}}</view>
{{dictLabel || '标签'}}
<image style="width: 27rpx;height: 27rpx;margin-left: 6rpx;" <image style="width: 27rpx;height: 27rpx;margin-left: 6rpx;"
src="https://jiangxiaoxian.0rui.cn/rentMore.png" mode=""></image> src="https://jiangxiaoxian.0rui.cn/rentMore.png" mode=""></image>
</view> </view>
@ -55,7 +54,18 @@
<!-- 右侧内容 --> <!-- 右侧内容 -->
<view class="listItem-contents"> <view class="listItem-contents">
<view class="title2" style="margin-bottom: 20rpx;">{{item.platform_title}}</view> <view class="title2" style="margin-bottom: 20rpx;">{{item.platform_title}}</view>
<scroll-view class="">标签</scroll-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>
<!-- <text v-show="item.cate[1]"
class="status-tag" style="margin-right: 20rpx;">{{item.cate[1]}}</text>
<text v-show="item.cate[2]"
class="status-tag">{{item.cate[2]}}</text> -->
</view>
</scroll-view>
<view class="cons-third"> <view class="cons-third">
<view style="display: flex;"> <view style="display: flex;">
<image style="width: 24rpx;height: 24rpx;" <image style="width: 24rpx;height: 24rpx;"
@ -79,16 +89,7 @@
<!-- 省市区弹窗 --> <!-- 省市区弹窗 -->
<su-regionCity-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm"> <su-regionCity-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm">
</su-regionCity-picker> </su-regionCity-picker>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadmore"
/>
</s-layout> </s-layout>
</template> </template>
@ -123,10 +124,12 @@
address1: null, address1: null,
categoryId: null, categoryId: null,
tags: '', tags: '',
cate_ids: '',
area: null, area: null,
city: null, city: null,
province: null,
district: null, district: null,
keywords:null, keywords: null,
// district: '', // district: '',
}) })
@ -135,18 +138,11 @@
onLoad(() => { onLoad(() => {
getList(); getList();
getTagList()
}) })
onShow(() => {}) onShow(() => {})
// 数据
const pagination = {
data: [],
current_page: 1,
total: 1,
last_page: 1,
};
const state = reactive({ const state = reactive({
showRegion: false, showRegion: false,
model: { model: {
@ -162,21 +158,14 @@
address, address,
region, region,
}, },
currentTab: 0,
pagination: {
data: [],
current_page: 1,
total: 1,
last_page: 1,
},
loadStatus: '', loadStatus: '',
type: '', type: '',
}); });
const proCity = ref(''); //省市页面显示 const proCity = ref(''); //省市页面显示
function searchRent() { function searchRent() {
console.log('搜索'); console.log('搜索',listQuery.value.keywords);
getList()
} }
const onRegionConfirm = (e) => { const onRegionConfirm = (e) => {
@ -186,76 +175,90 @@
...state.model, ...state.model,
...e, ...e,
}; };
// proCity.value = state.model.province_name + " " + state.model.city_name
proCity.value = state.model.province_name + " " + state.model.city_name
console.log('onRegionConfirm33', state.model, proCity.value); console.log('onRegionConfirm33', state.model, proCity.value);
listQuery.value.province = state.model.province_id
listQuery.value.city = state.model.city_id
getList()
state.showRegion = false; state.showRegion = false;
}; };
/* 标签 */ /* 标签 */
// const getTagList = () => { const tagShowList = ref([])
// const obj = [{ async function getTagList() {
// dictLabel:'全部', const obj = [{
// dictCode:'' name: '全部',
// }] id: ''
// getTag(listQuery.value).then(res => { }]
// tagList.value = obj.concat(res.data) const res = await sheep.$api.rent.tagsList({});
// total.value = res.total if (res.code == 1) {
// }) tagList.value = obj.concat(res.data.list)
// } tagShowList.value = tagList.value.map(({
name,
id
}) => ({
name,
id
}));
console.log('tagList', tagList.value, tagShowList.value);
}
}
/**选择标签 */ /**选择标签 */
// function onChangeTag(e) { function onChangeTag(e) {
// const value = e.detail.value; const value = e.detail.value;
// listQuery.value.tags = tagList.value[e.detail.value].dictLabel; listQuery.value.cate_ids = tagList.value[e.detail.value].id;
// dictLabel.value = tagList.value[e.detail.value].dictLabel; dictLabel.value = tagList.value[e.detail.value].name;
// console.log('标签',listQuery.value); console.log('标签', listQuery.value);
// getList(listQuery.value); getList(listQuery.value);
// } }
const rentList = ref([]) const rentList = ref([])
//招租列表 //招租列表
async function getList() { async function getList() {
// state.loadStatus = 'loading'; const res = await sheep.$api.rent.rentlist({
let res = await sheep.$api.rent.rentlist({ keywords: listQuery.value.keywords,
keywords: listQuery.keywords, page: listQuery.value.page,
page:listQuery.page, limit: listQuery.value.limit,
limit: listQuery.limit, cate_ids: listQuery.value.cate_ids,
my:1, my: 1,
order:'normal', order: 'normal',
status:1, status: 1,
province: listQuery.value.province,
city: listQuery.value.city,
}); });
console.log('getList',res); console.log('getList', res);
if (res.code === 1) {
rentList.value = res.data.list if (res.data && res.data.list) {
for(let i = 0;i<rentList.value.length;i++) { rentList.value = res.data.list;
rentList.value[i].release_time_text = rentList.value[i].release_time_text.split(' ')[0]
} // Safely process each item
console.log('rentList', rentList.value); rentList.value = rentList.value.map(item => {
// Create a new object with all properties from the original item
const newItem = {
...item
};
// Only process release_time_text if it exists
if (newItem.release_time_text) {
newItem.release_time_text = newItem.release_time_text.substring(0, 10);
}
return newItem;
});
} else {
// Handle case where data is not in expected format
rentList.value = [];
} }
// if (state.pagination.current_page < state.pagination.last_page) {
// state.loadStatus = 'more'; // rentList.value = res.data.list;
// } else { // for(let i=0;i<rentList.value.length;i++){
// state.loadStatus = 'noMore'; // rentList.value[i].release_time_text = rentList.value[i].release_time_text.substring(0, 10)
// } // }
console.log('getList', rentList.value);
} }
// 加载更多
function loadmore() {
if (state.loadStatus !== 'noMore') {
if (state.currentTab == 0) {
getList(state.pagination.current_page + 1);
} else {
getList(state.pagination.current_page + 1);
}
}
}
onReachBottom(() => {
// loadmore();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -318,8 +321,8 @@
.locTop-left { .locTop-left {
position: absolute; position: absolute;
right: 5%; right: 3%;
width: 176rpx auto; width: 200rpx auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -336,7 +339,7 @@
} }
.locTop-right { .locTop-right {
width: 406rpx; width: 330rpx;
height: 70rpx; height: 70rpx;
} }
@ -381,6 +384,37 @@
.listItem-contents { .listItem-contents {
margin-left: 20rpx; 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 { .cons-third {
margin-top: 20rpx; margin-top: 20rpx;
display: flex; display: flex;

244
pages/index/index.vue
View File

@ -10,15 +10,19 @@
<view class="locTop-left" @click="state.showRegion = true"> <view class="locTop-left" @click="state.showRegion = true">
<image style="width: 34rpx;height: 34rpx;" <image style="width: 34rpx;height: 34rpx;"
src="https://jiangxiaoxian.0rui.cn/locationTop.png" mode=""></image> src="https://jiangxiaoxian.0rui.cn/locationTop.png" mode=""></image>
<view style="margin-left: 10rpx;font-size: 30rpx;font-weight: 800;line-height: 26rpx;">{{state.model.city_name ? proCity:'全国' }} <view style="margin-left: 10rpx;font-size: 30rpx;font-weight: 800;line-height: 26rpx;white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;width: 270rpx;">
{{state.model.city_name ? proCity:'全国' }}
</view> </view>
</view> </view>
<view class="locTop-right"> <view class="locTop-right">
<uni-section style="border-radius: 192rpx;padding: 0;" type="line"> <uni-section style="border-radius: 192rpx;padding: 0;" type="line">
<uni-search-bar style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息" <uni-search-bar style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息"
bgColor="#EEEEEE" clearButton="none" cancelButton="none" @confirm="search" @focus="toPage('/packageA/search/index')"/> bgColor="#EEEEEE" clearButton="none" cancelButton="none"
@focus="toPage('/packageA/search/index')" />
</uni-section> </uni-section>
<!-- <uni-search-bar></uni-search-bar> @confirm="search"--> <!-- @confirm="search"-->
</view> </view>
</view> </view>
@ -79,29 +83,43 @@
src="https://jiangxiaoxian.0rui.cn/nextMore.png" mode=""></image> src="https://jiangxiaoxian.0rui.cn/nextMore.png" mode=""></image>
</view> </view>
</view> </view>
<view class="rrecommList"> <view class="rrecommList" v-for="(item,index) in rentList" :key="index">
<view class="reListItem"> <view class="reListItem">
<!-- 左侧图片 --> <!-- 左侧图片 -->
<view class="listItem-images"> <view class="listItem-images">
<image style="width: 77rpx;height: 36rpx;z-index: 100;position: relative;top: 34rpx;left: 0rpx;" <image v-if="item.recommend == 1"
style="width: 77rpx;height: 36rpx;z-index: 100;position: relative;top: 34rpx;left: 0rpx;"
src="https://jiangxiaoxian.0rui.cn/hot.png"></image> src="https://jiangxiaoxian.0rui.cn/hot.png"></image>
<image class="iamges-mainImg" src="https://jiangxiaoxian.0rui.cn/model.png"></image> <image class="iamges-mainImg" :src="item.images[0]"></image>
</view> </view>
<!-- 右侧内容 --> <!-- 右侧内容 -->
<view class="listItem-contents"> <view class="listItem-contents">
<view class="title2" style="margin-bottom: 20rpx;">食堂餐厅外包]洛阳某本科食堂新装修</view> <view class="title2" style="margin-bottom: 20rpx;">{{item.platform_title}}</view>
<view class="">标签</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>
<!-- <text v-show="item.cate[1]"
class="status-tag" style="margin-right: 20rpx;">{{item.cate[1]}}</text>
<text v-show="item.cate[2]"
class="status-tag">{{item.cate[2]}}</text> -->
</view>
</scroll-view>
<view class="cons-third"> <view class="cons-third">
<view style="display: flex;"> <view style="display: flex;">
<image style="width: 24rpx;height: 24rpx;" <image style="width: 24rpx;height: 24rpx;"
src="https://jiangxiaoxian.0rui.cn/locationList.png"></image> src="https://jiangxiaoxian.0rui.cn/locationList.png"></image>
<view class="title3" style="margin-left: 10rpx;">河南省洛阳市</view> <view class="title3" style="margin-left: 10rpx;">{{item.address_city_text}}
</view>
</view> </view>
<view class="title3">2025-07-24</view> <view class="title3">{{item.release_time_text}}</view>
<view style="display: flex;"> <view style="display: flex;">
<image style="width: 26rpx;height: 20rpx;" <image style="width: 26rpx;height: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/eye.png"></image> src="https://jiangxiaoxian.0rui.cn/eye.png"></image>
<view class="title3" style="margin-left: 10rpx;">11400</view> <view class="title3" style="margin-left: 10rpx;">{{item.views}}</view>
</view> </view>
</view> </view>
</view> </view>
@ -110,14 +128,11 @@
</view> </view>
</view> </view>
<!-- 省市区弹窗 --> <!-- 省市区弹窗 -->
<su-regionCity-picker <su-regionCity-picker :show="state.showRegion" @cancel="state.showRegion = false"
:show="state.showRegion" @confirm="onRegionConfirm">
@cancel="state.showRegion = false"
@confirm="onRegionConfirm"
>
</su-regionCity-picker> </su-regionCity-picker>
</s-layout> </s-layout>
@ -137,7 +152,12 @@
} from '@dcloudio/uni-app'; } from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import $share from '@/sheep/platform/share'; import $share from '@/sheep/platform/share';
import { consignee, mobile, address, region } from '@/sheep/validate/form'; import {
consignee,
mobile,
address,
region
} from '@/sheep/validate/form';
// 隐藏原生tabBar // 隐藏原生tabBar
uni.hideTabBar({ uni.hideTabBar({
@ -147,43 +167,66 @@
const template = computed(() => sheep.$store('app').template?.home); const template = computed(() => sheep.$store('app').template?.home);
const isLogin = computed(() => sheep.$store('user').isLogin); const isLogin = computed(() => sheep.$store('user').isLogin);
const qualification = ref(false) const qualification = ref(false)
const state = reactive({ const state = reactive({
showRegion: false, showRegion: false,
model: { model: {
consignee: '', consignee: '',
mobile: '', mobile: '',
address: '', address: '',
is_default: false, is_default: false,
region: '', region: '',
}, },
rules: { rules: {
consignee, consignee,
mobile, mobile,
address, address,
region, region,
}, },
}); });
const proCity = ref('') const proCity = ref('')
const onRegionConfirm = (e) => { const onRegionConfirm = (e) => {
console.log('onRegionConfirm',e); console.log('onRegionConfirm', e);
state.model = { state.model = {
...state.model, ...state.model,
...e, ...e,
}; };
proCity.value = state.model.province_name + " " + state.model.city_name proCity.value = state.model.province_name + " " + state.model.city_name
console.log('onRegionConfirm33',state.model,proCity.value); console.log('onRegionConfirm33', state.model, proCity.value);
state.showRegion = false; listQuery.value.province = state.model.province_id
listQuery.value.city = state.model.city_id
getList()
state.showRegion = false;
}; };
const listQuery = ref({
page: 1,
limit: 10,
addrLatitude: null,
addrLongitude: null,
address: null,
address1: null,
categoryId: null,
tags: '',
cate_ids: '',
area: null,
city: null,
province: null,
district: null,
keywords: null,
// district: '',
})
onLoad((options) => { onLoad((options) => {
getList();
// #ifdef MP // #ifdef MP
// 小程序识别二维码 // 小程序识别二维码
if (options.scene) { if (options.scene) {
@ -217,30 +260,76 @@
}); });
onPageScroll(() => {}); onPageScroll(() => {});
const toPage = (e) => { const toPage = (e) => {
if(isLogin.value == true) { if (isLogin.value == true) {
uni.navigateTo({ uni.navigateTo({
url: e url: e
}) })
}else{ } else {
uni.showToast({ uni.showToast({
title: '请先登录', title: '请先登录',
icon: 'none', icon: 'none',
duration: 2000 duration: 2000
}) })
setTimeout(function() { setTimeout(function() {
uni.switchTab({ uni.switchTab({
url: '/pages/index/user' url: '/pages/index/user'
}) })
}, 2000); }, 2000);
} }
} }
const rentList = ref([])
//招租列表
async function getList() {
const res = await sheep.$api.rent.rentlist({
keywords: listQuery.value.keywords,
page: listQuery.value.page,
limit: listQuery.value.limit,
cate_ids: listQuery.value.cate_ids,
my: 1,
order: 'normal',
status: 1,
recommend: 1,
province: listQuery.value.province,
city: listQuery.value.city,
});
console.log('getList', res);
if (res.data && res.data.list) {
rentList.value = res.data.list;
// Safely process each item
rentList.value = rentList.value.map(item => {
// Create a new object with all properties from the original item
const newItem = {
...item
};
// Only process release_time_text if it exists
if (newItem.release_time_text) {
newItem.release_time_text = newItem.release_time_text.substring(0, 10);
}
return newItem;
});
} else {
// Handle case where data is not in expected format
rentList.value = [];
}
// rentList.value = res.data.list;
// for(let i=0;i<rentList.value.length;i++){
// rentList.value[i].release_time_text = rentList.value[i].release_time_text.substring(0, 10)
// }
console.log('getList', rentList.value);
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -279,7 +368,7 @@
font-weight: 400; font-weight: 400;
line-height: 24rpx; line-height: 24rpx;
} }
.title2 { .title2 {
color: #3d3d3d; color: #3d3d3d;
font-size: 30rpx; font-size: 30rpx;
@ -317,14 +406,15 @@
// align-items: center; // align-items: center;
.locTop-left { .locTop-left {
width: 276rpx; width: 330rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
.locTop-right { .locTop-right {
width: 406rpx; width: 360rpx;
height: 70rpx; height: 70rpx;
} }
@ -445,10 +535,40 @@
} }
} }
.listItem-contents { .listItem-contents {
margin-left: 20rpx; 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 { .cons-third {
margin-top: 20rpx; margin-top: 20rpx;
display: flex; display: flex;

2
pages/index/user.vue
View File

@ -140,7 +140,7 @@
</view> </view>
<view class="line-row" style="margin: 30rpx 0;"></view> <view class="line-row" style="margin: 30rpx 0;"></view>
<!-- 意见反馈 --> <!-- 意见反馈 -->
<view class="fabuBox" @click="toPage('/pages/public/feedBack')"> <view class="fabuBox" @click="toPage('/pages/public/feedback')">
<view class="flex align-items"> <view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;" <image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/feedBack.png"></image> src="https://jiangxiaoxian.0rui.cn/feedBack.png"></image>

3
pages/public/feedback.vue
View File

@ -54,7 +54,7 @@
<button class="kefu-btn ss-reset-button" @tap="sheep.$router.go('/pages/chat/index')"> <button class="kefu-btn ss-reset-button" @tap="sheep.$router.go('/pages/chat/index')">
联系客服 联系客服
</button> </button>
<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="onSubmit"> <button class="submit-btn ss-reset-button" @tap="onSubmit">
提交 提交
</button> </button>
</view> </view>
@ -214,6 +214,7 @@
width: 334rpx; width: 334rpx;
height: 74rpx; height: 74rpx;
border-radius: 37rpx; border-radius: 37rpx;
background: linear-gradient(90deg,#FCCA58, #FFBD25);
} }
.kefu-btn { .kefu-btn {

10
pages/user/wallet/score.vue
View File

@ -1,7 +1,7 @@
<!-- 页面 --> <!-- 页面 -->
<template> <template>
<s-layout class="wallet-wrap" title="我的积分" navbar="inner"> <s-layout class="wallet-wrap" title="我的积分" navbar="inner">
<view <!-- <view
class="header-box ss-flex ss-flex-col ss-row-center ss-col-center" class="header-box ss-flex ss-flex-col ss-row-center ss-col-center"
:style="[ :style="[
{ {
@ -14,11 +14,11 @@
<view class="score-box ss-flex-col ss-row-center ss-col-center"> <view class="score-box ss-flex-col ss-row-center ss-col-center">
<view class="ss-m-b-30"> <view class="ss-m-b-30">
<text class="all-title ss-m-r-8">当前积分</text> <text class="all-title ss-m-r-8">当前积分</text>
<!-- <text class="cicon-help-o"></text> --> <text class="cicon-help-o"></text>
</view> </view>
<text class="all-num">{{ userInfo.score || 0 }}</text> <text class="all-num">{{ userInfo.score || 0 }}</text>
</view> </view>
</view> </view> -->
<!-- tab --> <!-- tab -->
<su-sticky :customNavHeight="sys_navBar"> <su-sticky :customNavHeight="sys_navBar">
<!-- 统计 --> <!-- 统计 -->
@ -84,6 +84,9 @@
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2; const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const userInfo = computed(() => sheep.$store('user').userInfo); const userInfo = computed(() => sheep.$store('user').userInfo);
const sys_navBar = sheep.$platform.navbar; const sys_navBar = sheep.$platform.navbar;
// const sys_navBar = [{
// name:
// }]
const pagination = { const pagination = {
data: [], data: [],
@ -107,7 +110,6 @@
name: '全部', name: '全部',
value: 'all', value: 'all',
}, },
{ {
name: '收入', name: '收入',
value: 'income', value: 'income',

478
sheep/ui/su-regionCity-picker/su-regionCity-picker.vue
View File

@ -1,262 +1,252 @@
<template> <template>
<su-popup :show="show" @close="onCancel" round="20"> <su-popup :show="show" @close="onCancel" round="20">
<view class="ui-regionCity-picker"> <view class="ui-regionCity-picker">
<su-toolbar <su-toolbar :cancelColor="cancelColor" :confirmColor="confirmColor" :cancelText="cancelText"
:cancelColor="cancelColor" :confirmText="confirmText" title="选择区域" @cancel="onCancel" @confirm="onConfirm('confirm')"></su-toolbar>
:confirmColor="confirmColor" <view class="ui-picker-body">
:cancelText="cancelText" <picker-view :value="state.currentIndex" @change="change" class="ui-picker-view" @pickstart="pickstart"
:confirmText="confirmText" @pickend="pickend">
title="选择区域" <picker-view-column>
@cancel="onCancel" <view class="ui-column-item" v-for="province in provinceList" :key="province.id">
@confirm="onConfirm('confirm')" <view >{{ province.name }}</view>
></su-toolbar> </view>
<view class="ui-picker-body"> </picker-view-column>
<picker-view <picker-view-column>
:value="state.currentIndex" <view class="ui-column-item" v-for="city in cityList" :key="city.id">
@change="change" <view >{{ city.name }}</view>
class="ui-picker-view" </view>
@pickstart="pickstart" </picker-view-column>
@pickend="pickend" </picker-view>
> </view>
<picker-view-column> </view>
<view class="ui-column-item" v-for="province in provinceList" :key="province.id"> </su-popup>
<view :style="getSizeByNameLength(province.name)">{{ province.name }}</view>
</view>
</picker-view-column>
<picker-view-column>
<view class="ui-column-item" v-for="city in cityList" :key="city.id">
<view :style="getSizeByNameLength(city.name)">{{ city.name }}</view>
</view>
</picker-view-column>
<!-- <picker-view-column>
<view class="ui-column-item" v-for="district in districtList" :key="district.id">
<view :style="getSizeByNameLength(district.name)">{{ district.name }}</view>
</view>
</picker-view-column> -->
</picker-view>
</view>
</view>
</su-popup>
</template> </template>
<script setup> <script setup>
/** /**
* picker picker弹出选择器 * picker picker弹出选择器
* @property {Object} params 需要显示的参 * @property {Object} params 需要显示的参
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示 * @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
* @property {String} cancel-color 取消按钮的颜色 * @property {String} cancel-color 取消按钮的颜色
* @property {String} confirm-color 确认按钮的颜色 * @property {String} confirm-color 确认按钮的颜色
* @property {String} confirm-text 确认按钮的文字 * @property {String} confirm-text 确认按钮的文字
* @property {String} cancel-text 取消按钮的文字 * @property {String} cancel-text 取消按钮的文字
* @property {String} default-region 默认选中的地区， * @property {String} default-region 默认选中的地区，
* @property {String} default-code 默认选中的地区 * @property {String} default-code 默认选中的地区
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true） * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
* @property {String Number} z-index 弹出时的z-index值（默认1075） * @property {String Number} z-index 弹出时的z-index值（默认1075）
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个 * @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容 * @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
* @event {Function} confirm 点击确定按钮，返回当前选择的值 * @event {Function} confirm 点击确定按钮，返回当前选择的值
* @event {Function} cancel 点击取消按钮，返回当前选择的值 * @event {Function} cancel 点击取消按钮，返回当前选择的值
*/ */
import { computed, reactive } from 'vue'; import {
const props = defineProps({ computed,
show: { reactive
type: Boolean, } from 'vue';
default: false, const props = defineProps({
}, show: {
// "取消"按钮的颜色 type: Boolean,
cancelColor: { default: false,
type: String, },
default: '#6666', // "取消"按钮的颜色
}, cancelColor: {
// "确定"按钮的颜色 type: String,
confirmColor: { default: '#6666',
type: String, },
default: 'var(--ui-BG-Main)', // "确定"按钮的颜色
}, confirmColor: {
// 取消按钮的文字 type: String,
cancelText: { default: 'var(--ui-BG-Main)',
type: String, },
default: '取消', // 取消按钮的文字
}, cancelText: {
// 确认按钮的文字 type: String,
confirmText: { default: '取消',
type: String, },
default: '确认', // 确认按钮的文字
}, confirmText: {
}); type: String,
// const areaData = uni.getStorageSync('areaData'); default: '确认',
const proFirst = [{ },
children: [], });
id: '', // const areaData = uni.getStorageSync('areaData')
level: "province", const proFirst = [{
name: "全国", children: [{
pid: 0 id: '',
}] level: "city",
const areaData = proFirst.concat(uni.getStorageSync('areaData')) name: "全部",
pid: 0
const getSizeByNameLength = (name) => { }], // 确保有默认的子项
let length = name.length; id: '',
if (length <= 7) return ''; level: "province",
if (length < 9) { name: "全国",
return 'font-size:28rpx'; pid: 0
} else { }]
return 'font-size: 24rpx'; const areaData = proFirst.concat(uni.getStorageSync('areaData'))
}
};
const state = reactive({
currentIndex: [0, 0, 0],
moving: false, // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
});
const emits = defineEmits(['confirm', 'cancel', 'change']);
const provinceList = areaData;
const cityList = computed(() => {
if(areaData[state.currentIndex[0]].name == '全部'){
return []
}else {
return areaData[state.currentIndex[0]].children;
}
});
const districtList = computed(() => {
return cityList.value[state.currentIndex[1]]?.children;
});
// 标识滑动开始，只有微信小程序才有这样的事件
const pickstart = () => {
// #ifdef MP-WEIXIN
state.moving = true;
// #endif
};
// 标识滑动结束
const pickend = () => {
// #ifdef MP-WEIXIN
state.moving = false;
// #endif
};
const init = () => {};
const onCancel = () => {
emits('cancel');
};
// 用户更改picker的列选项
const change = (e) => {
if (
state.currentIndex[0] === e.detail.value[0] &&
state.currentIndex[1] === e.detail.value[1]
) {
// 不更改省市区列表
state.currentIndex[2] = e.detail.value[2];
return;
} else {
// 更改省市区列表
if (state.currentIndex[0] !== e.detail.value[0]) {
e.detail.value[1] = 0;
}
e.detail.value[2] = 0;
state.currentIndex = e.detail.value;
}
emits('change', state.currentIndex);
};
// 用户点击确定按钮
const onConfirm = (event = null) => {
// #ifdef MP-WEIXIN
if (state.moving) return;
// #endif
let index = state.currentIndex;
let province = provinceList[index[0]];
let city = cityList.value[index[1]];
// let district = districtList.value[index[2]];
let result = {
province_name: province.name,
province_id: province.id,
city_name: city.name,
city_id: city.id,
// district_name: district.name,
// district_id: district.id,
};
console.log('su-regionCity-picker result',result);
if (event) emits(event, result); const getSizeByNameLength = (name) => {
}; // if (!name) return ''; // 添加这行防御性代码
console.log('getSizeByNameLength', name, name.length);
let length = name.length;
if (length <= 7) return '';
if (length < 9) {
return 'font-size:28rpx';
} else {
return 'font-size: 24rpx';
}
};
const state = reactive({
currentIndex: [0, 0, 0],
moving: false, // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
});
const emits = defineEmits(['confirm', 'cancel', 'change']);
const provinceList = areaData;
console.log('province',provinceList.value);
const cityList = computed(() => {
return areaData[state.currentIndex[0]].children;
});
const districtList = computed(() => {
return cityList.value[state.currentIndex[1]]?.children;
});
// 标识滑动开始，只有微信小程序才有这样的事件
const pickstart = () => {
// #ifdef MP-WEIXIN
state.moving = true;
// #endif
};
// 标识滑动结束
const pickend = () => {
// #ifdef MP-WEIXIN
state.moving = false;
// #endif
};
const init = () => {};
const onCancel = () => {
emits('cancel');
};
// 用户更改picker的列选项
const change = (e) => {
if (
state.currentIndex[0] === e.detail.value[0] &&
state.currentIndex[1] === e.detail.value[1]
) {
// 不更改省市区列表
state.currentIndex[2] = e.detail.value[2];
return;
} else {
// 更改省市区列表
if (state.currentIndex[0] !== e.detail.value[0]) {
e.detail.value[1] = 0;
}
e.detail.value[2] = 0;
state.currentIndex = e.detail.value;
}
emits('change', state.currentIndex);
};
// 用户点击确定按钮
const onConfirm = (event = null) => {
// #ifdef MP-WEIXIN
if (state.moving) return;
// #endif
let index = state.currentIndex;
let province = provinceList[index[0]];
let city = cityList.value[index[1]];
// let district = districtList.value[index[2]];
let result = {
province_name: province.name,
province_id: province.id,
city_name: city.name,
city_id: city.id,
// district_name: district.name,
// district_id: district.id,
};
console.log('su-regionCity-picker result', result);
if (event) emits(event, result);
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ui-regionCity-picker { .ui-regionCity-picker {
position: relative; position: relative;
z-index: 999; z-index: 999;
} }
.ui-picker-view { .ui-picker-view {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.ui-picker-header {
width: 100%;
height: 90rpx;
padding: 0 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
font-size: 30rpx;
background: #fff;
position: relative;
}
.ui-picker-header::after { .ui-picker-header {
content: ''; width: 100%;
position: absolute; height: 90rpx;
border-bottom: 1rpx solid #eaeef1; padding: 0 40rpx;
-webkit-transform: scaleY(0.5); display: flex;
transform: scaleY(0.5); justify-content: space-between;
bottom: 0; align-items: center;
right: 0; box-sizing: border-box;
left: 0; font-size: 30rpx;
} background: #fff;
position: relative;
}
.ui-picker__title { .ui-picker-header::after {
color: #333; content: '';
} position: absolute;
border-bottom: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 0;
}
.ui-picker-body { .ui-picker__title {
width: 100%; color: #333;
height: 500rpx; }
overflow: hidden;
background-color: #fff;
}
.ui-column-item { .ui-picker-body {
display: flex; width: 100%;
align-items: center; height: 500rpx;
justify-content: center; overflow: hidden;
font-size: 32rpx; background-color: #fff;
color: #333; }
padding: 0 8rpx;
}
.ui-btn-picker { .ui-column-item {
padding: 16rpx; display: flex;
box-sizing: border-box; align-items: center;
text-align: center; justify-content: center;
text-decoration: none; font-size: 32rpx;
} color: #333;
padding: 0 8rpx;
}
.ui-opacity { .ui-btn-picker {
opacity: 0.5; padding: 16rpx;
} box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.ui-btn-picker--primary { .ui-opacity {
color: blue; opacity: 0.5;
} }
.ui-btn-picker--tips { .ui-btn-picker--primary {
color: red; color: blue;
} }
</style>
.ui-btn-picker--tips {
color: red;
}
</style>