Merge branch 'feature/uipage' into 'master'

Feature/uipage

See merge request !10

src/app.wpy

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

src/common/wxRequest.js

@@ -21,7 +21,7 @@ const request = (url, options) => {
   }
 
   const promise = new Promise((resolve, reject) => {
-    wepy.request({
+    /*wepy.request({
       url: url,
       data: options.data,
       method: options.method,
@@ -37,7 +37,7 @@ const request = (url, options) => {
       fail: res => {
         reject(res);
       }
-    });
+    });*/
   });
   return promise;
 };

src/components/custom/openAnimation.wpy

@@ -30,9 +30,9 @@
               <image class="star-image" src="/static/images/star@2x.png"></image>
             </div>
             <div class="fail-content" v-if="!isWin">
-              <div class="des">很遗憾，未中奖</div>  
+              <div class="des">很遗憾，未中奖</div>
               <div class="des">感谢您的参与!</div>
-            </div>  
+            </div>
             <div class="success-content" v-if="isWin">
               <div class="des">恭喜您中奖!</div>
               <image class="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590418868788&di=5f7d14c51ea4d224c68d2f84b528c6f0&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2413142997%2C2945797382%26fm%3D214%26gp%3D0.jpg"></image>
@@ -40,7 +40,7 @@
             </div>
             <div class="dialog-footer">
               <button class="btn" @tap="go">立即查看</button>
-              <button class="btn" @tap="go">再次挑战</button>
+              <button class="btn" @tap="hideAnimation">再次挑战</button>
             </div>
           </div>
         </div>
@@ -84,8 +84,15 @@
           }, 500);
         }, 2000);
       },
+      hideAnimation (){
+        this.showAnimation = false;
+      },
       go() {
         this.showAnimation = false;
+        //如果得奖了走
+        wx.navigateTo({url:'/pages/prize'})
+        //如果没得奖走
+        //wx.navigateTo({url:'/pages/myraffles'})
       }
     },
     created() {

src/components/custom/popup.wpy

@@ -20,8 +20,8 @@
     },
     data: {
       menus: [
-        { img: '/static/images/awards@2x.png', title: '我的抽奖', path: '/pages/awards' },
-        { img: '/static/images/feedback@2x.png', title: '规则与帮助', path: '/pages/feedback' },
+        { img: '/static/images/awards@2x.png', title: '我的抽奖', path: '/pages/myraffles' },
+        { img: '/static/images/feedback@2x.png', title: '规则与帮助', path: '/pages/help' },
         { img: '/static/images/help@2x.png', title: '问题反馈', path: '/pages/help' }
       ],
       show: false,
@@ -138,7 +138,7 @@
     }
     100% {
       transform: translate3d(0, -5%, 0);
-      opacity: 0; 
+      opacity: 0;
     }
   }
 

src/pages/feedback.wpy

-<style lang="less">
-
-</style>
-<template>
-  <view>问题反馈</view>
-</template>
-<script>
-  import wepy from '@wepy/core';
-
-  wepy.page({
-
-  });
-</script>

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>帮助页</view>
+  <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

@@ -168,7 +168,6 @@
 </wxs>
 <template>
   <view class="video-wrapper">
-    <van-dialog id="van-dialog" />
     <view id="myvideo">
       <van-notify id="van-notify" />
       <video-list :videoList.sync="videoList" :total="total" bindchange="changeVideo">
@@ -231,7 +230,7 @@
       </view>
     </view>
     <network v-if="isConnected === false"></network>
-    <!-- <open-animation :isWin="true"></open-animation> -->
+     <open-animation :isWin="true"></open-animation>
     <popup @showMenu="showMenu" :showMenus="showMenus"></popup>
     <!-- <shared-popup></shared-popup> -->
   </view>
@@ -244,7 +243,6 @@
   import store from '../store';
   import { mapState, mapActions } from '@wepy/x';
   import wepy from '@wepy/core';
