index.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
  2. <link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
  3. <style>
  4. #indexPage {
  5. color: #444;
  6. background: #fff;
  7. padding: 0 20px 30px;
  8. }
  9. .create-btn {
  10. width: 110px;
  11. margin-right: 20px;
  12. }
  13. .delete-btn {
  14. width: 88px;
  15. height: 32px;
  16. border: 1px solid #E6E6E6;
  17. border-radius: 4px;
  18. color: #999;
  19. font-size: 13px;
  20. justify-content: center;
  21. }
  22. .delete-btn-active {
  23. color: #FF5959;
  24. border-color: #FF5959;
  25. }
  26. .el-input__inner,
  27. .el-input__icon {
  28. height: 32px;
  29. line-height: 32px;
  30. }
  31. [v-cloak] {
  32. display: none
  33. }
  34. </style>
  35. <script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
  36. <script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
  37. <script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
  38. <div id="indexPage" v-cloak>
  39. <div class="custom-header display-flex">
  40. <div class="choose-status">
  41. 优惠券
  42. </div>
  43. <div class="custom-search">
  44. <el-input placeholder="请输入标题" suffix-icon="el-icon-search" v-model="searchKey">
  45. </el-input>
  46. </div>
  47. </div>
  48. <div class="custom-table">
  49. <div class="custom-table-header display-flex-b">
  50. <div class="display-flex">
  51. <div class="custom-refresh display-flex-c" @click="getData">
  52. <i class="el-icon-refresh"></i>
  53. </div>
  54. {if condition = "$auth->check('shopro/coupons/add')"}
  55. <div class="create-btn display-flex-c" @click="operation('create')">
  56. <i class="el-icon-plus"></i>
  57. <span>新建优惠券</span>
  58. </div>
  59. {/if}
  60. {if condition = "$auth->check('shopro/coupons/del')"}
  61. <div class="delete-btn cursor-pointer display-flex"
  62. :class="multipleSelection.length>0?'delete-btn-active':'' " @click="operation('del')">
  63. 删除
  64. </div>
  65. {/if}
  66. </div>
  67. {if condition = "$auth->check('shopro/coupons/recyclebin')"}
  68. <div class="recycle-btn display-flex-c" @click="operation('recyclebin')">
  69. <i class="fa fa-recycle"></i>
  70. 回收站
  71. </div>
  72. {/if}
  73. </div>
  74. <div>
  75. <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
  76. @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
  77. :cell-class-name="tableCellClassName" :header-cell-class-name="tableCellClassName"
  78. @row-dblclick="operation">
  79. <el-table-column type="selection" min-width="40">
  80. </el-table-column>
  81. <el-table-column label="ID" min-width="60" prop="id">
  82. </el-table-column>
  83. <el-table-column label="优惠券名称" min-width="150">
  84. <template slot-scope="scope">
  85. <div class="ellipsis-item">
  86. {{scope.row.name}}
  87. </div>
  88. </template>
  89. </el-table-column>
  90. <el-table-column label="优惠券描述" min-width="160">
  91. <template slot-scope="scope">
  92. <div class="ellipsis-item">
  93. {{scope.row.description}}
  94. </div>
  95. </template>
  96. </el-table-column>
  97. <el-table-column label="优惠内容" min-width="180">
  98. <template slot-scope="scope">
  99. <div>
  100. 满{{scope.row.enough}}元,减{{scope.row.amount}}元
  101. </div>
  102. </template>
  103. </el-table-column>
  104. <el-table-column label="优惠券类型" min-width="100">
  105. <template slot-scope="scope">
  106. <div>
  107. {{scope.row.type_text}}
  108. </div>
  109. </template>
  110. </el-table-column>
  111. <el-table-column prop="getnum" label="已领取" min-width="80">
  112. </el-table-column>
  113. <el-table-column prop="usenum" label="已使用" min-width="80">
  114. </el-table-column>
  115. <el-table-column prop="stock" label="剩余" min-width="70">
  116. </el-table-column>
  117. <el-table-column prop="gettime" label="有效期" min-width="300">
  118. </el-table-column>
  119. <el-table-column fixed="right" label="操作" min-width="110">
  120. <template slot-scope="scope">
  121. {if condition = "$auth->check('shopro/coupons/edit')"}
  122. <span class="table-edit-text" @click="operation('edit',scope.row.id)">编辑
  123. </span>
  124. {/if}
  125. {if condition = "$auth->check('shopro/coupons/del')"}
  126. <span class="table-delete-text" @click="operation('del',scope.row.id)">删除</span>
  127. {/if}
  128. </template>
  129. </el-table-column>
  130. </el-table>
  131. </div>
  132. <div class="pagination-container display-flex">
  133. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  134. :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
  135. layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
  136. </el-pagination>
  137. </div>
  138. </div>
  139. </div>
  140. </div>