增加新模块
This commit is contained in:
何江明
@@ -0,0 +1,271 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
const api_address = require("../../api/address.js");
|
||||
const api_common = require("../../api/common.js");
|
||||
const _sfc_main = {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: 0,
|
||||
name: null,
|
||||
// 收货人
|
||||
mobile: null,
|
||||
// 手机号码
|
||||
regionStr: null,
|
||||
// 所属地区
|
||||
countryId: null,
|
||||
// 国家ID
|
||||
provinceId: null,
|
||||
// 省份ID
|
||||
cityId: null,
|
||||
// 城市ID
|
||||
areaId: null,
|
||||
// 区域ID
|
||||
address: null
|
||||
// 详细地址
|
||||
},
|
||||
regionShow: false,
|
||||
regionColumns: [],
|
||||
regionLoading: false
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
const id = option.id;
|
||||
if (id && id !== 0) {
|
||||
this.getById(id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 用作编辑
|
||||
*/
|
||||
async getById(id) {
|
||||
const parasm = {
|
||||
id
|
||||
};
|
||||
const resp = await api_address.getAddressDetail(parasm);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data;
|
||||
this.form.id = id;
|
||||
this.form.name = data.name;
|
||||
this.form.mobile = data.phone;
|
||||
this.form.countryId = data.countryId;
|
||||
this.form.provinceId = data.provinceId;
|
||||
this.form.cityId = data.cityId;
|
||||
this.form.areaId = data.areaId;
|
||||
this.form.address = data.address;
|
||||
const regionStr = [];
|
||||
if (data.countryName) {
|
||||
regionStr.push(data.countryName);
|
||||
}
|
||||
if (data.provinceName) {
|
||||
regionStr.push(data.provinceName);
|
||||
}
|
||||
if (data.cityName) {
|
||||
regionStr.push(data.cityName);
|
||||
}
|
||||
if (data.areaName) {
|
||||
regionStr.push(data.areaName);
|
||||
}
|
||||
this.form.regionStr = regionStr;
|
||||
}
|
||||
},
|
||||
// 选择地址的弹框
|
||||
async regionShowCheck(status) {
|
||||
if (status) {
|
||||
const nation = await this.getRegion(0);
|
||||
const province = nation && nation.length !== 0 ? await this.getRegion(nation[0].id) : [];
|
||||
const city = province && province.length !== 0 ? await this.getRegion(province[0].id) : [];
|
||||
const area = city && city.length !== 0 ? await this.getRegion(city[0].id) : [];
|
||||
this.regionColumns = [nation, province, city, area];
|
||||
} else {
|
||||
this.regionColumns = [[], [], [], []];
|
||||
}
|
||||
this.regionShow = status;
|
||||
},
|
||||
// 数据交互
|
||||
async getRegion(pId) {
|
||||
this.regionLoading = true;
|
||||
const params = {
|
||||
parentId: pId
|
||||
};
|
||||
const resp = await api_common.getCascadeRegion(params);
|
||||
const arrOption = [];
|
||||
if (resp.bizcode === 100) {
|
||||
const data = resp.data;
|
||||
if (data && data.length !== 0) {
|
||||
data.map((item) => {
|
||||
arrOption.push({
|
||||
id: item.id,
|
||||
label: item.name,
|
||||
pId
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
this.regionLoading = false;
|
||||
return arrOption;
|
||||
},
|
||||
// 地区改变
|
||||
async regionChange(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
index,
|
||||
picker
|
||||
} = e;
|
||||
const selectData = this.regionColumns[columnIndex][index];
|
||||
const resultData = await this.getRegion(selectData.id);
|
||||
if (resultData && resultData.length !== 0) {
|
||||
const index2 = columnIndex + 1;
|
||||
this.regionColumns[index2] = resultData;
|
||||
}
|
||||
},
|
||||
// 提交地址
|
||||
regionConfirm(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values,
|
||||
index
|
||||
} = e;
|
||||
const regionStr = [];
|
||||
const regionId = [];
|
||||
value.map((item) => {
|
||||
if (item) {
|
||||
regionStr.push(item.label);
|
||||
regionId.push(item.id);
|
||||
}
|
||||
});
|
||||
this.form.regionStr = regionStr;
|
||||
if (regionId && regionId.length !== 0) {
|
||||
this.form.countryId = regionId[0] ? regionId[0] : null;
|
||||
this.form.provinceId = regionId[1] ? regionId[1] : null;
|
||||
this.form.cityId = regionId[2] ? regionId[2] : null;
|
||||
this.form.areaId = regionId[3] ? regionId[3] : null;
|
||||
}
|
||||
this.regionShowCheck(false);
|
||||
},
|
||||
// 添加地址
|
||||
async addAddress() {
|
||||
const params = {
|
||||
...this.form
|
||||
};
|
||||
if (!params.name) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: "请输入收货人"
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!params.mobile) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: "请输入收货人手机号"
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!params.regionStr) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: "请选择所在地区"
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!params.address) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: "请输入详细地址"
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!params.id || params.id === 0) {
|
||||
delete params.id;
|
||||
}
|
||||
if (!params.areaId || params.areaId === 0) {
|
||||
delete params.areaId;
|
||||
}
|
||||
delete params.regionStr;
|
||||
const res = await api_address.editAddress(params);
|
||||
if (res && res.bizcode === 100) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: "success",
|
||||
message: params.id && params.id !== 0 ? "修改成功" : "添加成功"
|
||||
});
|
||||
setTimeout(() => {
|
||||
common_vendor.index.navigateTo({
|
||||
url: "/pages/mine_address/mine_address"
|
||||
});
|
||||
}, 2e3);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_up_input2 = common_vendor.resolveComponent("up-input");
|
||||
const _easycom_up_image2 = common_vendor.resolveComponent("up-image");
|
||||
const _easycom_up_toast2 = common_vendor.resolveComponent("up-toast");
|
||||
const _easycom_up_picker2 = common_vendor.resolveComponent("up-picker");
|
||||
(_easycom_up_input2 + _easycom_up_image2 + _easycom_up_toast2 + _easycom_up_picker2)();
|
||||
}
|
||||
const _easycom_up_input = () => "../../uni_modules/uview-plus/components/u-input/u-input.js";
|
||||
const _easycom_up_image = () => "../../uni_modules/uview-plus/components/u-image/u-image.js";
|
||||
const _easycom_up_toast = () => "../../uni_modules/uview-plus/components/u-toast/u-toast.js";
|
||||
const _easycom_up_picker = () => "../../uni_modules/uview-plus/components/u-picker/u-picker.js";
|
||||
if (!Math) {
|
||||
(_easycom_up_input + _easycom_up_image + _easycom_up_toast + _easycom_up_picker)();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: common_vendor.o(($event) => $data.form.name = $event),
|
||||
b: common_vendor.p({
|
||||
placeholder: "收货人",
|
||||
border: "surround",
|
||||
customStyle: {
|
||||
"border": "0rpx"
|
||||
},
|
||||
modelValue: $data.form.name
|
||||
}),
|
||||
c: common_vendor.o(($event) => $data.form.mobile = $event),
|
||||
d: common_vendor.p({
|
||||
placeholder: "请填写收货人手机号",
|
||||
border: "surround",
|
||||
customStyle: {
|
||||
"border": "0rpx"
|
||||
},
|
||||
modelValue: $data.form.mobile
|
||||
}),
|
||||
e: common_vendor.t($data.form.regionStr && $data.form.regionStr.join("/") || "所在地区"),
|
||||
f: common_vendor.p({
|
||||
src: "/static/common/right_soild.png",
|
||||
width: "14",
|
||||
height: "14",
|
||||
bgColor: "#f1f6ff00"
|
||||
}),
|
||||
g: common_vendor.o(($event) => $options.regionShowCheck(true)),
|
||||
h: common_vendor.o(($event) => $data.form.address = $event),
|
||||
i: common_vendor.p({
|
||||
placeholder: "门牌号、小区、楼栋号、单元室等",
|
||||
border: "surround",
|
||||
customStyle: {
|
||||
"border": "0rpx",
|
||||
"height": "100rpx"
|
||||
},
|
||||
modelValue: $data.form.address
|
||||
}),
|
||||
j: common_vendor.o((...args) => $options.addAddress && $options.addAddress(...args)),
|
||||
k: common_vendor.sr("uToastRef", "40d63b91-4"),
|
||||
l: common_vendor.sr("uPickerRef", "40d63b91-5"),
|
||||
m: common_vendor.o($options.regionConfirm),
|
||||
n: common_vendor.o($options.regionChange),
|
||||
o: common_vendor.p({
|
||||
show: $data.regionShow,
|
||||
columns: $data.regionColumns,
|
||||
loading: $data.regionLoading,
|
||||
keyName: "label",
|
||||
itemHeight: "34"
|
||||
})
|
||||
};
|
||||
}
|
||||
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-40d63b91"]]);
|
||||
wx.createPage(MiniProgramPage);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/mine_address_add/mine_address_add.js.map
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"navigationBarTitleText": "添加地址",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarTextStyle": "black",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "default",
|
||||
"usingComponents": {
|
||||
"up-input": "../../uni_modules/uview-plus/components/u-input/u-input",
|
||||
"up-image": "../../uni_modules/uview-plus/components/u-image/u-image",
|
||||
"up-toast": "../../uni_modules/uview-plus/components/u-toast/u-toast",
|
||||
"up-picker": "../../uni_modules/uview-plus/components/u-picker/u-picker"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="address_add_warp data-v-40d63b91"><view class="address_form data-v-40d63b91"><view class="add_form_item add_form_item_but data-v-40d63b91"><view class="add_form_title data-v-40d63b91">收货人</view><up-input wx:if="{{b}}" class="data-v-40d63b91" u-i="40d63b91-0" bind:__l="__l" bindupdateModelValue="{{a}}" u-p="{{b}}"></up-input></view><view class="add_form_item add_form_item_but data-v-40d63b91"><view class="add_form_title data-v-40d63b91">手机号码</view><up-input wx:if="{{d}}" class="data-v-40d63b91" u-i="40d63b91-1" bind:__l="__l" bindupdateModelValue="{{c}}" u-p="{{d}}"></up-input></view><view class="add_form_item add_form_item_but data-v-40d63b91"><view class="add_form_title data-v-40d63b91">所在地区</view><view class="region_warp data-v-40d63b91" bindtap="{{g}}"><view class="data-v-40d63b91" style="color:#808080;margin-left:22rpx;font-size:28rpx">{{e}}</view><up-image wx:if="{{f}}" class="data-v-40d63b91" u-i="40d63b91-2" bind:__l="__l" u-p="{{f}}"></up-image></view></view><view class="add_form_item data-v-40d63b91"><view class="add_form_title data-v-40d63b91">详细地址</view><up-input wx:if="{{i}}" class="data-v-40d63b91" u-i="40d63b91-3" bind:__l="__l" bindupdateModelValue="{{h}}" u-p="{{i}}"></up-input></view></view><view class="add_but data-v-40d63b91" bindtap="{{j}}"> 保存地址 </view><up-toast class="r data-v-40d63b91" u-r="uToastRef" u-i="40d63b91-4" bind:__l="__l"></up-toast><up-picker wx:if="{{o}}" class="r data-v-40d63b91" u-r="uPickerRef" bindconfirm="{{m}}" bindchange="{{n}}" u-i="40d63b91-5" bind:__l="__l" u-p="{{o}}"></up-picker></view>
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/* uni.scss */
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
.address_add_warp.data-v-40d63b91 {
|
||||
height: calc(100vh - 58rpx);
|
||||
background-color: #F5F5F5;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.address_form.data-v-40d63b91 {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 0 30rpx 30rpx;
|
||||
}
|
||||
.region_warp.data-v-40d63b91 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 160rpx);
|
||||
}
|
||||
.address_default.data-v-40d63b91 {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.address_default .title.data-v-40d63b91 {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
}
|
||||
Reference in New Issue
Block a user