BuySearch.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. <template>
  2. <div v-loading="containerLoading">
  3. <el-scrollbar height="450px">
  4. <el-tree :data="searchClassifyTableData" :props="defaultProps" :expand-on-click-node="false">
  5. <template #default="{ node, data }">
  6. <span class="custom-tree-node">
  7. <span style="width: 75%">{{ node.label }}</span>
  8. <span style="color: rgb(50, 108, 216)" v-if="data.ta == true">
  9. <a @click="refine(data)"> 细化 </a>
  10. <a style="margin-left: 8px" @click="orientate(node, data)"> 定向 </a>
  11. </span>
  12. </span>
  13. </template>
  14. </el-tree>
  15. </el-scrollbar>
  16. </div>
  17. <el-dialog v-model="visible" :title="`细化分类: ${dialogTitle}`" @close="dialogClose" destroy-on-close>
  18. <div style="display: flex; justify-content: space-between">
  19. <span>根据特定品牌、价格范围、星级和Prime配送资格,细化分类</span>
  20. <span>
  21. <el-checkbox v-model="dialogForm.isCount" label="显示商品数量" @change="isCountChanged" />
  22. </span>
  23. </div>
  24. <el-form :model="dialogForm" :rules="dialogRules" ref="dialogFormRef" style="margin-top: 20px">
  25. <el-form-item style="padding-left: 140px">
  26. <span style="margin-right: 10px; color: #616266; font-weight: 500">品牌</span>
  27. <el-select v-model="dialogForm.dialogselectValue" @change="dialogSelectChange" placeholder="请选择" :loading="dialogSelectLoading">
  28. <el-option v-for="item in dialogForm.dialogOptions" :key="item.value" :label="item.label" :value="item.value" />
  29. </el-select>
  30. </el-form-item>
  31. <el-form-item prop="prices" style="padding-left: 112px; margin-top: 10px">
  32. <span style="margin-right: 10px; color: #616266; font-weight: 500">价格范围</span>
  33. <el-input-number v-model="dialogForm.prices.lowest" :min="1" :controls="false" placeholder="无最低商品价格" />
  34. --
  35. <el-input-number v-model="dialogForm.prices.highest" :min="1" :controls="false" placeholder="无最高商品价格" />
  36. </el-form-item>
  37. <el-form-item prop="starRating" style="padding-left: 85px; margin-top: 10px">
  38. <span style="margin-right: 15px; color: #616266; font-weight: 500">查看星级评定</span>
  39. <el-slider v-model="dialogForm.starRating" range show-stops :max="5" :marks="marks" style="width: 70%" />
  40. </el-form-item>
  41. <el-form-item prop="delivery" style="padding-left: 140px; margin-top: 30px">
  42. <span style="margin-right: 10px; color: #616266; font-weight: 500">配送</span>
  43. <el-radio-group v-model="dialogForm.delivery">
  44. <el-radio label="all" style="font-weight: 400">所有</el-radio>
  45. <el-radio label="eligible" style="font-weight: 400">具备Prime资格</el-radio>
  46. <el-radio label="diseligible" style="font-weight: 400">不具备Prime资格</el-radio>
  47. </el-radio-group>
  48. </el-form-item>
  49. </el-form>
  50. <template #footer>
  51. <div style="display: flex; justify-content: space-between">
  52. <span v-loading="countLoadig">
  53. 定位到的商品数量: <span v-if="dialogForm.isCount == true">{{ commodityCount[0]?.min }} - {{ commodityCount[0]?.max }}</span>
  54. </span>
  55. <span class="dialog-footer">
  56. <el-button @click="visible = false">取消</el-button>
  57. <el-button type="primary" @click="dialogFormSubmit">确定</el-button>
  58. </span>
  59. </div>
  60. </template>
  61. </el-dialog>
  62. </template>
  63. <script setup lang="ts">
  64. import { onMounted, ref, watch, reactive, CSSProperties, defineEmits } from 'vue'
  65. import { request } from '/@/utils/service'
  66. import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
  67. import { useShopInfo } from '/@/stores/shopInfo'
  68. import { storeToRefs } from 'pinia'
  69. import emitter from '/@/utils/emitter'
  70. const shopInfo = useShopInfo()
  71. const { profile } = storeToRefs(shopInfo)
  72. const containerLoading = ref(false)
  73. const categoryBiddingType = ref('customBid')
  74. const countLoadig = ref(false)
  75. const dialogSelectLoading = ref(false)
  76. const searchClassifyTableData = ref([])
  77. let productOrientationTableData = ref([])
  78. const defaultProps = {
  79. children: 'ch',
  80. label: 'cna',
  81. }
  82. const visible = ref(false)
  83. let dialogTitle = ref('')
  84. let categoryId = ref('')
  85. let commodityCount = ref([])
  86. let currentDialogIndex = ref(0)
  87. let selectedLabels = ref([]) // 选中的label数组
  88. interface Mark {
  89. style: CSSProperties
  90. label: string
  91. }
  92. type Marks = Record<number, Mark | string>
  93. const marks = reactive<Marks>({
  94. 0: '0',
  95. 1: '1',
  96. 2: '2',
  97. 3: '3',
  98. 4: '4',
  99. 5: '5',
  100. })
  101. const dialogForm: any = reactive({
  102. prices: {
  103. lowest: undefined,
  104. highest: undefined,
  105. },
  106. starRating: [0, 5],
  107. dialogselectValue: [],
  108. delivery: 'all',
  109. isCount: false,
  110. })
  111. const dialogFormRef = ref()
  112. const dialogRules = reactive({
  113. prices: [{ validator: validatePrices, trigger: 'blur' }],
  114. })
  115. async function validatePrices(rule, value) {
  116. if (value.highest !== '' && value.lowest !== '' && value.highest <= value.lowest) {
  117. return Promise.reject('最高价格必须大于最低价格')
  118. }
  119. return Promise.resolve()
  120. }
  121. async function setProductOrientationData() {
  122. containerLoading.value = true
  123. try {
  124. const resp = await request({
  125. url: '/api/ad_manage/targetable/categories/',
  126. method: 'GET',
  127. params: {
  128. profile_id: profile.value.profile_id,
  129. },
  130. })
  131. searchClassifyTableData.value = resp.data
  132. } catch (error) {
  133. console.error('请求失败:', error)
  134. } finally {
  135. containerLoading.value = false
  136. }
  137. }
  138. function dialogSelectChange(event) {
  139. // 使用 map 来转换每个选中项的 value 为其对应的 label
  140. // console.log('event', event)
  141. // selectedLabels.value = event.map((selectedValue) => {
  142. // const selectedOption = dialogForm.dialogOptions.find((option) => option.value === selectedValue)
  143. // return selectedOption ? selectedOption.label : ''
  144. // })
  145. }
  146. function resetDialogForm() {
  147. dialogForm.prices.lowest = undefined
  148. dialogForm.prices.highest = undefined
  149. dialogForm.starRating = [0, 5]
  150. dialogForm.dialogselectValue = []
  151. dialogForm.delivery = 'all'
  152. dialogForm.isCount = false
  153. }
  154. function dialogClose() {
  155. currentDialogIndex.value++
  156. resetDialogForm()
  157. dialogForm.isCount = false
  158. commodityCount.value = []
  159. countLoadig.value = false
  160. }
  161. async function getCount(instanceId) {
  162. try {
  163. const resp = await request({
  164. url: '/api/ad_manage/products/count/',
  165. method: 'POST',
  166. data: {
  167. profile_id: profile.value.profile_id,
  168. category_id: categoryId.value,
  169. },
  170. })
  171. if (instanceId === currentDialogIndex.value) {
  172. commodityCount.value = resp.data.AsinCounts
  173. }
  174. } catch (error) {
  175. console.error('请求失败:', error)
  176. } finally {
  177. if (instanceId === currentDialogIndex.value) {
  178. countLoadig.value = false
  179. }
  180. }
  181. }
  182. function isCountChanged() {
  183. if (dialogForm.isCount) {
  184. const instanceId = currentDialogIndex.value
  185. countLoadig.value = true
  186. getCount(instanceId)
  187. } else {
  188. countLoadig.value = false
  189. commodityCount.value = []
  190. }
  191. }
  192. async function setDialogOption() {
  193. try {
  194. const resp = await request({
  195. url: '/api/ad_manage/categories/brands/',
  196. method: 'GET',
  197. params: {
  198. profile_id: profile.value.profile_id,
  199. category_id: categoryId.value,
  200. },
  201. })
  202. const options = resp.data
  203. dialogForm.dialogOptions = options.brands.map((brand) => {
  204. return {
  205. label: brand.name,
  206. value: brand.id,
  207. }
  208. })
  209. dialogSelectLoading.value = false
  210. } catch (error) {
  211. console.error('请求失败:', error)
  212. }
  213. }
  214. // 细化按钮功能
  215. let refineItem = ref([])
  216. function refine(data) {
  217. commodityCount.value = []
  218. dialogTitle.value = data.cna
  219. categoryId.value = data.cid
  220. refineItem.value.push(data)
  221. visible.value = true
  222. dialogSelectLoading.value = true
  223. setDialogOption()
  224. }
  225. const emit = defineEmits(['add-to-table', 'form-submitted'])
  226. // 定向按钮功能
  227. function orientate(node, data) {
  228. productOrientationTableData.value.some((item) => item.cid === data.cid)
  229. emit('add-to-table', data)
  230. }
  231. // 弹窗确定按钮功能
  232. async function dialogFormSubmit() {
  233. // 验证表单数据
  234. const isValid = await dialogFormRef.value.validate()
  235. if (!isValid) {
  236. console.log('表单数据验证失败')
  237. return
  238. }
  239. // 封装数据
  240. const formData = {
  241. dialogTitle: dialogTitle.value,
  242. cid: categoryId.value,
  243. prices: {
  244. lowest: dialogForm.prices.lowest,
  245. highest: dialogForm.prices.highest,
  246. },
  247. starRating: dialogForm.starRating,
  248. selectedBrands: dialogForm.dialogselectValue,
  249. delivery: dialogForm.delivery,
  250. isCount: dialogForm.isCount,
  251. commodityCount: commodityCount.value,
  252. selectedLabels: selectedLabels.value, // 如果需要选中的标签也发送到父组件
  253. }
  254. // 使用emit发送封装好的数据到父组件
  255. emit('form-submitted', formData)
  256. // 关闭弹窗
  257. visible.value = false
  258. resetDialogForm()
  259. }
  260. onMounted(() => {
  261. emitter.on('tree-node-data', () => {
  262. if (searchClassifyTableData.value.length == 0) {
  263. setProductOrientationData()
  264. }
  265. })
  266. })
  267. </script>
  268. <style scoped>
  269. .custom-tree-node {
  270. /* el-tree自定义样式 */
  271. flex: 1;
  272. display: flex;
  273. align-items: center;
  274. justify-content: space-between;
  275. font-size: 14px;
  276. padding-right: 8px;
  277. }
  278. </style>