Skip to content

华
华夏模拟理财_20250701
Commit c16dbe31 authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

Refactor DetailPage to include dynamic iframe URL fetching and enhance UI with... 

Refactor DetailPage to include dynamic iframe URL fetching and enhance UI with new layout elements for product details, including profit and market value displays. Remove deprecated MDList entries.
parent 1afb5004
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 40 deletions
src/MD.ts
View file @ c16dbe31
...@@ -23,31 +23,6 @@ const MDList: IAutoMdData[] = new Array(20).fill("").map((_, i) => { ...@@ -23,31 +23,6 @@ const MDList: IAutoMdData[] = new Array(20).fill("").map((_, i) => {
}; };
}); });
MDList.push({
ele: ".md10_0",
data: {
dpm: `${appId}.110.10.0`,
dcm,
dom,
domain,
appId,
},
once: true,
});
MDList.push({
ele: ".md10_1",
data: {
dpm: `${appId}.110.10.1`,
dcm,
dom,
domain,
appId,
},
once: true,
});
MDAuto({ MDAuto({
show: MDList, // 曝光 show: MDList, // 曝光
......
src/pages/DetailPage/DetailPage.module.less
View file @ c16dbe31
...@@ -13,6 +13,73 @@ ...@@ -13,6 +13,73 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.topArea {
width: 100%;
height: 360px;
flex-shrink: 0;
color: #fff;
.topBg {
position: absolute;
left: 29px;
top: 35px;
width: 691px;
height: 299px;
.webpBg("DetailPage/topBg.png");
}
.productName {
position: absolute;
left: 0;
top: 55px;
width: 100%;
text-align: center;
font-size: 28px;
}
.totalProfit{
position: absolute;
left: 0;
top: 90px;
width: 100%;
text-align: center;
font-size: 60px;
font-weight: bold;
}
.tranche{
position: absolute;
left: 40px;
top: 270px;
width: 30%;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.marketValue{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 270px;
width: 30%;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.yesterdayProfit{
position: absolute;
right:40px;
top: 270px;
width: 30%;
text-align: center;
font-size: 30px;
font-weight: bold;
}
}
.prodIframe { .prodIframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -75,14 +142,14 @@ ...@@ -75,14 +142,14 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
& > div { &>div {
font-size: 32px; font-size: 32px;
color: rgb(50, 50, 50); color: rgb(50, 50, 50);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
& > span { &>span {
font-size: 29px; font-size: 29px;
color: rgb(155, 155, 155); color: rgb(155, 155, 155);
text-align: center; text-align: center;
...@@ -145,14 +212,14 @@ ...@@ -145,14 +212,14 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
& > div { &>div {
font-size: 32px; font-size: 32px;
color: rgb(50, 50, 50); color: rgb(50, 50, 50);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
& > span { &>span {
font-size: 29px; font-size: 29px;
color: rgb(155, 155, 155); color: rgb(155, 155, 155);
text-align: center; text-align: center;
...@@ -204,4 +271,4 @@ ...@@ -204,4 +271,4 @@
} }
} }
} }
\ No newline at end of file
src/pages/DetailPage/DetailPage.tsx
View file @ c16dbe31
...@@ -8,6 +8,9 @@ import { PageCtrl } from '@/core/ctrls/PageCtrl'; ...@@ -8,6 +8,9 @@ import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { motion } from "motion/react" import { motion } from "motion/react"
import classNames from "classnames"; import classNames from "classnames";
import API from "@/api"; import API from "@/api";
import { _asyncThrottle } from '@/utils/utils';
import hxLink from "hx-product_detail-link";
enum EOpType { enum EOpType {
Buy = "buy", Buy = "buy",
...@@ -25,14 +28,27 @@ class DetailPage extends React.Component<any, any> { ...@@ -25,14 +28,27 @@ class DetailPage extends React.Component<any, any> {
marketValue: 0, marketValue: 0,
yesterdayProfit: 0, yesterdayProfit: 0,
availableFunds: 0, availableFunds: 0,
sellInput: "",
buyInput: "",
iframeUrl: "",
} }
async componentDidMount() { async componentDidMount() {
this.getFrameUrl();
this.updateInfo();
}
getFrameUrl = () => {
// 1912121000101
hxLink({ fundcode: this.props.code }).then((res) => {
this.setState({
iframeUrl: res.path,
});
});
} }
async updateInfo() { async updateInfo() {
const { success, data } = await API.mncpIndex({ code: "213123", }); const { success, data } = await API.mncpIndex({ code: this.props.code, });
if (!success) return; if (!success) return;
this.setState({ this.setState({
productName: data.productName, productName: data.productName,
...@@ -55,15 +71,44 @@ class DetailPage extends React.Component<any, any> { ...@@ -55,15 +71,44 @@ class DetailPage extends React.Component<any, any> {
}); });
} }
render() { clickSimulateBuy = _asyncThrottle(async () => {
const { tabType, productName, totalProfit, tranche, marketValue, yesterdayProfit, availableFunds } = this.state; const { buyInput } = this.state;
await API.buy({ code: this.props.code, amount: buyInput });
});
clickReallyBuy = _asyncThrottle(async () => {
const testUrl = "https://mobile.hxwm.com.cn/hxlch5/VUE/#/fund-detail-nobuy?fundcode=1912121000101&from=third"; });
clickSimulateSell = _asyncThrottle(async () => {
const { sellInput } = this.state;
await API.redeem({ code: this.props.code, amount: sellInput });
});
render() {
const {
tabType, iframeUrl,
productName, totalProfit, tranche,
marketValue, yesterdayProfit, availableFunds,
sellInput,
buyInput,
} = this.state;
const isBuy = tabType == EOpType.Buy; const isBuy = tabType == EOpType.Buy;
const isBuyed = totalProfit || tranche || marketValue || yesterdayProfit;
return <div className={styles.DetailPage}> return <div className={styles.DetailPage}>
<iframe className={styles.prodIframe} src={testUrl} /> {isBuyed &&<div className={styles.topArea}>
<div className={styles.topBg}/>
<div className={styles.productName}>{productName}</div>
<div className={styles.totalProfit}>{totalProfit/100}</div>
<div className={styles.tranche}>{tranche/100}</div>
<div className={styles.marketValue}>{marketValue/100}</div>
<div className={styles.yesterdayProfit}>{yesterdayProfit/100}</div>
</div>}
<iframe className={styles.prodIframe} src={iframeUrl} />
<motion.div <motion.div
className={styles.options} className={styles.options}
...@@ -98,10 +143,24 @@ class DetailPage extends React.Component<any, any> { ...@@ -98,10 +143,24 @@ class DetailPage extends React.Component<any, any> {
<input <input
className={styles.bugInput} className={styles.bugInput}
placeholder="¥最低买入1.00元" placeholder="¥最低买入1.00元"
type='number'
value={buyInput}
onChange={(e) => {
this.setState({
buyInput: e.target.value,
});
}}
/> />
<div className={styles.buyTip}>首次购买1.00元起 再次购买1.00元起 1.00元递增</div> <div className={styles.buyTip}>首次购买1.00元起 再次购买1.00元起 1.00元递增</div>
<Button className={classNames(styles.buyBtn, styles.simulateBuy)}>模拟买入</Button> <Button
<Button className={classNames(styles.buyBtn, styles.reallyBuy)}>真实买入</Button> className={classNames(styles.buyBtn, styles.simulateBuy)}
onClick={this.clickSimulateBuy}
>模拟买入</Button>
<Button
className={classNames(styles.buyBtn, styles.reallyBuy)}
onClick={this.clickReallyBuy}
>真实买入</Button>
</motion.div> </motion.div>
<motion.div <motion.div
className={styles.sell} className={styles.sell}
...@@ -110,15 +169,29 @@ class DetailPage extends React.Component<any, any> { ...@@ -110,15 +169,29 @@ class DetailPage extends React.Component<any, any> {
> >
<div className={styles.sellInfo}> <div className={styles.sellInfo}>
<div>赎回份额</div> <div>赎回份额</div>
<span>持有份额：{tranche / 100}份</span> <span>持有份额：{tranche/100}份</span>
</div> </div>
<div className={styles.sellInput}> <div className={styles.sellInput}>
<input <input
value={sellInput}
type='number'
placeholder="最多可赎回0份" placeholder="最多可赎回0份"
onChange={(e) => {
this.setState({
sellInput: e.target.value,
});
}}
/> />
<Button className={styles.sellAll}>全部</Button> <Button className={styles.sellAll} onClick={() => {
this.setState({
sellInput: tranche/100,
});
}}>全部</Button>
</div> </div>
<Button className={classNames(styles.sellBtn, styles.simulateSell)}>模拟赎回</Button> <Button
className={classNames(styles.sellBtn, styles.simulateSell)}
onClick={this.clickSimulateSell}
>模拟赎回</Button>
</motion.div> </motion.div>
</motion.div> </motion.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