shuxiaoquan
1 year ago
parent
db658b20e5
commit
2950b397ef
@ -0,0 +1,232 @@ |
|||||||
|
<template> |
||||||
|
<view class="invoice"> |
||||||
|
<view class="invoice-hd"> |
||||||
|
<view class="a"> |
||||||
|
<view class="l">开票状态</view> |
||||||
|
<view class="r">开票中</view> |
||||||
|
</view> |
||||||
|
<view class="a"> |
||||||
|
<view class="l">预计开票时间</view> |
||||||
|
<view class="r">2024年1月15日</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-goods"> |
||||||
|
<view class="a"> |
||||||
|
<image src="/static/home/phone.jpg"></image> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="l">产品名称iPhone13</view> |
||||||
|
<view class="r">订单编号：23122-33890099<text>复制</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-info"> |
||||||
|
<view class="a"> |
||||||
|
发票明细<text @click="toDetail()">修改发票信息</text> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">发票类型：</view> |
||||||
|
<view class="r">增值税电子普通发票</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">抬头类型：</view> |
||||||
|
<view class="r">个人</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">抬头名称：</view> |
||||||
|
<view class="r">个人</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">申请时间：</view> |
||||||
|
<view class="r">2024年1月4日</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-fd"> |
||||||
|
<button open-type="contact">联系商家</button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toDetail(i){ |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/invoice/edit" |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.invoice{ |
||||||
|
&-hd{ |
||||||
|
padding: 0 20rpx 0 40rpx; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
.a{ |
||||||
|
padding: 20rpx 0; |
||||||
|
display: block; |
||||||
|
border-top: 1px solid #F3F3F3; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
&:first-child{ |
||||||
|
border-top-cplor: #fff; |
||||||
|
} |
||||||
|
.l{ |
||||||
|
width: 230rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #656565; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-goods{ |
||||||
|
padding: 0 20rpx 0 40rpx; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
margin-top: 20rpx; |
||||||
|
padding: 30rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.a{ |
||||||
|
width: 145rpx; |
||||||
|
height: 135rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
.l{ |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
font-size: 30rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
text{ |
||||||
|
display: block; |
||||||
|
width: 104rpx; |
||||||
|
line-height: 60rpx; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 4rpx; |
||||||
|
text-align: center; |
||||||
|
border: 1px solid #CACACA; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-info{ |
||||||
|
margin-top: 20rpx; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 20rpx 30rpx 20rpx 60rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
border-bottom: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
text{ |
||||||
|
color: #006AFF; |
||||||
|
padding-right: 40rpx; |
||||||
|
position: relative; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #006AFF; |
||||||
|
border-left: 1px solid #006AFF; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
.item{ |
||||||
|
padding: 30rpx 60rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
border-top: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
&:first-child{ |
||||||
|
border-top-color: #fff; |
||||||
|
} |
||||||
|
.l{ |
||||||
|
width: 200rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #656565; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
flex: 1; |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
&-fd{ |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
margin-top: 40rpx; |
||||||
|
button{ |
||||||
|
background-color: transparent; |
||||||
|
border: 0; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #006AFF; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,406 @@ |
|||||||
|
<template> |
||||||
|
<view class="invoice"> |
||||||
|
<view class="invoice-goods"> |
||||||
|
<view class="a"> |
||||||
|
<image src="/static/home/phone.jpg"></image> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="l">产品名称iPhone13</view> |
||||||
|
<view class="r">订单编号：23122-33890099<text>复制</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-info"> |
||||||
|
<view class="b"> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">发票类型：</view> |
||||||
|
<view class="r"> |
||||||
|
<picker :value="index" :range="array" @change="bindPickerChange"> |
||||||
|
<view class="lx">{{index==-1?'请选择':array[index]}}</view> |
||||||
|
</picker> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">发票类型：</view> |
||||||
|
<view class="r"> |
||||||
|
<view class="li" :class="tabIndex == 1?'li-on':''" @click="tabItem(1)">个人</view> |
||||||
|
<view class="li" :class="tabIndex == 2?'li-on':''" @click="tabItem(2)">单位</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item" v-if="tabIndex == 1"> |
||||||
|
<view class="l">发票抬头：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" placeholder="请输入个人姓名" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item" v-if="tabIndex == 2"> |
||||||
|
<view class="l">发票抬头：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" v-model="array1[index1]" placeholder="请输入单位名称" /> |
||||||
|
<picker :value="index1" :range="array1" @change="bindPickerChange1"> |
||||||
|
<view class="tt">更改抬头</view> |
||||||
|
</picker> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item" v-if="tabIndex == 2"> |
||||||
|
<view class="l">单位税号：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" placeholder="请输入纳税人识别号" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-company" v-if="tabIndex == 2"> |
||||||
|
<view class="a">选填内容（开户银行、银行账号等） |
||||||
|
<text :class="toggleIndex?'on':''" @click="toggleItem()">{{toggleIndex?"收起":"展开"}}</text> |
||||||
|
</view> |
||||||
|
<view class="b" v-if="toggleIndex"> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">开户银行：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" placeholder="请输入开户银行名称" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">银行账号：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" placeholder="请输入银行账号" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">单位地址：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" placeholder="请输入单位地址" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">单位电话：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="number" placeholder="请输入单位电话" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-fd"> |
||||||
|
申请发票 |
||||||
|
</view> |
||||||
|
<u-modal v-model="show" :content="content" :show-cancel-button="true" :show-title="false" confirm-color="#F55349"></u-modal> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
content: "确认您的发票信息无误后再提交", |
||||||
|
show: true, |
||||||
|
toggleIndex: true, |
||||||
|
index: -1, |
||||||
|
array: ['增值税电子普通发票','普通发票'], |
||||||
|
index1: -1, |
||||||
|
array1: ['南京苏农科技有限公司','南京途牛科技有限公司'], |
||||||
|
tabIndex: 2 |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
onClose() {}, |
||||||
|
tabItem(i){ |
||||||
|
this.tabIndex = i; |
||||||
|
}, |
||||||
|
toggleItem(i){ |
||||||
|
this.toggleIndex = !this.toggleIndex; |
||||||
|
}, |
||||||
|
toDetail(i){ |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/invoice/edit" |
||||||
|
}) |
||||||
|
}, |
||||||
|
bindPickerChange(e){ |
||||||
|
this.index = e.detail.value |
||||||
|
}, |
||||||
|
bindPickerChange1(e){ |
||||||
|
this.index1 = e.detail.value |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.invoice{ |
||||||
|
&-goods{ |
||||||
|
padding: 0 20rpx 0 40rpx; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
padding: 30rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.a{ |
||||||
|
width: 145rpx; |
||||||
|
height: 135rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
.l{ |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
font-size: 30rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 20rpx; |
||||||
|
text{ |
||||||
|
display: block; |
||||||
|
width: 104rpx; |
||||||
|
line-height: 60rpx; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 4rpx; |
||||||
|
text-align: center; |
||||||
|
border: 1px solid #CACACA; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-info{ |
||||||
|
margin-top: 20rpx; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 20rpx 30rpx 20rpx 60rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
border-bottom: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
text{ |
||||||
|
color: #006AFF; |
||||||
|
padding-right: 40rpx; |
||||||
|
position: relative; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #006AFF; |
||||||
|
border-left: 1px solid #006AFF; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
padding: 0 30rpx 0 45rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
.item{ |
||||||
|
padding: 30rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
border-top: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
&:first-child{ |
||||||
|
border-top-color: #fff; |
||||||
|
} |
||||||
|
.l{ |
||||||
|
width: 180rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #656565; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
.li{ |
||||||
|
width: 150rpx; |
||||||
|
height: 78rpx; |
||||||
|
background: #F3F3F3; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
line-height: 78rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
margin-right: 12rpx; |
||||||
|
&-on{ |
||||||
|
background: #FDF4F4; |
||||||
|
background: url(/static/invoice/select-active.png) center top no-repeat; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
} |
||||||
|
input { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
picker{ |
||||||
|
flex: 1; |
||||||
|
.tt{ |
||||||
|
width: 180rpx; |
||||||
|
position: relative; |
||||||
|
color: #4894FF; |
||||||
|
text-align: right; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #4894FF; |
||||||
|
border-left: 1px solid #4894FF; |
||||||
|
position: absolute; |
||||||
|
right: -50rpx; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
.lx{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #B8B8B8; |
||||||
|
border-left: 1px solid #B8B8B8; |
||||||
|
position: absolute; |
||||||
|
right: 20rpx; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
&-fd{ |
||||||
|
width: 664rpx; |
||||||
|
height: 104rpx; |
||||||
|
background: #F55349; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 60rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #FFFFFF; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
&-company{ |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
padding: 35rpx 50rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
color: #262626; |
||||||
|
text{ |
||||||
|
width: 70rpx; |
||||||
|
color: #888888; |
||||||
|
margin-right: 30rpx; |
||||||
|
position: relative; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #888888; |
||||||
|
border-left: 1px solid #888888; |
||||||
|
position: absolute; |
||||||
|
right: -30rpx; |
||||||
|
top: 10rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(225deg); |
||||||
|
} |
||||||
|
&.on{ |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #888888; |
||||||
|
border-left: 1px solid #888888; |
||||||
|
position: absolute; |
||||||
|
right: -30rpx; |
||||||
|
top: 20rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(45deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
padding: 0 30rpx 0 45rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
.item{ |
||||||
|
padding: 30rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
border-top: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
&:first-child{ |
||||||
|
border-top-color: #fff; |
||||||
|
} |
||||||
|
.l{ |
||||||
|
width: 180rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #656565; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
input { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
<template> |
||||||
|
<view class="invoice"> |
||||||
|
<view class="invoice-bd"> |
||||||
|
<view class="item" :class="tabIndex == i?'item-on':''" v-for="i in 5" :key="i" @click="toDetail(i)"> |
||||||
|
<view class="hd"> |
||||||
|
<view class="l"> |
||||||
|
<view class="a"> |
||||||
|
<text>单位</text>我是单位名称 |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<text>税号</text>23122-33890099 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="r">使用</view> |
||||||
|
</view> |
||||||
|
<view class="bd"> |
||||||
|
<view class="c" @click="selectItem(i)"> |
||||||
|
<image v-if="tabIndex == i" src="/static/invoice/select-on.png"></image> |
||||||
|
<image v-else src="/static/invoice/select.png"></image> |
||||||
|
{{tabIndex == i?'已设为默认':'设为默认'}} |
||||||
|
</view> |
||||||
|
<view class="d"> |
||||||
|
<text>编辑</text> |
||||||
|
<text>删除</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-fd"> |
||||||
|
<text>+</text>添加发脾抬头 |
||||||
|
</view> |
||||||
|
<empty v-if="isShow" :isLoading="isLoading" tips="暂无相关信息" /> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Empty from '@/components/empty' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
isLoading: false, |
||||||
|
tabIndex: 1, |
||||||
|
isShow: true |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Empty |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
selectItem(i){ |
||||||
|
this.tabIndex = i |
||||||
|
}, |
||||||
|
toDetail(i){ |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/invoice/detail" |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.invoice{ |
||||||
|
padding: 0 0 30rpx; |
||||||
|
overflow: hidden; |
||||||
|
&-bd{ |
||||||
|
overflow: hidden; |
||||||
|
.item{ |
||||||
|
padding: 10rpx 14rpx 10rpx 60rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
margin-top: 20rpx; |
||||||
|
background-color: #FFFFFF; |
||||||
|
&:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.hd{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
overflow: hidden; |
||||||
|
border-bottom: 1px solid #F3F3F3; |
||||||
|
.a{ |
||||||
|
padding-top: 15rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
text{ |
||||||
|
width: 98rpx; |
||||||
|
height: 44rpx; |
||||||
|
background: #FDF4F4; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
display: block; |
||||||
|
margin-right: 30rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #E02E24; |
||||||
|
line-height: 44rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
padding: 20rpx 0; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
text{ |
||||||
|
color: #262626; |
||||||
|
margin-right: 30rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.r{ |
||||||
|
width: 104rpx; |
||||||
|
height: 60rpx; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 4rpx; |
||||||
|
text-align: center; |
||||||
|
line-height: 60rpx; |
||||||
|
border: 1px solid #CACACA; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #555555; |
||||||
|
} |
||||||
|
} |
||||||
|
.bd{ |
||||||
|
padding: 20rpx 0; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.c{ |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #A2A2A2; |
||||||
|
image{ |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
margin-right: 30rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.d{ |
||||||
|
width: 200rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #B8B8B8; |
||||||
|
text{ |
||||||
|
margin-left: 30rpx; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-on{ |
||||||
|
.bd .c{ |
||||||
|
color: #E02E24; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
&-fd{ |
||||||
|
width: 664rpx; |
||||||
|
height: 104rpx; |
||||||
|
background: #F55349; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #FFFFFF; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
text{ |
||||||
|
font-size: 60rpx; |
||||||
|
margin-right: 14rpx; |
||||||
|
margin-top: -5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,523 @@ |
|||||||
|
<template> |
||||||
|
<view class="container" :style="appThemeStyle"> |
||||||
|
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" |
||||||
|
@up="upCallback"> |
||||||
|
<!-- tab栏 --> |
||||||
|
<u-tabs :list="tabs" :is-scroll="false" :current="curTab" :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" /> |
||||||
|
<!-- 订单列表 --> |
||||||
|
<view class="order-list"> |
||||||
|
<view class="order-item" v-for="(item, index) in list.data" :key="index"> |
||||||
|
<view class="item-top"> |
||||||
|
<view class="item-top-left"> |
||||||
|
<text class="order-time">{{ item.create_time }}</text> |
||||||
|
</view> |
||||||
|
<view class="item-top-right"> |
||||||
|
<text class="state-text">{{ item.state_text }}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 商品列表 --> |
||||||
|
<view class="goods-list" @click="handleTargetDetail(item.order_id)"> |
||||||
|
<view class="goods-item" v-for="(goods, idx) in item.goods" :key="idx"> |
||||||
|
<!-- 商品图片 --> |
||||||
|
<view class="goods-image"> |
||||||
|
<image class="image" :src="goods.goods_image" mode="scaleToFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 商品信息 --> |
||||||
|
<view class="goods-content"> |
||||||
|
<view class="goods-title"><text class="twoline-hide">{{ goods.goods_name }}</text></view> |
||||||
|
<view class="goods-props clearfix"> |
||||||
|
<view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx"> |
||||||
|
<text>{{ props.value.name }}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 交易信息 --> |
||||||
|
<view class="goods-trade"> |
||||||
|
<view class="goods-price"> |
||||||
|
<text class="unit">￥</text> |
||||||
|
<text class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text> |
||||||
|
</view> |
||||||
|
<view class="goods-num"> |
||||||
|
<text>×{{ goods.total_num }}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 订单合计 --> |
||||||
|
<view class="order-total"> |
||||||
|
<text>共{{ item.total_num }}件商品，总金额</text> |
||||||
|
<text class="unit">￥</text> |
||||||
|
<text class="money">{{ item.pay_price }}</text> |
||||||
|
</view> |
||||||
|
<!-- 订单操作 --> |
||||||
|
<view v-if="item.order_status != OrderStatusEnum.CANCELLED.value" class="order-handle"> |
||||||
|
<view class="btn-group clearfix"> |
||||||
|
<!-- 未支付取消订单 --> |
||||||
|
<block v-if="item.pay_status == PayStatusEnum.PENDING.value"> |
||||||
|
<view class="btn-item" @click="onCancel(item.order_id)">取消</view> |
||||||
|
</block> |
||||||
|
<!-- 已支付进行中的订单 --> |
||||||
|
<block v-if="item.order_status != OrderStatusEnum.APPLY_CANCEL.value"> |
||||||
|
<block v-if="item.pay_status == PayStatusEnum.SUCCESS.value && item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
||||||
|
<view class="btn-item" @click="onCancel(item.order_id)">申请取消</view> |
||||||
|
</block> |
||||||
|
<!-- 订单核销码 --> |
||||||
|
<block v-if="item.pay_status == PayStatusEnum.SUCCESS.value && item.delivery_type == DeliveryTypeEnum.EXTRACT.value |
||||||
|
&& item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
||||||
|
<view class="btn-item active" @click="onExtractQRCode(item.order_id)"> |
||||||
|
<text class="iconfont icon-qr-extract"></text> |
||||||
|
<text class="m-l-10">核销码</text> |
||||||
|
</view> |
||||||
|
</block> |
||||||
|
</block> |
||||||
|
<!-- 已申请取消 --> |
||||||
|
<view v-else class="f-28 col-8">取消申请中</view> |
||||||
|
<!-- 未支付的订单 --> |
||||||
|
<block v-if="item.pay_status == PayStatusEnum.PENDING.value"> |
||||||
|
<view class="btn-item active" @click="onPay(item.order_id)">去支付</view> |
||||||
|
</block> |
||||||
|
<!-- 确认收货 --> |
||||||
|
<block v-if="item.delivery_status == DeliveryStatusEnum.DELIVERED.value && item.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"> |
||||||
|
<view class="btn-item active" @click="onReceipt(item.order_id)">确认收货</view> |
||||||
|
</block> |
||||||
|
<!-- 订单评价 --> |
||||||
|
<block v-if="item.order_status == OrderStatusEnum.COMPLETED.value && item.is_comment == 0"> |
||||||
|
<view class="btn-item" @click="handleTargetComment(item.order_id)">评价</view> |
||||||
|
</block> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</mescroll-body> |
||||||
|
<!-- 核销二维码弹窗 --> |
||||||
|
<u-popup v-model="showQRCodePopup" mode="center" border-radius="26" :closeable="true"> |
||||||
|
<view class="qrcode-popup"> |
||||||
|
<view class="title">自提核销二维码</view> |
||||||
|
<view class="pop-content"> |
||||||
|
<image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</u-popup> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
DeliveryStatusEnum, |
||||||
|
DeliveryTypeEnum, |
||||||
|
OrderStatusEnum, |
||||||
|
PayStatusEnum, |
||||||
|
ReceiptStatusEnum |
||||||
|
} from '@/common/enum/order' |
||||||
|
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins' |
||||||
|
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
||||||
|
import * as OrderApi from '@/api/order' |
||||||
|
|
||||||
|
// 每页记录数量 |
||||||
|
const pageSize = 15 |
||||||
|
|
||||||
|
// tab栏数据 |
||||||
|
const tabs = [{ |
||||||
|
name: `全部`, |
||||||
|
value: 'all' |
||||||
|
}, { |
||||||
|
name: `待支付`, |
||||||
|
value: 'payment' |
||||||
|
}, { |
||||||
|
name: `待发货`, |
||||||
|
value: 'delivery' |
||||||
|
}, { |
||||||
|
name: `待收货`, |
||||||
|
value: 'received' |
||||||
|
}, { |
||||||
|
name: `待评价`, |
||||||
|
value: 'comment' |
||||||
|
}] |
||||||
|
|
||||||
|
export default { |
||||||
|
mixins: [MescrollMixin], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 枚举类 |
||||||
|
DeliveryStatusEnum, |
||||||
|
DeliveryTypeEnum, |
||||||
|
OrderStatusEnum, |
||||||
|
PayStatusEnum, |
||||||
|
ReceiptStatusEnum, |
||||||
|
|
||||||
|
// 当前页面参数 |
||||||
|
options: { dataType: 'all' }, |
||||||
|
// tab栏数据 |
||||||
|
tabs, |
||||||
|
// 当前标签索引 |
||||||
|
curTab: 0, |
||||||
|
// 订单列表数据 |
||||||
|
list: getEmptyPaginateObj(), |
||||||
|
|
||||||
|
// 上拉加载配置 |
||||||
|
upOption: { |
||||||
|
// 首次自动执行 |
||||||
|
auto: true, |
||||||
|
// 每页数据的数量; 默认10 |
||||||
|
page: { size: pageSize }, |
||||||
|
// 数量要大于4条才显示无更多数据 |
||||||
|
noMoreSize: 4, |
||||||
|
// 空布局 |
||||||
|
empty: { |
||||||
|
tip: '亲，暂无订单记录' |
||||||
|
} |
||||||
|
}, |
||||||
|
// 控制onShow事件是否刷新订单列表 |
||||||
|
canReset: false, |
||||||
|
// 核销二维码弹窗 |
||||||
|
showQRCodePopup: false, |
||||||
|
// 核销二维码图片url (通过后端获取) |
||||||
|
qrcodeImage: '', |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 生命周期函数--监听页面加载 |
||||||
|
*/ |
||||||
|
onLoad(options) { |
||||||
|
// 初始化当前选中的标签 |
||||||
|
this.initCurTab(options) |
||||||
|
// 注册全局事件订阅: 是否刷新订单列表 |
||||||
|
uni.$on('syncRefresh', canReset => { |
||||||
|
this.canReset = canReset |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 生命周期函数--监听页面显示 |
||||||
|
*/ |
||||||
|
onShow() { |
||||||
|
this.canReset && this.onRefreshList() |
||||||
|
this.canReset = false |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 生命周期函数--监听页面的卸载 |
||||||
|
*/ |
||||||
|
onUnload() { |
||||||
|
// 卸载全局事件订阅 |
||||||
|
uni.$off('syncRefresh') |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
|
||||||
|
// 初始化当前选中的标签 |
||||||
|
initCurTab(options) { |
||||||
|
const app = this |
||||||
|
if (options.dataType) { |
||||||
|
const index = app.tabs.findIndex(item => item.value == options.dataType) |
||||||
|
app.curTab = index > -1 ? index : 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 上拉加载的回调 (页面初始化时也会执行一次) |
||||||
|
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
||||||
|
* @param {Object} page |
||||||
|
*/ |
||||||
|
upCallback(page) { |
||||||
|
const app = this |
||||||
|
// 设置列表数据 |
||||||
|
app.getOrderList(page.num) |
||||||
|
.then(list => { |
||||||
|
const curPageLen = list.data.length |
||||||
|
const totalSize = list.data.total |
||||||
|
app.mescroll.endBySize(curPageLen, totalSize) |
||||||
|
}) |
||||||
|
.catch(() => app.mescroll.endErr()) |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取订单列表 |
||||||
|
getOrderList(pageNo = 1) { |
||||||
|
const app = this |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
OrderApi.list({ dataType: app.getTabValue(), page: pageNo }, { load: false }) |
||||||
|
.then(result => { |
||||||
|
// 合并新数据 |
||||||
|
const newList = app.initList(result.data.list) |
||||||
|
app.list.data = getMoreListData(newList, app.list, pageNo) |
||||||
|
resolve(newList) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 初始化订单列表数据 |
||||||
|
initList(newList) { |
||||||
|
newList.data.forEach(item => { |
||||||
|
item.total_num = 0 |
||||||
|
item.goods.forEach(goods => { |
||||||
|
item.total_num += goods.total_num |
||||||
|
}) |
||||||
|
}) |
||||||
|
return newList |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取当前标签项的值 |
||||||
|
getTabValue() { |
||||||
|
return this.tabs[this.curTab].value |
||||||
|
}, |
||||||
|
|
||||||
|
// 切换标签项 |
||||||
|
onChangeTab(index) { |
||||||
|
const app = this |
||||||
|
// 设置当前选中的标签 |
||||||
|
app.curTab = index |
||||||
|
// 刷新订单列表 |
||||||
|
app.onRefreshList() |
||||||
|
}, |
||||||
|
|
||||||
|
// 刷新订单列表 |
||||||
|
onRefreshList() { |
||||||
|
this.list = getEmptyPaginateObj() |
||||||
|
setTimeout(() => { |
||||||
|
this.mescroll.resetUpScroll() |
||||||
|
}, 120) |
||||||
|
}, |
||||||
|
|
||||||
|
// 取消订单 |
||||||
|
onCancel(orderId) { |
||||||
|
const app = this |
||||||
|
uni.showModal({ |
||||||
|
title: '友情提示', |
||||||
|
content: '确认要取消该订单吗？', |
||||||
|
success(o) { |
||||||
|
if (o.confirm) { |
||||||
|
OrderApi.cancel(orderId) |
||||||
|
.then(result => { |
||||||
|
// 显示成功信息 |
||||||
|
app.$toast(result.message) |
||||||
|
// 刷新订单列表 |
||||||
|
app.onRefreshList() |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 确认收货 |
||||||
|
onReceipt(orderId) { |
||||||
|
const app = this |
||||||
|
uni.showModal({ |
||||||
|
title: '友情提示', |
||||||
|
content: '确认收到商品了吗？', |
||||||
|
success(o) { |
||||||
|
if (o.confirm) { |
||||||
|
OrderApi.receipt(orderId) |
||||||
|
.then(result => { |
||||||
|
// 显示成功信息 |
||||||
|
app.$success(result.message) |
||||||
|
// 刷新订单列表 |
||||||
|
app.onRefreshList() |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取核销二维码 |
||||||
|
onExtractQRCode(orderId) { |
||||||
|
const app = this |
||||||
|
OrderApi.extractQrcode(orderId, { channel: app.platform }) |
||||||
|
.then(result => { |
||||||
|
app.qrcodeImage = result.data.qrcode |
||||||
|
app.showQRCodePopup = true |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 点击去支付 |
||||||
|
onPay(orderId) { |
||||||
|
this.$navTo('pages/checkout/cashier/index', { orderId }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 跳转到订单详情页 |
||||||
|
handleTargetDetail(orderId) { |
||||||
|
this.$navTo('pages/order/detail', { orderId }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 跳转到订单评价页 |
||||||
|
handleTargetComment(orderId) { |
||||||
|
this.$navTo('pages/order/comment/index', { orderId }) |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
// 项目内容 |
||||||
|
.order-item { |
||||||
|
margin: 20rpx auto 20rpx auto; |
||||||
|
padding: 30rpx 30rpx; |
||||||
|
width: 94%; |
||||||
|
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
||||||
|
border-radius: 16rpx; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
// 项目顶部 |
||||||
|
.item-top { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 26rpx; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
|
||||||
|
.order-time { |
||||||
|
color: #777; |
||||||
|
} |
||||||
|
|
||||||
|
.state-text { |
||||||
|
color: $main-bg; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 商品列表 |
||||||
|
.goods-list { |
||||||
|
|
||||||
|
// 商品项 |
||||||
|
.goods-item { |
||||||
|
display: flex; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
|
||||||
|
// 商品图片 |
||||||
|
.goods-image { |
||||||
|
width: 180rpx; |
||||||
|
height: 180rpx; |
||||||
|
|
||||||
|
.image { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 8rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 商品内容 |
||||||
|
.goods-content { |
||||||
|
flex: 1; |
||||||
|
padding-left: 16rpx; |
||||||
|
padding-top: 16rpx; |
||||||
|
|
||||||
|
.goods-title { |
||||||
|
font-size: 26rpx; |
||||||
|
max-height: 76rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.goods-props { |
||||||
|
margin-top: 14rpx; |
||||||
|
height: 40rpx; |
||||||
|
color: #ababab; |
||||||
|
font-size: 24rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.goods-props-item { |
||||||
|
display: inline-block; |
||||||
|
margin-right: 14rpx; |
||||||
|
padding: 4rpx 16rpx; |
||||||
|
border-radius: 12rpx; |
||||||
|
background-color: #F5F5F5; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// 交易信息 |
||||||
|
.goods-trade { |
||||||
|
padding-top: 16rpx; |
||||||
|
width: 150rpx; |
||||||
|
text-align: right; |
||||||
|
color: $uni-text-color-grey; |
||||||
|
font-size: 26rpx; |
||||||
|
|
||||||
|
.goods-price { |
||||||
|
vertical-align: bottom; |
||||||
|
margin-bottom: 16rpx; |
||||||
|
|
||||||
|
.unit { |
||||||
|
margin-right: -2rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// 订单合计 |
||||||
|
.order-total { |
||||||
|
font-size: 26rpx; |
||||||
|
vertical-align: bottom; |
||||||
|
text-align: right; |
||||||
|
height: 40rpx; |
||||||
|
margin-bottom: 30rpx; |
||||||
|
|
||||||
|
.unit { |
||||||
|
margin-left: 8rpx; |
||||||
|
margin-right: -2rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.money { |
||||||
|
font-size: 28rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 订单操作 |
||||||
|
.order-handle { |
||||||
|
.btn-group { |
||||||
|
|
||||||
|
.btn-item { |
||||||
|
border-radius: 10rpx; |
||||||
|
padding: 8rpx 20rpx; |
||||||
|
margin-left: 15rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
float: right; |
||||||
|
color: #383838; |
||||||
|
border: 1rpx solid #a8a8a8; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&.active { |
||||||
|
color: $main-bg; |
||||||
|
border: 1rpx solid $main-bg; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// 弹出层 - 核销二维码 |
||||||
|
.qrcode-popup { |
||||||
|
padding: 36rpx 30rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 30rpx; |
||||||
|
margin-bottom: 26rpx; |
||||||
|
font-weight: bold; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.pop-content { |
||||||
|
min-height: 260rpx; |
||||||
|
padding: 0 10rpx; |
||||||
|
|
||||||
|
.image { |
||||||
|
display: block; |
||||||
|
width: 510rpx; |
||||||
|
height: 510rpx; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,137 @@ |
|||||||
|
<template> |
||||||
|
<view class="refund"> |
||||||
|
<view class="refund-hd"> |
||||||
|
<view class="a"> |
||||||
|
<image class="pic" src="/static/home/phone.jpg"></image> |
||||||
|
<view class="n">出柜|圆通快递：已签收，签收人凭取..</view> |
||||||
|
<image class="arrow" src="/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
退货运费规则 |
||||||
|
<image class="arrow" src="/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="refund-bd"> |
||||||
|
<view class="item" @click="openPage(1)"> |
||||||
|
<image class="icon" src="/static/news/icon-refund-01.png"></image> |
||||||
|
<view class="info"> |
||||||
|
<view class="a">我要退货退款</view>已收到货，需要退还已收到的货物 |
||||||
|
</view> |
||||||
|
<image class="arrow" src="/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
<view class="item" @click="openPage(2)"> |
||||||
|
<image class="icon" src="/static/news/icon-refund-02.png"></image> |
||||||
|
<view class="info"> |
||||||
|
<view class="a">我要退款（无需退货）</view>未收到货，或与商家协商之后申请 |
||||||
|
</view> |
||||||
|
<image class="arrow" src="/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
<view class="item" @click="openPage(3)"> |
||||||
|
<image class="icon" src="/static/news/icon-refund-03.png"></image> |
||||||
|
<view class="info"> |
||||||
|
<view class="a">我要换货</view>对收到的商品不满意，可与商家协商换货 |
||||||
|
</view> |
||||||
|
<image class="arrow" src="/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
openPage(index){ |
||||||
|
if(index == 1){ |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/order/refund/refund" |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.refund{ |
||||||
|
overflow: hidden; |
||||||
|
.arrow{ |
||||||
|
width: 30rpx; |
||||||
|
height: 30rpx; |
||||||
|
} |
||||||
|
&-hd{ |
||||||
|
padding: 20rpx 25rpx 20rpx 45rpx; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #FFF; |
||||||
|
.a{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding-bottom: 20rpx; |
||||||
|
border-bottom: 1px solid #F3F3F3; |
||||||
|
.pic{ |
||||||
|
width: 146rpx; |
||||||
|
height: 134rpx; |
||||||
|
border-radius: 6rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
.n{ |
||||||
|
width: 480rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding-top: 20rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
} |
||||||
|
} |
||||||
|
&-bd{ |
||||||
|
padding: 0 35rpx; |
||||||
|
overflow: hidden; |
||||||
|
.item{ |
||||||
|
padding: 68rpx 50rpx; |
||||||
|
overflow: hidden; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 16rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20rpx; |
||||||
|
.icon{ |
||||||
|
width: 60rpx; |
||||||
|
height: 60rpx; |
||||||
|
margin-right: 35rpx; |
||||||
|
} |
||||||
|
.info{ |
||||||
|
flex: 1; |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #8B8B8B; |
||||||
|
margin-right: 35rpx; |
||||||
|
.a{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #000000; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,435 @@ |
|||||||
|
<template> |
||||||
|
<view class="invoice"> |
||||||
|
<view class="invoice-goods"> |
||||||
|
<view class="a"> |
||||||
|
<image src="/static/home/phone.jpg"></image> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="l">产品名称iPhone13</view> |
||||||
|
<view class="r">【配置套餐】<text>x1</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-info"> |
||||||
|
<view class="b"> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">申请类型：</view> |
||||||
|
<view class="r"> |
||||||
|
我要退款（无需退货） |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">收货状态：</view> |
||||||
|
<view class="r"> |
||||||
|
<picker :value="index" :range="array" @change="bindPickerChange"> |
||||||
|
<view class="lx" :class="index1==-1?'lx-on':''">{{index==-1?'请选择':array[index]}}</view> |
||||||
|
</picker> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">申请原因：</view> |
||||||
|
<view class="r"> |
||||||
|
<picker :value="index1" :range="array1" @change="bindPickerChange1"> |
||||||
|
<view class="lx" :class="index1==-1?'lx-on':''">{{index1==-1?'点击选择申请原因':array[index1]}}</view> |
||||||
|
</picker> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-money"> |
||||||
|
<view class="a">申请金额</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="l">￥ |
||||||
|
<view class="money" v-if="toggleIndex">{{value}}</view> |
||||||
|
<input type="number" :focus="true" v-model="value" v-else placeholder-class="box" placeholder="请输入金额" /> |
||||||
|
</view> |
||||||
|
<view class="r" @click="toggleItem()"> |
||||||
|
<image src="@/static/news/icon-edit.png"></image> |
||||||
|
修改金额</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-remark"> |
||||||
|
<view class="a"> |
||||||
|
<view class="l">申请说明<text>（必填）</text></view> |
||||||
|
<view class="r">您还可以输入{{value?(200-value.length):200}}字</view> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<u-input v-model="value" maxlength="200" type="textarea" :height="height" placeholder="请您详细填写申请说明" /> |
||||||
|
</view> |
||||||
|
<view class="c"> |
||||||
|
<u-upload :action="action" width="160" height="160" :file-list="fileList" :custom-btn="true" max-count="5"> |
||||||
|
<template v-slot:addBtn> |
||||||
|
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> |
||||||
|
<image src="/static/news/icon-upload.png"></image> |
||||||
|
<view class="1">上传图片</view> |
||||||
|
<view class="1">最多5张</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
</u-upload> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-phone"> |
||||||
|
联系电话<input type="number" placeholder=""/> |
||||||
|
</view> |
||||||
|
<view class="invoice-fd"> |
||||||
|
提交申请 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
height: 150, |
||||||
|
fileList: [ |
||||||
|
{ |
||||||
|
url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg', |
||||||
|
} |
||||||
|
], |
||||||
|
value: "1235", |
||||||
|
content: "确认您的发票信息无误后再提交", |
||||||
|
show: true, |
||||||
|
toggleIndex: true, |
||||||
|
index: -1, |
||||||
|
array: ['已收到货','未收到货'], |
||||||
|
index1: -1, |
||||||
|
array1: ['不喜欢、效果不好','不想要了',"外观、型号、参数与描述不符",'货物与描述不符','商品有划痕或破损','配件、部件、屏幕问题','质量问题','收到商品少件（含少配件）','商品破损或污渍','商家发错货'], |
||||||
|
tabIndex: 2 |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
onClose() {}, |
||||||
|
tabItem(i){ |
||||||
|
this.tabIndex = i; |
||||||
|
}, |
||||||
|
toggleItem(i){ |
||||||
|
this.toggleIndex = !this.toggleIndex; |
||||||
|
}, |
||||||
|
toDetail(i){ |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/invoice/edit" |
||||||
|
}) |
||||||
|
}, |
||||||
|
bindPickerChange(e){ |
||||||
|
this.index = e.detail.value |
||||||
|
}, |
||||||
|
bindPickerChange1(e){ |
||||||
|
this.index1 = e.detail.value |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.invoice{ |
||||||
|
&-goods{ |
||||||
|
padding: 0 20rpx 0 40rpx; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
padding: 30rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.a{ |
||||||
|
width: 145rpx; |
||||||
|
height: 135rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
.l{ |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
font-size: 30rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 20rpx; |
||||||
|
text{ |
||||||
|
display: block; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-info{ |
||||||
|
margin-top: 20rpx; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 20rpx 30rpx 20rpx 60rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
border-bottom: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
text{ |
||||||
|
color: #006AFF; |
||||||
|
padding-right: 40rpx; |
||||||
|
position: relative; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #006AFF; |
||||||
|
border-left: 1px solid #006AFF; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
padding: 0 30rpx 0 45rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
.item{ |
||||||
|
padding: 30rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
border-top: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
&:first-child{ |
||||||
|
border-top-color: #fff; |
||||||
|
} |
||||||
|
.l{ |
||||||
|
width: 180rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #656565; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
.li{ |
||||||
|
width: 150rpx; |
||||||
|
height: 78rpx; |
||||||
|
background: #F3F3F3; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
line-height: 78rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
margin-right: 12rpx; |
||||||
|
&-on{ |
||||||
|
background: #FDF4F4; |
||||||
|
background: url(/static/invoice/select-active.png) center top no-repeat; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
} |
||||||
|
input { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
picker{ |
||||||
|
flex: 1; |
||||||
|
.tt{ |
||||||
|
width: 180rpx; |
||||||
|
position: relative; |
||||||
|
color: #4894FF; |
||||||
|
text-align: right; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #4894FF; |
||||||
|
border-left: 1px solid #4894FF; |
||||||
|
position: absolute; |
||||||
|
right: -50rpx; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
.lx{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
&-on{ |
||||||
|
color: #B8B8B8; |
||||||
|
} |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #B8B8B8; |
||||||
|
border-left: 1px solid #B8B8B8; |
||||||
|
position: absolute; |
||||||
|
right: 20rpx; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
&-fd{ |
||||||
|
width: 664rpx; |
||||||
|
height: 104rpx; |
||||||
|
background: #F55349; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 60rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #FFFFFF; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
&-money{ |
||||||
|
width: 100%; |
||||||
|
background: #FFFFFF; |
||||||
|
margin-top: 20rpx; |
||||||
|
padding: 26rpx 26rpx 26rpx 48rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
padding-bottom: 10rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.l{ |
||||||
|
font-size: 40rpx; |
||||||
|
font-weight: 600; |
||||||
|
color: #262626; |
||||||
|
display: flex; |
||||||
|
align-items: baseline; |
||||||
|
input,.money{ |
||||||
|
width: 400rpx; |
||||||
|
font-size: 52rpx; |
||||||
|
color: #212121; |
||||||
|
margin-left: 15rpx; |
||||||
|
} |
||||||
|
.box{ |
||||||
|
font-size: 26rpx; |
||||||
|
color: #B8B8B8; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
} |
||||||
|
.r{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #C2C2C2; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
image{ |
||||||
|
width: 36rpx; |
||||||
|
height: 36rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-remark{ |
||||||
|
width: 100%; |
||||||
|
background: #FFFFFF; |
||||||
|
overflow: hidden; |
||||||
|
margin-top: 20rpx; |
||||||
|
padding: 26rpx 26rpx 26rpx 48rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
.a{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 15rpx 0; |
||||||
|
.l{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
text{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #F55349; |
||||||
|
} |
||||||
|
} |
||||||
|
.r{ |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #A8A8A8; |
||||||
|
} |
||||||
|
} |
||||||
|
.c{ |
||||||
|
padding-bottom: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
.slot-btn{ |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 10rpx; |
||||||
|
border: 1px solid #C0C0C0; |
||||||
|
text-align: center; |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #D1D1D1; |
||||||
|
image{ |
||||||
|
width: 50rpx; |
||||||
|
height: 50rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-phone{ |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
padding: 30rpx 26rpx 30rpx 48rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
margin-top: 20rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #838383; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
input { |
||||||
|
flex: 1; |
||||||
|
margin-left: 20rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: #212121; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 521 B |
|
After Width: | Height: | Size: 537 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1020 B |
|
After Width: | Height: | Size: 371 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 522 B |
|
After Width: | Height: | Size: 918 B |
|
After Width: | Height: | Size: 26 KiB |
Loading…
Reference in new issue