前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

本文给大家介绍的组件：

前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容，

阅读全文下载完整组件代码请关注微信公众号：前端组件开发

效果图如下：

# 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

```使用方法



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

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

```

#### HTML代码实现部分

```html

<template>

<view class="page">

<button class="btnV" @click="showShopDialog">显示购物车</button>



<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': '', // 价格通过计算得来

'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>