刘文博 / gulu-vue

Download as
Browse Code »

Commit 697c1032cd8689d4627c3ec26fec5ed8c558930e

Authored by 范牧
1 parent 0444517bf0
Exists in master

设置git区分文件名大小写

Showing 3 changed files with 304 additions and 151 deletions   Show diff stats
src/pages/Predelivery/Predelivery.vue
View file @0444517
1 <template> File was deleted
2 <view class="container">
3 <view v-for="(items) in form" :key="items.key" class="order">
4 <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
5 <view class="order_detail">
6 <view class="detail_img"><image v-bind:src="items.img"></image></view>
7 <view class="detail_zi">
8 <view class="zi_name">{{items.name}}</view>
9 <view class="zi_standard">规格：{{items.standard}}</view>
10 <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
11 </view>
12 </view>
13 <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
14 <view class="clear"></view>
15 <view class="button">
16 <view class="button1">申请退款</view>
17 <view class="button2">提醒发货</view>
18 </view>
19 </view>
20 </view>
21 </template>
22
23 <script>
24 export default {
25 data(){
26 return{
27 form:[
28 {
29 key: 0,
30 name:'商品名称',
31 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
32 img: '/static/img/detail/delivery.png',
33 preprice: 180,
34 number:1,
35 orderNum: 2034867958596334,
36 nowprice: 110,
37 }
38 ]
39
40 }
41 }
42 }
43 </script>
44
45 <style lang="scss">
46 .container{
47 width: 100%;
48 height: 100%;
49 background: #F2F2F2;
50 height: 700px;
51 //要获取屏幕大小
52 }
53 .order{
54 background: #FFFFFF;
55 width: 90%;
56 height: 450rpx;
57 margin: 0 auto;
58 padding: 40rpx;
59 box-sizing: border-box;
60 border-radius: 5px;
61 }
62 .order_number{
63 color: #999999;
64 font-size: 12px;
65 font-family: "PingFangSC-Regular";
66 span{
67 font-family: PingFangSC-Regular;
68 font-size: 14px;
69 color: #FF6B4A;
70 letter-spacing: -0.26px;
71 line-height: 18px;
72 float: right;
73 }
74 }
75 .order_detail{
76 display: flex;
77 justify-content: space-around;
78 margin-top: 12px;
79 }
80 .detail_img image{
81 width: 188rpx;
82 height: 188rpx;
83 }
84 .detail_zi{
85 font-family: PingFangSC-Regular;
86 width: 55%;
87 height: 100%;
88 view{
89 margin-bottom: 20rpx;
90 }
91 .zi_name{
92 font-size: 14px;
93 color: #333333;
94 letter-spacing: -0.26px;
95 line-height: 18px;
96 }
97 .zi_standard{
98 font-size: 12px;
99 color: #999999 ;
100 }
101 .zi_preprice{
102 font-size: 14px;
103 color: #FF6B4A;
104 span{
105 float: right;
106 font-size: 12px;
107 color: #999999;
108 }
109 }
110 }
111 .now_price{
112 font-size: 14px;
113 color: #333333;
114 float: right;
115 span{
116 font-size: 14px;
117 color: #FF6B4A ;
118 }
119 }
120 .clear{
121 clear: both;
122 }
123 .button{
124 display: flex;
125 justify-content: flex-end;
126 margin-top: 14px;
127 view{
128 width: 156rpx;
129 height: 48rpx;
130 border-radius: 12px;
131 font-size: 12px;
132 text-align: center;
133 line-height: 20px;
134 }
135 .button1{
136 border: 1px solid #FF6B4A;
137 font-family: PingFangSC-Regular;
138 color: #FF6B4A;
139 letter-spacing: -0.23px;
140 margin-right: 30rpx;
141 }
142 .button2{
143 border: 1px solid #FF6B4A;
144 background: #FF6B4A;
145 font-family: PingFangSC-Regular;
146 color: #FFFFFF;
147 letter-spacing: -0.23px;
148
149 }
150 }
151 </style>
src/pages/predelivery/predelivery.vue
Diff comments   View file @697c103
File was created 1 <template>
2 <view class="container">
3 <view v-for="(items) in form" :key="items.key" class="order">
4 <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
5 <view class="order_detail">
6 <view class="detail_img"><image v-bind:src="items.img"></image></view>
7 <view class="detail_zi">
8 <view class="zi_name">{{items.name}}</view>
9 <view class="zi_standard">规格：{{items.standard}}</view>
10 <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
11 </view>
12 </view>
13 <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
14 <view class="clear"></view>
15 <view class="button">
16 <view class="button1">申请退款</view>
17 <view class="button2">提醒发货</view>
18 </view>
19 </view>
20 </view>
21 </template>
22
23 <script>
24 export default {
25 data(){
26 return{
27 form:[
28 {
29 key: 0,
30 name:'商品名称',
31 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
32 img: '/static/img/detail/delivery.png',
33 preprice: 180,
34 number:1,
35 orderNum: 2034867958596334,
36 nowprice: 110,
37 }
38 ]
39
40 }
41 }
42 }
43 </script>
44
45 <style lang="scss">
46 .container{
47 width: 100%;
48 height: 100%;
49 background: #F2F2F2;
50 height: 700px;
51 //要获取屏幕大小
52 }
53
54 .order{
55 background: #FFFFFF;
56 width: 90%;
57 height: 450rpx;
58 margin: 0 auto;
59 padding: 40rpx;
60 box-sizing: border-box;
61 border-radius: 5px;
62 }
63 .order_number{
64 color: #999999;
65 font-size: 12px;
66 font-family: "PingFangSC-Regular";
67 span{
68 font-family: PingFangSC-Regular;
69 font-size: 14px;
70 color: #FF6B4A;
71 letter-spacing: -0.26px;
72 line-height: 18px;
73 float: right;
74 }
75 }
76 .order_detail{
77 display: flex;
78 justify-content: space-around;
79 margin-top: 12px;
80 }
81 .detail_img image{
82 width: 188rpx;
83 height: 188rpx;
84 }
85 .detail_zi{
86 font-family: PingFangSC-Regular;
87 width: 55%;
88 height: 100%;
89 view{
90 margin-bottom: 20rpx;
91 }
92 .zi_name{
93 font-size: 14px;
94 color: #333333;
95 letter-spacing: -0.26px;
96 line-height: 18px;
97 }
98 .zi_standard{
99 font-size: 12px;
100 color: #999999 ;
101 }
102 .zi_preprice{
103 font-size: 14px;
104 color: #FF6B4A;
105 span{
106 float: right;
107 font-size: 12px;
108 color: #999999;
109 }
110 }
111 }
112 .now_price{
113 font-size: 14px;
114 color: #333333;
115 float: right;
116 span{
117 font-size: 14px;
118 color: #FF6B4A ;
119 }
120 }
121 .clear{
122 clear: both;
123 }
124 .button{
125 display: flex;
126 justify-content: flex-end;
127 margin-top: 14px;
128 view{
129 width: 156rpx;
130 height: 48rpx;
131 border-radius: 12px;
132 font-size: 12px;
133 text-align: center;
134 line-height: 20px;
135 }
136 .button1{
137 border: 1px solid #FF6B4A;
138 font-family: PingFangSC-Regular;
139 color: #FF6B4A;
140 letter-spacing: -0.23px;
141 margin-right: 30rpx;
142 }
143 .button2{
144 border: 1px solid #FF6B4A;
145 background: #FF6B4A;
146 font-family: PingFangSC-Regular;
147 color: #FFFFFF;
148 letter-spacing: -0.23px;
149
150 }
151 }
152 </style>
src/pages/refundment/refundWays.vue
Diff comments   View file @697c103
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>