BuySetmeal.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <div class="buySetmeal-wrap">
  3. <a-card :bordered="false">
  4. <a-row>
  5. <a-col :span="5"><b class="buySetmeal-tit">选择套餐</b></a-col>
  6. <a-col :span="19" class="search-con">
  7. <a-input-search
  8. v-model="queryWord"
  9. allowClear
  10. placeholder="搜索套餐"
  11. enter-button
  12. class="search-inp"
  13. id="buySetmeal-search"
  14. @search="onSearch" />
  15. </a-col>
  16. </a-row>
  17. <div class="draConts">
  18. <!-- 分类 -->
  19. <a-tabs v-model="clsId" tabPosition="left" class="smenus" @change="tabChange">
  20. <a-tab-pane key="all" tab="全部"></a-tab-pane>
  21. <a-tab-pane v-for="item in setmealType" :key="item.code" :tab="item.dispName"></a-tab-pane>
  22. </a-tabs>
  23. <!-- 套餐数据列表 -->
  24. <div class="itemBox" id="bundelScroll" :style="{height: winH - 358 + 'px'}">
  25. <a-row class="items-list" v-for="(item, index) in listData" :key="index">
  26. <a-col :span="15">
  27. <h3>{{ item.name }} </h3>
  28. <p>
  29. <span><b>原价:</b><em style="text-decoration: line-through;">¥{{ item.originalPrice }}</em> </span>
  30. <span style="margin-left: 15px;margin-right: 15px;color: red;"><b>现价:</b>¥{{ item.price }} </span>
  31. </p>
  32. <p>
  33. <span><b>套餐说明:</b>{{ item.summary || '-' }}</span>
  34. </p>
  35. </a-col>
  36. <a-col :span="1"></a-col>
  37. <a-col :span="4">
  38. <!-- <span>1 套</span> -->
  39. </a-col>
  40. <a-col :span="4">
  41. <a-button
  42. class="handle-btn buy-btn"
  43. id="buySetmeal-buy"
  44. type="primary"
  45. @click="openPay(item)"
  46. shape="round">下单</a-button>
  47. <a-button
  48. class="handle-btn look-btn"
  49. id="buySetmeal-look"
  50. @click="openDetails(item)"
  51. shape="round">查看详细</a-button>
  52. </a-col>
  53. </a-row>
  54. <a-empty v-if="listData.length == 0" class="noData" />
  55. </div>
  56. </div>
  57. </a-card>
  58. <!-- 下单弹框 -->
  59. <SetmealPayMoney :openModal="openSetmealPay" :setmealInfo="setmealInfo" @close="closeModal" />
  60. <!-- 套餐详细 -->
  61. <SetmealItemDetailModal :openModal="openSetmealDetails" :setmealId="setmealId" @close="closeModal" />
  62. </div>
  63. </template>
  64. <script>
  65. import SetmealPayMoney from './SetmealPayMoney.vue'
  66. import SetmealItemDetailModal from './SetmealItemDetailModal.vue'
  67. import { getLookUpDatas } from '@/api/data'
  68. import { getBundleList } from '@/api/customerBundle.js'
  69. export default {
  70. name: 'BuySetmeal',
  71. components: { SetmealPayMoney, SetmealItemDetailModal },
  72. data () {
  73. return {
  74. listData: [], // 套餐数据
  75. queryWord: '', // 关键词
  76. clsId: '',
  77. pageNo: 1,
  78. pageSize: 1000,
  79. setmealType: [], // 套餐类型
  80. openSetmealPay: false, // 下单弹框是否显示
  81. openSetmealDetails: false, // 查看详细弹框是否显示
  82. setmealId: null, // 套餐id
  83. setmealInfo: null, // 套餐信息
  84. winH: 0 // 浏览器高度
  85. }
  86. },
  87. methods: {
  88. // 搜索套餐
  89. onSearch () {
  90. this.clsId = 'all'
  91. this.initData()
  92. },
  93. pageInit () {
  94. // 默认选择第一个类型
  95. this.clsId = 'all'
  96. this.queryWord = ''
  97. this.initData()
  98. },
  99. // 初始化数据
  100. initData () {
  101. getBundleList({
  102. queryWord: this.queryWord,
  103. clsId: this.clsId == 'all' ? '' : this.clsId
  104. }).then(res => {
  105. if (res.status == 200) {
  106. this.listData = res.data
  107. } else {
  108. this.listData = []
  109. }
  110. })
  111. },
  112. // tab 切换
  113. tabChange (v) {
  114. this.listData = []
  115. document.getElementById('bundelScroll').scrollTop = 0
  116. this.clsId = v
  117. if (this.clsId == 'all') {
  118. this.queryWord = this.queryWord
  119. } else {
  120. this.queryWord = ''
  121. }
  122. this.initData()
  123. },
  124. // 下单
  125. openPay (data) {
  126. this.setmealInfo = data
  127. this.openSetmealPay = true
  128. },
  129. closeModal () {
  130. this.setmealId = null
  131. this.setmealInfo = null
  132. this.openSetmealPay = false
  133. this.openSetmealDetails = false
  134. this.initData()
  135. },
  136. // 查看详细
  137. openDetails (data) {
  138. this.setmealId = String(data.id)
  139. this.openSetmealDetails = true
  140. },
  141. // 套餐分类 数据字典
  142. getBundleClsDatas () {
  143. getLookUpDatas({ type: 'BUNDLE_TYPE' }).then(res => {
  144. if (res.status == 200) {
  145. this.setmealType = res.data
  146. } else {
  147. this.setmealType = []
  148. }
  149. })
  150. }
  151. },
  152. mounted () {
  153. this.winH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 浏览器高度
  154. this.getBundleClsDatas()// 套餐分类 数据字典
  155. this.pageInit()
  156. }
  157. }
  158. </script>
  159. <style lang="less">
  160. .buySetmeal-wrap{
  161. .buySetmeal-tit{
  162. line-height: 32px;
  163. }
  164. .search-con{
  165. text-align: right;
  166. .search-inp{
  167. width: 60%;
  168. }
  169. .ant-input-group .ant-input-affix-wrapper{
  170. height: 34px;
  171. }
  172. .ant-input-group-addon{
  173. padding: 0;
  174. }
  175. }
  176. .ant-tabs .ant-tabs-left-bar .ant-tabs-tab, .ant-tabs .ant-tabs-right-bar .ant-tabs-tab{
  177. padding: 12px 55px;
  178. margin: 0;
  179. }
  180. .draConts{
  181. display: flex;
  182. border-top: 1px solid #eee;
  183. margin-top: 20px;
  184. padding-top: 20px;
  185. .smenus{
  186. width: 20%;
  187. .ant-tabs-nav .ant-tabs-tab:hover{
  188. color: #1890FF;
  189. }
  190. .ant-tabs-ink-bar{
  191. background: #1890FF;
  192. }
  193. .ant-tabs-tab-active.ant-tabs-tab{
  194. border-radius: 60px 0 0 60px;
  195. color: #1890FF;
  196. background: #f0faff;
  197. }
  198. .ant-tabs-content.ant-tabs-content-animated.ant-tabs-left-content{
  199. width: 0;
  200. padding: 0;
  201. }
  202. }
  203. .itemBox{
  204. width: 80%;
  205. overflow: auto;
  206. .items-list{
  207. display: flex;
  208. align-items: middle;
  209. justify-content: space-around;
  210. border: 1px solid #eee;
  211. border-radius: 10px;
  212. margin: 10px 0;
  213. padding: 15px 20px;
  214. font-size: 14px;
  215. overflow: hidden;
  216. align-items: center;
  217. h3{
  218. margin: 0;
  219. }
  220. p{
  221. color: #666;
  222. padding: 5px 0 0 0;
  223. margin: 0;
  224. b{
  225. font-weight: normal;
  226. color: #333;
  227. }
  228. }
  229. .handle-btn{
  230. display: block;
  231. width: 90px;
  232. }
  233. .look-btn{
  234. margin-top: 15px;
  235. }
  236. }
  237. .noData{
  238. margin: 150px 0 0;
  239. text-align: center;
  240. }
  241. }
  242. }
  243. }
  244. </style>