pc

src/main.js

@@ -6,11 +6,14 @@ import router from './router'
 import store from './store'
 import ToolClass from './util/PublicMethod'
 import VueScroller from 'vue-scroller'
+import { Dialog } from 'vant'
 
 Vue.use(VueScroller)
 
 Vue.prototype.ToolClass = ToolClass
 
+Vue.prototype.Dialog = Dialog
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

src/pages/index/PaiLie3/index.vue

@@ -9,7 +9,7 @@
       </div>
     </div>
 
-    <div class="Top">
+    <!-- <div class="Top">
       <div class="Time flex-h">
         <div class="Icon">
           <img src="../../../assets/img/icon7.png" class="centerLabel contain" alt="">
@@ -26,7 +26,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 选区 -->
     <div class="flex-item">
@@ -40,8 +40,8 @@
                 <span>百位区（至少选择一个）</span>
                 <ul>
                   <li v-for="(item, index) in ZhiXuanData.BaiWei" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
@@ -49,8 +49,8 @@
                 <span>十位区（至少选择一个）</span>
                 <ul>
                   <li v-for="(item, index) in ZhiXuanData.ShiWei" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
@@ -58,8 +58,8 @@
                 <span>个位区（至少选择一个）</span>
                 <ul>
                   <li v-for="(item, index) in ZhiXuanData.GeWei" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
@@ -82,7 +82,7 @@
                         <ul>
                           <li v-for="(item, index) in ZuXuan3Data.DanShi2" :key="index">
                             <a>{{item.Num}}</a>
-                            <span>{{item.MissNum}}</span>
+                            <!-- <span>{{item.MissNum}}</span> -->
                           </li>
                         </ul>
                       </div>
@@ -91,7 +91,7 @@
                         <ul>
                           <li v-for="(item, index) in ZuXuan3Data.DanShi1" :key="index">
                             <a>{{item.Num}}</a>
-                            <span>{{item.MissNum}}</span>
+                            <!-- <span>{{item.MissNum}}</span> -->
                           </li>
                         </ul>
                       </div>
@@ -104,7 +104,7 @@
                         <ul>
                           <li v-for="(item, index) in ZuXuan3Data.FuShi" :key="index">
                             <a>{{item.Num}}</a>
-                            <span>{{item.MissNum}}</span>
+                            <!-- <span>{{item.MissNum}}</span> -->
                           </li>
                         </ul>
                       </div>
@@ -121,18 +121,18 @@
                 <span>选择号码（至少选择3个）</span>
                 <ul>
                   <li v-for="(item, index) in ZuXuan6Data" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="ZuXuan6SelectItem(item)">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
               <div class="FastSelect">
                 <span>快速选号</span>
                 <ul>
-                  <li><a>10选8 赔率1.54</a></li>
-                  <li><a>10选7 赔率2.47</a></li>
-                  <li><a>10选6 赔率4.32</a></li>
-                  <li><a>10选5 赔率8.65</a></li>
+                  <li><a @click="ZuXuan6RandomSelect(8, 0)" :class="{'active': ZuXuan6RandomActiveIndex === 0}">10选8 赔率1.54</a></li>
+                  <li><a @click="ZuXuan6RandomSelect(7, 1)" :class="{'active': ZuXuan6RandomActiveIndex === 1}">10选7 赔率2.47</a></li>
+                  <li><a @click="ZuXuan6RandomSelect(6, 2)" :class="{'active': ZuXuan6RandomActiveIndex === 2}">10选6 赔率4.32</a></li>
+                  <li><a @click="ZuXuan6RandomSelect(5, 3)" :class="{'active': ZuXuan6RandomActiveIndex === 3}">10选5 赔率8.65</a></li>
                 </ul>
               </div>
             </div>
@@ -144,24 +144,30 @@
 
     <!-- 投注栏 -->
     <div class="Bottom flex-h">
-      <span class="SelectRes">共<em>0</em>注<em>0</em>元，奖金<em>0</em>元</span>
+      <span class="SelectRes">共<em>{{TotalResNum}}</em>注<em>{{TotalResNum * 2}}</em>元，奖金<em>0</em>元</span>
       <a class="iconfont iconjian"></a>
       <a class="iconfont icongouwuche"></a>
