静态页面

src/pages/Register/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="Page">
+
+    <!-- 背景 -->
+    <div class="TopContainer">
+      <span class="centerLabel">欢迎来到牛彩！</span>
+    </div>
+
+    <!-- 表单 -->
+    <ul class="Form">
+      <li class="flex-h">
+        <i class="iconfont iconshouji"></i>
+        <div class="flex-item">
+          <div>
+            <input type="number" placeholder="请输入您的手机号码" v-model="Phone">
+          </div>
+        </div>
+      </li>
+      <li class="flex-h">
+        <i class="iconfont iconmima"></i>
+        <div class="flex-item">
+          <div>
+            <input type="password" placeholder="请输入密码" v-model="Password">
+          </div>
+        </div>
+      </li>
+      <li class="flex-h">
+        <i class="iconfont iconmima"></i>
+        <div class="flex-item">
+          <div>
+            <input type="number" placeholder="请输入验证码" v-model="Code">
+          </div>
+        </div>
+        <a v-if="TimeNum === 60" @click="GetCode">获取验证码</a>
+        <span v-else>{{TimeNum > 9 ? TimeNum : `0${TimeNum}`}}s后重新获取</span>
+      </li>
+      <li class="flex-h">
+        <i class="iconfont iconshouji"></i>
+        <div class="flex-item">
+          <div>
+            <input type="number" placeholder="请输入邀请码" v-model="InviteCode">
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <span>已有账号？ <router-link :to="{ name: 'SignIn' }">去登录</router-link></span>
+
+    <div class="Btn">
+      <a @click="ToReg" :class="{'active': this.IsPhone(this.Phone) && this.Code !== '' && this.Password !== ''}">开始使用</a>
+    </div>
+
+    <!-- 三方登录 -->
+    <!-- <div class="OtherSignIn">
+      <span>
+        <span>第三方账号登录</span>
+      </span>
+      <div>
+        <a class="iconfont iconzhifubao"></a>
+        <a class="iconfont iconweixin"></a>
+      </div>
+    </div> -->
+
+  </div>
+</template>
+
+<script>
+// import md5 from 'js-md5'
+import { mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapUserActions } = createNamespacedHelpers('user')
+export default {
+  name: '',
+  data () {
+    return {
+      Phone: '',
+      Code: '',
+      InviteCode: '',
+      Password: '',
+      DataLock: false,
+      Timer: null,
+      TimeNum: 60
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.EditMainData([])
+    this.Init()
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'EditMainData' // 配置页面框架数据
+    ]),
+    ...mapUserActions([
+      'UserRegister',
+      'GetRegPhoneCode',
+      'CheckRegPhoneCode'
+    ]),
+    Init () { // 初始化
+      // this.GetRegPhoneCode({ urlData: { phone: 18267901393 } })
+    },
+    ToReg () { // 去注册
+      if (this.DataLock || !this.IsPhone(this.Phone) || this.Code === '' || this.Password === '') return
+      this.DataLock = true
+      this.CheckRegPhoneCode({ urlData: { phone: this.Phone }, queryData: { captcha: this.Code } }).then((res) => {
+        this.UserRegister({
+          data: {
+            captcha: this.Code,
+            name: this.Phone,
+            password: this.Password,
+            referralCode: this.InviteCode,
+            phone: this.Phone
+          }
+        }).then((res) => {
+        }).catch((res) => {
+          this.Dialog.alert({
+            title: '错误',
+            message: res.data.message
+          })
+        })
+        this.DataLock = false
+      }).catch((res) => {
+        this.Dialog.alert({
+          title: '错误',
+          message: res.data.message
+        })
+        this.DataLock = false
+      })
+    },
+    IsPhone (str) { // 校验手机号
+      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
+      return !!myreg.test(str)
+    },
+    GetCode () { // 获取手机验证码
+      if (this.DataLock || this.TimeNum !== 60 || !this.IsPhone(this.Phone)) return
+      this.DataLock = false
+      window.clearInterval(this.Timer)
+      this.GetRegPhoneCode({ urlData: { phone: this.Phone } }).then(() => {
+        this.DataLock = false
+        window.setInterval(() => {
+          if (this.TimeNum) {
+            this.TimeNum -= 1
+          } else {
+            window.clearInterval(this.Timer)
+            this.TimeNum = 60
+          }
+        }, 1000)
+      }).catch((res) => {
+        this.Dialog.alert({
+          title: '错误',
+          message: res.data.message
+        })
+        this.DataLock = false
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/Register/page.scss

@@ -0,0 +1,142 @@
+.Page {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  > .TopContainer {
+    width: 100%;
+    padding-bottom: 46.4%;
+    position: relative;
+    overflow: hidden;
+    background-image: linear-gradient(to top right, #fb5f59, #fd9757);
+    > span {
+      width: 100%;
+      font-size: 0.22rem;
+      color: #fff;
+      line-height: 0.3rem;
+      text-indent: 0.35rem;
+      font-weight: bold;
+    }
+  }
+  > span {
+    display: block;
+    font-size: 0.14rem;
+    line-height: 0.2rem;
+    white-space: nowrap;
+    padding-left: 0.15rem;
+    margin-top: 0.15rem;
+    > a {
+      font-size: 0.14rem;
+      color: #ff5200;
+      line-height: 0.2rem;
+    }
+  }
+  > .Form {
+    padding: 0 0.15rem;
+    margin-top: 0.2rem;
+    > li {
+      padding: 0.15rem 0;
+      position: relative;
+      overflow: hidden;
+      align-items: center;
+      border-bottom: 0.01rem solid #f7f7f7;
+      > * {
+        margin-left: 0.05rem;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+      > i {
+        font-size: 0.18rem;
+        line-height: 0.3rem;
+        color: #ff5200;
+      }
+      > div {
+        > div {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          > input {
+            width: 100%;
+            display: block;
+            font-size: 0.14rem;
+            line-height: 0.2rem;
+          }
+        }
+      }
+      > a {
+        font-size: 0.14rem;
+        color: #ff5200;
+      }
+      > span {
+        font-size: 0.14rem;
+        color: #ccc;
+      }
+    }
+  }
+  > .Btn {
+    padding: 0 0.15rem;
+    margin-top: 0.5rem;
+    > a {
+      display: block;
+      font-size: 0.16rem;
+      color: #fff;
+      background: #ccc;
+      line-height: 0.42rem;
+      border-radius: 0.06rem;
+      text-align: center;
+      &.active {
+        background: #ff5200;
+      }
+    }
+  }
+  > .OtherSignIn {
+    margin-top: 0.4rem;
+    padding: 0 0.77rem;
+    > span {
+      display: block;
+      text-align: center;
+      position: relative;
+      text-align: center;
+      &::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 0.01rem;
+        background: #f7f7f7;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        position: absolute;
+        z-index: 1;
+      }
+      > span {
+        display: inline-block;
+        position: relative;
+        z-index: 2;
+        font-size: 0.12rem;
+        color: #666;
+        line-height: 0.2rem;
+        background: #fff;
+        padding: 0 0.1rem;
+      }
+    }
+    > div {
+      margin-top: 0.2rem;
+      font-size: 0;
+      white-space: nowrap;
+      text-align: center;
+      padding-bottom: 0.4rem;
+      > a {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 0.4rem;
+        margin-left: 0.28rem;
+        color: #32b508;
+        &:first-child {
+          margin-left: 0;
+          color: #09a7e4;
+        }
+      }
+    }
+  }
+}

src/pages/SignIn/index.vue

@@ -12,7 +12,7 @@
         <i class="iconfont iconshouji"></i>
         <div class="flex-item">
           <div>
-            <input type="number" placeholder="请输入您的手机号码">
+            <input type="number" placeholder="请输入您的手机号码" v-model="Phone">
           </div>
         </div>
       </li>
@@ -20,28 +20,20 @@
         <i class="iconfont iconmima"></i>
         <div class="flex-item">
           <div>
-            <input type="number" placeholder="请输入验证码">
-          </div>
-        </div>
-        <a>获取验证码</a>
-        <span>59s后重新获取</span>
-      </li>
-      <li class="flex-h">
-        <i class="iconfont iconshouji"></i>
-        <div class="flex-item">
-          <div>
-            <input type="number" placeholder="请输入邀请码">
+            <input type="password" placeholder="请输入密码" v-model="Password">
           </div>
         </div>
       </li>
     </ul>
 
+    <span>没有注册账号？ <router-link :to="{ name: 'Register' }">去注册</router-link></span>
+
     <div class="Btn">
-      <a>开始使用</a>
+      <a :class="{'active': Phone !== '' && Password !== ''}" @click="ToSignIn">登录</a>
     </div>
 
     <!-- 三方登录 -->
-    <div class="OtherSignIn">
+    <!-- <div class="OtherSignIn">
       <span>
         <span>第三方账号登录</span>
       </span>
@@ -49,33 +41,59 @@
         <a class="iconfont iconzhifubao"></a>
         <a class="iconfont iconweixin"></a>
       </div>
-    </div>
+    </div> -->
 
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import md5 from 'js-md5'
+import { mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
+      Phone: '',
+      Password: '',
+      DataLock: false
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo // 用户信息
+    })
   },
   components: {
   },
   created () {
+    this.EditMainData([])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    ...mapUserActions([
+      'SignIn'
+    ]),
     ...mapMutations([
       'EditMainData' // 配置页面框架数据
-    ])
+    ]),
+    ToSignIn () { // 登录
+      if (this.Phone === '' || this.Password === '' || this.DataLock) return
+      this.DataLock = true
+      this.SignIn({ data: { password: md5(this.Password), userName: this.Phone } }).then(() => { // 登录
+        if (this.UserInfo !== null) {
+          window.localStorage.niucaiusername = this.Password
+          window.localStorage.niucaiuserpassword = this.Phone
+          this.$router.push({ name: 'index' })
+        }
+        this.DataLock = false
+      }).catch(() => {
+        this.DataLock = false
+      })
+    }
   }
 }
 </script>

