刘文博 / gulu-vue

Blame view

src/pages/addAddress/addAddress.vue 2.76 KB
edit raw normal view history
1003c53e8   Adam   go 
1
2
 
  <template>
  	<view class="wrap">
435c08bd8   BigBoss   新增订单详情页面 
3
 
  		<view class="content">
936893552   BigBoss   新增地址页面 
4
5
6
7
8
9
10
11
12
13
14
15
 
  			<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>
066667dc4   BigBoss   add refundProgress 
16
 
  				<simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
936893552   BigBoss   新增地址页面 
17
18
19
20
21
22
23
24
25
26
 
  			</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
 
  		</view>
1003c53e8   Adam   go 
28
29
30
31
 
  		<view class="button">保存并使用</view>
  	</view>
  </template>
936893552   BigBoss   新增地址页面 
32
 
  <script>
9ff2df1bf   范牧   文件名称规范 
33
 
  	import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue';
1003c53e8   Adam   go 
34
35
36
37
 
  	export default {
  		data() {
  			return {
  				cityPickerValueDefault: [0, 0, 1],
936893552   BigBoss   新增地址页面 
38
 
  				pickerText: '',
1003c53e8   Adam   go 
39
40
41
42
43
44
45
46
47
48
49
50
 
  				isDefalutAddress:true
  				
  			};
  		},
  		components: {
  			SimpleAddress
  		},
  		methods: {
  			openAddres() {
  				this.cityPickerValueDefault = [0,0,1]
  				this.$refs.SimpleAddress.open();
  			},
936893552   BigBoss   新增地址页面 
51
 
  			onConfirm(e) {
1003c53e8   Adam   go 
52
 
  				this.pickerText = e.label;
936893552   BigBoss   新增地址页面 
53
54
55
 
  			},
  			changeDefalutAddress(e){
  				this.isDefalutAddress = e.target.value
1003c53e8   Adam   go 
56
57
58
59
60
 
  			}
  		}
  	}
  </script>
936893552   BigBoss   新增地址页面 
61
62
63
64
65
66
67
 
  <style lang="scss">
  	.wrap{
  		height: 100vh;
  		background-color:#F2F2F2 ;
  		font-family: PingFangSC-Regular;
  		letter-spacing: -0.23px;
  		padding-top: 19rpx;
1003c53e8   Adam   go 
68
 
  	}
936893552   BigBoss   新增地址页面 
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
109
 
  	.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;
1003c53e8   Adam   go 
110
111
 
  	}
  </style>