Skip to content

肖康 / H5_2.0

Go to a project
Commit 50bd7e12 by LJM
Options

cs

parent f73f30ad
Inline Side-by-side
Showing with 346 additions and 25 deletions
assets/css/mine/userAddress.scss
......@@ -43,11 +43,11 @@
}
}
.p2 {
height: 66rpx;
font-size: 24rpx;
color: #919399;
}
.operate {
margin-top: 17rpx;
.edit {
margin-right: 32rpx;
.iconfont {
......
pages/mine/userAddress.vue
......@@ -24,17 +24,17 @@
</view>
</template>
<template v-else>
<view class="row verCenter">
<view class="row verCenter" @click="setdefault(item.address_id)">
<view class="default"></view>
<text class="default-text">设为默认</text>
</view>
</template>
<view class="row verCenter">
<navigator class="edit row verCenter" url="/user/userAddressEdit" hover-class="none">
<navigator class="edit row verCenter" :url="'/user/userAddressEdit?address_id=' + item.address_id" hover-class="none">
<text class="iconfont icon-bjt"></text>
<text class="tt">编辑</text>
</navigator>
<view class="delete row verCenter">
<view class="delete row verCenter" @click="deleteAdress(item.address_id)">
<text class="iconfont icon-del"></text>
<text class="tt">删除</text>
</view>
......@@ -78,6 +78,52 @@ export default {
this.list = res.data;
}
});
},
/**
* 删除地址
* @param {Object} address_id
*/
deleteAdress(address_id) {
uni.showModal({
title: '',
content: '您确定删除该地址嘛',
success: res => {
if (res.confirm) {
this.request(Api_Url + '/address/delete', 'POST', { address_id: address_id }, true, true).then(res => {
if (res.err_code === 0) {
uni.showToast({
title: '删除成功',
icon: 'success'
});
this.getData();
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
/**
* 设置默认地址
* @param {Object} address_id
*/
setdefault(address_id) {
this.request(Api_Url + '/address/setdefault', 'POST', { address_id: address_id }, true, true).then(res => {
if (res.err_code === 0) {
this.getData();
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
}
}
};
......
pages/mine/userAddressAdd.vue
......@@ -4,7 +4,7 @@
<view class="form-box">
<view class="input-box input row verCenter">
<text class="tt">收货人</text>
<input type="text" placeholder="请输入收货人" class="uni-input" />
<input type="text" placeholder="请输入收货人" class="uni-input" v-model="formParams.consignee" />
</view>
<view class="input-box input row verCenter">
<text class="tt">手机号码</text>
......@@ -14,25 +14,22 @@
<view class="iconfont icon-arrbot"></view>
</view>
</picker>
<input type="number" placeholder="请输入手机号" class="uni-input" style="margin-left: 24rpx;" />
<input type="number" placeholder="请输入手机号" class="uni-input" style="margin-left: 24rpx;" v-model="formParams.mobile" />
</view>
<view class="input-box input row verCenter">
<text class="tt">所在地区</text>
<picker @change="bindPickerChange" :value="index" :range="array" class="area">
<view class="row verCenter bothSide">
<view class="uni-input">省、市、区</view>
<view class="iconfont icon-arrbot"></view>
</view>
<picker mode="multiSelector" @change="pickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" :range-key="'name'">
<view>{{ selectText }}</view>
</picker>
</view>
<view class="input-box textarea row verCenter"><textarea placeholder="请输入详细街道地址"></textarea></view>
<view class="input-box textarea row verCenter"><textarea placeholder="请输入详细街道地址" v-model="formParams.detail_address"></textarea></view>
</view>
<view class="setting-default row verCenter bothSide">
<text class="tt">设为默认地址</text>
<view><switch checked style="transform:scale(0.7)" /></view>
<view><switch @change="onSwitchChange" checked style="transform:scale(0.7)" /></view>
</view>
<view class="btn row verCenter">
<view class="btn1 row rowCenter verCenter"><text class="text">保存地址</text></view>
<view class="btn1 row rowCenter verCenter" @click="create()"><text class="text">保存地址</text></view>
</view>
</view>
</template>
......@@ -47,19 +44,151 @@ export default {
},
data() {
return {
multiArray: [[], [], []],
multiIndex: [0, 0, 0],
index: 0,
array: ['0086', '00886', '00853', '00852'],
selectText: '请选择省市区',
formParams: {
address_type: 0,
consignee: '',
province: '',
city: '',
district: '',
detail_address: '',
is_default: 1,
mobile: '',
intl_code: '86'
}
};
},
onLoad() {},
onShow() {
this.getProvince();
},
methods: {
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
this.index = e.detail.value;
this.formParams.intl_code = this.array[e.detail.value];
},
onSwitchChange(e) {
this.formParams.is_default = e.detail.value ? 1 : 0;
},
/**
* 地址监听
* @param {Object} e
*/
bindMultiPickerColumnChange(e) {
console.log(e.detail);
if (e.detail.column === 0) {
// 第一列滑动
this.multiIndex[0] = e.detail.value;
this.getCity(this.multiArray[0][e.detail.value].value, true);
// 第一列滑动之后 第二列 和第三列 都变为第一个
this.multiIndex.splice(1, 1, 0);
this.multiIndex.splice(2, 1, 0);
} else if (e.detail.column === 1) {
// 第二列滑动
this.multiIndex[1] = e.detail.value;
this.getDistrict(this.multiArray[1][e.detail.value].value);
// 第二列滑动之后 第三列 变成第一个
this.multiIndex.splice(2, 1, 0);
} else if (e.detail.column === 2) {
// 第三列滑动
this.multiIndex[2] = e.detail.value;
}
this.$forceUpdate();
},
/**
* 省市区完成
* @param {Object} e
*/
pickerChange(e) {
this.multiIndex = e.detail.value;
this.formParams.province = this.multiArray[0][this.multiIndex[0]].value;
this.formParams.city = this.multiArray[1][this.multiIndex[1]].value;
this.formParams.district = this.multiArray[2][this.multiIndex[2]].value;
this.selectText = `${this.multiArray[0][this.multiIndex[0]].name + ',' + this.multiArray[1][this.multiIndex[1]].name + ',' + this.multiArray[2][this.multiIndex[2]].name}`;
},
/**
* 获取省数据
*/
getProvince(id = 1) {
console.log('获取省数据id：' + id);
this.request(Api_Url + '/address/pcd', 'POST', { id: id }, true, true).then(res => {
if (res.err_code === 0) {
var arr = [];
for (var key in res.data) {
arr.push({ name: res.data[key], value: parseInt(key) });
}
this.multiArray[0] = arr;
this.getCity(2, true);
this.$forceUpdate();
}
});
},
/**
* @param {Object} id
* @param {Object} default
*/
getCity(id, defaultParms) {
console.log('获取市数据id：' + id);
this.request(Api_Url + '/address/pcd', 'POST', { id: id }, true, true).then(res => {
if (res.err_code === 0) {
var arr = [];
for (var key in res.data) {
arr.push({ name: res.data[key], value: parseInt(key) });
}
this.multiArray[1] = arr;
if (defaultParms) {
this.getDistrict(arr[0].value);
}
this.$forceUpdate();
}
});
},
/**
* 获取区数据
* @param {Object} id
*/
getDistrict(id) {
console.log('获取区数据id：' + id);
this.request(Api_Url + '/address/pcd', 'POST', { id: id }, true, true).then(res => {
if (res.err_code === 0) {
var arr = [];
for (var key in res.data) {
arr.push({ name: res.data[key], value: parseInt(key) });
}
this.multiArray[2] = arr;
this.$forceUpdate();
}
});
},
/**
* 保存地址
*/
create() {
this.request(Api_Url + '/address/create', 'POST', this.formParams, true, true).then(res => {
if (res.err_code === 0) {
uni.showToast({
title: '保存成功',
icon: 'success'
});
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 2000);
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
}
}
};
......
pages/mine/userAddressEdit.vue
......@@ -8,7 +8,7 @@
<view class="form-box">
<view class="input-box input row verCenter">
<text class="tt">收货人</text>
<input type="text" placeholder="请输入收货人" class="uni-input" />
<input type="text" placeholder="请输入收货人" class="uni-input" v-model="formParams.consignee" />
</view>
<view class="input-box input row verCenter">
<text class="tt">手机号码</text>
......@@ -18,22 +18,19 @@
<view class="iconfont icon-arrbot"></view>
</view>
</picker>
<input type="number" placeholder="请输入手机号" class="uni-input" style="margin-left: 24rpx;" />
<input type="number" placeholder="请输入手机号" class="uni-input" style="margin-left: 24rpx;" v-model="formParams.mobile" />
</view>
<view class="input-box input row verCenter">
<text class="tt">所在地区</text>
<picker @change="bindPickerChange" :value="index" :range="array" class="area">
<view class="row verCenter bothSide">
<view class="uni-input">省、市、区</view>
<view class="iconfont icon-arrbot"></view>
</view>
<picker mode="multiSelector" @change="pickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" :range-key="'name'">
<view>{{ selectText }}</view>
</picker>
</view>
<view class="input-box textarea row verCenter"><textarea placeholder="请输入详细街道地址"></textarea></view>
<view class="input-box textarea row verCenter"><textarea placeholder="请输入详细街道地址" v-model="formParams.detail_address"></textarea></view>
</view>
<view class="setting-default row verCenter bothSide">
<text class="tt">设为默认地址</text>
<view><switch checked style="transform:scale(0.7)" /></view>
<view><switch @change="onSwitchChange" checked style="transform:scale(0.7)" /></view>
</view>
<view class="btn row verCenter">
<view class="btn1 row rowCenter verCenter"><text class="text">保存修改</text></view>
......@@ -51,19 +48,168 @@ export default {
},
data() {
return {
multiArray: [[], [], []],
multiIndex: [0, 0, 0],
index: 0,
array: ['0086', '00886', '00853', '00852'],
selectText: '请选择省市区',
address_id: '',
formParams: {
address_type: 0,
consignee: '',
province: '',
city: '',
district: '',
detail_address: '',
is_default: 1,
mobile: '',
intl_code: '86'
}
};
},
onLoad() {},
onLoad(options) {
this.address_id = options.address_id || '';
},
onShow() {
this.getData();
},
methods: {
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
this.index = e.detail.value;
this.formParams.intl_code = this.array[e.detail.value];
},
onSwitchChange(e) {
this.formParams.is_default = e.detail.value ? 1 : 0;
},
/**
* 地址监听
* @param {Object} e
*/
bindMultiPickerColumnChange(e) {
console.log(e.detail);
if (e.detail.column === 0) {
// 第一列滑动
this.multiIndex[0] = e.detail.value;
this.getCity(this.multiArray[0][e.detail.value].value, true);
// 第一列滑动之后 第二列 和第三列 都变为第一个
this.multiIndex.splice(1, 1, 0);
this.multiIndex.splice(2, 1, 0);
} else if (e.detail.column === 1) {
// 第二列滑动
this.multiIndex[1] = e.detail.value;
this.getDistrict(this.multiArray[1][e.detail.value].value);
// 第二列滑动之后 第三列 变成第一个
this.multiIndex.splice(2, 1, 0);
} else if (e.detail.column === 2) {
// 第三列滑动
this.multiIndex[2] = e.detail.value;
}
this.$forceUpdate();
},
/**
* 省市区完成
* @param {Object} e
*/
pickerChange(e) {
this.multiIndex = e.detail.value;
this.formParams.province = this.multiArray[0][this.multiIndex[0]].value;
this.formParams.city = this.multiArray[1][this.multiIndex[1]].value;
this.formParams.district = this.multiArray[2][this.multiIndex[2]].value;
this.selectText = `${this.multiArray[0][this.multiIndex[0]].name + ',' + this.multiArray[1][this.multiIndex[1]].name + ',' + this.multiArray[2][this.multiIndex[2]].name}`;
},
/**
* 获取信息
*/
getData() {
this.request(Api_Url + '/address/info', 'POST', { address_id: this.address_id }, true, true).then(res => {
if (res.err_code === 0) {
this.formParams.consignee = res.data.consignee;
this.formParams.mobile = res.data.mobile;
this.selectText = `${res.data.province_val + ',' + res.data.city_val + ',' + res.data.district_val}`;
this.formParams.detail_address = res.data.detail_address;
}
});
},
/**
* 获取省数据
*/
getProvince(id = 1) {
console.log('获取省数据id：' + id);
this.request(Api_Url + '/address/pcd', 'POST', { id: id }, true, true).then(res => {
if (res.err_code === 0) {
var arr = [];
for (var key in res.data) {
arr.push({ name: res.data[key], value: parseInt(key) });
}
this.multiArray[0] = arr;
this.getCity(2, true);
this.$forceUpdate();
}
});
},
/**
* @param {Object} id
* @param {Object} default
*/
getCity(id, defaultParms) {
console.log('获取市数据id：' + id);
this.request(Api_Url + '/address/pcd', 'POST', { id: id }, true, true).then(res => {
if (res.err_code === 0) {
var arr = [];
for (var key in res.data) {
arr.push({ name: res.data[key], value: parseInt(key) });
}
this.multiArray[1] = arr;
if (defaultParms) {
this.getDistrict(arr[0].value);
}
this.$forceUpdate();
}
});
},
/**
* 获取区数据
* @param {Object} id
*/
getDistrict(id) {
console.log('获取区数据id：' + id);
this.request(Api_Url + '/address/pcd', 'POST', { id: id }, true, true).then(res => {
if (res.err_code === 0) {
var arr = [];
for (var key in res.data) {
arr.push({ name: res.data[key], value: parseInt(key) });
}
this.multiArray[2] = arr;
this.$forceUpdate();
}
});
},
/**
* 保存地址
*/
create() {
this.request(Api_Url + '/address/create', 'POST', this.formParams, true, true).then(res => {
if (res.err_code === 0) {
uni.showToast({
title: '保存成功',
icon: 'success'
});
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 2000);
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment