|
|
@@ -13,7 +13,7 @@
|
|
|
<view class="tabs-wrapper">
|
|
|
<!-- 可滑动的 tabs 区域 -->
|
|
|
<scroll-view scroll-x class="tabs-scroll">
|
|
|
- <up-tabs :list="list1" @click="click" class="tabs-content"></up-tabs>
|
|
|
+ <up-tabs :list="list1" @click="handlTabs" class="tabs-content"></up-tabs>
|
|
|
</scroll-view>
|
|
|
<!-- 固定不动的图标 -->
|
|
|
<image ref="iconRef" src="/static/img/分类or广场or其他.png" class="fixed-icon" @click="toggleDropdown" />
|
|
|
@@ -27,7 +27,53 @@
|
|
|
|
|
|
|
|
|
<!-- 瀑布流 -->
|
|
|
- <volunteerSide></volunteerSide>
|
|
|
+ <view>
|
|
|
+ <up-waterfall v-model="flowList">
|
|
|
+ <template #left :listData="listData">
|
|
|
+ <view class="demo-warter" v-for="(item, index) in listData" :key="index"
|
|
|
+ @click="goToDetail(item)">
|
|
|
+ <up-lazy-load threshold="-450" border-radius="10" :image="item.image"
|
|
|
+ :index="index"></up-lazy-load>
|
|
|
+ <view class="demo-title">
|
|
|
+ {{item.skillDescribe}}
|
|
|
+ </view>
|
|
|
+ <view class="demo-PriceDome">
|
|
|
+ <view class="demo-price">
|
|
|
+ <image src="../../static/用户.png" class="name-image"></image>
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="dome-Like">
|
|
|
+ <text style="font-size: 25rpx; color: red;">￥</text>
|
|
|
+ <text style="font-size: 35rpx; color: red;">1.4w</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template #right :rightList="rightList">
|
|
|
+ <view class="demo-warter" v-for="(item, index) in rightList" :key="index"
|
|
|
+ @click="goToDetail(item)">
|
|
|
+ <up-lazy-load threshold="-450" border-radius="10" :image="item.image"
|
|
|
+ :index="index"></up-lazy-load>
|
|
|
+ <view class="demo-title">
|
|
|
+ {{item.skillDescribe}}
|
|
|
+ </view>
|
|
|
+ <view class="demo-PriceDome">
|
|
|
+ <view class="demo-price">
|
|
|
+ <image src="../../static/用户.png" class="name-image"></image>
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="dome-Like">
|
|
|
+ <text style="font-size: 25rpx; color: red;">￥</text>
|
|
|
+ <text style="font-size: 35rpx; color: red;">1.4w</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </up-waterfall>
|
|
|
+
|
|
|
+ <!-- <up-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></up-loadmore> -->
|
|
|
+ </view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -41,86 +87,27 @@
|
|
|
reactive
|
|
|
} from 'vue';
|
|
|
import volunteerSide from "@/pages/Volunteerside/Side_index.vue"
|
|
|
-
|
|
|
+ import {
|
|
|
+ typeOptionSelect,
|
|
|
+ volunteerInfoList,
|
|
|
+ getDetailsvolunteerId,
|
|
|
+ dictListlrRstudy,
|
|
|
+ dictListlrData
|
|
|
+ } from "@/api/volunteerDetailsApi/details.js"
|
|
|
|
|
|
const value1 = ref(1)
|
|
|
const value2 = ref(2)
|
|
|
+ const list1 = ref([])
|
|
|
+ const list2 = ref([])
|
|
|
+ const list3 = ref([])
|
|
|
+ const flowList = ref([]); //list数据
|
|
|
+ const listData = ref([])
|
|
|
+ const rightList = ref([])
|
|
|
+ const defaultTab = ref({
|
|
|
+ dictValue: 1
|
|
|
+ });
|
|
|
|
|
|
- const options1 = [{
|
|
|
- label: '默认排序',
|
|
|
- value: 1
|
|
|
- },
|
|
|
- {
|
|
|
- label: '距离优先',
|
|
|
- value: 2
|
|
|
- },
|
|
|
- {
|
|
|
- label: '价格优先',
|
|
|
- value: 3
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- const options2 = [{
|
|
|
- label: '去冰',
|
|
|
- value: 1
|
|
|
- },
|
|
|
- {
|
|
|
- label: '加冰',
|
|
|
- value: 2
|
|
|
- }
|
|
|
- ]
|
|
|
|
|
|
- const list1 = reactive([{
|
|
|
- name: '家庭教育'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '家庭清洁'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '陪伴陪聊'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '家庭助理'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '家务帮手'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '健康管理'
|
|
|
- },
|
|
|
- ]);
|
|
|
- const list2 = reactive([{
|
|
|
- name: '语文'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '数学'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '英语'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '地理'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '生物'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '历史'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '化学'
|
|
|
- },
|
|
|
- ]);
|
|
|
- const list3 = reactive([{
|
|
|
- name: '小学'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '初中'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '高中'
|
|
|
- },
|
|
|
- ]);
|
|
|
const showDropdown = ref(false)
|
|
|
|
|
|
function toggleDropdown() {
|
|
|
@@ -128,6 +115,93 @@
|
|
|
showDropdown.value = !showDropdown.value
|
|
|
}
|
|
|
|
|
|
+ const getListData = async (dictSort = null) => {
|
|
|
+ try {
|
|
|
+
|
|
|
+ const params = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ dictType: 'lrr_service_category',
|
|
|
+ dictSort
|
|
|
+ }
|
|
|
+ const res = await typeOptionSelect(params)
|
|
|
+ console.log((res, '获取健值成功'))
|
|
|
+ if (res.code == 200 && res.rows) {
|
|
|
+ list1.value = res.rows.map(item => ({
|
|
|
+ ...item,
|
|
|
+ name: item.dictLabel,
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log('获取失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const getListData2 = async () => {
|
|
|
+ try {
|
|
|
+
|
|
|
+ const params = {
|
|
|
+ dictType: 'lrr_service_subject',
|
|
|
+ }
|
|
|
+ const res = await dictListlrRstudy(params)
|
|
|
+ if (res.code == 200 && res.rows) {
|
|
|
+ list2.value = res.rows.map(item => ({
|
|
|
+ ...item,
|
|
|
+ name: item.dictLabel,
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log('获取失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const getListData3 = async () => {
|
|
|
+ try {
|
|
|
+
|
|
|
+ const params = {
|
|
|
+ dictType: 'lrr_study',
|
|
|
+ }
|
|
|
+ const res = await dictListlrData(params)
|
|
|
+ if (res.code == 200 && res.rows) {
|
|
|
+ list3.value = res.rows.map(item => ({
|
|
|
+ ...item,
|
|
|
+ name: item.dictLabel,
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log('获取失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // tabs选择服务类型
|
|
|
+ const handlTabs = async (tab) => {
|
|
|
+ const params = {
|
|
|
+ serviceCategory: tab.dictValue
|
|
|
+ }
|
|
|
+ const res = await volunteerInfoList(params)
|
|
|
+
|
|
|
+ // 处理左右数据展示
|
|
|
+ let leftArr = []
|
|
|
+ let rightArr = []
|
|
|
+
|
|
|
+ console.log(res.data, '>>>res.data');
|
|
|
+
|
|
|
+ (res.data || []).forEach((item, index) => {
|
|
|
+ index % 2 != 0 ? leftArr.push(item) : rightArr.push(item)
|
|
|
+ })
|
|
|
+
|
|
|
+ listData.value = leftArr
|
|
|
+ rightList.value = rightArr
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const goToDetail = async (item) => {
|
|
|
+ const volunteerId = item.volunteerId;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/goodsDetails/goodsDetails?volunteerId=${volunteerId}`
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
const inputStyle = { //input輸入框樣式設置
|
|
|
borderRadius: '140rpx',
|
|
|
@@ -136,6 +210,13 @@
|
|
|
paddingLeft: '30rpx',
|
|
|
width: '600rpx',
|
|
|
}
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getListData()
|
|
|
+ getListData2()
|
|
|
+ getListData3()
|
|
|
+ handlTabs(defaultTab.value)
|
|
|
+ })
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -199,4 +280,71 @@
|
|
|
flex-shrink: 0;
|
|
|
/* 禁止压缩 */
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ .demo-warter {
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 32rpx;
|
|
|
+ right: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-image {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: $up-main-color;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ /* 限制显示两行 */
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 超出部分显示省略号 */
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .demo-img {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-PriceDome {
|
|
|
+ display: flex;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $up-type-error;
|
|
|
+ /* margin-top: 5px; */
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-price {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name-image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dome-Like {
|
|
|
+ margin-left: 120rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
</style>
|
贾宇博