From 5ca5bcb18bee095e05d7b7d8a9448da3818abc31 Mon Sep 17 00:00:00 2001 From: ronger Date: Wed, 22 Jun 2022 08:44:32 +0800 Subject: [PATCH] =?UTF-8?q?:poop:=20=E4=BA=A7=E5=93=81=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/product/list.vue | 158 +++++++++++++++++++++++++++++ pages/product/_product_id.vue | 56 ++++++++++ pages/products.vue | 47 ++++++--- store/product.js | 152 +++++++++++++++++++++++++++ 4 files changed, 398 insertions(+), 15 deletions(-) create mode 100644 components/common/product/list.vue create mode 100644 pages/product/_product_id.vue diff --git a/components/common/product/list.vue b/components/common/product/list.vue new file mode 100644 index 0000000..cf3eeaf --- /dev/null +++ b/components/common/product/list.vue @@ -0,0 +1,158 @@ + + + + + diff --git a/pages/product/_product_id.vue b/pages/product/_product_id.vue new file mode 100644 index 0000000..8643e1d --- /dev/null +++ b/pages/product/_product_id.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/pages/products.vue b/pages/products.vue index 3402a76..8cfc8f4 100644 --- a/pages/products.vue +++ b/pages/products.vue @@ -1,35 +1,52 @@ diff --git a/store/product.js b/store/product.js index e69de29..dab5a95 100644 --- a/store/product.js +++ b/store/product.js @@ -0,0 +1,152 @@ +import Vue from 'vue'; +import { isBrowser } from '~/environment'; + +export const BASE_API_PATH = '/api/console' +export const PRODUCT_API_PATH = '/api/product' + +const getDefaultListData = () => { + return { + products: [], + pagination: {} + } +} + +export const state = () => { + return { + list: { + fetching: false, + data: getDefaultListData() + }, + detail: { + fetching: false, + data: {} + } + } +} + +export const mutations = { + // 作品集列表 + updateListFetching(state, action) { + state.list.fetching = action + }, + updateListData(state, action) { + state.list.data = action + }, + updateExistingListData(state, action) { + state.list.data.data.push(...action.data) + state.list.data.pagination = action.pagination + }, + + // 作品集详情 + updateDetailFetching(state, action) { + state.detail.fetching = action + }, + updateDetailData(state, action) { + state.detail.data = action.product + }, + // 更新作品集阅读全文状态 + updateDetailRenderedState(state, action) { + Vue.set( + state.detail.data, + 'isRenderedFullContent', + action == null ? true : action + ) + } +} + +export const actions = { + // 获取作品集列表 + fetchList({commit, state}, params = {}) { + + // 清空已有数据 + commit('updateListFetching', true) + let currentData = JSON.parse(JSON.stringify(state)).list.data + if (Number(params.page) === currentData.pagination.currentPage) { + commit('updateListFetching', false) + return + } + let data = { + page: params.page, + topicUri: params.topic_uri + } + commit('updateListData', getDefaultListData()) + + return this.$axios + .$get(`${BASE_API_PATH}/products`, { + params: data + }) + .then(response => { + commit('updateListFetching', false) + commit('updateListData', response) + if (isBrowser) { + Vue.nextTick(() => { + window.scrollTo(0,0); + }) + } + }) + .catch(error => commit('updateListFetching', false)) + }, + + // 获取作品集详情 + fetchDetail({ commit }, params = {}) { + // const delay = fetchDelay( + // isBrowser + // ) + // if (isBrowser) { + // Vue.nextTick(() => { + // window.scrollTo(0, 300); + // }) + // } + commit('updateDetailFetching', true) + // commit('updateDetailData', {}) + return this.$axios + .$get(`${BASE_API_PATH}/product/${params.product_id}`) + .then(response => { + return new Promise(resolve => { + commit('updateDetailData', response) + commit('updateDetailFetching', false) + resolve(response) + // delay(() => { + // resolve(response) + // }) + }) + }) + .catch(error => { + commit('updateDetailFetching', false) + return Promise.reject(error) + }) + }, + fetchPostDetail({ commit }, params = {}) { + // const delay = fetchDelay( + // isBrowser + // ) + // if (isBrowser) { + // Vue.nextTick(() => { + // window.scrollTo(0, 300); + // }) + // } + + if (typeof params.product_id === 'undefined') { + commit('updateDetailData', getDefaultListData()) + return; + } + commit('updateDetailFetching', true) + // commit('updateDetailData', {}) + return this.$axios + .$get(`${PRODUCT_API_PATH}/detail/${params.product_id}`) + .then(response => { + return new Promise(resolve => { + commit('updateDetailData', response) + commit('updateDetailFetching', false) + resolve(response) + // delay(() => { + // resolve(response) + // }) + }) + }) + .catch(error => { + commit('updateDetailFetching', false) + return Promise.reject(error) + }) + } +}