diff --git a/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.less b/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.less new file mode 100644 index 0000000..ee3622a --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.less @@ -0,0 +1,162 @@ +.step-popup-content-box { + margin: 0; + + .absolutely-img { + width: 100%; + height: 600rpx; + background-color: #eee; + } +} + +.step-absolutely { + width: 600rpx; + height: 720rpx; + text-align: left; + margin: 0 auto; +} + +.step-img { + display: block; + width: 600rpx; + height: 600rpx; + border-radius: 30rpx; +} + +.common-popup-title-WE { + font-size: 36rpx; + font-family: PingFang SC; + font-weight: bold; + color: #030000; + text-align: center; + + +} + +.whitePop { + background-color: #fff !important; + color: #000 !important; +} + +.Newpop { + .center { + // background-color: red; + height: 720rpx; + + .page { + color: #dedede; + margin-bottom: 10rpx; + font-size: 25rpx; + + } + .titleSlogan{ + font-size: 30rpx; + font-family: 700; + margin-bottom: 17rpx; + } + .img { + width: 100%; + height: 500rpx; + background-color: #666; + } + + .text { + margin: 20rpx; + font-size: 23rpx; + font-weight: 700; + background-color: #f8f8f8; + // border: 1rpx solid; + border-radius: 45rpx; + padding: 5rpx 24rpx; + } + + .black { + color: #000; + display: inline-block; + } + } +} + +.site-close { + position: absolute; + right: 16rpx; + top: 16rpx; + color: #000; + font-size: 36rpx; + z-index: 100009; + background-color: transparent; + 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; + } +} \ No newline at end of file diff --git a/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.tsx b/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.tsx new file mode 100644 index 0000000..82f7d41 --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We.tsx @@ -0,0 +1,199 @@ +import classnames from "classnames"; +import { Component } from "react"; + +import { + Block, + View, + Image, + Text, + Button, + PageMeta, + ScrollView, +} from "@tarojs/components"; + +import { Popup, Checkbox, CheckboxGroup, Steps } from "@antmjs/vantui"; + + +import "@/components/popup/popup.less"; +import "@/components/popup/popup-alert.less"; +import "./popup-We.less" + +import { go } from "@/utils/traoAPI"; + +/** props + * isLarge 是否大尺寸 + * isShow 是否显示 + * isClose 右上角关闭图标 + * title 弹窗标题 + * content 弹窗内容 + * confirmButtonText 确定按钮 + * textAlgin 文本对齐 left right center + * type: 1注册 + * @confirm 关闭回调 + */ + +class PopupWe extends Component { + constructor(props) { + super(props); + this.state = { + name: "确认组件", + // Page:1, + type: "1", + // titleSlogan:'请选择额头区域护理目标' + }; + } + + async onLoad() { + console.log(this.props, '111111111111'); + + } + componentDidMount() { } + + componentWillUnmount() { } + + componentDidShow() { } + + componentDidHide() { } + + async initData() { } + + onClose = () => { + this.props.close(); + }; + + onConfirm = () => { + + }; + + onClickStop = (e) => { + e.stopPropagation(); + }; + + onTouchMove = () => { + return true; + }; + html1_3 = () => { + return 22222 + } + render() { + let { + title, + + content, + confirmButtonText, + textAlgin, + isShow, + isClose, + isLarge, + values, + myClassName, + zIndex, + Page, + type, + handlepopupCheck, + WeCurrent, + PreviousStep, + NextStep + } = this.props; + if (!zIndex) zIndex = 10001; + return ( + + + + + + {title && ( + + {title} + + )} + + + + 0{Page}/06 + + {WeCurrent[Page - 1].titleSlogan} + {Page > 3 ? + 22222 + + + + : + + 111111 + + + + + { + console.info(e, WeCurrent, Page) + handlepopupCheck(e) + + }} + > + {WeCurrent[Page - 1].text1} + {WeCurrent[Page - 1].text2} + + + + } + + + + + + {Page !== 1 ? : null} + + + + + + + + ); + } +} +export default PopupWe; \ No newline at end of file diff --git a/src/pages/index/index.less b/src/pages/index/index.less index aa3df80..aefd738 100644 --- a/src/pages/index/index.less +++ b/src/pages/index/index.less @@ -13,7 +13,7 @@ page { height: 0; color: transparent; } - + .message { position: relative; width: 40rpx; diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index da4558b..13ebeab 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -40,6 +40,10 @@ import Navbar from "@/components/navbar/navbar"; import ConnectionBluetoot from "@/components/bluetoot/connection"; import UpdateIotWL200 from "@/components/bluetoot/update-wl200/index"; import UpdateIotFR200 from "@/components/bluetoot/update-fr200/index"; +// import PopupWe from "@/moduleIOT/pages/iotCarePlan/components/popup-We/popup-We"; +import PopupWe from "../../moduleIOT/pages/iotCarePlan/components/popup-We/popup-We"; + + /** 自定义组件 **/ import { @@ -67,13 +71,53 @@ import { // const log = require("@/utils/log"); class Index extends Component { + onModeLockClose: any; constructor(props) { super(props); this.state = { + isDisabledClickAddDevice: false, // 是否禁止点击添加设备 isCommonError: false, // 是否显示通用错误提示 commonErrorText: [], // 通用错误提示 - + WeCurrent: [ + { + values:[], + text1:' 强效提拉额肌,淡化抬头纹', + text2:'密集水光灌注,胶原直达肌底', + titleSlogan:'请选择额头区域的护理目标(可多选)' + }, + { + values:[], + text1:' 强效提拉额肌,淡化抬头纹', + text2:'密集水光灌注,胶原直达肌底', + titleSlogan:'请选择脸颊区域的护理目标(可多选)' + }, + { + values:[], + text1:' 强效提拉轮廓,淡化木偶纹', + text2:'密集水光灌注,胶原直达肌底', + titleSlogan:'请选择下颌线区域的护理目标(可多选)' + }, + { + values:[], + text1:' 444', + text2:'444', + titleSlogan:'请选择额头区域的护理目标(可多选)' + }, + { + values:[], + text1:' 55555', + text2:'55555', + titleSlogan:'请选择额头区域的护理目标(可多选)' + }, + { + values:[], + text1:' 6666', + text2:'66666', + titleSlogan:'请选择额头区域的护理目标(可多选)' + } + ], + WeCurrentPage: 4, showEquipment: false, // 扫码绑定设备弹窗 isRegisterBoolean: false, // 是否已登录 isShowPrivacyPopup: false, @@ -84,6 +128,7 @@ class Index extends Component { userinfo: { mobile: Taro.getStorageSync("mobile"), }, + isModeLockWE: false, // 膜布列表 MembraneClothList: [ { @@ -207,7 +252,7 @@ class Index extends Component { } } - componentDidMount() {} + componentDidMount() { } componentWillUnmount() { // 页面卸载监听 @@ -281,7 +326,7 @@ class Index extends Component { this.isSancQrcodeEnter(); } }, - fail: () => {}, + fail: () => { }, complete: () => { // 授权完成运行页面初始化 }, @@ -538,8 +583,45 @@ class Index extends Component { this.setState({ isShowSiteSwiper: false }); }; - bannerSwiperchange() {} + bannerSwiperchange() { } + // 模拟弹窗 + handlepopup = () => { + console.log('当前的state:', this.state,); + let isModeLockWE = this.state.isModeLockWE; + console.log('进入模拟弹窗', isModeLockWE); + // 其他操作... + this.setState({ isModeLockWE: !isModeLockWE }) + } + // 复选框 + handlepopupCheck = (e) => { + let WeCurrent =this.state.WeCurrent + let WeCurrentPage =this.state.WeCurrentPage + WeCurrent[WeCurrentPage -1].values=[...e.detail] + this.setState({ WeCurrent }) + } + // 上一步 + PreviousStep = () => { + console.log(1111111); + let WeCurrentPage =this.state.WeCurrentPage + if(WeCurrentPage !== 1){ + WeCurrentPage=WeCurrentPage-1 + this.setState({ + WeCurrentPage + }) + } + + } + // 下一步 + NextStep = () => { + let WeCurrentPage =this.state.WeCurrentPage + if(WeCurrentPage !== 6){ + WeCurrentPage=WeCurrentPage+1 + this.setState({ + WeCurrentPage + }) + } + } gobanner(item) { // 跳转类型:0无跳转、1跳转内部链接、3跳转外部链接、4跳转小程序、5导向视频号、6导向视频号直播间', /** @@ -1133,6 +1215,7 @@ class Index extends Component { show, isCommonError, commonErrorText, + isModeLockWE, MembraneClothList, calendarComplete, calendarInComplete, @@ -1143,7 +1226,8 @@ class Index extends Component { isNotRegister, isShowSiteSwiper, isDev, - + WeCurrent, + WeCurrentPage, bannerList, bannerCurrent, // 绑定弹窗 @@ -1428,6 +1512,7 @@ class Index extends Component { 前往护理 + { )} + {/* */} {instrumentList.length === 0 && ( @@ -1531,6 +1617,20 @@ class Index extends Component { + {/* */} {/* { return ( + { // scrollIntoView={"products_item_" + curIndex} style={{ top: height + 110 + "rpx", - position: "sticky", + position: "fixed", }} >