feat: 抽奖页面代码暂存

src/app.wpy

@@ -56,9 +56,9 @@ wepy.app({
 {
     pages: [
       'pages/index',
+      'pages/raffle'
     ],
     window: {
-      navigationStyle: "custom",
       backgroundTextStyle: 'light',
       navigationBarBackgroundColor: '#fff',
       navigationBarTitleText: 'WeChat',

src/pages/index.wpy

@@ -175,6 +175,7 @@
       <image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
     </view>
     <view class="content">
+      <button bindtap="toRaffle">去抽奖</button>
       <!-- <video-sign title="签"></video-sign> -->
       <view class="leftcont">
         <swiper class="list-wrapper" vertical="true" circular="true" display-multiple-items="2" autoplay="true" interval="1500">
@@ -334,6 +335,11 @@
           url: '/pages/auth'
         });*/
       },
+      toRaffle() {
+        wx.navigateTo({
+          url: '/pages/raffle'
+        });
+      },
       touchStart (event) {
         touchDotX = event.touches[0].pageX; // 获取触摸时的原点
         touchDotY = event.touches[0].pageY;
@@ -527,6 +533,7 @@
       'star-animation1': '~@/components/custom/starAnimation1',
       'open-animation': '~@/components/custom/openAnimation',
     },
+    navigationStyle: "custom",
     "navigateToMiniProgramAppIdList":[
       "wx91d27dbf599dff74"
     ],

src/pages/raffle.wpy

+<style lang="less">
+  page {
+    width:100%;
+    height:100%;
+    background-color:#F1F1F1;
+  }
+  .raffle-wrapper {
+    width:100%;
+    height:100%;
+    background-color:#F1F1F1;
+    padding-top:40rpx;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .raffle-content {
+    background-color: #fff;
+    width: 94%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin:0 auto;
+    padding:50rpx 50rpx 40rpx 50rpx;
+    border-radius: 10rpx;
+    box-shadow:0px 2rpx 20rpx 0px rgba(188,188,188,0.75);
+    .img {
+      width:610rpx;
+      height:610rpx;
+      border-radius: 10rpx;
+      box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
+    }
+  }
+  .goodsinfo {
+    margin-top:15rpx;
+    overflow: hidden;
+    .text {
+      font-size: 28rpx;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2; //行数
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      float: left;
+      text-align: left;
+      width: 65%;
+      color: #333;
+    }
+    .money{
+      float: right;
+      width:30%;
+      color:#FF5D15;
+      font-size: 30rpx;
+      text-align: right;
+      font-weight:bold;
+    }
+  }
+  .raffle-chance {
+    font-size: 24rpx;
+    color:#666;
+    margin-top:20rpx;
+  }
+  .raffle-progress {
+    font-size: 24rpx;
+    color:#666;
+  }
+  .progress {
+    width: 298rpx;
+    height:18rpx;
+    background-color:#fff;
+    border:1px solid #FF5D15;
+    color:#666;
+    display: inline-block;
+    position: relative;
+    top:3rpx;
+    .orange {
+      height:100%;
+      transition:all 1s;
+      background-color: #FF5D15;
+    }
+  }
+  .pronumber{
+    font-size: 20rpx;
+    color:#666;
+    margin-left:10rpx;
+    position: relative;
+    top:-3rpx;
+  }
+  .user-wish {
+    padding-left:35rpx;
+    font-size: 24rpx;
+    color:#aaa;
+    margin-top:25rpx;
+    height:50rpx;
+    line-height: 50rpx;
+    .checkimg {
+      width:24rpx;
+      height:24rpx;
+      vertical-align: middle;
+      margin-right:10rpx;
+    }
+    .checktext{
+      top: 2rpx;
+      position: relative;
+    }
+  }
+  .joinin {
+    width:380rpx;
+    height:70rpx;
+    line-height: 70rpx;
+    background-color: #FF5D15;
+    border-radius:10rpx;
+    margin:0 auto;
+    margin-top:80rpx;
+    font-size: 34rpx;
+    color:#fff;
+  }
+</style>
+<template>
+  <view class="raffle-wrapper">
+    <view class="raffle-content">
+      <image class="img" src="/static/images/test2.png"></image>
+      <view class="goodsinfo">
+        <text class="text">Nintendo Switch任天堂游戏机任天堂游戏机</text>
+        <text class="money">30000克币</text>
+      </view>
+      <view class="raffle-chance">中奖概率: 1/300</view>
+      <view class="raffle-progress">中奖进度:
+        <view class="progress">
+          <view class="orange" style="{{progressStyle}}"></view>
+        </view>
+        <text class="pronumber">{{progress}}%</text>
+      </view>
+    </view>
+    <view class="user-wish" bindtap="check">
+      <image src="{{imgsrc}}" class="checkimg"></image>
+      <text class="checktext">我同意花费所有克币参与抽奖，并承诺购买的商品不再退货。</text>
+    </view>
+    <button class="joinin" open-type="{{opentype}}" bindtap="joinin" bindgetphonenumber="getPhoneNumber" >立即参与</button>
+    <van-dialog id="van-dialog" />
+  </view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  import Dialog from '../components/vant/dialog/dialog';
+  wepy.page({
+    data: {
+      progress:40,
+      progressStyle:'width:40%',
+      isCheck:false,
+    },
+    methods: {
+      check() {
+        this.isCheck = !this.isCheck;
+      },
+      getPhoneNumber(e) {
+        let detail = e.$wx.detail || {};
+        //调用接口将加密数据传给后端，e.$wx.detail整体都传过去
+        //如果数据得到了就跳转
+        if(detail.encryptedData) {
+          Dialog.alert({
+            title: '参与结果',
+            message: '恭喜您参与成功！',
+          })
+        }else {
+          Dialog.alert({
+            title: '参与结果',
+            message: '参与失败，请重新授权！',
+          })
+        }
+      },
+      joinin() {
+        if(!this.isCheck) {
+          Dialog.alert({
+            message: '请先勾选协议！',
+          })
+        }
+      }
+    },
+    computed: {
+      imgsrc() {
+        let imgsrc = '';
+        if(this.isCheck) {
+          imgsrc = '/static/images/selected.png';
+        }else {
+          imgsrc = '/static/images/selectno.png';
+        }
+        return imgsrc
+      },
+      opentype() {
+        if(this.isCheck) {
+          return 'getPhoneNumber'
+        }else {
+          return ''
+        }
+      }
+    },
+    onLoad () {
+    },
+  });
+</script>
+<config>
+  {
+    navigationStyle: "default",
+    navigationBarTitleText: '参与抽奖',
+    navigationBarBackgroundColor: '#f1f1f1',
+    "usingComponents": {
+      "van-dialog": "../components/vant/dialog/index"
+    }
+  }
+</config>