|
|
@@ -1,125 +1,235 @@
|
|
|
<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" type="number" placeholder="请输入被赠送会员手机号" border="bottom"
|
|
|
- ></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 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>
|
|
|
- </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: "giveFamilyCard",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- form: {
|
|
|
- memberNo:'',
|
|
|
- memberPhone:'',
|
|
|
- amountCap:''
|
|
|
- },
|
|
|
- count:null,
|
|
|
- rules: {
|
|
|
- 'memberNo': {
|
|
|
- type: 'string',
|
|
|
- required: true,
|
|
|
- min: 8,
|
|
|
- max: 10,
|
|
|
- message: '请输入6-18位密码',
|
|
|
- trigger: ['blur', 'change']
|
|
|
+ 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']
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- 'memberPhone': {
|
|
|
- type: 'string',
|
|
|
- required: true,
|
|
|
- min: 11,
|
|
|
- max: 11,
|
|
|
- pattern:this.$phonePattern,
|
|
|
- message: '请输入正确的电话号码',
|
|
|
- trigger: ['blur', 'change']
|
|
|
+ onReady() {
|
|
|
+ //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
|
|
|
+ this.$refs.uForm.setRules(this.rules)
|
|
|
},
|
|
|
- 'amountCap': {
|
|
|
- type: 'number',
|
|
|
- required: true,
|
|
|
- pattern:this.$phonePattern,
|
|
|
- message: '请输入每月消费上限',
|
|
|
- trigger: ['blur', 'change']
|
|
|
+ onShow() {
|
|
|
+ this.presentCount()
|
|
|
+ this.loveCardRelation()
|
|
|
+ this.store = uni.getStorageSync('storeInfo');
|
|
|
+ this.form.storeName = this.store.storeName
|
|
|
+ this.form.storeId = this.store.storeId
|
|
|
},
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- 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,
|
|
|
- amountCap:this.form.amountCap
|
|
|
- }
|
|
|
- this.$api.giveFamilyCard(data).then((res) => {
|
|
|
- console.log(res)
|
|
|
- uni.showToast({
|
|
|
- duration: 2000,
|
|
|
- title: '赠送成功'
|
|
|
- });
|
|
|
- uni.navigateBack({delta : 1})
|
|
|
+ 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
|
|
|
- })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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;
|
|
|
-}
|
|
|
+ @import "./index.scss";
|
|
|
</style>
|