Skip to content

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

feat:新增积分商品的显示和下单

parent 0e6ebfdf
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 135 deletions
package.json
View file @ fc5903cf
......@@ -41,7 +41,7 @@
"copy-to-clipboard": "^3.3.1",
"god": "0.1.28",
"lingxi-design": "^1.0.7",
"lingxi-design-ui": "^1.1.3",
"lingxi-design-ui": "^1.1.4",
"lingxi-editor-core": "^1.0.6",
"lingxi-web": "^1.0.6",
"lint-staged": "^10.0.7",
......@@ -78,4 +78,4 @@
"json2ts": "^0.0.7",
"ora": "^4.0.4"
}
}
}
\ No newline at end of file
src/pages/channel/channelInfo/index.tsx
View file @ fc5903cf
......@@ -341,7 +341,7 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
imgUrl={""}
large={true}
fileMaxSize={100}
size="xxx"
size="600x400"
onChange={(url) => handleAddworkshopPics(url)}
/>
</div>
......@@ -368,7 +368,7 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
imgUrl={""}
large={true}
fileMaxSize={100}
size="xxx"
size="106x107"
onChange={(url) => handleAddhonorPics(url)}
/>
</div>
......
src/pages/editor/settingsPanel/propsSettings/index.less
View file @ fc5903cf
......@@ -35,8 +35,11 @@
padding: 0 !important;
}
:global {
.ant-drawer-title {
font-weight: bold;
}
:global {
.card-container {
.ant-form-item {
......
src/pages/lxMall/commodityDetail/components/BrowseRecords/index.less
View file @ fc5903cf
......@@ -48,6 +48,10 @@
color: #333333;
text-align: center;
margin-top: 5px;
&.integral {
color: #EA8000;
}
}
}
}
......
src/pages/lxMall/commodityDetail/components/BrowseRecords/index.tsx
View file @ fc5903cf
......@@ -2,14 +2,15 @@ import React, { useRef } from 'react'
import { Carousel } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import cx from 'classnames'
import { COMMODITY_TYPE } from '@/constants'
import styles from './index.less'
interface BrowseRecordsPropsType {
priceType: COMMODITY_TYPE
}
const BrowseRecords: React.FC<BrowseRecordsPropsType> = () => {
const BrowseRecords: React.FC<BrowseRecordsPropsType> = (props) => {
const { priceType } = props
const actionRef = useRef<any>()
const product_list = [
......@@ -46,7 +47,7 @@ const BrowseRecords: React.FC<BrowseRecordsPropsType> = () => {
const new_product_list = arrGroup(product_list, 3)
return (
return priceType ? (
<div className={styles.browse_records}>
<div className={styles.browse_records_title}>
<span className={styles.browse_records_title_line}></span>
......@@ -64,7 +65,11 @@ const BrowseRecords: React.FC<BrowseRecordsPropsType> = () => {
<div className={styles.product_img_box}>
<img src={childItem.imgUrl} />
</div>
<div className={styles.product_price}>￥{childItem.price}</div>
{
priceType === COMMODITY_TYPE.integral ? <div className={cx(styles.product_price, styles.integral)}>2,000~3,000积分</div> :
<div className={styles.product_price}>￥{childItem.price}</div>
}
</div>
))
}
......@@ -76,7 +81,7 @@ const BrowseRecords: React.FC<BrowseRecordsPropsType> = () => {
<RightOutlined className={cx(styles.common_arrow_btn, styles.next)} onClick={() => actionRef.current.next()} />
</div>
</div>
)
) : null
}
export default BrowseRecords
src/pages/lxMall/commodityDetail/components/Interested/index.less
View file @ fc5903cf
......@@ -38,6 +38,10 @@
margin-top: 6px;
font-size: 14px;
&.integral {
color: #EA8000;
}
&>span {
font-size: 12px;
}
......
src/pages/lxMall/commodityDetail/components/Interested/index.tsx
View file @ fc5903cf
import React from 'react'
import { COMMODITY_TYPE } from '@/constants'
import cx from 'classnames'
import styles from './index.less'
const Interested: React.FC = () => {
interface InterestedPropsType {
priceType: COMMODITY_TYPE
}
const Interested: React.FC<InterestedPropsType> = (props) => {
const { priceType } = props
return (
<div className={styles.interested}>
......@@ -13,8 +20,10 @@ const Interested: React.FC = () => {
<img src="https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg" />
</div>
<div className={styles.interested_product_list_item_name}>0.8-1.0mm黑色手折纹胎…</div>
<div className={styles.interested_product_list_item_price}><span>￥</span> 79.00</div>
{
priceType === COMMODITY_TYPE.integral ? <div className={cx(styles.interested_product_list_item_price, styles.integral)}>2,000~3,000 积分</div> :
<div className={styles.interested_product_list_item_price}><span>￥</span> 79.00</div>
}
</div>
</a>
<a href="/shop/commodity/detail?id=asdjflewjfe&type=prompt">
......@@ -23,7 +32,10 @@ const Interested: React.FC = () => {
<img src="https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg" />
</div>
<div className={styles.interested_product_list_item_name}>0.8-1.0mm黑色手折纹胎…</div>
<div className={styles.interested_product_list_item_price}><span>￥</span> 79.00</div>
{
priceType === COMMODITY_TYPE.integral ? <div className={cx(styles.interested_product_list_item_price, styles.integral)}>2,000~3,000 积分</div> :
<div className={styles.interested_product_list_item_price}><span>￥</span> 79.00</div>
}
</div>
</a>
</div>
......
src/pages/lxMall/commodityDetail/index.tsx
View file @ fc5903cf
......@@ -20,22 +20,7 @@ import { numFormat, priceFormat } from '@/utils/numberFomat'
import jinhuodanIcon from '@/assets/imgs/jinhuodan.png'
import styles from './index.less'
import { isEmpty } from 'lodash'
import { LAYOUT_TYPE } from '@/constants'
enum COMMODITY_TYPE {
/**
* 现货商品
*/
prompt = 1,
/**
*询价商品
*/
inquiry = 2,
/**
* 积分商品
*/
integral = 3
}
import { LAYOUT_TYPE, COMMODITY_TYPE } from '@/constants'
const Logistics_Type = {
1: '物流',
......@@ -53,6 +38,21 @@ interface imgItemType {
commodityPic: string;
}
const integralPayWay = [
{
payType: 5,
payVal: "积分支付",
payList: [
{
id: 8,
payType: 5,
way: "积分支付"
}
]
}
]
const CommodityDetail = (props) => {
const { query: { id } } = props.location
const { shopInfo = {}, layoutType, memberId, shopUrlParam } = props
......@@ -256,17 +256,17 @@ const CommodityDetail = (props) => {
}
}
const getOrderLink = (sessionKey) => {
const getOrderLink = (sessionKey, priceType) => {
let link = ""
switch (layoutType) {
case LAYOUT_TYPE.channel:
link = `/channelmall/order?spam_id=${sessionKey}&scence=channelPrompt&channelId=${shopUrlParam}`
link = `/channelmall/order?spam_id=${sessionKey}&type=${priceType}&channelId=${shopUrlParam}`
break
case LAYOUT_TYPE.ichannel:
link = `/ichannelmall/order?spam_id=${sessionKey}&scence=channelPrompt&channelId=${shopUrlParam}`
link = `/ichannelmall/order?spam_id=${sessionKey}&type=${priceType}&channelId=${shopUrlParam}`
break
default:
link = `/order?spam_id=${sessionKey}&scence=channelPrompt`
link = `/order?spam_id=${sessionKey}&type=${priceType}`
break
}
return link
......@@ -292,7 +292,7 @@ const CommodityDetail = (props) => {
/**
* 立即购买
*/
const handleToBuy = () => {
const handleToBuy = (priceType: COMMODITY_TYPE = COMMODITY_TYPE.prompt) => {
if (!selectCommodityId) {
message.destroy()
message.info("请选择商品属性")
......@@ -321,9 +321,10 @@ const CommodityDetail = (props) => {
attribute: attrAndValList.attributeAndValueList
}
let sessionKey = `${commodityDetail.id}${new Date().getTime()}`
let buyOrderInfo = {
logistics: commodityDetail.logistics,
payWayList,
payWayList: priceType === COMMODITY_TYPE.integral ? integralPayWay : payWayList,
supplyMembersName: commodityDetail.memberName,
supplyMembersId: commodityDetail.memberId,
orderList: [{
......@@ -333,7 +334,7 @@ const CommodityDetail = (props) => {
}]
}
updateOrderInfo(buyOrderInfo, sessionKey).then(() => {
history.push(getOrderLink(sessionKey))
history.push(getOrderLink(sessionKey, priceType))
})
clickFlag = true
} else {
......@@ -366,7 +367,7 @@ const CommodityDetail = (props) => {
case COMMODITY_TYPE.inquiry:
return <div className={cx(styles.product_info_btn_item, styles.buy)}>立即询价</div>
case COMMODITY_TYPE.integral:
return stockCount > 0 ? <div className={cx(styles.product_info_btn_item, styles.buy)}>立即兑换</div> : <Button className={cx(styles.product_info_btn_item, styles.buy)} >暂无库存</Button>
return stockCount > 0 ? <div className={cx(styles.product_info_btn_item, styles.buy)} onClick={() => handleToBuy(COMMODITY_TYPE.integral)}>立即兑换</div> : <Button className={cx(styles.product_info_btn_item, styles.buy)} >暂无库存</Button>
}
}
......@@ -499,21 +500,21 @@ const CommodityDetail = (props) => {
if (!commodityPriceInfo) {
return 0
}
if (commodityDetail?.priceType === COMMODITY_TYPE.prompt) {
if (commodityPriceInfo.length <= 1) {
unitPrice = commodityPriceInfo[0]?.price
// if (commodityDetail?.priceType === COMMODITY_TYPE.prompt) {
if (commodityPriceInfo.length <= 1) {
unitPrice = commodityPriceInfo[0]?.price
} else {
let temp = commodityPriceInfo.filter(item => {
return Number(buyCount) >= Number(item.min) && Number(buyCount) <= Number(item.max)
})
if (isEmpty(temp)) {
let maxItem = getMaxCountRange()
unitPrice = maxItem.price
} else {
let temp = commodityPriceInfo.filter(item => {
return Number(buyCount) >= Number(item.min) && Number(buyCount) <= Number(item.max)
})
if (isEmpty(temp)) {
let maxItem = getMaxCountRange()
unitPrice = maxItem.price
} else {
unitPrice = temp[0]?.price
}
unitPrice = temp[0]?.price
}
}
// }
// 会员折扣价格
if (parameter) {
unitPrice = unitPrice * parameter
......@@ -645,7 +646,7 @@ const CommodityDetail = (props) => {
{
item.customerAttributeValueList.map((childItem, index) => (
<div
key={`product_info_line_list_item_${childItem.id}`}
key={`product_info_line_list_item_${childItem.id}_${index}`}
className={cx(styles.product_info_line_list_item,
judgeSelectAttrInList(selectAttrVal, childItem.id, 'attrValId') ? styles.active : '',
judgeHasAttr(item.customerAttribute.id, childItem.id) ? '' : styles.disabled)}
......@@ -741,12 +742,12 @@ const CommodityDetail = (props) => {
</div>
</div>
</div>
<BrowseRecords />
<BrowseRecords priceType={commodityDetail?.priceType} />
</div>
<div className={styles.commodity_detail_body}>
<div className={styles.commodity_detail_body_left}>
<ShopInfo {...props} />
<Interested />
<Interested priceType={commodityDetail?.priceType} />
</div>
<div className={styles.commodity_detail_body_right}>
<ProductDescription commodityDetail={commodityDetail} />
......
src/pages/lxMall/components/ShopHeader/index.tsx
View file @ fc5903cf
......@@ -3,7 +3,7 @@ import { CaretDownOutlined } from '@ant-design/icons'
import { Rate, Input } from 'antd'
import { history, Link } from 'umi'
import isEmpty from 'lodash/isEmpty'
import logo from '@/theme/imgs/logo_w.png'
// 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'
......@@ -12,11 +12,12 @@ import styles from './index.less'
interface ShopHeaderPropsType {
shopId: number;
shopUrlParam: string;
shopInfo: GetTemplateShopFindShopResponse
shopInfo: GetTemplateShopFindShopResponse;
logo: string;
}
const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
const { shopId, shopUrlParam, shopInfo } = props
const { shopId, shopUrlParam, shopInfo, logo } = props
const [searchValue, setSearchValue] = useState<string>("")
const { search } = history.location.query
......
src/pages/lxMall/layouts/LXShopLayout.tsx
View file @ fc5903cf
......@@ -83,7 +83,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
<div className={styles.lxmall_page}>
<TopBar name={mallInfo.name} />
<div className={styles.content}>
<ShopHeader shopId={query.shopId} shopUrlParam={shopId} shopInfo={shopInfo} />
<ShopHeader logo={mallInfo.logoUrl} shopId={query.shopId} shopUrlParam={shopId} shopInfo={shopInfo} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.shop} shopId={query.shopId} shopUrlParam={shopId} />
{
children && React.Children.map(children, (child: any) => {
......
src/pages/lxMall/order/index.tsx
View file @ fc5903cf
......@@ -16,7 +16,7 @@ import { PublicApi } from '@/services/api'
import { GetLogisticsReceiverAddressGetResponse } from '@/services/LogisticsApi'
import SignModal from '@/components/SignModal'
import { isEmpty } from 'lodash'
import { LAYOUT_TYPE, OrderModalType } from '@/constants'
import { LAYOUT_TYPE, OrderModalType, COMMODITY_TYPE } from '@/constants'
interface OrderPropsType {
location: any;
......@@ -26,7 +26,8 @@ interface OrderPropsType {
}
const Order: React.FC<OrderPropsType> = (props) => {
const { shopInfo, mallInfo, layoutType } = props
const { shopInfo, mallInfo, layoutType, } = props
const { query: { type = COMMODITY_TYPE.prompt } } = props.location
const [signModalVisible, setSignModalVisible] = useState<boolean>(false)
const { spam_id } = props.location.query
const OrderStore = useLocalStore(() => store.OrderStore)
......@@ -165,9 +166,8 @@ const Order: React.FC<OrderPropsType> = (props) => {
return logisticsFee
}
const getAmount = () => {
console.log(getCommodityAmount(), getLogisticsFee())
return priceFormat(getCommodityAmount() + getLogisticsFee())
const getAmount = (state = true) => {
return state ? priceFormat(getCommodityAmount() + getLogisticsFee()) : numFormat(getCommodityAmount() + getLogisticsFee())
}
/**
......@@ -293,9 +293,9 @@ const Order: React.FC<OrderPropsType> = (props) => {
</div>
<div className={styles.order_tb_title}>
<div className={cx(styles.order_tb_title_item, styles.goods_info)}>商品</div>
<div className={styles.order_tb_title_item}>单价(元)</div>
<div className={cx(styles.order_tb_title_item, styles.count)}>数量</div>
<div className={styles.order_tb_title_item}>小计(元)</div>
<div className={styles.order_tb_title_item}>{Number(type) === COMMODITY_TYPE.integral ? '所需积分' : '单价(元)'}</div>
<div className={cx(styles.order_tb_title_item, styles.count)}>{Number(type) === COMMODITY_TYPE.integral ? '兑换数量' : '数量'}</div>
<div className={styles.order_tb_title_item}>小计{Number(type) === COMMODITY_TYPE.integral ? '' : '(元)'}</div>
</div>
{
orderList && orderList.map((orderItem, orderItemIndex) => (
......@@ -324,14 +324,14 @@ const Order: React.FC<OrderPropsType> = (props) => {
</div>
<div className={styles.order_list_item_item}>
<span className={styles.order_list_item_item_unitprice}>
<div className={styles.order_list_item_item_unitprice}>¥ {priceFormat(item.unitPrice)}</div>
<div className={styles.order_list_item_item_unitprice}>{Number(type) === COMMODITY_TYPE.integral ? `${numFormat(item.unitPrice)}` : `¥ ${priceFormat(item.unitPrice)}`}</div>
</span>
</div>
<div className={cx(styles.order_list_item_item, styles.count)}>
<span>{numFormat(item.count)} {item.unitName}</span>
</div>
<div className={styles.order_list_item_item}>
<span className={styles.order_list_item_item_price}>{priceFormat(item.unitPrice * item.count)}</span>
<span className={styles.order_list_item_item_price}>{Number(type) === COMMODITY_TYPE.integral ? `${numFormat(item.unitPrice * item.count)}` : priceFormat(item.unitPrice * item.count)}</span>
</div>
</div>
{
......@@ -346,21 +346,28 @@ const Order: React.FC<OrderPropsType> = (props) => {
<div className={styles.settlement_box}>
<div className={styles.settlement_box_item}>
<div className={styles.settlement_box_item_price}>
<span>商品金额总计：</span>
<b>{priceFormat(getCommodityAmount())}</b>
<span>RMB</span>
</div>
<div className={styles.settlement_box_item_price}>
<span>运费：</span>
<b>{priceFormat(getLogisticsFee())}</b>
<span>RMB</span>
<span>{Number(type) === COMMODITY_TYPE.integral ? '商品积分总计：' : '商品金额总计：'}</span>
<b>{Number(type) === COMMODITY_TYPE.integral ? numFormat(getCommodityAmount()) : priceFormat(getCommodityAmount())}</b>
{
Number(type) !== COMMODITY_TYPE.integral && <span>RMB</span>
}
</div>
{
Number(type) !== COMMODITY_TYPE.integral && (
<div className={styles.settlement_box_item_price}>
<span>运费：</span>
<b>{priceFormat(getLogisticsFee())}</b>
<span>RMB</span>
</div>)
}
<div className={styles.settlement_box_item_price}>
<span>共需支付：</span>
<b className={styles.settlement_box_item_price_total}>{getAmount()}</b>
<span>RMB</span>
<span>{Number(type) === COMMODITY_TYPE.integral ? '共需支付积分：' : '共需支付：'}</span>
<b className={styles.settlement_box_item_price_total}>{Number(type) === COMMODITY_TYPE.integral ? getAmount(false) : getAmount()}</b>
{
Number(type) !== COMMODITY_TYPE.integral && <span>RMB</span>
}
</div>
<Button loading={confirmLoading} className={styles.settlement_box_item_btn} onClick={() => checkOrder()}>提交订单</Button>
<Button loading={confirmLoading} className={styles.settlement_box_item_btn} onClick={() => checkOrder()}>{Number(type) === COMMODITY_TYPE.integral ? '提交积分订单' : '提交订单'}</Button>
</div>
</div>
</div>
......
src/pages/lxMall/order/payway/index.tsx
View file @ fc5903cf
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import cx from 'classnames'
import { DownOutlined } from '@ant-design/icons'
import alipayIcon from '@/assets/imgs/alipay_icon.png'
......@@ -16,57 +16,16 @@ const PayWay: React.FC<PayWayProps> = (props) => {
const { payWayList = [], onChange, selectItem = {} } = props
const [expand, setExpand] = useState<boolean>(false)
const PayWay = [
{
name: '线上支付',
payway: [
{
type: 'alipay',
name: '支付宝',
},
{
type: 'wechat',
name: '微信支付'
},
{
type: 'bank',
name: '银联'
},
]
},
{
name: '线下支付',
payway: [
{
type: 'pay',
name: '线下支付'
}
]
},
{
name: '授信额度',
payway: [
{
type: 'pay',
name: '授信额度支付'
}
]
},
{
name: '货到付款',
payway: [
{
type: 'pay',
name: '货到付款支付'
}
]
},
]
const handleSelectWay = (item) => {
onChange(item)
}
useEffect(() => {
if (payWayList && payWayList.length === 1) {
onChange(payWayList[0].payList[0])
}
}, [payWayList])
return (
<div className={styles.payway}>
<div className={styles.common_title}>
......@@ -92,7 +51,7 @@ const PayWay: React.FC<PayWayProps> = (props) => {
))
}
{
payWayList && payWayList.length > 0 && (
payWayList && payWayList.length > 1 && (
<div className={cx(styles.more_btn, styles.pad_l_100)} onClick={() => setExpand(!expand)}>
<span>{expand ? '收起' : '展开'}</span>
<div className={styles.more_btn_icon}>
......
src/pages/lxMall/pointsMall/list.tsx
View file @ fc5903cf
......@@ -44,7 +44,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
{item.min}~{item.max}积分
</div>
<div className={styles.goods_name}>{item.name}</div>
<div className={styles.count}>已售：{item.sold}</div>
<div className={styles.count}>库存：{item.sold || 0}</div>
</div>
</a>
</div>
......
src/pages/lxMall/purchaseOnline/list.tsx
View file @ fc5903cf
......@@ -20,7 +20,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
{
dataList.map((item, index) => (
<div key={item} className="purchase_list_item row">
<a href={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
<a href={`/memberCenter/tranactionAbility/enquiryOffer/addEnquiry`}>
<div className="purchase_list_item_title">头层自然摔牛皮，箱包鞋面料</div>
<div className="purchase_list_item_info_box">
<div className="purchase_list_item_info_line">
......
src/pages/shop/shopInfo/index.tsx
View file @ fc5903cf
......@@ -230,10 +230,10 @@ const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
if (mallItem.environment === 1) {
switch (mallItem.type) {
case 1:
result = `${siteUrl}/shop?shopId=${btoa(JSON.stringify({ shopId: shopInfo.shopId, memberId: shopInfo.memberId }))}`
result = `${siteUrl}/shop?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId }))}`
break
case 2:
result = `${siteUrl}/shop/pointsMall?shopId=${btoa(JSON.stringify({ shopId: shopInfo.shopId, memberId: shopInfo.memberId }))}`
result = `${siteUrl}/shop/pointsMall?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId }))}`
break
default:
result = ""
......@@ -337,7 +337,7 @@ const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
imgUrl={""}
large={true}
fileMaxSize={100}
size="xxx"
size="600x400"
onChange={(url) => handleAddworkshopPics(url)}
/>
</div>
......@@ -363,7 +363,7 @@ const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
imgUrl={""}
large={true}
fileMaxSize={100}
size="xxx"
size="106x107"
onChange={(url) => handleAddhonorPics(url)}
/>
</div>
......
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