小程序隐私授权查询、规范弹窗、规范导航栏
parent
0c10eb610c
commit
efe3f31f6c
@ -0,0 +1,59 @@
|
|||||||
|
.alert-box {
|
||||||
|
width: 650rpx;
|
||||||
|
// height: 800rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
padding-bottom: 80rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.alert-popup-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-popup-content-box {
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-popup-content {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-popup-content.is-alert {
|
||||||
|
color: #41a9fc;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-popup-content.is-last {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-popup-btns {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 76rpx;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-popup-btn {
|
||||||
|
width: 480rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
border: 1rpx solid #000;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .alert-popup-btn:first-child {
|
||||||
|
// margin-left: 22rpx;
|
||||||
|
// background-color: transparent;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .confirm-popup-btn:last-child {
|
||||||
|
// color: #fff;
|
||||||
|
// background-color: #000;
|
||||||
|
// }
|
||||||
@ -0,0 +1,101 @@
|
|||||||
|
import classnames from "classnames";
|
||||||
|
import { Component } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Block,
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
Image,
|
||||||
|
Input,
|
||||||
|
Button,
|
||||||
|
PageMeta,
|
||||||
|
} from "@tarojs/components";
|
||||||
|
|
||||||
|
import { Popup } from "@antmjs/vantui";
|
||||||
|
|
||||||
|
import "@antmjs/vantui/lib/popup/index.less";
|
||||||
|
import "@antmjs/vantui/lib/transition/index.less";
|
||||||
|
import "@antmjs/vantui/lib/overlay/index.less";
|
||||||
|
|
||||||
|
import "./popup-alert.less";
|
||||||
|
|
||||||
|
import { go } from "../../utils/traoAPI";
|
||||||
|
|
||||||
|
/*** props
|
||||||
|
* isShow 是否显示
|
||||||
|
* title 弹窗标题
|
||||||
|
* content 弹窗内容
|
||||||
|
* confirmButtonText 确定按钮
|
||||||
|
* textAlgin 文本对齐 left right center
|
||||||
|
* type: 1注册
|
||||||
|
* @confirm 关闭回调
|
||||||
|
* ***/
|
||||||
|
export default class PopupAlert extends Component<any, any> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
name: "确认组件",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async onLoad() {}
|
||||||
|
componentDidMount() {}
|
||||||
|
|
||||||
|
componentWillUnmount() {}
|
||||||
|
|
||||||
|
componentDidShow() {}
|
||||||
|
|
||||||
|
componentDidHide() {}
|
||||||
|
|
||||||
|
async initData() {}
|
||||||
|
|
||||||
|
onConfirm = () => {
|
||||||
|
let { type } = this.props;
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case "1":
|
||||||
|
go("/pages/register/register");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.props.confirm();
|
||||||
|
};
|
||||||
|
|
||||||
|
onClickStop = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let { title, content, confirmButtonText, textAlgin } = this.props;
|
||||||
|
return (
|
||||||
|
<Block>
|
||||||
|
<PageMeta pageStyle={this.props.isShow ? "overflow: hidden;" : ""} />
|
||||||
|
<Popup
|
||||||
|
show={this.props.isShow}
|
||||||
|
round
|
||||||
|
overlayStyle="width: 100vw;padding: 0;"
|
||||||
|
onClick={this.onClickStop}
|
||||||
|
>
|
||||||
|
<View className="alert-box">
|
||||||
|
<View className="alert-popup-title">{title}</View>
|
||||||
|
<View className="alert-popup-content-box">
|
||||||
|
<View
|
||||||
|
className={classnames("alert-popup-content", {
|
||||||
|
"text-left": textAlgin === "left",
|
||||||
|
"text-right": textAlgin === "right",
|
||||||
|
"text-center": textAlgin === "center",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="alert-popup-btns">
|
||||||
|
<Button className="alert-popup-btn" onClick={this.onConfirm}>
|
||||||
|
{confirmButtonText}
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
</Block>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
.confirm-box {
|
||||||
|
width: 650rpx;
|
||||||
|
// height: 800rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
padding-bottom: 80rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.confirm-popup-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-popup-content-box {
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-popup-content {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-popup-content.is-confirm {
|
||||||
|
color: #41a9fc;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-popup-content.is-last {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-popup-btns {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 76rpx;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-popup-btn {
|
||||||
|
width: 240rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
border: 1rpx solid #000;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-popup-btn:first-child {
|
||||||
|
margin-left: 22rpx;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-popup-btn:last-child {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
import classnames from "classnames";
|
||||||
|
import { Component } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Block,
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
Image,
|
||||||
|
Input,
|
||||||
|
Button,
|
||||||
|
PageMeta,
|
||||||
|
} from "@tarojs/components";
|
||||||
|
|
||||||
|
import { Popup } from "@antmjs/vantui";
|
||||||
|
// import "@antmjs/vantui/lib/index.less";
|
||||||
|
|
||||||
|
import "@antmjs/vantui/lib/popup/index.less";
|
||||||
|
import "@antmjs/vantui/lib/transition/index.less";
|
||||||
|
import "@antmjs/vantui/lib/overlay/index.less";
|
||||||
|
|
||||||
|
import "./popup-confirm.less";
|
||||||
|
|
||||||
|
/*** props
|
||||||
|
* isShow 是否显示
|
||||||
|
* title 弹窗标题
|
||||||
|
* content 弹窗内容
|
||||||
|
* cancelButtonText 取消按钮
|
||||||
|
* confirmButtonText 确定按钮
|
||||||
|
* textAlgin 文本对齐 left right center
|
||||||
|
* type: 1注册
|
||||||
|
* @confirm 关闭回调
|
||||||
|
* ***/
|
||||||
|
export default class PopupConfirm extends Component<any, any> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
name: "确认组件",
|
||||||
|
// isShowconfirmPopup: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async onLoad() {}
|
||||||
|
componentDidMount() {}
|
||||||
|
|
||||||
|
componentWillUnmount() {}
|
||||||
|
|
||||||
|
componentDidShow() {
|
||||||
|
// 是否已授权隐私
|
||||||
|
// if (Taro.getStorageSync("isconfirmPopup") !== "true") {
|
||||||
|
// // this.setState({
|
||||||
|
// // showconfirmPopup: true,
|
||||||
|
// // });
|
||||||
|
// this.props.closeconfirm();
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidHide() {}
|
||||||
|
|
||||||
|
async initData() {}
|
||||||
|
|
||||||
|
onClose = () => {
|
||||||
|
this.props.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
onConfirm = () => {
|
||||||
|
this.props.confirm();
|
||||||
|
};
|
||||||
|
|
||||||
|
onClickStop = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let { title, content, cancelButtonText, confirmButtonText, textAlgin } =
|
||||||
|
this.props;
|
||||||
|
return (
|
||||||
|
<Block>
|
||||||
|
<PageMeta pageStyle={this.props.isShow ? "overflow: hidden;" : ""} />
|
||||||
|
<Popup
|
||||||
|
show={this.props.isShow}
|
||||||
|
round
|
||||||
|
overlayStyle="width: 100vw;padding: 0;"
|
||||||
|
// onClose={this.onClose}
|
||||||
|
onClick={this.onClickStop}
|
||||||
|
>
|
||||||
|
<View className="confirm-box">
|
||||||
|
<View className="confirm-popup-title">{title}</View>
|
||||||
|
<View className="confirm-popup-content-box">
|
||||||
|
<View
|
||||||
|
className={classnames("alert-popup-content", {
|
||||||
|
"text-left": textAlgin === "left",
|
||||||
|
"text-right": textAlgin === "right",
|
||||||
|
"text-center": textAlgin === "center",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className="confirm-popup-btns">
|
||||||
|
<Button className="confirm-popup-btn" onClick={this.onClose}>
|
||||||
|
{cancelButtonText}
|
||||||
|
</Button>
|
||||||
|
<Button className="confirm-popup-btn" onClick={this.onConfirm}>
|
||||||
|
{confirmButtonText}
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
</Block>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,3 +1,3 @@
|
|||||||
export default definePageConfig({
|
export default definePageConfig({
|
||||||
navigationBarTitleText: "模板页",
|
navigationBarTitleText: "用户信息",
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue