From 45527bbc76a2d43ec7c799dba7a1aa3f9afaf482 Mon Sep 17 00:00:00 2001
From: yr <1308291615@qq.com>
Date: Tue, 5 May 2020 19:49:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=80=E6=AC=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/refundment/Refundways.vue  | 152 ++++++++++++++++++++++++
 src/pages/refundment/refundment.vue  | 220 +++++++++++++++++++++++++++++++++++
 src/static/img/detail/refund_img.png | Bin 0 -> 1195 bytes
 src/static/img/detail/xiala.png      | Bin 0 -> 438 bytes
 4 files changed, 372 insertions(+)
 create mode 100644 src/pages/refundment/Refundways.vue
 create mode 100644 src/pages/refundment/refundment.vue
 create mode 100644 src/static/img/detail/refund_img.png
 create mode 100644 src/static/img/detail/xiala.png

diff --git a/src/pages/refundment/Refundways.vue b/src/pages/refundment/Refundways.vue
new file mode 100644
index 0000000..25f82f2
--- /dev/null
+++ b/src/pages/refundment/Refundways.vue
@@ -0,0 +1,152 @@
+<template>
+    <view class="container" v-bind:style="{height: curheight+'px'}">
+        <view class="refund" v-for="(items) in refund" :key="items.key">
+            <view class="detail">
+                <view class="detail_img"><image v-bind:src="items.img"></image></view>
+                <view class="detail2">
+                    <view class="detail_name">{{items.name}}</view>
+                    <view class="detail_standard">规格：{{items.standard}}</view>
+                    <view class="detail_price">
+                        <span>￥{{items.price}}</span>
+                        <span>X{{items.number}}</span>
+                    </view>
+                </view>
+            </view>
+            <view class="refund_price">
+                <span class="refund_price1">退款金额</span>
+                <span class="refund_price2">￥{{items.refundprice}}</span>
+            </view>
+            <view class="refund_reason">
+                <view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
+            </view>
+            <view class="refund_reason">
+                <view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
+            </view>
+            <view class="refund_reason">
+                <view>换货<image src="/static/img/detail/xiala.png"></image></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    //获取浏览器高度
+    beforeMount(height){
+        var h = document.documentElement.clientHeight || document.body.clientHeight;
+        this.curheight = h-44; 
+        
+    },
+    data(){
+        return{
+            curheight:0,   //浏览器高度
+            refund:[
+                {
+                    key:0,
+                    img:'/static/img/detail/d1.png',
+                    name:'商品名称',
+                    standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
+                    price: 180,
+                    number: 1,
+                    refundprice: 110,
+                    refund_img:'/static/img/detail/refund_img.png',
+                }
+            ],
+        }   
+    }
+}
+</script>
+
+<style lang="scss">
+
+.container{
+    background: #F2F2F2;
+    padding-top: 10px;
+    box-sizing: border-box;
+}
+.refund{
+    width: 90%;
+    height: 300px;
+    margin: 0 auto;
+    background: #FFFFFF;
+    box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
+    border-radius: 8px;
+    padding: 14px;
+    box-sizing: border-box;
+}
+.detail{
+    display: flex;
+    justify-content: space-between;
+    font-family: PingFangSC-Regular;
+    margin-bottom: 20px;
+    .detail2{
+        width: 64%;
+        view{
+            margin-bottom: 8px;
+        }
+        .detail_name{
+            font-size: 14px;
+            color:#333333;
+        }
+        .detail_standard{
+            font-size: 12px;
+            color: #999999;
+        }
+        .detail_price{
+            font-size: 14px;
+            color: #999999;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    .detail_img{
+        width: 188rpx;
+        height: 188rpx;
+        border-radius: 40px;
+        image{
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.refund_price{
+    font-family: PingFangSC-Semibold;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: -0.26px;
+    line-height: 18px;
+    margin-bottom: 26px;
+    .refund_price1{
+        font-weight: bold;
+        margin-right: 16px;
+    }
+    .refund_price2{
+        color: #FF6B4A;
+    }
+}
+.refund_reason{
+    margin-top: 16px;
+    margin-bottom: 16px;
+    font-family: PingFangSC-Regular;
+    font-size: 12px;
+    color: #333333;
+    letter-spacing: -0.23px;
+    line-height: 18px;
+    view{
+        display: inline-block;
+        font-size: 12px;
+        color: #333333;
+        letter-spacing: -0.23px;
+        line-height: 18px;
+        width: 90%;
+        image{
+            width: 30rpx;
+            height: 24rpx;
+            float: right;
+        }
+    }
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/pages/refundment/refundment.vue b/src/pages/refundment/refundment.vue
new file mode 100644
index 0000000..5845eb1
--- /dev/null
+++ b/src/pages/refundment/refundment.vue
@@ -0,0 +1,220 @@
+<template>
+    <view class="container" v-bind:style="{height: curheight+'px'}">
+        <view class="refund" v-for="(items) in refund" :key="items.key">
+            <view class="detail">
+                <view class="detail_img"><image v-bind:src="items.img"></image></view>
+                <view class="detail2">
+                    <view class="detail_name">{{items.name}}</view>
+                    <view class="detail_standard">规格：{{items.standard}}</view>
+                    <view class="detail_price">
+                        <span>￥{{items.price}}</span>
+                        <span>X{{items.number}}</span>
+                    </view>
+                </view>
+            </view>
+            <view class="refund_price">
+                <span class="refund_price1">退款金额</span>
+                <span class="refund_price2">￥{{items.refundprice}}</span>
+            </view>
+            <view class="refund_reason">
+                <span >退款原因</span>
+                <!-- 跳转退款原因详细页 -->
+                <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image></view>
+            </view>
+            <view class="refund_explain">
+                <span>退款说明</span>
+                <input placeholder="选填" value="">
+            </view>
+            <view class="refund_img">
+                <span class="refund_img1">上传图片</span>
+                <span class="refund_img2">（最多3张）</span>
+                <view><image v-bind:src="items.refund_img"></image></view>
+            </view>
+        </view>
+        <view class="button">
+            <span>提交</span>
+        </view>
+    </view>
+</template>
+
+<script>
+ 
+export default {
+    //获取浏览器高度
+    beforeMount(height){
+        var h = document.documentElement.clientHeight || document.body.clientHeight;
+        this.curheight = h-44; 
+        
+    },
+    methods:{
+       Jump(){
+        this.$router.push('/Refundways')
+        },    
+    },
+    data(){
+        return{
+            curheight:0,   //浏览器高度
+            refund:[
+                {
+                    key:0,
+                    img:'/static/img/detail/d1.png',
+                    name:'商品名称',
+                    standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
+                    price: 180,
+                    number: 1,
+                    refundprice: 110,
+                    refund_img:'/static/img/detail/refund_img.png',
+                }
+            ],
+        }   
+    }
+}
+</script>
+
+<style lang="scss">
+
+.container{
+    background: #F2F2F2;
+    padding-top: 10px;
+    box-sizing: border-box;
+}
+.refund{
+    width: 90%;
+    height: 353px;
+    margin: 0 auto;
+    background: #FFFFFF;
+    box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
+    border-radius: 8px;
+    padding: 14px;
+    box-sizing: border-box;
+}
+.detail{
+    display: flex;
+    justify-content: space-between;
+    font-family: PingFangSC-Regular;
+    margin-bottom: 20px;
+    .detail2{
+        width: 64%;
+        view{
+            margin-bottom: 8px;
+        }
+        .detail_name{
+            font-size: 14px;
+            color:#333333;
+        }
+        .detail_standard{
+            font-size: 12px;
+            color: #999999;
+        }
+        .detail_price{
+            font-size: 14px;
+            color: #999999;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    .detail_img{
+        width: 188rpx;
+        height: 188rpx;
+        border-radius: 40px;
+        image{
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+.refund_explain,.refund_img,.refund_price,.refund_reason{
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+.refund_price{
+    font-family: PingFangSC-Semibold;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: -0.26px;
+    line-height: 18px;
+    .refund_price1{
+        font-weight: bold;
+        margin-right: 16px;
+    }
+    .refund_price2{
+        color: #FF6B4A;
+    }
+}
+.refund_reason,.refund_explain span,.refund_img1{
+    font-family: PingFangSC-Regular;
+    font-size: 12px;
+    color: #333333;
+    letter-spacing: -0.23px;
+    line-height: 18px;
+}
+.refund_explain{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.refund_explain input,.refund_img2{
+    width: 78%;
+    font-family: PingFangSC-Regular;
+    font-size: 12px;
+    color: #B8B8B8;
+    letter-spacing: -0.23px;
+}
+.refund_reason{
+    span{
+        margin-right: 20px;
+    }
+    view{
+        display: inline-block;
+        font-family: PingFangSC-Regular;
+        font-size: 12px;
+        color: #B8B8B8;
+        letter-spacing: -0.23px;
+        width: 76%;
+        image{
+            width: 30rpx;
+            height: 26rpx;
+            float: right;
+        }
+    }
+}
+.refund_img{
+    .refund_img1{
+        margin-right: 10px;
+    }
+    view{
+        margin-top: 20px;
+        width: 66rpx;
+        height: 60rpx;
+        image{
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+a{
+    text-decoration: none;
+    font-family: PingFangSC-Regular;
+    font-size: 12px;
+    color: #B8B8B8;
+    letter-spacing: -0.23px;
+}
+.button{
+    width: 100%;
+    height: 112rpx;
+    background: #FF6B4A ;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    span{
+        color:#FFFFFF;
+        font-family: PingFangSC-Regular;
+        font-size: 16px;
+        letter-spacing: -0.3px;
+    }
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/static/img/detail/refund_img.png b/src/static/img/detail/refund_img.png
new file mode 100644
index 0000000000000000000000000000000000000000..32ff60fbf96727e68d6ed4289b2dff0860987902
GIT binary patch
literal 1195
zcmV;c1XTNpP)<h;3K|Lk000e1NJLTq001rk001Wl0ssI2|J3cM000DXNkl<ZSPAWz
zYf~ae6o%z4cL*pfH`gL-YDLj3`Tu{wid2MB5#90zi3o_uMG-I$c4c;kx$MN?eoB9s
zI&`1Q+vl8qrw7Z+%gfS_8q?{tTrMwJEL*vp)oPs!JO6ubdEq}N)2ZI(?RvrV4D|Fh
z=PeeCG>=2FvP2PH1!?J<pbm*a=YBROlgZ5Tt;24&r&1}NIB4J9?d|Q&9Lk2xX3OPr
zsbo^jS>~XOMx)BfNxfcoI2<mQ%PQNJ%!w({>2mGl^8yM{z#)3YVzuTrH$|`T6apR<
z1w#Ai=%{gfo5^I>*Vk=UkbKLqsrWJ_Y^5;BU;@f)%4$WHmLv-WlwPmbY_-zq^v~I>
z*o~z30|W(>tE(%(X42{R!(q4C^me6ya@Xku0s*Jfsi*xP=P45@pOs0g?g}X5@tAz5
z^=LZvq#0O5#a0aRjgwF)q-UsrqE^BeXX?J&_4|Cw%ggFsQ=5nx!gC027>&koIAqdc
zw<lAncr3;l*0eH$0*=ee%adxAYyo0zZEfSzCp|}U@8EzAs;8%ba5<e6-DbBB27^+m
zbbWpO>+Y^*4;Voa90N_IQz=gP`T2Rk?@#{2Nb=ZnS#03w_&6L2ZGQe7i9|#$!PjoL
zOXc#}*RQ{9Y^W2g3kA!5zt0mhGU4%f8jS`loJb@L`UZU%0g{Zz<J((X7)r_r;cz$<
z46;KxbV)XP9g<biD`>-%qNycIO@aP6u2f)Z_*9NVD9>PNogJ~Nn-$EwUa#Np|9yY|
zr*N3g1xhRylXj^I<@x!!+wHD@{0JIjO|`jER-hx2?DKlz8>hpuy}eDZs9i`ir0}ns
zn~4d;l8Ic<%?e6v3mVAh^TeRb7{(i=I<;EO?eUOKc?^@X5ftHqk~1WCG^UW%usFJp
zkB?MGy(F0%2;YYyj6uL4J;Zx@dUCtnFdiXEm83vFp%aZp4dNLrnSug>+h+66dcD<d
zg9CSfpbGE}?-Y?U@^Nu-0YsnAXAsX|>HARV+0$yZ)oRfKi4Py(22Mw>--pxTkJGcW
zm1vX<fs*6%TcIGYra@r!k`WY6FANJgvR9gSb#+zhTmW$qgv+mMwN9tg9}GNh_wLRP
zOsI}waz+~pC5IFDi^YeB2da?GX32!q7PuCTNiE=F%7;FyjJGwcz^VZS*W|x+aPTx5
z!7C&~FXseifWYLwjny=uP?y8QLpEOc@+BAy63p1eqE<DakOQvS(MW_F|DwW}@uLkT
znMjy1UaXFy%+!JgWGps@<jvT*0tyFm@Onp)j2AAzgnDhRfWozCFdRZw3rB!MQu6xw
zdmju0G>?J;N-Q4d)l#Wcuvu)G@b=K_{c&&rTk72d72nJlaPcV?i_haRchc3B6|3x>
z{N_|~gW;pI)ojiPqEO)Cp-B%4C<KGwxYF{O$VbDQW2+6R2yg7QOa_A1tPUpgP=psQ
zL9-$L4pBS)movnsRiP_}fvGkW1B3TlQnc;+g)!s#e<)g6`Wq?7B~<bcs<r?C002ov
JPDHLkV1iu0OZ5N%

literal 0
HcmV?d00001

diff --git a/src/static/img/detail/xiala.png b/src/static/img/detail/xiala.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d6cd5b74060789c362301d05cc3790674301402
GIT binary patch
literal 438
zcmV;n0ZIOeP)<h;3K|Lk000e1NJLTq000&M000vR0ssI28yjlh0004fNkl<ZI1$Z~
z$%?{I5JfxMI6`nBM#KRe^Z$RN#)$JmQKRBK9eMJS4k0ewbQYoVUfol-t}2hm<LA34
z^qu^r{vU{6xrhiwQ51O+P{;)7e=ow(Y&Ki3*SFg(Kq;?Ir_*>m=FN$NST2|Cc6+f{
ze54!>hi<n!8ja59Gqc|a{N(d_sGUv+RsiLAJesD7<!m+^jYgeCs4|(1VHnrz6^d=!
z_xoMimIb$#Wlg8kQmIrfmm`sgv&gFog)~iTwOZI?&T6&tc)?@8-=9n-g+ifHsl;M2
z2LC|_imvO;W^=pU_Ika|W+T189S(<BprKl=#^Z6J_agWXhr@)@Xf$@a9ht#`f*tgO
z!GJ6Di9|x`ktp&P=0iTn5P%@FTCGOF%ul6Kgq2Jt-FhU>UrXvK$fZ~;LMN2{evg-2
zE?2MDJ@bXc--WolTrT)0lyo}HYO1P&c2D|@po0|V^EqO7ejZAY3(+dV^6c-Xd`7st
geQTfHeER|ppD4@Sr2l8b-2eap07*qoM6N<$f*B6bssI20

literal 0
HcmV?d00001

-- 
2.0.0