clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地址增删改查，订单详情（下单前）完善

This commit is contained in:
donqi 2022-05-17 16:44:07 +08:00
parent 34a4e5b14e
commit 2744a8492d
6 changed files with 260 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/js/globalData.js
View File

@ -1,5 +1,5 @@
export default { export default {
deptId: 1, deptId: 101,
initPageNum: 1, initPageNum: 1,
initPageSize: 5 initPageSize: 5
} }

146
common/js/request.js
View File

@ -6,6 +6,8 @@ export default {
uni.addInterceptor('request', { uni.addInterceptor('request', {
invoke(args) { invoke(args) {
// request 触发前拼接 url // request 触发前拼接 url
// args.url = 'https://www.opsoul.com' + args.url;
// args.url = 'http://192.168.2.3:80' + args.url;
args.url = 'http://127.0.0.1:80' + args.url; args.url = 'http://127.0.0.1:80' + args.url;
// console.log("停止触发"); // console.log("停止触发");
// return false; // return false;
@ -60,52 +62,56 @@ export default {
}) })
}, },
async login() { async login() {
// 从缓存中获取登录信息 // 从缓存中获取登录信息
let userInfo = uni.getStorageSync('userProfile'); let userInfo = uni.getStorageSync('userProfile');
if (userInfo) { if (userInfo) {
return true; return true;
} }
// 获取微信登录凭证 // TODO:调用小程序服务端确认是否是授权登录过的用户
const wxLoginRes = await wx.login(); let loginRes = {
console.log(wxLoginRes) logined: false,
const wxAuthRes = await uni.request({ userInfo: {}
url: '/wx/auth', };
header: { // 未登录过的获取微信用户信息
code: wxLoginRes.code if (!loginRes.logined) {
} userInfo = await wx.getUserProfile({
}) desc: '用于小程序登录'
console.log(wxAuthRes) });
// TODO:调用小程序服务端确认是否是授权登录过的用户 // 获取微信登录凭证
let loginRes = { const wxLoginRes = await wx.login();
logined: false, console.log(wxLoginRes)
userInfo: {} // 再次请求小程序服务端存储用户，服务端添加附加用户信息后返回
}; loginRes = {
// 未登录过的获取微信用户信息 logined: true,
if (!loginRes || !loginRes.logined) { userInfo: {
userInfo = await wx.getUserProfile({ ...userInfo,
desc: '用于小程序登录' userId: 1,
}); wxLoginCode: wxLoginRes.code
// 再次请求小程序服务端存储用户，服务端添加附加用户信息后返回 }
loginRes = { };
logined: true,
userInfo: { const wxAuthRes = await uni.request({
userId: 1, url: '/wx/auth',
wxLoginCode: wxLoginRes.code, header: {
openId: wxAuthRes[1].data.data.openid code: wxLoginRes.code
} }
}; })
} console.log(wxAuthRes)
userInfo = loginRes.userInfo; loginRes.userInfo.openId = wxAuthRes[1].data.data.openid;
if (!userInfo) { loginRes.userInfo.customerId = 2;
uni.showToast({ }
icon: 'error', userInfo = loginRes.userInfo;
title: '用户信息获取失败，请退出小程序重试'
}) if (!userInfo) {
return false; uni.showToast({
} icon: 'error',
// 页面存储用户登录有效信息，以便其他页面调用 title: '微信用户信息获取失败，请退出小程序重试'
uni.setStorageSync('userProfile', userInfo); })
return false;
}
// 页面存储用户登录有效信息，以便其他页面调用
uni.setStorageSync('userProfile', userInfo);
return true; return true;
}, },
wxLogin() { wxLogin() {
@ -113,7 +119,6 @@ export default {
}, },
getCurUserInfo() { getCurUserInfo() {
let userProfile = uni.getStorageSync('userProfile'); let userProfile = uni.getStorageSync('userProfile');
console.log("curUser:" + userProfile)
return userProfile; return userProfile;
}, },
getProductCategories(params = {}) { getProductCategories(params = {}) {
@ -152,5 +157,50 @@ export default {
} }
}) })
return res[1].data; return res[1].data;
}, },
async getAddressList(params = {}) {
let res = await uni.request({
url: '/customer/address/list',
method: 'POST',
data: params
})
return res[1].data;
},
async addAddressList(params = {}) {
let res = await uni.request({
url: '/customer/address/insert',
method: 'POST',
data: params
})
return res[1].data;
},
async editAddressList(params = {}) {
let res = await uni.request({
url: '/customer/address/update',
method: 'POST',
data: params
})
return res[1].data;
},
async delAddressList(customerAddressId) {
let res = await uni.request({
url: '/customer/address/delete',
method: 'POST',
data: {
customerAddressId: customerAddressId
},
header: {
'content-type': 'application/x-www-form-urlencoded'
}
})
return res[1].data;
},
async areaListByStep(params = { parentCode: null }) {
let res = await uni.request({
url: '/system/area/list',
method: 'POST',
data: params
})
return res[1].data;
}
} }

