导航新增一个入参方法，好友助力排版

前端研发-钱巧玲
1 parent 4b0a6f26
Showing 5 changed files with 272 additions and 28 deletions
components/nav_b/nav_b.js
pages/user/assistance/assistance.js
pages/user/assistance/assistance.json
pages/user/assistance/assistance.wxml
pages/user/assistance/assistance.wxss
-var t = getApp(), os = t.globalData.setting;
+var t = getApp(),
+  os = t.globalData.setting;
 Component({
-  properties: {
-  },
+  properties: {},
   data: {
     isopen: 0,
     iurl: os.imghost,
-    nav_left:"首页",//导航左边
-    nav_center:"预约",//导航中间
-    nav_right: "我的",//导航右边
-    nav_left_url: "/pages/index/index/index",//导航左边地址
-    nav_center_url:"/pages/user/my_service/tment_order_list",//导航中间地址
-    nav_right_url:"/pages/user/index/index",//导航右边地址
+    nav_left: "首页", //导航左边
+    nav_center: "预约", //导航中间
+    nav_right: "我的", //导航右边
+    nav_left_url: "/pages/index/index/index", //导航左边地址
+    nav_center_url: "/pages/user/my_service/tment_order_list", //导航中间地址
+    nav_right_url: "/pages/user/index/index", //导航右边地址
   },
-  ready: function () {
-  },
+  ready: function() {},
   methods: {
     //--点击打开事件--
-    open_box: function () {
-      this.setData({ isopen: 1 });
+    open_box: function() {
+      this.setData({
+        isopen: 1
+      });
+    },
+    set_name: function(name,url) {
+      var th = this;
+      th.setData({
+        nav_center:name,
+        nav_center_url:url
+      })
     },
     //--关闭事件--
-    close_box: function () {
-      this.setData({ isopen: 0 });
+    close_box: function() {
+      this.setData({
+        isopen: 0
+      });
     },
     //--跳转--
-    goto: function (e) {
+    goto: function(e) {
       var url = e.currentTarget.dataset.url;
       getApp().goto(url);
       this.close_box();
@@ -10,21 +10,41 @@ Page({
    * 页面的初始数据
    */
   data: {
-         
+    url: a.url, //接口网址
+    iurl: a.imghost, //图片前缀网址
+    switch_head: 0, //0：我的任务，1：活动说明
   },
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
-
+  onLoad: function(options) {
+    var th = this;
+    th.close();
   },
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
+  onShow: function() {
+  },
+  switch_head: function(e) {
+    var th = this;
+    var index = e.currentTarget.dataset.index; //获取当前选择的是任务还是活动说明
+    var switch_head = th.data.switch_head; //0任务，1活动说明
+    if (index != switch_head) {
+      th.setData({
+        switch_head: index
+      })
+    }
+  },
+  //关闭导航
+  close: function() {
+    var th = this;
+    var nav_b = th.selectComponent("#nav_b"); //组件的id
+    nav_b.close_box();
+    nav_b.set_name("助力", "");
   }
 })
 \ No newline at end of file
@@ -3,6 +3,7 @@
   "navigationStyle": "custom",
   "usingComponents": {
     "warn": "/components/long_warn/long_warn",
-    "my_confirm": "/components/my_confirm/my_confirm"
+    "my_confirm": "/components/my_confirm/my_confirm",
+    "nav_b": "/components/nav_b/nav_b"
   }
 }
 \ No newline at end of file
-<view>
-
-
-
-
-
+<view class="page" bindtap="close">
+  <!-- 背景图片 -->
+  <image class="lumi" src="{{iurl+'miniapp/images/friendhelp/lumi.png'}}" lazy-load="true"></image>
+  <view class="zindex">
+    <view class="top">
+      <view class="flex-center">
+        <image class="getgift" src="{{iurl+'miniapp/images/friendhelp/getgift.png'}}" lazy-load="true"></image>
+      </view>
+      <view class="flex-center fs32">
+        <view class="excitation">机会总是留给最有行动力的人</view>
+      </view>
+      <view class="flex-center">
+        <image class="gift" src="{{iurl+'miniapp/images/friendhelp/gift.png'}}" lazy-load="true"></image>
+      </view>
+      <view class="flex-center fs26 time">
+        <view>活动时间：</view>
+        <view>5月28日-6月30日
+        </view>
+      </view>
+      <view class="flex-center">
+        <view class="flex-center take">
+          <view>立即领取</view>
+        </view>
+      </view>
+    </view>
+    <!-- 任务及说明栏 -->
+    <view>
+      <!-- 标题 -->
+      <view class="flex-vertical-between fs28 padding head">
+        <!-- task -->
+        <view class="flex-center lhead {{switch_head==0?'rhead':''}}" bindtap="switch_head" data-index="{{0}}">
+          <image class="explain" src="{{iurl+'miniapp/images/friendhelp/task.png'}}" lazy-load="true"></image>
+          <view>我的任务</view>
+        </view>
+        <view class="flex-center lhead {{switch_head==1?'rhead':''}}" bindtap="switch_head" data-index="{{1}}">
+          <image class="explain" src="{{iurl+'miniapp/images/friendhelp/explain.png'}}" lazy-load="true"></image>
+          <view>活动说明</view>
+        </view>
+      </view>
+      <!-- 我的任务 -->
+      <view wx:if="{{switch_head==0}}" class="white">
+        <view class="items">
+          <view class="item fs26 flex-vertical-between padding" wx:for="{{5}}">
+            <view class="flex-center width">
+              <view class="ellipsis-1">豪华任务一
+              </view>
+            </view>
+            <view class="flex-center width state">
+              <view class="ellipsis-1">进行中
+              </view>
+            </view>
+          </view>
+          <!-- 加载更多 -->
+          <view class="fs28 flex-center">
+            <view class="line"></view>
+            <view class="load" bindtap="">点击加载更多</view>
+            <view class="line"></view>
+          </view>
+        </view>
+        <view class="fs30">
+          <view class="flex-center nothing">
+            <view>暂无任务记录</view>
+          </view>
+          <view class="flex-center receive">
+            <view class="flex-center">
+              <view>已有</view>
+              <view>126</view>
+              <view>人领取了任务</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 活动说明 -->
+      <view wx:if="{{switch_head}}" class="white">
+        <view class="items">
+          <view class="content fs28 padding">
+            <view>活动时间: 2014年4月24日-27日， 共4天 活动规则:活动期间内，通过当当购物手机客户端成功购买图书的用户， 均视为成功参与此次活动;每个用户只可参与一-次。 奖品发放:交易完成后，3个工作日内发送至参与用户账号 补充说明:此次活动不与客户端用户首单奖励5元活动冲突，可同时参与。 此次活动最终解释权归当当网所有。</view>
+          </view>
+          <!-- 加载更多 -->
+          <view class="loads fs28 flex-center">
+            <view class="line"></view>
+            <view class="load" bindtap="">点击加载更多</view>
+            <view class="line"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </view>
+<!--  制作一个圆球导航  -->
+<nav_b id="nav_b"></nav_b>
 \ No newline at end of file
-/* pages/user/assistance/assistance.wxss */
 \ No newline at end of file
+page {
+  background-color: rgb(208, 17, 25);
+  width: 100%;
+  height: 100%;
+}
+
+.lumi {
+  position: absolute;
+  z-index: 0;
+  width: 100%;
+  height: 1100rpx;
+}
+
+.zindex {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+}
+
+.top {
+  padding-bottom: 75rpx;
+}
+
+.getgift {
+  width: 610rpx;
+  height: 130rpx;
+  padding-top: 70rpx;
+}
+
+.excitation {
+  padding-top: 30rpx;
+  color: rgb(255, 255, 255);
+  padding-bottom: 50rpx;
+}
+
+.gift {
+  width: 550rpx;
+  height: 500rpx;
+}
+
+.time {
+  color: rgb(255, 255, 255);
+  margin-bottom: 55rpx;
+  text-decoration: underline;
+  margin-top: 10rpx;
+}
+
+.take {
+  width: 440rpx;
+  height: 77rpx;
+  color: rgb(221, 45, 8);
+  background-color: rgb(252, 210, 10);
+  border-radius: 45rpx;
+  font-weight: 900;
+  line-height: 77rpx;
+  box-shadow: 0rpx 7rpx 0rpx 0rpx rgb(245, 119, 6);
+  font-size: 38rpx;
+}
+
+.head {
+  border-bottom: 4rpx solid rgb(253, 193, 7);
+  color: rgb(255, 255, 255);
+  height: 50rpx;
+  line-height: 50rpx;
+}
+
+.lhead {
+  border-top: 4rpx solid rgb(253, 193, 7);
+  border-left: 4rpx solid rgb(253, 193, 7);
+  border-right: 4rpx solid rgb(253, 193, 7);
+  width: 290rpx;
+  height: 50rpx;
+  line-height: 50rpx;
+}
+
+.rhead {
+  background-color: rgb(253, 193, 7);
+  border-bottom: 4rpx solid rgb(253, 193, 7);
+}
+
+.items {
+  padding-top: 50rpx;
+}
+
+.explain {
+  width: 22rpx;
+  height: 22rpx;
+  margin-right: 10rpx;
+}
+
+.padding {
+  padding: 0rpx 50rpx;
+}
+
+.content {
+  padding-bottom: 35rpx;
+}
+
+.width {
+  width: 290rpx;
+}
+
+.line {
+  width: 110rpx;
+  border-top: 2rpx solid rgb(255, 255, 255);
+}
+
+.loads {
+  margin-bottom: 35rpx;
+}
+
+.load {
+  margin: 0rpx 26rpx;
+}
+
+.item {
+  margin-bottom: 35rpx;
+}
+
+.state {
+  text-decoration: underline;
+}
+
+.nothing {
+  padding: 50rpx 0rpx;
+}
+
+.receive {
+  padding-bottom: 50rpx;
+}