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.
 
 
 
 
 

856 lines
26 KiB

<template>
<view class="regist-page b-flex-y b-flex-c">
<form @submit="formSubmit" @reset="formReset">
<view class="r-main-view b-flex-y b-flex-c">
<!-- 注册资料填写 -->
<view class="r-box">
<text class="rb-title">品牌信息</text>
<view class="rb-input-box b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">品牌名称<text>*</text></view>
<input class="rb-input" type="text" v-model="submitData.brand_name" name="pinpai_name"
placeholder="请输入品牌名称" placeholder-class="input-hold-class"></input>
</view>
</view>
<!-- 企业名称,企业类型,主体类型,信用代码,证件有效期,注册地址,注册资本,法人姓名 -->
<view class="r-box">
<text class="rb-title">企业信息</text>
<view class="rb-upload-box b-flex-y b-flex-s">
<view class="rb-upload-title b-flex-x">营业执照<text>*</text></view>
<view class="rb-upload-list b-flex-x">
<view class="rb-upload-item b-flex-y b-flex-c" @click="clickUploadLicenseImg">
<image class="rb-upload-bg" src="../../static/regist/upload_bg.png"
:src="submitData.business_license?submitData.business_license:localImg.license"></image>
<image class="rb-upload-cam" src="../../static/regist/camera.png"></image>
<text class="rb-input-img-text">点击上传</text>
</view>
</view>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">企业名称<text>*</text></view>
<input class="rb-input" v-model="submitData.company_name" name="qiye_name" type="text"
placeholder="请输入企业名称" placeholder-class="input-hold-class"></input>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">企业类型<text>*</text></view>
<picker mode="selector" @change="bindPickerChange_company_types"
:value="company_types_arr[company_type_index]" :range="company_types_arr">
<input @click="" class="rb-input" disabled=true v-model="company_type_show" type="text"
name="qiye_type" placeholder="请选择" placeholder-class="input-hold-class">
</input>
</picker>
<text class="b-icon icon-right b-t-gray b-t-28"></text>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">主体类型<text>*</text></view>
<picker mode="selector" @change="bindPickerChange_qualification"
:value="qualification_types_arr[qualification_type_index]"
:range="qualification_types_arr">
<input @click="" class="rb-input" disabled=true v-model="qualification_type_show"
type="text" name="zhuti_type" placeholder="请选择" placeholder-class="input-hold-class">
</input>
</picker>
<text class="b-icon icon-right b-t-gray b-t-28"></text>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">信用代码<text>*</text></view>
<input class="rb-input" v-model="submitData.agency_code" type="text" name="xinyong_code"
placeholder="请输入信用代码" placeholder-class="input-hold-class"></input>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">证件有效期<text>*</text></view>
<view class="rb-radio b-flex-x">
<radio-group @change="idTimeChange">
<radio value="0" checked style="transform:scale(0.9)" color="#009876">长期</radio>
<radio value="1" style="transform:scale(0.9);margin-left: 40rpx;" color="#009876">短期
</radio>
</radio-group>
</view>
</view>
<!-- :value="qualification_types_arr[qualification_type_index]"
:range="qualification_types_arr" -->
<!-- :value="areaValue" :range="areaOptions" -->
<!-- <view class="rb-input-box b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">注册地址<text>*</text></view>
<picker mode="region"
@change="bindPickerChange_address"
>
</picker>
<input class="rb-input" v-model="submitData.mailing_address" type="text" placeholder="请输入注册地址"
placeholder-class="input-hold-class"></input>
</view> -->
<view class="rb-input-box b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">注册地址<text>*</text></view>
<picker mode="region" @change="bindPickerChange_address">
<input @click="" class="rb-input" disabled=true v-model="areaValueShow"
type="text" name="zhuti_type" placeholder="请选择" placeholder-class="input-hold-class">
</input>
</picker>
<text class="b-icon icon-right b-t-gray b-t-28"></text>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<!-- <view class="rb-input-title b-flex-x">注册地址<text>*</text></view> -->
<input @click="" class="rb-input" v-model="submitData.mailing_address"
type="text" name="zhuti_type" placeholder="请选择" placeholder-class="input-hold-class">
</input>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">注册资本<text>*</text></view>
<input class="rb-input" v-model="submitData.extension.registered_capital" type="text" placeholder="请输入注册资本"
placeholder-class="input-hold-class"></input>
</view>
<view class="rb-input-box b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">法人姓名<text>*</text></view>
<input class="rb-input" v-model="submitData.extension.legal_person_name" type="text" placeholder="请输入法人姓名"
placeholder-class="input-hold-class"></input>
</view>
</view>
<!-- 运营人员信息:姓名,身份证号,手机号 -->
<view class="r-box">
<text class="rb-title">运营人员信息</text>
<view class="rb-upload-box b-flex-y b-flex-s">
<view class="rb-upload-title b-flex-x">运营人员身份证正反面<text>*</text></view>
<view class="rb-upload-list b-flex-x b-flex-a">
<view @click="clickUploadIDCardImg" class="rb-upload-item idcard-width-170 b-flex-y b-flex-c">
<image class="rb-upload-bg " src="../../static/regist/id_people.png"
:src="submitData.extension.business_id_card_url?submitData.extension.business_id_card_url:localImg.idCardFront"></image>
<image class="rb-upload-cam" src="../../static/regist/camera.png"></image>
<text class="rb-input-img-text">上传身份证头像面</text>
</view>
<view @click="clickUploadIDCardBackImg" class="rb-upload-item idcard-width-170 b-flex-y b-flex-c">
<image class="rb-upload-bg " src="../../static/regist/id_guohui.png"
:src="submitData.extension.business_id_card_back_url?submitData.extension.business_id_card_back_url:localImg.idCardBack"></image>
<image class="rb-upload-cam" src="../../static/regist/camera.png"></image>
<text class="rb-input-img-text">上传身份证国徽面</text>
</view>
</view>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">姓名<text>*</text></view>
<input class="rb-input" v-model="submitData.contact_person" type="text" placeholder="请输入姓名"
placeholder-class="input-hold-class"></input>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">身份证号<text>*</text></view>
<input class="rb-input" v-model="submitData.extension.business_id_card" type="text" placeholder="请输入身份证号"
placeholder-class="input-hold-class"></input>
</view>
<view class="rb-input-box rb-line b-flex-x b-flex-b">
<view class="rb-input-title b-flex-x">手机号<text>*</text></view>
<input class="rb-input" v-model="submitData.contact_number" type="text" placeholder="请输入手机号"
placeholder-class="input-hold-class"></input>
</view>
</view>
<button form-type="submit" @click="submitRegist" class="rb-regist-btn b-btn b-btn-green b-mt-60 b-mb-60"
style="width: 100%;height: 112rpx;">提交审核</button>
</view>
</form>
</view>
</template>
<script>
import util from '@/utils/util.js';
import { getCnArea } from '../../../party/js/api';
// import { getCnArea } from '../../../party/js/china-area';
import { API } from '@/js/api';
import { servers } from '@/js/server';
import party_api from '../../../party/js/api';
import {
mapState
} from 'vuex'
export default {
components: {
// 'hoverCartList': hoverCartList ,
},
data() {
return {
// zhuti_type_arr:this.get_zhuti_type_arr(),
formData: {
pinpai_name: "", //品牌名称
//企业信息
yingyezhizhao: "", //营业执照
qiye_name: "", //企业名称
qiye_type: "", //企业类型
zhuti_type: "0", //主体类型
qualification_type_show: "请选择", //主体类型
qualification_type_index: 0, //主体类型
xinyong_code: "", //信用代码
id_time: "0", //证件有效期 0:长期 1:短期
zhuce_address: "", //注册地址
zhuce_ziben: "", //注册资本
faren_name: "", //法人姓名
//运营人员信息
id_people: "", //运营人员身份证正面
id_guohui: "", //运营人员身份证国徽面
oper_name: "", //姓名
oper_id: "", //身份证号
oper_mobile: "", //手机号
},
submitData: {
// qualification_type: null, // 主体类型
// credit_end_date: '', // 营业执照有效期,格式:2006-01-02,永久用 0 表示
// company_type: null, // 企业类型
// legal_person_name: '', // 法人姓名
// registered_province_code: '', // int 省份编号 110000
// registered_city_code: '', // int 城市编号 110100
// registered_capital: undefined, // 注册资本,单位元 100000
// business_id_card_url: '', // 运营人员身份证图片
// business_id_card: '', // 运营人员身份证号
// "business_user_code": "",//
"mobile": "",
"status": 2,
"update_status": 1,
"update_pre_web_brand_user": null,
"brand_name": "", //品牌名称
"company_name": "", //企业名称
"business_license": "",
"agency_code": "",//信用代码
"province": "",
"city": "",
"area": "",
"mailing_address": "",//通讯地址
"contact_number": "",//联系电话
// "contact_address": "",//联系地址
"contact_person": "",//运营人员姓名
// "privacy_agreement": "隐私政策2020-11-23",//隐私政策
// "vip_probation": "",//vip试用
// "reasons_for_failing_the_review": "",//审核失败原因
// "other_info": null,
"extension": {
"qualification_type": 1,//主体类型
"credit_end_date": "0", //格式:2006-01-02,永久用 0 表示
"company_type": 1,//企业类型
"legal_person_name": "",//法人姓名
"registered_province_code": "",//省份编号 110000
"registered_city_code": "",//城市编号 110100
"registered_capital": "",//注册资本,单位元 100000
"business_id_card_url": "",
"business_id_card": "",//运营人员身份证号--
"business_id_card_back_url":"",//运营人员身份证国徽面
},
// "business_user_mobile": "",
// "brand_id": 0,
// "brand_user_name": "",
// "now": "",
// "service_status": null,
// "search": "",
// "start_time": "",
// "end_time": "",
// "business_user": {
// "id": 0,
// "mobile": "",
// "name": "",
// "code": "",
// "search": "",
// "start_time": "",
// "end_time": "",
// "brand_user_count": 0,
// "created_at": "",
// "updated_at": ""
// }
},
qualification_types: [{
label: '企业',
value: 1
},
{
label: '个体工商户',
value: 2
},
{
label: '党政机关',
value: 3
},
{
label: '事业单位',
value: 4
},
{
label: '港澳台',
value: 5
},
{
label: '社会组织',
value: 6
},
{
label: '境外',
value: 7
},
{
label: '其他组织',
value: 100
}
],
qualification_type_show: "请选择", //主体类型-显示
qualification_type_index: 0, //主体类型
company_types: [{
label: '有限责任公司',
value: 1
},
{
label: '有限责任公司(自然人独资)',
value: 2
},
{
label: '有限责任公司(自然人投资或控股)',
value: 3
},
{
label: '有限责任公司(法人独资)',
value: 4
},
{
label: '股份有限责任公司',
value: 5
},
{
label: '其他',
value: 100
}
],
company_type_show: "请选择", //企业类型-显示
company_type_index: 0, //企业类型
areaDetail: {
value: '',
code: '',
postcode: ''
},
// areaDetail: {"value":["天津市","天津市","河西区"],"code":["120000","120100","120103"],"postcode":"572000"},
localImg:{
idCardFront: '../../static/regist/id_people.png',
idCardBack: '../../static/regist/id_guohui.png',
license: '../../static/regist/upload_bg.png',
}
}
},
onLoad() {
console.log("onload-", this.brandInfo.brand.id, this.zhuti_type_arr)
this.webBrandUserGet();
},
onShow() {
// console.log(JSON.stringify(this.areaOptions[0]))
},
computed: {
...mapState(['brandInfo', ]),
qualification_types_arr() {
return this.qualification_types.map(item => item.label)
},
company_types_arr() {
return this.company_types.map(item => item.label)
},
areaValueShow() {
let areaDetail = this.areaDetail;
if(!areaDetail.value)return '';
return this.areaDetail.value.join('/')
},
},
watch: {
cartList() {
this.setCartConfirmStyle();
},
},
methods: {
webBrandUserGet(){
// util.showNone("检测是否有数据回显")
console.log("webBrandUserGet")
servers.post({
url: party_api.webBrandUserGet,
data: {
brand_id: this.brandInfo.brand.id
},
isDefaultGet: false,
})
.then(res=>{
console.log("webBrandUserGet-res", res)
if(res.statusCode == 200){
console.log("webBrandUserGet-res.data", res.data)
if(res.data.code==0){
if(res.data.data)this.submitData = res.data.data
this.checkSubmitDataIsNull()
}else{
util.showNone(res.data.message)
}
}
})
.catch(err=>{
console.log("webBrandUserGet-err", err)
})
},
checkSubmitDataIsNull(){
if(!this.submitData.extension){
this.submitData.extension = {
"qualification_type": 1,//主体类型
"credit_end_date": "0", //格式:2006-01-02,永久用 0 表示
"company_type": 1,//企业类型
"legal_person_name": "",//法人姓名
"registered_province_code":"" ,//省份编号 110000
"registered_city_code":"",//城市编号 110100
"registered_capital":"",//注册资本,单位元 100000
"business_id_card_url": "",
"business_id_card": "",//运营人员身份证号--
"business_id_card_back_url":"",//运营人员身份证国徽面
}
}
},
//上传照片
async clickUploadLicenseImg() {
let ocr_type = 'BizLicenseOCR'
console.log("clickUploadImg");
let img = await this.getLocalImg();
console.log("getLocalImg:", img)
let img_url = await this.getUploadImgURL(img);
console.log("getUploadImgURL:", img_url)
let ocr_res = await this.getOcrFromImg(ocr_type,img_url);
this.setOcrResult(ocr_type,ocr_res)
this.submitData.business_license = img_url
},
// IDCardOCR
async clickUploadIDCardImg() {
let ocr_type = 'IDCardOCR'
console.log("clickUploadIDCardImg");
let img = await this.getLocalImg();
console.log("getLocalImg:", img)
let img_url = await this.getUploadImgURL(img);
console.log("getUploadImgURL:", img_url)
let ocr_res = await this.getOcrFromImg(ocr_type,img_url);
this.setOcrResult(ocr_type,ocr_res)
this.submitData.extension.business_id_card_url = img_url
},
async clickUploadIDCardBackImg() {
console.log("clickUploadIDCardBackImg");
let img = await this.getLocalImg();
console.log("getLocalImg:", img)
let img_url = await this.getUploadImgURL(img);
console.log("getUploadImgURL:", img_url)
this.submitData.extension.business_id_card_back_url = img_url
},
getOcrFromImg(ocr_type,img_url) {
console.log("getOcrFromImg")
return servers.post({
url: party_api.webOcr,
isDefaultGet: false,
data: {
ocr_type:ocr_type,
url: img_url,
}
})
.then(res=>{
console.log("getOcrFromImg-res", res)
if(res.statusCode == 200){
console.log("getOcrFromImg-ocr", res.data.data)
return res.data.data
}
})
.catch(err=>{
console.log("getOcrFromImg-err", err)
})
},
getUploadImgURL(tempFilePath){
return servers.uploadFile({
url: party_api.webUpload,
filePath: tempFilePath,
name: 'file',
formData: {}
})
.then(res=>{
console.log("uploadFile-res", res)
if(res.statusCode == 200){
// console.log("uploadFile-url 上传成功1", res.data.data.url)
let _data = JSON.parse(JSON.stringify(res.data))
console.log("uploadFile-url return type", typeof(_data))
// console.log("uploadFile-url 上传成功 接口真正数据", JSON.parse(_data))
_data = JSON.parse(_data).data
return _data.url
}
})
.catch(err=>{
console.log("uploadFile-err", err)
})
},
//从相册获取照片
getLocalImg() {
console.log("clickUploadImg");
return new Promise((resolve, reject) => {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
console.log("chooseImage", res)
let tempFilePaths = res.tempFilePaths[0];
resolve(tempFilePaths)
},
fail: (err) => {
console.log("chooseImage-err", err)
reject(err)
}
});
})
},
setOcrResult(ocr_type,res){
console.log("setOcrResult:",ocr_type, res.Response)
if (ocr_type === 'BizLicenseOCR') {
this.submitData.company_name = res.Response.Name;
this.submitData.mailing_address = res.Response.Address;
this.submitData.extension.legal_person_name = res.Response.Person;
this.submitData.agency_code = res.Response.RegNum;
const t = this.company_types.find(item => item.label === res.Response.Type);
this.submitData.extension.company_type = t.value;
if (res.Response.Capital) {
const num = res.Response.Capital.split('元')[0]
this.submitData.extension.registered_capital = this.chineseToNumber(num)
}
if (res.Response.Period) {
console.log("res.Response.Period-11111", res.Response.Period)
if (res.Response.Period.indexOf('长期') !== -1 || res.Response.Period.indexOf('**') !== -1) {
this.submitData.extension.credit_end_date = '0'
} else {
// 至2071年03月30日
const dateStr = res.Response.Period.split('至')[1];
// 2071年03月30日
// 将年份、月份、日期分别提取出来
const year = dateStr.slice(0, 4);
const month = dateStr.slice(5, 7);
const day = dateStr.slice(8, 10);
this.submitData.extension.credit_end_date = `${year}-${month}-${day}`
}
}
} else {
this.submitData.extension.business_id_card = res.Response.IdNum
this.submitData.contact_person = res.Response.Name
}
},
//中文转数字,
chineseToNumber(chnStr) {
const chnNumChar = {
零: 0,
壹: 1,
贰: 2,
叁: 3,
肆: 4,
伍: 5,
陆: 6,
柒: 7,
捌: 8,
玖: 9
};
const chnUnitChar = {
拾: 10,
佰: 100,
仟: 1000,
万: 10000,
亿: 100000000
};
let total = 0;
let section = 0;
let number = 0;
const chnNum = chnStr.split('');
for (let i = 0; i < chnNum.length; i++) {
const num = chnNumChar[chnNum[i]];
if (typeof num !== 'undefined') {
number = num;
if (i === chnNum.length - 1) {
section += number;
}
} else {
const unit = chnUnitChar[chnNum[i]];
if (typeof unit !== 'undefined') {
section += (number * unit);
number = 0;
if (unit === 10000) {
total += section * unit;
section = 0;
}
}
}
}
total += section + number;
return total;
},
bindPickerChange_qualification(e) {
console.log('bindPickerChange_qualification:', e.detail.value)
this.qualification_type_index = e.detail.value
this.qualification_type_show = this.qualification_types_arr[e.detail.value]
},
bindPickerChange_company_types(e) {
console.log('bindPickerChange_company_types:', e.detail.value)
this.company_type_index = e.detail.value
this.company_type_show = this.company_types_arr[e.detail.value]
},
bindPickerChange_address(e) {
console.log('bindPickerChange_address:', JSON.stringify(e.detail))
this.areaDetail = e.detail
this.submitData.extension.registered_province_code = e.detail.code[0]
this.submitData.extension.registered_city_code = e.detail.code[1]
this.submitData.province = e.detail.value[0]
this.submitData.city = e.detail.value[1]
this.submitData.area = e.detail.value[2]
},
selectZhuTiType() {
console.log("selectZhuTiType")
let that = this;
let _list = this.qualification_types.map(item => item.label)
console.log("_list", _list)
// uni.showActionSheet({
// itemList: _list,
// success: function (res) {
// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
// },
// fail: function (res) {
// console.log(res.errMsg);
// }
// });
},
idTimeChange(e) {
console.log("id_time: ", e.detail)
this.formData.id_time = e.detail.value
this.submitData.extension.credit_end_date = e.detail.value == 0 ? '0' : "1"
},
// 提交审核
submitRegist() {
// if(!this.checkSubmitData())return
// this.checkSubmitData()
console.log("submitRegist", party_api.webBrandUserSave, this.submitData)
const _token = uni.getStorageSync('token') || '';
let _data = JSON.parse(JSON.stringify(this.submitData))
if(_token)_data['token'] = _token;
_data['status']= 2;//前端修改审核状态: 1提交资料,2实名认证,3审核成功,4审核失败 5完成 6修改审核中?
servers.post({
url: party_api.webBrandUserSave,
data: _data,
header: {
'content-type': 'application/json',
'token': _token,
},
isDefaultGet: false,
})
.then(res=>{
console.log("提交注册返回:", res)
util.routeTo("/subpackage/party/pages/login/reviewing", "nT")
// if(res.statusCode == 200){
// util.showNone("提交成功")
// this.SubmitEvent()
// }
})
.catch(err=>{
console.log("submitRegist-err", err)
})
},
checkSubmitData(){
let {submitData} = this;
//循环submitData,检查是否有空值
console.log("submitData",submitData)
let unInput_arr = []
for (let key in submitData) {
if (submitData[key] === '') {
console.log("submitData key need:", key)
unInput_arr.push(key)
}
}
if(unInput_arr.length > 0){
console.log("unInput_arr",unInput_arr.length, unInput_arr)
util.showNone("请完善信息后提交")
return false
}
return true
},
SubmitEvent() {
util.routeTo("/subpackage/party/pages/login/reviewing", "nT")
},
formSubmit(e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
//回显提交数据webBrandUserGet
resetSubmitData(){
const _token = uni.getStorageSync('token') || '';
let _data = JSON.parse(JSON.stringify(this.submitData))
if(_token)_data['token'] = _token;
servers.post({
url: party_api.webBrandUserGet,
data: _data,
header: {
'content-type': 'application/json',
'token': _token,
},
isDefaultGet: false,
})
.then(res=>{
console.log("回显返回:", res)
})
.catch(err=>{
console.log("submitRegist-err", err)
})
}
}
}
</script>
<style lang="scss">
@import '~style/public.scss';
@import '../../ui/maincss.scss';
page {
background-color: $b-color-gray-dd;
}
.regist-page {
.r-main-view {
width: 700rpx;
.r-box {
width: 100%;
background: #FFFFFF;
border-radius: 20rpx;
margin-top: 20rpx;
padding: 28rpx;
.rb-title {
font-size: 32rpx;
color: #333333;
font-weight: 600;
}
.input-hold-class {
font-size: 28rpx;
color: #999999;
}
.rb-line {
border-bottom: 1rpx solid #E5E5E5;
}
.rb-upload-box {
.rb-upload-title {
font-size: 28rpx;
color: #333333;
font-weight: 500;
margin: 46rpx 0 28rpx 0;
>text {
color: $b-color-red;
}
}
.rb-upload-list {
width: 100%;
.rb-upload-item {
width: 168rpx;
height: 168rpx;
// position: relative;
.rb-upload-bg {
width: 168rpx;
height: 168rpx;
position: absolute;
}
.rb-upload-cam {
width: 48rpx;
height: 40rpx;
z-index: 2;
}
.rb-input-img-text {
font-size: 24rpx;
margin-top: 24rpx;
color: #1A1A1A;
z-index: 2;
}
}
.idcard-width-170 {
width: 280rpx;
height: 170rpx;
.rb-upload-bg {
width: 280rpx;
height: 170rpx;
position: absolute;
}
}
}
}
.rb-input-box {
padding: 8rpx 0;
.rb-input-title {
font-size: 28rpx;
color: #333333;
font-weight: 500;
width: 168rpx;
position: absolute;
>text {
color: $b-color-red;
}
}
.rb-input {
margin-left: 240rpx;
height: 80rpx;
font-size: 28rpx;
color: #333333;
}
.rb-radio {
margin-left: 240rpx;
height: 80rpx;
}
}
}
}
}
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
padding-bottom: 0rpx;
padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
/* 兼容 iOS < 11.2 */
padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
/* 兼容 iOS >= 11.2 */
}
</style>