110
pages/my/edit-address.vue
View File

@ -10,30 +10,31 @@
<form @submit="submit"> <form @submit="submit">
<view class="cu-form-group"> <view class="cu-form-group">
<view class="title">联系人</view> <view class="title">联系人</view>
<input name="person2Contact" :value="formData.person2Contact"></input> <input name="name" v-model="formData.name"></input>
</view> </view>
<view class="cu-form-group"> <view class="cu-form-group">
<view class="title">手机号码</view> <view class="title">手机号码</view>
<input name="phone" :value="formData.phone"></input> <input name="phone" v-model="formData.phone"></input>
</view> </view>
<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY --> <!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
<view class="cu-form-group"> <view class="cu-form-group">
<view class="title">地址选择</view> <view class="title">地址选择</view>
<picker :mode="'multiSelector'" @change="regionChange" :value="multiIndex" :range-key="'name'" :range="areaList"> <picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange" :value="multiIndex" :range-key="'areaName'" :range="areaList">
<view class="picker"> <view class="picker">
{{areaList[0][multiIndex[0]].name}}，{{areaList[1][multiIndex[1]].name}}，{{areaList[2][multiIndex[2]].name}} {{formData.area && formData.area.length ? formData.area[0].areaName + '-' + formData.area[1].areaName + '-' + formData.area[2].areaName : '请选择'}}
</view> </view>
</picker> </picker>
</view> </view>
<!-- #endif --> <!-- #endif -->
<view class="cu-form-group"> <view class="cu-form-group">
<view class="title">详细地址</view> <view class="title">详细地址</view>
<input name="address" :value="formData.address"></input> <input name="address" v-model="formData.address"></input>
</view> </view>
<view class="cu-form-group margin-top margin-bottom-with-bar"> <view class="cu-form-group margin-top margin-bottom-with-bar">
<view class="title">默认地址</view> <view class="title">默认地址</view>
<!-- 0.普通地址, 1.默认地址 -->
<switch class="main-color radius" @change="isDefaultChange" :class="formData.isDefault?'checked':''" <switch class="main-color radius" @change="isDefaultChange" :class="formData.isDefault?'checked':''"
:checked="formData.isDefault?true:false" name="isDefault" :value="formData.isDefault"></switch> :checked="formData.isDefault?true:false" name="isDefault" :value="formData.isDefault" v-model="formData.isDefault"></switch>
</view> </view>
<!-- 底部操作栏 --> <!-- 底部操作栏 -->
<view class="cu-bar tabbar border shop fixed-bottom-bar"> <view class="cu-bar tabbar border shop fixed-bottom-bar">
@ -52,7 +53,7 @@
multiIndex: [0, 0, 0], multiIndex: [0, 0, 0],
formData: { formData: {
}, },
mode: 1 // 1为新增，0 mode: 1 // 1为新增，0为修改
} }
}, },
onLoad(options) { onLoad(options) {
@ -67,10 +68,24 @@
}, },
methods: { methods: {
async loadData() { async loadData() {
this.areaList = await this.$api.data('areaList'); // this.areaList = await this.$api.data('areaList');
this.loadAreaList();
}, },
fillForm(addressInfo) { fillForm(addressInfo) {
this.formData = addressInfo && Object.keys(addressInfo).length > 0 ? addressInfo : this.formData; this.formData = addressInfo && Object.keys(addressInfo).length > 0 ? addressInfo : this.formData;
},
async loadAreaList(idArr) {
let areaList = await this.$request.areaListByStep();
areaList = areaList.data;
let col1Code = idArr ? idArr[0] : areaList[0].areaCode;
let subAreaList = await this.$request.areaListByStep({ parentCode: col1Code });
subAreaList = subAreaList.data;
let col2Code = idArr ? idArr[1] : subAreaList[0].areaCode;
let subSubAreaList = await this.$request.areaListByStep({ parentCode: col2Code });
subSubAreaList = subSubAreaList.data;
this.areaList.push(areaList);
this.areaList.push(subAreaList);
this.areaList.push(subSubAreaList);
}, },
regionChange(e) { regionChange(e) {
this.multiIndex = e.detail.value; this.multiIndex = e.detail.value;
@ -78,15 +93,44 @@
for(let i = 0; i < this.areaList.length; i++) { for(let i = 0; i < this.areaList.length; i++) {
chosenArea.push(this.areaList[i][this.multiIndex[i]]); chosenArea.push(this.areaList[i][this.multiIndex[i]]);
} }
this.formData.area = chosenArea; this.formData.area = chosenArea;
this.formData.provinceId = chosenArea[1].areaId;
this.formData.cityId = chosenArea[2].areaId;
this.formData.countryId = chosenArea[0].areaId;
},
async regionColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
let subSubAreaList = [];
// 通过一级查询二级，通过二级查三级
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[0][colObj.value].areaCode});
subAreaList = subAreaList.data;
if (subAreaList && subAreaList.length) {
subSubAreaList = await this.$request.areaListByStep({parentCode: subAreaList[0].areaCode});
subSubAreaList = subSubAreaList.data;
}
this.areaList.pop();
this.areaList.pop();
this.areaList.push(subAreaList);
this.areaList.push(subSubAreaList);
this.multiIndex = [colObj.value, 0, 0];
} else if (colObj.column == 1) {
// 通过二级查三级
let subSubAreaList = await this.$request.areaListByStep({parentCode: subAreaList[0].areaCode});
subSubAreaList = subSubAreaList.data;
this.areaList.pop();
this.areaList.push(subSubAreaList);
this.multiIndex = [this.multiIndex[0], colObj.value, 0];
}
}, },
isDefaultChange(e) { isDefaultChange(e) {
this.formData.isDefault = e.detail.value; this.formData.isDefault = e.detail.value;
}, },
validateForm(addressInfo) { validateForm(addressInfo) {
let valid = Boolean(addressInfo.person2Contact) && let valid = Boolean(addressInfo.name) &&
Boolean(addressInfo.phone) && Boolean(addressInfo.phone) &&
Boolean(addressInfo.address); Boolean(addressInfo.address) &&
Boolean(addressInfo.area) && addressInfo.area.length > 0
if (!valid) { if (!valid) {
uni.showToast({ uni.showToast({
@ -104,15 +148,43 @@
} }
return valid; return valid;
}, },
submit(e) { async submit(e) {
const confirmFormData = Object.assign({}, this.formData, e.detail.value) const confirmFormData = Object.assign({}, this.formData, e.detail.value)
let formValid = this.validateForm(confirmFormData); let formValid = this.validateForm(confirmFormData);
if (formValid) { if (formValid) {
uni.showToast({ let isSuccess = false;
title: '保存成功', if (this.mode === 1) {
icon: 'success', let res = await this.$request.addAddressList({
mask: true ...this.formData,
}) customerId: this.$request.getCurUserInfo().customerId,
isDefault: this.formData.isDefault ? 1 : 0
});
if (res.code === 0) {
isSuccess = true;
}
} else if (this.mode === 0) {
let res = await this.$request.editAddressList({
...this.formData,
customerId: this.$request.getCurUserInfo().customerId,
isDefault: this.formData.isDefault ? 1 : 0
});
if (res.code === 0) {
isSuccess = true;
}
}
if (isSuccess) {
uni.showToast({
title: '保存成功',
icon: 'success',
mask: true
})
} else {
uni.showToast({
title: '保存失败',
icon: 'error',
mask: true
})
}
} }
} }
} }

67
pages/my/my-address.vue
View File

@ -11,39 +11,28 @@
<view @click="chooseAddress(item)"> <view @click="chooseAddress(item)">
<view class="flex justify-start align-center"> <view class="flex justify-start align-center">
<view class='cu-tag bg-yellow margin-right-sm' v-if="item.isDefault">默认</view> <view class='cu-tag bg-yellow margin-right-sm' v-if="item.isDefault">默认</view>
<view class="text-gray margin-right-xs" v-for="(areaObj, index) in item.area"> <view class="text-gray margin-right-xs">{{item.countryName}}</view>
{{areaObj.name}}</view> <view class="text-gray margin-right-xs">{{item.provinceName}}</view>
<view class="text-gray margin-right-xs">{{item.cityName}}</view>
</view> </view>
<view class="text-lg margin-tb-sm">{{item.address}}</view> <view class="text-lg margin-tb-sm">{{item.address}}</view>
<view class="text-gray"> <view class="text-gray">
<text class="margin-right">{{item.person2Contact}}</text> <text class="margin-right">{{item.name}}</text>
<text>{{item.phone}}</text> <text>{{item.phone}}</text>
</view> </view>
</view> </view>
<view class="oper-column text-xl flex justify-end"> <view class="oper-column text-xl flex justify-end">
<view class="cuIcon-edit padding-lr-xs padding-tb" @click="addEditAddress(item)"></view> <view class="cuIcon-edit padding-lr-xs padding-tb" @click="addEditAddress(item)"></view>
<view class="cuIcon-close padding-lr-xs padding-tb" @click="confirm2DelAddress(item, index)"></view> <view class="cuIcon-close padding-lr-xs padding-tb" @click="confirm2DelAddress(item)"></view>
</view> </view>
</view> </view>
</view> </view>
<!-- 底部新增地址按钮 --> <!-- 底部新增地址按钮 -->
<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back"> <view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
<button class="cu-btn bg-main-color long-btn margin-lr-sm shadow-blur" @click="addEditAddress">新增地址</button> <button class="cu-btn bg-main-color long-btn margin-lr-sm shadow-blur" @click="addEditAddress(null)">新增地址</button>
</view> </view>
<!-- 模态框 --> <!-- 模态框 -->
<view class="cu-modal" :class="modalName=='delAddress'?'show':''"> <confirm-modal ref="confirmModal" :content="'是否确定删除？'"></confirm-modal>
<view class="cu-dialog">
<view class="padding-xl">
是否删除该地址？
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub text-black" @tap="hideModal">取消</view>
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
@click="delAddress">确定</view>
</view>
</view>
</view>
<confirm-modal ref="confirmModal" :content="'是否确定删除？'" :confirm="delAddress.bind(this, 1)"></confirm-modal>
</view> </view>
</template> </template>
@ -54,7 +43,6 @@
myAddressList: [], myAddressList: [],
modalName: '', modalName: '',
delAddressInfo: {}, delAddressInfo: {},
delAddressIndex: 0,
chooseMode: false chooseMode: false
} }
}, },
@ -62,15 +50,21 @@
if (Boolean(options)) { if (Boolean(options)) {
this.chooseMode = options.chooseMode === 'true' ? true : false; this.chooseMode = options.chooseMode === 'true' ? true : false;
} }
this.loadData();
this.bindEvent(); this.bindEvent();
}, },
onShow() {
this.loadData();
},
onUnload() { onUnload() {
this.offBindEvent(); this.offBindEvent();
}, },
methods: { methods: {
async loadData() { async loadData() {
this.myAddressList = await this.$api.data('myAddressList'); // this.myAddressList = await this.$api.data('myAddressList');
let res = await this.$request.getAddressList({
customerId: this.$request.getCurUserInfo().customerId
});
this.myAddressList = res.data;
}, },
bindEvent() { bindEvent() {
uni.$on(this.$globalFun.CONFIRM, this.delAddress); uni.$on(this.$globalFun.CONFIRM, this.delAddress);
@ -83,6 +77,16 @@
let params = null; let params = null;
if (addressInfo) { if (addressInfo) {
// 修改 // 修改
addressInfo.area = [{
areaId: addressInfo.countryId,
areaName: addressInfo.countryName
}, {
areaId: addressInfo.provinceId,
areaName: addressInfo.provinceName
}, {
areaId: addressInfo.cityId,
areaName: addressInfo.cityName
}]
params = { params = {
addressInfo: addressInfo, addressInfo: addressInfo,
mode: 0 mode: 0
@ -97,13 +101,26 @@
url: '/pages/my/edit-address?params=' + encodeURIComponent(JSON.stringify(params)) url: '/pages/my/edit-address?params=' + encodeURIComponent(JSON.stringify(params))
}) })
}, },
confirm2DelAddress(addressInfo, index) { confirm2DelAddress(addressInfo) {
this.delAddressInfo = addressInfo; this.delAddressInfo = addressInfo;
this.delAddressIndex = index;
this.$refs.confirmModal.showModal(); this.$refs.confirmModal.showModal();
}, },
delAddress() { async delAddress() {
this.myAddressList = this.myAddressList.slice(0, this.delAddressIndex).concat(this.myAddressList.slice(++this.delAddressIndex)); let res = await this.$request.delAddressList(this.delAddressInfo.customerAddressId);
if (res.code === 0) {
uni.showToast({
title: '删除成功',
icon: 'success',
mask: true
})
this.loadData();
} else {
uni.showToast({
title: '删除失败',
icon: 'error',
mask: true
})
}
}, },
showModal(e) { showModal(e) {
this.modalName = typeof e === 'string' ? e : e.currentTarget.dataset.target this.modalName = typeof e === 'string' ? e : e.currentTarget.dataset.target

27
pages/order/order-detail.vue
View File

@ -9,14 +9,14 @@
<view v-if="formInfo.defaultAddress" class="bg-white"> <view v-if="formInfo.defaultAddress" class="bg-white">
<view class="padding flex justify-between align-center" @click="showAddress2Choose"> <view class="padding flex justify-between align-center" @click="showAddress2Choose">
<view> <view>
<view class="flex justify-start align-center"> <view class="flex justify-start align-center">
<view class="text-gray margin-right-xs" v-for="(areaObj, index) in formInfo.defaultAddress.area"> <view class="text-gray margin-right-xs">{{formInfo.defaultAddress.countryName}}</view>
{{areaObj.name}} <view class="text-gray margin-right-xs">{{formInfo.defaultAddress.provinceName}}</view>
</view> <view class="text-gray margin-right-xs">{{formInfo.defaultAddress.cityName}}</view>
</view> </view>
<view class="text-lg margin-tb-sm">{{formInfo.defaultAddress.address}}</view> <view class="text-lg margin-tb-sm">{{formInfo.defaultAddress.address}}</view>
<view class="text-gray"> <view class="text-gray">
<text class="margin-right">{{formInfo.defaultAddress.person2Contact}}</text> <text class="margin-right">{{formInfo.defaultAddress.name}}</text>
<text>{{formInfo.defaultAddress.phone}}</text> <text>{{formInfo.defaultAddress.phone}}</text>
</view> </view>
</view> </view>
@ -95,7 +95,10 @@
<view class="flex justify-between align-center"> <view class="flex justify-between align-center">
<!-- <text class="text-black">发票信息</text> <!-- <text class="text-black">发票信息</text>
<text class="text-sm text-bold cuIcon-right"></text> --> <text class="text-sm text-bold cuIcon-right"></text> -->
<text class="text-black">是否需要发票</text> <view class="basis-df">
<view class="text-black">是否需要发票</view>
<view class="text-red text-sm">需开具发票请在下面备注发票信息</view>
</view>
<radio-group @change="changeIsNeedBill"> <radio-group @change="changeIsNeedBill">
<label class="radio"> <label class="radio">
<radio class="main-color" value="0" :checked="formInfo.isNeedBill=='0'" /> <radio class="main-color" value="0" :checked="formInfo.isNeedBill=='0'" />
@ -240,7 +243,7 @@
// customerId: curUserInfo.userId, // customerId: curUserInfo.userId,
customerId: 2, customerId: 2,
serverTime: this.formInfo.doorTime, serverTime: this.formInfo.doorTime,
addressId: this.formInfo.defaultAddress.id, addressId: this.formInfo.defaultAddress.customerAddressId,
payType: this.formInfo.payWay, payType: this.formInfo.payWay,
remark: this.formInfo.comments, remark: this.formInfo.comments,
isNeedBill: this.formInfo.isNeedBill, isNeedBill: this.formInfo.isNeedBill,
@ -255,6 +258,16 @@
} }
// 调用下单接口 // 调用下单接口
let res = await this.$request.placeOrder(params); let res = await this.$request.placeOrder(params);
if (res.code != 0) {
return;
} else if (this.formInfo.payWay == '1') {
// 上门支付则不拉起微信支付窗口，直接跳转至提示导航页面
uni.navigateTo({
url: '/pages/order/pay-result?customTip=下单成功，待上门支付'
})
return;
}
try { try {
// 获取微信支付所需参数 // 获取微信支付所需参数
let exPayParams = { let exPayParams = {

12
pages/order/pay-result.vue
View File

@ -6,7 +6,8 @@
<block slot="content">支付结果</block> <block slot="content">支付结果</block>
</cu-custom> </cu-custom>
<view class="padding-lg margin-xl text-center"> <view class="padding-lg margin-xl text-center">
<view class="text-xxl">{{payResult ? '支付成功' : '支付失败'}}</view> <view class="text-xxl" v-if="customTip">{{customTip}}</view>
<view class="text-xxl" v-else>{{payResult ? '支付成功' : '支付失败'}}</view>
<view class="margin-top"> <view class="margin-top">
<view class="cu-btn bg-main-color radius text-xl shadow-blur" @click="showMyOrder">查看我的订单</view> <view class="cu-btn bg-main-color radius text-xl shadow-blur" @click="showMyOrder">查看我的订单</view>
</view> </view>
@ -19,6 +20,7 @@
data() { data() {
return { return {
payResult: false, payResult: false,
customTip: null,
servOrderTabList: [{ servOrderTabList: [{
type: 'ordersWait2Pay', type: 'ordersWait2Pay',
name: '待付款' name: '待付款'
@ -39,14 +41,16 @@
} }
}, },
onLoad(options) { onLoad(options) {
if (options.payResult === '0') { if (options.payResult) {
this.payResult = true; this.payResult = options.payResult === '0' ? true : false;
} else if (options.customTip) {
this.customTip = options.customTip;
} }
}, },
methods: { methods: {
showMyOrder() { showMyOrder() {
let params = null; let params = null;
if (this.payResult) { if (this.payResult || this.customTip) {
params = { params = {
orderType: this.servOrderType, orderType: this.servOrderType,
tabHeaderList: this.servOrderTabList, tabHeaderList: this.servOrderTabList,