|
|
@@ -17,6 +17,7 @@
|
|
|
v-if="item.card"
|
|
|
:data="item.card"
|
|
|
class="margin-top-20"
|
|
|
+ @action-click="handleCardAction"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
@@ -78,6 +79,38 @@ export default {
|
|
|
}
|
|
|
return list;
|
|
|
}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 处理卡片按钮点击事件
|
|
|
+ handleCardAction(cardData) {
|
|
|
+ if (cardData.btnText === '立即执行') {
|
|
|
+ // 1. 修改文案和按钮样式状态(可选:根据你的业务,让按钮退回普通样式)
|
|
|
+ cardData.btnText = '立即解锁';
|
|
|
+ cardData.btnType = 'normal';
|
|
|
+
|
|
|
+ // 2. 自动切换到下一个
|
|
|
+ this.slideNext();
|
|
|
+
|
|
|
+ // 3. (可选) 这里可以顺便发送请求给后端,告知该路口已执行
|
|
|
+ console.log(`路口 [${cardData.name}] 已执行特勤方案`);
|
|
|
+
|
|
|
+ } else if (cardData.btnText === '立即解锁') {
|
|
|
+ // 如果再次点击(已经是解锁状态),可以重置回执行状态,按需保留
|
|
|
+ cardData.btnText = '立即执行';
|
|
|
+ cardData.btnType = 'primary';
|
|
|
+
|
|
|
+ console.log(`路口 [${cardData.name}] 已解除特勤方案`);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 调用 Swiper 实例滑动到下一页
|
|
|
+ slideNext() {
|
|
|
+ // 兼容不同版本的 vue-awesome-swiper 实例获取方式
|
|
|
+ const swiperInstance = this.$refs.mySwiper.$swiper || this.$refs.mySwiper.swiper;
|
|
|
+ if (swiperInstance) {
|
|
|
+ swiperInstance.slideNext();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|