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

喻鹏
2 parents 4de4be3443 45527bbc76
Showing 4 changed files Show diff stats
src/pages/refundment/Refundways.vue
src/pages/refundment/refundment.vue
src/static/img/detail/refund_img.png
src/static/img/detail/xiala.png
@@ -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
@@ -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
...	...	@@ -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
...	...
...	...	@@ -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
...	...