zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

会员地址管理CRUD

pull/2/head
sfmind 2022-05-01 22:39:54 +08:00
parent f7d384e55d
commit aa22ef8339
7 changed files with 433 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
yudao-ui-app/app.scss
View File

@ -1,6 +1,8 @@
/* 页面公共scss */
.container {
background-color: $custom-bg-color;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}

4
yudao-ui-app/pages.json
View File

@ -67,13 +67,13 @@
}
},
{
"path": "pages/address/add",
"path": "pages/address/create",
"style": {
"navigationBarTitleText": "新增地址"
}
},
{
"path": "pages/address/edit",
"path": "pages/address/update",
"style": {
"navigationBarTitleText": "修改地址"
}

17
yudao-ui-app/pages/address/add.vue
View File

@ -1,17 +0,0 @@
<template>
<view class="container"> </view>
</template>
<script>
export default {
data() {
return {
title: ''
}
},
onLoad() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>

148
yudao-ui-app/pages/address/create.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<view class="container">
<view class="address-box">
<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
<u-form-item label="收件人名称" prop="name" labelWidth="90" borderBottom ref="item-name">
<u-input type="text" maxlength="11" v-model="formData.name" clearable placeholder="请填写收件人名称" border="none"></u-input>
</u-form-item>
<u-form-item label="手机号" prop="mobile" labelWidth="90" borderBottom ref="item-mobile">
<u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号" border="none"></u-input>
</u-form-item>
<u-form-item label="省市地区" prop="areaText" labelWidth="90" borderBottom @click=" regionVisible = true; hideKeyboard()" ref="item-areaText">
<u--input v-model="formData.areaText" disabled disabledColor="#ffffff" placeholder="请选择省市地区" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value" :hide-area="false" @confirm="onConfirm($event, 'region')" @cancel="onCancel" ref="region"></w-picker>
</u-form-item>
<u-form-item label="详细地址" prop="detail" labelWidth="90" borderBottom ref="item-detail">
<u--textarea placeholder="请输入街道门牌号不低于6个字" v-model="formData.detail" count></u--textarea>
</u-form-item>
<u-form-item label="默认地址" prop="type" labelWidth="90" borderBottom ref="item-type">
<u-radio-group v-model="formData.type">
<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.value"></u-radio>
</u-radio-group>
</u-form-item>
<view class="btn-group">
<u-button type="primary" text="保存地址" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
</view>
</u--form>
</view>
</view>
</template>
<script>
import { createAddress } from '../../api/address'
export default {
data() {
return {
regionVisible: false,
defaultRegion: ['110000', '110100', '110101'],
typeList: [
{
name: '是',
value: 1
},
{
name: '否',
value: 2
}
],
formData: {
name: '',
mobile: '',
areaText: '',
areaCode: '',
detail: '',
detailAddress: '',
type: 1
},
rules: {
name: [
{
type: 'string',
min: 2,
max: 12,
required: true,
message: '请填写收件人名称',
trigger: ['blur', 'change']
},
{
message: '收件人名称不能为空',
// 触发器可以同时用blur和change
trigger: ['change', 'blur']
}
],
mobile: [
{
type: 'integer',
required: true,
message: '请填写手机号',
trigger: ['blur', 'change']
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value)
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur']
}
],
areaText: {
type: 'string',
required: true,
message: '请选择省市地区',
trigger: ['blur', 'change']
},
detailAddress: {
type: 'string',
min: 6,
max: 30,
required: true,
message: '请填写详细地址',
trigger: ['blur', 'change']
}
}
}
},
onLoad() {},
methods: {
onConfirm(res) {
this.formData.areaText = res.result
this.formData.areaCode = res.value[2]
},
onCancel() {},
hideKeyboard() {
uni.hideKeyboard()
},
handleSubmit() {
this.$refs.form.validate().then(res => {
this.formData.detailAddress = this.formData.areaText + this.formData.detail
console.log(this.formData)
createAddress(this.formData).then(res => {
uni.$u.toast('地址已保存')
setTimeout(() => {
uni.navigateBack()
}, 1000)
})
})
}
}
}
</script>
<style lang="scss" scoped>
.address-box {
width: 690rpx;
margin: 0 auto;
padding-top: 30rpx;
}
</style>

17
yudao-ui-app/pages/address/edit.vue
View File

@ -1,17 +0,0 @@
<template>
<view class="container"> </view>
</template>
<script>
export default {
data() {
return {
title: ''
}
},
onLoad() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>

107
yudao-ui-app/pages/address/list.vue
View File

@ -1,17 +1,116 @@
<template>
<view class="container"> </view>
<view class="container">
<view class="address-list" v-for="(item, index) in addressList" :key="item.id">
<view class="address-item" @click="handleClick" @longpress="handleLongPress(item)">
<view class="left">
<u-avatar :text="item.name ? item.name.slice(0, 1) : 'U'" fontSize="18" randomBgColor></u-avatar>
</view>
<view class="middle">
<view class="info">
<view class="name">{{ item.name }}</view>
<view class="mobile">{{ item.mobile }}</view>
<u-tag class="type" v-if="item.type === 1" text="默认" plain size="mini" type="success"></u-tag>
</view>
<view class="detail">
<u--text :lines="2" size="14" color="#939393" :text="item.detailAddress"></u--text>
</view>
</view>
<navigator class="right" :url="`/pages/address/update?addressId=${item.id}`" open-type="navigate" hover-class="none">
<u-icon name="edit-pen" size="28"></u-icon>
</navigator>
</view>
</view>
<navigator class="fixed-btn-box" url="/pages/address/create" open-type="navigate" hover-class="none">
<u-button type="primary" size="large" text="新增地址"></u-button>
</navigator>
<u-safe-bottom customStyle="background: #ffffff"></u-safe-bottom>
</view>
</template>
<script>
import { getAddressList, deleteAddress } from '../../api/address'
export default {
data() {
return {
title: ''
addressList: []
}
},
onLoad() {},
methods: {}
onShow() {
this.loadAddressListData()
},
methods: {
loadAddressListData() {
getAddressList().then(res => {
this.addressList = res.data
})
},
handleLongPress(item) {
uni.showModal({
title: '提示',
content: `删除收件人[${item.name}${item.mobile}]\n地址：${item.detailAddress.slice(0, 5)}......${item.detailAddress.slice(-6)}？`,
success: res => {
if (res.confirm) {
deleteAddress({ id: item.id }).then(res => {
uni.$u.toast('地址已删除')
this.loadAddressListData();
})
} else if (res.cancel) {
//console.log('用户点击取消')
}
}
})
},
handleClick(){
// TODO 提交订单时选择地址逻辑
}
}
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.address-list {
.address-item {
padding: 10rpx 0;
border-bottom: $custom-border-style;
@include flex-space-between;
.left {
margin: 20rpx;
}
.middle {
flex: 1;
margin: 20rpx;
@include flex(column);
.info {
@include flex-left;
.name {
font-size: 30rpx;
font-weight: 700;
}
.mobile {
font-size: 28rpx;
margin-left: 15rpx;
}
.type {
margin-left: 15rpx;
}
}
.detail {
margin-top: 10rpx;
}
}
.right {
margin: 20rpx;
}
}
}
.fixed-btn-box {
position: fixed;
bottom: 0;
left: 0;
width: 750rpx;
}
</style>

178
yudao-ui-app/pages/address/update.vue Normal file
View File

@ -0,0 +1,178 @@
<template>
<view class="container">
<view class="address-box">
<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
<u-form-item label="收件人名称" prop="name" labelWidth="90" borderBottom ref="item-name">
<u-input type="text" maxlength="11" v-model="formData.name" clearable placeholder="请填写收件人名称" border="none"></u-input>
</u-form-item>
<u-form-item label="手机号" prop="mobile" labelWidth="90" borderBottom ref="item-mobile">
<u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号" border="none"></u-input>
</u-form-item>
<u-form-item label="省市地区" prop="areaText" labelWidth="90" borderBottom @click=" regionVisible = true; hideKeyboard()" ref="item-areaText">
<u--input v-model="formData.areaText" disabled disabledColor="#ffffff" placeholder="请选择省市地区" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value" :hide-area="false" @confirm="onConfirm($event, 'region')" @cancel="onCancel" ref="region"></w-picker>
</u-form-item>
<u-form-item label="详细地址" prop="detail" labelWidth="90" borderBottom ref="item-detail">
<u--textarea placeholder="请输入街道门牌号不低于6个字" v-model="formData.detail" count></u--textarea>
</u-form-item>
<u-form-item label="默认地址" prop="type" labelWidth="90" borderBottom ref="item-type">
<u-radio-group v-model="formData.type">
<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.value"></u-radio>
</u-radio-group>
</u-form-item>
<view class="btn-group">
<u-button type="primary" text="更新地址" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
</view>
</u--form>
</view>
</view>
</template>
<script>
import { getAddressById, updateAddress } from '../../api/address'
export default {
data() {
return {
id: '',
regionVisible: false,
defaultRegion: ['110000', '110100', '110101'],
typeList: [
{
name: '是',
value: 1
},
{
name: '否',
value: 2
}
],
formData: {
id: '',
name: '',
mobile: '',
areaText: '',
areaCode: '',
detail: '',
detailAddress: '',
type: 1
},
rules: {
name: [
{
type: 'string',
min: 2,
max: 12,
required: true,
message: '请填写收件人名称',
trigger: ['blur', 'change']
},
{
message: '收件人名称不能为空',
// 触发器可以同时用blur和change
trigger: ['change', 'blur']
}
],
mobile: [
{
type: 'integer',
required: true,
message: '请填写手机号',
trigger: ['blur', 'change']
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value)
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur']
}
],
areaText: {
type: 'string',
required: true,
message: '请选择省市地区',
trigger: ['blur', 'change']
},
detailAddress: {
type: 'string',
min: 6,
max: 30,
required: true,
message: '请填写详细地址',
trigger: ['blur', 'change']
}
}
}
},
onLoad(e) {
if (!e.addressId) {
uni.$u.toast('请求参数错误')
} else {
this.id = e.addressId
this.loadAddressData()
}
},
methods: {
loadAddressData() {
getAddressById({ id: this.id }).then(res => {
this.formData = res.data
this.initRegionData()
})
},
initRegionData(){
//回显 【省市地区】 和 【详细地址】 信息
if (this.formData.areaCode) {
const areaCode = this.formData.areaCode + ''
//通过地区code反解析出【省-市-地区】code
this.defaultRegion.splice(0, 3, areaCode.substring(0,2).padEnd(6, '0'), areaCode.substring(0,4).padEnd(6, '0'), areaCode)
this.$nextTick(res => {
let areaText = this.$refs.region._data.result.result
this.formData.areaText = areaText
//通过从完整详细地址除去【省-市-地区】得到后半段地址信息
this.formData.detail = this.formData.detailAddress.replace(areaText, '')
this.$forceUpdate();
})
}
},
onConfirm(res) {
this.formData.areaText = res.result
this.formData.areaCode = res.value[2]
},
onCancel() {},
hideKeyboard() {
uni.hideKeyboard()
},
handleSubmit() {
this.$refs.form.validate().then(res => {
this.formData.detailAddress = this.formData.areaText + this.formData.detail
console.log(this.formData)
updateAddress(this.formData).then(res => {
uni.$u.toast('地址已更新')
setTimeout(() => {
uni.navigateBack()
}, 1000)
})
})
}
}
}
</script>
<style lang="scss" scoped>
.address-box {
width: 690rpx;
margin: 0 auto;
padding-top: 30rpx;
}
</style>