1、首页的平台推荐的列表对接，和顶部省市搜索的实现
2、个人首页的我的积分（采用原版的）和意见反馈（采用原版的）跳转和页面调整 3、首页的食堂招租页面的搜索功能实现
This commit is contained in:
parent
414da254b2
commit
54f0643445
@ -7,27 +7,26 @@
|
||||
<view class="locTop">
|
||||
<view class="locTop-right">
|
||||
<uni-section style="border-radius: 192rpx;padding: 0;" type="line">
|
||||
<uni-search-bar :value="listQuery.keywords" style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息"
|
||||
bgColor="#EEEEEE" clearButton="none" cancelButton="none" @confirm="searchRent"
|
||||
@blur="searchRent1" />
|
||||
<uni-search-bar v-model="listQuery.keywords" style="border-radius: 192rpx;" radius="23"
|
||||
placeholder="搜索您需要的信息" bgColor="#EEEEEE" clearButton="none" cancelButton="none"
|
||||
@confirm="searchRent" />
|
||||
</uni-section>
|
||||
<!-- <uni-search-bar></uni-search-bar> @confirm="search"-->
|
||||
<!-- @blur="searchRent1"-->
|
||||
</view>
|
||||
<view class="locTop-left">
|
||||
<view class="locTop-left-left" @click="state.showRegion = true">
|
||||
<view
|
||||
style="font-size: 28rpx;font-weight: 400;line-height: 32rpx;color: #999999;width: auto;">
|
||||
{{state.model.city_name ? proCity:'地区' }}
|
||||
<view @click="state.showRegion = true"
|
||||
style="font-size: 28rpx;font-weight: 400;line-height: 32rpx;color: #999999;max-width: 140rpx;">
|
||||
{{state.model.city_name ? state.model.city_name:'全国' }}
|
||||
</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>
|
||||
</view>
|
||||
<picker mode="selector" :value="tagList" :range="tagList" range-key="dictLabel"
|
||||
<picker mode="selector" :value="tagList.id" :range="tagList" range-key="name"
|
||||
@change="onChangeTag">
|
||||
<view class="picker"
|
||||
style="width: auto; position: relative;font-size: 28rpx;font-weight: 400;color: #999999;line-height: 32rpx;">
|
||||
|
||||
{{dictLabel || '标签'}}
|
||||
<view class="picker" style="width: auto; position: relative;display: flex;justify-content: flex-start;align-items: center;">
|
||||
<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>
|
||||
<image style="width: 27rpx;height: 27rpx;margin-left: 6rpx;"
|
||||
src="https://jiangxiaoxian.0rui.cn/rentMore.png" mode=""></image>
|
||||
</view>
|
||||
@ -55,7 +54,18 @@
|
||||
<!-- 右侧内容 -->
|
||||
<view class="listItem-contents">
|
||||
<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 style="display: flex;">
|
||||
<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>
|
||||
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
|
||||
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
@ -123,10 +124,12 @@
|
||||
address1: null,
|
||||
categoryId: null,
|
||||
tags: '',
|
||||
cate_ids: '',
|
||||
area: null,
|
||||
city: null,
|
||||
province: null,
|
||||
district: null,
|
||||
keywords:null,
|
||||
keywords: null,
|
||||
|
||||
// district: '',
|
||||
})
|
||||
@ -135,18 +138,11 @@
|
||||
|
||||
onLoad(() => {
|
||||
getList();
|
||||
getTagList()
|
||||
})
|
||||
|
||||
onShow(() => {})
|
||||
|
||||
// 数据
|
||||
const pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
|
||||
|
||||
const state = reactive({
|
||||
showRegion: false,
|
||||
model: {
|
||||
@ -162,21 +158,14 @@
|
||||
address,
|
||||
region,
|
||||
},
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
type: '',
|
||||
});
|
||||
|
||||
const proCity = ref(''); //省市页面显示
|
||||
|
||||
function searchRent() {
|
||||
console.log('搜索');
|
||||
console.log('搜索',listQuery.value.keywords);
|
||||
getList()
|
||||
}
|
||||
|
||||
const onRegionConfirm = (e) => {
|
||||
@ -186,76 +175,90 @@
|
||||
...state.model,
|
||||
...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);
|
||||
listQuery.value.province = state.model.province_id
|
||||
listQuery.value.city = state.model.city_id
|
||||
getList()
|
||||
state.showRegion = false;
|
||||
};
|
||||
|
||||
/* 标签 */
|
||||
// const getTagList = () => {
|
||||
// const obj = [{
|
||||
// dictLabel:'全部',
|
||||
// dictCode:''
|
||||
// }]
|
||||
// getTag(listQuery.value).then(res => {
|
||||
// tagList.value = obj.concat(res.data)
|
||||
// total.value = res.total
|
||||
// })
|
||||
// }
|
||||
const tagShowList = ref([])
|
||||
async function getTagList() {
|
||||
const obj = [{
|
||||
name: '全部',
|
||||
id: ''
|
||||
}]
|
||||
const res = await sheep.$api.rent.tagsList({});
|
||||
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) {
|
||||
// const value = e.detail.value;
|
||||
// listQuery.value.tags = tagList.value[e.detail.value].dictLabel;
|
||||
// dictLabel.value = tagList.value[e.detail.value].dictLabel;
|
||||
// console.log('标签',listQuery.value);
|
||||
// getList(listQuery.value);
|
||||
function onChangeTag(e) {
|
||||
const value = e.detail.value;
|
||||
listQuery.value.cate_ids = tagList.value[e.detail.value].id;
|
||||
dictLabel.value = tagList.value[e.detail.value].name;
|
||||
console.log('标签', listQuery.value);
|
||||
getList(listQuery.value);
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
const rentList = ref([])
|
||||
//招租列表
|
||||
async function getList() {
|
||||
// state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.rent.rentlist({
|
||||
keywords: listQuery.keywords,
|
||||
page:listQuery.page,
|
||||
limit: listQuery.limit,
|
||||
my:1,
|
||||
order:'normal',
|
||||
status:1,
|
||||
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,
|
||||
province: listQuery.value.province,
|
||||
city: listQuery.value.city,
|
||||
});
|
||||
console.log('getList',res);
|
||||
if (res.code === 1) {
|
||||
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.split(' ')[0]
|
||||
}
|
||||
console.log('rentList', rentList.value);
|
||||
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 = [];
|
||||
}
|
||||
// if (state.pagination.current_page < state.pagination.last_page) {
|
||||
// state.loadStatus = 'more';
|
||||
// } else {
|
||||
// state.loadStatus = 'noMore';
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -318,8 +321,8 @@
|
||||
|
||||
.locTop-left {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
width: 176rpx auto;
|
||||
right: 3%;
|
||||
width: 200rpx auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -336,7 +339,7 @@
|
||||
}
|
||||
|
||||
.locTop-right {
|
||||
width: 406rpx;
|
||||
width: 330rpx;
|
||||
height: 70rpx;
|
||||
|
||||
}
|
||||
@ -381,6 +384,37 @@
|
||||
.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 {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
|
||||
@ -10,15 +10,19 @@
|
||||
<view class="locTop-left" @click="state.showRegion = true">
|
||||
<image style="width: 34rpx;height: 34rpx;"
|
||||
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 class="locTop-right">
|
||||
<uni-section style="border-radius: 192rpx;padding: 0;" type="line">
|
||||
<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-search-bar></uni-search-bar> @confirm="search"-->
|
||||
<!-- @confirm="search"-->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -79,29 +83,43 @@
|
||||
src="https://jiangxiaoxian.0rui.cn/nextMore.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rrecommList">
|
||||
<view class="rrecommList" v-for="(item,index) in rentList" :key="index">
|
||||
<view class="reListItem">
|
||||
<!-- 左侧图片 -->
|
||||
<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>
|
||||
<image class="iamges-mainImg" src="https://jiangxiaoxian.0rui.cn/model.png"></image>
|
||||
<image class="iamges-mainImg" :src="item.images[0]"></image>
|
||||
</view>
|
||||
<!-- 右侧内容 -->
|
||||
<view class="listItem-contents">
|
||||
<view class="title2" style="margin-bottom: 20rpx;">食堂餐厅外包]洛阳某本科食堂新装修</view>
|
||||
<view class="">标签</view>
|
||||
<view class="title2" style="margin-bottom: 20rpx;">{{item.platform_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>
|
||||
|
||||
<!-- <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 style="display: flex;">
|
||||
<image style="width: 24rpx;height: 24rpx;"
|
||||
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 class="title3">2025-07-24</view>
|
||||
<view class="title3">{{item.release_time_text}}</view>
|
||||
<view style="display: flex;">
|
||||
<image style="width: 26rpx;height: 20rpx;"
|
||||
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>
|
||||
@ -110,14 +128,11 @@
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 省市区弹窗 -->
|
||||
<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>
|
||||
|
||||
</s-layout>
|
||||
@ -137,7 +152,12 @@
|
||||
} from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
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
|
||||
uni.hideTabBar({
|
||||
@ -147,43 +167,66 @@
|
||||
const template = computed(() => sheep.$store('app').template?.home);
|
||||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||||
const qualification = ref(false)
|
||||
|
||||
|
||||
const state = reactive({
|
||||
showRegion: false,
|
||||
model: {
|
||||
consignee: '',
|
||||
mobile: '',
|
||||
address: '',
|
||||
is_default: false,
|
||||
region: '',
|
||||
},
|
||||
rules: {
|
||||
consignee,
|
||||
mobile,
|
||||
address,
|
||||
region,
|
||||
},
|
||||
showRegion: false,
|
||||
model: {
|
||||
consignee: '',
|
||||
mobile: '',
|
||||
address: '',
|
||||
is_default: false,
|
||||
region: '',
|
||||
},
|
||||
rules: {
|
||||
consignee,
|
||||
mobile,
|
||||
address,
|
||||
region,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const proCity = ref('')
|
||||
|
||||
|
||||
const onRegionConfirm = (e) => {
|
||||
console.log('onRegionConfirm',e);
|
||||
|
||||
state.model = {
|
||||
...state.model,
|
||||
...e,
|
||||
};
|
||||
|
||||
proCity.value = state.model.province_name + " " + state.model.city_name
|
||||
|
||||
console.log('onRegionConfirm33',state.model,proCity.value);
|
||||
state.showRegion = false;
|
||||
console.log('onRegionConfirm', e);
|
||||
|
||||
state.model = {
|
||||
...state.model,
|
||||
...e,
|
||||
};
|
||||
|
||||
proCity.value = state.model.province_name + " " + state.model.city_name
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
|
||||
|
||||
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) => {
|
||||
getList();
|
||||
// #ifdef MP
|
||||
// 小程序识别二维码
|
||||
if (options.scene) {
|
||||
@ -217,30 +260,76 @@
|
||||
});
|
||||
|
||||
onPageScroll(() => {});
|
||||
|
||||
|
||||
|
||||
|
||||
const toPage = (e) => {
|
||||
if(isLogin.value == true) {
|
||||
if (isLogin.value == true) {
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
})
|
||||
}else{
|
||||
|
||||
} else {
|
||||
|
||||
uni.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/user'
|
||||
})
|
||||
}, 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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -279,7 +368,7 @@
|
||||
font-weight: 400;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
|
||||
.title2 {
|
||||
color: #3d3d3d;
|
||||
font-size: 30rpx;
|
||||
@ -317,14 +406,15 @@
|
||||
// align-items: center;
|
||||
|
||||
.locTop-left {
|
||||
width: 276rpx;
|
||||
width: 330rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.locTop-right {
|
||||
width: 406rpx;
|
||||
width: 360rpx;
|
||||
height: 70rpx;
|
||||
|
||||
}
|
||||
@ -445,10 +535,40 @@
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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 {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
|
||||
@ -140,7 +140,7 @@
|
||||
</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">
|
||||
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
|
||||
src="https://jiangxiaoxian.0rui.cn/feedBack.png"></image>
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
<button class="kefu-btn ss-reset-button" @tap="sheep.$router.go('/pages/chat/index')">
|
||||
联系客服
|
||||
</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>
|
||||
</view>
|
||||
@ -214,6 +214,7 @@
|
||||
width: 334rpx;
|
||||
height: 74rpx;
|
||||
border-radius: 37rpx;
|
||||
background: linear-gradient(90deg,#FCCA58, #FFBD25);
|
||||
}
|
||||
|
||||
.kefu-btn {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout class="wallet-wrap" title="我的积分" navbar="inner">
|
||||
<view
|
||||
<!-- <view
|
||||
class="header-box ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
:style="[
|
||||
{
|
||||
@ -14,11 +14,11 @@
|
||||
<view class="score-box ss-flex-col ss-row-center ss-col-center">
|
||||
<view class="ss-m-b-30">
|
||||
<text class="all-title ss-m-r-8">当前积分</text>
|
||||
<!-- <text class="cicon-help-o"></text> -->
|
||||
<text class="cicon-help-o"></text>
|
||||
</view>
|
||||
<text class="all-num">{{ userInfo.score || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- tab -->
|
||||
<su-sticky :customNavHeight="sys_navBar">
|
||||
<!-- 统计 -->
|
||||
@ -84,6 +84,9 @@
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
// const sys_navBar = [{
|
||||
// name:
|
||||
// }]
|
||||
|
||||
const pagination = {
|
||||
data: [],
|
||||
@ -107,7 +110,6 @@
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
|
||||
{
|
||||
name: '收入',
|
||||
value: 'income',
|
||||
|
||||
@ -1,262 +1,252 @@
|
||||
<template>
|
||||
<su-popup :show="show" @close="onCancel" round="20">
|
||||
<view class="ui-regionCity-picker">
|
||||
<su-toolbar
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="confirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
title="选择区域"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm('confirm')"
|
||||
></su-toolbar>
|
||||
<view class="ui-picker-body">
|
||||
<picker-view
|
||||
:value="state.currentIndex"
|
||||
@change="change"
|
||||
class="ui-picker-view"
|
||||
@pickstart="pickstart"
|
||||
@pickend="pickend"
|
||||
>
|
||||
<picker-view-column>
|
||||
<view class="ui-column-item" v-for="province in provinceList" :key="province.id">
|
||||
<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>
|
||||
<su-popup :show="show" @close="onCancel" round="20">
|
||||
<view class="ui-regionCity-picker">
|
||||
<su-toolbar :cancelColor="cancelColor" :confirmColor="confirmColor" :cancelText="cancelText"
|
||||
:confirmText="confirmText" title="选择区域" @cancel="onCancel" @confirm="onConfirm('confirm')"></su-toolbar>
|
||||
<view class="ui-picker-body">
|
||||
<picker-view :value="state.currentIndex" @change="change" class="ui-picker-view" @pickstart="pickstart"
|
||||
@pickend="pickend">
|
||||
<picker-view-column>
|
||||
<view class="ui-column-item" v-for="province in provinceList" :key="province.id">
|
||||
<view >{{ province.name }}</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="ui-column-item" v-for="city in cityList" :key="city.id">
|
||||
<view >{{ city.name }}</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* picker picker弹出选择器
|
||||
* @property {Object} params 需要显示的参
|
||||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
|
||||
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
|
||||
* @property {String} cancel-color 取消按钮的颜色
|
||||
* @property {String} confirm-color 确认按钮的颜色
|
||||
* @property {String} confirm-text 确认按钮的文字
|
||||
* @property {String} cancel-text 取消按钮的文字
|
||||
* @property {String} default-region 默认选中的地区，
|
||||
* @property {String} default-code 默认选中的地区
|
||||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
|
||||
* @property {String Number} z-index 弹出时的z-index值（默认1075）
|
||||
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
|
||||
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
* @event {Function} cancel 点击取消按钮，返回当前选择的值
|
||||
*/
|
||||
import { computed, reactive } from 'vue';
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// "取消"按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#6666',
|
||||
},
|
||||
// "确定"按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: 'var(--ui-BG-Main)',
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消',
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认',
|
||||
},
|
||||
});
|
||||
// const areaData = uni.getStorageSync('areaData');
|
||||
const proFirst = [{
|
||||
children: [],
|
||||
id: '',
|
||||
level: "province",
|
||||
name: "全国",
|
||||
pid: 0
|
||||
}]
|
||||
const areaData = proFirst.concat(uni.getStorageSync('areaData'))
|
||||
|
||||
const getSizeByNameLength = (name) => {
|
||||
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;
|
||||
|
||||
|
||||
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,
|
||||
};
|
||||
/**
|
||||
* picker picker弹出选择器
|
||||
* @property {Object} params 需要显示的参
|
||||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
|
||||
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
|
||||
* @property {String} cancel-color 取消按钮的颜色
|
||||
* @property {String} confirm-color 确认按钮的颜色
|
||||
* @property {String} confirm-text 确认按钮的文字
|
||||
* @property {String} cancel-text 取消按钮的文字
|
||||
* @property {String} default-region 默认选中的地区，
|
||||
* @property {String} default-code 默认选中的地区
|
||||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
|
||||
* @property {String Number} z-index 弹出时的z-index值（默认1075）
|
||||
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
|
||||
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
* @event {Function} cancel 点击取消按钮，返回当前选择的值
|
||||
*/
|
||||
import {
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// "取消"按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#6666',
|
||||
},
|
||||
// "确定"按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: 'var(--ui-BG-Main)',
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消',
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认',
|
||||
},
|
||||
});
|
||||
// const areaData = uni.getStorageSync('areaData')
|
||||
const proFirst = [{
|
||||
children: [{
|
||||
id: '',
|
||||
level: "city",
|
||||
name: "全部",
|
||||
pid: 0
|
||||
}], // 确保有默认的子项
|
||||
id: '',
|
||||
level: "province",
|
||||
name: "全国",
|
||||
pid: 0
|
||||
}]
|
||||
const areaData = proFirst.concat(uni.getStorageSync('areaData'))
|
||||
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ui-regionCity-picker {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
.ui-regionCity-picker {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.ui-picker-view {
|
||||
height: 100%;
|
||||
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-view {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ui-picker-header::after {
|
||||
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-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__title {
|
||||
color: #333;
|
||||
}
|
||||
.ui-picker-header::after {
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
.ui-picker__title {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ui-column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
.ui-picker-body {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ui-btn-picker {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.ui-opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ui-btn-picker {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui-btn-picker--primary {
|
||||
color: blue;
|
||||
}
|
||||
.ui-opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.ui-btn-picker--tips {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
.ui-btn-picker--primary {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.ui-btn-picker--tips {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user