吉鹏 / gulu-vue

Download as
Browse Code »

Commit b9cc87aac7ea813711dc3ee7c558c3d7f0e1b214

Authored by 喻鹏
2 parents 4de4be3443 45527bbc76
Exists in master

Merge branch 'master' of http://121.40.31.31:8888/adam/gulu-vue

Showing 4 changed files   Show diff stats
src/pages/refundment/Refundways.vue
Diff comments   View file @b9cc87a
File was created 1 <template>
2 <view class="container" v-bind:style="{height: curheight+'px'}">
3 <view class="refund" v-for="(items) in refund" :key="items.key">
4 <view class="detail">
5 <view class="detail_img"><image v-bind:src="items.img"></image></view>
6 <view class="detail2">
7 <view class="detail_name">{{items.name}}</view>
8 <view class="detail_standard">规格：{{items.standard}}</view>
9 <view class="detail_price">
10 <span>￥{{items.price}}</span>
11 <span>X{{items.number}}</span>
12 </view>
13 </view>
14 </view>
15 <view class="refund_price">
16 <span class="refund_price1">退款金额</span>
17 <span class="refund_price2">￥{{items.refundprice}}</span>
18 </view>
19 <view class="refund_reason">
20 <view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
21 </view>
22 <view class="refund_reason">
23 <view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
24 </view>
25 <view class="refund_reason">
26 <view>换货<image src="/static/img/detail/xiala.png"></image></view>
27 </view>
28 </view>
29 </view>
30 </template>
31
32 <script>
33 export default {
34 //获取浏览器高度
35 beforeMount(height){
36 var h = document.documentElement.clientHeight || document.body.clientHeight;
37 this.curheight = h-44;
38
39 },
40 data(){
41 return{
42 curheight:0, //浏览器高度
43 refund:[
44 {
45 key:0,
46 img:'/static/img/detail/d1.png',
47 name:'商品名称',
48 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
49 price: 180,
50 number: 1,
51 refundprice: 110,
52 refund_img:'/static/img/detail/refund_img.png',
53 }
54 ],
55 }
56 }
57 }
58 </script>
59
60 <style lang="scss">
61
62 .container{
63 background: #F2F2F2;
64 padding-top: 10px;
65 box-sizing: border-box;
66 }
67 .refund{
68 width: 90%;
69 height: 300px;
70 margin: 0 auto;
71 background: #FFFFFF;
72 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
73 border-radius: 8px;
74 padding: 14px;
75 box-sizing: border-box;
76 }
77 .detail{
78 display: flex;
79 justify-content: space-between;
80 font-family: PingFangSC-Regular;
81 margin-bottom: 20px;
82 .detail2{
83 width: 64%;
84 view{
85 margin-bottom: 8px;
86 }
87 .detail_name{
88 font-size: 14px;
89 color:#333333;
90 }
91 .detail_standard{
92 font-size: 12px;
93 color: #999999;
94 }
95 .detail_price{
96 font-size: 14px;
97 color: #999999;
98 display: flex;
99 justify-content: space-between;
100 }
101 }
102 .detail_img{
103 width: 188rpx;
104 height: 188rpx;
105 border-radius: 40px;
106 image{
107 width: 100%;
108 height: 100%;
109 }
110 }
111 }
112
113 .refund_price{
114 font-family: PingFangSC-Semibold;
115 font-size: 14px;
116 color: #333333;
117 letter-spacing: -0.26px;
118 line-height: 18px;
119 margin-bottom: 26px;
120 .refund_price1{
121 font-weight: bold;
122 margin-right: 16px;
123 }
124 .refund_price2{
125 color: #FF6B4A;
126 }
127 }
128 .refund_reason{
129 margin-top: 16px;
130 margin-bottom: 16px;
131 font-family: PingFangSC-Regular;
132 font-size: 12px;
133 color: #333333;
134 letter-spacing: -0.23px;
135 line-height: 18px;
136 view{
137 display: inline-block;
138 font-size: 12px;
139 color: #333333;
140 letter-spacing: -0.23px;
141 line-height: 18px;
142 width: 90%;
143 image{
144 width: 30rpx;
145 height: 24rpx;
146 float: right;
147 }
148 }
149 }
150
151
152 </style>
src/pages/refundment/refundment.vue
Diff comments   View file @b9cc87a
File was created 1 <template>
2 <view class="container" v-bind:style="{height: curheight+'px'}">
3 <view class="refund" v-for="(items) in refund" :key="items.key">
4 <view class="detail">
5 <view class="detail_img"><image v-bind:src="items.img"></image></view>
6 <view class="detail2">
7 <view class="detail_name">{{items.name}}</view>
8 <view class="detail_standard">规格：{{items.standard}}</view>
9 <view class="detail_price">
10 <span>￥{{items.price}}</span>
11 <span>X{{items.number}}</span>
12 </view>
13 </view>
14 </view>
15 <view class="refund_price">
16 <span class="refund_price1">退款金额</span>
17 <span class="refund_price2">￥{{items.refundprice}}</span>
18 </view>
19 <view class="refund_reason">
20 <span >退款原因</span>
21 <!-- 跳转退款原因详细页 -->
22 <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image></view>
23 </view>
24 <view class="refund_explain">
25 <span>退款说明</span>
26 <input placeholder="选填" value="">
27 </view>
28 <view class="refund_img">
29 <span class="refund_img1">上传图片</span>
30 <span class="refund_img2">（最多3张）</span>
31 <view><image v-bind:src="items.refund_img"></image></view>
32 </view>
33 </view>
34 <view class="button">
35 <span>提交</span>
36 </view>
37 </view>
38 </template>
39
40 <script>
41
42 export default {
43 //获取浏览器高度
44 beforeMount(height){
45 var h = document.documentElement.clientHeight || document.body.clientHeight;
46 this.curheight = h-44;
47
48 },
49 methods:{
50 Jump(){
51 this.$router.push('/Refundways')
52 },
53 },
54 data(){
55 return{
56 curheight:0, //浏览器高度
57 refund:[
58 {
59 key:0,
60 img:'/static/img/detail/d1.png',
61 name:'商品名称',
62 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
63 price: 180,
64 number: 1,
65 refundprice: 110,
66 refund_img:'/static/img/detail/refund_img.png',
67 }
68 ],
69 }
70 }
71 }
72 </script>
73
74 <style lang="scss">
75
76 .container{
77 background: #F2F2F2;
78 padding-top: 10px;
79 box-sizing: border-box;
80 }
81 .refund{
82 width: 90%;
83 height: 353px;
84 margin: 0 auto;
85 background: #FFFFFF;
86 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
87 border-radius: 8px;
88 padding: 14px;
89 box-sizing: border-box;
90 }
91 .detail{
92 display: flex;
93 justify-content: space-between;
94 font-family: PingFangSC-Regular;
95 margin-bottom: 20px;
96 .detail2{
97 width: 64%;
98 view{
99 margin-bottom: 8px;
100 }
101 .detail_name{
102 font-size: 14px;
103 color:#333333;
104 }
105 .detail_standard{
106 font-size: 12px;
107 color: #999999;
108 }
109 .detail_price{
110 font-size: 14px;
111 color: #999999;
112 display: flex;
113 justify-content: space-between;
114 }
115 }
116 .detail_img{
117 width: 188rpx;
118 height: 188rpx;
119 border-radius: 40px;
120 image{
121 width: 100%;
122 height: 100%;
123 }
124 }
125 }
126 .refund_explain,.refund_img,.refund_price,.refund_reason{
127 margin-top: 16px;
128 margin-bottom: 16px;
129 }
130 .refund_price{
131 font-family: PingFangSC-Semibold;
132 font-size: 14px;
133 color: #333333;
134 letter-spacing: -0.26px;
135 line-height: 18px;
136 .refund_price1{
137 font-weight: bold;
138 margin-right: 16px;
139 }
140 .refund_price2{
141 color: #FF6B4A;
142 }
143 }
144 .refund_reason,.refund_explain span,.refund_img1{
145 font-family: PingFangSC-Regular;
146 font-size: 12px;
147 color: #333333;
148 letter-spacing: -0.23px;
149 line-height: 18px;
150 }
151 .refund_explain{
152 display: flex;
153 justify-content: space-between;
154 align-items: center;
155 }
156 .refund_explain input,.refund_img2{
157 width: 78%;
158 font-family: PingFangSC-Regular;
159 font-size: 12px;
160 color: #B8B8B8;
161 letter-spacing: -0.23px;
162 }
163 .refund_reason{
164 span{
165 margin-right: 20px;
166 }
167 view{
168 display: inline-block;
169 font-family: PingFangSC-Regular;
170 font-size: 12px;
171 color: #B8B8B8;
172 letter-spacing: -0.23px;
173 width: 76%;
174 image{
175 width: 30rpx;
176 height: 26rpx;
177 float: right;
178 }
179 }
180 }
181 .refund_img{
182 .refund_img1{
183 margin-right: 10px;
184 }
185 view{
186 margin-top: 20px;
187 width: 66rpx;
188 height: 60rpx;
189 image{
190 width: 100%;
191 height: 100%;
192 }
193 }
194 }
195 a{
196 text-decoration: none;
197 font-family: PingFangSC-Regular;
198 font-size: 12px;
199 color: #B8B8B8;
200 letter-spacing: -0.23px;
201 }
202 .button{
203 width: 100%;
204 height: 112rpx;
205 background: #FF6B4A ;
206 display: flex;
207 justify-content: center;
208 align-items: center;
209 position: fixed;
210 bottom: 0;
211 span{
212 color:#FFFFFF;
213 font-family: PingFangSC-Regular;
214 font-size: 16px;
215 letter-spacing: -0.3px;
216 }
217 }
218
219
220 </style>
src/static/img/detail/refund_img.png
Diff comments   View file @b9cc87a

1.17 KB
src/static/img/detail/xiala.png
Diff comments   View file @b9cc87a

438 Bytes