静态页面

src/pages/index.vue

         <span @click="MainTitleClick()">{{MainHeaderTitle}}</span>
         <a class="iconfont iconjiantoudown" @click="MainTitleClick()" v-if="ShowMainTitleIcon"></a>
       </span>
+      <a class="MainHeaderRight" v-if="ShowMainHeaderRight" @click="MainHeaderRightClick()">
+        <i class="iconfont" :class="MainHeaderRightIcon"></i>
+        <span>{{MainHeaderRightText}}</span>
+      </a>
     </div>
 
     <!-- 内容 -->
   },
   computed: {
     ...mapState({
+      ShowMainHeaderRight: x => x.ShowMainHeaderRight, // 显隐头部右边选项
+      MainHeaderRightIcon: x => x.MainHeaderRightIcon, // 头部右边选项图标
+      MainHeaderRightText: x => x.MainHeaderRightText, // 头部右边选项文本
+      MainHeaderRightClick: x => x.MainHeaderRightClick, // 头部右边选项点击事件
       MainTitleClick: x => x.MainTitleClick, // 页面标题点击事件
       ShowMainTitleIcon: x => x.ShowMainTitleIcon, // 显隐页面标题箭头图标
       ShowMainHeaderBack: x => x.ShowMainHeaderBack, // 显隐头部返回按钮

src/pages/index/PaiLie3DingDan/index.vue

+<template>
+  <div class="Page">
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/index/PaiLie3DingDan/page.scss

+.Page {
+  
+}

src/pages/index/PaiLie5/index.vue

 <template>
   <div class="Page flex-v">
 
-    <div class="Top">
+    <!-- <div class="Top">
       <div class="Time flex-h">
         <div class="Icon">
           <img src="../../../assets/img/icon2.png" class="centerLabel contain" alt="">
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <nav class="flex-h">
       <a class="flex-item" :class="{'active': SelectType === 1}" @click="CutSelectType(1)">自选</a>
                 <span>万位区（至少选择一个）</span>
                 <ul>
                   <li v-for="(item, index) in NumData.WanWei" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'WanWei')">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
                 <span>千位区（至少选择一个）</span>
                 <ul>
                   <li v-for="(item, index) in NumData.QianWei" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'QianWei')">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
                 <span>百位区（至少选择一个）</span>
                 <ul>
                   <li v-for="(item, index) in NumData.BaiWei" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'BaiWei')">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
                 <span>十位区（至少选择一个）</span>
                 <ul>
                   <li v-for="(item, index) in NumData.ShiWei" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'ShiWei')">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
                 <span>个位区（至少选择一个）</span>
                 <ul>
                   <li v-for="(item, index) in NumData.GeWei" :key="index">
-                    <a>{{item.Num}}</a>
-                    <span>{{item.MissNum}}</span>
+                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'GeWei')">{{item.Num}}</a>
+                    <!-- <span>{{item.MissNum}}</span> -->
                   </li>
                 </ul>
               </div>
             <!-- 机选 -->
             <div class="JiXuanArea" v-if="SelectType === 2">
               <nav class="flex-h">
-                <a class="flex-item">注数1</a>
-                <a class="flex-item">注数2</a>
-                <a class="flex-item">注数3</a>
-                <a class="flex-item">注数4</a>
-                <a class="flex-item active">注数5</a>
+                <a class="flex-item" :class="{'active': RandomCount === 1}" @click="CutRandomCount(1)">注数1</a>
+                <a class="flex-item" :class="{'active': RandomCount === 2}" @click="CutRandomCount(2)">注数2</a>
+                <a class="flex-item" :class="{'active': RandomCount === 3}" @click="CutRandomCount(3)">注数3</a>
+                <a class="flex-item" :class="{'active': RandomCount === 4}" @click="CutRandomCount(4)">注数4</a>
+                <a class="flex-item" :class="{'active': RandomCount === 5}" @click="CutRandomCount(5)">注数5</a>
               </nav>
               <ul>
