在JS中定時器有非常大的作用，例如： 執行延遲操作：使用setTimeout可以在一定的延遲後執行特定的代碼。這對於需要在一定時間後執行某些操作的情況非常有用，例如延遲顯示提示信息、執行動畫效果等。 定期刷新數據：使用setInterval可以定期執行某段代碼，例如定時從伺服器獲取最新數據並更新頁面 ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。 組件化對於任何一個業務場景複雜的前端應用以及經過多次迭代之後的產品來說都是必經之路。組件化要做的不僅僅是錶面上看到的模塊拆分解耦，其背後還有很多工作來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的交互方式和構建系統等等 。 前端的組件化，其實是對項目進行自上而下的拆分，把通用的、可復用的功能以黑盒的形式封裝到一個組間中，然後暴露一些開箱即用的函數和屬性配置供外部組件調用，實現與業務邏輯的解耦，來達到代碼間的高內聚、低耦合，實現功能模塊的可配置、可復用、可擴展。
今天給大家介紹的一款組件是仿京東拼多多領取優惠券彈出框popup組件, 可用於電商商品詳情領券場景使用，下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13405
效果圖如下:
cc-defineCoupon
使用方法
<!-- 選擇優惠券彈出層 -->
<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
<view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
<scroll-view class="scrolls" scroll-y>
<!-- colors:按鈕顏色 couponList:優惠捲列表數據 @onReceive：領取或立即使用按鈕事件 -->
<cc-defineCoupon colors="#fa436a" :couponList="couponList" @onReceive="onReceive"></cc-defineCoupon>
</scroll-view>
</view>
// 打開優惠券彈框
opencoupon() {
this.couponshow = true
},
// 關閉優惠券彈框
hidecoupon() {
this.couponshow = false
},
//領取優惠券 立即使用事件
onReceive(item, index) {
console.log(item, index)
if (item.status == 1) {
// 立即使用 事件
} else {
this.couponList[index].status = 1 //領取成功
uni.showToast({
title: '領取成功',
icon: 'none'
})
}
},
HTML代碼實現部分
<template>
<view class="content">
<button style="margin-top: 38px;" @click="opencoupon()">彈出優惠券</button>
<!-- 選擇優惠券彈出層 -->
<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
<view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
<scroll-view class="scrolls" scroll-y>
<!-- colors:按鈕顏色 couponList:優惠捲列表數據 @onReceive：領取或立即使用按鈕事件 -->
<cc-defineCoupon colors="#fa436a" :couponList="couponList" @onReceive="onReceive"></cc-defineCoupon>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
couponshow: false,
couponList: [ //優惠券列表
{
money: 100,
reduce: 10,
date: '2023-05-09 2023-10-02',
id: 1,
status: 0,
condition: ['新人專享', '通用捲']
}, {
money: 100,
reduce: 20,
date: '2023-02-09 2023-10-02',
id: 2,
status: 0,
condition: ['會員專享', '通用捲']
}, {
money: 100,
reduce: 30,
date: '2023-02-09 2023-10-02',
id: 3,
status: 0,
condition: ['數位產品可用', '不可與其他產品共用']
}, {
money: 100,
reduce: 40,
date: '2023-02-09 2023-10-02',
id: 4,
status: 0,
condition: ['新人專享', '可與其他產品共用']
}, {
money: 100,
reduce: 50,
date: '2023-02-09 2023-10-02',
id: 5,
status: 0,
condition: ['新人專享', '僅在支付時使用']
}
],
}
},
methods: {
// 打開優惠券彈框
opencoupon() {
this.couponshow = true
},
// 關閉優惠券彈框
hidecoupon() {
this.couponshow = false
},
//領取優惠券 立即使用事件
onReceive(item, index) {
console.log(item, index)
if (item.status == 1) {
// 立即使用 事件
} else {
this.couponList[index].status = 1 //領取成功
uni.showToast({
title: '領取成功',
icon: 'none'
})
}
},
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
}
.mask {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 900;
opacity: 0.7;
}
/* 優惠券 */
.coupon {
background-color: #fff;
border-radius: 10upx 10upx 0 0;
position: fixed;
left: 0;
bottom: -1000upx;
z-index: 999;
transition: all 0.3s;
}
.scrolls {
width: 100vw;
height: 60vh;
padding-top: 10upx;
z-index: 500;
}
</style>
