美图秀秀页面优化

前端开发-罗建龙
1 parent 61793b4a
Showing 3 changed files with 64 additions and 28 deletions
packageF/pages/free_delivery/free_delivery.js
packageF/pages/free_delivery/free_delivery.wxml
packageF/pages/free_delivery/free_delivery.wxss
@@ -33,6 +33,7 @@ Page({
       this.setData({
         hd_id:options.id
       })
+      this.getInfo()
     }else{
       wx.showToast({
         title: '获取活动失败',
@@ -48,7 +49,15 @@ Page({
     }
   },
-
+  getInfo(){
+    app.promiseGet(`/api/weshop/meitu/storeMeituHdlist/get/${app.globalData.setting.stoid}/${this.data.hd_id}`, {}).then(res => {
+      if (res.data.code == 0 && res.data.data && res.data.data.hd_name) {        
+        wx.setNavigationBarTitle({
+          title: res.data.data.hd_name
+        })
+      } 
+  })
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -70,9 +79,7 @@ Page({
         login_name:'领取会员'
       })
     }
-    wx.setNavigationBarTitle({
-      title: '免费送'
-    })
+
   },
 	//--跳到绑定页面--  
 	gobindtel: function () {
@@ -97,25 +104,28 @@ Page({
         }).then((res)=>{       
           if(res.data.code == 0) {
             wx.showToast({
-              title: '领取成功',
-              icon: 'success',
+              title: res.data.msg,
+              icon: 'none',
               duration: 2000,
               mask:true,
             });
-            setTimeout(()=>{
-              wx.reLaunch({
-                url: '/pages/index/index/index'
-              })
-            },2000)
+            this.setData({
+              login_name:'已领取'
+            })
+            // setTimeout(()=>{
+            //   wx.reLaunch({
+            //     url: '/pages/index/index/index'
+            //   })
+            // },2000)
             // self.getData(true, '/api/weshop/goods/page?isnewwhere=1&is_mainshow=1&isonsale=1&dis_type=1', self.data.currentQuery, false);	
           } else {
             this.setData({
               login_off:false
             })
             wx.showToast({
-              title: '领取失败',
-              icon: 'success',
-              duration: 1000,
+              title: res.data.msg,
+              icon: 'none',
+              duration: 2000,
               mask:true,
             });
           }
@@ -150,7 +160,7 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh() {
-
+    wx.stopPullDownRefresh()
   },
   /**
 <!--packageF/pages/free_delivery/free_delivery.wxml-->
-<view class="free_delivery" style="background-image: url({{url}}miniapp/images/pink_diamond/bj.png);">
+<view class="free_delivery" style="background-image: url({{url}}miniapp/images/pink_diamond/bg.jpg);">
   <view class="top" >
     <image src="{{url}}miniapp/images/pink_diamond/logo.png" style="width: 345.6rpx;height: 88rpx;"></image>
   </view>
-  <view class="main" style="top: {{delOff ? '26.5':'24.5'}}%;">
-    <image src="{{url}}miniapp/images/pink_diamond/top.png" style="width: 618.8rpx;height: 235.9rpx;"></image>
+  <view class="main">
+    <view class="imageBox" >
+      <image src="{{url}}miniapp/images/pink_diamond/top1.png" style="width: 618.8rpx;height: 484.4rpx;"></image>
+    </view>
     <view class="main_title" style="background-image: url({{url}}miniapp/images/pink_diamond/login.png);width: 618.8rpx;height: 80rpx;color: {{userInfo ? '#333' :'rgb(194, 194, 194)'}};font-weight: {{userInfo ? 'bold' :'400'}};" >{{login_title}}</view>
     <view class="but" catchtap="gobindtel"  style="background-image: url({{url}}miniapp/images/pink_diamond/login1.png);width: 618.8rpx;height: 80rpx;" >{{login_name}}</view>
     <!-- <view wx:if="{{userInfo}}">领取会员</view>
     <view wx:else catchtap="gobindtel">点击注册</view> -->
   </view>
-  <view class="bottom" style="bottom: {{delOff ? '7':'3.5'}}%;" >
-    <image src="{{url}}miniapp/images/pink_diamond/bottom.png?v=5" style="width: 646.8rpx;height: 388.5rpx;"></image>
+  <view class="bottom"  >
+    <image src="{{url}}miniapp/images/pink_diamond/bottom.png?v=5" style="width: 618.8rpx;height: 388.5rpx;"></image>
   </view>
 </view>
@@ -2,7 +2,9 @@
 .free_delivery{
   width: 100%;
-  height: 100vh;
+  min-height: 100vh;
+  padding-bottom:25.6rpx;
+  box-sizing: border-box;
   /* display: flex;
   flex-direction: column;
   justify-content: space-between; */
@@ -22,10 +24,11 @@
   justify-content: center; */
 }
 .main{
-  position: absolute;
+  /* position: absolute;
   left: 0;
-  top: 24.5%;
-  width: 100%;
+  top: 24.5%; */
+  width: 670rpx;
+  margin: 100rpx auto 20rpx;
   /* height: 200rpx;
   background-color: red; */
   /* opacity: .5; */
@@ -33,6 +36,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  background-color: rgba(255, 255, 255, .5);
+  padding-bottom: 25.6rpx;
+  border-radius: 30rpx;
+  /* opacity: .5; */
   /* width: 100%;
   flex: 1;
   display: flex;
@@ -41,11 +48,24 @@
   background-color: darkmagenta; */
 }
+.main .imageBox{
+  width: 100%;
+  height: 344.4rpx;
+  position: relative;
+  /* background-color: royalblue; */
+}
+.main .imageBox image{
+  position: absolute;
+  top: -140rpx;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
 .main_title{
   margin: 25rpx 0;
 }
-.main view{
+.main .main_title , .main .but{
   background-position: 50%;
   background-repeat: no-repeat;
   background-attachment: fixed;
@@ -61,10 +81,14 @@
   font-weight: bold;
 }
 .bottom{
-  width: 100%;
-  position: absolute;
+  width: 670rpx;
+  margin: 0 auto;
+  /* position: absolute;
   left: 0;
-  bottom: 5%;
+  bottom: 5%; */
+  background-color: rgba(255, 255, 255, .5);
+  padding: 50rpx 0;
+  border-radius: 30rpx;
   display: flex;
   align-items: center;
   justify-content: center;