微信小程式結合laravel8實現使用者的收貨地址
阿新 • • 發佈：2022-04-11
CREATE TABLE `user_address` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL DEFAULT '0' COMMENT '使用者id', `consignee` varchar(64) NOT NULL DEFAULT '' COMMENT '收貨人姓名', `phone` char(11) NOT NULL DEFAULT '' COMMENT '收貨人手機號', `province` varchar(20) DEFAULT NULL COMMENT '省區名稱', `city` varchar(20) NOT NULL COMMENT '市區名稱', `district` varchar(20) DEFAULT NULL COMMENT '縣區名稱', `address` varchar(255) NOT NULL DEFAULT '' COMMENT '詳細地址', `is_default` tinyint(1) DEFAULT '0' COMMENT '是否預設：0否 1是', `status` tinyint(4) DEFAULT NULL, `create_time` int(11) unsigned DEFAULT NULL, `updated_at` varchar(50) DEFAULT NULL, `deleted_at` varchar(50) DEFAULT NULL COMMENT '軟刪除時間', PRIMARY KEY (`id`) USING BTREE ) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=utf8;
wxml
<text style="margin:0px 100px; " >新增收貨地址</text> <form bindsubmit="formSubmit"> <l-input label="收貨人：" placeholder="收貨人姓名" name="consignee" /> <l-input label="手機號：" placeholder="收貨人手機號" name="phone" /> <view class="section"> <view class="section__title">地區：</view> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"> <view class="picker"> 當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}} </view> </picker> <text>詳細地址：</text> <l-textarea name="address" placeholder="如街道、門牌號、小區、鄉鎮、村等" /> </view> <button type="warn" form-type="submit">儲存</button> </form>
wxss
/*button*/ .btn { width: 80%; padding: 20rpx 0; border-radius: 10rpx; text-align: center; margin: 40rpx 10%; background: #000; color: #fff; } /*mask*/ .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden; } /*content*/ .drawer_box { width: 650rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 1001; background: #FAFAFA; margin: -150px 50rpx 0 50rpx; border-radius: 3px; } .drawer_title{ padding:15px; font: 20px "microsoft yahei"; text-align: center; } .drawer_content { height: 210px; overflow-y: scroll; /*超出父盒子高度可滾動*/ } .btn_ok{ padding: 10px; font: 20px "microsoft yahei"; text-align: center; border-top: 1px solid #E8E8EA; color: #3CC51F; } .top{ padding-top:8px; } .bottom { padding-bottom:8px; } .title { height: 30px; line-height: 30px; width: 160rpx; text-align: center; display: inline-block; font: 300 28rpx/30px "microsoft yahei"; } .input_base { border: 2rpx solid #ccc; padding-left: 10rpx; margin-right: 50rpx; } .input_h30{ height: 30px; line-height: 30px; } .input_h60{ height: 60px; } .input_view{ font: 12px "microsoft yahei"; background: #fff; color:#000; line-height: 30px; } input { font: 12px "microsoft yahei"; background: #fff; color:#000 ; } radio{ margin-right: 20px; } .grid { display: -webkit-box; display: box; } .col-0 {-webkit-box-flex:0;box-flex:0;} .col-1 {-webkit-box-flex:1;box-flex:1;} .fl { float: left;} .fr { float: right;}
（路由全是再jwt 驗證中進行寫的，目的是獲取使用者id）
wxjs
import {config} from "../config/config.js"
Page({
/**
* 頁面的初始資料
*/
data: {
region: ['廣東省', '廣州市', '海珠區'],
showModalStatus: false
},
formSubmit(e) {
// console.log(e);
//獲取收貨人地址
let consignee = e.detail.value.consignee;
let phone = e.detail.value.phone;
let address = e.detail.value.address;
let region = this.data.region;
if(consignee==''){
wx.showToast({
title: '收貨人地址必填',
icon: 'success',
duration: 2000
})
return
}else if(phone==''){
wx.showToast({
title: '收貨人手機號必填',
icon: 'success',
duration: 2000
})
return
}else if(address==''){
wx.showToast({
title: '收貨人地址必填',
icon: 'success',
duration: 2000
})
return
}else if(region==''){
wx.showToast({
title: '收貨地區必填',
icon: 'success',
duration: 2000
})
return
}else{
let token=wx.getStorageSync('token')
wx.request({
url: `${config.baseUrl}api/add/receiving/address`, //僅為示例，並非真實的介面地址
data: {
consignee,
phone,
address,
region
},
header: {token},
method:"POST",
success (res) {
if(res.data.code==200){
wx.showToast({
title: '儲存成功',
icon: 'success',
duration: 5000,
success:function () {
wx.navigateTo({
url: '/pages/receiving_address/receiving_address',
})
}
})
}else{
wx.showToast({
title: '儲存失敗',
icon: 'error',
duration: 5000,
success:function () {
wx.navigateTo({
url: '/pages/receiving_address/receiving_address',
})
}
})
}
}
})
}
},
/**
* 地區選擇
* @param {*} e
*/
bindRegionChange: function (e) {
console.log('picker傳送選擇改變，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
},
})
laravel 8 新增介面
Route::post('add/receiving/address', [\App\Http\Controllers\Home\HomeReceivingAddress::class, 'addReceivingAddress'])->name('add/receiving/address');
/** * 收貨地址的新增 *users:閆兵 *Data:2022/4/8 *Time:19:01 */ public function addReceivingAddress(Request $request) { $params = $request->post(); //驗證 $validator = Validator::make($request->all(), [ 'consignee' => 'required', 'phone' => 'required', 'address' => 'required', 'region' => 'required', ], ['consignee.required' => '收貨人不可以為空', 'phone.required' => '收貨人手機號不可以為空', 'address.required' => '登入地址不可以為空', 'region.required' => '省市區不可以為空', ]); if ($validator->fails()) { return response()->json(['code' => 500, 'message' => $validator->errors()->first(), 'data' => '']); } // 根據使用者id進行新增收貨地址 $userId = $request->get('user_id'); $data = [ 'consignee' => $params['consignee'], 'phone' => $params['phone'], 'province' => $params['region'][0], 'city' => $params['region'][1], 'district' => $params['region'][2], 'address' => $params['address'], 'user_id' => $userId ]; $result = UserAdderss::insertGetId($data); if ($result !== false) { return response()->json(['code' => 200, 'message' => '使用者收貨地址新增成功', 'data' => '']); } return response()->json(['code' => 500, 'message' => '使用者收貨地址新增失敗', 'data' => '']); }
列表展示介面
//獲取使用者收貨地址 Route::get('user/receiving/address', [\App\Http\Controllers\Home\HomeReceivingAddress::class, 'userReceivingAddress'])->name('user/receiving/address');
/** * 使用者的收貨地址 *users:閆兵 *Data:2022/4/8 *Time:16:11 * @param Request $request */ public function userReceivingAddress(Request $request) { //獲取使用者id，根據使用者id去查詢使用者的收貨地址 $userId = $request->get('user_id'); $userAddress = UserAdderss::where('user_id', $userId)->get(); if ($userAddress !== false) { return response()->json(['code' => 200, 'message' => '收貨地址獲取成功', 'data' => $userAddress]); } return response()->json(['code' => 500, 'message' => '沒有使用者收貨地址', 'data' => $userAddress]); }
wx.js
// pages/receiving_address/receiving_address.js import { config } from "../config/config.js" Page({ /** * 頁面的初始資料 */ data: { checked: false, // 使用者地址 userAdderss: [] }, /** * 修改收貨地址 * @param {*} e */ update(e) { // 獲取收貨地址資料id let id =e.currentTarget.dataset.id; // 將id傳送至修改頁面，可根據id進行修改 wx.navigateTo({ url: '/pages/update_address/update_address?id='+id, }) }, /** * 刪除地址 * @param {*} e */ del(e) { let id = e.currentTarget.dataset.id; //利用token 獲取使用者id，id獲取使用者的收貨地址； let token = wx.getStorageSync('token') wx.request({ url: `${config.baseUrl}api/del/receiving/address`, //僅為示例，並非真實的介面地址 header: { token }, data: { id }, success: res => { if (res.data.code == 200) { wx.showToast({ title: '刪除成功', icon: 'success', duration: 2000 }) wx.navigateTo({ url: '/pages/receiving_address/receiving_address', }) } else { wx.showToast({ title: '刪除失敗', icon: 'error', duration: 2000 }) return } } }) }, /** * 新增地址 * @param {*} e */ addAdderss(e) { wx.navigateTo({ url: '/pages/add_address/add_address', }) }, /** * 單選選擇 * @param {*} e */ checked(e) { var check = this.data.checked; if (check) { this.data.checked = false; console.log("已取消選中"); } else { this.data.checked = true; console.log("已選中"); } this.setData({ "checked": this.data.checked, }); }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { //利用token 獲取使用者id，id獲取使用者的收貨地址； let token = wx.getStorageSync('token') wx.request({ url: `${config.baseUrl}api/user/receiving/address`, //僅為示例，並非真實的介面地址 header: { token }, success: res => { this.setData({ userAdderss: res.data.data }) } }) }, })
wx.ml
<text style="margin: 20px 120px ; font-size: 20px;">收貨地址</text> <block wx:for="{{userAdderss}}" > <view style="margin: 0px 0px 20px 10px; background-color: linen;"> <view>{{item.consignee}},{{item.phone}}</view> <view>{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view> <view></view> <view> <view> <radio class='radioScale' checked="{{checked}}" bindtap="checked">預設</radio> <l-button size="mini" style="float: right;" type="success" plain="{{true}}" bind:lintap="update" data-id="{{item.id}}" >修改</l-button> <l-button size="mini" style="float: right; " type="error" plain="{{true}}" bind:lintap="del" data-id="{{item.id}}">刪除</l-button> </view> </view> </view> </block> <view> <button type="warn" bindtap="addAdderss">新增地址</button> </view>
刪除控制器介面：
/** * 使用者地址的刪除 *users:閆兵 *Data:2022/4/8 *Time:19:43 * @return int */ public function delReceivingAddress(Request $request) { $id = $request->get('id'); $result = UserAdderss::delUserAddress($id); if ($result !== false) { return response()->json(['code' => 200, 'message' => '使用者收貨地址刪除成功', 'data' => '']); } return response()->json(['code' => 500, 'message' => '使用者收貨地址刪除失敗', 'data' => '']); }
刪除模型介面：
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\SoftDeletes; class UserAdderss extends Model { use HasFactory; use SoftDeletes; protected $table='user_address'; /** * 軟刪除 *users:閆兵 *Data:2022/4/8 *Time:19:50 */ public static function delUserAddress($id){ $result=self::destroy($id); return $result; } }
修改和新增差不多就不寫了