吉媒互动平台前端
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.
 
 
 
 
 

1475 lines
77 KiB

<template>
<gui-page>
<view slot="gBody">
<view style="position: relative;" v-if="xianshi">
<view style="display: flex;justify-content: center;align-items: center;margin: 40rpx 0;">
<view style="display: flex;font-size: 25rpx;">
<view style="display: flex;">
<view
:style="step >= 1 ? 'background-color:#b53190;color:#fff;' : 'border: 1rpx solid #b53190;color:#b53190;'"
style="width: 35rpx;height: 35rpx;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-right: 10rpx;line-height: 30rpx;">
1
</view>
<text style="color: #9e9e9e;">主体类型</text>
</view>
<view style="margin: 0 20rpx;color:#b53190;">...</view>
<view style="display: flex;">
<view
:style="step >= 2 ? 'background-color:#b53190;color:#fff;' : 'border: 1rpx solid #b53190;color:#b53190;'"
style="width: 35rpx;height: 35rpx;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-right: 10rpx;line-height: 30rpx;">
2
</view>
<text style="color: #9e9e9e;">填写资料</text>
</view>
<view style="margin: 0 20rpx;color:#b53190;">...</view>
<view style="display: flex;">
<view
:style="step >= 3 ? 'background-color:#b53190;color:#fff;' : 'border: 1rpx solid #b53190;color:#b53190;'"
style="width: 35rpx;height: 35rpx;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-right: 10rpx;line-height: 30rpx;">
3
</view>
<text style="color: #9e9e9e;">填写资料</text>
</view>
</view>
</view>
<!-- 表单元素核心区域 -->
<scroll-view class=" gui-dark-bg-level-3 gui-margin-top gui-flex1" :scroll-y="true"
:show-scrollbar="false">
<view style="height:12rpx;"></view>
<!-- 第1步 -->
<view v-if="step == 1">
<view style="display: flex;justify-content: center;align-items: center;">
<view
:style="selectIndex == 0 ? 'border: 8rpx solid #a51480;' : 'background-color:#fff;border: 8rpx solid #fff;' "
@click="onselect(0)"
style="overflow: hidden;position: relative;text-align: center;line-height: 45rpx;;font-weight: bold;padding: 50rpx 0;width: 650rpx;border-radius: 20rpx;">
<view>个体工商户</view>
<view style="color: #9e9e9e;font-size: 24rpx;">营业执照、门头照、内景照</view>
<view v-if="selectIndex == 0"
style="position: absolute;bottom: -15rpx;right: -1rpx;color: #fff;">
<image src="../../../static/dpdg.png" style="width: 40rpx;height: 40rpx;"></image>
</view>
</view>
</view>
<view style="display: flex;justify-content: center;align-items: center;margin-top: 40rpx;">
<view
:style="selectIndex == 1 ? 'border: 8rpx solid #a51480;' : 'background-color:#fff;border: 8rpx solid #fff;' "
@click="onselect(1)"
style="overflow: hidden;position: relative;text-align: center;line-height: 45rpx;;font-weight: bold;padding: 50rpx 0;width: 650rpx;border-radius: 20rpx;">
<view>企业</view>
<view style="color: #9e9e9e;font-size: 24rpx;">营业执照、开户许可、门头照、内景照</view>
<view v-if="selectIndex == 1"
style="position: absolute;bottom: -15rpx;right: -1rpx;color: #fff;">
<image src="../../../static/dpdg.png" style="width: 40rpx;height: 40rpx;"></image>
</view>
</view>
</view>
<view style="padding: 20rpx;margin: 40rpx 0 80rpx;">
<view style="color: #b74a9c;font-weight: bold;margin-bottom: 20rpx;">
说明:
</view>
<mp-html :content="shuoming.content"/>
</view>
<view @tap="stepto(2)"
style="width: 90%;text-align: center;padding: 20rpx 0;text-align: center;background: linear-gradient(to bottom, #90178b, #590b6e);margin: 0 auto;color: #fff;border-radius: 40rpx;">
下一步
</view>
</view>
<!-- 第2步 -->
<view v-if="step == 2" style="padding: 20rpx;">
<form @submit="submit">
<view
style="background-color: #fff;padding:30rpx 20rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
<view style="font-weight: bold;font-size: 32rpx;">商户基本信息</view>
<view class="gui-form-item gui-border-b">
<text class="gui-form-label" style="width: 150rpx;">
<text
style="color: red;">*
</text>
商户LOGO
</text>
<view class="gui-form-body">
<view @tap="selectImg('logo_image')" v-if="!logo_image.image_id"
style="width: 120rpx;color: #9e9e9e;background-color: #f5f6f7;height: 120rpx;text-align: center;padding: 30rpx 0;margin-left: 380rpx;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">logo</view>
</view>
<view @tap="selectImg('logo_image')" v-else
style="width: 120rpx;color: #9e9e9e;background-color: #f5f6f7;height: 120rpx;text-align: center;margin-left: 380rpx;">
<image :src="logo_image.url" style="height: 160rpx;"
mode="heightFix"></image>
</view>
</view>
</view>
<view class="gui-form-item gui-border-b">
<text class="gui-form-label">
<text style="color: red;">*</text>
商户简称
</text>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.shop_name"
@input="inputsss($event,'shop_name')"
name="shop_name" placeholder="请输入商户简称"
style="text-align: right;"/>
</view>
</view>
<view class="gui-form-item gui-border-b">
<text class="gui-form-label">
<text style="color: red;">*</text>
主营类目
</text>
<view class="gui-form-body">
<picker class="item-picker" mode="selector" range-key="name"
@change="classifyChange" @columnchange="columnchange"
:value="classifyIndex"
:range="classifyArr">
<view style="text-align: right;">{{ name }}</view>
</picker>
</view>
<text class="gui-form-icon gui-icons gui-text-center">&#xe603;</text>
</view>
<view class="gui-form-item ">
<text class="gui-form-label">
<text style="color: red;">*</text>
营业时间
</text>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.shop_hours"
@input="inputsss($event,'shop_hours')"
name="shop_hours" placeholder="请输入营业时间(如9:00-18:00)"
style="text-align: right;"/>
</view>
</view>
<view class="gui-form-item ">
<text class="gui-form-label">
<text style="color: red;">*</text>
客服电话
</text>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.kftelephone"
@input="inputsss($event,'kftelephone')"
name="kftelephone" placeholder="请输入客服电话"
style="text-align: right;"/>
</view>
</view>
<view class="gui-form-item gui-border-b">
<text class="gui-form-label" style="width: 200rpx;">
<text
style="color: red;">*
</text>
客服微信二维码
</text>
<view class="gui-form-body">
<view @tap="selectImg('service')" v-if="!service.image_id"
style="width: 120rpx;color: #9e9e9e;background-color: #f5f6f7;height: 120rpx;text-align: center;padding: 30rpx 0;margin-left: 330rpx;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">二维码</view>
</view>
<view @tap="selectImg('service')" v-else
style="width: 120rpx;color: #9e9e9e;background-color: #f5f6f7;height: 120rpx;text-align: center;margin-left: 330rpx;">
<image :src="service.url" style="height: 160rpx;" mode="heightFix"></image>
</view>
</view>
</view>
</view>
<view
style="background-color: #fff;padding:30rpx 20rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
<view style="font-weight: bold;font-size: 32rpx;">身份证照片</view>
<view style="display: flex;margin: 20rpx 0;">
<view @tap="selectImg('card_front')" v-if="!card_front.image_id"
style="width: 47%;margin-right: 6%;color: #9e9e9e;background-color: #f5f6f7;height: 160rpx;text-align: center;padding: 30rpx 0;border-radius: 10rpx;">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传身份证正面</view>
</view>
<view @tap="selectImg('card_front')" v-else
style="width: 47%;margin-right: 6%;color: #9e9e9e;background-color: #f5f6f7;height: 160rpx;display: flex;justify-content: center;align-items: center;border-radius: 10rpx">
<image :src="card_front.url" style="height: 160rpx;" mode="heightFix"></image>
</view>
<view @tap="selectImg('card_opposite')" v-if="!card_opposite.image_id"
style="width: 47%;background-color: #f5f6f7;text-align: center;padding: 30rpx 0;color: #9e9e9e;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传身份证背面</view>
</view>
<view @tap="selectImg('card_opposite')" v-else
style="width: 47%;background-color: #f5f6f7;height: 160rpx;display: flex;justify-content: center;align-items: center;border-radius: 10rpx">
<image :src="card_opposite.url" style="height: 160rpx;" mode="heightFix">
</image>
</view>
</view>
<view style="font-size: 23rpx;color: #9e9e9e;">请保持身份证与经营者信息一致</view>
</view>
<view
style="background-color: #fff;padding:30rpx 20rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
<view style="font-weight: bold;font-size: 32rpx;margin-bottom: 20rpx;">经营者基本信息
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
姓名
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.name" name="name"
@input="inputsss($event,'name')"
placeholder="请输入姓名"/>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
邮箱
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.mailbox"
@input="inputsss($event,'mailbox')"
name="mailbox" placeholder="请输入邮箱"/>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
手机号
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.phone" name="phone"
@input="inputsss($event,'phone')"
placeholder="请输入手机号"/>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
身份证号
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.IDCard" name="IDCard"
@input="inputsss($event,'IDCard')"
placeholder="请输入身份证号"/>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
身份证地址
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.IDCard_address"
@input="inputsss($event,'IDCard_address')"
name="IDCard_address" placeholder="请输入身份证地址"/>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
微信号
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.WeChat" name="WeChat"
@input="inputsss($event,'WeChat')"
placeholder="请输入微信号"/>
</view>
</view>
<view
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view class="gui-form-item " style="padding: 10rpx 0;">
<view style="display: flex;">
<view
style="width: 180rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
身份证有效期
</view>
</view>
<view class="gui-form-body">
<view
class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
<text class="gui-text" style="text-align: right;"></text>
<picker mode="selector" :range="effective" @change="pickerEffective">
<text class="gui-form-icon gui-icons gui-text-center "
style="width: 130rpx;color: #000;">
{{ effective[effectiveIndex] }}&#xe601;
</text>
</picker>
</view>
</view>
</view>
<view style="text-align: right;padding-bottom: 20rpx;" v-if="effectiveIndex == 0">
<gui-datetime-between @confirm="Cardconfirm2" :startValue="CardstartValue2"
:endValue="CardendValue2" :isTime="false">
<text class="demo gui-block-text gui-icons" v-if="CardendValue2"
style="color: #f17487;">
{{ CardstartValue2 }}
<text style="margin: 0 10rpx;color: #000;">至</text>
{{ CardendValue2 }}
</text>
<text class="demo gui-block-text gui-icons" v-else style="color: #f17487;">
开始日期
<text style="margin: 0 10rpx;color: #000;">至</text>
结束日期
</text>
</gui-datetime-between>
</view>
</view>
<view style="font-size: 26rpx;color: #9e9e9e;margin: 20rpx 0;">
请确保上方期限与您身份证背面的有效期限一致,身份证有效期大于60天
</view>
<view
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view class="gui-form-item " style="">
<view style="display: flex;">
<view
style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
经营地址
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body" @click="authVerification"
style="padding: 20rpx 0;text-align: right;">
选择经营地址
</view>
<text class="gui-form-icon gui-icons gui-text-center ">&#xe601;</text>
</view>
<view style="padding: 0 0 15rpx;" v-if="operate_address">
{{ operate_address }}
</view>
</view>
</view>
<view
style="background-color: #fff;padding:30rpx 20rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
<view style="font-weight: bold;font-size: 32rpx;">营业执照信息</view>
<view
style="display: flex;margin: 30rpx 0;justify-content: center;align-items: center;">
<view @tap="selectImg('license')" v-if="!license.image_id"
style="width: 47%;background-color: #f5f6f7;height: 160rpx;text-align: center;padding: 40rpx 0;color: #9e9e9e;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传营业执照照片</view>
</view>
<view @tap="selectImg('license')" v-else
style="width: 47%;background-color: #f5f6f7;height: 160rpx;display: flex;justify-content: center;align-items: center;">
<image :src="license.url" style="height: 160rpx;" mode="heightFix"></image>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 240rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
营业执照名称
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.license_name"
@input="inputsss($event,'license_name')"
name="license_name" placeholder="请输入营业执照名称"/>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 240rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
统一社会信用代码
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.credit_code"
@input="inputsss($event,'credit_code')"
name="credit_code" placeholder="请输入统一社会信用代码"/>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 240rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
营业执照地址
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.license_address"
@input="inputsss($event,'license_address')"
name="license_address" placeholder="请输入营业执照地址"/>
</view>
</view>
<view
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view class="gui-form-item " style="padding: 10rpx 0;">
<view style="display: flex;">
<view
style="width: 240rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
营业执照有效期
</view>
</view>
<view class="gui-form-body">
<view
class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
<text class="gui-text" style="text-align: right;"></text>
<picker mode="selector" :range="licensestart"
@change="pickerIicensestart">
<text class="gui-form-icon gui-icons gui-text-center "
style="width: 130rpx;color: #000;">
{{ licensestart[licensestartIndex] }}&#xe601;
</text>
</picker>
</view>
</view>
</view>
<view style="text-align: right;padding-bottom: 20rpx;"
v-if="licensestartIndex == 0">
<gui-datetime-between @confirm="Licenseconfirm2"
:startValue="LicensestartValue2"
:endValue="LicenseendValue2"
:isTime="false">
<text class="demo gui-block-text gui-icons" v-if="LicenseendValue2"
style="color: #f17487;">
{{ LicensestartValue2 }}
<text
style="margin: 0 10rpx;color: #000;">至
</text>
{{ LicenseendValue2 }}
</text>
<text class="demo gui-block-text gui-icons" v-else style="color: #f17487;">
开始日期
<text style="margin: 0 10rpx;color: #000;">至</text>
结束日期
</text>
</gui-datetime-between>
</view>
</view>
</view>
<view v-if="selectIndex == 0"
style="background-color: #fff;padding:30rpx 20rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
<view style="font-weight: bold;font-size: 32rpx;">上传企业照片</view>
<view style="display: flex;margin: 20rpx 0;">
<view @tap="selectImg('enterprise_front')" v-if="!enterprise_front.image_id"
style="width: 47%;margin-right: 6%;background-color: #f5f6f7;height: 160rpx;text-align: center;padding: 40rpx 0;color: #9e9e9e;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传门头照</view>
</view>
<view @tap="selectImg('enterprise_front')" v-else
style="width: 47%;margin-right: 6%;color: #9e9e9e;background-color: #f5f6f7;height: 160rpx;display: flex;justify-content: center;align-items: center;">
<image :src="enterprise_front.url" style="height: 160rpx;" mode="heightFix">
</image>
</view>
<view @tap="selectImg('enterprise_within')" v-if="!enterprise_within.image_id"
style="width: 47%;background-color: #f5f6f7;text-align: center;padding: 40rpx 0;color: #9e9e9e;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传内景照</view>
</view>
<view @tap="selectImg('enterprise_within')" v-else
style="width: 47%;background-color: #f5f6f7height: 160rpx;display: flex;justify-content: center;align-items: center;">
<image :src="enterprise_within.url" style="height: 160rpx;" mode="heightFix">
</image>
</view>
</view>
</view>
<view v-if="selectIndex == 1"
style="background-color: #fff;padding:30rpx 20rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
<view style="font-weight: bold;font-size: 32rpx;">上传企业照片</view>
<view style="display: flex;margin: 20rpx 0;">
<view @tap="selectImg('enterprise_front')" v-if="!enterprise_front.image_id"
style="width: 30%;margin-right: 6%;background-color: #f5f6f7;height: 160rpx;text-align: center;padding: 40rpx 0;color: #9e9e9e;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传门头照</view>
</view>
<view @tap="selectImg('enterprise_front')" v-else
style="width: 30%;margin-right: 6%;color: #9e9e9e;background-color: #f5f6f7;height: 160rpx;display: flex;justify-content: center;align-items: center;">
<image :src="enterprise_front.url" style="height: 160rpx;" mode="heightFix">
</image>
</view>
<view @tap="selectImg('open_license')" v-if="!open_license.image_id"
style="width:30%;margin-right: 6%;background-color: #f5f6f7;height: 160rpx;text-align: center;padding: 40rpx 0;color: #9e9e9e;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传开户许可</view>
</view>
<view @tap="selectImg('open_license')" v-else
style="width: 30%;margin-right: 6%;color: #9e9e9e;background-color: #f5f6f7;height: 160rpx;display: flex;justify-content: center;align-items: center;">
<image :src="open_license.url" style="height: 160rpx;" mode="heightFix">
</image>
</view>
<view @tap="selectImg('enterprise_within')" v-if="!enterprise_within.image_id"
style="width: 30%;background-color: #f5f6f7;text-align: center;padding: 40rpx 0;color: #9e9e9e;border-radius: 10rpx">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传内景照</view>
</view>
<view @tap="selectImg('enterprise_within')" v-else
style="width: 30%;background-color: #f5f6f7height: 160rpx;display: flex;justify-content: center;align-items: center;">
<image :src="enterprise_within.url" style="height: 160rpx;" mode="heightFix">
</image>
</view>
</view>
</view>
<view
style="background-color: #fff;padding:30rpx 20rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
<view style="font-weight: bold;font-size: 32rpx;">结算账户信息</view>
<view
style="display: flex;margin: 30rpx 0;justify-content: center;align-items: center;">
<view @tap="selectImg('bank')" v-if="!bank.image_id"
style="width: 47%;background-color: #f5f6f7;text-align: center;padding: 40rpx 0;color: #9e9e9e;">
<text class="gui-icons " style="font-size: 40rpx;">&#xe63d;</text>
<view style="font-size: 24rpx;margin-top: 10rpx;">上传银行账户开户证明</view>
</view>
<view @tap="selectImg('bank')" v-else
style="width: 47%;background-color: #f5f6f7;display: flex;justify-content: center;align-items: center;">
<image :src="bank.url" style="height: 160rpx;" mode="heightFix"></image>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
银行卡号
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" v-model="detail.bank_card"
@input="inputsss($event,'bank_card')"
name="bank_card" placeholder="请填写银行卡号"/>
</view>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
开户地
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body" @tap="open1">
{{ bank_address ? bank_address : '请选择开户银行所在地' }}
</view>
<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe601;</text>
</view>
<view class="gui-form-item "
style="background-color: #f5f6f7;padding: 0 20rpx ;margin-bottom: 20rpx;border-radius: 10rpx;">
<view style="display: flex;">
<view style="width: 170rpx;color: #888888;font-weight: bold;font-size: 26rpx;">
<text style="color: red;">*</text>
开户银行
</view>
<view style="color: #9e9e9e;">|</view>
</view>
<view class="gui-form-body">
<input type="text" class="gui-form-input" name="bank_deposit"
v-model="detail.bank_deposit" @input="inputsss($event,'bank_deposit')"
placeholder="请输入开户银行"/>
<!-- <picker mode="selector" range-key="name" :range="yinhangList"
@change="pickerChange">
<view
class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
<text class="gui-text gui-secondary-text"
v-if="yinhangIndex > -1">{{yinhangList[yinhangIndex].name}}</text>
<text class="gui-text gui-secondary-text" v-else>请选择开户银行</text>
<text
class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe601;</text>
</view>
</picker> -->
</view>
</view>
<view style="font-size: 26rpx;color: #9e9e9e;margin: 20rpx 0;">
绑定银行卡将用于资金提现
</view>
</view>
<view class="gui-margin-top"
style="display: flex;justify-content: center;align-items: center;">
<gui-radio @change="radioChange" :checked="radiochecked">
<text class="gui-text " style="color: #9e9e9e;">我已阅读并同意
<text style="color: #b53190;"
@click="onagreement">《商家入驻协议》
</text>
</text>
</gui-radio>
</view>
<button type="default" class="gui-button gui-bg-blue"
style="width: 90%;text-align: center;padding: 0rpx 0;text-align: center;background: linear-gradient(to bottom, #90178b, #590b6e);margin: 80rpx auto 0;color: #fff;border-radius: 40rpx;"
formType="submit" :disabled="disabled">
<text class="gui-icons gui-color-white gui-button-text">提交</text>
</button>
</form>
<gui-modal ref="guimodal" width="660rpx" :isCloseBtn="false" title="商家入驻协议"
:canCloseByShade='false'>
<template v-slot:content>
<scroll-view scroll-y :style="{height:contentHeight+'px'}"
class="gui-bg-gray gui-dark-bg-level-2">
<mp-html :content="ArticleDetail.content"/>
</scroll-view>
</template>
<template v-slot:btns>
<view class="gui-flex gui-row gui-space-between">
<view hover-class="gui-tap" class="modal-btns gui-flex1">
<text class="modal-btns gui-primary-color" @tap="confirm">同意</text>
</view>
</view>
</template>
</gui-modal>
<gui-area-picker ref="graceAddressPicker1" @confirm="confirm1" :level="3"
cancelText="关闭"></gui-area-picker>
<view style="height: 100rpx;"></view>
</view>
<!-- 第3步 -->
<view v-if="step == 3">
<view class="dealer-boot dis-flex flex-dir-column flex-y-center">
<view class="boot__msg f-30 dis-flex flex-dir-column flex-y-center">
<text class="msg__icon iconfont icon-shenhezhong" style="color: #90178b;"></text>
<text class="msg__content m-top20 f-29 col-80" style="color: #b53190;">等待审核结果
</text>
</view>
<!-- 去商城逛逛 -->
<view @tap="stepto(3)"
style="width: 90%;text-align: center;padding: 20rpx 0;text-align: center;background: linear-gradient(to bottom, #90178b, #590b6e);margin: 80rpx auto 0;color: #fff;border-radius: 40rpx;">
返回商城主页
</view>
</view>
</view>
</scroll-view>
</view>
<view v-else style="position: relative;">
<view style="width: 100%;height: 80rpx;background-color: #fff;">
</view>
<view class="dealer-boot dis-flex flex-dir-column flex-y-center" v-if="detail.states == 2">
<view class="boot__msg f-30 dis-flex flex-dir-column flex-y-center">
<text class="gui-icons" style="color: red;font-size: 120rpx;">&#xe78a;</text>
<text class="msg__content m-top20 f-29 col-80" style="color: red;">{{ detail.reason }}</text>
</view>
<!-- 去商城逛逛 -->
<view @tap="cxtj"
style="width: 90%;text-align: center;padding: 20rpx 0;text-align: center;background: linear-gradient(to bottom, #90178b, #590b6e);margin: 80rpx auto 0;color: #fff;border-radius: 40rpx;">
重新提交
</view>
</view>
<view class="dealer-boot dis-flex flex-dir-column flex-y-center" v-if="detail.states == 0">
<view class="boot__msg f-30 dis-flex flex-dir-column flex-y-center">
<text class="msg__icon iconfont icon-shenhezhong" style="color: #90178b;"></text>
<text class="msg__content m-top20 f-29 col-80" style="color: #b53190;">等待审核结果</text>
</view>
<!-- 去商城逛逛 -->
<view @tap="stepto(3)"
style="width: 90%;text-align: center;padding: 20rpx 0;text-align: center;background: linear-gradient(to bottom, #90178b, #590b6e);margin: 80rpx auto 0;color: #fff;border-radius: 40rpx;">
返回商城主页
</view>
</view>
</view>
</view>
</gui-page>
</template>
<script>
var graceJS = require('@/GraceUI5/js/grace.js');
var graceChecker = require("@/GraceUI5/js/checker.js");
import * as ArticleApi from '@/api/article'
import * as UploadApi from '@/api/upload'
import * as CategoryApi from '@/api/shop/category'
import * as YinhangApi from '@/api/shop/yinhang'
import * as InfoApi from '@/api/shop/info'
import * as Api from '@/api/page'
import store from '@/store'
import storage from '@/utils/storage'
import {
ACCESS_TOKEN,
USER_ID
} from '@/store/mutation-types'
const loginSuccess = (commit, {
token,
userId
}) => {
// 过期时间30天
const expiryTime = 30 * 86400
// 保存tokne和userId到缓存
storage.set(USER_ID, userId, expiryTime)
storage.set(ACCESS_TOKEN, token, expiryTime)
// 记录到store全局变量
commit('SET_TOKEN', token)
commit('SET_USER_ID', userId)
}
export default {
data() {
return {
dataSource: [],
name: '请选择主营类目',
classifyArr: [
[],
[]
], // picker - 数据源
classifyIndex: [0, 0], // picker - 索引
childArr: [], // 二级分类数据源
// 步骤
step: 1,
// 表单数据记录
formData: {},
selectIndex: 0,
contentHeight: 300,
CardstartValue2: "",
CardendValue2: '',
LicensestartValue2: "",
LicenseendValue2: '',
licensestartIndex: 0,
licensestart: ['非长期', '长期'],
effective: ['非长期', '长期'],
effectiveIndex: 0,
card_front: {
url: '',
image_id: ''
},
card_opposite: {
url: '',
image_id: ''
},
license: {
url: '',
image_id: ''
},
enterprise_within: {
url: '',
image_id: ''
},
enterprise_front: {
url: '',
image_id: ''
},
open_license: {
url: '',
image_id: ''
},
bank: {
url: '',
image_id: ''
},
logo_image: {
url: '',
image_id: ''
},
service: {
url: '',
image_id: ''
},
bank_address: '',
operate_address: '',
operate_latitude: '',
operate_longitude: '',
disabled: false,
category_id: 0,
yinhangList: [],
yinhangIndex: '-1',
bank_deposit: '',
ArticleDetail: '',
shuoming: '',
radiochecked: false,
detail: '',
xianshi: true,
}
},
mounted: function () {
var systemInfo = graceJS.system();
this.contentHeight = systemInfo.windowHeight * 0.65;
},
async onLoad(options) {
if (options.token) {
await this.getUserInfo(options.id, options.token)
}
this.getDetail()
this.getCategory()
this.getArticleDetail()
},
methods: {
getUserInfo(id, token) {
return new Promise(resolve => {
Api.getUserInfo(id, token)
.then(result => {
store.dispatch('Login', {
mobile: result.data.mobile
})
loginSuccess(token, id)
resolve()
})
})
},
hhhccc() {
let _this = this
let data = uni.getStorageSync('settledData')
console.log(data)
_this.detail = data
// _this.logo_image = data.logo_image
},
inputsss(e, name) {
this.cunhuancun(e.detail.value, name)
},
cunhuancun(e, name) {
let du = uni.getStorageSync('settledData')
if (!du) {
du = {
logo_image: {
url: '',
image_id: ''
},
shop_name: '',
shop_hours: '',
kftelephone: '',
service: {
url: '',
image_id: ''
},
card_front: {
url: '',
image_id: ''
},
card_opposite: {
url: '',
image_id: ''
},
name: '',
mailbox: '',
phone: '',
IDCard: '',
IDCard_address: '',
WeChat: '',
effectiveIndex: 0,
CardstartValue2: '',
CardendValue2: '',
operate_address: '',
operate_latitude: '',
operate_longitude: '',
license: {
url: '',
image_id: ''
},
license_name: '',
credit_code: '',
license_address: '',
licensestartIndex: 0,
LicensestartValue2: '',
LicenseendValue2: '',
enterprise_front: {
url: '',
image_id: ''
},
open_license: {
url: '',
image_id: ''
},
bank: {
url: '',
image_id: ''
},
enterprise_within: '',
bank_card: '',
bank_address: ''
}
uni.setStorageSync('settledData', du)
}
du[name] = e
uni.setStorageSync('settledData', du)
},
cxtj() {
let _this = this
_this.selectIndex = _this.detail.type
_this.dataSource.forEach(function (element, index) {
if (element.category_id == _this.detail.category_id) {
_this.name = element.name,
_this.category_id = element.category_id
}
});
if (_this.detail.card_front_id && _this.detail.card_front_url) {
_this.card_front = {
url: _this.detail.card_front_url,
image_id: _this.detail.card_front_id
};
}
if (_this.detail.card_opposite_id && _this.detail.card_opposite_url) {
_this.card_opposite = {
url: _this.detail.card_opposite_url,
image_id: _this.detail.card_opposite_id
};
}
if (_this.detail.license_id && _this.detail.license_url) {
_this.license = {
url: _this.detail.license_url,
image_id: _this.detail.license_id
};
}
if (_this.detail.enterprise_within_id && _this.detail.enterprise_within_url) {
_this.enterprise_within = {
url: _this.detail.enterprise_within_url,
image_id: _this.detail.enterprise_within_id
};
}
if (_this.detail.enterprise_front_id && _this.detail.enterprise_front_url) {
_this.enterprise_front = {
url: _this.detail.enterprise_front_url,
image_id: _this.detail.enterprise_front_id
};
}
if (_this.detail.open_license_id && _this.detail.open_license_url) {
_this.open_license = {
url: _this.detail.open_license_url,
image_id: _this.detail.open_license_id
};
}
if (_this.detail.bank_id && _this.detail.bank_url) {
_this.bank = {
url: _this.detail.bank_url,
image_id: _this.detail.bank_id
};
}
if (_this.detail.bank_id && _this.detail.bank_url) {
_this.bank = {
url: _this.detail.bank_url,
image_id: _this.detail.bank_id
};
}
if (_this.detail.service_id && _this.detail.service_url) {
_this.service = {
url: _this.detail.service_url,
image_id: _this.detail.service_id
};
}
if (_this.detail.logo_image_id && _this.detail.logo_image_url) {
_this.logo_image = {
url: _this.detail.logo_image_url,
image_id: _this.detail.logo_image_id
};
}
_this.licensestartIndex = _this.detail.is_longTerms
if (_this.detail.is_longTerms == 0) {
_this.LicensestartValue2 = _this.detail.license_start_time
_this.LicenseendValue2 = _this.detail.license_end_time
}
_this.effectiveIndex = _this.detail.is_longTerm
if (_this.detail.is_longTerm == 0) {
_this.CardstartValue2 = _this.detail.card_start_time
_this.CardendValue2 = _this.detail.card_end_time
}
_this.bank_address = _this.detail.bank_address
_this.operate_address = _this.detail.operate_address
_this.shop_hours = _this.detail.shop_hours
_this.operate_latitude = _this.detail.operate_latitude
_this.operate_longitude = _this.detail.operate_longitude
// _this.yinhangList.forEach(function(element, index) {
// if (element.name == _this.detail.bank_deposit) {
// _this.yinhangIndex = index
// _this.bank_deposit = _this.detail.bank_deposit
// }
// });
_this.xianshi = true
},
getDetail() {
InfoApi.detail()
.then(result => {
if (result.data.detail) {
this.detail = result.data.detail
} else {
this.hhhccc()
}
if (result.data.detail) {
this.xianshi = false
if (result.data.detail.states == 0) {
this.step = 3
}
if (result.data.detail.states == 1) {
uni.redirectTo({
url: '/pages/user/shop/index'
})
}
}
})
},
radioChange(e) {
this.radiochecked = !this.radiochecked
},
confirm: function () {
// 客户点击确认按钮后的逻辑请在此处实现
this.$refs.guimodal.close();
this.radiochecked = true
},
getArticleDetail() {
const app = this
ArticleApi.detail(1)
.then(result => {
app.ArticleDetail = result.data.detail
})
ArticleApi.detail(2)
.then(result => {
app.shuoming = result.data.detail
})
},
pickerChange(e) {
this.yinhangIndex = e.detail.value;
this.bank_deposit = this.yinhangList[e.detail.value].name
},
getCategory() {
let _this = this
CategoryApi.list()
.then(result => {
_this.dataSource = result.data.list
_this.getAllClassify()
})
YinhangApi.list()
.then(result => {
_this.yinhangList = result.data.list
})
},
// 获取数据源并分出一级二级
getAllClassify() {
let dataLen = this.dataSource.length;
for (let i = 0; i < dataLen; i++) {
// 将数据源中的二级分类 push 进 childArr,作为二级分类的数据源
//this.childArr.push(this.dataSource[i].children)
}
;
// 一级分类的数据源
this.classifyArr = this.dataSource;
// 第一次打开时,默认给一级分类添加它的二级分类
//this.classifyArr[1] = this.childArr[0]
},
// 选择商品分类
classifyChange(e) {
let value = e.target.value;
this.classifyIndex = value;
if (this.classifyArr.length != 0) {
this.name = this.classifyArr[this.classifyIndex].name
this.category_id = this.classifyArr[this.classifyIndex].category_id
}
;
// if (this.classifyArr[1].length != 0) {
// this.name = this.classifyArr[1][this.classifyIndex[1]].name
// this.category_id = this.classifyArr[1][this.classifyIndex[1]].category_id
// }
},
// 获取二级分类
columnchange(e) {
// 当滚动切换一级分类时,为当前的一级分类添加它的子类
if (e.detail.column == 0) {
// #ifdef H5
// 在小程序中直接赋值无效 H5 可直接赋值
this.classifyArr[1] = this.childArr[e.detail.value]
// #endif
// #ifdef MP-WEIXIN
// 在 H5 环境下 $set 会导致一级分类无法滚动, 小程序正常运行
this.$set(this.classifyArr, 1, this.childArr[e.detail.value])
// #endif
}
},
getLocation(callback) {
const app = this
uni.getLocation({
type: 'wgs84',
success: callback,
fail() {
app.isAuthor = false
}
})
},
authVerification() {
let _this = this
uni.chooseLocation({
success: function (res) {
_this.operate_address = res.address
_this.operate_latitude = res.latitude
_this.operate_longitude = res.longitude
}
});
},
handerChooseLocation(latitude, longitude) {
console.log('2212')
uni.chooseLocation({
latitude: latitude || '',
longitude: longitude || '',
success: (res) => {
console.log(res)
},
fail: function (err) {
console.log(err)
}
})
},
open1: function () {
this.$refs.graceAddressPicker1.open();
},
confirm1: function (e) {
// 返回选中城市的编号及文本信息
this.bank_address = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
},
selectImg: function (e) {
let _this = this
uni.chooseImage({
count: 1,
success: (res) => {
_this[e]['url'] = res.tempFilePaths[0]
UploadApi.image([res.tempFiles[0]])
.then(fileIds => {
_this[e]['image_id'] = fileIds[0]
// _this.cunhuancun(datas,e)
})
}
})
},
pickerEffective: function (e) {
this.effectiveIndex = e.detail.value;
},
pickerIicensestart: function (e) {
this.licensestartIndex = e.detail.value;
},
Cardconfirm2: function (res) {
this.CardstartValue2 = res[0][0] + '-' + res[0][1] + '-' + res[0][2];
this.CardendValue2 = res[1][0] + '-' + res[1][1] + '-' + res[1][2];
},
Licenseconfirm2: function (res) {
this.LicensestartValue2 = res[0][0] + '-' + res[0][1] + '-' + res[0][2];
this.LicenseendValue2 = res[1][0] + '-' + res[1][1] + '-' + res[1][2];
},
onagreement() {
this.$refs.guimodal.open();
},
onselect(e) {
this.selectIndex = e
},
bdChange: function (e) {
this.formData.bd = e.detail.value;
},
fanhui() {
uni.navigateBack()
},
stepto: function (index) {
console.log(this.formData);
switch (index) {
case 1:
// 第1步数据验证这里编写
// 不满足使用 return 返回即可
break;
case 2:
// 第2步数据验证这里编写
// 不满足使用 return 返回即可
break;
case 3:
uni.reLaunch({
url: '/pages/index/index'
})
break;
}
console.log(index)
this.step = index;
},
// 提交
submit: function (e) {
// 部分能够获得的表单数据 在 e 对象保存
// 不支持表单直接获取的数据通过事件记录
// 最终整理获得完整的表单记录
var fromData = e.detail.value;
fromData['category_id'] = this.category_id
fromData['type'] = this.selectIndex
fromData['card_front_id'] = this.card_front.image_id
fromData['card_opposite_id'] = this.card_opposite.image_id
fromData['is_longTerm'] = this.effectiveIndex
fromData['is_longTerms'] = this.licensestartIndex
fromData['card_start_time'] = this.CardstartValue2
fromData['card_end_time'] = this.CardendValue2
fromData['operate_address'] = this.operate_address
fromData['operate_latitude'] = this.operate_latitude
fromData['operate_longitude'] = this.operate_longitude
fromData['license_id'] = this.license.image_id
fromData['license_start_time'] = this.LicensestartValue2
fromData['license_end_time'] = this.LicenseendValue2
fromData['enterprise_front_id'] = this.enterprise_front.image_id
fromData['enterprise_within_id'] = this.enterprise_within.image_id
fromData['service_id'] = this.service.image_id
fromData['open_license_id'] = this.open_license.image_id
fromData['bank_id'] = this.bank.image_id
fromData['logo_image_id'] = this.logo_image.image_id
fromData['bank_address'] = this.bank_address
// fromData['bank_deposit'] = this.bank_deposit
if (!this.logo_image.image_id) {
this.$toast('请上传商户LOGO')
return false
}
if (!fromData['shop_name']) {
this.$toast('请输入商户简称')
return false
}
if (this.category_id == 0) {
this.$toast('请选择主营类目')
return false
}
if (!fromData['shop_hours']) {
this.$toast('请输入营业时间')
return false
}
// if (!fromData['kftelephone']) {
// this.$toast('请输入客服电话')
// return false
// }
if (!this.service.image_id) {
this.$toast('请上传微信客服二维码')
return false
}
if (!this.card_front.image_id) {
this.$toast('请上传身份证正面')
return false
}
if (!this.card_opposite.image_id) {
this.$toast('请上传身份证背面')
return false
}
if (!fromData['name']) {
this.$toast('请输入姓名')
return false
}
if (!fromData['mailbox']) {
this.$toast('请输入邮箱')
return false
}
if (!fromData['phone']) {
this.$toast('请输入手机号')
return false
}
if (!fromData['IDCard']) {
this.$toast('请输入身份证号')
return false
}
if (!fromData['IDCard_address']) {
this.$toast('请输入身份证地址')
return false
}
if (!fromData['WeChat']) {
this.$toast('请输入微信号')
return false
}
if (fromData['is_longTerm'] == 0) {
if (!this.CardstartValue2) {
this.$toast('请选择身份证有效期')
return false
}
}
// if (!this.operate_address) {
// this.$toast('请选择经营地址')
// return false
// }
if (!this.license.image_id) {
this.$toast('请上传营业执照')
return false
}
if (!fromData['license_name']) {
this.$toast('请输入营业执照名称')
return false
}
if (!fromData['credit_code']) {
this.$toast('请输入统一社会信用代码')
return false
}
if (!fromData['license_address']) {
this.$toast('请输入营业执照地址')
return false
}
if (fromData['is_longTerms'] == 0) {
if (!this.LicensestartValue2) {
this.$toast('请选择营业执照有效期')
return false
}
}
if (!this.enterprise_front.image_id) {
this.$toast('请上传门头照')
return false
}
if (this.selectIndex == 1) {
if (!this.open_license.image_id) {
this.$toast('请上传开户许可')
return false
}
}
if (!this.enterprise_within.image_id) {
this.$toast('请上传内景照')
return false
}
if (!this.bank.image_id) {
this.$toast('请上传银行账户开户证明')
return false
}
if (!fromData.bank_card) {
this.$toast('请输入银行卡号')
return false
}
if (!fromData['bank_deposit']) {
this.$toast('请输入开户银行')
return false
}
if (!this.radiochecked) {
this.$toast('请阅读协议')
return false
}
var rule = [
{
name: "mailbox",
checkType: "email",
checkRule: "",
errorMsg: "邮箱格式错误"
},
{
name: "phone",
checkType: "phone",
checkRule: "^(-?\\d+)$",
errorMsg: "请输入正确的手机号",
},
// {
// name: "kftelephone",
// checkType: "phone",
// checkRule: "^(-?\\d+)$",
// errorMsg: "请输入正确的手机号",
// },
{
name: "IDCard",
checkType: "idCard",
checkRule: "",
errorMsg: "身份证号码错误"
}
];
var checkRes = graceChecker.check(fromData, rule);
if (checkRes) {
} else {
uni.showToast({
title: graceChecker.error,
icon: "none"
});
return false;
}
this.disabled = true
InfoApi.add({
fromData
})
.then(result => {
this.step = 3
})
.finally(result => {
this.disabled = false
})
}
}
}
</script>
<style scoped>
.gui-step-item {
width: 130rpx;
}
.form-add-footer-btns {
padding: 0 38rpx;
font-size: 30rpx;
line-height: 100rpx;
}
.modal-btns {
line-height: 100rpx;
height: 100rpx;
font-size: 35rpx;
text-align: center;
width: 320rpx;
}
</style>
<style lang="scss" scoped>
.dealer-boot {
padding: 10rpx 30rpx;
margin-top: 80rpx;
.msg__icon {
font-size: 120rpx;
color: #8e84fc;
}
.boot__submit {
margin-top: 60rpx;
}
}
</style>
<style>
page {
background-color: #f5f6f7;
}
</style>