浏览代码

套餐销售-已购套餐、购买套餐

chenrui 4 年之前
父节点
当前提交
e3d126437e

+ 10 - 0
src/config/router.config.js

@@ -64,6 +64,16 @@ export const asyncRouterMap = [{
         // permission: 'M_order_list'
       }
     },
+    {
+      path: '/SetmealSales/BuySetmeal',
+      name: 'BuySetmeal',
+      component: () => import('@/views/SetmealSales/BuySetmeal.vue'),
+      meta: {
+        title: '购买套餐',
+        icon: 'file-text'
+        // permission: 'M_order_list'
+      }
+    },
     {
       path: '/SetmealSales/PurchasedSetmeal',
       name: 'PurchasedSetmeal',

+ 88 - 0
src/views/SetmealSales/BuySetmeal.vue

@@ -0,0 +1,88 @@
+<template>
+  <a-card :bordered="false" class="buySetmeal-wrap">
+    <a-row>
+      <a-col :span="5">选择套餐</a-col>
+      <a-col :span="19">
+        <a-input-search v-model="queryWord" placeholder="搜索套餐" enter-button @search="onSearch" />
+      </a-col>
+    </a-row>
+    <div class="draConts">
+      <!-- <div class="smenus">
+        <cSelect
+          ref="menus"
+          showType="menus"
+          v-model="clsId"
+          code="BUNDLE_CLS"
+          @on-change="menuChange">
+        </cSelect>
+      </div>
+      <div class="itemBox" id="bundelScroll">
+      </div> -->
+      <a-tabs v-model="clsId" tabPosition="left" class="smenus">
+        <a-tab-pane key="" tab="全部"></a-tab-pane>
+        <a-tab-pane v-for="item in setmealType" :key="item.id" :tab="item.dispName"></a-tab-pane>
+      </a-tabs>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { VSelect } from '@/components'
+export default {
+  name: 'BuySetmeal',
+  components: { VSelect },
+  data () {
+    return {
+      listData: [], //  套餐数据
+      queryWord: '', //  关键词
+      clsId: '',
+      pageNo: 1,
+      pageSize: 1000,
+      setmealType: [
+        { 'id': 186, 'sort': 1, 'createDate': '2019-09-29 20:23:07', 'updateDate': '2019-09-29 20:23:07', 'lookupCode': 'BUNDLE_CLS', 'dispName': '洗美套餐', 'code': '1', 'isEnable': '1' },
+        { 'id': 187, 'sort': 2, 'createDate': '2019-09-29 20:23:07', 'updateDate': '2019-09-29 20:23:07', 'lookupCode': 'BUNDLE_CLS', 'dispName': '保养套餐', 'code': '2', 'isEnable': '1' },
+        { 'id': 188, 'sort': 3, 'createDate': '2019-09-29 20:23:07', 'updateDate': '2019-09-29 20:23:07', 'lookupCode': 'BUNDLE_CLS', 'dispName': '系统养护套餐', 'code': '3', 'isEnable': '1' },
+        { 'id': 190, 'sort': 5, 'createDate': '2019-09-29 20:23:07', 'updateDate': '2019-12-19 15:12:48', 'lookupCode': 'BUNDLE_CLS', 'dispName': '赠送套餐', 'code': '99', 'isEnable': '1' },
+        { 'id': 189, 'sort': 98, 'createDate': '2019-09-29 20:23:07', 'updateDate': '2019-09-29 20:23:07', 'lookupCode': 'BUNDLE_CLS', 'dispName': '活动套餐', 'code': '98', 'isEnable': '1' }
+      ]
+    }
+  },
+  methods: {
+    //  搜索套餐
+    onSearch () {
+      this.clsId = 'all'
+      this.initData()
+    },
+    // 初始化数据
+    initData () {
+      const _this = this
+      getBundleList({
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        queryWord: this.queryWord,
+        clsId: this.clsId == 'all' ? '' : this.clsId
+      }).then(res => {
+        if (res.status == 200) {
+          _this.listData = res.data.data.list.map(item => {
+            this.$set(item, 'num', 1)
+            return item
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .buySetmeal-wrap{
+    .smenus{
+      .ant-tabs-tab-active.ant-tabs-tab{
+        padding: 12px 16px;
+        border-radius: 60px 0 0 60px;
+        color: #2d8cf0;
+        background: #f0faff;
+      }
+    }
+  }
+</style>

+ 118 - 173
src/views/SetmealSales/PurchasedSetmeal.vue

@@ -1,38 +1,33 @@
 <template>
-  <a-card :bordered="false">
+  <a-card :bordered="false" class="purchasedSetmeal-wrap">
     <!-- 搜索条件 -->
-    <div class="orderCenter-searchForm">
+    <div class="purchasedSetmeal-searchForm">
       <a-form ref="searchForm">
         <a-row :gutter="48">
           <a-col :span="6">
             <a-form-item label="下单时间" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-              <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
+              <a-range-picker
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @calendarChange="calendarChange"
+                @change="onChange" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="网点名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-              <a-select placeholder="请选择" allowClear v-model="storeId" mode="multiple">
-                <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item label="单号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="订单号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
               <a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="服务项目" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-              <a-select placeholder="请选择" allowClear v-model="searchForm.itemId">
-                <a-select-option v-for="item in itemOptionData" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
-              </a-select>
+            <a-form-item label="客户信息" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-input v-model.trim="searchForm.customerMobile" placeholder="手机号/车牌号" allowClear />
             </a-form-item>
           </a-col>
-        </a-row>
-        <a-row :gutter="48">
           <a-col :span="6">
-            <a-form-item label="手机号码" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-              <a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear :maxLength="11" />
+            <a-form-item label="套餐名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear />
             </a-form-item>
           </a-col>
           <a-col :span="6">
@@ -41,18 +36,22 @@
             </a-form-item>
           </a-col>
           <a-col :span="12">
-            <a-button style="margin-right: 10px;" type="primary" @click="handleSearch">查询</a-button>
-            <a-button type="" @click="handleRest">重置</a-button>
-            <a-button type="" :loading="loading" class="export-btn" @click="handleExport">导出</a-button>
+            <a-button class="handle-btn serach-btn" type="primary" @click="handleSearch">查询</a-button>
+            <a-button class="handle-btn" type="" @click="handleReset">重置</a-button>
+            <a-button class="handle-btn export-btn" type="" :loading="loading" @click="handleExport">导出</a-button>
           </a-col>
         </a-row>
       </a-form>
     </div>
+    <!-- 新建 -->
+    <div class="table-operator"><a-button type="primary" icon="plus" @click="goBuy()">购买套餐</a-button></div>
     <!-- 合计 -->
     <div class="total">
       <a-icon type="info-circle" class="iconImg" />
-      <strong>合计:</strong><span v-model="orderTotal">{{ orderTotal || 0 }} 单</span><strong style="margin-left: 15px;">实收:</strong><span
-        v-model="paymentAmountTotal">{{ paymentAmountTotal || 0 }} 元</span>
+      <strong>总计:</strong><span v-model="orderTotal">{{ orderTotal || 0 }} 单</span>
+      <strong style="margin-left: 15px;">应收:</strong><span v-model="paymentAmountTotal">{{ paymentAmountTotal || 0 }} 元</span>
+      <strong style="margin-left: 15px;">优惠:</strong><span v-model="paymentAmountTotal">{{ paymentAmountTotal || 0 }} 元</span>
+      <strong style="margin-left: 15px;">实收:</strong><span v-model="paymentAmountTotal">{{ paymentAmountTotal || 0 }} 元</span>
     </div>
     <!-- 列表 -->
     <s-table
@@ -66,50 +65,30 @@
       <span slot="orderStatus" slot-scope="text">
         {{ $refs.orderStatus.getNameByCode(text) }}
       </span>
-      <!-- 实收金额 -->
-      <span slot="paymentAmount" slot-scope="text, record">
-        <template v-if=" record.payStatus == 'PAID' ">{{ record.paymentAmount }}</template>
-        <template v-else-if=" record.payStatus != 'PAID' ">{{ 0 }}</template>
-      </span>
-      <!-- 优惠 -->
-      <span slot="couponAmount" slot-scope="text, record">
-        <template v-if=" record.orderStatus != 'CANCELED' ">{{ record.couponAmount }}</template>
-        <template v-else-if=" record.orderStatus == 'CANCELED' ">{{ 0 }}</template>
-      </span>
       <!-- 操作 -->
       <span slot="action" slot-scope="text, record">
-        <a-button type="primary" @click="seeDetail(record)">查看</a-button>
-        <!-- 本期暂不做 -->
-        <!-- <a-button type="danger" @click="refund(record)">退款</a-button> -->
+        <a-button type="primary" @click="seeDetail(record)">详情</a-button>
       </span>
     </s-table>
     <!-- 查看详情弹窗 -->
-    <!-- <order-detail-modal :openModal="openDetailModal" :nowId="detailId" @close="openDetailModal=false" /> -->
+    <setmeal-detail-modal :openModal="openDetailModal" :nowId="detailId" @close="openDetailModal=false" />
   </a-card>
 </template>
 
 <script>
-import {
-  STable,
-  VSelect
-} from '@/components'
+import { STable, VSelect } from '@/components'
 import getDate from '@/libs/getDate.js'
 import {
-  orderCenterList,
   itemList,
   storeList,
   orderTotal,
   exportOrder
 } from '@/api/order.js'
-// import OrderDetailModal from './OrderDetailModal.vue'
+import SetmealDetailModal from './SetmealDetailModal.vue'
 import moment from 'moment'
 export default {
-  name: 'OrderCenter',
-  components: {
-    STable,
-    VSelect
-    // OrderDetailModal
-  },
+  name: 'PurchasedSetmeal',
+  components: { STable, VSelect, SetmealDetailModal },
   data () {
     return {
       storeId: [], // 网点名称
@@ -136,105 +115,76 @@ export default {
         moment(getDate.getToday().endtime, this.dateFormat)
       ],
       dateFormat: 'YYYY-MM-DD',
-      columns: [{
-        title: '下单时间',
-        dataIndex: 'orderTime',
-        minWidth: '40',
-        align: 'center'
-      },
-      {
-        title: '单号',
-        dataIndex: 'orderNo',
-        minWidth: '40',
-        align: 'center'
-      },
-      {
-        title: '网点名称',
-        dataIndex: 'storeName',
-        minWidth: '40',
-        align: 'center'
-      },
-      {
-        title: '服务项目',
-        dataIndex: 'itemName',
-        minWidth: '40',
-        align: 'center'
-      },
-      {
-        title: '手机号码',
-        dataIndex: 'customerMobile',
-        minWidth: '40',
-        align: 'center'
-      },
-      {
-        title: '应收(¥)',
-        dataIndex: 'payableAmount',
-        minWidth: '40',
-        align: 'center'
-      },
-      {
-        title: '优惠(¥)',
-        dataIndex: 'couponAmount',
-        minWidth: '40',
-        align: 'center',
-        scopedSlots: {
-          customRender: 'couponAmount'
-        }
-      },
-      {
-        title: '实收(¥)',
-        dataIndex: 'paymentAmount',
-        minWidth: '40',
-        align: 'center',
-        scopedSlots: {
-          customRender: 'paymentAmount'
-        }
-
-      },
-      {
-        title: '状态',
-        dataIndex: 'orderStatus',
-        minWidth: '40',
-        align: 'center',
-        scopedSlots: {
-          customRender: 'orderStatus'
-        }
-      },
-      {
-        title: '操作',
-        dataIndex: 'action',
-        minWidth: '40',
-        align: 'center',
-        scopedSlots: {
-          customRender: 'action'
-        }
-
-      }
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '60', align: 'center' },
+        { title: '订单号', dataIndex: 'orderNo', width: '40', align: 'center' },
+        { title: '下单时间', dataIndex: 'orderTime', width: '40', align: 'center' },
+        { title: '套餐名称', dataIndex: 'storeName', width: '40', align: 'center' },
+        { title: '客户信息', dataIndex: 'customerMobile', width: '40', align: 'center' },
+        { title: '应收金额(¥)', dataIndex: 'payableAmount', width: '40', align: 'center' },
+        { title: '单据状态', scopedSlots: { customRender: 'orderStatus' }, width: '40', align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '40', align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
         this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
         this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
-        this.searchForm.storeIdList = this.storeId
-        return orderCenterList(Object.assign(parameter, this.searchForm)).then(res => {
-          // console.log(res,'0000000000000000000')
+        return storeList(Object.assign(parameter, this.searchForm)).then(res => {
           if (res.status == 200) {
-            return res.data
+            const no = (res.data.pageNo - 1) * res.data.pageSize
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+            }
             this.getTotal()
+            return res.data
           }
         })
-      }
+      },
+      nowBeginDate: '' //  下单时间 当前操作的开始时间
     }
   },
   methods: {
     moment,
+    calendarChange (date, dateStrings) {
+      if (date[0]) {
+        this.nowBeginDate = date[0].format('YYYY-MM-DD')
+      }
+    },
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      if (this.nowBeginDate) { //  有下单时间开始时间时
+        const bVal = this.getThreeMonthsAfter(this.nowBeginDate, -3) //  三个月前时间戳
+        const eVal = this.getThreeMonthsAfter(this.nowBeginDate, 3) //  三个月后时间戳
+        if (Date.now() < eVal) { //  当前日期距起始日期不足三个月
+          return date && date.valueOf() < bVal || date && date.valueOf() > Date.now()
+        } else {
+          return date && date.valueOf() < bVal || date && date.valueOf() > eVal
+        }
+      } else {
+        return date && date.valueOf() > Date.now()
+      }
+    },
+    //  获取month个月后的时间戳
+    getThreeMonthsAfter (dtstr, month) {
+      var s = dtstr.split('-')
+      var yy = parseInt(s[0])
+      var mm = parseInt(s[1])
+      var dd = parseInt(s[2])
+      var dt = new Date(yy, mm + Number(month) - 1, dd)
+      return dt.valueOf()
+    },
+    //  购买套餐
+    goBuy () {
+      this.$router.push({ path: '/SetmealSales/BuySetmeal' })
+    },
     // 创建时间change
     onChange (dates, dateStrings) {
       if ((dates, dateStrings)) {
         this.searchForm.beginDate = dateStrings[0]
         this.searchForm.endDate = dateStrings[1]
+        this.nowBeginDate = this.searchForm.beginDate
       }
-      console.log(this.searchForm.beginDate, this.searchForm.endDate)
     },
     // 获取服务项目数据
     getItemListData () {
@@ -242,7 +192,6 @@ export default {
         pageNo: 1,
         pageSize: 1000
       }).then(res => {
-        // console.log(res, '-----------')
         if (res.status == 200) {
           this.itemOptionData = res.data.list || []
         } else {
@@ -256,7 +205,6 @@ export default {
         pageNo: 1,
         pageSize: 1000
       }).then(res => {
-        // console.log(res, '-----------')
         if (res.status == 200) {
           this.storeOptionData = res.data.list || []
         } else {
@@ -292,26 +240,14 @@ export default {
       this.openDetailModal = true
       this.detailId = record.id
     },
-    // 退款---暂不做
-    // refund(row) {
-    //   const _this = this
-    //   this.$confirm({
-    //     title: '警告',
-    //     content: '确认退款后 款项将通过原渠道退回 且不可撤回,确认退款?',
-    //     okText: '确定',
-    //     cancelText: '取消',
-    //     // onOk() {
-    //
-    //     // }
-    //   })
-    // },
     // 查询
     handleSearch () {
       this.$refs.table.refresh()
       this.getTotal()
     },
     // 重置
-    handleRest () {
+    handleReset () {
+      this.nowBeginDate = getDate.getToday().starttime
       this.searchForm.beginDate = getDate.getToday().starttime
       this.searchForm.endDate = getDate.getToday().endtime
       this.time = [
@@ -366,38 +302,47 @@ export default {
   beforeRouteEnter (to, from, next) {
     next(vm => {
       vm.getItemListData()
-      vm.handleRest()
+      vm.handleReset()
       vm.getStoreListData()
     })
   }
 }
 </script>
 <style lang="less">
-	.orderCenter-searchForm {
-
-		// 搜索框的下间距
-		.ant-form-item {
-			margin-bottom: 10px;
-		}
-	}
-  .export-btn{
-    background-color: #ff9900;
-    border-color: #ff9900;
-    color: #fff;
-    margin-left: 10px;
+  .purchasedSetmeal-wrap{
+    .purchasedSetmeal-searchForm {
+    	// 搜索框的下间距
+    	.ant-form-item {
+    		margin-bottom: 10px;
+    	}
+      .handle-btn{
+        margin-top: 4px;
+      }
+      .serach-btn{
+        margin-right: 10px;
+      }
+      .export-btn{
+        background-color: #ff9900;
+        border-color: #ff9900;
+        color: #fff;
+        margin-left: 10px;
+      }
+    }
+    .table-operator{
+      margin: 18px 0 30px;
+    }
+    // 合计
+    .total {
+    	margin: 15px 0 25px;
+    	width: 100%;
+    	background-color: #e6f7ff;
+    	border: 1px solid #91d5ff;
+    	padding: 8px 15px 8px 27px;
+    	border-radius: 4px;
+    	.iconImg {
+    		color: #1890FF;
+    		margin-right: 10px;
+    	}
+    }
   }
-	// 合计
-	.total {
-		margin: 15px 0 25px;
-		width: 100%;
-		background-color: #e6f7ff;
-		border: 1px solid #91d5ff;
-		padding: 8px 15px 8px 27px;
-		border-radius: 4px;
-
-		.iconImg {
-			color: #1890FF;
-			margin-right: 10px;
-		}
-	}
 </style>

+ 212 - 0
src/views/SetmealSales/SetmealDetailModal.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="DetailsSetmeal">
+    <a-modal
+      class="DetailsSetmealModal"
+      title="套餐购买详情"
+      width="80%"
+      :footer="null"
+      :destroyOnClose="true"
+      @cancel="isShow=false"
+      v-model="isShow">
+      <a-row :gutter="20">
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">购买日期:</p>
+          <p class="item-main">2020-10-20 13:50</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">工单号:</p>
+          <p class="item-main">100000135421356423651</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">使用门店:</p>
+          <p class="item-main">测试验证门店</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">客户姓名:</p>
+          <p class="item-main">李四</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">手机号:</p>
+          <p class="item-main">15705254578</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">销售门店:</p>
+          <p class="item-main">测试验证门店</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">套餐名称:</p>
+          <p class="item-main">合成汽油机油KR7保养套餐</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">套餐价格:</p>
+          <p class="item-main">399元</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">销售人员:</p>
+          <p class="item-main">张三</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">实际收款:</p>
+          <p class="item-main">399元</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">优惠金额:</p>
+          <p class="item-main">0元</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">支付方式:</p>
+          <p class="item-main">现金</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">销售渠道:</p>
+          <p class="item-main">门店</p>
+        </a-col>
+      </a-row>
+      <a-tabs type="card">
+        <a-tab-pane key="1" tab="套餐内容">
+          <!-- 套餐内容列表 -->
+          <s-table
+            ref="tcTable"
+            size="default"
+            :rowKey="(record) => record.id"
+            :columns="setMealColumns"
+            :data="setMealData"
+            bordered>
+          </s-table>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="使用记录">
+          <!-- 使用记录列表 -->
+          <s-table
+            ref="recordTable"
+            size="default"
+            :rowKey="(record) => record.id"
+            :columns="recordColumns"
+            :data="recordData"
+            bordered>
+          </s-table>
+        </a-tab-pane>
+      </a-tabs>
+      <div class="btn-cont">
+        <a-button @click="isShow=false">返回列表</a-button>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+export default {
+  name: 'SetmealDetailModal',
+  components: { STable, VSelect },
+  props: {
+    openModal: { //  弹框是否展示
+      type: Boolean,
+      default: false
+    },
+    setmealId: { //  套餐id
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  弹框是否展示
+      setMealColumns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '内容', dataIndex: 'orderNo', width: 200, align: 'center' },
+        { title: '剩余数量', dataIndex: 'orderTime', width: 100, align: 'center' }
+      ],
+      recordColumns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '使用时间', dataIndex: 'orderNo', width: 100, align: 'center' },
+        { title: '车牌号', dataIndex: 'orderTime', width: 100, align: 'center' },
+        { title: '服务内容', dataIndex: 'orderTime', width: 100, align: 'center' },
+        { title: '服务门店', dataIndex: 'orderTime', width: 100, align: 'center' },
+        { title: '使用数量', dataIndex: 'orderTime', width: 100, align: 'center' },
+        { title: '工单', dataIndex: 'orderTime', width: 100, align: 'center' }
+      ],
+      setMealData: [], //  套餐内容
+      recordData: [] //  使用记录
+    }
+  },
+  methods: {
+    // 套餐详情
+    getSetmealInfo (id) {
+
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (val) {
+      if (!val) {
+        this.$emit('close')
+      }
+    },
+    setmealId (newValue, oldValue) {
+      if (newValue && this.isShow) {
+        this.getSetmealInfo(newValue)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .DetailsSetmealModal{
+    .ant-modal-body{
+      padding: 24px 40px;
+    }
+    .item-cont{
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      .item-label{
+        width: 115px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.85);
+        flex-shrink: 0;
+      }
+      .item-main{
+        flex-grow: 1;
+        .wd-icon{
+          display: block;
+        }
+      }
+      .guidance-con{
+        border: 1px dashed #e8e8e8;
+        border-radius: 6px;
+        padding: 20px;
+        img {
+          max-width: 100%;
+        }
+      }
+      .period-price-con{
+        border-bottom: 1px solid #e8e8e8;
+      }
+      .item-period{
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        flex-grow: 1;
+        border: 1px solid #e8e8e8;
+        border-width: 1px 1px 0;
+        text-align: center;
+        .period, .period-price{
+          padding: 5px 0;
+          border-right: 1px solid #e8e8e8;
+        }
+        .period-price:last-child{
+          border-right: none;
+        }
+      }
+    }
+    .btn-cont{
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+  }
+</style>