开始连接调试
blak-kong
2 years ago
parent
bd287af666
commit
298a7388b2
@ -0,0 +1,98 @@
|
|||||||
|
.step-popup-content-box {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.step-absolutely {
|
||||||
|
width: 600rpx;
|
||||||
|
height: 720rpx;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.step-img {
|
||||||
|
display: block;
|
||||||
|
width: 600rpx;
|
||||||
|
height: 600rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
// .van-popup {
|
||||||
|
// background-color: transparent;
|
||||||
|
// }
|
||||||
|
.site-close {
|
||||||
|
position: absolute;
|
||||||
|
right: 36rpx;
|
||||||
|
top: 36rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36rpx;
|
||||||
|
z-index: 100009;
|
||||||
|
background-color: #ababab;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 8rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-popup-btn {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100rpx;
|
||||||
|
left: calc(50% - 120rpx);
|
||||||
|
width: 240rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
border: 1rpx solid #000;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-tips-common-box {
|
||||||
|
padding: 50rpx 35rpx 74rpx 35rpx;
|
||||||
|
.tips-message {
|
||||||
|
margin-top: 70rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #030000;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-btn-one {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 60rpx;
|
||||||
|
justify-content: center;
|
||||||
|
.popup-btn {
|
||||||
|
width: 270rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
border: 1rpx solid #000;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #000;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setp-footer-btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
height: 30rpx;
|
||||||
|
// padding: 10rpx;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
.checked {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 26rpx;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,214 @@
|
|||||||
|
import classnames from "classnames";
|
||||||
|
import Taro from "@tarojs/taro";
|
||||||
|
import { Component } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Block,
|
||||||
|
View,
|
||||||
|
Image,
|
||||||
|
Text,
|
||||||
|
Button,
|
||||||
|
PageMeta,
|
||||||
|
Swiper,
|
||||||
|
SwiperItem,
|
||||||
|
} from "@tarojs/components";
|
||||||
|
|
||||||
|
import { Popup } from "@antmjs/vantui";
|
||||||
|
|
||||||
|
import "./popup.less";
|
||||||
|
import "./popup-step-tips.less";
|
||||||
|
import "./fade.css";
|
||||||
|
|
||||||
|
import { go } from "../../utils/traoAPI";
|
||||||
|
|
||||||
|
/** props
|
||||||
|
* isLarge 是否大尺寸
|
||||||
|
* isShow 是否显示
|
||||||
|
* data 数据
|
||||||
|
* title 动态标题
|
||||||
|
* confirmButtonText 确定关闭按钮
|
||||||
|
* @confirm 关闭回调
|
||||||
|
* ***/
|
||||||
|
export default class PopupStepTips extends Component<any, any> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
name: "步骤介绍弹窗", // 当前IOT使用
|
||||||
|
current: 0,
|
||||||
|
isLocal: false, // 是否缓存关闭，以后不再显示准备步骤
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async onLoad() {}
|
||||||
|
componentDidMount() {}
|
||||||
|
|
||||||
|
componentWillUnmount() {}
|
||||||
|
|
||||||
|
componentDidShow() {}
|
||||||
|
|
||||||
|
componentDidHide() {}
|
||||||
|
|
||||||
|
initData = () => {
|
||||||
|
if (this.props.siteData) {
|
||||||
|
let arr = JSON.parse(JSON.stringify(this.props.siteData));
|
||||||
|
this.setState({ siteList: arr });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onClose = () => {
|
||||||
|
let { isLocal } = this.state;
|
||||||
|
this.props.close({ isLocal });
|
||||||
|
};
|
||||||
|
|
||||||
|
onClickStop = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
// onChange(event) {
|
||||||
|
// const current = event.detail.current;
|
||||||
|
// const { current: curCurrent } = this.state;
|
||||||
|
// const { siteData } = this.props;
|
||||||
|
// if (curCurrent + 2 === siteData.length && current + 1 === siteData.length) {
|
||||||
|
// this.setState({ toRight: true });
|
||||||
|
// }
|
||||||
|
// this.setState({ current });
|
||||||
|
// }
|
||||||
|
|
||||||
|
onPrev = async () => {
|
||||||
|
let { current } = this.state;
|
||||||
|
this.setState({ current: current - 1 });
|
||||||
|
};
|
||||||
|
onNext = async () => {
|
||||||
|
let { current } = this.state;
|
||||||
|
|
||||||
|
if (current === this.props.data.length) {
|
||||||
|
this.onClose();
|
||||||
|
} else {
|
||||||
|
this.setState({ current: current + 1 });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onChangeLocal = () => {
|
||||||
|
let { isLocal } = this.state;
|
||||||
|
this.setState({ isLocal: !isLocal });
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let { isShow, data, isLarge, title, content, confirmButtonText } =
|
||||||
|
this.props;
|
||||||
|
let { current, isLocal } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Block>
|
||||||
|
<PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
|
||||||
|
<Popup
|
||||||
|
style="background-color: #fff;"
|
||||||
|
show={isShow}
|
||||||
|
closeOnClickOverlay={false}
|
||||||
|
round
|
||||||
|
overlayStyle="width: 100vw;padding: 0;"
|
||||||
|
onClick={this.onClickStop}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
className="at-icon at-icon-close site-close"
|
||||||
|
onClick={this.onClose}
|
||||||
|
></View>
|
||||||
|
<View
|
||||||
|
className={classnames("common-box", "step-tips-common-box", {
|
||||||
|
"common-large": isLarge,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
className={classnames("common-popup-title", {
|
||||||
|
"margin-samll": isLarge,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{data[current].openTitle}
|
||||||
|
</View>
|
||||||
|
{/* {title && (
|
||||||
|
<View
|
||||||
|
className={classnames("common-popup-title", {
|
||||||
|
"margin-samll": isLarge,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</View>
|
||||||
|
)} */}
|
||||||
|
<View className="step-popup-content-box">
|
||||||
|
<Swiper
|
||||||
|
className="step-absolutely"
|
||||||
|
current={current}
|
||||||
|
duration={800}
|
||||||
|
indicatorDots={false}
|
||||||
|
indicatorColor="#999"
|
||||||
|
indicatorActiveColor="#333"
|
||||||
|
disableTouch={true} // 禁止滑动
|
||||||
|
>
|
||||||
|
{data.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<SwiperItem className="absolutely" key={"swiper_" + index}>
|
||||||
|
<View className="step-img">
|
||||||
|
<Image
|
||||||
|
className="cover"
|
||||||
|
src={item.openSourceUrl}
|
||||||
|
mode="aspectFit"
|
||||||
|
></Image>
|
||||||
|
</View>
|
||||||
|
<View className="tips-message">{item.openContent}</View>
|
||||||
|
</SwiperItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Swiper>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View>
|
||||||
|
{data.length === 1 && (
|
||||||
|
<View className="popup-btn-one">
|
||||||
|
<Button className="popup-btn" onClick={this.onClose}>
|
||||||
|
{confirmButtonText}
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
{data.length > 1 && current === 0 && (
|
||||||
|
<View className="popup-btn-one">
|
||||||
|
<Button className="popup-btn" onClick={this.onPrev}>
|
||||||
|
下一步
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
{data.length > 1 && (
|
||||||
|
<View className="common-popup-btns">
|
||||||
|
<Button className="common-popup-btn2" onClick={this.onPrev}>
|
||||||
|
{current > 0 && current < data.length - 1 && "上一步"}
|
||||||
|
</Button>
|
||||||
|
<Button className="common-popup-btn2" onClick={this.onNext}>
|
||||||
|
{current > 0 && current < data.length - 1 && "下一步"}
|
||||||
|
{current > 0 &&
|
||||||
|
current === data.length - 1 &&
|
||||||
|
confirmButtonText}
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="setp-footer-btn" onClick={this.onChangeLocal}>
|
||||||
|
{isLocal ? (
|
||||||
|
<Image
|
||||||
|
className="checked"
|
||||||
|
src={require("../../img/welcome/checked.png")}
|
||||||
|
></Image>
|
||||||
|
) : (
|
||||||
|
<Image
|
||||||
|
className="checked"
|
||||||
|
src={require("../../img/welcome/no-checked.png")}
|
||||||
|
></Image>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Text className="text">以后不再提示准备步骤</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
</Block>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 449 B |
Loading…
Reference in New Issue