[add][page and interface]

src/assets/svg/icon-back.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.46967 11.4697C4.17678 11.7626 4.17678 12.2374 4.46967 12.5303L9.24264 17.3033C9.53553 17.5962 10.0104 17.5962 10.3033 17.3033C10.5962 17.0104 10.5962 16.5355 10.3033 16.2426L6.06066 12L10.3033 7.75736C10.5962 7.46447 10.5962 6.98959 10.3033 6.6967C10.0104 6.4038 9.53553 6.4038 9.24264 6.6967L4.46967 11.4697ZM19 11.25L5 11.25L5 12.75L19 12.75L19 11.25Z" fill="black"/>
+</svg>

src/assets/svg/icon-ok.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="6" fill="#EF4545"/>
+<path d="M3.2998 5.99961L5.3998 8.39961L8.9998 3.59961" stroke="white"/>
+</svg>

src/assets/svg/icon-right.svg

@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 1L3.5 4L0.5 7" stroke="#6F6F6F" stroke-width="0.75"/>
+</svg>

src/server/redPacket.js

@@ -0,0 +1,98 @@
+let base_url = 'https://denettestapi.piaoquantv.com/denet'
+
+// 获取红包任务详情
+export function getPostDetail() {
+    return new Promise(function (resolve, reject) {
+        let _url = `${base_url}/post/getDetail`
+        fetch(_url, {
+            method: 'POST', // or 'PUT'
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "baseInfo": {
+                    "appVersionCode": 0,
+                    "clientTimestamp": 0,
+                    "loginUid": 0,
+                    "requestId": "string",
+                    "token": "string"
+                },
+                "params": {
+                    "postId": "05b2f99bbcfa461db3b053df61ca7ae5"
+                }
+            }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                resolve(data);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+
+    })
+}
+
+// 领取红包任务
+export function getRedPacket() {
+    return new Promise(function (resolve, reject) {
+        let _url = `${base_url}/post/luckdrop/receiveLuckdrop`
+        fetch(_url, {
+            method: 'POST', // or 'PUT'
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "baseInfo": {
+                    "appVersionCode": 0,
+                    "clientTimestamp": 0,
+                    "loginUid": 0,
+                    "requestId": "string",
+                    "token": "d2ef1b74d4dec5338938a58b7fe783360612b8a5"
+                },
+                "params": {
+                    "postId": "05b2f99bbcfa461db3b053df61ca7ae5"
+                }
+            }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                resolve(data);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+    })
+}
+
+// 完成红包任务
+export function finishRedPacket() {
+    return new Promise(function (resolve, reject) {
+        let _url = `${base_url}/post/luckdrop/finishLuckdrop`
+        fetch(_url, {
+            method: 'POST', // or 'PUT'
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "baseInfo": {
+                    "appVersionCode": 0,
+                    "clientTimestamp": 0,
+                    "loginUid": 0,
+                    "requestId": "string",
+                    "token": "string"
+                },
+                "params": {
+                    "postId": "05b2f99bbcfa461db3b053df61ca7ae5"
+                }
+            }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                resolve(data);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+    })
+}

src/server/twitter.js

@@ -25,7 +25,6 @@ export function getTtwitterRequestToken() {
             .catch((error) => {
                 reject(error);
             });
-
     })
 }
 

src/view/red-packet.vue

@@ -12,7 +12,7 @@
       </div>
 
       <div class="list">
-        <div class="item" v-for="item,i in data.list" :key="i">
+        <div class="item" v-for="item, i in data.list" v-bind:key="i">
           <img :src="item.url" alt />
           <div class="item-content">
             <div class="item-title">{{ item.title }}</div>
@@ -22,14 +22,20 @@
         </div>
       </div>
       <div class="people">
-        <span>Total $100 USD，173/1000 People Got</span>
+        <div class="txt">Total $100 USD，173/1000 People Got</div>
+        <div class="right" @click="clickRoad">
+          <img :src="require('../assets/svg/icon-dollar.svg')" alt />
+          <img :src="require('../assets/svg/icon-dollar.svg')" alt />
+          <img :src="require('../assets/svg/icon-dollar.svg')" alt />
+          <img :src="require('../assets/svg/icon-right.svg')" alt class="road" />
+        </div>
       </div>
       <div class="footer">
         <div class="first">
           <div class="validity">Validity</div>
           <div class="time">23:57:32</div>
         </div>
-        <div class="btn">Get Giveaways</div>
+        <div class="btn" @click="clickGetGiveways">Get Giveaways</div>
       </div>
     </div>
     <!-- success -->
@@ -41,29 +47,60 @@
           <span class="small">USD</span>
         </div>
       </div>
-
-      <div class="list">
-        <div class="item" v-for="item,i in data.list" :key="i">
-          <img :src="item.url" alt />
-          <div class="item-content">
-            <div class="item-title">{{ item.title }}</div>
-            <span>@shasid \!@asd</span>
+      <div class="luck-list-title">
+        <div>173/1000 People Got</div>
+        <div>Total $100 USD</div>
+      </div>
+      <div class="luck-list">
+        <div class="luck-item" v-for="item,index in data.luck_list" v-bind:key="index">
+          <img :src="require('../assets/svg/icon-dollar.svg')" alt />
+          <div class="luck-content">
+            <div class="luck-title">{{item.title}}</div>
+            <div class="luck-time">刚刚</div>
+          </div>
+          <div class="luck-money">
+            <img :src="require('../assets/svg/icon-dollar.svg')" alt />
+            <div class="luck-money-txt">123</div>
+          </div>
+          <div class="luck-king">
+            <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
+            <span>Luckiest Draw</span>
           </div>
-          <div class="btn">{{ item.title }}</div>
         </div>
       </div>
     </div>
     <!-- no-open -->
     <div v-if="data.status == 'not-open'" class="not-open">
-      <div class="top">
-        <div class>
-          <img src alt />
-          <span></span>
+      <img :src="require('../assets/img/up.png')" alt class="up" />
+      <img :src="require('../assets/img/down.png')" alt class="down" />
+      <div class="open" @click="clickOpenRedPacket">OPEN</div>
+    </div>
+    <!-- 领取列表 -->
+    <div v-if="data.status == 'luck-peopel-list'" class="luck-peopel-list">
+      <div class="head">
+        <img :src="require('../assets/svg/icon-back.svg')" alt @click="clickBack" />
+      </div>
+      <div class="luck-list-title">
+        <div>173/1000 People Got</div>
+        <div>Total $100 USD</div>
+      </div>
+      <div class="luck-list">
+        <div class="luck-item" v-for="item,i in data.luck_list" v-bind:key="i">
+          <img :src="require('../assets/svg/icon-dollar.svg')" alt />
+          <div class="luck-content">
+            <div class="luck-title">{{item}}</div>
+            <div class="luck-time">刚刚</div>
+          </div>
+          <div class="luck-money">
+            <img :src="require('../assets/svg/icon-dollar.svg')" alt />
+            <div class="luck-money-txt">123</div>
+          </div>
+          <div class="luck-king">
+            <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
+            <span>Luckiest Draw</span>
+          </div>
         </div>
-        <div></div>
       </div>
-      <div class="open">OPEN</div>
-      <div class="bottom"></div>
     </div>
   </div>
 </template>
@@ -74,11 +111,11 @@ export default {
 }
 </script>
 <script setup>
-import { reactive } from "vue";
-
+import { onMounted, reactive } from "vue";
+import { getPostDetail,getRedPacket} from '../server/redPacket.js'
 
 let data = reactive({
-  status: 'opened',
+  status: '',
   list: [
     {
       title: 'Follow',
@@ -91,13 +128,57 @@ let data = reactive({
       title: 'Retweet',
       url: require('../assets/svg/icon-retweet.svg')
     }
-
+  ],
+  luck_list: [
+    {
+      title: 'Retweet',
+      url: require('../assets/svg/icon-retweet.svg')
+    },
+    {
+      title: 'Retweet',
+      url: require('../assets/svg/icon-retweet.svg')
+    }
   ]
 })
 
+onMounted(()=>{
+  getPostDetail().then((res)=>{
+    if(res.data.myReceived){
+      // 领取了红包
+      data.status = 'opened'    
+    }else{
+      data.status = 'not-open'
+    }
+    
+    
+    console.log(JSON.parse(res.data.postBizData))
+    
+  })
+})
+
+function clickOpenRedPacket() {
+  data.status = 'opened'
+  getRedPacket().then((res)=>{
+    
+  })
+}
+function clickGetGiveways() {
+  data.status = 'success'
+}
+function clickBack() {
+  data.status = 'opened'
+}
+function clickRoad(){
+  data.status = 'luck-peopel-list'
+}
 </script>
  
-<style scoped lang="scss">
+<style  lang="scss">
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
 .content {
   width: 375px;
   height: 500px;
@@ -105,10 +186,21 @@ let data = reactive({
   border-radius: 11px;
   font-family: "SF Pro Display";
   font-style: normal;
-  .success {
+  .success,
+  .luck-peopel-list {
     filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
     width: 100%;
     height: 100%;
+    border-radius: 11px;
+    background: #fff;
+    .head {
+      padding: 14px 16px;
+      img {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+      }
+    }
     .header {
       text-align: center;
       height: 120px;
@@ -125,7 +217,7 @@ let data = reactive({
         line-height: 21px;
         letter-spacing: -0.3px;
       }
-       .money {
+      .money {
         img {
           width: 40px;
           height: 40px;
@@ -152,6 +244,83 @@ let data = reactive({
         }
       }
     }
+    .luck-list-title {
+      padding: 0 16px;
+      background: #fff;
+      color: #9b9b9b;
+      display: flex;
+      justify-content: space-between;
+    }
+    .luck-list {
+      background: #fff;
+      .luck-item {
+        display: flex;
+        padding: 12px 16px;
+        border-top: 1px solid #d1d1d1;
+        justify-content: space-between;
+        position: relative;
+        .luck-king {
+          position: absolute;
+          top: 36px;
+          right: 16px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 22px;
+            height: 19px;
+            margin: 0;
+          }
+          span {
+            font-weight: 500;
+            font-size: 12px;
+            line-height: 14px;
+            letter-spacing: 0.3px;
+            color: #f5b945;
+          }
+        }
+        img {
+          width: 42px;
+          height: 42px;
+          margin-right: 12px;
+        }
+        .luck-content {
+          flex: auto;
+          .luck-title {
+            font-weight: 500;
+            font-size: 16px;
+            letter-spacing: 0.3px;
+            color: #444444;
+          }
+          .luck-time {
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+
+            color: #9b9b9b;
+          }
+        }
+        .luck-money {
+          display: flex;
+          height: 17px;
+          align-items: center;
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 6px;
+          }
+          .luck-money-txt {
+            font-weight: 500;
+            font-size: 14px;
+            /* identical to box height */
+
+            text-align: right;
+            letter-spacing: 0.3px;
+
+            color: #444444;
+          }
+        }
+      }
+    }
   }
   .opened {
     filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
@@ -255,16 +424,27 @@ let data = reactive({
       line-height: 44px;
       background: #faf9f8;
       box-shadow: 0px 1px 0px #f2f2f2;
-      span {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .txt {
         font-weight: 400;
         font-size: 12px;
         line-height: 14px;
         letter-spacing: 0.3px;
-
         color: #000000;
-
         opacity: 0.4;
       }
+      .right {
+        cursor: pointer;
+        margin-right: 22px;
+        display: flex;
+        align-items: center;
+        img {
+          width: 22px;
+          height: 22px;
+        }
+      }
     }
     .footer {
       background: #ffffff;
@@ -307,12 +487,21 @@ let data = reactive({
   }
   .not-open {
     filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
-    .top {
-      width: 375px;
-      height: 292px;
-      background: #ef4545;
+    position: relative;
+    img {
+      width: 100%;
+    }
+    .up {
+      position: absolute;
+      top: 0;
       box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
+      z-index: 1;
     }
+    .down {
+      position: absolute;
+      top: 253px;
+    }
+
     .open {
       width: 110px;
       height: 110px;
@@ -324,6 +513,11 @@ let data = reactive({
       cursor: pointer;
       border-radius: 50%;
       line-height: 110px;
+      position: absolute;
+      top: 235px;
+      left: 50%;
+      margin-left: -55px;
+      z-index: 2;
     }
   }
 }