425 lines
7.2 KiB
Vue
425 lines
7.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="container">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="my-header">
|
||
<view class="my-icons" @click="goback">
|
||
<uni-icons type="arrow-left" color="#000000" size="22px"></uni-icons>
|
||
</view>
|
||
<view class="my-text">{{titles}}</view>
|
||
<view class="my-icons"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="gs-box">
|
||
<u-empty mode="list" v-if="schoolList&&schoolList.length <1 "></u-empty>
|
||
|
||
|
||
<!-- <view @click="goScheduleTraining(item.jxId)" class="box-goods" v-for="(item,index) in schoolList" :key="index"> -->
|
||
<view @click="goDetailsPage(item.id)" class="box-goods" v-for="(item,index) in schoolList" :key="index">
|
||
<view class="img-url">
|
||
<!-- <image src="../../static/imgs/ban1.png" mode=""></image> -->
|
||
<image :src=" baseUrl + item.photo " mode=""></image>
|
||
</view>
|
||
<view class="pr-a">
|
||
<image src="../../static/imgs/ttel.png" mode=""></image>
|
||
</view>
|
||
<view style="width: 75%;">
|
||
<view class="title_">{{item.schoolName}}</view>
|
||
<view class="time_">营业中 {{item.businessStartTime}}-{{item.businessEndTime}}</view>
|
||
<view class="wrap-box">
|
||
<view class="icon-w">{{item.announcement}}</view>
|
||
<!-- <view class="icon-x">规模大 </view> -->
|
||
</view>
|
||
<view style="width: 75%;" v-if="item.address" class="time_">{{item.address}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<u-loadmore :status="status" v-if="show == true" />
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from '../../components/header/headers.vue'
|
||
import request from '@/utils/request.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
titles: "驾校列表",
|
||
msg: "1",
|
||
List: [],
|
||
show: false,
|
||
status: 'loading',
|
||
baseUrl: this.$baseUrl,
|
||
schoolList: []
|
||
}
|
||
},
|
||
onShow() {
|
||
// this.actList = ["1", "1", "1", "1", "1", ]
|
||
// this.status = "nomore" 底部刷新结束
|
||
this.findSelfSchoolList()
|
||
},
|
||
onPullDownRefresh() {
|
||
console.log("刷新");
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
onReachBottom() {
|
||
// this.show = true
|
||
setTimeout(() => {
|
||
console.log("加载执行");
|
||
}, 2000)
|
||
},
|
||
// 发送好友
|
||
onShareAppMessage(res) {
|
||
return {
|
||
title: this.titles,
|
||
path: '/pages/index/index',
|
||
}
|
||
},
|
||
// 分享朋友圈
|
||
onShareTimeline(res) {
|
||
return {
|
||
title: this.titles,
|
||
path: '/pages/index/index',
|
||
}
|
||
},
|
||
components: {
|
||
headers
|
||
|
||
},
|
||
methods: {
|
||
goback() {
|
||
uni.navigateBack()
|
||
},
|
||
async findSelfSchoolList() {
|
||
let res = await request({
|
||
url: `/drivingSchool/system/schoolInfo/list`,
|
||
method: `get`
|
||
})
|
||
this.schoolList = res.rows,
|
||
console.log("列表数据为 =============>>>", this.schoolList)
|
||
},
|
||
goScheduleTraining(id) {
|
||
uni.navigateTo({
|
||
url: '/pages/index/ScheduleTraining?jxId=' + id
|
||
})
|
||
},
|
||
goDetailsPage(id) {
|
||
uni.navigateTo({
|
||
url: '/pages/index/Details?id=' + id,
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
background: #f4f5f6;
|
||
|
||
height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
background: #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding-top: 88px;
|
||
}
|
||
|
||
.gs-box {
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
.box-goods {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10px auto;
|
||
position: relative;
|
||
}
|
||
|
||
.img-url {
|
||
width: 100px;
|
||
height: 75px;
|
||
border-radius: 8px;
|
||
margin-right: 10px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
}
|
||
}
|
||
|
||
.time_ {
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #666666;
|
||
overflow: hidden; //超出盒子宽度内容，便溢出隐藏
|
||
text-overflow: ellipsis; //用...省略号显示
|
||
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
|
||
-webkit-box-orient: vertical; //从上到下垂直排列子元素
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.pr-a {
|
||
width: 35px;
|
||
height: 35px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 15px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
}
|
||
}
|
||
|
||
.input-box {
|
||
width: 95%;
|
||
height: 36px;
|
||
border-radius: 50px;
|
||
margin: 10px auto;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
.swiper {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.swiper-box {
|
||
width: 100%;
|
||
height: 150px;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
// background: #47a5f6;
|
||
}
|
||
|
||
.top-box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10px auto;
|
||
|
||
}
|
||
|
||
.jgbox {
|
||
width: 20%;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
}
|
||
|
||
.jg-img {
|
||
width: 35px;
|
||
height: 35px;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin: 5px auto;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.jb-box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
}
|
||
|
||
.lift-box {
|
||
width: 40px;
|
||
height: 40px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.hang- {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.qiu {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #333333;
|
||
}
|
||
|
||
.bai-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
|
||
|
||
}
|
||
|
||
.icon-gd {
|
||
width: 48px;
|
||
height: 20px;
|
||
background: #4AA76F;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
border-radius: 50px;
|
||
|
||
}
|
||
|
||
.hang-hui {
|
||
width: 100%;
|
||
height: 15px;
|
||
background: #f4f5f6;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.d-box {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 95%;
|
||
margin: 0px auto;
|
||
}
|
||
|
||
.img-left {
|
||
width: 106px;
|
||
height: 66px;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-right: 10px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.title_ {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.price- {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
color: #FB423B;
|
||
}
|
||
|
||
.hui- {
|
||
font-weight: 400;
|
||
font-size: 10px;
|
||
color: #AAAAAA;
|
||
text-decoration: line-through;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.wrap-box {
|
||
flex-wrap: wrap;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 5px auto;
|
||
}
|
||
|
||
.icon-w {
|
||
background: #E6F5F0;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #4AA76F;
|
||
margin-right: 5px;
|
||
font-size: 10px;
|
||
box-sizing: border-box;
|
||
padding: 4px 5px;
|
||
}
|
||
|
||
.icon-x {
|
||
background: #FFEDD4;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #EDA23A;
|
||
margin-right: 5px;
|
||
font-size: 10px;
|
||
box-sizing: border-box;
|
||
padding: 4px 5px;
|
||
}
|
||
|
||
.top-bs {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.s-s-box {
|
||
width: 33%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #4AA76F;
|
||
}
|
||
|
||
.my-header {
|
||
width: 100%;
|
||
height: 88px;
|
||
// background: linear-gradient(180deg, #B2D2FC 0%, rgba(255, 255, 255, 0.84) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #000;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
padding-top: 40px;
|
||
z-index: 99999;
|
||
background: #fff;
|
||
position: fixed;
|
||
top: 0px;
|
||
|
||
.my-icons {
|
||
width: 20px;
|
||
|
||
}
|
||
|
||
.my-text {
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|