前端Vue仿京東加入購物車彈框立即購買彈框shopDialog自定義彈框內容， 下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13183
效果圖如下：
cc-shopDialog
使用方法
使用注意： 該插件需參考cc-radioBtnBox插件和cc-numbox插件兩個插件庫
cc-radioBtnBox插件地址：https://ext.dcloud.net.cn/plugin?id=13176
cc-numbox插件地址：https://ext.dcloud.net.cn/plugin?id=13163
<!-- dialogHeight：彈框高度 shopItem:商品資料 @close：關閉彈框 @toCart：加入購物車事件回傳當前shopitem資料 @toBuy：立即購買事件回傳當前shopitem資料 -->
<cc-shopDialog :dialogHeight="440" :shopItem="shopItem" @close="closeShopDialog" @toCart="toCart"
@toBuy="toBuy" :></cc-shopDialog>
HTML代碼實作部分
<template>
<view >
<button @click="showShopDialog">顯示購物車</button>
<!-- dialogHeight：彈框高度 shopItem:商品資料 @close：關閉彈框 @toCart：加入購物車事件回傳當前shopitem資料 @toBuy：立即購買事件回傳當前shopitem資料 -->
<cc-shopDialog :dialogHeight="440" :shopItem="shopItem" @close="closeShopDialog" @toCart="toCart"
@toBuy="toBuy" :></cc-shopDialog>
</view>
</template>
<script>
export default {
data() {
return {
shopFlag: false,
shopItem: {
'imgUrl': 'https://cdn.pixabay.com/photo/2014/08/05/10/30/iphone-410324_1280.jpg', //圖片地址
'price': '', // 價格 通過計算得來
'attrTxt': '', //屬性文本 通過計算得來
'num': '1', // 購買數量
'maxNum': '60', // 購買最大數量
// 屬性資料
'attrArr': [{
attr: '系列',
value: ['iphone 14系列', 'iphone 14 Pro系列']
},
{
attr: '版本',
value: ['256GB', '512GB']
}
],
'selAttrArr': [0, 0], //選擇的屬性序列陣列
// 價格字典 根據屬性組合對應價格
'priceDict': {
'iphone 14系列,256GB': '5600',
'iphone 14系列,512GB': '6400',
'iphone 14 Pro系列,256GB': '6200',
'iphone 14 Pro系列,512GB': '6900'
},
}
};
},
methods: {
//顯示購買彈窗
showShopDialog() {
this.shopFlag = true
},
closeShopDialog() {
this.shopFlag = false
},
toCart(item) {
console.log('加入購物車商品資料 = ' + JSON.stringify(item))
uni.showModal({
title: '加入購物車',
content: '加入購物車商品資料 = ' + JSON.stringify(item)
})
},
toBuy(item) {
console.log('立即購買商品資料 = ' + JSON.stringify(item))
uni.showModal({
title: '立即購買',
content: '立即購買商品資料 = ' + JSON.stringify(item)
})
},
}
}
</script>
<style scoped lang="scss">
page {
padding-bottom: 70px;
}
.btnV {
width: 180px;
height: 44px;
margin-top: 36px;
}
.hidden {
display: none;
}
.show {
display: block;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555956.html
標籤：其他
下一篇：返回列表