public function index() { //$id 为用户名id 等以后可以通过token获取或者session(id)什么的 $use_id = 2; $res = D('Shipping')->getAddress($use_id); if ($res == false){ $this->error('暂无收货地址','',true); }else{ $this->success($res,'',true); } }
查看Shipping模型中的getAddress()方法
/** * 获取收货地址信息 * @param $id 当前用户id * @return 属于用户的所有地址 */ public function getAddress($id) { $address_list = $this->where(array('user_id'=>$id))->select(); if ($address_list == false){ return false; } return $address_list; }
这样就根据用户是否有地址还返回相应的JSON数据
本例子的JSON数据是
{"info":[{"id":"4","user_id":"2","name":"addTest","mobile":"15162550544","province":"", "city":"","district":"","address":"44563","createtime":"2017-01-10 18:45:27" ,"modifytime":"2017-01-10 18:45:27","default":"0"}],"status":1,"url":""}
请求成功以后就将JSON添加到data{}中,并设置键值为addressInfo
那么接下来就是将这些信息展示在前端页面上
<view wx:for="{{addressInfo}}" wx:key="unique"> <view> <image src=""></image> <view> <view><text>收货地址{{item.address}}</text><text>1km</text></view> <view>收货人{{item.name}}</view> <view>收货人电话{{item.mobile}}</view> <view data-deleteid="{{item.id}}" bindtap="deleteClick">删除</view> <view data-editid="{{item.id}}" bindtap="editClick">编辑</view> </view> </view> </view>
控制属性 wx:for 绑定一个数组,就是JS中的addressInfo这个数组,默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 。可以根据{{item.address}}、{{item.name}}、{{item.mobile}}、{{item.id}}获取到当前数据的地址、收货人、电话和该条信息的id
循环之后就可以按照格式展示所有地址信息了,相当于TP模板中的foreach
删
在前台模板的循环数据里可以看到这样一条标签
event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值
bindtap属性是微信在模板页中绑定点击事件,deleteClick为触发时间的方法名
在index.js中,删除代码如下:
//删除地址 deleteClick:function(event){ var id = event.currentTarget.dataset.deleteid; wx.request({ url: 'https://shop.yunapply.com/home/shipping/delAddress?id='+id, data: {}, method: 'GET', success: function(res){ if(res.data.status == 0){ wx.showToast({ title: res.data.info, icon: 'loading', duration: 1500 }) }else{ wx.showToast({ title: res.data.info, icon: 'success', duration: 1000 }) //删除之后应该有一个刷新页面的效果,等和其他页面刷新跳转一起做 } }, fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) } }) }
点击前端删除按钮的时候,触发deleteClick事件,可以传入一个参数,代表事件对象。
event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值
然后通过GET方式传入url,在服务器端删除功能如下
public function delAddress($id) { $res = D('Shipping')->where(array('id'=>$id))->delete(); if ($res){ $this->success('删除成功','',true); }else{ $this->error('删除失败','',true); } }
根据返回的JSON值就可以提示删除成功与否
增、改
之前觉得增加和修改会和表单提交一样简单,但是做了一些还是觉得不一样,好好在写一遍。
首先查看前台表单
<form bindsubmit="addSubmit"> <view> <text>收货人信息</text> <view> <input type="hidden" value="{{addressEdit.id}}" /> <view> <text>姓名</text> <input type="number" value="{{addressEdit.name}}" maxlength="11" placeholder="请输入收货人姓名" /> </view> <view> <text>电话</text> <input type="number" value="{{addressEdit.mobile}}" maxlength="11" placeholder="请输入手机号" /> </view> <view> <text>地址</text> <input type="text" value="{{addressEdit.address}}" maxlength="-1" placeholder="请输入地址" /> </view> </view> </view> <view wx:for="{{addressInfo}}" wx:key="unique"> <view> <image src=""></image> <view> <view><text>收货地址{{item.address}}</text><text>1km</text></view> <view>收货人{{item.name}}</view> <view>收货人电话{{item.mobile}}</view> <view data-deleteid="{{item.id}}" bindtap="deleteClick">删除</view> <view data-editid="{{item.id}}" bindtap="editClick">编辑</view> <view> <button formType="submit">保存</button> </view> </form>
a.Form表单,需要绑定一个submit事件,在小程序中,属性为bindsubmit,