tianyi@bogon
3 years ago
7 changed files with 509 additions and 105 deletions
@ -1,15 +1,267 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
</div> |
|||
<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 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> |
|||
Loading…
Reference in new issue