Skip to content

J
jinfa-platform
Commit 4fb9f4b4 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:商品收藏接口和申请成为会员接口对接

parent 7ac1b447
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 53 deletions
src/pages/lxMall/commodityDetail/components/Exhibition/index.tsx
View file @ 4fb9f4b4
import React, { useState, useEffect } from 'react'
import cx from 'classnames'
import { LeftOutlined, RightOutlined, StarOutlined } from '@ant-design/icons'
import { LeftOutlined, RightOutlined, StarOutlined, StarFilled } from '@ant-design/icons'
import { GetSearchShopStoreGetCommodityDetailResponse } from '@/services/SearchApi'
import { getAuth } from '@/utils/auth'
import { PublicApi } from '@/services/api'
import styles from './index.less'
import { message } from 'antd'
interface imgItemType {
id: number;
......@@ -18,6 +21,14 @@ const Exhibition: React.FC<ExhibitionPropsType> = (props) => {
const { imgList = [], commodityDetail } = props
const [previewImg, setPreviewImg] = useState<any>()
const [offSetLeft, setOffSetLeft] = useState<number>(0)
const [collectState, setCollectState] = useState<boolean>(false)
const [collectCount, setCollectCount] = useState<number>(0)
let collectFlg = true
useEffect(() => {
if (commodityDetail) {
getCollectState()
}
}, [commodityDetail])
useEffect(() => {
if (imgList.length > 0) {
......@@ -40,6 +51,66 @@ const Exhibition: React.FC<ExhibitionPropsType> = (props) => {
}
}
/**
* 获取收藏状态
*/
const getCollectState = () => {
if (getAuth()) {
//@ts-ignore
PublicApi.getSearchShopCommodityCollectGetCommodityCollect({ commodityId: commodityDetail.id }).then(res => {
if (res.code === 1000) {
setCollectState(res.data.isCollect)
setCollectCount(res.data.count)
}
})
}
}
/**
* 收藏或取消收藏
*/
const handleToggleCollect = () => {
if (!getAuth()) {
if (collectFlg) {
collectFlg = false
message.info("请先进行登录")
setTimeout(() => {
collectFlg = true
window.location.replace(`/user/login?redirect=${btoa(encodeURIComponent(String(window.location)))}`)
}, 1500);
}
}
if (collectFlg) {
collectFlg = false
let postFn;
let param: any = {
commodityId: commodityDetail.id
}
if (collectState) {
postFn = PublicApi.postSearchShopCommodityCollectDeleteCommodityCollect
} else {
postFn = PublicApi.postSearchShopCommodityCollectSaveCommodityCollect
}
postFn && postFn(param).then(res => {
if (res.code === 1000) {
message.destroy()
if (collectState) {
message.success('取消收藏成功')
setCollectState(false)
setCollectCount(collectCount - 1)
} else {
setCollectState(true)
setCollectCount(collectCount + 1)
message.success('收藏成功')
}
}
collectFlg = true
}).catch(() => {
collectFlg = true
})
}
}
return (
<div className={styles.exhibition}>
<div className={styles.exhibition_img_container}>
......@@ -60,9 +131,9 @@ const Exhibition: React.FC<ExhibitionPropsType> = (props) => {
</div>
<div className={cx(styles.exhibition_tool_item, styles.next)} onClick={() => handleNext()}><RightOutlined /></div>
</div>
<div className={cx(styles.collection_state)}>
<StarOutlined />
<label>收藏商品(112)</label>
<div className={cx(styles.collection_state, collectState ? styles.active : '')} onClick={() => handleToggleCollect()}>
{collectState ? <StarFilled /> : <StarOutlined />}
<label>收藏商品{collectCount > 0 ? `(${collectCount})` : ""}</label>
</div>
</div>
)
......
src/pages/lxMall/commodityDetail/index.tsx
View file @ 4fb9f4b4
......@@ -207,8 +207,8 @@ const CommodityDetail = (props) => {
}, [selectAttrVal, commodityDetail])
const getCommodityPriceRange = () => {
if (commodityDetail?.unitPriceAndPicList) {
for (let item of commodityDetail?.unitPriceAndPicList) {
if (commodityDetail?.unitPricePicList) {
for (let item of commodityDetail?.unitPricePicList) {
let temp = item.attributeAndValueList.map(attrItem => {
return {
......@@ -252,13 +252,10 @@ const CommodityDetail = (props) => {
if (clickFlag) {
clickFlag = false
let param = {
commodityUnitPrice: {
id: selectCommodityId
},
commodityUnitPriceId: selectCommodityId,
count: buyCount
}
PublicApi.postProductPurchaseSaveOrUpdatePurchase(param).then(res => {
PublicApi.postSearchShopPurchaseSaveOrUpdatePurchase(param).then(res => {
clickFlag = true
if (res.code === 1000) {
message.destroy()
......@@ -403,11 +400,11 @@ const CommodityDetail = (props) => {
/**
* 初始化商品详情数据
* @param unitPriceAndPicList
* @param unitPricePicList
*/
const initAttributeAndValueList = (dataInfo: any) => {
let unitPriceAndPicList = dataInfo?.unitPriceAndPicList
if (!unitPriceAndPicList) {
let unitPricePicList = dataInfo?.unitPricePicList
if (!unitPricePicList) {
return
}
let tempAttrList = []
......@@ -415,7 +412,7 @@ const CommodityDetail = (props) => {
id: dataInfo.id,
commodityPic: dataInfo.mainPic
}]
for (let item of unitPriceAndPicList) {
for (let item of unitPricePicList) {
// 初始化商品图片-》 商品主图加上商品属性图片
if (item.commodityPic) {
let tempCommodityPic = item.commodityPic.map((picItem, picIndex) => {
......@@ -456,8 +453,8 @@ const CommodityDetail = (props) => {
}
}
}
setCurrentPriceRange(sortUnitPrice(unitPriceAndPicList[0].unitPrice))
setStockCount(unitPriceAndPicList[0].stockCount)
setCurrentPriceRange(sortUnitPrice(unitPricePicList[0].unitPrice))
setStockCount(unitPricePicList[0].stockCount)
setCommodityImgList(tempImgList)
setAttributeList(tempAttrList)
}
......@@ -614,9 +611,9 @@ const CommodityDetail = (props) => {
let newSelectAttrVal = JSON.parse(JSON.stringify(selectAttrVal))
if (selectAttrVal.length > 0) {
// newSelectAttrVal.pop()
if (commodityDetail?.unitPriceAndPicList) {
if (commodityDetail?.unitPricePicList) {
let tempList = []
for (let item of commodityDetail?.unitPriceAndPicList) {
for (let item of commodityDetail?.unitPricePicList) {
let temp = item.attributeAndValueList.map(attrItem => {
return {
attrId: attrItem.customerAttribute.id,
......
src/pages/lxMall/components/ShopHeader/index.less
View file @ 4fb9f4b4
......@@ -253,7 +253,8 @@
height: 32px;
background-color: #D32F2F;
color: #FFF;
line-height: 32px;
border: none;
outline: none;
text-align: center;
font-size: 12px;
cursor: pointer;
......
src/pages/lxMall/components/ShopHeader/index.tsx
View file @ 4fb9f4b4
import React, { useState, useEffect } from 'react'
import { CaretDownOutlined } from '@ant-design/icons'
import { Rate, Input } from 'antd'
import { Rate, Input, Button } from 'antd'
import { history, Link } from 'umi'
import isEmpty from 'lodash/isEmpty'
// import logo from '@/theme/imgs/logo_w.png'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import { GetTemplateShopFindShopResponse } from '@/services/TemplateApi'
import styles from './index.less'
import { PublicApi } from '@/services/api'
interface ShopHeaderPropsType {
shopId: number;
shopUrlParam: string;
shopInfo: GetTemplateShopFindShopResponse;
shopInfo: any;
logo: string;
}
const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
const { shopId, shopUrlParam, shopInfo, logo } = props
const [searchValue, setSearchValue] = useState<string>("")
const [applyLoading, setApplyLoading] = useState<boolean>(false)
const { search } = history.location.query
useEffect(() => {
......@@ -37,6 +38,24 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
}
}
const applyFroVip = () => {
if (shopInfo) {
let param = {
memberId: shopInfo.memberId,
roleId: shopInfo.roleId
}
setApplyLoading(true)
PublicApi.postMemberAbilityMallSubApply(param).then((res) => {
if (res.code === 1000) {
}
setApplyLoading(false)
}).catch(() => {
setApplyLoading(false)
})
}
}
return (
<div className={styles.shop_header}>
<div className={styles.shop_header_container}>
......@@ -94,7 +113,7 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
<div className={styles.shop_info_btn}><Link to={`/shop?shopId=${shopUrlParam}`}>进入店铺</Link></div>
<div className={styles.shop_info_btn}>收藏本店</div>
</div>
<div className={styles.apply_member_btn}>申请成为本店会员</div>
<Button loading={applyLoading} className={styles.apply_member_btn} onClick={() => applyFroVip()}>申请成为本店会员</Button>
</div>
</div>
<div className={styles.mall_search}>
......
src/pages/lxMall/information/detail.tsx
View file @ 4fb9f4b4
......@@ -106,7 +106,7 @@ const InformationDetail: React.FC<InformationDetailPropsType> = (props) => {
<div className={styles.information_detail_view}>
<div className={styles.information_detail_view_item}>
<ClockCircleOutlined />
<span className={styles.information_detail_view_item_text}>{(moment(newsDetail.createTime).format('YYYY-MM-DD HH:mm:ss'))}</span>
<span className={styles.information_detail_view_item_text}>{(moment(newsDetail.createTime).format('YYYY-MM-DD HH:mm'))}</span>
</div>
<div className={styles.information_detail_view_item}>
<EyeOutlined />
......
src/pages/lxMall/information/index.tsx
View file @ 4fb9f4b4
......@@ -205,7 +205,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</span>
<span className={styles.information_common_view_item_text}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm'))}</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
......
src/pages/lxMall/information/search.tsx
View file @ 4fb9f4b4
......@@ -200,7 +200,7 @@ const InformationSearch: React.FC<InformationPropsType> = (props) => {
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</span>
<span className={styles.information_common_view_item_text}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm'))}</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
......
src/pages/lxMall/purchaseOrder/index.less
View file @ 4fb9f4b4
......@@ -84,6 +84,7 @@
width: 120px;
text-align: center;
margin-top: 10px;
white-space: nowrap;
}
}
......
src/pages/lxMall/purchaseOrder/index.tsx
View file @ 4fb9f4b4
......@@ -11,9 +11,8 @@ import { priceFormat, numFormat } from "@/utils/numberFomat"
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import { LAYOUT_TYPE } from '@/constants'
import { GetProductPurchaseGetPurchaseListResponse } from '@/services/ProductApi'
import { GetSearchShopPurchaseGetPurchaseListResponse } from '@/services/SearchApi'
import { GetTemplateChannelFindChannelResponse } from '@/services/TemplateApi'
import { GlobalConfig } from '@/global/config'
import { isEmpty } from 'lodash'
interface PurchaseOrderPropsType {
......@@ -40,14 +39,14 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
const fetchPurchaseList = (initState = false) => {
PublicApi.getProductPurchaseGetPurchaseList().then(res => {
PublicApi.getSearchShopPurchaseGetPurchaseList().then(res => {
if (res.code === 1000) {
initPurchaseList(res.data, initState)
}
})
}
const initPurchaseList = (list: GetProductPurchaseGetPurchaseListResponse, initState) => {
const initPurchaseList = (list: GetSearchShopPurchaseGetPurchaseListResponse, initState) => {
let result = []
for (let item of list) {
// 判断店铺id是否已存在数组中
......@@ -185,7 +184,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
id,
count
}
PublicApi.postProductPurchaseSaveOrUpdatePurchase(param).then(res => {
PublicApi.postSearchShopPurchaseSaveOrUpdatePurchase(param).then(res => {
countState = true
if (res.code === 1000) {
message.destroy()
......@@ -245,7 +244,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
content: `是否从进货单中移除该商品？`,
onOk: () => {
return new Promise((resolve, reject) => {
PublicApi.postProductPurchaseDeletePurchase({ idList: [id] }).then(res => {
PublicApi.postSearchShopPurchaseDeletePurchase({ idList: [id] }).then(res => {
if (res.code === 1000) {
// fetchPurchaseList()
deleteListItems([id])
......@@ -279,7 +278,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
content: `是否从进货单中移除选中的商品？`,
onOk: () => {
return new Promise((resolve, reject) => {
PublicApi.postProductPurchaseDeletePurchase({ idList: idList }).then(res => {
PublicApi.postSearchShopPurchaseDeletePurchase({ idList: idList }).then(res => {
if (res.code === 1000) {
// fetchPurchaseList()
deleteListItems(idList)
......
src/pages/systemSetting/collection/commodity.tsx
View file @ 4fb9f4b4
import React from 'react'
import React, { useEffect, useState } from 'react'
import cx from 'classnames'
import { Button, Pagination } from 'antd'
import { StarFilled } from '@ant-design/icons'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import styles from './index.less'
import { PublicApi } from '@/services/api'
import { numFormat } from '@/utils/numberFomat'
import moment from 'moment'
import { COMMODITY_TYPE } from '@/constants'
const Commodity: React.FC = () => {
const [list, setList] = useState([])
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(10)
const [totalCount, setTotalCount] = useState<number>(0)
useEffect(() => {
fetchCollectCommodityList()
}, [])
/**
* 获取收藏的商品列表
*/
const fetchCollectCommodityList = () => {
let param = {
current,
pageSize
}
//@ts-ignore
PublicApi.getSearchShopCommodityCollectGetCommodityCollectList(param).then(res => {
if (res.code === 1000) {
setList(res.data.data)
setTotalCount(res.data.totalCount)
}
})
}
let CommodityList = Array.apply({}, new Array(7))
......@@ -22,19 +49,19 @@ const Commodity: React.FC = () => {
}
}
const renderPrice = (priceType) => {
const renderPrice = (priceType, commodity) => {
switch (priceType) {
case COMMODITY_TYPE.prompt:
return (
<div className={styles.commodity_price}>
<span>￥</span>
<label>79.00</label>
<label>{commodity.min}</label>
</div>
)
case COMMODITY_TYPE.integral:
return (
<div className={styles.commodity_point}>
2,000~3,000积分
{numFormat(commodity.min)}~{numFormat(commodity.max)}积分
</div>
)
case COMMODITY_TYPE.inquiry:
......@@ -46,19 +73,21 @@ const Commodity: React.FC = () => {
<>
<div className={styles.commodity_list}>
{
CommodityList.map((item, index) => (
list && list.map((item, index) => (
<div className={styles.commodity_list_item} key={`commodity_list_item_${index}`}>
<div className={cx(styles.commodity_list_item_item, styles.morehalf)}>
<div className={styles.shop_header_info}>
<div className={styles.shop_header_info_logo}>
<img src="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/69f3f329d5a848119dc89029a10acb081600332395671.jpg" />
<img src={item.commodity.mainPic} />
</div>
<div className={styles.shop_header_info_content}>
<p className={styles.commodity_name}>0.8-1.0mm黑色手折纹胎水牛皮</p>
<p className={styles.commodity_name}>{item.commodity.name}</p>
<ul className={styles.tags_list}>
<li className={styles.tags_list_item} key={`tags_list_item_1`}>黄牛头皮层自然摔纹</li>
<li className={styles.tags_list_item} key={`tags_list_item_2`}>硬度适中偏软</li>
<li className={styles.tags_list_item} key={`tags_list_item_3`}>手感舒适</li>
{
item.commodity.sellingPoint && item.commodity.sellingPoint.map((pointItem, pointIndex) => (
<li className={styles.tags_list_item} key={`tags_list_item_${pointIndex}`}>{pointItem}</li>
))
}
</ul>
</div>
</div>
......@@ -66,15 +95,15 @@ const Commodity: React.FC = () => {
<div className={cx(styles.commodity_list_item_item)}>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>1288</span>
<span>{item.commodity.creditScore || 0}</span>
</div>
<div className={styles.commodity_shopname}>温州市龙昌皮业有限公司</div>
<div className={styles.commodity_shopname}>{item.commodity.memberName}</div>
</div>
<div className={cx(styles.commodity_list_item_item)}>
{renderPrice(1)}
{renderPrice(item.commodity.priceType, item.commodity)}
</div>
<div className={cx(styles.commodity_list_item_item)}>
<span className={styles.date}>2020-10-25 10:58</span>
<span className={styles.date}>{moment(item.createTime).format("YYYY-MM-DD HH:mm")}</span>
</div>
<div className={cx(styles.commodity_list_item_item)}>
<div className={styles.collection_state_wrap}>
......
src/store/filter/index.ts
View file @ 4fb9f4b4
......@@ -215,7 +215,7 @@ class FilterStore {
break
}
}
PublicApi.postProductShopOftenSelectSaveOrUpdateOftenSelect(tempFilterParam).then(res => {
PublicApi.postSearchShopOftenSelectSaveOrUpdateOftenSelect(tempFilterParam).then(res => {
if (res.code === 1000) {
this.getCommonlyUsedFilterList()
resolve()
......@@ -235,7 +235,7 @@ class FilterStore {
current: 1,
pageSize: 50,
}
const res = await PublicApi.getProductShopOftenSelectGetOftenSelectList(param)
const res = await PublicApi.getSearchShopOftenSelectGetOftenSelectList(param)
runInAction(() => {
if (res.code === 1000) {
this.commonlyUseFilter = res.data.data || []
......@@ -250,7 +250,7 @@ class FilterStore {
public async deleteCommonlyUsedFilterItem(id: number) {
return new Promise((resolve, reject) => {
//@ts-ignore
PublicApi.postProductShopOftenSelectDeleteOftenSelect({ id }).then(res => {
PublicApi.postSearchShopOftenSelectDeleteOftenSelect({ id }).then(res => {
if (res.code === 1000) {
this.getCommonlyUsedFilterList()
resolve()
......@@ -272,7 +272,7 @@ class FilterStore {
this.commonlyUseFilterId = id
}
//@ts-ignore
const res = await PublicApi.getProductShopOftenSelectGetOftenSelect({ id })
const res = await PublicApi.getSearchShopOftenSelectGetOftenSelect({ id })
runInAction(() => {
if (res.code === 1000) {
const data = res.data
......
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