Skip to content

tjty-app
tjty-app
Commit ad93ccbe authored by 王宝峰's avatar 王宝峰
Browse files
Options

删除卡片当中的详情按钮，改为全卡片触发

parent 8eb921e3
Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 148 deletions
tjty-app/pages_course/tjty_course_course/course.vue
View file @ ad93ccbe
......@@ -15,7 +15,7 @@
<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
<swiper-item class="swiperitem-content">
<scroll-view scroll-y style="height: 100%;" lower-threshold="20px">
<scroll-view scroll-y style="height: 100%;" lower-threshold="20px">
<view class="nav_item">
<view v-if="ByTypelist.length == 0">
<view class="none">
......@@ -30,27 +30,22 @@
</view>
</view>
</view>
<view v-else class="card" v-for="(item,index) in ByTypelist" :key="index">
<view v-else class="card" v-for="(item,index) in ByTypelist" :key="index"
@click="toAppoint(item)">
<view class="ima">
<image style="width: 116px;height:116px;border-radius:16px " :src="item.image"></image>
<image style="width: 116px;height:116px;border-radius:16px " :src="item.image"></image>
</view>
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
<view>
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
</view>
</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more" v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more"
v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
</view>
</scroll-view>
</swiper-item>
......@@ -70,28 +65,29 @@
</view>
</view>
</view >
</view>
<view v-else class="card" v-for="(item,index) in ByTypelist" :key="index">
<view class="ima">
<image style="width: 116px;height:116px;border-radius:16px " :src="item.image"></image>
</view>
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
</view>
</view>
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
</view>
</view>
</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more" v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more"
v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
</view>
</scroll-view>
</swiper-item>
......@@ -116,23 +112,24 @@
<view class="ima">
<image style="width: 116px;height:116px;border-radius:16px " :src="item.image"></image>
</view>
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
</view>
</view>
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
</view>
</view>
</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more" v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more"
v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
</view>
</scroll-view>
</swiper-item>
......@@ -154,25 +151,26 @@
</view>
<view v-else class="card" v-for="(item,index) in ByTypelist" :key="index">
<view class="ima">
<image style="width: 116px;height:116px;border-radius:16px " :src="item.image"></image>
<image style="width: 116px;height:116px;border-radius:16px " :src="item.image"></image>
</view>
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
</view>
</view>
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
</view>
</view>
</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more" v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more"
v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
</view>
</scroll-view>
</swiper-item>
......@@ -190,30 +188,31 @@
margin: 40rpx 0 0 268rpx;
color: #666666;">暂无数据</view>
</view>
</view>
</view >
</view>
<view v-else class="card" v-for="(item,index) in ByTypelist" :key="index">
<view class="ima">
<image style="width: 116px;height:116px;border-radius:16px " :src="item.image"></image>
<image style="width: 116px;height:116px;border-radius:16px " :src="item.image"></image>
</view>
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
</view>
</view>
<view>
<view style="height: 80px;width: 265px">
<view class="a-card">
{{item.mechanismName|ellipsis}}
</view>
<view class="c-card">
适用人群:&nbsp;&nbsp;{{item.propertyPeople|elli}}
</view>
</view>
<view style="width: 265px;right: 5%;">
<button class="b-card" @click="toAppoint(item)">
详情
</button>
</view>
</view>
</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more" v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
<view style="margin-left: 40%;margin-bottom: 20px;color: #666666;" @tap="more"
v-show="total >= queryParams.pageNum * queryParams.pageSize">加载更多~</view>
</view>
</scroll-view>
</swiper-item>
......@@ -246,12 +245,12 @@
},
data() {
return {
max:10,
f:10,
max: 10,
f: 10,
// token:uni.getStorageSync("token"),
onMore: true,
loadStatus:'loading',
isLoadMore:false,
loadStatus: 'loading',
isLoadMore: false,
triggered: false,
url: '/pages_course/tjty_course_course/course',
type: 1,
......@@ -308,22 +307,22 @@
...mapState('m_user', ['token'])
},
filters: {
ellipsis(value){
if (!value) return '';
if (value.length > 12) {
return value.slice(0,12) + '...'
}
return value
},
elli(value){
if (!value) return '';
if (value.length > 7) {
return value.slice(0,7) + '...'
}
return value
}
ellipsis(value) {
if (!value) return '';
if (value.length > 12) {
return value.slice(0, 12) + '...'
}
return value
},
elli(value) {
if (!value) return '';
if (value.length > 7) {
return value.slice(0, 7) + '...'
}
return value
}
},
mounted() {
var that = this;
......@@ -339,25 +338,25 @@
onLoad() {
this.login()
this.list(1, this.queryParams.pageNum)
// this.getList()
},
methods: {
more() {
this.max += 10; //每次点击加1条
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total)
return uni.$showMsg('数据加载完毕！')
// if (this.isloading) return
//让页码自增1
this.queryParams.pageNum += 1
console.log(this.queryParams.pageNum)
// 重新获取列表数据
this.flag = false
this.list(this.type, this.queryParams.pageNum)
},
this.max += 10; //每次点击加1条
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total)
return uni.$showMsg('数据加载完毕！')
// if (this.isloading) return
//让页码自增1
this.queryParams.pageNum += 1
console.log(this.queryParams.pageNum)
// 重新获取列表数据
this.flag = false
this.list(this.type, this.queryParams.pageNum)
},
...mapMutations('m_user', ['updateToken']),
...mapMutations('m_user', ['updateUserInfo']),
//登录判断
......@@ -371,7 +370,7 @@
this.getWXUserCode()
}
},
//获取更新token
getWXUserCode() {
console.log(this.token);
......@@ -425,13 +424,13 @@
this.scrollLeft += this.category[i].width
};
},
list(id,pageNum) {
list(id, pageNum) {
listByType(id, pageNum).then(response => {
console.log(response);
if (this.flag) {
this.ByTypelist = []
}
this.ByTypelist = [...this.ByTypelist, ...response.rows]
this.ByTypelist = [...this.ByTypelist, ...response.rows]
// console.log(this.ByTypelist.image)
// console.log(this.ByTypelist)
if (this.ByTypelist.length >= response.total) {
......@@ -552,54 +551,53 @@
button {
margin-right: 5%;
}
.ima {
margin: 8px;
width: 116px;
height: 116px;
background: rgba(0, 0, 0, 0.00);
}
.c-card {
font-size: 32rpx;
width: 500rpx;
height:80rpx ;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: left;
color: #666666;
line-height: 50px;
line-height: 100rpx;
}
.a-card {
font-size: 32rpx;
line-height: 120rpx;
width: 500rpx;
font-family: Source Han Sans CN, Source Han Sans CN-Bold;
font-weight: 700;
text-align: left;
color: #333333;
line-height: 42px;
}
}
.b-card {
// left: 132px;
top: 25rpx;
width: 152rpx;
height: 64rpx;
right:20%;
right: 20%;
// height: auto;
text-align: center;
color: #ffffff;
......@@ -647,15 +645,15 @@
height: 334rpx;
}
.bottomAdd {
display: flex;
justify-content: center;
margin-left: 50%;
color: rgb(94, 94, 94);
padding-bottom: 10px;
}
display: flex;
justify-content: center;
margin-left: 50%;
color: rgb(94, 94, 94);
padding-bottom: 10px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment