Skip to content

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

fix: 对接分享拼团链接web和app方式

parent 32cd5011
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 47 deletions
src/locales/en-US/order.ts
View file @ e361acf8
......@@ -417,6 +417,7 @@ export default {
'saleOrder.apperweima': 'APP QR code',
'saleOrder.xiaochengxuerweima': 'Small program QR code',
'saleOrder.APPsaoma': 'APP scan code',
'saleOrder.webLink': 'Spell group link',
'saleOrder.dingdanzhaiyao：': 'Order Summary:',
'saleOrder.caigouhuiyuan：': 'Purchasing Member:',
'saleOrder.dingdanzonge：': 'Order total:',
......
src/locales/ko-KR/order.ts
View file @ e361acf8
......@@ -414,6 +414,7 @@ export default {
'saleOrder.apperweima': 'app qr 코드 ',
'saleOrder.xiaochengxuerweima': '애플릿 qr 코드',
'saleOrder.APPsaoma': 'APP 스캔',
'saleOrder.webLink': '블록 링크',
'saleOrder.dingdanzhaiyao：': '주문 요약:',
'saleOrder.caigouhuiyuan：': '구매 회원:',
'saleOrder.dingdanzonge：': '총 주문 금액:',
......
src/locales/zh-CN/order.ts
View file @ e361acf8
......@@ -413,6 +413,7 @@ export default {
'saleOrder.apperweima': 'APP二维码',
'saleOrder.xiaochengxuerweima': '小程序二维码',
'saleOrder.APPsaoma': 'APP扫码',
'saleOrder.webLink': '拼团链接',
'saleOrder.dingdanzhaiyao：': '订单摘要：',
'saleOrder.caigouhuiyuan：': '采购会员：',
'saleOrder.dingdanzonge：': '订单总额：',
......
src/pages/transaction/purchaseOrder/readyDelevedOrder/index.less
View file @ e361acf8
......@@ -7,7 +7,7 @@
background-color: #FFFFFF;
.appPayTitle {
display: flex;
margin-bottom: 30px;
// margin-bottom: 30px;
h2 {
margin-left: 12px;
}
......@@ -15,6 +15,7 @@
.appPayMain {
.appPayCommodity {
display: flex;
margin-top: 30px;
.commodityImage {
margin-right: 8px;
}
......@@ -33,22 +34,22 @@
}
.appPayQrCode {
text-align: center;
p {
width: 100%;
text-align: center;
}
}
}
}
.appPayContentLink {
display: block;
.appPayMain {
margin-top: 20px;
}
}
.bottomBtn {
margin-bottom: 20px;
}
.appPayBottom {
display: flex;
justify-content: start;
& > p {
margin-right: 24px;
}
}
p {
.listLabel {
color: #91959B;
......
src/pages/transaction/purchaseOrder/readyDelevedOrder/index.tsx
View file @ e361acf8
import React, { useRef, useState } from 'react'
import { Button, Card, Input, message, Modal, Radio, Row, Col, Tag } from 'antd'
import React, { useRef, useState, useEffect } from 'react'
import { Button, Card, Input, message, Modal, Radio, Row, Col, Tag, Spin } from 'antd'
import StandardTable from '@/components/StandardTable';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { useSelfTable } from './model/useSelfTable'
......@@ -16,9 +16,15 @@ import styles from './index.less'
import appImg from '@/assets/icons/app.png'
import miniappImg from '@/assets/icons/miniapp.png'
import scanImg from '@/assets/icons/scan.png'
import { postMarketingMobileActivityOrderOrderGroupPurchaseDetail } from '@/services/MarketingV2Api'
import webImg from '@/assets/icons/web.png'
import { postMarketingWebActivityOrderOrderGroupPurchaseShareDetail } from '@/services/MarketingV2Api'
import cx from 'classnames'
import QRCode from 'qrcode'
import { tableListSchema } from './schema';
import { TOP_DOMAIN } from '@/constants';
import BASE_CONFIG from '../../../../../config/base.config.json'
const shopInfo = BASE_CONFIG.web.shopInfo
// 待发货订单
......@@ -29,6 +35,22 @@ const fetchTableData = async (params) => {
return data
}
/* 商城环境对应值 */
enum STORE_ENV_MAP {
'WEB' = 1,
'H5',
'小程序',
'APP'
}
// 1.Web2.H53.小程序4.APP
const EnvironmentStore = {
1: 'WEB',
2: 'H5',
3: '小程序',
4: 'APP'
}
const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
const intl = useIntl()
const {
......@@ -44,10 +66,30 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
{ id: 3, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName3' })},
])
const [shareVisible, setShareVisible] = useState<boolean>(false)
const [payModel, setPayModel] = useState<'web'|'app'|'miniapp'|null>('web')
const [payModel, setPayModel] = useState<number>()
const currentPayRef = useRef<any>({})
const currentOrderRef = useRef<any>({})
const [qrCode, setQrCode] = useState('')
const [activityInfo, setActivityInfo] = useState<any>()
useEffect(() => {
console.log(activityInfo, 'aaa')
if(payModel === STORE_ENV_MAP["WEB"]) {
const element = document.getElementById('linkInput')
element['value'] = `原价￥${activityInfo.price}，${activityInfo.assembleNum}人团 ，只需￥${activityInfo.activityPrice}，${activityInfo.productName} http://lx-${activityInfo.shopPrefix}.${TOP_DOMAIN}/shop/${activityInfo.supplierMemberId}_${activityInfo.supplierRoleId}/group/detail/${activityInfo.productId}?groupId=${activityInfo.groupId}`;
} else if(payModel === STORE_ENV_MAP["APP"]) {
// 生成二维码
QRCode.toDataURL(`lingxi://detail/${activityInfo.productId}/${activityInfo.shopId}/${activityInfo.skuId}/${activityInfo.groupId}`).then((url:any) => {
setQrCode(url)
}).catch((err) => {
console.error(err)
})
} else if(payModel === STORE_ENV_MAP["小程序"]){
// getOrderVendorMiniAppCode({orderId: currentPayRef.current.orderId + ''}).then(res => {
// setQrCode(res.data)
// })
}
}, [payModel])
// 售后唤起弹窗
const handleSaleAfter = ({ orderId, orderType }) => {
......@@ -100,13 +142,14 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
}
const inviteParticipiteActivity = (record) => {
console.log(record)
// 根据接口数据，拼团活动信息和商品信息
postMarketingMobileActivityOrderOrderGroupPurchaseDetail({id: record.orderId}).then(res => {
postMarketingWebActivityOrderOrderGroupPurchaseShareDetail({id: record.orderId}, {ctlType:'none'}).then(res => {
const { code, data } = res
currentPayRef.current = data
currentOrderRef.current = record
console.log(res)
// 加入商城链接前缀 拼团id和商城id
setActivityInfo({...data, shopPrefix: shopInfo.filter(item => item.id === record.shopId)[0]['url'], groupId: record.groupId, shopId: record.shopId})
setPayModel(data.environmentList[0])
})
setShareVisible(true)
}
......@@ -116,18 +159,41 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
}
const onSave = () => {
const img: any = document.getElementById('qrcodeElement');
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
const url = canvas.toDataURL('image/png');
var downloadLink = document.getElementById('downloadLink');
downloadLink.setAttribute('href', url);
downloadLink.setAttribute('download', `${intl.formatMessage({ id: 'saleOrder.daochuerweima', defaultMessage: '导出二维码' })}.png`);
downloadLink.click();
}
const handleCopy = () => {
const element = document.getElementById('linkInput')
const content = element['value']
copyHandle(content)
}
const copyHandle = (content) => {
let copy = (e)=>{
e.preventDefault()
e.clipboardData.setData('text/plain',content)
message.success(intl.formatMessage({ id: 'saleOrder.fuzhichenggong', defaultMessage: '复制成功' }));
document.removeEventListener('copy',copy)
}
document.addEventListener('copy',copy)
document.execCommand("Copy");
}
/** 参照后台数据生成 */
const renderOptionButton = (record: any) => {
const buttonGroup = {
[intl.formatMessage({id: 'purchaseOrder.operation2'})]: record.showAfterSales,
[intl.formatMessage({id: 'purchaseOrder.operation5'})]: true,
[intl.formatMessage({id: 'purchaseOrder.operation5'})]: record.showInvite,
}
const operationHandler = {
......@@ -192,31 +258,32 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
<div style={{marginBottom: 10}}>
<p>{intl.formatMessage({ id: 'saleOrder.xuanzeleixin', defaultMessage: '选择类型：' })}</p>
<Radio.Group onChange={onChangePayModel} value={payModel}>
<Radio value='web'>WEB</Radio>
<Radio value='app'>APP</Radio>
<Radio value='miniapp'>{intl.formatMessage({ id: 'saleOrder.xiaochengxu', defaultMessage: '小程序' })}</Radio>
{/* <Radio value='H5'>H5</Radio> */}
{
activityInfo?.environmentList.map(item => Object.keys(EnvironmentStore).includes(item+'') && <>
<Radio value={item}>{EnvironmentStore[item]}</Radio>
</>)
}
</Radio.Group>
<p style={{marginTop: 24}}>
<span className={styles.listLabel}>
{
payModel === 'web'
payModel === STORE_ENV_MAP['WEB']
?
intl.formatMessage({ id: 'saleOrder.fenxiangpintuanlianjie', defaultMessage: '分享拼团链接' })
:
( payModel === 'app' ? intl.formatMessage({ id: 'saleOrder.apperweima', defaultMessage: 'APP二维码' }) : intl.formatMessage({ id: 'saleOrder.xiaochengxuerweima', defaultMessage: '小程序二维码' }) ) }</span>
( payModel === STORE_ENV_MAP['APP'] ? intl.formatMessage({ id: 'saleOrder.apperweima', defaultMessage: 'APP二维码' }) : intl.formatMessage({ id: 'saleOrder.xiaochengxuerweima', defaultMessage: '小程序二维码' }) ) }</span>
</p>
</div>
{
payModel === 'web' && <div className={styles.appPayContainer}>
payModel === STORE_ENV_MAP['WEB'] && <div className={styles.appPayContainer}>
<div className={cx(styles.appPayContent, styles.appPayContentLink)}>
<div className={styles.appPayLeft}>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dangqiandingdan：', defaultMessage: '当前订单：' })}</span><span>{currentOrderRef.current.digest}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.laiyuanshangcheng：', defaultMessage: '来源商城：' })}</span><span>{currentOrderRef.current.memberName}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.cantuanbianhao：', defaultMessage: '参团编号：' })}</span><span>{currentOrderRef.current.groupId}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.fenxiangpintuanlianjie:', defaultMessage: '分享拼团链接：' })}</span></p>
<div className={styles.appPayTitle}>
<img src={webImg} alt="" width={32} height={32} />
<h2>{intl.formatMessage({ id: 'saleOrder.webLink', defaultMessage: '拼团链接' })}</h2>
</div>
<div className={styles.appPayMain}>
<p>
<Input.TextArea id="linkInput" rows={2} disabled />
<Input.TextArea id="linkInput" rows={3} disabled />
</p>
</div>
</div>
......@@ -224,7 +291,7 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
</div>
}
{
payModel === 'app' && <div className={styles.appPayContainer}>
payModel === STORE_ENV_MAP['APP'] && <div className={styles.appPayContainer}>
<div className={styles.appPayContent}>
<div className={styles.appPayTitle}>
<img src={appImg} alt="" width={32} height={32} />
......@@ -232,20 +299,20 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
</div>
<div className={styles.appPayMain}>
<Row>
<Col span={18}>
<Col span={16}>
<div className={styles.appPayCommodity}>
<div className={styles.commodityImage}>
<img src={appImg} alt="" width={88} height={88} />
<img src={activityInfo?.productImgUrl} alt="" width={88} height={88} />
</div>
<div className={styles.commodityDescription}>
<p><Tag color="red">3人团</Tag><span>普卷 Q235B 4.5*1500 沧州铁直普卷 Q235B 4.5*1500 沧州铁直普卷 Q235B 4.5*1500 沧州铁直</span></p>
<p><Tag color="red">{activityInfo?.assembleNum}人团</Tag><span>{activityInfo?.productName}</span></p>
<p className={styles.commodityPrice}><span>{intl.formatMessage({ id: 'commodity.products.directChannel.columns.currency'})}</span>3580.00</p>
</div>
</div>
</Col>
<Col span={6}>
<Col span={8}>
<div className={styles.appPayQrCode}>
<img src={appImg} alt="" width={88} height={88} />
<div>{qrCode ? <img id="qrcodeElement" src={qrCode} alt="" width={130} height={130} /> : <Spin />}</div>
<p><img src={scanImg} alt="" width={16} height={16} />{intl.formatMessage({ id: 'saleOrder.saomacanyupintuan', defaultMessage: '扫码参与拼团' })}</p>
</div>
</Col>
......@@ -253,14 +320,10 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
</div>
</div>
<p><Button type="primary" onClick={onSave}>{intl.formatMessage({ id: 'saleOrder.baocuntupian', defaultMessage: '保存图片' })}</Button></p>
<p className={styles.appPayBottom}>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dangqiandingdan：', defaultMessage: '当前订单：' })}</span><span>{currentOrderRef.current.orderNo}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dingdanlaiyuan：', defaultMessage: '订单来源：' })}</span><span>{currentOrderRef.current.shopName}</span></p>
</p>
</div>
}
{
payModel === 'miniapp' && <div className={styles.appPayContainer}>
payModel === STORE_ENV_MAP['小程序'] && <div className={styles.appPayContainer}>
<div className={styles.appPayContent}>
<div className={styles.appPayTitle}>
<img src={miniappImg} alt="" width={32} height={32} />
......@@ -268,7 +331,7 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
</div>
<div className={styles.appPayMain}>
<Row>
<Col span={18}>
<Col span={16}>
<div className={styles.appPayCommodity}>
<div className={styles.commodityImage}>
<img src={miniappImg} alt="" width={88} height={88} />
......@@ -279,9 +342,9 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
</div>
</div>
</Col>
<Col span={6}>
<Col span={8}>
<div className={styles.appPayQrCode}>
<img src={miniappImg} alt="" width={88} height={88} />
<img src={miniappImg} alt="" width={128} height={128} />
<p><img src={scanImg} alt="" width={16} height={16} />{intl.formatMessage({ id: 'saleOrder.saomacanyupintuan', defaultMessage: '扫码参与拼团' })}</p>
</div>
</Col>
......@@ -289,14 +352,11 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
</div>
</div>
<p><Button type="primary" onClick={onSave}>{intl.formatMessage({ id: 'saleOrder.baocuntupian', defaultMessage: '保存图片' })}</Button></p>
<p className={styles.appPayBottom}>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dangqiandingdan：', defaultMessage: '当前订单：' })}</span><span>{currentOrderRef.current.orderNo}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dingdanlaiyuan：', defaultMessage: '订单来源：' })}</span><span>{currentOrderRef.current.shopName}</span></p>
</p>
</div>
}
</div>
</Modal>
<a href="" id="downloadLink" style={{visibility:"hidden", display:"none"}}></a>
</PageHeaderWrapper>
}
......
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