微信小程序电商实战-商品详情加入购物车（下）

IT实战联盟博客：http://blog.100boot.cn

上一篇：微信小程序电商实战-商品详情（上）
今天会接着上一篇开始写商品详情页加入购物车的部分，先看效果：

实现效果

1. 商品轮播图片预览
2. 商品收藏效果
3. 加入购物车
4. 商品数量加减
5. 商品数量加减模板（template）编写

####商品轮播图片预览效果
#####detail.js

//预览图片previewImage: function (e) {var current = e.target.dataset.src;wx.previewImage({current: current, // 当前显示图片的http链接  urls: this.data.imgUrls // 需要预览的图片http链接列表  })}

####加入购物车
页面布局分为两部分，第一部分为底部悬浮栏（购物车、收藏、加入购物车、立即购买），第二部分为加入购物车的隐藏布局主要用来选择商品属性和修改商品数量。
#####detail.wxml

 <!-- 底部悬浮栏 -->
<view class="detail-nav"><image bindtap="toCar" src="../../images/bottomNav/cart.png" />  <view class="line_nav"></view><image bindtap="addLike" src="{{isLike?'../../images/bottomNav/enshrine_select.png':'../../images/bottomNav/enshrine.png'}}" /> <button data-goodid="1"  class="button-green" bindtap="toggleDialog" >加入购物车</button><button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button>
</view>

<!--加入购物车-->
<import src="../template/template.wxml" />
<view class="dialog {{ showDialog ? 'dialog--show' : '' }}"><view class="dialog__mask" bindtap="toggleDialog" /><view class="dialog__container"><view class="row"><icon bindtap="closeDialog" class="image-close" type="cancel" size="25"/><image class="image-sku" src="https://m.360buyimg.com/n12/jfs/t11317/108/1080677336/325163/f4c2a03a/59fd8b17Nbe2fcca3.jpg!q70.jpg"></image><view class="column"><text class="sku-price">￥7935.84</text><text class="sku-title">库存20件</text><text class="sku-title">商品编码：1456778788</text></view></view><text class="border-line"></text><view class="row"><text >购买数量</text><view class="quantity-position"><template is="quantity" data="{{ ...quantity1}}" />  </view></view><text class="border-line"></text><button data-goodid="1" class="button-addCar" bindtap="addCar" formType="submit">确定</button></view></view>

#####detail.js

// 立即购买immeBuy() {wx.showToast({title: '购买成功',icon: 'success',duration: 2000});},/*** sku 弹出*/toggleDialog: function () {this.setData({showDialog: !this.data.showDialog});},/*** sku 关闭*/closeDialog: function () {console.info("关闭");this.setData({showDialog: false});},/* 减数 */delCount: function (e) {console.log("刚刚您点击了减一");var count = this.data.quantity1.quantity;// 商品总数量-1if (count > 1) {count -= 1;}// 只有大于一件的时候，才能normal状态，否则disable状态  var delStatus = count <= 1 ? 'disabled' : 'normal';// 只有大于10件的时候，才能normal状态，否则disable状态  var addStatus = count >= 10 ? 'disabled' : 'normal';// 将数值与状态写回  this.setData({quantity1: {quantity: count,delStatus: delStatus,addStatus: addStatus}});},/* 加数 */addCount: function (e) {console.log("刚刚您点击了加一");var count = this.data.quantity1.quantity;// 商品总数量-1  if (count < 10) {count += 1;}// 只有大于一件的时候，才能normal状态，否则disable状态  var delStatus = count <= 1 ? 'disabled' : 'normal';// 只有大于10件的时候，才能normal状态，否则disable状态  var addStatus = count >= 10 ? 'disabled' : 'normal';// 将数值与状态写回  this.setData({quantity1: {quantity: count,delStatus: delStatus,addStatus: addStatus}});},/* 输入框事件 */bindManual: function (e) {var count = this.data.quantity1.quantity;// 将数值与状态写回  this.setData({count: count});},/*** 加入购物车*/addCar: function (e) {console.log(e.target.dataset.goodid);wx.showToast({title: '加入购物车成功',icon: 'success',duration: 2000});console.info("关闭");this.setData({showDialog: false});},// 收藏addLike() {this.setData({isLike: !this.data.isLike});},// 跳到购物车toCar() {wx.switchTab({url: '/pages/cart/cart'})},// 立即购买immeBuy() {wx.showToast({title: '购买成功',icon: 'success',duration: 2000});},

