jje_uniapp/myPages/familyCard/giveFamilyCard/giveFamilyCard.vue

<template>
  <view class="box">
    <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
      <u-form-item labelWidth="auto"  label="被赠送会员编号" prop="memberNo">
        <u-input  v-model="form.memberNo" placeholder="请输入被赠送会员编号" border="bottom">
          <u-text text="Vip." color="#000000" slot="prefix" margin="0 3px 0 0" type="tips"></u-text>
        </u-input>
      </u-form-item>
      <u-form-item labelWidth="auto"  label="被赠送会员手机号" prop="memberPhone">
        <u-input v-model="form.memberPhone" placeholder="请输入被赠送会员手机号" border="bottom"
        ></u-input>
      </u-form-item>
    </u--form>
    <view class="op-btn-wrap">
      <view class="h-btn" @click="handleGive">
        <text>确定
          <text class="presentCount" v-if="count !== null">(剩余可赠送{{count}}次)</text>
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "giveFamilyCard",
  data() {
    return {
      form: {
        memberNo:'',
        memberPhone:''
      },
      count:null,
      rules: {
        'memberNo': {
          type: 'string',
          required: true,
          min: 8,
          max: 10,
          message: '请输入6-18位密码',
          trigger: ['blur', 'change']
        },
        'memberPhone': {
          type: 'string',
          required: true,
          min: 11,
          max: 11,
          pattern:this.$phonePattern,
          message: '请输入正确的电话号码',
          trigger: ['blur', 'change']
        },
      }
    }
  },
  onShow(){
    this.presentCount()
  },
  methods: {
    handleGive() {
      if (this.count == 0){
        uni.$u.toast('可赠送次数不足！')
        return
      }
      this.$refs.uForm.validate().then(res=>{
        let data={
          memberNo:"Vip." + this.form.memberNo,
          memberPhone:this.form.memberPhone
        }
        this.$api.giveFamilyCard(data).then((res) => {
                  console.log(res)
                  uni.showToast({
                    duration: 2000,
                    title: '赠送成功'
                  });
                  uni.navigateBack({delta : 1})
                }
        )

      })
    },
    presentCount(){
      this.$api.presentCount().then(res=>{
        this.count = res.data.data
      })
    }
  }
}
</script>

<style scoped>
.box {
  padding: 24rpx 32rpx;
}
.h-btn {
  margin: 48rpx auto;
  text-align: center;
  width: 686rpx;
  height: 84rpx;
  background: #FFE05C;
  border-radius: 50rpx;
  line-height: 84rpx;
}

.presentCount{
  font-size: 24rpx;
  line-height: 84rpx;
  color: #666666;
}
/deep/ .u-text__value--tips{
  color: #333333 !important;
}
</style>