/* * 入驻店铺管理——编辑入驻店铺信息 * */ import { connect } from 'dva/index'; import React, { Component, Fragment } from 'react'; import { Form, Table, Tooltip, } from 'antd'; import { failTip, getSldHorLine, sldLlineRtextAddGoods, sldIconBtnBg, sldCommonTitle, sldComLanguage, getSldEmptyH, sucTip, sldSvgIcon, list_com_page_more, mobile_reg, } from '@/utils/utils'; import global from '@/global.less'; import router from 'umi/router'; import { Scrollbars } from 'react-custom-scrollbars'; import SldTableRowTwo from '@/components/SldTableRowTwo'; import areaData from '@/assets/area.json'; import { apiUrl } from '@/utils/sldconfig.js'; import { week_to_num, month_to_num } from '@/utils/util_data'; import SldPreviewImg from '@/components/SldPreviewImg/SldPreviewImg'; import defaultSettings from '@/defaultSettings'; let sthis = ''; const FormItem = Form.Item; @connect(({ store, global, share }) => ({ store, global, share })) @Form.create() export default class EditSettledStore extends Component { constructor(props) { super(props); sthis = this; const { form: { getFieldDecorator }, } = props; this.state = { show_preview_modal: false,//预览图片modal框是否展示 preview_img: '',//预览图片 preview_alt_con: '',//预览图片内容 show_radio_flag: false, query: props.location.query, siteList: [], storeGradeIdList: {}, openTimeList: {}, currentSite: {}, // 当前站点 store_detail: {}, store_base_info: [{ //店铺信息 type: 'show_text', label: `${sldComLanguage('入驻类型')}`, name: 'enterTypeValue', extra: ``, text: ``, }, { type: 'cascader_common', label: `${sldComLanguage('所在地')}`, name: 'area', data: areaData,//三级地址 fieldNames: { label: 'regionName', value: 'regionCode', children: 'children' }, placeholder: `${sldComLanguage('请选择店铺所在地')}`,//请选择店铺所在地 initialValue: [], required: true, onChange: this.getAreaInfo, rules: [{ required: true, message: `${sldComLanguage('请选择店铺所在地')}`,//请选择店铺所在地 }], }, { type: 'textarea', maxLength: 40, label: `${sldComLanguage('详细地址')}`, name: 'companyAddress', placeholder: `${sldComLanguage('请输入店铺详细地址,最多40字')}`, initialValue: '', required: true, rules: [{ required: true, message: `${sldComLanguage('请输入详细地址')}`, }], }, { type: 'input', maxLength: 6, label: `${sldComLanguage('联系人')}`, name: 'contactName', placeholder: `${sldComLanguage('请输入联系人姓名,最多6个字')}`, initialValue: '', required: true, rules: [{ required: true, message: `${sldComLanguage('请输入联系人姓名')}`, }], }, { type: 'input', label: `${sldComLanguage('联系人手机号')}`, name: 'contactPhone', placeholder: `${sldComLanguage('请输入联系人手机号')}`, initialValue: '', required: true, rules: [{ required: true, message: `${sldComLanguage('请输入联系人手机号')}`, }, { pattern: mobile_reg, message: `${sldComLanguage('请输入正确的手机号')}`, }], }], personal_front_card_img: [{ type: 'upload_img_upload', label: `${sldComLanguage('身份证正面')}`, name: 'personCardUp', extra: `${sldComLanguage('支持JPG/PNG,大小不超过20M')}`, fileList: [], upload_name: 'file', upload_url: apiUrl + `v3/oss/common/upload?source=sellerApply`, uploadPreview: this.uploadImgPre, uploadChange: (info) => this.uploadImg('personal_front_card_img', 'personCardUp', info), initialValue: '', img_succ_info: {}, required: true, num: 1, item_height: 160, }, { type: 'upload_img_upload', label: `${sldComLanguage('身份证反面')}`, name: 'personCardDown', extra: `${sldComLanguage('支持JPG/PNG,大小不超过20M')}`, fileList: [], upload_name: 'file', upload_url: apiUrl + `v3/oss/common/upload?source=sellerApply`, uploadPreview: this.uploadImgPre, uploadChange: (info) => this.uploadImg('personal_front_card_img', 'personCardDown', info), initialValue: '', img_succ_info: {}, required: true, num: 1, item_height: 160, }],//身份证正面信息 business_license_img: [{ type: 'upload_img_upload', label: `${sldComLanguage('营业执照')}`, name: 'businessLicenseImage', extra: `${sldComLanguage('支持JPG/PNG,大小不超过20M')}`, fileList: [], upload_name: 'file', upload_url: apiUrl + `v3/oss/common/upload?source=sellerApply`, uploadPreview: this.uploadImgPre, uploadChange: (info) => this.uploadImg('business_license_img', 'businessLicenseImage', info), initialValue: '', img_succ_info: {}, required: true, num: 1, item_height: 160, }],//营业执照信息——企业入驻 replenish_img: [{ type: 'upload_img_upload', label: `${sldComLanguage('补充认证一')}`, name: 'moreQualification1', extra: `${sldComLanguage('支持JPG/PNG,大小不超过20M')}`, fileList: [], upload_name: 'file', upload_url: apiUrl + `v3/oss/common/upload?source=sellerApply`, uploadPreview: this.uploadImgPre, uploadChange: (info) => this.uploadImg('replenish_img', 'moreQualification1', info), initialValue: '', img_succ_info: {}, num: 1, item_height: 160, }, { type: 'upload_img_upload', label: `${sldComLanguage('补充认证二')}`, name: 'moreQualification2', extra: `${sldComLanguage('支持JPG/PNG,大小不超过20M')}`, fileList: [], upload_name: 'file', upload_url: apiUrl + `v3/oss/common/upload?source=sellerApply`, uploadPreview: this.uploadImgPre, uploadChange: (info) => this.uploadImg('replenish_img', 'moreQualification2', info), initialValue: '', img_succ_info: {}, num: 1, item_height: 160, }, { type: 'upload_img_upload', label: `${sldComLanguage('补充认证三')}`, name: 'moreQualification3', extra: `${sldComLanguage('支持JPG/PNG,大小不超过20M`')}`, fileList: [], upload_name: 'file', upload_url: apiUrl + `v3/oss/common/upload?source=sellerApply`, uploadPreview: this.uploadImgPre, uploadChange: (info) => this.uploadImg('replenish_img', 'moreQualification3', info), initialValue: '', img_succ_info: {}, num: 1, item_height: 160, }],//补充认证信息——企业入驻 store_business_info: [{ type: 'show_text', label: `${sldComLanguage('店铺名称')}`, name: 'storeName', extra: ``, text: ``, }, { type: 'select', label: `${sldComLanguage('店铺等级')}`, name: 'storeGradeId', sel_data: [], sele_key: 'gradeId', sele_name: 'gradeName', diy: true, required: true, rules: [{ required: true, message: `${sldComLanguage('请选择店铺等级')}`, }], }, { type: 'select', label: `${sldComLanguage('开店时长')}`, name: 'openTime', placeholder: `${sldComLanguage('请选择开店时长')}`, sel_data: [], required: true, rules: [{ required: true, message: `${sldComLanguage('请选择开店时长')}`, }], } ],//店铺经营信息 settle_info: [{ type: 'radio', label: `${sldComLanguage('结算日')}`, name: 'billCycle', required: true, sel_data: [ { name: `${sldComLanguage('按月结算')}`, key: 1 }, { name: `${sldComLanguage('按周结算')}`, key: 2 }, ], isReset: true, initialValue: 1, onChange: this.switchBillType, }],// 结算信息 columns: [{ title: ' ', dataIndex: 'key', align: 'center', width: 30, render: (text, record, index) => { return index + 1; }, }, { title: `${sldComLanguage('一级类目')}`, dataIndex: 'goodsCateName1', align: 'center', width: 100, }, { title: `${sldComLanguage('二级类目')}`, dataIndex: 'goodsCateName2', align: 'center', width: 100, }, { title: `${sldComLanguage('三级类目')}`, dataIndex: 'goodsCateName3', align: 'center', width: 100, }, // { // title:
// *{sldComLanguage('佣金比例')} //
{sldSvgIcon('#bfbbba', 14, 14, 'wen')}
//
//
, // dataIndex: 'scaling', // align: 'center', // width: 100, // } ],//经营类目数据 resList: [], // 取消原因数据 modalVisible: false, titleName: '', submiting: false, modal_width: 500, }; } sel_area_name = '';//选择店铺地址的文本内容 week_data = { type: 'checkboxgroup', label: `${sldComLanguage('结算日')}`, extra: `${sldComLanguage('设置该商家每周几进行结算,可多选,全部选中则为按天结算。')}`, name: 'billDays', placeholder: `${sldComLanguage('请选择结算日')}`, sldOptions: week_to_num(), rules: [{ required: true, message: `${sldComLanguage('请选择结算日')}`, }], item_height: 100, }; month_data = { type: 'checkboxgroup', label: `${sldComLanguage('结算日')}`, extra: `${sldComLanguage('设置该商家每月几号进行结算,可多选,若当月没有设置的日期则该日不进行结算。')}`, name: 'billDays', placeholder: `${sldComLanguage('请选择结算日')}`, sldOptions: month_to_num(), rules: [{ required: true, message: `${sldComLanguage('请选择结算日')}`, }], item_height: 140, }; async componentDidMount() { this.props.dispatch({ type: 'global/getLayoutCollapsed', }); const { query } = this.state; this.get_detail({ storeId: query.id }); } //获取开店时长列表 getStoreOpenTime = (webSite) => { return new Promise((resolve) => { let { openTimeList } = this.state; const { dispatch } = this.props; dispatch({ type: 'store/get_store_open_time', payload: {webSite}, callback: (res) => { if (res.state == 200) { let tmp_data = []; res.data.map(item => { tmp_data.push({ key: item, name: item + '年' }); }); openTimeList[webSite] = tmp_data; this.setState({ openTimeList, }, () => resolve()); } }, }); }) }; switchBillType = (e) => { let { settle_info,store_detail } = this.state; settle_info = settle_info.filter(item => item.name != 'billDays'); let tar_bill_data = {}; if (e == 1) { //按月结算 tar_bill_data = JSON.parse(JSON.stringify(this.month_data)); } else if (e == 2) { //按周结算 tar_bill_data = JSON.parse(JSON.stringify(this.week_data)); } if(store_detail.billType == e){ tar_bill_data.initialValue = store_detail.billDay != null && store_detail.billDay ? store_detail.billDay.split(',') : ''; } settle_info.push(tar_bill_data); this.setState({ settle_info }); }; //获取地址信息 getAreaInfo = (area) => { this.sel_area_name = '' for (let i in area) { this.sel_area_name += area[i].regionName; } }; //获取店铺等级 get_store_grade = (webSite) => { return new Promise((resolve) => { let { storeGradeIdList } = this.state; const { dispatch } = this.props; dispatch({ type: 'store/get_grade_lists', payload: { pageSize: list_com_page_more, webSite }, callback: (res) => { if (res.state == 200) { storeGradeIdList[webSite] = res.data.list this.setState({ storeGradeIdList, }, () => resolve()); } }, }); }) }; getInitData = async (siteList) => { const promiseList = []; siteList.forEach(site => { promiseList.push(this.get_store_grade(site.webSite)); promiseList.push(this.getStoreOpenTime(site.webSite)) }) await Promise.all(promiseList) } get_detail = (params) => { const { dispatch } = this.props; let { store_detail, store_base_info, personal_front_card_img, store_business_info, replenish_img, business_license_img, settle_info } = this.state; dispatch({ type: 'store/get_settled_store_apply_detail', payload: params, callback: async res => { if (res.state == 200) { store_detail = res.data; for (let i = 0; i < store_base_info.length; i++) { if (store_detail.enterType == 1 && store_base_info[i].name == 'enterTypeValue') { store_base_info.splice(i + 1, 0, { type: 'input', maxLength: 20, label: `${sldComLanguage('公司名称')}`, name: 'companyName', placeholder: `${sldComLanguage('请输入公司名称,最多20个字')}`, initialValue: '', required: true, rules: [{ required: true, message: `${sldComLanguage('请输入公司名称')}`, }], }); } if (store_base_info[i].name == 'enterTypeValue') { store_base_info[i].text = store_detail[store_base_info[i].name]; } else if (store_base_info[i].name == 'area') { store_base_info[i].initialValue = [store_detail.companyProvinceCode, store_detail.companyCityCode, store_detail.companyAreaCode]; this.sel_area_name = store_detail.areaInfo; } else { store_base_info[i].initialValue = store_detail[store_base_info[i].name]; } } if (store_detail.enterType == 1) { //补充认证1图片 if (store_detail.moreQualification1) { replenish_img[0].fileList.push({ response: { data: { path: store_detail.moreQualification1, url: store_detail.moreQualification1Path, }, }, name: store_detail.moreQualification1, uid: store_detail.moreQualification1, status: 'done', thumbUrl: store_detail.moreQualification1Path, }); } //补充认证2图片 if (store_detail.moreQualification2) { replenish_img[1].fileList.push({ response: { data: { path: store_detail.moreQualification2, url: store_detail.moreQualification2Path, }, }, name: store_detail.moreQualification2, uid: store_detail.moreQualification2, status: 'done', thumbUrl: store_detail.moreQualification2Path, }); } //补充认证3图片 if (store_detail.moreQualification3) { replenish_img[2].fileList.push({ response: { data: { path: store_detail.moreQualification3, url: store_detail.moreQualification3Path, }, }, name: store_detail.moreQualification3, uid: store_detail.moreQualification3, status: 'done', thumbUrl: store_detail.moreQualification3Path, }); } } //身份证正面图片 personal_front_card_img[0].fileList.push({ response: { data: { path: store_detail.personCardUp, url: store_detail.personCardUpPath, }, }, name: store_detail.personCardUp, uid: store_detail.personCardUp, status: 'done', thumbUrl: store_detail.personCardUpPath, }); //身份证反面图片 personal_front_card_img[1].fileList.push({ response: { data: { path: store_detail.personCardDown, url: store_detail.personCardDownPath, }, }, name: store_detail.personCardDown, uid: store_detail.personCardDown, status: 'done', thumbUrl: store_detail.personCardDownPath, }); //营业执照信息-start business_license_img[0].fileList.push({ response: { data: { path: store_detail.businessLicenseImage, url: store_detail.businessLicenseImagePath, }, }, name: store_detail.businessLicenseImage, uid: store_detail.businessLicenseImage, status: 'done', thumbUrl: store_detail.businessLicenseImagePath, }); //营业执照信息-end //店铺经营信息-start // store_business_info.map(item => { // if (item.name == 'storeName') { // item.text = store_detail[item.name]; // } else if (item.name == 'billCycle') { // item.initialValue = 1; // } else { // item.initialValue = store_detail[item.name]; // } // }); //店铺经营信息-end //结算信息-start for (let bill_i = 0; bill_i < settle_info.length; bill_i++) { if (settle_info[bill_i].name == 'billCycle') { settle_info[bill_i].initialValue = store_detail.billType ? store_detail.billType : 1; let temp_data = {}; if (settle_info[bill_i].initialValue == 1) { temp_data = JSON.parse(JSON.stringify(this.month_data)); } else { temp_data = JSON.parse(JSON.stringify(this.week_data)); } settle_info.push(temp_data); } else { settle_info[bill_i].initialValue = store_detail.billDay ? store_detail.billDay.split(',') : []; } } //结算信息-end const { storeGoodsCateVOList, storeBusinessVOList } = store_detail; const siteListData = []; storeGoodsCateVOList?.forEach(item => { if (!siteListData.find(site => site.webSite === item.webSite)) { siteListData.push({ webSite: item.webSite, webSiteName: item.webSiteName }) } }); if (siteListData.length) { await this.getInitData(siteListData) siteListData.forEach(item => { const matchItem = storeBusinessVOList.find(vo => vo.webSite === item.webSite); if (matchItem) { item.store_business_info = store_business_info.map(info => ({ ...info, name: `${info.name}_${matchItem.webSite}`, text: matchItem[info.name] ?? '', initialValue: matchItem[info.name] })).map((tag) => this.parseSiteItem(tag, item.webSite)) } }) const sortSiteList = siteListData.sort((a, b) => Number(a.webSite) - Number(b.webSite)); this.setState({siteList: sortSiteList}); this.setState({currentSite: siteListData[0]}) } this.setState({ store_base_info, store_detail, // store_business_info, replenish_img, business_license_img, personal_front_card_img, settle_info, show_radio_flag: true, }); } else { failTip(res.msg); } }, }); }; parseSiteItem = (item, webSite) => { const { storeGradeIdList, openTimeList} = this.state; if (item.name == 'billCycle') { item.initialValue = 1; } if (item.name.includes('storeGradeId')) { item.sel_data = storeGradeIdList[webSite] } if (item.name.includes('openTime')) { item.sel_data = openTimeList[webSite] } return item; } //表格编辑事件 handleFieldChange(val, fieldName, record) { let { store_detail } = this.state; let tar_data = store_detail.storeGoodsCateVOList.filter(item => item.bindId == record.bindId); if (tar_data.length > 0) { tar_data[0][fieldName] = val; this.setState({ store_detail }, () => { sthis.props.form.resetFields(['scaling' + record.bindId]); }); } } //预览图片 uploadImgPre = (img) => { this.viewImg(true, img.url || img.thumbUrl); }; //预览图片/关闭预览图片 viewImg = (flag, img = '', text = '') => { this.setState({ preview_img: img, preview_alt_con: text, show_preview_modal: flag, }); }; //上传图片 key name ,info uploadImg = (key, name, info) => { let tmp_data = this.state[key]; if (info.file.status != undefined && info.file.status != 'error') { for (let i in tmp_data) { if (tmp_data[i].name == name) { tmp_data[i].fileList = info.fileList; break; } } this.setState({ [key]: tmp_data }); } }; //保存 save = () => { let { query, currentSite, siteList, store_detail, business_license_img, replenish_img, personal_front_card_img } = this.state; this.props.form.validateFieldsAndScroll((err, values) => { if(!err){ let params = { ...values }; params.storeId = query.id; params.areaInfo = this.sel_area_name; params.billType = values.billCycle; // params.billDays = values.billDays.join(','); delete params.billCycle; params.companyProvinceCode = values.area[0]; params.companyCityCode = values.area[1]; params.companyAreaCode = values.area[2]; delete params.area; if (store_detail.enterType == 1) { //企业入驻 if (business_license_img[0].fileList.length == 0) { failTip(`${sldComLanguage('请上传营业执照图片')}`); return false; } else { params.businessLicenseImage = business_license_img[0].fileList[0].response.data.path;//营业执照图片 } if (replenish_img[0].fileList.length > 0) { params.moreQualification1 = replenish_img[0].fileList[0].response.data.path;//补充认证一图片 } if (replenish_img[1].fileList.length > 0) { params.moreQualification2 = replenish_img[1].fileList[0].response.data.path;//补充认证二图片 } if (replenish_img[2].fileList.length > 0) { params.moreQualification3 = replenish_img[2].fileList[0].response.data.path;//补充认证三图片 } } if (personal_front_card_img[0].fileList.length == 0) { failTip(`${sldComLanguage('请上传身份证正面图片')}`); return false; } else { params.personCardUp = personal_front_card_img[0].fileList[0].response.data.path;//身份证正面图片 } if (personal_front_card_img[1].fileList.length == 0) { failTip(`${sldComLanguage('请上传身份证反面图片')}`); return false; } else { params.personCardDown = personal_front_card_img[1].fileList[0].response.data.path;//身份证反面图片 } // 处理店铺等级以及开店时长 params.storeBusinessVOList = store_detail.storeBusinessVOList.map(item => ({ storeGradeId: values[`storeGradeId_${item.webSite}`], // storeGradeName: '5颗星', openTime: values[`openTime_${item.webSite}`], webSite: item.webSite, // storeName: item.storeName, })) siteList.forEach(site => { delete params[`storeGradeId_${site.webSite}`]; delete params[`openTime_${site.webSite}`] }) this.props.dispatch({ type: 'store/edit_settled_store_info', payload: params, callback: res => { if (res.state == 200) { this.props.dispatch({ type: 'share/updateDate', payload: { flag: true, type: 'edit_settle_store_info', sldGlobalShareData: {} } }); sucTip(res.msg, 1); //提示并返回上级页面 setTimeout(() => { sthis.props.history.goBack(); }, 500); } else { failTip(res.msg); } }, }); } else { const errorKeys = Object.keys(err); const firstKeyBelongSite = errorKeys[0].replace(/^[^_]*_/, ""); const matchSite = siteList.find(site => site.webSite === firstKeyBelongSite); if ( matchSite && firstKeyBelongSite !== currentSite.webSite) { this.setCurrentSite({ webSite: firstKeyBelongSite, webSiteName: matchSite.webSiteName }) } } }); }; // 切换站点 setCurrentSite = (site) => { this.setState({ currentSite: site }) } render() { const { siteList, currentSite, store_base_info, personal_front_card_img, store_business_info, columns, store_detail, business_license_img, replenish_img, show_radio_flag, settle_info, preview_img, show_preview_modal, preview_alt_con, } = this.state; return (
{sldLlineRtextAddGoods(defaultSettings.primaryColor, `${sldComLanguage('编辑店铺信息')}`)} {sldIconBtnBg(() => router.go(-1), 'fanhui', `${sldComLanguage('返回上级页面')}`, '#fff', 7, 0, 15, 15, 5)}
{getSldHorLine(1)} {sldCommonTitle(`${store_detail.enterType == 1 ? `${sldComLanguage('公司联系人信息')}` : `${sldComLanguage('店铺信息')}`}`, '#333', 5, 15, 15)} {store_detail.enterType == 1 && {sldCommonTitle(`${sldComLanguage('营业执照信息')}`, '#333', 5, 15, 15)} } {sldCommonTitle(`${store_detail.enterType == 1 ? `${sldComLanguage('法人身份信息')}` : `${sldComLanguage('身份证信息')}`}`, '#333', 5, 15, 15)} {store_detail.enterType == 1 && {sldCommonTitle(`${sldComLanguage('补充认证信息')}`, '#333', 5, 15, 15)} }
{siteList.map((site) => (
this.setCurrentSite(site)} className={`${global.site_item} ${site.webSite === currentSite.webSite ? global.site_active : ''}`} > {site.webSiteName}
))}
{sldCommonTitle(`${sldComLanguage('店铺经营信息')}`, '#333', 5, 15, 15)} {siteList.map((site) => (
{show_radio_flag && }
))}
{/*{show_radio_flag &&*/} {/**/} {/* {sldCommonTitle(`${sldComLanguage('店铺结算信息')}`, '#333', 5, 15, 15)}*/} {/* */} {/**/} {/*}*/} {sldCommonTitle(`${sldComLanguage('经营类目')}`, '#333', 5, 15, 15)}
item.webSite === currentSite.webSite)} size={'small'}/> {getSldEmptyH(10)} {/*图片预览-start*/} this.viewImg(false)}/> {/*图片预览-end*/}
router.go(-1)} className={global.add_goods_bottom_btn}> {sldComLanguage('返回')}
this.save()} className={`${global.add_goods_bottom_btn} ${global.add_goods_bottom_btn_sel}`}> {sldComLanguage('保存')}
); } }