feat(welfareGo) 首页 列表 详情页

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/welfareMall/index/index",
     "pages/activityList/activityList",
     "pages/activityInfo/activityInfo",
     "pages/myCoupons/myCoupons",
@@ -10,7 +11,10 @@
     "pages/welfareMall/historical/historical",
     "pages/welfareMall/order/orderCompletion",
     "pages/welfareMall/refund/refund",
-    "pages/welfareMall/feedback/feedback"
+    "pages/welfareMall/feedback/feedback",
+    "pages/welfareMall/activityList/activityList",
+    "pages/welfareMall/activityInfo/activityInfo"
+    
   ],
   "window": {
     "backgroundTextStyle": "light",
@@ -19,5 +23,23 @@
     "navigationBarTextStyle": "black"
   },
   "style": "v2",
-  "sitemapLocation": "sitemap.json"
-}
+  "sitemapLocation": "sitemap.json",
+  "tabBar": {
+    "color": "#1b1b1b",
+    "selectedColor": "#1b1b1b",
+    "backgroundColor": "#ffffff",
+    "list": [  {
+      "text": "首页",
+      "pagePath": "pages/welfareMall/index/index",
+      "selectedIconPath": "images/welfareMall/home-active.png",
+      "iconPath": "images/welfareMall/home.png"
+  },
+  {
+      "text": "我的",
+      "pagePath": "pages/welfareMall/personal/personal",
+      "selectedIconPath": "images/welfareMall/user-active.png",
+      "iconPath": "images/welfareMall/user.png"
+  }
+  ]
+  }
+}

app.wxss

@@ -27,3 +27,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.over-ellipsis-two{
+overflow: hidden;
+display: -webkit-box;
+-webkit-box-orient: vertical;
+-webkit-line-clamp: 2;
+}

pages/welfareMall/activityInfo/activityInfo.js

@@ -0,0 +1,66 @@
+// pages/welfareMall/activityInfo/activityInfo.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/welfareMall/activityInfo/activityInfo.json

@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    
+  },
+  "navigationBarBackgroundColor": "#FFFFFF",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "券包详情",
+  "backgroundColor": "#FFFFFF",
+  "backgroundTextStyle": "light"
+}

pages/welfareMall/activityInfo/activityInfo.wxml

@@ -0,0 +1,58 @@
+
+<image src="https://dy.shpr.top/welfareGo/coupon_info.png" mode="widthFix" class="top_img"></image>
+
+<view class="flex-row info">
+  <view class="info_left flex-column">
+    <view class="info_name over-ellipsis">圣诞优惠券包两地分居案例</view>
+
+    <view class="info_coupon_num">3张代金券、3张折扣券</view>
+    <view class="flex-row">
+
+      <view class="flex-row">
+      <image src="/images/welfareMall/right_1.png" class="right_icon"></image>
+      <view class="right_text">仅支持整单</view>
+      </view>
+      <view class="flex-row">
+      <image src="/images/welfareMall/right_1.png" class="right_icon"></image>
+      <view class="right_text">过期自动退</view>
+      </view>
+      <view class="flex-row">
+      <image src="/images/welfareMall/right_1.png" class="right_icon"></image>
+      <view class="right_text">退款说明</view>
+      </view>
+
+    </view>
+  </view>
+
+  <view class="info_right flex-column">
+  <view class="info_right_top">8.89元</view>
+  <view class="info_right_bottom">价值￥999</view>
+  </view>
+</view>
+
+<view  class="bottom_title flex-column">
+<view class="flex-row bottom_title_top">
+<image src="/images/welfareMall/bag_content.png" class="bottom_icon"></image>
+<view class="bottom_tilte_text">礼包内容</view>
+</view>
+<view class="bottom_title_b">代金券x3 , 折扣券X3</view>
+</view>
+
+<view  class="bottom_title flex-column">
+<view class="flex-row bottom_title_top">
+<image src="/images/welfareMall/buy_info.png" class="bottom_icon"></image>
+<view class="bottom_tilte_text">购买须知</view>
+</view>
+<view class="bottom_title_b">1、本券有效期为自购买起30天 2、本券不可兑现现金 3、本券可兑换范围XXXXXXX</view>
+</view>
+
+<view  class="bottom_title flex-column" >
+<view class="flex-row bottom_title_top">
+<image src="/images/welfareMall/use_info.png" class="bottom_icon"></image>
+<view class="bottom_tilte_text">使用说明</view>
+</view>
+<view class="bottom_title_b">该券仅在XX小程序内使用，一单可用一张券。 该券仅在XX小程序内使用，一单可用一张券。 该券仅在XX小程序内使用，一单可用一张</view>
+</view>
+
+
+<!-- <view class="go_buy">立即抢购</view> -->

