shangfutong-ui/jeepay-ui-uapp-agent/pageWork/developerManagement/newDeveloper.vue

222 lines
6.3 KiB
Vue

<template>
<view class="page-wrapper global-wrapper bgF2">
<JHeaderTitle title="创建拓展员" bgColor="#f2f2f2" />
<JMainCard pd="0" wrapPd="0 30rpx">
<JInput
v-model:value="member.realname"
name="拓展员姓名"
place="请输入拓展员姓名"
:rules="{ name: 'realname', rule: 'REG_NotNUll' }"
:isBorder="true"
></JInput>
<JInput
v-model:value="member.userNo"
name="拓展员编号"
place="请输入拓展员编号"
:rules="{ name: 'userNo', rule: 'REG_NotNUll' }"
:isBorder="true"
></JInput>
<JInput name="拓展员性别" :isBorder="true">
<view class="place-text" :class="{ 'selected-text': member.sex > 0 }" @tap="sex.open(member.sex)">
{{ sexList[member.sex] }}
<image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
</view>
</JInput>
<JInput
v-model:value="member.loginUsername"
name="登录名"
place="字母开头6到18位"
:rules="{ name: 'loginUsername', rule: 'REG_LoginName' }"
:isBorder="true"
></JInput>
<JInput
v-model:value="member.telphone"
name="拓展员手机号"
place="请输入拓展员手机号"
:rules="{ name: 'telphone', rule: 'REG_Phone' }"
:isBorder="true"
></JInput>
<JInput name="拓展员状态" :isBorder="true">
<view class="dis-wrapper">
<text v-if="member.state">启用</text>
<text v-else>禁用</text>
<switch
:checked="member.state == 1 ? true : false"
@change="change($event, 'state')"
style="margin-left: 15rpx; transform: scale(1.2)"
color="#7737FE"
/>
</view>
</JInput>
</JMainCard>
<JMainCard pd="0" wrapPd="30rpx">
<view
class="select-wrapper"
@tap="jumpPage('/pageWork/SelectedList/SelectedList?title=team&&selected=' + member.teamId)"
>
<view class="select-mch" v-if="!member.teamId"> 请选择团队 </view>
<view class="mch-info" v-else>
<image src="/static/iconImg/expand-fill.svg" mode="scaleToFill" />
<view
>{{ member.teamName }} <text>{{ member.teamId }}</text>
</view>
</view>
<image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
</view>
</JMainCard>
<JMainCard pd="0" wrapPd="0 30rpx">
<JInput name="是否发送开通提醒" :isBorder="true">
<view class="dis-wrapper">
<text v-if="member.isNotify">启用</text>
<text v-else>禁用</text>
<switch
:checked="member.isNotify == 1 ? true : false"
@change="change($event, 'isNotify')"
style="margin-left: 15rpx; transform: scale(1.2)"
color="#7737FE"
/>
</view>
</JInput>
<JInput name="是否使用默认密码" :isBorder="true">
<view class="dis-wrapper">
<switch
:checked="member.defaultPass == 1 ? true : false"
@change="change($event, 'defaultPass')"
style="margin-left: 15rpx; transform: scale(1.2)"
color="#7737FE"
/>
</view>
</JInput>
<JInput
name="自定义密码"
v-model:value="member.loginPassword"
:rules="{ name: 'loginPassword', rule: 'REG_NotNUll' }"
place="请输入自定义密码"
v-if="!member.defaultPass == 1"
></JInput>
</JMainCard>
<JButton pdTop="0" pd="30rpx 30rpx 50rpx" @HandleTouch="addMember">创建成员</JButton>
<SelectSex ref="sex" @selected="selectedSex" />
</view>
</template>
<script setup>
import { ref, reactive } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app"
import { $addDev, $devDetail } from "@/http/apiManager.js"
import { validateArray } from "@/hooks/rules" //校验函数
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import JInput from "@/components/newComponents/JInput/JInput"
import JButton from "@/components/newComponents/JButton/JButton"
import SelectSex from "./components/SelectSex.vue"
import useStore from "@/hooks/useStore.js"
const { getStore, clearItem } = useStore()
onShow(() => {
if (getStore("team").teamId) {
member.value.teamId = getStore("team").teamId
member.value.teamName = getStore("team").teamName
clearItem("team")
}
})
const member = ref({
state: 1,
isNotify: 0,
defaultPass: 1,
sex: 0,
userType: 3,
isTeamLeader: 0,
})
const sexList = reactive(["请选择拓展员性别", "男", "女"])
const sex = ref()
const change = (e, val) => {
member.value[val] = e.detail.value ? 1 : 0
}
const selectedSex = (val) => {
member.value.sex = val
}
const jumpPage = (url) => {
uni.navigateTo({
url,
})
}
const addMember = () => {
if (validateArray(member.value)) {
uni.showLoading({ title: "添加中..." })
$addDev(member.value).then((res) => {
uni.hideLoading()
uni.showToast({ title: "新增成功", icon: "success" })
uni.navigateBack()
})
}
}
</script>
<style lang="scss" scoped>
.page-wrapper {
.place-text {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 33rpx;
color: #a6a6a6;
image {
width: 40rpx;
height: 40rpx;
transform: translateX(20rpx);
}
}
.selected-text {
color: #000;
}
.select-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
.select-mch {
margin: 20rpx;
}
.mch-info {
display: flex;
image {
width: 93rpx;
height: 93rpx;
margin-right: 10rpx;
}
view {
display: flex;
flex-direction: column;
font-size: 33rpx;
font-weight: 700;
text {
margin-top: 15rpx;
color: #8c8c8c;
font-size: 25rpx;
font-weight: 500;
}
}
}
image {
width: 40rpx;
height: 40rpx;
}
.img-wrapper {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 93rpx;
height: 93rpx;
margin-right: 20rpx;
image {
width: 60rpx;
height: 66rpx;
}
}
}
}
</style>