switch按钮模块

拼搏现实的明天。 2022-01-06 08:15 189阅读 0赞

## 设置收货地址 ##

添加收货地址

<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 '../../components/mpvue-citypicker/mpvueCityPicker.vue'
    	import cityData from '../../common/city.data.js';
    
    	export default { 
    		components: { 
    			mpvuePicker,
    			mpvueCityPicker
    		},
    		data() { 
    			return { 
    				// addressData: { 
    				default: 0,
    				name: '',
    				phone: '',
    				site: '',
    				particular: '',
    				pickerSingleArray: [{ 
    						label: '中国',
    						value: 1
    					},
    					{ 
    						label: '俄罗斯',
    						value: 2
    					},
    					{ 
    						label: '美国',
    						value: 3
    					},
    					{ 
    						label: '日本',
    						value: 4
    					}
    				],
    				mulLinkageTwoPicker: cityData,
    				cityPickerValueDefault: [0, 0, 1],
    				themeColor: '#007AFF',
    				// site: '',
    				mode: '',
    				deepLength: 1,
    				pickerValueDefault: [0],
    				pickerValueArray: []
    			}
    			// }
    		},
    		methods: { 
    			switch1Change: function(e) { 
    				var that = this
    				console.log('switch1 发生 change 事件，携带值为', e.target.value)
    				if (e.target.value == false) { 
    					e.target.value = 0
    					that.default = 0
    					console.log(e.target.value)
    				} else if (e.target.value == true) { 
    					e.target.value = 1
    					that.default = 1
    					console.log(e.target.value)
    				}
    			},
    			comment() { 
    				if (this.name=="") { 
    					uni.showToast({ 
    						title: '请填写收货人姓名',
    						icon: 'none'
    					})
    					return;
    				}
    				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.phone)) { 
    					uni.showToast({ 
    						title: '请输入正确的手机号码',
    						icon: 'none',
    					})
    					return;
    				}
    				if (this.site=="") { 
    					uni.showToast({ 
    						title: '请在选择所在位置',
    						icon: 'none',
    					})
    					return;
    				}
    				if (this.particular=="") { 
    					uni.showToast({ 
    						title: '请填写门牌号信息',
    						icon: 'none',
    					})
    					return;
    				}
    				var that = this;
    				that.token = uni.getStorageSync('user_info').token
    				uni.request({ 
    					url: this.baseUrl + '/api/site/add',
    					method: 'POST',
    					data: { 
    						"name": that.name,
    						"phone": that.phone,
    						"site": that.site,
    						"particular": that.particular,
    						// default: false, 
    						"default": that.default,
    						"token": that.token
    					},
    					header: { 
    						'Content-type': 'application/x-www-form-urlencoded'
    					},
    					success: (ret) => { 
    						console.log(ret, '新增收货地址');
    						if (ret.data.code == 200) {  //判断字段
    							uni.hideLoading();
    							uni.showToast({ 
    								title: '添加成功',
    								icon: 'none'
    							});
    							uni.navigateTo({ 
    								url:'../IsAddress/IsAddress'
    							})
    						} else { 
    							uni.showToast({ 
    								title: ret.data.msg,
    								icon: 'none'
    							});
    						}
    					},
    					error: (e) => { 
    						uni.hideLoading();
    						uni.showToast({ 
    							title: e.response.data.msg,
    							icon: 'none'
    						});
    					},
    				});
    			},
    			onCancel(e) { 
    				console.log(e)
    			},
    			// 单列
    			showSinglePicker() { 
    				this.pickerValueArray = this.pickerSingleArray
    				this.mode = 'selector'
    				this.deepLength = 1
    				this.pickerValueDefault = [0]
    				this.$refs.mpvuePicker.show()
    			},
    			// 二级联动选择
    			showMulLinkageTwoPicker() { 
    				this.pickerValueArray = this.mulLinkageTwoPicker
    				this.mode = 'multiLinkageSelector'
    				this.deepLength = 2
    				this.pickerValueDefault = [0, 0]
    				this.$refs.mpvuePicker.show()
    			},
    			// 三级联动选择
    			showMulLinkageThreePicker() { 
    				this.$refs.mpvueCityPicker.show()
    			},
    			onConfirm(e) { 
    				this.site = e.label
    			}
    		},
    		onBackPress() { 
    			if (this.$refs.mpvuePicker.showPicker) { 
    				this.$refs.mpvuePicker.pickerCancel();
    				return true;
    			}
    			if (this.$refs.mpvueCityPicker.showPicker) { 
    				this.$refs.mpvueCityPicker.pickerCancel();
    				return true;
    			}
    		},
    		onUnload() { 
    			if (this.$refs.mpvuePicker.showPicker) { 
    				this.$refs.mpvuePicker.pickerCancel()
    			}
    			if (this.$refs.mpvueCityPicker.showPicker) { 
    				this.$refs.mpvueCityPicker.pickerCancel()
    			}
    		}
    	};
    </script>
    
    
    <style lang="scss">
    	.uni-back { 
    		display: flex;
    		flex-direction: column;
    		width: 100%;
    		height: 100%;
    		background-color: #FFFFFF;
    	}
    
    	.input-cell { 
    		display: flex;
    		align-items: center;
    		padding: 20upx;
    		justify-content: space-between;
    		border: 1upx #f5f5f5 solid;
    	}
    
    	.shou { 
    		margin-left: 16upx;
    		width: 30%;
    	}
    
    	.part { 
    		margin-left: 40upx;
    		margin-top: 0.5rem;
    	}
    
    	.text { 
    		margin-left: 16upx;
    		width: 40%;
    	}
    
    	.name { 
    		margin-right: 200upx;
    	}
    
    	.momo { 
    		width: 100%;
    		height: 35upx;
    		background-color: #F5F5F5;
    	}
    
    	.u-momo { 
    		padding: 20upx;
    		border: 1upx #f5f5f5 solid;
    	}
    
    	.wait { 
    		width: 100%;
    		height: 55%;
    		background-color: #FFFFFF;
    		margin-bottom: 0upx;
    	}
    
    	.picker { 
    		display: flex;
    		margin: 0 auto;
    		width: 100%;
    	}
    
    	.input-pickerText { 
    		width: 60%;
    		height: 30upx;
    		margin: 1rem 0;
    
    	}
    
    	.input-pickerText .text { 
    		width: 30%;
    		height: 100upx;
    	}
    
    	.input-particular { 
    		width: 100%;
    		height: 150upx;
    	}
    
    	.uni-save { 
    		width: 100%;
    		height: 20%;
    		// margin-top: 80%;
    		// margin-bottom: 0;
    		// dock: 'buttom'
    		// background-color: #f5f5f5;
    	}
    
    	.uni-comment { 
    		background: #FFFFFF;
    		color: #959595;
    		width: 80%;
    		height: 90upx;
    		text-align: center;
    		margin: 40upx auto;
    		line-height: 100upx;
    		border-radius: 50upx;
    		box-shadow: #DDDDDD 2px 2px 2px 0px;
    	}
    
    	.row { 
    		display: flex;
    		align-items: center;
    		position: relative;
    		padding: 0 30upx;
    		height: 110upx;
    		background: #fff;
    
    		.tit { 
    			flex-shrink: 0;
    			width: 120upx;
    			font-size: 30upx;
    			// color: $font-color-dark;
    		}
    
    		.input { 
    			flex: 1;
    			font-size: 30upx;
    			// color: $font-color-dark;
    		}
    
    		.icon-shouhuodizhi { 
    			font-size: 36upx;
    			// color: $font-color-light;
    		}
    	}
    
    	.default-row { 
    		margin-top: 16upx;
    
    		.tit { 
    			flex: 1;
    		}
    
    		switch { 
    			transform: translateX(16upx) scale(.9);
    		}
    	}
    </style>

js调用的都是uni-app框架中包含的

代码块看的不是很清楚的话，截图更加清晰  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlZ2lubmluZ19wdXJl_size_16_color_FFFFFF_t_70]

默认收获地址  
![在这里插入图片描述][20190624173724169.png]  
switch 判断是否选中使用true false  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlZ2lubmluZ19wdXJl_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlZ2lubmluZ19wdXJl_size_16_color_FFFFFF_t_70]: /images/20211227/f881aa168c0249abbff398fd91ab436a.png
[20190624173724169.png]: /images/20211227/d0129258e32743f98189b7f3c45f1626.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlZ2lubmluZ19wdXJl_size_16_color_FFFFFF_t_70 1]: /images/20211227/44cb01bbda3148799076080d4c370c15.png