pages/welfareMall/activityInfo/activityInfo.wxss

@@ -0,0 +1,117 @@
+Page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: #FFFFFF;
+  /* padding-bottom: 150px; */
+  
+}
+
+/* 头图的样式 */
+.top_img {
+  width: 375px;
+  /* height: 241px; */
+}
+.info{
+  width: 345px;
+  height: 118px;
+  justify-content: space-between!important;
+}
+.info_left{
+  width: 243px;
+  height: 118px;
+  justify-content: space-between!important;
+
+}
+.info_right{
+  width: 102px;
+  height: 118px;
+  background-image: url(https://dy.shpr.top/welfareGo/price_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;  
+}
+.info_name{
+  height: 25px;
+  line-height: 25px;
+font-size: 24px;
+font-weight: bold;
+color: #444444;
+}
+.info_coupon_num{
+  font-size: 12px;
+  font-weight: 500;
+  color: #A0A0A0;
+}
+.right_text{
+  font-size: 12px;
+  font-weight: 400;
+  color: #A0A0A0;
+  margin-right: 2px;
+}
+.right_icon{
+  width: 13px;
+  height: 13px;
+  margin-right: 3px;
+}
+.info_right{
+  align-items: center!important;
+ 
+}
+.info_right_top{
+height: 30px;
+font-size: 28px;
+font-weight: bold;
+color: #B01717;
+margin-top: 24px;
+}
+.info_right_bottom{
+height: 15px;
+font-size: 12px;
+font-weight: 500;
+text-decoration: line-through;
+color: #B01717;
+margin-top: 8px;
+}
+.bottom_title{
+  width: 345px;
+  margin-top: 35px;
+}
+.bottom_icon{
+  width: 20px;
+  height: 20px;
+}
+.bottom_tilte_text{
+
+height: 20px;
+line-height: 20px;
+font-size: 18px;
+font-weight: bold;
+color: #444444;
+margin-left: 8px;
+}
+.bottom_title_b{
+  margin-top: 17px;
+
+font-size: 14px;
+font-weight: 500;
+color: #A0A0A0;
+margin-left: 28px;
+}
+
+.go_buy{
+  width: 316px;
+  height: 49px;
+  line-height: 49px;
+  font-size: 22px;
+  font-weight: 500;
+  color: #FFFFFF;
+  background-color: #B01717;
+  border-radius: 25px;
+  text-align: center;
+  position: fixed;
+  bottom: 50px;
+}

pages/welfareMall/activityList/activityList.js

@@ -0,0 +1,82 @@
+// pages/welfareMall/activityList/activityList.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+      type:1
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  gotoFree:function () {
+    this.setData({
+      type:1
+    })
+  },
+  gotoPay:function () {
+    this.setData({
+      type:2
+    })
+  },
+  goCouponDetail:function(){
+        
+    wx.navigateTo({
+      url: '/pages/welfareMall/activityInfo/activityInfo',
+    })
+  },
+})

pages/welfareMall/activityList/activityList.json

@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    
+  },
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "超值券包",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+}

pages/welfareMall/activityList/activityList.wxml

@@ -0,0 +1,41 @@
+<view class="top_banner flex-row">
+  <view class="top_banner_item flex-column" bindtap="gotoFree">
+    <view class="t_b_i_title">免费券包</view>
+    <view class="t_b_i_border {{type==1?'active':''}}"></view>
+  </view>
+
+  <view class="top_banner_item flex-column" bindtap="gotoPay">
+    <view class="t_b_i_title">特惠券包</view>
+    <view class="t_b_i_border {{type==2?'active':''}}"></view>
+  </view>
+  
+</view>
+
+
+<view class="coupon_item flex-row">
+    <image src="https://dy.shpr.top/welfareGo/index_top.png" class="coupon_item_img"></image>
+    <view class="coupon_item_right flex-column">
+    <view class="flex-column">
+      <view class="coupon_name over-ellipsis-two">圣诞优惠券包</view>
+      <view class="coupon_num">含3张代金券、3张折扣券</view>
+    </view>
+      <view class="coupon_i_r_bottom flex-row">
+        <view class="coupon_price">价值 ￥99</view>
+        <view class="coupon_buy" bindtap="goCouponDetail">99.99元抢</view>
+      </view>
+    </view>
+  </view>
+
+  <view class="coupon_item flex-row">
+    <image src="https://dy.shpr.top/welfareGo/index_top.png" class="coupon_item_img"></image>
+    <view class="coupon_item_right flex-column">
+    <view class="flex-column">
+      <view class="coupon_name over-ellipsis-two">圣诞优惠券包</view>
+      <view class="coupon_num">含3张代金券、3张折扣券</view>
+    </view>
+      <view class="coupon_i_r_bottom flex-row">
+        <view class="coupon_price">价值 ￥99</view>
+        <view class="coupon_buy" bindtap="goCouponDetail">99.99元抢</view>
+      </view>
+    </view>
+  </view>

