tools-starkeysearch.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <el-row>
  3. <el-col :span="10">
  4. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  5. <el-form-item label="关键词" prop="name">
  6. <el-input v-model="ruleForm.name"></el-input>
  7. </el-form-item>
  8. <el-form-item label="数据来源" prop="resource">
  9. <el-radio-group v-model="ruleForm.resource">
  10. <el-radio label="淘宝"></el-radio>
  11. <el-radio label="天猫"></el-radio>
  12. </el-radio-group>
  13. </el-form-item>
  14. <el-form-item>
  15. <el-button type="primary" @click="submitForm('ruleForm')">一键淘词</el-button>
  16. <el-button @click="exportExcel('my-table2')">数据导出</el-button>
  17. </el-form-item>
  18. </el-form>
  19. </el-col>
  20. <el-col :span="10" :offset="2">
  21. <el-table
  22. :data="dataList"
  23. border
  24. v-loading="dataListLoading"
  25. id="my-table2"
  26. style="width: 100%">
  27. <el-table-column
  28. prop="value"
  29. header-align="center"
  30. align="center"
  31. label="关键词">
  32. </el-table-column>
  33. <el-table-column
  34. prop="resource"
  35. header-align="center"
  36. align="center"
  37. label="类型">
  38. </el-table-column>
  39. </el-table>
  40. <p class="TT-total">共获取{{ dataList.length }}条数据</p>
  41. </el-col>
  42. </el-row>
  43. </template>
  44. <script>
  45. import FileSaver from 'file-saver'
  46. import XLSX from 'xlsx'
  47. export default {
  48. name: 'tools-starkeysearch',
  49. data () {
  50. return {
  51. ruleForm: {
  52. name: '', // apple
  53. resource: '淘宝'
  54. },
  55. rules: {
  56. name: [
  57. { required: true, message: '请输入关键词', trigger: 'blur' }
  58. ],
  59. region: [
  60. { required: true, message: '请选择数据来源', trigger: 'change' }
  61. ]
  62. },
  63. dataList: [],
  64. dataListLoading: false
  65. }
  66. },
  67. methods: {
  68. submitForm (formName) {
  69. const { name, resource } = this.ruleForm
  70. const ts = new Date().getTime()
  71. const api = resource === '天猫' ? `https://suggest.taobao.com/sug?code=utf-8&q=${name}&_ksTS=${ts}_1105&callback=jsonp1106&area=b2c&code=utf-8&k=1&bucketid=19&src=tmall_pc` : `https://suggest.taobao.com/sug?code=utf-8&q=${name}&_ksTS=${ts}_512&callback=jsonp513&k=1&area=c2c&bucketid=10`
  72. this.$refs[formName].validate((valid) => {
  73. if (!valid) {
  74. return
  75. }
  76. this.dataListLoading = true
  77. this.$jsonp(api, {}).then((res) => {
  78. if (res && Array.isArray(res.result)) {
  79. this.dataList = res.result.map(item => ({
  80. value: item[0],
  81. resource: resource
  82. }))
  83. this.funPayment(encodeURIComponent(api))
  84. }
  85. this.dataListLoading = false
  86. })
  87. })
  88. },
  89. // 扣费接口
  90. funPayment (api = '') {
  91. this.$http({
  92. url: this.$http.adornUrl('/user/apicut'),
  93. method: 'get',
  94. params: this.$http.adornParams({
  95. path: api
  96. })
  97. }).then(({ data }) => {
  98. if (data.status) {
  99. return
  100. }
  101. this.$message.error(data.msg)
  102. }).catch(() => {
  103. })
  104. },
  105. // 导出表格所用
  106. exportExcel (id) {
  107. var wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
  108. var wbout = XLSX.write(wb, {
  109. bookType: 'xlsx',
  110. bookSST: true,
  111. type: 'array'
  112. })
  113. try {
  114. FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${this.ruleForm.resource}下拉框选词` + '.xlsx')
  115. } catch (e) {
  116. if (typeof console !== 'undefined') {
  117. console.log(e, wbout)
  118. }
  119. }
  120. return wbout
  121. }
  122. }
  123. }
  124. </script>
  125. <style lang="scss" scoped>
  126. .TT-total {
  127. width: 100%;
  128. margin-top: 10px;
  129. text-align: center;
  130. }
  131. </style>