Skip to content

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

fix: 订单分享拼团链接国际化

parent 1d39ff57
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 81 deletions
src/locales/en-US/order.ts
View file @ 3d9530a6
......@@ -363,13 +363,23 @@ export default {
'saleOrder.qudaocaigoushang': 'Channel Buyer',
'saleOrder.zhifulianjie': 'Payment link',
'saleOrder.dangqiandingdan': 'Current order',
'saleOrder.dangqiandingdan：': 'Current order:',
'saleOrder.dingdanlaiyuan': 'Order source',
'saleOrder.dingdanlaiyuan：': 'Order source:',
'saleOrder.cixiangweibitian': 'This item is required',
'saleOrder.fuzhilianjie': 'Copy link',
'saleOrder.fenxiangpintuanlianjie': 'Share group links',
'saleOrder.fenxiangpintuanlianjie:': 'Share group links:',
'saleOrder.saomacanyupintuan': 'Scan code to join the group',
'saleOrder.apperweima': 'APP QR code',
'saleOrder.xiaochengxuerweima': 'Small program QR code',
'saleOrder.APPsaoma': 'APP scan code',
'saleOrder.dingdanzhaiyao:': 'Order Summary:',
'saleOrder.caigouhuiyuan:': 'Purchasing Member:',
'saleOrder.dingdanzonge:': 'Order total:',
'saleOrder.dingdanzhaiyao：': 'Order Summary:',
'saleOrder.caigouhuiyuan：': 'Purchasing Member:',
'saleOrder.dingdanzonge：': 'Order total:',
'saleOrder.laiyuanshangcheng：': 'Source mall:',
'saleOrder.cantuanbianhao：': 'Order reference:',
'saleOrder.shengchengfenxainglianjie': 'Generating share links',
'saleOrder.saoyisaojinruApp': 'Scan to enter APP payment',
'saleOrder.baocuntupian': 'Save picture',
'saleOrder.dangqiandingdan:': 'Current order:',
......
src/locales/ko-KR/order.ts
View file @ 3d9530a6
......@@ -366,10 +366,18 @@ export default {
'saleOrder.dingdanlaiyuan': '주문 출처',
'saleOrder.cixiangweibitian': '이 항목은 필수입니다.',
'saleOrder.fuzhilianjie': '링크 복사',
'saleOrder.fenxiangpintuanlianjie': '블록 링크 공유',
'saleOrder.fenxiangpintuanlianjie:': '블록 링크 공유:',
'saleOrder.apperweima': 'app qr 코드 ',
'saleOrder.xiaochengxuerweima': '애플릿 qr 코드',
'saleOrder.APPsaoma': 'APP 스캔',
'saleOrder.dingdanzhaiyao：': '주문 요약:',
'saleOrder.caigouhuiyuan：': '구매 회원:',
'saleOrder.dingdanzonge：': '총 주문 금액:',
'saleOrder.laiyuanshangcheng：': '래원 쇼핑몰:',
'saleOrder.cantuanbianhao：': '단체번호:',
'saleOrder.shengchengfenxainglianjie': '공유 링크 만들기',
'saleOrder.saomacanyupintuan': '코드네임으로 유니콘에 참가하다',
'saleOrder.saoyisaojinruApp': '스캔하고 APP에 들어가서 결제',
'saleOrder.baocuntupian': '그림 저장',
'saleOrder.dangqiandingdan：': '현재 주문:',
......
src/locales/zh-CN/order.ts
View file @ 3d9530a6
......@@ -366,10 +366,18 @@ export default {
'saleOrder.dingdanlaiyuan': '订单来源',
'saleOrder.cixiangweibitian': '此项为必填',
'saleOrder.fuzhilianjie': '复制链接',
'saleOrder.fenxiangpintuanlianjie': '分享拼团链接',
'saleOrder.fenxiangpintuanlianjie:': '分享拼团链接：',
'saleOrder.apperweima': 'APP二维码',
'saleOrder.xiaochengxuerweima': '小程序二维码',
'saleOrder.APPsaoma': 'APP扫码',
'saleOrder.dingdanzhaiyao：': '订单摘要：',
'saleOrder.caigouhuiyuan：': '采购会员：',
'saleOrder.dingdanzonge：': '订单总额：',
'saleOrder.laiyuanshangcheng：': '来源商城：',
'saleOrder.cantuanbianhao：': '参团编号：',
'saleOrder.shengchengfenxainglianjie': '生成分享链接',
'saleOrder.saomacanyupintuan': '扫码参与拼团',
'saleOrder.saoyisaojinruApp': '扫一扫进入APP支付',
'saleOrder.baocuntupian': '保存图片',
'saleOrder.dangqiandingdan：': '当前订单：',
......
src/pages/transaction/purchaseOrder/readyDelevedOrder/index.less
View file @ 3d9530a6
......@@ -3,36 +3,45 @@
padding: 24px 24px 0 24px;
.appPayContent {
margin-bottom: 24px;
padding: 48px;
padding: 26px 48px;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
.appPayLeft {
.leftTitle {
.appPayTitle {
display: flex;
margin-bottom: 30px;
h2 {
margin-left: 12px;
}
}
.appPayMain {
.appPayCommodity {
display: flex;
align-items: center;
margin-bottom: 10px;
img {
margin-right: 12px;
.commodityImage {
margin-right: 8px;
}
h2 {
height: 32px;
line-height: 44px;
.commodityDescription {
.commodityPrice {
font-size: 20px;
color: #EF3346;
span {
font-size: 12px;
}
}
& > p {
margin-bottom: 0;
}
}
}
}
.appPayRight {
width: 160px;
margin-left: 12px;
p {
width: 160px;
color: #91959B;
img {
vertical-align: middle;
}
.appPayQrCode {
text-align: center;
}
}
}
.appPayContentLink {
display: block;
}
.bottomBtn {
margin-bottom: 20px;
}
.appPayBottom {
display: flex;
justify-content: start;
......@@ -49,3 +58,7 @@
text-align: center;
}
}
.listLabel {
color: #91959B;
}
src/pages/transaction/purchaseOrder/readyDelevedOrder/index.tsx
View file @ 3d9530a6
import React, { useRef, useState } from 'react'
import { Button, Card, Form, Input, message, Modal, Radio, Row, Col, Spin } from 'antd'
import { Button, Card, Input, message, Modal, Radio, Row, Col, Tag } from 'antd'
import StandardTable from '@/components/StandardTable';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { useSelfTable } from './model/useSelfTable'
import { baseOrderListColumns } from '../constant'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import Submit from '@/components/NiceForm/components/Submit'
......@@ -18,6 +17,8 @@ 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 cx from 'classnames'
import { tableListSchema } from './schema';
// 待发货订单
......@@ -43,9 +44,9 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
{ id: 3, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName3' })},
])
const [shareVisible, setShareVisible] = useState<boolean>(false)
const [payForm] = Form.useForm();
const [payModel, setPayModel] = useState<'web'|'app'|'miniapp'|null>('web')
const currentPayRef = useRef<any>({})
const currentOrderRef = useRef<any>({})
const [qrCode, setQrCode] = useState('')
// 售后唤起弹窗
......@@ -103,6 +104,8 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
// 根据接口数据，拼团活动信息和商品信息
postMarketingMobileActivityOrderOrderGroupPurchaseDetail({id: record.orderId}).then(res => {
const { code, data } = res
currentPayRef.current = data
currentOrderRef.current = record
console.log(res)
})
setShareVisible(true)
......@@ -152,7 +155,7 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
formilyProps={{
ctx: {
inline: false,
schema: baseOrderListColumns(),
schema: tableListSchema(),
effects: ($, actions) => {
useStateFilterSearchLinkageEffect(
$,
......@@ -178,10 +181,12 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
onClickItem={(id) => setCheckedId(id)}
/>
<Modal
title="生成分享链接"
title={intl.formatMessage({ id: 'saleOrder.shengchengfenxainglianjie', defaultMessage: '生成分享链接' })}
visible={shareVisible}
onCancel={()=>setShareVisible(false)}
footer={false}
width={600}
destroyOnClose={true}
>
<div>
<div style={{marginBottom: 10}}>
......@@ -190,80 +195,103 @@ const ReadyDelevedOrder:React.FC<ReadyDelevedOrderProps> = () => {
<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>
{/* <Radio value='H5'>H5</Radio> */}
</Radio.Group>
<p style={{marginTop: 24}}>
<span className={styles.listLabel}>
{
payModel === 'web'
?
intl.formatMessage({ id: 'saleOrder.fenxiangpintuanlianjie', defaultMessage: '分享拼团链接' })
:
( payModel === 'app' ? intl.formatMessage({ id: 'saleOrder.apperweima', defaultMessage: 'APP二维码' }) : intl.formatMessage({ id: 'saleOrder.xiaochengxuerweima', defaultMessage: '小程序二维码' }) ) }</span>
</p>
</div>
{
payModel === 'web' && <Form form={payForm} name="pay-form" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
<Form.Item label={intl.formatMessage({ id: 'saleOrder.dangqiandingdan', defaultMessage: '当前订单' })} name="order">
<span>{currentPayRef.current.orderNo}</span>
</Form.Item>
<Form.Item label={intl.formatMessage({ id: 'saleOrder.dingdanlaiyuan', defaultMessage: '订单来源' })} name="origin">
<span>{currentPayRef.current.shopName}</span>
</Form.Item>
<Form.Item label={intl.formatMessage({ id: 'saleOrder.zhifulianjie', defaultMessage: '支付链接' })}>
<Row>
<Col span={20}>
<Form.Item
name="payChart"
noStyle
rules={[{ required: true, message: intl.formatMessage({ id: 'saleOrder.cixiangweibitian', defaultMessage: '此项为必填' }) }]}
>
<Input id="linkInput" disabled />
</Form.Item>
</Col>
<Col span={4}>
<Button type="primary" onClick={handleCopy}>{intl.formatMessage({ id: 'saleOrder.fuzhilianjie', defaultMessage: '复制链接' })}</Button>
</Col>
</Row>
</Form.Item>
</Form>
payModel === '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>
<p>
<Input.TextArea id="linkInput" rows={2} disabled />
</p>
</div>
</div>
<p><Button className={styles.bottomBtn} type="primary" onClick={handleCopy}>{intl.formatMessage({ id: 'saleOrder.fuzhilianjie', defaultMessage: '复制链接' })}</Button></p>
</div>
}
{
payModel === 'app' && <div className={styles.appPayContainer}>
<div className={styles.appPayContent}>
<div className={styles.appPayLeft}>
<div className={styles.leftTitle}>
<img src={appImg} alt="" width={32} height={32} />
<h2>{intl.formatMessage({ id: 'saleOrder.APPsaoma', defaultMessage: 'APP扫码' })}</h2>
</div>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dingdanzhaiyao：', defaultMessage: '订单摘要：' })}</span><span>{currentPayRef.current.digest}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.caigouhuiyuan：', defaultMessage: '采购会员：' })}</span><span>{currentPayRef.current.buyerMemberName}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dingdanzonge：', defaultMessage: '订单总额：' })}</span><span>￥{currentPayRef.current.productAmount}</span></p>
<div className={styles.appPayTitle}>
<img src={appImg} alt="" width={32} height={32} />
<h2>{intl.formatMessage({ id: 'saleOrder.APPsaoma', defaultMessage: 'APP扫码' })}</h2>
</div>
<div className={styles.appPayRight}>
<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.saoyisaojinruApp', defaultMessage: '扫一扫进入APP支付' })}</p>
<div className={styles.appPayMain}>
<Row>
<Col span={18}>
<div className={styles.appPayCommodity}>
<div className={styles.commodityImage}>
<img src={appImg} 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 className={styles.commodityPrice}><span>￥</span>3580.00</p>
</div>
</div>
</Col>
<Col span={6}>
<div className={styles.appPayQrCode}>
<img src={appImg} alt="" width={88} height={88} />
<p><img src={scanImg} alt="" width={16} height={16} />{intl.formatMessage({ id: 'saleOrder.saomacanyupintuan', defaultMessage: '扫码参与拼团' })}</p>
</div>
</Col>
</Row>
</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>{currentPayRef.current.orderNo}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dingdanlaiyuan：', defaultMessage: '订单来源：' })}</span><span>{currentPayRef.current.shopName}</span></p>
<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}>
<div className={styles.appPayContent}>
<div className={styles.appPayLeft}>
<div className={styles.leftTitle}>
<img src={miniappImg} alt="" width={32} height={32} />
<h2>{intl.formatMessage({ id: 'saleOrder.xiaochengxusaoma', defaultMessage: '小程序扫码' })}</h2>
</div>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dingdanzhaiyao：', defaultMessage: '订单摘要：' })}</span><span>{currentPayRef.current.digest}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.caigouhuiyuan：', defaultMessage: '采购会员：' })}</span><span>{currentPayRef.current.buyerMemberName}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dingdanzonge：', defaultMessage: '订单总额：' })}</span><span>￥{currentPayRef.current.productAmount}</span></p>
<div className={styles.appPayTitle}>
<img src={miniappImg} alt="" width={32} height={32} />
<h2>{intl.formatMessage({ id: 'saleOrder.xiaochengxusaoma', defaultMessage: '小程序扫码' })}</h2>
</div>
<div className={styles.appPayRight}>
<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.saoyisaojinruMiniapp', defaultMessage: '扫一扫进入小程序支付' })}</p>
<div className={styles.appPayMain}>
<Row>
<Col span={18}>
<div className={styles.appPayCommodity}>
<div className={styles.commodityImage}>
<img src={miniappImg} 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 className={styles.commodityPrice}><span>￥</span>3580.00</p>
</div>
</div>
</Col>
<Col span={6}>
<div className={styles.appPayQrCode}>
<img src={miniappImg} alt="" width={88} height={88} />
<p><img src={scanImg} alt="" width={16} height={16} />{intl.formatMessage({ id: 'saleOrder.saomacanyupintuan', defaultMessage: '扫码参与拼团' })}</p>
</div>
</Col>
</Row>
</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>{currentPayRef.current.orderNo}</span></p>
<p><span className={styles.listLabel}>{intl.formatMessage({ id: 'saleOrder.dingdanlaiyuan：', defaultMessage: '订单来源：' })}</span><span>{currentPayRef.current.shopName}</span></p>
<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>
}
......
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