dyqc_hdapp/packageB/invoice/addInvoice.vue
wangzimeng 76a5c7b4c7 发票抬头部分对完了和发票流程
草稿箱修复:编辑草稿箱里的内容时,弹窗内协议按钮直接亮起来;草稿箱里编辑信息,不填活动分类,点确认发布,没有“平台分类必填”的提示;不上传群二维码,点击确认上传后,没有反应
2025-07-11 18:25:24 +08:00

1010 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- <view>填写发票信息</view> -->
<view class="container">
<view class="invoiceInfo">
<view class="invoiceList-item flex" v-if="num == 1">
<view class="item-img">
<!-- <image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" src="../../static/index/about.png"
mode=""></image> -->
<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" :src="detail.images[0]" mode="">
</image>
</view>
<view class="item-con">
<view class="itenCon-actName" style="">{{detail.title}}</view>
<view class="itenCon-actPrice" style="">¥ {{detailAny.payprice}}</view>
</view>
</view>
<view v-else>
<view style="color: #3D3D3D;font-size: 26rpx;font-weight: 400;margin-top: 10rpx;">已选择{{num}}个订单 预计发票金额:¥
{{totalPrice}}</view>
<view style="color: #999999;font-size: 26rpx;font-weight: 400;margin-top: 10rpx;">预计金额仅作为参考,请以合并后的实际金额为准
</view>
</view>
</view>
<!-- 表单 -->
<view style="height: auto;">
<u-form :model="form" :rules="rules" ref="uForm" label-width="auto" labelPostition="left">
<view class="formBox">
<u-form-item label="发票类型" prop="invoice_type">
<view class="typeBOx" style="width: 300px;justify-content: flex-end;">
<view class="normalInv" @click="handleHeadTp1()">
<view class="typeImgs">
<image v-if="form.invoice_type == 'ordinary'" style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/check.png" mode=""></image>
<image v-else style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/nocheck.png" mode=""></image>
</view>
<view class="typeText">普通发票</view>
</view>
<view class="specialInv" @click="handleHeadTp2()">
<view class="typeImgs">
<image v-if="form.invoice_type == 'special'" style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/check.png" mode=""></image>
<image v-else style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/nocheck.png" mode=""></image>
</view>
<view class="typeText">专用发票</view>
</view>
</view>
</u-form-item>
<u-form-item label="发票内容" prop="">
<view class="typeBOx" style="width: 305px;justify-content: space-between;">
<view class="typeImgs" @click="explainShow = true">
<image style="width: 44rpx;height: 44rpx;" src="https://naweigetetest2.hschool.com.cn/miniapp/invoice/conRecord.png"
mode=""></image>
</view>
<view class="normalInv">
<view class="typeImgs">
<image style="width: 44rpx;height: 44rpx;" src="/static/fabu/check.png"
mode=""></image>
</view>
<view class="typeText">商品明细</view>
</view>
</view>
<!-- <image style="width: 38rpx;height: 38rpx;" src="/static/tips.png" mode=""></image> -->
<!-- <u-input inputAlign="right" v-model="form.password" placeholder="请输入密码" border="none"/> -->
</u-form-item>
<u-form-item label="抬头类型" prop="head_type">
<view class="typeBOx" style="width: 219px;justify-content: flex-end;">
<view class="normalInv" v-if="form.invoice_type == 'ordinary' || form.invoice_type == ''"
@click="handlePerson()">
<view class="typeImgs">
<image v-if="form.head_type == 'personal'" style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/check.png" mode=""></image>
<image v-else style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/nocheck.png" mode=""></image>
</view>
<view class="typeText">个人或事业单位</view>
</view>
<view class="specialInv" @click="handleCompany()">
<view class="typeImgs">
<image v-if="form.head_type == 'corporate'" style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/check.png" mode=""></image>
<image v-else style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/nocheck.png" mode=""></image>
</view>
<view class="typeText">企业</view>
</view>
</view>
</u-form-item>
<u-form-item label="发票抬头" prop="">
<view class="form_right" @click="openHeadShow()">
选择预设抬头类型
<u-icon name="arrow-right"></u-icon>
</view>
<!-- name和range-key绑定的值都是抬头类型的字段-->
<!-- <picker @change="clickUpTypeShow" name="invoice_header" :value="upTypelist" :range="upTypelist" range-key="invoice_header">
<view class="form_right">
选择预设抬头类型
<u-icon name="arrow-right"></u-icon>
</view>
</picker> -->
</u-form-item>
<u-form-item label="抬头名称" prop="invoice_header" required>
<u-input inputAlign="right" v-model="form.invoice_header" type="number" placeholder="请输入抬头名称"
border="none" />
</u-form-item>
<u-form-item label="单位税号" prop="tax_id" v-if="form.head_type == 'corporate'">
<u-input inputAlign="right" v-model="form.tax_id" type="number" placeholder="请输入单位税号"
border="none" />
</u-form-item>
<u-form-item label="注册地址" prop="enterprise_address" v-if="form.head_type == 'corporate'">
<u-input inputAlign="right" style="width:400rpx" v-model="form.enterprise_address" type="number" placeholder="必填"
border="none" />
</u-form-item>
<u-form-item label="注册电话" prop="enterprise_phone" v-if="form.invoice_type == 'special'">
<u-input inputAlign="right" v-model="form.enterprise_phone" type="number" placeholder="必填"
border="none" />
</u-form-item>
<u-form-item label="开户银行" prop="bank_deposit" v-if="form.head_type == 'corporate'">
<u-input inputAlign="right" v-model="form.bank_deposit" type="number" placeholder="必填"
border="none" />
</u-form-item>
<u-form-item label="银行账号" prop="bank_number" v-if="form.head_type == 'corporate'">
<u-input inputAlign="right" v-model="form.bank_number" type="number" placeholder="必填"
border="none" />
</u-form-item>
</view>
<!-- <view style="background-color: #f5f5f5;height: 40rpx;"></view> -->
<view class="recipientInfo">
<u-form-item label="手机号" prop="invoice_reservation_phone" required>
<u-input inputAlign="right" v-model="form.invoice_reservation_phone" type="number"
placeholder="请输入发票预留手机号" border="none" />
</u-form-item>
<u-form-item label="邮箱地址" prop="invoice_reservation_email" required>
<u-input inputAlign="right" v-model="form.invoice_reservation_email" type="number"
placeholder="请输入发票预留邮箱" border="none" />
</u-form-item>
</view>
<!--<u-form-item>
<u-button type="primary" @click="submit">申请开票</u-button>
</u-form-item>-->
</u-form>
<view style="width: 100%;height: 140rpx;"></view>
</view>
<!-- 提交按钮 -->
<view class="footer-btn">
<view class="invoiceBtn" @click.stop="submit()">
<view>申请开票</view>
</view>
</view>
<u-popup :show="headShow" :round="22" mode="bottom" @close="closeHeadShow" @open="openHeadShow"
:custom-style="popupStyletk">
<view class="popup_tkall">
<view class="popup_tk">选择预设抬头</view>
<scroll-view scroll-y="true" class="popup-content">
<view class="manageList" v-for="(item,index) in headList" :key="index">
<!-- 专用 -->
<view class="manageList-itemSpec" @click="selectHead(item,index)" style="">
<view class="manage-type" v-if="item.head_type == 'corporate'">专用发票抬头</view>
<view class="manage-type" v-else>个人发票抬头</view>
<view class="manageLine"></view>
<view class="manageCon">
<view class="messContext">
<view class="textFir">
<view class="defaultBox" v-if="item.is_default == 1">默认</view>
<view class="manageName">{{item.invoice_header}}</view>
</view>
<view class="textSec">{{item.tax_id}}</view>
</view>
<view class="manageEdit">
<image style="width: 50rpx;height: 50rpx;" src="https://naweigetetest2.hschool.com.cn/miniapp/invoice/manageEdit.png"
mode=""></image>
</view>
</view>
</view>
<!-- 个人
<view class="manageList-itemPer">
<view class="manage-type">个人发票抬头</view>
<view class="manageLine"></view>
<view class="manageCon">
<view class="messContext">
<view class="textFir">
<view class="defaultBox">
默认</view>
<view class="manageName">洛阳灵睿网络技术有限公司</view>
</view>
</view>
<view class="manageEdit">
<image style="width: 50rpx;height: 50rpx;" src="https://naweigetetest2.hschool.com.cn/miniapp/invoice/manageEdit.png"
mode=""></image>
</view>
</view>
</view>
-->
</view>
</scroll-view>
<view class="popup-footer">
<view class="headBtn" style="width: 90%;height: 90rpx;background-color: #323232;border-radius: 148rpx;color: #BBFC5B;font-size: 36rpx;
font-weight: 400;
line-height: 50rpx;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
text-transform: none;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
bottom: 66rpx;">
<view>添加抬头</view>
</view>
</view>
</view>
</u-popup>
<u-popup :show="explainShow" :round="22" mode="center" @close="explainShow = false" @open="explainShow = true"
:custom-style="popupStyRe">
<view class="popup_tkall" style="">
<view class="popup_tk">发票内容说明</view>
<view style="font-size: 28rpx;font-weight: 400;color: #3D3D3D;">
<view>·发票内容将显示详细商品名称与价格信息</view>
<view style="margin-top: 20rpx;">·部分商家可能开具发票内容为商品所属类别及价格信息如有特殊需求请向商家客服咨询</view>
</view>
<view class="popup-footer" style="display: flex;justify-content: center;align-items: center;margin-top: 40rpx;">
<view class="headBtn" style="width: 45%;height: 80rpx;background-color: #ffffff;border-radius: 148rpx;color: #999999;font-size: 36rpx;
font-weight: 400;
line-height: 50rpx;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
text-transform: none;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: 2rpx solid #999999" @click="explainShow = false">
<view>取消</view>
</view>
<view class="headBtn" style="width: 45%;height: 80rpx;background-color: #323232;border-radius: 148rpx;color: #BBFC5B;font-size: 36rpx;
font-weight: 400;
line-height: 50rpx;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
text-transform: none;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20rpx;" @click="explainShow = false">
<view>我已知晓</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
popupStyletk: {
width: '710rpx',
padding: '24rpx 24rpx 42rpx 24rpx',
height: '800rpx',
margin: '0 auto', // 水平居中
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
flexColumn: 'column'
},
popupStyRe: {
width: '540rpx',
padding: '24rpx 24rpx 42rpx 24rpx',
height: '384rpx',
margin: '0 auto', // 水平居中
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
flexColumn: 'column'
},
style: {
// 字符串的形式
img: 'width: 100%'
},
upTypelist: [], //抬头类型列表
id: 0,
order_no: '',
order_nos: '',
num: '',
form: {
order_nos: '',
head_type: '',
invoice_type: '',
invoice_header: '',
tax_id: '',
bank_deposit: '',
bank_number: '',
enterprise_address: '',
enterprise_phone: '',
invoice_reservation_phone: '',
invoice_reservation_email: ''
},
rules: {
// invoice_type: [{
// required: true,
// message: '请选择发票类型',
// trigger: 'blur'
// }],
invoice_header: [{
required: true,
// type: 'invoice_header',
message: '请输入抬头名称',
trigger: 'blur'
}],
// invoice_type: [{
// required: true,
// // type: 'invoice_type',
// message: '请选择抬头类型',
// trigger: 'blur'
// }],
invoice_reservation_phone: [{
required: true,
// type: 'invoice_reservation_phone',
message: '请输入发票预留手机号',
trigger: 'blur'
}],
invoice_reservation_email: [{
required: true,
message: '请输入发票预留邮箱',
trigger: 'blur'
}],
},
detail: '', //第二个detail
detailAny: '', //第一个detail
qrimages: '',
headShow: false, //预设抬头的遮罩
page: 1,
limit: 10,
headList: [],
selectHeadIndex: null,
totalPrice:0,
explainShow:false,//发票内容显隐
// keywords: '',
id: null,
order_no: null,
}
},
onLoad(options) {
console.log('options:', options.num, options.order_nos);
this.num = options.num
this.order_nos = options.order_nos
if (this.num == 1) {
this.id = options.id
console.log('id1', this.id);
this.getOrderInfo();
}else {
this.totalPrice = options.totalPrice
console.log('totalPrice:',this.totalPrice);
}
console.log('order_nos:', this.order_nos,'totalPrice:',this.totalPrice);
},
onReady() {
console.log('设置规则:', this.rules);
this.$refs.uForm.setRules(this.rules);
},
methods: {
getOrderInfo() {
console.log('id', this.id);
uni.$u.http.get('/api/school.newactivity.order/detail', {
params: {
id: this.id,
}
}).then(res => {
if (res.code == 1) {
this.detail = res.data.detail.detail;
// this.qrList = res.data.detail.ordercode;
this.qrimages = res.data.detail.ordercode;
this.detailAny = res.data.detail;
// this.generateAllQRCodes()
console.log('qrimages:', this.qrimages);
console.log('detailAny:', this.detailAny);
console.log('detail:', this.detail);
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}).catch(error => {});
},
handleHeadTp1() {
this.form.invoice_type = 'ordinary'
console.log('1-1', this.form.invoice_type);
},
handleHeadTp2() {
// this.$set(this.form.invoice_type = 'special')
this.form.invoice_type = 'special'
console.log('2-2', this.form.invoice_type);
},
handlePerson() {
console.log('1');
this.form.head_type = 'personal'
},
handleCompany() {
console.log('2');
this.form.head_type = 'corporate'
},
openHeadShow() {
this.headShow = true;
this.getHeadList();
},
closeHeadShow() {
this.headShow = false;
},
getHeadList() {
uni.$u.http.get('/api/school.header/header_list', {
params: {
// keywords: this.keywords,
page: this.page,
limit: this.limit,
}
}).then(res => {
if (res.code == 1) {
console.log('res:', res);
this.headList = res.data.list
console.log('headlist', this.headList[2]);
this.headShow = true;
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}).catch(error => {});
},
selectHead(item, index) {
console.log('index:', index, 'item:', item.head_type);
this.form.head_type = item.head_type
console.log('this.form.head_type', this.form.head_type);
// if(this.form.head_type == 'ordinary'){
// console.log('edfsd');
// this.form.tax_id = item.tax_id
// this.form.bank_deposit = item.bank_deposit
// this.form.bank_number = item.bank_number
// this.form.enterprise_address = item.enterprise_address
// this.form.enterprise_phone = item.enterprise_phone
// }
this.selectHeadIndex = index
this.form.invoice_type = item.invoice_type
this.form.invoice_header = item.invoice_header
this.form.invoice_reservation_phone = item.invoice_reservation_phone
this.form.invoice_reservation_email = item.invoice_reservation_email
this.form.tax_id = item.tax_id
this.form.bank_deposit = item.bank_deposit
this.form.bank_number = item.bank_number
this.form.enterprise_address = item.enterprise_address
this.form.enterprise_phone = item.enterprise_phone
console.log('5555',this.form);
this.closeHeadShow();
},
submit() {
console.log('sub1');
if (this.form.invoice_reservation_phone == '') {
uni.showToast({
title: '请输入手机号',
icon: 'none',
duration: 2000
})
return;
}
if (this.form.invoice_reservation_email == '') {
uni.showToast({
title: '请输入邮箱地址',
icon: 'none',
duration: 2000
})
return;
}
if (this.form.invoice_header == '') {
uni.showToast({
title: '请输入抬头名称',
icon: 'none',
duration: 2000
})
return;
}
if (this.form.head_type == 'corporate') {
console.log('判断');
if (this.form.tax_id == '') {
uni.showToast({
title: '请输入单位税号',
icon: 'none',
duration: 2000
})
return;
}
if (this.form.enterprise_address == '') {
uni.showToast({
title: '请输入企业注册地址',
icon: 'none',
duration: 2000
})
return;
}
if (this.form.enterprise_phone == '') {
uni.showToast({
title: '请输入企业注册电话',
icon: 'none',
duration: 2000
})
return;
}
if (this.form.bank_deposit == '') {
uni.showToast({
title: '请输入企业开户银行',
icon: 'none',
duration: 2000
})
return;
}
if (this.form.bank_number == '') {
uni.showToast({
title: '请输入银行账号',
icon: 'none',
duration: 2000
})
return;
}
}
console.log('submit:',this.order_nos);
// 如果存在意外引号,可以清理:
const cleanOrderNos = this.order_nos.replace(/^"+|"+$/g, '');
uni.$u.http.post('/api/school.header/apply', {
// order_nos: this.order_nos,
order_nos: cleanOrderNos,
head_type: this.form.head_type,
invoice_type: this.form.invoice_type,
invoice_header: this.form.invoice_header,
tax_id: this.form.tax_id,
bank_deposit: this.form.bank_deposit,
bank_number: this.form.bank_number,
enterprise_address: this.form.enterprise_address,
enterprise_phone: this.form.enterprise_phone,
invoice_reservation_phone: this.form.invoice_reservation_phone,
invoice_reservation_email: this.form.invoice_reservation_email
}).then(res => {
if (res.code == 1) {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 2000
})
setTimeout(() => {
uni.navigateBack()
// this.getInfo();
// uni.hideLoading();
}, 2000)
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}).catch(error => {});
},
},
}
</script>
<style lang="scss" scoped>
.custom-btn {
color: #bbfc5b !important;
}
.form_right {
display: flex;
align-items: center;
margin-left: auto;
color: #848484;
width: 300rpx;
padding: 0rpx 0rpx 0rpx 20rpx;
position: relative;
left: 2rpx;
font-size: 26rpx;
font-weight: 400;
text-align: right;
justify-content: flex-end;
}
.typeBOx {
display: flex;
align-items: center;
margin-left: auto;
.normalInv {
display: flex;
align-items: center;
justify-content: center;
.typeImgs {
width: 44rpx;
height: 44rpx;
}
.typeText {
font-size: 30rpx;
font-weight: 400;
color: #999999;
margin-left: 20rpx;
}
.typeText2 {
font-size: 30rpx;
font-weight: 400;
color: #323232;
margin-left: 20rpx;
}
}
.specialInv {
margin-left: 30rpx;
display: flex;
align-items: center;
justify-content: center;
.typeImgs {
width: 44rpx;
height: 44rpx;
}
.typeText {
font-size: 30rpx;
font-weight: 400;
color: #999999;
margin-left: 20rpx;
}
.typeText2 {
font-size: 30rpx;
font-weight: 400;
color: #323232;
margin-left: 20rpx;
}
}
}
.container {
padding: 40rpx 0;
background-color: #f5f5f5;
.invoiceInfo {
.invoiceList-item {
display: flex;
justify-content: left;
align-items: center;
background-color: #ffffff;
width: 100%;
// margin-top: 20rpx;
// padding: 20rpx;
height: 220rpx;
.item-img {
width: 170rpx;
height: 170rpx;
margin-left: 40rpx;
}
.item-con {
margin-left: 20rpx;
width: 60%;
height: 160rpx;
position: relative;
color: #323232;
.itenCon-actName {
position: absolute;
top: 0;
font-size: 28rpx;
font-weight: 400;
}
.itenCon-actPrice {
position: absolute;
bottom: 0;
font-size: 32rpx;
font-weight: 900;
}
}
}
}
.formBox {
// width: 100%;
margin-top: 30rpx;
background-color: #ffffff;
padding: 10rpx 20rpx;
border-radius: 20rpx;
}
.recipientInfo {
margin-top: 30rpx;
background-color: #ffffff;
padding: 10rpx 20rpx;
border-radius: 20rpx;
}
.footer-btn {
width: 95%;
padding: 20rpx 20rpx 60rpx;
display: flex;
position: fixed;
bottom: 0;
// left: 0;
right: -2rpx;
z-index: 99;
background-color: #ffffff;
color: #bbfc5b;
.invoiceBtn {
width: 90%;
height: 90rpx;
background-color: #323232;
border-radius: 148rpx;
color: #BBFC5B;
font-size: 36rpx;
font-weight: 400;
line-height: 50rpx;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
text-transform: none;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
bottom: 66rpx;
margin-left: 2%;
}
}
.popup_tkall {
background-color: #ffffff;
.popup_tk {
font-size: 32rpx;
font-weight: 500;
margin: 12rpx 0 24rpx 0;
text-align: center;
color: #3D3D3D;
}
.popup-content {
height: auto;
padding-bottom: 130rpx;
// overflow-y: auto;
.manageList {
width: 100%;
padding-top: 20rpx;
display: grid;
justify-content: center;
.manageList-itemSpec {
background-color: #f8f8f8;
padding: 20rpx 0;
width: 690rpx;
margin-bottom: 20rpx;
border-radius: 20rpx;
// margin-left: 5%;
// margin: 0 20rpx;
.manage-type {
width: 100%;
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
line-height: 32rpx;
// text-align: center;
font-style: normal;
text-transform: none;
margin: 20rpx;
}
.manageLine {
width: 100%;
height: 1rpx;
background: #EEEEEE;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.manageCon {
display: flex;
justify-content: space-between;
margin: 20rpx;
align-items: center;
.messContext {
display: block;
.textFir {
display: flex;
justify-content: left;
align-items: center;
.defaultBox {
width: 68rpx;
height: 32rpx;
background: #FFEEEE;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 1rpx solid #EB1B1B;
text-align: center;
font-size: 26rpx;
font-weight: 500;
margin-right: 10rpx;
}
.manageName {
// margin-left: 10rpx;
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
line-height: 32rpx;
font-style: normal;
text-transform: none;
}
}
.textSec {
margin-top: 20rpx;
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #999999;
line-height: 32rpx;
font-style: normal;
text-transform: none;
}
}
.manageEdit {
width: 50rpx;
height: 50rpx;
}
}
}
.manageList-itemPer {
background-color: #f8f8f8;
padding: 20rpx 0;
width: 90%;
margin-bottom: 20rpx;
border-radius: 20rpx;
margin-top: 20rpx;
margin-left: 5%;
.manage-type {
width: 100%;
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
line-height: 32rpx;
// text-align: center;
font-style: normal;
text-transform: none;
margin: 20rpx;
}
.manageLine {
width: 100%;
height: 1rpx;
background: #EEEEEE;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.manageCon {
display: flex;
justify-content: space-between;
margin: 20rpx;
align-items: center;
.messContext {
display: block;
.textFir {
display: flex;
justify-content: left;
align-items: center;
.defaultBox {
width: 68rpx;
height: 32rpx;
background: #FFEEEE;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 1rpx solid #EB1B1B;
text-align: center;
font-size: 26rpx;
font-weight: 500;
}
.manageName {
margin-left: 10rpx;
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
line-height: 32rpx;
font-style: normal;
text-transform: none;
}
}
.textSec {
margin-top: 20rpx;
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #999999;
line-height: 32rpx;
font-style: normal;
text-transform: none;
}
}
.manageEdit {
width: 50rpx;
height: 50rpx;
}
}
}
}
.popup-footer {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.headBtn {
width: 90%;
height: 90rpx;
background-color: #323232;
border-radius: 148rpx;
color: #BBFC5B;
font-size: 36rpx;
font-weight: 400;
line-height: 50rpx;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
text-transform: none;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
bottom: 66rpx;
margin-left: 2%;
}
}
}
}
}
</style>