dev

app.json

@@ -4,6 +4,7 @@
     "pages/logs/logs",
     "pages/index/subpage/ranking/ranking",
     "pages/index/subpage/brand/brand",
+    "pages/index/subpage/brand/brandDetails/brandDetails",
     "pages/quest/quest",
     "pages/material/material",
     "pages/user/user",

pages/index/index.js

@@ -84,6 +84,11 @@ Page({
       url: e.target.dataset.url
     })
   },
+  detail(){
+    wx.navigateTo({
+      url:"/pages/index/subpage/brand/brandDetails/brandDetails"
+    })
+  },
   onLoad: function (options) {
     wx.setNavigationBarTitle({
       title: '',

pages/index/index.wxml

@@ -28,7 +28,7 @@
       </view>
     </view>
     <view class="brand_mes">
-      <view wx:for="{{brandlist}}" wx:key="url" class="brand_card">
+      <view wx:for="{{brandlist}}" wx:key="url" class="brand_card" bindtap="detail"  >
         <view class="brand_voa_type">
           {{item.type === 1 ? '视频' : '文章'}}
         </view>

pages/index/subpage/brand/brandDetails/brandDetails.js

@@ -0,0 +1,318 @@
+// pages/quest/quest.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    navItem: [{
+      id: 0,
+      name: '全部状态',
+      is: false
+    }, {
+      id: 1,
+      name: '全部标签',
+      is: false
+    }, {
+      id: 2,
+      name: '全部日期',
+      is: false
+    }, {
+      id: 3,
+      name: '全部车型',
+      is: false
+    }],
+    selectItem: [{
+      id: 0,
+      rank: [{
+        name: '全部状态',
+        is: true
+      }, {
+        name: '待领取',
+        is: false
+      }, {
+        name: '进行中',
+        is: false
+      }, {
+        name: '已完成',
+        is: false
+      }]
+    }, {
+      id: 1,
+      rank: [{
+        name: '全部标签',
+        is: true
+      }, {
+        name: '媒体测评',
+        is: false
+      }, {
+        name: '产品宣传',
+        is: false
+      }, {
+        name: '用户活动',
+        is: false
+      }, {
+        name: '趣味互动',
+        is: false
+      }]
+    }, {
+      id: 2,
+      rank: [{
+        name: '全部日期',
+        is: true
+      }, {
+        name: '一个月内',
+        is: false
+      }, {
+        name: '三个月内',
+        is: false
+      }, {
+        name: '半年内',
+        is: false
+      }, {
+        name: '一年内',
+        is: false
+      }]
+    }, {
+      id: 3,
+      rank: [{
+        name: '全部车型',
+        is: true
+      }, {
+        name: '星途追风ET-I',
+        is: false
+      }, {
+        name: '星途追风',
+        is: false
+      }, {
+        name: '星途TX',
+        is: false
+      }, {
+        name: '星途凌云',
+        is: false
+      }, {
+        name: '星途凌云S',
+        is: false
+      }, {
+        name: '星途揽月',
+        is: false
+      }, {
+        name: '揽月探享版至尊享受',
+        is: false
+      }]
+    }],
+    // 下拉选项，被选中那组的数据，由下面的js控制赋值
+    selectedItem: [],
+    // 记录菜单栏第几项被点开，方便对样式的绑定
+    listNum: -1,
+    // 下拉选项的隐藏和显示，默认隐藏
+    showOrHide: false,
+    questes: [
+      {
+        time: '2022-3-18～2022-5-18',
+        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
+        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
+        url: 'https://www.oa00.com/#/attendance/index',
+        type: 1,
+        num: '258w',
+        duration: '02:32',
+      },{
+        time: '2022-3-18～2022-5-18',
+        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
+        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
+        url: 'https://www.oa00.com/#/attendance/index',
+        type: 1,
+        num: '258w',
+        duration: '02:32',
+      },{
+        time: '2022-3-18～2022-5-18',
+        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
+        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
+        url: 'https://www.oa00.com/#/attendance/index',
+        type: 1,
+        num: '258w',
+        duration: '02:32',
+      },{
+        time: '2022-3-18～2022-5-18',
+        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
+        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
+        url: 'https://www.oa00.com/#/attendance/index',
+        type: 1,
+        num: '258w',
+        duration: '02:32',
+      },{
+        time: '2022-3-18～2022-5-18',
+        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
+        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
+        url: 'https://www.oa00.com/#/attendance/index',
+        type: 1,
+        num: '258w',
+        duration: '02:32',
+      },{
+        time: '2022-3-18～2022-5-18',
+        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
+        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
+        url: 'https://www.oa00.com/#/attendance/index',
+        type: 1,
+        num: '258w',
+        duration: '02:32',
+      },{
+        time: '2022-3-18～2022-5-18',
+        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
+        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
+        url: 'https://www.oa00.com/#/attendance/index',
+        type: 1,
+        num: '258w',
+        duration: '02:32',
+      },
+    ],
+  },
+  back(){
+    wx.navigateBack({
+      delta: 1
+    })
+  },
+  // 点击菜单栏触发的事件函数
+  handleClick: function (e) {
+    const index = e.currentTarget.dataset.id;
+    const {
+      selectItem,
+      navItem
+    } = this.data;
+    // 点击事件，开始时一定会执行的，先令所有下拉选项先隐藏
+    const promise = new Promise((res) => {
+      this.setData({
+        showOrHide: true
+      })
+      res()
+    })
+    promise.then(() => {
+      // 定义一个延迟0.1秒的函数，和函数动画事件对上
+      setTimeout(() => {
+        // 当点击的是已经点开的菜单项，则隐藏
+        if (this.data.listNum === index) {
+          navItem[index].is = false
+          // 重置所有样式
+          this.setData({
+            navItem,
+            listNum: -1
+          })
+          return;
+        } else {
+          // 否则就令当前的index = listNum方便下一次判断
+          this.setData({
+            listNum: index
+          })
+        }
+        // 令当前点击的菜单栏高亮
+        navItem.forEach((v, i) => i === index ? v.is = true : v.is = false)
+        // console.log(selectItem[index].rank)
+        this.setData({
+          showOrHide: true,
+          selectedItem: selectItem[index].rank,
+          navItem
+        })
+      }, 100)
+    })
+  },
+  // 关闭下拉选项的函数
+  // 两种情况下会关闭下拉选项
+  //  1. 选择下拉选项，选择后被选的下拉选项高亮，关闭下拉选项列表
+  //  2. 点击遮罩层关闭 
+  closeMask: function (e) {
+    let {
+      navItem,
+      listNum,
+      selectedItem
+    } = this.data;
+    // 获取点击的下拉选项内容
+    const {
+      contant
+    } = e.currentTarget.dataset
+    // 被点击的下拉选项高亮
+    selectedItem.forEach((v) => v.name === contant ? v.is = true : v.is = false)
+    // 判断点击的是遮罩层还是下拉选项，如果是下拉选项则把选择的内容赋值到导航栏上，并且把v.is = false，让菜单栏高亮消失
+    // 如果不是，不用赋值，直接把v.is = false，让菜单栏高亮消失
+    contant ? (navItem.forEach((v, i) => {
+      (i === listNum ? (v.name = contant) : (v.name = v.name));
+      // (i === listNum ? ( e.currentTarget.dataset.id !== 0 ? v.is = true : v.is = false) : (v.is = v.is));
+      v.is = false
+    })) : (navItem.forEach((v) => v.is = false))
+    // 调取借口触发筛选
+    // console.log(navItem)
+    this.setData({
+      listNum: -1,
+      showOrHide: false,
+      navItem,
+      selectedItem
+    })
+  },
+  to(e) {
+    wx.navigateTo({
+      url: e.currentTarget.dataset.url
+    })
+  },
+  detail(){
+    wx.navigateTo({
+      url: 'url',
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.setNavigationBarTitle({
+      title: '任务中心',
+      success: function (res) {}
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/index/subpage/brand/brandDetails/brandDetails.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/index/subpage/brand/brandDetails/brandDetails.wxml

@@ -0,0 +1,48 @@
+<!--pages/index/subpage/brand/brandDetails/brandDetails.wxml-->
+<view class="video">
+    <video style="width: 100%; " src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400">
+        <l-icon name="left" color="black" size="48" class="back" bindtap="back" />
+    </video>
+</view>
+<view class="main">
+    <view class="main_title">探享·心境界，星途揽月5座探享版开启预售</view>
+    <view class="title_tt">
+        <view class="card_time">2022-03-16 12:00:00</view>
+        <view class="card_time">285w次播放 </view>
+    </view>
+    <view class="data_tup">
+        <view class="data_card">
+            <image src="../brandDetails/images/ic_fenxiang@3x.png" style="width: 48rpx;height: 48rpx;vertical-align: middle;margin-right: 10rpx;"></image>
+            <text style="width: 48rpx;height: 48rpx;">分享</text>
+        </view>
+        <view class="data_card">
+            <image src="../brandDetails/images/ic_shoucang@3x.png" style="width: 48rpx;height: 48rpx;vertical-align: middle;margin-right: 10rpx;"></image>
+            <text style="width: 48rpx;height: 48rpx;">收藏</text>
+        </view>
+        <view class="data_card">
+            <image src="../brandDetails/images/ic_baocun@3x.png" style="width: 48rpx;height: 48rpx;vertical-align: middle;margin-right: 10rpx;"></image>
+            <text>保存</text>
+        </view>
+    </view>
+</view>
+<!-- 任务展示 -->
+<view class="quest">
+    <view class="quest_text">相关推荐</view>
+    <view class="quest_crad" wx:for="{{questes}}" wx:key="index" data-url="/pages/quest/subpage/detail/detail" bindtap="to">
+        <view class="card_main">
+            <view class="crad_left_top">
+                <view class="card_title">{{item.title}}</view>
+                <view class="crad_text">{{item.text}}</view>
+                <view class="card_time">{{item.time}}</view>
+            </view>
+            <!-- <view class="crad_image"></view> -->
+            <view class="crad_right">
+                <view class="crad_right_type"> {{item.type === 1 ? '视频' : '文章'}}</view>
+                <view class="crad_right_num">
+                    {{item.type === 1 ? item.num+'次播放' : item.num+'次阅读'}}{{item.duration}}
+                </view>
+                    <image class="crad_image" src="/pages/quest/subpage/detail/image/short/img_xtuone@2x.png"></image>
+            </view>
+        </view>
+    </view>
+</view>

pages/index/subpage/brand/brandDetails/brandDetails.wxss

@@ -0,0 +1,182 @@
+/* pages/index/subpage/brand/brandDetails/brandDetails.wxss */
+
+.back {
+  position: absolute;
+  left: 32rpx;
+  top: 88rpx;
+}
+
+.video {
+  width: 100%;
+  height: 440rpx;
+
+}
+
+.main {
+  background-color: #ffffff;
+  padding: 40rpx 32rpx;
+}
+
+.main_title {
+  font-size: 40rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #333333;
+  line-height: 48rpx;
+}
+
+.title_tt {
+  display: flex;
+  height: 50rpx;
+  line-height: 50rpx;
+  justify-content: space-between;
+}
+
+.title_aa {
+  width: 220rpx;
+  height: 84rpx;
+  line-height: 84rpx;
+  background-color: #F9F9F9;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+.data_tup {
+  width: 100%;
+  height: 84rpx;
+  line-height: 84rpx;
+  display: flex;
+  text-align: justify;
+  justify-content: space-between;
+}
+
+text {
+  height: 84rpx;
+  line-height: 84rpx;
+}
+
+.data_card {
+  width: 220rpx;
+  height: 84rpx;
+  margin: 0 16rpx;
+  background-color: rgb(249, 249, 249);
+  /* flex-direction: column; */
+  text-align: center;
+  font-size: 24rpx;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 84rpx;
+}
+
+.quest {
+  padding-top: 24rpx;
+  padding-left: 33rpx;
+  padding-right: 33rpx;
+}
+
+.quest_text {
+  font-size: 36rpx;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 36rpx;
+}
+
+.quest_crad {
+  pointer-events: auto;
+  padding: 32rpx;
+  width: 620rpx;
+  background-color: rgb(249, 249, 249);
+  margin-bottom: 16rpx;
+  border-radius: 16rpx;
+}
+
+.card_time {
+  height: 50rpx;
+  font-size: 20rpx;
+  font-family: MiSans-Regular, MiSans;
+  font-weight: 400;
+  color: #999999;
+  line-height: 50rpx;
+}
+
+.card_title {
+  width: 384rpx;
+  height: 32rpx;
+  font-size: 32rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #333333;
+  line-height: 32rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 16rpx;
+}
+
+.crad_text {
+  width: 396rpx;
+  height: 72rpx;
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 36rpx;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.card_main {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.crad_left_top {
+  width: 360rpx;
+  height: 200rpx;
+}
+
+.crad_right {
+  width: 240rpx;
+  height: 160rpx;
+
+
+}
+
+.crad_image {
+  width: 240rpx;
+  height: 160rpx;
+  margin-left: 30rpx;
+  /* background: linear-gradient(180deg, #599FFF 0%, #C4DDFF 100%); */
+  border-radius: 8rpx;
+}
+
+.crad_right_type {
+  width: 68rpx;
+  height: 34rpx;
+  background-color: #0000004f;
+  color: white;
+  border-radius: 20rpx;
+  font-size: 20rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  margin-left: 190rpx;
+  margin-top: 10rpx;
+}
+
+.crad_right_num {
+  position: absolute;
+  font-size: 22rpx;
+  color: white;
+  margin-top: 130rpx;
+  margin-left: 40rpx;
+  display: flex;
+  /* align-items: center; */
+}

pages/index/subpage/ranking/ranking.wxss

@@ -1,7 +1,8 @@
 /* pages/index/subpage/ranking/ranking.wxss */
 .top {
   width: 750rpx;
-  height: 420rpx;
+  height: 460rpx;
+  
 }
 
 .back {
@@ -38,6 +39,7 @@
 
 .nav {
   height: 96rpx;
+  line-height: 96rpx;
   width: 750rpx;
   display: flex;
   align-items: center;

project.private.config.json

@@ -1,11 +1,11 @@
 {
-  "projectname": "xx",
+  "projectname": "EXEEED",
   "setting": {
     "compileHotReLoad": true,
     "urlCheck": true
   },
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "libVersion": "2.24.2",
+  "libVersion": "2.24.3",
   "condition": {
     "miniprogram": {
       "list": [
@@ -15,6 +15,20 @@
           "query": "",
           "launchMode": "default",
           "scene": 1119
+        },
+        {
+          "name": "",
+          "pathName": "pages/index/subpage/brand/brandDetails/brandDetails",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/index/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }