Skip to content

R
RB_StrongestBrain_250520
Commit 7000fd7e authored by cc's avatar cc
Browse files
Options

update

parent bc3cd9d3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3222 additions and 317 deletions
mock/address.ts
View file @ 7000fd7e
...@@ -7,92 +7,28 @@ export default [ ...@@ -7,92 +7,28 @@ export default [
"code": "0000000000", "code": "0000000000",
"desc": "OK", "desc": "OK",
"timestamp": 1736580360076, "timestamp": 1736580360076,
"data": [{ "data": [
"name": "东华门街道",
"adCode": "110101001",
"level": 4
},
{ {
"name": "景山街道", "name": "浙江省",
"adCode": "110101002", "adCode": "fugiat ut",
"level": 4 "level": 66790536.01298919
}, },
{ {
"name": "交道口街道", "name": "杭州市",
"adCode": "110101003", "adCode": "aliqua in Excepteur qui",
"level": 4 "level": 57555835.61859158
}, },
{ {
"name": "安定门街道", "name": "西湖区",
"adCode": "110101004", "adCode": "occaecat",
"level": 4 "level": 93591030.11458206
}, },
{ {
"name": "北新桥街道", "name": "哈哈哈哈哈哈哈哈哈哈哈",
"adCode": "110101005", "adCode": "sint eu esse",
"level": 4 "level": 27233221.127899915
},
{
"name": "东四街道",
"adCode": "110101006",
"level": 4
},
{
"name": "朝阳门街道",
"adCode": "110101007",
"level": 4
},
{
"name": "建国门街道",
"adCode": "110101008",
"level": 4
},
{
"name": "东直门街道",
"adCode": "110101009",
"level": 4
},
{
"name": "和平里街道",
"adCode": "110101010",
"level": 4
},
{
"name": "前门街道",
"adCode": "110101011",
"level": 4
},
{
"name": "崇文门外街道",
"adCode": "110101012",
"level": 4
},
{
"name": "东花市街道",
"adCode": "110101013",
"level": 4
},
{
"name": "龙潭街道",
"adCode": "110101014",
"level": 4
},
{
"name": "体育馆路街道",
"adCode": "110101015",
"level": 4
},
{
"name": "天坛街道",
"adCode": "110101016",
"level": 4
},
{
"name": "永定门外街道",
"adCode": "110101017",
"level": 4
} }
] ],
} }
}, },
......
mock/prize.ts 0 → 100644
View file @ 7000fd7e
This diff is collapsed.
mock/task.ts 0 → 100644
View file @ 7000fd7e
This diff is collapsed.
src/App.tsx
View file @ 7000fd7e
...@@ -29,7 +29,7 @@ class App extends Component { ...@@ -29,7 +29,7 @@ class App extends Component {
const defaultPage = { const defaultPage = {
myPrize: MyPrize, // TODO 举例子 新宿台奖品页 myPrize: MyPrize, // TODO 举例子 新宿台奖品页
index: LoadingDemo, index: LoadingDemo,
}[skinId] || GamePage; }[skinId] || HomePage;
PageCtrl.changePage(defaultPage); PageCtrl.changePage(defaultPage);
} }
......
src/api/index.ts
View file @ 7000fd7e
...@@ -85,6 +85,26 @@ const API = generateAPI({ ...@@ -85,6 +85,26 @@ const API = generateAPI({
startVideo: "main/startVideo.do", startVideo: "main/startVideo.do",
/** 奖品页 */
prize: "/crecord/getrecordmn",
/** 获取任务列表 */
getTaskInfo: {
uri: "task_1/queryTasks.do",
},
/** 完成任务 */
doCompleted: {
uri: "task_1/doCompleted.do",
method: "post",
withToken: true,
},
/** 领取奖励 */
sendPrize: {
uri: "task_1/sendPrize.do",
method: "post",
withToken: true,
},
}) })
// console.log('======', API) // console.log('======', API)
......
src/pages/HomePage/HomePage.tsx
View file @ 7000fd7e
...@@ -5,6 +5,9 @@ import { observer } from 'mobx-react'; ...@@ -5,6 +5,9 @@ import { observer } from 'mobx-react';
import './homepage.less'; import './homepage.less';
import { PageCtrl } from '@/core/ctrls/PageCtrl'; import { PageCtrl } from '@/core/ctrls/PageCtrl';
import RankPage from '../RankPage/RankPage'; import RankPage from '../RankPage/RankPage';
import MyPrize from '../MyPrize/MyPrize';
import Taskpop from '@/panels/taskpop/taskpop';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
@observer @observer
class Homepage extends React.Component { class Homepage extends React.Component {
...@@ -12,11 +15,14 @@ class Homepage extends React.Component { ...@@ -12,11 +15,14 @@ class Homepage extends React.Component {
super(props); super(props);
} }
componentDidMount(): void { componentDidMount(): void {
ModalCtrl.showModal(Taskpop);
} }
showRank = () => { showRank = () => {
PageCtrl.changePage(RankPage); PageCtrl.changePage(RankPage);
} }
showPrize = () =>{
PageCtrl.changePage(MyPrize);
}
render() { render() {
return ( return (
<div className="homepage modal_center"> <div className="homepage modal_center">
...@@ -41,7 +47,7 @@ class Homepage extends React.Component { ...@@ -41,7 +47,7 @@ class Homepage extends React.Component {
<span className="myrank"></span> <span className="myrank"></span>
<span className="number">000</span> <span className="number">000</span>
</div> </div>
<span className="prize"></span> <span className="prize" onClick={this.showPrize}></span>
<span className="rule"></span> <span className="rule"></span>
<span className="visit"></span> <span className="visit"></span>
<span className="share"></span> <span className="share"></span>
......
src/pages/MyPrize/MyPrize.less
View file @ 7000fd7e
@import "../../res.less"; @import "../../res.less";
.MyPrize { .prizepage_wrap {
width: 100%; width: 750px;
height: 100%; height: 1624px;
left: 0px;
top: 0px;
position: absolute; position: absolute;
left: 0; background-color: #fff5d3;
top: 0;
overflow: hidden;
.MyPrizeBg { .prizepage {
position: absolute;
left: 0;
top: 0;
width: 750px; width: 750px;
height: 1624px; height: 1624px;
.webpBg("MyPrize/bg.png"); left: 0px;
} // top: -200px;
.MyPrizeTitle {
position: absolute;
left: 231px;
top: 98px;
width: 289px;
height: 70px;
.webpBg("MyPrize/我的奖品.png");
}
.MyPrizeBack {
position: absolute; position: absolute;
left: 20px; background-color: #fff5d3;
top: 110px;
width: 28px;
height: 43px;
.webpBg("MyPrize/返回.png");
transform-origin: center left !important;
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
// top: 1450px;
bottom: 30px;
position: fixed;
.sparkBg("choice_challenge/ditu.png");
}
.prizeList { // transform: translateY(-50%);
position: fixed;
left: 38px;
top: 260px;
width: 675px;
// height: 1180px;
bottom: 200px;
overflow-y: auto;
overflow-x: hidden;
.prizeItem {
position: relative;
width: 675px;
height: 149px;
margin-top: 20px;
.webpBg("MyPrize/itemBg.png");
.use {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
.webpBg("MyPrize/use.png");
}
.yifafang { .bg {
position: absolute; width: 750px;
width: 178px; height: 1624px;
height: 44px; left: 0px;
left: 490px; top: 0px;
top: 53px; position: absolute;
text-align: center; .sparkBg("prizepage/bg.jpg");
line-height: 44px; }
.webpBg("MyPrize/已发放.png");
}
.bufa { .all_tab {
position: absolute; width: 665px;
width: 141px; height: 80px;
height: 44px; position: absolute;
left: 520px; left: 40px;
top: 53px; top: 280px;
overflow-x: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.hideScrollbar();
.tab_item {
width: 122px;
height: 80px;
text-align: center; text-align: center;
line-height: 44px; left: 0;
.webpBg("MyPrize/补发红包.png"); top: 0;
} position: relative;
margin-right: 40px;
flex-shrink: 0;
font-size: 30px;
color: #fff;
font-weight: 700;
line-height: 80px;
.lineClamp1();
.fafangzhong { .stick {
position: absolute; position: absolute;
width: 141px; left: 0px;
height: 44px; top: 70px;
left: 520px; width: 121px;
top: 53px; height: 4px;
text-align: center; .sparkBg("prizepage/stick.png");
line-height: 44px; }
.webpBg("MyPrize/发放中.png");
}
.shibai {
position: absolute;
width: 178px;
height: 44px;
left: 490px;
top: 53px;
text-align: center;
line-height: 44px;
.webpBg("MyPrize/发放失败.png");
} }
.prizeImg { .opacity {
position: absolute; background-image:none !important;
left: 30px; opacity: 0.6;
top: 20px;
width: 110px;
height: 110px;
border-width: 1px;
border-color: rgb(105, 40, 11);
border-style: solid;
border-radius: 11px;
background-color: rgb(255, 255, 255);
} }
}
.prizeName { .list {
font-size: 28px; width: 702px;
color: rgb(105, 40, 11); height: calc(100vh - 440px);
text-align: left; left: 34px;
position: absolute; top: 406px;
left: 168px; position: absolute;
top: 40px; overflow-y: scroll;
width: 330px;
// font-weight: bold; .item {
.lineClamp1(); width: 702px;
height: 150px;
left: 0px;
top: 0px;
position: relative;
margin-bottom: 30px;
.bg_item {
width: 677px;
height: 166px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("prizepage/itembg.png");
}
.img {
width: 110px;
height: 110px;
left: 26px;
top: 24px;
position: absolute;
// border: 1px solid #e5c362;
border-radius: 15px;
}
.name {
width: 350px;
// height: 28px;
left: 160px;
top: 24px;
position: absolute;
font-size: 30px;
// line-height: 28px;
color: #262626;
.lineClamp1();
font-weight: bold;
}
.prize_time {
width: 450px;
height: 28px;
left: 160px;
top: 75px;
position: absolute;
font-size: 18px;
// line-height: 28px;
color: #afafaf;
.lineClamp1();
}
.expire_time {
width: 450px;
height: 28px;
left: 160px;
top: 105px;
position: absolute;
font-size: 18px;
// line-height: 28px;
color: #afafaf;
.lineClamp1();
}
.gobtn {
width: 152px;
height: 57px;
left: 510px;
top: 60px;
position: absolute;
.sparkBg("prizepage/qulingqu.png");
}
.gray_btn {
width: 152px;
height: 57px;
left: 510px;
top: 60px;
position: absolute;
.sparkBg("prizepage/yiguoqi.png");
}
} }
.getTime { .empty {
font-size: 24.414px; width: 100%;
color: rgb(105, 40, 11); height: 30px;
text-align: left; line-height: 30px;
top: 300px;
position: absolute; position: absolute;
left: 168px; left: 0;
top: 82px; text-align: center;
color: rgb(158, 158, 158); font-size: 30px;
color: #fff5d3;
} }
} }
}
.nothing { .back {
position: absolute; left: 29px;
left: 220px; top: 161px;
top: 200px; width: 58px;
width: 194px; height: 58px;
height: 326px; transform-origin: left center;
.sparkBg("MyPrize/nothing.png") position: absolute;
.sparkBg("prizepage/back.png");
}
} }
} }
\ No newline at end of file
src/pages/MyPrize/MyPrize.tsx
View file @ 7000fd7e
This diff is collapsed.
src/panels/FillAddress/FillAddress.less 0 → 100644
View file @ 7000fd7e
@import "../../res.less";
.FillAddress {
width:750px;
.bg {
position: absolute;
left: 0px;
top: 0px;
width: 750px;
height: 1624px;
.sparkBg("FillAddress/填写收货地址.png");
}
.button-return {
position: absolute;
left: 51px;
top: 183px;
width: 23px;
height: 32px;
// transform-origin: left center;
.sparkBg("FillAddress/返回按钮.png");
}
.submitNoAct {
// opacity: 0.502;
position: absolute;
left: 154px;
top: 850px;
width: 442px;
height: 104px;
.sparkBg("FillAddress/提交信息按钮-不可点击.png");
}
.submitAct {
position: absolute;
left: 154px;
top: 850px;
width: 442px;
height: 104px;
.sparkBg("FillAddress/提交信息按钮-可点击.png");
}
.infoList {
position: absolute;
top: 300px;
width: 750px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.inputG {
position: relative;
margin-bottom: 51px;
width: 634px;
height: 80px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
font-size: 30px;
color: #656565;
.igLabel {
margin-left: 8px;
margin-right: auto;
}
.igInput {
font-size: 30px;
width: 70%;
height: 100%;
border: none;
}
.igInputGray {
color: #7f7f7f;
}
.igDiv {
font-size: 30px;
width: 70%;
height: 100%;
border: none;
display: flex;
align-items: center;
justify-content: flex-start;
}
}
.button-select {
width: 15px;
height: 26px;
.sparkBg("FillAddress/选择按钮.png");
position: absolute;
right: 0;
}
}
}
src/panels/FillAddress/FillAddress.tsx 0 → 100644
View file @ 7000fd7e
import React, { useState } from "react";
import { observer } from "mobx-react";
import "./FillAddress.less";
import { REG_TEL, _throttle } from "@/utils/utils.ts";
import { Toast } from "@grace/ui";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import {Axios, AxiosRequestConfig} from 'axios';
import Selectmodal from "../selectmodal/selectmodal";
const apiAxios = new Axios({
timeout: 10000,
});
// wzjTODO 换皮
@observer
class FillAddress extends React.Component<any, any> {
fillMd=false
state = {
name: "",
mobile: "",
area: "",
province: "",
city: "",
street: "",
detail: "",
addrCode: "",
isShowArea:false,
}
componentDidMount() {
// this.initSensor();
const { projectId, saveAddresUrl, getPrize, recordId, agentCode, prizeProjectId} = this.props;
console.log('projectId',projectId)
}
initSensor(){
}
ClickClose = () => {
ModalCtrl.closeModal();
}
onNameInput = (e) => {
let value = e.target.value
this.setState({
name: value,
});
};
onMobileInput = (e) => {
this.setState({
mobile: e.target.value.replace(/[^\d]/g, ''),
});
};
onDetailInput = (e) => {
let value = e.target.value;
this.setState({
detail: value,
});
};
clickArea = () => {
// ModalCtrl.showModal(Selectmodal,{
// doSelect: this.doSelect,
// })
this.setState({
isShowArea:true
})
}
doSelect = ({province, city, area, street, addrCode,}) => {
this.setState({
province,
city,
area,
street,
addrCode,
},()=>{
this.closeSelect()
});
}
closeSelect = () =>{
this.setState({
isShowArea:false
})
}
clickSubmit = _throttle(async () => {
// sensorLog(LOG_KEY.click, "b7391", "d7393", {
// page_name: "地址填写页",
// button_name: "提交信息按钮",
// });
const {
name, mobile,
area, province, city, street, addrCode,
detail
} = this.state;
if (!REG_TEL.test(mobile)) {
return Toast.show('请输入正确的手机号～');
}
const { projectId, saveAddresUrl, getPrize, recordId, agentCode, prizeProjectId} = this.props;
const params= {
province,
city,
area,
detail,
name,
mobile,
recordId,
agentCode,
street,
projectId:prizeProjectId,
addrCode,
from: CFG.channel || "2",
actPlatforms: CFG.actPlatforms,
actId: CFG.actId,
}
const resInfo = await apiAxios.request({
method: 'get',
url: saveAddresUrl,
params,
})
const res = JSON.parse(resInfo.data)
console.log('res',res)
if (!res?.success) {
return;
}
getPrize(projectId);
ModalCtrl.closeModal();
});
clickSubmitNoAct = () => {
Toast.show("请先填写完整信息", 1800, {hideOthers: true});
}
render() {
const {name, mobile, area, province, city, street, detail, isShowArea} = this.state;
const isFill = Boolean(name && mobile && area && province && city && detail);
if(this.fillMd != isFill){
console.log("曝光埋点")
this.fillMd = isFill;
}
return <div className="FillAddress">
<div className="bg" />
<div className="button-return" onClick={this.ClickClose} />
<div className="infoList">
<div className="inputG inputName">
<div className="igLabel">收货人</div>
<input
className="igInput inputStyle"
placeholder="收货人姓名"
value={name}
maxLength={10}
onChange={this.onNameInput}
/>
</div>
<div className="inputG inputMobile">
<div className="igLabel">手机号码</div>
<input
className="igInput inputStyle"
placeholder="收货人手机号码"
value={mobile}
maxLength="11"
onChange={this.onMobileInput}
/>
</div>
<div className="inputG inputArea">
<div className="igLabel">所在地区</div>
<div
className={`igDiv ${province ? "" : "igInputGray"}`}
placeholder="选择省/市/区"
onClick={this.clickArea}
>
{province ? `${province}/${city}/${area}${!!street ? `/${street}` : ""}` : "选择省/市/区/街道"}
</div>
<div className="button-select" onClick={this.clickArea} />
</div>
<div className="inputG inputAddress">
<div className="igLabel">详细地址</div>
<input
className="igInput inputStyle"
placeholder="请填写详细地址"
value={detail}
onChange={this.onDetailInput}
maxLength={100}
/>
</div>
</div>
{
isFill
? <div className="submitAct" onClick={this.clickSubmit} />
: <div className="submitNoAct" onClick={this.clickSubmitNoAct} />
}
{
isShowArea && <Selectmodal doSelect={this.doSelect} closeSelect={this.closeSelect}></Selectmodal>
}
</div>;
}
}
export default FillAddress;
src/panels/selectmodal/selectmodal.less 0 → 100644
View file @ 7000fd7e
@import "../../res.less";
.selectCont{
width:750px;
height: 100vh;
position: fixed;
top:0;
left:0;
background-color: rgba(0,0,0,0.8);
.selectmodal {
width: 750px;
height: 550px;
left: 0;
bottom: 0;
position: absolute;
animation: frombottom 300ms forwards;
.bg2 {
width: 750px;
height: 550px;
left: 0;
top: 0;
position: absolute;
background-color: white;
}
.cancelbtn {
width: 217px;
height: 82px;
left: 69px;
top: 435px;
position: absolute;
border-radius: 42px;
border: 2px solid #333333;
display: flex;
align-items: center;
justify-content: center;
font-size: 42px;
box-sizing: border-box;
}
.confirmbtn {
width: 355px;
height: 82px;
left: 330px;
top: 435px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 42px;
background-color: #ffce85;
border-radius: 42px;
}
.dateCont {
width: 685px;
display: flex;
position: absolute;
top: 30px;
left: calc(50% - 685px / 2);
text-align: center;
flex-direction: row;
&::after {
content: '';
width: 722px;
height: 71px;
left: -20px;
top: calc(50% - 60px / 2);
position: absolute;
background-color: #ffce85;
}
.dates {
width: calc(100% / 4);
flex: 1;
z-index: 1;
}
.hours {
width: calc(100% / 4);
flex: 1;
z-index: 1;
}
.minutes {
width: calc(100% / 4);
flex: 1;
z-index: 1;
}
.street {
width: calc(100% / 4);
flex: 1;
z-index: 1;
}
._date {
width: 100%;
height: 380px;
.dateItem {
width: 100%;
height: 79px;
line-height: 79px;
color: rgb(116, 116, 116);
font-size: 36px;
text-align: center;
div {
width: 100%;
display: inline-block;
.lineClamp1();
}
&.swiper-slide-active {
font-size: 42px;
color: black;
font-weight: 700;
}
}
}
}
@keyframes frombottom {
0% {
bottom: -614px;
}
100% {
bottom: 0;
}
}
}
}
src/panels/selectmodal/selectmodal.tsx 0 → 100644
View file @ 7000fd7e
import React from "react";
import { observer } from "mobx-react";
import "./selectmodal.less";
import { Swiper, SwiperSlide } from "swiper/react";
// import 'style-loader!css-loader!swiper/swiper-bundle.css';
import "../../../src/swiper-bundle.css";
import API from "../../api";
import { _throttle } from "../../utils/utils";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
// 地址选择器 什么都别改直接复制
@observer
class Selectmodal extends React.Component {
constructor(props) {
super(props);
this.state = {
provinceList: [],
cityList: [],
areaList: [],
streetList: [],
provinceCode: 0,
cityCode: 0,
areaCode: 0,
streetCode: 0,
};
}
swiperRef;
swiperRef2;
swiperRef3;
// getParentCode
async componentDidMount() {
//获取省
await this.getCodeList(null, "provinceList");
//获取市
const { provinceList, provinceCode } = this.state;
await this.getCodeList(provinceList[provinceCode]?.adCode, "cityList");
//获取区
const { cityList, cityCode } = this.state;
await this.getCodeList(cityList[cityCode]?.adCode, "areaList");
//获取街道
const { areaList, areaCode } = this.state;
await this.getCodeList(areaList[areaCode]?.adCode, "streetList");
}
/**获取省市区接口 */
async getCodeList(parentCode, type) {
const params = {};
if (parentCode) {
params.parentCode = parentCode;
}
const { success, data } = await API.getParentCode(params);
if (success) {
this.setState({
[type]: data,
});
}
}
/**
* 省选择
* @param {*} swiper
*/
onProvinceSwiper = (swiper) => {
if (swiper) {
swiper.on("slideChange", (swiper) => {
console.error("Slide changed!", swiper.activeIndex);
this.setState(
{
provinceCode: swiper.activeIndex,
},
async () => {
//获取市
const { provinceList } = this.state;
await this.getCodeList(provinceList[swiper.activeIndex]?.adCode, "cityList");
//获取区
const { cityList, cityCode } = this.state;
await this.getCodeList(cityList[cityCode]?.adCode, "areaList");
//获取街道
const { areaList, areaCode } = this.state;
await this.getCodeList(areaList[areaCode]?.adCode, "streetList");
}
);
this.swiperRef?.slideTo(0);
this.swiperRef2?.slideTo(0);
this.swiperRef3?.slideTo(0);
});
}
};
/**
* 市选择
*/
onCitySwiper = (swiper) => {
console.error("Slide changed!", swiper.activeIndex);
this.setState(
{
cityCode: swiper.activeIndex,
},
async () => {
//获取区
const { cityList } = this.state;
await this.getCodeList(cityList[swiper.activeIndex]?.adCode, "areaList");
//获取街道
const { areaList, areaCode } = this.state;
await this.getCodeList(areaList[areaCode]?.adCode, "streetList");
}
);
this.swiperRef2?.slideTo(0);
this.swiperRef3?.slideTo(0);
};
/**
* 区选择
* @param {*} swiper
*/
onAreaSwiper = (swiper) => {
console.error("Slide changed!", swiper.activeIndex);
this.setState(
{
areaCode: swiper.activeIndex,
},
async () => {
//获取街道
const { areaList, areaCode } = this.state;
await this.getCodeList(areaList[areaCode]?.adCode, "streetList");
}
);
this.swiperRef3?.slideTo(0);
};
/**
* 街道选择
* @param {*} swiper
*/
onStreetSwiper = (swiper) => {
console.error("Slide changed!", swiper.activeIndex);
this.setState({
streetCode: swiper.activeIndex,
});
};
/**
* 确认选择
*/
doSelect = _throttle(() => {
const { provinceList, cityList, areaList, streetList, provinceCode, cityCode, areaCode, streetCode } = this.state;
const province = provinceList[provinceCode]?.name;
const city = cityList[cityCode]?.name;
const area = areaList[areaCode]?.name;
const street = streetList[streetCode]?.name;
const addrCode = streetList[streetCode]?.adCode || areaList[areaCode]?.adCode;
console.log(province + "" + city + "" + area + "" + street);
//确定展示到页面
const { doSelect } = this.props;
doSelect && doSelect({ province, city, area, street, addrCode });
});
/** 取消 */
doCancel = () => {
const { closeSelect } = this.props;
closeSelect && closeSelect()
};
onClose() {
const { closeSelect } = this.props;
closeSelect && closeSelect()
}
render() {
const { provinceList, cityList, areaList, streetList } = this.state;
return (
<div className="selectCont">
<div className="selectmodal">
<span className="bg2" />
<div className="cancelbtn" onClick={this.doCancel}>
取消
</div>
<div className="confirmbtn" onClick={this.doSelect}>
确认
</div>
<div className="dateCont">
<div className="dates">
<Swiper
slidesPerView={5}
initialSlide={0}
centeredSlides={true}
direction="vertical"
className="_date"
onSwiper={this.onProvinceSwiper}>
{provinceList?.map((item, index) => (
<SwiperSlide className="dateItem" key={index}>
<div>{item?.name}</div>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="hours">
<Swiper
slidesPerView={5}
initialSlide={0}
centeredSlides={true}
direction="vertical"
className="_date"
onSwiper={(swiper) => (this.swiperRef = swiper)}
onSlideChange={(swiper) => this.onCitySwiper(swiper)}>
{cityList?.map((item, index) => (
<SwiperSlide className="dateItem" key={index}>
<div>{item?.name}</div>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="minutes">
<Swiper
slidesPerView={5}
initialSlide={0}
centeredSlides={true}
direction="vertical"
className="_date"
onSwiper={(swiper) => (this.swiperRef2 = swiper)}
onSlideChange={(swiper) => this.onAreaSwiper(swiper)}>
{areaList?.map((item, index) => (
<SwiperSlide className="dateItem" key={index}>
<div>{item?.name}</div>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="street">
<Swiper
slidesPerView={5}
initialSlide={0}
centeredSlides={true}
direction="vertical"
className="_date"
onSwiper={(swiper) => (this.swiperRef3 = swiper)}
onSlideChange={(swiper) => this.onStreetSwiper(swiper)}>
{streetList?.map((item, index) => (
<SwiperSlide className="dateItem" key={index}>
<div>{item?.name}</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</div>
</div>
);
}
}
export default Selectmodal;
src/panels/taskpop/taskpop.less 0 → 100644
View file @ 7000fd7e
@import "../../res.less";
.taskpop {
width: 750px;
height: 1071px;
left: 0px;
position: absolute;
bottom: 0px;
// animation: frombottom 600ms forwards;
.bg {
width: 750px;
height: 1071px;
left: 0px;
bottom: 0;
position: absolute;
.sparkBg("TaskPop/bg.png");
}
.icon2 {
width: 573px;
height: 491px;
left: 94px;
top: -170px;
position: absolute;
.sparkBg("TaskPop/icon.png");
}
.close {
width: 62px;
height: 62px;
left: 668px;
top: -70px;
position: absolute;
.sparkBg("TaskPop/close.png");
}
.bg_list {
width: 687px;
height: 685px;
left: 31px;
top: 99px;
position: absolute;
// .sparkBg("TaskPop/bg_list.png");
}
.list {
width: 730px;
height: 843px;
left: 50px;
top: 210px;
position: absolute;
overflow-y: scroll;
.item {
width: 636px;
height: 141px;
left: 0px;
top: 0px;
position: relative;
margin-bottom: 20px;
.bg_item {
width: 636px;
height: 141px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("TaskPop/itembg.png");
}
.center_info {
width: 340px;
height: 120px;
left: 145px;
top: 20px;
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
.title {
width: 90%;
// height: 30px;
font-size: 32px;
// line-height: 30px;
color: #fff;
.lineClamp1();
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 2px;
// -webkit-text-stroke: 1px #df852d; /* width | color */
text-shadow:
-2px -2px 0 #df852d, /* 左上角 */
2px -2px 0 #df852d, /* 右上角 */
-2px 2px 0 #df852d, /* 左下角 */
2px 2px 0 #df852d; /* 右下角 */
}
.subtitle {
width: 100%;
// max-height: 50px;
font-size: 22px;
color: #94590d;
// line-height: 25px;
// .lineClampN(2);
}
}
.icon {
width: 94px;
height: 94px;
left: 27px;
top: 28px;
position: absolute;
border-radius: 50%;
}
.btns {
width: 219px;
height: 112px;
left: 456px;
top: 26px;
position: absolute;
.receive_btn {
width: 131px;
height: 46px;
left: 32px;
top: 18px;
position: absolute;
.sparkBg("TaskPop/receive_btn.png");
}
.complete_btn {
width: 145px;
height: 57px;
left: 22px;
top: 18px;
position: absolute;
.sparkBg("TaskPop/complete_btn.png");
}
.already_btn {
width: 145px;
height: 57px;
left: 22px;
top: 18px;
position: absolute;
.sparkBg("TaskPop/already_btn.png");
}
.share_btn {
width: 157px;
height: 77px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("TaskPop/toShare_btn.png");
}
}
}
}
@keyframes frombottom {
0% {
bottom: -1708px;
}
100% {
bottom: 0px;
}
}
}
src/panels/taskpop/taskpop.tsx 0 → 100644
View file @ 7000fd7e
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './taskpop.less';
import { unwatchPageVisibility, watchPageVisibility } from '@/core/page-visibility-notify.ts';
// import { handleLogClick, handleLogExposure } from '../../../MD';
import { RES_PATH } from '../../../sparkrc';
import { _throttle } from '../../utils/utils';
import { TASK_CODE,CHANNEL_PARAMS } from '../../utils/constants.ts';
import { setCookies } from '../../store/fetcher';
import taskStore from '../../store/task';
import store from '../../store';
// import { LOG_KEY, MatterShareOpt, MatterViewOpt, pageView, sensorLog } from '../../utils/sensors';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { Button } from '@grace/ui';
@observer
class Taskpop extends React.Component {
constructor(props) {
super(props);
}
async componentDidMount() {
window.infoCallBack = taskStore.getInfoCallback;
window.browseCallBack = taskStore.getBrowseCallback;
await taskStore.getTaskList();
watchPageVisibility(this.onPageVisibilityChange);
this.initSensor();
}
initSensor() {
// pageView("b10875", {
// page_name: "赚次数任务页",
// });
// sensorLog(LOG_KEY.exposure,"b7870","d8729");
// sensorLog(LOG_KEY.exposure, "b10875", "d10877", {
// page_name: "赚次数任务页",
// button_name: "领取奖励按钮",
// });
// sensorLog(LOG_KEY.exposure, "b10875", "d10876", {
// page_name: "赚次数任务页",
// button_name: "去完成按钮",
// });
}
componentWillUnmount() {
unwatchPageVisibility(this.onPageVisibilityChange);
}
onPageVisibilityChange = async (visible) => {
if (visible) {
await setCookies();
await taskStore.getTaskList();
}
};
/** 去完成 */
taskDoHandle = _throttle(async (item) => {
const {taskStatus, code} = item || {};
// if(code == TASK_CODE.INVITE){
// MatterShareOpt(LOG_KEY.click,"b7870","d8729")
// }
// sensorLog(LOG_KEY.click, "b10875", "d10876", {
// page_name: "赚次数任务页",
// button_name: "去完成按钮",
// });
await taskStore.doTask(item);
})
/** 领奖 */
taskPrizeHandle = _throttle(async (item) => {
const { code, taskStatus } = item || {};
// sensorLog(LOG_KEY.click, "b10875", "d10877", {
// page_name: "赚次数任务页",
// button_name: "领取奖励按钮",
// });
await taskStore.getTaskPrize(item);
})
close = () => {
// sensorLog(LOG_KEY.click, "b7394", "d7398", {
// page_name: "做任务赚骰子页",
// button_name: "关闭按钮",
// });
ModalCtrl.closeModal()
// store.getHomeInfo()
}
render() {
const {taskList} = taskStore;
return (
<div className="taskpop topPop_move">
<span className="bg"></span>
<Button className="close md36" onClick={this.close}></Button>
<span className="bg_list"></span>
<div className="list">
{
taskList?.length > 0 &&
taskList.map((val, key) => {
// val?.taskStatus == 0 && handleLogExposure(37, 1)
// val?.taskStatus == 1 && handleLogExposure(37, 2)
return (
<div className="item" key={key}>
<span className="bg_item"></span>
<div className="center_info">
<span className="title">{`${val?.title}(${val?.completedSize}/${val?.intervalLimitSize})`}</span>
{/* 「浏览企业人人保」、「浏览畅行保产品计划A赠险」、「浏览畅行保产品计划B赠险」 app端任务描述取描述 后端直接接口处理了 */}
<span className="subtitle textover">{val?.subTitle}</span>
</div>
<img src={val?.icon} className="icon" />
<div className="btns">
{/* 去完成 */}
{
val?.taskStatus == 0 &&
(
CFG.channel != CHANNEL_PARAMS.RB_APP ||
(CFG.channel == CHANNEL_PARAMS.RB_APP && val?.code?.indexOf(TASK_CODE.BROWSE_SPECIAL_SHOW) < 0)
) &&
<Button className="complete_btn" onClick={() => this.taskDoHandle(val)}></Button>
}
{/* 待领取 */}
{val?.taskStatus == 1 &&
<Button className="receive_btn" onClick={() => this.taskPrizeHandle(val)}></Button>}
{/* 已完成 */}
{val?.taskStatus == 2 && <Button className="already_btn"></Button>}
</div>
</div>
)
})
}
</div>
</div>
);
}
}
export default Taskpop;
src/store/fetcher.ts 0 → 100644
View file @ 7000fd7e
import { Toast } from "@grace/ui";
// import { callApi } from "@spark/api-base";
// import { getDomain } from "@spark/dbdomain";
/** 处理cookie */
export const saveCookies = async () => {
// const domain = await getDomain();
// const data = await callApi(`${domain}/autoLogin/tempSaveCookie`);
// console.info(`%c cookieId: ${data}`, "font-size: 20px; color: orange");
// if (!!data) {
// localStorage.setItem("cookieId", data);
// }
};
/** 设置cookies */
export const setCookies = async () => {
// const cookieId = localStorage.getItem("cookieId");
// const domain = await getDomain();
// if (!!cookieId) {
// await callApi(`${domain}/autoLogin/resetCookie?duibaTempCookieId=${cookieId}`);
// localStorage.removeItem("cookieId");
// }
};
src/store/task.ts 0 → 100644
View file @ 7000fd7e
import { makeAutoObservable } from "mobx";
import API from "../api/index";
import store from "./store";
// import modalStore from "./modal";
import { saveCookies, setCookies } from "./fetcher";
// import shareStore from "./share";
// import { handleLogClick } from "../../MD";
import { isWeChat } from "../utils/share";
import { appJump, getUrlParam, windowJumpUrl } from "../utils/utils";
import { CHANNEL_PARAMS, TASK_CODE } from "../utils/constants";
import { Toast } from "@grace/ui";
const taskStore = makeAutoObservable({
/** 当前任务 */
curTask: {},
setCurTask(data) {
this.curTask = data;
},
/** 任务列表 */
taskList: [],
/** 获取任务 */
async getTaskList() {
const { success, data } = await API.getTaskInfo({
// 展示对应任务数据逻辑: 优先取分享人code 其次取url参数code 最终取绑定的业务员code（这个后端会自己取）
code: getUrlParam("ykCode") || getUrlParam("code") || "",
from: CFG.channel,
});
if ((success, data)) {
this.taskList = data?.item || [];
}
},
/** 去完成 */
async doTask(item) {
// jumpUrl 后端已经根据渠道返回对应的链接
const { code, jumpUrl } = item || {};
switch (true) {
//签到
case code == "common_sign":
console.info("签到任务");
await taskStore.complete(item);
break;
//邀请
case code == TASK_CODE.INVITE:
console.info("邀请任务");
// const res = await shareStore.doInvite();
// modalStore.pushPop("Shareposter", { qrCode: res }, true);
break;
//增员介绍 海报or视频
case code?.indexOf("browse_zeng_yuan") > -1:
// if(code == "browser_zeng_yuan_1"){
// modalStore.closePop("Taskpop");
// modalStore.pushPop("LongImgPop", {
// imgUrl: jumpUrl,
// taskSucCb: async () => {
// await this.complete(item);
// },
// noCount: false,
// type: code == "browse_zeng_yuan_1" ? 1 : 2, //1海报 2视频
// });
// }
break;
// 七秒浏览 or 税优关爱百万任务
default:
console.info("七秒浏览任务", CFG.spcCode, CFG.workerCode);
if (isWeChat()) {
// 微信端
await taskStore.complete(item);
setTimeout(() => {
if (CFG.channel == CHANNEL_PARAMS.YK_PUBLIC || CFG.channel == CHANNEL_PARAMS.YK_MINI) {
// 友客渠道 需要单独拼参数 参数key直接配置在链接上 value取code
// btt2_开头的任务 不需要前端拼code
// let _url =
// code.indexOf(TASK_CODE.BROWSE_AREA) >= 0 ? jumpUrl : `${jumpUrl}${CFG.spcCode || CFG.workerCode || ""}`;
// alert(CFG.spcCode || CFG.workerCode || "")
let _url = `${jumpUrl}${CFG.spcCode || CFG.workerCode || ""}`;
console.info("_url", _url);
// alert(_url)
windowJumpUrl(_url);
} else {
windowJumpUrl(jumpUrl);
}
}, 500);
} else {
// app
taskStore.setCurTask(item);
saveCookies();
const thirdBrowseParams = {
hyper_link: jumpUrl,
is_back: "true",
functionType: "1",
};
setTimeout(() => {
appJump("queryUserBindCustomerManger", "", thirdBrowseParams, "infoCallBack");
}, 300);
}
break;
}
},
/** app获取绑定信息回调 */
getInfoCallback(res) {
console.info("info", res, res?.agentCode);
const resObj = res ? JSON.parse(res) : {};
const { curTask } = taskStore;
console.info("curTask", curTask);
if (JSON.stringify(curTask) == "{}") return;
const agentCode = curTask.jumpUrl?.match(/agent_code=(\d+)/)?.[1];
const _jumpUrl = !!agentCode
? curTask.jumpUrl?.replace(agentCode, resObj?.agentCode)
: `${curTask.jumpUrl}&agent_code=${resObj?.agentCode}`;
const thirdBrowseParams = {
hyper_link: _jumpUrl,
is_back: "true",
function_type: "5",
};
console.info(`%c jumpUrl: ${_jumpUrl}`, "font-size: 20px; color: pink");
appJump("Router", "duibaMethod", thirdBrowseParams, "browseCallBack");
},
/** app7s浏览跳转回调 */
async getBrowseCallback(res) {
const { curTask } = taskStore;
console.info("curTask", curTask);
if (JSON.stringify(curTask) == "{}") return;
await setCookies();
console.info("回调数据", res);
let resObj = res ? JSON.parse(res) : {};
if (curTask?.code?.indexOf("browse_shui_yue") > -1) {
//税悦不管时间
const res = await taskStore.complete(curTask);
if (res?.success) {
await taskStore.getTaskList();
}
return;
}
if (resObj.isSuccess == 1 && Number(resObj.time) >= 7) {
const res = await taskStore.complete(curTask, resObj.time);
if (res?.success) {
await taskStore.getTaskList();
}
}
},
/** 完成任务 */
async complete(item, time) {
const { id, code } = item || {};
let params = {
taskCode: code,
};
const res = await API.doCompleted(params);
// await store.getHomeInfo();
if (code.indexOf("browse_") > -1 && isWeChat()) {
setTimeout(() => {
this.getTaskList();
}, 1500);
} else {
this.getTaskList();
}
return res;
},
/** 领奖 */
async getTaskPrize(item) {
const { id, code, prizePendingCode } = item || {};
const { success, data } = await API.sendPrize({
taskId: id,
taskCode: code,
prizePendingCode: prizePendingCode,
});
// await store.getHomeInfo();
if (success && data) {
Toast.show(`抽奖次数+${data?.options?.[0]?.sendCount || 0}`);
await taskStore.getTaskList();
// await store.getHomeInfo();
}
},
});
export default taskStore;
src/swiper-bundle.css 0 → 100644
View file @ 7000fd7e
This diff is collapsed.
src/utils/constants.ts 0 → 100644
View file @ 7000fd7e
/*
* @Author: super
* @Date: 2021-01-20 14:08:27
* @LastEditTime: 2021-01-20 14:53:39
* @LastEditors: super
* @Description:
*/
import { isMiniprogram, isIos } from "./utils";
/** 渠道参数 */
export const CHANNEL_PARAMS = {
/** 人保寿险管家app */
RB_APP: 1,
/** 人保寿险企业家助手微信公众号 */
RB_WX_PUBLIC: 2,
/** 友客微信公众号 */
YK_PUBLIC: 3,
/** 人保寿险E服务公众号h5 */
E_MINI: 4,
/** 友客小程序 */
YK_MINI: 5,
/** e通app */
ET_APP: 6,
/** 微通（企业微信） */
WT_YK_PUBLIC: 7,
/** 友客获客公众号 */
YKHK_PUBLIC: 8,
};
/* 电话号码验证规则 **/
export const REG_TEL = /^1[0-9]{10}$/;
/**
* 任务code
* 3. 保豆签到任务，code为：sign；
* 4. 展示渠道不做过滤展示，可直接在展示渠道完成的浏览任务，如：浏览美满赢家、浏览康宁嘉倍、浏览运动意外伤害保险 等，code以：btt1_ 开头，示例：btt1_1、btt1_2、btt1_zx1
* 5. 友客端需要做特殊展示限制的浏览任务，如：浏览关爱百万医疗、浏览关爱百万2019医疗保险组合、乐业福 等，code以：btt2_ 开头，示例：btt2_1、btt2_2、btt2_3；产品组合编码配置在任务描述里面，示例：1111、2222；
* 6. app端展示，但不可完成的浏览任务，如：浏览企业人人保、浏览畅行保产品计划A赠险、浏览畅行保产品计划B赠险 等，code以：btt3_ 开头，示例：btt3_1、btt3_zx2、btt3_zx3；
* 7. 赠险浏览任务，不需要浏览7s，code包含zx；
*/
export const TASK_CODE = {
/** 签到任务 */
THIRD_SIGN: "common_sign",
/** 答题任务 */
ANSRWER: "common_answer",
/** 分享任务 */
SHARE: "share",
/** 留资任务 */
FILL: "common_fill",
/** 邀请任务 */
INVITE: "common_invite",
/** 正常展示的浏览任务：app内有秒限制，根据端内跳转回调算完成；友客端需要链接后拼code值 */
BROWSE_COMMON: "browse_",
/** 友客端需要做销售限制特殊展示的浏览任务：app内有秒限制，根据端内跳转回调算完成；友客端不需要链接后拼code值 */
BROWSE_AREA: "btt2_",
/** 展示特殊处理浏览任务：app端不展示去完成按钮 */
BROWSE_SPECIAL_SHOW: "btt3_",
/** 浏览赠险任务（会在bttx_后面追加_zx进行区分）：app内无秒限制，点击即完成；友客端需要链接后拼code值 */
BROWSE_INSURE: "_zx",
};
/* 表情包 正则 **/
export const emojiReg = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g;
/* 特殊字符 正则 **/
export const specialStrReg =
/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、「」]/g;
export const platFormName = {
/** 人保寿险管家app */
1: "人保寿险管家app",
/** 人保寿险企业家助手微信公众号 */
2: "人保寿险E服务",
/** 友客微信公众号 */
3: "友客微信公众号",
/** 人保寿险E服务公众号h5 */
4: "e服务公众号",
/** 友客小程序 */
5: "人保友客",
/** e通app */
6: "人保e通-寿险板块",
/** 微通（企业微信） */
7: "微通（企业微信）",
/** 友客获客公众号 */
8: isMiniprogram() ? "人保友客" : "友客微信公众号",
};
export const platformType = {
/** 人保寿险管家app */
1: isIos() ? "iOS" : "Android",
/** 人保寿险企业家助手微信公众号 */
2: "微信公众号",
/** 友客微信公众号 */
3: "微信公众号",
/** 人保寿险E服务公众号h5 */
4: "微信公众号",
/** 友客小程序 */
5: "微信小程序",
/** e通app */
6: isIos() ? "iOS" : "Android",
/** 微通（企业微信） */
7: "微信公众号",
/** 友客获客公众号 */
8: isMiniprogram() ? "微信小程序" : "微信公众号",
};
export const extranceName = {
1: "人保寿险管家app",
2: "人保寿险企业家助手微信公众号",
3: "友客微信公众号",
4: "e服务公众号",
5: "人保友客",
6: "人保e通-寿险板块",
7: "微通（企业微信）",
8: "人保友客",
};
src/utils/share.ts
View file @ 7000fd7e
/** 判断微信环境 */
export function isWeChat() {
if (typeof window === 'undefined') return false
const ua = window.navigator.userAgent.toLowerCase()
return ua.includes('micromessenger')
}
......
src/utils/utils.ts
View file @ 7000fd7e
...@@ -439,4 +439,41 @@ export function prefixInteger(num: number, length: number) { ...@@ -439,4 +439,41 @@ export function prefixInteger(num: number, length: number) {
export const miniGoUrl = (url) => { export const miniGoUrl = (url) => {
// @ts-ignore // @ts-ignore
wx.miniProgram.navigateTo({ url: url }); wx.miniProgram.navigateTo({ url: url });
} }
\ No newline at end of file
/** 判断小程序 */
export const isMiniprogram = () => {
const ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("miniprogram") > -1) return true
return false
}
/**
* 判断是否为ios系统
*/
export function isIos() {
return navigator.userAgent.match(/iphone|ipod|ipad/gi)
}
/* 电话号码验证规则 **/
export const REG_TEL = /^1[0-9]{10}$/;
/** 端内跳转 */
export const appJump = (module, method, params, callback) => {
window.PICCLifeJsBrage.callNative({
module: module,
method: method,
params: JSON.stringify(params),
callback: callback,
});
}
/** 跳转 */
export const windowJumpUrl = (url) => {
url && (location.href = url);
};
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