-                <li>
-                  <span>1</span>
-                  <span>2</span>
-                  <span>3</span>
-                  <span>4</span>
-                  <span>5</span>
-                  <a class="iconfont iconjian"></a>
-                </li>
-                <li>
-                  <span>1</span>
-                  <span>2</span>
-                  <span>3</span>
-                  <span>4</span>
-                  <span>5</span>
-                  <a class="iconfont iconjian"></a>
-                </li>
-                <li>
-                  <span>1</span>
-                  <span>2</span>
-                  <span>3</span>
-                  <span>4</span>
-                  <span>5</span>
-                  <a class="iconfont iconjian"></a>
-                </li>
-                <li>
-                  <span>1</span>
-                  <span>2</span>
-                  <span>3</span>
-                  <span>4</span>
-                  <span>5</span>
-                  <a class="iconfont iconjian"></a>
-                </li>
-                <li>
-                  <span>1</span>
-                  <span>2</span>
-                  <span>3</span>
-                  <span>4</span>
-                  <span>5</span>
-                  <a class="iconfont iconjian"></a>
-                </li>
-                <li>
-                  <span>1</span>
-                  <span>2</span>
-                  <span>3</span>
-                  <span>4</span>
-                  <span>5</span>
-                  <a class="iconfont iconjian"></a>
+                <li v-for="(item, index) in RandomRes" :key="index">
+                  <span>{{item.WanWei[0]}}</span>
+                  <span>{{item.QianWei[0]}}</span>
+                  <span>{{item.BaiWei[0]}}</span>
+                  <span>{{item.ShiWei[0]}}</span>
+                  <span>{{item.GeWei[0]}}</span>
+                  <a class="iconfont iconjian" v-if="RandomRes.length > 1" @click="DeleteRandomResItem(index)"></a>
                 </li>
               </ul>
             </div>
 
     <!-- 投注栏 -->
     <div class="Bottom flex-h">
-      <span class="SelectRes">共<em>0</em>注<em>0</em>元，奖金<em>0</em>元</span>
-      <a class="iconfont iconjian" v-if="SelectType === 1"></a>
+      <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>
       <div class="flex-item"></div>
