Renew.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <template>
  2. <div class="regiBox">
  3. <crumbs title="产品续费列表">
  4. <el-form :inline="true" class="demo-form-inline">
  5. <el-form-item label="申请时间:">
  6. <el-date-picker v-model="filter.time" size="mini" type="daterange"
  7. start-placeholder="开始日期"
  8. end-placeholder="结束日期"
  9. value-format="yyyy-MM-dd HH:mm:ss"
  10. :default-time="['00:00:00', '23:59:59']"></el-date-picker>
  11. </el-form-item>
  12. <el-form-item label="机构名称:">
  13. <el-input size="mini" v-model="filter.orgName" placeholder="请输入机构名称" clearable></el-input>
  14. </el-select>
  15. </el-form-item>
  16. <el-form-item label="续费状态:">
  17. <el-select size="mini" v-model="filter.renewalsStatus" placeholder="续费状态" clearable >
  18. <el-option v-for="item in status" :label="item.name" :value="item.key"></el-option>
  19. </el-select>
  20. </el-form-item>
  21. <el-form-item>
  22. <el-button size="mini" @click="filterData">确认</el-button>
  23. </el-form-item>
  24. </el-form>
  25. </crumbs>
  26. <div class="contents">
  27. <el-table :data="list" border style="width: 100%">
  28. <el-table-column type="index" :index="indexMethod" label="编号" width="60">
  29. </el-table-column>
  30. <el-table-column prop="applyTime" label="申请时间"
  31. :show-overflow-tooltip="true">
  32. </el-table-column>
  33. <el-table-column prop="renewalsNo" label="续费订单号" :show-overflow-tooltip="true">
  34. </el-table-column>
  35. <el-table-column prop="orgName" label="申请机构">
  36. </el-table-column>
  37. <el-table-column prop="linkman" label="申请人">
  38. </el-table-column>
  39. <el-table-column prop="username" label="手机号" width="120">
  40. </el-table-column>
  41. <el-table-column prop="productName" label="申请产品">
  42. </el-table-column>
  43. <el-table-column label="到期时间"
  44. :show-overflow-tooltip="true"
  45. width="100">
  46. <template slot-scope="scope">
  47. {{scope.row.endTime&&scope.row.endTime.substr(0,10)}}
  48. </template>
  49. </el-table-column>
  50. <el-table-column prop="renewalsStatusName" label="续费状态">
  51. </el-table-column>
  52. <el-table-column prop="id" label="操作" width="130">
  53. <template slot-scope="scope">
  54. <el-popover
  55. v-if="scope.row.renewalsStatus != '1'"
  56. placement="top-start"
  57. width="180"
  58. v-model="scope.row.visible"
  59. >
  60. <span class="closeDate" @click="scope.row.visible = !scope.row.visible">×</span>
  61. <el-form label-position="top" :inline="true">
  62. <!--<el-form-item label="服务开始时间">
  63. <el-date-picker size="mini" type="date"
  64. value-format="yyyy-MM-dd"
  65. placeholder="选择开始时间"
  66. v-model="startTime"
  67. style="width: 100%;"></el-date-picker>
  68. </el-form-item>-->
  69. <el-form-item label="服务结束时间">
  70. <el-date-picker size="mini" type="date"
  71. :picker-options="endPicker"
  72. value-format="yyyy-MM-dd"
  73. placeholder="选择结束时间"
  74. v-model="endTime"
  75. style="width: 100%;"></el-date-picker>
  76. </el-form-item>
  77. <div style="text-align: center">
  78. <el-button type="primary" size="mini" @click="reBuyProduct(scope.row)">确定续费</el-button>
  79. </div>
  80. </el-form>
  81. <el-button slot="reference" size="mini" class="pop-btn">续费</el-button>
  82. </el-popover>
  83. <span v-if="scope.row.renewalsStatus == '1'">续费</span>
  84. <span style="margin:0 3px;">|</span>
  85. <span v-if="scope.row.renewalsStatus == '1'">取消续费</span>
  86. <el-button type="text" size="small" v-if="scope.row.renewalsStatus != '1'" @click="closeBtn(scope.row.id)">取消续费</el-button>
  87. </template>
  88. </el-table-column>
  89. </el-table>
  90. <el-pagination v-if="total>pageSize" :current-page.sync="currentPage" @current-change="currentChange" background
  91. :page-size="pageSize" layout="total,prev, pager, next, jumper" :total="total">
  92. </el-pagination>
  93. </div>
  94. </div>
  95. </template>
  96. <script>
  97. import api from '@api/admin.js';
  98. import userApi from '@api/user.js';
  99. import utils from '@api/utils.js';
  100. export default {
  101. name: 'product-lines',
  102. data() {
  103. return {
  104. list: [],
  105. status: [],
  106. cacheData: {},
  107. /*startTime:'',*/
  108. endTime:'',
  109. currentPage: 1,
  110. pageSize: 10,
  111. total: 0,
  112. username: null,
  113. endPicker:{
  114. disabledDate:(current)=>{ //今天之前不可选
  115. const today = new Date(new Date(new Date().toLocaleDateString()).getTime());
  116. return current<today;
  117. }
  118. },
  119. filter: {
  120. orderNum: '',
  121. orgName: '',
  122. username: '',
  123. orgName: '',
  124. renewalsStatus: '',
  125. time: '',
  126. }
  127. }
  128. },
  129. created() {
  130. this.queryUserInfo();
  131. const enums = JSON.parse(localStorage.getItem('productEnumsData'));
  132. this.status = enums&&enums.renewalsEnum; //续费状态枚举
  133. },
  134. methods: {
  135. filterData(){
  136. this.currentPage = 1;
  137. this.queryUserInfo();
  138. },
  139. queryUserInfo() { //续费列表数据获取
  140. const time = this.filter.time;
  141. const startTime = time&&time[0]||undefined;
  142. const endTime = time&&time[1]||undefined;
  143. const params = {
  144. 'orgName': this.filter.orgName, // 机构名称
  145. 'renewalsStatus': this.filter.renewalsStatus, // 续费状态
  146. 'current': this.currentPage, //分页
  147. 'size': this.pageSize, //条数
  148. 'startTime': startTime,
  149. 'endTime': endTime
  150. };
  151. api.renewalsInfos(params).then((res) => {
  152. if (res.data.code == '0') {
  153. const data = res.data.data;
  154. this.list = data.records.map((item) => {
  155. return {...item, visible: false}
  156. });
  157. this.total = data.total;
  158. }
  159. }).catch((error) => {
  160. console.log(error);
  161. });
  162. },
  163. indexMethod(index) {
  164. return ((this.currentPage - 1) * this.pageSize) + index + 1;
  165. },
  166. currentChange(next) {
  167. this.currentPage = next;
  168. if (this.cacheData[next]) { //如果已请求过该页数据,则使用缓存不重复请求
  169. this.list = this.cacheData[next];
  170. } else {
  171. this.queryUserInfo();
  172. }
  173. },
  174. reBuyProduct(row) { //确定续费
  175. const params = {
  176. 'productId': row.productId,
  177. 'endTime': this.endTime,
  178. 'userId': row.userId,
  179. 'renewalsNo': row.renewalsNo
  180. };
  181. if(!this.endTime){
  182. this.$message({
  183. showClose: true,
  184. message: '请先选择服务结束时间',
  185. type: 'warning'
  186. });
  187. return ;
  188. }
  189. api.modifyOpeningTime(params).then((res) => {
  190. if (res.data.code == '0') {
  191. this.$message({
  192. showClose: true,
  193. message: '操作成功!',
  194. type: 'success'
  195. });
  196. row.endTime = this.endTime;
  197. row.renewalsStatus = '1';
  198. row.renewalsStatusName = '已续费';
  199. }else{
  200. this.$message({
  201. showClose: true,
  202. message: res.data.msg,
  203. type: 'warning'
  204. });
  205. }
  206. this.endTime = ''; //操作后清空状态
  207. }).catch((error) => {
  208. this.$message({
  209. showClose: true,
  210. message: "服务器正忙...",
  211. type: 'error'
  212. });
  213. this.endTime = '';
  214. });
  215. },
  216. closeBtn(id) {
  217. const cloId = id;
  218. const params = {
  219. 'id': cloId
  220. };
  221. this.$confirm('确定取消此产品的续费服务?', '提示', {
  222. confirmButtonText: '确定',
  223. cancelButtonText: '取消',
  224. cancelButtonClass:'cancelColor',
  225. type: 'warning'
  226. }).then(() => {
  227. api.deleteRenewalsInfos(params).then((res) => {
  228. if (res.data.code == '0') {
  229. this.$message({
  230. showClose: true,
  231. message: '取消成功!',
  232. type: 'success'
  233. });
  234. }else{
  235. this.$message({
  236. showClose: true,
  237. message: res.data.msg,
  238. type: 'warning'
  239. });
  240. }
  241. this.queryUserInfo();
  242. }).catch((error) => {
  243. this.$message({
  244. showClose: true,
  245. message: "服务器正忙...",
  246. type: 'warning'
  247. });
  248. });
  249. }).catch(() => {
  250. });
  251. }
  252. }
  253. }
  254. </script>
  255. <style lang="less">
  256. .regiBox {
  257. .pop-btn{
  258. padding: 0 1px;
  259. }
  260. .el-dialog {
  261. width: 500px;
  262. margin-top: 255px !important;
  263. }
  264. .reGary{
  265. color: #ccc;
  266. cursor: auto;
  267. }
  268. }
  269. .cancelColor{
  270. color: #22ccc8 !important;
  271. }
  272. .el-message-box__btns button:nth-child(2) {
  273. color: #fff !important;
  274. }
  275. .el-input__prefix{
  276. left: 5px;
  277. right: auto;
  278. }
  279. .closeDate {
  280. position: absolute;
  281. top: 0px;
  282. right: 7px;
  283. cursor: pointer;
  284. font-size: 20px;
  285. }
  286. </style>