src/pages/SignIn/page.scss

@@ -16,6 +16,19 @@
       font-weight: bold;
     }
   }
+  > span {
+    display: block;
+    font-size: 0.14rem;
+    line-height: 0.2rem;
+    white-space: nowrap;
+    padding-left: 0.15rem;
+    margin-top: 0.15rem;
+    > a {
+      font-size: 0.14rem;
+      color: #ff5200;
+      line-height: 0.2rem;
+    }
+  }
   > .Form {
     padding: 0 0.15rem;
     margin-top: 0.2rem;
@@ -66,10 +79,13 @@
       display: block;
       font-size: 0.16rem;
       color: #fff;
-      background: #ff5200;
+      background: #ccc;
       line-height: 0.42rem;
       border-radius: 0.06rem;
       text-align: center;
+      &.active {
+        background: #ff5200;
+      }
     }
   }
   > .OtherSignIn {

src/pages/WoDe/GeRenSheZhi/SheZhi/index.vue

@@ -10,12 +10,13 @@
         <i class="iconfont iconjiantouright"></i>
       </router-link>
     </ul>
-    <a>退出登录</a>
+    <a @click="SignOut">退出登录</a>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
@@ -40,7 +41,16 @@ export default {
   methods: {
     ...mapMutations([
       'EditMainData' // 配置页面框架数据
-    ])
+    ]),
+    ...mapUserMutations([
+      'EmptyUserInfo'
+    ]),
+    SignOut () { // 登出
+      this.EmptyUserInfo()
+      window.localStorage.removeItem('niucaiusername')
+      window.localStorage.removeItem('niucaiuserpassword')
+      this.$router.push({ name: 'SignIn' })
+    }
   }
 }
 </script>

