Commit 45527bbc76a2d43ec7c799dba7a1aa3f9afaf482
1 parent
4506eedf6d
Exists in
master
退款
Showing
4 changed files
with
372 additions
and
0 deletions
Show diff stats
src/pages/refundment/Refundways.vue
| ... | ... | @@ -0,0 +1,152 @@ |
| 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> | |
| 0 | 153 | \ No newline at end of file | ... | ... |
src/pages/refundment/refundment.vue
| ... | ... | @@ -0,0 +1,220 @@ |
| 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> | |
| 0 | 221 | \ No newline at end of file | ... | ... |
src/static/img/detail/refund_img.png
1.17 KB
src/static/img/detail/xiala.png
438 Bytes