market-app-ui/pages/login/login.vue

<template>
  <view>
    <view class="l-topbox">
      <text>欢迎登录</text>
    </view>
    <view class="box">

      <view class="item">
        <view class="l">手机号：</view>
        <view class="r">
          <u-input v-model="form.key" placeholder="请输入手机号"/>
        </view>
      </view>
      <view class="item">
        <view class="l">密码：</view>
        <view class="r">
          <u-input v-model="form.password" placeholder="请输入密码" type="password"/>
        </view>
      </view>
    </view>
    <view class="common-btn" @click="loginFn">确认登录</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sliderVerifyFLag: false, //滑块验证
      form: {
        key: '',
        password: ''
      }
    }
  },
  methods: {
    loginFn() {
      if (!this.form.key) {
        this.$common.toast('请输入登录名');
        return;
      }
      if (!this.form.password) {
        this.$common.toast('请输入密码');
        return;
      }
      let openid = uni.getStorageSync('openid');
      if (!openid) {
        openid = uni.getStorageSync('login_openid');
      }
      this.form.openid = openid
      this.$api.doLogin(this.form).then(resp => {
        let data = resp.data;
		
      })
    },

  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.l-topbox {
  //background-color: #0080ff;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  //border-radius: 0 0 30rpx 30rpx;
  margin-bottom: 50rpx;
  background-image: url(../../static/login-bg.png);
  background-size: 100% 100%;

  text {
    font-size: 50rpx;
    font-weight: bold;
    color: #fff;
  }
}

@import '@/common/common.scss';
.box {
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  background-color: #fff;
  box-sizing: border-box;
  margin: 60rpx;
  margin-top: -150rpx;
  width: auto;
  border-radius: 10rpx;
}

.common-btn {
  margin: 100rpx 60rpx;
  width: auto;
  height: 98rpx;
  box-shadow: 0 30rpx 30rpx -15rpx rgba(0, 128, 255, 0.2);
}
</style>