uniapp_lianxi/pages/pricate/pricate.vue

<template>
	<view class="content">
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="简介" prop="intro">
				<u-input v-model="form.intro" />
			</u-form-item>
			<u-form-item prop="phone">
				<u-field v-model="form.phone" label="手机" placeholder="请填写手机号" />
			</u-form-item>
			<u-form-item label="性别">
				<u-input v-model="form.sex" type="select" />
			</u-form-item>
			<u-form-item label="水果">
				<u-checkbox-group @change="checkboxChange">
					<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label="味道">
				<u-radio-group v-model="radio">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="开关">
				<u-switch slot="right" v-model="switchVal"></u-switch>
			</u-form-item>

		</u-form>
		<u-button @click="submit">提交</u-button>
		<u-steps :list="numList" mode="number" :current="current" active-color="#fa3534"></u-steps>
		<!-- <view v-if="current == 0">
			<view>aaa</view>
			<u-button type="success" @click="gostep">下一步</u-button>
		</view>
		<view v-if="current == 1">
			<view>cccccccccccccccccccccccccccccc</view>
			<u-button type="success" @click="gostep">成功按钮</u-button>
		</view>
		<view v-if="current == 2">
			<view>bbbb</view>
			<u-button type="success" @click="gostep">成功按钮</u-button>
		</view> -->
		<view v-if="numList[current]">
			<view>{{numList[current].shop}}</view>
			<u-button type="success" @click="gostep">{{numList[current].btn}}</u-button>
		</view>


	</view>
</template>

<script>
	import {
		getBing
	} from "../../utils/service.js";
	export default {
		data() {
			return {
				errorType: ['toast'],
				form: {
					name: '',
					intro: '',
					sex: '',
					phone: '',
				},
				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '鲜甜',
						disabled: false
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				numList: [{
					name: '下单',
					shop: '手机',
					btn: '下一步'
				}, {
					name: '出库',
					shop: '电话',
					btn: '下一步'
				}, {
					name: '运输',
					shop: '学习机',
					btn: '提交'
				}, ],

				current: 0,
				radio: '',
				switchVal: false,
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onLoad() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
			},
			submit() {
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过');
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
				getBing({
						name:'7778880105007',
						pwd: 'e10adc3949ba59abbe56e057f20f883e',
						appletsId: 'oqqAL4wZlDm8UYJFjdJljt - BoFvw'
					})
					.then(data => {
						console.log(data, "000000")
					})

			},

			gostep() {

				if (this.current == this.numList.length - 1) {
					return
				}
				console.log(this.current)
				this.current += 1;

			},
			// sumbitOlds() {

			// 	this.$refs.uForm.validate(valid => {
			// 		if (valid) {
			// 			console.log('验证通过');
			// 		} else {
			// 			console.log('验证失败');
			// 		}
			// 	});
			// },

		}
	}
</script>

<style scoped>
	/deep/ .u-form-item--left__content__label {
		color: red;
	}
</style>