store-new/pagesA/pages/introduce/introduce.vue

<template>
	<view class="add">
		<view class="add_user">
			<view class="inp_box">
				<view class="label">
					<text>介绍人手机号</text>
					<text class="star">*</text>
				</view>
				<navigator url="../phone-area/phone-area" class="flexB phone-area">
					<text class="text">国家/地区</text>
					<view>
						<text class="area">{{ areaName }}（{{ areaCode }}）</text>
						<text class="iconfont iconiconfontjiantou2"></text>
					</view>
				</navigator>
				<input type="number" placeholder="请输入介绍人手机号" v-model="userPhone" maxlength="11" />
			</view>
			<view style="margin-top:20rpx;" class="inp_box">
				<view class="label">
					<text>介绍人昵称</text>
					<text class="star">*</text>
				</view>
				<input type="text" placeholder="请输入介绍人昵称" v-model="userName" />
			</view>
			<view class="sub_btn_box flexCC">
				<view class="sub_btn" @click="addUser">确认添加</view>
			</view>
		</view>
		<view class="pop flexCC" v-if="showPop">
			<view class="pop_con">
				<view class="hint">
					<image src="../../../static/imgs/shop/hint_icon.png" class="hint_icon"></image>
					<view class="title">确认信息</view>
				</view>

				<view class="con">
					<view>昵称：{{userInfo.nickname}}</view>
					<view style="margin-top:14rpx">手机号：{{userInfo.phone}}</view>
				</view>
				<view class="btn_box flexB">
					<view class="flexC" @click="showPop=false">取消</view>
					<view class="flexC" @click="toBind">确认绑定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addUser,
		bindRecomer,
		getAllRecomer,
		editBindRecomer
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				userPhone: '', //新添加的用户手机号
				userName: '', // 新添加的用户昵称（选填）
				isChecked: false,
				notVip: true,
				is_vip: 0,
				showPop: false,
				order_no: '',
				order_id: '',
				remark: '',
				userInfo: '',
				areaName: '中国大陆', // 手机号地区名称
				areaCode: '+86', // 手机号地区代码

			};
		},
		onLoad(ops) {
			this.order_id = ops.order_id
			this.order_no = ops.order_no
			this.remark = ops.remark
		},
		created() {
			uni.$on('CHOOSEPHONECODE', (name, code) => { // 监听 chooseArea 事件更新
				this.areaName = name // 修改选择的手机号地区名称
				this.areaCode = code // 修改选择的手机号地区代码
			})
		},
		methods: {
			// 绑定介绍人
			toBind() {
				let http = this.remark ? editBindRecomer : bindRecomer
				let data = this.remark ? {
					id: this.userInfo.id,
					order_id: this.order_id,
					remark: this.remark
				} : {
					id: this.userInfo.id,
					order_id: this.order_id,
				}
				http(data).then(res => {
					this.showPop = false
					if (res.code === 200) {
						uni.showModal({
							content: this.remark ? '更换介绍人成功' : '绑定介绍人成功',
							showCancel: false,
							success: suc => {
								uni.reLaunch({
									url: '../../../pages/order-info/order-info?order_no=' + this.order_no
								})
							}
						})
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						})
					}
				})
			},
			//添加新用户
			addUser() {
				if (!this.userPhone) {
					uni.showModal({
						content: '请先输入手机号',
						showCancel: false
					});
					return false;
				}
				if (!this.userName) {
					uni.showModal({
						content: '请先输入昵称',
						showCancel: false
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				})
				addUser({
					phone: this.userPhone,
					is_vip: '',
					nickname: this.userName,
					code: this.areaCode
				}).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
						this.showPop = true
					} else {
						uni.showModal({
							content: res.data || '添加失败',
							showCancel: false
						});
					}
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.pop {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999999;

		.hint_icon {
			width: 183rpx;
			height: 135rpx;
			position: relative;
			margin-top: -85rpx;
		}

		.pop_con {
			width: 648rpx;
			height: 442rpx;
			background: #fff;
			border-radius: 26rpx;
			display: flex;
			flex-direction: column;
			// align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.hint {
				width: 100%;
				text-align: center;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 22rpx;
				}

			}


			.con {
				min-height: 120rpx;
				margin: 20rpx 0 20rpx;
				font-size: 34rpx;
			}

			.btn_box {
				width: 100%;

				view {
					width: 270rpx;
					height: 88rpx;
					background: #FFF4F3;
					border: 2rpx solid #FB231F;
					border-radius: 44rpx;
					color: $base-color;
					font-size: 32rpx;
				}

				view:last-child {
					background: $base-line-bg;
					color: #fff;
				}

			}

		}

		.iconfont {
			color: #fff;
			font-size: 60rpx;
			margin-top: 30rpx;
		}
	}

	.add {
		width: 100%;
		min-height: 100%;
		background: #fff;
		position: relative;

		.add_user {
			width: 690rpx;
			margin: 0 auto;
			padding-top: 30rpx;

			.inp_box {
				.label {
					font-size: 32rpx;
					font-weight: bold;
					padding: 30rpx 0;

					.star {
						font-size: 36rpx;
						color: $base-color;
						margin-left: 10rpx;
					}

					.hint {
						color: #999;
					}
				}

				.phone-area {
					margin-bottom: 20rpx;

					.text {
						font-size: 32rpx;
					}

					.area {
						color: #42b983;
					}

				}

				.change_box {
					flex: 1;
					margin-top: 20rpx;

					view {
						width: 330rpx;
						height: 72rpx;
						font-size: 32rpx;
						border: 2rpx solid #707070;
						border-radius: 42rpx;
						line-height: 72rpx;
						text-align: center;
					}

					.active {
						background: $base-line-bg;
						border: none;
						color: #fff;
					}
				}

			}

			input {
				width: 100%;
				background: #f9f9fb;
				height: 88rpx;
				line-height: 88rpx;
				padding-left: 15rpx;
				border-radius: 8rpx;
			}

			.sub_btn_box {
				width: 100%;
				height: 100rpx;
				background: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				border-top: 2rpx solid #eeeeee;

				.sub_btn {
					width: 690rpx;
					height: 88rpx;
				}
			}
		}
	}
</style>