|
|
@@ -1,56 +1,44 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="one">
|
|
|
- <up-search v-model="nick_name" @custom="searchInfo"></up-search>
|
|
|
+ <view class="one_1">
|
|
|
+ <input type="text" v-model="nick_name" placeholder="请输入想要搜索的内容">
|
|
|
+ </view>
|
|
|
+ <view class="one_2">
|
|
|
+ <button size="mini" class="button" type="primary" @click="searchInfo">搜索</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="two">
|
|
|
- <up-tabs :list="subjectList" keyName="label" @click="toTab"></up-tabs>
|
|
|
- </view>
|
|
|
- <view class="thr" v-if="total>0">
|
|
|
- <up-list @scrolltolower="scrolltolower">
|
|
|
- <up-list-item v-for="(item, index) in list" :key="index">
|
|
|
- <view class="list">
|
|
|
- <view class="left">
|
|
|
- <image v-if="item.icon&&item.icon.length>0&&item.icon" class="image"
|
|
|
- :src="item.icon[0].url">
|
|
|
- </image>
|
|
|
- <image v-else class="image" :src="config.icon[0].url"></image>
|
|
|
+ <view class="two" v-if="total>0">
|
|
|
+ <view class="two_1">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class="list" :class="[active==index?'listActive':'']" v-for="(item,index) in subjectList"
|
|
|
+ :key="index" @tap="toChange(index,item)">
|
|
|
+ <text>{{item.label}}</text>
|
|
|
</view>
|
|
|
- <view class="right">
|
|
|
- <view class="right_1">
|
|
|
- <view class="leftR">
|
|
|
- {{item.nick_name||'暂无昵称'}}
|
|
|
- </view>
|
|
|
- <view class="rightR">
|
|
|
- <view class="text">
|
|
|
- <span class="text_1">最近可约：</span>
|
|
|
- <span class="text_2">{{item.time||'休息中'}}</span>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="two_2">
|
|
|
+ <view class="two_2_1">
|
|
|
+ <up-tabs :list="gradeList" keyName="label" @click="toTab"></up-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="two_2_2" v-if="total>0">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class=" one_2_1">
|
|
|
+ <view class="list" v-for="(tag,index) in list" :key="index" @tap="toBuy(tag)">
|
|
|
+ {{tag.nick_name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="right_2">
|
|
|
- <view class="text"> 课程名称： </view>
|
|
|
- <view class="value"> {{item.course||'暂无'}} </view>
|
|
|
- </view>
|
|
|
- <view class="right_2">
|
|
|
- <view class="text"> 学历： </view>
|
|
|
- <view class="value">{{getDict(item.education,'education')}}</view>
|
|
|
- </view>
|
|
|
- <view class="right_3">
|
|
|
- <view class="money">￥{{item.money||'免费'}} </view>
|
|
|
- <view class="button">
|
|
|
- <button type="warn" size="mini" @click="toBuy(item)">预约</button>
|
|
|
- </view>
|
|
|
+ <view class="is_bottom" v-if="is_bottom">
|
|
|
+ <text>{{config.bottom_title}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </up-list-item>
|
|
|
- </up-list>
|
|
|
- </view>
|
|
|
- <up-empty v-else mode="list" icon="/static/list.png">
|
|
|
- </up-empty>
|
|
|
- <view class="is_bottom" v-if="is_bottom">
|
|
|
- <text>{{config.bottom_title||'没有更多了！'}}</text>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <up-empty v-else mode="list" icon="/static/list.png"></up-empty>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<up-overlay :show="show">
|
|
|
<login @showChange='showChange'></login>
|
|
|
@@ -62,11 +50,14 @@
|
|
|
import login from "@/components/login.vue"
|
|
|
import { inject, computed, ref } from 'vue';
|
|
|
//该依赖已内置不需要单独安装
|
|
|
- import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
|
|
|
+ import { onShow, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
|
|
|
// 请求接口
|
|
|
const $api = inject('$api');
|
|
|
// 基本信息
|
|
|
const config = ref({ logo: [], file: [] });
|
|
|
+ const type = ref('');
|
|
|
+ const subject = ref('-1');
|
|
|
+ const grade = ref('-1');
|
|
|
// 列表
|
|
|
const list = ref([]);
|
|
|
const total = ref(0);
|
|
|
@@ -77,14 +68,22 @@
|
|
|
const is_bottom = ref(false);
|
|
|
// 遮罩层
|
|
|
const show = ref(false);
|
|
|
+ const nick_name = ref('');
|
|
|
// 字典表
|
|
|
- const subjectList = ref([]);
|
|
|
const educationList = ref([]);
|
|
|
- const nick_name = ref('');
|
|
|
+ const active = ref(0);
|
|
|
+ const subjectList = ref([]);
|
|
|
+ const gradeList = ref([]);
|
|
|
// user
|
|
|
const user = computed(() => {
|
|
|
return uni.getStorageSync('user');
|
|
|
})
|
|
|
+ onLoad(async (options) => {
|
|
|
+ type.value = options && options.type
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: options && options.name + '课程' || '课程'
|
|
|
+ });
|
|
|
+ });
|
|
|
onShow(async () => {
|
|
|
await searchConfig();
|
|
|
await searchOther();
|
|
|
@@ -104,20 +103,22 @@
|
|
|
// 其他查询信息
|
|
|
const searchOther = async () => {
|
|
|
let res;
|
|
|
- // 学科
|
|
|
- res = await $api(`dictData`, 'GET', { code: 'subject', is_use: '0' });
|
|
|
- if (res.errcode === 0) subjectList.value = res.data;
|
|
|
- subjectList.value.unshift({ label: '全部', value: '-1', is_show: true })
|
|
|
// 学历
|
|
|
res = await $api(`dictData`, 'GET', { code: 'education', is_use: '0' });
|
|
|
if (res.errcode === 0) educationList.value = res.data;
|
|
|
+ // 学科
|
|
|
+ res = await $api(`dictData`, 'GET', { code: 'subject', is_use: '0' });
|
|
|
+ if (res.errcode === 0) subjectList.value = res.data;
|
|
|
+ subjectList.value.unshift({ label: '全部', value: '-1' })
|
|
|
+ // 年级
|
|
|
+ res = await $api(`dictData`, 'GET', { code: 'grade', is_use: '0' });
|
|
|
+ if (res.errcode === 0) gradeList.value = res.data;
|
|
|
+ gradeList.value.unshift({ label: '全部', value: '-1' })
|
|
|
};
|
|
|
// 名称搜索
|
|
|
const searchInfo = async () => {
|
|
|
- if (nick_name.value) {
|
|
|
- await clearPage();
|
|
|
- await search();
|
|
|
- }
|
|
|
+ await clearPage();
|
|
|
+ await search();
|
|
|
};
|
|
|
// 查询
|
|
|
const search = async () => {
|
|
|
@@ -139,10 +140,6 @@
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
- // 改变标签
|
|
|
- const toTab = async (data) => {
|
|
|
- console.log(data);
|
|
|
- };
|
|
|
const showChange = () => {
|
|
|
show.value = false
|
|
|
}
|
|
|
@@ -151,6 +148,18 @@
|
|
|
if (model == 'education') res = educationList.value.find((f) => f.value == data)
|
|
|
return res.label || '暂无'
|
|
|
}
|
|
|
+ // 左侧一级选择
|
|
|
+ const toChange = (index, e) => {
|
|
|
+ console.log(index, e);
|
|
|
+ active.value = index
|
|
|
+ subject.value = e.value
|
|
|
+ // that.clearPage();
|
|
|
+ // that.searchMarket();
|
|
|
+ }
|
|
|
+ // 改变标签
|
|
|
+ const toTab = async (data) => {
|
|
|
+ console.log(data);
|
|
|
+ };
|
|
|
const scrolltolower = () => {
|
|
|
if (total.value > list.value.length) {
|
|
|
uni.showLoading({
|
|
|
@@ -173,123 +182,115 @@
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- min-height: 100vh;
|
|
|
background-color: var(--f1Color);
|
|
|
|
|
|
.one {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
padding: 2vw;
|
|
|
background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .one_1 {
|
|
|
+ padding: 0 2vw;
|
|
|
+ width: 75vw;
|
|
|
+
|
|
|
+ input {
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--f1Color);
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_2 {
|
|
|
+ .button {
|
|
|
+ background-color: var(--3c9Color);
|
|
|
+ color: var(--mainColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.two {
|
|
|
- margin: 2vw;
|
|
|
- border-radius: 5px;
|
|
|
- background-color: var(--mainColor);
|
|
|
-
|
|
|
- }
|
|
|
- .thr {
|
|
|
- margin: 0 2vw;
|
|
|
-
|
|
|
- .list {
|
|
|
+ height: 90vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ position: relative;
|
|
|
+ width: 25vw;
|
|
|
+ background-color: #fafafa;
|
|
|
display: flex;
|
|
|
- margin: 2vw 0 0 0;
|
|
|
- padding: 2vw;
|
|
|
- border-radius: 5px;
|
|
|
- background-color: var(--mainColor);
|
|
|
-
|
|
|
- .left {
|
|
|
- width: 28%;
|
|
|
- margin: 0 2vw 0 0;
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 25vw;
|
|
|
- height: 25vw;
|
|
|
- border-radius: 25vw;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ text-align: center;
|
|
|
+ padding: 3.1vw 0;
|
|
|
+ border-bottom: 1px solid var(--f1Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: var(--font14Size);
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
- .right {
|
|
|
- width: 70%;
|
|
|
-
|
|
|
- .right_1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .leftR {
|
|
|
- width: 40%;
|
|
|
- font-size: var(--font16Size);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .rightR {
|
|
|
- width: 60%;
|
|
|
- text-align: right;
|
|
|
- font-size: var(--font12Size);
|
|
|
-
|
|
|
- .text {
|
|
|
- text-align: center;
|
|
|
- border: 1px solid var(--3c9Color);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 1vw;
|
|
|
- background: linear-gradient(to right, #ffffff, #3c9cff59);
|
|
|
-
|
|
|
- .text_1 {
|
|
|
- color: var(--3c9Color);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .text_2 {
|
|
|
- color: var(--ff0Color);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right_2 {
|
|
|
+
|
|
|
+ .listActive {
|
|
|
+ background-color: var(--3c9Color);
|
|
|
+ color: var(--mainColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ width: 75vw;
|
|
|
+ flex-grow: 1;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .two_2_1 {
|
|
|
+ background-color: var(--mainColor);
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2_2 {
|
|
|
+ flex-grow: 1;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 2vw 2vw 0 2vw;
|
|
|
+
|
|
|
+ .list {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 1vw 0 0 0;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: var(--font14Size);
|
|
|
- margin: 0 1vw 0 0;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- text-align: right;
|
|
|
- color: var(--f85Color);
|
|
|
- font-size: var(--font12Size);
|
|
|
- }
|
|
|
+ padding: 2vw;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: var(--mainColor);
|
|
|
}
|
|
|
-
|
|
|
- .right_3 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .money {
|
|
|
- width: 50%;
|
|
|
- font-size: var(--font14Size);
|
|
|
- color: var(--ff0Color);
|
|
|
- }
|
|
|
-
|
|
|
- .button {
|
|
|
- width: 50%;
|
|
|
- text-align: right;
|
|
|
-
|
|
|
- button {
|
|
|
- color: var(--mainColor);
|
|
|
- background: linear-gradient(to right, #1e3fdc, #3c9cff);
|
|
|
- font-size: var(--font12Size);
|
|
|
- border-radius: 5vw;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .is_bottom {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 2vw 0;
|
|
|
+ display: inline-block;
|
|
|
+ color: var(--f85Color);
|
|
|
+ font-size: var(--font12Size);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .list-scroll-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
