静态页面

src/pages/index/DaLeTouDingDan/index.vue

         <span><em>{{TotalCount}}</em>注</span>
         <span>金额：<em>{{TotalPrize * Multiple}}</em>元</span>
       </div>
-      <a @click="ToPostBetting" :class="{'active': DaLeTouCart.length}">立即购买</a>
+      <a @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && DaLeTouCart.length}">立即购买</a>
     </div>
 
     <div class="Layer" v-if="ShowStore">
         </div>
       </div>
     </div>
+
   </div>
 </template>
 
       this.DataLock = false
     },
     ToPostBetting () { // 去下注
-      if (this.DataLock) return
+      if (this.DataLock || !this.DaLeTouCart.length || this.CurrentStoreId === null) return
       this.DataLock = true
       let ListData = []
       this.DaLeTouCart.map((item) => {
       })
       let Data = {
         isAdd: this.IsAdd, // 是否追加, 只有大乐透需要
-        issueNo: '123456', // 购买彩票期数，这个你先随便传
         itemList: [...ListData], // 这个是详细购买方案的列表
         lotteryId: 'lottery', // 彩种ID
         notesNum: this.TotalCount, // 总注数

src/pages/index/PaiLie5/page.scss

                     > 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;

src/pages/index/PaiLie5DingDan/index.vue

     <a class="Store flex-h" @click="ShowStore = true">
       <div class="flex-item">
         <div>
-          <span>投注门店：请选择</span>
+          <span>投注门店：{{CurrentStoreName || '请选择'}}</span>
         </div>
       </div>
       <span>查看更多</span>
       <div class="flex-h">
         <a @click="$router.go(-1)">自选号码</a>
         <a @click="CutRandomCount(1)">机选一注</a>
-        <a class="flex-item">确认投注</a>
+        <a class="flex-item" @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && PaiLie5Cart.length}">确认投注</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">
+        <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>
 
 <script>
 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: [], // 店铺列表
       ShowStore: false,
       Multiple: 1,
       TotalCount: 0,
       'DeletePaiLie5Cart',
       'EmptyPaiLie5Cart'
     ]),
+    ...mapUserActions([
+      'PostBetting',
+      'GetStoreList'
+    ]),
     Init () { // 初始化
       this.PageList = [...this.PaiLie5Cart]
       this.CalcTotalCount()
       this.CreateData()
+      this.GetStoreList({
+        queryData: {
+          location: '114.16936109999999,22.3193039',
+          lotteryId: 'p5'
+        }
+      }).then((res) => {
+        this.StoreList = res.data.data.nearest || []
+        this.RecommendStoreList = res.data.data.recommend || []
+      })
+    },
+    ToPostBetting () { // 去下注
+      if (this.DataLock || !this.PaiLie5Cart.length || this.CurrentStoreId === null) return
+      this.DataLock = true
+      let ListData = []
+      this.PaiLie5Cart.map((item) => {
+        let ItemArr = []
+        for (let key in item) {
+          if (key !== 'Count' && key !== 'Type') {
+            ItemArr.push(item[key])
+          }
+        }
+        ItemArr.sort((a, b) => { return a - b })
+        ListData.push({
+          amount: item.Count, // 购买注数
+          charges: item.Count * 2 * 100, // 价格
+          firstDan: '', // 前区胆号, 逗号连接
+          firstNums: ItemArr.join(','), // 前区其余数字, 逗号连接
+          isDan: false, // 是否胆拖
+          isMulti: item.Count > 1 // 是否复式
+          // secondDan: item.LastRes.Dan.join(','), // 后区胆号, 逗号连接
+          // secondNums: item.LastRes.Tuo.join(',') // 后区其余数字, 逗号连接
+        })
+      })
+      let Data = {
+        itemList: [...ListData], // 这个是详细购买方案的列表
+        lotteryId: 'p5', // 彩种ID
+        notesNum: this.TotalCount, // 总注数
+        shopId: this.CurrentStoreId, // 店铺ID
+        times: this.Multiple, // 倍数
+        totalPrice: this.TotalPrize * this.Multiple * 100 // 总金额
+      }
+      this.PostBetting({
+        urlData: { id: 'p5' },
+        data: { ...Data }
+      }).then((res) => {
+        this.Dialog.alert({
+          message: '投注成功！'
+        })
+        this.EmptyPaiLie5Cart()
+        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
+      })
+    },
+    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
     },
     EmptyCart () { // 清空购物车
       this.Dialog.confirm({

src/pages/index/PaiLie5DingDan/page.scss

           }
           &.flex-item {
             color: #fff;
-            background: #ff5200;
+            background: #ccc;
+            border-color: #ccc;
+            &.active {
+              background: #ff5200;
+              border-color: #ff5200;
+            }
           }
         }
       }

src/pages/index/ShuangSeQiuDingDan/index.vue

             <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}">
         </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 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>
       </div>
-      <a>立即购买</a>
+      <a @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && ShuangSeQiuCart.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>
+
   </div>
 </template>
 
 <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, // 总金额
     ])
     this.PageList = [...this.ShuangSeQiuCart]
     this.CheckOrderCount() // 计算订单倍数、金额
+    this.GetStoreList({
+      queryData: {
+        location: '114.16936109999999,22.3193039',
+        lotteryId: 'double-color'
+      }
+    }).then((res) => {
+      this.StoreList = res.data.data.nearest || []
+      this.RecommendStoreList = res.data.data.recommend || []
+    })
   },
   mounted () {
     this.$nextTick(() => {
     ...mapUserMutations([
       'DeleteShuangSeQiuCart'
     ]),
+    ...mapUserActions([
+      'PostBetting',
+      'GetStoreList'
+    ]),
+    ToPostBetting () { // 去下注
+      if (this.DataLock || !this.ShuangSeQiuCart.length || this.CurrentStoreId === null) return
+      this.DataLock = true
+      let ListData = []
+      this.ShuangSeQiuCart.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: 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 = {
+        itemList: [...ListData], // 这个是详细购买方案的列表
+        lotteryId: 'double-color', // 彩种ID
+        notesNum: this.TotalCount, // 总注数
+        shopId: this.CurrentStoreId, // 店铺ID
+        times: this.Multiple, // 倍数
+        totalPrice: this.TotalPrize * this.Multiple * 100 // 总金额
+      }
+      this.PostBetting({
+        urlData: { id: 'double-color' },
+        data: { ...Data }
+      }).then((res) => {
+        this.Dialog.alert({
+          message: '投注成功！'
+        })
+        this.EmptyShuangSeQiuCart()
+        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
+      })
+    },
+    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
+    },
     SwitchChange () { // 追加状态改变
       this.CheckOrderCount()
     },
     CheckOrderCount () { // 计算订单倍数、金额
       let Count = 0 // 注数
       let Money = 0 // 金额
-      let ItemPrize = this.IsAdd ? 3 : 2
       this.PageList.map((item) => {
         Count += item.Count
-        Money += item.Count * item.Multiple * ItemPrize
+        Money += item.Count * item.Multiple * 2
       })
       this.TotalCount = Count
       this.TotalPrize = Money

src/pages/index/ShuangSeQiuDingDan/page.scss

               display: inline-block;
               position: absolute;
               right: 0;
-              bottom: 0;
+              top: 0;
               font-size: 0.2rem;
               color: #999;
             }
                     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;
           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;
+                    }
+                  }
                 }
               }
             }