new-cashier/jeepay-ui-uapp-agent/pageWork/developerManagement/editDeveloper.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="请输入登录名"
        :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>
    </JMainCard>
    <JMainCard wrapPd="30rpx" pd="30rpx">
      <view
        class="team-wrapper"
        @tap="jumpPage('/pageWork/SelectedList/SelectedList?title=team&&selected=' + member.teamId)"
      >
        <view>
          <image src="/static/iconImg/expand-fill.svg" mode="scaleToFill" />
          <view>
            {{ member.teamName }}
            <text>{{ member.teamId }}</text>
          </view>
        </view>
        <image src="/static/iconImg/icon-right-jiantou.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
    <JButton pd="30rpx" @HandleTouch="editExpand" pdTop="0">保存</JButton>
  </view>
  <SelectSex ref="sex" @selected="selectedSex" />
</template>

<script setup>
import { ref, reactive } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app"
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 { $devDetail, $editDev } from "@/http/apiManager.js"
import { validateArray } from "@/hooks/rules" //校验函数
import useStore from "@/hooks/useStore.js"
const { getStore } = useStore()
onLoad((options) => {
  console.log(options.id)
  if (options.id) return getInfo(options.id)
})
onShow(() => {
  if (getStore("team").teamId) {
    member.value.teamId = getStore("team").teamId
    member.value.teamName = getStore("team").teamName
  }
})
const sexList = reactive(["请选择拓展员性别", "男", "女"])
const member = ref({})
const sex = ref()
const getInfo = (val) => {
  $devDetail(val).then(({ bizData }) => {
    member.value = bizData
  })
}
const editExpand = () => {
  if (validateArray(member.value)) {
    $editDev(member.value.sysUserId, member.value).then((res) => {
      uni.showToast({
        title: "保存成功",
        icon: "success|none",
        mask: true,
      })
      uni.navigateBack()
    })
  }
}
const selectedSex = (val) => {
  member.value.sex = val
}
const jumpPage = (url) => {
  uni.navigateTo({
    url,
  })
}
</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;
  }
}
.team-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  image {
    width: 40rpx;
    height: 40rpx;
  }
  view {
    display: flex;
    align-items: center;
    image {
      width: 93rpx;
      height: 93rpx;
      margin-right: 15rpx;
    }
    view {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 33rpx;
      font-weight: 700;
      text {
        margin-top: 10rpx;
        font-size: 25rpx;
        font-weight: 500;
        color: #8c8c8c;
      }
    }
  }
}
</style>