同步代码
This commit is contained in:
GaoHao
406
pageUser/add-user/add-user.vue
Normal file
406
pageUser/add-user/add-user.vue
Normal file
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="box">
|
||||
<view>
|
||||
<uni-forms :model="userForm" :rules="rules" err-show-type="toast" validateTrigger="submit" ref="form"
|
||||
:border="true" label-position="top" label-width="350">
|
||||
<view class="block">
|
||||
<uni-forms-item label="用户名" required >
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="userForm.nickName" placeholder="填写用户名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号" required >
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="userForm.phone" placeholder="填写号码" />
|
||||
</uni-forms-item>
|
||||
<!-- <uni-forms-item label="生日" required name="birthday">
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="userForm.birthday" placeholder="选择日期" />
|
||||
|
||||
|
||||
</uni-forms-item> -->
|
||||
|
||||
<uni-forms-item label="生日" required >
|
||||
<view style="display: none;">
|
||||
<uni-easyinput paddingNone :inputBorder="inputBorder" v-model="userForm.birthDay"
|
||||
placeholder="选择日期" />
|
||||
</view>
|
||||
<picker mode="date" :value="date" :start="startDate" :end="endDate"
|
||||
@change="bindDateChange">
|
||||
<view class="u-flex u-row-between u-p-b-10 lh40">
|
||||
<view class="color-333">{{userForm.birthDay||'选择日期'}}</view>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item label="性别" required >
|
||||
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'sex')">
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="1" :checked="userForm.sex == '1'" class="scale7" />
|
||||
<text>男</text>
|
||||
</label>
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="2" :checked="userForm.sex == '2'" class="scale7" />
|
||||
<text>女</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</uni-forms-item>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <uni-forms-item label="用户余额" required name="balance">
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="userForm.balance" placeholder="填写余额" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="用户积分" required name="integral">
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="userForm.integral" placeholder="填写积分" />
|
||||
</uni-forms-item> -->
|
||||
</view>
|
||||
<!-- <view class="block border-top-0">
|
||||
<uni-forms-item label="" required>
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="label-title">状态</view>
|
||||
<my-switch v-model="userForm.isVip"></my-switch>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view> -->
|
||||
|
||||
</uni-forms>
|
||||
</view>
|
||||
|
||||
<view class="save-btn-box">
|
||||
<my-button @tap="save" shape="circle">保存</my-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom" ref="bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import {
|
||||
member,
|
||||
tbShopUser
|
||||
} from '@/http/yskApi/requestAll.js';
|
||||
|
||||
|
||||
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount
|
||||
} from 'vue';
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
const paddingNone = true
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
const form = ref(null)
|
||||
const bottom = ref(null)
|
||||
const props = defineProps({
|
||||
item:{type:''}
|
||||
})
|
||||
//表单验证
|
||||
const rules = {
|
||||
nickName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请填写用户名'
|
||||
}]
|
||||
},
|
||||
phone: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入手机号'
|
||||
},
|
||||
{
|
||||
validateFunction: function(rule, value, data, callback) {
|
||||
const isPas = /^1\d{10}$/.test(value);
|
||||
if (!isPas) {
|
||||
callback('请输入正确的手机号')
|
||||
}
|
||||
return isPas
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
form.value.setRules(rules)
|
||||
})
|
||||
|
||||
const startDate = getDate('start')
|
||||
let date = getDate()
|
||||
const endDate = getDate('end')
|
||||
|
||||
function getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === 'start') {
|
||||
year = year - 60;
|
||||
} else if (type === 'end') {
|
||||
year = year
|
||||
} else {
|
||||
year = year - 20
|
||||
}
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
|
||||
function bindDateChange(e) {
|
||||
console.log(e);
|
||||
userForm.birthDay = e.detail.value
|
||||
}
|
||||
|
||||
function onFieldChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
// 用户表单
|
||||
let userForm = reactive({
|
||||
nickName: '',
|
||||
phone: '',
|
||||
birthDay: '',
|
||||
balance: '',
|
||||
integral: '',
|
||||
isVip: true,
|
||||
level: 1,
|
||||
sex: 1
|
||||
})
|
||||
|
||||
|
||||
function triggerEvent(emitName, data) {
|
||||
if (emitName) {
|
||||
uni.$emit(emitName, data)
|
||||
}
|
||||
}
|
||||
const option = reactive({
|
||||
type: 'add'
|
||||
})
|
||||
|
||||
function isEmpty(obj) {
|
||||
return obj && JSON.stringify(obj) !== '{}'
|
||||
}
|
||||
|
||||
|
||||
|
||||
onLoad(params => {
|
||||
if (params.id) {
|
||||
let items = params
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑用户'
|
||||
})
|
||||
// userForm = items
|
||||
userForm.nickName=items.nickName
|
||||
userForm.birthDay=items.birthDay
|
||||
userForm.id=items.id
|
||||
userForm.phone = items.telephone
|
||||
userForm.sex = items.sex == '男' ? 1 : 2
|
||||
option.type = 'edit'
|
||||
console.log(userForm,'调试111')
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '新增用户'
|
||||
})
|
||||
option.type = 'add'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function sizeChange(e, name) {
|
||||
userForm[name] = e.detail.value
|
||||
}
|
||||
|
||||
|
||||
function save() {
|
||||
form.value.validate().then(async res => {
|
||||
let obj = {
|
||||
...userForm,
|
||||
name: userForm.nickName,
|
||||
telephone: userForm.phone,
|
||||
birthday:userForm.birthDay,
|
||||
status:1,
|
||||
levelConsume:0,
|
||||
shopId: uni.getStorageSync("shopId"),
|
||||
sex:userForm.sex==1?1:2
|
||||
}
|
||||
if (res) {
|
||||
if (option.type == 'add') {
|
||||
const ele = await member(obj)
|
||||
} else {
|
||||
const ele = await tbShopUser(obj)
|
||||
}
|
||||
go.back()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item__error {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .option .uni-forms-item {
|
||||
padding: 0;
|
||||
min-height: inherit;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
&:before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
background-color: $my-main-color;
|
||||
|
||||
&::before {
|
||||
width: $icon-line-height;
|
||||
height: $icon-line-width;
|
||||
top: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: 4rpx;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.icon-reduce {
|
||||
background-color: $my-red-color;
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: $icon-line-height;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.lh40 {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
align-items: inherit;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item .uni-forms-item__label {
|
||||
text-indent: 0;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user