Commit 0d3d42c4 authored by 俞嘉婷's avatar 俞嘉婷

feat: 部分迭代 表格2.5.8.14.17.18.19.22

parent fa504c24
......@@ -138,7 +138,40 @@ export default [
"experienceNum": 59442359
},
"giftPop1": {
todayPopFlag: true
"todayPopFlag": true,
"type": "2",
"actPrizeVO": [
{
"prizeId": "1",
"prizeName": "奖品名称1",
"prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
},
{
"prizeId": "2",
"prizeName": "奖品名称2",
"prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
},
{
"prizeId": "3",
"prizeName": "奖品名称3",
"prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
},
{
"prizeId": "4",
"prizeName": "奖品名称4",
"prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
},
{
"prizeId": "5",
"prizeName": "奖品名称5",
"prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
},
{
"prizeId": "thanks",
"prizeName": "thanks",
"prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
},
]
},
"virtualAssets": {
"preDayIncome": "656",
......
......@@ -10,11 +10,11 @@ export default [
data: {
productName: "productName",
totalProfit: Math.random() * 100000 >> 0,
tranche: Math.random() * 100000 >> 0,
tranche: 7660,
marketValue: Math.random() * 10000000 >> 0,
yesterdayProfit: Math.random() * 10000 >> 0,
availableFunds: 7660,
minBuyLimit: 100,
availableFunds: 7690,
minBuyLimit: 1,
}
}
},
......
......@@ -6,8 +6,8 @@ export default [
"success": "enim ut velit",
"data": {
"prizeImg": "in velit dolor",
"pirzeName": "do",
"pirzeId": "deserunt sit"
"prizeName": "do",
"prizeId": "1" // thanks
},
"message": "est fugiat in Excepteur dolor",
"code": "commodo"
......
src/assets/homePage/prize_banner.png

197 KB | W: | H:

src/assets/homePage/prize_banner.png

202 KB | W: | H:

src/assets/homePage/prize_banner.png
src/assets/homePage/prize_banner.png
src/assets/homePage/prize_banner.png
src/assets/homePage/prize_banner.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -15,60 +15,105 @@
background-color: #f2f5f7;
.topArea {
position: relative;
flex-shrink: 0;
margin-top: 40px;
width: 691px;
height: 299px;
// height: 299px;
height: 254px;
color: #ffffff;
margin-bottom: 10px;
.webpBg("DetailPage/topBg.png");
// .webpBg("DetailPage/topBg.png");
border-radius: 13px;
background-image: linear-gradient( 0deg, rgb(170,52,39) 0%, rgb(199,68,54) 100%);
.productName {
position: absolute;
left: 0;
top: 55px;
width: 100%;
left: 149px;
top: 0;
width: 393px;
height: 42px;
text-align: center;
font-size: 28px;
background-image: linear-gradient( 0deg, #a5281e 0%, #a2261d 100%);
border-radius: 0 0 13px 13px;
.lineClamp1();
}
.label1 {
position: absolute;
left: 22px;
top: 45px;
width: 100%;
font-size: 28px;
color: rgba(255, 255, 255, 0.6);
}
.totalProfit {
position: absolute;
left: 0;
top: 90px;
left: 22px;
top: 80px;
width: 100%;
text-align: center;
font-size: 60px;
font-weight: bold;
}
.label2 {
position: absolute;
left: 22px;
top: 166px;
width: 30%;
font-size: 22px;
color: rgba(255, 255, 255, 0.6);
}
.tranche {
position: absolute;
left: 40px;
top: 270px;
left: 22px;
top: 198px;
width: 30%;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.label3 {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 166px;
width: 30%;
font-size: 22px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
.marketValue {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 270px;
top: 198px;
width: 30%;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.label4 {
position: absolute;
right: 22px;
top: 166px;
width: 30%;
font-size: 22px;
text-align: right;
color: rgba(255, 255, 255, 0.6);
}
.yesterdayProfit {
position: absolute;
right: 40px;
top: 270px;
right: 22px;
top: 198px;
width: 30%;
text-align: center;
text-align: right;
font-size: 30px;
font-weight: bold;
}
......@@ -288,6 +333,9 @@
width: 18px;
height: 32px;
.webpBg("DetailPage/backBtn.png");
&.backBtn2 {
top: 42px;
}
}
}
......@@ -37,10 +37,8 @@ class DetailPage extends React.Component<any, any> {
sellInput: "",
buyInput: "",
iframeUrl: "",
firtIn: true,
}
async componentDidMount() {
this.getFrameUrl();
this.updateInfo();
......@@ -66,7 +64,7 @@ class DetailPage extends React.Component<any, any> {
yesterdayProfit: data.yesterdayProfit,
availableFunds: data.availableFunds,
minBuyLimit: data.minBuyLimit,
buyInput: data.availableFunds,
buyInput: data.availableFunds / 100,
});
}
......@@ -87,44 +85,28 @@ class DetailPage extends React.Component<any, any> {
return;
}
if (this.state.firtIn && (+buyInput < this.state.minBuyLimit)) {
// +(+xxx * 100).toFixed(0) 解决精度问题 比如76.9*100=7690.000000000001 而不是7690
if(+(+buyInput * 100).toFixed(0) < this.state.minBuyLimit){
Toast.show("低于起购价");
return;
}
if (+buyInput * 100 < this.state.minBuyLimit && !this.state.firtIn) {
Toast.show("低于起购价");
return;
}
let div = +buyInput * 100 / this.state.minBuyLimit;
if(this.state.firtIn) {
div = +buyInput / this.state.minBuyLimit;
}
const div = +(+buyInput * 100).toFixed(0) / this.state.minBuyLimit;
if (div !== Math.floor(div)) {
Toast.show("按起购倍数递增哦~");
return;
}
if(this.state.firtIn && (+buyInput > this.state.availableFunds)) {
Toast.show("超出买入上限啦");
return;
}
if (+buyInput * 100 > this.state.availableFunds && !this.state.firtIn) {
if (+(+buyInput * 100).toFixed(0) > this.state.availableFunds) {
Toast.show("超出买入上限啦");
return;
}
ModalCtrl.showModal(BuyPanel, {
name: this.state.productName,
amount: this.state.firtIn ? +buyInput / 100 : +buyInput,
amount: buyInput,
call: async () => {
const { success, data } = await API.buy({ code: this.props.code, amount: !this.state.firtIn ? +buyInput * 100 : +buyInput});
this.setState({
firtIn: true
})
const { success, data } = await API.buy({ code: this.props.code, amount: +(+buyInput * 100).toFixed(0) });
this.updateInfo();
if (!success) return;
Toast.show("购买成功");
......@@ -151,7 +133,7 @@ class DetailPage extends React.Component<any, any> {
return;
}
if (+sellInput * 100 > this.state.tranche) {
if (+(+sellInput * 100).toFixed(0) > this.state.tranche) {
Toast.show("超出赎回上限啦");
return;
}
......@@ -160,7 +142,7 @@ class DetailPage extends React.Component<any, any> {
name: this.state.productName,
amount: sellInput,
call: async () => {
const { success, data } = await API.redeem({ code: this.props.code, amount: +sellInput * 100 });
const { success, data } = await API.redeem({ code: this.props.code, amount: +(+sellInput * 100).toFixed(0) });
this.updateInfo();
if (!success) return;
Toast.show("赎回成功");
......@@ -170,7 +152,6 @@ class DetailPage extends React.Component<any, any> {
// 新增:输入校验,只允许数字和最多两位小数
handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, key: 'buyInput' | 'sellInput') => {
key == 'buyInput' && this.setState({ firtIn: false })
let value = e.target.value;
// 只允许输入数字和最多两位小数
if (value === '' || /^\d*(\.\d{0,2})?$/.test(value)) {
......@@ -203,9 +184,13 @@ class DetailPage extends React.Component<any, any> {
{isBuyed
? <div className={styles.topArea}>
<div className={styles.productName}>{productName}</div>
<div className={styles.label1}>累计收益</div>
<div className={styles.totalProfit}>{totalProfit / 100}</div>
<div className={styles.label2}>持有份额</div>
<div className={styles.tranche}>{tranche / 100}</div>
<div className={styles.label3}>持有市值</div>
<div className={styles.marketValue}>{marketValue / 100}</div>
<div className={styles.label4}>昨日收益</div>
<div className={styles.yesterdayProfit}>{yesterdayProfit / 100}</div>
</div>
: <div className={styles.topArea2}>
......@@ -306,7 +291,7 @@ class DetailPage extends React.Component<any, any> {
</motion.div>
</motion.div>
<Button
className={classNames(styles.backBtn)}
className={classNames(styles.backBtn, isBuyed ? styles.backBtn2 : "")}
onClick={this.clickBack}
/>
</div>;
......
......@@ -8,6 +8,7 @@
position: relative;
background-color: #ffe6c5;
padding-top: 700px;
padding-bottom: 85px;
box-sizing: border-box;
.bg {
......@@ -186,6 +187,18 @@
margin: 0 4px;
}
}
.time_box_over {
position: absolute;
right: 29px;
top: 26px;
width: 223px;
height: 40px;
.sparkBg("homePage/time_box_over_bg.png");
font-size: 22px;
color: rgb(255, 255, 255);
letter-spacing: 2px;
.flex_center();
}
.yesterday_label {
width: 153px;
......@@ -333,9 +346,9 @@
}
.realbuy_btn {
width: 302px;
height: 86px;
left: 205px;
width: 327px;
height: 83px;
left: 193px;
top: 380px;
position: absolute;
font-size: 35px;
......@@ -347,9 +360,9 @@
}
.prize_banner {
width: 707px;
height: 316px;
left: 22px;
width: 713px;
height: 322px;
left: 19px;
// top: 1060px;
position: relative;
.sparkBg("homePage/prize_banner.png");
......@@ -499,16 +512,19 @@
.bottom_products {
width: 714px;
height: auto;
min-height: 957px;
min-height: 990px;
background-color: #fce398;
left: 18px;
// top: 2192px;
position: relative;
margin-top: 20px;
padding-top: 152px;
padding-bottom: 19px;
box-sizing: border-box;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
border-radius: 0 0 38px 38px;
&::before {
content: "";
......@@ -516,8 +532,9 @@
top: 800px;
left: 15px;
width: 685px;
height: calc(100% - 800px);
height: calc(100% - 800px - 19px);
background-color: #fff;
border-radius: 0 0 20px 20px;
}
.tab1_bg {
......
......@@ -320,7 +320,7 @@ class HomePage extends React.Component<any, any> {
}}
countdownOver={() => store.updateIndex()}
/>
: <div className="time_box">理财体验金已失效</div>
: <div className="time_box_over">理财体验金已失效</div>
}
<span className="yesterday_label">累计收益(元)</span>
<span className="yesterday_amount">{this.settleMoney(virtualAssets?.totalIncome || 0)}</span>
......
......@@ -55,6 +55,18 @@
.lineClamp1();
}
.tips {
width: 100%;
font-size: 24px;
color: rgba(1, 1, 1, 0.6);
line-height: 4.284;
text-align: center;
position: absolute;
left: 0;
top: 920px;
text-align: center;
}
.close {
position: absolute;
left: 346px;
......
......@@ -31,11 +31,11 @@ export class PrizePanel extends Component<any, any> {
const {optionImg, optionName, type} = this.props;
return <div className="PrizePanel modal_center">
{type != 'red' && <div className="bg"/>}
{type == 'red' && <div className="bg2"/>}
<div className="bg2"/>
<img className="img" src={optionImg}/>
<div className="prizeName">{optionName}</div>
<Button className={`btn md${type == 'red' ? '26' : '18'}`}onClick={this.clickBtn}/>
{type != 'red' && <div className="tips">奖品可在【首页】_【我的奖品】中查看</div>}
<Button className="close" onClick={this.clickClose}/>
</div>
}
......
......@@ -106,5 +106,12 @@
.sparkBg("newbieModal/drawBtn.png");
}
.close {
position: absolute;
left: 346px;
top: 1240px;
width: 58px;
height: 58px;
.webpBg("common/close.png");
}
}
\ No newline at end of file
......@@ -4,6 +4,7 @@
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
.gameCutDownBg {
position: absolute;
......
......@@ -73,8 +73,9 @@ class Store {
giftPop?: {
type?: string,
actPrizeVO?: Array<{
pirzeName?: string,
pirzeImg?: string
prizeName?: string,
prizeImg?: string,
prizeId?: string,
}>
}
// 大明星配置
......
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