index.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <template>
  2. <view class="content">
  3. <view class="one">
  4. <u-swiper :radius="0" :list="config.file" height="240px" indicator indicatorMode="dot" circular></u-swiper>
  5. </view>
  6. <view class="two" v-if="config.notice">
  7. <up-notice-bar :text="config.notice" duration="3000"></up-notice-bar>
  8. </view>
  9. <view class="thr">
  10. <view class="list" v-for="(item, index) in typeList" :key="index" @click="toList(item)">
  11. <text class="t-icon" :class="[item.remark]"></text>
  12. <view class="text">{{item.label}}</view>
  13. </view>
  14. </view>
  15. <view class="four">
  16. <up-tabs :list="subjectList" keyName="label" @click="toTab"></up-tabs>
  17. </view>
  18. <view class="five" v-if="total>0">
  19. <up-list @scrolltolower="scrolltolower">
  20. <up-list-item v-for="(item, index) in list" :key="index">
  21. <view class="list">
  22. <view class="left">
  23. <image v-if="item.icon&&item.icon.length>0&&item.icon" class="image"
  24. :src="item.icon[0].url">
  25. </image>
  26. <image v-else class="image" :src="config.icon[0].url"></image>
  27. </view>
  28. <view class="right">
  29. <view class="right_1">
  30. <view class="leftR">
  31. {{item.course||'暂无'}}
  32. </view>
  33. <view class="rightR">
  34. <view class="text">
  35. <span class="text_1">最近可约:</span>
  36. <span class="text_2">{{item.time||'休息中'}}</span>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="right_2">
  41. <view class="text">老师: </view>
  42. <view class="value"> {{item.nick_name||'暂无'}} </view>
  43. </view>
  44. <view class="right_2">
  45. <view class="text"> 内容: </view>
  46. <view class="value textOne">{{item.content||'暂无'}}</view>
  47. </view>
  48. <view class="right_3">
  49. <view class="money">¥{{item.money||'免费'}} </view>
  50. <view class="button">
  51. <button type="warn" size="mini" @click="toBuy(item)">预约</button>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </up-list-item>
  57. </up-list>
  58. </view>
  59. <up-empty v-else mode="list" icon="/static/list.png"></up-empty>
  60. <view class="is_bottom" v-if="is_bottom">
  61. <text>{{config.bottom_title||'没有更多了!'}}</text>
  62. </view>
  63. <up-overlay :show="show">
  64. <login @showChange='showChange'></login>
  65. </up-overlay>
  66. </view>
  67. </template>
  68. <script setup lang="ts">
  69. import login from "@/components/login.vue"
  70. import { inject, computed, ref } from 'vue';
  71. //该依赖已内置不需要单独安装
  72. import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
  73. // 请求接口
  74. const $api = inject('$api');
  75. const $apifile = inject('$apifile');
  76. // 基本信息
  77. const typeList = ref([]);
  78. const config = ref({ icon: [], logo: [], file: [] });
  79. // 列表
  80. const list = ref([]);
  81. const total = ref(0);
  82. const skip = ref(0);
  83. const limit = ref(5);
  84. const page = ref(0);
  85. // 数据是否触底
  86. const is_bottom = ref(false);
  87. // 字典表
  88. const subjectList = ref([]);
  89. const educationList = ref([]);
  90. // 遮罩层
  91. const show = ref(false);
  92. // user
  93. const user = computed(() => {
  94. return uni.getStorageSync('user');
  95. })
  96. onShow(async () => {
  97. await searchConfig();
  98. await searchOther();
  99. await clearPage();
  100. await search();
  101. if (!user.value) show.value = true
  102. })
  103. onPullDownRefresh(async () => {
  104. await clearPage();
  105. await search();
  106. uni.stopPullDownRefresh();
  107. })
  108. // config信息
  109. const searchConfig = async () => {
  110. config.value = uni.getStorageSync('config');
  111. };
  112. // 其他查询信息
  113. const searchOther = async () => {
  114. let res;
  115. // 学科
  116. res = await $api(`dictData`, 'GET', { code: 'subject', is_use: '0' });
  117. if (res.errcode === 0) subjectList.value = res.data;
  118. subjectList.value.unshift({ label: '全部', value: '-1', is_show: true })
  119. // 学历
  120. res = await $api(`dictData`, 'GET', { code: 'education', is_use: '0' });
  121. if (res.errcode === 0) educationList.value = res.data;
  122. // 类型
  123. res = await $api(`dictData`, 'GET', { code: 'courseType', is_use: '0' });
  124. if (res.errcode === 0) typeList.value = res.data;
  125. };
  126. // 查询
  127. const search = async () => {
  128. const info : any = {
  129. skip: skip.value,
  130. limit: limit.value,
  131. status: '1',
  132. is_show: '0'
  133. }
  134. const res = await $api('teacher', 'GET', info);
  135. if (res.errcode === 0) {
  136. list.value = list.value.concat(res.data)
  137. total.value = res.total
  138. } else {
  139. uni.showToast({
  140. title: res.errmsg || '',
  141. icon: 'error',
  142. });
  143. }
  144. };
  145. // 改变标签
  146. const toTab = async (data) => {
  147. console.log(data);
  148. };
  149. const getDict = (data, model) => {
  150. let res
  151. if (model == 'education') res = educationList.value.find((f) => f.value == data)
  152. return res.label || '暂无'
  153. }
  154. const showChange = () => {
  155. show.value = false
  156. }
  157. // 去预约
  158. const toBuy = (item) => {
  159. console.log(item);
  160. }
  161. // 去查看
  162. const toList = (item) => {
  163. uni.navigateTo({
  164. url: `/pagesHome/list/index?type=${item.value}&name=${item.label}`
  165. })
  166. }
  167. const scrolltolower = () => {
  168. if (total.value > list.value.length) {
  169. uni.showLoading({
  170. title: '加载中',
  171. mask: true
  172. })
  173. page.value = page.value + 1;
  174. skip.value = page.value * limit.value;
  175. search();
  176. uni.hideLoading();
  177. } else is_bottom.value = true
  178. };
  179. // 清空列表
  180. const clearPage = () => {
  181. list.value = []
  182. skip.value = 0
  183. limit.value = 6
  184. page.value = 0
  185. };
  186. </script>
  187. <style lang="scss" scoped>
  188. .content {
  189. display: flex;
  190. flex-direction: column;
  191. min-height: 100vh;
  192. background-color: var(--f1Color);
  193. .two {
  194. margin: 2vw 2vw 0 2vw;
  195. border-radius: 5px;
  196. }
  197. .thr {
  198. display: flex;
  199. justify-content: space-between;
  200. align-items: center;
  201. background-color: var(--mainColor);
  202. margin: 2vw;
  203. border-radius: 5px;
  204. padding: 2vw 4vw;
  205. .list {
  206. display: flex;
  207. flex-direction: column;
  208. align-items: center;
  209. .text {
  210. margin: 2vw 0 0 0;
  211. font-size: var(--font14Size);
  212. }
  213. }
  214. }
  215. .four {
  216. margin: 0 2vw;
  217. border-radius: 5px;
  218. background-color: var(--mainColor);
  219. }
  220. .five {
  221. margin: 0 2vw;
  222. .list {
  223. display: flex;
  224. margin: 2vw 0 0 0;
  225. padding: 2vw;
  226. border-radius: 5px;
  227. background-color: var(--mainColor);
  228. .left {
  229. width: 28%;
  230. margin: 0 2vw 0 0;
  231. .image {
  232. width: 25vw;
  233. height: 25vw;
  234. border-radius: 2vw;
  235. }
  236. }
  237. .right {
  238. width: 70%;
  239. .right_1 {
  240. display: flex;
  241. align-items: center;
  242. justify-content: space-between;
  243. .leftR {
  244. width: 40%;
  245. font-size: var(--font16Size);
  246. font-weight: bold;
  247. }
  248. .rightR {
  249. width: 60%;
  250. text-align: right;
  251. font-size: var(--font12Size);
  252. .text {
  253. text-align: center;
  254. border: 1px solid var(--3c9Color);
  255. border-radius: 4px;
  256. padding: 1vw;
  257. background: linear-gradient(to right, #ffffff, #3c9cff59);
  258. .text_1 {
  259. color: var(--3c9Color);
  260. font-weight: bold;
  261. }
  262. .text_2 {
  263. color: var(--ff0Color);
  264. }
  265. }
  266. }
  267. }
  268. .right_2 {
  269. display: flex;
  270. align-items: center;
  271. margin: 1vw 0 0 0;
  272. .text {
  273. font-size: var(--font14Size);
  274. margin: 0 1vw 0 0;
  275. }
  276. .value {
  277. text-align: right;
  278. color: var(--f85Color);
  279. font-size: var(--font12Size);
  280. }
  281. }
  282. .right_3 {
  283. display: flex;
  284. align-items: center;
  285. justify-content: space-between;
  286. .money {
  287. width: 50%;
  288. font-size: var(--font14Size);
  289. color: var(--ff0Color);
  290. }
  291. .button {
  292. width: 50%;
  293. text-align: right;
  294. button {
  295. color: var(--mainColor);
  296. background: linear-gradient(to right, #1e3fdc, #3c9cff);
  297. font-size: var(--font12Size);
  298. border-radius: 5vw;
  299. }
  300. }
  301. }
  302. }
  303. }
  304. }
  305. .is_bottom {
  306. width: 100%;
  307. text-align: center;
  308. text {
  309. padding: 2vw 0;
  310. display: inline-block;
  311. color: var(--f85Color);
  312. font-size: var(--font12Size);
  313. }
  314. }
  315. }
  316. </style>