yyky_new_app/pages/equ_list/choose.vue

<template>
	<view class="content">
		<view class="top-box">
			<view class="box-item" v-for="(item,index) in list" :key="index" @click="choose(item)">
				<image :src="item.avatar" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- <view class="under-box">
			<view class="btn">
				确认
			</view>
		</view> -->
		<van-dialog use-slot title="自定义" :show="showDialog" show-cancel-button="true" @close="showDialog=false"
			@confirm="confirm">
			<van-field class="chageName" :value="nameValue" :focus="true" placeholder="请输入"
				@change="nameValue = $event.detail" />
		</van-dialog>
		<!-- #ifdef APP-PLUS -->
		<u-modal :show="showDialog" :title-style="{color: 'red'}" title="自定义" show-cancel-button="true" @cancel="showDialog=false" @confirm="confirm">
			<u-input v-model="nameValue"  placeholder="请输入"/>
		</u-modal>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import * as infoApi from '@/api/sleep/equ.js';
	export default {
		data() {
			return {
				list: [{
						avatar: '/pages/users/static/vip04.png',
						name: '爸爸',
						value: 1
					}, {
						avatar: '/pages/users/static/choose2.png',
						name: '妈妈',
						value: 2
					}, {
						avatar: '/pages/users/static/choose3.png',
						name: '儿子',
						value: 3
					}, {
						avatar: '/pages/users/static/choose4.png',
						name: '女儿',
						value: 4
					}, {
						avatar: '/pages/users/static/choose5.png',
						name: '爷爷',
						value: 5
					}, {
						avatar: '/pages/users/static/choose6.png',
						name: '奶奶',
						value: 6
					}, {
						avatar: '/pages/users/static/choose7.png',
						name: '姥爷',
						value: 7
					}, {
						avatar: '/pages/users/static/choose8.png',
						name: '姥姥',
						value: 8
					},
					{
						avatar: '/pages/users/static/vip04.png',
						name: '自定义',
						value: 9,
						id: 99
					},
				],
				// list: [],
				showDialog: false,
				nameValue: '',
			}
		},
		computed: mapGetters(['uid']),
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				infoApi.getDetailList().then(res => {
					let obj = {
						name: '自定义',
						avatar: 'https://employmenter.oss-cn-beijing.aliyuncs.com/%E9%80%89%E6%8B%A9%E5%85%B3%E7%B3%BB_slices/%E7%BC%96%E7%BB%84%2013%402x.png',
						id: 99
					}
					this.list = [...res.data, obj]
				})
			},
			confirm() {
				console.log(this.nameValue, 777);
				if (this.nameValue) {
					infoApi.createRelation({
						name: this.nameValue,
						memberId: this.uid
					}).then(res => {
						if (res.code === 0) {
							const item = {
								name: this.nameValue,
								id: res.data
							}
							this.goBack(item)
						}
					})
					.catch(err => {
						// close();
						return this.$util.Tips({
							title: err
						});
					});

				}
			},
			goBack(item) {
				// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
				let pages = getCurrentPages()

				// 2. 上一页面实例
				// 注意是length长度，所以要想得到上一页面的实例需要 -2
				// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length - 2]

				// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
				prevPage.$vm.getValue(item)
				uni.navigateBack({
					delta: 1
				})
			},
			choose(item) {
				console.log(item.id,'我带你寄了')
				if (item.id == 99) {
					this.showDialog = true
				} else {
					this.goBack(item)
				}

			},
		},
	}
</script>

<style lang="scss">
	.content {
		position: relative;

		.top-box {
			padding: 61rpx 89rpx 0;
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			box-sizing: border-box;

			.box-item {
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 55rpx;

				image {
					width: 118rpx;
					height: 118rpx;
				}

				text {
					font-size: 32rpx;
					font-weight: 400;
					color: #000000;
					margin-top: 16rpx;
				}
			}
		}

		.under-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 32rpx;
			box-sizing: border-box;

			.btn {
				width: 100%;
				height: 98rpx;
				line-height: 98rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				border-radius: 9rpx;
				background-color: #F35546;
			}
		}
	}
</style>