弹框页面

src/views/strategyversion/index.vue

@@ -14,84 +14,270 @@
           <van-swipe-item>内容 3</van-swipe-item>
         </van-swipe>
       </van-notice-bar> -->
-      <div class="user" v-for="(item,index) in getList" :key="index">
-        <div class="sre_p" @click="tab_let(item)">
-          <div class="uset_a">
-            <span>{{item.productName}}</span>
-            <span class="num">{{item.numberSubscriptions}}⼈订阅</span>
+      <div class="user" v-for="(item, index) in getList" :key="index">
+        <div class="sre_p">
+          <div class="uset_a" @click="tab_let(item)">
+            <span>{{ item.productName }}</span>
+            <span class="num">{{ item.numberSubscriptions }}⼈订阅</span>
           </div>
 
           <div>
-            <span>综合胜率: <span>{{item.successPercent}}</span></span>
-            <span style="margin-left:14px">平均涨幅: <span>{{item.avgIncrease}}</span></span>
+            <span
+              >综合胜率: <span>{{ item.successPercent }}</span></span
+            >
+            <span style="margin-left: 14px"
+              >平均涨幅: <span>{{ item.avgIncrease }}</span></span
+            >
           </div>
-          <div class="read">解锁订阅</div>
+          <div class="read" @click="showPopup()">解锁订阅</div>
         </div>
 
         <div class="cont">
-          <div class="tab_p" v-for="(i,index) in item.pcSmartStockInfoVOList" :key="index">
-            <img src="../../assets/jian.png" alt="" class="tab_img">
-            <div class="name_u">{{i.code}}</div>
-            <div class="user_t">{{i.winRate}}</div>
+          <div
+            class="tab_p"
+            v-for="(i, index) in item.pcSmartStockInfoVOList"
+            :key="index"
+          >
+            <img src="../../assets/jian.png" alt="" class="tab_img" />
+            <div class="name_u">{{ i.code }}</div>
+            <div class="user_t">{{ i.winRate }}</div>
             <div class="user_se">⼊选最⾼涨幅</div>
           </div>
-       
-          
         </div>
       </div>
