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.

320 lines
29 KiB

<template>
<view>
<view :class="{ mask: invShow }" @touchmove.stop.prevent @click="invClose"></view>
<view class="popup" :class="{ on: invShow }">
<view class="popup-hd">{{$t(`抬头选择`)}}<text class="iconfont icon-guanbi" @click="invClose"></text></view>
<scroll-view class="popup-bd" scroll-y="true">
<radio-group v-if="invList.length" name="inv" @change="invChange">
<template v-for="(item, index) in invList">
<label v-if="item.type === 1 || item.type === 2 && isSpecial" :key="item.id"
class="acea-row row-middle item">
<radio class="radio" :value="item.id" :checked="item.id === invChecked" />
<view class="text">
<view class="acea-row row-middle">
<view class="name-wrap acea-row row-middle">
<view class="name-group">
<view class="name">{{item.name}}</view>
<view v-if="item.is_default" class="default">{{$t(`默认`)}}</view>
</view>
</view>
<view class="type" :class="{special: item.type === 2}">
{{item.header_type === 1 ? $t(`个人`) : $t(`企业`)}}
{{item.type === 1 ? $t(`普通`) : $t(`专用`)}}
</view>
</view>
<view class="acea-row row-bottom">
<view class="info-wrap">
<view class="email">{{$t(`联系邮箱`)}} {{item.email}}</view>
<view v-if="item.header_type === 1" class="tel">{{$t(`联系电话`)}}
{{item.drawer_phone}}
</view>
<view v-else class="number">{{$t(`企业税号`)}}{{item.duty_number}}</view>
</view>
<navigator v-if="!isOrder" class="navigator"
:url="`/pages/users/user_invoice_form/index?from=order_confirm&id=${item.id}&${urlQuery}`"
hover-class="none"><text class="iconfont icon-bianji"></text>{{$t(`编辑`)}}
</navigator>
<navigator v-else class="navigator"
:url="`/pages/users/user_invoice_form/index?from=order_details&id=${item.id}&order_id=${orderId}`"
hover-class="none"><text class="iconfont icon-bianji"></text>{{$t(`编辑`)}}
</navigator>
</view>
</view>
</label>
</template>
</radio-group>
<view v-else class="empty">
<image :src="imgHost + '/statics/images/noInvoice.png'"></image>
<view>{{$t(`您还没有添加发票信息哟`)}}~</view>
</view>
</scroll-view>
<view class="popup-ft">
<navigator v-if="!isOrder" class="navigator"
:url="`/pages/users/user_invoice_form/index?from=order_confirm&${urlQuery}`" hover-class="none">
<text class="iconfont icon-fapiao"></text>{{$t(`添加新的抬头`)}}
</navigator>
<navigator v-else class="navigator"
:url="`/pages/users/user_invoice_form/index?order_id=${orderId}&from=order_details&${urlQuery}`"
hover-class="none">
<text class="iconfont icon-fapiao"></text>{{$t(`添加新的抬头`)}}
</navigator>
<button class="button" plain @click="invCancel">{{$t(`不开发票`)}}</button>
<button class="button" plain @click="invSub">{{$t(`确认提交`)}}</button>
</view>
</view>
</view>
</template>
<script>
import {
HTTP_REQUEST_URL
} from '@/config/app';
export default {
data() {
return {
imgHost: HTTP_REQUEST_URL,
invId: 0
}
},
props: {
invShow: {
type: Boolean,
default: false
},
invList: {
type: Array,
default () {
return [];
}
},
invChecked: {
type: String,
default: ''
},
isSpecial: {
type: Boolean,
default: false
},
urlQuery: {
type: String,
default: ''
},
isOrder: {
type: Number,
default: 0
},
orderId: {
type: String,
default: ''
}
},
methods: {
invClose(state) {
this.$emit('inv-close');
},
invChange(e) {
if (this.isOrder) {
this.invId = e.detail.value
} else {
this.$emit('inv-change', e.detail.value);
}
},
invSub() {
this.$emit('inv-change', this.invId || this.invChecked);
},
invCancel() {
this.$emit('inv-cancel');
}
},
}
</script>
<style lang="scss" scoped>
/deep/uni-radio .uni-radio-input {
margin-right: 0;
}
.popup {
position: fixed;
bottom: 0;
left: 0;
z-index: 9;
width: 100%;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
background-color: #F5F5F5;
transform: translateY(100%);
transition: 0.3s;
}
.popup.on {
transform: translateY(0);
}
.popup-hd {
position: relative;
height: 129rpx;
font-size: 32rpx;
line-height: 129rpx;
text-align: center;
color: #000000;
.iconfont {
position: absolute;
top: 50%;
right: 30rpx;
transform: translateY(-50%);
font-size: 32rpx;
color: #707070;
}
}
.popup-bd {
height: 600rpx;
padding-right: 30rpx;
padding-left: 30rpx;
box-sizing: border-box;
.item {
height: 194rpx;
padding: 30rpx;
margin-bottom: 14rpx;
box-sizing: border-box;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVwAAAGECAYAAADKouvsAAAgAElEQVR4Xu3d4VUUy7oG4PeLQG4EYgSbHQEYgRiBGIEYgRiBGIEagRiBEIEYwcYIDkZQd9XcGS4gbgamjzNMP72Wa58zdH1d39P16121qis3XK21jSTPkuwm2UyyddN9fiNAgAABAgQIECBAgAABAgQIECBAgMCIBE6T9H/HVfXppr7r+o+ttRdJDqZB64istEqAAAECBAgQIECAAAECBAgQIECAAIG5Bc56jno9eL0IXKe7Wt8l2Zu7pBsJECBAgAABAgQIECBAgAABAgQIECAwboGPVfVyRnA5cP0gbB33ytA9AQIECBAgQIAAAQIECBAgQIAAAQL3ErgIXSeBa2ttP0nf3eoiQIAAAQIECBAgQIAAAQIECBAgQIAAgbsLvK6qw5oeJfBPkv6hLBcBAgQIECBAgAABAgQIECBAgAABAgQI3F3gPMmTHrja3Xp3PCMIECBAgAABAgQIECBAgAABAgQIECBwXeBlD1yPkjxjQ4AAAQIECBAgQIAAAQIECBAgQIAAAQILCXzpgWs/TmBzoTIGEyBAgAABAgQIECBAgAABAgQIECBAgMBZD1wbBwIECBAgQIAAAQIECBAgQIAAAQIECBBYXKAHrv0w10eLl1KBAAECBAgQIECAAAECBAgQIECAAAECoxb42QPX4yTbo2bQPAECBAgQIECAAAECBAgQIECAAAECBBYXOOmB636Sd4vXUoEAAQIECBAgQIAAAQIECBAgQIAAAQKjFnjdA9f+waz+4SwXAQIECBAgQIAAAQIECBAgQIAAAQIECNxf4En1sa21wySv7l/HSAIECBAgQIAAAQIECBAgQIAAAQIECIxa4G1VHcwC140k/SzXv0ZNonkCBAgQIECAAAECBAgQIECAAAECBAjcXeB7kp2qOp8Erv1qrQld7w5pBAECBAgQIECAAAECBAgQIECAAAEC4xa4CFs7w0Xgeil0PXC8wLhXiO4JECBAgAABAgQIECBAgAABAgQIEJhL4H2Sg76zdXb3lcB19uP0Q1r7SXaTPJ6rtJsIECBAgAABAgQIECBAgAABAgQIECCw/gI/khwlOayqs+vt3hi4Xr+ptbaV5Nv6W+mQAAECBAgQIECAAAECBAgQIECAAAECNwr8XVWnt9nMFbj2Iq21dlsxfydAgAABAgQIECBAgAABAgQIECBAgMA6ClTVXFnqXDcJXNdxieiJAAECBAgQIECAAAECBAgQIECAAIF5BQSu80q5jwABAgQIECBAgAABAgQIECBAgAABArcICFwtEQIECBAgQIAAAQIECBAgQIAAAQIECAwkIHAdCFIZAgQIECBAgAABAgQIECBAgAABAgQICFytAQIECBAgQIAAAQIECBAgQIAAAQIECAwkIHAdCFIZAgQIECBAgAABAgQIECBAgAABAgQICFytAQIECBAgQIAAAQIECBAgQIAAAQIECAwkIHAdCFIZAgQIECBAgAABAgQIECBAgAABAgQICFytAQIECBAgQIAAAQIECBAgQIAAAQIECAwkMFjg2lrbTPI4yfFAc1OGAAECBAgQIECAAAECBAgQIECAAAECD01gJ8mPqjr7t4nXTX9srfXBL5LsJtl4aJ2bLwECBAgQIECAAAECBAgQIECAAAECBP5LAudJjpJ8qqpfNqleCVxbaz1c/TANWv9L81GWAAECBAgQIECAAAECBAgQIECAAAECayHwMcnrquoh7OS6CFynRwd8TrK1Fq1qggABAgQIECBAgAABAgQIECBAgAABAv99gdMkz2dHDUwC1+nO1q/C1v++vicQIECAAAECBAgQIECAAAECBAgQILB2Aj10fdp3us4C1771tZ/Z6iJAgAABAgQIECBAgAABAgQIECBAgACBuwv0M133anqUwD93H28EAQIECBAgQIAAAQIECBAgQIAAAQIECFwSeNID18Mkr7AQIECAAAECBAgQIECAAAECBAgQIECAwEICb3vgepxke6EyBhMgQIAAAQIECBAgQIAAAQIECBAgQIDASQ9cGwcCBAgQIECAAAECBAgQIECAAAECBAgQWFjgXOC6sKECBAgQIECAAAECBAgQIECAAAECBAgQ+D+BHrieJXkMhAABAgQIECBAgAABAgQIECBAgAABAgQWEvjRA9ejJM8WKmMwAQIECBAgQIAAAQIECBAgQIAAAQIECHzpgetekg8sCBAgQIAAAQIECBAgQIAAAQIECBAgQGAhgZc9cN1I0o8VeLRQKYMJECBAgAABAgQIECBAgAABAgQIECAwXoGfSTar92+X63hXgc4JECBAgAABAgQIECBAgAABAgQIEBhE4GVVfZwErtPQ9WOSF4OUVoQAAQIECBAgQIAAAQIECBAgQIAAAQLjEfhUVf3o1lwErkLX8bx9nRIgQIAAAQIECBAgQIAAAQIECBAgMJjA+6ran1W7ErhOQ9fdJIdJHg/2SIUIECBAgAABAgQIECBAgAABAgQIECCwXgI/kuxX1dHltn4JXGd/bK314LX/20yy5aNa67UadEOAAAECBAgQIECAAAECBAgQIECAwJ0E+kexTpOcJTm6HrTOKv02cL3+qNZau9Pj3UyAAAECBAgQIECAAAECBAgQIECAAIE1EaiqubLUuW7qJgLXNVkZ2iBAgAABAgQIECBAgAABAgQIECBA4M4CAtc7kxlAgAABAgQIECBAgAABAgQIECBAgACBmwUErlYGAQIECBAgQIAAAQIECBAgQIAAAQIEBhIQuA4EqQwBAgQIECBAgAABAgQIECBAgAABAgQErtYAAQIECBAgQIAAAQIECBAgQIAAAQIEBhIQuA4EqQwBAgQIECBAgAABAgQIECBAgAABAgQErtYAAQIECBAgQIAAAQIECBAgQIAAAQIEBhIQuA4EqQwBAgQIECBAgAABAgQIECBAgAABAgQErtYAAQIECBAgQIAAAQIECBAgQIAAAQIEBhIQuA4EqQwBAgQIECBAgAABAgQIECBAgAABAgQGCVxba1tJtpNsJDnASoAAAQIECBAgQIAAAQIECBAgQIAAgZEK9Hz0PMlJVZ3+zqCu/6G11sPVV0n2kmyOFE/bBAgQIECAAAECBAgQIECAAAECBAgQ+J3AWZKPSd5XVQ9hL64rget0R+tnQauVRIAAAQIECBAgQIAAAQIECBAgQIAAgVsFevD6/PKO14vAtbW2m6SHrS4CBAgQIECAAAECBAgQIECAAAECBAgQmF/gaVUd99snget0Z+vX6Vmt85dxJwECBAgQIECAAAECBAgQIECAAAECBAj0YwV66Ho6C1x72LrDhQABAgQIECBAgAABAgQIECBAgAABAgTuJXBcVU+rtdaD1h64uggQIECAAAECBAgQIECAAAECBAgQIEDg/gKTwLV/TevF/WsYSYAAAQIECBAgQIAAAQIECBAgQIAAAQJJ3vfA9VuSLRwECBAgQIAAAQIECBAgQIAAAQIECBAgsJDASQ9c20IlDCZAgAABAgQIECBAgAABAgQIECBAgACBiYDA1UIgQIAAAQIECBAgQIAAAQIECBAgQIDAQAI9cD1N8tdA9ZQhQIAAAQIECBAgQIAAAQIECBAgQIDAWAW++2jWWF+9vgkQIECAAAECBAgQIECAAAECBAgQGFrgUw9cd5N8HrqyegQIECBAgAABAgQIECBAgAABAgQIEBiZwPPqDTtWYGSvXbsECBAgQIAAAQIECBAgQIAAAQIECAwt8L2qtmaB606Sr0M/QT0CBAgQIECAAAECBAgQIECAAAECBAiMRODvqjqdBK79aq3tJfkwkua1SYAAAQIECBAgQIAAAQIECBAgQIAAgaEEXlbVx17sInCdhq79PNf+h0dDPUkdAgQIECBAgAABAgQIECBAgAABAgQIrKnAzyR7VXU06+9K4DoNXTeTHCR5saYI2iJAgAABAgQIECBAgAABAgQIECBAgMCiAp96jlpVZ5cL/RK4zv7YWttI0s923UrSQ1gB7KKvwHgCBAgQIECAAAECB
}
.text {
flex: 1;
min-width: 0;
margin-left: 30rpx;
}
.name-wrap {
flex: 1;
min-width: 0;
}
.name-group {
display: flex;
align-items: center;
max-width: 100%;
}
.name {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
font-size: 30rpx;
color: #282828;
line-height: 28rpx;
}
.default {
max-width: 100rpx;
border: 1rpx solid var(--view-theme);
margin-left: 20rpx;
border-radius: 6rpx;
padding: 0 4rpx;
font-size: 20rpx;
line-height: 28rpx;
text-align: center;
color: var(--view-theme);
}
.email {
margin-top: 16rpx;
font-size: 24rpx;
color: #666666;
}
.tel {
margin-top: 12rpx;
font-size: 24rpx;
color: #666666;
}
.number {
margin-top: 12rpx;
font-size: 24rpx;
color: #666666;
}
.info-wrap {
flex: 1;
}
.type {
width: 162rpx;
height: 42rpx;
margin-left: 20rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUQAAABUCAYAAAD6S07pAAAEtUlEQVR4Xu3d31FTQRQH4F0D76QCSQVqBWIHWoGWoBWIHdiBWoF2oFYgVpB0EN4B17kIMxFD7rLmIZz98prd4Z7v7Pxm7x9u8vnpoiQfAgQIEEhZIFoFBAgQ+CMgEK0EAgQIXAkIREuBAAECAtEaIECAwN8CdohWBAECBOwQrQECBAjYIVoDBAgQWCvglNnCIECAgFNma4AAAQJOma0BAgQIOGW2BggQILBJwDVE64MAAQKuIVoDBAgQcA3RGiBAgIBriNYAAQIEXEO0BggQIFAh4KZKBZIhBAj0ISAQ++izKgkQqBAQiBVIhhAg0IeAQOyjz6okQKBCQCBWIBlCgEAfAgKxjz6rkgCBCgGBWIFkCAECfQgIxD76rEoCBCoEBGIFkiEECPQhIBD76LMqCRCoEBCIFUiGECDQh0A+W85Pcs6P+ihXlQQIEFgvUEr5mYevynJ+eJHSccr5JSwCBAh0JVDKp0lKx3k6W1wG4vXnbDk/Sim9t2PsajkolkCXAsOOMKX0en86+3YN8FcgXu0WD85T+pJzftqlkqIJEAgvUEr5vpfS8zydna4W+08gruwWXVsMvywUSKA/gWFnuD+dPV5X+a2BWJbzg4uUTlLOD/sjUzEBAhEFhjDcS+no5s7w1lPmm9cUc85fI8KoiQCB/gRKKc9WrxneFLh1h3g98Hw5/+juc38LR8UEwgmU8mlvOnu1qa7RQLx8JCfneTgcBREg0JXApJTZ8GjNfwXiMNnD212tG8USCCew6UbKarGjO8SrQDzOOb8Np6QgAgS6ECilvNufzo7Hiq0NxCM3V8YofU+AwK4KjN1MuT7uqkB0HXFX2+y4CBCoEZiUMr3tUZs7nzIPE85PF6XmDxtDgACBXRPYOzis2vxVDRKIu9Zex0OAwF0EthqITpnvQm8sAQK7JrDVU+bhLThuquxaix0PAQK1Alu9qXK2nHvsplbeOAIEdk5gu4/dnC5+5JTWvh1i5yp3QAQIELghUFI62T84fDIGM3pTxfXDMULfEyBwHwS28q97Xu5wH1rtGAkQGBX435c7uJkySmwAAQL3SGDs5srmF8Tm/COldHiP6nWoBAgQ2CSwmJTy5M4viD1zI8WyIkAgoMCmGyxrf2TqIufPKaXhF/h8CBAgEFHg26SUFxt/ZOrqmuEHp8kR+68mAgRWBYadYirlzT8/Q3r5aM2DB29TKRtfr42TAAEC4QRy/jj59evd5Q/Vu1YYrr0KIkCgQWDYMWav9WqQM4UAgZACAjFkWxVFgECLgEBsUTOHAIGQAgIxZFsVRYBAi4BAbFEzhwCBkAICMWRbFUWAQIuAQGxRM4cAgZACAjFkWxVFgECLgEBsUTOHAIGQAgIxZFsVRYBAi4BAbFEzhwCBkAICMWRbFUWAQIuAQGxRM4cAgZACAjFkWxVFgECLgEBsUTOHAIGQAgIxZFsVRYBAi4BAbFEzhwCBkAICMWRbFUWAQIuAQGxRM4cAgZACAjFkWxVFgECLgEBsUTOHAIGQAgIxZFsVRYBAi4BAbFEzhwCBkAICMWRbFUWAQIuAQGxRM4cAgZACAjFkWxVFgECLgEBsUTOHAIGQAgIxZFsVRYBAi8BvRCCv/9ohX8AAAAAASUVORK5CYII=") center/cover no-repeat;
font-size: 24rpx;
line-height: 42rpx;
text-align: center;
color: #D67300;
&.special {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUQAAABUCAYAAAD6S07pAAAEkElEQVR4Xu3dQY4TRxQG4Kq25Bl2zCKyzCZwAuAETG6QnCA5QnKCwA1yA5gTwA2AE+A5AaywrCzIEiJ5KvLYVmYYt7sQXkz3+7x1jdTvq19PXVU97bxczEvyIUCAAIGUNUQpIECAwFpAQ5QEAgQIbAQ0RFEgQICAhigDBAgQuC7gDlEiCBAg4A5RBggQIOAOUQYIECCwU8CSWTAIECBgySwDBAgQsGSWAQIECFgyywABAgT2CdhDlA8CBAjYQ5QBAgQI2EOUAQIECNhDlAECBAjYQ5QBAgQIVAg4VKlAMoQAgRgCGmKMeVYlAQIVAhpiBZIhBAjEENAQY8yzKgkQqBDQECuQDCFAIIaAhhhjnlVJgECFgIZYgWQIAQIxBDTEGPOsSgIEKgQ0xAokQwgQiCGgIcaYZ1USIFAhoCFWIBlCgEAMgbxcfJyllB/GKFeVBAgQaBMo53n1Vfk0v3/xb3qaUvoVFgECBIIJnDXj9DSfTD9cNsTtp/w9P724KH+5YwwWB+USCClQzpsm/55/mL7Zln+tIa7vFj/dXX75/Crn9CSkkaIJEBi8QCnp7ejo+Od8cvLP1WJvNMTtl/YWB58JBRIIKlDOR5N7j3YV39oQV3eKF18+z1JOPwZVUzYBAoMTKOfN+M7p13eGrUvmm3uK6fXgTBREgEBIgaZJP13dM/waofUO8f+l8/yF0+eQ2VE0gaEJnI0m09/2FdXZEDeP5Lwfmox6CBCIJdCM04PVozXf1RBXf+yAJVZwVEtgeALtBylXa+28Q1w3xPnqoe0/h4ekIgIEggg8G02mqz6291PVENcPbDtc6cL0PQECt1Og6zBle9V1DXH9r332EW/nXLsqAgQ6BJrx8UnbozbfvGTeLJsLdQIECPRRYDSZVt38VQ3SEPsYAddMgMBW4KAN0aM3gkWAQJ8FDrpkdqjS5yi4dgIEDnqo4rEbgSJAoOcCh3vsZrn4+C6lvPPtED1HcvkECIQQKLPR5N7jrlI7D1XsH3YR+p4AgT4IHORf95YLL3fow2S7RgIEOgW+7+UODlM6gQ0gQKBHAl2HK10viH2Xcrrfo3pdKgECBNoFSvrQHB0//uYXxDpIkSoCBIYp0H7A0vYjUy9zTqfDxFAVAQLRBUpJb0ZHx7/s/ZGpyz3DZXpumRw9LuonEEGgzJom/3HjZ0g3j9as3ne49/XaEYjUSIBAOIEXzTg9u/yhenuF4SZfwQQI7BQos7xczL3WSzwIECCQUtIQxYAAAQIbAQ1RFAgQIKAhygABAgSuC7hDlAgCBAi4Q5QBAgQIuEOUAQIECOwUsGQWDAIECFgyywABAgQsmWWAAAEClswyQIAAgX0C9hDlgwABAvYQZYAAAQL2EGWAAAEC9hBlgAABAvYQZYAAAQIVAg5VKpAMIUAghoCGGGOeVUmAQIWAhliBZAgBAjEENMQY86xKAgQqBDTECiRDCBCIIaAhxphnVRIgUCGgIVYgGUKAQAwBDTHGPKuSAIEKAQ2xAskQAgRiCGiIMeZZlQQIVAhoiBVIhhAgEENAQ4wxz6okQKBC4D/gApk7R56F9gAAAABJRU5ErkJggg==");
color: #E93323;
}
}
.navigator {
margin-left: 20rpx;
font-size: 26rpx;
color: #282828;
.iconfont {
margin-right: 10rpx;
font-size: 26rpx;
color: #000000;
}
}
}
.popup-ft {
padding: 14rpx 30rpx 44rpx;
.navigator {
height: 86rpx;
border-radius: 43rpx;
background-color: var(--view-theme);
font-size: 30rpx;
line-height: 86rpx;
text-align: center;
color: #FFFFFF;
.iconfont {
margin-right: 14rpx;
font-size: 30rpx;
}
}
.button {
height: 86rpx;
border: 1rpx solid var(--view-theme);
border-radius: 43rpx;
margin-top: 26rpx;
font-size: 30rpx;
line-height: 84rpx;
color: var(--view-theme);
}
}
.empty {
padding-top: 58rpx;
font-size: 26rpx;
text-align: center;
color: #999999;
.image {
width: 400rpx;
height: 260rpx;
margin-bottom: 20rpx;
}
}
</style>