feat: 流程细节优化

src/common/raffleProbability.js

+function getCommonDivisor(FirstNum,SecondNum) {
+  if (SecondNum == 0) return FirstNum;
+
+  var remainder = parseInt(FirstNum % SecondNum) ;
+
+  return getCommonDivisor(SecondNum, remainder);
+}
+
+
+function getProbability (quantity,coinQuantity) {
+  var divisor = getCommonDivisor(quantity,coinQuantity);
+  var value = quantity/divisor;
+  var value2 = coinQuantity/divisor;
+  //如果分子比分母大说明中奖概率是100%，那么返回中奖概率
+  if(value>=value2) {
+    return coinQuantity+"/"+coinQuantity
+  } else {
+    return value+"/"+value2
+  }
+}
+module.exports = {
+  getProbability:getProbability
+};

src/components/custom/openAnimation.wpy

@@ -90,7 +90,8 @@
       go() {
         this.showAnimation = false;
         //如果得奖了走
-        wx.navigateTo({url:'/pages/prize'})
+        let id = 7;
+        wx.navigateTo({url:'/pages/prize?joinRecordId='+id})
         //如果没得奖走
         //wx.navigateTo({url:'/pages/myraffles'})
       }

src/pages/myraffles.wpy

@@ -101,11 +101,11 @@
     methods: {
       goprize(event) {
         let detail = event.$wx.currentTarget;
-        let id = detail.dataset.id || ''
-        wx.navigateTo({url:'/pages/prize?prizeid='+id});
+        let id = detail.dataset.id || '';
+        wx.navigateTo({url:'/pages/prize?joinRecordId='+id});
       }
     },
-    onLoad (query) {
+    onLoad () {
       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'}},

src/pages/prize.wpy

@@ -3,12 +3,12 @@
     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);
+      width: 400rpx;
+      .van-image {
+        box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
+      }
     }
     .goodsname{
       padding:25rpx 0;
@@ -65,17 +65,19 @@
 <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>
+      <van-image use-loading-slot src="{{prize.photoUrl}}" class="img" width="400rpx" height="400rpx" radius="10rpx">
+        <van-loading slot="loading" type="spinner" size="20" vertical />
+      </van-image>
+      <view class="goodsname">{{prize.name}}</view>
+      <view class="prize-info">中奖概率: {{chance}}</view>
       <view class="prize-info">中奖结果: <text class="red">已中奖</text></view>
     </view>
-    <view class="prize-address">
+    <view class="prize-address" v-show="!prize.cash">
       <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="{{cityValue}}" placeholder="所在地区"  bindtap="onClose" is-link readonly></van-field>
         <van-field value="{{address}}" data-form="address" placeholder="详细地址：如街道、小区、门牌号、楼栋号等" bind:input	="setValue"></van-field>
       </view>
     </view>
@@ -94,34 +96,43 @@
   import wepy from '@wepy/core';
   import Dialog from '../components/vant/dialog/dialog';
   import Notify from '../components/vant/notify/notify';
+  var raffle = require('../common/raffleProbability');
   var area = require('../components/custom/china.js');
   wepy.page({
     data: {
-      goodsimg:'/static/images/test2.png',
+      quantity:0,
+      prize:{},
       name:'',
       phone:'',
       address:'',
+      province:'',
       city:'',
+      country:'',
+      cityValue:'',
       areaList:[],
       showAddress:false,
+      joinRecordId:null,
+      chance:''
     },
     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;
+        if(!this.prize.cash) {
+          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: '领取成功',
@@ -142,7 +153,10 @@
       },
       getaddress(event) {
         let detail = event.$wx.detail.values;
-        this.city = detail[0].name+detail[1].name+detail[2].name
+        this.province = detail[0].name;
+        this.city = detail[1].name;
+        this.country = detail[2].name;
+        this.cityValue = detail[0].name+detail[1].name+detail[2].name
         this.onClose()
       }
     },
@@ -150,7 +164,14 @@
 
     },
     onLoad (query) {
+      let joinRecordId = query.joinRecordId || '';
+      this.joinRecordId = joinRecordId;
+      if(!joinRecordId)  Notify({message: '缺少参数错误！', background:'#FF5D15'});
+      //请求接口得到数据
+      this.prize = {cash:false,name:'Nintendo Switch任天堂游戏机Nintendo Switch任天堂游戏机',photoUrl:'/static/images/test2.png',coinQuantity:5000};
+      this.quantity = 300;
       this.areaList = area.areaList;
+      this.chance = raffle.getProbability(this.quantity,this.prize.coinQuantity);
     },
   });
 </script>
@@ -163,7 +184,9 @@
       "van-area": "../components/vant/area/index",
       "van-popup": "../components/vant/popup/index",
       'van-dialog': '../components/vant/dialog/index',
-      "van-notify": "../components/vant/notify/index"
+      "van-notify": "../components/vant/notify/index",
+      "van-image": "../components/vant/image/index",
+      "van-loading": "../components/vant/loading/index",
     }
   }
 </config>

src/pages/raffle.wpy

@@ -18,10 +18,7 @@
     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;
+    .img .van-image {
       box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
     }
   }
@@ -114,7 +111,9 @@
 <template>
   <view class="raffle-wrapper">
     <view class="raffle-content">
-      <image class="img" src="{{goodsimg}}"></image>
+      <van-image use-loading-slot src="{{goodsimg}}" class="img" width="610rpx" height="610rpx" radius="10rpx">
+        <van-loading slot="loading" type="spinner" size="20" vertical />
+      </van-image>
       <view class="goodsinfo">
         <text class="text">{{goods}}</text>
         <text class="money">{{corn}}克币</text>
@@ -188,7 +187,6 @@
       }
     },
     onLoad (query) {
-      console.log(query);
       let {id, corn, goods, chance, imgsrc, progress} = query;
       if (progress) {
         this.progress = progress;
@@ -206,7 +204,9 @@
   {
     navigationBarTitleText: '参与抽奖',
     "usingComponents": {
-      "van-notify": "../components/vant/notify/index"
+      "van-notify": "../components/vant/notify/index",
+      "van-image": "../components/vant/image/index",
+      "van-loading": "../components/vant/loading/index",
     }
   }
 </config>