src/pages/WoDe/UserCenter/index.vue

@@ -5,9 +5,10 @@
     <div class="TopContainer">
       <div class="centerLabel">
         <div class="Icon">
-          <img src="" class="centerLabel cover" alt="">
+          <img v-if="UserInfo !== null" :src="UserInfo.avatar" class="centerLabel cover" alt="">
         </div>
-        <router-link :to="{ name: 'SignIn' }">点击注册/登录</router-link>
+        <router-link :to="{ name: 'SignIn' }" v-if="UserInfo === null">点击注册/登录</router-link>
+        <span v-else>{{UserInfo.name}}</span>
       </div>
     </div>
 
@@ -32,7 +33,8 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
@@ -47,6 +49,9 @@ export default {
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo // 用户信息
+    })
   },
   components: {
   },

src/pages/WoDe/UserCenter/page.scss

@@ -30,6 +30,18 @@
         border-radius: 0.3rem;
         line-height: 0.3rem;
       }
+      > span {
+        width: 1.2rem;
+        display: block;
+        text-align: center;
+        margin: 0.1rem auto 0;
+        // background: rgba(255, 255, 255, 0.2);
+        font-size: 0.14rem;
+        font-weight: bold;
+        color: #fff;
+        border-radius: 0.3rem;
+        line-height: 0.3rem;
+      }
     }
   }
   > .List {

src/pages/WoDe/WoDeCaiPiao/index.vue

@@ -3,28 +3,28 @@
     <scroller :on-refresh="Refresh">
       <div class="Container">
         <ul>
-          <li v-for="(item, index) in UserOrderList" :key="index">
+          <li v-for="(item, index) in UserBettingList" :key="index">
             <div class="Time">
               <span>下单时间：{{item.createDate}}</span>
-              <span>{{item.dateNum}}</span>
+              <span>{{item.issueNo}}</span>
             </div>
             <div class="flex-h">
               <div class="Icon">
-                <img v-if="item.typeId === 'zq'" src="../../../assets/img/icon3.png" class="centerLabel cover" alt="">
-                <img v-if="item.typeId === 'lq'" src="../../../assets/img/icon6.png" class="centerLabel cover" alt="">
-                <img v-if="item.typeId === 'dlt'" src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
-                <img v-if="item.typeId === 'ssq'" src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
-                <img v-if="item.typeId === 'pl3'" src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
-                <img v-if="item.typeId === 'pl5'" src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
+                <img v-if="item.lotteryId === 'zq'" src="../../../assets/img/icon3.png" class="centerLabel cover" alt="">
+                <img v-if="item.lotteryId === 'lq'" src="../../../assets/img/icon6.png" class="centerLabel cover" alt="">
+                <img v-if="item.lotteryId === 'lottery'" src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
+                <img v-if="item.lotteryId === 'double-color'" src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
+                <img v-if="item.lotteryId === 'p3'" src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
+                <img v-if="item.lotteryId === 'p5'" src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
               </div>
               <div class="flex-item">
-                <span>{{item.type}}</span>
-                <span>{{item.amount}}元</span>
+                <span>{{item.lotteryName}}</span>
+                <span>{{item.totalPrice}}元</span>
               </div>
             </div>
             <div class="flex-h">
               <div class="flex-item">
-                <span>订单号：{{item.orderNum}}</span>
+                <span>订单号：{{null}}</span>
               </div>
               <span>{{item.status}}</span>
             </div>
@@ -37,16 +37,22 @@
 
 <script>
 import { mapMutations, createNamespacedHelpers } from 'vuex'
-const { mapState: mapUserState } = createNamespacedHelpers('user')
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
+      DataLock: false, // 数据锁
+      PageData: {
+        pageNum: 1,
+        pageSize: 15
+      },
+      HasNextPage: true
     }
   },
   computed: {
     ...mapUserState({
-      UserOrderList: x => x.UserOrderList // 用户订单
+      UserBettingList: x => x.UserBettingList // 用户投注列表
     })
   },
   components: {
@@ -57,6 +63,7 @@ export default {
       { name: 'MainHeaderTitle', value: '我的彩票' },
       { name: 'ShowMainHeaderBack', value: true }
     ])
