刘文博 / gulu-vue

Blame view

src/pages/addArddess/addArddess.vue 2.73 KB
edit raw normal view history
435c08bd8   BigBoss   新增订单详情页面 
1
2
3
 
  <template>
  	<view class="wrap">
  		<view class="content">
936893552   BigBoss   新增地址页面 
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
  			<view class="item,name" >
  				<text class="itemText">姓名</text>
  				<input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/>
  			</view>
  			<view class="item,phone">
  				<text class="itemText">电话</text>
  				<input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/>
  			</view>
  			<view class="item,area" >
  				<text class="itemText">地区</text>
  				<view class="btn" v-if="pickerText===''"  @tap="openAddres">选择省/市/区</view>
  				<view class="btn" v-else @tap="openAddres">{{pickerText}}</view>
  				<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
  			</view>
  			<view class="item,address" >
  				<text class="itemText">详细地址</text>
  				<input placeholder="街道、小区门牌等详细地址"/>
  			</view>
  			<view class="item,check" >
  				<text class="itemText">设为默认地址</text>
  				<switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" />
  			</view>
  			<input />
435c08bd8   BigBoss   新增订单详情页面 
27
28
29
30
 
  		</view>
  		<view class="button">保存并使用</view>
  	</view>
  </template>
936893552   BigBoss   新增地址页面 
31
 
  <script>
fb85b244c   BigBoss   user页面 
32
 
  	import simpleAddress from '@/components/Simple-address/Simple-address.vue';
435c08bd8   BigBoss   新增订单详情页面 
33
34
35
 
  	export default {
  		data() {
  			return {
936893552   BigBoss   新增地址页面 
36
37
38
 
  				cityPickerValueDefault: [0, 0, 1],
  				pickerText: '',
  				isDefalutAddress:true
435c08bd8   BigBoss   新增订单详情页面 
39
40
 
  				
  			};
936893552   BigBoss   新增地址页面 
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
  		},
  		components: {
  			simpleAddress
  		},
  		methods: {
  			openAddres() {
  				this.cityPickerValueDefault = [0,0,1]
  				this.$refs.simpleAddress.open();
  			},
  			onConfirm(e) {
  				this.pickerText = e.label;
  			},
  			changeDefalutAddress(e){
  				this.isDefalutAddress = e.target.value
  			}
435c08bd8   BigBoss   新增订单详情页面 
56
57
58
 
  		}
  	}
  </script>
936893552   BigBoss   新增地址页面 
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
  <style lang="scss">
  	.wrap{
  		height: 100vh;
  		background-color:#F2F2F2 ;
  		font-family: PingFangSC-Regular;
  		letter-spacing: -0.23px;
  		padding-top: 19rpx;
  	}
  	.content{
  		background-color: #FFFFFF;
  		border-radius: 8px;
  		border-radius: 8px;
  		padding: 40rpx 56rpx;
  		margin-left: 40rpx;
  		width: 670rpx;
  		box-sizing: border-box;
  		.item{
  			display: flex;
  			justify-content: flex-start;
  			font-size: 14px;
  			align-items: center;
  			height: 112rpx;
  			border-bottom: 1rpx solid #E9E9E9;
  			.itemText{
  				width: 162rpx;
  				font-family: PingFangSC-Regular;
  				letter-spacing: -0.26px;
  			}
  			.btn{
  				color: #333333 !important;
  			}
  		}
  		.check{
  			justify-content: space-between;
  		}
  	}
  	.button{
  		position: fixed;
  		bottom: 0;
  		left: 0;
  		height: 112rpx;
  		width: 100%;
  		background: #FF6B4A;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		font-size: 16px;
  		color: #FFFFFF;
  		letter-spacing: -0.3px;
  	}
435c08bd8   BigBoss   新增订单详情页面 
109
 
  </style>