Skip to content

J
jinfa-platform
Commit 1b926cde authored by GuanHua's avatar GuanHua
Browse files
Options

fix: 修改获取店铺信息接口

parent bd6c9875
Hide whitespace changes
Inline Side-by-side
Showing with 584 additions and 583 deletions
src/pages/channel/channelInfo/index.less
View file @ 1b926cde
......@@ -29,7 +29,7 @@
.img_list {
display: flex;
flex-wrap: wrap;
}
.shop_url {
......@@ -120,4 +120,4 @@
}
}
}
}
\ No newline at end of file
}
src/pages/channel/channelInfo/index.tsx
View file @ 1b926cde
......@@ -328,7 +328,7 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
label={<RequireItem label="公司简介" isRequire={true} />}
rules={[{ required: true, message: "请输入公司简介" }]}
>
<Input.TextArea allowClear rows={5} className={styles.form_item} placeholder="请输入公司简介" maxLength={200} />
<Input.TextArea rows={5} className={styles.form_item} placeholder="请输入公司简介" maxLength={200} />
</Form.Item>
<Form.Item
labelAlign="left"
......@@ -346,15 +346,15 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
</div>
))
}
<UploadImage
imgUrl={""}
large={true}
fileMaxSize={100}
size="600x400"
onChange={(url) => handleAddworkshopPics(url)}
/>
</div>
<UploadImage
imgUrl={""}
large={true}
fileMaxSize={100}
size="600x400"
onChange={(url) => handleAddworkshopPics(url)}
/>
</div>
</Form.Item>
<Form.Item
......@@ -373,15 +373,15 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
</div>
))
}
<UploadImage
imgUrl={""}
large={true}
fileMaxSize={100}
size="106x107"
onChange={(url) => handleAddhonorPics(url)}
/>
</div>
<UploadImage
imgUrl={""}
large={true}
fileMaxSize={100}
size="106x107"
onChange={(url) => handleAddhonorPics(url)}
/>
</div>
</Form.Item>
<Form.Item
......
src/pages/lxMall/components/ShopHeader/index.tsx
View file @ 1b926cde
......@@ -25,7 +25,7 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
const { search } = history.location.query
useEffect(() => {
if (!!search) {
if (search) {
setSearchValue(search)
} else {
setSearchValue("")
......@@ -48,13 +48,12 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
const applyFroVip = () => {
if (shopInfo) {
let param = {
const param = {
memberId: shopInfo.memberId,
roleId: shopInfo.roleId
}
setApplyLoading(true)
PublicApi.postMemberAbilityMallSubApply(param).then((res) => {
if (res.code === 1000) { }
setApplyLoading(false)
}).catch(() => {
setApplyLoading(false)
......@@ -63,8 +62,8 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
}
const handleCollect = () => {
let status = !collectState
let param = {
const status = !collectState
const param = {
shopId: shopInfo.id,
status
}
......@@ -101,7 +100,7 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
</div>
<div className={styles.shop_header_info_content}>
<div className={styles.shop_header_info_content_name}>
<span>{shopInfo?.company}</span>
<span>{shopInfo?.memberName}</span>
<CaretDownOutlined className={styles.shop_header_info_content_icon} />
</div>
<div className={styles.shop_header_info_content_about}>
......@@ -112,7 +111,7 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
</div>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>{200}</span>
<span>{shopInfo?.creditPoint || 0}</span>
</div>
</div>
</div>
......
src/pages/lxMall/components/TopBar/index.tsx
View file @ 1b926cde
......@@ -67,7 +67,7 @@ const TopBar: React.FC<TopBarPropsType> = (props) => {
{
userInfo ? (
<li className={cx(styles.topbar_menu_item, styles.username)}>
<span className={styles.username}>{userInfo?.name}</span>
<Link className={styles.username} to="/memberCenter/home">{userInfo?.name}</Link>
<CaretDownOutlined className={styles.arrow_icon} />
<div className={styles.userInfo_card_split}></div>
<div className={styles.userInfo_card}>
......@@ -134,4 +134,4 @@ const TopBar: React.FC<TopBarPropsType> = (props) => {
)
}
export default inject('UserStore')(observer(TopBar))
\ No newline at end of file
export default inject('UserStore')(observer(TopBar))
src/pages/lxMall/layouts/LXChannelLayout.tsx
View file @ 1b926cde
......@@ -85,11 +85,11 @@ const LXChannelLayout: React.FC<LXChannelLayoutPropsType> = (props) => {
<Fragment>
<Helmet>
{
shopInfo ? <title>{shopInfo.company}</title> : null
shopInfo ? <title>{shopInfo.memberName}</title> : null
}
</Helmet>
<div className={styles.lxmall_page}>
<TopBar langComponent={<SelectLang />} name={shopInfo?.company} type={LAYOUT_TYPE.channel} shopUrlParam={channelId} />
<TopBar langComponent={<SelectLang />} name={shopInfo?.memberName} type={LAYOUT_TYPE.channel} shopUrlParam={channelId} />
<div className={styles.content}>
{
!menuRouter?.hideHeader && (
......
src/pages/lxMall/layouts/LXIChannelLayout.tsx
View file @ 1b926cde
......@@ -85,11 +85,11 @@ const LXIChannelLayout: React.FC<LXIChannelLayoutPropsType> = (props) => {
<Fragment>
<Helmet>
{
shopInfo ? <title>{shopInfo.company}</title> : null
shopInfo ? <title>{shopInfo.memberName}</title> : null
}
</Helmet>
<div className={styles.lxmall_page}>
<TopBar langComponent={<SelectLang />} name={shopInfo?.company} type={LAYOUT_TYPE.ichannel} shopUrlParam={channelId} />
<TopBar langComponent={<SelectLang />} name={shopInfo?.memberName} type={LAYOUT_TYPE.ichannel} shopUrlParam={channelId} />
<div className={styles.content}>
{
!menuRouter?.hideHeader && (
......
src/pages/lxMall/layouts/LXShopLayout.tsx
View file @ 1b926cde
......@@ -64,10 +64,17 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
const fetchShopInfo = (memberId, roleId, storeId) => {
const param: any = {
memberId,
roleId,
storeId
}
PublicApi.getTemplateShopFindShop(param).then(res => {
let getShopInfoFn = null
if(storeId) {
param.storeId = storeId
getShopInfoFn = PublicApi.getTemplateWebMemberShopWebMemberShopMain
} else if(roleId) {
param.roleId = roleId
getShopInfoFn = PublicApi.getTemplateWebMemberShopWebFindByMemberIdAndRoleId
}
console.log(param, "param")
getShopInfoFn && getShopInfoFn(param).then(res => {
if (res.code === 1000) {
setShopInfo(res.data)
}
......@@ -107,7 +114,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
<ShopHeader logo={mallInfo.logoUrl} shopId={query.shopId} shopUrlParam={shopId} shopInfo={shopInfo} updateShopInfo={() => handleUpdate()} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.shop} shopId={query.shopId} shopUrlParam={shopId} />
{
!loading ? shopInfo ? shopInfo.status === 1 ? children && React.Children.map(children, (child: any) => {
!loading ? shopInfo ? children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
{
layoutType: LAYOUT_TYPE.shop,
......@@ -118,7 +125,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
updateShopInfo: () => handleUpdate()
},
);
}) : <SearchShopResult search={shopInfo.company} /> : <SearchShopResult /> : null
}) : <SearchShopResult search={shopInfo.company} /> : <SearchShopResult />
}
</div>
<Footer />
......
src/pages/shop/shopInfo/index.less
View file @ 1b926cde
.shop_info {
background-color: #ffffff;
padding: 32px 24px;
border-radius: 8px;
.add_template_form {
:global {
.ant-form-item-label>label::after {
display: none;
}
}
}
.form_item {
width: 572px;
resize: none;
}
.form_item_wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
.size_require {
color: #C0C4CC;
}
}
.img_list {
display: flex;
}
.shop_url {
width: 572px;
color: #909399;
margin-top: 16px;
font-size: 12px;
display: flex;
&>label {
flex: 1;
width: 0;
display: block;
color: #303133;
margin-left: 8px;
margin-right: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.copy_icon {
cursor: pointer;
}
}
.upload_btn {
position: relative;
width: 104px;
height: 104px;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
flex-direction: column;
background: rgba(250, 251, 252, 1);
border-radius: 2px;
border: 1px dashed rgba(223, 225, 230, 1);
cursor: pointer;
margin-right: 24px;
overflow: hidden;
margin-bottom: 12px;
&.upload {
border: 1px solid rgba(223, 225, 230, 1);
background: #ffffff;
}
.upload_img {
height: 100%;
width: 100%;
display: block;
margin: 0 auto;
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat;
}
&>img {
width: 100%;
height: 100%;
}
&.large {
width: 175px;
height: 120px;
}
&>p {
margin-top: 12px;
}
.delete_btn {
position: absolute;
width: 24px;
height: 24px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.45);
top: 8px;
right: 8px;
color: #ffffff;
text-align: center;
line-height: 24px;
&:hover {
cursor: pointer;
opacity: .8;
}
}
}
}
\ No newline at end of file
.shop_info {
background-color: #ffffff;
padding: 32px 24px;
border-radius: 8px;
.add_template_form {
:global {
.ant-form-item-label>label::after {
display: none;
}
}
}
.form_item {
width: 572px;
resize: none;
}
.form_item_wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
.size_require {
color: #C0C4CC;
}
}
.img_list {
display: flex;
flex-wrap: wrap;
}
.shop_url {
width: 572px;
color: #909399;
margin-top: 16px;
font-size: 12px;
display: flex;
&>label {
flex: 1;
width: 0;
display: block;
color: #303133;
margin-left: 8px;
margin-right: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.copy_icon {
cursor: pointer;
}
}
.upload_btn {
position: relative;
width: 104px;
height: 104px;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
flex-direction: column;
background: rgba(250, 251, 252, 1);
border-radius: 2px;
border: 1px dashed rgba(223, 225, 230, 1);
cursor: pointer;
margin-right: 24px;
overflow: hidden;
margin-bottom: 12px;
&.upload {
border: 1px solid rgba(223, 225, 230, 1);
background: #ffffff;
}
.upload_img {
height: 100%;
width: 100%;
display: block;
margin: 0 auto;
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat;
}
&>img {
width: 100%;
height: 100%;
}
&.large {
width: 175px;
height: 120px;
}
&>p {
margin-top: 12px;
}
.delete_btn {
position: absolute;
width: 24px;
height: 24px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.45);
top: 8px;
right: 8px;
color: #ffffff;
text-align: center;
line-height: 24px;
&:hover {
cursor: pointer;
opacity: .8;
}
}
}
}
src/pages/shop/shopInfo/index.tsx
View file @ 1b926cde
import React, { useState, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Form, Input, Button, Tooltip, Select, message } from 'antd'
import { Prompt } from 'umi'
import { inject } from 'mobx-react'
import { QuestionCircleOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons'
import CitySelect from '@/components/CitySelect'
import RequireItem from '@/components/RequireItem'
import { PublicApi } from '@/services/api'
import UploadImage from '@/components/UploadImage'
import { GetTemplateShopFindShopResponse } from '@/services/TemplateApi'
import copy from 'copy-to-clipboard'
import cx from 'classnames'
import styles from './index.less'
import { getAuth } from '@/utils/auth'
import { isEmpty } from '@formily/antd/esm/shared'
interface ShopInfoPropsType {
SiteStore: {
siteUrl: string;
siteId: number;
}
}
const defaultCityData = { index: 0, provinceCode: 0, province: '', cityCode: 0, city: '' }
const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
const { siteUrl, siteId } = props.SiteStore
const [formIsHalfFilledOut, setFormIsHalfFilledOut] = useState(false)
const [form] = Form.useForm()
const [allMallList, setAllMallList] = useState([])
const [storeUrl, setStoreUrl] = useState<string>('')
const [selectCityData, setSelectCityData] = useState<any>([defaultCityData])
const [workshopPics, setWorkshopPics] = useState([]) // 厂房照片
const [honorPics, setHonorPics] = useState([]) // 资质荣誉
const [logo, setLogo] = useState<string>("")
const [shopInfo, setShopInfo] = useState<GetTemplateShopFindShopResponse>()
const [shopId, setShopId] = useState<number>()
useEffect(() => {
fetchShopInfo()
fetchAllShop()
}, [])
// 根据站点获取商城信息
const fetchAllShop = () => {
const param: any = {
siteId,
type: 1
}
PublicApi.getManageShopFindShopsBySiteId(param).then(res => {
if (res.code === 1000) {
setAllMallList(res.data)
}
})
}
/**
* 获取店铺信息
*/
const fetchShopInfo = () => {
const { memberId, memberRoleId } = getAuth() || {}
const param: any = {
memberId,
roleId: memberRoleId
}
PublicApi.getTemplateShopFindShop(param).then(res => {
const data = res.data
if (res.code === 1000) {
setShopInfo(data)
setSelectCityData(initMemberShopArea(data.memberShopAreas))
setLogo(data.logo)
setShopId(data.shopId)
setWorkshopPics(data.workshopPics || [])
setHonorPics(data.honorPics || [])
if (data.shopId && data.memberId) {
setStoreUrl(data.storeUrl || "")
}
form.setFieldsValue({
describe: data.describe,
customerUrl: data.customerUrl,
logo: data.logo,
memberShopAreas: initMemberShopArea(data.memberShopAreas),
workshopPics: data.workshopPics || [],
honorPics: data.honorPics || []
})
}
})
}
const initMemberShopArea = (data) => {
if (!isEmpty(data)) {
return data.map((item, index) => {
item.index = index
return item
})
} else {
return [defaultCityData]
}
}
const handleAddNewCitySelect = (item: any) => {
const temp = [...selectCityData]
temp.push(item)
setSelectCityData(temp)
form.setFieldsValue({
memberShopAreas: temp
})
}
const handleReduceCitySelect = (index: number) => {
let temp = JSON.parse(JSON.stringify(selectCityData))
temp = temp.filter((item: any) => item.index !== index)
setSelectCityData(temp)
form.setFieldsValue({
memberShopAreas: temp
})
}
const handleCityChange = (data: any) => {
setSelectCityData(data)
form.setFieldsValue({
memberShopAreas: data
})
}
const handleDeleteWorkShopImgItem = (itemInfo: any) => {
let result = [...workshopPics]
result = result.filter(item => item !== itemInfo)
setWorkshopPics(result)
form.setFieldsValue({
workshopPics: result
})
}
const handleDeleteHonorPicsItem = (itemInfo: any) => {
let result = [...honorPics]
result = result.filter(item => item !== itemInfo)
setHonorPics(result)
form.setFieldsValue({
honorPics: result
})
}
const handleSave = (e: any) => {
e.preventDefault()
form.validateFields().then((value: any) => {
if (!checkMemberShopAreas(value.memberShopAreas)) {
return
}
if (!shopId) {
message.error("店铺链接不能为空")
return
}
value.storeUrl = storeUrl || `${siteUrl}/shop`
value.shopId = shopId
PublicApi.postTemplateShopSaveShop(value).then(res => {
if (res.code === 1000) {
fetchShopInfo()
setFormIsHalfFilledOut(false)
}
})
})
}
const checkMemberShopAreas = (shopAreas) => {
if (isEmpty(shopAreas)) {
message.destroy()
message.error('请选择归属地市')
return false
}
return shopAreas.every(item => {
if (!item.provinceCode) {
message.destroy()
message.error('请选择归属地市')
return false
} else {
return true
}
})
}
const handleCopyLinke = (link: string) => {
if (copy(link)) {
message.success('复制成功!')
}
}
/**
* 添加厂房照片
* @param url
*/
const handleAddworkshopPics = (url: string) => {
setWorkshopPics([...workshopPics, url])
form.setFieldsValue({
workshopPics: [...workshopPics, url]
})
}
/**
* 添加荣誉图片
* @param url
*/
const handleAddhonorPics = (url: string) => {
setHonorPics([...honorPics, url])
form.setFieldsValue({
honorPics: [...honorPics, url]
})
}
const handleMallSelectChange = (mallId: number) => {
// let selectItem = allMallList.filter(item => item.id === mallId)
setShopId(mallId)
if (!shopInfo) {
return null
}
if (shopInfo.shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(mallId)
setStoreUrl(resUrl)
} else {
setStoreUrl(null)
}
}
const getMallItemAndSetUrl = (mallId) => {
let result = ""
const mallItem = allMallList.filter(item => item.id === mallId)[0]
if (!mallItem) {
return ""
}
if (mallItem.environment === 1) {
let newSiteUrl = siteUrl
if (newSiteUrl.indexOf('http') < 0) {
newSiteUrl = `http://` + newSiteUrl
}
switch (mallItem.type) {
case 1:
result = `${newSiteUrl}/shop?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
break
case 2:
result = `${newSiteUrl}/shop/pointsMall?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
break
default:
result = ""
break
}
} else {
result = ""
}
return result
}
const handleFormValueChange = () => {
setFormIsHalfFilledOut(true)
}
const getSelectMallStoreUrl = () => {
if (!shopInfo) {
return null
}
if (shopId && shopInfo.shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(shopId)
return resUrl ? (
<div className={styles.shop_url}>
<span>当前店铺链接：</span>
<label>{resUrl}</label>
<CopyOutlined className={styles.copy_icon} onClick={() => handleCopyLinke(resUrl)} />
</div>
) : null
}
return null
}
return (
<PageHeaderWrapper>
<Prompt when={formIsHalfFilledOut} message="您还有未保存的内容，是否确定要离开？" />
<div className={styles.shop_info}>
<Form
form={form}
className={styles.add_template_form}
hideRequiredMark={true}
onValuesChange={handleFormValueChange}
>
<Form.Item
labelAlign="left"
name="memberShopAreas"
label={<RequireItem label="归属地市" isRequire={true} />}
rules={[{ required: true, message: "请选择归属地市" }]}
>
<CitySelect
selectData={selectCityData}
onAdd={handleAddNewCitySelect}
onReduce={handleReduceCitySelect}
onChange={handleCityChange}
/>
</Form.Item>
<Form.Item
labelAlign="left"
name="logo"
label={<RequireItem label="公司LOGO" isRequire={true} />}
rules={[{ required: true, message: "请上传公司LOGO" }]}
>
<UploadImage
imgUrl={logo}
fileMaxSize={50}
size="275*50"
onChange={(val) => {
setLogo(val)
form.setFieldsValue({
logo: val
})
}}
/>
</Form.Item>
<Form.Item
labelAlign="left"
name="describe"
label={<RequireItem label="公司简介" isRequire={true} />}
rules={[{ required: true, message: "请输入公司简介" }]}
>
<Input.TextArea allowClear rows={5} className={styles.form_item} placeholder="请输入公司简介" maxLength={200} />
</Form.Item>
<Form.Item
labelAlign="left"
name="workshopPics"
label={<RequireItem label="厂房照片" />}
>
<div className={styles.form_item_wrap}>
<div className={styles.img_list}>
{
workshopPics.map((item, index) => (
<div key={index} className={cx(styles.upload_btn, styles.large, styles.upload)}>
<div className={styles.delete_btn} onClick={() => handleDeleteWorkShopImgItem(item)}><DeleteOutlined /></div>
<div className={styles.upload_img} style={{ backgroundImage: `url(${item})` }} />
</div>
))
}
</div>
<UploadImage
imgUrl={""}
large={true}
fileMaxSize={100}
size="600x400"
onChange={(url) => handleAddworkshopPics(url)}
/>
</div>
</Form.Item>
<Form.Item
labelAlign="left"
name="honorPics"
label={<RequireItem label="资质荣誉" brief={<Tooltip placement="top" title="如商标注册证书、品牌授权证书等证明材料"><QuestionCircleOutlined /></Tooltip>} />}
>
<div className={styles.form_item_wrap}>
<div className={styles.img_list}>
{
honorPics.map((item, index) => (
<div key={index} className={cx(styles.upload_btn, styles.large, styles.upload)}>
<div className={styles.delete_btn} onClick={() => handleDeleteHonorPicsItem(item)}><DeleteOutlined /></div>
<img className={styles.upload_img} src={item} />
</div>
))
}
</div>
<UploadImage
imgUrl={""}
large={true}
fileMaxSize={100}
size="106x107"
onChange={(url) => handleAddhonorPics(url)}
/>
</div>
</Form.Item>
<Form.Item
labelAlign="left"
name="shopId"
label={<RequireItem label="店铺链接" />}
// rules={[{ required: true, message: "请输入客服链接" }]}
>
<Select allowClear value={shopId} className={styles.form_item} onChange={handleMallSelectChange}>
{
allMallList.map(item => (
<Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
))
}
</Select>
{
getSelectMallStoreUrl()
}
</Form.Item>
<Form.Item
labelAlign="left"
name="customerUrl"
label={<RequireItem label="客服链接" />}
rules={[{ pattern: /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/, message: '请输入正确的客服链接' }]}
>
<Input allowClear className={styles.form_item} />
</Form.Item>
<Form.Item
label={<RequireItem label="" />}
>
<Button type="primary" style={{ marginRight: 16 }} onClick={handleSave}>保存</Button>
</Form.Item>
</Form>
</div>
</PageHeaderWrapper>
)
}
export default inject('SiteStore')(ShopInfo)
import React, { useState, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Form, Input, Button, Tooltip, Select, message } from 'antd'
import { Prompt } from 'umi'
import { inject } from 'mobx-react'
import { QuestionCircleOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons'
import CitySelect from '@/components/CitySelect'
import RequireItem from '@/components/RequireItem'
import { PublicApi } from '@/services/api'
import UploadImage from '@/components/UploadImage'
import { GetTemplateShopFindShopResponse } from '@/services/TemplateApi'
import copy from 'copy-to-clipboard'
import cx from 'classnames'
import styles from './index.less'
import { getAuth } from '@/utils/auth'
import { isEmpty } from '@formily/antd/esm/shared'
interface ShopInfoPropsType {
SiteStore: {
siteUrl: string;
siteId: number;
}
}
const defaultCityData = { index: 0, provinceCode: 0, province: '', cityCode: 0, city: '' }
const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
const { siteUrl, siteId } = props.SiteStore
const [formIsHalfFilledOut, setFormIsHalfFilledOut] = useState(false)
const [form] = Form.useForm()
const [allMallList, setAllMallList] = useState([])
const [storeUrl, setStoreUrl] = useState<string>('')
const [selectCityData, setSelectCityData] = useState<any>([defaultCityData])
const [workshopPics, setWorkshopPics] = useState([]) // 厂房照片
const [honorPics, setHonorPics] = useState([]) // 资质荣誉
const [logo, setLogo] = useState<string>("")
const [shopInfo, setShopInfo] = useState<GetTemplateShopFindShopResponse>()
const [shopId, setShopId] = useState<number>()
useEffect(() => {
fetchShopInfo()
fetchAllShop()
}, [])
// 根据站点获取商城信息
const fetchAllShop = () => {
const param: any = {
siteId,
type: 1
}
PublicApi.getManageShopFindShopsBySiteId(param).then(res => {
if (res.code === 1000) {
setAllMallList(res.data)
}
})
}
/**
* 获取店铺信息
*/
const fetchShopInfo = () => {
const { memberId, memberRoleId } = getAuth() || {}
const param: any = {
memberId,
roleId: memberRoleId
}
PublicApi.getTemplateWebMemberShopWebFindCurrMemberShop(param).then(res => {
const data = res.data
if (res.code === 1000) {
setShopInfo(data)
setSelectCityData(initMemberShopArea(data.memberShopAreas))
setLogo(data.logo)
setShopId(data.shopId)
setWorkshopPics(data.workshopPics || [])
setHonorPics(data.honorPics || [])
if (data.shopId && data.memberId) {
setStoreUrl(data.storeUrl || "")
}
form.setFieldsValue({
describe: data.describe,
customerUrl: data.customerUrl,
logo: data.logo,
memberShopAreas: initMemberShopArea(data.memberShopAreas),
workshopPics: data.workshopPics || [],
honorPics: data.honorPics || []
})
}
})
}
const initMemberShopArea = (data) => {
if (!isEmpty(data)) {
return data.map((item, index) => {
item.index = index
return item
})
} else {
return [defaultCityData]
}
}
const handleAddNewCitySelect = (item: any) => {
const temp = [...selectCityData]
temp.push(item)
setSelectCityData(temp)
form.setFieldsValue({
memberShopAreas: temp
})
}
const handleReduceCitySelect = (index: number) => {
let temp = JSON.parse(JSON.stringify(selectCityData))
temp = temp.filter((item: any) => item.index !== index)
setSelectCityData(temp)
form.setFieldsValue({
memberShopAreas: temp
})
}
const handleCityChange = (data: any) => {
setSelectCityData(data)
form.setFieldsValue({
memberShopAreas: data
})
}
const handleDeleteWorkShopImgItem = (itemInfo: any) => {
let result = [...workshopPics]
result = result.filter(item => item !== itemInfo)
setWorkshopPics(result)
form.setFieldsValue({
workshopPics: result
})
}
const handleDeleteHonorPicsItem = (itemInfo: any) => {
let result = [...honorPics]
result = result.filter(item => item !== itemInfo)
setHonorPics(result)
form.setFieldsValue({
honorPics: result
})
}
const handleSave = (e: any) => {
e.preventDefault()
form.validateFields().then((value: any) => {
if (!checkMemberShopAreas(value.memberShopAreas)) {
return
}
if (!shopId) {
message.error("店铺链接不能为空")
return
}
value.storeUrl = storeUrl || `${siteUrl}/shop`
value.shopId = shopId
PublicApi.postTemplateWebMemberShopWebSaveCurrMemberShop(value).then(res => {
if (res.code === 1000) {
fetchShopInfo()
setFormIsHalfFilledOut(false)
}
})
})
}
const checkMemberShopAreas = (shopAreas) => {
if (isEmpty(shopAreas)) {
message.destroy()
message.error('请选择归属地市')
return false
}
return shopAreas.every(item => {
if (!item.provinceCode) {
message.destroy()
message.error('请选择归属地市')
return false
} else {
return true
}
})
}
const handleCopyLinke = (link: string) => {
if (copy(link)) {
message.success('复制成功!')
}
}
/**
* 添加厂房照片
* @param url
*/
const handleAddworkshopPics = (url: string) => {
setWorkshopPics([...workshopPics, url])
form.setFieldsValue({
workshopPics: [...workshopPics, url]
})
}
/**
* 添加荣誉图片
* @param url
*/
const handleAddhonorPics = (url: string) => {
setHonorPics([...honorPics, url])
form.setFieldsValue({
honorPics: [...honorPics, url]
})
}
const handleMallSelectChange = (mallId: number) => {
// let selectItem = allMallList.filter(item => item.id === mallId)
setShopId(mallId)
if (!shopInfo) {
return null
}
if (shopInfo.shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(mallId)
setStoreUrl(resUrl)
} else {
setStoreUrl(null)
}
}
const getMallItemAndSetUrl = (mallId) => {
let result = ""
const mallItem = allMallList.filter(item => item.id === mallId)[0]
if (!mallItem) {
return ""
}
if (mallItem.environment === 1) {
let newSiteUrl = siteUrl
if (newSiteUrl.indexOf('http') < 0) {
newSiteUrl = `http://` + newSiteUrl
}
switch (mallItem.type) {
case 1:
result = `${newSiteUrl}/shop?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
break
case 2:
result = `${newSiteUrl}/shop/pointsMall?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
break
default:
result = ""
break
}
} else {
result = ""
}
return result
}
const handleFormValueChange = () => {
setFormIsHalfFilledOut(true)
}
const getSelectMallStoreUrl = () => {
if (!shopInfo) {
return null
}
if (shopId && shopInfo.shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(shopId)
return resUrl ? (
<div className={styles.shop_url}>
<span>当前店铺链接：</span>
<label>{resUrl}</label>
<CopyOutlined className={styles.copy_icon} onClick={() => handleCopyLinke(resUrl)} />
</div>
) : null
}
return null
}
return (
<PageHeaderWrapper>
<Prompt when={formIsHalfFilledOut} message="您还有未保存的内容，是否确定要离开？" />
<div className={styles.shop_info}>
<Form
form={form}
className={styles.add_template_form}
hideRequiredMark={true}
onValuesChange={handleFormValueChange}
>
<Form.Item
labelAlign="left"
name="memberShopAreas"
label={<RequireItem label="归属地市" isRequire={true} />}
rules={[{ required: true, message: "请选择归属地市" }]}
>
<CitySelect
selectData={selectCityData}
onAdd={handleAddNewCitySelect}
onReduce={handleReduceCitySelect}
onChange={handleCityChange}
/>
</Form.Item>
<Form.Item
labelAlign="left"
name="logo"
label={<RequireItem label="公司LOGO" isRequire={true} />}
rules={[{ required: true, message: "请上传公司LOGO" }]}
>
<UploadImage
imgUrl={logo}
fileMaxSize={50}
size="275*50"
onChange={(val) => {
setLogo(val)
form.setFieldsValue({
logo: val
})
}}
/>
</Form.Item>
<Form.Item
labelAlign="left"
name="describe"
label={<RequireItem label="公司简介" isRequire={true} />}
rules={[{ required: true, message: "请输入公司简介" }]}
>
<Input.TextArea rows={5} className={styles.form_item} placeholder="请输入公司简介" maxLength={200} />
</Form.Item>
<Form.Item
labelAlign="left"
name="workshopPics"
label={<RequireItem label="厂房照片" />}
>
<div className={styles.form_item_wrap}>
<div className={styles.img_list}>
{
workshopPics.map((item, index) => (
<div key={index} className={cx(styles.upload_btn, styles.large, styles.upload)}>
<div className={styles.delete_btn} onClick={() => handleDeleteWorkShopImgItem(item)}><DeleteOutlined /></div>
<div className={styles.upload_img} style={{ backgroundImage: `url(${item})` }} />
</div>
))
}
<UploadImage
imgUrl={""}
large={true}
fileMaxSize={100}
size="600x400"
onChange={(url) => handleAddworkshopPics(url)}
/>
</div>
</div>
</Form.Item>
<Form.Item
labelAlign="left"
name="honorPics"
label={<RequireItem label="资质荣誉" brief={<Tooltip placement="top" title="如商标注册证书、品牌授权证书等证明材料"><QuestionCircleOutlined /></Tooltip>} />}
>
<div className={styles.form_item_wrap}>
<div className={styles.img_list}>
{
honorPics.map((item, index) => (
<div key={index} className={cx(styles.upload_btn, styles.large, styles.upload)}>
<div className={styles.delete_btn} onClick={() => handleDeleteHonorPicsItem(item)}><DeleteOutlined /></div>
<img className={styles.upload_img} src={item} />
</div>
))
}
<UploadImage
imgUrl={""}
large={true}
fileMaxSize={100}
size="106x107"
onChange={(url) => handleAddhonorPics(url)}
/>
</div>
</div>
</Form.Item>
<Form.Item
labelAlign="left"
name="shopId"
label={<RequireItem label="店铺链接" />}
// rules={[{ required: true, message: "请输入客服链接" }]}
>
<Select allowClear value={shopId} className={styles.form_item} onChange={handleMallSelectChange}>
{
allMallList.map(item => (
<Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
))
}
</Select>
{
getSelectMallStoreUrl()
}
</Form.Item>
<Form.Item
labelAlign="left"
name="customerUrl"
label={<RequireItem label="客服链接" />}
rules={[{ pattern: /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/, message: '请输入正确的客服链接' }]}
>
<Input allowClear className={styles.form_item} />
</Form.Item>
<Form.Item
label={<RequireItem label="" />}
>
<Button type="primary" style={{ marginRight: 16 }} onClick={handleSave}>保存</Button>
</Form.Item>
</Form>
</div>
</PageHeaderWrapper>
)
}
export default inject('SiteStore')(ShopInfo)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment