daincan

src/assets/font/font.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'PingFangRegular';
+    src: url('PingFangSCRegular.ttf');
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: 'PingFangMedium';
+    src: url('PingFangSCRegular.ttf');
+    font-weight: 700;
+}

src/assets/scss/common.scss

@@ -1,3 +1,8 @@
+html,
+body {
+    font-family: sans-serif;
+}
+
 .headerBox {
     height: 44px;
     width: 100%;
@@ -10,7 +15,7 @@
     line-height: 44px;
     color: #FFF;
     font-size: 18px;
-    padding: 0 10px;
+    padding: 0 15px;
     z-index: 1;
     .van-icon {
         float: left;

src/main.js

@@ -5,6 +5,7 @@ import router from './router'
 import store from './store'
 import Vant from 'vant';
 import ElementUI from 'element-ui'
+import '@/assets/font/font.css'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'vant/lib/index.css';
 import './assets/scss/common.scss';
@@ -14,6 +15,7 @@ import './plugins/element.js'
 import './plugins/common';
 
 
+
 import './assets/icons'
 
 document.title = '东信充值'

src/router/index.js

@@ -75,7 +75,32 @@ const routes = [
         name: 'record',
         component: () =>
             import ( /* webpackChunkName: "about" */ '../views/record')
-    }
+    },
+    {
+        path: '/orderingFood', //自助点餐
+        name: 'orderingFood',
+        component: () =>
+            import ( /* webpackChunkName: "about" */ '../views/orderingFood')
+    },
+    {
+        path: '/orderList', //点餐订单记录
+        name: 'orderList',
+        component: () =>
+            import ( /* webpackChunkName: "about" */ '../views/orderingFood/orderList')
+    },
+    {
+        path: '/orderService', //点餐服务
+        name: 'orderService',
+        component: () =>
+            import ( /* webpackChunkName: "about" */ '../views/orderingFood/orderService')
+    },
+    {
+        path: '/address', //送菜服务
+        name: 'address',
+        component: () =>
+            import ( /* webpackChunkName: "about" */ '../views/orderingFood/address')
+    },
+
 
 
 

src/store/index.js

@@ -4,12 +4,19 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
-})
+    state: {
+        cart: [],
+    },
+    mutations: {
+        SET_CART: (state, value) => {
+            state.cart = value
+        },
+    },
+    actions: {
+        cart({ commit }, value) {
+            console.log(value)
+            commit('SET_CART', value)
+        },
+    },
+    modules: {}
+})

src/views/login/index.vue

