开发|走进小程序（三）

/** * 页面的初始数据 */ data: { value: "", hotWords : [], // 搜索热词 list : [], // 搜索商品结果列表 wordsShow : true }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this = this; // 请求搜索热词的接口 wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/search/home', method : "GET", success : function (res) { console.log(res.data.data.hotWords); _this.setData({ hotWords: res.data.data.hotWords }); } }) }, onSearch : function () { var _this = this; // 带上value值请求搜索 wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/search?word=' this.data.value, method : "GET", success : function (res) { console.log(res.data.data.list); _this.setData({ list: res.data.data.list, wordsShow : false }) } }) }, onFocus : function () { // 让热词显示，让搜索结果隐藏 this.setData({ wordsShow : true }); }, onChange : function (evt) { console.log(evt.detail); // 把输入框手动输入的值设置给value数据 this.setData({ value : evt.detail }); }, onHotWordTap : function (evt) { // 得到点击热词的文字内容 // 带着文字内容请求搜索 console.log(evt) console.log(evt.currentTarget.dataset.word); this.setData({ value: evt.currentTarget.dataset.word }); // 调用onSearch方法 this.onSearch(); }

{ "usingComponents": { "van-search": "/dist/search/index", "van-tag": "/dist/tag/index", "van-card": "/dist/card/index" } }

<viewclass='page'> <view> <van-search value="{{ value }}" placeholder="请输入搜索关键词" show-action bind:change="onChange" bind:search="onSearch" bind:focus="onFocus" /> </view> <viewclass='hot-container'wx:if="{{ wordsShow }}"> <viewwx:for="{{hotWords}}"class='hot-tag'> <van-tag bindtap="onHotWordTap" data-word="{{item.word}}" plain type="{{item.highlight ? 'danger' : 'primary'}}" size="large" > {{item.word}} </van-tag> </view> </view> <viewwx:else> <blockwx:for="{{list}}"> <van-card tag="{{item.couponValue}}" price="{{item.price}}" origin-price="{{item.originPrice}}" title="{{item.title}}" thumb="{{ item.image }}" > </van-card> </block> </view> </view>

data: { detail : {}, // 当前商品的详细信息 swiperWidth : wx.getSystemInfoSync().screenWidth, cartNum : 0// 购物车商品数量 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 获取购物车数量 this.setData({ cartNum: utils.calcCartNum() }) var _this = this; // 取到跳转过来的时候传递的id值 var id = options.id; // 携带id去接口请求当前商品详情数据 wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/detail?id=' id, method: "GET", success : function (res) { console.log(res); _this.setData({ detail : res.data.data.detail }) } }) }, onAddToCart : function (evt) { let _this = this; // 购物车存储当前商品的信息 var obj = { id: this.data.detail.id, title: this.data.detail.title, image: this.data.detail.photos[0].url, price : this.data.detail.price, checked : false, num : 1 } // 判断这条商品在购物车里是否已经存在 // 把本地存储的cart取出来 wx.getStorage({ key: 'cart', success: function(res) { console.log(res); // 说明已经存储过购物车了 // 在之前的基础之上再把当前这条商品加进去 // 如果这条商品再购物车里已经存在，那么就num // 如果不存在，那么就把这条商品的obj push到数组里 // 数组操作完成以后，重新存进storage var isExist = false; var cart = res.data; for(var i = 0 ; i < cart.length; i ){ if(cart[i].id === obj.id){ // 说明购物车里已经存在这条商品 cart[i].num ; isExist = true; break; } } if(!isExist) { // 说明购物车里不存在当前商品 cart.push(obj); } // 将cart重新存进storage进行覆盖 wx.setStorage({ key: 'cart', data: cart }) Toast('添加购物车成功'); _this.setData({ cartNum : utils.calcCartNum() }) }, fail: function (err) { // 代表购物车为空 // 存储当前这一条商品 // 存一个数组，目的是方便下一次存新的数据往里面去添加 wx.setStorage({ key: 'cart', data: [ obj ] }) } }) } })

{ "usingComponents": { "van-goods-action": "/dist/goods-action/index", "van-goods-action-icon": "/dist/goods-action-icon/index", "van-goods-action-button": "/dist/goods-action-button/index", "van-toast": "/dist/toast/index" } }

<viewclass=’page’> <viewclass=’swiper’> <swiper indicator-dots=”{{true}}” autoplay=”{{true}}” circular=”{{true}}” interval=”{{3000}}” duration=”{{400}}” style=”width:{{swiperWidth}}px; height:{{swiperWidth}}px” > <blockwx:for=”{{detail.photos}}”> <swiper-item> <imagesrc=”{{item.url}}”class=”slide-image”/> </swiper-item> </block> </swiper> </view> <view> <text>{{detail.title}}</text> <text>￥{{detail.price}}</text> <view> <imageclass=’shopImg’src=’{{detail.shop.picUrl}}’></image> <text>{{detail.shop.title}}</text> <text>最近上新{{detail.shop.updateTime}}</text> </view> </view> <viewclass=’detail-list’> <blockwx:for=”{{detail.descContentList}}”> <imagemode=’widthFix’style=’width:{{swiperWidth}}px;’src=’{{item.photo.url}}’></image> </block> </view> <van-goods-action> <van-goods-action-iconicon=”chat-o”text=”客服”/> <van-goods-action-icon icon=”cart-o” text=”购物车” info=”{{cartNum}}” url=”/pages/cart/cart” link-type=”switchTab” /> <van-goods-action-iconicon=”shop-o”text=”店铺”/> <van-goods-action-buttontext=”加入购物车”type=”warning”bind:click=”onAddToCart”/> <van-goods-action-buttontext=”立即购买”/> </van-goods-action> <van-toastid=”van-toast”/> </view>

data: { cart : [], // 存储购物车所有信息 totalPrice : 0, // 提交商品的总价 allchecked: false, // 全选按钮的状态 checkedNum: 0, // 被勾选的商品数量 cartNum : 0, // 购物车商品总数量 scrollHeight : wx.getSystemInfoSync().windowHeight - 110 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this = this; wx.getStorage({ key: 'cart', success: function(res) { console.log(res.data); _this.setData({ cart : res.data }) } }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { // 计算商品总数量 this.setData({ cartNum: utils.calcCartNum() }) }, onChange: function (evt) { var _this = this; // 用户编辑商品数量 console.log(evt); // 从storage里把数据取出来，然后找到正在编辑的额这一条，再把数量变成evt.detail wx.getStorage({ key: 'cart', success: function(res) { let cart = res.data; for(var i = 0; i < cart.length; i ){ if(cart[i].id === evt.currentTarget.dataset.id){ cart[i].num = evt.detail; } } wx.setStorage({ key: 'cart', data: cart }) // 重新计算购物车总数 _this.setData({ cartNum : utils.calcCartNum() }) } }) }, // 选择某个商品 onCheckChange : function (evt) { console.log(evt); // 得到当前商品的索引 let index = evt.currentTarget.dataset.index; // 将当前商品的checked属性设置为change之后的checked属性 let cart = this.data.cart; cart[index].checked = evt.detail; let totalPrice = this.data.totalPrice/100; // 判断是取消还是选中 if(evt.detail) { // 选中 totalPrice = cart[index].price * cart[index].num; this.setData({ checkedNum : this.data.checkedNum }) }else{ // 取消 totalPrice -= cart[index].price * cart[index].num; this.setData({ checkedNum: --this.data.checkedNum }) } // 选中数量跟cart.length相等的话那么全选 console.log(totalPrice); this.setData({ cart : cart, totalPrice : totalPrice*100, allchecked: this.data.checkedNum === cart.length }) }, // 全选按钮的状态改变 onAllChange : function (evt) { var cart = this.data.cart; var total = 0; // 所有商品的选中状态跟着全选按钮一起改变 for(var i = 0; i < cart.length; i ){ cart[i].checked = evt.detail; total = cart[i].price * cart[i].num; } this.setData({ allchecked: evt.detail, cart : cart, totalPrice: evt.detail ? total*100 : 0 }) }, // 长按删除某条商品 onDelete : function (evt) { var id = evt.currentTarget.dataset.id; console.log(id); Dialog.confirm({ message: '你确定要删除吗？' }).then(() => { // 从cart找到当前商品并且删除，再把删除之后的结果存storage let cart = this.data.cart; for (var i = 0; i < cart.length; i ) { if (cart[i].id === id) { // 从下标为i的位置删除一条数据 cart.splice(i, 1); break; } } wx.setStorage({ key: 'cart', data: cart }) this.setData({ cart: cart, cartNum: utils.calcCartNum() }); }).catch(() => { // on cancel }); }, // 提交结算 onSubmit : function () { // 把要结算的商品存到storage里，跳转到结算页 let cart = this.data.cart; // map filter some every reduce var checkedCart = []; for(var i = 0; i < cart.length; i ){ cart[i].checked && checkedCart.push(cart[i]); } wx.setStorage({ key: 'pay', data: checkedCart }) wx.navigateTo({ url: '/pages/pay/pay' }) } })

{ "usingComponents": { "van-checkbox": "/dist/checkbox/index", "van-stepper": "/dist/stepper/index", "van-submit-bar": "/dist/submit-bar/index", "van-dialog": "/dist/dialog/index" } }

<viewclass='page'> <viewclass='cart-head'> <textclass='head-title'>购物车（{{cartNum}}）</text> </view> <scroll-view class='cart-list' style='height:{{scrollHeight}}px'scroll-y> <viewwx:for="{{cart}}"class='cart-item'wx:for-index="idx"bindlongtap='onDelete'data-id="{{item.id}}"> <viewclass='cart-radio'> <van-checkbox checked-color="#fef739" value="{{item.checked}}" bind:change="onCheckChange" data-index="{{idx}}" > </van-checkbox> </view> <viewclass='cart-image'> <imagesrc='{{item.image}}'></image> </view> <viewclass='cart-main'> <textclass='cart-title'>{{item.title}}</text> <van-stepper value="{{ item.num }}" bind:change="onChange" data-id="{{item.id}}" /> <textclass='cart-price'>￥{{item.price}}</text> </view> </view> </scroll-view> <van-submit-bar price="{{ totalPrice }}" button-text="结算" bind:submit="onSubmit" > <van-tagtype="primary"> <van-checkbox value="{{ allchecked }}" bind:change="onAllChange" checked-color="#fef739" > 全选 </van-checkbox> </van-tag> </van-submit-bar> <van-dialogid="van-dialog"/> </view>