cgst/pages/dp/shop.vue

<template>
	<view class="center">
		<view class="info">
			<view class="name">城攻闪拓</view>
			<view class="avatar">邀请你加入</view>
		</view>
		<view class="input-box"><input class="input" v-model="name" type="text" placeholder="请输入您的真实姓名" /></view>
		<view class="input-box"><input class="input" v-model="phone" type="text" placeholder="请输入您的电话号码" /></view>
		<view class="input-box"><input class="input" v-model="code" type="text" placeholder="请输入您的工号" /></view>
		<view class="input-box">
			<picker @change="bindPickerEdu" :value="zuId" :range="chooseEdu" range-key="group_name" class="box-right">
				<text>{{ education }}</text>
			</picker>
		</view>
		<view class="bottom" @click="bd()">马上加入</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { interceptor, saveUrl } from '@/utils/loginUtils';
import { groups, setWaiter } from '@/api/coupon.js';
export default {
	data() {
		return {
			id: '',
			name: '',
			phone: '',
			code: '',
			zuName: '',
			zuId: '',
			education: '请选择你的小组',
			chooseEdu: []
		};
	},
	computed: {
		...mapState(['userInfo', 'orderInfo', 'hasLogin'])
	},
	onLoad(option) {
		if (!this.hasLogin) {
			saveUrl();
			interceptor();
		} else {
			this.id = option.scene;
			this.loadData();
		}
	},
	methods: {
		loadData() {
			groups({}, this.id).then(e => {
				// groups({}, 1).then(e => {
				this.chooseEdu = e.data.list;
				console.log(this.chooseEdu);
				console.log(e);
			});
		},
		bd() {
			if (this.name == '') {
				return this.$api.msg('请输入真实姓名');
			}
			if (this.phone == '') {
				return this.$api.msg('请输入电话号码');
			}
			if (this.code == '') {
				return this.$api.msg('请输入工号');
			}
			if (this.zuId == '') {
				return this.$api.msg('请选择要加入的小组');
			}
			setWaiter(
				{
					name: this.name,
					phone: this.phone,
					code: this.code,
					groups_id: this.zuId,
					fuck: this.userInfo.uid,
					fuck_name: 'setWaiter'
				},
				this.id
			).then(e => {
				this.$api.msg('加入成功');
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 1000);
			});
		},
		bindPickerEdu: function(e) {
			console.log(e, 'hhh');
			this.education = this.chooseEdu[e.detail.value].group_name;
			this.zuName = this.chooseEdu[e.detail.value].group_name;
			this.zuId = this.chooseEdu[e.detail.value].id;
		}
	}
};
</script>

<style lang="scss">
.info {
	margin: 50rpx 0 100rpx;
}
.name {
	text-align: center;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
}
.avatar {
	margin-top: 20rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	text-align: center;
}
.input-box {
	padding: 10rpx 20rpx;
	margin: 20rpx auto 0;
	border: 1px solid #999999;
	width: 560rpx;
	text-align: center;
	font-size: 24rpx;
	.input {
		text-align: center;
		font-size: 24rpx;
	}
}
.bottom {
	margin: 100rpx auto 0;
	width: 560rpx;
	background: linear-gradient(90deg, #fe6f61 0%, #ff4343 100%);
	color: #ffffff;
	text-align: center;
	padding: 26rpx 0rpx;
	border-radius: 50rpx;
}
</style>