heyang 2 年之前
父節點
當前提交
3ea35676eb

+ 116 - 0
static/screenAndroid/WXtrialInterface.html

@@ -240,6 +240,45 @@
         </div>
       </div>
     </div>
+    <div class="apply-wrap">
+      <div class="apply-container">
+        <div class="apply-title">应用推荐</div>
+        <div class="apply-list"></div>
+        <div class="apply-list-change">换一批</div>
+        <img
+          class="apply-close"
+          src="img/close.png"
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="time-lang-wrap">
+      <div class="time-lang-container">
+        <img class="time-lang-img" src="img/smallBell.png" />
+        <div class="time-lang-title">本月时长已用完</div>
+        <div class="time-lang-tip">您可以去购买时长页面进行购买</div>
+        <div class="time-lang-btn">续时长</div>
+      </div>
+    </div>
+    <div class="countdown-wrap">
+      <div class="countdown-container">
+        <img class="countdown-img" src="img/countdown.png" />
+        <div class="countdown-title">计费规则</div>
+        <div class="countdown-tip">进入云机开始计时,下线停止计时</div>
+        <div class="countdown-tip2">云机时长剩余:<span class="countdown-time">00:00:00</span></div>
+        <div class="countdown-btn">我知道了</div>
+      </div>
+    </div>
+    <script type="text/html" id="apply">
+      <div class="apply-item">
+        <img class="apply-img" src="{{imageUrl}}" />
+        <div class="apply-row">
+          <div class="apply-row-title">{{filename}}</div>
+          <div class="apply-row-down">{{installNum}}</div>
+        </div>
+        <div class="apply-down-btn" data-url="{{downloadUrl}}">下载</div>
+      </div>
+    </script>
     <script
       type="text/javascript"
       src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
@@ -299,6 +338,7 @@
         $('.loading_sceen_pic').attr('src', '../static/img/home_bg_PRO.png');
       }
       initAD();
+      getResidueTime();
       let dbName = parameters['username'],
         version = 1,
         storeName = 'usercard';
@@ -1371,6 +1411,82 @@
         });
       }
 
+      // 获取云机剩余时长
+      function getResidueTime() {
+        return $.ajax({
+          url: baseUrl + `/api/resources/yearMember/getResidueTime?userCardId=${userCardId}`,
+          headers: {
+            Authorization: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyYW5kb20iOiIyNzg0NyIsImNsaWVudCI6IjUiLCJleHAiOjE2NjQzMTgwMjEsInVzZXJuYW1lX2FwcGxldCI6InFIZkFmMTYzMTg0NzM3OCJ9.KsMHvyiNOyvkx8vk1h3T2-ZU38-GaCxlLPDwZv0xTqQ',
+          },
+          
+          type: 'get',
+          dataType: 'json',
+          contentType: 'application/json;charset=UTF-8',
+        }).then(function (res) {
+          if (res.status === 0) {
+            console.log(res);
+            $('.countdown-wrap').eq(0).show();
+          } else {
+            return Promise.reject(new Error(res.msg));
+          }
+        });
+      }
+
+      // 推荐列表
+      function getRecommend() {
+        return $.ajax({
+          url: baseUrl + `/api/public/v1/market/get/recommend?userCardId=${userCardId}`,
+          headers: {
+            Authorization: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyYW5kb20iOiIyNzg0NyIsImNsaWVudCI6IjUiLCJleHAiOjE2NjQzMTgwMjEsInVzZXJuYW1lX2FwcGxldCI6InFIZkFmMTYzMTg0NzM3OCJ9.KsMHvyiNOyvkx8vk1h3T2-ZU38-GaCxlLPDwZv0xTqQ',
+          },
+          
+          type: 'get',
+          dataType: 'json',
+          contentType: 'application/json;charset=UTF-8',
+        }).then(function (res) {
+          if (res.status === 0) {
+            $('.apply-wrap').eq(0).show();
+            let list = res.data;
+            let result = '';
+            list.map(item => {
+							item.installNum = `有${item.installNum}人下载`
+              result += $('#apply').text().replace(/{{(.*?)}}/g, function(node, key) {
+                return item[key];
+              })
+            })
+            $('.apply-list').eq(0).append(result)
+          } else {
+            return Promise.reject(new Error(res.msg));
+          }
+        });
+      }
+
+      //点击了换一批
+      $('.apply-list-change')[0].addEventListener('click',() => {
+        $('.apply-list').eq(0).empty();
+        getRecommend();
+      })
+
+      //点击了关闭按钮
+      $('.apply-close')[0].addEventListener('click',() => {
+        $('.apply-wrap').eq(0).hide();
+      })
+
+      // 点击下载按钮
+      $('.apply-wrap')[0].addEventListener('click',(e)=>{
+        let downloadUrl = e.target.dataset.url;
+        let className = e.target.className;
+        if(className === 'apply-down-btn'){
+          window.location.href = downloadUrl;
+        }
+      })
+
+      // 点击了我知道了
+      $('.countdown-btn')[0].addEventListener('click',() => {
+        $('.countdown-wrap').eq(0).hide();
+        getRecommend();
+      })
+
       //广告信息
       var adData = null; // 广告数据
       var adLastTime = 0; // 广告时间