-      <a class="Btn">添加号码蓝</a>
-      <a class="Btn">投注</a>
+      <a class="Btn" :class="{'active': CanCreateRes}" @click="AddCart">添加号码蓝</a>
+      <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
     </div>
 
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
-      SelectType: 1,
-      NumData: {
+      TotalResNum: 0, // 总注数
+      CanCreateRes: false, // 能否生成选注结果
+      SelectType: 1, // 选注类型：1-自选 2-机选
+      RandomCount: 1, // 机选注数
+      RandomRes: [], // 机选结果
+      DataLock: false, // 数据锁
+      NumData: { // 选取数据
         WanWei: [],
         QianWei: [],
         ShiWei: [],
   },
   created () {
     this.EditMainData([ // 配置页面框架数据
-      { name: 'MainTitleClick', value: () => { } },
       { name: 'ShowMainHeader', value: true },
       { name: 'MainHeaderTitle', value: '排列5' },
       { name: 'ShowMainHeaderBack', value: true }
     ...mapMutations([
       'EditMainData' // 配置页面框架数据
     ]),
+    ...mapUserMutations([
+      'AddPaiLie5Cart'
+    ]),
     Init () { // 初始化
 
+    },
+    CreateOrder () { // 去投注
+      if (this.DataLock || !this.CanCreateRes) return
+      this.AddCart()
+      this.$router.push({ name: 'PaiLie5DingDan' })
+    },
+    DeleteRandomResItem (index) { // 删除机选注
+      this.RandomRes.splice(index, 1)
+      this.TotalResNum -= 1
+      this.RandomCount -= 1
+    },
+    CutRandomCount (num) { // 切换机选注数
+      if (this.DataLock) return
+      this.DataLock = true
+      this.RandomRes = []
+      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.RandomRes.push({ ...Res, Count: 1, Type: 'Random' })
+      }
+      this.RandomCount = num
+      this.TotalResNum = num
+      this.CanCreateRes = true
+      this.DataLock = false
+    },
+    AddCart () { // 添加购物车
+      if (this.DataLock || !this.CanCreateRes) return
+      this.DataLock = true
+      if (this.SelectType === 1) { // 自选
+        let Res = {}
+        for (let key in this.NumData) {
+          Res[key] = []
+          for (let n = 0; n < this.NumData[key].length; n++) {
+            if (this.NumData[key][n].Active) {
+              Res[key].push(this.NumData[key][n].Num)
+            }
+          }
+        }
+        this.AddPaiLie5Cart({ ...Res, Count: this.TotalResNum, Type: 'User' })
+        this.EmptySelectArea() // 清空自选选区
+        this.DataLock = false
+      } else { // 机选
+        this.RandomRes.map((item) => {
+          this.AddPaiLie5Cart({ ...item })
+        })
+        this.DataLock = false
+        this.CutRandomCount(this.RandomCount)
+      }
+    },
+    EmptySelectArea () { // 清空自选选区
+      this.CanCreateRes = false
+      this.TotalResNum = 0
+      for (let key in this.NumData) {
+        for (let n = 0; n < this.NumData[key].length; n++) {
+          this.NumData[key][n].Active = false
+        }
+      }
+    },
+    SelectItem (item, type) { // 选择号码
+      if (this.DataLock) return
+      this.DataLock = true
+      item.Active = !item.Active
+      this.CalcTotalRes()
+      this.DataLock = false
+    },
+    CalcTotalRes () { // 计算投注结果
+      let Num = 0
+      let KeyNum = 0
+      for (let key in this.NumData) {
+        KeyNum += 1
+        for (let n = 0; n < this.NumData[key].length; n++) {
+          if (this.NumData[key][n].Active) {
+            Num += 1
+            break
+          }
+        }
+      }
+      this.CanCreateRes = Num >= KeyNum
+      if (this.CanCreateRes) {
+        let Total = 1
+        for (let key in this.NumData) {
+          let Count = 0
+          for (let n = 0; n < this.NumData[key].length; n++) {
+            if (this.NumData[key][n].Active) {
+              Count += 1
+            }
+          }
+          Total *= Count
+        }
+        this.TotalResNum = Total
+      }
     },
     CutSelectType (type) { // 切换选取类型
-      this.SelectType = type
+      if (type !== this.SelectType) {
+        if (type === 1) {
+          this.EmptySelectArea() // 清空自选选区
+        } else {
+          this.RandomRes = []
+          this.RandomCount = 1
+          this.CutRandomCount(this.RandomCount)
+        }
+        this.SelectType = type
+      }
     },
     CreateData () { // 创建数据
       for (let key in this.NumData) {

src/pages/index/PaiLie5/page.scss

                       display: block;
                       text-align: center;
                       border-radius: 100%;
+                      &.active {
+                        background: #ff5200;
+                        border-color: #ff5200;
+                        color: #fff;
+                      }
                     }
                     > span {
                       display: block;
     > .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/PaiLie5DingDan/index.vue

+<template>
+  <div class="Page">
+  </div>
+</template>
+
+<script>
+import { mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
+export default {
+  name: '',
+  data () {
+    return {
+      DataLock: false,
+      PageList: []
+    }
+  },
+  computed: {
+    ...mapUserState({
+      PaiLie5Cart: x => x.PaiLie5Cart
+    })
+  },
+  components: {
+  },
+  created () {
+    this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderRightClick', value: () => { console.log(111) } },
+      { name: 'ShowMainHeaderRight', value: true },
+      { name: 'MainHeaderRightIcon', value: 'iconqingkong' },
+      { name: 'MainHeaderRightText', value: '清空重选' },
+      { name: 'ShowMainHeader', value: true },
+      { name: 'MainHeaderTitle', value: '确认投注' },
+      { name: 'ShowMainHeaderBack', value: true }
+    ])
+    this.PageList = [...this.PaiLie5Cart]
+    console.log(this.PaiLie5Cart.length)
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'EditMainData' // 配置页面框架数据
+    ]),
+    ...mapUserMutations([
+      'AddPaiLie3Cart'
+    ])
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/index/PaiLie5DingDan/page.scss

+.Page {
+  
+}

src/pages/page.scss

         top: 0;
         left: 0.15rem;
       }
+      &.MainHeaderRight {
+        font-size: 0;
+        white-space: nowrap;
+        right: 0.15rem;
+        top: 0;
+        > * {
+          display: inline-block;
+          vertical-align: middle;
+          color: #fff;
+          font-size: 0.12rem;
+          line-height: 0.4rem;
+        }
+        > i {
+          font-size: 0.2rem;
+          margin-right: 0.05rem;
+        }
+      }
     }
   }
   > .MainBody {

src/router/index.js

             path: '/index/PaiLie3', // 排列3
             name: 'PaiLie3',
             component: resolve => (require(['@/pages/index/PaiLie3'], resolve))
+          }, {
+            path: '/index/PaiLie3DingDan', // 排列3订单
+            name: 'PaiLie3DingDan',
+            component: resolve => (require(['@/pages/index/PaiLie3DingDan'], resolve))
           }, {
             path: '/index/PaiLie5', // 排列5
             name: 'PaiLie5',
             component: resolve => (require(['@/pages/index/PaiLie5'], resolve))
+          }, {
+            path: '/index/PaiLie5DingDan', // 排列5订单
+            name: 'PaiLie5DingDan',
+            component: resolve => (require(['@/pages/index/PaiLie5DingDan'], resolve))
           }
         ]
       },

