Commit b2df2880714fd8ac026b784a5a498ded8b19aa05

Authored by 尹聃
1 parent b9cc87aac7
Exists in master

路由

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