You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.1 KiB
121 lines
3.1 KiB
3 years ago
|
<template>
|
||
|
|
<view class="volume-box">
|
||
|
|
<swiper
|
||
|
|
class="swiper"
|
||
|
|
circular
|
||
|
|
:autoplay="autoplay"
|
||
|
|
:interval="interval"
|
||
|
|
:duration="duration"
|
||
|
|
previous-margin="45rpx"
|
||
|
|
next-margin="45rpx"
|
||
|
|
@change="changeCard"
|
||
|
|
>
|
||
|
|
<swiper-item v-for="(item, index) in itemList" :key="item.id" @click="openProject(item)">
|
||
|
|
<view
|
||
|
|
class="swiper-item flex items-center justify-center"
|
||
|
|
:class="['card-item', currentCardIndex === index ? 'card-item-current' : 'card-item-default']"
|
||
|
|
style="transition: all 0.3s"
|
||
|
|
>{{ item.name }}</view
|
||
|
|
>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapState, mapGetters, mapMutations } from 'vuex';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
autoplay: false,
|
||
|
|
interval: 2000,
|
||
|
|
duration: 500,
|
||
|
|
itemList: [],
|
||
|
|
currentCardIndex: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
projects(val) {
|
||
|
|
this.itemList = val;
|
||
|
|
this.itemList.forEach(item => {
|
||
|
|
item.showBorder = false;
|
||
|
|
item.showSubBorder = false;
|
||
|
|
item.showTopBorder = false;
|
||
|
|
});
|
||
|
|
console.log('this.itemList: ', this.itemList);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState('user', ['user']),
|
||
|
|
...mapState('project', ['projects']),
|
||
|
|
...mapGetters('user', ['userId']),
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(function () {
|
||
|
|
this.itemList = this.projects;
|
||
|
|
this.itemList.forEach(item => {
|
||
|
|
item.showBorder = false;
|
||
|
|
item.showSubBorder = false;
|
||
|
|
item.showTopBorder = false;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapMutations('carbasics', ['setGlobalData']),
|
||
|
|
...mapMutations('task', ['setPermanents', 'setDailyTasks']),
|
||
|
|
changeCard(e) {
|
||
|
|
this.currentCardIndex = e.detail.current;
|
||
|
|
},
|
||
|
|
// 打开项目详情
|
||
|
|
openProject(project) {
|
||
|
|
const { name, id, url, templateCode } = project;
|
||
|
|
url && (uni.$t.domain = url);
|
||
|
|
if (templateCode === 'carbasics') {
|
||
|
|
// 跳转项目时,清空当前的插件缓存
|
||
|
|
this.setGlobalData({});
|
||
|
|
this.setPermanents(null);
|
||
|
|
this.setDailyTasks(null);
|
||
|
|
uni.navigateTo({ url: `/pages/task-page/task-page?u=${this.userId}&p=${id}&pname=${name}&url=${encodeURIComponent(url)}` });
|
||
|
|
} else {
|
||
|
|
this.$u.route('pages/project-webview/project-webview', {
|
||
|
|
u: this.userId,
|
||
|
|
p: id,
|
||
|
|
pname: name,
|
||
|
|
url: encodeURIComponent(url),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.card-item-default {
|
||
|
|
transform: scale(0.96, 0.96) translateY(8.5rpx);
|
||
|
|
}
|
||
|
|
.swiper {
|
||
|
|
height: 240rpx;
|
||
|
|
/* background: rgba(255, 255, 255, 0); */
|
||
|
|
}
|
||
|
|
.swiper-item {
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: bold;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
background: url('https://www.tall.wiki/gateway/carbasics/v4.0/uploads/project.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
.volume-box {
|
||
|
|
width: 700rpx;
|
||
|
|
height: 120px;
|
||
|
|
margin: 0 25rpx 25rpx 25rpx;
|
||
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
|
|
border-radius: 8rpx;
|
||
|
|
/* overflow: hidden; */
|
||
|
|
/* background: #f9fafb; */
|
||
|
|
/* padding: 32rpx; */
|
||
|
|
}
|
||
|
|
</style>
|