src/store/index.js

 
 const store = new Vuex.Store({
   state: {
+    ShowMainHeaderRight: false, // 显隐头部右边选项
+    MainHeaderRightIcon: null, // 头部右边选项图标
+    MainHeaderRightText: null, // 头部右边选项文本
+    MainHeaderRightClick: () => { }, // 头部右边选项点击事件
     MainTitleClick: () => { }, // 页面标题点击事件
     ShowMainTitleIcon: false, // 显隐页面标题箭头图标
     ShowMainHeaderBack: true, // 显隐头部返回按钮
       state.AllLotteryType = Arr || []
     },
     EditMainData (state, data) { // 修改页面数据
+      state.ShowMainHeaderRight = false
+      state.MainHeaderRightIcon = null
+      state.MainHeaderRightText = null
+      state.MainHeaderRightClick = () => { }
       state.MainTitleClick = () => { }
       state.ShowMainHeader = false
       state.ShowMainTitleIcon = false

src/store/user/index.js

 export default {
   namespaced: true,
   state: {
+    PaiLie3Cart: [], // 排列3购物车
+    PaiLie5Cart: [], // 排列5购物车
     DaLeTouCart: [], // 大乐透购物车
     ShuangSeQiuCart: [], // 双色球购物车
     UserInfo: null, // 用户信息
     },
     EmptyShuangSeQiuCart (state, data) { // 清空双色球购物车
       state.ShuangSeQiuCart = []
+    },
+    AddPaiLie3Cart (state, data) { // 新增排列3购物车
+      state.PaiLie3Cart.push(data)
+    },
+    DeletePaiLie3Cart (state, data) { // 删除排列3购物车
+      state.PaiLie3Cart.splice(data, 1)
+    },
+    EmptyPaiLie3Cart (state, data) { // 清空排列3购物车
+      state.PaiLie3Cart = []
+    },
+    AddPaiLie5Cart (state, data) { // 新增排列5购物车
+      state.PaiLie5Cart.push(data)
+    },
+    DeletePaiLie5Cart (state, data) { // 删除排列5购物车
+      state.PaiLie5Cart.splice(data, 1)
+    },
+    EmptyPaiLie5Cart (state, data) { // 清空排列5购物车
+      state.PaiLie5Cart = []
     }
   },
   actions: {