静态页面

src/pages/index/DaLeTou/index.vue

@@ -164,7 +164,7 @@ export default {
         LastSortArr.push({ Num: item, IsDan: false, IsFirst: false })
       })
       LastSortArr.sort((a, b) => { return a.Num - b.Num })
-      this.AddShuangSeQiuCart({ ...this.ResObj, SortArr: FirstSortArr.concat(LastSortArr), Count: this.TotalResNum, Multiple: 1 })
+      this.AddDaLeTouCart({ ...this.ResObj, SortArr: FirstSortArr.concat(LastSortArr), Count: this.TotalResNum, Multiple: 1 })
       this.FirstList.map((item) => {
         item.Active = 0
       })

src/pages/index/DaLeTouDingDan/index.vue

@@ -8,12 +8,6 @@
             <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
             <div class="flex-h">
               <span class="flex-item">{{ReturnType(item)}}<em>{{item.Count}}</em>注<em>{{item.Count * 2}}</em>元</span>
-              <span>
-                <a class="iconfont iconjianhao" @click="MultipleLess(item)"></a>
-                <input type="number" v-model="item.Multiple" disabled="disabled">
-                <span>倍</span>
-                <a class="iconfont iconjiahao" @click="MultipleMore(item)"></a>
-              </span>
             </div>
             <ul>
               <li v-for="(subItem, subIndex) in item.SortArr" :key="subIndex" :class="{'active': !subItem.IsFirst}">
@@ -27,53 +21,68 @@
         </ul>
 
         <div class="OtherTab">
-          <div class="flex-h">
-            <span class="flex-item">是否追期？</span>
-            <span>追号喜中二等奖</span>
-            <van-switch v-model="IsAdd" active-color="#07c160" inactive-color="#ccc" size="0.13rem" @change="SwitchChange" />
+          <div>
+            <div class="flex-h">
+              <span class="flex-item">加倍</span>
+              <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">
+              <span class="flex-item">是否追期？</span>
+              <span>追号喜中二等奖</span>
+              <van-switch v-model="IsAdd" active-color="#07c160" inactive-color="#ccc" size="0.13rem" @change="SwitchChange" />
+            </div>
           </div>
         </div>
 
       </div>
     </div>
+
     <div class="Bottom">
       <div class="Store">
-        <a @click="ShowStore = true">店铺：请选择</a>
+        <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
       </div>
       <div class="Count">
         <span><em>{{TotalCount}}</em>注</span>
-        <span>金额：<em>{{TotalPrize}}</em>元</span>
+        <span>金额：<em>{{TotalPrize * Multiple}}</em>元</span>
       </div>
-      <a>立即购买</a>
+      <a @click="ToPostBetting" :class="{'active': DaLeTouCart.length}">立即购买</a>
     </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">
+        <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>彩票供销社{{index + 1}}</span>
+                <span>{{item.name}}</span>
               </div>
             </div>
-            <i class="iconfont iconweigouxuan"></i>
+            <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 20" :key="index" class="flex-h">
+          <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>彩票供销社{{index + 1}}</span>
+                <span>{{item.name}}</span>
               </div>
             </div>
-            <span>200m</span>
-            <i class="iconfont iconweigouxuan"></i>
+            <!-- <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="ShowStore = false">取消</a>
-          <a class="flex-item active">确定</a>
+          <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
+          <a class="flex-item active" @click="ShowStore = false">确定</a>
         </div>
       </div>
     </div>
@@ -83,11 +92,16 @@
 <script>
 import { Switch } from 'vant'
 import { mapMutations, createNamespacedHelpers } from 'vuex'
-const { mapState: mapUserState, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
+      CurrentStoreName: null, // 当前选择店铺名称
+      CurrentStoreId: null, // 当前选择店铺id
+      RecommendStoreList: [], // 推荐店铺列表
+      StoreList: [], // 店铺列表
+      Multiple: 1, // 倍数
       ShowStore: false, // 是否显示店铺选择弹窗
       TotalCount: 0, // 总注数
       TotalPrize: 0, // 总金额
@@ -112,6 +126,15 @@ export default {
     ])
     this.PageList = [...this.DaLeTouCart]
     this.CheckOrderCount() // 计算订单倍数、金额