-  import Dialog from '../components/vant/dialog/dialog';
   import Notify from '../components/vant/notify/notify';
   wepy.page({
     store,
@@ -520,6 +518,7 @@
         wx.navigateTo({
           url: '/pages/raffle?id=1&progress=70&chance=1/780&corn=50000&imgsrc=/static/images/test2.png&goods=Nintendo Switch任天堂游戏机任天堂游戏机'
         });
+//        this.awards = !this.awards;
       },
       showMenu: function(v) {
         console.log(v);
@@ -626,7 +625,6 @@
       'van-button': '../components/vant/button/index',
       'video-list': '~@/components/custom/videolist',
       'van-icon': '../components/vant/icon/index',
-      'van-dialog': '../components/vant/dialog/index',
       'video-sign': '~@/components/custom/sign',
       'video-gold': '~@/components/custom/sign',
       'video-share': '~@/components/custom/sign',

src/pages/awards.wpy → src/pages/morehelp.wpy

-<style lang="less">
-
-</style>
 <template>
-  <view>我的抽奖</view>
+  <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">
+  .raffles-list{
+    padding-bottom:30rpx;
+  }
+  .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>
+<wxs module="prize">
+  function computClass (status) {
+    var cls=['','green','grey','','red','red'];
+    var index = status.value || 0;
+    console.log(status)
+    return cls[index]
+  };
+  module.exports = {
+    computClass:computClass
+  }
+</wxs>
+<template>
+  <view class="raffles-list">
+    <view class="raffle-item" wx:for="{{list}}" wx:key="index">
+      <image src="{{item.prize.photoUrl}}" class="item-img"></image>
+      <view class="item-right">
+        <view class="item-title">{{item.prize.name}}</view>
+        <view class="item-corn">花费: {{item.quantity}}克币</view>
+        <view class="item-status">
+          <button data-id="{{item.id}}" class="item-button" bindtap="goprize"  v-if="item.status.value==3">领取</button>
+          <text class="{{prize.computClass(item.status)}}" v-else>{{item.status.name}}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  wepy.page({
+    data: {
+      list:[]
+    },
+    methods: {
+      goprize(event) {
+        let detail = event.$wx.currentTarget;
+        let id = detail.dataset.id || ''
+        wx.navigateTo({url:'/pages/prize?prizeid='+id});
+      }
+    },
+    onLoad (query) {
+      this.list = [
+        {id:1,status:{name:'待开奖',value:1},quantity:500,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
+        {id:2,status:{name:'未中奖',value:2},quantity:200,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
+        {id:3,status:{name:'待领取',value:3},quantity:300,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
+        {id:4,status:{name:'未发货',value:4},quantity:400,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
+        {id:5,status:{name:'已发货',value:5},quantity:500,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
+        ];
+    },
+  });
+</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;
+    }
+  }
+  .van-picker .van-picker__cancel,.van-picker .van-picker__confirm{
+    color:#FF5D15;
+  }
+</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" title="请选择地区"/>
+    </van-popup>
+    <view class="footerheight"></view>
+    <view class="footer">
+      <button class="getprize" bindtap="goprize">领取</button>
+    </view>
+    <van-dialog id="van-dialog" confirmButtonColor="#FF5D15"/>
+    <van-notify id="van-notify" />
+  </view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  import Dialog from '../components/vant/dialog/dialog';
+  import Notify from '../components/vant/notify/notify';
+  var area = require('../components/custom/china.js');
+  wepy.page({
+    data: {
+      goodsimg:'/static/images/test2.png',
+      name:'',
+      phone:'',
+      address:'',
+      city:'',
+      areaList:[],
+      showAddress:false,
+    },
+    methods: {
+      goprize() {
+        if(!this.name){
+          Notify({message: '请填写收货人', background:'#FF5D15'});
+          return;
+        }
+        if(!this.phone){
+          Notify({message: '请填写手机号码', background:'#FF5D15'});
+          return;
+        }
+        if(!this.city){
+          Notify({message: '请选择所在地区', background:'#FF5D15'});
+          return;
+        }
+        if(!this.address){
+          Notify({message: '请填写详细地址', background:'#FF5D15'});
+          return;
+        }
+        Dialog.alert({
+          title: '领取成功',
+          message: '您所领取的奖品我们将在3到5个工作日内寄出，请您耐心等待，感谢您的参与!',
+        }).then(() => {
+          wx.reLaunch({url:'/pages/index'})
+          // on confirm
+        });
+        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",
+      'van-dialog': '../components/vant/dialog/index',
+      "van-notify": "../components/vant/notify/index"
+    }
+  }
+</config>

src/pages/raffle.wpy

 <style lang="less">
-  page {
-    width:100%;
-    height:100%;
-    background-color:#F1F1F1;
-  }
   .raffle-wrapper {
     width:100%;
     height:100%;
@@ -68,6 +63,7 @@
     height:18rpx;
     background-color:#fff;
     border:1px solid #FF5D15;
+    border-radius: 4rpx;
     color:#666;
     display: inline-block;
     position: relative;
@@ -136,12 +132,12 @@
       <text class="checktext">我同意花费所有克币参与抽奖，并承诺购买的商品不再退货。</text>
     </view>
     <button class="joinin" open-type="{{opentype}}" bindtap="joinin" bindgetphonenumber="getPhoneNumber" >立即参与</button>
-    <van-dialog id="van-dialog" />
+    <van-notify id="van-notify" />
   </view>
 </template>
 <script>
   import wepy from '@wepy/core';
-  import Dialog from '../components/vant/dialog/dialog';
+  import Notify from '../components/vant/notify/notify';
   wepy.page({
     data: {
       progress: 0,
@@ -159,33 +155,24 @@
       },
       getPhoneNumber(e) {
         let detail = e.$wx.detail || {};
-        // 调用接口将加密数据传给后端，e.$wx.detail整体都传过去
-        // 如果数据得到了就跳转
-        console.log(detail, 111);
-        if (detail.encryptedData) {
-          Dialog.alert({
-            title: '参与结果',
-            message: '恭喜您参与成功！'
-          });
-        } else {
-          Dialog.alert({
-            title: '参与结果',
-            message: '参与失败，请重新授权！'
-          });
+        //调用接口将加密数据传给后端，e.$wx.detail整体都传过去
+        //如果数据得到了就跳转
+        if(detail.encryptedData) {
+          Notify({message: '恭喜您参与成功!',background:'#FF5D15'})
+        }else {
+          Notify({message: '参与失败，请重新授权!',background:'#FF5D15'})
         }
       },
       joinin() {
-        if (!this.isCheck) {
-          Dialog.alert({
-            message: '请先勾选协议！'
-          });
+        if(!this.isCheck) {
+          Notify({message: '请先勾选协议!', background:'#FF5D15'})
         }
       }
     },
     computed: {
       imgsrc() {
-        let imgsrc = '';
-        if (this.isCheck) {
+        let imgsrc = '/static/images/selected.png';
+        if(this.isCheck) {
           imgsrc = '/static/images/selected.png';
         } else {
           imgsrc = '/static/images/selectno.png';
@@ -217,11 +204,9 @@
 </script>
 <config>
   {
-    navigationStyle: "default",
     navigationBarTitleText: '参与抽奖',
-    navigationBarBackgroundColor: '#f1f1f1',
     "usingComponents": {
-      "van-dialog": "../components/vant/dialog/index"
+      "van-notify": "../components/vant/notify/index"
     }
   }
 </config>