当前位置: 主页 > 分析 > 内容页

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

2023-06-25 23:51:37 来源:博客园


(资料图)

前端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

HTML代码实现部分

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

标签:

发展
在抖音,什么美妆成分最带货?|世界新资讯
美妆成分,无疑是近年行业及社媒讨论最热门的话题之一。今年以来,巨量
厉害了我的队员!临沂金雀山小学五人获评山东省“海洋少年”称号
近日,在山东省第二届中小学生海洋知识竞赛活动中,临沂金雀山小学六年
上清所:大宗商品现货清算业务6月26日上线数字人民币服务|当前速讯
上清所:大宗商品现货清算业务6月26日上线数字人民币服务,上清所,大宗