+    this.GetStoreList({
+      queryData: {
+        location: '114.16936109999999,22.3193039',
+        lotteryId: 'lottery'
+      }
+    }).then((res) => {
+      this.StoreList = res.data.data.nearest || []
+      this.RecommendStoreList = res.data.data.recommend || []
+    })
   },
   mounted () {
     this.$nextTick(() => {
@@ -122,8 +145,71 @@ export default {
       'EditMainData' // 配置页面框架数据
     ]),
     ...mapUserMutations([
-      'DeleteDaLeTouCart'
+      'DeleteDaLeTouCart',
+      'EmptyDaLeTouCart'
     ]),
+    ...mapUserActions([
+      'PostBetting',
+      'GetStoreList'
+    ]),
+    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) return
+      this.DataLock = true
+      let ListData = []
+      this.DaLeTouCart.map((item) => {
+        item.FirstRes.Dan.sort((a, b) => { return a - b })
+        item.FirstRes.Tuo.sort((a, b) => { return a - b })
+        item.LastRes.Dan.sort((a, b) => { return a - b })
+        item.LastRes.Tuo.sort((a, b) => { return a - b })
+        ListData.push({
+          amount: item.Count, // 购买注数
+          charges: this.IsAdd ? item.Count * 3 * 100 : item.Count * 2 * 100, // 价格
+          firstDan: item.FirstRes.Dan.join(','), // 前区胆号, 逗号连接
+          firstNums: item.FirstRes.Tuo.join(','), // 前区其余数字, 逗号连接
+          isDan: !!item.FirstRes.Dan.length, // 是否胆拖
+          isMulti: item.Count > 1, // 是否复式
+          secondDan: item.LastRes.Dan.join(','), // 后区胆号, 逗号连接
+          secondNums: item.LastRes.Tuo.join(',') // 后区其余数字, 逗号连接
+        })
+      })
+      let Data = {
+        isAdd: this.IsAdd, // 是否追加, 只有大乐透需要
+        issueNo: '123456', // 购买彩票期数，这个你先随便传
+        itemList: [...ListData], // 这个是详细购买方案的列表
+        lotteryId: 'lottery', // 彩种ID
+        notesNum: this.TotalCount, // 总注数
+        shopId: this.CurrentStoreId, // 店铺ID
+        times: this.Multiple, // 倍数
+        totalPrice: this.TotalPrize * this.Multiple * 100 // 总金额
+      }
+      this.PostBetting({
+        urlData: { id: 'lottery' },
+        data: { ...Data }
+      }).then((res) => {
+        this.Dialog.alert({
+          message: '投注成功！'
+        })
+        this.EmptyDaLeTouCart()
+        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
+      })
+    },
     SwitchChange () { // 追加状态改变
       this.CheckOrderCount()
     },
@@ -163,7 +249,7 @@ export default {
       let ItemPrize = this.IsAdd ? 3 : 2
       this.PageList.map((item) => {
         Count += item.Count
-        Money += item.Count * item.Multiple * ItemPrize
+        Money += item.Count * ItemPrize
       })
       this.TotalCount = Count
       this.TotalPrize = Money

src/pages/index/DaLeTouDingDan/page.scss

@@ -33,7 +33,7 @@
               display: inline-block;
               position: absolute;
               right: 0;
-              bottom: 0;
+              top: 0;
               font-size: 0.2rem;
               color: #999;
             }
@@ -53,50 +53,10 @@
                     font-weight: bold;
                   }
                 }