+    this.Init()
   },
   mounted () {
     this.$nextTick(() => {
@@ -66,10 +73,34 @@ export default {
     ...mapMutations([
       'EditMainData' // 配置页面框架数据
     ]),
-    Refresh (done) { // 页面下拉刷新
-      window.setTimeout(() => {
+    ...mapUserActions([
+      'GetUserBettingList'
+    ]),
+    ...mapUserMutations([
+      'EmptyUserBettingList'
+    ]),
+    Init (done = () => { }) { // 初始化
+      this.EmptyUserBettingList() // 清空列表
+      this.PageData = {
+        pageNum: 1,
+        pageSize: 15
+      }
+      this.HasNextPage = true
+      this.GetPageList(done) // 获取列表
+    },
+    GetPageList (done = () => { }) { // 获取列表
+      if (this.DataLock && !this.HasNextPage) return
+      this.DataLock = true
+      this.GetUserBettingList({ queryData: { ...this.PageData } }).then((res) => {
+        this.DataLock = false
         done()
-      }, 1000)
+      }).catch((res) => {
+        done()
+        this.DataLock = false
+      })
+    },
+    Refresh (done) { // 页面下拉刷新
+      this.Init()
     }
   }
 }

src/pages/index.vue

@@ -89,15 +89,19 @@ export default {
       'SignIn'
     ]),
     Init () { // 初始化
-      this.SignIn({ data: { password: md5('123456'), userName: '17714208769' } }).then(() => { // 登录
-        if (this.UserInfo === null) {
-          this.$router.push({ name: 'SignIn' })
-        } else {
-          this.GetFootballKeys() // 获取足彩相关字典
-          this.GetAllLotteryType({ queryData: { pageNum: 1, pageSize: 1000 } })
-        }
-      }).catch(() => {
-      })
+      if (window.localStorage.niucaiusername && window.localStorage.niucaiuserpassword) {
+        this.SignIn({ data: { password: md5(window.localStorage.niucaiuserpassword), userName: window.localStorage.niucaiusername } }).then(() => { // 登录
+          if (this.UserInfo === null) {
+            this.$router.push({ name: 'SignIn' })
+          } else {
+            this.GetFootballKeys() // 获取足彩相关字典
+            this.GetAllLotteryType({ queryData: { pageNum: 1, pageSize: 1000 } })
+          }
+        }).catch(() => {
+        })
+      } else {
+        this.$router.push({ name: 'SignIn' })
+      }
     }
   }
 }

