jje_uniapp/myPages/familyCard/giveFamilyCard/giveFamilyCard.vue

<template>
  <view class="box">
    <u--form labelPosition="top" :model="userInfo" ref="form1">
      <u-form-item labelWidth="auto" labelAlign="right" label="被赠送会员编号" prop="phone">
        <u-input prefixIconStyle="font-size: 22px;color: #000000" v-model="userInfo.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" labelAlign="right" label="被赠送会员手机号" prop="smsCode" width="120">
        <u--input v-model="userInfo.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 {
      userInfo: {},
      giveUser: {},
      count:null
    }
  },
  onShow(){
    this.presentCount()
  },
  methods: {
    handleGive() {

      if (this.count == 0){
        uni.$u.toast('可赠送次数不足！')
        return
      }

      this.giveUser.memberNo = "Vip." + this.userInfo.memberNo
      this.giveUser.memberPhone = this.userInfo.memberPhone
      this.$api.giveFamilyCard(this.giveUser).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: 80vw;
  height: 42px;
  background: #FFE05C;
  border-radius: 27px;
  line-height: 42px;
}
.presentCount{
  font-size: 24rpx;
  color: #666666;
}
/deep/ .u-text__value--tips{
  color: red !important;
}
</style>