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