提交配置
优化发布页面样式 下拉刷新
This commit is contained in:
parent
4e9e2d789d
commit
4120015ddd
@ -95,10 +95,7 @@ onPullDownRefresh(() => {
|
||||
}, 800)
|
||||
})
|
||||
|
||||
onPageScroll(() => {
|
||||
})
|
||||
onPageScroll(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
</view>
|
||||
<view class="p-5 bg-gray-100 h-screen" style="margin-top: 480rpx">
|
||||
<!-- 表单区域 -->
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<view class="mt-5 bg-white rounded-lg shadow" style="padding: 0">
|
||||
<!-- 导航栏 -->
|
||||
<view class="mb-4 navigation">
|
||||
<text class="text-gray-800 card_font">
|
||||
|
||||
@ -50,9 +50,9 @@
|
||||
</view>
|
||||
</keep-alive>
|
||||
</view>
|
||||
<view class="p-5 bg-gray-100 h-screen" style="margin-top: 480rpx">
|
||||
<view class="p-5 bg-gray-100 h-screen" style="margin-top: 480rpx; padding: 30rpx">
|
||||
<!-- 表单区域 -->
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<view class="mt-5 bg-white rounded-lg shadow" style="padding: 0">
|
||||
<!-- 导航栏 -->
|
||||
<view class="mb-4 navigation">
|
||||
<text class="text-gray-800 card_font">
|
||||
|
||||
@ -23,11 +23,15 @@
|
||||
</view>
|
||||
|
||||
<!-- 宠托师信息 -->
|
||||
<view class="bg-white p-4">
|
||||
<view class="bg-white p-4 information">
|
||||
<text class="text-2xl font-bold">{{ serviceData.userName }}</text>
|
||||
<view class="flex items-center mt-2">
|
||||
<text class="text-sm text-gray-500 mr-2">认证{{ serviceData.certificationTime }}</text>
|
||||
<text class="text-sm text-gray-500">服务过 {{ serviceData.serviceNumber }} 次</text>
|
||||
<text class="text-sm text-gray-500 mr-2 information_size">
|
||||
认证{{ serviceData.certificationTime }}
|
||||
</text>
|
||||
<text class="text-sm text-gray-500 information_size">
|
||||
服务过 {{ serviceData.serviceNumber }} 次
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex items-center mt-2">
|
||||
<wd-icon name="location" size="20" class="text-[#ffc107]"></wd-icon>
|
||||
@ -39,22 +43,43 @@
|
||||
<!-- 服务和费用 -->
|
||||
<view class="bg-white p-4">
|
||||
<text class="text-lg font-bold mb-2">{{ serviceData.serviceName }}服务费</text>
|
||||
<view class="flex justify-between items-center mb-4">
|
||||
<view class="flex items-center space-x-4">
|
||||
<view class="service_accompany">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726755104477.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 200rpx; width: 690rpx"
|
||||
/>
|
||||
|
||||
<!-- <view class="flex items-center space-x-4 service_costs">
|
||||
<view class="flex flex-col items-center">
|
||||
<wd-icon name="bowl" size="24" class="text-pink-500"></wd-icon>
|
||||
<image :src="imgUrl('@/static/service/1726737221344.png')" class="service_img"></image>
|
||||
<text class="text-pink-500 text-sm">食具清洁</text>
|
||||
</view>
|
||||
<view class="flex flex-col items-center">
|
||||
<wd-icon name="water" size="24" class="text-pink-500"></wd-icon>
|
||||
<image :src="imgUrl('@/static/service/1726737221344.png')" class="service_img"></image>
|
||||
<text class="text-pink-500 text-sm">添粮换水</text>
|
||||
</view>
|
||||
<view class="flex flex-col items-center">
|
||||
<wd-icon name="litter" size="24" class="text-pink-500"></wd-icon>
|
||||
<image :src="imgUrl('@/static/service/1726737221344.png')" class="service_img"></image>
|
||||
<text class="text-pink-500 text-sm">铲屎添砂</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="text-lg text-red-500">¥{{ serviceData.price }}/次</text>
|
||||
|
||||
<view class="flex items-center space-x-4 service_costs">
|
||||
<view class="flex flex-col items-center">
|
||||
<image :src="imgUrl('@/static/service/1726737221344.png')" class="service_img"></image>
|
||||
<text class="text-pink-500 text-sm">互动陪玩</text>
|
||||
</view>
|
||||
<view class="flex flex-col items-center">
|
||||
<image :src="imgUrl('@/static/service/1726737221344.png')" class="service_img"></image>
|
||||
<text class="text-pink-500 text-sm">健康监测</text>
|
||||
</view>
|
||||
<view class="flex flex-col items-center">
|
||||
<image :src="imgUrl('@/static/service/1726737221344.png')" class="service_img"></image>
|
||||
<text class="text-pink-500 text-sm">环境检查</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <text class="text-lg text-red-500">¥{{ serviceData.price }}/次</text> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -74,6 +99,84 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <up-sticky>
|
||||
<view class="stickyBox">
|
||||
<view class="filterBox">
|
||||
<scroll-view scroll-x="true" class="scrollBox">
|
||||
<view class="viewBox">
|
||||
<view class="sceneAddress">
|
||||
<view @click="sortChange(0)" class="filter">
|
||||
<text>价格</text>
|
||||
</view>
|
||||
</view>
|
||||
<picker @change="changeRevenue" :range="revenueList" popup-title="营收">
|
||||
<view class="sceneAddress">
|
||||
<view class="selected">
|
||||
<text>营收</text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<picker
|
||||
@change="onChange"
|
||||
:value="industryIndex"
|
||||
@columnchange="onColumnChange"
|
||||
:range="industryArray"
|
||||
mode="multiSelector"
|
||||
popup-title="行业"
|
||||
>
|
||||
<view class="sceneAddress">
|
||||
<view class="selected">
|
||||
<tetx>行业</tetx>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<picker @change="sizeNameChange" :range="sizeNameList" popup-title="媒体尺寸">
|
||||
<view class="sceneAddress">
|
||||
<view class="selected">
|
||||
<text>尺寸</text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<picker @change="changeStoreOne" :range="rangeTypeList" popup-title="屏幕方向">
|
||||
<view class="sceneAddress">
|
||||
<view class="selected">
|
||||
<text>方向</text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<picker @change="changeStoreOne" :range="rangeTypeList" popup-title="屏幕方向">
|
||||
<view class="sceneAddress">
|
||||
<view class="selected">
|
||||
<text>方向</text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<picker @change="changeStoreOne" :range="rangeTypeList" popup-title="屏幕方向">
|
||||
<view class="sceneAddress">
|
||||
<view class="selected">
|
||||
<text>方向</text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<picker @change="changeStoreOne" :range="rangeTypeList" popup-title="屏幕方向">
|
||||
<view class="sceneAddress">
|
||||
<view class="selected">
|
||||
<text>方向</text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<picker @change="changeStoreOne" :range="rangeTypeList" popup-title="屏幕方向">
|
||||
<view class="sceneAddress">
|
||||
<view class="selected">
|
||||
<text>方向</text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</up-sticky> -->
|
||||
|
||||
<!-- 用户评价 -->
|
||||
<view class="bg-white p-4">
|
||||
@ -110,15 +213,35 @@
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="fixed bottom-0 w-full bg-white flex justify-between items-center mt-4 z-10 py-3">
|
||||
<text class="text-red-500 text-lg">¥{{ serviceData.price }}/次 起</text>
|
||||
<view
|
||||
class="fixed bottom-0 w-full bg-white flex justify-between items-center mt-4 z-10 py-3"
|
||||
style="border-radius: 20px 20px 0 0; height: 150rpx"
|
||||
>
|
||||
<text class="text-red-500 text-lg" style="margin-left: 70rpx">
|
||||
¥
|
||||
<span style="font-size: 13px; font-weight: bold">{{ serviceData.price }}</span>
|
||||
/次 起
|
||||
</text>
|
||||
<view class="flex space-x-4 pr-10px">
|
||||
<button @click="message" class="bg-gray-200 text-gray-600 rounded-full w-100px">
|
||||
消息
|
||||
</button>
|
||||
<button class="bg-[#ffc107] text-white rounded-full" @click="openReservationModal">
|
||||
预约宠托师
|
||||
</button>
|
||||
<div
|
||||
@click="message"
|
||||
style="
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
type="text"
|
||||
>
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726760627352.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 28px; height: 28px; margin-top: 10px"
|
||||
/>
|
||||
|
||||
<span style="font-size: 12px; color: #a89f98; margin-top: 2px">消息</span>
|
||||
</div>
|
||||
<button class="appointment" @click="openReservationModal">预约宠托师</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -198,7 +321,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</wd-overlay>
|
||||
|
||||
<LoadingAnimation v-model="loading" />
|
||||
</template>
|
||||
|
||||
@ -440,4 +562,94 @@ onLoad(async (options) => {
|
||||
.border-4 {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.information {
|
||||
border-radius: 30px 30px 0 0;
|
||||
/* position: absolute; */
|
||||
/* top: 700rpx; */
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
.information_size {
|
||||
background-color: #ffecec;
|
||||
color: #ff8090;
|
||||
margin: 30px 0;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.service_costs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.service_img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.service_accompany {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.appointment {
|
||||
border-radius: 30px;
|
||||
display: grid;
|
||||
place-items: center; /* 水平和垂直居中 */
|
||||
padding: 0 45px;
|
||||
font-size: 14px;
|
||||
height: 120rpx;
|
||||
background-color: #fda2a2;
|
||||
color: #fffcfc;
|
||||
}
|
||||
|
||||
.filterBox {
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.scrollBox {
|
||||
width: calc(100vw - 96rpx);
|
||||
|
||||
.viewBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
|
||||
.sceneAddress {
|
||||
position: relative;
|
||||
padding: 8rpx 20rpx;
|
||||
color: #787679;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 50rpx;
|
||||
|
||||
.filter {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5rpx;
|
||||
|
||||
image {
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,6 +8,16 @@
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<scroll-view
|
||||
v-if="state.showScroll"
|
||||
lower-threshold="30"
|
||||
enable-back-to-top="true"
|
||||
scroll-y="true"
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="state.refresherTriggered"
|
||||
@refresherrefresh="refresherrefresh"
|
||||
:style="{ height: `calc(100vh - ${state.statusBarHeight + state.titleBarHeight + 45}px)` }"
|
||||
>
|
||||
<view class="space-root">
|
||||
<view class="index-bg"></view>
|
||||
<image class="rootbg" :src="imgUrl('@/static/space/bg.png')" mode="widthFix"></image>
|
||||
@ -79,7 +89,7 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<Tabbar />
|
||||
</template>
|
||||
|
||||
@ -95,6 +105,17 @@ const activeTab = ref(0)
|
||||
const focusUser = ref([])
|
||||
const postsList = ref(null)
|
||||
|
||||
onLoad(() => {
|
||||
state.showScroll = true
|
||||
})
|
||||
|
||||
// 页面状态
|
||||
const state = reactive({
|
||||
statusBarHeight: 0, // 状态栏高
|
||||
titleBarHeight: 0, // 导航栏高
|
||||
showScroll: false,
|
||||
refresherTriggered: false, // 下拉刷新状态
|
||||
})
|
||||
// 测试数据
|
||||
// focusUser = ref([
|
||||
// { name: '曲三岁', avatar: '/static/my/pet-auatar.jpg' },
|
||||
@ -133,11 +154,11 @@ const focus = async () => {
|
||||
if (res.code == 200) {
|
||||
focusUser.value = res.data
|
||||
} else {
|
||||
console.error(res);
|
||||
console.error(res)
|
||||
toast(res.message || '数据获取失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error(error)
|
||||
toast(error.data.message || '获取关注博主数据失败')
|
||||
}
|
||||
}
|
||||
@ -149,11 +170,11 @@ const getPosts = async () => {
|
||||
if (res.code == 200) {
|
||||
postsList.value = res.data
|
||||
} else {
|
||||
console.error(res);
|
||||
console.error(res)
|
||||
toast(res.message || '数据获取失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error(error)
|
||||
toast(error.data.message || '获取关注博主数据失败')
|
||||
}
|
||||
}
|
||||
@ -187,6 +208,22 @@ onLoad(async () => {
|
||||
await focus()
|
||||
await getPosts()
|
||||
})
|
||||
|
||||
// 媒体列表下拉刷新
|
||||
function refresherrefresh(e) {
|
||||
state.refresherTriggered = true
|
||||
state.showScroll = false
|
||||
console.log('refresherTriggered', state.refresherTriggered)
|
||||
aaa()
|
||||
}
|
||||
|
||||
function aaa() {
|
||||
state.refresherTriggered = false
|
||||
|
||||
state.showScroll = true
|
||||
console.log('refresherTriggered', state.refresherTriggered)
|
||||
console.log('showScroll', state.showScroll)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user