tianyi@bogon
3 years ago
7 changed files with 509 additions and 105 deletions
@ -1,15 +1,267 @@ |
|||||
<template> |
<template> |
||||
<div> |
<view> |
||||
|
<view class="formBox"> |
||||
</div> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { |
||||
|
mapState |
||||
|
} from 'vuex'; |
||||
export default { |
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> |
</script> |
||||
|
|
||||
<style scoped> |
<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> |
</style> |
||||
Loading…
Reference in new issue