+ 157 - 1
static/screenAndroid/css/WXtrialInterface.css

@@ -505,7 +505,10 @@ li {
 
 .try-use-wrap,
 .buy-phone-wrap,
-.look-wrap {
+.look-wrap,
+.apply-wrap,
+.time-lang-wrap,
+.countdown-wrap {
   width: 100%;
   height: 100%;
   position: fixed;
@@ -516,6 +519,65 @@ li {
   display: none;
 }
 
+.time-lang-container, .countdown-container{
+  width: 80%;
+  height: 326px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #ffffff;
+  border-radius: 0.66em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.time-lang-img, .countdown-img{
+  width: 104px;
+  height: 140px;
+}
+
+.time-lang-title, .countdown-title{
+  margin-top: 0.34rem;
+  font-size: 18px;
+  font-weight: 600;
+  color: #363636;
+}
+
+.time-lang-tip, .countdown-tip{
+  margin-top: 0.28rem;
+  font-size: 14px;
+  color: #757580;
+}
+
+.countdown-tip2{
+  margin-top: 0.16rem;
+  font-size: 14px;
+  color: #757580;
+}
+
+.countdown-time{
+  color: #00DB88;
+}
+
+.time-lang-btn, .countdown-btn{
+  width: 244px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  margin: auto;
+  margin-top: 44px;
+  background: linear-gradient(90deg, #00A3FF 0%, #04F79A 100%);
+  border-radius: 8px;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+
+.countdown-btn{
+  margin-top: 24px;
+}
+
 .try-use-container {
   width: 80%;
   height: 409px;
@@ -527,6 +589,100 @@ li {
   border-radius: 0.66em;
 }
 
+.apply-container{
+  width: 80%;
+  height: 419px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #ffffff;
+  border-radius: 0.66em;
+}
+
+.apply-title{
+  text-align: center;
+  margin-top: 0.34rem;
+  font-size: 16px;
+  font-weight: 500;
+  color: #363636;
+}
+
+.apply-list{
+  height: 290px;
+  margin-top: 16px;
+}
+
+.apply-item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 18px;
+  margin-top: 16px;
+}
+
+.apply-item:first-child {
+  margin: 0;
+}
+
+.apply-img {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+}
+
+.apply-row{
+  flex: 1;
+  margin-left: 10px;
+}
+
+.apply-row-title{
+  width: 140px;
+  overflow:hidden; 
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  font-size: 16px;
+  color: #363636;
+}
+
+.apply-row-down{
+  font-size: 12px;
+  color: #757580;
+}
+
+.apply-down-btn{
+  width: 68px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background: linear-gradient(90deg, #00A3FF 0%, #04F79A 100%);
+  border-radius: 8px;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+
+.apply-list-change{
+  width: 244px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  margin: auto;
+  margin-top: 14px;
+  background: linear-gradient(225deg, #FF62F8 0%, #FF9D5C 100%);
+  border-radius: 8px;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+
+.apply-close {
+  width: 1.875rem;
+  height: 1.875rem;
+  position: absolute;
+  bottom: -3.2em;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .time-close-wrap {
   width: 5.46em;
   height: 2em;

二進制
static/screenAndroid/img/close.png


二進制
static/screenAndroid/img/countdown.png


二進制
static/screenAndroid/img/smallBell.png