feat: 增加参与抽奖页面、我的抽奖列表页面、规则与帮助页面

src/app.wpy

 <style>
   page {
     font-family: 'PingFangSC-Regular';
+    width:100%;
+    height:100%;
+    background-color:#F1F1F1;
   }
 </style>
 <script>
@@ -56,11 +59,15 @@ wepy.app({
 {
     pages: [
       'pages/index',
-      'pages/raffle'
+      'pages/raffle',
+      'pages/prize',
+      'pages/myraffles',
+      'pages/help',
+      'pages/morehelp'
     ],
     window: {
       backgroundTextStyle: 'light',
-      navigationBarBackgroundColor: '#fff',
+      navigationBarBackgroundColor: '#f1f1f1',
       navigationBarTitleText: 'WeChat',
       navigationBarTextStyle: 'black'
     }

src/pages/help.wpy

+<style lang="less">
+  .help-cont {
+    padding:30rpx;
+    padding-top:0;
+    background-color: #fff;
+    .help-title{
+      font-size: 30rpx;
+      color:#333;
+      padding-top:30rpx;
+    }
+    .help-info {
+      color:#666;
+      font-size: 26rpx;
+      padding-left:20rpx;
+      line-height: 40rpx;
+      view {
+        margin-top:15rpx;
+      }
+    }
+  }
+  .help-more{
+    margin-top:20rpx;
+    padding-bottom:50rpx;
+  }
+  .help-button {
+    width: 100%;
+    height:100%;
+    position: absolute;
+    background-color: transparent;
+    border:none;
+    top:0;
+    left:0;
+  }
+  .help-button::after{
+    border:none;
+  }
+</style>
+<template>
+  <view class="help-wrapper">
+    <view class="help-cont">
+      <view class="help-title">如何获得克币？</view>
+      <view class="help-info">
+        <view>1.打卡：每次可获得1克币，每天仅限打卡一次；</view>
+        <view>2.分享：通过分享每次邀请1名新的好友参加，即可获得10克币；</view>
+        <!--<view>3.购买：通过在Luckii购买产品即可获得克币，克币数量根据购买产品价格而定。</view>-->
+      </view>
+      <view class="help-title">如何使用克币？</view>
+      <view class="help-info">
+        <view>1.克币仅限于抽奖活动使用；</view>
+        <view>2.参与一次抽奖，将会消耗所有克币，不支持分次使用；</view>
+        <view>3.克币越多，奖品价值越低，中奖概率越高。</view>
+      </view>
+      <view class="help-title">如何领取奖品？</view>
+      <view class="help-info">
+        <view>1.若中奖产品为现金奖品，我们会直接发放到微信钱包；</view>
+        <view>2.若中奖产品为实物，我们将会在3-5个工作日按照您提供的地址邮寄。</view>
+      </view>
+      <view class="help-title">什么是奖品库存？</view>
+      <view class="help-info">
+        <view>每个奖品都有限定数量，全部抽取完以后，就没有了。（如：1/6代表一共有6个奖品，现在只剩一个，开奖后，这个奖品自动下架。）
+        </view>
+      </view>
+      <view class="help-title">奖品可以购买吗？</view>
+      <view class="help-info">
+        <view>奖品只能抽奖成功后赠送，不支持购买。</view>
+      </view>
+    </view>
+    <view class="help-more">
+      <van-cell title="问题反馈" is-link><button open-type="contact" class="help-button"></button></van-cell>
+      <van-cell title="更多问题" is-link bindtap="tomorehelp"></van-cell>
+    </view>
+  </view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  wepy.page({
+    data: {
+
+    },
+    methods: {
+      tomorehelp(){
+
+        wx.navigateTo({url: '/pages/morehelp'})
+      }
+    },
+
+    onLoad (query) {
+
+    },
+  });
+</script>
+<config>
+  {
+    navigationBarTitleText: '规则与帮助',
+    "usingComponents": {
+      "van-cell": "../components/vant/cell/index",
+    }
+  }
+</config>

src/pages/index.wpy

@@ -185,6 +185,7 @@
     </view>
     <view class="content">
       <view class="leftcont">
+        <button bindtap="toTest">点击去领奖</button>
         <swiper class="list-wrapper" vertical="true" circular="true" display-multiple-items="2" autoplay="true" interval="1500">
           <swiper-item  wx:for="{{adlist}}" wx:key="index" catch:touchmove>
             <view class="imgwrap">
@@ -233,7 +234,7 @@
     <network v-if="!isConnected"></network>
     <!-- <star-animation></star-animation> -->
     <star-animation1 v-if="sign && showAnimation"></star-animation1>
-    <open-animation></open-animation>
+    <!--<open-animation></open-animation>-->
   </view>
 </template>
 
@@ -508,7 +509,10 @@
           url: '/pages/raffle?id=1&progress=70&chance=1/780&corn=50000&imgsrc=/static/images/test2.png&goods=Nintendo Switch任天堂游戏机任天堂游戏机'
         });
 //        this.awards = !this.awards;
-      }
+      },
+      toTest() {
+        wx.navigateTo({url:'/pages/help'})
+      },
     },
 
     created () {

src/pages/morehelp.wpy

+<template>
+  <web-view src="https://luckii.q-gp.com/problems.html"></web-view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  wepy.page({
+    data: {
+
+    }
+  });
+</script>
+<config>
+  {
+    navigationBarTitleText: '更多问题',
+  }
+</config>

src/pages/myraffles.wpy

+<style lang="less">
+  .raffle-item{
+    background-color: #fff;
+    padding:30rpx 0 0 30rpx;
+    overflow: hidden;
+    .item-img{
+      width:150rpx;
+      height:150rpx;
+      float: left;
+      border-radius: 10rpx;
+    }
+    .item-right{
+      margin-left:170rpx;
+      min-height: 150rpx;
+      border-bottom:1rpx solid #E6E6E6;
+      padding-bottom:30rpx;
+      padding-right:30rpx;
+      position: relative;
+    }
+    .item-title {
+      font-size: 26rpx;
+      color: #333;
+      width:70%;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2; //行数
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .item-corn{
+      color:#FF5D15;
+      font-size: 28rpx;
+      margin-top: 45rpx;
+    }
+    .item-status {
+      position: absolute;
+      right:30rpx;
+      top:30%;
+      font-size: 28rpx;
+    }
+    .item-button{
+      height:60rpx;
+      color:#fff;
+      background-color: #FF5D15;
+      border-radius: 10rpx;
+      text-align: center;
+      line-height: 60rpx;
+      font-size: 28rpx;
+    }
+    .grey{
+      color:#999;
+    }
+    .red{
+      color:#FF1212
+    }
+    .green{
+      color:#097A00;
+    }
+  }
+  .raffle-item:last-child {
+    .item-right {
+      border-bottom: none;
+    }
+  }
+</style>
+<template>
+  <view class="raffles-list">
+    <view class="raffle-item">
+      <image src="/static/images/test1.jpg" class="item-img"></image>
+      <view class="item-right">
+        <view class="item-title">Nintendo Switch任天堂游戏机任天堂游戏机</view>
+        <view class="item-corn">花费: 500克币</view>
+        <view class="item-status">
+          <button class="item-button">领取</button>
+        </view>
+      </view>
+    </view>
+    <view class="raffle-item">
+      <image src="/static/images/test1.jpg" class="item-img"></image>
+      <view class="item-right">
+        <view class="item-title">Nintendo Switch任天堂游戏机任天堂游戏机</view>
+        <view class="item-corn">花费: 500克币</view>
+        <view class="item-status">
+          <text class="grey">未中奖</text>
+        </view>
+      </view>
+    </view>
+    <view class="raffle-item">
+      <image src="/static/images/test1.jpg" class="item-img"></image>
+      <view class="item-right">
+        <view class="item-title">Nintendo Switch任天堂游戏机任天堂游戏机</view>
+        <view class="item-corn">花费: 500克币</view>
+        <view class="item-status">
+          <text class="red">已发货</text>
+        </view>
+      </view>
+    </view>
+    <view class="raffle-item">
+      <image src="/static/images/test1.jpg" class="item-img"></image>
+      <view class="item-right">
+        <view class="item-title">Nintendo Switch任天堂游戏机任天堂游戏机</view>
+        <view class="item-corn">花费: 500克币</view>
+        <view class="item-status">
+          <text class="green">待开奖</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  wepy.page({
+    data: {
+      list:[]
+    },
+    methods: {
+
+    },
+    onLoad (query) {
+
+    },
+  });
+</script>
+<config>
+  {
+    navigationBarTitleText: '我的抽奖',
+  }
+</config>

src/pages/prize.wpy

+<style lang="less">
+  .prize-top {
+    background-color: #fff;
+    padding:30rpx 50rpx;
+    .img{
+      width: 400rpx;
+      height: 400rpx;
+      border-radius: 10rpx;
+      display: block;
+      margin:0 auto;
+      box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
+    }
+    .goodsname{
+      padding:25rpx 0;
+      font-size: 28rpx;
+      color:#333;
+    }
+    .prize-info{
+      color:#999;
+      font-size: 26rpx;
+      .red {
+        color:#FF1212;
+      }
+    }
+  }
+  .prize-address {
+    padding-top:50rpx;
+    .address-title {
+      font-size: 32rpx;
+      color: #666;
+      padding-left:30rpx;
+    }
+    .address-cont{
+      margin-top:20rpx;
+    }
+  }
+  .footerheight {
+    height:140rpx;
+  }
+  .footer{
+    width:100%;
+    height: 110rpx;
+    background-color: #fff;
+    position: fixed;
+    bottom:0;
+    left:0;
+    .getprize{
+      position: absolute;
+      width:160rpx;
+      height:70rpx;
+      color:#fff;
+      border-radius: 10rpx;
+      background-color: #FF5D15;
+      right:30rpx;
+      top:20rpx;
+      line-height: 70rpx;
+      text-align: center;
+      font-size: 30rpx;
+    }
+  }
+</style>
+<template>
+  <view class="prize-wrapper">
+    <view class="prize-top">
+      <image class="img" src="{{goodsimg}}"></image>
+      <view class="goodsname">Nintendo Switch任天堂游戏机Nintendo Switch任天堂游戏机</view>
+      <view class="prize-info">中奖概率: 1/300</view>
+      <view class="prize-info">中奖结果: <text class="red">已中奖</text></view>
+    </view>
+    <view class="prize-address">
+      <view class="address-title">添加收货地址</view>
+      <view class="address-cont">
+        <van-field value="{{name}}" data-form="name" placeholder="收货人" bind:input	="setValue"></van-field>
+        <van-field value="{{phone}}" data-form="phone" placeholder="手机号码" bind:input	="setValue"></van-field>
+        <van-field value="{{city}}" placeholder="所在地区"  bindtap="onClose" is-link readonly></van-field>
+        <van-field value="{{address}}" data-form="address" placeholder="详细地址：如街道、小区、门牌号、楼栋号等" bind:input	="setValue"></van-field>
+      </view>
+    </view>
+    <van-popup show="{{ showAddress }}" position="bottom" bind:close="onClose">
+      <van-area area-list="{{ areaList }}" value="110101" bind:confirm="getaddress" bind:cancel="onClose"/>
+    </van-popup>
+    <view class="footerheight"></view>
+    <view class="footer">
+      <button class="getprize" bindtap="goprize">领取</button>
+    </view>
+  </view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  import Dialog from '../components/vant/dialog/dialog';
+  var area = require('../components/custom/china.js');
+  wepy.page({
+    data: {
+      goodsimg:'/static/images/test2.png',
+      name:'',
+      phone:'',
+      address:'',
+      city:'',
+      areaList:[],
+      showAddress:false,
+    },
+    methods: {
+      goprize() {
+        console.log(this.name,this.phone,this.address);
+      },
+      onClose() {
+        this.showAddress = !this.showAddress;
+      },
+      setValue(event){
+        let value = event.$wx.detail;
+        let form = event.$wx.currentTarget.dataset.form;
+        if(form) this[form] = value;
+      },
+      getaddress(event) {
+        let detail = event.$wx.detail.values;
+        this.city = detail[0].name+detail[1].name+detail[2].name
+        this.onClose()
+      }
+    },
+    computed: {
+
+    },
+    onLoad (query) {
+      this.areaList = area.areaList;
+    },
+  });
+</script>
+<config>
+  {
+    navigationBarTitleText: '领取奖品',
+    "usingComponents": {
+      "van-field": "../components/vant/field/index",
+      "van-cell": "../components/vant/cell/index",
+      "van-area": "../components/vant/area/index",
+      "van-popup": "../components/vant/popup/index"
+    }
+  }
+</config>

src/pages/raffle.wpy

 <style lang="less">
-  page {
-    width:100%;
-    height:100%;
-    background-color:#F1F1F1;
-  }
   .raffle-wrapper {
     width:100%;
     height:100%;
@@ -217,9 +212,7 @@
 </script>
 <config>
   {
-    navigationStyle: "default",
     navigationBarTitleText: '参与抽奖',
-    navigationBarBackgroundColor: '#f1f1f1',
     "usingComponents": {
       "van-dialog": "../components/vant/dialog/index"
     }