pages/welfareMall/activityList/activityList.wxss

@@ -0,0 +1,94 @@
+Page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: #F7F7F7;
+}
+.top_banner{
+  width: 375px;
+  height: 49px;
+  background: #FFFFFF;
+  justify-content: space-around!important;
+  align-items: flex-end!important;
+}
+.top_banner_item{
+  width: 60px;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: center;
+  color: #000000;
+  justify-content: end!important;
+  align-items: center!important;
+  margin-bottom: 8px;
+}
+
+.t_b_i_border{
+  width: 45px;
+  height: 2px;
+  margin-top: 5px;
+}
+.active{
+  background: #B01717;
+  border-radius: 1px;
+}
+
+
+
+.coupon_item{
+  height: 119px;
+  width: 358px;
+  margin-top: 12px;
+  background-color: #FFFFFF;
+  border-radius: 5px;
+}
+
+.coupon_item_img{
+  width: 120px;
+  height: 91px;
+  border-radius: 5px;
+  margin-left: 13px;
+}
+.coupon_item_right{
+  width: 200px;
+  height: 91px;
+  margin-left: 13px;
+  box-sizing: border-box;
+  padding-top: 5px;
+  justify-content: space-between!important;
+}
+.coupon_name{
+font-size: 14px;
+font-weight: 700;
+color: #010101;
+line-height:15px ;
+}
+.coupon_num{
+height: 11px;
+font-size: 11px;
+font-weight: 500;
+color: #A0A0A0;
+margin-top: 6px;
+}
+
+.coupon_i_r_bottom{
+  justify-content: space-between!important;
+}
+.coupon_price{
+font-size: 11px;
+font-weight: 500;
+color: #B01717;
+}
+.coupon_buy{
+  width: 80px;
+height: 29px;
+line-height: 29px;
+background: #B01717;
+border-radius: 14px;
+color: #ffffff;
+text-align: center;
+font-size: 15px;
+}

pages/welfareMall/index/index.js

@@ -0,0 +1,92 @@
+// pages/welfareMall/index/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+   //跳转超值券包
+  goToCoupon:function(){
+        
+    wx.navigateTo({
+      url: '/pages/welfareMall/activityList/activityList',
+    })
+  },
+
+  goToDraw:function(){
+    // wx.navigateTo({
+    //   url: '/pages/welfareMall/activityList/activityList',
+    // })
+  },
+
+  goToSign:function(){
+    // wx.navigateTo({
+    //   url: '/pages/welfareMall/activityList/activityList',
+    // })
+  },
+  goCouponDetail:function(){
+        
+    wx.navigateTo({
+      url: '/pages/welfareMall/activityInfo/activityInfo',
+    })
+  },
+})

pages/welfareMall/index/index.json

@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    
+  },
+  "navigationBarBackgroundColor": "#F7F7F7",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "福利GO",
+  "backgroundColor": "#F7F7F7",
+  "backgroundTextStyle": "light"
+}

pages/welfareMall/index/index.wxml

@@ -0,0 +1,55 @@
+<image src="https://dy.shpr.top/welfareGo/index_top.png" mode="widthFix" class="top_img"></image>
+
+<view class="banner_list flex-row">
+  <view class="banner_item flex-column" bindtap="goToCoupon">
+    <image class="b_i_img" src="/images/welfareMall/coupon_bags.png"></image>
+    <view class="b_i_text">超值券包</view>
+  </view>
+
+  <view class="banner_item flex-column" bindtap="goToDraw">
+    <image class="b_i_img" src="/images/welfareMall/luck_draws.png"></image>
+    <view class="b_i_text">抽奖领券</view>
+  </view>
+
+  <view class="banner_item flex-column" bindtap="goToSign">
+    <image class="b_i_img" src="/images/welfareMall/signs.png"></image>
+    <view class="b_i_text">签到领券</view>
+  </view>
+
+</view>
+
+<view class="coupon_list flex-column">
+  <view class="c_l_top flex-row">
+    <view class="c_l_top_l">推荐优惠</view>
+    <view class="c_l_top_r" bindtap="goToCoupon">更多</view>
+  </view>
+
+  <view class="coupon_item flex-row">
+    <image src="https://dy.shpr.top/welfareGo/index_top.png" class="coupon_item_img"></image>
+    <view class="coupon_item_right flex-column">
+    <view class="flex-column">
+      <view class="coupon_name over-ellipsis-two">圣诞优惠券包家乐鸡粉拉开就龙卷可浪费结案率司法局阿里司法局阿萨德了</view>
+      <view class="coupon_num">含3张代金券、3张折扣券</view>
+    </view>
+      <view class="coupon_i_r_bottom flex-row">
+        <view class="coupon_price">价值 ￥99</view>
+        <view class="coupon_buy" bindtap="goCouponDetail">99.99元抢</view>
+      </view>
+    </view>
+  </view>
+
+  <view class="coupon_item flex-row">
+    <image src="https://dy.shpr.top/welfareGo/index_top.png" class="coupon_item_img"></image>
+    <view class="coupon_item_right flex-column">
+    <view class="flex-column">
+      <view class="coupon_name over-ellipsis-two">圣诞优惠券包</view>
+      <view class="coupon_num">含3张代金券、3张折扣券</view>
+    </view>
+      <view class="coupon_i_r_bottom flex-row">
+        <view class="coupon_price">价值 ￥99</view>
+        <view class="coupon_buy" bindtap="goCouponDetail">99.99元抢</view>
+      </view>
+    </view>
+  </view>
+</view>
+

