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" borderBottom>
                <view class="flex-row">
                    <u-input v-model="form.memberPhone" type="number" placeholder="请输入亲属手机号" border="none"></u-input>
                    <view class="customStyle" @click="getMemberList">
                        <tex>查询</tex>
                    </view>
                </view>
            </u-form-item>

            <u-form-item v-if="isSelectRelation" labelWidth="auto" label="亲属关系" prop="relation" borderBottom @click="showRelation = true" ref="item1">
                <u--input v-model="form.relation" disabled disabledColor="#ffffff" placeholder="请选择亲属关系" border="none"></u--input>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item v-else labelWidth="auto" label="亲属关系" prop="relation" borderBottom  ref="item2">
                <u--input v-model="form.relation"  disabledColor="#ffffff" placeholder="请输入亲属关系" border="none"></u--input>
            </u-form-item>

            <!--      <u-form-item labelWidth="auto"  label="每月消费上限" prop="amountCap">-->
            <!--        <u-input v-model="form.amountCap" type="digit" 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>

        <uni-popup ref="popup" type="bottom" @change="popupChange">
            <view class="popup">
                <view class="flex-row justify-center popupTitle">
                    <text>选择亲属</text>
                </view>
                <view class="popupContent">
                    <view class="flex-row popupItem" v-for="(item,index) in memberList" :key="index" @click="selectMember(item)">
                        <view class="flex-col justify-center">
                            <image :src="item.url ||'/static/me/ud4.png'" class="loveImage "></image>
                        </view>
                        <view class="flex-col justify-around ">
                            <text class="popupName">{{item.ncikName}}({{item.no}})</text>
                            <text class="popupPhone">{{item.cellPhone}}</text>
                        </view>
                    </view>
                </view>

                <view class="popupClose" @click="popupClose">
                    <u-icon name="close" color="#c8c8c8" size="22"></u-icon>
                </view>
            </view>
        </uni-popup>


        <u-action-sheet :show="showRelation" :actions="actions" title="请选择亲属关系" @close="showRelation = false" @select="relationSelect">
        </u-action-sheet>
    </view>
</template>

<script>
    export default {
        name: "giveFamilyCard",
        data() {
            return {
                isSelectRelation:true,
                showMember:false,
                showRelation: false,
                memberList:[],
                actions: [],
                store:{},
                form: {
                    memberNo: '',
                    memberPhone: '',
                    amountCap: '',
                    relation: ''
                },
                count: null,
                rules: {
                    // 'memberNo': {
                    //     type: 'string',
                    //     required: true,
                    //     min: 8,
                    //     max: 10,
                    //     message: '请输入会员编号',
                    //     trigger: ['blur', 'change']
                    // },
                    'memberPhone': {
                        type: 'string',
                        required: true,
                        min: 11,
                        max: 11,
                        // pattern: this.$phonePattern,
                        message: '请输入正确的手机号',
                        trigger: []
                    },
                    // 'amountCap': {
                    //     type: 'number',
                    //     required: true,
                    //     pattern: this.$phonePattern,
                    //     message: '请输入每月消费上限',
                    //     trigger: ['blur', 'change']
                    // },
                    'relation': {
                        type: 'string',
                        required: true,
                        message: '请选择亲属关系',
                        trigger: ['blur', 'change']
                    },
                }
            }
        },
        onReady() {
            //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
            this.$refs.uForm.setRules(this.rules)
        },
        onShow() {
            this.presentCount()
            this.loveCardRelation()
            this.store = uni.getStorageSync('storeInfo');
            this.form.storeName = this.store.storeName
            this.form.storeId = this.store.storeId
        },
        methods: {
            selectMember(item){
                this.form.memberNo = item.no
                this.form.memberPhone = item.cellPhone
                this.$refs.popup.close()
            },
            popupClose(){
                this.$refs.popup.close()
            },

            popupChange(e){
                console.log(e)
                if (!e.show){
                    this.memberList = []
                }
            },
            getMemberList(){
                // this.rules.memberPhone.min = 7
                // this.rules.memberPhone.message = '至少输入手机号中的7位'
                 this.$refs.uForm.validateField('memberPhone',(e)=>{
                    console.log('校验结果',e)
                     if (e.length == 0 ){
                         this.$api.getByPhone({
                             phone:this.form.memberPhone
                         }).then(res=>{
                             this.memberList = res.data.data
                             this.getImgUrlByOssId(this.memberList)
                             this.$refs.popup.open()

                             console.log('获取到的用户列表', this.memberList)
                         })
                     }

                })
            },
            getImgUrlByOssId(list) {
                if (list) {
                    for (let i=0;i<list.length;i++){
                        let data = null
                        data = list[i].selfPhoto
                        if (data) {
                            this.$api.getImage(data).then(res => {
                                list[i].url = res.data.data[0].url.replace(/^http:/, "https:")
                                this.$set(list,i,list[i])
                            });
                        }
                    }
                }
            },
            loveCardRelation() {
                this.$api.loveCardRelation().then(res => {
                    this.actions = []
                    if (res.data.rows) {

                        for (let i of res.data.rows) {
                            let relation = {
                                name: i.dictValue
                            }
                            this.actions.push(relation)
                        }
                    }
                })
            },
            relationSelect(e) {
                if (e.name === '自定义'){
                    this.rules.relation.message = '请输入亲属关系'
                    this.isSelectRelation = false
                }else {
                    this.form.relation = e.name
                }
            },
            handleGive() {
                if (this.count == 0) {
                    uni.$u.toast('可赠送次数不足！')
                    return
                }
                // this.rules.memberPhone.min = 11
                // this.rules.memberPhone.message = '请输入正确的手机号'
                this.$refs.uForm.validate().then(res => {

                    this.$api.giveFamilyCard(this.form).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>
    @import "./index.scss";
</style>