oil-station/gasStation-uni/pagesMy/fleetMember/addMember.vue

<template>
  <view class="content">
    <view class="container">
      <view class="box-hang">
        <view class=""><span style="color: red;">*</span>姓名</view>
        <view class="dis">
          <input v-model="memberInfo.name" style="text-align: right;" placeholder="请输入"></input>
        </view>
      </view>
      <view class="box-hang">
        <view class=""><span style="color: red;">*</span>手机号</view>
        <view class="dis">
          <input v-model="memberInfo.mobile" style="text-align: right;" placeholder="请输入"></input>
        </view>
      </view>
      <view class="box-hang">
        <view class="">会员卡号</view>
        <view class="dis">
          <input v-model="memberInfo.userCardNum" style="text-align: right;" placeholder="请输入"></input>
        </view>
      </view>
      <view class="box-hang">
        <view class="">车牌号</view>
        <view class="dis" @click="show1 = !show1">
          <input v-model="memberInfo.carNum" style="text-align: right;" placeholder="请输入"></input>
        </view>
      </view>
      <view class="box-hang">
        <view class=""><span style="color: red;">*</span>副卡类型</view>
        <view class="dis" @click="show = !show">
          <text v-if="memberInfo.secondaryCardType==1">共享副卡-不限额</text>
          <text v-if="memberInfo.secondaryCardType==2">共享副卡-限额</text>
          <text v-if="memberInfo.secondaryCardType==3">独立副卡</text>
          <uni-icons type="right" size="16"></uni-icons>
        </view>
      </view>
      <view class="box-hang" style="margin-top: 10px;">
        <view class=""><span style="color: red;">*</span>是否开启消费通知</view>
        <view class="dis">
          <u-switch v-model="memberInfo.isOpenNotice" :activeValue='0' :inactiveValue='1' activeColor="#6DD400"
                    inactiveColor="rgb(230, 230, 230)"></u-switch>
        </view>
      </view>
      <view class="box-hang">
        <view class=""><span style="color: red;">*</span>是否启用</view>
        <view class="dis">
          <u-switch v-model="memberInfo.status" activeValue='qy' inactiveValue='jy' activeColor="#6DD400"
                    inactiveColor="rgb(230, 230, 230)"></u-switch>
        </view>
      </view>
      <view class="box-end">
        <view style="display: flex;">
          <view style="height: 14px;margin-right: 5px;">
            <u-icon name="info-circle"></u-icon>
          </view>
          <view>注：</view>
        </view>
        <view>
          <view>共享副卡-不限额：副卡与主卡共享钱包，同步余额。</view>
          <view>共享副卡-限额：副卡与主卡共享钱包，副卡可设置限额。</view>
          <view>独立副卡：副卡与主卡独立钱包，独立余额。</view>
        </view>
      </view>

      <view class="but-sub" @click="submitFrom()">保存</view>

      <u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker>
      <u-keyboard ref="uKeyboard" mode="car" @change="valChange" @backspace="backspace" :show="show1"
                  @confirm="confirm1" @cancel="cancel1" :overlay="false"></u-keyboard>
    </view>

  </view>
</template>

<script>
import request from '../../utils/request';

export default {
  data() {
    return {
      title: '',
      List: [],
      pageNo: 1,
      pageSize: 10,
      totalPage: '',
      value: "",
      value1: true,
      value2: true,
      show: false,
      show1: false,
      columns: [
        ['共享副卡-不限额', '共享副卡-限额', '独立副卡']
      ],
      memberInfo: {
        carNum: '',
        isOpenNotice: '0',
        status: 'qy',
        secondaryCardType: 1
      },
      fleetId: '',
      memberId: '',
    }
  },
  onLoad(e) {
    if (e.fleetId) {
      this.fleetId = e.fleetId
      this.memberInfo.fleetId = e.fleetId
    }
    if (e.memberId) {
      this.memberId = e.memberId
      this.getInfo()
    }
  },
  onPullDownRefresh() {
    //下拉刷新

  },
  onReachBottom() {
    // 触底加载
    if (this.pageNo >= this.totalPage) {

    } else {
      this.pageNo++

    }
  },

  components: {},
  methods: {
    getInfo() {
      request({
        url: '/fleetMember/' + this.memberId,
        method: 'get',
      }).then(res => {
        this.memberInfo = res.data
      })
    },
    submitFrom() {
      if (!this.memberInfo.name) {
        uni.showToast({
          title: '姓名不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.memberInfo.mobile) {
        uni.showToast({
          title: '手机号不能为空',
          icon: 'none'
        })
        return
      }
      if (this.memberInfo.id) {
        request({
          url: '/fleetMember',
          method: 'put',
          data: this.memberInfo
        }).then(res => {
          uni.navigateBack()
        })
      } else {
        request({
          url: '/fleetMember/addUni',
          method: 'post',
          data: this.memberInfo
        }).then(res => {
          if (res.data == 0) {
            uni.showToast({
              title: '该用户已绑定车队',
              icon: 'none'
            })
          }else {

            uni.navigateBack()
          }
        })
      }

    },
    // 按键被点击(点击退格键不会触发此事件)
    valChange(val) {
      // 将每次按键的值拼接到value变量中，注意+=写法
      this.memberInfo.carNum += val
    },
    // 退格键被点击
    backspace() {
      // 删除value的最后一个字符
      if (this.memberInfo.carNum.length) this.memberInfo.carNum = this.memberInfo.carNum.substr(0, this
          .memberInfo.carNum.length - 1);
    },
    cancel1() {
      this.show1 = false
    },
    confirm1() {
      this.show1 = false
    },
    cancel() {
      this.show = false
    },
    confirm(e) {
      this.memberInfo.secondaryCardType = e.indexs[0] + 1
      this.show = false
    },
    goback() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  background: #f4f5f6;
}

.container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 10px;
}

.my-header {
  width: 100%;
  height: 88px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  box-sizing: border-box;
  padding: 0px 15px;
  padding-top: 40px;
  z-index: 99999;

  .my-icons {
    width: 20px;

  }

  position: fixed;
  top: 0px;
}

.box-hang {
  background-color: white;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15px 15px;
  border-bottom: 1px solid #f4f5f6;
}

.dis {
  color: #a69999;
}

.box-end {
  margin-top: 10px;
  display: flex;
  color: #999999;
  font-size: 12px;
  padding: 0 15px;
}

.but-sub {
  width: 305px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  background-color: #FF9655;
  color: white;
  border-radius: 50px;
  text-align: center;
  position: absolute;
  bottom: 40px;
  left: 11%;
}
</style>