pages/welfareMall/index/index.wxss

@@ -0,0 +1,134 @@
+Page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: #F7F7F7;
+}
+
+/* 头图的样式 */
+.top_img {
+  width: 338px;
+  margin-top: 14px;
+}
+
+/* banner的样式 */
+.banner_list {
+  width: 338px;
+  height: 74px;
+  background: #FFFFFF;
+  border-radius: 5px;
+  margin-top: 15px;
+  justify-content: space-around !important;
+}
+
+.banner_item {
+  width: 50px;
+  text-align: center;
+  justify-content: space-between!important;
+  align-items: center!important;
+
+}
+
+.b_i_img {
+  width: 38px;
+  height: 38px;
+  margin-top: 6px;
+}
+
+.b_i_text {
+  width: 48px;
+  height: 12px;
+  line-height: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #303030;
+  margin-bottom: 10px;
+}
+
+/* 券包的样式 */
+.coupon_list {
+  /* min-height: 360px; */
+  background: #FFFFFF;
+  border-radius: 5px;
+  margin-top: 13px;
+  box-sizing: border-box;
+  padding: 20px 17px;
+  margin-bottom: 60px;
+}
+.c_l_top{
+  width: 100%;
+  height: 18px;
+  justify-content: space-between!important;
+
+}
+
+.c_l_top_l{
+  width: 60px;
+
+line-height: 18px;
+font-size: 14px;
+font-weight: 700;
+color: #010101;
+text-align: left;
+}
+.c_l_top_r{
+width: 25px;
+line-height: 18px;
+font-size: 11px;
+font-weight: 400;
+color: #A0A0A0;
+text-align: right;
+}
+.coupon_item{
+  height: 91px;
+  margin-top: 18px;
+}
+.coupon_item_img{
+  width: 112px;
+  height: 91px;
+  border-radius: 5px;
+}
+.coupon_item_right{
+  width: 174px;
+  height: 91px;
+  margin-left: 17px;
+  box-sizing: border-box;
+  padding-top: 5px;
+  justify-content: space-between!important;
+}
+.coupon_name{
+font-size: 14px;
+font-weight: 700;
+color: #010101;
+line-height:15px ;
+}
+.coupon_num{
+height: 11px;
+font-size: 11px;
+font-weight: 500;
+color: #A0A0A0;
+margin-top: 6px;
+}
+
+.coupon_i_r_bottom{
+  justify-content: space-between!important;
+}
+.coupon_price{
+font-size: 11px;
+font-weight: 500;
+color: #B01717;
+}
+.coupon_buy{
+  width: 80px;
+height: 29px;
+line-height: 29px;
+background: #B01717;
+border-radius: 14px;
+color: #ffffff;
+text-align: center;
+font-size: 15px;
+}

pages/welfareMall/personal/personal.json

@@ -1,6 +1,6 @@
 {
   "usingComponents": {
-    "tab-bar": "../components/tabbar"
+   
   },
   "navigationBarBackgroundColor": "#FFF2F3",
   "navigationBarTitleText": ""

pages/welfareMall/personal/personal.wxml

@@ -86,5 +86,3 @@ var toHide = function(array) {
 }
 module.exports.toHide = toHide;
 </wxs>
-<!-- 底部导航 -->
-<tab-bar />

project.private.config.json

@@ -53,6 +53,24 @@
           "pathName": "pages/welfareMall/refund/refund",
           "query": "id=undefined",
           "scene": null
+        },
+        {
+          "name": "福利go ",
+          "pathName": "pages/welfareMall/index/index",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "超值券包",
+          "pathName": "pages/welfareMall/activityList/activityList",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "券包详情",
+          "pathName": "pages/welfareMall/activityInfo/activityInfo",
+          "query": "",
+          "scene": null
         }
       ]
     }