@@ -99,8 +99,9 @@ export default {
     };
   },
   mounted() {
+
     document.title = '中国东信智慧园区'
-    //Cookies.set("openid57",'o5P6I5tLj-TjrK7leWUT8EFmTCa4') //本地测试
+    Cookies.set("openid57",'o5P6I5tLj-TjrK7leWUT8EFmTCa4') //本地测试
     if(Cookies.get('rememberMe57')){
       this.loginForm.rememberMe = Boolean(Cookies.get('rememberMe57'))
     }
@@ -183,8 +184,8 @@ export default {
     },
     login_info() {
       if(Cookies.get("openid57") && Cookies.get("username57") && Cookies.get("password57")){
-        window.location.href = "https://smartpark.caih.com/vuepay/#/home"
-        //this.$router.push({ path: `/home`}) 
+        //window.location.href = "https://smartpark.caih.com/vuepay/#/home"
+        this.$router.push({ path: `/home`}) 
       }else{
         this.$refs.loginForm.validate(valid => {
           if (valid) {
@@ -218,8 +219,8 @@ export default {
                       openId:Cookies.get("openid57")
                     })
                     setTimeout(()=>{
-                      //this.$router.push({ path: `/home`}) 
-                      window.location.href = "https://smartpark.caih.com/vuepay/#/home"
+                      this.$router.push({ path: `/home`}) 
+                      //window.location.href = "https://smartpark.caih.com/vuepay/#/home"
                     },200)
                   }
 
@@ -249,8 +250,8 @@ export default {
                       openId:Cookies.get("openid57")
                     })
                     setTimeout(()=>{
-                      //this.$router.push({ path: `/home`}) 
-                      window.location.href = "https://smartpark.caih.com/vuepay/#/home"
+                      this.$router.push({ path: `/home`}) 
+                      //window.location.href = "https://smartpark.caih.com/vuepay/#/home"
                     },200)
                     
                   }
@@ -273,7 +274,6 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 .mianBox{
     color: #000;

src/views/orderingFood/address/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="mianBox">
+    <van-row class="headerBox" @click="fanhuiBtn">
+      <van-icon name="arrow-left"  class="arrow-left" />
+      <van-col class="return">返回</van-col>
+      <van-col class="title">{{ title }}</van-col>
+    </van-row>
+    <van-row class="top">
+      <van-row class="foodType">
+        <van-col class="describe" :span="12">
+          <van-image
+            :src="require('../../../assets/image/address.png')"
+            class="cj"
+          />
+          <span class="describe">送餐地址</span>
+        </van-col>
+      </van-row>
+    </van-row>
+    <van-row class="middle">
+        <van-col :span="24" class="addressWrap">
+          <van-col :span="24" class="address" v-for="(item,index) in addressList" :key="index" @click="change(item.id)">
+              <van-col :span="24" class="name">{{item.name}}</van-col>
+              <van-image v-if="item.id == form.id"
+                :src="require('../../../assets/image/gx.png')"
+                class="gx"
+            />
+          </van-col>
+          <van-col :span="24" v-if="form.id == '自定义送餐地址：'" class="address">
+              <input type="text" placeholder="请输入送餐地址" v-model="form.address" class="addressInput">
+          </van-col>
+        </van-col>
+      <!-- <van-button  type="danger" @click="diancan" class="button">去点餐</van-button> -->
+    </van-row>
+    <van-col class="tel">
+        <van-col class="telText" :span="12">联系方式（非必填）：</van-col>
+        <input type="text" placeholder="请输入联系方式" v-model="form.tel" class="telInput">
+    </van-col>
+    <van-col class="remarks">
+        <van-col class="remarksText" :span="24">备注信息（非必填）：</van-col>
+        <textarea type="text" placeholder="请输入备注信息" v-model="form.remarks" class="remarksInput" rows="3" />
+    </van-col>
+    <van-row class="bottom">
+      <van-row class="settlement">
+        <van-col class="money">
+          <van-col class="text"
+            >合计金额：<span class="money"
+              >￥{{ money.toFixed(2) }}</span
+            ></van-col
+          >
+        </van-col>
+        <van-col class="sure" @click="submit">
+          结算
+        </van-col>
+      </van-row>
+    </van-row>
+  </div>
+</template>
+<script>
+import axios from "axios";
+import { mapState, mapActions, ContactList } from "vuex";
+import {
+  Field,
+  NumberKeyboard,
+  Dialog,
+  Toast,
+  DropdownMenu,
+  DropdownItem,
+  Stepper,
+} from "vant";
+import {} from "vant";
+import { returnFloat } from "@/assets/js/common.js";
+export default {
+  data() {
+    return {
+        form:{
+            remarks:undefined,
+            tel:undefined,
+            address:undefined,
+            id:"自定义送餐地址：",
+        },
+      title: "送菜地址",
+      money: 0,
+      foodList: [
+        { name: "香菇肉粉1", money: "10.00", num: 0,id:1 },
+        { name: "香菇肉粉2", money: "11.00", num: 0,id:2 },
+        { name: "香菇肉粉3", money: "12.00", num: 0,id:3 },
+        { name: "香菇肉粉4", money: "13.00", num: 0 ,id:4},
+        { name: "香菇肉粉5", money: "14.00", num: 0 ,id:5},
+        { name: "香菇肉粉6", money: "15.00", num: 0 ,id:6},
+        { name: "香菇肉粉7", money: "16.50", num: 0 ,id:7},
+        { name: "香菇肉粉8", money: "13.00", num: 0,id:8 },
+        { name: "香菇肉粉9", money: "14.00", num: 0,id:9 },
+        { name: "香菇肉粉10", money: "15.00", num: 0,id:10 },
+        { name: "香菇肉粉11", money: "16.50", num: 0,id:11 },
+     
+      ],
+      addressList: [
+        { name: "201包间", id: "201包间" },
+        { name: "202包间", id: "202包间" },
+        { name: "1606包间", id: "1606包间"},
+        { name: "1608包间", id: "1608包间"},
+        { name: "自定义送餐地址：", id: "自定义送餐地址："},
+      ],
+    };
+  },
+  watch: {
+
+  },
+  components: {
+    [Field.name]: Field,
+    [NumberKeyboard.name]: NumberKeyboard,
+    [Dialog.name]: Dialog,
+    [Toast.name]: Toast,
+  },
+  computed: {
+    ...mapState({
+       footStoreData:state=>state.cart
+    })
+   },
+  created() {
+      if(JSON.stringify(this.footStoreData) != '[]'){
+          this.foodList = this.footStoreData
+      }
+      let data = this.footStoreData
+      for(let i=0;i<data.length;i++){
+          if(data[i].num){
+              this.money += data[i].money * data[i].num
+          }
+      }
+      // this.money = this.footStoreData
+  },
+  mouted() {
+    var url = window.location.href;
+  },
+  computed: {
+    ...mapState({
+       footStoreData:state=>state.cart
+    })
+   },
+  methods: {
+    fanhuiBtn() {
+       this.$router.go(-1)
+    },
+    diancan() {},
+    onConfirm() {
+      this.$refs.item.toggle();
+      console.log(this.type, this.$refs.item);
+    },
+    change(id) {
+        this.form.id = id
+    },
+    submit(){
+      
+      Dialog.confirm({
+        title: '系统信息',
+        message: '您的点餐已进入配餐流程，请耐心等候，谢谢！',
+      }).then(() => {
+        
+      });
+      document.getElementsByClassName("van-button__text").html = "关闭"
+        
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.mianBox {
+  width: 100%;
+  height: 100%;
+  background-color: #f9f9f9 !important;
+  .headerBox {
+    position: relative;
+    .arrow-left {
+      font-size: 24px;
+      vertical-align: middle;
+      margin-left: -6px;
+    }
+    .return {
+      vertical-align: middle;
+      font-size: 16px;
+      line-height: 42px;
+    }
+    .title {
+      position: absolute;
+      width: calc(100vw - 30px);
+      text-align: center;
+    }
+  }
+  .top {
+    background-color: #fff;
+    .foodType {
+      padding: 10px 15px 10px;
+      text-align: left;
+      border-bottom: 1px solid #e8e8e8;
+      .cj {
+        width: 30px;
+        vertical-align: middle;
+        margin-left: -10px;
+      }
+      .describe {
+        font-size: 20px;
+        font-weight: 700;
+        vertical-align: middle;
+        margin-left: 10px;
+        color: #d7000f;
+      }
+      .type {
+        margin-top: -6px;
+      }
+    }
+  }
+  .middle {
+    background-color: #fff;
+    .addressWrap {
+        .address {
+          padding: 20px 20px;
+          border-top: 1px solid #e8e8e8;
+          font-size: 16px;
+          position: relative;
+            .name {
+                color: #333;
+            }
+        
+            .gx {
+                margin-top: 20px;
+                text-align: right;
+                position: absolute;
+                width:20px;
+                right:20px;
+                top:00px;
+            }
+      }
+    }
+  }
+  .tel,.remarks{
+        background-color: #fff;
+        margin-top:10px;
+        padding: 20px 20px;
+        font-size: 16px;
+        input{
+            border:none;
+            width:50%;
+            display: inline-block;
+            height:20px;
+        }
+        textarea{
+            width:calc(100% - 20px);
+            margin:10px 0 0;
+            border:1px solid #ccc;
+            border-radius: 6px;
+            padding:10px;
+        }
+    }
+
+  .bottom {
+    background: #fff;
+    width: 100%;
+    margin-top: 10px;
+    position: fixed;
+    bottom: 0px;
+    left: 0;
+    height: 60px;
+    line-height: 60px;
+    font-size: 18px;
+    .settlement {
+      padding: 0 15px;
+      .text {
+        color: #666666;
+        .money {
+          color: #d7000f;
+        }
+      }
+    }
+    .sure {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 30%;
+      background: #d7000f;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
+<style>
+.van-dropdown-menu__bar {
+  box-shadow: none;
+}
+.van-ellipsis {
+  font-size: 16px;
+  text-align: right;
+}
+.van-dropdown-menu__title::after {
+  /* border:6px solid; */
+}
+.van-dropdown-menu__item {
+  width: 100% !important;
+}
+.van-dropdown-menu__title {
+  width: 100%;
+}
+.van-stepper__input {
+  border: 1px solid #e8e8e8;
+  width: 40px;
+  margin: 0 10px;
+}
+.address input{
+    border:none !important;
+}
+.van-dialog__cancel{
+  display: none;
+}
+</style>

src/views/orderingFood/index.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="mianBox" v-if="order">
+    <van-row class="headerBox">
+      <van-icon name="arrow-left" @click="fanhuiBtn" class="arrow-left" />
+      <van-col class="return">返回</van-col>
+      <van-col class="title">{{title}}</van-col>
+    </van-row>
+    <van-row class="top">
+        <van-row class="timeType">
+            <van-col class="describe">今日{{type}}菜品：<span class="time">（点餐时间：{{time}}）</span></van-col>
+        </van-row>
+        <van-row class="RecommendedDishes">
+          <van-col  :span="7" v-for="(item,index) in RecommendedDishes" :key="index" class="dishes" :gutter="20">
+            {{item.name}}
+          </van-col>
+        </van-row>
+        <van-button  type="danger" @click="diancan" class="button">去点餐</van-button>
+    </van-row>
+    <van-row class="bottom">
+        <van-row class="title">
+            <van-col span="12" class="describe">最近点餐：</van-col>
+            <van-col span="12" class="allOrder" @click="allOrder">
+                <span>所有订单</span>
+                <van-image :src="require('../../assets/image/right2.png')" class="right_icon"  />
+            </van-col>
+        </van-row>
+        <van-row class="orderList" gutter="20">
+          <van-col span="24" v-for="(item,index) in order" :key="index" class="order">
+              <van-col span="12" class="moneyText">下单金额</van-col>
+              <van-col span="12" class="money">￥{{item.money}}</van-col>
+              <van-col span="12" class="orderTimeText">下单时间</van-col>
+              <van-col span="12" class="orderTime">{{item.createTime}}</van-col>
+              <van-col span="12" class="statusText">当前状态</van-col>
+              <van-col span="12" :class="item.status == '4' ? 'status' : 'status1'">
+                  {{item.status == "1" ? "待接单" : item.status == "2" ? "已接单" : item.status == "3" ? "配餐中" : item.status == "4" ? "送餐" : "完成"}}
+              </van-col>
+              <van-steps :active="item.status" v-if="item.status != '4'"  active-color="#D7000F" inactive-color="#999999">
+                <van-step>待接单</van-step>
+                <van-step>已接单</van-step>
+                <van-step>配餐中</van-step>
+                <van-step>送餐</van-step>
+             </van-steps>
+          </van-col>
+          <van-col span="24" class="noMore">没有更多数据了</van-col>
+        </van-row>
+    </van-row>
+  </div>
+</template>
+<script>
+import axios from "axios";
+import { Field, NumberKeyboard, Dialog, Toast,Step, Steps } from "vant";
+import { returnFloat } from '@/assets/js/common.js'
+export default {
+  data() {
+    return {
+      title:"自助点餐",
+      type:"晚餐",
+      time:'15:00-19:00',
+      RecommendedDishes:[
+          {name:"香菇肉粉1"},
+          {name:"香菇肉粉2"},
+          {name:"香菇肉粉3"},
+          {name:"香菇肉粉4"},
+          {name:"香菇肉粉5"},
+          {name:"香菇肉粉6"},
+          {name:"香菇肉粉7"},
+          {name:"香菇肉粉8"},
+          {name:"香菇肉粉9"},
+          {name:"香菇肉粉10"},
+      ],
+      order:[
+          {money:'18.50',createTime:'2022-08-14 00:00:00',status:2},
+          {money:'20.00',createTime:'2022-08-14 00:00:00',status:3},
+          {money:'100.00',createTime:'2022-08-14 00:00:00',status:4}
+      ],
+      
+    };
+  },
+  watch: {
+    money(val) {
+      if (/^0[1-9]/.test(val)) {
+        this.money = val.substring(1);
+      }
+    },
+  },
+  components: {
+    [Field.name]: Field,
+    [NumberKeyboard.name]: NumberKeyboard,
+    [Dialog.name]: Dialog,
+    [Toast.name]: Toast,
+  },
+  created() {
+    var url = window.location.href;
+    localStorage.setItem("amount57",url)
+    if(url.indexOf("token") > 1){
+      //("app进入")
+      if(this.getQueryVariable("token")){
+        localStorage.removeItem('type');
+        this.erp = true
+        this.noerp = false
+        this.loadingErp = true
+        this.userQuery()
+      }else{
+        //console.log("app进入")
+        Toast(this.getQueryVariable("无token传入！"))
+      }
+    }
+
+  },
+  mouted(){
+    var url = window.location.href;
+  },
+  methods: {
+      diancan(){
+        this.$router.push({ path: "/orderService"})
+      },
+  //用户查询(卡号)
+    userQuery(){
+      axios({//查询信息
+        method: 'get',
+        url: 'https://smartpark.caih.com/zkxt/api/thirdparty/v1/user/getZkUserByCipher?cipher=' + this.getQueryVariable("token"),
+        timeout: 10000,
+      }).then(res =>{
+        if(res.data?.data?.id){
+          //axios.get(`/dxtop/staff/one?id=0001T110000000002HBL`).then(res2 => { //测试
+          axios.get(`/dxtop/staff/one?id=${res.data.data.id}`).then(res2 => { //验证充值信息是否同步
+            if(res2.data.data.proportion){
+              this.proportion = res2.data.data.proportion
+            }else{
+              this.proportion = 1
+            }
+            if(res2.data.data){
+              localStorage.setItem("user_wt", res.data.data.id)
+              // localStorage.setItem("user_wt", "0001T110000000002HBL") //测试id
+              localStorage.setItem("cardId57", res2.data.data.cardId)
+              this.cardId = res2.data.data.cardId
+              this.cardLoading = false
+              this.Balance()
+              this.recharge2()
+            }else{
+              this.userNoAlert()
+            }
+            this.loadingErp = false
+          })
+        }else if(res.data?.data?.cardId){
+          this.loadingErp = false
+          Toast("用户卡号未绑定")
+        }else{
+          this.loadingErp = false
+          this.userNoAlert()
+        }
+      }).catch(err =>{
+        this.loadingErp = false
+        this.userNoAlert()
+      });
+    },
+    userNoAlert(){
+      Toast("当前账户初始流程中，请耐心等待或联系管理人员查询")
+    },
+    getQueryVariable(variable){//参数获取 设定微信进入参数
+      //window.location.search.substring(1);
+      console.log(variable)
+      var query = window.location.hash.substring(3);
+      var vars = query.split("&");
+      if(vars[2]){ //判定微信端进入
+        localStorage.setItem("passageway","weixin")
+      }else{
+        localStorage.removeItem("passageway")
+      }
+      for (var i=0;i<vars.length;i++) {
+        var pair = vars[i].split("=");
+        if(pair[0] == variable || pair[0] =="mount?token"){
+          
+          if(vars[1] != "classify"){
+            // localStorage.removeItem("classify")
+          }
+          if(variable =="token"){
+            this.user = pair[1]
+          }else if(variable =="type"){
+            this.type = pair[1]
+          }
+          return pair[1];
+        }
+      }
+      return(false);
+    },
+
+
+
+
+    handleClose() {
+      this.money = Number(this.money);
+      this.overlayShow = false;
+    },
+    allOrder(){
+      this.$router.push({ path: "/orderList"})
+    },
+
+
+
+    //返回上级或app目录页
+    fanhuiBtn(){
+      this.$router.go(-1)
+      // if(localStorage.getItem("passageway")){
+      //   this.$router.go(-1)
+      // }else{
+        // setTimeout(()=>{
+        //   this.$router.go(-2)
+        // },10)
+        
+        //window.location.href = "https://smartpark.caih.com/h5/#/home/feature?isApp=true"
+      //}
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.mianBox{
+    width:100%;
+    height:100%;
+    background-color: #F9F9F9 !important;
+    .headerBox{
+        position: relative;
+        .arrow-left{
+            font-size: 24px;
+            vertical-align: middle;
+            margin-left:-6px;
+        }
+        .return{
+            vertical-align: middle;
+            font-size: 16px;
+            line-height: 42px;
+        }
+        .title{
+            position: absolute;
+            width:calc(100vw - 30px);
+            text-align: center;
+        }
+    }
+    .top{
+        padding:0 15px;
+        background-color: #fff;
+        .timeType{
+            padding:10px 0 2px;
+            text-align: left;
+            .describe{
+                font-size: 16px;
+                // font-family: PingFangMedium;
+                font-weight: 700;
+                width:100%;
+            }
+            .time{
+                font-size: 14px;
+                font-weight: 400;
+            }
+        }
+        .RecommendedDishes{
+          margin-top:6px;
+            .dishes{
+                padding:10px 0;
+                background-color: #F9F9F9;
+                color:#666;
+                text-align: center;
+                border-radius: 6px;
+                font-size: 14px;
+                margin-top:8px;
+            }
+            .dishes:nth-child(3n),.dishes:nth-child(3n-1){
+              margin-left:21px;
+            }
+        }
+        .button{
+            width:100%;
+            margin:20px 0;
+            border-radius: 10px;
+            font-size: 16px;
+        }
+    }
+    .bottom{
+        background-color: #fff;
+        margin-top:10px;
+        .title{
+            padding:10px 15px;
+            border-bottom:1px solid #F9F9F9;
+            text-align: left;
+            .describe{
+                font-size: 16px;
+                // font-family: PingFangMedium;
+                font-weight: 700;
+            }
+            .allOrder{
+                font-size: 14px;
+                font-weight: 400;
+                text-align: right;
+                .right_icon{
+                    width:6px !important;
+                    margin-left:10px;
+                }
+            } 
+        }
+        .orderList{
+            .order{
+                padding:15px 15px 15px;
+                .moneyText,.orderTimeText,.statusText{
+                    color:#999999;
+                    
+                }
+                .money,.orderTime,.status{
+                    color:#333;
+                    text-align: right;
+                }
+                div{
+                    font-size: 14px;
+                    padding:5px 0;
+                }
+                // div:nth-child(even){
+                //     text-align: right;
+                // }
+                .status1{
+                    color:#D7000F;
+                    text-align: right;
+                }
+                .van-steps{
+                    width:100%;
+                    background:transparent;
+                    height:50px;
+                    
+                }
+            }
+            .order:nth-child(odd){
+                background-color: #fff;
+            }
+            .order:nth-child(even){
+                background-color: #F9F9F9;
+            }
+            
+        }
+        .noMore{
+            background-color: #F9F9F9;
+            color:#999999;
+            text-align: center;
+            padding:20px 0;
+            font-size: 14px;
+        }
+    }
+    
+}
+
+</style>
+<style>
+.van-steps__items{
+    margin-top:-10px !important;
+}
+.van-step__title{
+    position: absolute !important;
+    top:40px;
+    font-size: 14px !important;
+}
+</style>

src/views/orderingFood/orderList/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="mianBox" v-if="order">
+    <van-row class="headerBox" @click="fanhuiBtn">
+      <van-icon name="arrow-left"  class="arrow-left" />
+      <van-col class="return" >返回</van-col>
+      <van-col class="title">{{title}}</van-col>
+    </van-row>
+    <van-row class="bottom">
+        <van-row class="orderList" :gutter="20">
+          <van-col span="24" v-for="(item,index) in order" :key="index" class="order">
+              <van-col span="12" class="moneyText">下单金额</van-col>
+              <van-col span="12" class="money">￥{{item.money}}</van-col>
+              <van-col span="12" class="orderTimeText">下单时间</van-col>
+              <van-col span="12" class="orderTime">{{item.createTime}}</van-col>
+              <van-col span="12" class="statusText">当前状态</van-col>
+              <van-col span="12" :class="item.status == '4' ? 'status' : 'status1'">
+                  {{item.status == "1" ? "待接单" : item.status == "2" ? "已接单" : item.status == "3" ? "配餐中" : item.status == "4" ? "送餐" : "完成"}}
+              </van-col>
+              <!-- <van-steps :active="item.status" v-if="item.status != '4'"  active-color="#D7000F" inactive-color="#999999">
+                <van-step>待接单</van-step>
+                <van-step>已接单</van-step>
+                <van-step>配餐中</van-step>
+                <van-step>送餐</van-step>
+             </van-steps> -->
+          </van-col>
+          <van-col span="24" class="noMore">没有更多数据了</van-col>
+        </van-row>
+    </van-row>
+  </div>
+</template>
+<script>
+import axios from "axios";
+import { Field, NumberKeyboard, Dialog, Toast,Step, Steps } from "vant";
+import { returnFloat } from '@/assets/js/common.js'
+export default {
+  data() {
+    return {
+      title:"点餐记录",
+      order:[
+          {money:'18.50',createTime:'2022-08-14 00:00:00',status:2},
+          {money:'20.00',createTime:'2022-08-14 00:00:00',status:3},
+          {money:'100.00',createTime:'2022-08-14 00:00:00',status:4}
+
+      ],
+      
+
+    };
+  },
+  watch: {
+    
+  },
+  components: {
+    [Field.name]: Field,
+    [NumberKeyboard.name]: NumberKeyboard,
+    [Dialog.name]: Dialog,
+    [Toast.name]: Toast,
+  },
+  created() {
+    
+
+  },
+  mouted(){
+    var url = window.location.href;
+  },
+  methods: {
+      diancan(){
+
+      },
+      fanhuiBtn(){
+          console.log(11)
+          this.$router.go(-1)
+      }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.mianBox{
+    width:100%;
+    height:100%;
+    background-color: #F9F9F9 !important;
+    .headerBox{
+        position: relative;
+        .arrow-left{
+            font-size: 24px;
+            vertical-align: middle;
+            margin-left:-6px;
+        }
+        .return{
+            vertical-align: middle;
+            font-size: 16px;
+            line-height: 42px;
+        }
+        .title{
+            position: absolute;
+            width:calc(100vw - 30px);
+            text-align: center;
+        }
+    }
+
+    .bottom{
+        background-color: #fff;
+
+        .orderList{
+            .order{
+                padding:15px 15px 15px;
+                .moneyText,.orderTimeText,.statusText{
+                    color:#999999;
+                }
+                .money,.orderTime,.status{
+                    color:#333;
+                    text-align: right;
+                }
+                div{
+                    padding:5px 0;
+                    font-size: 14px;
+                }
+                // div:nth-child(even){
+                //     text-align: right;
+                // }
+                .status1{
+                    color:#D7000F;
+                    text-align: right;
+                }
+                .van-steps{
+                    width:100%;
+                    background:transparent;
+                    height:50px;
+                    
+                }
+            }
+            .order:nth-child(odd){
+                background-color: #fff;
+            }
+            .order:nth-child(even){
+                background-color: #F9F9F9;
+            }
+            
+        }
+        .noMore{
+            background-color: #F9F9F9;
+            color:#999999;
+            text-align: center;
+            padding:20px 0;
+            font-size: 14px;
+        }
+    }
+    
+}
+
+</style>
+<style>
+.van-steps__items{
+    margin-top:-10px !important;
+}
+.van-step__title{
+    position: absolute !important;
+    top:40px;
+}
+</style>

src/views/orderingFood/orderService/index.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="mianBox">
+    <van-row class="headerBox">
+      <van-icon name="arrow-left" @click="fanhuiBtn" class="arrow-left" />
+      <van-col class="return">返回</van-col>
+      <van-col class="title">{{ title }}</van-col>
+    </van-row>
+    <van-row class="top">
+      <van-row class="foodType">
+        <van-col class="describe" :span="12">
+          <van-image
+            :src="require('../../../assets/image/cj.png')"
+            class="cj"
+          />
+          <span class="describe">{{ typeVlue }}菜单</span>
+        </van-col>
+        <van-col class="type" :span="11">
+          <van-dropdown-menu>
+            <van-dropdown-item v-model="type" :options="option" />
+          </van-dropdown-menu>
+        </van-col>
+      </van-row>
+    </van-row>
+    <van-row class="middle">
+      <van-row class="foodList" :gutter="20">
+        <van-col
+          span="24"
+          v-for="(item, index) in foodList"
+          :key="index"
+          class="foodWrap"
+        >
+          <van-col span="24" class="food">
+            <van-col span="12" class="left">
+              <van-col span="24" class="text"
+                >菜名：<span class="name">{{ item.name }}</span></van-col
+              >
+              <van-col span="24" class="text"
+                >单价：<span class="money">￥{{ item.money }}</span></van-col
+              >
+            </van-col>
+            <van-col span="12" class="right">
+              <van-stepper
+                v-model="item.num"
+                min="0"
+                max="30"
+                theme="round"
+                button-size="30"
+                @change="onChange(item.id,item.num)"
+              />
+            </van-col>
+          </van-col>
+        </van-col>
+      </van-row>
+      <!-- <van-button  type="danger" @click="diancan" class="button">去点餐</van-button> -->
+    </van-row>
+    <van-row class="bottom">
+      <van-row class="settlement">
+        <van-col class="money">
+          <van-col class="text"
+            >合计金额：<span class="money"
+              >￥{{ money.toFixed(2) }}</span
+            ></van-col
+          >
+        </van-col>
+        <van-col class="sure" @click="submit">
+          结算
+        </van-col>
+      </van-row>
+    </van-row>
+  </div>
+</template>
+<script>
+import axios from "axios";
+import { mapState, mapActions } from "vuex";
+import {
+  Field,
+  NumberKeyboard,
+  Dialog,
+  Toast,
+  DropdownMenu,
+  DropdownItem,
+  Stepper,
+} from "vant";
+import {} from "vant";
+import { returnFloat } from "@/assets/js/common.js";
+export default {
+  data() {
+    return {
+      title: "点餐服务",
+      typeVlue: "晚餐",
+      type: 2,
+      money: 0,
+      foodList: [
+        { name: "香菇肉粉1", money: "10.00", num: 0,id:1 },
+        { name: "香菇肉粉2", money: "11.00", num: 0,id:2 },
+        { name: "香菇肉粉3", money: "12.00", num: 0,id:3 },
+        { name: "香菇肉粉4", money: "13.00", num: 0 ,id:4},
+        { name: "香菇肉粉5", money: "14.00", num: 0 ,id:5},
+        { name: "香菇肉粉6", money: "15.00", num: 0 ,id:6},
+        { name: "香菇肉粉7", money: "16.50", num: 0 ,id:7},
+        { name: "香菇肉粉8", money: "13.00", num: 0,id:8 },
+        { name: "香菇肉粉9", money: "14.00", num: 0,id:9 },
+        { name: "香菇肉粉10", money: "15.00", num: 0,id:10 },
+        { name: "香菇肉粉11", money: "16.50", num: 0,id:11 },
+     
+      ],
+      option: [
+        { text: "早餐", value: 0 },
+        { text: "午餐", value: 1 },
+        { text: "晚餐", value: 2 },
+        { text: "宵夜", value: 3 },
+      ],
+    };
+  },
+  watch: {
+    money(val) {
+      if (/^0[1-9]/.test(val)) {
+        this.money = val.substring(1);
+      }
+    },
+  },
+  components: {
+    [Field.name]: Field,
+    [NumberKeyboard.name]: NumberKeyboard,
+    [Dialog.name]: Dialog,
+    [Toast.name]: Toast,
+  },
+  computed: {
+    ...mapState({
+       footStoreData:state=>state.cart
+    })
+   },
+  created() {
+      if(JSON.stringify(this.footStoreData) != '[]'){
+          this.foodList = this.footStoreData
+      }
+  },
+  mouted() {
+    var url = window.location.href;
+  },
+  methods: {
+    fanhuiBtn() {},
+    diancan() {},
+    onConfirm() {
+      this.$refs.item.toggle();
+      console.log(this.type, this.$refs.item);
+    },
+    onChange(id,value) {
+    //   Toast.loading({ forbidClick: true });
+
+    //   clearTimeout(this.timer);
+    //   this.timer = setTimeout(() => {
+    //     Toast.clear();
+    //     // 注意此时修改 value 后会再次触发 change 事件
+    //     this.value = value;
+    //   }, 500);
+        this.money = 0;
+        let data = this.foodList
+        for(let i=0;i<data.length;i++){
+            if(data[i].num){
+                this.money += data[i].money * data[i].num
+            }
+        }
+    },
+    submit(){
+        if(this.money<=0){
+            Toast("请添加菜品")
+        }
+        this.$store.dispatch("cart", this.foodList)
+        this.$router.push({ path: "/address"})
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.mianBox {
+  width: 100%;
+  height: 100%;
+  background-color: #f9f9f9 !important;
+  .headerBox {
+    position: relative;
+    .arrow-left {
+      font-size: 24px;
+      vertical-align: middle;
+      margin-left: -6px;
+    }
+    .return {
+      vertical-align: middle;
+      font-size: 16px;
+      line-height: 42px;
+    }
+    .title {
+      position: absolute;
+      width: calc(100vw - 30px);
+      text-align: center;
+    }
+  }
+  .top {
+    background-color: #fff;
+    .foodType {
+      padding: 10px 15px 2px;
+      text-align: left;
+      border-bottom: 1px solid #e8e8e8;
+      .cj {
+        width: 30px;
+        vertical-align: middle;
+        margin-left: -10px;
+      }
+      .describe {
+        font-size: 20px;
+        font-weight: 700;
+        vertical-align: middle;
+        margin-left: 10px;
+        color: #d7000f;
+      }
+      .type {
+        margin-top: -6px;
+      }
+    }
+  }
+  .middle {
+    padding: 0px 15px;
+    background-color: #fff;
+    height: calc(100vh - 180px);
+    overflow-y: scroll;
+    .foodList {
+      .foodWrap {
+        .food {
+          padding: 15px 0;
+          border-bottom: 1px solid #e8e8e8;
+          .left {
+            color: #666666;
+            font-size: 16px;
+            line-height: 30px;
+            vertical-align: middle;
+            .name {
+              color: #333;
+              font-weight: 700;
+            }
+            .money {
+              color: #d7000f;
+            }
+          }
+          .right {
+            margin-top: 20px;
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+
+  .bottom {
+    background: #fff;
+    width: 100%;
+    margin-top: 10px;
+    position: fixed;
+    bottom: 0px;
+    left: 0;
+    height: 60px;
+    line-height: 60px;
+    font-size: 18px;
+    .settlement {
+      padding: 0 15px;
+      .text {
+        color: #666666;
+        .money {
+          color: #d7000f;
+        }
+      }
+    }
+    .sure {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 30%;
+      background: #d7000f;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
+<style>
+.van-dropdown-menu__bar {
+  box-shadow: none;
+}
+.van-ellipsis {
+  font-size: 16px;
+  text-align: right;
+}
+.van-dropdown-menu__title::after {
+  /* border:6px solid; */
+}
+.van-dropdown-menu__item {
+  width: 100% !important;
+}
+.van-dropdown-menu__title {
+  width: 100%;
+}
+.van-stepper__input {
+  border: 1px solid #e8e8e8;
+  width: 40px;
+  margin: 0 10px;
+}
+</style>