xcx

src/module/sales/coffeeIndex/index.vue

@@ -9,13 +9,45 @@
     <div class="content flex-item">
       <div>
         <ul>
-          <li v-if="navActive === 0">
-            1
+          <li :hidden="navActive !== 0" class="placeOrder">
+            <div class="topInfo flex-h">
+              <div class="flex-item">
+                <div>
+                  <span>共计已使用：45杯</span>
+                </div>
+              </div>
+              <div class="flex-item">
+                <div>
+                  <span>本月已用：0杯</span>
+                </div>
+              </div>
+              <a>点单记录</a>
+            </div>
+            <div class="areaListParent flex-h">
+              <div class="flex-item">
+                <div>
+                  <ul class="areaList">
+                    <li v-for="(item,index) in list" :key="index">
+                      <div class="title">
+                        <i class="iconfont icon-yinchenglogo"></i>
+                        <span>{{item.name}}</span>
+                      </div>
+                      <ul class="subAreaList flex-h">
+                        <li class="flex-item flex-h" v-for="(subItem,subIndex) in item.list" :key="subIndex">
+                          <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
+                        </li>
+                        <li class="flex-item noData" v-if="item.list.length % 2 != 0"></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
           </li>
-          <li v-if="navActive === 1">
+          <li :hidden="navActive !== 1">
             2
           </li>
-          <li v-if="navActive === 2">
+          <li :hidden="navActive !== 2">
             3
           </li>
         </ul>

src/module/sales/coffeeIndex/page.scss

@@ -39,7 +39,106 @@
       top: 0;
       bottom: 0;
       overflow: hidden;
