Skip to content

J
jinfa-platform
Commit 7f6e3ece authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix:修改商品查看部分问题，新增云鲜采式商品描述模板

parent 6f33ac82
Hide whitespace changes
Inline Side-by-side
Showing with 349 additions and 74 deletions
src/pages/commodity/products/addProducts.tsx
View file @ 7f6e3ece
......@@ -86,9 +86,9 @@ const AddProducts: React.FC<{}> = (props) => {
// 切换模板
const renderTemplate = () => {
// if(currentTemplateName === 'science')
// return <ProductDescFormDefualt />
return <ProductDescFormDefualt />
// else if(currentTemplateName === 'cloud')
return <ProductDescFormCloud />
// return <ProductDescFormCloud />
}
const onSave = () => {
......
src/pages/commodity/products/addProductsItem/index.less
View file @ 7f6e3ece
......@@ -50,7 +50,7 @@
// productDescFormCloud
// productDescFormCloud // yunxiancai template
.cloud-container{
width: 790px;
}
......@@ -66,14 +66,15 @@
border:1px solid rgba(235,236,240,1);
text-align: center;
color:rgba(151,160,175,1);
height: 148px;
// height: 148px;
height: 48px;
p{
height: 128px;
line-height: 128px;
}
.cloudPVideo, .cloudMiddleAddBtn{
height: 44px;
line-height: 1.5;
// height: 44px;
// line-height: 1.5;
position: absolute;
top:50%;
left:50%;
......
src/pages/commodity/products/addProductsItem/productDescFormCloud.tsx
View file @ 7f6e3ece
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, SetStateAction, Dispatch, ChangeEvent, FocusEvent } from 'react'
import {history} from 'umi'
import { Button, message, Upload, Input } from 'antd'
import cx from 'classnames'
import styles from './index.less'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import { PlusOutlined, DeleteOutlined, MinusOutlined } from '@ant-design/icons'
import { UPLOAD_TYPE } from '@/constants'
import { inject, observer } from 'mobx-react'
import { store } from '@/store'
enum IFeaturePlaceholder {
'原产地描述',
'原料品种名(品系)及描述',
'养殖(种植)方式及养殖(种植)期描述',
'工艺特色(含添加剂)描述',
}
enum ISalePlaceholder {
'销售活动标签',
'消费特点描述',
'商品荣誉描述',
'品牌描述',
'生产商描述与认证',
}
const ProductDescFormCloud: React.FC<{}> = (props) => {
const [fileImageList, setFileImageList] = useState<any>([])
// 初始商品特色4个input值和3*4个image值
const [fileFeatureInputList, setFileFeatureInputList] = useState<string[]>(['','','',''])
const [fileFeatureImgList, setFileFeatureImgList] = useState<string[]>(['','','','','','','','','','','',''])
// 初始销售特性除活动标签外的4个input值和3*4个image值
const [fileSaleInputList, setFileSaleInputList] = useState<string[]>(['','','',''])
const [fileSaleImgList, setFileSaleImgList] = useState<string[]>(['','','','','','','','','','','',''])
// 商品销售属性 活动标签
const [fileTagInputList, setFileTagInputList] = useState<string[]>([''])
const [fileTagImgList, setFileTagImgList] = useState<string[]>(['','',''])
const [currentInputValue, setCurrentInputValue] = useState<string>()
const { ProductStore } = store
const { productInfoByEdit, setProductDescription } = ProductStore
useEffect(()=>{
// 编辑时：切出活动标签对应的input数据和image数据
if(history.location.query?.id){
console.log(productInfoByEdit.commodityRemark.word, productInfoByEdit.commodityRemark.image)
let word = [...productInfoByEdit.commodityRemark.word]
let image = [...productInfoByEdit.commodityRemark.image]
if(word.length > 0){
setFileFeatureInputList(() => word.splice(0, 4))
setFileSaleInputList(() => word.splice(word.length-4, 4))
setFileTagInputList(word)
}
if(image.length > 0){
setFileFeatureImgList(() => image.splice(0, 4*3))
setFileSaleImgList(() => image.splice(image.length-4*3, 4*3))
setFileTagImgList(image)
}
console.log(productInfoByEdit.commodityRemark)
}
}, [])
const uploadImgProps = {
// 生成传输数据
useEffect(() => {
let params = {
video: [],
image: [...fileFeatureImgList, ...fileTagImgList, ...fileSaleImgList],
word: [...fileFeatureInputList, ...fileTagInputList, ...fileSaleInputList]
}
setProductDescription(params)
}, [fileFeatureInputList, fileFeatureImgList, fileTagInputList, fileTagImgList, fileSaleInputList, fileSaleImgList])
const _uploadImgProps = {
name: 'file',
action: '/api/file/file/upload',
showUploadList: false,
data: { fileType: UPLOAD_TYPE },
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList, 'image files');
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
console.log(info.file.response)
if(Array.isArray(fileImageList)){
setFileImageList([...fileImageList, info.file.response.data])
// 设置传输数据
setProductDescription({
video: [],
image: [...fileImageList, info.file.response.data],
word: []
})
}else{
setFileImageList([info.file.response.data])
// 设置传输数据
setProductDescription({
video: [],
image: [info.file.response.data],
word: []
})
}
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
}
},
}
const handleDeleteImage = (_index: number) => {
console.log(_index, '删除的图片索引')
let imageArr = [...fileImageList]
imageArr.splice(_index, 1)
setFileImageList(imageArr)
const onImageChange = (info: any, _i: number, _list: string[], _setList: Dispatch<SetStateAction<string[]>>) => {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList, 'image files');
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
console.log(info.file.response, _i,'文件上传成功')
_setList(() => {
let temp = [..._list]
temp[_i] = info.file.response.data
return temp
})
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
}
}
const _handleDeleteImage = (_i: number, _list: string[], _setList: Dispatch<SetStateAction<string[]>>) => {
let imageArr = [..._list]
imageArr[_i] = ''
_setList(imageArr)
}
const onInputChange = (e: ChangeEvent<HTMLInputElement>, _i: number, _list: string[], _setList: Dispatch<SetStateAction<string[]>>) => {
let value = e.target.value
_setList(() => {
let temp = [..._list]
temp[_i] = value
return temp
})
}
const addTag = () => {
setFileTagInputList(() => {
let temp = [...fileTagInputList]
temp.push('')
return temp
})
setFileTagImgList(() => {
return [...fileTagImgList, '', '', '']
})
}
const removeTag = (_i: number) => {
// _i > 0
setFileTagInputList(() => {
let temp = [...fileTagInputList]
temp.splice(_i, 1)
return temp
})
setFileTagImgList(() => {
let temp = [...fileTagImgList]
temp.splice(_i*3, 3)
return temp
})
}
return (<>
<div className={styles.cloudContainer}>
{/* 商品特色 */}
<h3 className="commonPanelTitle" style={{marginBottom: 16}}>商品特色</h3>
<Input placeholder="原产地描述" />
{
fileImageList?.length > 0
?
fileImageList.map((item, index)=> <div key={index} className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={item} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>handleDeleteImage(index)} icon={<DeleteOutlined />} />
</div>
</div>
)
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload {...uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<br/>
<span>添加图片</span>
</Upload>
</div>
</div>
fileFeatureInputList.map((item, index) => <div key={index}>
<Input
onChange={(e) => onInputChange(e, index, fileFeatureInputList, setFileFeatureInputList)}
placeholder={IFeaturePlaceholder[index]}
value={item}
/>
{
fileFeatureImgList[index*3] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileFeatureImgList[index*3]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3, fileFeatureImgList, setFileFeatureImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3, fileFeatureImgList, setFileFeatureImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
{
fileFeatureImgList[index*3+1] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileFeatureImgList[index*3+1]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3+1, fileFeatureImgList, setFileFeatureImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3+1, fileFeatureImgList, setFileFeatureImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
{
fileFeatureImgList[index*3+2] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileFeatureImgList[index*3+2]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3+2, fileFeatureImgList, setFileFeatureImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3+2, fileFeatureImgList, setFileFeatureImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
</div>)
}
{/* 商品销售属性 活动标签 */}
<h3 className="commonPanelTitle" style={{marginTop: 16, marginBottom: 16}}>商品销售属性</h3>
<p>{fileTagInputList.toString()}</p>
{
fileTagInputList.map((item, index) => <div key={index}>
<p style={{display: 'flex', width: index? 872 : 844}}>
<Input
onChange={(e) => onInputChange(e, index, fileTagInputList, setFileTagInputList)}
placeholder={ISalePlaceholder[0]}
value={item}
/>
<Button onClick={() => addTag()} icon={<PlusOutlined />} style={{ margin: '0 12px' }} />
{ index > 0 && <Button onClick={() => removeTag(index)} icon={<MinusOutlined />} /> }
</p>
{
fileTagImgList[index*3] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileTagImgList[index*3]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3, fileTagImgList, setFileTagImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3, fileTagImgList, setFileTagImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
{
fileTagImgList[index*3+1] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileTagImgList[index*3+1]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3+1, fileTagImgList, setFileTagImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3+1, fileTagImgList, setFileTagImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
{
fileTagImgList[index*3+2] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileTagImgList[index*3+2]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3+2, fileTagImgList, setFileTagImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3+2, fileTagImgList, setFileTagImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
</div>)
}
{/* 商品销售属性 其他 */}
{
fileSaleInputList.map((item, index) => <div key={index}>
<Input
onChange={(e) => onInputChange(e, index, fileSaleInputList, setFileSaleInputList)}
placeholder={ISalePlaceholder[index+1]}
value={item}
/>
{
fileSaleImgList[index*3] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileSaleImgList[index*3]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3, fileSaleImgList, setFileSaleImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3, fileSaleImgList, setFileSaleImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
{
fileSaleImgList[index*3+1] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileSaleImgList[index*3+1]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3+1, fileSaleImgList, setFileSaleImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3+1, fileSaleImgList, setFileSaleImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
{
fileSaleImgList[index*3+2] ? <div className={cx(styles.cloudDescriptBox, styles.cloudMediaContentBox)}>
<p className={styles.cloudDivImage}><img src={fileSaleImgList[index*3+2]} /></p>
<div className={styles.cloudRightBtn}>
<Button size="small" onClick={()=>_handleDeleteImage(index*3+2, fileSaleImgList, setFileSaleImgList)} icon={<DeleteOutlined />} />
</div>
</div>
:
<div className={styles.cloudDescriptBox}>
<div className={styles.cloudMiddleAddBtn}>
<Upload onChange={(info) => onImageChange(info, index*3+2, fileSaleImgList, setFileSaleImgList)} {..._uploadImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<span>添加图片</span>
</Upload>
</div>
</div>
}
</div>)
}
</div>
</>)
......
src/pages/commodity/products/index.less
View file @ 7f6e3ece
......@@ -145,11 +145,13 @@
padding: 12px 0;
border:1px solid rgba(235,236,240,1);
display: flex;
flex-flow: wrap;
justify-content: left;
.imgItem{
width:180px;
height:180px;
margin-left: 16px;
margin-bottom: 12px;
border:1px solid rgba(235,236,240,1);
img{
width: 100%;
......@@ -161,11 +163,18 @@
height:240px;
margin-left: 16px;
border:1px solid rgba(235,236,240,1);
video {
width: 100%;
height: 100%;
}
}
p{
padding: 16px;
padding: 0 16px;
}
}
.description-word-box{
flex-direction: column;
}
.product-img-box{
margin: 24px;
padding: 12px 0;
......@@ -192,6 +201,9 @@
border-radius:4px;
color:rgba(0,179,122,1);
}
.descript-null {
opacity: 0.6;
}
// 修改单价
.site-input-right {
......
src/pages/commodity/products/viewProducts.tsx
View file @ 7f6e3ece
......@@ -8,6 +8,7 @@ import {
UserOutlined
} from '@ant-design/icons'
import { ColumnType } from 'antd/lib/table/interface'
import cx from 'classnames'
import ReutrnEle from '@/components/ReturnEle'
import styles from "./index.less"
import { PublicApi } from '@/services/api'
......@@ -583,10 +584,14 @@ const viewProducts: React.FC<{}> = () => {
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="商品描述">
{/* 预留 文字区块 */}
{/* <div className={styles.descriptionBox}>
<p>商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</p>
</div> */}
{/* 文字区块 */}
<div className={cx(styles.descriptionBox, styles.descriptionWordBox)}>
{
productDetail?.commodityRemark?.word?.length>0 ? productDetail?.commodityRemark?.word.map((_item, _index) =>
_item && <p>{_item}</p>
) : <p className={styles.descriptNull}>暂无文字数据</p>
}
</div>
{/* 视频区块 */}
<div className={styles.descriptionBox}>
{
......@@ -594,15 +599,15 @@ const viewProducts: React.FC<{}> = () => {
<video src={_item} controls={true}>
您的浏览器不支持视频标签，请及时升级。
</video>
</div>) : <p>暂无数据</p>
</div>) : <p className={styles.descriptNull}>暂无视频数据</p>
}
</div>
{/* 图片区块 */}
<div className={styles.descriptionBox}>
{
productDetail?.commodityRemark?.image?.length>0 ? productDetail?.commodityRemark?.image.map((_item, _index)=> <div key={_index} className={styles.imgItem}>
productDetail?.commodityRemark?.image?.length>0 ? productDetail?.commodityRemark?.image.map((_item, _index)=> _item && <div key={_index} className={styles.imgItem}>
<img src={_item} />
</div>) : <p>暂无数据</p>
</div>) : <p className={styles.descriptNull}>暂无图片数据</p>
}
</div>
</Card>
......
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