|
@@ -1,15 +1,14 @@
|
|
<template name="invoice">
|
|
<template name="invoice">
|
|
<view class="invoice-template">
|
|
<view class="invoice-template">
|
|
- <!-- 发票信息 -->
|
|
|
|
|
|
+ <!-- 发票信息 -->
|
|
<view class="invoice-title" @tap.stop="hanldOperationConfim">
|
|
<view class="invoice-title" @tap.stop="hanldOperationConfim">
|
|
- <text class="text">发票信息:</text>
|
|
|
|
- <text class="iconfont icon-xiangyou"></text>
|
|
|
|
|
|
+ <text class="text">发票信息:</text> <text class="iconfont icon-xiangyou"></text>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-text">
|
|
<view class="invoice-text">
|
|
- <text>{{invoiceText}}</text>
|
|
|
|
|
|
+ <text>{{ invoiceText }}</text>
|
|
</view>
|
|
</view>
|
|
<!--底部选择模态层弹窗组件 -->
|
|
<!--底部选择模态层弹窗组件 -->
|
|
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="choiceaInvoiceConfim">
|
|
|
|
|
|
+ <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="choiceaInvoiceConfim">
|
|
<!-- 遮罩层 -->
|
|
<!-- 遮罩层 -->
|
|
<view class="mask"></view>
|
|
<view class="mask"></view>
|
|
<view class="layer" @tap.stop="discard">
|
|
<view class="layer" @tap.stop="discard">
|
|
@@ -18,39 +17,76 @@
|
|
<view class="invoice-radio">
|
|
<view class="invoice-radio">
|
|
<radio-group class="row-group" @change="radioChange">
|
|
<radio-group class="row-group" @change="radioChange">
|
|
<label class="row-input" v-for="(item, index) in invoiceTypeList" :key="item.value">
|
|
<label class="row-input" v-for="(item, index) in invoiceTypeList" :key="item.value">
|
|
- <radio class="row-radio" :value="item.value" :checked="index === current" color="#F3B574"/>
|
|
|
|
- <view class="row-text">{{item.name}}</view>
|
|
|
|
|
|
+ <radio
|
|
|
|
+ class="row-radio"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :checked="index === current"
|
|
|
|
+ color="#F3B574"
|
|
|
|
+ />
|
|
|
|
+ <view class="row-text">{{ item.name }}</view>
|
|
</label>
|
|
</label>
|
|
</radio-group>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-main from" v-if="invoiceType == '2'">
|
|
<view class="invoice-main from" v-if="invoiceType == '2'">
|
|
<view class="invoice-from">
|
|
<view class="invoice-from">
|
|
<view class="label">单位名称:</view>
|
|
<view class="label">单位名称:</view>
|
|
- <input class="form-input" type="text" v-model="invoiceData.invoiceTitle" placeholder="请填写单位信息(必填)" maxlength="24">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="invoiceData.invoiceTitle"
|
|
|
|
+ placeholder="请填写单位信息(必填)"
|
|
|
|
+ maxlength="24"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
<view class="invoice-from">
|
|
<view class="invoice-from">
|
|
<view class="label">纳税人识别号:</view>
|
|
<view class="label">纳税人识别号:</view>
|
|
- <input class="form-input" type="text" v-model="invoiceData.corporationTaxNum" placeholder="请填写纳税人识别号(必填)" maxlength="24">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="invoiceData.corporationTaxNum"
|
|
|
|
+ placeholder="请填写纳税人识别号(必填)"
|
|
|
|
+ maxlength="24"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
<view class="invoice-from">
|
|
<view class="invoice-from">
|
|
<view class="label">注册地址:</view>
|
|
<view class="label">注册地址:</view>
|
|
- <input class="form-input" type="text" v-model="invoiceData.registeredAddress" placeholder="请填写单位注册地址(必填)" maxlength="100">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="invoiceData.registeredAddress"
|
|
|
|
+ placeholder="请填写单位注册地址(必填)"
|
|
|
|
+ maxlength="100"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
<view class="invoice-from">
|
|
<view class="invoice-from">
|
|
<view class="label">注册电话:</view>
|
|
<view class="label">注册电话:</view>
|
|
- <input class="form-input" type="text" v-model="invoiceData.registeredPhone" placeholder="请填写注册电话(必填)" maxlength="15">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="invoiceData.registeredPhone"
|
|
|
|
+ placeholder="请填写注册电话(必填)"
|
|
|
|
+ maxlength="15"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
<view class="invoice-from">
|
|
<view class="invoice-from">
|
|
<view class="label">开户银行:</view>
|
|
<view class="label">开户银行:</view>
|
|
- <input class="form-input" type="text" v-model="invoiceData.openBank" placeholder="请填写开户银行(必填)" maxlength="30">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="invoiceData.openBank"
|
|
|
|
+ placeholder="请填写开户银行(必填)"
|
|
|
|
+ maxlength="30"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
<view class="invoice-from">
|
|
<view class="invoice-from">
|
|
<view class="label">银行账号:</view>
|
|
<view class="label">银行账号:</view>
|
|
- <input class="form-input"
|
|
|
|
- type="text"
|
|
|
|
- v-model="invoiceData.bankAccountNo"
|
|
|
|
- placeholder="请填写银行账号(必填)"
|
|
|
|
- maxlength="30">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="invoiceData.bankAccountNo"
|
|
|
|
+ placeholder="请填写银行账号(必填)"
|
|
|
|
+ maxlength="30"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-main" v-if="invoiceType == '3'">
|
|
<view class="invoice-main" v-if="invoiceType == '3'">
|
|
@@ -58,27 +94,55 @@
|
|
<view class="invoice-group tit">
|
|
<view class="invoice-group tit">
|
|
<checkbox-group class="row-group" @change="checkboxChange">
|
|
<checkbox-group class="row-group" @change="checkboxChange">
|
|
<view class="text">商品明细</view>
|
|
<view class="text">商品明细</view>
|
|
- <checkbox class="row-radio" value="明细" :checked="inventoryChecked" color="#F3B574"></checkbox>
|
|
|
|
|
|
+ <checkbox
|
|
|
|
+ class="row-radio"
|
|
|
|
+ value="明细"
|
|
|
|
+ :checked="inventoryChecked"
|
|
|
|
+ color="#F3B574"
|
|
|
|
+ ></checkbox>
|
|
</checkbox-group>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-ltitle">发票抬头</view>
|
|
<view class="invoice-ltitle">发票抬头</view>
|
|
<view class="invoice-group tit">
|
|
<view class="invoice-group tit">
|
|
<radio-group class="row-group radio" @change="radioChangeTitle">
|
|
<radio-group class="row-group radio" @change="radioChangeTitle">
|
|
<label class="row-input" v-for="(item, index) in invoiceTitleList" :key="item.value">
|
|
<label class="row-input" v-for="(item, index) in invoiceTitleList" :key="item.value">
|
|
- <radio class="row-radio" :value="item.value" :checked="index === titleCurrent" color="#F3B574"/>
|
|
|
|
- <view class="row-text">{{item.name}}</view>
|
|
|
|
|
|
+ <radio
|
|
|
|
+ class="row-radio"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :checked="index === titleCurrent"
|
|
|
|
+ color="#F3B574"
|
|
|
|
+ />
|
|
|
|
+ <view class="row-text">{{ item.name }}</view>
|
|
</label>
|
|
</label>
|
|
</radio-group>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-group from">
|
|
<view class="invoice-group from">
|
|
<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '0'">
|
|
<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '0'">
|
|
- <input class="form-input" type="text" v-model="peopleInvoiceData.invoiceTitle" placeholder="请填写个人抬头" maxlength="20">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="peopleInvoiceData.invoiceTitle"
|
|
|
|
+ placeholder="请填写个人抬头"
|
|
|
|
+ maxlength="20"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
|
|
<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
|
|
- <input class="form-input" type="text" v-model="peopleInvoiceData.invoiceTitle" placeholder="请填写公司抬头" maxlength="20">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="peopleInvoiceData.invoiceTitle"
|
|
|
|
+ placeholder="请填写公司抬头"
|
|
|
|
+ maxlength="20"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
|
|
<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
|
|
- <input class="form-input" type="text" v-model="peopleInvoiceData.corporationTaxNum" placeholder="请填写纳税人识别号" maxlength="20">
|
|
|
|
|
|
+ <input
|
|
|
|
+ class="form-input"
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="peopleInvoiceData.corporationTaxNum"
|
|
|
|
+ placeholder="请填写纳税人识别号"
|
|
|
|
+ maxlength="20"
|
|
|
|
+ />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -86,598 +150,597 @@
|
|
<view class="invoice-none">不开具发票信息</view>
|
|
<view class="invoice-none">不开具发票信息</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="btn">
|
|
|
|
- <view class="button add" @click="choiceaInvoiceConfim">完成</view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="btn"> <view class="button add" @click="choiceaInvoiceConfim">完成</view> </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- export default{
|
|
|
|
- name:'invoice',
|
|
|
|
- data() {
|
|
|
|
- return{
|
|
|
|
- invoiceText:'不要发票',
|
|
|
|
- specClass: '',//规格弹窗css类,控制开关动画
|
|
|
|
- invoiceType:'1',//发票类型
|
|
|
|
- current:0,
|
|
|
|
- titleCurrent:0,
|
|
|
|
- inventoryChecked:false,
|
|
|
|
- invoiceTypeList:[
|
|
|
|
- {value:'1',name:'不要发票'},
|
|
|
|
- {value:'2',name:'要发票'},
|
|
|
|
- ],
|
|
|
|
- invoiceTitleList:[
|
|
|
|
- {value:'0',name:'个人'},
|
|
|
|
- {value:'1',name:'公司'},
|
|
|
|
- ],
|
|
|
|
- peopleInvoiceData:{
|
|
|
|
- invoiceTitle:'', //单位名称
|
|
|
|
- invoiceContent:'', //商品明细
|
|
|
|
- corporationTaxNum:'',//纳税人识别号
|
|
|
|
- invoiceTitleType:'0'//发票抬头类型 1企业 0个人
|
|
|
|
- },
|
|
|
|
- invoiceData:{
|
|
|
|
- invoiceTitle:'', //单位名称
|
|
|
|
- corporationTaxNum:'',//纳税人识别号
|
|
|
|
- registeredAddress: '',//单位地址
|
|
|
|
- registeredPhone:'', //注册电话
|
|
|
|
- openBank:'', //开户银行
|
|
|
|
- bankAccountNo: '' ,//银行账号
|
|
|
|
- },
|
|
|
|
|
|
+export default {
|
|
|
|
+ name: 'invoice',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ invoiceText: '不要发票',
|
|
|
|
+ specClass: '', //规格弹窗css类,控制开关动画
|
|
|
|
+ invoiceType: '1', //发票类型
|
|
|
|
+ current: 0,
|
|
|
|
+ titleCurrent: 0,
|
|
|
|
+ inventoryChecked: false,
|
|
|
|
+ invoiceTypeList: [{ value: '1', name: '不要发票' }, { value: '2', name: '要发票' }],
|
|
|
|
+ invoiceTitleList: [{ value: '0', name: '个人' }, { value: '1', name: '公司' }],
|
|
|
|
+ peopleInvoiceData: {
|
|
|
|
+ invoiceTitle: '', //单位名称
|
|
|
|
+ invoiceContent: '', //商品明细
|
|
|
|
+ corporationTaxNum: '', //纳税人识别号
|
|
|
|
+ invoiceTitleType: '0' //发票抬头类型 1企业 0个人
|
|
|
|
+ },
|
|
|
|
+ invoiceData: {
|
|
|
|
+ invoiceTitle: '', //单位名称
|
|
|
|
+ corporationTaxNum: '', //纳税人识别号
|
|
|
|
+ registeredAddress: '', //单位地址
|
|
|
|
+ registeredPhone: '', //注册电话
|
|
|
|
+ openBank: '', //开户银行
|
|
|
|
+ bankAccountNo: '' //银行账号
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ // this.initData(this.invoiceDatas)
|
|
|
|
+ },
|
|
|
|
+ computed: {},
|
|
|
|
+ methods: {
|
|
|
|
+ getUseFindInvoice() {
|
|
|
|
+ //获取发票信息
|
|
|
|
+ this.$api.getStorage().then(resolve => {
|
|
|
|
+ this.OrderService.GetFindInvoice({ userId: resolve.userId }).then(response => {
|
|
|
|
+ if (response.data == null) {
|
|
|
|
+ this.invoiceData = Object.assign(this.invoiceData, '', { type: 0 })
|
|
|
|
+ } else {
|
|
|
|
+ this.invoiceData = response.data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
},
|
|
},
|
|
- created(){
|
|
|
|
- // this.initData(this.invoiceDatas)
|
|
|
|
|
|
+ updateInvoiceFn() {
|
|
|
|
+ //保存发票信息
|
|
|
|
+ this.$api.getStorage().then(resolve => {
|
|
|
|
+ console.log(resolve.userId)
|
|
|
|
+ this.OrderService.UpdateInvoice(Object.assign({ userId: resolve.userId }, this.invoiceData)).then(
|
|
|
|
+ response => {}
|
|
|
|
+ )
|
|
|
|
+ })
|
|
},
|
|
},
|
|
- computed: {
|
|
|
|
-
|
|
|
|
|
|
+ choiceaInvoiceConfim() {
|
|
|
|
+ switch (this.invoiceType) {
|
|
|
|
+ case '1':
|
|
|
|
+ this.choiceaInvoiceThree()
|
|
|
|
+ this.invoiceText = '不要发票'
|
|
|
|
+ break
|
|
|
|
+ // case '2':
|
|
|
|
+ // this.choiceaInvoiceTwo()
|
|
|
|
+ // this.invoiceText = this.peopleInvoiceData.invoiceTitle
|
|
|
|
+ // break;
|
|
|
|
+ case '2':
|
|
|
|
+ this.choiceaInvoiceFirst()
|
|
|
|
+ this.invoiceText = this.invoiceData.invoiceTitle
|
|
|
|
+ break
|
|
|
|
+ default:
|
|
|
|
+ this.choiceaInvoiceThree()
|
|
|
|
+ this.invoiceText = '不要发票'
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- methods:{
|
|
|
|
- getUseFindInvoice(){//获取发票信息
|
|
|
|
- this.$api.getStorage().then((resolve) => {
|
|
|
|
- this.OrderService.GetFindInvoice({userId:resolve.userId}).then(response =>{
|
|
|
|
- if(response.data == null){
|
|
|
|
- this.invoiceData = Object.assign(this.invoiceData,'',{type:0})
|
|
|
|
- }else{
|
|
|
|
- this.invoiceData = response.data
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- updateInvoiceFn(){//保存发票信息
|
|
|
|
- this.$api.getStorage().then((resolve) => {
|
|
|
|
- console.log(resolve.userId)
|
|
|
|
- this.OrderService.UpdateInvoice(Object.assign({userId:resolve.userId},this.invoiceData)).then(response =>{})
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- choiceaInvoiceConfim(){
|
|
|
|
- switch(this.invoiceType){
|
|
|
|
- case '1':
|
|
|
|
- this.choiceaInvoiceThree()
|
|
|
|
- this.invoiceText = '不要发票'
|
|
|
|
- break
|
|
|
|
- // case '2':
|
|
|
|
- // this.choiceaInvoiceTwo()
|
|
|
|
- // this.invoiceText = this.peopleInvoiceData.invoiceTitle
|
|
|
|
- // break;
|
|
|
|
- case '2':
|
|
|
|
- this.choiceaInvoiceFirst()
|
|
|
|
- this.invoiceText = this.invoiceData.invoiceTitle
|
|
|
|
- break
|
|
|
|
- default:
|
|
|
|
- this.choiceaInvoiceThree()
|
|
|
|
- this.invoiceText = '不要发票'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- choiceaInvoiceFirst(){//增值税发票
|
|
|
|
- if(this.invoiceData.invoiceTitle == ''){
|
|
|
|
- this.$util.msg('请输入单位名称',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if(this.invoiceData.corporationTaxNum == ''){
|
|
|
|
- this.$util.msg('请输入纳税人识别号',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if(this.invoiceData.registeredAddress == ''){
|
|
|
|
- this.$util.msg('请输入单位地址',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if(this.invoiceData.registeredPhone == ''){
|
|
|
|
- this.$util.msg('请输入注册电话',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if(this.invoiceData.openBank == ''){
|
|
|
|
- this.$util.msg('请输入开户银行',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if(this.invoiceData.bankAccountNo == ''){
|
|
|
|
- this.$util.msg('请输入银行账号',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- this.updateInvoiceFn()
|
|
|
|
- this.$emit('handleChoiceaInvoice',Object.assign(this.invoiceData,'',{type:2}))
|
|
|
|
- this.hideSpec()
|
|
|
|
- },
|
|
|
|
- choiceaInvoiceTwo(){//取消普通发票.(可删除)
|
|
|
|
- switch(this.peopleInvoiceData.invoiceTitleType){
|
|
|
|
- case '0':
|
|
|
|
- if(this.peopleInvoiceData.invoiceContent == ''){
|
|
|
|
- this.$util.msg('请选择商品明细',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if(this.peopleInvoiceData.invoiceTitle == ''){
|
|
|
|
- this.$util.msg('请输入个人抬头',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- break
|
|
|
|
- case '1':
|
|
|
|
- if(this.peopleInvoiceData.invoiceContent == ''){
|
|
|
|
- this.$util.msg('请选择商品明细',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if(this.peopleInvoiceData.invoiceTitle == ''){
|
|
|
|
- this.$util.msg('请输入公司抬头',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if(this.peopleInvoiceData.corporationTaxNum == ''){
|
|
|
|
- this.$util.msg('请输入纳税人识别号',2000)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- break
|
|
|
|
- }
|
|
|
|
- this.$emit('handleChoiceaInvoice',Object.assign(this.peopleInvoiceData,'',{type:1}))
|
|
|
|
- this.hideSpec()
|
|
|
|
- },
|
|
|
|
- choiceaInvoiceThree(){//不要发票
|
|
|
|
- this.invoiceData = {}
|
|
|
|
- this.$emit('handleChoiceaInvoice',Object.assign(this.invoiceData,'',{type:0}))
|
|
|
|
- this.hideSpec()
|
|
|
|
- },
|
|
|
|
- hideSpec() {//关闭弹窗
|
|
|
|
- this.specClass = 'hide'
|
|
|
|
- setTimeout(() => {
|
|
|
|
- this.specClass = 'none'
|
|
|
|
- }, 200)
|
|
|
|
- },
|
|
|
|
- hanldOperationConfim(){//显示发票弹窗
|
|
|
|
- this.specClass = 'show'
|
|
|
|
- },
|
|
|
|
- radioChange(e) {
|
|
|
|
- this.invoiceType = e.target.value
|
|
|
|
- for (let i = 0; i < this.invoiceTypeList.length; i++) {
|
|
|
|
- if (this.invoiceTypeList[i].value === this.invoiceType) {
|
|
|
|
- this.current = i
|
|
|
|
- break
|
|
|
|
|
|
+ choiceaInvoiceFirst() {
|
|
|
|
+ //增值税发票
|
|
|
|
+ if (this.invoiceData.invoiceTitle == '') {
|
|
|
|
+ this.$util.msg('请输入单位名称', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (this.invoiceData.corporationTaxNum == '') {
|
|
|
|
+ this.$util.msg('请输入纳税人识别号', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (this.invoiceData.registeredAddress == '') {
|
|
|
|
+ this.$util.msg('请输入单位地址', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (this.invoiceData.registeredPhone == '') {
|
|
|
|
+ this.$util.msg('请输入注册电话', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (this.invoiceData.openBank == '') {
|
|
|
|
+ this.$util.msg('请输入开户银行', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (this.invoiceData.bankAccountNo == '') {
|
|
|
|
+ this.$util.msg('请输入银行账号', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.updateInvoiceFn()
|
|
|
|
+ this.$emit('handleChoiceaInvoice', Object.assign(this.invoiceData, '', { type: 2 }))
|
|
|
|
+ this.hideSpec()
|
|
|
|
+ },
|
|
|
|
+ choiceaInvoiceTwo() {
|
|
|
|
+ //取消普通发票.(可删除)
|
|
|
|
+ switch (this.peopleInvoiceData.invoiceTitleType) {
|
|
|
|
+ case '0':
|
|
|
|
+ if (this.peopleInvoiceData.invoiceContent == '') {
|
|
|
|
+ this.$util.msg('请选择商品明细', 2000)
|
|
|
|
+ return
|
|
}
|
|
}
|
|
- }
|
|
|
|
- switch(this.invoiceType){
|
|
|
|
- case '2':
|
|
|
|
- this.getUseFindInvoice()
|
|
|
|
- break
|
|
|
|
- //取消普通发票.(可删除)
|
|
|
|
- // case '3':
|
|
|
|
- // this.peopleInvoiceData.invoiceTitleType = "0"
|
|
|
|
- // this.titleCurrent = 0
|
|
|
|
- // break;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- radioChangeTitle(e) {
|
|
|
|
- this.peopleInvoiceData.invoiceTitleType = e.target.value
|
|
|
|
- for (let i = 0; i < this.invoiceTitleList.length; i++) {
|
|
|
|
- if (this.invoiceTitleList[i].value === this.peopleInvoiceData.invoiceTitleType) {
|
|
|
|
- this.titleCurrent = i
|
|
|
|
- break
|
|
|
|
|
|
+ if (this.peopleInvoiceData.invoiceTitle == '') {
|
|
|
|
+ this.$util.msg('请输入个人抬头', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ break
|
|
|
|
+ case '1':
|
|
|
|
+ if (this.peopleInvoiceData.invoiceContent == '') {
|
|
|
|
+ this.$util.msg('请选择商品明细', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (this.peopleInvoiceData.invoiceTitle == '') {
|
|
|
|
+ this.$util.msg('请输入公司抬头', 2000)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (this.peopleInvoiceData.corporationTaxNum == '') {
|
|
|
|
+ this.$util.msg('请输入纳税人识别号', 2000)
|
|
|
|
+ return
|
|
}
|
|
}
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ this.$emit('handleChoiceaInvoice', Object.assign(this.peopleInvoiceData, '', { type: 1 }))
|
|
|
|
+ this.hideSpec()
|
|
|
|
+ },
|
|
|
|
+ choiceaInvoiceThree() {
|
|
|
|
+ //不要发票
|
|
|
|
+ this.invoiceData = {}
|
|
|
|
+ this.$emit('handleChoiceaInvoice', Object.assign(this.invoiceData, '', { type: 0 }))
|
|
|
|
+ this.hideSpec()
|
|
|
|
+ },
|
|
|
|
+ hideSpec() {
|
|
|
|
+ //关闭弹窗
|
|
|
|
+ this.specClass = 'hide'
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.specClass = 'none'
|
|
|
|
+ }, 200)
|
|
|
|
+ },
|
|
|
|
+ hanldOperationConfim() {
|
|
|
|
+ //显示发票弹窗
|
|
|
|
+ this.specClass = 'show'
|
|
|
|
+ },
|
|
|
|
+ radioChange(e) {
|
|
|
|
+ this.invoiceType = e.target.value
|
|
|
|
+ for (let i = 0; i < this.invoiceTypeList.length; i++) {
|
|
|
|
+ if (this.invoiceTypeList[i].value === this.invoiceType) {
|
|
|
|
+ this.current = i
|
|
|
|
+ break
|
|
}
|
|
}
|
|
- switch(this.peopleInvoiceData.invoiceTitleType){
|
|
|
|
- case '1':
|
|
|
|
- this.inventoryChecked = false
|
|
|
|
- this.peopleInvoiceData.invoiceTitle = ''
|
|
|
|
- this.peopleInvoiceData.invoiceContent = ''
|
|
|
|
- break
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- checkboxChange(e){
|
|
|
|
- this.inventoryChecked = !this.inventoryChecked
|
|
|
|
- this.peopleInvoiceData.invoiceContent = e.detail.value[0]
|
|
|
|
- },
|
|
|
|
- inputBankNum(val) {
|
|
|
|
- if (/\S{5}/.test(val)) {
|
|
|
|
- this.invoiceData.bankAccountNo = val.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
|
|
|
|
|
|
+ }
|
|
|
|
+ switch (this.invoiceType) {
|
|
|
|
+ case '2':
|
|
|
|
+ this.getUseFindInvoice()
|
|
|
|
+ break
|
|
|
|
+ //取消普通发票.(可删除)
|
|
|
|
+ // case '3':
|
|
|
|
+ // this.peopleInvoiceData.invoiceTitleType = "0"
|
|
|
|
+ // this.titleCurrent = 0
|
|
|
|
+ // break;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ radioChangeTitle(e) {
|
|
|
|
+ this.peopleInvoiceData.invoiceTitleType = e.target.value
|
|
|
|
+ for (let i = 0; i < this.invoiceTitleList.length; i++) {
|
|
|
|
+ if (this.invoiceTitleList[i].value === this.peopleInvoiceData.invoiceTitleType) {
|
|
|
|
+ this.titleCurrent = i
|
|
|
|
+ break
|
|
}
|
|
}
|
|
- },
|
|
|
|
- discard(){
|
|
|
|
- //丢弃
|
|
|
|
}
|
|
}
|
|
|
|
+ switch (this.peopleInvoiceData.invoiceTitleType) {
|
|
|
|
+ case '1':
|
|
|
|
+ this.inventoryChecked = false
|
|
|
|
+ this.peopleInvoiceData.invoiceTitle = ''
|
|
|
|
+ this.peopleInvoiceData.invoiceContent = ''
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ checkboxChange(e) {
|
|
|
|
+ this.inventoryChecked = !this.inventoryChecked
|
|
|
|
+ this.peopleInvoiceData.invoiceContent = e.detail.value[0]
|
|
|
|
+ },
|
|
|
|
+ inputBankNum(val) {
|
|
|
|
+ if (/\S{5}/.test(val)) {
|
|
|
|
+ this.invoiceData.bankAccountNo = val.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ discard() {
|
|
|
|
+ //丢弃
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
- .invoice-template{
|
|
|
|
|
|
+.invoice-template {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ float: left;
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+ .invoice-title {
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ border-bottom: 1px solid #ebebeb;
|
|
|
|
+ .text {
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ }
|
|
|
|
+ .iconfont {
|
|
|
|
+ width: 50rpx;
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
+ color: #999999;
|
|
|
|
+ display: block;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .invoice-text {
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: #666666;
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
+ }
|
|
|
|
+ .invoice-ltitle {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: auto;
|
|
|
|
- background: #FFFFFF;
|
|
|
|
- float: left;
|
|
|
|
- margin-top: 24rpx;
|
|
|
|
- .invoice-title{
|
|
|
|
- width: 702rpx;
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
+ height: 60rpx;
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ color: #333333;
|
|
|
|
+ }
|
|
|
|
+ .invoice-radio {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ border-bottom: 1px solid #ebebeb;
|
|
|
|
+ .row-group {
|
|
|
|
+ flex: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
|
|
+ .row-input {
|
|
|
|
+ flex: 1;
|
|
height: 88rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
line-height: 88rpx;
|
|
- position: relative;
|
|
|
|
- border-bottom: 1px solid #EBEBEB;
|
|
|
|
- .text{
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
- color: $text-color;
|
|
|
|
- }
|
|
|
|
- .iconfont{
|
|
|
|
- width: 50rpx;
|
|
|
|
- height: 88rpx;
|
|
|
|
- line-height: 88rpx;
|
|
|
|
- color: #999999;
|
|
|
|
- display: block;
|
|
|
|
- position: absolute;
|
|
|
|
- right: 0;
|
|
|
|
- top: 0;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
- .invoice-text{
|
|
|
|
- width: 702rpx;
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
|
|
+ .row-radio {
|
|
|
|
+ float: left;
|
|
|
|
+ transform: scale(0.6);
|
|
|
|
+ }
|
|
|
|
+ .row-text {
|
|
font-size: $font-size-24;
|
|
font-size: $font-size-24;
|
|
- color: #666666;
|
|
|
|
- line-height: 60rpx;
|
|
|
|
|
|
+ color: $text-color;
|
|
}
|
|
}
|
|
- .invoice-ltitle{
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+ }
|
|
|
|
+ .invoice-main {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
+ &.from {
|
|
|
|
+ padding-bottom: 40rpx;
|
|
|
|
+ }
|
|
|
|
+ .invoice-none {
|
|
line-height: 60rpx;
|
|
line-height: 60rpx;
|
|
height: 60rpx;
|
|
height: 60rpx;
|
|
- font-size: $font-size-28;
|
|
|
|
- color: #333333;
|
|
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: #666666;
|
|
|
|
+ text-align: center;
|
|
}
|
|
}
|
|
- .invoice-radio{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 88rpx;
|
|
|
|
- line-height: 88rpx;
|
|
|
|
- display: flex;
|
|
|
|
- border-bottom: 1px solid #EBEBEB;
|
|
|
|
- .row-group{
|
|
|
|
- flex:1;
|
|
|
|
- display: flex;
|
|
|
|
- }
|
|
|
|
- .row-input{
|
|
|
|
- flex: 1;
|
|
|
|
- height: 88rpx;
|
|
|
|
- line-height: 88rpx;
|
|
|
|
- }
|
|
|
|
- .row-radio{
|
|
|
|
|
|
+ .invoice-from {
|
|
|
|
+ width: 662rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ align-items: flex-start;
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ background: #f7f7f7;
|
|
|
|
+ border-radius: 14rpx;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ .label {
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
float: left;
|
|
float: left;
|
|
- transform: scale(0.6);
|
|
|
|
}
|
|
}
|
|
- .row-text{
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $text-color;
|
|
|
|
|
|
+ .form-input {
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ padding-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .invoice-main{
|
|
|
|
|
|
+ .invoice-group {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: auto;
|
|
|
|
- margin-top: 30rpx;
|
|
|
|
- &.from{
|
|
|
|
- padding-bottom: 40rpx;
|
|
|
|
- }
|
|
|
|
- .invoice-none{
|
|
|
|
- line-height: 60rpx;
|
|
|
|
- height: 60rpx;
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: #666666;
|
|
|
|
- text-align: center;
|
|
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ border-bottom: 1px solid #ebebeb;
|
|
|
|
+ &.tit {
|
|
|
|
+ margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
- .invoice-from{
|
|
|
|
- width: 662rpx;
|
|
|
|
- height: 40rpx;
|
|
|
|
- padding: 20rpx;
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- align-items: flex-start;
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
- color: $text-color;
|
|
|
|
- background: #F7F7F7;
|
|
|
|
- border-radius: 14rpx;
|
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
- .label{
|
|
|
|
- height: 40rpx;
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- float: left;
|
|
|
|
- }
|
|
|
|
- .form-input{
|
|
|
|
|
|
+ &.from {
|
|
|
|
+ margin-bottom: 30rpx;
|
|
|
|
+ border-bottom: 1px solid #ffffff;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ display: block;
|
|
|
|
+ .group-from {
|
|
|
|
+ flex: 1;
|
|
height: 40rpx;
|
|
height: 40rpx;
|
|
|
|
+ padding: 20rpx;
|
|
line-height: 40rpx;
|
|
line-height: 40rpx;
|
|
- flex-grow: 1;
|
|
|
|
- padding-left: 20rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .invoice-group{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 88rpx;
|
|
|
|
- display: flex;
|
|
|
|
- border-bottom: 1px solid #EBEBEB;
|
|
|
|
- &.tit{
|
|
|
|
- margin-bottom: 30rpx;
|
|
|
|
- }
|
|
|
|
- &.from{
|
|
|
|
- margin-bottom: 30rpx;
|
|
|
|
- border-bottom: 1px solid #FFFFFF;
|
|
|
|
- flex-direction: row;
|
|
|
|
- display: block;
|
|
|
|
- .group-from{
|
|
|
|
- flex: 1;
|
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ background: #f7f7f7;
|
|
|
|
+ border-radius: 14rpx;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ .form-input {
|
|
height: 40rpx;
|
|
height: 40rpx;
|
|
- padding: 20rpx;
|
|
|
|
line-height: 40rpx;
|
|
line-height: 40rpx;
|
|
- align-items: flex-start;
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $text-color;
|
|
|
|
- background: #F7F7F7;
|
|
|
|
- border-radius: 14rpx;
|
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
- .form-input{
|
|
|
|
- height: 40rpx;
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- flex-grow: 1;
|
|
|
|
- }
|
|
|
|
|
|
+ flex-grow: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .row-group{
|
|
|
|
|
|
+ }
|
|
|
|
+ .row-group {
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
+ flex: 1;
|
|
|
|
+ .text {
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: $text-color;
|
|
line-height: 88rpx;
|
|
line-height: 88rpx;
|
|
- flex: 1;
|
|
|
|
- .text{
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $text-color;
|
|
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+ .row-radio {
|
|
|
|
+ float: right;
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ }
|
|
|
|
+ &.radio {
|
|
|
|
+ display: flex;
|
|
|
|
+ .row-input {
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 88rpx;
|
|
line-height: 88rpx;
|
|
line-height: 88rpx;
|
|
- float: left;
|
|
|
|
}
|
|
}
|
|
- .row-radio{
|
|
|
|
- float: right;
|
|
|
|
- transform: scale(0.8);
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
|
+ .row-radio {
|
|
|
|
+ float: left;
|
|
|
|
+ transform: scale(0.6);
|
|
}
|
|
}
|
|
- &.radio{
|
|
|
|
- display: flex;
|
|
|
|
- .row-input{
|
|
|
|
- flex: 1;
|
|
|
|
- height: 88rpx;
|
|
|
|
- line-height: 88rpx;
|
|
|
|
- }
|
|
|
|
- .row-radio{
|
|
|
|
- float: left;
|
|
|
|
- transform: scale(0.6);
|
|
|
|
- }
|
|
|
|
- .row-text{
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $text-color;
|
|
|
|
- }
|
|
|
|
|
|
+ .row-text {
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- /* 加入购物模态层*/
|
|
|
|
- @keyframes showPopup {
|
|
|
|
- 0% {
|
|
|
|
- opacity: 0;
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- opacity: 1;
|
|
|
|
- }
|
|
|
|
|
|
+}
|
|
|
|
+/* 加入购物模态层*/
|
|
|
|
+@keyframes showPopup {
|
|
|
|
+ 0% {
|
|
|
|
+ opacity: 0;
|
|
}
|
|
}
|
|
- @keyframes hidePopup {
|
|
|
|
- 0% {
|
|
|
|
- opacity: 1;
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- opacity: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ 100% {
|
|
|
|
+ opacity: 1;
|
|
}
|
|
}
|
|
- @keyframes showLayer {
|
|
|
|
- 0% {
|
|
|
|
- transform: translateY(0);
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- transform: translateY(-100%);
|
|
|
|
- }
|
|
|
|
|
|
+}
|
|
|
|
+@keyframes hidePopup {
|
|
|
|
+ 0% {
|
|
|
|
+ opacity: 1;
|
|
}
|
|
}
|
|
- @keyframes hideLayer {
|
|
|
|
- 0% {
|
|
|
|
- transform: translateY(-100%);
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- transform: translateY(0);
|
|
|
|
- }
|
|
|
|
|
|
+ 100% {
|
|
|
|
+ opacity: 0;
|
|
}
|
|
}
|
|
- @keyframes showAmnation {
|
|
|
|
- 0% {
|
|
|
|
- top: -12rpx;
|
|
|
|
- opacity: 0;
|
|
|
|
- }
|
|
|
|
- 50% {
|
|
|
|
- top: -60rpx;
|
|
|
|
- opacity: 1;
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- top: -100rpx;
|
|
|
|
- opacity: 0;
|
|
|
|
- }
|
|
|
|
|
|
+}
|
|
|
|
+@keyframes showLayer {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: translateY(0);
|
|
}
|
|
}
|
|
- @keyframes hideAmnation {
|
|
|
|
- 0% {
|
|
|
|
- top: -100rpx;
|
|
|
|
- opacity: 0;
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- top: -12rpx;
|
|
|
|
- opacity: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ 100% {
|
|
|
|
+ transform: translateY(-100%);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+@keyframes hideLayer {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: translateY(-100%);
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ transform: translateY(0);
|
|
}
|
|
}
|
|
- .popup {
|
|
|
|
|
|
+}
|
|
|
|
+@keyframes showAmnation {
|
|
|
|
+ 0% {
|
|
|
|
+ top: -12rpx;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+ 50% {
|
|
|
|
+ top: -60rpx;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ top: -100rpx;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+@keyframes hideAmnation {
|
|
|
|
+ 0% {
|
|
|
|
+ top: -100rpx;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ top: -12rpx;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.popup {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ display: none;
|
|
|
|
+ .mask {
|
|
position: fixed;
|
|
position: fixed;
|
|
top: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
- z-index: 999;
|
|
|
|
- display: none;
|
|
|
|
- .mask{
|
|
|
|
- position: fixed;
|
|
|
|
- top: 0;
|
|
|
|
|
|
+ z-index: 21;
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
+ }
|
|
|
|
+ .layer {
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 22;
|
|
|
|
+ bottom: -1010rpx;
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ padding: 24rpx 24rpx 65rpx 24rpx;
|
|
|
|
+ height: 920rpx;
|
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ align-content: space-between;
|
|
|
|
+ .content {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100%;
|
|
|
|
- z-index: 21;
|
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
}
|
|
}
|
|
- .layer {
|
|
|
|
- position: absolute;
|
|
|
|
- z-index: 22;
|
|
|
|
- bottom: -1010rpx;
|
|
|
|
- width: 702rpx;
|
|
|
|
- padding: 24rpx 24rpx 65rpx 24rpx;
|
|
|
|
- height: 920rpx;
|
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
|
- background-color: #fff;
|
|
|
|
|
|
+ .btn {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 88rpx;
|
|
display: flex;
|
|
display: flex;
|
|
- flex-wrap: wrap;
|
|
|
|
- align-content: space-between;
|
|
|
|
- .content {
|
|
|
|
- width: 100%;
|
|
|
|
- }
|
|
|
|
- .btn {
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+ .button {
|
|
|
|
+ width: 702rpx;
|
|
height: 88rpx;
|
|
height: 88rpx;
|
|
|
|
+ color: #fff;
|
|
display: flex;
|
|
display: flex;
|
|
- .button {
|
|
|
|
- width: 702rpx;
|
|
|
|
- height: 88rpx;
|
|
|
|
- color: #fff;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
- border-radius: 44rpx;
|
|
|
|
- background: $btn-confirm;
|
|
|
|
- }
|
|
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ border-radius: 44rpx;
|
|
|
|
+ background: $btn-confirm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- &.show {
|
|
|
|
- display: block;
|
|
|
|
- .mask{
|
|
|
|
- animation: showPopup 0.2s linear both;
|
|
|
|
- }
|
|
|
|
- .layer {
|
|
|
|
- animation: showLayer 0.2s linear both;
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &.show {
|
|
|
|
+ display: block;
|
|
|
|
+ .mask {
|
|
|
|
+ animation: showPopup 0.2s linear both;
|
|
}
|
|
}
|
|
- &.hide {
|
|
|
|
- display: block;
|
|
|
|
- .mask{
|
|
|
|
- animation: hidePopup 0.2s linear both;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .layer {
|
|
|
|
- animation: hideLayer 0.2s linear both;
|
|
|
|
- }
|
|
|
|
|
|
+ .layer {
|
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
}
|
|
}
|
|
- &.none {
|
|
|
|
- display: none;
|
|
|
|
|
|
+ }
|
|
|
|
+ &.hide {
|
|
|
|
+ display: block;
|
|
|
|
+ .mask {
|
|
|
|
+ animation: hidePopup 0.2s linear both;
|
|
}
|
|
}
|
|
- &.service {
|
|
|
|
- .row {
|
|
|
|
- margin: 30upx 0;
|
|
|
|
- .title {
|
|
|
|
- font-size: 30upx;
|
|
|
|
- margin: 10upx 0;
|
|
|
|
- }
|
|
|
|
- .description {
|
|
|
|
- font-size: 28upx;
|
|
|
|
- color: #999;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ .layer {
|
|
|
|
+ animation: hideLayer 0.2s linear both;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &.none {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ &.service {
|
|
|
|
+ .row {
|
|
|
|
+ margin: 30upx 0;
|
|
|
|
+ .title {
|
|
|
|
+ font-size: 30upx;
|
|
|
|
+ margin: 10upx 0;
|
|
|
|
+ }
|
|
|
|
+ .description {
|
|
|
|
+ font-size: 28upx;
|
|
|
|
+ color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .layer-smimg{
|
|
|
|
|
|
+ }
|
|
|
|
+ .layer-smimg {
|
|
|
|
+ width: 114rpx;
|
|
|
|
+ height: 114rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ margin-right: 24rpx;
|
|
|
|
+ image {
|
|
width: 114rpx;
|
|
width: 114rpx;
|
|
height: 114rpx;
|
|
height: 114rpx;
|
|
- float: left;
|
|
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
- margin-right: 24rpx;
|
|
|
|
- image{
|
|
|
|
- width: 114rpx;
|
|
|
|
- height: 114rpx;
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
- .layer-nunbox{
|
|
|
|
- justify-content: space-between;
|
|
|
|
- align-items: center;
|
|
|
|
- width: 536rpx;
|
|
|
|
- height: 88rpx;
|
|
|
|
- padding: 13rpx 0 0 0;
|
|
|
|
- float: left;
|
|
|
|
- .layer-nunbox-t{
|
|
|
|
- width: 100%;
|
|
|
|
- height:44rpx;
|
|
|
|
- position:relative;
|
|
|
|
|
|
+ }
|
|
|
|
+ .layer-nunbox {
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 536rpx;
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ padding: 13rpx 0 0 0;
|
|
|
|
+ float: left;
|
|
|
|
+ .layer-nunbox-t {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ display: flex;
|
|
|
|
+ .layer-nunbox-text {
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ }
|
|
|
|
+ .number-box {
|
|
display: flex;
|
|
display: flex;
|
|
- .layer-nunbox-text{
|
|
|
|
- line-height: 44rpx;
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .iconfont {
|
|
|
|
+ font-size: $font-size-32;
|
|
|
|
+ padding: 0 18rpx;
|
|
|
|
+ font-size: $text-color;
|
|
}
|
|
}
|
|
- .number-box{
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- .iconfont{
|
|
|
|
- font-size: $font-size-32;
|
|
|
|
- padding:0 18rpx;
|
|
|
|
- font-size: $text-color;
|
|
|
|
- }
|
|
|
|
- .btn-input{
|
|
|
|
- width: 62rpx;
|
|
|
|
- height: 48rpx;
|
|
|
|
- line-height: 48rpx;
|
|
|
|
- background: #F8F8F8;
|
|
|
|
- border-radius: 4rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .product-step{
|
|
|
|
- position: absolute;
|
|
|
|
- left: 45rpx;
|
|
|
|
- bottom: 0;
|
|
|
|
- height: 44rpx;
|
|
|
|
- background: #FFFFFF;
|
|
|
|
|
|
+ .btn-input {
|
|
|
|
+ width: 62rpx;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ line-height: 48rpx;
|
|
|
|
+ background: #f8f8f8;
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: $font-size-28;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .layer-nunbox-b{
|
|
|
|
- width: 100%;
|
|
|
|
- height:44rpx;
|
|
|
|
- margin-top: 13rpx;
|
|
|
|
|
|
+ .product-step {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 45rpx;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .layer-nunbox-b {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ margin-top: 13rpx;
|
|
|
|
+ }
|
|
|
|
+ .text {
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ .p {
|
|
|
|
+ color: #ff2a2a;
|
|
}
|
|
}
|
|
- .text{
|
|
|
|
- line-height: 44rpx;
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
- .p{
|
|
|
|
- color: #FF2A2A;
|
|
|
|
- }
|
|
|
|
- .p:first-child{
|
|
|
|
- margin-left: 30rpx;
|
|
|
|
- }
|
|
|
|
- .p.sm{
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- }
|
|
|
|
|
|
+ .p:first-child {
|
|
|
|
+ margin-left: 30rpx;
|
|
|
|
+ }
|
|
|
|
+ .p.sm {
|
|
|
|
+ font-size: $font-size-24;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|