ceres-uniapp-v2.0/pages_category_page1/distributionModule/recruit.vue

<template>
	<view class="container">
		<!-- 申请分销员 -->
		<view class="topBackImg flex-items flex-column">
			<view class="content mar-top-36">
				<view class="topColor"></view>
				<view class="text-box mar-left-30">
					<label class="fs-bold fs28 font-color-252744">分销员是什么？</label>
					<view class="fs24 font-color-252744 mar-top-20">分销员是我们为拥有推广能力的用户推出的运营计划。你只需将高品质商品分享推荐给他人，收获他人的感谢的同时，挣得属于自己的利润。</view>
				</view>
				<view class="text-box mar-top-40 mar-left-30">
					<label class="fs-bold fs28 font-color-252744">我该怎么成为分销员？</label>
					<view class="fs24 font-color-252744 mar-top-20">
						<view>
							<label class="fs-bold"> · </label>
							<label class="mar-left-20">点击本页面的【我要成为分销员】，即可完成申请。</label>
						</view>
						<view class="flex-row-plus mar-top-20">
							<label class="fs-bold"> · </label>
							<label class="mar-left-20 textDes">点击拥有分销员活动标识的分享按钮，将商品分享给好友或朋友圈。</label>
						</view>
						<view class="mar-top-20">
							<label class="fs-bold"> · </label>
							<label class="mar-left-20">朋友通过您的链接进入并购买一件商品。</label>
						</view>
						<view class="flex-row-plus textDes mar-top-20">
							<label class="fs-bold"> · </label>
							<label class="mar-left-20">我们收到已完成的订单时，会将本订单的佣金结算给您。</label>
						</view>
						<view class="mar-top-20">
							<label class="fs-bold"> · </label>
							<label class="mar-left-20">返回个人中心-分销中心，查看您的。</label>
						</view>
					</view>
				</view>
				<view class="text-box mar-top-40 mar-left-30">
					<label class="fs-bold fs28 font-color-252744">其他说明</label>
					<view class="fs24 font-color-252744 mar-top-20">
						<view>
							<label class="fs-bold"> · </label>
							<label class="mar-left-20">客户只有通过您的链接成交，才能返佣给您。</label>
						</view>
						<view class="flex-row-plus mar-top-20">
							<label class="fs-bold"> · </label>
							<label class="mar-left-20 textDes"> 若订单发生退款，我们将去除本订单的佣金。</label>
						</view>
						<view class="mar-top-20">
							<label class="fs-bold"> · </label>
							<label class="mar-left-20">商品的售后问题，由本商店处理。</label>
						</view>
						<view class="flex-row-plus textDes mar-top-20">
							<label class="fs-bold"> · </label>
							<label class="mar-left-20">不传播任何违法违规信息，一经发现，即被清退，本商城不负任何责任。</label>
						</view>
						<view class="mar-top-20">
							<label class="fs-bold"> · </label>
							<label class="mar-left-20">以上内容解释权归本商城所有。</label>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="butBox flex-items-plus" :style="{'padding-bottom':(isIphone === true? 20:0)+'rpx'}" @click="informationShowClick">
			<view class="submitbut">我要成为分销员</view>
		</view>
		<!-- 填写信息弹窗 -->
		<u-popup v-model="informationShowFalg" mode="center" border-radius="14">
      <view class="informationShow-box">
        <view class="flex-items flex-column informationShow-centent">
          <view class="mar-top-60">
            <label class="fs-bold fs32 font-color-252744">请填写相关信息</label>
          </view>
         <view class="flex-items flex-row mar-top-60">
            <view class="fs28 font-color-252744">{{$t('common.realname')}}<label class="font-color-red">*</label></view>
            <input class="recruitName mar-left-20 fs26" maxlength="20" v-model="userName"/>
          </view>
          <view class="flex-items flex-row mar-top-30 phoneStyle">
            <label class="fs28 font-color-252744">{{$t('common.contactPhone')}}<label class="font-color-red">*</label></label>
            <input class="recruitIphone mar-left-20 fs26" disabled="disabled" type="number" v-model="mobile" maxlength="11"/>
          </view>
          <view class="flex-items flex-row mar-top-30 mar-left-40">
            <label class="fs28 font-color-2527446">邀请码</label>
            <input class="recruitIphone mar-left-20 fs26" v-model="inviteId" maxlength="6"/>
          </view>
          <view class="flex-row-plus massageDes-but fs28">
            <view class="exitBut" @click="exitButClick">{{$t('common.cancel')}}</view>
            <view class="submitbut" @click="submitbut">{{$t('common.submit')}}</view>
          </view>
        </view>
      </view>
		</u-popup>
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
		data() {
			return {
				informationShowFalg: false,
				item: '',
				userName:'',
				mobile:'',
				inviteId:'',
				shopId:0,
				isIphone:false
			}
		},
		onLoad(options) {
			this.isIphone = getApp().globalData.isIphone;
			if (getApp().globalData.distributeRecruitItem) {
				const item = getApp().globalData.distributeRecruitItem
				this.shopId = parseInt(item.shopId)
				getApp().globalData.distributeRecruitItem = undefined
			} else {
				this.shopId = parseInt(options.shopId)
			}
			this.isIphone = getApp().globalData.isIphone;
		},
		methods: {
			informationShowClick() {
				this.informationShowFalg = true
        const res = uni.getStorageSync('storage_key');
				this.mobile = res.phone
        if (!this.mobile) {
          uni.showToast({
            title:'请先登录!',
            icon:'none'
          })
          uni.navigateTo({
            url: '../../../pages_category_page2/userModule/login'
          })
        }
			},
			exitButClick() {
				this.informationShowFalg = false
			},
			submitbut() {
				this.applyForRecruit()
			},
			//申请为分销员
			applyForRecruit(){
				var regphone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
				if(this.userName == ''){
					uni.showToast({
						title:'真实姓名不能为空',
						icon:'none'
					})
				}else if (this.mobile == '') {
					uni.showToast({
						title:'手机号不能为空',
						icon:'none'
					})
				}else if (!regphone.test(this.mobile)) {
					uni.showToast({
						title:'手机格式不正确',
						icon:'none'
					})
				}else{
					NET.request(API.Apply,{
						shopId:this.shopId,
						distributorPhone: this.mobile,
						distributorName: this.userName,
						invitationCode:this.inviteId
					},'POST').then(res => {
						this.informationShowFalg = false
						uni.showToast({
							title:'请等候审核...',
						})
						setTimeout(() => {
						  uni.navigateBack({
						  	delta: 1
						  });
						}, 1500);
					}).catch(res => {
						uni.showToast({
							title:'申请失败',
							icon:'none'
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.topBackImg {
			width: 100%;
			height: 260upx;
			//background: url(https://ceres.zkthink.com/static/images/storeTop_Img.png) no-repeat;
      background: linear-gradient(0deg, #FAFAFA, #E5E6F6);
			background-size: 100% 260upx;

			.content {
				width: 690upx;
				background-color: #FFFFFF;
        padding-bottom: 30rpx;
        border-radius: 30rpx;

				.topColor {
					height: 30upx;
				}

				.text-box {
					width: 622upx;

					.textDes {
						width: 598upx;
						line-height: 40upx;
					}
				}
			}

		}

		.butBox {
			height: 130upx;
			width: 100%;
			position: absolute;
			bottom: 0upx;
			left: 0upx;
			background-color: #FFFFFF;
			//box-shadow: 0upx 3upx 12upx #999999;

			.submitbut {
				height: 98upx;
				width: 690upx;
				background: #252744;
				font-size: 32rpx;
				text-align: center;
				line-height: 98upx;
        border-radius: 50rpx;
        color: #FFFFFF;
			}
		}

		.informationShow-box {
      .flex-items {
        input {
          padding-left: 16upx;
        }
      }
      .phoneStyle {
        input {
          background: #EEEEEE;
          color: #999999;
        }
      }
			.informationShow-centent {
				width: 520upx;
				height: 550upx;
				.recruitName {
					border: 1rpx solid #D3D4DE;
					width: 300upx;
					height: 48upx;
				}

				.recruitIphone {
					border: 1rpx solid #D3D4DE;
					width: 300upx;
					height: 48upx;
				}

				.massageDes-but {
					position: absolute;
					bottom: 0;
				}

				.exitBut {
					border: 1rpx solid #D3D4DE;
					width: 260upx;
					height: 90upx;
					text-align: center;
					line-height: 90upx;
				}

				.submitbut {
					background-color: #252744;
					width: 260upx;
					height: 90upx;
					text-align: center;
					line-height: 90upx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
<style>
page {
  background: #FAFAFA;
}
</style>