You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
6.8 KiB
267 lines
6.8 KiB
<template>
|
|
<view>
|
|
<view class="formBox">
|
|
<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="85px">
|
|
<!-- <uni-forms-item label="店铺名称" name="name">
|
|
<uni-easyinput type="text" v-model="shopName" disabled />
|
|
</uni-forms-item> -->
|
|
<uni-forms-item label="收货人" name="name">
|
|
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入收货人" @blur="nameBlur" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="手机号码" name="phone">
|
|
<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入手机号码" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="收货人账号" name="username" v-if="!userInfo">
|
|
<uni-easyinput type="text" v-model="formData.username" placeholder="账号名为字母或数字" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="性别" name="sex" v-if="!userInfo">
|
|
<uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="地址" name="address1">
|
|
<view class="input selectcity" @tap="openPicker">
|
|
<input placeholder="请选择省市区" disabled type="text" v-model="formData.address1"></input>
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="详细地址" name="address">
|
|
<uni-easyinput type="textarea" v-model="formData.address" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<view class="tui-tabbar">
|
|
<view class="tui-btn-mr">
|
|
<u-button type="error" :plain="true" shape="circle" @tap.stop="del()">删除用户</u-button>
|
|
</view>
|
|
<view class="tui-btn-mr">
|
|
<u-button type="primary" :plain="true" shape="circle" @tap.stop="submit()">提交</u-button>
|
|
</view>
|
|
</view>
|
|
<!-- 省市区选择 show:是否显示 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
|
|
<cc-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
|
|
</view>
|
|
<u-modal :show="delShow" :title="'删除'" :content="'是否确认删除此用户？'" showCancelButton="true" @cancel="delShow = false"
|
|
@confirm="delItemModal"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from 'vuex';
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: '',
|
|
show: false,
|
|
delShow: false,
|
|
addressObj: {},
|
|
formData: {
|
|
phone: '',
|
|
name: '',
|
|
address1: '',
|
|
address: '',
|
|
province: '',
|
|
city: '',
|
|
area: '',
|
|
username: '',
|
|
},
|
|
// 单选数据源
|
|
sexs: [{
|
|
text: '男',
|
|
value: '男'
|
|
}, {
|
|
text: '女',
|
|
value: '女'
|
|
}],
|
|
rules: {
|
|
name: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入收货人姓名',
|
|
},
|
|
{
|
|
minLength: 2,
|
|
maxLength: 5,
|
|
errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
|
|
}
|
|
]
|
|
},
|
|
phone: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入收货人手机号',
|
|
}, {
|
|
minLength: 11,
|
|
maxLength: 11,
|
|
errorMessage: '手机号为11个字符',
|
|
}]
|
|
},
|
|
username: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入收货人帐号名',
|
|
}, {
|
|
validateFunction: function(rule, value, data, callback) {
|
|
let ret = /[^\w\.\/]/ig
|
|
if (!ret.test(ret)) {
|
|
callback('帐号名不正确')
|
|
}
|
|
return true
|
|
}
|
|
}]
|
|
},
|
|
address1: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择地址',
|
|
}]
|
|
},
|
|
address: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入详细地址',
|
|
}]
|
|
},
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['shopName', 'shopIndex'])
|
|
},
|
|
onReady() {
|
|
// 需要在onReady中设置规则
|
|
this.$refs.form.setRules(this.rules)
|
|
},
|
|
onLoad(option) {
|
|
if (option.info) {
|
|
this.userInfo = JSON.parse(decodeURIComponent(option.info))
|
|
this.formData = this.userInfo
|
|
console.log(this.userInfo, this.formData);
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
del() {
|
|
this.delShow = true;
|
|
},
|
|
delItemModal() {
|
|
this.delShow = false;
|
|
this.tui.request("/app/customer/delById", "post", {
|
|
id: this.userInfo.id,
|
|
}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "删除成功",
|
|
icon: 'none'
|
|
})
|
|
uni.navigateBack()
|
|
} else {
|
|
uni.showToast({
|
|
title: "删除失败",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
nameBlur() {
|
|
this.formData.username = this.formData.phone;
|
|
},
|
|
openPicker() {
|
|
console.log('执行打开地址选择器')
|
|
this.show = true
|
|
},
|
|
|
|
onhideShow() {
|
|
this.show = false
|
|
console.log('执行了关闭地址选择器')
|
|
},
|
|
//选中省市区
|
|
onsetCity(e) {
|
|
let data = e.detail.target.dataset;
|
|
let address = data.province + data.city + data.area;
|
|
this.show = false
|
|
this.formData.address1 = address;
|
|
this.addressObj = {
|
|
province: data.province,
|
|
city: data.city,
|
|
area: data.area,
|
|
}
|
|
|
|
console.log(this.formData, this.addressObj);
|
|
},
|
|
// 触发提交表单
|
|
submit() {
|
|
this.$refs.form.validate().then(res => {
|
|
// res.shopId = this.shopIndex;
|
|
res.shopId = 1;
|
|
if (this.userInfo) {
|
|
res.id = this.userInfo.id
|
|
this.tui.request("/app/customer/edit", "post", Object.assign(this.addressObj, res), false,
|
|
true).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "修改成功",
|
|
icon: 'none'
|
|
})
|
|
uni.navigateBack()
|
|
} else {
|
|
uni.showToast({
|
|
title: "修改失败",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
this.tui.request("/app/customer/save", "post", Object.assign(this.addressObj, res), false,
|
|
true).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "添加成功",
|
|
icon: 'none'
|
|
})
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "添加失败",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
}).catch(err => {
|
|
console.log('表单错误信息：', err);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.formBox {
|
|
margin: 20rpx;
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.tui-tabbar {
|
|
width: 100%;
|
|
height: 98rpx;
|
|
background: #fff;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
font-size: 26rpx;
|
|
box-shadow: 0 0 1px rgba(0, 0, 0, .3);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
z-index: 996;
|
|
padding: 0 20rpx;
|
|
|
|
.tui-btn-mr {
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
</style>
|