duantuihe/pages/my/roleManageDetail/index.vue

<template>
	<view class="container">
		<navBar title="主角详情" :back="true" color="#333333" background="#FFFFFF" />

		<view class="parmasBox">
			<view class="titleBox">
				<image :src="picBase+'s_star.png'" mode="heightFix" class="starIcon" @click="upload"></image>
				故事主角信息
			</view>
			<view class="inputBox">
				<view class="selAndTileBox">
					<view class="nickname">
						<input type="text" class="nackI" v-model="formData.nickName" placeholder="请输入昵称" />
						<image :src="picBase+'arrR2.png'" mode="heightFix" class="arrIcon">
						</image>
					</view>
					<!-- 	<view class="selBtn" @click="show5=true">
						选择主角
					</view> -->
				</view>
				<view class="otherBox">
					<view class="item" @click="show=true">
						<input type="text" class="nackI" disabled v-model="formData.sex" placeholder="选择性别" />
						<image :src="picBase+'arrR2.png'" mode="heightFix" class="arrIcon">
						</image>
					</view>
					<view class="item" @click="show2=true">
						<input type="text" class="nackI" disabled v-model="formData.ageName" placeholder="选择年龄" />
						<image :src="picBase+'arrR2.png'" mode="heightFix" class="arrIcon">
						</image>
					</view>
					<view class="item" @click="show3=true">
						<input type="text" class="nackI" disabled v-model="formData.star" placeholder="选择星座" />
						<image :src="picBase+'arrR2.png'" mode="heightFix" class="arrIcon">
						</image>
					</view>
					<view class="item" @click="show4=true">
						<input type="text" class="nackI" disabled v-model="formData.className" placeholder="选择年级" />
						<image :src="picBase+'arrR2.png'" mode="heightFix" class="arrIcon">
						</image>
					</view>
				</view>
			</view>
		</view>

		<view class='btnBox' @click="save">
			<view class='btn'>
				{{type==0?'保存':'修改'}}
			</view>
		</view>



		<u-picker :show="show" :defaultIndex="defaultIndex1" class="my-picker" title="性别选择" aColor="#007AFF"
			:columns="columns" confirmColor="#007AFF" @confirm="confirm1" @cancel="show=false"></u-picker>
		<u-picker :show="show2" :defaultIndex="defaultIndex2" title="年龄选择" keyName="label" aColor="#007AFF"
			:columns="columns2" confirmColor="#007AFF" @confirm="confirm2" @cancel="show2=false"></u-picker>
		<u-picker :show="show3" :defaultIndex="defaultIndex3" title="星座选择" aColor="#007AFF" :columns="columns3"
			confirmColor="#007AFF" @confirm="confirm3" @cancel="show3=false"></u-picker>
		<u-picker :show="show4" :defaultIndex="defaultIndex4" title="班级选择" aColor="#007AFF" :columns="columns4"
			confirmColor="#007AFF" @confirm="confirm4" @cancel="show4=false"></u-picker>

		<!-- <u-picker keyName="name" :show="show5" title="选择主角" aColor="#007AFF" :columns="columns5" confirmColor="#007AFF"
			@confirm="confirm5" @cancel="show5=false"></u-picker> -->
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'

	import {
		getKefu,
		postAddRole,
		postUpRole
	} from '@/api/index/index.js'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				picBase: this.$picBase2,

				formData: {
					nickName: '',
					sex: '',

					ageName: '',
					age: -1,
					star: '',

					className: '',
					class: -1
				},
				show: false,
				columns: [
					['男孩', '女孩']
				],
				show2: false,
				columns2: [
					[
						'1岁',
						'2岁',
						'3岁',
						'4岁',
						'5岁',
						'6岁',
						'7岁',
						'8岁',
						'9岁',
						'10岁',
						'11岁',
						'12岁',
						'13岁',
						'14岁',
						'15岁',
						'16岁',
					]

				],
				show3: false,
				columns3: [
					['白羊座', '金牛座', '双子座 ', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
				],
				show4: false,
				columns4: [
					['幼儿园', '一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
				],


				roleInfo: null,
				type: 0,

				roleId: -1,





				defaultIndex1: [0],
				defaultIndex2: [0],
				defaultIndex3: [0],
				defaultIndex4: [0]
			}
		},
		onLoad() {
			// this.getabout()


			if (getApp().roleInfo) {
				this.type = 1
				this.roleInfo = getApp().roleInfo
				this.confirm5(getApp().roleInfo)
				console.log('传入的主角信息', this.roleInfo);
				getApp().roleInfo = null




				// 回显选择器对应默认索引
				this.reshowIndex()

			} else {
				this.reShow2()
			}
		},
		methods: {
			reshowIndex() {
				this.defaultIndex1[0] = this.roleInfo.sex == '男孩' ? 0 : 1
				this.defaultIndex2[0] = Number(this.roleInfo.age) - 1

				let xinzuoIndex = this.columns3[0].findIndex((item, index) => {
					return item == this.roleInfo.star
				})
				console.log('xinzuoIndex-----', xinzuoIndex);
				this.defaultIndex3[0] = xinzuoIndex
				this.defaultIndex4[0] = Number(this.roleInfo.level)
			},

			reShow2() {
				// 回显方式2
				// this.formData.nickName = res1.data.data[i].name
				this.formData.sex = this.columns[0][0]

				this.formData.age = 1
				this.formData.ageName = '1岁'

				this.formData.star = this.columns3[0][0]

				this.formData.className = this.columns4[0][0]
				this.formData.class = 0
			},
			async getabout() {
				let res1 = await getKefu()
				console.log('关于我们返回值--------2', res1);
				if (res1.code == 0) {
					this.content = res1.data.about.value
				} else {
					this.$toast(res1.message)
				}
			},


			confirm1(e) {
				console.log('e', e);
				this.formData.sex = e.value[0]
				this.show = false
			},
			confirm2(e) {
				console.log('e', e);
				this.formData.ageName = this.columns2[0][e.indexs[0]]
				this.formData.age = e.indexs[0] + 1
				this.show2 = false
			},
			confirm3(e) {
				console.log('e', e);
				this.formData.star = e.value[0]
				this.show3 = false
			},
			confirm4(e) {
				console.log('e', e);

				// this.formData.class = e.value[0]

				this.formData.class = e.indexs[0]
				this.formData.className = e.value[0]

				console.log('confirm4--level', this.formData.class);
				this.show4 = false
			},

			confirm5(e) {

				this.formData.class = e.level
				this.formData.className = this.columns4[0][Number(e.level)]


				this.formData.nickName = e.name
				this.formData.sex = e.sex
				this.formData.star = e.star


				this.formData.age = e.age
				this.formData.ageName = this.columns2[0][Number(e.age) - 1]
			},


			async save() {
				if (!this.formData.nickName) {
					return this.$toast('请输入昵称')
				}
				if (!this.formData.sex) {
					return this.$toast('请选择性别')
				}
				if (this.formData.age == -1) {
					return this.$toast('请选择年龄')
				}
				if (!this.formData.star) {
					return this.$toast('请选择星座')
				}
				if (this.formData.class == -1) {
					return this.$toast('请选择班级')
				}
				let p = {}

				if (this.type == 0) {
					p = {
						name: this.formData.nickName,
						sex: this.formData.sex,
						age: this.formData.age,
						star: this.formData.star,
						level: this.formData.class,
					}
					console.log('角色参数------------------', p);
					let res1 = await postAddRole(p)
					console.log('新增返回值--------2', res1);
					if (res1.code == 0) {
						this.$toast(this.type == 0 ? '保存成功' : '修改成功', 'success')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						this.$toast(res1.message)
					}
				} else {
					p = {
						id: this.roleInfo.id,

						name: this.formData.nickName,
						sex: this.formData.sex,
						age: this.formData.age,
						star: this.formData.star,
						level: this.formData.class,
					}
					console.log('角色参数------------------', p);
					let res1 = await postUpRole(p)
					console.log('修改返回值--------2', res1);
					if (res1.code == 0) {
						this.$toast(this.type == 0 ? '保存成功' : '修改成功', 'success')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						this.$toast(res1.message)
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>