repairForMiniProgram/pages/login/index.vue

<template>
  <view>
    <view class="head"></view>
    <view class="content flex column items-center">
      <view class="title">账号登录</view>
      <!-- <view class="headline-2"> -->
      <view class="flex items-center justify-between uni-list-cell-db-2">
        <!-- <text class="uni-list-cell-left-2">账号：</text> -->
        <span>账号：</span>
        <!-- <view class="uni-list-cell-db-2"> -->
        <u--input class="flex items-center" placeholder="请输入手机号" v-model="phone" required />
        <!-- </view> -->
      </view>

      <view class="flex items-center justify-between uni-list-cell-db-2">
        <span>密码：</span>
        <u--input class="flex items-center" placeholder="请输入密码" v-model="password" required />
      </view>

      <button
        type="default"
        @click="bindLogin"
        style="
          width: 273px;
          height: 33px;
          background-color: rgba(42, 130, 228, 1);
          color: white;
          font-size: 15px;
          border-radius: 14px;
        "
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      password: '',
    }
  },
  methods: {
    async bindLogin() {
      if (this.phone && this.password) {
        uni.showLoading({
          title: '登录中',
        })
        let res = await this.$myRequest({
          method: 'post',
          url: `/login/loginWork?phone=${this.phone}&password=${this.password}`,
        })
        // console.log(res)
        if (res.status == 200) {
          uni.setStorageSync('token', res.data)
          uni.setStorageSync('identity', JSON.stringify(1)) //身份标识
          uni.reLaunch({
            url: '../repair-center/index',
          })
        } else {
          uni.showToast({
            icon: 'error',
            title: '登录失败',
          })
        }
      } else {
        uni.showToast({
          title: '请输入账号密码',
          icon: 'none',
        })
      }
    },
  },
}
</script>

<style lang="scss">
.head {
  height: 300rpx;
  border-radius: 0px 0px 10px 10px;
  background-color: rgba(42, 130, 228, 1);
}

.content {
  position: fixed;
  top: 120rpx;
  left: 50%;
  width: 720rpx;
  height: 568rpx;
  background-color: white;
  border: 1px solid rgba(128, 128, 128, 0.45);
  transform: translateX(-360rpx);
}

.title {
  font-size: 36rpx;
  font-weight: 700;
  margin-top: 18rpx;
  text-align: center;
}

.uni-list-cell-left-2 {
  float: left;
  margin-top: 80rpx;
  margin-left: 26rpx;
}

.uni-list-cell-db-2 {
  //   float: right;
  //   margin-right: 34rpx;
  //   margin-top: 70rpx;
  width: 540rpx;
  height: 70rpx;
  padding: 0rpx 20rpx;
  margin: 20rpx 0px;
  border-radius: 28rpx;
  background-color: rgba(166, 166, 166, 0.18);
}

.uni-input-2 {
  //   margin-left: 20rpx;
  //   margin-top: 20rpx;
  font-size: 28rpx;
  cursor: not-allowed;
}

.uni-input-placeholder {
  text-align: center;
}
.u-input {
  border: none;
}

button {
  //   position: absolute;
  //   bottom: 72rpx;
  //   left: 140rpx;
  margin-top: 60rpx;
  line-height: 66rpx;
}
</style>