前端Vue仿京東加入購(gòu)物車彈框立即購(gòu)買彈框shopDialog自定義彈框內(nèi)容， 下載完整代碼請(qǐng)?jiān)L問uni-app插件市場(chǎng)地址：https://ext.dcloud.net.cn/plugin?id=13183

效果圖如下：

cc-shopDialog

使用方法

使用注意： 該插件需引用cc-radioBtnBox插件和cc-numbox插件兩個(gè)插件庫(kù)

cc-radioBtnBox插件地址：https://ext.dcloud.net.cn/plugin?id=13176

cc-numbox插件地址：https://ext.dcloud.net.cn/plugin?id=13163文章來源地址http://www.zghlxwxcb.cn/news/detail-499225.html

<!-- dialogHeight：彈框高度 shopItem:商品數(shù)據(jù)? @close：關(guān)閉彈框 @toCart：加入購(gòu)物車事件返回當(dāng)前shopitem數(shù)據(jù) @toBuy：立即購(gòu)買事件返回當(dāng)前shopitem數(shù)據(jù)? -->

<cc-shopDialog class="hidden" :dialogHeight="440" :shopItem="shopItem" @close="closeShopDialog" @toCart="toCart"

@toBuy="toBuy" :class="{show:shopFlag}"></cc-shopDialog>

HTML代碼實(shí)現(xiàn)部分

<template>

<view class="page">

<button class="btnV" @click="showShopDialog">顯示購(gòu)物車</button>

<!-- dialogHeight：彈框高度 shopItem:商品數(shù)據(jù)? @close：關(guān)閉彈框 @toCart：加入購(gòu)物車事件返回當(dāng)前shopitem數(shù)據(jù) @toBuy：立即購(gòu)買事件返回當(dāng)前shopitem數(shù)據(jù)? -->

<cc-shopDialog class="hidden" :dialogHeight="440" :shopItem="shopItem" @close="closeShopDialog" @toCart="toCart"

@toBuy="toBuy" :class="{show:shopFlag}"></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': '', // 價(jià)格 通過計(jì)算得來

'attrTxt': '', //屬性文本? 通過計(jì)算得來

'num': '1', // 購(gòu)買數(shù)量

'maxNum': '60', // 購(gòu)買最大數(shù)量

// 屬性數(shù)據(jù)

'attrArr': [{

attr: '系列',

value: ['iphone 14系列', 'iphone 14 Pro系列']

},

{

attr: '版本',

value: ['256GB', '512GB']

}

],

'selAttrArr': [0, 0], //選擇的屬性序列數(shù)組

// 價(jià)格字典 根據(jù)屬性組合對(duì)應(yīng)價(jià)格

'priceDict': {

'iphone 14系列,256GB': '5600',

'iphone 14系列,512GB': '6400',

'iphone 14 Pro系列,256GB': '6200',

'iphone 14 Pro系列,512GB': '6900'

},

}

};

},

methods: {

//顯示購(gòu)買彈窗

showShopDialog() {

this.shopFlag = true

},

closeShopDialog() {

this.shopFlag = false

},

toCart(item) {

console.log('加入購(gòu)物車商品數(shù)據(jù) = ' + JSON.stringify(item))

uni.showModal({

title: '加入購(gòu)物車',

content: '加入購(gòu)物車商品數(shù)據(jù) = ' + JSON.stringify(item)

})

},

toBuy(item) {

console.log('立即購(gòu)買商品數(shù)據(jù) = ' + JSON.stringify(item))

uni.showModal({

title: '立即購(gòu)買',

content: '立即購(gòu)買商品數(shù)據(jù) = ' + 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>

到了這里，關(guān)于前端Vue仿京東加入購(gòu)物車彈框立即購(gòu)買彈框shopDialog自定義彈框內(nèi)容的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！