上一则:QQ小流程微京东(四):静态API同时实现货品详尽情况页(上)

看效用

QQ小流程微京东(五):静态软件包同时实现货品详情页(下)插图

投资计划

1、重新加入科季夫漂浮框、货品数目、产品价格排序、珍藏和重新加入科季夫机能合作开发 2、初始化重新加入科季夫API重新加入科季夫

依照货品ID以获取货品详尽情况API数据源

出访:https://100boot.cn/ 优先选择微京东事例,如下表所示图右图:

QQ小流程微京东(五):静态软件包同时实现货品详情页(下)插图1

上方除了详尽的数据源能查阅哦!

detail.wxml

QQ小流程微京东(五):静态软件包同时实现货品详情页(下)插图2 QQ小流程微京东(五):静态软件包同时实现货品详情页(下)插图3 重新加入科季夫 立刻买回template模版提及 QQ小流程微京东(五):静态软件包同时实现货品详情页(下)插图4 ¥{{goods.totalMoney}} 销售量 {{goods.buyRate}} 件 货品代码:{{goods.goodsId}} 买回数目 确认

detail.wxss

template 模版提及 @import “../template/template.wxss”; /* sku优先选择 */ .dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.7); display: none; } .dialog__container { position: fixed; bottom: 0; width: 100%; background: white; transform: translateY(150%); transition: all 0.4s ease; z-index: 11; } .dialog–show .dialog__container { transform: translateY(0); } .dialog–show .dialog__mask { display: block; } .image-sku { width: 200rpx; height: 200rpx; z-index: 12; position: absolute; left: 20px; top: -30px; border-radius: 20rpx; } .image-close { width: 40rpx; height: 40rpx; position: fixed; right: 20rpx; top: 10rpx; } .column { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; align-items: center; } .border-line { width: 100%; height: 2rpx; display: inline-block; margin: 30rpx 0rpx; background-color: gainsboro; text-align: center; } .sku-title { position: relative; left: 300rpx; margin: 1rpx; } .sku-price { color: red; position: relative; left: 300rpx; margin: 1rpx; } .row .quantity-position { position: absolute; right: 30rpx; display: flex; justify-content: center; flex-direction: column; }

detail.js

// 珍藏-修改珍藏状态 addLike() { this.setData({ isLike: !this.data.isLike }); ajax.request({ method: GET, url: collection/addShopCollection?key= + utils.key + &goodsId= + goodsId, success: data => { console.log(“珍藏返回结果:” + data.message) wx.showToast({ title: data.message, icon: success, duration: 2000 }); } }) }, // 立刻买回-待合作开发 immeBuy() { wx.showToast({ title: 买回成功, icon: success, duration: 2000 }); }, // 跳到科季夫-待合作开发 toCar() { wx.navigateTo({ url: ../cart/cart }) }, /** * sku 弹出 */ toggleDialog: function () { this.setData({ showDialog: !this.data.showDialog }); }, /** * sku 关闭 */ closeDialog: function () { console.info(“关闭”); this.setData({ showDialog: false }); }, /* 减数 */ delCount: function (e) { console.log(“刚刚您点击了减1”); var count = this.data.goods.count; // 货品总数目-1 if (count > 1) { this.data.goods.count–; } // 将数值与状态写回 this.setData({ goods: this.data.goods }); this.priceCount(); }, /* 加数 */ addCount: function (e) { console.log(“刚刚您点击了加1”); var count = this.data.goods.count; // 货品总数目-1 if (count < 10) { this.data.goods.count++; } // 将数值与状态写回 this.setData({ goods: this.data.goods }); this.priceCount(); }, //产品价格排序 priceCount: function (e) { this.data.goods.totalMoney = this.data.goods.price * this.data.goods.count; this.setData({ goods: this.data.goods }) }, /* 减数 */ delCount: function (e) { console.log(“刚刚您点击了减1”); var count = this.data.goods.count; // 货品总数目-1 if (count > 1) { this.data.goods.count–; } // 将数值与状态写回 this.setData({ goods: this.data.goods }); this.priceCount(); }, /* 加数 */ addCount: function (e) { console.log(“刚刚您点击了加1”); var count = this.data.goods.count; // 货品总数目-1 if (count < 10) { this.data.goods.count++; } // 将数值与状态写回 this.setData({ goods: this.data.goods }); this.priceCount(); }, //产品价格排序 priceCount: function (e) { this.data.goods.totalMoney = this.data.goods.price * this.data.goods.count; this.setData({ goods: this.data.goods }) }, /** * 重新加入科季夫 */ addCar: function (e) { var count = this.data.goods.count; ajax.request({ method: GET, url: carts/addShopCarts?key= + utils.key + &goodsId= + goodsId + &num= + count, success: data => { console.log(“重新加入科季夫返回结果:” + data.message) wx.showToast({ title: 重新加入科季夫成功, icon: success, duration: 2000 }); } }) }

template模版使用

由于再加上template的源码太长了,大家能直接下载源码使用好。

备注

QQ小流程微京东系列 都是通过https 静态以获取数据并展示的,建议从篇开始阅读。大家多多支持本系列文章会继续更新下去,谢谢各位!

QQ小流程微京东系列

小流程微京东(一):https框架搭建并同时实现导航机能

QQ小流程微京东(二):电商首页轮播、分类导航和新品特卖同时实现

小流程微京东(三):电商首页无限下拉刷新静态API数据同时实现

QQ小流程微京东(四):静态API同时实现货品详尽情况页(上)

关注我们

如果需要源码能关注IT实战联盟并留言(微京东源码,5个字会收到源码下载地址,一定要看源码里面的操作手册会少走很多弯路),也能重新加入交流群和作者互撩哦~~~

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: