|
@@ -21,40 +21,51 @@
|
|
|
<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>
|
|
|
- <span style="margin-left: 15px;margin-right: 15px;">
|
|
|
- 有效期:{{ item.validityTermType == 'PERMANENT_VALIDITY' ? '永久有效' : item.validityTermType == 'FIXED_TIME' ? item.validityTermValue+'过期' : item.validityTermType == 'FIXED_DAYS' ? '购买后'+item.validityTermValue+'天过期' : '' }}
|
|
|
- </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 class="itemBox" id="bundelScroll">
|
|
|
+ <a-spin :spinning="loading" tip="Loading...">
|
|
|
+ <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>
|
|
|
+ <span style="margin-left: 15px;margin-right: 15px;">
|
|
|
+ 有效期:{{ item.validityTermType == 'PERMANENT_VALIDITY' ? '永久有效' : item.validityTermType == 'FIXED_TIME' ? item.validityTermValue+'过期' : item.validityTermType == 'FIXED_DAYS' ? '购买后'+item.validityTermValue+'天过期' : '' }}
|
|
|
+ </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-pagination
|
|
|
+ v-if="listData.length != 0"
|
|
|
+ class="pagination"
|
|
|
+ show-size-changer
|
|
|
+ :total="total"
|
|
|
+ @showSizeChange="onShowSizeChange"
|
|
|
+ @change="onChange" />
|
|
|
+ <!-- 暂无数据 -->
|
|
|
+ <a-empty v-if="listData.length == 0" class="noData" />
|
|
|
+ </a-spin>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-card>
|
|
@@ -80,13 +91,14 @@ export default {
|
|
|
queryWord: '', // 关键词
|
|
|
clsId: '',
|
|
|
pageNo: 1,
|
|
|
- pageSize: 1000,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
setmealType: [], // 套餐类型
|
|
|
openSetmealPay: false, // 下单弹框是否显示
|
|
|
openSetmealDetails: false, // 查看详细弹框是否显示
|
|
|
setmealId: null, // 套餐id
|
|
|
setmealInfo: null, // 套餐信息
|
|
|
- winH: 0 // 浏览器高度
|
|
|
+ loading: false // 加载中状态
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -101,23 +113,40 @@ export default {
|
|
|
this.queryWord = ''
|
|
|
this.initData()
|
|
|
},
|
|
|
+ // 分页查询 每页多少条
|
|
|
+ onShowSizeChange (current, pageSize) {
|
|
|
+ this.pageNo = current
|
|
|
+ this.pageSize = pageSize
|
|
|
+ this.initData()
|
|
|
+ },
|
|
|
+ // 分页查询 页码
|
|
|
+ onChange (page, pageSize) {
|
|
|
+ this.pageNo = page
|
|
|
+ this.pageSize = pageSize
|
|
|
+ this.initData()
|
|
|
+ },
|
|
|
// 初始化数据
|
|
|
initData () {
|
|
|
+ this.loading = true
|
|
|
getBundleList({
|
|
|
queryWord: this.queryWord,
|
|
|
- clsId: this.clsId == 'all' ? '' : this.clsId
|
|
|
+ clsId: this.clsId == 'all' ? '' : this.clsId,
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize
|
|
|
}).then(res => {
|
|
|
if (res.status == 200) {
|
|
|
- this.listData = res.data
|
|
|
+ this.listData = res.data.list || []
|
|
|
+ this.total = res.data.count || 0
|
|
|
} else {
|
|
|
this.listData = []
|
|
|
+ this.total = 0
|
|
|
}
|
|
|
+ this.loading = false
|
|
|
})
|
|
|
},
|
|
|
// tab 切换
|
|
|
tabChange (v) {
|
|
|
this.listData = []
|
|
|
- document.getElementById('bundelScroll').scrollTop = 0
|
|
|
this.clsId = v
|
|
|
if (this.clsId == 'all') {
|
|
|
this.queryWord = this.queryWord
|
|
@@ -155,7 +184,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
- this.winH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 浏览器高度
|
|
|
this.getBundleClsDatas()// 套餐分类 数据字典
|
|
|
this.pageInit()
|
|
|
}
|
|
@@ -242,10 +270,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.noData{
|
|
|
- margin: 150px 0 0;
|
|
|
+ margin: 150px 0 295px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .pagination{
|
|
|
+ text-align: right;
|
|
|
+ margin: 16px 0;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|