-                &:last-child {
-                  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.2rem;
-                    border-left: 0.01rem solid #f7f7f7;
-                    &:first-child {
-                      border: none;
-                      border-right: 0.01rem solid #f7f7f7;
-                    }
-                  }
-                  > a {
-                    width: 0.2rem;
-                    text-align: center;
-                  }
-                  > input {
-                    border: none;
-                    width: 0.35rem;
-                    text-align: center;
-                    color: #333;
-                    &:disabled {
-                      color: #333;
-                    }
-                  }
-                  > span {
-                    border: none;
-                    margin-right: 0.03rem;
-                  }
-                }
               }
             }
             > ul {
               font-size: 0;
-              margin-top: 0.1rem;
               > li {
                 display: inline-block;
                 vertical-align: middle;
@@ -130,41 +90,97 @@
           position: relative;
           margin-bottom: 0.15rem;
           > div {
-            padding: 0.15rem;
             background: #fff;
             border-radius: 0.06rem;
-            align-items: center;
             box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-            > span {
+            > div {
+              padding: 0.15rem;
+              border-top: 0.01rem solid #f7f7f7;
+              align-items: center;
               &:first-child {
-                font-size: 0.15rem;
-                color: #666;
-                line-height: 0.2rem;
+                border-top: none;
+              }
+              &:nth-child(1) {
+                > span {
+                  &:nth-child(1) {
+                    font-size: 0.15rem;
+                    color: #666;
+                    line-height: 0.2rem;
+                  }
+                  &:nth-child(2) {
+                    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.2rem;
+                      border-left: 0.01rem solid #f7f7f7;
+                      &:first-child {
+                        border: none;
+                        border-right: 0.01rem solid #f7f7f7;
+                      }
+                    }
+                    > a {
+                      width: 0.2rem;
+                      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) {
-                font-size: 0.1rem;
-                color: #fff;
-                display: inline-block;
-                position: relative;
-                overflow: visible;
-                background: #ff5200;
-                border-radius: 0.02rem;
-                padding: 0 0.05rem;
-                line-height: 0.16rem;
-                margin-right: 0.1rem;
-                &::after {
-                  content: "";
-                  width: 0;
-                  height: 0;
-                  border-width: 0.04rem;
-                  display: block;
-                  position: absolute;
-                  right: -0.07rem;
-                  top: 50%;
-                  transform: translateY(-50%) rotateZ(90deg);
-                  -webkit-transform: translateY(-50%) rotateZ(90deg);
-                  border-style: solid solid dashed solid;
-                  border-color: transparent transparent #ff5200 transparent;
+                > span {
+                  &:nth-child(1) {
+                    font-size: 0.15rem;
+                    color: #666;
+                    line-height: 0.2rem;
+                  }
+                  &:nth-child(2) {
+                    font-size: 0.1rem;
+                    color: #fff;
+                    display: inline-block;
+                    position: relative;
+                    overflow: visible;
+                    background: #ff5200;
+                    border-radius: 0.02rem;
+                    padding: 0 0.05rem;
+                    line-height: 0.16rem;
+                    margin-right: 0.1rem;
+                    &::after {
+                      content: "";
+                      width: 0;
+                      height: 0;
+                      border-width: 0.04rem;
+                      display: block;
+                      position: absolute;
+                      right: -0.07rem;
+                      top: 50%;
+                      transform: translateY(-50%) rotateZ(90deg);
+                      -webkit-transform: translateY(-50%) rotateZ(90deg);
+                      border-style: solid solid dashed solid;
+                      border-color: transparent transparent #ff5200 transparent;
+                    }
+                  }
                 }
               }
             }

src/store/user/index.js

@@ -4,6 +4,7 @@ import ToolClass from '../../util/PublicMethod'
 export default {
   namespaced: true,
   state: {
+    StoreList: [], // 店铺列表
     PaiLie3Cart: [], // 排列3购物车
     PaiLie5Cart: [], // 排列5购物车
     DaLeTouCart: [], // 大乐透购物车
@@ -78,6 +79,13 @@ export default {
     },
     EmptyPaiLie5Cart (state, data) { // 清空排列5购物车
       state.PaiLie5Cart = []
+    },
+    UpdateStoreList (state, data) { // 更新店铺列表
+      let Arr = data.nearest || []
+      state.StoreList = []
+      Arr.map((item) => {
+        state.StoreList.push({ ...item, Active: false })
+      })
     }
   },
   actions: {
@@ -85,6 +93,16 @@ export default {
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.SignIn, context, payload, 1000, 'UpdateUserInfo')
       })
+    },
+    PostBetting (context, payload) { // 下注
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.PostBetting, context, payload, 1000)
+      })
+    },
+    GetStoreList (context, payload) { // 获取店铺列表
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetStoreList, context, payload, 1000, 'UpdateStoreList')
+      })
     }
   }
 }

src/util/Api.js

@@ -25,6 +25,14 @@ const $api = {
   GetAllLotteryType: { // 获取所有彩种类型
     method: 'get',
     url: `${prefix}/app/lottery`
+  },
+  PostBetting: { // 下注
+    method: 'post',
+    url: `${prefix}/app/:id/betting`
+  },
+  GetStoreList: { // 获取店铺列表
+    method: 'get',
+    url: `${prefix}/app/shop/available`
   }
 }
 

src/util/PublicMethod.js

@@ -2,6 +2,11 @@
 import Axios from 'axios'
 import qs from 'qs'
 const ToolClass = {
+  GetLocation (callabck) {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(callabck)
+    }
+  },
   TimeOut (callback) {
     if (window.InitTimer === undefined) window.InitTimer = null
     window.clearTimeout(window.InitTimer)