switch按钮模块

最新推荐文章于 2024-10-06 23:50:31 发布

要努力努力在努力

最新推荐文章于 2024-10-06 23:50:31 发布

阅读量870

点赞数

CC 4.0 BY-SA版权

分类专栏：实战文章标签：收货地址

本文链接：https://blog.youkuaiyun.com/beginning_pure/article/details/93502851

这篇博客主要介绍如何在uni-app框架下设置和管理收货地址，包括添加地址和使用switch按钮判断地址是否为默认。内容涉及到js调用uni-app的内置功能，以及switch按钮的true和false状态应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置收货地址

添加收货地址

<template>
	<view class="uni-back">
		<view class="input-cell">
			<text class="text">收货人</text>
			<input v-model="name" class="name" type="text" name="name" placeholder="请输入姓名" />
		</view>
		<view class="input-cell">
			<text class="text">手机号</text>
			<input v-model="phone" class="name" type="number" maxlength="11" name="phone" placeholder="请输入手机号" />
		</view>
		<view class="input-cell">
			<text class="shou">收货地址</text>
			<view class="input-pickerText" @tap="showMulLinkageThreePicker">
				<input :value="site" v-model="site" disabled placeholder="请选择地址" />
			</view>
			<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength"
			 :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>

		</view>
		<view class="input-particular">
			<input class="part" v-model="particular" type="text" placeholder="请输入道路、门牌号、小区、楼栋号、单元等" />
		</view>

		<view class="momo"></view>
		<view>
			<switch checked @change="switch1Change" v-if="'default'==0" />
			<switch style="transform:scale(0.7)" @change="switch1Change" />设为默认收货地址
		</view>
		<view class="uni-save">
			<view class="uni-comment" @tap="comment">保存</view>
		</view>
	</view>
</template>

<script>
	import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../