-      <a class="iconfont iconqushi"></a>
+      <!-- <a class="iconfont iconqushi"></a> -->
       <div class="flex-item"></div>
-      <a class="Btn">添加号码蓝</a>
-      <a class="Btn">投注</a>
+      <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateRes">添加号码蓝</a>
+      <a class="Btn" :class="{'active': CanCreateRes}">投注</a>
     </div>
 
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
+      ZuXuan6RandomActiveIndex: null,
+      DataLock: false, // 数据锁
+      ResList: [],
+      TotalResNum: 0, // 总注数
+      CanCreateRes: false, // 能否生成选注结果
       ZhiXuanData: {
         BaiWei: [],
         ShiWei: [],
@@ -201,8 +207,128 @@ export default {
       'EditMainData', // 配置页面框架数据
       'EditMainItemData' // 配置页面框架数据
     ]),
+    ...mapUserMutations([
+      'AddPaiLie3Cart'
+    ]),
     Init () { // 初始化
 
+    },
+    CreateRes () { // 创建投注结果
+      if (this.DataLock || !this.CanCreateRes) return
+      this.DataLock = true
+      if (this.SelectType === 1) { // 直选
+        let Res = {}
+        for (let key in this.ZhiXuanData) {
+          Res[key] = []
+          for (let n = 0; n < this.ZhiXuanData[key].length; n++) {
+            if (this.ZhiXuanData[key][n].Active) {
+              Res[key].push(this.ZhiXuanData[key][n].Num)
+            }
+          }
+        }
+        this.AddPaiLie3Cart({ ...Res, Count: this.TotalResNum, Type: 'ZhiXuan' })
+      } else if (this.SelectType === 2) { // 组选3
+        if (this.ZuXuan3Type === 1) { // 单式
+
+        } else if (this.ZuXuan3Type === 2) { // 复式
+
+        }
+      } else if (this.SelectType === 3) { // 组选6
+
+      }
+      this.DataLock = false
+    },
+    EmptyData (type = 'ZhiXuan', subtype = 'DanShi') { // 清空数据
+      this.CanCreateRes = false
+      this.TotalResNum = 0
+    },
+    CalcZhiXuanRes () { // 计算直选结果
+      if (this.DataLock) return
+      this.DataLock = true
+      let ActiveKeyNum = 0
+      let TotalKeyNum = 0
+      for (let key in this.ZhiXuanData) {
+        TotalKeyNum += 1
+        for (let n = 0; n < this.ZhiXuanData[key].length; n++) {
+          if (this.ZhiXuanData[key][n].Active) {
+            ActiveKeyNum += 1
+            break
+          }
+        }
+      }
+      this.CanCreateRes = ActiveKeyNum >= TotalKeyNum
+      if (this.CanCreateRes) {
+        this.TotalResNum = 1
+        for (let key in this.ZhiXuanData) {
+          let Num = 0
+          for (let n = 0; n < this.ZhiXuanData[key].length; n++) {
+            if (this.ZhiXuanData[key][n].Active) {
+              Num += 1
+            }
+          }
+          this.TotalResNum *= Num
+        }
+      }
+      this.DataLock = false
+    },
+    ZhiXuanSelectItem (item) { // 直选-选择号码
+      if (this.DataLock) return
+      item.Active = !item.Active
+      this.CalcZhiXuanRes() // 计算直选结果
+    },
+    CalcZuXuan6Res () { // 计算组选6结果
+      if (this.DataLock) return
+      this.DataLock = true
+      let Num = 0
+      for (let n = 0; n < this.ZuXuan6Data.length; n++) {
+        if (this.ZuXuan6Data[n].Active) {
+          Num += 1
+        }
+      }
+      this.CanCreateRes = Num >= 3
+      if (this.CanCreateRes) {
+        this.TotalResNum = this.JieCheng(Num) / (this.JieCheng(3) * this.JieCheng(Num - 3))
+      }
+      this.DataLock = false
+    },
+    JieCheng (num) {
+      return num > 0 ? num * this.JieCheng(num - 1) : 1
+    },
+    ZuXuan6SelectItem (item) { // 组选6-选择号码
+      if (this.DataLock) return
+      item.Active = !item.Active
+      this.CalcZuXuan6Res() // 计算组选6结果
+    },
+    ZuXuan6RandomSelect (num, index) { // 组选6机选
+      if (this.DataLock) return
+      this.DataLock = true
+      this.ZuXuan6Data.map((item) => {
+        item.Active = false
+      })
+      this.RandomSelect(9, num).map((item) => {
+        this.ZuXuan6Data[item].Active = true
+      })
+      this.ZuXuan6RandomActiveIndex = index
+      this.CalcZuXuan6Res() // 计算组选6结果
+      this.DataLock = false
+    },
+    RandomSelect (max, num, arr = []) { // 数字区间中选取随机n个数值
+      if (arr.length < num) {
+        let Random = Math.floor(max * Math.random())
+        let Bool = true
+        arr.map((item) => {
+          if (item - 0 === Random) {
+            Bool = false
+          }
+        })
+        if (Bool) {
+          arr.push(Random)
+        }
+        this.RandomSelect(max, num, arr)
+        return arr
+      } else {
+        return arr
+      }
     },
     CutZuXuan3 (type) { // 切换组选3类型
       this.ZuXuan3Type = type
@@ -222,6 +348,7 @@ export default {
       }
     },
     CutSelectType (num) { // 切换选法
+      this.EmptyData(num === 1 ? 'ZhiXuan' : num === 2 ? 'ZuXuan3' : 'ZuXuan6')
       this.SelectType = num
       this.EditMainItemData({ name: 'MainHeaderTitle', value: `排列3-${this.SelectType === 1 ? '直选' : this.SelectType === 2 ? '组选3' : '组选6'}` })
       this.ShowSelectTypeNav = false

src/pages/index/PaiLie3/page.scss

@@ -129,11 +129,16 @@
                     > a {
                       width: 100%;
                       font-size: 0.14rem;
-                      line-height: 0.26rem;
+                      line-height: 0.28rem;
                       border: 0.01rem solid #666;
                       display: block;
                       text-align: center;
                       border-radius: 100%;
+                      &.active {
+                        background: #ff5200;
+                        color: #fff;
+                        border-color: #ff5200;
+                      }
                     }
                     > span {
                       display: block;
@@ -229,11 +234,16 @@
                             > a {
                               width: 100%;
                               font-size: 0.14rem;
-                              line-height: 0.26rem;
+                              line-height: 0.28rem;
                               border: 0.01rem solid #666;
                               display: block;
                               text-align: center;
                               border-radius: 100%;
+                              &.active {
+                                background: #ff5200;
+                                color: #fff;
+                                border-color: #ff5200;
+                              }
                             }
                             > span {
                               display: block;
@@ -282,11 +292,16 @@
                     > a {
                       width: 100%;
                       font-size: 0.14rem;
-                      line-height: 0.26rem;
+                      line-height: 0.28rem;
                       border: 0.01rem solid #666;
                       display: block;
                       text-align: center;
                       border-radius: 100%;
+                      &.active {
+                        background: #ff5200;
+                        color: #fff;
+                        border-color: #ff5200;
+                      }
                     }
                     > span {
                       display: block;
@@ -376,15 +391,23 @@
     > .Btn {
       line-height: 0.28rem;
       font-size: 0.13rem;
-      color: #ff5200;
-      border: 0.01rem solid #ff5200;
+      color: #ccc;
+      border: 0.01rem solid #ccc;
       border-radius: 0.02rem;
       margin-left: 0.15rem;
       min-width: 0.7rem;
       text-align: center;
       &:last-child {
         color: #fff;
-        background: #ff5200;
+        background: #ccc;
+      }
+      &.active {
+        color: #ff5200;
+        border: 0.01rem solid #ff5200;
+        &:last-child {
+          color: #fff;
+          background: #ff5200;
+        }
       }
     }
   }

src/pages/index/PaiLie5/index.vue

@@ -110,7 +110,7 @@
     <div class="Bottom flex-h">
       <span class="SelectRes">共<em>{{TotalResNum}}</em>注<em>{{TotalResNum * 2}}</em>元，奖金<em>0</em>元</span>
       <a class="iconfont iconjian" v-if="SelectType === 1" @click="EmptySelectArea"></a>
-      <a class="iconfont icongouwuche"></a>
+      <router-link :to="{ name: 'PaiLie5DingDan' }" class="iconfont icongouwuche"></router-link>
       <div class="flex-item"></div>
       <a class="Btn" :class="{'active': CanCreateRes}" @click="AddCart">添加号码蓝</a>
       <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>

src/pages/index/PaiLie5DingDan/index.vue

@@ -1,5 +1,128 @@
 <template>
-  <div class="Page">
+  <div class="Page flex-v">
+
+    <a class="Store flex-h" @click="ShowStore = true">
+      <div class="flex-item">
+        <div>
+          <span>投注门店：请选择</span>
+        </div>
+      </div>
+      <span>查看更多</span>
+      <i class="iconfont iconjiantouright"></i>
+    </a>
+
+    <div class="flex-item">
+      <div>
+
+        <div class="Title">
+          <span>订单信息</span>
+        </div>
+
+        <span v-if="!PageList.length">购物车空空如也</span>
+
+        <ul>
+          <li v-for="(item, index) in PageList" :key="index">
+            <a class="iconfont iconguanbi Close" @click="DeleteItem(item, index)"></a>
+            <div class="Title">
+              <span>{{item.Type === 'Random' ? '机选' : '自选'}}普通</span>
+              <span>{{item.Count}}注{{item.Count * 2}}元</span>
+            </div>
+            <ul>
+              <li v-for="(subItem, subIndex) in item.WanWei" :key="`WanWei-${subIndex}`">
+                <div class="centerLabel">
+                  <span>{{subItem}}</span>
+                  <span>万</span>
+                </div>
+              </li>
+              <li v-for="(subItem, subIndex) in item.QianWei" :key="`QianWei-${subIndex}`">
+                <div class="centerLabel">
+                  <span>{{subItem}}</span>
+                  <span>千</span>
+                </div>
+              </li>
+              <li v-for="(subItem, subIndex) in item.BaiWei" :key="`BaiWei-${subIndex}`">
+                <div class="centerLabel">
+                  <span>{{subItem}}</span>
+                  <span>百</span>
+                </div>
+              </li>
+              <li v-for="(subItem, subIndex) in item.ShiWei" :key="`ShiWei-${subIndex}`">
+                <div class="centerLabel">
+                  <span>{{subItem}}</span>
+                  <span>十</span>
+                </div>
+              </li>
+              <li v-for="(subItem, subIndex) in item.GeWei" :key="`GeWei-${subIndex}`">
+                <div class="centerLabel">
+                  <span>{{subItem}}</span>
+                  <span>个</span>
+                </div>
+              </li>
+            </ul>
+          </li>
+        </ul>
+
+        <div class="Tips">
+          <span>排列五官方出票时间：</span>
+          <span>周一至周五 9:00 ~ 24:00 周六周日 9:00 ~ 次日1:00</span>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="Bottom">
+      <div class="flex-h">
+        <div class="flex-item">
+          <div>
+            <span><em>{{TotalCount}}</em>注<em>{{TotalCount * 2 * Multiple}}</em>元</span>
+          </div>
+        </div>
+        <span>
+          <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
+          <input type="number" disabled="disabled" v-model="Multiple">
+          <span>倍</span>
+          <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
+        </span>
+      </div>
+      <div class="flex-h">
+        <a @click="$router.go(-1)">自选号码</a>
+        <a @click="CutRandomCount(1)">机选一注</a>
+        <a class="flex-item">确认投注</a>
+      </div>
+    </div>
+
+    <div class="Layer" v-if="ShowStore">
+      <div class="centerLabel">
+        <span>推荐店铺：</span>
+        <ul>
+          <li v-for="(item, index) in 3" :key="index" class="flex-h">
+            <div class="flex-item">
+              <div>
+                <span>彩票供销社{{index + 1}}</span>
+              </div>
+            </div>
+            <i class="iconfont iconweigouxuan"></i>
+          </li>
+        </ul>
+        <span>选择附近店铺：</span>
+        <ul class="ScrollList">
+          <li v-for="(item, index) in 20" :key="index" class="flex-h">
+            <div class="flex-item">
+              <div>
+                <span>彩票供销社{{index + 1}}</span>
+              </div>
+            </div>
+            <span>200m</span>
+            <i class="iconfont iconweigouxuan"></i>
+          </li>
+        </ul>
+        <div class="Bottom flex-h">
+          <a class="flex-item" @click="ShowStore = false">取消</a>
+          <a class="flex-item active">确定</a>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -10,8 +133,18 @@ export default {
   name: '',
   data () {
     return {
+      ShowStore: false,
+      Multiple: 1,
+      TotalCount: 0,
       DataLock: false,
-      PageList: []
+      PageList: [],
+      NumData: { // 选取数据
+        WanWei: [],
+        QianWei: [],
+        ShiWei: [],
+        BaiWei: [],
+        GeWei: []
+      }
     }
   },
   computed: {
@@ -23,7 +156,7 @@ export default {
   },
   created () {
     this.EditMainData([ // 配置页面框架数据
-      { name: 'MainHeaderRightClick', value: () => { console.log(111) } },
+      { name: 'MainHeaderRightClick', value: () => { this.EmptyCart() } },
       { name: 'ShowMainHeaderRight', value: true },
       { name: 'MainHeaderRightIcon', value: 'iconqingkong' },
       { name: 'MainHeaderRightText', value: '清空重选' },
@@ -31,8 +164,7 @@ export default {
       { name: 'MainHeaderTitle', value: '确认投注' },
       { name: 'ShowMainHeaderBack', value: true }
     ])
-    this.PageList = [...this.PaiLie5Cart]
-    console.log(this.PaiLie5Cart.length)
+    this.Init()
   },
   mounted () {
     this.$nextTick(() => {
@@ -43,8 +175,62 @@ export default {
       'EditMainData' // 配置页面框架数据
     ]),
     ...mapUserMutations([
-      'AddPaiLie3Cart'
-    ])
+      'AddPaiLie5Cart',
+      'DeletePaiLie5Cart',
+      'EmptyPaiLie5Cart'
+    ]),
+    Init () { // 初始化
+      this.PageList = [...this.PaiLie5Cart]
+      this.CalcTotalCount()
+      this.CreateData()
+    },
+    EmptyCart () { // 清空购物车
+      this.Dialog.confirm({
+        message: '确认清空购物车？'
+      }).then(() => {
+        this.EmptyPaiLie5Cart()
+        this.PageList = []
+        this.TotalCount = 0
+      })
+    },
+    CalcTotalCount () { // 计算总注数
+      this.TotalCount = 0
+      this.PageList.map((item) => {
+        this.TotalCount += item.Count
+      })
+    },
+    DeleteItem (item, index) { // 删除单注
+      if (this.DataLock) return
+      this.DataLock = true
+      this.DeletePaiLie5Cart(index)
+      this.PageList.splice(index, 1)
+      this.TotalCount -= item.Count
+      this.DataLock = false
+    },
+    CreateData () { // 创建数据
+      for (let key in this.NumData) {
+        this.NumData[key] = []
+      }
+      for (let n = 0; n < 10; n++) {
+        for (let key in this.NumData) {
+          this.NumData[key].push({ Num: n, MissNum: 0, Active: false })
+        }
+      }
+    },
+    CutRandomCount (num) { // 切换机选注数
+      if (this.DataLock) return
+      this.DataLock = true
+      for (let n = 0; n < num; n++) {
+        let Res = {}
+        for (let key in this.NumData) {
+          Res[key] = [this.NumData[key][Math.floor(this.NumData[key].length * Math.random())].Num]
+        }
+        this.AddPaiLie5Cart({ ...Res, Count: 1, Type: 'Random' })
+        this.PageList.unshift({ ...Res, Count: 1, Type: 'Random' })
+      }
+      this.CalcTotalCount()
+      this.DataLock = false
+    }
   }
 }
 </script>

src/pages/index/PaiLie5DingDan/page.scss

@@ -1,3 +1,344 @@
 .Page {
-  
+  background: #f8f8f8;
+  position: relative;
+  > .Store {
+    background: #fff;
+    padding: 0.15rem;
+    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+    position: relative;
+    overflow: hidden;
+    align-items: center;
+    z-index: 2;
+    > div {
+      position: relative;
+      > div {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.15rem;
+          font-weight: bold;
+          color: #333;
+          line-height: 0.2rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+    > span {
+      font-size: 0.12rem;
+      color: #999;
+      margin-left: 0.1rem;
+    }
+    > i {
+      font-size: 0.12rem;
+      color: #999;
+    }
+  }
+  > div.flex-item {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    > div {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      > .Title {
+        position: relative;
+        overflow: hidden;
+        text-align: center;
+        margin-top: 0.15rem;
+        &::after {
+          content: "";
+          display: block;
+          width: 70%;
+          height: 0.01rem;
+          background: #eee;
+          z-index: 1;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          -webkit-transform: translate(-50%, -50%);
+        }
+        > span {
+          display: inline-block;
+          position: relative;
+          z-index: 2;
+          background: #f8f8f8;
+          font-size: 0.15rem;
+          font-weight: bold;
+          line-height: 0.2rem;
+          padding: 0 0.1rem;
+        }
+      }
+      > span {
+        font-size: 0.12rem;
+        color: #999;
+        display: block;
+        line-height: 0.2rem;
+        text-align: center;
+        margin-top: 0.2rem;
+      }
+      > ul {
+        padding: 0.15rem;
+        > li {
+          background: #fff;
+          padding: 0.15rem;
+          box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+          position: relative;
+          overflow: hidden;
+          border-radius: 0.06rem;
+          margin-top: 0.15rem;
+          &:first-child {
+            margin-top: 0;
+          }
+          > a.Close {
+            display: inline-block;
+            position: absolute;
+            right: 0;
+            top: 0;
+            z-index: 2;
+            font-size: 0.16rem;
+            color: #999;
+          }
+          > .Title {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              margin-left: 0.1rem;
+              &:first-child {
+                margin-left: 0;
+              }
+            }
+          }
+          > ul {
+            font-size: 0;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              width: 0.3rem;
+              height: 0.3rem;
+              position: relative;
+              overflow: hidden;
+              border-radius: 100%;
+              background: #ff5200;
+              margin-top: 0.1rem;
+              margin-right: 0.05rem;
+              > div {
+                width: 100%;
+                > span {
+                  font-size: 0.12rem;
+                  color: #fff;
+                  line-height: 0.14rem;
+                  display: block;
+                  text-align: center;
+                }
+              }
+            }
+          }
+        }
+      }
+      > div.Tips {
+        padding: 0.15rem 0;
+        > span {
+          display: block;
+          font-size: 0.1rem;
+          color: #666;
+          line-height: 0.2rem;
+          text-align: center;
+        }
+      }
+    }
+  }
+  > div.Bottom {
+    background: #fff;
+    padding: 0.15rem;
+    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    > div {
+      &:nth-child(1) {
+        align-items: center;
+        > div {
+          position: relative;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              display: block;
+              font-size: 0.13rem;
+              color: #333;
+              font-weight: bold;
+              line-height: 0.2rem;
+              > em {
+                font-size: 0.13rem;
+                color: #d91d36;
+                font-weight: bold;
+                line-height: 0.2rem;
+              }
+            }
+          }
+        }
+        > span {
+          display: inline-block;
+          margin-left: 0.1rem;
+          position: relative;
+          overflow: hidden;
+          border: 0.01rem solid #f7f7f7;
+          border-radius: 0.03rem;
+          font-size: 0;
+          white-space: nowrap;
+          > * {
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 0.14rem;
+            color: #999;
+            line-height: 0.24rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border: none;
+              border-right: 0.01rem solid #f7f7f7;
+            }
+          }
+          > a {
+            width: 0.24rem;
+            text-align: center;
+          }
+          > input {
+            border: none;
+            width: 0.35rem;
+            text-align: center;
+            color: #333;
+            &:disabled {
+              color: #333;
+            }
+          }
+          > span {
+            border: none;
+            margin-right: 0.03rem;
+          }
+        }
+      }
+      &:nth-child(2) {
+        align-items: center;
+        margin-top: 0.15rem;
+        > a {
+          font-size: 0.15rem;
+          line-height: 0.4rem;
+          border: 0.01rem solid #ff5200;
+          color: #ff5200;
+          border-radius: 0.02rem;
+          margin-left: 0.15rem;
+          padding: 0 0.1rem;
+          text-align: center;
+          &:first-child {
+            margin-left: 0;
+          }
+          &.flex-item {
+            color: #fff;
+            background: #ff5200;
+          }
+        }
+      }
+    }
+  }
+  > div.Layer {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.7);
+    > div {
+      width: 80%;
+      background: #fff;
+      border-radius: 0.06rem;
+      position: relative;
+      overflow: hidden;
+      padding-top: 0.15rem;
+      > span {
+        font-size: 0.14rem;
+        font-weight: bold;
+        color: #000;
+        line-height: 0.3rem;
+        display: block;
+        text-indent: 0.15rem;
+      }
+      > ul {
+        padding: 0 0.15rem;
+        position: relative;
+        overflow: hidden;
+        &.ScrollList {
+          max-height: 2.5rem;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+        }
+        > li {
+          align-items: center;
+          border-top: 0.01rem solid #f7f7f7;
+          &:first-child {
+            border: none;
+          }
+          > div {
+            position: relative;
+            > div {
+              width: 100%;
+              position: relative;
+              > span {
+                display: block;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: 0.14rem;
+                color: #333;
+                line-height: 0.42rem;
+              }
+            }
+          }
+          > span {
+            font-size: 0.14rem;
+            color: #999;
+            margin-right: 0.1rem;
+          }
+          > i {
+            font-size: 0.2rem;
+            color: #999;
+            &.active {
+              color: #ff5200;
+            }
+          }
+        }
+      }
+      > .Bottom {
+        border-top: 0.01rem solid #f7f7f7;
+        > a {
+          font-size: 0.16rem;
+          line-height: 0.42rem;
+          text-align: center;
+          border-left: 0.01rem solid #f7f7f7;
+          &.active {
+            color: #ff5200;
+          }
+          &:first-child {
+            border: none;
+          }
+        }
+      }
+    }
+  }
 }