-      
+      <div>
+        <!-- 弹出层 -->
+        <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
+          <div class="popup-title">
+            <span style="font-size: 0.5rem; font-weight: bold">热点精选</span
+            ><span style="font-size: 0.4rem; color: gray; margin-left: 0.3rem"
+              >智能策略</span
+            >
+            <span style="font-size: 0.3rem; color: gray; display: block"
+              >热点股票强度深度建模后优选好股票</span
+            >
+          </div>
+          <div class="popup-title" style="margin-bottom: 0.5rem">
+            <span style="font-size: 0.4rem">产品周期</span>
+          </div>
+          <div
+            style="font-size: 0.3rem; height: 3rem; width: 90%; margin: 0 auto"
+          >
+            <van-radio-group @change="clickBox" v-model="radio2">
+              <div
+                class="checkBox"
+                v-for="(i, index) in checkList"
+                :key="index"
+              >
+                <van-radio
+                  :name="i.id"
+                  icon-size="12px"
+                  checked-color="#ee0a24"
+                  >{{ i.name }}</van-radio
+                ><span class="usePoint">{{ i.point }}</span
+                ><span class="usePointTwo">积分</span>
+              </div>
+            </van-radio-group>
+          </div>
+          <div class="checkBoxTwo" style="margin-bottom: 0.5rem; color: black">
+            <span style="font-size: 0.4rem">当前积分</span
+            ><span class="usePointThree">{{ morePoint }}</span
+            ><span class="usePointFour">积分</span>
+          </div>
+          <div v-if="ifexchange" class="exchange">
+            <span @click="sure">立即兑换1 </span>
+          </div>
+          <div v-if="!ifexchange" class="exchangeTwo">
+            <span>立即兑换</span>
+          </div>
+        </van-popup>
+        <!-- 弹出层  声明-->
+        <van-popup v-model="po_show" position="bottom" :style="{}">
+          <div class="b_user" v-if="is_showlive">
+            <div class="text_p">免责声明</div>
+            <div class="user_p">
+              <div
+                ref="scrollContainer"
+                style="overflow-y: auto; height: 200px; position: relative"
+                @scroll="checkScroll"
+              >
+                <!-- 这里是长内容 -->
+                <p>
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                  这是第哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈行内容
+                </p>
+              </div>
+              <div>
+                <!-- 点击 -->
+                <button
+                  type="default"
+                  v-if="isshowButton"
+                  @click="is_scrollToTop"
+                  class="bu_p"
+                >
+                  下滑至底部并同意
+                </button>
+                <button
+                  type="default"
+                  v-if="showButton"
+                  @click="scrollToTop"
+                  class="con_P"
+                >
+                  我已知晓并同意
+                </button>
+              </div>
+            </div>
+          </div>
+        </van-popup>
+        <div></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-// import {getListAPI} from '../../api/test.js'
- 
-
 export default {
   data() {
     return {
-      getList:[],
-      pageNo:1,
-      pageSize:10,
-      user_pro:[],
-       detInfo : {}
+      getList: [],
+      pageNo: 1,
+      pageSize: 10,
+      user_pro: [],
+      detInfo: {},
+      ifexchange: true,
+      show: false,
+      tableName: "总收益",
+      radio2: "1",
+      morePoint: 12345,
+      checkList: [
+        {
+          id: "1",
+          name: "1个月",
+          point: "1222",
+        },
+        {
+          id: "2",
+          name: "3个月",
+          point: "1222211",
+        },
+        {
+          id: "3",
+          name: "6个月",
+          point: "1222",
+        },
+        {
+          id: "4",
+          name: "12个月",
+          point: "1222",
+        },
+      ],
+      showButton: false,
+      isshowButton: true,
+      scrollThreshold: 100, // 滚动阈值
+      is_showlive: false,
+      po_show: false,
+       
     };
   },
   created() {},
   mounted() {
-    this.getsent()
+    this.getsent();
+    this.checkScroll();
+    if (this.morePoint >= this.checkList[0].point) {
+      this.ifexchange = true;
+    } else {
+      this.ifexchange = false;
+    }
   },
 
   methods: {
-     getsent(){
-      let params={
-       
-      }
-         this.server.getstrge(params).then(res=>{
-           if(res.data.code == 200){
+    getsent() {
+      let params = {};
+      this.server.getstrge(params).then((res) => {
+        if (res.data.code == 200) {
           this.getList = res.data.data.list;
           this.user_pro = res.data.data.pcSmartStockInfoVOList;
-                  console.log(res) 
+          console.log(res);
         }
-          
-            })
-           
+      });
     },
     tab_let(item) {
-       const detInfo = JSON.stringify(item)
-       console.log(detInfo,'aa')
-       localStorage.setItem('detInfo', detInfo)
+      const detInfo = JSON.stringify(item);
+      console.log(detInfo, "aa");
+      localStorage.setItem("detInfo", detInfo);
       this.$router.push({
-          path: '../strategy',
-          query: { detInfo : detInfo }
-        })
-     
+        path: "../strategy",
+        query: { detInfo: detInfo },
+      });
     },
+
     onClickLeft() {
       this.$router.push("../strategy");
       Toast("返回");
     },
+    showPopup() {
+      this.show = true;
+    },
+    //点击标签页
+    clickTab(index, name) {
+      this.tabIndex = index;
+      this.tableName = name;
+    },
+    //选择积分
+    clickBox(val) {
+      console.log("这是啥啊", val);
+      this.checkList.forEach((i, index) => {
+        if (val == i.id) {
+          console.log("我的积分", this.morePoint >= i.point);
+          if (this.morePoint >= i.point) {
+            this.ifexchange = true;
+          } else {
+            this.ifexchange = false;
+          }
+        }
+      });
+    },
+    checkScroll() {
+      const scrollTop = this.$refs.scrollContainer.scrollTop;
+      this.showButton = scrollTop > this.scrollThreshold;
+      if (this.$refs.scrollContainer.scrollTop != 0) {
+        this.isshowButton = false;
+      }
+    },
+    is_scrollToTop() {
+      this.$refs.scrollContainer.scrollTop = 0;
+    },
+    scrollToTop() {
+      this.$refs.scrollContainer.scrollTop != 0;
+      this.showButton = true;
+      
+    },
+    sure() {
+      this.is_showlive = true;
+      this.show = false;
+      this.po_show = true;
+    },
   },
   components: {},
 };