####商品数量加减模板（template）
由于后面购物车模块也需要商品数量加减的功能，在这里把这个功能做成了一个template模板，看下方流程：
######1、创建template模板
在page目录下创建template文件，并生成template.js、template.json、template.wxml和template.wxss配套文件

######2、template.wxml

<template name="quantity"><!-- 主容器 -->  <view class="stepper">  <!-- 减号 -->  <text class="{{delStatus}}" bindtap="delCount">-</text>  <!-- 数值 -->  <input type="number" bindchange="bindManual" value="{{quantity}}"  disabled="disabled"/>  <!-- 加号 -->  <text class="{{addStatus}}" bindtap="addCount">+</text>  </view>
</template>

######3、template.wxss

/*主容器*/
.stepper {  width:110px;  height: 26px;  /*给主容器设一个边框*/  border: 1rpx solid #000000;  border-radius: 3px;  margin:0 auto;
}  /*加号和减号*/
.stepper text {  width: 24px;  line-height: 15px;  text-align: center;  float: left;
}  /*数值*/
.stepper input {  width: 40px;  height: 26px;  float: left;  margin: 0 auto;  text-align: center;  font-size: 12px;  color: #000000;/*给中间的input设置左右边框即可*/  border-left: 1rpx solid #000000;  border-right: 1rpx solid #000000;
}  /*普通样式*/
.stepper .normal{  color: black;
}  /*禁用样式*/
.stepper .disabled{  color: #ccc;
}

#####4、detail.wxml样式引用

<import src="../template/template.wxml" />

备注：template是在page目录下

#####5、detail.js初始化

quantity1: {quantity: 1,min: 1,max: 20,delStatus: 'disabled',addStatus: 'normal'},isLike: true,showDialog: false,

好了，复制上述代码就可以实现效果哦，赶紧试试吧！
####更多精彩内容
微信小程序电商实战-入门篇
微信小程序电商实战-首页（上）
微信小程序电商实战-首页（下）
微信小程序电商实战-商品详情（上）
微信小程序电商实战-商品列表流式布局
微信小程序实战篇：基于wxcharts.js绘制移动报表

####关注我们
如果需要源码可以关注“IT实战联盟”公众号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~

IT实战联盟博客：http://blog.100boot.cn

微信小程序电商实战-商品详情加入购物车（下）相关推荐

微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
【愚公系列】2022年10月微信小程序-电商项目-商品详情页面规格选择功能实现
文章目录前言一.商品详情页面规格选择功能实现二.效果前言 vant-weapp的Popup 弹出层api Props 参数说明类型默认值 show 是否显示弹出层 boolean fal ...
微信小程序电商实战-入门篇
IT实战联盟博客:http://blog.100boot.cn 小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debu ...
视频教程-微信小程序电商实战-PHP
微信小程序电商实战多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程序员学院AP ...
微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...
微信小程序电商实战—环境搭建篇
本篇文章已同步发布于个人博客 https://qiucode.cn/article/90 可体验秋码淘好货微信小程序哦! 1.开发工具下载可到微信公众号-小程序下载 https://mp.we ...
微信小程序电商实战项目
项目地址:https://github.com/sirfuao/wx-shop 如果觉得对您有用,不忘记了给个 star 顺便附上 vue电商实战项目的地址:https://blog.csdn.net ...
【愚公系列】2022年10月微信小程序-电商项目-商品购物车功能实现
文章目录前言一.商品购物车功能实现二.效果前言在电商的核心交易流程中,购物车是其中非常重要的一环,它承担商品加购.价格计算.促销活动展示等功能,与会员系统.商品系统.库存系统.订单系统等紧密 ...
微信小程序电商项目开发实战漫谈
原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...

微信小程序电商实战-商品详情加入购物车（下）

微信小程序电商实战-商品详情加入购物车（下）相关推荐

最新文章

热门文章