You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

272 lines
6.0 KiB

<template>
<view>
<view class="order_popup_commodity">
<view class="good_info" v-for="(item,index) in 1 " :key="index">
<view class="good_info_left ">
<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
<view class="left_info">
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view>
<view class="left_info_bottom">
<view class="info_lable">
<text>Multicolor;41</text>
<image src="/static/img/bottom.png" mode=""></image>
</view>
<text>x1</text>
</view>
<view class="info_price">
<text>US$314.00</text>
</view>
</view>
</view>
</view>
</view>
<view class="goods">
<view class="goods_title">Refunded goods</view>
<view class="goods_content">
<view class="goods_item">
<image src="../../static/img/refund.png" mode=""></image>
<text>Refund only</text>
<view class="goods_item_text">I didn't receive the goods</view>
</view>
<view class="goods_item">
<image src="../../static/img/refund1.png" mode=""></image>
<text>Return&refund</text>
<view class="goods_item_text">I have received the goods</view>
</view>
</view>
</view>
<view class="refund_price">
<text>Refund amountï¼</text>
<text class="refund_price_text">US$6.5</text>
</view>
<view class="refund_reason">
<view class="reason_item">
<view class="reason_item_left">
<text>Refund reason </text>
<text class="reason_item_left_text">Please select 1 refund reason</text>
</view>
<image src="/static/img/right1.png" mode=""></image>
</view>
<view class="reason_item1">
<view class="">Notes on application</view>
<textarea placeholder="Please supplement the refund information"></textarea>
<view class="reason_upload">
<view class="reason_upload_item">
<image src="/static/img/camera.png" class="upload_item_camera" mode=""></image>
<view>Upload pictures</view>
</view>
<view class="reason_upload_item reason_upload_item1">
<image src="/static/img/logo.png" class="upload_item_image" mode=""></image>
</view>
</view>
<view class="reason_upload_tips">Up to last 5 pictures</view>
<navigator url="/pages/order/refundDetails">
<button class="refund_submit">SUBMIT</button>
</navigator>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
orderDate:{}
}
},
methods:{
},
onLoad(e) {
let that = this;
let s = 0;
let time = setInterval(() => {
uni.getNetworkType({
success: (res) => {
console.log(res.networkType, s);
if (res.networkType == 'none') {
uni.showToast({
icon: 'none',
title: 'Please connect to the network',
duration: 3000,
})
} else if (res.networkType !== 'none') {
that.typee = 2;
clearInterval(time);
}
}
})
s++;
}, 1000);
this.orderDate=JSON.parse(e.data)
console.info(this.orderDate)
}
}
</script>
<style>
page{
border-top: 14.67rpx #F6F5FA solid;
}
</style>
<style lang="scss" scoped>
@import "@/common/scss/order.scss";
.order_popup_commodity{
border-bottom: 14.67rpx solid #F6F5FA;
}
.goods{
padding: 34.67rpx 27.33rpx;
border-bottom: 14.67rpx solid #F6F5FA;
.goods_title{
font-size: 28.67rpx;
font-weight: bold;
margin-bottom: 34.67rpx;
}
.goods_content{
display: flex;
justify-content: space-between;
.goods_item{
width: 336.67rpx;
height: 169.33rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 32rpx;
border: 1px solid #D3D3D3;
border-radius: 16rpx;
image{
width: 40rpx;
height: 40rpx;
margin-bottom: 16.67rpx;
}
.goods_item_text{
margin-top: 8rpx;
font-size: 20rpx;
color: #666666;
font-weight: bold;
}
}
}
}
.refund_price{
padding: 38rpx 28rpx;
font-size: 28rpx;
border-bottom: 14.67rpx solid #F6F5FA;
.refund_price_text{
font-size: 32rpx;
}
}
.refund_reason{
font-size: 28rpx;
padding-left: 28rpx;
padding-right: 21.33rpx;
.reason_item{
padding:42.67rpx 0 ;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E2E2E2;
.reason_item_left{
display: flex;
align-items: center;
.reason_item_left_text{
color: #D2D2D2;
font-weight: 400;
display: inline-block;
margin-left: 45.33rpx;
}
}
image{
width: 24rpx;
height: 24rpx;
}
}
.reason_item1{
padding: 42.67rpx 0;
textarea{
font-size: 28rpx;
font-weight: 400;
margin-top: 40rpx;
width: 100%;
height: 113.33rpx;
}
.reason_upload{
display: flex;
flex-wrap: wrap;
margin-bottom: 34.67rpx;
.reason_upload_item{
border: 1px dashed #D2D2D2;
border-radius: 15rpx;
width: 156rpx;
height: 156rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 12rpx;
color: #BFBCBC;
margin-right: 23.33rpx;
&:nth-child(3n+3){
margin-right: 0;
}
.upload_item_camera{
width: 72rpx;
height: 54.67rpx;
margin-bottom: 14rpx;
}
.upload_item_image{
width: 100%;
height: 100%;
border-radius: 15rpx;
}
}
.reason_upload_item1{
position: relative;
&::after{
content: "";
width: 30.67rpx;
height: 30.67rpx;
position: absolute;
right: -12rpx;
top: -12rpx;
z-index: 99;
background-image: url("@/static/img/close3.png");
background-size: 100% 100%;
}
}
}
.reason_upload_tips{
font-size: 20rpx;
color: #666666;
}
.refund_submit{
margin-top: 118rpx;
background-color: black;
color: white;
font-size: 26.67rpx;
font-weight: bold;
width: 100%;
height: 73.33rpx;
line-height: 73.33rpx;
}
}
}
</style>