src/store/user/index.js

@@ -44,7 +44,7 @@ export default {
       state.UserInfo = data || null
     },
     AddDaLeTouCart (state, data) { // 新增大乐透购物车
-      state.DaLeTouCart.push(data)
+      state.DaLeTouCart.unshift(data)
     },
     DeleteDaLeTouCart (state, data) { // 删除大乐透购物车
       state.DaLeTouCart.splice(data, 1)
@@ -53,7 +53,7 @@ export default {
       state.DaLeTouCart = []
     },
     AddShuangSeQiuCart (state, data) { // 新增双色球购物车
-      state.ShuangSeQiuCart.push(data)
+      state.ShuangSeQiuCart.unshift(data)
     },
     DeleteShuangSeQiuCart (state, data) { // 删除双色球购物车
       state.ShuangSeQiuCart.splice(data, 1)
@@ -62,7 +62,7 @@ export default {
       state.ShuangSeQiuCart = []
     },
     AddPaiLie3Cart (state, data) { // 新增排列3购物车
-      state.PaiLie3Cart.push(data)
+      state.PaiLie3Cart.unshift(data)
     },
     DeletePaiLie3Cart (state, data) { // 删除排列3购物车
       state.PaiLie3Cart.splice(data, 1)
@@ -71,7 +71,7 @@ export default {
       state.PaiLie3Cart = []
     },
     AddPaiLie5Cart (state, data) { // 新增排列5购物车
-      state.PaiLie5Cart.push(data)
+      state.PaiLie5Cart.unshift(data)
     },
     DeletePaiLie5Cart (state, data) { // 删除排列5购物车
       state.PaiLie5Cart.splice(data, 1)