@@ -130,7 +316,7 @@ export default {
   line-height: 24px;
   background-color: #f7eec2;
 }
-.tab_img{
+.tab_img {
   width: 90px;
   position: absolute;
   bottom: 16px;
@@ -184,9 +370,9 @@ export default {
 }
 .read {
   position: absolute;
-  right: 5%;
+  right: 16%;
   font-size: 0.3rem;
-  top: 25%;
+  top: 18%;
   background: white;
   color: red;
   width: 22%;
@@ -209,7 +395,6 @@ export default {
   /* padding-left: 25px; */
   padding-top: 14px;
   text-align: center;
- 
 }
 .user_t {
   font-size: 0.46rem;
@@ -227,4 +412,138 @@ export default {
 ::v-deep .van-icon-arrow-left:before {
   color: white;
 }
+.bottomcontect-box {
+  height: 2.8rem;
+  width: 90%;
+  /* background-color: aqua; */
+  margin: 0 auto;
+  border-bottom: 1px solid gray;
+}
+.topthis-box {
+  width: 100%;
+  height: 1.7rem;
+  display: flex;
+  /* background-color: yellow; */
+}
+.top-left {
+  height: 100%;
+  width: 70%;
+}
+.top-right {
+  height: 100%;
+  width: 29%;
+  padding-top: 0.3rem;
+}
+.bottomthis-box {
+  display: flex;
+  line-height: 1rem;
+}
+.popup-title {
+  width: 90%;
+  margin: 0 auto;
+}
+.checkBox {
+  width: 100%;
+  height: 0.8rem;
+  position: relative;
+}
+.usePoint {
+  position: absolute;
+  right: 0.8rem;
+  color: red;
+  font-size: 0.4rem;
+  top: 0;
+}
+.usePointTwo {
+  position: absolute;
+  right: 0;
+  color: red;
+  font-size: 0.3rem;
+  top: 0.05rem;
+}
+.checkBoxTwo {
+  width: 90%;
+  height: 0.8rem;
+  margin: 0 auto;
+  position: relative;
+  line-height: 0.8rem;
+}
+.usePointThree {
+  position: absolute;
+  top: 0.1rem;
+  right: 0.8rem;
+  font-size: 0.4rem;
+}
+.usePointFour {
+  position: absolute;
+  top: 0.1rem;
+  right: 0;
+  font-size: 0.3rem;
+}
+.exchange {
+  width: 5rem;
+  height: 1rem;
+  background-color: rgb(226, 74, 68);
+  color: white;
+  line-height: 1rem;
+  border-radius: 0.2rem;
+  text-align: center;
+  font-size: 0.4rem;
+  margin: 3rem auto;
+}
+.exchangeTwo {
+  width: 5rem;
+  height: 1rem;
+  background-color: gray;
+  color: white;
+  line-height: 1rem;
+  border-radius: 0.2rem;
+  text-align: center;
+  font-size: 0.4rem;
+  margin: 3rem auto;
+}
+.b_user {
+  width: 100%;
+  height: 322px;
+  background: white;
+  position: relative;
+}
+.text_p {
+     text-align: center;
+    font-size: 0.4rem;
+    padding-top: 10px;
+    font-weight: bolder;
+}
+.user_p {
+  padding: 0.2rem;
+  font-size: 0.25rem;
+}
+.bu_p {
+  position: absolute;
+  bottom: 12px;
+  width: 41%;
+  height: 30px;
+  border-radius: 20px;
+  background: #bbb3b3;
+  border: none;
+  /* text-align: center; */
+  left: 31%;
+  color: white;
+  font-size: 0.2rem;
+}
+.user_p .con_P {
+  position: absolute;
+  bottom: 5px;
+  width: 34%;
+  height: 30px;
+  border-radius: 20px;
+  background: #e03939;
+  border: none;
+  left: 31%;
+  color: white;
+  font-size: 0.2rem;
+}
+.contain {
+  position: relative;
+}
 </style>