123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <template>
- <div class="buySetmeal-wrap">
- <a-card :bordered="false">
- <a-row>
- <a-col :span="5"><b class="buySetmeal-tit">选择套餐</b></a-col>
- <a-col :span="19" class="search-con">
- <a-input-search
- v-model="queryWord"
- allowClear
- placeholder="搜索套餐"
- enter-button
- class="search-inp"
- id="buySetmeal-search"
- @search="onSearch" />
- </a-col>
- </a-row>
- <div class="draConts">
- <!-- 分类 -->
- <a-tabs v-model="clsId" tabPosition="left" class="smenus" @change="tabChange">
- <a-tab-pane key="all" tab="全部"></a-tab-pane>
- <a-tab-pane v-for="item in setmealType" :key="item.code" :tab="item.dispName"></a-tab-pane>
- </a-tabs>
- <!-- 套餐数据列表 -->
- <div class="itemBox" id="bundelScroll" :style="{height: winH - 358 + 'px'}">
- <a-row class="items-list" v-for="(item, index) in listData" :key="index">
- <a-col :span="15">
- <h3>{{ item.name }} </h3>
- <p>
- <span><b>原价:</b><em style="text-decoration: line-through;">¥{{ item.originalPrice }}</em> </span>
- <span style="margin-left: 15px;margin-right: 15px;color: red;"><b>现价:</b>¥{{ item.price }} </span>
- </p>
- <p>
- <span><b>套餐说明:</b>{{ item.summary || '-' }}</span>
- </p>
- </a-col>
- <a-col :span="1"></a-col>
- <a-col :span="4">
- <!-- <span>1 套</span> -->
- </a-col>
- <a-col :span="4">
- <a-button
- class="handle-btn buy-btn"
- id="buySetmeal-buy"
- type="primary"
- @click="openPay(item)"
- shape="round">下单</a-button>
- <a-button
- class="handle-btn look-btn"
- id="buySetmeal-look"
- @click="openDetails(item)"
- shape="round">查看详细</a-button>
- </a-col>
- </a-row>
- <a-empty v-if="listData.length == 0" class="noData" />
- </div>
- </div>
- </a-card>
- <!-- 下单弹框 -->
- <SetmealPayMoney :openModal="openSetmealPay" :setmealInfo="setmealInfo" @close="closeModal" />
- <!-- 套餐详细 -->
- <SetmealItemDetailModal :openModal="openSetmealDetails" :setmealId="setmealId" @close="closeModal" />
- </div>
- </template>
- <script>
- import SetmealPayMoney from './SetmealPayMoney.vue'
- import SetmealItemDetailModal from './SetmealItemDetailModal.vue'
- import { getLookUpDatas } from '@/api/data'
- import { getBundleList } from '@/api/customerBundle.js'
- export default {
- name: 'BuySetmeal',
- components: { SetmealPayMoney, SetmealItemDetailModal },
- data () {
- return {
- listData: [], // 套餐数据
- queryWord: '', // 关键词
- clsId: '',
- pageNo: 1,
- pageSize: 1000,
- setmealType: [], // 套餐类型
- openSetmealPay: false, // 下单弹框是否显示
- openSetmealDetails: false, // 查看详细弹框是否显示
- setmealId: null, // 套餐id
- setmealInfo: null, // 套餐信息
- winH: 0 // 浏览器高度
- }
- },
- methods: {
- // 搜索套餐
- onSearch () {
- this.clsId = 'all'
- this.initData()
- },
- pageInit () {
- // 默认选择第一个类型
- this.clsId = 'all'
- this.queryWord = ''
- this.initData()
- },
- // 初始化数据
- initData () {
- getBundleList({
- queryWord: this.queryWord,
- clsId: this.clsId == 'all' ? '' : this.clsId
- }).then(res => {
- if (res.status == 200) {
- this.listData = res.data
- } else {
- this.listData = []
- }
- })
- },
- // tab 切换
- tabChange (v) {
- this.listData = []
- document.getElementById('bundelScroll').scrollTop = 0
- this.clsId = v
- if (this.clsId == 'all') {
- this.queryWord = this.queryWord
- } else {
- this.queryWord = ''
- }
- this.initData()
- },
- // 下单
- openPay (data) {
- this.setmealInfo = data
- this.openSetmealPay = true
- },
- closeModal () {
- this.setmealId = null
- this.setmealInfo = null
- this.openSetmealPay = false
- this.openSetmealDetails = false
- this.initData()
- },
- // 查看详细
- openDetails (data) {
- this.setmealId = String(data.id)
- this.openSetmealDetails = true
- },
- // 套餐分类 数据字典
- getBundleClsDatas () {
- getLookUpDatas({ type: 'BUNDLE_TYPE' }).then(res => {
- if (res.status == 200) {
- this.setmealType = res.data
- } else {
- this.setmealType = []
- }
- })
- }
- },
- mounted () {
- this.winH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 浏览器高度
- this.getBundleClsDatas()// 套餐分类 数据字典
- this.pageInit()
- }
- }
- </script>
- <style lang="less">
- .buySetmeal-wrap{
- .buySetmeal-tit{
- line-height: 32px;
- }
- .search-con{
- text-align: right;
- .search-inp{
- width: 60%;
- }
- .ant-input-group .ant-input-affix-wrapper{
- height: 34px;
- }
- .ant-input-group-addon{
- padding: 0;
- }
- }
- .ant-tabs .ant-tabs-left-bar .ant-tabs-tab, .ant-tabs .ant-tabs-right-bar .ant-tabs-tab{
- padding: 12px 55px;
- margin: 0;
- }
- .draConts{
- display: flex;
- border-top: 1px solid #eee;
- margin-top: 20px;
- padding-top: 20px;
- .smenus{
- width: 20%;
- .ant-tabs-nav .ant-tabs-tab:hover{
- color: #1890FF;
- }
- .ant-tabs-ink-bar{
- background: #1890FF;
- }
- .ant-tabs-tab-active.ant-tabs-tab{
- border-radius: 60px 0 0 60px;
- color: #1890FF;
- background: #f0faff;
- }
- .ant-tabs-content.ant-tabs-content-animated.ant-tabs-left-content{
- width: 0;
- padding: 0;
- }
- }
- .itemBox{
- width: 80%;
- overflow: auto;
- .items-list{
- display: flex;
- align-items: middle;
- justify-content: space-around;
- border: 1px solid #eee;
- border-radius: 10px;
- margin: 10px 0;
- padding: 15px 20px;
- font-size: 14px;
- overflow: hidden;
- align-items: center;
- h3{
- margin: 0;
- }
- p{
- color: #666;
- padding: 5px 0 0 0;
- margin: 0;
- b{
- font-weight: normal;
- color: #333;
- }
- }
- .handle-btn{
- display: block;
- width: 90px;
- }
- .look-btn{
- margin-top: 15px;
- }
- }
- .noData{
- margin: 150px 0 0;
- text-align: center;
- }
- }
- }
- }
- </style>
|