-      
+      &>ul{
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        &>li{
+          width: 100%;
+          height: 100%;
+          position: relative;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          transform: translateZ(0);
+          -webkit-transform: translateZ(0);
+          &.placeOrder{
+            .topInfo{
+              align-items: center;
+              margin: .1rem auto 0;
+              >div{
+                >div{
+                  width: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  span{
+                    width: 100%;
+                    display: block;
+                    text-indent: .2rem;
+                    line-height: .3rem;
+                    font-size: .14rem;
+                    color: #666;
+                  }
+                }
+              }
+              a{
+                line-height: .22rem;
+                font-size: .12rem;
+                color: #fc6243;
+                border: .01rem solid #fc6243;
+                padding: 0 .15rem;
+                border-radius: .05rem;
+                margin-right: .2rem;
+              }
+            }
+            .areaListParent{
+              position: relative;
+              overflow: visible;
+              >div{
+                margin: 0 .2rem;
+                position: relative;
+                overflow: visible;
+                >div{
+                  width: 100%;
+                  position: relative;
+                  overflow: visible;
+                  .areaList{
+                    &:last-child{
+                      margin-bottom: .2rem;
+                    }
+                    .title{
+                      font-size: 0;
+                      white-space: nowrap;
+                      margin-top: .22rem;
+                      *{
+                        line-height: .26rem;
+                        font-size: .14rem;
+                      }
+                      i{
+                        color: red;
+                        margin-right: .05rem;
+                      }
+                    }
+                    .subAreaList{
+                      position: relative;
+                      overflow: visible;
+                      flex-wrap: wrap;
+                      -webkit-flex-wrap: wrap;
+                      &>li{
+                        position: relative;
+                        overflow: hidden;
+                        border-radius: .06rem;
+                        background: #fff;
+                        padding: .15rem 0;
+                        box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);
+                        min-width: 40%;
+                        margin-top: .2rem;
+                        &:nth-child(2n){
+                          margin-left: .2rem;
+                        }
+                        &.noData{
+                          box-shadow: none;
+                          background: none;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
   .selectCase{

src/module/sales/login/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="mainPage">
+    <div class="mask">
+      <img :src="logo" class="logo" alt="">
+      <div class="centerLabel" style="width:100%;">
+        <div class="box" style="margin:0 auto;">
+          <div class="title">登录</div>
+
+          <div class="mobile">
+            <i class="iconfont icon-dianhua"></i>
+            <input type="number" maxlength="11" placeholder="手机号" v-model="postData.phone">
+          </div>
+
+          <div class="sms" style="margin-top:.2rem;">
+            <i class="iconfont icon-mima"></i>
+            <input type="number" maxlength="6" placeholder="验证码" v-model="postData.captcha">
+            <div class="sand" v-if="seconds === 60" @click="sandMsg">发送验证码</div>
+            <div class="sand" v-else>{{seconds}}后可重发</div>
+          </div>
+        </div>
+        <div class="submit" @click="submit">
+          <div>通过验证</div>
+        </div>
+      </div>
+
+      <transition name="slide">
+        <div class="select" v-if="showCase">
+          <van-picker
+            show-toolbar
+            title="请选择"
+            value-key='CaseName'
+            :columns="columns"
+            @cancel="onCancelC"
+            @confirm="onConfirmC"
+          />
+        </div>
+      </transition>
+      <transition name="slide">
+        <div class="select" v-if="showSales">
+          <van-picker
+            show-toolbar
+            title="请选择"
+            value-key='UserName'
+            :columns="columnsS"
+            @cancel="onCancelS"
+            @confirm="onConfirmS"
+          />
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import logo from '../../../common/icon/logo.png'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: actions } = createNamespacedHelpers('userCenter')
+export default {
+  data () {
+    return {
+      logo,
+      showCase: false,
+      showSales: false,
+      columns: [],
+      columnsS: [],
+      caseName: '选择案场',
+      salesName: '选择销售',
+      seconds: 60,
+      postData: {
+        phone: '',
+        case: '',
+        sales: '',
+        captcha: ''
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      caseInfo: x => x.userCenter.caseInfo
+    })
+  },
+  created () {
+    this.getCaseInfo(1).then(() => {
+      this.columns = this.caseInfo.cases
+    })
+  },
+  methods: {
+    ...actions(['getCaseInfo']),
+    ...actions(['getCaptcha']),
+    ...actions(['submitData']),
+    onConfirmC (value, index) {
+      this.caseName = value.CaseName
+      this.postData.case = value.CaseId
+      this.columnsS = []
+      this.salesName = '选择销售'
+      if (this.caseInfo.sales) {
+        for (let i = 0; i < this.caseInfo.sales.length; i++) {
+          if (this.caseInfo.sales[i].CaseId === this.postData.case) {
+            this.columnsS.push(this.caseInfo.sales[i])
+          }
+        }
+      }
+      this.showCase = false
+    },
+    onCancelC () {
+      this.showCase = false
+    },
+    onConfirmS (value, index) {
+      this.salesName = value.UserName
+      this.postData.sales = value.UserId
+      this.showSales = false
+    },
+    onCancelS () {
+      this.showSales = false
+    },
+    selectCase () {
+      this.showCase = true
+    },
+    selectSales () {
+      if (!this.postData.case) {
+        this.$toast('请先选择案场')
+        return
+      } else if (this.columnsS.length <= 0) {
+        this.$toast('此案场无销售')
+        return
+      }
+      this.showSales = true
+    },
+    sandMsg () {
+      if (!this.postData.phone) {
+        this.$toast('请先填写手机号')
+        return
+      }
+      this.getCaptcha(this.postData.phone)
+      this.runTime()
+    },
+    runTime () {
+      setTimeout(() => {
+        this.seconds--
+        if (this.seconds < 60 && this.seconds >= 1) {
+          this.runTime()
+        } else if (this.seconds < 1) {
+          this.seconds = 60
+        }
+      }, 1000)
+    },
+    submit () {
+      if (!this.postData.captcha) {
+        this.$toast('请先获取验证码')
+        return
+      }
+      if (!this.postData.case) {
+        this.$toast('请选择案场')
+        return
+      }
+      if (!this.postData.sales) {
+        this.$toast('请选择销售')
+        return
+      }
+      this.submitData(this.postData).then((res) => {
+        this.$toast(res)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/sales/login/page.scss

@@ -0,0 +1,130 @@
+.mainPage {
+  background: url("../../../common/icon/bg.jpg") no-repeat 0 -0.8rem;
+  background-size: 100% calc(100% + 90px);
+  position: relative;
+  .mask{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // background: rgba(0,0,0,0.3);
+    position: relative;
+    .logo{
+      position: absolute;
+      top: .5rem;
+      left: .3rem;
+      width: 1.8rem;
+    }
+    .select {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+    }
+    .box{
+      width: 3.25rem;
+      overflow: hidden;
+      background:rgba(255,255,255,1);
+      border-radius:8px;
+      padding: .2rem;
+      box-sizing: border-box;
+      .title{
+        font-size: .16rem;
+        font-weight: bold;
+        text-align: center;
+        padding-bottom: .24rem;
+      }
+      .mobile,.sms{
+        width: 2.85rem;
+        height: .5rem;
+        background:rgba(255,255,255,1);
+        border-radius:8px;
+        border:1px solid rgba(168,182,200,0.2);
+        display: flex;
+        align-items: center;
+        position: relative;
+        i{
+          color: rgba(168,182,200,1);
+          padding: .14rem;
+          font-size: .18rem;
+        }
+        input{
+          flex: 1;
+          height: 100%;
+        }
+        .sand{
+          padding: 0 .1rem;
+          height: .24rem;
+          border-radius:20px;
+          border:1px solid rgba(218,218,218,1);
+          color: rgba(218,218,218,1);
+          font-size: .12rem;
+          text-align: center;
+          line-height: .24rem;
+          position: absolute;
+          right: .1rem;
+        }
+      }
+      .recommend{
+        width: 2.85rem;
+        height: .4rem;
+        padding: .15rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        span{
+          color: rgba(168,182,200,1);
+        }
+        i{
+          color: rgba(168,182,200,1);
+          padding-left: .14rem;
+          font-size: .12rem;
+        }
+        div{
+          height: 100%;
+          display: flex;
+          flex: 1;
+          margin-left: .1rem;
+          align-items: center;
+          border-radius:8px;
+          border:1px solid rgba(168,182,200,0.2);
+          padding: .1rem;
+          box-sizing: border-box;
+          span{
+            width: 70%;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+        }
+      }
+    }
+    
+    .submit{
+      margin: .24rem auto 0;
+      width: 2.85rem;
+      height: .48rem;
+      border-radius:.04rem;
+      background: rgba(255,66,28,1);
+      text-align: center;
+      line-height: .48rem;
+      div{
+        font-size: .15rem;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.slide-enter-active {
+  transition: all .3s ease;
+}
+.slide-leave-active {
+  transition: all .3s ease;
+}
+.slide-enter, .slide-leave-to
+/* .slide-fade-leave-active for below version 2.1.8 */ {
+  transform: translateY(2.6rem);
+  opacity: 0;
+}

src/module/sales/router.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
+import login from './login/index' // 登录
 import coffeeIndex from './coffeeIndex/index' // 点单首页
 import placeOrder from './placeOrder/index' // 城咖啡-点单
 
@@ -8,6 +9,11 @@ Vue.use(Router)
 
 const router = new Router({
   routes: [{
+    path: '/login',
+    name: 'login',
+    component: login,
+    children: []
+  },{
     path: '/coffeeIndex',
     name: 'coffeeIndex',
     component: coffeeIndex,