|
|
@@ -0,0 +1,578 @@
|
|
|
+<script setup>
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+import dropdownText from '@/components/dropdown-text/index.vue'
|
|
|
+import {getInvoicePaymentList,updatePayType,setServiceAmount} from '@/api/financialStatistics'
|
|
|
+import {getSellerGroupList} from '@/api/crm'
|
|
|
+import {getServiceList} from '@/api/financialMana'
|
|
|
+import {downloadByFlow} from '@/utils/common-methods'
|
|
|
+
|
|
|
+
|
|
|
+ const dateTypeList=[{id:1,type:'开票时间'},{id:2,type:'到款时间'}]
|
|
|
+
|
|
|
+ const groupList=ref([])
|
|
|
+ const serviceList=ref([])
|
|
|
+
|
|
|
+ const searchParams=reactive({
|
|
|
+ current:1,
|
|
|
+ page_size:10,
|
|
|
+ keyword:'',
|
|
|
+ sell_group_id:'',
|
|
|
+ service_type:'',
|
|
|
+ start_date:'',
|
|
|
+ end_date:'',
|
|
|
+ // 1-开票时间 2-到款时间
|
|
|
+ time_type:1,
|
|
|
+ // 1-已开票
|
|
|
+ has_invoice:0,
|
|
|
+ // 1-已到款
|
|
|
+ has_payment:0,
|
|
|
+ is_export:0
|
|
|
+ })
|
|
|
+ const searchDate=ref(null)
|
|
|
+ watch(searchDate,(newVal)=>{
|
|
|
+ if(newVal){
|
|
|
+ searchParams.start_date=newVal[0]
|
|
|
+ searchParams.end_date=newVal[1]
|
|
|
+ }else{
|
|
|
+ searchParams.start_date=''
|
|
|
+ searchParams.end_date=''
|
|
|
+ }
|
|
|
+ searchCommodityP()
|
|
|
+ })
|
|
|
+
|
|
|
+ const commodityPData=reactive({
|
|
|
+ tableData:[],
|
|
|
+ total:25,
|
|
|
+ rowMergeArray:[],
|
|
|
+ invoiceAmountTotal:0,
|
|
|
+ invoiceAmountList:[],
|
|
|
+ placementAmountTotal:0,
|
|
|
+ placementAmountList:[],
|
|
|
+ })
|
|
|
+ // 开票金额是否收起
|
|
|
+ let invoiceIsFold=ref(true)
|
|
|
+
|
|
|
+ // 到款金额是否收起
|
|
|
+ let placementIsFold=ref(true)
|
|
|
+
|
|
|
+ // method
|
|
|
+
|
|
|
+ //获取销售组别
|
|
|
+ const getSellerGroupListFun=()=>{
|
|
|
+ getSellerGroupList().then(res=>{
|
|
|
+ groupList.value=res.data || []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 获取套餐列表
|
|
|
+ const getServiceListFun=()=>{
|
|
|
+ getServiceList().then(res=>{
|
|
|
+ serviceList.value=res.data || []
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const commodityPList=()=>{
|
|
|
+ // console.log(searchParams);
|
|
|
+ getInvoicePaymentList(searchParams).then(res=>{
|
|
|
+ // console.log(res);
|
|
|
+ commodityPData.tableData=[]
|
|
|
+ commodityPData.rowMergeArray=[]
|
|
|
+ let tempData = res.data.list.data_list || []
|
|
|
+ commodityPData.total = res.data.page.total
|
|
|
+ commodityPData.invoiceAmountTotal=res.data.list.invoice_total
|
|
|
+ commodityPData.invoiceAmountList = res.data.list.invoice_currency_total || []
|
|
|
+ commodityPData.placementAmountTotal=res.data.list.payment_total
|
|
|
+ commodityPData.placementAmountList = res.data.list.payment_currency_total || []
|
|
|
+ tempData.map((item,index) =>{
|
|
|
+ commodityPData.rowMergeArray.push(item.invoice_payment_list.length)
|
|
|
+ item.invoice_payment_list.map((it,ind) =>{
|
|
|
+ if(ind-1>=0){
|
|
|
+ commodityPData.rowMergeArray.push(0)
|
|
|
+ }
|
|
|
+ commodityPData.tableData.push({
|
|
|
+ serialNumber:searchParams.page_size*(searchParams.current-1)+index+1,
|
|
|
+ ...item,date:item.start_date+'至'+item.end_date,...it
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // console.log(commodityPData.tableData);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const searchCommodityP=()=>{
|
|
|
+ searchParams.current=1
|
|
|
+ commodityPList()
|
|
|
+ }
|
|
|
+
|
|
|
+ const dateTypeCommand=(id)=>{
|
|
|
+ if(id == searchParams.time_type) return
|
|
|
+ searchParams.time_type=id
|
|
|
+ searchCommodityP()
|
|
|
+ // console.log(id);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换每页的数量
|
|
|
+ const changePageSize=(pageSize)=>{
|
|
|
+ searchParams.page_size = pageSize
|
|
|
+ commodityPList()
|
|
|
+ }
|
|
|
+ const changePageNo = (pageNo)=>{
|
|
|
+ searchParams.current = pageNo
|
|
|
+ commodityPList()
|
|
|
+ }
|
|
|
+
|
|
|
+ const dataExport=()=>{
|
|
|
+ getInvoicePaymentList({...searchParams,is_export:1}).then(res=>{
|
|
|
+ downloadByFlow(res,'xlsx',`商品到款统计列表`)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 是否已开票或已到款 改变
|
|
|
+ const haveIAndPChange=(value,prop)=>{
|
|
|
+ searchParams[prop]=value?1:0
|
|
|
+ searchCommodityP()
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 单元格合并
|
|
|
+ const cellMerge=({ row,column,rowIndex,columnIndex})=>{
|
|
|
+ // console.log({ row,column,rowIndex,columnIndex});
|
|
|
+ if([0,1,2,3].includes(columnIndex)){
|
|
|
+ const _row = commodityPData.rowMergeArray[rowIndex];
|
|
|
+ return {
|
|
|
+ rowspan: _row,
|
|
|
+ colspan: 1
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 自定义表格行的类名
|
|
|
+ const tableRowClassName=({ row, rowIndex })=>{
|
|
|
+ if (row.serialNumber%2 === 1) {
|
|
|
+ return 'back-color-row'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ // 开票到款金额展开收起
|
|
|
+ const foldOrUnfold=(type)=>{
|
|
|
+ // type: 0-开票 1-到款
|
|
|
+ if(type){
|
|
|
+ placementIsFold.value = !placementIsFold.value
|
|
|
+ }else{
|
|
|
+ invoiceIsFold.value = !invoiceIsFold.value
|
|
|
+ }
|
|
|
+ console.log(type,invoiceIsFold.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ // -----------------------------------------------------弹窗
|
|
|
+ // ---------------------------------编辑付款方式
|
|
|
+ const payTypeArray=[{id:0,type:'无'},{id:1,type:'年付'},{id:2,type:'半年付'},{id:3,type:'季付'},{id:4,type:'次付'},{id:5,type:'异常'}]
|
|
|
+ // 可以选择的付款方式
|
|
|
+ const selectablePayTypeArray=[{id:1,type:'年付'},{id:2,type:'半年付'},{id:3,type:'季付'},{id:4,type:'次付'}]
|
|
|
+
|
|
|
+ const editPayTypeRef=ref(null)
|
|
|
+ const editPayTypeDia=reactive({
|
|
|
+ diaShow:false,
|
|
|
+ form:{
|
|
|
+ contract_payment_id:'',
|
|
|
+ pay_type:'',
|
|
|
+ index:0
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const editPayType=(row,index)=>{
|
|
|
+ editPayTypeDia.form.index=index
|
|
|
+ editPayTypeDia.form.pay_type=''
|
|
|
+ editPayTypeDia.form.contract_payment_id=row.payment_id
|
|
|
+ setTimeout(()=>{
|
|
|
+ editPayTypeRef.value && editPayTypeRef.value.clearValidate()
|
|
|
+ },0)
|
|
|
+ editPayTypeDia.diaShow=true
|
|
|
+ }
|
|
|
+ // 提交
|
|
|
+ const editPayTypeSubmit=()=>{
|
|
|
+ editPayTypeRef.value.validate((valid)=>{
|
|
|
+ if(valid){
|
|
|
+ updatePayType(editPayTypeDia.form).then(res=>{
|
|
|
+ ElMessage.success('编辑成功')
|
|
|
+ commodityPData.tableData[editPayTypeDia.form.index].pay_type=editPayTypeDia.form.pay_type
|
|
|
+ editPayTypeDia.diaShow=false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // ---------------------------------编辑付款方式
|
|
|
+ // --------------------------------设置套餐信息
|
|
|
+ const setServiceInfoDia=reactive({
|
|
|
+ diaShow:false,
|
|
|
+ dataForm:{
|
|
|
+ contract_register_id:'',
|
|
|
+ contract_payment_id:'',
|
|
|
+ list:[]
|
|
|
+ },
|
|
|
+ placementAmount:0
|
|
|
+ })
|
|
|
+
|
|
|
+ let rowItem={}
|
|
|
+
|
|
|
+ const setServiceInfo=(row)=>{
|
|
|
+ rowItem=row
|
|
|
+ setServiceInfoDia.dataForm.contract_register_id=row.contract_register_id
|
|
|
+ setServiceInfoDia.dataForm.contract_payment_id=row.payment_id
|
|
|
+ setServiceInfoDia.dataForm.list=row.service_amount_list?JSON.parse(JSON.stringify(row.service_amount_list)):[]
|
|
|
+ setServiceInfoDia.placementAmount=row.payment_amount
|
|
|
+ setServiceInfoDia.diaShow=true
|
|
|
+ }
|
|
|
+
|
|
|
+ const serviceAmountChange=(item)=>{
|
|
|
+ // console.log(item);
|
|
|
+ if(!item.amount.trim()){
|
|
|
+ item.amount=0
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let value = item.amount
|
|
|
+ if(!((value.endsWith('.') && value.indexOf('.')==(value.length-1)) ||
|
|
|
+ (value.endsWith('0') && value.indexOf('.')==(value.length-2)))){
|
|
|
+ item.amount = parseFloat(item.amount)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const setServiceInfoSubmit=()=>{
|
|
|
+ console.log(setServiceInfoDia.dataForm);
|
|
|
+ let totalAmout=0
|
|
|
+ setServiceInfoDia.dataForm.list.map(item =>{
|
|
|
+ totalAmout= Math.round(item.amount*100 + totalAmout*100)/100
|
|
|
+ })
|
|
|
+ if(totalAmout>setServiceInfoDia.placementAmount){
|
|
|
+ ElMessage.warning('套餐总金额大于到款金额，请检查')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ setServiceAmount(setServiceInfoDia.dataForm).then(res=>{
|
|
|
+ rowItem.service_amount_list=setServiceInfoDia.dataForm.list
|
|
|
+ ElMessage.success('设置套餐信息成功')
|
|
|
+ setServiceInfoDia.diaShow=false
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // --------------------------------设置套餐信息
|
|
|
+ // -----------------------------------------------------弹窗
|
|
|
+
|
|
|
+
|
|
|
+ // created
|
|
|
+ getSellerGroupListFun()
|
|
|
+ getServiceListFun()
|
|
|
+ commodityPList()
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div id="commodity-payment-container" class="commodity-payment-container">
|
|
|
+ <div class="search-zone">
|
|
|
+ <el-input v-model="searchParams.keyword" placeholder="请输入客户名称/销售" clearable
|
|
|
+ @input="searchCommodityP" :prefix-icon="Search" style="width: 286px;margin: 0 30px 10px 0;" ></el-input>
|
|
|
+ <el-select v-model="searchParams.sell_group_id" placeholder="请选择销售组别" clearable style="width: 240px;margin: 0 30px 10px 0;"
|
|
|
+ @change="searchCommodityP">
|
|
|
+ <el-option :label="item.group_name" :value="item.group_id" v-for="item in groupList"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="searchParams.service_type" placeholder="请选择套餐信息" clearable style="width: 240px;margin: 0 30px 10px 0;"
|
|
|
+ @change="searchCommodityP">
|
|
|
+ <el-option :label="item.title" :value="item.service_template_id" v-for="item in serviceList"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker v-model="searchDate" type="daterange" style="max-width: 240px;margin: 0 20px 10px 0;"
|
|
|
+ value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
|
+ <el-dropdown size="large" trigger="click" style="margin:0 60px 10px 0;" @command="dateTypeCommand">
|
|
|
+ <dropdownText>
|
|
|
+ {{dateTypeList.find(it => it.id==searchParams.time_type).type}}
|
|
|
+ </dropdownText>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item :command="item.id" v-for="item in dateTypeList" :key="item.id">{{ item.type }}</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ <div class="search-checkbox" >
|
|
|
+ <el-checkbox label="已开票" @change="(value)=>haveIAndPChange(value,'has_invoice')"></el-checkbox>
|
|
|
+ <el-checkbox el-checkbox label="已到款" @change="(value)=>haveIAndPChange(value,'has_payment')"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operation-zone">
|
|
|
+ <div class="amount-show-zone">
|
|
|
+ <div class="amount-show-item">
|
|
|
+ <div class="amount-item-head" @click="foldOrUnfold(0)">
|
|
|
+ <div class="amount-item-head-title">
|
|
|
+ 已开票合计金额（换算后）：{{ commodityPData.invoiceAmountTotal }}（元）
|
|
|
+ </div>
|
|
|
+ <span class="amount-item-head-icon">
|
|
|
+ {{ invoiceIsFold?'展开':'收起' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="amount-item-body-package" :style="{height:invoiceIsFold?'0':'66px'}">
|
|
|
+ <div class="amount-item-body">
|
|
|
+ <div class="amount-item-body-box" v-for="item in commodityPData.invoiceAmountList" :key="item.code">
|
|
|
+ <img :src="item.flag_img" style="height: 40px;width: 40px;margin-right: 20px;" />
|
|
|
+ <div class="amount-item-body-info">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span>{{ item.amount }}（{{ item.unit_name }}）</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="amount-show-item">
|
|
|
+ <div class="amount-item-head" @click="foldOrUnfold(1)">
|
|
|
+ <div class="amount-item-head-title">
|
|
|
+ 已到款合计金额（换算后）：{{ commodityPData.placementAmountTotal }}（元）
|
|
|
+ </div>
|
|
|
+ <span class="amount-item-head-icon">
|
|
|
+ {{ placementIsFold?'展开':'收起' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="amount-item-body-package" :style="{height:placementIsFold?'0':'66px'}">
|
|
|
+ <div class="amount-item-body">
|
|
|
+ <div class="amount-item-body-box" v-for="item in commodityPData.placementAmountList" :key="item.code">
|
|
|
+ <img :src="item.flag_img" style="height: 40px;width: 40px;margin-right: 20px;" />
|
|
|
+ <div class="amount-item-body-info">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span>{{ item.amount }}（{{ item.unit_name }}）</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button @click="dataExport" style="margin-bottom: 10px;" size="large" class="element-common-button">导出</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="table-zone">
|
|
|
+ <el-table :data="commodityPData.tableData" border ref="tableRef"
|
|
|
+ max-height="600" :row-class-name="tableRowClassName" :span-method="cellMerge">
|
|
|
+ <el-table-column label="序号" align="center" prop="serialNumber" >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户名称" prop="company_name" align="center" show-overflow-tooltip ></el-table-column>
|
|
|
+ <el-table-column label="是否新客户" prop="new_company" align="center">
|
|
|
+ <template #default="{row}">
|
|
|
+ {{ row.new_company==1?'是':'否' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="合同有效期" prop="date" align="center" show-overflow-tooltip ></el-table-column>
|
|
|
+ <el-table-column label="开票日" show-overflow-tooltip prop="invoice_time" align="center" id="spc-column"></el-table-column>
|
|
|
+ <el-table-column label="开票金额" prop="invoice_amount" align="center"></el-table-column>
|
|
|
+ <el-table-column label="到款日" show-overflow-tooltip prop="payment_date" align="center"></el-table-column>
|
|
|
+ <el-table-column label="到款金额" prop="payment_amount" align="center"></el-table-column>
|
|
|
+ <el-table-column label="付款方式" prop="pay_type" align="center">
|
|
|
+ <template #default="{row,$index}">
|
|
|
+ <span v-if="row.pay_type!='5'">{{ row.pay_type!=0?payTypeArray[row.pay_type].type:'' }}</span>
|
|
|
+ <span v-else @click="editPayType(row,$index)"
|
|
|
+ style="cursor: pointer;display: flex;align-items: center;justify-content: center;">
|
|
|
+ <span style="color: var(--dangerColor);">{{ payTypeArray[row.pay_type].type }}</span>
|
|
|
+ <svg-Icon name="svgIcon-common-edit" size="13"
|
|
|
+ style="position: absolute;right: 4px;top: 50%;transform: translateX(-50%) translateY(-50%);" ></svg-Icon>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="销售" prop="seller_name" align="center"></el-table-column>
|
|
|
+ <el-table-column label="组别" prop="seller_group_name" align="center"></el-table-column>
|
|
|
+ <el-table-column label="套餐信息" prop="services_name" align="center">
|
|
|
+ <template #default="{row}">
|
|
|
+ <span v-if="row.payment_amount&&row.payment_amount!=0" @click="setServiceInfo(row)"
|
|
|
+ style="cursor: pointer;color: var(--themeColor);">{{ row.services_name }}</span>
|
|
|
+ <span v-else style="color: #666;">{{ row.services_name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <div class="table-no-data">
|
|
|
+ <img src="@/assets/img/icon/empty-data.png" />
|
|
|
+ <span>暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <m-page :pageSize="searchParams.page_size" :page_no="searchParams.current"
|
|
|
+ style="display: flex;justify-content: flex-end;margin-top: 20px;"
|
|
|
+ :total="commodityPData.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
|
|
|
+ </div>
|
|
|
+ <!-- 编辑付款方式弹窗 -->
|
|
|
+ <el-dialog title="编辑付款方式" v-model="editPayTypeDia.diaShow" width="492"
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <div style="display: flex;justify-content: center;">
|
|
|
+ <el-form :model="editPayTypeDia.form" ref="editPayTypeRef" style="display: flex;justify-self: center">
|
|
|
+ <el-form-item label="付款方式" prop="pay_type" :rules="{required:true,message:'请选择付款方式',trigger:'change'}">
|
|
|
+ <el-select v-model="editPayTypeDia.form.pay_type" placeholder="请选择付款方式" style="width: 286px;">
|
|
|
+ <el-option :label="item.type" :value="item.id" v-for="item in selectablePayTypeArray" :key="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <div style="padding: 10px 0;">
|
|
|
+ <el-button @click="editPayTypeDia.diaShow = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="editPayTypeSubmit">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 设置套餐信息弹窗 -->
|
|
|
+ <el-dialog title="套餐信息" v-model="setServiceInfoDia.diaShow" width="774"
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <div class="serviceInf-table" :style="{'height':Math.ceil(setServiceInfoDia.dataForm.list.length/2)*50+'px'}">
|
|
|
+ <div class="serviceInf-table-item" v-for="item in setServiceInfoDia.dataForm.list" :key="item.serviceId">
|
|
|
+ <div class="serviceInfo-label">{{ item.service_template_name }}</div>
|
|
|
+ <div class=" serviceInfo-label serviceInfo-input" id="serviceInfo-input">
|
|
|
+ <el-input v-model="item.amount" placeholder="请输入金额" style="width: 124px;height: 28px;" @input="serviceAmountChange(item)"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="serviceInf-table-item" v-show="setServiceInfoDia.dataForm.list.length%2!=0">
|
|
|
+ <div class="serviceInfo-label"></div>
|
|
|
+ <div class=" serviceInfo-label serviceInfo-input" id="serviceInfo-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <div style="padding: 10px 0;">
|
|
|
+ <el-button @click="setServiceInfoDia.diaShow = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="setServiceInfoSubmit">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ #commodity-payment-container{
|
|
|
+ min-height: 100%;
|
|
|
+ .search-zone{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .search-checkbox{
|
|
|
+ // margin-left: 60px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operation-zone{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ .amount-show-zone{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // padding-left: 20px;
|
|
|
+ .amount-show-item{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ box-shadow: 0px 4px 12px rgba(153, 153, 153, 0.08);
|
|
|
+ border-radius: 8px;
|
|
|
+ // height: 132px;
|
|
|
+ width: 725px;
|
|
|
+ margin-right: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // padding-bottom: 16px;
|
|
|
+ .amount-item-head{
|
|
|
+ padding: 20px 20px 20px 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ cursor: pointer;
|
|
|
+ .amount-item-head-title{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .amount-item-head-icon{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: $themeColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .amount-item-body-package{
|
|
|
+ overflow: hidden;
|
|
|
+ transition: height 0.1s ease;
|
|
|
+ .amount-item-body{
|
|
|
+ padding: 6px 20px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .amount-item-body-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 220px;
|
|
|
+ .amount-item-body-info{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ span{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: $secondaryTextColor;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ &:last-child{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ color: $mainTextColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .serviceInf-table{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 644px;
|
|
|
+ // height: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-top: solid 1px $auxiliaryColor ;
|
|
|
+ border-left: solid 1px $auxiliaryColor ;
|
|
|
+ .serviceInf-table-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .serviceInfo-label{
|
|
|
+ width: 140px;
|
|
|
+ height: 50px;
|
|
|
+ border-right: solid 1px $auxiliaryColor ;
|
|
|
+ border-bottom: solid 1px $auxiliaryColor ;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .serviceInfo-input{
|
|
|
+ width: 182px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+#commodity-payment-container{
|
|
|
+ #serviceInfo-input{
|
|
|
+ .el-input__wrapper{
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// .dropdown-text{
|
|
|
+// &:hover{
|
|
|
+// background-color: #c4b565;
|
|
|
+// border-color: #c4b565;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+</style>
|
hbchen