src/pages/index/PaiLie3/index.vue

@@ -145,7 +145,7 @@
     <!-- 投注栏 -->
     <div class="Bottom flex-h">
       <span class="SelectRes">共<em>{{TotalResNum}}</em>注<em>{{TotalResNum * 2}}</em>元，奖金<em>0</em>元</span>
-      <a class="iconfont iconjian"></a>
+      <a class="iconfont iconjian" @click="EmptyData"></a>
       <router-link :to="{ name: 'PaiLie3DingDan' }" class="iconfont icongouwuche"></router-link>
       <!-- <a class="iconfont iconqushi"></a> -->
       <div class="flex-item"></div>

src/pages/index/PaiLie3DingDan/index.vue

@@ -1,5 +1,139 @@
 <template>
-  <div class="Page">
+  <div class="Page flex-v">
+
+    <a class="Store flex-h" @click="ShowStore = true">
+      <div class="flex-item">
+        <div>
+          <span>投注门店：{{CurrentStoreName || '请选择'}}</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>{{ReturnType(item.Type)}}</span>
+              <span>{{item.Count}}注{{item.Count * 2}}元</span>
+            </div>
+
+            <!-- 直选 -->
+            <ul v-if="item.Type === 'ZhiXuan'">
+              <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>
+
+            <!-- 组选3 -->
+            <ul v-if="item.Type.indexOf('ZuXuan3') > -1">
+              <li v-for="(subItem, subIndex) in item.List" :key="subIndex">
+                <div class="centerLabel">
+                  <span>{{subItem}}</span>
+                </div>
+              </li>
+            </ul>
+
+            <!-- 组选6 -->
+            <ul v-if="item.Type === 'ZuXuan6'">
+              <li v-for="(subItem, subIndex) in item.List" :key="subIndex">
+                <div class="centerLabel">
+                  <span>{{subItem}}</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" @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && PaiLie3Cart.length}">确认投注</a>
+      </div>
+    </div>
+
+    <div class="Layer" v-if="ShowStore">
+      <div class="centerLabel">
+        <span v-if="RecommendStoreList.length">推荐店铺：</span>
+        <ul v-if="RecommendStoreList.length">
+          <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+            <div class="flex-item">
+              <div>
+                <span>{{item.name}}</span>
+              </div>
+            </div>
+            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+            <i class="iconfont iconyigouxuan active" v-else></i>
+          </li>
+        </ul>
+        <span>选择附近店铺：</span>
+        <ul class="ScrollList">
+          <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+            <div class="flex-item">
+              <div>
+                <span>{{item.name}}</span>
+              </div>
+            </div>
+            <!-- <span>200m</span> -->
+            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+            <i class="iconfont iconyigouxuan active" v-else></i>
+          </li>
+        </ul>
+        <div class="Bottom flex-h">
+          <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
+          <a class="flex-item active" @click="ShowStore = false">确定</a>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -58,7 +192,96 @@ export default {
       'GetStoreList'
     ]),
     Init () {
-      console.log(JSON.stringify(this.PaiLie3Cart))
+      this.PageList = [...this.PaiLie3Cart]
+      this.CalcTotalCount()
+      this.GetStoreList({
+        queryData: {
+          location: '114.16936109999999,22.3193039',
+          lotteryId: 'p3'
+        }
+      }).then((res) => {
+        this.StoreList = res.data.data.nearest || []
+        this.RecommendStoreList = res.data.data.recommend || []
+      })
+    },
+    ReturnType (type) { // 投注类型返回值
+      switch (type) {
+        case 'ZhiXuan':
+          return '直选'
+        case 'ZuXuan3-DanShi':
+          return '组选三 单式'
+        case 'ZuXuan3-FuShi':
+          return '组选三 复式'
+        case 'ZuXuan6':
+          return '组选六'
+        default:
+          return '普通投注'
+      }
+    },
+    CalcTotalCount () { // 计算总注数
+      this.TotalCount = 0
+      this.PageList.map((item) => {
+        this.TotalCount += item.Count
+      })
+    },
+    DeleteItem (item, index) { // 删除单注
+      if (this.DataLock) return
+      this.DataLock = true
+      this.DeletePaiLie3Cart(index)
+      this.PageList.splice(index, 1)
+      this.TotalCount -= item.Count
+      this.DataLock = false
+    },
+    SelectStore (item) { // 选择店铺
+      if (this.DataLock) return
+      this.DataLock = true
+      this.CurrentStoreName = item.shopId === this.CurrentStoreId ? null : item.name
+      this.CurrentStoreId = item.shopId === this.CurrentStoreId ? null : item.shopId
+      this.DataLock = false
+    },
+    ToPostBetting () { // 去下注
+      if (this.DataLock || !this.PaiLie3Cart.length || this.CurrentStoreId === null) return
+      this.DataLock = true
+      let ListData = []
+      this.PaiLie3Cart.map((item) => {
+        ListData.push({
+          amount: item.Count, // 购买注数
+          charges: item.Count * 2 * 100, // 价格
+          playWay: item.Type.indexOf('ZuXuan3') > -1 ? '组选3' : item.Type === 'ZhiXuan' ? '' : '组选6',
+          firstDan: '', // 前区胆号, 逗号连接
+          firstNums: item.Type === 'ZhiXuan' ? [item.BaiWei.join(' '), item.ShiWei.join(' '), item.GeWei.join(' ')].join(',') : item.List.join(','), // 前区其余数字, 逗号连接
+          isDan: false, // 是否胆拖
+          isMulti: item.Count > 1 // 是否复式
+        })
+      })
+      let Data = {
+        itemList: [...ListData], // 这个是详细购买方案的列表
+        lotteryId: 'p3', // 彩种ID
+        notesNum: this.TotalCount, // 总注数
+        shopId: this.CurrentStoreId, // 店铺ID
+        times: this.Multiple, // 倍数
+        totalPrice: this.TotalPrize * this.Multiple * 100 // 总金额
+      }
+      this.PostBetting({
+        urlData: { id: 'p3' },
+        data: { ...Data }
+      }).then((res) => {
+        this.Dialog.alert({
+          message: '投注成功！'
+        })
+        this.EmptyPaiLie3Cart()
+        this.PageList = []
+        this.TotalCount = 0
+        this.TotalPrize = 0
+        this.Multiple = 1
+        this.DataLock = false
+      }).catch((res) => {
+        this.Dialog.alert({
+          title: '错误',
+          message: res.data.message
+        })
+        this.DataLock = false
+      })
     },
     EmptyCart () { // 清空购物车
       this.Dialog.confirm({

src/pages/index/PaiLie3DingDan/page.scss

@@ -1,3 +1,349 @@
 .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: #ccc;
+            border-color: #ccc;
+            &.active {
+              background: #ff5200;
+              border-color: #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/pages/index/ShouYe/index.vue

@@ -104,11 +104,12 @@ export default {
       'GetLotteryRes',
       'GetNewstLotteryRes'
     ]),
-    Init (done = () => {}) { // 初始化
+    Init (done = () => { }) { // 初始化
       this.GetBanner({ queryData: { pageNum: 1, pageSize: 10, status: 1, adType: 'app-index-banner' } }).then(() => { // 获取banner
         this.GetNewstLotteryRes().then(() => { // 获取最新数字彩开奖结果列表
           done()
         })
+        // this.GetLotteryRes({ queryData: { pageNum: 1, pageSize: 10 } })
       })
     },
     Refresh (done) { // 页面下拉刷新

src/router/index.js

@@ -195,9 +195,14 @@ let router = new Router({
         ]
       },
       {
-        path: '/SignIn', // 首页
+        path: '/SignIn', // 登录
         name: 'SignIn',
         component: resolve => (require(['@/pages/SignIn'], resolve))
+      },
+      {
+        path: '/Register', // 注册
+        name: 'Register',
+        component: resolve => (require(['@/pages/Register'], resolve))
       }
     ]
   }]

src/store/user/index.js

@@ -10,14 +10,7 @@ export default {
     DaLeTouCart: [], // 大乐透购物车
     ShuangSeQiuCart: [], // 双色球购物车
     UserInfo: null, // 用户信息
-    UserOrderList: [ // 用户订单
-      { createDate: '2020-08-14  15:10:20', dateNum: '202076期', type: '超级大乐透', typeId: 'dlt', amount: 2, id: 1, orderNum: 'TE202008140000146179970', status: '已撤单' },
-      { createDate: '2020-08-13  17:23:54', dateNum: '202076期', type: '双色球', typeId: 'ssq', amount: 2, id: 2, orderNum: 'TE202008140000146179970', status: '已下单' },
-      { createDate: '2020-08-13  17:23:54', dateNum: '202076期', type: '双色球', typeId: 'ssq', amount: 4, id: 3, orderNum: 'TE202008140000146179970', status: '已下单' },
-      { createDate: '2020-08-13  17:23:54', dateNum: '202076期', type: '双色球', typeId: 'ssq', amount: 2, id: 4, orderNum: 'TE202008140000146179970', status: '已下单' },
-      { createDate: '2020-08-13  17:23:54', dateNum: '202076期', type: '双色球', typeId: 'ssq', amount: 6, id: 5, orderNum: 'TE202008140000146179970', status: '已下单' },
-      { createDate: '2020-08-13  17:23:54', dateNum: '202076期', type: '双色球', typeId: 'ssq', amount: 8, id: 6, orderNum: 'TE202008140000146179970', status: '已下单' }
-    ],
+    UserBettingList: [], // 用户投注列表
     UserAccountDetails: { // 用户账户明细
       All: [
         { type: '充值', id: '', createDate: '2020-08-15 12:00:00', amount: '+200' },
@@ -44,6 +37,9 @@ export default {
     UpdateUserInfo (state, data) { // 更新用户信息
       state.UserInfo = data || null
     },
+    EmptyUserInfo (state) { // 清空用户信息
+      state.UserInfo = null
+    },
     AddDaLeTouCart (state, data) { // 新增大乐透购物车
       state.DaLeTouCart.unshift(data)
     },
@@ -86,9 +82,30 @@ export default {
       Arr.map((item) => {
         state.StoreList.push({ ...item, Active: false })
       })
+    },
+    UpdateUserBettingList (state, data) { // 更新用户投注列表
+      state.UserBettingList = state.UserBettingList.concat(data.records || [])
+    },
+    EmptyUserBettingList (state) { // 清空用户投注列表
+      state.UserBettingList = []
     }
   },
   actions: {
+    CheckRegPhoneCode (context, payload) { // 校验注册手机验证码
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.CheckRegPhoneCode, context, payload, 1000)
+      })
+    },
+    GetRegPhoneCode (context, payload) { // 注册获取手机验证码
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetRegPhoneCode, context, payload, 1000)
+      })
+    },
+    UserRegister (context, payload) { // 注册
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.UserRegister, context, payload, 1000)
+      })
+    },
     SignIn (context, payload) { // 登录
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.SignIn, context, payload, 1000, 'UpdateUserInfo')
@@ -103,6 +120,11 @@ export default {
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.GetStoreList, context, payload, 1000, 'UpdateStoreList')
       })
+    },
+    GetUserBettingList (context, payload) { // 获取用户投注列表
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetUserBettingList, context, payload, 1000, 'UpdateUserBettingList')
+      })
     }
   }
 }

src/util/Api.js

@@ -33,6 +33,23 @@ const $api = {
   GetStoreList: { // 获取店铺列表
     method: 'get',
     url: `${prefix}/app/shop/available`
+  },
+  GetUserBettingList: { // 获取用户投注列表
+    method: 'get',
+    url: `${prefix}/app/customer/betting/list`
+  },
+  UserRegister: { // 注册
+    method: 'post',
+    url: `${prefix}/app/signup`
+  },
+  GetRegPhoneCode: { // 注册获取手机验证码
+    method: 'get',
+    url: `${prefix}/app/sms/captcha/:phone`
+  },
+  CheckRegPhoneCode: { // 校验注册手机验证码
+    method: 'post',
+    url: `${prefix}/app/sms/captcha/:phone`
+
   }
 }