fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit ec2281b696ceabc0334915f4c835f78c9a33981e 1 parent 41f6a736

component-import

Inline Side-by-side
Showing 5 changed files with 125 additions and 168 deletions
@@ -48,6 +48,8 @@ exports.addressAct = (req, res, next) => { @@ -48,6 +48,8 @@ exports.addressAct = (req, res, next) => {
48 let responseData = { 48 let responseData = {
49 module: 'home', 49 module: 'home',
50 page: 'address-act', 50 page: 'address-act',
  51 + vue: true,
  52 + localCss: true,
51 pageHeader: headerModel.setNav({ 53 pageHeader: headerModel.setNav({
52 navTitle: result && result.navTitle, 54 navTitle: result && result.navTitle,
53 navBtn: false, 55 navBtn: false,
@@ -30,3 +30,7 @@ @@ -30,3 +30,7 @@
30 <div class="my-address-list-page page-wrap hide"> 30 <div class="my-address-list-page page-wrap hide">
31 </div> 31 </div>
32 </div> 32 </div>
  33 +
  34 +<div id="app">
  35 + <app></app>
  36 +</div>
@@ -217,3 +217,13 @@ $.ajax({ @@ -217,3 +217,13 @@ $.ajax({
217 }); 217 });
218 218
219 // } 219 // }
  220 +var Vue = require('vue');
  221 +
  222 +var app = require('home/address/address-act.vue');
  223 +
  224 +new Vue({
  225 + el: '#app',
  226 + components: {
  227 + app: app
  228 + }
  229 +});
1 /** 1 /**
2 * Created by yoho on 2016/12/14. 2 * Created by yoho on 2016/12/14.
3 */ 3 */
4 -let Vue = require('vue'); 4 +var Vue = require('vue');
5 5
6 -let app = require('home/address/address-act.vue'); 6 +var app = require('home/address/address-act.vue');
7 7
8 new Vue({ 8 new Vue({
9 el: '#app', 9 el: '#app',
1 <template> 1 <template>
2 - <div>  
3 - <header-component header-text="添加新地址" :show-btn="false">  
4 - </header-component>  
5 - <form class="address-form">  
6 - <div class="address-form-group">  
7 - <label for="consignee">  
8 - 收 货 人：  
9 - </label>  
10 - <input type="text" name="consignee" maxlength="20" value="">  
11 - </div>  
12 - <div class="address-form-group">  
13 - <label for="mobile">  
14 - 联系电话：  
15 - </label>  
16 - <input type="text" name="mobile" value="">  
17 - </div>  
18 - <div class="address-form-group">  
19 - <label for="area">  
20 - 所在地区：  
21 - </label>  
22 - <input type="text" name="area" value="" readonly>  
23 - <span class="address-select">请选择<span class="iconfont">&#xe604;</span></span>  
24 - </div>  
25 - <div class="address-form-group">  
26 - <label for="address">  
27 - 详细地址：  
28 - </label>  
29 - <textarea class="address" name="address" maxlength="255"></textarea>  
30 - </div>  
31 - <input type="hidden" name="area_code" value="">  
32 - </form>  
33 - <div class="address-select-component">  
34 - <div class="address-select-box">  
35 - <div class="component-title"><span class="title">所在地区</span><span class="iconfont close">X</span></div>  
36 - <ul class="head-address-ul">  
37 - <li class="head-address-li">请选择</li>  
38 - <li></li>  
39 - <li></li>  
40 - <li></li>  
41 - </ul>  
42 - <div class="address-container">  
43 - <div class="address-content">  
44 - <ul class="address-ul">  
45 - <li v-for="address in addresses" :data-id="address.id">{{address.caption}}</li>  
46 - </ul>  
47 - </div> 2 + <div class="address-select-component">
  3 + <div class="address-select-box">
  4 + <div class="component-title"><span class="title">所在地区</span><span class="iconfont close">X</span></div>
  5 + <ul class="head-address-ul">
  6 + <li class="head-address-li">请选择</li>
  7 + <li></li>
  8 + <li></li>
  9 + <li></li>
  10 + </ul>
  11 + <div class="address-container">
  12 + <div class="address-content">
  13 + <ul class="address-ul">
  14 + <li v-for="address in addresses" :data-id="address.id">{{address.caption}}</li>
  15 + </ul>
48 </div> 16 </div>
49 </div> 17 </div>
50 </div> 18 </div>
51 </div> 19 </div>
52 </template> 20 </template>
53 <style> 21 <style>
54 - body {  
55 - margin: 0;  
56 - }  
57 -  
58 - .address-form {  
59 - padding: 0 30px;  
60 -  
61 - > .address-form-group {  
62 - border-bottom: solid 1px #ccc; 22 +.address-select-component {
  23 + position: fixed;
  24 + top: 0;
  25 + left: 0;
  26 + width: 100%;
  27 + background: rgba(0, 0, 0, 0.5);
  28 +
  29 + .address-select-box {
  30 + margin-top: 400px;
  31 + background: #fff;
  32 +
  33 + .component-title {
  34 + text-align: center;
63 line-height: 80px; 35 line-height: 80px;
  36 + font-size: 32px;
  37 + color: #ccc;
  38 + padding: 0 30px;
64 39
65 - > label {  
66 - color: #444;  
67 - }  
68 -  
69 - .address {  
70 - resize: none;  
71 - height: 116px;  
72 - width: 400px;  
73 - }  
74 -  
75 - .address-select {  
76 - color: #ccc; 40 + .close {
77 float: right; 41 float: right;
78 } 42 }
79 } 43 }
80 - }  
81 -  
82 - .address-select-component {  
83 - position: fixed;  
84 - top: 0;  
85 - left: 0;  
86 - width: 100%;  
87 - background: rgba(0, 0, 0, 0.5);  
88 -  
89 - .address-select-box {  
90 - margin-top: 400px;  
91 - background: #fff;  
92 -  
93 - .component-title {  
94 - text-align: center;  
95 - line-height: 80px;  
96 - font-size: 32px;  
97 - color: #ccc;  
98 - padding: 0 30px;  
99 44
100 - .close {  
101 - float: right;  
102 - } 45 + .head-address-ul {
  46 + margin: 0;
  47 + padding: 0;
  48 + list-style: none;
  49 + overflow: hidden;
  50 + background-color: white;
  51 + font-size: 24px;
  52 + color: #444;
  53 +
  54 + li {
  55 + display: block;
  56 + float: left;
  57 + height: 40px;
  58 + line-height: 40px;
  59 + position: relative;
  60 + padding-left: 30px;
103 } 61 }
104 62
105 - .head-address-ul {  
106 - margin: 0;  
107 - padding: 0;  
108 - list-style: none;  
109 - overflow: hidden;  
110 - background-color: white;  
111 - font-size: 24px;  
112 - color: #444;  
113 -  
114 - li {  
115 - display: block;  
116 - float: left;  
117 - height: 40px;  
118 - line-height: 40px;  
119 - position: relative;  
120 - padding-left: 30px;  
121 - }  
122 -  
123 - .head-address-li {  
124 - color: #f23030;  
125 - }  
126 -  
127 - .head-address-li:after {  
128 - width: 70%;  
129 - height: 1px;  
130 - border-bottom: 2px solid #f23030;  
131 - position: absolute;  
132 - bottom: 1px;  
133 - left: 50%;  
134 - content: '';  
135 - margin-left: -20px;  
136 - } 63 + .head-address-li {
  64 + color: #f23030;
137 } 65 }
138 66
139 - .head-address-ul:after {  
140 - content: '';  
141 - width: 100%; 67 + .head-address-li:after {
  68 + width: 70%;
142 height: 1px; 69 height: 1px;
  70 + border-bottom: 2px solid #f23030;
143 position: absolute; 71 position: absolute;
144 - border-bottom: 1px solid #e3e5e9;  
145 - left: 0px;  
146 - bottom: 0px;  
147 - transform: scaleY(0.5);  
148 - -webkit-transform: scaleY(0.5); 72 + bottom: 1px;
  73 + left: 50%;
  74 + content: '';
  75 + margin-left: -20px;
149 } 76 }
  77 + }
150 78
151 - .address-container {  
152 - margin: -1px 0 0 0;  
153 - overflow: hidden;  
154 - height: 100%;  
155 - width: 100%;  
156 - border-top: solid 1px #ccc;  
157 -  
158 - .address-content {  
159 - transform: translate(0px, 0px) translateZ(0px);  
160 - height: 620px;  
161 -  
162 - .address-ul {  
163 - padding: 0;  
164 - margin: 0;  
165 - list-style: none;  
166 - height: 100%;  
167 - overflow: auto;  
168 - font-size: 24px;  
169 - color: #232326; 79 + .head-address-ul:after {
  80 + content: '';
  81 + width: 100%;
  82 + height: 1px;
  83 + position: absolute;
  84 + border-bottom: 1px solid #e3e5e9;
  85 + left: 0px;
  86 + bottom: 0px;
  87 + transform: scaleY(0.5);
  88 + -webkit-transform: scaleY(0.5);
  89 + }
170 90
171 - li {  
172 - height: 80px;  
173 - line-height: 80px;  
174 - padding-left: 30px;  
175 - position: relative;  
176 - overflow: hidden;  
177 - } 91 + .address-container {
  92 + margin: -1px 0 0 0;
  93 + overflow: hidden;
  94 + height: 100%;
  95 + width: 100%;
  96 + border-top: solid 1px #ccc;
  97 +
  98 + .address-content {
  99 + transform: translate(0px, 0px) translateZ(0px);
  100 + height: 620px;
  101 +
  102 + .address-ul {
  103 + padding: 0;
  104 + margin: 0;
  105 + list-style: none;
  106 + height: 100%;
  107 + overflow: auto;
  108 + font-size: 24px;
  109 + color: #232326;
  110 +
  111 + li {
  112 + height: 80px;
  113 + line-height: 80px;
  114 + padding-left: 30px;
  115 + position: relative;
  116 + overflow: hidden;
  117 + }
178 118
179 - li:after {  
180 - content: '';  
181 - width: 100%;  
182 - height: 1px;  
183 - position: absolute;  
184 - border-bottom: 1px solid #e3e5e9;  
185 - left: 0px;  
186 - bottom: 0px;  
187 - transform: scaleY(0.5);  
188 - -webkit-transform: scaleY(0.5);  
189 - } 119 + li:after {
  120 + content: '';
  121 + width: 100%;
  122 + height: 1px;
  123 + position: absolute;
  124 + border-bottom: 1px solid #e3e5e9;
  125 + left: 0px;
  126 + bottom: 0px;
  127 + transform: scaleY(0.5);
  128 + -webkit-transform: scaleY(0.5);
190 } 129 }
191 } 130 }
192 } 131 }
193 } 132 }
194 } 133 }
  134 +}
195 </style> 135 </style>
196 <script> 136 <script>
  137 + require('../../../scss/home/_address.css');
197 let headerComponent = require('common/header.vue'); 138 let headerComponent = require('common/header.vue');
198 139
199 module.exports = { 140 module.exports = {