code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-06 17:09:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 四端完成 Options API → script setup + vuex → pinia 迁移

Browse Source 
- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup>
- 四端 vuex 全部移除，状态管理统一迁移至 pinia 4（stores/ 目录）
- util.js 等基础设施去除 vm 首参依赖；全局属性（$Message/$filters 等）在 script 内改为具名导入
- 被外部 ref 访问的公共组件均已补齐 defineExpose（清单见各端 MIGRATION-VUE3.md）
- 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API
- 四端 yarn build 全部通过；迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md
This commit is contained in:
lifenlong
2026-10-13 07:06:59 +08:00
parent 870bacdd8c
commit 88fc1b0b2a
674 changed files with 71220 additions and 69943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
MIGRATION-VUE3.md
View File

@@ -9,7 +9,8 @@
| 框架 | vue | ^3.5.35 |
| 编译 | @vue/compiler-sfc | ^3.5.35 |
| 路由 | vue-router | ^4.6.4 |
| 状态 | vuex | ^4.1.0 |
| 状态 | pinia | ^4.0.3（四端已全部从 vuex 迁移完成） |
| 组件写法 | `<script setup>` | 四端 597 个组件已全部完成 Options API → 组合式 API 迁移；各端 eslint 已启用 `vue/component-api-style: ['warn', ['script-setup']]` 防止回退 |
| UI | element-plus | ^2.14.1 |
| 图标 | @element-plus/icons-vue | ^2.3.2 |
| 请求 | axios | ^1.7.9 |

14
buyer/MIGRATION-VUE3.md
View File

@@ -2,7 +2,7 @@
## 技术栈
- Vue 3 + Vue Router 4 + Vuex 4
- Vue 3 + Vue Router 4 + Pinia（vuex 已移除，见下文"组合式 API 迁移"）
- Element Plus（替代 view-design / iView）
- 保留 `$Message` / `$Modal` / `$Notice` 兼容层（`src/utils/message.js`）
@@ -29,6 +29,18 @@ yarn build
- `mv-count-down` → 内置倒计时
- 秒杀轮播 → 横向滚动列表
## 组合式 API 迁移（2026-10 完成）
全部 95 个 `.vue` 组件已从 Options API 转换为 `<script setup>`，同时完成 vuex → pinia：
- **状态管理**：`src/stores/app.js`（`useAppStore`：navList / cartNum / unreadMsg / logoImg / siteName / hotWordsList / category + 对应 setXxx actions）。原 `src/vuex/` 已删除，package.json 不再依赖 vuex。
- **路由守卫**：`beforeRouteEnter` 无组合式等价物，5 个页面（`GoodsList` / `GoodsDetail` / `PointGoodsDetail` / `Cart` / `ShoppingCart`）保留普通 `<script>` 块存放 `export default { name, beforeRouteEnter }`——这是官方支持的合并写法，统计 Options API 残留时需排除。
- **defineExpose**：以下组件的方法/状态被父组件通过模板 ref 调用，已显式暴露：`verify`（init / close）、`multiple-map`（open）、`addressManage`（show / hide）、`invoiceModal`（invoiceAvailable）。新增此类父子调用时必须加 `defineExpose`。
- **模板 ref 与响应式变量同名会互相覆盖**：同名时模板 ref 统一改名 `xxxRef`（如 `formRef` / `verifyRef`）。
- **mixin 已消除**：原 `components/mixes/talkIm.vue` 的 IM 客服逻辑已内联进 `Merchant.vue` 和 `goodsDetail/StoreSide.vue`，文件已删除。
- **全局属性照旧**：模板中的 `$filters.*` / `linkTo` / `connectCs` / `$inputMaxLength` 是 `main.js` 注册的全局属性，`<script setup>` 下模板可直接使用；script 内使用 `$filters` 函数需从 `@/plugins/filters.js` 具名导入，`this.Cookies` 等同 `storage`（`@/plugins/storage`）。
- **其余三端（seller / manager / im）仍为 Options API + vuex**，迁移时参照本端模式。
## 批量脚本
- `scripts/migrate-iview-to-element.js` — iView → Element 模板替换

2
buyer/eslint.config.js
View File

@@ -29,6 +29,8 @@ module.exports = [
'vue/multi-word-component-names': 'off',
// 存量代码大量使用与 HTML 保留名同名的组件（element-plus 图标 Search/View/Camera/Link 及全局注册的 empty/drawer 等），重命名成本高，暂不启用
'vue/no-reserved-component-names': 'off',
// 全端已完成 Options API → <script setup> 迁移，防止新代码回退（路由守卫的普通 script 块等有意保留的除外，故用 warn）
'vue/component-api-style': ['warn', ['script-setup']],
},
},
]

5
buyer/package.json
View File

@@ -21,6 +21,7 @@
"element-plus": "^2.14.1",
"js-cookie": "^2.2.1",
"nprogress": "^0.2.0",
"pinia": "^4.0.3",
"psl": "^1.8.0",
"qs": "^6.9.4",
"sass": "^1.63.6",
@@ -28,8 +29,7 @@
"uuid": "^8.3.2",
"vue": "^3.5.35",
"vue-qr": "^5.0.3",
"vue-router": "^4.6.4",
"vuex": "^4.1.0"
"vue-router": "^4.6.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.9",
@@ -41,6 +41,7 @@
"globals": "^17.13.0",
"less": "^4.2.0",
"less-loader": "^11.1.4",
"vue-eslint-parser": "^10.4.1",
"webpack": "^5.95.0"
},
"browserslist": [

55
buyer/src/App.vue
View File

@@ -4,26 +4,28 @@
</div>
</template>
<script>
<script setup>
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import storage from "@/plugins/storage";
import { getBaseSite, getThemeSetting } from "@/api/common.js";
import { fetchAndApplyTheme } from "@/utils/theme";
import { useAppStore } from "@/stores/app";
export default {
name: "App",
mounted() {
this.init();
},
methods: {
applySiteInfo(data) {
defineOptions({ name: "App" });
const route = useRoute();
const appStore = useAppStore();
function applySiteInfo(data) {
const expirationTime = new Date().setHours(new Date().getHours() + 1);
storage.setItem("sitelogo_expiration_time", expirationTime);
storage.setItem("siteName", data.siteName);
storage.setItem("logoImg", data.buyerSideLogo);
storage.setItem("siteIcon", data.buyerSideIcon);
this.$store.commit("SET_SITENAME", data.siteName);
this.$store.commit("SET_LOGOIMG", data.buyerSideLogo);
if (this.$route.meta.title === undefined) {
appStore.setSiteName(data.siteName);
appStore.setLogoImg(data.buyerSideLogo);
if (route.meta.title === undefined) {
window.document.title = data.siteName;
}
let link =
@@ -33,27 +35,29 @@ export default {
link.href = data.buyerSideIcon;
link.rel = "shortcut icon";
document.getElementsByTagName("head")[0].appendChild(link);
},
init() {
}
function init() {
const expirationTime = storage.getItem("sitelogo_expiration_time");
const cacheValid =
expirationTime && new Date() <= new Date(Number(expirationTime));
if (cacheValid) {
this.applySiteInfo({
applySiteInfo({
siteName: storage.getItem("siteName"),
buyerSideLogo: storage.getItem("logoImg"),
buyerSideIcon: storage.getItem("siteIcon"),
});
}
this.getSite();
this.getTheme();
},
getSite() {
getSite();
getTheme();
}
function getSite() {
getBaseSite().then((res) => {
if (res.success && res.result.settingValue) {
try {
const data = JSON.parse(res.result.settingValue);
this.applySiteInfo(data);
applySiteInfo(data);
} catch {
// 站点配置解析失败时使用缓存
}
@@ -61,14 +65,17 @@ export default {
}).catch((err) => {
console.warn('获取站点配置失败', err);
});
},
getTheme() {
}
function getTheme() {
fetchAndApplyTheme(getThemeSetting).catch((err) => {
console.warn('获取主题配置失败', err);
});
},
},
};
}
onMounted(() => {
init();
});
</script>
<style lang="scss">
#app {

291
buyer/src/components/Search.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="navbar" :class="{'small-search-box': useClass == 'fixed-show'}">
<div class="navbar" ref="rootRef" :class="{'small-search-box': useClass == 'fixed-show'}">
<template v-if="useClass == 'fixed-show'">
<div class="search search-embedded">
<el-input
@@ -30,7 +30,7 @@
<template v-else>
<div class="container width_1200_auto flex flex-a-c">
<img
:src="$store.state.logoImg"
:src="logoImg"
v-if="showLogo"
class="logo-img"
alt=""
@@ -80,11 +80,45 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import storage from '@/plugins/storage.js'
import { goodsList, hotWords } from '@/api/goods.js'
import { Search as SearchIcon } from '@element-plus/icons-vue'
import SearchSuggest from '@/components/SearchSuggest.vue'
import { useAppStore } from '@/stores/app'
defineOptions({ name: 'search' })
const props = defineProps({
showTag: {
type: Boolean,
default: true
},
showLogo: {
type: Boolean,
default: true
},
storeId: {
type: String,
default: ""
},
hover: {
type: Boolean,
default: false
},
useClass: {
type: null,
default: ''
}
})
const emit = defineEmits(['search'])
const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const HISTORY_KEY = 'buyerSearchHistory'
const HISTORY_LIMIT = 10
@@ -112,88 +146,90 @@ function parseHotWords(raw) {
return raw.split(',').map((item) => item.trim()).filter(Boolean)
}
export default {
name: 'search',
components: { SearchIcon, SearchSuggest },
props: {
showTag: {
type: Boolean,
default: true
},
showLogo: {
type: Boolean,
default: true
},
storeId: {
type: String,
default: ""
},
hover: {
type: Boolean,
default: false
},
useClass:{
type:null,
default:''
const rootRef = ref(null)
const searchData = ref('')
const history = ref([])
const panelVisible = ref(false)
const suggestions = ref([])
const suggesting = ref(false)
let suggestTimer = null
let suggestSeq = 0
const logoImg = computed(() => appStore.logoImg)
const trimmedKeyword = computed(() => {
return (searchData.value || '').trim()
})
const promotionTags = computed(() => {
return parseHotWords(appStore.hotWordsList)
})
const showPanel = computed(() => {
if (!panelVisible.value) return false
if (trimmedKeyword.value) return true
return history.value.length > 0 || promotionTags.value.length > 0
})
watch(
() => route.query.keyword,
(value) => {
searchData.value = value || ''
}
},
data() {
return {
searchData: '',
history: [],
panelVisible: false,
suggestions: [],
suggesting: false,
suggestTimer: null,
suggestSeq: 0,
};
},
methods: {
selectTags(item) {
this.searchData = item;
this.search();
},
remember(keyword) {
const next = [keyword, ...this.history.filter((item) => item !== keyword)].slice(0, HISTORY_LIMIT)
this.history = next
)
function selectTags(item) {
searchData.value = item
search()
}
function remember(keyword) {
const next = [keyword, ...history.value.filter((item) => item !== keyword)].slice(0, HISTORY_LIMIT)
history.value = next
localStorage.setItem(HISTORY_KEY, JSON.stringify(next))
},
clearHistory() {
this.history = []
}
function clearHistory() {
history.value = []
localStorage.removeItem(HISTORY_KEY)
},
openPanel() {
this.panelVisible = true
if (this.trimmedKeyword) this.queueSuggest()
},
closePanel() {
this.panelVisible = false
},
onDocumentClick(event) {
if (this.$el && !this.$el.contains(event.target)) this.closePanel()
},
queueSuggest() {
this.panelVisible = true
clearTimeout(this.suggestTimer)
const keyword = this.trimmedKeyword
}
function openPanel() {
panelVisible.value = true
if (trimmedKeyword.value) queueSuggest()
}
function closePanel() {
panelVisible.value = false
}
function onDocumentClick(event) {
if (rootRef.value && !rootRef.value.contains(event.target)) closePanel()
}
function queueSuggest() {
panelVisible.value = true
clearTimeout(suggestTimer)
const keyword = trimmedKeyword.value
if (!keyword) {
this.suggestions = []
this.suggesting = false
suggestions.value = []
suggesting.value = false
return
}
this.suggesting = true
this.suggestTimer = setTimeout(() => this.fetchSuggest(keyword), 300)
},
fetchSuggest(keyword) {
const seq = ++this.suggestSeq
suggesting.value = true
suggestTimer = setTimeout(() => fetchSuggest(keyword), 300)
}
function fetchSuggest(keyword) {
const seq = ++suggestSeq
const params = { keyword, pageNumber: 1, pageSize: 8 }
if (this.storeId) params.storeId = this.storeId
if (props.storeId) params.storeId = props.storeId
goodsList(params).then((res) => {
if (seq !== this.suggestSeq || keyword !== this.trimmedKeyword) return
if (seq !== suggestSeq || keyword !== trimmedKeyword.value) return
const records = res && res.success ? (res.result.records || []) : []
const seen = new Set()
const names = []
this.promotionTags.forEach((word) => {
promotionTags.value.forEach((word) => {
if (word && String(word).toLowerCase().includes(keyword.toLowerCase()) && !seen.has(word)) {
seen.add(word)
names.push(word)
@@ -206,85 +242,70 @@ export default {
names.push(name)
}
})
this.suggestions = names.slice(0, 8)
suggestions.value = names.slice(0, 8)
}).catch(() => {
if (seq === this.suggestSeq) this.suggestions = []
if (seq === suggestSeq) suggestions.value = []
}).finally(() => {
if (seq === this.suggestSeq) this.suggesting = false
if (seq === suggestSeq) suggesting.value = false
})
},
search () {
const keyword = this.trimmedKeyword
this.searchData = keyword
this.closePanel()
if (keyword) this.remember(keyword)
const url = this.$route.path;
if(url == '/goodsList'){
this.$emit('search', keyword)
}else{
}
function search() {
const keyword = trimmedKeyword.value
searchData.value = keyword
closePanel()
if (keyword) remember(keyword)
const url = route.path
if (url == '/goodsList') {
emit('search', keyword)
} else {
const pushData = {
path:'/goodsList',
path: '/goodsList',
query: { keyword },
}
if(this.storeId) pushData.query.storeId = this.storeId
if (props.storeId) pushData.query.storeId = props.storeId
this.$router.push(pushData);
router.push(pushData)
}
},
searchStore() {
this.$emit('search', this.trimmedKeyword)
},
applyHotWords(result) {
}
function searchStore() {
emit('search', trimmedKeyword.value)
}
function applyHotWords(result) {
const list = parseHotWords(result)
this.$store.commit('SET_HOTWORDS', list)
appStore.setHotWords(list)
storage.setItem('hotWordsList', JSON.stringify(list))
},
loadHotWords() {
}
function loadHotWords() {
hotWords({ count: 5 }).then((res) => {
if (res.success && res.result) this.applyHotWords(res.result)
if (res.success && res.result) applyHotWords(res.result)
}).catch(() => {
// 热词为可选数据，失败时沿用缓存或默认热词
})
storage.setItem('hotWordsReloadTime', new Date().getTime())
}
},
computed: {
trimmedKeyword() {
return (this.searchData || '').trim()
},
promotionTags() {
return parseHotWords(this.$store.state.hotWordsList)
},
showPanel() {
if (!this.panelVisible) return false
if (this.trimmedKeyword) return true
return this.history.length > 0 || this.promotionTags.length > 0
}
},
watch: {
'$route.query.keyword'(value) {
this.searchData = value || ''
}
},
created() {
this.searchData = this.$route.query.keyword || ''
this.history = readHistory()
}
if (!this.hover) {
// 初始化（原 created 钩子逻辑）
searchData.value = route.query.keyword || ''
history.value = readHistory()
if (!props.hover) {
const reloadTime = storage.getItem('hotWordsReloadTime')
const time = new Date().getTime() - 5 * 60 * 1000
if (!reloadTime || time > reloadTime) this.loadHotWords()
}
},
mounted() {
this.onDocumentClick = this.onDocumentClick.bind(this)
document.addEventListener('click', this.onDocumentClick)
},
beforeUnmount() {
clearTimeout(this.suggestTimer)
document.removeEventListener('click', this.onDocumentClick)
}
};
if (!reloadTime || time > reloadTime) loadHotWords()
}
onMounted(() => {
document.addEventListener('click', onDocumentClick)
})
onUnmounted(() => {
clearTimeout(suggestTimer)
document.removeEventListener('click', onDocumentClick)
})
</script>
<style scoped lang="scss">
.navbar {

23
buyer/src/components/SearchSuggest.vue
View File

@@ -45,21 +45,22 @@
</div>
</template>
<script>
export default {
name: "SearchSuggest",
props: {
<script setup>
defineOptions({ name: "SearchSuggest" });
const props = defineProps({
keyword: { type: String, default: "" },
history: { type: Array, default: () => [] },
hotWords: { type: Array, default: () => [] },
suggestions: { type: Array, default: () => [] },
suggesting: { type: Boolean, default: false },
},
emits: ["pick", "clear"],
methods: {
parts(text) {
});
defineEmits(["pick", "clear"]);
function parts(text) {
const value = String(text || "");
const key = this.keyword;
const key = props.keyword;
if (!key) return [{ text: value, hit: false }];
const index = value.toLowerCase().indexOf(key.toLowerCase());
if (index < 0) return [{ text: value, hit: false }];
@@ -68,9 +69,7 @@ export default {
{ text: value.slice(index, index + key.length), hit: true },
{ text: value.slice(index + key.length), hit: false },
].filter((part) => part.text);
},
},
};
}
</script>
<style scoped lang="scss">

139
buyer/src/components/addressManage/index.vue
View File

@@ -3,7 +3,7 @@
<el-dialog v-model="showAddr" width="800" title="收件人地址">
<el-form
:model="formData"
ref="form"
ref="formRef"
label-position="left"
label-width="100px"
:rules="ruleInline"
@@ -13,7 +13,7 @@
</el-form-item>
<el-form-item label="收件地区" prop="address">
{{ formData.address || '暂无地址' }}
<el-button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</el-button>
<el-button type="primary" style="margin-left: 10px;" size="small" @click="mapRef.open()">选择</el-button>
</el-form-item>
<el-form-item label="详细地址" prop="detail">
<el-input v-model="formData.detail" style="width: 600px"></el-input>
@@ -39,11 +39,12 @@
<el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
</div></template>
</el-dialog>
<multipleMap ref="map" @callback="getAddress"></multipleMap>
<multipleMap ref="mapRef" @callback="getAddress"></multipleMap>
</div>
</template>
<script>
<script setup>
import { ref, watch } from "vue";
import { Message } from "@/utils/message";
import multipleMap from "@/components/map/multiple-map";
import {
@@ -51,21 +52,23 @@ import {
editMemberAddress,
getAddrDetail
} from '@/api/address';
export default {
name: 'addressManage',
props: {
defineOptions({ name: 'addressManage' });
const props = defineProps({
id: { // 传入的地址id
defalut: '',
type: String
}
},
data () {
return {
showAddr: false, // 控制模态框显隐
formData: { // 表单数据
});
const emit = defineEmits(['change']);
const showAddr = ref(false); // 控制模态框显隐
const formData = ref({ // 表单数据
isDefault: false
},
ruleInline: { // 验证规则
});
const ruleInline = { // 验证规则
name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
address: [{ required: true, message: '请输入地址', trigger: 'change' }],
detail: [
@@ -80,93 +83,95 @@ export default {
trigger: 'blur'
}
]
},
loading: false, // 提交的加载状态
mapMsg: {} // 地图信息
};
},
methods: {
save () { // 保存地址
this.$refs.form.validate((valid) => {
};
const loading = ref(false); // 提交的加载状态
const mapMsg = ref({}); // 地图信息
const formRef = ref(null);
const mapRef = ref(null);
function save () { // 保存地址
formRef.value.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.formData));
const params = JSON.parse(JSON.stringify(formData.value));
params.consigneeAddressPath = params.address.replace(/\s/g, ',');
delete params.address;
this.loading = true;
if (this.id) {
loading.value = true;
if (props.id) {
editMemberAddress(params).then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
Message.success('编辑地址成功');
this.$emit('change', true);
this.hide();
emit('change', true);
hide();
}
}).catch(() => { this.loading = false; });
}).catch(() => { loading.value = false; });
} else {
newMemberAddress(params).then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
Message.success('新增地址成功');
this.$emit('change', true);
this.hide();
emit('change', true);
hide();
}
}).catch(() => { this.loading = false; });
}).catch(() => { loading.value = false; });
}
}
});
},
getAddrById (id) {
}
function getAddrById (id) {
// 获取地址详情
getAddrDetail(id).then((res) => {
if (res.success) {
const data = res.result;
data.address = res.result.consigneeAddressPath.replace(/,/g, ' ');
this.formData = data;
formData.value = data;
}
});
},
getAddress (val) {
}
function getAddress (val) {
// 获取地图选择信息
if(val.type === 'select'){
const paths = val.data.map(item => item.name).join(',')
const ids = val.data.map(item => item.id).join(',')
this.formData['address'] = paths
this.formData['consigneeAddressIdPath'] = ids
formData.value['address'] = paths
formData.value['consigneeAddressIdPath'] = ids
const coord = val.data[val.data.length - 1].center.split(',')
this.formData.lat = coord[1]
this.formData.lon = coord[0]
formData.value.lat = coord[1]
formData.value.lon = coord[0]
}else{
this.formData["address"] = val.data.addr;
this.formData["consigneeAddressIdPath"] = val.data.addrId;
this.formData["detail"] = val.data.address;
this.formData.lat = val.data.position.lat;
this.formData.lon = val.data.position.lng;
formData.value["address"] = val.data.addr;
formData.value["consigneeAddressIdPath"] = val.data.addrId;
formData.value["detail"] = val.data.address;
formData.value.lat = val.data.position.lat;
formData.value.lon = val.data.position.lng;
}
},
show () { // 地址模态框显示
this.showAddr = true;
},
hide () { // 地址模态框隐藏
this.showAddr = false;
}
},
watch: {
id: { // 传入的地址id
handler: function (v) {
}
function show () { // 地址模态框显示
showAddr.value = true;
}
function hide () { // 地址模态框隐藏
showAddr.value = false;
}
defineExpose({ show, hide });
watch(
() => props.id, // 传入的地址id
(v) => {
if (v) {
this.getAddrById(v);
getAddrById(v);
} else {
this.formData = {isDefault: false}
this.$refs.form.resetFields();
formData.value = {isDefault: false}
formRef.value.resetFields();
}
}
}
},
components: {
multipleMap
}
};
);
</script>
<style scoped lang="scss">

18
buyer/src/components/advertising/FixedTop.vue
View File

@@ -5,22 +5,18 @@
<el-icon :size="20" @click="show = false"><CircleClose /></el-icon>
</div>
</template>
<script>
<script setup>
import { ref } from 'vue';
import { CircleClose } from '@element-plus/icons-vue';
export default {
components: { CircleClose },
props: {
defineProps({
data: { // 传入的广告信息
type: Object,
default: null
}
},
data () {
return {
show: true // 是否显示头部广告
}
}
};
});
const show = ref(true); // 是否显示头部广告
</script>
<style scoped lang="scss">
.advertising {

57
buyer/src/components/card/index.vue
View File

@@ -26,10 +26,13 @@
</el-card>
</template>
<script>
export default {
name: "index",
props: {
<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
defineOptions({ name: "index" });
const props = defineProps({
_Tabs: {
type: null,
default: "",
@@ -54,29 +57,31 @@ export default {
type: Number,
default: 0,
},
},
data() {
return {
isActive: this._ActiveTab,
};
},
watch: {
_ActiveTab(val) {
this.isActive = val;
},
},
methods: {
callBack() {
if (this._Src) {
this.$router.push({ path: this._Src });
});
const emit = defineEmits(["_Change"]);
const router = useRouter();
const isActive = ref(props._ActiveTab);
watch(
() => props._ActiveTab,
(val) => {
isActive.value = val;
}
},
tabsChange(index) {
this.isActive = index;
this.$emit("_Change", index);
},
},
};
);
function callBack() {
if (props._Src) {
router.push({ path: props._Src });
}
}
function tabsChange(index) {
isActive.value = index;
emit("_Change", index);
}
</script>
<style scoped lang="scss">

203
buyer/src/components/drawer/Drawer.vue
View File

@@ -78,51 +78,36 @@
</div>
</template>
<script>
<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Message, Modal } from "@/utils/message";
import { Delete } from '@element-plus/icons-vue';
import {cartGoodsAll, delCartGoods, addCartGoods, cartCount} from '@/api/cart.js'
import { getOrderList } from '@/api/order';
import {couponList, receiveCoupon, tracksList, collectList, cancelCollect} from '@/api/member.js'
export default {
components: { Delete },
name: 'Drawer',
props: {
import { getOrderList as fetchOrderList } from '@/api/order';
import {couponList as fetchCouponList, receiveCoupon, tracksList as fetchTracksList, collectList as fetchCollectList, cancelCollect as apiCancelCollect} from '@/api/member.js'
import storage from '@/plugins/storage.js'
import { useAppStore } from '@/stores/app'
defineOptions({ name: 'Drawer' })
const props = defineProps({
title: {
default: '',
type: String
}
},
watch: {
title (val) {
switch (val) {
case '购物车':
this.getCartList()
break;
case '我的订单':
this.getOrderList()
break;
case '我的足迹':
this.getTracksList()
break;
case '优惠券':
this.getCouponList()
break;
case '我的收藏':
this.getCollectList()
break;
}
}
},
data () {
return {
loading: false, // 控制spin显隐
cartList: [], // 购物车列表
couponList: [], // 优惠券列表
orderList: [], // 订单列表
collectList: [], // 收藏列表
tracksList: [], // 足迹列表
orderStatusList: [ // 订单状态
})
const router = useRouter()
const appStore = useAppStore()
const loading = ref(false) // 控制spin显隐
const cartList = ref([]) // 购物车列表
const couponList = ref([]) // 优惠券列表
const orderList = ref([]) // 订单列表
const collectList = ref([]) // 收藏列表
const tracksList = ref([]) // 足迹列表
const orderStatusList = ref([ // 订单状态
{
name: '未付款',
status: 'UNPAID'
@@ -151,37 +136,55 @@ export default {
name: '已取消',
status: 'CANCELLED'
}
]
};
},
methods: {
getCartList () { // 获取购物车列表
this.loading = true
])
watch(() => props.title, (val) => {
switch (val) {
case '购物车':
getCartList()
break;
case '我的订单':
getOrderList()
break;
case '我的足迹':
getTracksList()
break;
case '优惠券':
getCouponList()
break;
case '我的收藏':
getCollectList()
break;
}
})
function getCartList () { // 获取购物车列表
loading.value = true
cartGoodsAll().then(res => {
this.loading = false
this.cartList = res.result.skuList
loading.value = false
cartList.value = res.result.skuList
})
},
// 删除商品
delGoods (id) {
}
// 删除商品
function delGoods (id) {
delCartGoods({ skuIds: id }).then((res) => {
if (res.success) {
Message.success('删除成功');
this.getCartList();
getCartList();
cartCount().then(res => {
this.$store.commit('SET_CARTNUM', res.result)
this.Cookies.setItem('cartNum', res.result)
appStore.setCartNum(res.result)
storage.setItem('cartNum', res.result)
})
} else {
Message.error(res.message);
}
});
},
filterOrderStatus (status) { // 获取订单状态中文
const ob = this.orderStatusList.filter(e => { return e.status === status });
}
function filterOrderStatus (status) { // 获取订单状态中文
const ob = orderStatusList.value.filter(e => { return e.status === status });
return ob[0].name
},
receive (item) { // 领取优惠券
}
function receive (item) { // 领取优惠券
receiveCoupon(item.id).then(res => {
if (res.success) {
Modal.confirm({
@@ -190,24 +193,24 @@ export default {
okText: '我的优惠券',
cancelText: '立即使用',
onOk: () => {
this.$router.push('/home/Coupons')
router.push('/home/Coupons')
},
onCancel: () => {
if (item.storeId !== '0') {
this.$router.push({path: '/merchant', query: {id: item.storeId}})
router.push({path: '/merchant', query: {id: item.storeId}})
} else {
if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
} else {
this.$router.push({path: '/goodsList'})
router.push({path: '/goodsList'})
}
}
}
});
}
})
},
useScope (type, storeName) { // 判断优惠券使用范围
}
function useScope (type, storeName) { // 判断优惠券使用范围
let shop = '平台';
let goods = '全部商品'
if (storeName !== 'platform') shop = storeName
@@ -223,82 +226,80 @@ export default {
break;
}
return `${shop}${goods}可用`
},
addToCart (id) { // 添加商品到购物车
}
function addToCart (id) { // 添加商品到购物车
const params = {
num: 1,
skuId: id
}
this.loading = true;
loading.value = true;
addCartGoods(params).then(res => {
this.loading = false;
loading.value = false;
if (res.success) {
Message.success('商品已成功添加到购物车')
} else {
Message.warning(res.message);
}
}).catch(() => { this.loading = false });
},
getCouponList () { // 获取优惠券列表
// this.loading = true;
}).catch(() => { loading.value = false });
}
function getCouponList () { // 获取优惠券列表
// loading.value = true;
const params = {
pageNumber: 1,
pageSize: 10
}
couponList(params).then(res => {
this.loading = false
fetchCouponList(params).then(res => {
loading.value = false
if (res.success) {
this.couponList = res.result.records
couponList.value = res.result.records
}
}).catch(() => { this.loading = false })
},
getOrderList () { // 获取订单列表
this.loading = true
}).catch(() => { loading.value = false })
}
function getOrderList () { // 获取订单列表
loading.value = true
const params = {
pageNumber: 1,
pageSize: 10,
tag: 'ALL'
}
getOrderList(params).then(res => {
this.loading = false
fetchOrderList(params).then(res => {
loading.value = false
if (res.success) {
this.orderList = res.result.records;
orderList.value = res.result.records;
}
});
},
getCollectList () { // 获取收藏列表
}
function getCollectList () { // 获取收藏列表
const params = {
pageNumber: 1,
pageSize: 10,
type: 'GOODS'
}
this.loading = true
collectList(params).then(res => {
this.loading = false
this.collectList = res.result.records
loading.value = true
fetchCollectList(params).then(res => {
loading.value = false
collectList.value = res.result.records
})
},
cancelCollect (id) { // 取消商品收藏
cancelCollect('GOODS', id).then(res => {
}
function cancelCollect (id) { // 取消商品收藏
apiCancelCollect('GOODS', id).then(res => {
if (res.success) {
Message.success('取消收藏成功')
this.getCollectList();
getCollectList();
}
})
},
getTracksList () { // 获取足迹列表
}
function getTracksList () { // 获取足迹列表
const params = {
pageNumber: 1,
pageSize: 20
}
this.loading = true
tracksList(params).then(res => {
this.tracksList = res.result.records
this.loading = false
}).catch(() => { this.loading = false })
}
}
};
loading.value = true
fetchTracksList(params).then(res => {
tracksList.value = res.result.records
loading.value = false
}).catch(() => { loading.value = false })
}
</script>
<style scoped lang="scss">

88
buyer/src/components/drawer/Main.vue
View File

@@ -20,81 +20,81 @@
</div>
</template>
<script>
<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Modal } from "@/utils/message";
import Storage from '@/plugins/storage.js';
import storage from '@/plugins/storage.js';
import Configuration from './config';
import drawerPage from './Drawer'
import {cartCount} from '@/api/cart.js'
import { resolveIcon } from '@/utils/iconMap'
export default {
name: 'Main',
data () {
return {
resetConfig: Configuration, // 菜单项
handleDrawer: false, // 是否可展开
drawerData: '' // 菜单基础数据
import { useAppStore } from '@/stores/app'
defineOptions({ name: 'Main' })
const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const resetConfig = ref(Configuration) // 菜单项
const handleDrawer = ref(false) // 是否可展开
const drawerData = ref('') // 菜单基础数据
// 用户信息
const userInfo = computed(() => {
return storage.getItem('userInfo');
})
// 购物车商品数量
const cartNum = computed(() => appStore.cartNum)
function showCartNum (item) { // 获取购物车数量
if (userInfo.value && item.title === '购物车') {
getCartList()
}
},
components: {drawerPage},
computed: {
// 用户信息
userInfo () {
return Storage.getItem('userInfo');
},
// 购物车商品数量
cartNum () {
return this.$store.state.cartNum
}
},
methods: {
resolveIcon,
showCartNum (item) { // 获取购物车数量
if (this.userInfo && item.title === '购物车') {
this.getCartList()
}
},
clickBar (val) { // tabbar点击操作
if (!this.userInfo) {
}
function clickBar (val) { // tabbar点击操作
if (!userInfo.value) {
Modal.confirm({
title: '请登录',
content: '请登录后执行此操作',
okText: '立即登录',
cancelText: '继续浏览',
onOk: () => {
this.$router.push({
router.push({
path: '/login',
query: {
rePath: this.$route.path,
query: JSON.stringify(this.$route.query || {}),
rePath: route.path,
query: JSON.stringify(route.query || {}),
},
});
}
});
} else {
if (val.display) {
this.handleDrawer = true
this.drawerData = val
handleDrawer.value = true
drawerData.value = val
} else {
this.handleDrawer = false
handleDrawer.value = false
switch (val.title) {
case '会员中心':
this.$router.push('/home')
router.push('/home')
break;
case '我的资产':
this.$router.push('/home/MoneyManagement')
router.push('/home/MoneyManagement')
break;
}
}
}
},
getCartList () { // 获取购物车列表
}
function getCartList () { // 获取购物车列表
cartCount().then(res => {
this.$store.commit('SET_CARTNUM', res.result)
this.Cookies.setItem('cartNum', res.result)
appStore.setCartNum(res.result)
storage.setItem('cartNum', res.result)
})
}
}
}
</script>

11
buyer/src/components/empty/Main.vue
View File

@@ -11,10 +11,10 @@
</div>
</template>
<script>
export default {
name: 'Main',
props: {
<script setup>
defineOptions({ name: 'Main' })
defineProps({
_Title: { // 描述内容
type: null,
default: '暂无更多'
@@ -23,8 +23,7 @@ export default {
type: Number,
default: 150
}
}
};
})
</script>
<style scoped lang="scss">

72
buyer/src/components/fixed/index.vue
View File

@@ -8,15 +8,18 @@
</div>
</template>
<script>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getIconUrl } from "@/assets/iconfont/iconMap";
import storage from "@/plugins/storage.js";
export default {
name: "fixed-index",
data(){
return{
iconList:[
defineOptions({ name: "fixed-index" });
const route = useRoute();
const router = useRouter();
const iconList = ref([
{
icon:"user",
label:"会员中心",
@@ -46,37 +49,34 @@ export default {
label:"顶部",
path:"back"
},
],
isScrolling:false,
timeoutId:"",
}
},
mounted() {
const vm = this
]);
let isScrolling = false;
let timeoutId = "";
onMounted(() => {
// 添加滚轮事件监听器
window.addEventListener('wheel', function() {
if (vm.isScrolling) {
if (isScrolling) {
// 如果页面正在滚动，则取消定时器并设置 isScrolling 为 false
window.cancelAnimationFrame(vm.timeoutId);
vm.isScrolling = false;
window.cancelAnimationFrame(timeoutId);
isScrolling = false;
}
});
},
methods:{
getIconUrl,
scrollToTop() {
});
function scrollToTop() {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
this.timeoutId = window.requestAnimationFrame(this.scrollToTop);
timeoutId = window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 4);
this.isScrolling = true;
isScrolling = true;
}else {
this.isScrolling = false;
isScrolling = false;
}
},
isLoggedIn () {
}
function isLoggedIn () {
const rawUserInfo = storage.getItem('userInfo');
if (rawUserInfo) {
try {
@@ -86,28 +86,26 @@ export default {
}
}
return !!storage.getItem('accessToken');
},
goLogin (rePath) {
this.$router.push({
}
function goLogin (rePath) {
router.push({
path: '/login',
query: {
rePath,
query: JSON.stringify(this.$route.query || {}),
query: JSON.stringify(route.query || {}),
},
});
},
handleClickIcon (val) {
}
function handleClickIcon (val) {
if (val.path === 'back') {
this.scrollToTop();
scrollToTop();
return;
}
if (val.requireLogin && !this.isLoggedIn()) {
this.goLogin(val.path);
if (val.requireLogin && !isLoggedIn()) {
goLogin(val.path);
return;
}
this.$router.push(val.path);
},
}
router.push(val.path);
}
</script>

35
buyer/src/components/footer/Footer.vue
View File

@@ -68,32 +68,29 @@
</div>
</template>
<script>
import config from '@/config';
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import config from '@/config'
export default {
name: "Footer",
data() {
return {
config,
guideArr: [
defineOptions({ name: 'Footer' })
const router = useRouter()
const guideArr = ref([
// 导航链接
["购物指南", "购物流程", "会员介绍", "生活旅行", "常见问题"],
["配送方式", "上门自提", "配送查询", "收取标准", "物流规则"],
["支付方式", "在线支付", "公司转账", "余额支付", "积分支付"],
["售后服务", "售后政策", "退款说明", "返修/退货", "取消订单"],
],
moreLink: ["关于我们", "联系我们", "联系客服", "商家帮助", "隐私政策"], // 更多链接
year: new Date().getFullYear(), // 当前年份
};
},
methods: {
goArticle() {
])
const moreLink = ref(["关于我们", "联系我们", "联系客服", "商家帮助", "隐私政策"]) // 更多链接
const year = ref(new Date().getFullYear()) // 当前年份
function goArticle() {
// 跳转文章页
this.$router.push("/article");
},
},
};
router.push("/article")
}
</script>
<style scoped lang="scss">

106
buyer/src/components/goods/GoodsThumb.vue
View File

@@ -1,13 +1,15 @@
<template>
<div class="goods-thumb" :class="{ 'is-loaded': loaded, 'is-error': error }">
<div class="goods-thumb" ref="rootEl" :class="{ 'is-loaded': loaded, 'is-error': error }">
<img v-if="currentSrc" :src="currentSrc" :alt="alt" @load="loaded = true" @error="onError" />
</div>
</template>
<script>
export default {
name: "GoodsThumb",
props: {
<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
defineOptions({ name: "GoodsThumb" });
const props = defineProps({
src: {
type: String,
default: "",
@@ -16,63 +18,65 @@ export default {
type: String,
default: "",
},
},
data() {
return {
currentSrc: "",
loaded: false,
error: false,
observer: null,
};
},
watch: {
src() {
this.observe();
},
},
mounted() {
this.observe();
},
beforeUnmount() {
this.disconnect();
},
methods: {
disconnect() {
if (this.observer) {
this.observer.disconnect();
this.observer = null;
});
const rootEl = ref(null);
const currentSrc = ref("");
const loaded = ref(false);
const error = ref(false);
let observer = null;
watch(
() => props.src,
() => {
observe();
}
},
observe() {
this.disconnect();
this.currentSrc = "";
this.loaded = false;
this.error = false;
if (!this.src) {
this.error = true;
);
function disconnect() {
if (observer) {
observer.disconnect();
observer = null;
}
}
function observe() {
disconnect();
currentSrc.value = "";
loaded.value = false;
error.value = false;
if (!props.src) {
error.value = true;
return;
}
if (typeof IntersectionObserver === "undefined") {
this.currentSrc = this.src;
currentSrc.value = props.src;
return;
}
this.observer = new IntersectionObserver(
observer = new IntersectionObserver(
(entries) => {
if (!entries.some((entry) => entry.isIntersecting)) return;
this.currentSrc = this.src;
this.disconnect();
currentSrc.value = props.src;
disconnect();
},
{ rootMargin: "160px 0px" }
);
this.observer.observe(this.$el);
},
onError() {
this.error = true;
this.loaded = false;
this.currentSrc = "";
},
},
};
observer.observe(rootEl.value);
}
function onError() {
error.value = true;
loaded.value = false;
currentSrc.value = "";
}
onMounted(() => {
observe();
});
onBeforeUnmount(() => {
disconnect();
});
</script>
<style scoped lang="scss">

59
buyer/src/components/goodsDetail/Promotion.vue
View File

@@ -18,11 +18,11 @@
</span>
</div>
</template>
<script>
<script setup>
import { onMounted, ref } from 'vue';
import { AlarmClock } from '@element-plus/icons-vue';
export default {
components: { AlarmClock },
props: {
const props = defineProps({
time: { // 传入的初始时间
default: 1718977559428
},
@@ -30,21 +30,15 @@ export default {
default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同
type: String
}
},
data () {
return {
end: '', // 结束状态
hours: '', // 小时
minutes: '', // 分钟
seconds: '', // 秒
interval: '' // 定时器
};
},
mounted () {
this.init()
},
methods: {
countDown (val) { // 倒计时方法
});
const end = ref(''); // 结束状态
const hours = ref(''); // 小时
const minutes = ref(''); // 分钟
const seconds = ref(''); // 秒
let interval = null; // 定时器
function countDown (val) { // 倒计时方法
function addZero (i) {
return i < 10 ? '0' + i : i + '';
}
@@ -57,21 +51,24 @@ export default {
h = addZero(h);
m = addZero(m);
s = addZero(s);
this.hours = h;
this.minutes = m
this.seconds = s;
hours.value = h;
minutes.value = m
seconds.value = s;
if (lefttime <= 0) {
this.end = `活动已结束`;
clearInterval(this.interval)
end.value = `活动已结束`;
clearInterval(interval)
}
},
init () { // 初始化
this.interval = setInterval(() => {
this.countDown(this.time);
}
function init () { // 初始化
interval = setInterval(() => {
countDown(props.time);
}, 1000);
}
}
};
}
onMounted(() => {
init()
});
</script>
<style scoped lang="scss">
.cart-promotion{

413
buyer/src/components/goodsDetail/ShowGoods.vue
View File

@@ -108,7 +108,7 @@
class="item-coupon"
v-for="(item, index) in promotionMap['COUPON'].slice(0, 6)"
:key="index"
@click="receiveCoupon(item.id)"
@click="handleReceiveCoupon(item.id)"
>
<span v-if="item.couponType == 'PRICE'"
>满{{ item.consumeThreshold }}减{{ item.price }}</span>
@@ -125,7 +125,7 @@
class="item-coupon"
v-for="(item, index) in promotionMap['COUPON'].slice(6, promotionMap['COUPON'].length)"
:key="index"
@click="receiveCoupon(item.id)"
@click="handleReceiveCoupon(item.id)"
>
<span v-if="item.couponType == 'PRICE'"
>满{{ item.consumeThreshold }}减{{ item.price }}</span>
@@ -318,11 +318,14 @@
</div>
</template>
<script>
<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import { StarFilled } from '@element-plus/icons-vue';
import Promotion from "./Promotion.vue";
import DPlayer from "dplayer";
import storage from "@/plugins/storage.js";
import {
collectGoods,
isCollection,
@@ -344,154 +347,160 @@ import {
E_COUPON_CART_POINTS,
} from "@/constants/goodsType";
export default {
name: "ShowGoods",
props: {
defineOptions({ name: "ShowGoods" });
const props = defineProps({
// 商品数据
detail: {
type: Object,
default: null,
},
},
watch: {
detail: {
handler(val) {
this.skuDetail = val.data;
this.wholesaleList = val.wholesaleList;
this.syncCountWithQuantity();
this.promotion();
this.swiperGoodsImg();
},
deep: true,
immediate: true,
},
showGoodsVideo(val){
if(val){
this.initVideo();
}
}
},
data() {
return {
playIcon,
showGoodsVideo:false,
goodsVideo:"",
wholesaleList: [],
count: 1, // 商品数量
imgIndex: 0, // 展示图片下标
currentSelceted: [], // 当前商品sku
imgList: [], // 商品图片列表
skuDetail: {
});
const emit = defineEmits(["handleClickSku"]);
const route = useRoute();
const router = useRouter();
const showGoodsVideo = ref(false);
const goodsVideo = ref("");
const wholesaleList = ref([]);
const count = ref(1); // 商品数量
const imgIndex = ref(0); // 展示图片下标
const currentSelceted = ref([]); // 当前商品sku
const imgList = ref([]); // 商品图片列表
const skuDetail = ref({
specList: [],
}, // sku详情
goodsSpecList: this.detail.specs, // 商品spec
promotionMap: createEmptyPromotionMap(),
formatList: [], // 选择商品品类的数组
loading: false, // 立即购买loading
loading1: false, // 加入购物车loading
loadingPintuan: false,
isCollected: false, // 是否收藏
};
},
components: { Promotion, StarFilled },
computed: {
currentImg() {
const item = this.imgList[this.imgIndex];
}); // sku详情
const goodsSpecList = ref(props.detail.specs); // 商品spec
const promotionMap = ref(createEmptyPromotionMap());
const formatList = ref([]); // 选择商品品类的数组
const loading = ref(false); // 立即购买loading
const loading1 = ref(false); // 加入购物车loading
const loadingPintuan = ref(false);
const isCollected = ref(false); // 是否收藏
const skuList = ref([]); // formatSku 中赋值（原 data 未声明）
// startCheckout 通过字符串 key 操作对应 loading
const loadings = { loading, loading1, loadingPintuan };
const currentImg = computed(() => {
const item = imgList.value[imgIndex.value];
return item ? item.url || item : "";
},
wholesalePrice(key) {
return this.wholesaleList.length
? this.wholesaleList.map((item) => {
});
const wholesalePrice = computed(() => {
return wholesaleList.value.length
? wholesaleList.value.map((item) => {
return item.price;
})
: [];
},
wholesaleNum(key) {
return this.wholesaleList.length
? this.wholesaleList.map((item) => {
});
const wholesaleNum = computed(() => {
return wholesaleList.value.length
? wholesaleList.value.map((item) => {
return item.num;
})
: [];
},
/** 卡密商品：禁加购，仅立即购买；库存读 quantity（M-02 起支持促销） */
isECouponGoods() {
return isECoupon(this.skuDetail.goodsType);
},
displayStock() {
if (this.isECouponGoods) {
return getECouponStock(this.skuDetail);
});
/** 卡密商品：禁加购，仅立即购买；库存读 quantity（M-02 起支持促销） */
const isECouponGoods = computed(() => {
return isECoupon(skuDetail.value.goodsType);
});
const displayStock = computed(() => {
if (isECouponGoods.value) {
return getECouponStock(skuDetail.value);
}
return Number(this.skuDetail.quantity) || 0;
},
quantityMax() {
if (this.isECouponGoods) {
return getECouponMaxBuyNum(this.skuDetail);
return Number(skuDetail.value.quantity) || 0;
});
const quantityMax = computed(() => {
if (isECouponGoods.value) {
return getECouponMaxBuyNum(skuDetail.value);
}
const qty = Number(this.skuDetail.quantity) || 0;
const qty = Number(skuDetail.value.quantity) || 0;
return qty > 0 ? qty : 1;
},
isOutOfStock() {
if (this.isECouponGoods) {
return getECouponStock(this.skuDetail) <= 0;
});
const isOutOfStock = computed(() => {
if (isECouponGoods.value) {
return getECouponStock(skuDetail.value) <= 0;
}
return (Number(this.skuDetail.quantity) || 0) <= 0;
return (Number(skuDetail.value.quantity) || 0) <= 0;
});
watch(
() => props.detail,
(val) => {
skuDetail.value = val.data;
wholesaleList.value = val.wholesaleList;
syncCountWithQuantity();
promotion();
swiperGoodsImg();
},
},
methods: {
eCouponAfterSaleHint,
// 初始化video
initVideo(){
if(!this.goodsVideo ){
setTimeout(()=>{
this.goodsVideo = new DPlayer({
{ deep: true, immediate: true }
);
watch(showGoodsVideo, (val) => {
if (val) {
initVideo();
}
});
// 初始化video
function initVideo() {
if (!goodsVideo.value) {
setTimeout(() => {
goodsVideo.value = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url:this.skuDetail.goodsVideo,
url: skuDetail.value.goodsVideo,
},
});
},100)
}, 100);
}
}
},
syncCountWithQuantity() {
const qty = this.isECouponGoods
? getECouponStock(this.skuDetail)
: Number(this.skuDetail.quantity) || 0;
function syncCountWithQuantity() {
const qty = isECouponGoods.value
? getECouponStock(skuDetail.value)
: Number(skuDetail.value.quantity) || 0;
if (qty <= 0) {
this.count = 1;
count.value = 1;
return;
}
if (!this.isECouponGoods && this.wholesaleList && this.wholesaleList.length > 0) {
this.count = Math.min(Math.max(this.wholesaleList[0].num, 1), qty);
if (!isECouponGoods.value && wholesaleList.value && wholesaleList.value.length > 0) {
count.value = Math.min(Math.max(wholesaleList.value[0].num, 1), qty);
return;
}
const max = this.isECouponGoods ? getECouponMaxBuyNum(this.skuDetail) : qty;
if (this.count > max) {
this.count = max;
} else if (this.count < 1) {
this.count = 1;
const max = isECouponGoods.value ? getECouponMaxBuyNum(skuDetail.value) : qty;
if (count.value > max) {
count.value = max;
} else if (count.value < 1) {
count.value = 1;
}
},
changeCount(val) {
if (this.wholesaleList && this.wholesaleList.length > 0) {
if (this.count <= this.wholesaleList[0].num) {
}
function changeCount(val) {
if (wholesaleList.value && wholesaleList.value.length > 0) {
if (count.value <= wholesaleList.value[0].num) {
Message.warning("批发商品购买数量不能小于起批数量");
this.count = this.wholesaleList[0].num;
count.value = wholesaleList.value[0].num;
}
}
},
select(index, value) {
}
function select(index, value) {
// 选择规格
this.currentSelceted[index] = value;
let selectedSkuId = this.goodsSpecList.find((i) => {
currentSelceted.value[index] = value;
let selectedSkuId = goodsSpecList.value.find((i) => {
let matched = true;
let specValues = i.specValues.filter((j) => j.specName !== "images");
for (let n = 0; n < specValues.length; n++) {
if (specValues[n].specValue !== this.currentSelceted[n]) {
if (specValues[n].specValue !== currentSelceted.value[n]) {
matched = false;
return;
}
@@ -500,36 +509,36 @@ export default {
return i;
}
});
this.$emit("handleClickSku", {
emit("handleClickSku", {
skuId: selectedSkuId.skuId,
goodsId: this.skuDetail.goodsId,
goodsId: skuDetail.value.goodsId,
});
},
}
addShoppingCartBtn() {
function addShoppingCartBtn() {
// FR-B-01：E_COUPON 禁止加购物车（后端亦返回 CARD_KEY_E_COUPON_CART_FORBIDDEN）
if (this.isECouponGoods) {
if (isECouponGoods.value) {
Message.warning("电子卡券请使用立即购买");
return;
}
// 添加购物车
const params = {
num: this.count,
skuId: this.skuDetail.id,
num: count.value,
skuId: skuDetail.value.id,
};
this.loading = true;
loading.value = true;
addCartGoods(params)
.then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
this.$router.push({
router.push({
path: "/shoppingCart",
query: {
skuId: this.skuDetail.id,
goodsId: this.skuDetail.goodsId,
thumbnail: this.skuDetail.thumbnail,
goodsName: this.skuDetail.goodsName,
count: this.count,
skuId: skuDetail.value.id,
goodsId: skuDetail.value.goodsId,
thumbnail: skuDetail.value.thumbnail,
goodsName: skuDetail.value.goodsName,
count: count.value,
},
});
} else {
@@ -537,38 +546,42 @@ export default {
}
})
.catch(() => {
this.loading = false;
loading.value = false;
});
},
buyNow() {
this.startCheckout(E_COUPON_CART_BUY_NOW, "loading1");
},
pintuanBuy() {
this.startCheckout(E_COUPON_CART_PINTUAN, "loadingPintuan");
},
pointPay() {
this.startCheckout(E_COUPON_CART_POINTS, "loading");
},
startCheckout(action, loadingKey) {
}
function buyNow() {
startCheckout(E_COUPON_CART_BUY_NOW, "loading1");
}
function pintuanBuy() {
startCheckout(E_COUPON_CART_PINTUAN, "loadingPintuan");
}
function pointPay() {
startCheckout(E_COUPON_CART_POINTS, "loading");
}
function startCheckout(action, loadingKey) {
const params = {
num: this.count,
skuId: this.skuDetail.id,
num: count.value,
skuId: skuDetail.value.id,
cartType: "BUY_NOW",
};
if (this.skuDetail.goodsType === "VIRTUAL_GOODS") {
if (skuDetail.value.goodsType === "VIRTUAL_GOODS") {
params.cartType = "VIRTUAL";
} else if (this.isECouponGoods) {
} else if (isECouponGoods.value) {
params.cartType = resolveECouponCartType({
routeWay: this.$route.query.way,
routeWay: route.query.way,
action,
});
}
this[loadingKey] = true;
loadings[loadingKey].value = true;
addCartGoods(params)
.then((res) => {
this[loadingKey] = false;
loadings[loadingKey].value = false;
if (res.success) {
this.$router.push({
router.push({
path: "/pay",
query: { way: params.cartType },
});
@@ -577,37 +590,39 @@ export default {
}
})
.catch(() => {
this[loadingKey] = false;
loadings[loadingKey].value = false;
});
},
async collect() {
if (!this.Cookies.getItem("accessToken") || !this.Cookies.getItem("userInfo")) {
this.$router.push({
}
async function collect() {
if (!storage.getItem("accessToken") || !storage.getItem("userInfo")) {
router.push({
path: "/login",
query: {
rePath: this.$route.path,
query: JSON.stringify(this.$route.query || {}),
rePath: route.path,
query: JSON.stringify(route.query || {}),
},
});
return;
}
// 收藏商品
if (this.isCollected) {
let cancel = await cancelCollect("GOODS", this.skuDetail.id);
if (isCollected.value) {
let cancel = await cancelCollect("GOODS", skuDetail.value.id);
if (cancel.success) {
Message.success("取消收藏成功");
this.isCollected = false;
isCollected.value = false;
}
} else {
let collect = await collectGoods("GOODS", this.skuDetail.id);
let collect = await collectGoods("GOODS", skuDetail.value.id);
if (collect.code === 200) {
this.isCollected = true;
isCollected.value = true;
Message.success("收藏商品成功,可以前往个人中心我的收藏查看");
}
}
},
// 格式化数据
formatSku(list) {
}
// 格式化数据
function formatSku(list) {
let arr = [{}];
list.forEach((item, index) => {
item.specValues.forEach((spec, specIndex) => {
@@ -642,19 +657,20 @@ export default {
});
});
arr.shift();
this.formatList = arr;
formatList.value = arr;
let cur = list.filter((i) => i.skuId === this.$route.query.skuId)[0];
let cur = list.filter((i) => i.skuId === route.query.skuId)[0];
if (cur) {
cur.specValues
.filter((i) => i.specName !== "images")
.forEach((value, _index) => {
this.currentSelceted[_index] = value.specValue;
currentSelceted.value[_index] = value.specValue;
});
}
this.skuList = list;
},
receiveCoupon(id) {
skuList.value = list;
}
function handleReceiveCoupon(id) {
// 领取优惠券
receiveCoupon(id).then((res) => {
if (res.success) {
@@ -663,56 +679,57 @@ export default {
Message.warning(res.message);
}
});
},
promotion() {
this.promotionMap = createEmptyPromotionMap();
if (!this.detail || !this.detail.promotionMap) return false;
const keysArr = Object.keys(this.detail.promotionMap);
}
function promotion() {
promotionMap.value = createEmptyPromotionMap();
if (!props.detail || !props.detail.promotionMap) return false;
const keysArr = Object.keys(props.detail.promotionMap);
if (keysArr.length === 0) return false;
for (let i = 0; i < keysArr.length; i++) {
const key = keysArr[i].split("-")[0];
if (key === "COUPON") {
if (!Array.isArray(this.promotionMap.COUPON)) {
this.promotionMap.COUPON = [];
if (!Array.isArray(promotionMap.value.COUPON)) {
promotionMap.value.COUPON = [];
}
this.promotionMap.COUPON.push(this.detail.promotionMap[keysArr[i]]);
} else if (Object.prototype.hasOwnProperty.call(this.promotionMap, key)) {
this.promotionMap[key] = this.detail.promotionMap[keysArr[i]];
promotionMap.value.COUPON.push(props.detail.promotionMap[keysArr[i]]);
} else if (Object.prototype.hasOwnProperty.call(promotionMap.value, key)) {
promotionMap.value[key] = props.detail.promotionMap[keysArr[i]];
} else {
this.promotionMap[key] = this.detail.promotionMap[keysArr[i]];
promotionMap.value[key] = props.detail.promotionMap[keysArr[i]];
}
}
},
// 相册里会混进规格 JSON，只留图片地址；没有相册时用主图
swiperGoodsImg() {
const source = this.skuDetail.goodsGalleryList || [];
}
// 相册里会混进规格 JSON，只留图片地址；没有相册时用主图
function swiperGoodsImg() {
const source = skuDetail.value.goodsGalleryList || [];
const gallery = Array.from(source).filter((item) => {
if (typeof item !== "string") return false;
return item.indexOf('"url":') === -1 && item.indexOf('"status":') === -1;
});
if (gallery.length) {
this.imgList = gallery;
imgList.value = gallery;
return;
}
this.imgList = this.skuDetail.original ? [this.skuDetail.original] : [];
},
},
mounted() {
imgList.value = skuDetail.value.original ? [skuDetail.value.original] : [];
}
onMounted(() => {
// 用户登录才会判断是否收藏（须同时有 token，避免残留 userInfo 触发 401 跳转登录）
if (this.Cookies.getItem("accessToken") && this.Cookies.getItem("userInfo")) {
isCollection("GOODS", this.skuDetail.id).then((res) => {
if (storage.getItem("accessToken") && storage.getItem("userInfo")) {
isCollection("GOODS", skuDetail.value.id).then((res) => {
if (res.success && res.result) {
this.isCollected = true;
isCollected.value = true;
}
});
}
this.formatSku(this.goodsSpecList);
// this.promotion();
document.title = this.skuDetail.goodsName;
},
};
formatSku(goodsSpecList.value);
// promotion();
document.title = skuDetail.value.goodsName;
});
</script>
<style scoped lang="scss">

184
buyer/src/components/goodsDetail/ShowGoodsDetail.vue
View File

@@ -132,48 +132,51 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, onBeforeUnmount, reactive, ref } from 'vue';
import { Refresh } from '@element-plus/icons-vue';
import { goodsComment, goodsCommentNum } from '@/api/member.js';
import StoreSide from './StoreSide.vue';
export default {
components: { Refresh, StoreSide },
name: 'ShowGoodsDetail',
props: {
defineOptions({ name: 'ShowGoodsDetail' });
const props = defineProps({
detail: {
type: Object,
default: null
}
},
data () {
return {
detailTabs: [
});
const tabNav = ref(null);
const intro = ref(null);
const comment = ref(null);
const params = ref(null);
const sectionRefs = { intro, comment, params };
const detailTabs = ref([
{ name: 'intro', label: '商品介绍' },
{ name: 'comment', label: '商品评价' },
{ name: 'params', label: '商品参数' }
],
activeDetailTab: 'intro',
anchorStuck: false,
lockScrollSpy: false,
scrollTimer: null,
commentList: [],
commentParams: {
]);
const activeDetailTab = ref('intro');
const anchorStuck = ref(false);
const lockScrollSpy = ref(false);
let scrollTimer = null;
const commentList = ref([]);
const commentParams = reactive({
pageNumber: 1,
pageSize: 10,
grade: '',
goodsId: ''
},
commentTypeNum: {},
commentTotal: 0
};
},
computed: {
skuDetail () {
return this.detail.data;
},
goodsParamsList () {
const list = this.detail && Array.isArray(this.detail.goodsParamsDTOList) ? this.detail.goodsParamsDTOList : [];
});
const commentTypeNum = ref({});
const commentTotal = ref(0);
const skuDetail = computed(() => {
return props.detail.data;
});
const goodsParamsList = computed(() => {
const list = props.detail && Array.isArray(props.detail.goodsParamsDTOList) ? props.detail.goodsParamsDTOList : [];
const flat = [];
list.forEach((item) => {
@@ -194,98 +197,97 @@ export default {
const sb = Number(b && b.sort) || 0;
return sa - sb;
});
}
},
methods: {
getNavOffset () {
const nav = this.$refs.tabNav;
});
function getNavOffset () {
const nav = tabNav.value;
return (nav ? nav.offsetHeight : 52) + 8;
},
scrollToSection (name) {
const el = this.$refs[name];
}
function scrollToSection (name) {
const el = sectionRefs[name] && sectionRefs[name].value;
if (!el) return;
this.activeDetailTab = name;
this.lockScrollSpy = true;
const top = el.getBoundingClientRect().top + window.pageYOffset - this.getNavOffset();
activeDetailTab.value = name;
lockScrollSpy.value = true;
const top = el.getBoundingClientRect().top + window.pageYOffset - getNavOffset();
window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
const unlock = () => {
this.lockScrollSpy = false;
lockScrollSpy.value = false;
window.removeEventListener('scrollend', unlock);
};
window.addEventListener('scrollend', unlock);
window.clearTimeout(this.scrollTimer);
this.scrollTimer = window.setTimeout(unlock, 900);
},
handleScroll () {
const nav = this.$refs.tabNav;
window.clearTimeout(scrollTimer);
scrollTimer = window.setTimeout(unlock, 900);
}
function handleScroll () {
const nav = tabNav.value;
if (nav) {
this.anchorStuck = nav.getBoundingClientRect().top <= 1;
anchorStuck.value = nav.getBoundingClientRect().top <= 1;
}
if (this.lockScrollSpy) return;
const offset = this.getNavOffset() + 16;
if (lockScrollSpy.value) return;
const offset = getNavOffset() + 16;
let current = '';
this.detailTabs.forEach((tab) => {
const el = this.$refs[tab.name];
detailTabs.value.forEach((tab) => {
const el = sectionRefs[tab.name] && sectionRefs[tab.name].value;
if (el && el.getBoundingClientRect().top <= offset) {
current = tab.name;
}
});
if (current) {
this.activeDetailTab = current;
activeDetailTab.value = current;
}
},
changePageNum (val) {
this.commentParams.pageNumber = val;
this.getList();
},
changePageSize (val) {
this.commentParams.pageNumber = 1;
this.commentParams.pageSize = val;
this.getList();
},
getList () {
this.commentParams.goodsId = this.skuDetail.goodsId;
goodsComment(this.commentParams).then(res => {
}
function changePageNum (val) {
commentParams.pageNumber = val;
getList();
}
function changePageSize (val) {
commentParams.pageNumber = 1;
commentParams.pageSize = val;
getList();
}
function getList () {
commentParams.goodsId = skuDetail.value.goodsId;
goodsComment(commentParams).then(res => {
if (res.success) {
this.commentList = res.result.records;
this.commentTotal = res.result.total;
commentList.value = res.result.records;
commentTotal.value = res.result.total;
}
});
goodsCommentNum(this.skuDetail.goodsId).then(res => {
goodsCommentNum(skuDetail.value.goodsId).then(res => {
if (res.success) {
this.commentTypeNum = res.result;
commentTypeNum.value = res.result;
}
});
},
viewByGrade (grade) {
this.commentParams.grade = grade;
this.commentParams.pageNumber = 1;
this.getList();
},
previewImg (img, item) {
}
function viewByGrade (grade) {
commentParams.grade = grade;
commentParams.pageNumber = 1;
getList();
}
function previewImg (img, item) {
item.previewImg = img;
item.deg = item.deg || 0;
},
hidePreviewImg (item) {
}
function hidePreviewImg (item) {
item.previewImg = '';
},
rotatePreviewImg (type, item) {
}
function rotatePreviewImg (type, item) {
const current = item.deg || 0;
item.deg = type ? current + 90 : current - 90;
}
onMounted(() => {
window.addEventListener('scroll', handleScroll, { passive: true });
getList();
if (skuDetail.value.grade === null || skuDetail.value.grade === undefined) {
skuDetail.value.grade = 100;
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll, { passive: true });
this.getList();
if (this.skuDetail.grade === null || this.skuDetail.grade === undefined) {
this.skuDetail.grade = 100;
}
},
beforeUnmount () {
window.removeEventListener('scroll', this.handleScroll);
window.clearTimeout(this.scrollTimer);
}
};
});
onBeforeUnmount(() => {
window.removeEventListener('scroll', handleScroll);
window.clearTimeout(scrollTimer);
});
</script>
<style scoped lang="scss">

226
buyer/src/components/goodsDetail/StoreSide.vue
View File

@@ -65,17 +65,20 @@
</aside>
</template>
<script>
import { Message } from "@/utils/message";
<script setup>
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import { goodsList } from "@/api/goods";
import { getStoreById } from "@/api/shopentry";
import { cancelStoreCollect, collectStore, isStoreCollection } from "@/api/member";
import imTalk from "@/components/mixes/talkIm";
import { getIMDetail } from "@/api/common";
import { getMemberMsg } from "@/api/login";
import storage from "@/plugins/storage.js";
export default {
name: "StoreSide",
mixins: [imTalk],
props: {
defineOptions({ name: "StoreSide" });
const props = defineProps({
storeId: {
type: [String, Number],
default: "",
@@ -92,56 +95,59 @@ export default {
type: String,
default: "",
},
},
data() {
return {
store: {},
logoError: false,
collected: false,
recommends: [],
};
},
computed: {
storeName() {
return this.store.storeName || this.storeNameFallback || "店铺";
},
storeInitial() {
return this.storeName.slice(0, 1);
},
// 自营标记后端可能是 true、1 或 "1"
isSelfOperated() {
const flag = this.store.selfOperated;
});
const route = useRoute();
const router = useRouter();
const store = ref({});
const logoError = ref(false);
const collected = ref(false);
const recommends = ref([]);
// 原 talkIm mixin 的 IM 链接
const IMLink = ref("");
const storeName = computed(() => {
return store.value.storeName || props.storeNameFallback || "店铺";
});
const storeInitial = computed(() => {
return storeName.value.slice(0, 1);
});
// 自营标记后端可能是 true、1 或 "1"
const isSelfOperated = computed(() => {
const flag = store.value.selfOperated;
return flag === true || flag === 1 || flag === "1";
},
},
watch: {
storeId: {
immediate: true,
handler(id) {
});
watch(
() => props.storeId,
(id) => {
if (!id) return;
this.logoError = false;
this.loadStore(id);
this.loadRecommend(id);
this.loadCollected(id);
logoError.value = false;
loadStore(id);
loadRecommend(id);
loadCollected(id);
},
},
},
methods: {
// 没有评分或小于等于 0 时按满分展示
formatScore(value) {
{ immediate: true }
);
// 没有评分或小于等于 0 时按满分展示
function formatScore(value) {
const score = Number(value);
if (!Number.isFinite(score) || score <= 0) return "5.00";
return score.toFixed(2);
},
loadStore(id) {
}
function loadStore(id) {
getStoreById(id).then((res) => {
if (res.success && res.result) this.store = res.result;
if (res.success && res.result) store.value = res.result;
}).catch((err) => {
console.warn('获取店铺信息失败', err);
});
},
// 按销量取店内商品，去掉当前商品，最多 4 个
loadRecommend(id) {
}
// 按销量取店内商品，去掉当前商品，最多 4 个
function loadRecommend(id) {
goodsList({
storeId: id,
pageNumber: 1,
@@ -150,64 +156,126 @@ export default {
order: "desc",
}).then((res) => {
const records = (res.success && res.result && res.result.records) || [];
this.recommends = records
.filter((item) => String(item.goodsId) !== String(this.goodsId))
recommends.value = records
.filter((item) => String(item.goodsId) !== String(props.goodsId))
.slice(0, 4);
}).catch(() => {
// 推荐商品为可选数据，加载失败时静默
});
},
// 同时有 token 和用户信息才查收藏，避免残留 userInfo 触发登录跳转
loadCollected(id) {
if (!this.Cookies.getItem("accessToken") || !this.Cookies.getItem("userInfo")) return;
}
// 同时有 token 和用户信息才查收藏，避免残留 userInfo 触发登录跳转
function loadCollected(id) {
if (!storage.getItem("accessToken") || !storage.getItem("userInfo")) return;
isStoreCollection("STORE", id).then((res) => {
if (res.success && res.result) this.collected = true;
if (res.success && res.result) collected.value = true;
}).catch(() => {
// 收藏状态为可选数据，失败时静默
});
},
goStore() {
this.$router.push({ path: "/merchant", query: { id: this.storeId } });
},
// 推荐商品新开详情页，店铺页仍在当前页打开
goGoods(item) {
const href = this.$router.resolve({
}
function goStore() {
router.push({ path: "/merchant", query: { id: props.storeId } });
}
// 推荐商品新开详情页，店铺页仍在当前页打开
function goGoods(item) {
const href = router.resolve({
path: "/goodsDetail",
query: { skuId: item.id, goodsId: item.goodsId },
}).href;
window.open(href, "_blank");
},
contact() {
this.IMService(this.storeId, this.goodsId, this.skuId);
},
// 未登录先去登录，并带回当前商品页
async toggleCollect() {
if (!this.Cookies.getItem("accessToken") || !this.Cookies.getItem("userInfo")) {
this.$router.push({
}
// 原 talkIm mixin 的登录提示
function promptLogin() {
Modal.confirm({
title: "温馨提示",
content: "请登录后执行此操作",
okText: "立即登录",
cancelText: "取消",
onOk: () => {
router.push({
path: "/login",
query: {
rePath: this.$route.path,
query: JSON.stringify(this.$route.query || {}),
rePath: route.path,
query: JSON.stringify(route.query || {}),
},
});
},
});
}
// 获取im信息（原 talkIm mixin）
async function getIMDetailMethods() {
let res = await getIMDetail();
if (res.success) {
IMLink.value = res.result;
}
}
// 跳转im客服（原 talkIm mixin；本组件无 storeMsg，mixin 的 storeMsg?.storeId 兜底恒为 undefined，等价于直接用传入的 id）
async function IMService(id, goodsId, skuId) {
if (!storage.getItem("accessToken")) {
promptLogin();
return;
}
try {
await getIMDetailMethods();
const userInfo = await getMemberMsg();
if (!userInfo.success) {
promptLogin();
return;
}
const accessToken = storage.getItem("accessToken");
const storeId = id;
const baseUrl = `${IMLink.value}?token=${accessToken}&id=${storeId}`;
if (goodsId && skuId) {
window.open(`${baseUrl}&goodsId=${goodsId}&skuId=${skuId}`);
} else {
window.open(baseUrl);
}
} catch {
// token 过期等场景由 request 拦截器处理；未登录时避免未捕获异常
if (!storage.getItem("accessToken")) {
promptLogin();
}
}
}
function contact() {
IMService(props.storeId, props.goodsId, props.skuId);
}
// 未登录先去登录，并带回当前商品页
async function toggleCollect() {
if (!storage.getItem("accessToken") || !storage.getItem("userInfo")) {
router.push({
path: "/login",
query: {
rePath: route.path,
query: JSON.stringify(route.query || {}),
},
});
return;
}
if (this.collected) {
const cancel = await cancelStoreCollect("STORE", this.storeId);
if (collected.value) {
const cancel = await cancelStoreCollect("STORE", props.storeId);
if (cancel.success) {
this.collected = false;
collected.value = false;
Message.success("已取消收藏");
}
return;
}
const collect = await collectStore("STORE", this.storeId);
const collect = await collectStore("STORE", props.storeId);
if (collect.code === 200) {
this.collected = true;
collected.value = true;
Message.success("收藏店铺成功，可以前往个人中心我的收藏查看");
}
},
},
};
}
</script>
<style scoped lang="scss">

142
buyer/src/components/header/Header.vue
View File

@@ -90,7 +90,9 @@
</div>
</template>
<script>
<script setup>
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Modal } from "@/utils/message";
import { ShoppingCart } from '@element-plus/icons-vue';
import storage from '@/plugins/storage.js';
@@ -98,79 +100,74 @@ import {cartGoodsAll} from '@/api/cart.js';
import {logout} from '@/api/account.js';
import config from '@/config';
import { refreshUnreadMessage } from '@/utils/unreadMessage';
import { useAppStore } from '@/stores/app';
export default {
components: { ShoppingCart },
name: 'M-Header',
created() {
if (storage.getItem('userInfo')) {
this.userInfo = JSON.parse(storage.getItem('userInfo'));
defineOptions({ name: 'M-Header' });
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const userInfo = ref({}); // 用户信息
const shoppingCart = ref([]); // 购物车
const cartLoading = ref(false);
const cartLoadedAt = ref(0);
const cartCacheTime = ref(5000);
// 购物车商品数量
const cartNum = computed(() => appStore.cartNum);
const unreadMsg = computed(() => appStore.unreadMsg);
const unreadLabel = computed(() => {
return unreadMsg.value > 99 ? '99+' : String(unreadMsg.value);
});
if (storage.getItem('userInfo')) {
userInfo.value = JSON.parse(storage.getItem('userInfo'));
refreshUnreadMessage();
}
},
}
data() {
return {
config,
userInfo: {}, // 用户信息
shoppingCart: [], // 购物车
cartLoading: false,
cartLoadedAt: 0,
cartCacheTime: 5000
};
},
computed: {
// 购物车商品数量
cartNum() {
return this.$store.state.cartNum;
},
unreadMsg() {
return Number(this.$store.state.unreadMsg) || 0;
},
unreadLabel() {
return this.unreadMsg > 99 ? '99+' : String(this.unreadMsg);
}
},
methods: {
goToPay() {
if (!this.userInfo.username) {
function goToPay() {
if (!userInfo.value.username) {
Modal.confirm({
title: '温馨提示',
content: '请登录后执行此操作',
okText: '立即登录',
cancelText: '取消',
onOk: () => {
this.$router.push({
router.push({
path: '/login',
query: {
rePath: '/cart',
query: JSON.stringify(this.$route.query || {}),
query: JSON.stringify(route.query || {}),
},
});
},
});
return;
}
this.$router.push('/cart');
},
myInfo() { // 跳转会员中心
this.$router.push('/home');
},
signOutFun() { // 退出登录
router.push('/cart');
}
function myInfo() { // 跳转会员中心
router.push('/home');
}
function signOutFun() { // 退出登录
logout().then(res => {
storage.removeItem('accessToken');
storage.removeItem('refreshToken');
storage.removeItem('userInfo');
storage.removeItem('cartNum');
this.$store.commit('SET_CARTNUM', 0)
this.$store.commit('SET_UNREAD_MSG', 0)
this.$router.push('/login');
appStore.setCartNum(0)
appStore.setUnreadMsg(0)
router.push('/login');
});
},
goUserCenter(path) {
}
function goUserCenter(path) {
// 跳转我的订单，我的足迹、收藏等
if (this.userInfo.username) {
this.$router.push({path: path});
if (userInfo.value.username) {
router.push({path: path});
} else {
Modal.confirm({
title: '请登录',
@@ -178,20 +175,21 @@ export default {
okText: '立即登录',
cancelText: '继续浏览',
onOk: () => {
this.$router.push({
router.push({
path: '/login',
query: {
rePath: this.$route.path,
query: JSON.stringify(this.$route.query || {}),
rePath: route.path,
query: JSON.stringify(route.query || {}),
},
});
}
});
}
},
shopEntry() {
}
function shopEntry() {
if (storage.getItem('accessToken')) {
this.$router.push({
router.push({
path: '/shopEntry',
query: { id: 1 },
});
@@ -203,7 +201,7 @@ export default {
okText: '立即登录',
cancelText: '取消',
onOk: () => {
this.$router.push({
router.push({
path: '/login',
query: {
rePath: '/shopEntry',
@@ -212,35 +210,35 @@ export default {
});
},
});
},
handleCartDropdownVisible(visible) {
}
function handleCartDropdownVisible(visible) {
if (visible) {
this.getCartList();
getCartList();
}
},
getCartList() {
}
function getCartList() {
// 获取购物车列表
if (!this.userInfo.username || this.cartLoading) {
if (!userInfo.value.username || cartLoading.value) {
return;
}
const now = Date.now();
if (this.cartLoadedAt && now - this.cartLoadedAt < this.cartCacheTime) {
if (cartLoadedAt.value && now - cartLoadedAt.value < cartCacheTime.value) {
return;
}
this.cartLoadedAt = now;
this.cartLoading = true;
cartLoadedAt.value = now;
cartLoading.value = true;
cartGoodsAll().then((res) => {
if (res.success) {
this.shoppingCart = (res.result && res.result.skuList) || [];
this.$store.commit('SET_CARTNUM', this.shoppingCart.length);
this.Cookies.setItem('cartNum', this.shoppingCart.length);
shoppingCart.value = (res.result && res.result.skuList) || [];
appStore.setCartNum(shoppingCart.value.length);
storage.setItem('cartNum', shoppingCart.value.length);
}
}).finally(() => {
this.cartLoading = false;
cartLoading.value = false;
});
}
}
};
}
</script>
<style scoped lang="scss">

50
buyer/src/components/header/hoverSearch.vue
View File

@@ -24,44 +24,40 @@
</div>
</div>
</template>
<script>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import Search from '@/components/Search.vue'
import cateNav from '@/components/nav/CateNav.vue'
import { cartCount } from '@/api/cart.js'
import storage from '@/plugins/storage.js'
import { ShoppingCart } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'
export default {
components: { ShoppingCart, Search, cateNav },
data() {
return {
userInfo: {}
}
},
computed: {
cartNum() {
return this.$store.state.cartNum
}
},
methods: {
goCartList() {
this.$router.push('/cart')
},
getCartList() {
const router = useRouter()
const appStore = useAppStore()
const userInfo = ref({})
const cartNum = computed(() => appStore.cartNum)
function goCartList() {
router.push('/cart')
}
function getCartList() {
if (storage.getItem('userInfo')) {
cartCount().then((res) => {
this.$store.commit('SET_CARTNUM', res.result)
this.Cookies.setItem('cartNum', res.result)
appStore.setCartNum(res.result)
storage.setItem('cartNum', res.result)
})
}
}
},
mounted() {
if (storage.getItem('userInfo')) {
this.userInfo = JSON.parse(storage.getItem('userInfo'))
}
}
}
onMounted(() => {
if (storage.getItem('userInfo')) {
userInfo.value = JSON.parse(storage.getItem('userInfo'))
}
})
</script>
<style lang="scss" scoped>
$side-col-width: 263.2px;

32
buyer/src/components/indexDecorate/ModelForm.vue
View File

@@ -11,29 +11,25 @@
</div>
</div>
</template>
<script>
<script setup>
import { computed } from 'vue';
import ModelFormItem from './ModelFormItem.vue';
export default {
name: 'modelForm',
components: {
ModelFormItem
},
props: ['data'],
computed: {
renderList() {
const list = this.data?.list || [];
defineOptions({ name: 'modelForm' });
const props = defineProps(['data']);
const renderList = computed(() => {
const list = props.data?.list || [];
return list.filter(
(el) => el && el.key && !this.isBuiltinModule(el.type)
(el) => el && el.key && !isBuiltinModule(el.type)
);
}
},
methods: {
isBuiltinModule(type) {
});
function isBuiltinModule(type) {
// 顶部广告、快捷导航由 Index 页单独渲染
return type === 'topAdvert' || type === 'navBar';
}
}
};
}
</script>
<style lang="scss" scoped>
.model-form {

38
buyer/src/components/indexDecorate/ModelFormItem.vue
View File

@@ -138,7 +138,8 @@
</div>
</template>
<script>
<script setup>
import { ref } from "vue";
import ModelCarousel from "./modelList/Carousel.vue";
import ModelCarousel1 from "./modelList/Carousel1.vue";
import ModelCarousel2 from "./modelList/Carousel2.vue";
@@ -152,34 +153,15 @@ import goodsAndType from "./modelList/goodsAndType.vue";
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
import mixModel from "./modelList/mixModel.vue";
import forYour from "./modelList/forYour.vue";
import decorateImg from "@/assets/images/decorate.png";
import decorateImgUrl from "@/assets/images/decorate.png";
export default {
name: "modelFormItem",
props: ["element", "select", "index", "data"],
components: {
ModelCarousel,
ModelCarousel1,
ModelCarousel2,
Recommend,
NewGoodsSort,
FirstPageAdvert,
NotEnough,
Seckill,
oneRowThreeColumns,
goodsAndType,
onlyGoodsModel,
mixModel,
forYour
},
data() {
return {
decorateImg,
showModal: false, // 控制模态框显隐
selected: {}, // 已选数据
};
},
};
defineOptions({ name: "modelFormItem" });
defineProps(["element", "select", "index", "data"]);
const decorateImg = ref(decorateImgUrl);
const showModal = ref(false); // 控制模态框显隐
const selected = ref({}); // 已选数据
</script>
<style lang="scss" scoped>
.model-item {

112
buyer/src/components/indexDecorate/modelList/Carousel.vue
View File

@@ -82,30 +82,31 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Modal } from "@/utils/message";
import storage from "@/plugins/storage";
import config from "@/config";
import defaultAvatar from "@/assets/images/default.png";
import { getIconUrl } from "@/assets/iconfont/iconMap";
export default {
name: "modelCarousel",
props: ["data"],
computed: {
carouselList() {
return this.data?.options?.list || [];
},
displaySlides() {
return this.carouselList.filter((item) => item && item.img);
},
},
data() {
return {
config,
defaultAvatar,
userInfo: {}, // 用户信息
entranceList: [
defineOptions({ name: "modelCarousel" });
const props = defineProps(["data"]);
const router = useRouter();
const carouselList = computed(() => {
return props.data?.options?.list || [];
});
const displaySlides = computed(() => {
return carouselList.value.filter((item) => item && item.img);
});
const userInfo = ref({}); // 用户信息
const entranceList = ref([
{
icon: "collage",
label: "宝贝收藏",
@@ -126,8 +127,8 @@ export default {
label: "我的足迹",
path: "/home/MyTracks"
},
],
appendList: [
]);
const appendList = ref([
{
icon: "support",
label: "帮助中心",
@@ -148,8 +149,8 @@ export default {
label: "我的消息",
path: "/home/MsgList"
},
],
recentList: [
]);
const recentList = ref([
{
value: "0",
label: "购物车"
@@ -166,15 +167,13 @@ export default {
value: "0",
label: "待付款"
},
],
};
},
methods: {
getIconUrl,
carouselItemKey(item, index) {
]);
function carouselItemKey(item, index) {
return item?.img || item?.url || `slide-${index}`;
},
resolveRoute(pathStr) {
}
function resolveRoute(pathStr) {
if (!pathStr) return { path: "/" };
const [path, search] = pathStr.split("?");
if (!search) return { path };
@@ -182,23 +181,26 @@ export default {
path,
query: Object.fromEntries(new URLSearchParams(search)),
};
},
isMemberRoute(location) {
}
function isMemberRoute(location) {
const path = location.path && location.path.charAt(0) === "/" ? location.path : `/${location.path || ""}`;
return path === "/home" || path.startsWith("/home/") || path === "/cart";
},
normalizeLocation(location) {
}
function normalizeLocation(location) {
if (!location.path || location.path.charAt(0) === "/") return location;
return { ...location, path: `/${location.path}` };
},
promptLoginThenNavigate(location) {
}
function promptLoginThenNavigate(location) {
Modal.confirm({
title: "温馨提示",
content: "请登录后执行此操作",
okText: "立即登录",
cancelText: "取消",
onOk: () => {
this.$router.push({
router.push({
path: "/login",
query: {
rePath: location.path,
@@ -207,26 +209,26 @@ export default {
});
},
});
},
goLogin() {
this.$router.push("/login");
},
// 快捷跳转中心
entryControl(val) {
const location = this.normalizeLocation(this.resolveRoute(val.path));
if (this.isMemberRoute(location) && !storage.getItem("userInfo")) {
this.promptLoginThenNavigate(location);
}
function goLogin() {
router.push("/login");
}
// 快捷跳转中心
function entryControl(val) {
const location = normalizeLocation(resolveRoute(val.path));
if (isMemberRoute(location) && !storage.getItem("userInfo")) {
promptLoginThenNavigate(location);
return;
}
this.$router.push(location);
},
},
mounted() {
if (storage.getItem("userInfo"))
this.userInfo = JSON.parse(storage.getItem("userInfo"));
router.push(location);
}
},
};
onMounted(() => {
if (storage.getItem("userInfo"))
userInfo.value = JSON.parse(storage.getItem("userInfo"));
});
</script>
<style scoped lang="scss">

42
buyer/src/components/indexDecorate/modelList/Carousel1.vue
View File

@@ -17,28 +17,26 @@
</div>
</template>
<script>
export default {
name: 'modelCarousel1',
props: ['data'],
data () {
return {
showModal: false, // modal显隐
selected: null, // 已选数据
picModelFlag: false, // 选择图片modal
bgColor: '#fff' // 轮播背景色
};
},
mounted () {
this.bgColor = this.data.options.list[0].bgColor
},
methods: {
// 自动切换时改变背景色
autoChange (index) {
this.bgColor = this.data.options.list[index].bgColor
}
}
};
<script setup>
import { onMounted, ref } from 'vue'
defineOptions({ name: 'modelCarousel1' })
const props = defineProps(['data'])
const showModal = ref(false) // modal显隐
const selected = ref(null) // 已选数据
const picModelFlag = ref(false) // 选择图片modal
const bgColor = ref('#fff') // 轮播背景色
onMounted(() => {
bgColor.value = props.data.options.list[0].bgColor
})
// 自动切换时改变背景色
function autoChange(index) {
bgColor.value = props.data.options.list[index].bgColor
}
</script>
<style scoped lang="scss">

59
buyer/src/components/indexDecorate/modelList/Carousel2.vue
View File

@@ -55,49 +55,48 @@
</div>
</template>
<script>
import {articleList} from '@/api/common.js'
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { articleList as getArticleListApi } from '@/api/common.js'
import storage from '@/plugins/storage';
import { User } from '@element-plus/icons-vue';
import config from '@/config';
export default {
components: { User },
name: 'modelCarousel2',
props: ['data'],
data () {
return {
config,
userInfo: {}, // 用户信息
articleList: [], // 常见问题
params: { // 请求常见问题参数
defineOptions({ name: 'modelCarousel2' })
defineProps(['data'])
const router = useRouter()
const userInfo = ref({}) // 用户信息
const articleList = ref([]) // 常见问题
const params = reactive({ // 请求常见问题参数
pageNumber: 1,
pageSize: 10,
type: 'ANNOUNCEMENT',
sort: 'sort'
}
};
},
methods: {
getArticleList () { // 获取常见问题列表
articleList(this.params).then(res => {
})
function getArticleList () { // 获取常见问题列表
getArticleListApi(params).then(res => {
if (res.success) {
this.articleList = res.result.records
articleList.value = res.result.records
}
})
},
goArticle (id) { // 跳转文章详情
this.$router.push({
}
function goArticle (id) { // 跳转文章详情
router.push({
path: '/article',
query: {id}
});
}
},
mounted () {
if (storage.getItem('userInfo')) this.userInfo = JSON.parse(storage.getItem('userInfo'));
this.getArticleList()
}
};
}
onMounted(() => {
if (storage.getItem('userInfo')) userInfo.value = JSON.parse(storage.getItem('userInfo'));
getArticleList()
})
</script>
<style scoped lang="scss">

17
buyer/src/components/indexDecorate/modelList/FirstPageAdvert.vue
View File

@@ -19,20 +19,17 @@
</div>
</div>
</template>
<script>
export default {
props: {
<script setup>
import { ref } from 'vue';
const props = defineProps({
data: {
type: Object,
default: null
}
},
data () {
return {
options: this.data.options // 装修数据
};
}
};
});
const options = ref(props.data.options); // 装修数据
</script>
<style lang="scss" scoped>
.first-page-advert {

18
buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
View File

@@ -70,21 +70,17 @@
</div>
</div>
</template>
<script>
export default {
props: {
<script setup>
import { ref } from 'vue'
const props = defineProps({
data: {
type: Object,
default: null
}
},
data () {
return {
options: this.data.options // 装修数据
};
},
methods: {}
};
})
const options = ref(props.data.options) // 装修数据
</script>
<style lang="scss" scoped>
.new-goods {

116
buyer/src/components/indexDecorate/modelList/NotEnough.vue
View File

@@ -31,70 +31,80 @@
</div>
</div>
</template>
<script>
export default {
mounted() {
window.addEventListener('scroll',this.handleScrollx,true)
},
props: {
<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
data: {
type: Object,
default: null,
},
},
data() {
return {
screenHeight:document.body.clientHeight,
scrollHieght:0,
topSearchShow: true, //展示 导航条
topIndex: 0, // 当前滚动条位置 （取整）
scrollTops: 0,
open:'',
currentIndex: 0, // 当前分类下标
conData: this.data, // 装修数据
showContent: true, // 是否展示内容
};
},
watch: {
data: function (val) {
this.conData = val;
},
conData: function (val) {
this.$emit("content", val);
},
},
methods: {
handleScrollx(){
});
const emit = defineEmits(['content']);
const router = useRouter();
const obtain = ref(null);
const screenHeight = ref(document.body.clientHeight);
const scrollHieght = ref(0);
const topSearchShow = ref(true); //展示 导航条
const topIndex = ref(0); // 当前滚动条位置 （取整）
const scrollTops = ref(0);
const open = ref('');
const currentIndex = ref(0); // 当前分类下标
const conData = ref(props.data); // 装修数据
const showContent = ref(true); // 是否展示内容
watch(
() => props.data,
(val) => {
conData.value = val;
}
);
watch(conData, (val) => {
emit('content', val);
});
function handleScrollx() {
// console.log('滚动高度',window.pageYOffset) // 获取滚动条的高度
// console.log(this.$refs.obtain.getBoundingClientRect().top) //获取到距离顶部的距离
// this.scrollHieght = Number(window.pageYOffset);//获取到距离顶部的距离
// this.scrollTops = Number(this.$refs.obtain.getBoundingClientRect().top); // 获取到距离顶部的距离
// this.topSearchShow = true; // 展示图钉
// if(this.scrollTops < -660){ // 超过隐藏
// this.topSearchShow = false;
// console.log(obtain.value.getBoundingClientRect().top) //获取到距离顶部的距离
// scrollHieght.value = Number(window.pageYOffset);//获取到距离顶部的距离
// scrollTops.value = Number(obtain.value.getBoundingClientRect().top); // 获取到距离顶部的距离
// topSearchShow.value = true; // 展示图钉
// if(scrollTops.value < -660){ // 超过隐藏
// topSearchShow.value = false;
// }
},
toguid(path,id){
var path =path;
}
function toguid(path, id) {
var path = path;
var Id = id;
localStorage.setItem('toId',Id);
this.$router.push(path);
},
change(status){ //获取是否获取到图钉
this.open = status
},
gotoDemo(){ // 跳转到demo的位置
if(this.open){ // 获取到图钉之后在跳转当前位置
localStorage.setItem('toId', Id);
router.push(path);
}
function change(status) { //获取是否获取到图钉
open.value = status
}
function gotoDemo() { // 跳转到demo的位置
if (open.value) { // 获取到图钉之后在跳转当前位置
document.querySelector("#demo").scrollIntoView(true);
}
//scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素
},
changeCurr(index) {
}
function changeCurr(index) {
// 选择分类
this.currentIndex = index;
},
},
};
currentIndex.value = index;
}
onMounted(() => {
window.addEventListener('scroll', handleScrollx, true)
});
</script>
<style lang="scss" scoped>
.not-enough {

20
buyer/src/components/indexDecorate/modelList/Recommend.vue
View File

@@ -58,22 +58,18 @@
</div>
</div>
</template>
<script>
export default {
props: {
<script setup>
import { ref } from 'vue';
const props = defineProps({
data: {
type: Object,
default: () => ({})
}
},
data () {
return {
msgLeft: this.data.options.contentLeft, // 左侧数据
msgRight: this.data.options.contentRight // 右侧数据
};
},
methods: {}
};
});
const msgLeft = ref(props.data.options.contentLeft); // 左侧数据
const msgRight = ref(props.data.options.contentRight); // 右侧数据
</script>
<style lang="scss" scoped>
.recommend {

143
buyer/src/components/indexDecorate/modelList/Seckill.vue
View File

@@ -29,94 +29,97 @@
</div>
</div>
</template>
<script>
export default {
props: {
<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
const props = defineProps({
data: Object,
},
data() {
return {
list: [],
goodsList: [],
actStatus: 0,
actName: "限时秒杀",
currIndex: 0,
currHour: "00",
diffSeconds: 0,
hours: 0,
minutes: 0,
seconds: 0,
interval: null,
};
},
watch: {
currIndex(val) {
clearInterval(this.interval);
this.interval = null;
this.countDown(val);
this.goodsList = this.list[val]?.seckillGoodsList || [];
},
diffSeconds(val) {
const hours = Math.floor(val / 3600);
const minutes = Math.floor(val / 60) % 60;
const seconds = val % 60;
this.hours = filteTime(hours);
this.minutes = filteTime(minutes);
this.seconds = filteTime(seconds);
});
const router = useRouter();
const list = ref([]);
const goodsList = ref([]);
const actStatus = ref(0);
const actName = ref("限时秒杀");
const currIndex = ref(0);
const currHour = ref("00");
const diffSeconds = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
const interval = ref(null);
watch(currIndex, (val) => {
clearInterval(interval.value);
interval.value = null;
countDown(val);
goodsList.value = list.value[val]?.seckillGoodsList || [];
});
watch(diffSeconds, (val) => {
const h = Math.floor(val / 3600);
const m = Math.floor(val / 60) % 60;
const s = val % 60;
hours.value = filteTime(h);
minutes.value = filteTime(m);
seconds.value = filteTime(s);
if (val <= 0) {
clearInterval(this.interval);
this.interval = null;
clearInterval(interval.value);
interval.value = null;
}
function filteTime(time) {
return time < 10 ? "0" + time : time;
}
},
},
beforeUnmount() {
clearInterval(this.interval);
},
mounted() {
this.getListByDay();
},
methods: {
goToSeckill() {
this.$router.push("/seckill");
},
countDown(currIndex) {
});
onBeforeUnmount(() => {
clearInterval(interval.value);
});
onMounted(() => {
getListByDay();
});
function goToSeckill() {
router.push("/seckill");
}
function countDown(index) {
const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
const currTime = new Date().getTime();
let actTime = 0;
const nowHour = new Date().getHours();
if (this.list[currIndex].timeLine > nowHour) {
this.actStatus = 0;
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
} else if (this.list[currIndex].timeLine <= nowHour) {
this.actStatus = 1;
if (currIndex === this.list.length - 1) {
if (list.value[index].timeLine > nowHour) {
actStatus.value = 0;
actTime = zeroTime + list.value[index].timeLine * 3600 * 1000;
} else if (list.value[index].timeLine <= nowHour) {
actStatus.value = 1;
if (index === list.value.length - 1) {
actTime = zeroTime + 24 * 3600 * 1000;
} else {
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
actTime = zeroTime + list.value[index + 1].timeLine * 3600 * 1000;
}
}
this.currHour = this.list[this.currIndex].timeLine;
this.diffSeconds = Math.floor((actTime - currTime) / 1000);
this.interval = setInterval(() => {
this.diffSeconds--;
currHour.value = list.value[currIndex.value].timeLine;
diffSeconds.value = Math.floor((actTime - currTime) / 1000);
interval.value = setInterval(() => {
diffSeconds.value--;
}, 1000);
},
getListByDay() {
this.list = this.data?.options?.list || [];
if (!this.list.length) {
this.goodsList = [];
}
function getListByDay() {
list.value = props.data?.options?.list || [];
if (!list.value.length) {
goodsList.value = [];
return;
}
this.goodsList = this.list[0]?.seckillGoodsList || [];
if (this.goodsList.length) {
this.countDown(this.currIndex);
goodsList.value = list.value[0]?.seckillGoodsList || [];
if (goodsList.value.length) {
countDown(currIndex.value);
}
},
},
};
}
</script>
<style lang="scss" scoped>
.seckill {

21
buyer/src/components/indexDecorate/modelList/forYour.vue
View File

@@ -44,24 +44,19 @@
</div>
</template>
<script>
export default {
name: "forYour",
data() {
return {
current: "",
};
},
props: {
<script setup>
import { ref } from 'vue'
defineOptions({ name: 'forYour' })
defineProps({
data: {
type: Object,
default: () => ({}),
},
},
})
mounted() {},
methods: {},
};
const current = ref('')
</script>
<style scoped lang="scss">

39
buyer/src/components/indexDecorate/modelList/goodsAndType.vue
View File

@@ -43,31 +43,28 @@
</div>
</template>
<script>
export default {
name: "goods",
props: {
<script setup>
import { onMounted, ref } from "vue";
defineOptions({ name: "goods" });
const props = defineProps({
paramData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
current: "",
};
},
watch: {},
mounted() {
this.current = this.paramData.options.labels[0].___index;
},
methods: {
// 筛选出当前分类下的商品
handleClickLabel(val, index) {
this.current = index;
},
},
};
});
const current = ref("");
onMounted(() => {
current.value = props.paramData.options.labels[0].___index;
});
// 筛选出当前分类下的商品
function handleClickLabel(val, index) {
current.value = index;
}
</script>
<style scoped lang="scss">

23
buyer/src/components/indexDecorate/modelList/mixModel.vue
View File

@@ -11,29 +11,18 @@
</div>
</template>
<script>
<script setup>
import left from './mixs/mix-goods'
import right from './mixs/mix-brand'
export default {
name: "mixModel",
data() {
return {}
},
props: {
defineOptions({ name: "mixModel" });
defineProps({
data: {
type: Object,
default: () => ({})
}
},
components: {
left,
right
},
mounted() {
},
methods: {}
}
})
</script>
<style scoped lang="scss">

12
buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
View File

@@ -25,19 +25,17 @@
</div>
</template>
<script>
<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
export default {
name: "mix-brand",
components: { ArrowRight },
props: {
defineOptions({ name: "mix-brand" });
defineProps({
data: {
type: Object,
default: () => ({}),
},
},
};
});
</script>
<style scoped lang="scss">

11
buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
View File

@@ -29,16 +29,15 @@
</div>
</template>
<script>
export default {
name: "mix-goods",
props: {
<script setup>
defineOptions({ name: "mix-goods" });
defineProps({
data: {
type: Object,
default: () => ({}),
},
},
};
});
</script>
<style scoped lang="scss">

17
buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue
View File

@@ -11,22 +11,15 @@
</div>
</template>
<script>
export default {
name: "oneRowThreeColumns",
props: {
<script setup>
defineOptions({ name: "oneRowThreeColumns" });
defineProps({
data: {
type: Object,
default: () => ({})
}
},
data () {
return {
};
},
methods: {}
}
});
</script>
<style scoped lang="scss">

43
buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue
View File

@@ -21,35 +21,32 @@
</div>
</template>
<script>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { openLink } from "@/utils/buyerLogin";
export default {
name: "onlyGoodsList",
props: {
defineOptions({ name: "onlyGoodsList" });
defineProps({
data: {
type: Object,
default: () => ({}),
},
},
data() {
return {
flag:false,
tabIndex:0,
current: 0,
showModal: false,
selected: {}, // 已选数据
picModelFlag: false,
};
},
mounted(){
});
},
methods: {
handleClick(val){
this.linkTo(val.url)
},
},
};
const router = useRouter();
const flag = ref(false);
const tabIndex = ref(0);
const current = ref(0);
const showModal = ref(false);
const selected = ref({}); // 已选数据
const picModelFlag = ref(false);
function handleClick(val) {
openLink(val.url, router);
}
</script>
<style scoped lang="scss">

181
buyer/src/components/invoiceModal/index.vue
View File

@@ -5,7 +5,7 @@
<span>发票信息</span>
</p></template>
<div class="nav-content">
<el-form :model="invoiceForm" ref="form" label-position="left" :rules="formRules" label-width="118px">
<el-form :model="invoiceForm" ref="formRef" label-position="left" :rules="formRules" label-width="118px">
<el-form-item label="发票类型">
<el-radio-group v-model="invoice" type="button" button-style="solid" @change="onInvoiceKindChange">
<el-radio :label="1">电子普通发票</el-radio>
@@ -86,19 +86,24 @@
</div></el-dialog>
</div>
</template>
<script>
<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { receiptSelect } from '@/api/cart.js';
import { mobile, email } from '@/plugins/RegExp.js';
export default {
name: 'invoiceModal',
emits: ['change'],
data () {
return {
invoice: 1, // 1 电子普通发票 2 增值税专用发票
invoiceAvailable: false,
loading: false,
invoiceForm: {
defineOptions({ name: 'invoiceModal' });
const props = defineProps(['invoiceData']);
const emit = defineEmits(['change']);
const route = useRoute();
const invoice = ref(1); // 1 电子普通发票 2 增值税专用发票
const invoiceAvailable = ref(false);
const loading = ref(false);
const invoiceForm = ref({
receiptTitle: '',
personalName: '',
companyName: '',
@@ -110,13 +115,12 @@ export default {
companyPhone: '',
bankName: '',
bankAccount: ''
},
type: 1
};
},
props: ['invoiceData'],
computed: {
formRules () {
});
const type = ref(1);
const formRef = ref(null);
const formRules = computed(() => {
const receiptPhoneRules = [
{ required: true, message: '请填写收票人手机', trigger: 'blur' },
{ pattern: mobile, message: '请填写正确的手机号码', trigger: 'blur' }
@@ -140,7 +144,7 @@ export default {
}
];
if (this.invoice === 2) {
if (invoice.value === 2) {
return {
companyName: [{ required: true, message: '请填写单位名称', trigger: 'blur' }],
taxpayerId: [{ required: true, message: '请填写纳税人识别号', trigger: 'blur' }],
@@ -157,76 +161,71 @@ export default {
receiptPhone: receiptPhoneRules,
receiptEmail: receiptEmailRules
};
if (this.type === 1) {
if (type.value === 1) {
rules.personalName = [{ required: true, message: '请填写个人名称', trigger: 'blur' }];
} else {
rules.companyName = [{ required: true, message: '请填写单位名称', trigger: 'blur' }];
rules.taxpayerId = [{ required: true, message: '请填写纳税人识别号', trigger: 'blur' }];
}
return rules;
}
},
watch: {
invoiceData: {
handler (val) {
});
watch(() => props.invoiceData, (val) => {
if (!val) return;
this.invoiceForm = { ...this.invoiceForm, ...val };
if (!this.invoiceForm.receiptPhone) this.invoiceForm.receiptPhone = '';
if (!this.invoiceForm.receiptEmail) this.invoiceForm.receiptEmail = '';
if (!this.invoiceForm.receiptContent) this.invoiceForm.receiptContent = '商品明细';
if (!this.invoiceForm.companyAddress) this.invoiceForm.companyAddress = '';
if (!this.invoiceForm.companyPhone) this.invoiceForm.companyPhone = '';
if (!this.invoiceForm.bankName) this.invoiceForm.bankName = '';
if (!this.invoiceForm.bankAccount) this.invoiceForm.bankAccount = '';
if (!this.invoiceForm.personalName) this.invoiceForm.personalName = '';
if (!this.invoiceForm.companyName) this.invoiceForm.companyName = '';
invoiceForm.value = { ...invoiceForm.value, ...val };
if (!invoiceForm.value.receiptPhone) invoiceForm.value.receiptPhone = '';
if (!invoiceForm.value.receiptEmail) invoiceForm.value.receiptEmail = '';
if (!invoiceForm.value.receiptContent) invoiceForm.value.receiptContent = '商品明细';
if (!invoiceForm.value.companyAddress) invoiceForm.value.companyAddress = '';
if (!invoiceForm.value.companyPhone) invoiceForm.value.companyPhone = '';
if (!invoiceForm.value.bankName) invoiceForm.value.bankName = '';
if (!invoiceForm.value.bankAccount) invoiceForm.value.bankAccount = '';
if (!invoiceForm.value.personalName) invoiceForm.value.personalName = '';
if (!invoiceForm.value.companyName) invoiceForm.value.companyName = '';
const rt = val.receiptType;
if (rt === 2 || rt === '2' || val.invoiceKind === 'VAT_SPECIAL') {
this.invoice = 2;
this.type = 2;
invoice.value = 2;
type.value = 2;
} else {
this.invoice = 1;
if (val.taxpayerId) this.type = 2;
else this.type = 1;
invoice.value = 1;
if (val.taxpayerId) type.value = 2;
else type.value = 1;
}
// 兼容后端 receiptTitle 存「个人/单位」，实际名称在 personalName/companyName；旧数据名称可能只在 receiptTitle
const titleAsName = (t) => (t && t !== '个人' && t !== '单位' ? t : '');
if (this.invoice === 2) {
this.invoiceForm.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
} else if (this.type === 2) {
this.invoiceForm.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
this.invoiceForm.personalName = val.personalName || '';
if (invoice.value === 2) {
invoiceForm.value.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
} else if (type.value === 2) {
invoiceForm.value.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
invoiceForm.value.personalName = val.personalName || '';
} else {
this.invoiceForm.personalName = val.personalName || titleAsName(val.receiptTitle) || '';
this.invoiceForm.companyName = val.companyName || '';
invoiceForm.value.personalName = val.personalName || titleAsName(val.receiptTitle) || '';
invoiceForm.value.companyName = val.companyName || '';
}
if (this.invoice === 1) {
this.invoiceForm.companyAddress = '';
this.invoiceForm.companyPhone = '';
this.invoiceForm.bankName = '';
this.invoiceForm.bankAccount = '';
if (invoice.value === 1) {
invoiceForm.value.companyAddress = '';
invoiceForm.value.companyPhone = '';
invoiceForm.value.bankName = '';
invoiceForm.value.bankAccount = '';
}
if (this.invoice === 2) {
this.invoiceForm.personalName = '';
if (invoice.value === 2) {
invoiceForm.value.personalName = '';
}
},
deep: true,
immediate: true
}, { deep: true, immediate: true });
function onHeaderTypeChange (val) {
if (invoice.value === 1 && val === 1 && invoiceForm.value.personalName === '个人') {
invoiceForm.value.personalName = '';
}
},
methods: {
onHeaderTypeChange (val) {
if (this.invoice === 1 && val === 1 && this.invoiceForm.personalName === '个人') {
this.invoiceForm.personalName = '';
}
this.$nextTick(() => {
if (this.$refs.form) this.$refs.form.clearValidate();
nextTick(() => {
if (formRef.value) formRef.value.clearValidate();
});
},
onInvoiceKindChange (val) {
this.type = val === 2 ? 2 : 1;
this.invoiceForm = {
}
function onInvoiceKindChange (val) {
type.value = val === 2 ? 2 : 1;
invoiceForm.value = {
receiptTitle: '',
personalName: '',
companyName: '',
@@ -239,57 +238,57 @@ export default {
bankName: '',
bankAccount: ''
};
this.$nextTick(() => {
if (this.$refs.form) this.$refs.form.clearValidate();
nextTick(() => {
if (formRef.value) formRef.value.clearValidate();
});
},
}
async save () {
if (this.invoice === 2) {
this.invoiceForm.receiptContent = '商品明细';
async function save () {
if (invoice.value === 2) {
invoiceForm.value.receiptContent = '商品明细';
}
return await new Promise(resolve => {
this.$refs.form.validate(valid => resolve(valid));
formRef.value.validate(valid => resolve(valid));
});
},
}
async submit () {
if (!await this.save()) return;
this.loading = true;
const raw = JSON.parse(JSON.stringify(this.invoiceForm));
if (this.invoice === 1) {
async function submit () {
if (!await save()) return;
loading.value = true;
const raw = JSON.parse(JSON.stringify(invoiceForm.value));
if (invoice.value === 1) {
delete raw.companyAddress;
delete raw.companyPhone;
delete raw.bankName;
delete raw.bankAccount;
delete raw.invoiceAddress;
if (this.type === 1) {
if (type.value === 1) {
delete raw.taxpayerId;
}
} else {
delete raw.personalName;
}
const isCompanyTitle = this.invoice === 2 || this.type === 2;
const isCompanyTitle = invoice.value === 2 || type.value === 2;
const titleName = isCompanyTitle
? (raw.companyName != null ? String(raw.companyName).trim() : '')
: (raw.personalName != null ? String(raw.personalName).trim() : '');
const submit = {
way: this.$route.query.way,
way: route.query.way,
...raw,
receiptType: this.invoice,
receiptType: invoice.value,
receiptTitle: isCompanyTitle ? '单位' : '个人',
personalName: isCompanyTitle ? '' : titleName,
companyName: isCompanyTitle ? titleName : ''
};
let receipt = await receiptSelect(submit);
if (receipt.success) {
this.$emit('change', true);
emit('change', true);
}
this.loading = false;
}
}
};
loading.value = false;
}
defineExpose({ invoiceAvailable });
</script>
<style lang="scss" scoped>
.inv-type {

121
buyer/src/components/map/index.vue
View File

@@ -18,58 +18,56 @@
</div>
</div>
</template>
<script>
<script setup>
import { onMounted, ref, watch } from "vue";
import { Message } from "@/utils/message";
import AMapLoader from "@amap/amap-jsapi-loader";
import { handleRegion } from "@/api/address.js";
import config from "@/config/index";
export default {
name: "map",
data() {
return {
config,
showMap: false, // 地图显隐
mapSearch: "", // 地图搜索
map: null, // 初始化地图
autoComplete: null, // 初始化搜索方法
geocoder: null, // 初始化地理、坐标转化
positionPicker: null, // 地图拖拽选点
tips: [], //搜索关键字列表
addrContent: {}, // 回显地址信息
loading: false, // 加载状态
};
},
watch: {
mapSearch: function (val) {
this.searchOfMap(val);
},
},
methods: {
ok() {
defineOptions({ name: "map" });
if (this.addrContent && this.addrContent.regeocode) {
const emit = defineEmits(["getAddress"]);
const showMap = ref(false); // 地图显隐
const mapSearch = ref(""); // 地图搜索
let map = null; // 初始化地图
let autoComplete = null; // 初始化搜索方法
let geocoder = null; // 初始化地理、坐标转化
let positionPicker = null; // 地图拖拽选点
const tips = ref([]); //搜索关键字列表
const addrContent = ref({}); // 回显地址信息
const loading = ref(false); // 加载状态
watch(mapSearch, function (val) {
searchOfMap(val);
});
function ok() {
if (addrContent.value && addrContent.value.regeocode) {
const params = {
cityCode: this.addrContent.regeocode.addressComponent.citycode,
townName: this.addrContent.regeocode.addressComponent.township,
cityCode: addrContent.value.regeocode.addressComponent.citycode,
townName: addrContent.value.regeocode.addressComponent.township,
};
handleRegion(params).then((res) => {
if (res.success) {
this.addrContent.addr = res.result.name.replace(/,/g, " ");
this.addrContent.addrId = res.result.id;
this.loading = false;
addrContent.value.addr = res.result.name.replace(/,/g, " ");
addrContent.value.addrId = res.result.id;
loading.value = false;
this.$emit("getAddress", this.addrContent);
emit("getAddress", addrContent.value);
}
});
} else {
Message.error('未获取到坐标信息！请查看高德API配置是否正确')
}
},
init() {
}
function init() {
AMapLoader.load({
key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
key: config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.ToolBar",
@@ -85,68 +83,67 @@ export default {
},
})
.then((AMap) => {
let that = this;
this.map = new AMap.Map("map-container", {
map = new AMap.Map("map-container", {
zoom: 12,
});
that.map.addControl(new AMap.ToolBar());
that.map.addControl(new AMap.Autocomplete());
that.map.addControl(new AMap.PlaceSearch());
that.map.addControl(new AMap.Geocoder());
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Autocomplete());
map.addControl(new AMap.PlaceSearch());
map.addControl(new AMap.Geocoder());
// 实例化Autocomplete
let autoOptions = {
city: "全国",
};
that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
that.geocoder = new AMap.Geocoder(autoOptions);
autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
geocoder = new AMap.Geocoder(autoOptions);
that.positionPicker = new AMapUI.PositionPicker({
positionPicker = new AMapUI.PositionPicker({
// 拖拽选点
mode: "dragMap",
map: that.map,
map: map,
});
that.positionPicker.start();
positionPicker.start();
/**
*
* 所有回显数据，都在positionResult里面
* 需要字段可以查找
*
*/
that.positionPicker.on("success", function (positionResult) {
that.addrContent = positionResult;
positionPicker.on("success", function (positionResult) {
addrContent.value = positionResult;
});
})
.catch((e) => {
console.warn('地图组件加载失败', e);
});
},
searchOfMap(val) {
}
function searchOfMap(val) {
// 地图搜索
let that = this;
this.autoComplete.search(val, function (status, result) {
autoComplete.search(val, function (status, result) {
// 搜索成功时，result即是对应的匹配数据
if (status == "complete" && result.info == "OK") {
that.tips = result.tips;
tips.value = result.tips;
} else {
that.tips = [];
tips.value = [];
}
});
},
selectAddr(location) {
}
function selectAddr(location) {
// 选择坐标
if (!location) {
Message.warning("请选择正确点位");
return false;
}
const lnglat = [location.lng, location.lat];
this.positionPicker.start(lnglat);
},
},
mounted() {
this.init();
},
};
positionPicker.start(lnglat);
}
onMounted(() => {
init();
});
</script>
<style lang="scss" scoped>
#map-container {

99
buyer/src/components/map/multiple-map.vue
View File

@@ -26,93 +26,90 @@
</div></el-dialog>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { Message } from "@/utils/message";
import { aMapSwitch } from '@/config/index'
import mapping from "@/components/map/index.vue";
import * as API_Setup from "@/api/common.js";
export default {
components: { mapping },
data() {
return {
aMapSwitch,
enableMap: false,
mapDefault: "select",
data: {
const emit = defineEmits(['callback'])
const enableMap = ref(false)
const mapDefault = ref("select")
const data = reactive({
province: [], //省
city: [], //市
area: [], //区
street: [], //街道
},
chiosend: [],
})
const chiosend = ref([])
};
},
mounted() {
onMounted(() => {
chiosend.value = new Array(4).fill("");
})
this.chiosend = new Array(4).fill("");
function open() {
enableMap.value = true
init({ id: 0 }, 'province');
}
},
methods: {
open() {
this.enableMap = true
this.init({ id: 0 }, 'province');
},
changeMap(val) {
this.mapDefault = val
defineExpose({ open })
function changeMap(val) {
mapDefault.value = val
}
},
init(val, level = 'province', index) {
function init(val, level = 'province', index) {
if (level == 0) {
// 说明选择到了街道，将街道id存入数组
this.chiosend.splice(3, 1, val);
chiosend.value.splice(3, 1, val);
}
else {
API_Setup.getRegion(val.id).then((res) => {
if (res.result.length && val.id !== 0) {
this.chiosend[index] = val
chiosend.value[index] = val
}
else if(!res.result.length){
this.chiosend[index] = val
else if (!res.result.length) {
chiosend.value[index] = val
}
this.data[level] = res.result;
data[level] = res.result;
if (level == 'city') {
this.data.area = []
this.data.street = []
this.chiosend.splice(1, 3, "","","");
data.area = []
data.street = []
chiosend.value.splice(1, 3, "", "", "");
}
if (level == 'area') {
this.data.street = []
this.chiosend.splice(2, 2, "","");
data.street = []
chiosend.value.splice(2, 2, "", "");
}
if (level == 'street') {
this.chiosend.splice(3, 1, "");
chiosend.value.splice(3, 1, "");
}
});
}
},
getAddress(center) {
this.$emit('callback', {
type: this.mapDefault,
}
function getAddress(center) {
emit('callback', {
type: mapDefault.value,
data: center
})
this.enableMap = false;
},
// 选择完成
finished() {
if(!this.chiosend[0]){
enableMap.value = false;
}
// 选择完成
function finished() {
if (!chiosend.value[0]) {
Message.error("请选择地址")
return
}
const params = this.chiosend.filter((item) => item!=="" && item.value !== "");
this.enableMap = false;
this.$emit('callback', {
type: this.mapDefault,
const params = chiosend.value.filter((item) => item !== "" && item.value !== "");
enableMap.value = false;
emit('callback', {
type: mapDefault.value,
data: params
})
},
},
}
</script>

100
buyer/src/components/map/region.vue
View File

@@ -9,28 +9,27 @@
></el-cascader>
</div>
</template>
<script>
import {getRegion} from '@/api/common.js';
export default {
data () {
return {
data: [], // 地区数据
addr: [] // 已选数据
};
},
props: ['addressId'],
mounted () {},
methods: {
change (val, selectedData) { // 选择地区
<script setup>
import { ref, watch } from 'vue';
import { getRegion } from '@/api/common.js';
const props = defineProps(['addressId']);
const emit = defineEmits(['selected']);
const data = ref([]); // 地区数据
const addr = ref([]); // 已选数据
function change (val, selectedData) { // 选择地区
/**
* @returns [regionId,region]
*/
this.$emit('selected', [
emit('selected', [
val,
selectedData[selectedData.length - 1].__label.split('/')
]);
},
loadData (item, callback) { // 加载数据
}
function loadData (item, callback) { // 加载数据
item.loading = true;
getRegion(item.value).then((res) => {
if (res.result.length <= 0) {
@@ -58,11 +57,12 @@ export default {
callback();
}
});
},
async init () { // 初始化地图数据
let data = await getRegion(0);
}
async function init () { // 初始化地图数据
let res = await getRegion(0);
let arr = [];
data.result.forEach((item) => {
res.result.forEach((item) => {
let obj;
// 台湾省做处理
if (item.name === '台湾省') {
@@ -80,19 +80,20 @@ export default {
}
arr.push(obj);
});
this.data = arr;
data.value = arr;
console.warn('init');
},
async reviewData () {
}
async function reviewData () {
// 数据回显
let addr = JSON.parse(JSON.stringify(this.addressId.split(',')));
let length = addr.length;
let data = await getRegion(0);
let addrArr = JSON.parse(JSON.stringify(props.addressId.split(',')));
let length = addrArr.length;
let res = await getRegion(0);
let arr0 = [];
let arr1 = [];
let arr2 = [];
// 第一级数据
data.result.forEach((item) => {
res.result.forEach((item) => {
let obj;
// 台湾省做处理
if (item.name === '台湾省') {
@@ -112,36 +113,37 @@ export default {
});
// 根据选择的数据来加载数据列表
if (length > 0) {
let children = await getRegion(addr[0]);
children = this.handleData(children.result);
let children = await getRegion(addrArr[0]);
children = handleData(children.result);
arr0.forEach((e) => {
if (e.value === addr[0]) {
if (e.value === addrArr[0]) {
e.children = arr1 = children;
}
});
}
if (length > 1) {
let children = await getRegion(addr[1]);
children = this.handleData(children.result);
let children = await getRegion(addrArr[1]);
children = handleData(children.result);
arr1.forEach((e) => {
if (e.value === addr[1]) {
if (e.value === addrArr[1]) {
e.children = arr2 = children;
}
});
}
if (length > 2) {
let children = await getRegion(addr[2]);
children = this.handleData(children.result);
let children = await getRegion(addrArr[2]);
children = handleData(children.result);
arr2.forEach((e) => {
if (e.value === addr[2]) {
if (e.value === addrArr[2]) {
e.children = children;
}
});
}
this.data = arr0;
this.addr = addr;
},
handleData (data) {
data.value = arr0;
addr.value = addrArr;
}
function handleData (data) {
// 处理接口数据
let item = [];
data.forEach((child) => {
@@ -162,21 +164,15 @@ export default {
}
});
return item;
}
},
watch: {
addressId: {
handler: function (v) {
}
watch(() => props.addressId, (v) => {
if (v) {
this.reviewData();
reviewData();
} else {
this.init();
init();
}
},
immediate: true
}
}
};
}, { immediate: true });
</script>
<style scoped lang="scss">
</style>

77
buyer/src/components/mixes/talkIm.vue
View File

@@ -1,77 +0,0 @@
<template>
<div></div>
</template>
<script>
import { Modal } from "@/utils/message";
import { getIMDetail } from "@/api/common";
import Storage from "@/plugins/storage";
import { getMemberMsg } from "@/api/login";
export default {
data() {
return {
Storage,
IMLink: "",
};
},
methods: {
promptLogin() {
Modal.confirm({
title: "温馨提示",
content: "请登录后执行此操作",
okText: "立即登录",
cancelText: "取消",
onOk: () => {
this.$router.push({
path: "/login",
query: {
rePath: this.$route.path,
query: JSON.stringify(this.$route.query || {}),
},
});
},
});
},
// 跳转im客服
async IMService(id, goodsId, skuId) {
if (!Storage.getItem("accessToken")) {
this.promptLogin();
return;
}
try {
await this.getIMDetailMethods();
const userInfo = await getMemberMsg();
if (!userInfo.success) {
this.promptLogin();
return;
}
const accessToken = Storage.getItem("accessToken");
const storeId = id || this.storeMsg?.storeId;
const baseUrl = `${this.IMLink}?token=${accessToken}&id=${storeId}`;
if (goodsId && skuId) {
window.open(`${baseUrl}&goodsId=${goodsId}&skuId=${skuId}`);
} else {
window.open(baseUrl);
}
} catch {
// token 过期等场景由 request 拦截器处理；未登录时避免未捕获异常
if (!Storage.getItem("accessToken")) {
this.promptLogin();
}
}
},
// 获取im信息
async getIMDetailMethods() {
let res = await getIMDetail();
if (res.success) {
this.IMLink = res.result;
}
},
},
};
</script>
<style lang="scss" scoped></style>

115
buyer/src/components/nav/CateNav.vue
View File

@@ -90,14 +90,17 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getCategory } from "@/api/goods";
import storage from "@/plugins/storage.js";
import { ArrowRight } from "@element-plus/icons-vue";
export default {
components: { ArrowRight },
name: "GoodsListNav",
props: {
import { useAppStore } from "@/stores/app";
defineOptions({ name: "GoodsListNav" });
const props = defineProps({
showAlways: {
// 总是显示下拉分类
default: false,
@@ -122,53 +125,53 @@ export default {
default: false,
type: Boolean,
},
useClass:{
type:null,
default:''
}
useClass: {
type: null,
default: '',
},
data() {
return {
panel: false, // 二级分类展示
panelIndex: -1,
panelData: [], // 二级分类数据
showFirstList: false, // 始终展示一级列表
cateList: [], // 商品分类
};
},
computed: {
navList() {
// 导航列表
});
const router = useRouter();
const appStore = useAppStore();
const panel = ref(false); // 二级分类展示
const panelIndex = ref(-1);
const panelData = ref([]); // 二级分类数据
const showFirstList = ref(false); // 始终展示一级列表
const cateList = ref([]); // 商品分类
// 导航列表
const navList = computed(() => {
if (storage.getItem("navList")) {
return JSON.parse(storage.getItem("navList"));
}
return { list: [] };
},
},
methods: {
showFirstLists(){
this.showFirstList = true;
if(
});
function showFirstLists() {
showFirstList.value = true;
if (
localStorage.getItem("category") &&
localStorage.getItem("category_expiration_time")
) {
// this.getCate();
// 如果缓存过期，则获取最新的信息
if (new Date() > localStorage.getItem("category_expiration_time")) {
this.getCate();
getCate();
return;
}
this.cateList = JSON.parse(localStorage.getItem("category"));
cateList.value = JSON.parse(localStorage.getItem("category"));
// Message.info(cateList)
}
},
getCate() {
}
function getCate() {
// 获取分类数据
if (this.hover) return false;
if (props.hover) return false;
getCategory(0).then((res) => {
if (res.success) {
this.cateList = res.result;
this.$store.commit("SET_CATEGORY", res.result);
cateList.value = res.result;
appStore.setCategory(res.result);
// 过期时间
var expirationTime = new Date().setHours(new Date().getHours() + 1);
// 存放过期时间
@@ -179,19 +182,22 @@ export default {
}).catch((err) => {
console.warn('获取分类失败', err);
});
},
showDetail(index) {
}
function showDetail(index) {
// 展示全部分类
this.panel = true;
this.panelIndex = index;
this.panelData = this.cateList[index].children;
},
closePanel() {
this.showFirstList = false;
this.panel = false;
this.panelIndex = -1;
},
goGoodsList(id, secondId, firstId) {
panel.value = true;
panelIndex.value = index;
panelData.value = cateList.value[index].children;
}
function closePanel() {
showFirstList.value = false;
panel.value = false;
panelIndex.value = -1;
}
function goGoodsList(id, secondId, firstId) {
// 分类共有三级，传全部分类过去
const arr = [firstId, secondId, id];
if (!arr[1]) {
@@ -200,28 +206,27 @@ export default {
if (!arr[0]) {
arr.shift();
}
this.$router.push({
router.push({
path: "/goodsList",
query: { categoryId: arr.toString() },
});
},
},
mounted() {
}
onMounted(() => {
if (
localStorage.getItem("category") &&
localStorage.getItem("category_expiration_time")
) {
// 如果缓存过期，则获取最新的信息
if (new Date() > localStorage.getItem("category_expiration_time")) {
this.getCate();
getCate();
return;
}
this.cateList = JSON.parse(localStorage.getItem("category"));
cateList.value = JSON.parse(localStorage.getItem("category"));
} else {
this.getCate();
getCate();
}
},
};
});
</script>
<style scoped lang="scss">

279
buyer/src/components/nav/GoodsClassNav.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="item-class-show">
<div class="item-class-show" ref="rootEl">
<div class="head-bar">
<!-- 有商品分类展示商品分类 -->
<template v-if="$route.query.categoryId">
@@ -116,22 +116,29 @@
</div>
</template>
<script>
<script setup>
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowDown, ArrowRight, ArrowUp, Close } from '@element-plus/icons-vue';
import * as APIGoods from '@/api/goods';
export default {
components: { ArrowDown, ArrowRight, ArrowUp, Close },
name: 'GoodsClassNav',
data () {
return {
tabBar: {
import { useAppStore } from '@/stores/app';
defineOptions({ name: 'GoodsClassNav' });
const emit = defineEmits(['getParams']);
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const tabBar = ref({
name: '',
children: [],
first: null,
second: null
},
showTagCount: 5, // 展示的搜索项数量
tagsContent: [
});
const showTagCount = ref(5); // 展示的搜索项数量
const tagsContent = ref([
// 标签
{
key: '品牌',
@@ -139,28 +146,23 @@ export default {
show: true,
values: []
}
],
selectedItem: [], // 已选分类集合 顶部展示
brandIds: [], // 品牌id合集
params: {}, // 请求参数
rowOverflow: {} // 一行排不下时才显示更多
};
},
computed: {
cateList () { // 商品分类
return this.$store.state.category || []
}
},
watch: {
selectedItem: {
// 监听已选条件，来调用列表接口
handler (val) {
]);
const selectedItem = ref([]); // 已选分类集合 顶部展示
const brandIds = ref([]); // 品牌id合集
const params = reactive({}); // 请求参数
const rowOverflow = ref({}); // 一行排不下时才显示更多
const rootEl = ref(null); // 根元素，用于测量行溢出
const cateList = computed(() => appStore.category || []); // 商品分类
// 监听已选条件，来调用列表接口
watch(selectedItem, (val) => {
let classification = [];
this.params.brandId = ''
this.params.prop = ''
params.brandId = ''
params.prop = ''
val.forEach((item) => {
if (item.type === '品牌') {
this.params.brandId = this.brandIds.join('@');
params.brandId = brandIds.value.join('@');
} else {
const nameArr = item.name.split('、');
nameArr.forEach((name) => {
@@ -168,40 +170,36 @@ export default {
});
}
});
this.params.prop = classification.join('@');
this.getFilterList(this.params);
this.$emit('getParams', this.params);
},
deep: true
},
'$route': { // 监听路由
handler (val, oVal) {
if (this.$route.query.categoryId) {
let cateId = this.$route.query.categoryId.split(',')
Object.assign(this.params, this.$route.query)
this.params.categoryId = cateId[cateId.length - 1]
params.prop = classification.join('@');
getFilterList(params);
emit('getParams', params);
}, { deep: true });
// 监听路由
watch(() => route.query, () => {
if (route.query.categoryId) {
let cateId = route.query.categoryId.split(',')
Object.assign(params, route.query)
params.categoryId = cateId[cateId.length - 1]
} else {
Object.assign(this.params, this.$route.query)
Object.assign(params, route.query)
}
this.getFilterList(this.params)
this.getNav()
},
deep: true
}
},
methods: {
getNav () { // 获取商品分类，分类下展示
if (!this.$route.query.categoryId) return
if (!this.cateList.length) { // 商品分类存储在localstorage，接口未调用成功前再次刷新数据
getFilterList(params)
getNav()
}, { deep: true });
function getNav () { // 获取商品分类，分类下展示
if (!route.query.categoryId) return
if (!cateList.value.length) { // 商品分类存储在localstorage，接口未调用成功前再次刷新数据
setTimeout(() => {
this.getNav()
getNav()
}, 500)
return
}
const arr = this.$route.query.categoryId.split(',')
const source = this.cateList.find((e) => e.id === arr[0])
const arr = route.query.categoryId.split(',')
const source = cateList.value.find((e) => e.id === arr[0])
if (!source) return
const tabBar = {
const newTabBar = {
id: source.id,
name: source.name,
parentId: source.parentId,
@@ -210,152 +208,161 @@ export default {
second: null,
}
if (arr.length > 1) {
tabBar.first = tabBar.children.find((e) => e.id === arr[1]) || null
newTabBar.first = newTabBar.children.find((e) => e.id === arr[1]) || null
}
if (arr.length > 2 && tabBar.first && tabBar.first.children) {
tabBar.second = tabBar.first.children.find((e) => e.id === arr[2]) || null
if (arr.length > 2 && newTabBar.first && newTabBar.first.children) {
newTabBar.second = newTabBar.first.children.find((e) => e.id === arr[2]) || null
}
this.tabBar = tabBar
},
cateClick (item, index) { // 点选分类
tabBar.value = newTabBar
}
function cateClick (item, index) { // 点选分类
switch (index) {
case 1:
this.$router.push({
router.push({
path: '/goodsList',
query: {categoryId: item.id}
})
break;
case 2:
this.$router.push({
router.push({
path: '/goodsList',
query: {categoryId: [item.parentId, item.id].toString()}
})
break;
case 3:
this.$router.push({
router.push({
path: '/goodsList',
query: {categoryId: [this.tabBar.id, item.parentId, item.id].toString()}
query: {categoryId: [tabBar.value.id, item.parentId, item.id].toString()}
})
break;
}
},
isGroupSelected (index) {
const group = this.tagsContent[index];
}
function isGroupSelected (index) {
const group = tagsContent.value[index];
if (!group) return false;
return this.selectedItem.some((selected) => selected.type === group.key);
},
selectAll (index) {
const group = this.tagsContent[index];
return selectedItem.value.some((selected) => selected.type === group.key);
}
function selectAll (index) {
const group = tagsContent.value[index];
if (!group) return;
const selectedIndex = this.selectedItem.findIndex((selected) => selected.type === group.key);
const selectedIndex = selectedItem.value.findIndex((selected) => selected.type === group.key);
if (selectedIndex === -1) return;
this.cancelSelected(this.selectedItem[selectedIndex], selectedIndex);
},
selectBrand (item, index) {
const type = this.tagsContent[index].key;
if (this.selectedItem.some((selected) => selected.type === type)) {
cancelSelected(selectedItem.value[selectedIndex], selectedIndex);
}
function selectBrand (item, index) {
const type = tagsContent.value[index].key;
if (selectedItem.value.some((selected) => selected.type === type)) {
return;
}
this.selectedItem.push({
selectedItem.value.push({
type,
name: item
});
this.tagsContent[index].show = false;
tagsContent.value[index].show = false;
if (index === 0) {
this.appendBrandIdsByNames([item]);
appendBrandIdsByNames([item]);
}
},
}
cancelSelected (item, index) {
function cancelSelected (item, index) {
// 顶部栏 取消已选中的项
this.selectedItem.splice(index, 1);
selectedItem.value.splice(index, 1);
this.tagsContent.forEach((tag, index) => {
tagsContent.value.forEach((tag, index) => {
if (tag.key === item.type) {
tag.show = true;
tag.more = false;
}
});
if (item.type === '品牌') {
this.brandIds = [];
brandIds.value = [];
}
},
moreBrand (index) {
}
function moreBrand (index) {
// 更多按钮
const flag = !this.tagsContent[index].more
this.tagsContent[index]['more'] = flag
this.$nextTick(() => this.measureRows())
},
measureRows () {
if (!this.$el) return
const flag = !tagsContent.value[index].more
tagsContent.value[index]['more'] = flag
nextTick(() => measureRows())
}
function measureRows () {
if (!rootEl.value) return
const next = {}
const brand = this.$el.querySelector('.brand ul')
const brand = rootEl.value.querySelector('.brand ul')
if (brand && brand.offsetParent) {
next[0] = !!(this.tagsContent[0] && this.tagsContent[0].more) || brand.scrollHeight > brand.clientHeight + 1
next[0] = !!(tagsContent.value[0] && tagsContent.value[0].more) || brand.scrollHeight > brand.clientHeight + 1
}
this.$el.querySelectorAll('.other .list').forEach((list) => {
rootEl.value.querySelectorAll('.other .list').forEach((list) => {
if (!list.offsetParent) return
const index = Number(list.dataset.index)
const tag = this.tagsContent[index]
const tag = tagsContent.value[index]
next[index] = !!(tag && tag.more) || list.scrollHeight > list.clientHeight + 1
})
const prev = this.rowOverflow
const prev = rowOverflow.value
const keys = new Set([...Object.keys(prev), ...Object.keys(next)])
const changed = [...keys].some((key) => !!prev[key] !== !!next[key])
if (changed) this.rowOverflow = next
},
appendBrandIdsByNames (names) {
if (changed) rowOverflow.value = next
}
function appendBrandIdsByNames (names) {
const selectedNames = names || [];
const brands = this.tagsContent[0] && this.tagsContent[0].values ? this.tagsContent[0].values : [];
const brands = tagsContent.value[0] && tagsContent.value[0].values ? tagsContent.value[0].values : [];
brands.forEach((val) => {
if (selectedNames.includes(val.name) && val.value && !this.brandIds.includes(val.value)) {
this.brandIds.push(val.value);
if (selectedNames.includes(val.name) && val.value && !brandIds.value.includes(val.value)) {
brandIds.value.push(val.value);
}
});
},
getFilterList (params) {
}
function getFilterList (params) {
// 筛选、分类 列表
APIGoods.filterList(params).then((res) => {
if (res.success) {
const data = res.result;
const hiddenKeys = new Set(this.selectedItem.map((item) => item.type));
this.tagsContent = [{
const hiddenKeys = new Set(selectedItem.value.map((item) => item.type));
tagsContent.value = [{
key: '品牌',
more: false,
show: !hiddenKeys.has('品牌'),
values: data.brands || []
}].concat(data.paramOptions || []);
this.tagsContent.forEach((item) => {
tagsContent.value.forEach((item) => {
item.show = !hiddenKeys.has(item.key);
item.more = false;
});
this.$nextTick(() => this.measureRows())
nextTick(() => measureRows())
}
});
},
// 展示更多搜索项
moreOptions () {
this.showTagCount = this.showTagCount === 5 ? 100 : 5
this.$nextTick(() => this.measureRows())
}
},
mounted () {
// 有分类id就根据id搜索
if (this.$route.query.categoryId) {
let cateId = this.$route.query.categoryId.split(',')
Object.assign(this.params, this.$route.query)
this.params.categoryId = cateId[cateId.length - 1]
} else {
Object.assign(this.params, this.$route.query)
}
this.getFilterList(this.params);
this.getNav();
window.addEventListener('resize', this.measureRows)
},
beforeUnmount () {
window.removeEventListener('resize', this.measureRows)
}
}
// 展示更多搜索项
function moreOptions () {
showTagCount.value = showTagCount.value === 5 ? 100 : 5
nextTick(() => measureRows())
}
onMounted(() => {
// 有分类id就根据id搜索
if (route.query.categoryId) {
let cateId = route.query.categoryId.split(',')
Object.assign(params, route.query)
params.categoryId = cateId[cateId.length - 1]
} else {
Object.assign(params, route.query)
}
getFilterList(params);
getNav();
window.addEventListener('resize', measureRows)
});
onBeforeUnmount(() => {
window.removeEventListener('resize', measureRows)
});
</script>
<style scoped lang="scss">

46
buyer/src/components/userCenter/Layout.vue
View File

@@ -27,10 +27,13 @@
</div>
</template>
<script>
export default {
name: "UserCenterLayout",
props: {
<script setup>
import { computed, useSlots } from "vue";
import { useRouter } from "vue-router";
defineOptions({ name: "UserCenterLayout" });
const props = defineProps({
title: {
type: String,
default: "",
@@ -51,25 +54,26 @@ export default {
type: [String, Object],
default: "",
},
},
emits: ["tab-change", "more"],
computed: {
showToolbar() {
return this.tabs.length || this.moreText || this.$slots.extra;
},
},
methods: {
handleMore() {
this.$emit("more");
if (!this.moreTo) return;
if (typeof this.moreTo === "string") {
this.$router.push(this.moreTo);
});
const emit = defineEmits(["tab-change", "more"]);
const router = useRouter();
const slots = useSlots();
const showToolbar = computed(() => {
return props.tabs.length || props.moreText || slots.extra;
});
function handleMore() {
emit("more");
if (!props.moreTo) return;
if (typeof props.moreTo === "string") {
router.push(props.moreTo);
} else {
this.$router.push(this.moreTo);
router.push(props.moreTo);
}
},
},
};
}
</script>
<style scoped lang="scss">

141
buyer/src/components/verify/index.vue
View File

@@ -14,117 +14,112 @@
</div>
</div>
</template>
<script>
<script setup>
import { ref, watch } from 'vue';
import { Message } from "@/utils/message";
import { Refresh, ArrowRight } from '@element-plus/icons-vue';
import { getVerifyImg, postVerifyImg } from './verify.js';
export default {
components: { Refresh, ArrowRight },
props: {
const props = defineProps({
// 传入数据，判断是登录、注册、修改密码
verifyType: {
defalut: 'LOGIN',
type: String
}
},
data () {
return {
show: false, // 验证码显隐
type: 'LOGIN', // 请求类型
data: { // 验证码数据
});
const emit = defineEmits(['change']);
const show = ref(false); // 验证码显隐
const type = ref('LOGIN'); // 请求类型
const data = ref({ // 验证码数据
backImage: '',
slidingImage: '',
originalHeight: 150,
originalWidth: 300,
sliderWidth: 60,
sliderHeight: 60
},
distance: 0, // 拼图移动距离
flag: false, // 判断滑块是否按下
downX: 0, // 鼠标按下位置
bgColor: '#04ad11', // 滑动背景颜色
verifyText: '拖动滑块解锁' // 文字提示
};
},
methods: {
// 鼠标按下事件，开始拖动滑块
mouseDown (e) {
this.downX = e.clientX;
this.flag = true;
},
// 鼠标移动事件，计算距离
mouseMove (e) {
if (this.flag) {
let offset = e.clientX - this.downX;
});
const distance = ref(0); // 拼图移动距离
const flag = ref(false); // 判断滑块是否按下
const downX = ref(0); // 鼠标按下位置
const bgColor = ref('#04ad11'); // 滑动背景颜色
const verifyText = ref('拖动滑块解锁'); // 文字提示
if (offset > this.data.originalWidth - 43) {
this.distance = this.data.originalWidth - 43;
// 鼠标按下事件，开始拖动滑块
function mouseDown (e) {
downX.value = e.clientX;
flag.value = true;
}
// 鼠标移动事件，计算距离
function mouseMove (e) {
if (flag.value) {
let offset = e.clientX - downX.value;
if (offset > data.value.originalWidth - 43) {
distance.value = data.value.originalWidth - 43;
} else if (offset < 0) {
this.distance = 0;
distance.value = 0;
} else {
this.distance = offset;
distance.value = offset;
}
}
},
// 鼠标抬起事件，验证是否正确
mouseUp () {
if (!this.flag) return false;
this.flag = false;
}
// 鼠标抬起事件，验证是否正确
function mouseUp () {
if (!flag.value) return false;
flag.value = false;
let params = {
verificationEnums: this.type,
xPos: this.distance
verificationEnums: type.value,
xPos: distance.value
};
postVerifyImg(params).then(res => {
if (res.success) {
if (res.result) {
this.bgColor = 'green';
this.verifyText = '解锁成功';
this.$emit('change', { status: true, distance: this.distance });
bgColor.value = 'green';
verifyText.value = '解锁成功';
emit('change', { status: true, distance: distance.value });
} else {
this.bgColor = 'red';
this.verifyText = '解锁失败';
let that = this;
bgColor.value = 'red';
verifyText.value = '解锁失败';
setTimeout(() => {
that.init();
init();
}, 1000);
this.$emit('change', { status: false, distance: this.distance });
emit('change', { status: false, distance: distance.value });
}
} else {
this.init()
init()
}
}).catch(()=>{
this.init()
init()
});
},
close () {
this.show = false;
},
init () { // 初始化数据
this.flag = false;
this.downX = 0;
this.distance = 0;
this.bgColor = '#04ad11';
this.verifyText = '拖动滑块解锁';
getVerifyImg(this.type).then(res => {
}
function close () {
show.value = false;
}
function init () { // 初始化数据
flag.value = false;
downX.value = 0;
distance.value = 0;
bgColor.value = '#04ad11';
verifyText.value = '拖动滑块解锁';
getVerifyImg(type.value).then(res => {
if (res.result) {
this.data = res.result;
this.show = true;
data.value = res.result;
show.value = true;
} else {
Message.warning('请求失败请重试！')
}
});
}
},
watch: {
verifyType: {
immediate: true,
handler: function (v) {
this.type = v;
}
}
}
};
}
// 父组件通过 ref 调用 init/close
defineExpose({ init, close });
watch(() => props.verifyType, (v) => {
type.value = v;
}, { immediate: true });
</script>
<style lang="scss" scoped>
.verify-content{

4
buyer/src/main.js
View File

@@ -1,10 +1,10 @@
import { createApp } from "vue";
import { createPinia } from "pinia";
import "core-js/stable";
import "./assets/styles/global-layout.scss";
import "./assets/styles/theme.less";
import App from "./App.vue";
import { router } from "./router/index";
import store from "@/vuex/store";
import { setupElementPlus } from "@/plugins/element";
import { setupLegacyMessage } from "@/utils/message";
import { registerGlobalComponents } from "@/components/global.js";
@@ -30,7 +30,7 @@ setupLegacyMessage(app);
registerGlobalComponents(app);
app.use(router);
app.use(store);
app.use(createPinia());
app.config.globalProperties.$filters = filters;
app.config.globalProperties.Cookies = storage;

202
buyer/src/pages/Cart.vue
View File

@@ -4,7 +4,7 @@
<!-- LOGO 搜索 -->
<div class="width_1200 logo">
<div>
<router-link to="/"><img :src="$store.state.logoImg" /></router-link>
<router-link to="/"><img :src="logoImg" /></router-link>
<div>
购物车(<span>{{ goodsTotal }}</span>)
</div>
@@ -242,55 +242,62 @@
</template>
<script>
import { Message, Modal } from "@/utils/message";
import Promotion from "@/components/goodsDetail/Promotion";
import * as APICart from "@/api/cart";
import * as APIMember from "@/api/member";
import { isECoupon } from "@/constants/goodsType";
export default {
name: "Cart",
beforeRouteEnter(to, from, next) {
window.scrollTo(0, 0);
next();
},
components: {
Promotion,
},
data() {
return {
couponAvailable: false, // 展示优惠券
stepIndex: 0, // 当前处于哪一步，购物车==0，填写订单信息==1，成功提交订单==2
goodsTotal: 0, // 商品数量
checkedNum: 0, // 选中数量
allChecked: false, // 全选
loading: false, // 加载状态
cartList: [], // 购物车列表
couponList: [], // 优惠券列表
priceDetailDTO: {}, // 价格明细
skuList: [], // sku列表
};
},
methods: {
// 跳转商品详情
goGoodsDetail(skuId, goodsId) {
let routeUrl = this.$router.resolve({
};
</script>
<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import Promotion from "@/components/goodsDetail/Promotion";
import * as APICart from "@/api/cart";
import * as APIMember from "@/api/member";
import { isECoupon } from "@/constants/goodsType";
import storage from "@/plugins/storage.js";
import { useAppStore } from "@/stores/app";
const router = useRouter();
const appStore = useAppStore();
const logoImg = computed(() => appStore.logoImg);
const couponAvailable = ref(false); // 展示优惠券
const stepIndex = ref(0); // 当前处于哪一步，购物车==0，填写订单信息==1，成功提交订单==2
const goodsTotal = ref(0); // 商品数量
const checkedNum = ref(0); // 选中数量
const allChecked = ref(false); // 全选
const loading = ref(false); // 加载状态
const cartList = ref([]); // 购物车列表
const couponList = ref([]); // 优惠券列表
const priceDetailDTO = ref({}); // 价格明细
const skuList = ref([]); // sku列表
// 跳转商品详情
function goGoodsDetail(skuId, goodsId) {
let routeUrl = router.resolve({
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routeUrl.href, "_blank");
},
// 跳转店铺首页
goShopPage(id) {
this.$router.push({
}
// 跳转店铺首页
function goShopPage(id) {
router.push({
path: "/merchant",
query: { id },
});
},
// 同步购物车商品收藏状态
async syncCartCollectionStatus() {
if (!this.Cookies.getItem("userInfo") || !this.cartList.length) return;
}
// 同步购物车商品收藏状态
async function syncCartCollectionStatus() {
if (!storage.getItem("userInfo") || !cartList.value.length) return;
const skuIds = [];
this.cartList.forEach((shop) => {
cartList.value.forEach((shop) => {
(shop.skuList || []).forEach((goods) => {
goods.isCollected = false;
if (goods.goodsSku && goods.goodsSku.id) {
@@ -304,7 +311,7 @@ export default {
try {
const res = await APIMember.isCollection("GOODS", skuId);
if (res.success && res.result) {
this.cartList.forEach((shop) => {
cartList.value.forEach((shop) => {
(shop.skuList || []).forEach((goods) => {
if (goods.goodsSku && goods.goodsSku.id === skuId) {
goods.isCollected = true;
@@ -317,10 +324,9 @@ export default {
}
})
);
this.$forceUpdate();
},
// 收藏 / 取消收藏商品
handleCollect(goods) {
}
// 收藏 / 取消收藏商品
function handleCollect(goods) {
const skuId = goods.goodsSku && goods.goodsSku.id;
if (!skuId) return;
if (goods.isCollected) {
@@ -332,7 +338,6 @@ export default {
if (res.success) {
goods.isCollected = false;
Message.success("取消收藏成功");
this.$forceUpdate();
}
});
},
@@ -348,18 +353,17 @@ export default {
if (res.success) {
goods.isCollected = true;
Message.success("收藏商品成功");
this.$forceUpdate();
}
});
},
onCancel: () => {},
});
},
// 删除商品
delGoods(id) {
}
// 删除商品
function delGoods(id) {
const idArr = [];
if (!id) {
const list = this.cartList;
const list = cartList.value;
list.forEach((shop) => {
shop.skuList.forEach((goods) => {
if (goods.checked) {
@@ -377,16 +381,16 @@ export default {
APICart.delCartGoods({ skuIds: idArr.toString() }).then((res) => {
if (res.success) {
Message.success("删除成功");
this.getCartList();
getCartList();
} else {
Message.error(res.message);
}
});
},
});
},
// 清空购物车
clearCart() {
}
// 清空购物车
function clearCart() {
Modal.confirm({
title: "提示",
content: "确定要清空购物车吗？清空后不可恢复",
@@ -394,21 +398,21 @@ export default {
APICart.clearCart().then((res) => {
if (res.success) {
Message.success("清空购物车成功");
this.getCartList();
getCartList();
} else {
Message.error(res.message);
}
});
},
});
},
// 跳转支付页面
pay() {
if (!this.checkedNum) {
}
// 跳转支付页面
function pay() {
if (!checkedNum.value) {
Message.warning("请至少选择一件商品");
return;
}
const hasECoupon = this.cartList.some((shop) =>
const hasECoupon = cartList.value.some((shop) =>
(shop.skuList || []).some(
(goods) => goods.checked && isECoupon(goods.goodsSku && goods.goodsSku.goodsType)
)
@@ -417,24 +421,24 @@ export default {
Message.warning("电子卡券请使用立即购买，不可通过购物车结算");
return;
}
this.$router.push({ path: "/pay", query: { way: "CART" } });
},
// 展示优惠券
showCoupon(storeId, index) {
this.couponAvailable = index;
},
// 设置购买数量
changeNum(val, id) {
router.push({ path: "/pay", query: { way: "CART" } });
}
// 展示优惠券
function showCoupon(storeId, index) {
couponAvailable.value = index;
}
// 设置购买数量
function changeNum(val, id) {
if (val) {
APICart.setCartGoodsNum({ skuId: id, num: val }).then((res) => {
if (res.success) {
this.getCartList();
getCartList();
}
});
}
},
// 设置商品选中状态
async changeChecked(status, type, id) {
}
// 设置商品选中状态
async function changeChecked(status, type, id) {
const check = status ? 1 : 0;
if (type === "all") {
// 全选
@@ -447,10 +451,10 @@ export default {
await APICart.setCheckedGoods({ checked: check, skuId: id });
}
this.getCartList();
},
// 领取优惠券
async receiveShopCoupon(item) {
getCartList();
}
// 领取优惠券
async function receiveShopCoupon(item) {
let res = await APIMember.receiveCoupon(item.id);
if (res.success) {
item["disabled"] = true;
@@ -458,48 +462,46 @@ export default {
} else {
Message.error(res.message);
}
},
// 购物车列表
async getCartList() {
this.loading = true;
}
// 购物车列表
async function getCartList() {
loading.value = true;
try {
let res = await APICart.cartGoodsAll();
this.loading = false;
loading.value = false;
if (res.success) {
this.cartList = res.result.cartList;
this.priceDetailDTO = res.result.priceDetailDTO;
this.skuList = res.result.skuList;
this.checkedNum = 0;
let allChecked = true;
for (let k = 0; k < this.cartList.length; k++) {
let shop = this.cartList[k];
cartList.value = res.result.cartList;
priceDetailDTO.value = res.result.priceDetailDTO;
skuList.value = res.result.skuList;
checkedNum.value = 0;
let allCheckedVal = true;
for (let k = 0; k < cartList.value.length; k++) {
let shop = cartList.value[k];
let list = await APIMember.couponList({ storeId: shop.storeId });
shop.couponList.push(...list.result.records);
}
for (let i = 0; i < this.skuList.length; i++) {
if (this.skuList[i].checked) {
this.checkedNum += this.skuList[i].num;
for (let i = 0; i < skuList.value.length; i++) {
if (skuList.value[i].checked) {
checkedNum.value += skuList.value[i].num;
} else {
allChecked = false;
allCheckedVal = false;
}
}
this.$forceUpdate();
this.allChecked = allChecked;
this.syncCartCollectionStatus();
allChecked.value = allCheckedVal;
syncCartCollectionStatus();
}
} catch (error) {
this.loading = false;
loading.value = false;
}
},
},
mounted() {
this.getCartList();
}
onMounted(() => {
getCartList();
APICart.cartCount().then((res) => {
// 购物车商品数量
if (res.success) this.goodsTotal = res.result;
if (res.success) goodsTotal.value = res.result;
});
},
};
});
</script>
<style scoped lang="scss">

116
buyer/src/pages/CouponCenter.vue
View File

@@ -43,60 +43,61 @@
<BaseFooter></BaseFooter>
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Modal } from "@/utils/message";
import storage from "@/plugins/storage";
import { couponList, receiveCoupon } from "@/api/member.js";
export default {
data() {
return {
list: [], // 优惠券列表
total: 0, // 优惠券总数
loading: false,
params: {
const route = useRoute();
const router = useRouter();
const list = ref([]); // 优惠券列表
const total = ref(0); // 优惠券总数
const loading = ref(false);
const params = reactive({
// 请求参数
getType: "FREE",
pageNumber: 1,
pageSize: 20,
},
};
},
methods: {
getList() {
if (this.loading) return;
this.loading = true;
couponList(this.params)
});
function getList() {
if (loading.value) return;
loading.value = true;
couponList(params)
.then((res) => {
if (res && res.success && res.result) {
this.list = res.result.records || [];
this.total = res.result.total || 0;
list.value = res.result.records || [];
total.value = res.result.total || 0;
} else {
this.list = [];
this.total = 0;
list.value = [];
total.value = 0;
}
})
.catch(() => {
this.list = [];
this.total = 0;
list.value = [];
total.value = 0;
})
.finally(() => {
this.loading = false;
loading.value = false;
});
},
// 分页 改变页码
changePageNum(val) {
this.params.pageNumber = val;
this.getList();
},
// 分页 改变每页数
changePageSize(val) {
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList();
},
// 领取优惠券
receive(item) {
if (this.isFinished(item)) return;
}
// 分页 改变页码
function changePageNum(val) {
params.pageNumber = val;
getList();
}
// 分页 改变每页数
function changePageSize(val) {
params.pageNumber = 1;
params.pageSize = val;
getList();
}
// 领取优惠券
function receive(item) {
if (isFinished(item)) return;
const userInfo = storage.getItem("userInfo");
const isLogin = userInfo && JSON.parse(userInfo).username;
if (!isLogin) {
@@ -106,11 +107,11 @@ export default {
okText: "立即登录",
cancelText: "取消",
onOk: () => {
this.$router.push({
router.push({
path: "/login",
query: {
rePath: this.$route.path,
query: JSON.stringify(this.$route.query),
rePath: route.path,
query: JSON.stringify(route.query),
},
});
},
@@ -127,10 +128,10 @@ export default {
cancelText: "立即使用",
closable: true,
onOk: () => {
this.$router.push("/home/Coupons");
router.push("/home/Coupons");
},
onCancel: () => {
this.$router.push({
router.push({
path: "/goodsList",
query: { promotionsId: item.id, promotionType: "COUPON" },
});
@@ -140,29 +141,28 @@ export default {
.catch((err) => {
console.warn('领取优惠券失败', err);
});
},
// 发行量已领完
isFinished(item) {
}
// 发行量已领完
function isFinished(item) {
return Number(item.publishNum) > 0 && Number(item.receivedNum) >= Number(item.publishNum);
},
// 使用门槛文案
thresholdText(item) {
}
// 使用门槛文案
function thresholdText(item) {
const threshold = Number(item.consumeThreshold);
if (!threshold) return "无使用门槛";
return `满${item.consumeThreshold}元可用`;
},
// 券范围。店铺名为 platform 时是平台通用券
scopeTag(type, storeName) {
}
// 券范围。店铺名为 platform 时是平台通用券
function scopeTag(type, storeName) {
if (type === "PORTION_GOODS") return "商品券";
if (type === "PORTION_GOODS_CATEGORY") return "分类券";
if (storeName && storeName !== "platform") return "店铺券";
return "通用券";
},
},
mounted() {
this.getList();
},
};
}
onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
@import "../assets/styles/coupon.scss";

168
buyer/src/pages/ForgetPassword.vue
View File

@@ -4,7 +4,7 @@
<!-- 顶部logo -->
<div class="logo-box">
<img
:src="$store.state.logoImg" width='150'
:src="logoImg" width='150'
@click="$router.push('/')"
/>
<div>修改密码</div>
@@ -12,7 +12,7 @@
<div class="login-container">
<!-- 验证手机号 -->
<el-form
ref="formFirst"
ref="formFirstRef"
:model="formFirst"
:rules="ruleInline"
style="width:300px;"
@@ -47,7 +47,7 @@
</el-form-item>
</el-form>
<el-form
ref="form"
ref="formRef"
:model="form"
:rules="ruleInline"
style="width:300px;"
@@ -79,7 +79,7 @@
</el-form>
<!-- 拼图验证码 -->
<Verify
ref="verify"
ref="verifyRef"
class="verify-con"
:verifyType="verifyType"
@change="verifyChange"
@@ -103,8 +103,9 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@/utils/message";
import * as RegExp from '@/plugins/RegExp.js';
import { md5 } from '@/plugins/md5.js';
@@ -113,26 +114,28 @@ import { sendSms } from '@/api/common.js';
import Verify from '@/components/verify';
import { Lock, Iphone, Document } from '@element-plus/icons-vue';
import config from '@/config';
export default {
name: 'ForgetPassword',
components: { Verify, Lock, Iphone, Document },
data () {
return {
config,
loading: false, // 加载状态
loading1: false, // 第二步加载状态
formFirst: { // 手机验证码表单
import { useAppStore } from '@/stores/app';
defineOptions({ name: 'ForgetPassword' });
const router = useRouter();
const appStore = useAppStore();
const logoImg = computed(() => appStore.logoImg);
const loading = ref(false); // 加载状态
const loading1 = ref(false); // 第二步加载状态
const formFirst = reactive({ // 手机验证码表单
// 注册表单
mobile: '',
code: ''
},
form: { // 密码
});
const form = reactive({ // 密码
password: '',
oncePasd: ''
},
year: new Date().getFullYear(), // 当前年份
step: 0, // 步骤
ruleInline: {
});
const year = new Date().getFullYear(); // 当前年份
const step = ref(0); // 步骤
const ruleInline = {
// 验证规则
mobile: [
{ required: true, message: '请输入手机号码' },
@@ -144,86 +147,90 @@ export default {
],
code: [{ required: true, message: '请输入手机验证码' }],
password: [{required: true, message: '密码不能为空'}, {pattern: RegExp.password, message: '密码不能少于6位'}]
},
verifyStatus: false, // 图片验证状态
verifyType: 'FIND_USER', // 图片验证类型
codeMsg: '发送验证码', // 验证码文字
interval: '', // 定时器
time: 60 // 倒计时时间
};
},
methods: {
hideVerify() {
this.$refs.verify?.close?.();
},
// 提交短信验证码，修改密码
next () {
this.$refs.formFirst.validate((valid) => {
};
const verifyStatus = ref(false); // 图片验证状态
const verifyType = ref('FIND_USER'); // 图片验证类型
const codeMsg = ref('发送验证码'); // 验证码文字
const interval = ref(''); // 定时器
const time = ref(60); // 倒计时时间
const formFirstRef = ref(null);
const formRef = ref(null);
const verifyRef = ref(null);
function hideVerify() {
verifyRef.value?.close?.();
}
// 提交短信验证码，修改密码
function next () {
formFirstRef.value.validate((valid) => {
if (valid) {
this.loading = true;
let data = JSON.parse(JSON.stringify(this.formFirst));
loading.value = true;
let data = JSON.parse(JSON.stringify(formFirst));
apiLogin.validateCode(data).then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
// Message.success('');
this.step = 1;
step.value = 1;
} else {
Message.warning(res.message);
}
}).catch(() => { this.loading = false; });
}).catch(() => { loading.value = false; });
}
});
},
handleSubmit () { // 提交密码
this.$refs.form.validate(valid => {
}
function handleSubmit () { // 提交密码
formRef.value.validate(valid => {
if (valid) {
let params = JSON.parse(JSON.stringify(this.form));
let params = JSON.parse(JSON.stringify(form));
if (params.password !== params.oncePasd) {
Message.warning('两次输入密码不一致');
return;
};
params.mobile = this.formFirst.mobile;
params.mobile = formFirst.mobile;
params.password = md5(params.password);
delete params.oncePasd;
this.loading1 = true;
loading1.value = true;
apiLogin.resetPassword(params).then(res => {
this.loading1 = false;
loading1.value = false;
if (res.success) {
Message.success('修改密码成功');
this.$router.push('login');
router.push('login');
}
}).catch(() => { this.loading = false; });
}).catch(() => { loading.value = false; });
};
});
},
sendCode () { // 发送验证码
if (this.time === 60) {
if (this.formFirst.mobile === '') {
}
function sendCode () { // 发送验证码
if (time.value === 60) {
if (formFirst.mobile === '') {
Message.warning('请先填写手机号');
return;
}
if (!this.verifyStatus) {
if (!verifyStatus.value) {
Message.warning('请先完成安全验证');
return;
}
let params = {
mobile: this.formFirst.mobile,
mobile: formFirst.mobile,
verificationEnums: 'FIND_USER'
};
sendSms(params).then(res => {
if (res.success) {
Message.success('验证码发送成功');
let that = this;
this.interval = setInterval(() => {
that.time--;
if (that.time === 0) {
that.time = 60;
that.codeMsg = '重新发送';
that.verifyStatus = false;
clearInterval(that.interval);
interval.value = setInterval(() => {
time.value--;
if (time.value === 0) {
time.value = 60;
codeMsg.value = '重新发送';
verifyStatus.value = false;
clearInterval(interval.value);
} else {
that.codeMsg = that.time;
codeMsg.value = time.value;
}
}, 1000);
} else {
@@ -231,25 +238,24 @@ export default {
}
});
}
},
verifyChange (con) { // 验证通过
}
function verifyChange (con) { // 验证通过
if (!con.status) return;
this.hideVerify();
this.verifyStatus = true;
},
verifyBtnClick () {
if (!this.verifyStatus) {
this.$refs.verify?.init();
hideVerify();
verifyStatus.value = true;
}
function verifyBtnClick () {
if (!verifyStatus.value) {
verifyRef.value?.init();
}
}
},
mounted () {
}
onMounted(() => {
document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
this.$refs.formFirst.resetFields();
},
watch: {
}
};
formFirstRef.value.resetFields();
});
</script>
<style scoped lang="scss">

110
buyer/src/pages/GoodsDetail.vue
View File

@@ -30,69 +30,72 @@
</template>
<script>
import { Message } from "@/utils/message";
import Search from "@/components/Search";
import ShowGoods from "@/components/goodsDetail/ShowGoods";
import empty from "@/components/empty/Main";
import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
import { goodsSkuDetail } from "@/api/goods";
import { getGoodsDistribution } from "@/api/member";
export default {
name: "GoodsDetail",
beforeRouteEnter (to, from, next) {
window.scrollTo(0, 0);
next();
},
created () {
this.getGoodsDetail();
},
data () {
return {
goodsMsg: {}, // 商品信息
isLoading: false, // 加载状态
categoryBar: [], // 分类
takeDownSale:false, // 是否下架
};
</script>
};
},
methods: {
// 跳转首页或商品页面
target(url){
this.$router.push({path: url})
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import storage from "@/plugins/storage.js";
import Search from "@/components/Search";
import ShowGoods from "@/components/goodsDetail/ShowGoods";
import empty from "@/components/empty/Main";
import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
import { goodsSkuDetail } from "@/api/goods";
import { getGoodsDistribution } from "@/api/member";
},
// 点击规格
targetClickSku (val) {
this.getGoodsDetail(val);
},
// 获取商品详情
getGoodsDetail (val) {
this.isLoading = true;
const params = val || this.$route.query;
const route = useRoute();
const router = useRouter();
const goodsMsg = ref({}); // 商品信息
const isLoading = ref(false); // 加载状态
const categoryBar = ref([]); // 分类
const takeDownSale = ref(false); // 是否下架
// 跳转首页或商品页面
function target(url){
router.push({path: url})
}
// 点击规格
function targetClickSku (val) {
getGoodsDetail(val);
}
// 获取商品详情
function getGoodsDetail (val) {
isLoading.value = true;
const params = val || route.query;
// 分销员id
let distributionId =
params && params.distributionId
? params.distributionId
: this.Cookies.getItem("distributionId");
: storage.getItem("distributionId");
// 如果有分销信息
if (distributionId) {
// 先存储
this.Cookies.setItem("distributionId", params.distributionId);
let _this = this;
storage.setItem("distributionId", params.distributionId);
// 绑定关系
getGoodsDistribution(params.distributionId).then((res) => {
// 绑定成功，则清除关系
if (res.success) {
_this.Cookies.removeItem("distributionId");
storage.removeItem("distributionId");
}
});
}
goodsSkuDetail(params)
.then((res) => {
this.isLoading = false;
isLoading.value = false;
if (res.success) {
const result = res.result;
@@ -106,27 +109,28 @@ export default {
name: cateName ? cateName[index] : "",
});
});
this.categoryBar = cateArr;
this["goodsMsg"] = res.result;
if (!this.goodsMsg.data.intro) {
this.goodsMsg.data.intro = ''
categoryBar.value = cateArr;
goodsMsg.value = res.result;
if (!goodsMsg.value.data.intro) {
goodsMsg.value.data.intro = ''
}
} else {
Message.error(res.message);
this.isLoading = false
isLoading.value = false
}
})
.catch((e) => {
this.isLoading = false
isLoading.value = false
if(e.code === 11001){
this.takeDownSale = true
takeDownSale.value = true
}
});
},
goGoodsList (currIndex) {
}
function goGoodsList (currIndex) {
// 跳转商品列表
const arr = [];
this.categoryBar.forEach((e, index) => {
categoryBar.value.forEach((e, index) => {
if (index <= currIndex) {
arr.push(e.id);
}
@@ -135,14 +139,10 @@ export default {
path: "/goodsList",
query: { categoryId: arr.toString() },
};
},
},
watch: {},
components: { Search,
ShowGoods,
ShowGoodsDetail,
empty },
};
}
// 初始化（原 created 钩子逻辑）
getGoodsDetail();
</script>
<style scoped lang="scss">
.goods-detail-page {

258
buyer/src/pages/GoodsList.vue
View File

@@ -104,103 +104,113 @@
</template>
<script>
import { Message } from "@/utils/message";
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import GoodsClassNav from "@/components/nav/GoodsClassNav";
import GoodsThumb from "@/components/goods/GoodsThumb.vue";
import * as apiGoods from "@/api/goods";
export default {
name: "GoodsList",
beforeRouteEnter(to, from, next) {
window.scrollTo(0, 0);
next();
},
data() {
return {
sortIndex: 0, // 排序状态
priceSortIndex: 4,
sortPriceIndex: false, // 判断价格升序还是降序
searched: false,
recommendList: [],
goodsTool: [
// 排序类型
};
</script>
<script setup>
import { computed, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import GoodsClassNav from "@/components/nav/GoodsClassNav";
import GoodsThumb from "@/components/goods/GoodsThumb.vue";
import * as apiGoods from "@/api/goods";
const route = useRoute();
const router = useRouter();
const sortIndex = ref(0); // 排序状态
const priceSortIndex = ref(4);
const sortPriceIndex = ref(false); // 判断价格升序还是降序
const searched = ref(false);
const recommendList = ref([]);
// 排序类型
const goodsTool = [
{ title: "综合", en: "" },
{ title: "销量", en: "buyCount" },
{ title: "评论数", en: "commentNum" },
{ title: "新品", en: "releaseTime" },
],
goodsList: [], // 商品列表
loading: false, // 加载状态
total: 0, // 列表总数
params: {
// 请求参数
];
const goodsList = ref([]); // 商品列表
const loading = ref(false); // 加载状态
const total = ref(0); // 列表总数
// 请求参数
const params = reactive({
pageNumber: 1,
pageSize: 20,
categoryId: "",
},
};
},
watch: {
$route() {
const { keyword, categoryId, promotionType, promotionsId } = this.$route.query;
});
const displayGoods = computed(() => {
if (goodsList.value.length) return goodsList.value;
return searched.value && !loading.value ? recommendList.value : [];
});
const emptyTitle = computed(() => {
const keyword = params.keyword;
return keyword ? `没有找到与“${keyword}”相关的商品` : "暂无商品";
});
watch(
() => route.query,
(query) => {
const { keyword, categoryId, promotionType, promotionsId } = query;
if (categoryId) {
const cateId = categoryId.split(",");
Object.assign(this.params, this.$route.query);
this.params.categoryId = cateId[cateId.length - 1];
Object.assign(params, query);
params.categoryId = cateId[cateId.length - 1];
}
if (promotionType) {
this.params.promotionType = promotionType;
params.promotionType = promotionType;
}
if (promotionsId) {
this.params.promotionsId = promotionsId;
params.promotionsId = promotionsId;
}
if (keyword) {
// handleSearch 内部会调 getGoodsList，此处不再重复请求
this.handleSearch(keyword);
handleSearch(keyword);
} else {
this.params.keyword = "";
this.getGoodsList();
params.keyword = "";
getGoodsList();
}
},
},
computed: {
displayGoods() {
if (this.goodsList.length) return this.goodsList;
return this.searched && !this.loading ? this.recommendList : [];
},
emptyTitle() {
const keyword = this.params.keyword;
return keyword ? `没有找到与“${keyword}”相关的商品` : "暂无商品";
},
},
methods: {
// 搜索
handleSearch(key) {
this.params.keyword = key;
this.$route.query.keyword = key
this.params.pageNumber = 1;
this.getGoodsList();
},
orderBy(data, index) {
// 排序
this.sortIndex = index;
this.params.sort = data;
this.params.order = "desc";
}
);
// 搜索
function handleSearch(key) {
params.keyword = key;
route.query.keyword = key;
params.pageNumber = 1;
getGoodsList();
}
// 排序
function orderBy(data, index) {
sortIndex.value = index;
params.sort = data;
params.order = "desc";
if (data === "price") {
if (!this.sortPriceIndex) {
this.sortPriceIndex = "asc";
if (!sortPriceIndex.value) {
sortPriceIndex.value = "asc";
} else {
this.sortPriceIndex === "desc"
? (this.sortPriceIndex = "asc")
: (this.sortPriceIndex = "desc");
sortPriceIndex.value === "desc"
? (sortPriceIndex.value = "asc")
: (sortPriceIndex.value = "desc");
}
this.params.order = this.sortPriceIndex;
params.order = sortPriceIndex.value;
} else {
this.sortPriceIndex = false;
sortPriceIndex.value = false;
}
this.getGoodsList();
},
formatGrade(grade) {
getGoodsList();
}
function formatGrade(grade) {
if (grade === null || grade === undefined || grade === "") {
return 100;
}
@@ -210,91 +220,89 @@ export default {
}
const fixed = Number(num.toFixed(1));
return fixed % 1 === 0 ? fixed.toFixed(0) : String(fixed);
},
goGoodsDetail(skuId, goodsId) {
}
function goGoodsDetail(skuId, goodsId) {
const location = {
path: "/goodsDetail",
query: { skuId, goodsId },
};
window.open(this.$router.resolve(location).href, "_blank");
},
goShopPage(id) {
window.open(router.resolve(location).href, "_blank");
}
function goShopPage(id) {
if (!id) {
Message.warning("店铺信息不存在");
return;
}
this.$router.push({
router.push({
path: "/merchant",
query: { id },
});
},
// 分页 修改页码
changePageNum(val) {
this.params.pageNumber = val;
this.getGoodsList();
},
// 分页 修改页数
changePageSize(val) {
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getGoodsList();
},
}
// 获取商品列表
getGoodsList() {
this.loading = true;
// 分页 修改页码
function changePageNum(val) {
params.pageNumber = val;
getGoodsList();
}
// 分页 修改页数
function changePageSize(val) {
params.pageNumber = 1;
params.pageSize = val;
getGoodsList();
}
// 获取商品列表
function getGoodsList() {
loading.value = true;
apiGoods
.goodsList(this.params)
.goodsList(params)
.then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
this.goodsList = res.result.records || [];
this.total = res.result.total;
if (!this.goodsList.length) this.loadRecommend();
goodsList.value = res.result.records || [];
total.value = res.result.total;
if (!goodsList.value.length) loadRecommend();
}
})
.catch(() => {
this.goodsList = [];
goodsList.value = [];
})
.finally(() => {
this.loading = false;
this.searched = true;
loading.value = false;
searched.value = true;
});
},
loadRecommend() {
if (this.recommendList.length) return;
}
function loadRecommend() {
if (recommendList.value.length) return;
apiGoods
.goodsList({ pageNumber: 1, pageSize: 10, sort: "buyCount", order: "desc" })
.then((res) => {
if (res.success) this.recommendList = res.result.records || [];
if (res.success) recommendList.value = res.result.records || [];
})
.catch(() => {
// 推荐列表为可选数据，加载失败不阻塞搜索页
});
},
getParams(val) {
// 筛选条件回显
Object.assign(this.params, val);
this.getGoodsList();
},
},
created() {
if (this.$route.query.categoryId) {
let cateId = this.$route.query.categoryId.split(",");
Object.assign(this.params, this.$route.query);
this.params.categoryId = cateId[cateId.length - 1];
} else {
Object.assign(this.params, this.$route.query);
}
this.getGoodsList();
},
components: {
GoodsClassNav,
GoodsThumb,
ArrowDown,
ArrowUp,
},
};
}
// 筛选条件回显
function getParams(val) {
Object.assign(params, val);
getGoodsList();
}
// 初始化（原 created 钩子逻辑）
if (route.query.categoryId) {
const cateId = route.query.categoryId.split(",");
Object.assign(params, route.query);
params.categoryId = cateId[cateId.length - 1];
} else {
Object.assign(params, route.query);
}
getGoodsList();
</script>
<style scoped lang="scss">

209
buyer/src/pages/Index.vue
View File

@@ -32,7 +32,7 @@
<div class="index-main">
<!-- 商品分类 + 楼层装修（同一宽度容器，保证与分类栏左缘对齐） -->
<cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
<model-form ref="modelForm" :data="modelForm"></model-form>
<model-form :data="modelFormData"></model-form>
</div>
<!-- 底部栏 -->
<BaseFooter></BaseFooter>
@@ -41,96 +41,78 @@
</div>
</template>
<script>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import Search from '@/components/Search';
import ModelForm from '@/components/indexDecorate/ModelForm';
import HoverSearch from '@/components/header/hoverSearch';
import fixedBar from '@/components/fixed/index';
import storage from "@/plugins/storage";
import { indexData,getAutoCoup } from '@/api/index.js';
import {seckillByDay} from '@/api/promotion'
export default {
name: 'Index',
mounted () {
this.getIndexData();
let that = this;
window.onscroll = function () {
let top = document.documentElement.scrollTop || document.body.scrollTop;
if (top > 300) {
that.topSearchShow = true;
} else {
that.topSearchShow = false;
}
};
if(storage.getItem('userInfo')){
this.getAutoCoup()
}
},
data () {
return {
autoCoupList:[],
showCpmodel:false,
modelForm: { list: [] }, // 楼层装修数据
topAdvert: {}, // 顶部广告
showNav: false, // 是否展示分类栏
topSearchShow: false, // 滚动后顶部搜索栏展示
carouselLarge: false, // 不同轮播分类尺寸
carouselOpacity: false // 不同轮播分类样式
};
},
props:{
pageData:{
type:null,
default:""
}
},
// created(){
import { indexData, getAutoCoup } from '@/api/index.js';
import { seckillByDay } from '@/api/promotion';
// },
methods: {
// 优惠券可用范围
useScope (type, storeName) {
defineOptions({ name: "Index" });
const props = defineProps({
pageData: {
type: null,
default: "",
},
});
const autoCoupList = ref([]);
const showCpmodel = ref(false);
const modelFormData = ref({ list: [] }); // 楼层装修数据
const topAdvert = ref({}); // 顶部广告
const showNav = ref(false); // 是否展示分类栏
const topSearchShow = ref(false); // 滚动后顶部搜索栏展示
const carouselLarge = ref(false); // 不同轮播分类尺寸
const carouselOpacity = ref(false); // 不同轮播分类样式
// 优惠券可用范围
function useScope(type, storeName) {
let shop = '平台';
let goods = '全部商品'
if (storeName !== 'platform') shop = storeName
let goods = '全部商品';
if (storeName !== 'platform') shop = storeName;
switch (type) {
case 'ALL':
goods = '全部商品'
goods = '全部商品';
break;
case 'PORTION_GOODS':
goods = '部分商品'
goods = '部分商品';
break;
case 'PORTION_GOODS_CATEGORY':
goods = '部分分类商品'
goods = '部分分类商品';
break;
}
return `${shop}${goods}可用`
},
getAutoCoup(){
let data = new Date()
let datas = data.getDate()
let hours = data.getHours()
let flagCoup = storage.getItem('getTimes') //缓存
if(flagCoup && flagCoup != undefined && flagCoup != null){ //判断当前是否有缓存
if(Number(datas) > Number(flagCoup)){ //判断缓存是否小于当前天数
if(Number(hours) >= 6){//超过或等于6时清楚缓存
storage.setItem('getTimes',datas)//存储缓存
this.getcps()
return `${shop}${goods}可用`;
}
function fetchAutoCoup() {
let data = new Date();
let datas = data.getDate();
let hours = data.getHours();
let flagCoup = storage.getItem('getTimes'); //缓存
if (flagCoup && flagCoup != undefined && flagCoup != null) { //判断当前是否有缓存
if (Number(datas) > Number(flagCoup)) { //判断缓存是否小于当前天数
if (Number(hours) >= 6) { //超过或等于6时清楚缓存
storage.setItem('getTimes', datas); //存储缓存
getcps();
}
}
}else{
// window.localStorage.setItem('getTimes',datas)//存储缓存
this.getcps()
} else {
getcps();
}
},
getcps(){
let data = new Date()
let datas = data.getDate()
getAutoCoup().then(res=>{ //调用自动发券
if(res.success){
this.autoCoupList.push(...res.result);
}
function getcps() {
let data = new Date();
let datas = data.getDate();
getAutoCoup().then(res => { //调用自动发券
if (res.success) {
autoCoupList.value.push(...res.result);
let objs = {};
this.autoCoupList = this.autoCoupList.reduce((cur, next) => {
autoCoupList.value = autoCoupList.value.reduce((cur, next) => {
//对象去重
if (next.id != undefined) {
objs[next.id]
@@ -139,30 +121,30 @@ export default {
}
return cur;
}, []);
if(this.autoCoupList != '' && this.autoCoupList.length > 0){
this.showCpmodel = true;
if (autoCoupList.value != '' && autoCoupList.value.length > 0) {
showCpmodel.value = true;
}
storage.setItem('getTimes',datas)//存储缓存
storage.setItem('getTimes', datas); //存储缓存
}
}).catch((err) => {
console.warn('获取自动发券信息失败', err);
});
},
handleReachBottom(){
}
} ,
getIndexData () {
if(this.pageData){
this.parsePageData(JSON.stringify(this.pageData)).catch(() => {
function handleReachBottom() {
}
function getIndexData() {
if (props.pageData) {
parsePageData(JSON.stringify(props.pageData)).catch(() => {
// 装修数据解析失败时保持默认空楼层
});
}
else{
} else {
// 获取首页装修数据
indexData({ clientType: 'PC' }).then(async (res) => {
if (res.success && res.result?.pageData) {
try {
await this.parsePageData(res.result.pageData);
await parsePageData(res.result.pageData);
} catch {
// 装修数据解析失败时保持默认空楼层
}
@@ -171,9 +153,9 @@ export default {
console.warn('获取首页装修数据失败', err);
});
}
},
}
async parsePageData(pageData){
async function parsePageData(pageData) {
const dataJson = typeof pageData === "string" ? JSON.parse(pageData) : pageData;
if (!dataJson?.list?.length) {
return;
@@ -181,44 +163,57 @@ export default {
// 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
// 轮播图根据不同轮播，样式不同
for (let i = 0; i < dataJson.list.length; i++) {
let type = dataJson.list[i].type
let type = dataJson.list[i].type;
if (type === 'carousel2') {
this.carouselLarge = true;
carouselLarge.value = true;
} else if (type === 'carousel1') {
this.carouselLarge = true
this.carouselOpacity = true
carouselLarge.value = true;
carouselOpacity.value = true;
} else if (type === 'seckill') {
let seckill = await this.getListByDay()
dataJson.list[i].options.list = seckill
let seckill = await getListByDay();
dataJson.list[i].options.list = seckill;
}
}
this.modelForm = dataJson;
modelFormData.value = dataJson;
if (dataJson.list[1]) {
storage.setItem('navList', dataJson.list[1])
storage.setItem('navList', dataJson.list[1]);
}
this.showNav = true
showNav.value = true;
if (dataJson.list[0]) {
this.topAdvert = dataJson.list[0];
topAdvert.value = dataJson.list[0];
}
},
}
async getListByDay () { // 当天秒杀活动
async function getListByDay() { // 当天秒杀活动
try {
const res = await seckillByDay()
const res = await seckillByDay();
if (res.success && res.result?.length) {
return res.result
return res.result;
}
} catch {
// 秒杀接口失败时不影响首页其他模块
}
return []
return [];
}
function handleScroll() {
const top = document.documentElement.scrollTop || document.body.scrollTop;
topSearchShow.value = top > 300;
}
onMounted(() => {
getIndexData();
window.onscroll = handleScroll;
if (storage.getItem('userInfo')) {
fetchAutoCoup();
}
},
components: { Search,
ModelForm,
HoverSearch,
fixedBar }
};
});
onUnmounted(() => {
if (window.onscroll === handleScroll) {
window.onscroll = null;
}
});
</script>
<style scoped lang="scss">

235
buyer/src/pages/Login.vue
View File

@@ -3,7 +3,7 @@
<!-- 顶部logo -->
<div class="top-content" @click="hideVerify">
<div class="logo-box">
<img :src="$store.state.logoImg" @click="$router.push('/')" />
<img :src="logoImg" @click="$router.push('/')" />
<div>欢迎登录</div>
</div>
</div>
@@ -27,7 +27,7 @@
<div>
<div>
<!-- 账号密码登录 -->
<el-form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
<el-form ref="formInlineRef" :model="formData" :rules="ruleInline" v-show="type === true"
@click.self="hideVerify">
<el-form-item prop="username">
<el-input type="text" v-model="formData.username" clearable placeholder="用户名">
@@ -44,7 +44,7 @@
</el-form-item>
</el-form>
<!-- 验证码登录 -->
<el-form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
<el-form ref="formSmsRef" :model="formSms" :rules="ruleInline" v-show="type === false"
@click.self="hideVerify">
<el-form-item prop="mobile">
<el-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
@@ -88,7 +88,7 @@
<!-- 拼图验证码 -->
<verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
<verify ref="verifyRef" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
</div>
<div class="foot">
<div type="flex" justify="space-around" class="help">
@@ -105,8 +105,10 @@
</div>
</template>
<script>
<script setup>
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Spin } from "@/utils/message";
import * as RegExp from "@/plugins/RegExp.js";
import { md5 } from "@/plugins/md5.js";
@@ -117,33 +119,38 @@ import storage from "@/plugins/storage.js";
import verify from "@/components/verify";
import { User, Lock, Document, Iphone } from "@element-plus/icons-vue";
import config from "@/config";
import { useAppStore } from "@/stores/app";
export default {
name: "Login",
components: {
verify,
User,
Lock,
Document,
Iphone,
},
data() {
return {
config,
type: true, // true 账号登录 false 验证码登录
formData: {
defineOptions({ name: "Login" });
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const logoImg = computed(() => appStore.logoImg);
const formInlineRef = ref(null);
const formSmsRef = ref(null);
const verifyRef = ref(null);
const formRefs = {
formInline: formInlineRef,
formSms: formSmsRef,
};
const type = ref(true); // true 账号登录 false 验证码登录
const formData = reactive({
// 登录表单
username: "",
password: "",
},
formSms: {
});
const formSms = reactive({
// 手机号登录
code: "",
mobile: "",
},
verifyStatus: false, // 是否图片验证通过
codeSent: false, // 是否已成功发送短信验证码
ruleInline: {
});
const verifyStatus = ref(false); // 是否图片验证通过
const codeSent = ref(false); // 是否已成功发送短信验证码
const ruleInline = {
// 验证规则
username: [{required: true, message: "请输入用户名"}],
password: [
@@ -158,32 +165,30 @@ export default {
},
],
code: [{required: true, message: "请输入手机验证码"}],
},
codeMsg: "发送验证码", // 验证码文字
interval: null, // 定时器
time: 60, // 倒计时
year: new Date().getFullYear(),
};
},
methods: {
hideVerify() {
this.$refs.verify?.close?.();
},
};
const codeMsg = ref("发送验证码"); // 验证码文字
const interval = ref(null); // 定时器
const time = ref(60); // 倒计时
const year = new Date().getFullYear();
// 登录
handleSubmit(name) {
this.$refs[name].validate((valid) => {
function hideVerify() {
verifyRef.value?.close?.();
}
// 登录
function handleSubmit(name) {
formRefs[name].value.validate((valid) => {
if (valid) {
if (this.type) {
this.$refs.verify?.init();
if (type.value) {
verifyRef.value?.init();
} else {
if (!this.codeSent) {
if (!codeSent.value) {
Message.warning("请先获取短信验证码");
return;
}
const data = JSON.parse(JSON.stringify(this.formSms));
const data = JSON.parse(JSON.stringify(formSms));
apiLogin.smsLogin(data).then((res) => {
this.hideVerify();
hideVerify();
if (res.success) {
Message.success("登录成功");
storage.setItem("accessToken", res.result.accessToken);
@@ -192,14 +197,14 @@ export default {
apiLogin.getMemberMsg().then((res) => {
if (res.success) {
storage.setItem("userInfo", res.result);
let query = this.$route.query;
let query = route.query;
if (query.rePath) {
this.$router.push({
router.push({
path: query.rePath,
query: JSON.parse(query.query),
});
} else {
this.$router.push("/");
router.push("/");
}
}
});
@@ -212,63 +217,63 @@ export default {
}
}
});
},
// 发送手机验证码
sendCode() {
if (this.time !== 60) return;
if (this.formSms.mobile === "") {
}
// 发送手机验证码
function sendCode() {
if (time.value !== 60) return;
if (formSms.mobile === "") {
Message.warning("请先填写手机号");
return;
}
if (!RegExp.mobile.test(this.formSms.mobile)) {
if (!RegExp.mobile.test(formSms.mobile)) {
Message.warning("请输入正确的手机号");
return;
}
this.$refs.verify?.init();
},
dispatchSms() {
verifyRef.value?.init();
}
function dispatchSms() {
sendSms({
mobile: this.formSms.mobile,
mobile: formSms.mobile,
verificationEnums: "LOGIN",
}).then((res) => {
if (res.success) {
Message.success("验证码发送成功");
this.codeSent = true;
this.interval = setInterval(() => {
this.time--;
if (this.time === 0) {
this.time = 60;
this.codeMsg = "重新发送";
this.verifyStatus = false;
this.codeSent = false;
clearInterval(this.interval);
codeSent.value = true;
interval.value = setInterval(() => {
time.value--;
if (time.value === 0) {
time.value = 60;
codeMsg.value = "重新发送";
verifyStatus.value = false;
codeSent.value = false;
clearInterval(interval.value);
} else {
this.codeMsg = this.time;
codeMsg.value = time.value;
}
}, 1000);
} else {
this.verifyStatus = false;
verifyStatus.value = false;
Message.warning(res.message);
}
}).catch(() => {
this.verifyStatus = false;
verifyStatus.value = false;
});
},
verifyChange(con) {
}
function verifyChange(con) {
// 拼图验证码回显
if (!con.status) return;
if (this.type === true) {
if (type.value === true) {
// 账号密码登录
let data = JSON.parse(JSON.stringify(this.formData));
let data = JSON.parse(JSON.stringify(formData));
data.password = md5(data.password);
this.hideVerify();
hideVerify();
Spin.show();
apiLogin
.login(data)
.then((res) => {
if (res.success) {
this.loginSuccess(res.result.accessToken,res.result.refreshToken);
loginSuccess(res.result.accessToken,res.result.refreshToken);
} else {
Spin.hide();
Message.error(res.message);
@@ -278,16 +283,16 @@ export default {
Spin.hide();
});
} else {
this.verifyStatus = true;
this.hideVerify();
this.dispatchSms();
verifyStatus.value = true;
hideVerify();
dispatchSms();
}
},
handleWebLogin(type) {
}
function handleWebLogin(type) {
// 第三方登录
webLogin(type);
},
loginSuccess(accessToken,refreshToken){
}
function loginSuccess(accessToken,refreshToken){
Message.success("登录成功");
storage.setItem("accessToken", accessToken);
storage.setItem("refreshToken", refreshToken);
@@ -295,57 +300,59 @@ export default {
Spin.hide();
if (res.success) {
storage.setItem("userInfo", res.result);
let query = this.$route.query;
let query = route.query;
if (query.rePath) {
this.$router.push({
router.push({
path: query.rePath,
query: JSON.parse(query.query),
});
} else {
this.$router.push("/");
router.push("/");
}
}
});
},
}
},
beforeUnmount() {
clearInterval(this.interval);
},
mounted() {
let uuid = this.$route.query.state;
onBeforeUnmount(() => {
clearInterval(interval.value);
});
onMounted(() => {
let uuid = route.query.state;
if (uuid) {
storage.setItem("uuid", uuid);
loginCallback(uuid).then((res) => {
if (res.success) {
this.loginSuccess(res.result.accessToken,res.result.refreshToken);
loginSuccess(res.result.accessToken,res.result.refreshToken);
}
});
}
},
watch: {
type(v) {
});
watch(type, (v) => {
if (v) {
this.$refs.formInline.resetFields();
formInlineRef.value.resetFields();
} else {
this.$refs.formSms.resetFields();
formSmsRef.value.resetFields();
}
this.verifyStatus = false;
this.codeSent = false;
this.hideVerify();
clearInterval(this.interval);
this.codeMsg = "发送验证码";
this.time = 60;
},
"formSms.mobile"() {
this.codeSent = false;
this.verifyStatus = false;
clearInterval(this.interval);
this.codeMsg = "发送验证码";
this.time = 60;
},
},
};
verifyStatus.value = false;
codeSent.value = false;
hideVerify();
clearInterval(interval.value);
codeMsg.value = "发送验证码";
time.value = 60;
});
watch(
() => formSms.mobile,
() => {
codeSent.value = false;
verifyStatus.value = false;
clearInterval(interval.value);
codeMsg.value = "发送验证码";
time.value = 60;
}
);
</script>
<style scoped lang="scss">
.login {

343
buyer/src/pages/Merchant.vue
View File

@@ -65,7 +65,7 @@
<div v-if="showFloorView">
<!-- 楼层装修部分 -->
<model-form ref="modelForm" :data="modelForm"></model-form>
<model-form ref="modelFormRef" :data="modelForm"></model-form>
</div>
@@ -120,9 +120,11 @@
</div>
</template>
<script>
<script setup>
import { Message } from "@/utils/message";
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import { ArrowDown, StarFilled } from '@element-plus/icons-vue';
import {getCateById, getDetailById} from "@/api/shopentry";
import {
@@ -130,130 +132,127 @@ import {
collectStore,
isStoreCollection,
} from "@/api/member";
import {goodsList} from "@/api/goods";
import {goodsList as goodsListApi} from "@/api/goods";
import Search from "@/components/Search";
import ModelForm from "@/components/indexDecorate/ModelForm";
import storage from "@/plugins/storage";
import {getFloorStoreData} from "@/api/index.js";
import { seckillByDay } from "@/api/promotion";
import imTalk from '@/components/mixes/talkIm'
import { getIMDetail } from "@/api/common";
import { getMemberMsg } from "@/api/login";
export default {
name: "Merchant",
components: { Search, ModelForm, StarFilled, ArrowDown },
mixins: [imTalk],
data() {
return {
// 店铺装修的内容
modelForm: {list: []}, // 楼层装修数据
topAdvert: {}, // 顶部广告
showNav: false, // 是否展示分类栏
topSearchShow: false, // 滚动后顶部搜索栏展示
carouselLarge: false, // 不同轮播分类尺寸
carouselOpacity: false, // 不同轮播分类样式,
enablePageData: false, //是否显示楼层装修内容
basePageData: false, //基础店铺信息
showFloorView: false, // 是否展示楼层装修（有有效装修数据时为 true）
storeMsg: {}, // 店铺信息
cateList: [], // 店铺分裂
goodsList: [], // 商品列表
total: 0, // 商品数量
params: {
defineOptions({ name: "Merchant" });
const route = useRoute();
const router = useRouter();
// 店铺装修的内容
const modelForm = ref({list: []}); // 楼层装修数据
const modelFormRef = ref(null);
const topAdvert = ref({}); // 顶部广告
const showNav = ref(false); // 是否展示分类栏
const topSearchShow = ref(false); // 滚动后顶部搜索栏展示
const carouselLarge = ref(false); // 不同轮播分类尺寸
const carouselOpacity = ref(false); // 不同轮播分类样式,
const enablePageData = ref(false); //是否显示楼层装修内容
const basePageData = ref(false); //基础店铺信息
const showFloorView = ref(false); // 是否展示楼层装修（有有效装修数据时为 true）
const storeMsg = ref({}); // 店铺信息
const cateList = ref([]); // 店铺分裂
const goodsList = ref([]); // 商品列表
const total = ref(0); // 商品数量
const params = reactive({
// 请求参数
pageNumber: 1,
pageSize: 20,
keyword: "",
storeId: this.$route.query.id,
storeId: route.query.id,
storeCatId: "",
},
cateName: "店铺推荐", // 分类名称
storeCollected: false, // 是否收藏
};
},
created() {
this.getStoreMsg();
window.onscroll = () => {
const top =
document.documentElement.scrollTop || document.body.scrollTop;
this.topSearchShow = top > 300;
};
},
methods: {
isFloorEnabled() {
const pageShow = this.storeMsg && this.storeMsg.pageShow;
});
const cateName = ref("店铺推荐"); // 分类名称
const storeCollected = ref(false); // 是否收藏
// 原 talkIm mixin 的 IM 链接
const IMLink = ref("");
function isFloorEnabled() {
const pageShow = storeMsg.value && storeMsg.value.pageShow;
return pageShow === "1" || pageShow === 1 || pageShow === "OPEN" || pageShow === true;
},
loadStoreGoodsView() {
this.showFloorView = false;
this.getGoodsList();
this.getCateList();
},
getIndexData() {
}
function loadStoreGoodsView() {
showFloorView.value = false;
getGoodsList();
getCateList();
}
function getIndexData() {
getFloorStoreData({
clientType: "PC",
num: this.$route.query.id,
num: route.query.id,
pageType: "STORE",
})
.then(async (res) => {
if (res.success && res.result?.pageData) {
try {
await this.parsePageData(res.result.pageData);
this.showFloorView = true;
await parsePageData(res.result.pageData);
showFloorView.value = true;
} catch {
this.loadStoreGoodsView();
loadStoreGoodsView();
}
} else {
this.loadStoreGoodsView();
loadStoreGoodsView();
}
})
.catch(() => {
this.loadStoreGoodsView();
loadStoreGoodsView();
});
},
async parsePageData(pageData) {
}
async function parsePageData(pageData) {
const dataJson = JSON.parse(pageData);
for (let i = 0; i < dataJson.list.length; i++) {
const type = dataJson.list[i].type;
if (type === "carousel2") {
this.carouselLarge = true;
carouselLarge.value = true;
} else if (type === "carousel1") {
this.carouselLarge = true;
this.carouselOpacity = true;
carouselLarge.value = true;
carouselOpacity.value = true;
} else if (type === "seckill") {
dataJson.list[i].options.list = await this.getListByDay();
dataJson.list[i].options.list = await getListByDay();
}
}
this.modelForm = dataJson;
modelForm.value = dataJson;
storage.setItem("navList", dataJson.list[1]);
this.showNav = true;
this.topAdvert = dataJson.list[0];
},
async getListByDay() {
showNav.value = true;
topAdvert.value = dataJson.list[0];
}
async function getListByDay() {
const res = await seckillByDay();
if (res.success && res.result?.length) {
return res.result;
}
return [];
},
}
checkStoreCollectionStatus() {
const storeId = this.storeMsg && this.storeMsg.storeId;
if (!storeId || !this.Cookies.getItem("userInfo")) {
function checkStoreCollectionStatus() {
const storeId = storeMsg.value && storeMsg.value.storeId;
if (!storeId || !storage.getItem("userInfo")) {
return;
}
isStoreCollection("STORE", storeId)
.then((res) => {
if (res.success && res.result) {
this.storeCollected = true;
storeCollected.value = true;
}
})
.catch(() => {
// 收藏状态查询失败不影响店铺页展示，静默处理
});
},
getStoreMsg() {
const storeId = this.$route.query.id;
}
function getStoreMsg() {
const storeId = route.query.id;
if (!storeId) {
Message.warning("店铺不存在");
return;
@@ -261,110 +260,120 @@ export default {
getDetailById(storeId)
.then((res) => {
if (res.success && res.result) {
this.storeMsg = res.result;
document.title = this.storeMsg.storeName || "店铺";
this.checkStoreCollectionStatus();
if (this.isFloorEnabled()) {
this.getIndexData();
storeMsg.value = res.result;
document.title = storeMsg.value.storeName || "店铺";
checkStoreCollectionStatus();
if (isFloorEnabled()) {
getIndexData();
} else {
this.loadStoreGoodsView();
loadStoreGoodsView();
}
} else {
this.storeMsg = { storeId };
this.loadStoreGoodsView();
storeMsg.value = { storeId };
loadStoreGoodsView();
}
})
.catch(() => {
this.storeMsg = { storeId };
this.loadStoreGoodsView();
storeMsg.value = { storeId };
loadStoreGoodsView();
});
},
getCateList() {
}
function getCateList() {
// 店铺分类
getCateById(this.$route.query.id).then((res) => {
getCateById(route.query.id).then((res) => {
if (res.success) {
this.cateList = res.result;
cateList.value = res.result;
}
});
},
getGoodsList() {
}
function getGoodsList() {
// 商品信息
goodsList(this.params)
goodsListApi(params)
.then((res) => {
if (res.success) {
this.goodsList = res.result.records;
this.total = res.result.total;
goodsList.value = res.result.records;
total.value = res.result.total;
}
})
.catch((err) => {
console.warn('获取商品列表失败', err);
});
},
goGoodsDetail(skuId, goodsId) {
}
function goGoodsDetail(skuId, goodsId) {
// 跳转商品详情
let routeUrl = this.$router.resolve({
let routeUrl = router.resolve({
path: "/goodsDetail",
query: {skuId, goodsId},
});
window.open(routeUrl.href, "_blank");
},
search(val) {
}
function search(val) {
// 搜索本店商品
this.params.keyword = val;
this.getGoodsList();
},
searchByCate(cate) {
params.keyword = val;
getGoodsList();
}
function searchByCate(cate) {
// 搜索同分类下商品
this.params.storeCatId = cate.id;
this.params.pageNumber = 1;
this.cateName = cate.labelName;
this.getGoodsList();
},
isCateActive(cate) {
if (!cate || !this.params.storeCatId) return false;
if (this.params.storeCatId === cate.id) return true;
return Array.isArray(cate.children) && cate.children.some((sec) => sec.id === this.params.storeCatId);
},
formatGrade(grade) {
params.storeCatId = cate.id;
params.pageNumber = 1;
cateName.value = cate.labelName;
getGoodsList();
}
function isCateActive(cate) {
if (!cate || !params.storeCatId) return false;
if (params.storeCatId === cate.id) return true;
return Array.isArray(cate.children) && cate.children.some((sec) => sec.id === params.storeCatId);
}
function formatGrade(grade) {
if (grade === null || grade === undefined || grade === "") return 100;
const num = Number(grade);
if (Number.isNaN(num)) return 100;
const fixed = Number(num.toFixed(1));
return fixed % 1 === 0 ? fixed.toFixed(0) : String(fixed);
},
// 分页 修改页码
changePageNum(val) {
this.params.pageNumber = val;
this.getGoodsList();
},
// 分页 修改页数
changePageSize(val) {
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getGoodsList();
},
async collect() {
}
// 分页 修改页码
function changePageNum(val) {
params.pageNumber = val;
getGoodsList();
}
// 分页 修改页数
function changePageSize(val) {
params.pageNumber = 1;
params.pageSize = val;
getGoodsList();
}
async function collect() {
// 收藏店铺
const storeId = this.storeMsg && this.storeMsg.storeId;
const storeId = storeMsg.value && storeMsg.value.storeId;
if (!storeId) {
return;
}
if (!this.Cookies.getItem("userInfo")) {
if (!storage.getItem("userInfo")) {
Message.warning("请先登录");
this.$router.push("/login");
router.push("/login");
return;
}
try {
if (this.storeCollected) {
if (storeCollected.value) {
const cancel = await cancelStoreCollect("STORE", storeId);
if (cancel.success) {
Message.success("已取消收藏");
this.storeCollected = false;
storeCollected.value = false;
}
} else {
const collect = await collectStore("STORE", storeId);
if (collect.success || collect.code === 200) {
this.storeCollected = true;
storeCollected.value = true;
Message.success(
"收藏店铺成功,可以前往个人中心我的收藏查看"
);
@@ -373,11 +382,75 @@ export default {
} catch (err) {
const msg = err?.message || err?.data?.message || "";
if (msg.includes("重复收藏")) {
this.storeCollected = true;
storeCollected.value = true;
}
}
}
// 原 talkIm mixin 的登录提示
function promptLogin() {
Modal.confirm({
title: "温馨提示",
content: "请登录后执行此操作",
okText: "立即登录",
cancelText: "取消",
onOk: () => {
router.push({
path: "/login",
query: {
rePath: route.path,
query: JSON.stringify(route.query || {}),
},
});
},
});
}
// 获取im信息（原 talkIm mixin）
async function getIMDetailMethods() {
let res = await getIMDetail();
if (res.success) {
IMLink.value = res.result;
}
}
// 跳转im客服（原 talkIm mixin）
async function IMService(id, goodsId, skuId) {
if (!storage.getItem("accessToken")) {
promptLogin();
return;
}
try {
await getIMDetailMethods();
const userInfo = await getMemberMsg();
if (!userInfo.success) {
promptLogin();
return;
}
const accessToken = storage.getItem("accessToken");
const storeId = id || storeMsg.value?.storeId;
const baseUrl = `${IMLink.value}?token=${accessToken}&id=${storeId}`;
if (goodsId && skuId) {
window.open(`${baseUrl}&goodsId=${goodsId}&skuId=${skuId}`);
} else {
window.open(baseUrl);
}
} catch {
// token 过期等场景由 request 拦截器处理；未登录时避免未捕获异常
if (!storage.getItem("accessToken")) {
promptLogin();
}
}
}
getStoreMsg();
window.onscroll = () => {
const top =
document.documentElement.scrollTop || document.body.scrollTop;
topSearchShow.value = top > 300;
};
</script>

6
buyer/src/pages/NotFound.vue
View File

@@ -11,10 +11,8 @@
</div>
</template>
<script>
export default {
name: "NotFound",
};
<script setup>
defineOptions({ name: "NotFound" });
</script>
<style scoped lang="scss">

25
buyer/src/pages/ShoppingCart.vue
View File

@@ -45,21 +45,26 @@ export default {
window.scrollTo(0, 0);
next();
},
data () {
return {
detail: {} // 商品详情
};
},
mounted () {
const { skuId, goodsId, thumbnail, goodsName } = this.$route.query;
this.detail = {
};
</script>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const detail = ref({}); // 商品详情
onMounted(() => {
const { skuId, goodsId, thumbnail, goodsName } = route.query;
detail.value = {
skuId,
goodsId,
thumbnail,
goodsName
};
}
};
});
</script>
<style scoped lang="scss">

131
buyer/src/pages/SignUp.vue
View File

@@ -3,7 +3,7 @@
<div class="top-content">
<div class="top-inner">
<div class="logo-box">
<img :src="$store.state.logoImg" @click="$router.push('/')" />
<img :src="logoImg" @click="$router.push('/')" />
<div>欢迎注册</div>
</div>
<div class="to-login">已有账号？<a @click.stop="$router.push('login')">立即登录</a></div>
@@ -17,7 +17,7 @@
/>
<div class="signup-card">
<el-form
ref="formRegist"
ref="formRegistRef"
:model="formRegist"
:rules="ruleInline"
class="signup-form"
@@ -91,8 +91,9 @@
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@/utils/message";
import * as RegExp from '@/plugins/RegExp.js';
import { md5 } from '@/plugins/md5.js';
@@ -101,21 +102,23 @@ import { sendSms } from '@/api/common.js';
import Verify from '@/components/verify';
import { User, Lock, Iphone, Document } from '@element-plus/icons-vue';
import config from '@/config';
export default {
name: 'SignUp',
components: { Verify, User, Lock, Iphone, Document },
data () {
return {
config,
year: new Date().getFullYear(),
formRegist: {
import { useAppStore } from '@/stores/app';
defineOptions({ name: 'SignUp' });
const router = useRouter();
const appStore = useAppStore();
const logoImg = computed(() => appStore.logoImg);
const year = new Date().getFullYear();
const formRegist = reactive({
// 注册表单
mobilePhone: '',
code: '',
username: '',
password: ''
},
ruleInline: {
});
const ruleInline = reactive({
// 验证规则
username: [{ required: true, message: '请输入用户名' }],
password: [
@@ -131,30 +134,32 @@ export default {
}
],
code: [{ required: true, message: '请输入手机验证码' }]
},
verifyStatus: false, // 是否验证通过
verifyType: 'REGISTER', // 验证状态
codeMsg: '发送验证码', // 提示文字
interval: '', // 定时器
time: 60 // 倒计时
};
},
methods: {
hideVerify() {
this.$refs.verify?.close?.();
},
// 注册
handleRegist () {
this.$refs.formRegist.validate((valid) => {
});
const verifyStatus = ref(false); // 是否验证通过
const verifyType = ref('REGISTER'); // 验证状态
const codeMsg = ref('发送验证码'); // 提示文字
const interval = ref(''); // 定时器
const time = ref(60); // 倒计时
const formRegistRef = ref(null);
const verify = ref(null);
function hideVerify() {
verify.value?.close?.();
}
// 注册
function handleRegist () {
formRegistRef.value.validate((valid) => {
if (!valid) {
return;
}
const data = JSON.parse(JSON.stringify(this.formRegist));
const data = JSON.parse(JSON.stringify(formRegist));
data.password = md5(data.password);
apiLogin.regist(data).then((res) => {
if (res.success) {
Message.success('注册成功!');
this.$router.push('login');
router.push('login');
} else {
Message.warning(res.message || '注册失败');
}
@@ -164,57 +169,59 @@ export default {
}).catch(() => {
// 表单校验使用回调模式，此 catch 仅为兜底
});
},
// 发送短信验证码
sendCode () {
if (this.time !== 60) return;
if (this.formRegist.mobilePhone === '') {
}
// 发送短信验证码
function sendCode () {
if (time.value !== 60) return;
if (formRegist.mobilePhone === '') {
Message.warning('请先填写手机号');
return;
}
if (!RegExp.mobile.test(this.formRegist.mobilePhone)) {
if (!RegExp.mobile.test(formRegist.mobilePhone)) {
Message.warning('请输入正确的手机号');
return;
}
this.$refs.verify?.init();
},
dispatchSms () {
verify.value?.init();
}
function dispatchSms () {
sendSms({
mobile: this.formRegist.mobilePhone,
mobile: formRegist.mobilePhone,
verificationEnums: 'REGISTER'
}).then(res => {
if (res.success) {
Message.success('验证码发送成功');
this.interval = setInterval(() => {
this.time--;
if (this.time === 0) {
this.time = 60;
this.codeMsg = '重新发送';
this.verifyStatus = false;
clearInterval(this.interval);
interval.value = setInterval(() => {
time.value--;
if (time.value === 0) {
time.value = 60;
codeMsg.value = '重新发送';
verifyStatus.value = false;
clearInterval(interval.value);
} else {
this.codeMsg = this.time;
codeMsg.value = time.value;
}
}, 1000);
} else {
this.verifyStatus = false;
verifyStatus.value = false;
Message.warning(res.message || '验证码发送失败');
}
}).catch(() => {
this.verifyStatus = false;
verifyStatus.value = false;
});
},
verifyChange (con) {
}
function verifyChange (con) {
if (!con.status) return;
this.hideVerify();
this.verifyStatus = true;
this.dispatchSms();
}
},
mounted () {
this.$refs.formRegist.resetFields();
}
};
hideVerify();
verifyStatus.value = true;
dispatchSms();
}
onMounted(() => {
formRegistRef.value.resetFields();
});
</script>
<style scoped lang="scss">
.sign-up {

34
buyer/src/pages/Topic.vue
View File

@@ -4,33 +4,31 @@
</div>
</template>
<script>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import Index from './Index.vue'
import { getTopicData } from '@/api/index'
export default {
data() {
return {
pageData: ""
}
},
components: { Index },
mounted() {
// 接收id进行查询
const id = this.$route.query.id
this.init(id)
},
methods: {
async init(id) {
const route = useRoute()
const pageData = ref("")
async function init(id) {
const res = await getTopicData(id)
if (res.success) {
// 直接复用首页就行
if (res.result.pageData) {
this.pageData = JSON.parse(res.result.pageData)
}
}
pageData.value = JSON.parse(res.result.pageData)
}
}
}
onMounted(() => {
// 接收id进行查询
const id = route.query.id
init(id)
})
</script>
<style lang="scss" scoped></style>

45
buyer/src/pages/article/detail.vue
View File

@@ -10,35 +10,36 @@
</div>
</template>
<script>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { articleDetail } from "@/api/common.js";
import config from "@/config/index";
export default {
data() {
return {
config,
detail: "",
};
},
mounted() {
this.init();
},
methods: {
back() {
this.$router.push("/");
},
// 初始化文章
init() {
const id = this.$route.query.id;
const route = useRoute();
const router = useRouter();
const configData = ref(config);
const detail = ref("");
function back() {
router.push("/");
}
// 初始化文章
function init() {
const id = route.query.id;
articleDetail(id).then((res) => {
if (res.success) {
this.detail = res.result;
detail.value = res.result;
}
});
},
},
};
}
onMounted(() => {
init();
});
</script>
<style lang="scss" scoped>

114
buyer/src/pages/article/index.vue
View File

@@ -48,87 +48,89 @@
</div>
</template>
<script>
import { articleCateList, articleDetail, articleList } from '@/api/common.js'
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { articleCateList, articleDetail, articleList as fetchArticleList } from '@/api/common.js'
export default {
name: 'ArticleIndex',
data () {
return {
list: [],
detail: '',
articleList: [],
activeName: '1347456734864367616',
openName: [],
menuKey: 0,
params: {
defineOptions({ name: 'ArticleIndex' })
const route = useRoute()
const list = ref([])
const detail = ref('')
const articleList = ref([])
const activeName = ref('1347456734864367616')
const openName = ref([])
const menuKey = ref(0)
const params = reactive({
pageNumber: 1,
pageSize: 100,
categoryId: '',
sort: 'sort'
},
showList: true
};
},
methods: {
onSelect (id) {
this.getList(id)
this.detail = ''
this.showList = true
},
getCateList () {
})
const showList = ref(true)
function onSelect (id) {
getList(id)
detail.value = ''
showList.value = true
}
function getCateList () {
articleCateList().then(res => {
if (res.success) {
this.list = res.result || []
this.openName = []
if (this.$route.query.id && this.detail && this.detail.categoryId) {
this.activeName = this.detail.categoryId
this.list.forEach(e => {
list.value = res.result || []
openName.value = []
if (route.query.id && detail.value && detail.value.categoryId) {
activeName.value = detail.value.categoryId
list.value.forEach(e => {
const children = e.children || []
const hitParent = String(e.id) === String(this.activeName)
const hitChild = children.some(i => i && String(i.id) === String(this.activeName))
const hitParent = String(e.id) === String(activeName.value)
const hitChild = children.some(i => i && String(i.id) === String(activeName.value))
if ((hitParent || hitChild) && children.length) {
this.openName.push(String(e.id))
openName.value.push(String(e.id))
}
})
} else if (this.list[0] && this.list[0].id) {
this.activeName = this.list[0].id
if (this.list[0].children && this.list[0].children.length) {
this.openName.push(String(this.list[0].id))
} else if (list.value[0] && list.value[0].id) {
activeName.value = list.value[0].id
if (list.value[0].children && list.value[0].children.length) {
openName.value.push(String(list.value[0].id))
}
}
this.menuKey++
if (this.activeName) {
this.getList(this.activeName)
menuKey.value++
if (activeName.value) {
getList(activeName.value)
}
}
})
},
getList (id) {
this.params.categoryId = id
articleList(this.params).then(res => {
}
function getList (id) {
params.categoryId = id
fetchArticleList(params).then(res => {
if (res.success) {
this.articleList = res.result.records
articleList.value = res.result.records
}
})
},
async getDetail (id) {
}
async function getDetail (id) {
await articleDetail(id).then(res => {
if (res.success) {
this.detail = res.result
this.showList = false
detail.value = res.result
showList.value = false
}
})
}
},
async mounted () {
const articleId = this.$route.query.id
}
onMounted(async () => {
const articleId = route.query.id
if (articleId) {
await this.getDetail(articleId)
await getDetail(articleId)
}
this.getCateList()
}
};
getCateList()
})
</script>
<style scoped lang="scss">

110
buyer/src/pages/home/Main.vue
View File

@@ -44,62 +44,53 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Bell } from "@element-plus/icons-vue";
import storage from "@/plugins/storage";
import { getOrderList } from "@/api/order";
import { afterSaleList, getMembersWallet, memberCouponList } from "@/api/member";
import { refreshUnreadMessage } from "@/utils/unreadMessage";
import { useAppStore } from "@/stores/app";
defineOptions({ name: "UserCenterHome" });
const router = useRouter();
const appStore = useAppStore();
function totalOf(res) {
return res && res.success ? Number(res.result && res.result.total) || 0 : 0;
}
export default {
name: "UserCenterHome",
components: { Bell },
data() {
return {
displayName: "会员",
waitPay: 0,
waitShip: 0,
waitReceive: 0,
afterSale: 0,
couponCount: 0,
balance: 0,
};
},
computed: {
unreadMsg() {
return Number(this.$store.state.unreadMsg) || 0;
},
unreadLabel() {
return this.unreadMsg > 99 ? "99+" : String(this.unreadMsg);
},
orderStats() {
return [
{ key: "pay", label: "待付款", count: this.waitPay, action: () => this.goOrder("WAIT_PAY") },
{ key: "ship", label: "待发货", count: this.waitShip, action: () => this.goOrder("WAIT_SHIP") },
{ key: "receive", label: "待收货", count: this.waitReceive, action: () => this.goOrder("WAIT_USE") },
{ key: "after", label: "售后", count: this.afterSale, action: () => this.go("AfterSale") },
];
},
},
mounted() {
this.readUser();
this.loadSummary();
},
methods: {
readUser() {
const displayName = ref("会员");
const waitPay = ref(0);
const waitShip = ref(0);
const waitReceive = ref(0);
const afterSale = ref(0);
const couponCount = ref(0);
const balance = ref(0);
const unreadMsg = computed(() => appStore.unreadMsg);
const unreadLabel = computed(() => (unreadMsg.value > 99 ? "99+" : String(unreadMsg.value)));
const orderStats = computed(() => [
{ key: "pay", label: "待付款", count: waitPay.value, action: () => goOrder("WAIT_PAY") },
{ key: "ship", label: "待发货", count: waitShip.value, action: () => goOrder("WAIT_SHIP") },
{ key: "receive", label: "待收货", count: waitReceive.value, action: () => goOrder("WAIT_USE") },
{ key: "after", label: "售后", count: afterSale.value, action: () => go("AfterSale") },
]);
function readUser() {
try {
const raw = storage.getItem("userInfo");
const user = raw ? JSON.parse(raw) : {};
this.displayName = user.nickName || user.username || "会员";
displayName.value = user.nickName || user.username || "会员";
} catch {
this.displayName = "会员";
displayName.value = "会员";
}
},
loadSummary() {
}
function loadSummary() {
const page = { pageNumber: 1, pageSize: 1 };
Promise.all([
getOrderList({ ...page, tag: "WAIT_PAY" }).catch(() => null),
@@ -109,23 +100,28 @@ export default {
memberCouponList({ ...page, memberCouponStatus: "NEW" }).catch(() => null),
getMembersWallet().catch(() => null),
refreshUnreadMessage(),
]).then(([pay, ship, receive, afterSale, coupon, wallet]) => {
this.waitPay = totalOf(pay);
this.waitShip = totalOf(ship);
this.waitReceive = totalOf(receive);
this.afterSale = totalOf(afterSale);
this.couponCount = totalOf(coupon);
this.balance = wallet && wallet.success ? wallet.result.memberWallet || 0 : 0;
]).then(([pay, ship, receive, afterSaleRes, coupon, wallet]) => {
waitPay.value = totalOf(pay);
waitShip.value = totalOf(ship);
waitReceive.value = totalOf(receive);
afterSale.value = totalOf(afterSaleRes);
couponCount.value = totalOf(coupon);
balance.value = wallet && wallet.success ? wallet.result.memberWallet || 0 : 0;
});
},
go(name) {
this.$router.push({ name });
},
goOrder(tag) {
this.$router.push({ name: "MyOrder", query: { tag } });
},
},
};
}
function go(name) {
router.push({ name });
}
function goOrder(tag) {
router.push({ name: "MyOrder", query: { tag } });
}
onMounted(() => {
readUser();
loadSummary();
});
</script>
<style scoped lang="scss">

224
buyer/src/pages/home/memberCenter/AccountSafe.vue
View File

@@ -77,191 +77,187 @@
</div>
</template>
<script>
<script setup>
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Message, Modal } from "@/utils/message";
import { Key, Link } from '@element-plus/icons-vue';
// import { getPwdStatus } from '@/api/account';
import storage from '@/plugins/storage'
import { bindThirdAccount, getThirdAccountBindList, getWechatH5QrCode, unbindThirdAccount } from '@/api/login.js'
export default {
components: { Key, Link },
name: 'AccountSafe',
data () {
return {
pwdStatus: '',
connectLoading: false,
bindModalVisible: false,
bindSubmitLoading: false,
connectBoundTypes: [],
thirdAccountTypes: [
defineOptions({ name: 'AccountSafe' });
const router = useRouter();
const pwdStatus = ref('');
const connectLoading = ref(false);
const bindModalVisible = ref(false);
const bindSubmitLoading = ref(false);
const connectBoundTypes = ref([]);
const thirdAccountTypes = ref([
{ type: 'WECHAT', label: '微信' }
],
qrCodeLoading: false,
qrCodeBase64: '',
bindForm: {
]);
const qrCodeLoading = ref(false);
const qrCodeBase64 = ref('');
const bindForm = reactive({
type: '',
typeLabel: '',
unionID: ''
}
}
},
computed: {
wechatConnect () {
return this.thirdAccountTypes[0]
},
qrCodeSrc () {
if (!this.qrCodeBase64) return ''
if (this.qrCodeBase64.startsWith('data:image')) return this.qrCodeBase64
return `data:image/png;base64,${this.qrCodeBase64}`
},
bindModalOkText () {
if (this.bindForm.type === 'WECHAT') return '我已完成绑定'
});
const wechatConnect = computed(() => thirdAccountTypes.value[0]);
const qrCodeSrc = computed(() => {
if (!qrCodeBase64.value) return ''
if (qrCodeBase64.value.startsWith('data:image')) return qrCodeBase64.value
return `data:image/png;base64,${qrCodeBase64.value}`
});
const bindModalOkText = computed(() => {
if (bindForm.type === 'WECHAT') return '我已完成绑定'
return '确定'
}
},
mounted () {
this.getPwdStatus()
this.refreshConnectBinds()
},
methods: {
// 设置支付密码
goModifyPwd () {
this.$router.push({name: 'ModifyPwd', query: { status: 2 }})
},
modifyPwd () { // 修改密码
this.$router.push({name: 'ModifyPwd', query: { status: 1 }})
},
// 获取密码状态
getPwdStatus () {},
// getPwdStatus () {
// getPwdStatus().then(res => {
// if (res) {
// this.pwdStatus = '修改密码'
// } else {
// this.pwdStatus = '设置密码'
// }
// });
// }
isBound (type) {
return this.connectBoundTypes.includes(type)
},
refreshConnectBinds () {
this.connectLoading = true
});
// 设置支付密码
function goModifyPwd () {
router.push({name: 'ModifyPwd', query: { status: 2 }})
}
function modifyPwd () { // 修改密码
router.push({name: 'ModifyPwd', query: { status: 1 }})
}
// 获取密码状态
function getPwdStatus () {}
// function getPwdStatus () {
// getPwdStatus().then(res => {
// if (res) {
// pwdStatus.value = '修改密码'
// } else {
// pwdStatus.value = '设置密码'
// }
// });
// }
function isBound (type) {
return connectBoundTypes.value.includes(type)
}
function refreshConnectBinds () {
connectLoading.value = true
return getThirdAccountBindList()
.then(res => {
if (res && res.success) {
this.connectBoundTypes = Array.isArray(res.result) ? res.result : []
connectBoundTypes.value = Array.isArray(res.result) ? res.result : []
}
})
.finally(() => {
this.connectLoading = false
connectLoading.value = false
})
},
openBindModal (item) {
this.bindForm.type = item.type
this.bindForm.typeLabel = item.label
this.bindForm.unionID = ''
this.qrCodeBase64 = ''
this.bindModalVisible = true
}
function openBindModal (item) {
bindForm.type = item.type
bindForm.typeLabel = item.label
bindForm.unionID = ''
qrCodeBase64.value = ''
bindModalVisible.value = true
if (item.type === 'WECHAT') {
this.fetchWechatQrCode()
fetchWechatQrCode()
}
},
resetBindForm () {
this.bindForm.type = ''
this.bindForm.typeLabel = ''
this.bindForm.unionID = ''
this.qrCodeLoading = false
this.qrCodeBase64 = ''
this.bindSubmitLoading = false
},
fetchWechatQrCode () {
if (this.bindForm.type !== 'WECHAT') return
}
function resetBindForm () {
bindForm.type = ''
bindForm.typeLabel = ''
bindForm.unionID = ''
qrCodeLoading.value = false
qrCodeBase64.value = ''
bindSubmitLoading.value = false
}
function fetchWechatQrCode () {
if (bindForm.type !== 'WECHAT') return
const rawUserInfo = storage.getItem('userInfo')
const userInfo = rawUserInfo ? JSON.parse(rawUserInfo) : null
const userId = userInfo && userInfo.id ? String(userInfo.id) : ''
if (!userId) {
this.qrCodeBase64 = ''
qrCodeBase64.value = ''
Message.error('未获取到当前用户ID，请重新登录后重试')
return
}
this.qrCodeLoading = true
qrCodeLoading.value = true
getWechatH5QrCode({ scene: userId })
.then(res => {
if (res && res.success) {
this.qrCodeBase64 = res.result || ''
qrCodeBase64.value = res.result || ''
return
}
this.qrCodeBase64 = ''
qrCodeBase64.value = ''
Message.error((res && res.message) || '二维码获取失败')
})
.catch(() => {
this.qrCodeBase64 = ''
qrCodeBase64.value = ''
})
.finally(() => {
this.qrCodeLoading = false
qrCodeLoading.value = false
})
},
submitBind () {
if (this.bindSubmitLoading) return
if (this.bindForm.type === 'WECHAT' && !this.bindForm.unionID) {
this.bindSubmitLoading = true
this.refreshConnectBinds()
}
function submitBind () {
if (bindSubmitLoading.value) return
if (bindForm.type === 'WECHAT' && !bindForm.unionID) {
bindSubmitLoading.value = true
refreshConnectBinds()
.then(() => {
if (this.isBound(this.bindForm.type)) {
if (isBound(bindForm.type)) {
Message.success('绑定成功')
this.bindModalVisible = false
this.resetBindForm()
bindModalVisible.value = false
resetBindForm()
return
}
Message.warning('暂未检测到绑定，请扫码后重试')
this.$nextTick(() => {
this.bindModalVisible = true
nextTick(() => {
bindModalVisible.value = true
})
})
.finally(() => {
this.bindSubmitLoading = false
bindSubmitLoading.value = false
})
return
}
if (!this.bindForm.type) {
if (!bindForm.type) {
Message.error('绑定类型不能为空')
return
}
if (!this.bindForm.unionID) {
if (!bindForm.unionID) {
Message.error('OpenID/UnionID 不能为空')
this.$nextTick(() => {
this.bindModalVisible = true
nextTick(() => {
bindModalVisible.value = true
})
return
}
this.bindSubmitLoading = true
bindThirdAccount({ unionID: this.bindForm.unionID, type: this.bindForm.type })
bindSubmitLoading.value = true
bindThirdAccount({ unionID: bindForm.unionID, type: bindForm.type })
.then(() => {
Message.success('绑定成功')
this.bindModalVisible = false
this.resetBindForm()
this.refreshConnectBinds()
bindModalVisible.value = false
resetBindForm()
refreshConnectBinds()
})
.finally(() => {
this.bindSubmitLoading = false
bindSubmitLoading.value = false
})
},
confirmUnbind (item) {
}
function confirmUnbind (item) {
Modal.confirm({
title: '解绑确认',
content: `<p>确定解绑 ${item.label} 吗？</p>`,
onOk: () => {
unbindThirdAccount({ type: item.type }).then(() => {
Message.success('解绑成功')
this.refreshConnectBinds()
refreshConnectBinds()
})
}
})
}
}
}
onMounted(() => {
getPwdStatus()
refreshConnectBinds()
});
</script>
<style scoped lang="scss">

81
buyer/src/pages/home/memberCenter/CommentList.vue
View File

@@ -50,52 +50,55 @@
</div>
</template>
<script>
import {evolutionList} from '@/api/order.js';
export default {
name: 'CommentList',
data () {
return {
commentWay: [`待评价`, `待追评`, `已评价`], // 评价分类
loading: false, // 加载状态
list: [], // 评价列表
total: 0, // 评价总数
params: { // 请求参数
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { evolutionList } from '@/api/order.js';
defineOptions({ name: 'CommentList' });
const router = useRouter();
const commentWay = ref([`待评价`, `待追评`, `已评价`]); // 评价分类
const loading = ref(false); // 加载状态
const list = ref([]); // 评价列表
const total = ref(0); // 评价总数
const params = reactive({ // 请求参数
pageNumber: 1,
pageSize: 20
}
};
},
mounted () {
this.getList()
},
methods: {
getList () { // 获取评价列表
evolutionList(this.params).then(res => {
});
function getList () { // 获取评价列表
evolutionList(params).then(res => {
if (res.success) {
const list = res.result.records;
list.forEach(element => {
const records = res.result.records;
records.forEach(element => {
element.descriptionScore = Number(element.descriptionScore)
});
this.list = list;
this.total = res.result.total
list.value = records;
total.value = res.result.total
}
})
},
changePageNum (val) { // 修改页码
this.params.pageNumber = val;
this.getList()
},
changePageSize (val) { // 修改页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList()
},
evaluateDetail (id) { // 跳转评价详情
this.$router.push({path: '/home/evalDetail', query: { id }})
}
}
};
}
function changePageNum (val) { // 修改页码
params.pageNumber = val;
getList()
}
function changePageSize (val) { // 修改页数
params.pageNumber = 1;
params.pageSize = val;
getList()
}
function evaluateDetail (id) { // 跳转评价详情
router.push({path: '/home/evalDetail', query: { id }})
}
onMounted(() => {
getList()
});
</script>
<style scoped lang="scss">

87
buyer/src/pages/home/memberCenter/ComplainDetail.vue
View File

@@ -129,75 +129,74 @@
</UserCenterLayout>
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import { View } from '@element-plus/icons-vue';
import {getComplainDetail} from '@/api/member.js';
import {communication} from '@/api/order';
export default {
components: { View },
data () {
return {
detail: {}, // 评价详情
visible: false, // 图片预览
previewImage: '', // 预览图片地址
loading: false, // 加载状态
submitLoading: false, // 回复消息loading
// 状态
statusLabel: {
const route = useRoute();
const router = useRouter();
const detail = ref({}); // 评价详情
const visible = ref(false); // 图片预览
const previewImage = ref(''); // 预览图片地址
const loading = ref(false); // 加载状态
const submitLoading = ref(false); // 回复消息loading
// 状态
const statusLabel = {
NO_APPLY: '未申请',
APPLYING: '申请中',
COMPLETE: '已完成',
EXPIRED: '已失效',
CANCEL: '已取消',
NEW: '待审核'
},
// 商家回复内容
params: {
};
// 商家回复内容
const params = reactive({
content: '',
complainId: ''
}
}
},
methods: {
getDetail () { // 获取投诉详情
getComplainDetail(this.$route.query.id).then(res => {
if (res.success) this.detail = res.result
});
function getDetail () { // 获取投诉详情
getComplainDetail(route.query.id).then(res => {
if (res.success) detail.value = res.result
})
},
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = this.$router.resolve({
}
function goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = router.resolve({
path: '/goodsDetail',
query: {skuId, goodsId}
})
window.open(routerUrl.href, '_blank')
},
handleView (name) { // 预览图片
this.previewImage = name;
this.visible = true;
},
// 回复消息
handleSubmit () {
if (this.params.content === '') {
}
function handleView (name) { // 预览图片
previewImage.value = name;
visible.value = true;
}
// 回复消息
function handleSubmit () {
if (params.content === '') {
Message.error('请填写对话内容');
return;
}
this.submitLoading = true;
this.params.complainId = this.$route.query.id;
communication(this.params).then((res) => {
this.submitLoading = false;
submitLoading.value = true;
params.complainId = route.query.id;
communication(params).then((res) => {
submitLoading.value = false;
if (res.success) {
Message.success('对话成功');
this.params.content = '';
this.getDetail();
params.content = '';
getDetail();
}
});
}
},
mounted () {
this.getDetail()
}
}
onMounted(() => {
getDetail()
})
</script>
<style lang="scss" scoped>
.speak-way {

87
buyer/src/pages/home/memberCenter/ComplainList.vue
View File

@@ -58,53 +58,53 @@
</div>
</template>
<script>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import {complainList, clearComplain} from '@/api/member.js';
export default {
name: 'ComplainList',
data () {
return {
loading: false, // 加载状态
list: [], // 投诉列表
statusLabel: { // 投诉状态
import { complainList, clearComplain } from '@/api/member.js';
defineOptions({ name: 'ComplainList' });
const router = useRouter();
const loading = ref(false); // 加载状态
const list = ref([]); // 投诉列表
const statusLabel = { // 投诉状态
NO_APPLY: '未申请',
APPLYING: '申请中',
COMPLETE: '已完成',
EXPIRED: '已失效',
CANCEL: '已取消',
NEW: '新订单'
},
total: 0, // 投诉总数
params: { // 请求参数
};
const total = ref(0); // 投诉总数
const params = reactive({ // 请求参数
pageNumber: 1,
pageSize: 20
}
};
},
mounted () {
this.getList()
},
methods: {
getList () { // 获取投诉列表
complainList(this.params).then(res => {
});
function getList() { // 获取投诉列表
complainList(params).then(res => {
if (res.success) {
const list = res.result.records;
this.list = list;
this.total = res.result.total
list.value = res.result.records;
total.value = res.result.total
}
})
},
changePageNum (val) { // 改变页码
this.params.pageNumber = val;
this.getList()
},
changePageSize (val) { // 改变页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList()
},
cancel (id) { // 取消投诉
}
function changePageNum(val) { // 改变页码
params.pageNumber = val;
getList()
}
function changePageSize(val) { // 改变页数
params.pageNumber = 1;
params.pageSize = val;
getList()
}
function cancel(id) { // 取消投诉
Modal.confirm({
title: '取消投诉',
content: '确定取消投诉吗？',
@@ -112,18 +112,21 @@ export default {
clearComplain(id).then((res) => {
if (res.success) {
Message.success('取消投诉成功');
this.getList();
getList();
}
});
},
onCancel: () => { }
});
},
goDetail (id) { // 跳转投诉详情
this.$router.push({path: '/home/complainDetail', query: { id }})
}
}
};
}
function goDetail(id) { // 跳转投诉详情
router.push({ path: '/home/complainDetail', query: { id } })
}
onMounted(() => {
getList()
});
</script>
<style scoped lang="scss">

156
buyer/src/pages/home/memberCenter/Favorites.vue
View File

@@ -84,116 +84,124 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Modal } from "@/utils/message";
import { collectList, cancelCollect, storeCollectList, cancelStoreCollect } from '@/api/member.js'
export default {
name: 'Favorites',
props: {
defineOptions({ name: 'Favorites' });
const props = defineProps({
homePage: {
type: Boolean,
default: false
}
},
data() {
return {
favoriteWay: ['收藏商品', '收藏店铺'], // 收藏分类
list: [], // 收藏列表
total: 0, // 收藏总数
params: { // 请求参数
});
const route = useRoute();
const router = useRouter();
const favoriteWay = ref(['收藏商品', '收藏店铺']); // 收藏分类
const list = ref([]); // 收藏列表
const total = ref(0); // 收藏总数
const params = reactive({ // 请求参数
pageNumber: 1,
pageSize: 100,
type: this.$route.query.type || 'GOODS'
},
spinShow: false // 加载状态
};
},
computed: {
activeTabIndex() {
return this.params.type === 'STORE' ? 1 : 0;
},
},
type: route.query.type || 'GOODS'
});
const spinShow = ref(false); // 加载状态
methods: {
loadFavorites() {
if (this.params.type === 'STORE') {
this.getStoreList();
const activeTabIndex = computed(() => {
return params.type === 'STORE' ? 1 : 0;
});
function loadFavorites() {
if (params.type === 'STORE') {
getStoreList();
} else {
this.getList();
getList();
}
},
getList() { // 获取商品收藏列表
this.spinShow = true
collectList(this.params).then(res => {
}
function getList() { // 获取商品收藏列表
spinShow.value = true
collectList(params).then(res => {
if (res.success && res.result) {
this.list = res.result.records || [];
list.value = res.result.records || [];
}
}).catch(() => {
this.list = [];
list.value = [];
}).finally(() => {
this.spinShow = false
spinShow.value = false
})
},
getStoreList() { // 获取店铺收藏列表
this.spinShow = true
storeCollectList(this.params).then(res => {
}
function getStoreList() { // 获取店铺收藏列表
spinShow.value = true
storeCollectList(params).then(res => {
if (res.success && res.result) {
this.list = res.result.records || [];
list.value = res.result.records || [];
}
}).catch(() => {
this.list = [];
list.value = [];
}).finally(() => {
this.spinShow = false
spinShow.value = false
})
},
change(index) { // tab栏切换
if (index === 0) { this.params.type = 'GOODS', this.getList() }
if (index === 1) { this.params.type = 'STORE', this.getStoreList() }
},
cancel(id) { // 取消收藏
let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
}
function change(index) { // tab栏切换
if (index === 0) { params.type = 'GOODS', getList() }
if (index === 1) { params.type = 'STORE', getStoreList() }
}
function cancel(id) { // 取消收藏
let typeName = params.type === 'GOODS' ? '商品' : '店铺'
Modal.confirm({
title: '取消收藏',
content: `确定取消收藏该${typeName}吗？`,
onOk: () => {
cancelCollect(this.params.type, id).then(res => {
cancelCollect(params.type, id).then(res => {
if (res.success) {
this.getList();
getList();
}
})
}
});
},
cancelStore(id) { // 取消收藏
let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
}
function cancelStore(id) { // 取消收藏
let typeName = params.type === 'GOODS' ? '商品' : '店铺'
Modal.confirm({
title: '取消收藏',
content: `确定取消收藏该${typeName}吗？`,
onOk: () => {
cancelStoreCollect(this.params.type, id).then(res => {
cancelStoreCollect(params.type, id).then(res => {
if (res.success) {
this.getStoreList();
getStoreList();
}
})
}
});
},
openItem (item) {
if (this.params.type === 'STORE') {
this.goShop(item.id)
}
function openItem (item) {
if (params.type === 'STORE') {
goShop(item.id)
return
}
this.buynow(item.skuId, item.goodsId)
},
buynow(skuId, goodsId,storeId) { // 跳转详情
buynow(item.skuId, item.goodsId)
}
function buynow(skuId, goodsId, storeId) { // 跳转详情
let url
if (this.params.type === 'STORE') {
url = this.$router.resolve({
if (params.type === 'STORE') {
url = router.resolve({
path: '/merchant',
query: { 'id': storeId }
})
} else {
url = this.$router.resolve({
url = router.resolve({
path: '/goodsDetail',
query: { skuId, goodsId }
})
@@ -201,19 +209,19 @@ export default {
}
window.open(url.href, '_blank')
},
goShop(id) { // 跳转店铺页面
this.$router.push({
}
function goShop(id) { // 跳转店铺页面
router.push({
path: '/merchant',
query: { id }
})
}
},
mounted() {
if (this.homePage) this.params.pageSize = 5;
this.loadFavorites();
}
};
}
onMounted(() => {
if (props.homePage) params.pageSize = 5;
loadFavorites();
});
</script>
<style scoped lang="scss">

244
buyer/src/pages/home/memberCenter/MemberGrade.vue
View File

@@ -74,43 +74,41 @@
</template>
<script>
<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { memberGradeCurrent, memberGradeList, memberGradeRules } from '@/api/member.js'
export default {
name: 'MemberGrade',
data () {
return {
ruleList: [],
rulesLoading: false,
rulesDescription: '',
/** 接口返回 List MemberGradeDetailVO，每项 { grade, benefits } */
gradeDetails: [],
gradeList: [],
currentGrade: {},
currentExperience: 0,
currentGradeId: '',
selectedRuleKey: '',
activeGradeTab: 'rules',
logLoading: false,
gradeLoading: false,
params: {
defineOptions({ name: 'MemberGrade' })
const ruleList = ref([])
const rulesLoading = ref(false)
const rulesDescription = ref('')
/** 接口返回 List MemberGradeDetailVO，每项 { grade, benefits } */
const gradeDetails = ref([])
const gradeList = ref([])
const currentGrade = ref({})
const currentExperience = ref(0)
const currentGradeId = ref('')
const selectedRuleKey = ref('')
const activeGradeTab = ref('rules')
const logLoading = ref(false)
const gradeLoading = ref(false)
const params = reactive({
pageNumber: 1,
pageSize: 20
},
experienceLogs: {}
}
},
computed: {
rulesMap () {
})
const experienceLogs = ref({})
const rulesMap = computed(() => {
const map = {}
this.ruleList.forEach(item => {
ruleList.value.forEach(item => {
map[item.ruleKey] = item.ruleName
})
return map
},
sortedGradeList () {
const list = Array.isArray(this.gradeList) ? this.gradeList.slice() : []
})
const sortedGradeList = computed(() => {
const list = Array.isArray(gradeList.value) ? gradeList.value.slice() : []
list.sort((a, b) => {
const sa = a && a.gradeSort != null ? Number(a.gradeSort) : 0
const sb = b && b.gradeSort != null ? Number(b.gradeSort) : 0
@@ -120,62 +118,68 @@ export default {
return ea - eb
})
return list
},
currentGradeIndex () {
if (!this.currentGradeId) return -1
return this.sortedGradeList.findIndex(g => g && g.id === this.currentGradeId)
},
nextGrade () {
const idx = this.currentGradeIndex
})
const currentGradeIndex = computed(() => {
if (!currentGradeId.value) return -1
return sortedGradeList.value.findIndex(g => g && g.id === currentGradeId.value)
})
const nextGrade = computed(() => {
const idx = currentGradeIndex.value
if (idx < 0) return null
return this.sortedGradeList[idx + 1] || null
},
diffExperience () {
if (!this.nextGrade || this.nextGrade.requiredExperience == null) return 0
const diff = Number(this.nextGrade.requiredExperience) - Number(this.currentExperience || 0)
return sortedGradeList.value[idx + 1] || null
})
const diffExperience = computed(() => {
if (!nextGrade.value || nextGrade.value.requiredExperience == null) return 0
const diff = Number(nextGrade.value.requiredExperience) - Number(currentExperience.value || 0)
return diff > 0 ? diff : 0
},
/** 当前等级在列表详情中对应的启用权益（顺序与后台 benefits 一致） */
currentGradeBenefits () {
const id = this.currentGradeId
if (!id || !Array.isArray(this.gradeDetails) || !this.gradeDetails.length) return []
const detail = this.gradeDetails.find(
})
/** 当前等级在列表详情中对应的启用权益（顺序与后台 benefits 一致） */
const currentGradeBenefits = computed(() => {
const id = currentGradeId.value
if (!id || !Array.isArray(gradeDetails.value) || !gradeDetails.value.length) return []
const detail = gradeDetails.value.find(
(d) => d && d.grade && String(d.grade.id) === String(id)
)
const list = detail && Array.isArray(detail.benefits) ? detail.benefits : []
return list.filter((b) => b && b.benefitState === 'OPEN')
},
},
mounted () {
this.init()
},
methods: {
init () {
this.loadRules()
this.loadGradeList()
this.loadCurrent()
},
loadRules () {
this.rulesLoading = true
})
onMounted(() => {
init()
})
function init () {
loadRules()
loadGradeList()
loadCurrent()
}
function loadRules () {
rulesLoading.value = true
memberGradeRules()
.then(res => {
if (res && res.success) {
const items = res.result && Array.isArray(res.result.items) ? res.result.items : []
this.rulesDescription = (res.result && res.result.description) || ''
this.ruleList = items
rulesDescription.value = (res.result && res.result.description) || ''
ruleList.value = items
}
})
.finally(() => {
this.rulesLoading = false
rulesLoading.value = false
})
},
loadGradeList () {
this.gradeLoading = true
}
function loadGradeList () {
gradeLoading.value = true
memberGradeList()
.then(res => {
if (res && res.success) {
const raw = Array.isArray(res.result) ? res.result : []
this.gradeDetails = raw
gradeDetails.value = raw
.map((item) => {
if (!item) return null
if (item.grade != null) {
@@ -187,55 +191,61 @@ export default {
return { grade: item, benefits: [] }
})
.filter(Boolean)
this.gradeList = this.gradeDetails.map((d) => d.grade).filter(Boolean)
gradeList.value = gradeDetails.value.map((d) => d.grade).filter(Boolean)
} else {
this.gradeDetails = []
this.gradeList = []
gradeDetails.value = []
gradeList.value = []
}
})
.finally(() => {
this.gradeLoading = false
gradeLoading.value = false
})
},
loadCurrent () {
this.logLoading = true
const params = {
pageNumber: this.params.pageNumber,
pageSize: this.params.pageSize
}
function loadCurrent () {
logLoading.value = true
const reqParams = {
pageNumber: params.pageNumber,
pageSize: params.pageSize
}
if (this.selectedRuleKey) params.ruleKey = this.selectedRuleKey
memberGradeCurrent(params)
if (selectedRuleKey.value) reqParams.ruleKey = selectedRuleKey.value
memberGradeCurrent(reqParams)
.then(res => {
if (res && res.success && res.result) {
this.currentGrade = res.result.grade || {}
this.currentExperience = res.result.experience || 0
this.currentGradeId = res.result.gradeId || (this.currentGrade && this.currentGrade.id) || ''
this.experienceLogs = res.result.experienceLogs || {}
currentGrade.value = res.result.grade || {}
currentExperience.value = res.result.experience || 0
currentGradeId.value = res.result.gradeId || (currentGrade.value && currentGrade.value.id) || ''
experienceLogs.value = res.result.experienceLogs || {}
}
})
.finally(() => {
this.logLoading = false
logLoading.value = false
})
},
selectRule (ruleKey) {
this.selectedRuleKey = ruleKey || ''
this.params.pageNumber = 1
this.loadCurrent()
},
changePage (val) {
this.params.pageNumber = val
this.loadCurrent()
},
changePageSize (val) {
this.params.pageSize = val
this.params.pageNumber = 1
this.loadCurrent()
},
getRuleName (ruleKey) {
}
function selectRule (ruleKey) {
selectedRuleKey.value = ruleKey || ''
params.pageNumber = 1
loadCurrent()
}
function changePage (val) {
params.pageNumber = val
loadCurrent()
}
function changePageSize (val) {
params.pageSize = val
params.pageNumber = 1
loadCurrent()
}
function getRuleName (ruleKey) {
if (!ruleKey) return '-'
return this.rulesMap[ruleKey] || ruleKey
},
getRuleDesc (ruleKey) {
return rulesMap.value[ruleKey] || ruleKey
}
function getRuleDesc (ruleKey) {
const map = {
CONSUME: '客户消费1元可获取经验值，向下取整',
REGISTER: '会员注册成功后可获取经验值',
@@ -251,8 +261,9 @@ export default {
}
if (!ruleKey) return '-'
return map[ruleKey] || '-'
},
getLogDeltaRaw (row) {
}
function getLogDeltaRaw (row) {
if (!row) return 0
const candidate = row.variableExperience != null ? row.variableExperience : (row.changeExperience != null ? row.changeExperience : (row.experience != null ? row.experience : row.value))
if (candidate == null) return 0
@@ -261,19 +272,20 @@ export default {
if (row.type === 'DECREASE') return -Math.abs(num)
if (row.type === 'INCREASE') return Math.abs(num)
return num
},
getLogDeltaSign (row) {
const num = this.getLogDeltaRaw(row)
}
function getLogDeltaSign (row) {
const num = getLogDeltaRaw(row)
return num >= 0 ? '+' : '-'
},
getLogDeltaAbsValue (row) {
const num = this.getLogDeltaRaw(row)
}
function getLogDeltaAbsValue (row) {
const num = getLogDeltaRaw(row)
return Math.abs(num)
},
getLogDeltaColor (row) {
return this.getLogDeltaRaw(row) >= 0 ? 'green' : 'red'
}
}
}
function getLogDeltaColor (row) {
return getLogDeltaRaw(row) >= 0 ? 'green' : 'red'
}
</script>

137
buyer/src/pages/home/memberCenter/ModifyPwd.vue
View File

@@ -2,7 +2,7 @@
<div class="wrapper">
<UserCenterLayout>
<!-- 手机号验证 -->
<el-form ref="formData" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
<el-form ref="formDataRef" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
v-if="(status == 2 || status == 3) && !showPwd">
<el-form-item label="手机号">
<div class="phone">{{ displayMobile }}</div>
@@ -21,7 +21,7 @@
</div>
<!-- 修改 -->
<el-form ref="formRegister" :model="formRegister" :rules="ruleInline" label-width="80px" v-if="status == 1 && !showPwd">
<el-form ref="formRegisterRef" :model="formRegister" :rules="ruleInline" label-width="80px" v-if="status == 1 && !showPwd">
<el-form-item label="旧密码" prop="password">
<el-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
style="width: 300px"
@@ -49,7 +49,7 @@
<el-button type="primary" class="ml_10" @click="handleRegist">修改</el-button>
</div>
<!-- 设置&修改的第二种情况 -->
<el-form ref="formDataUpdate" :model="formDataUpdate" label-position="left" label-width="100px" :rules="ruleIn"
<el-form ref="formDataUpdateRef" :model="formDataUpdate" label-position="left" label-width="100px" :rules="ruleIn"
v-if="showPwd">
<el-form-item label="新密码" prop="newPassword">
<el-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
@@ -73,7 +73,9 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import { Lock } from '@element-plus/icons-vue';
import {
@@ -82,39 +84,40 @@ import {
} from '@/api/account';
import { getMemberMsg } from '@/api/login.js';
import storage from '@/plugins/storage.js';
import {md5} from '@/plugins/md5.js'
import { md5 } from '@/plugins/md5.js'
import { secrecyMobile } from '@/plugins/filters.js'
export default {
components: { Lock },
name: 'modifyPwd',
data () {
return {
// 1为修改 2为设置 3为提交校验的下一步
status: '',
mobile: '',
showPwd: false, // 显示密码
formData: { // 验证表单
defineOptions({ name: 'modifyPwd' });
const route = useRoute();
const router = useRouter();
// 1为修改 2为设置 3为提交校验的下一步
const status = ref('');
const mobile = ref('');
const showPwd = ref(false); // 显示密码
const formData = reactive({ // 验证表单
picture: '',
msg: ''
},
formDataUpdate: { // 直接输入新密码表单
});
const formDataUpdate = reactive({ // 直接输入新密码表单
newPassword: '',
againPassword: ''
},
formRegister: { // 第三步 新密码表单
});
const formRegister = reactive({ // 第三步 新密码表单
password: '',
againPassword: '',
newPassword: ''
},
ruleInLines: { // 验证规则
});
const ruleInLines = { // 验证规则
picture: [
{required: true, message: '请输入图片验证码', trigger: 'blur'}
],
msg: [
{required: true, message: '请输入短信验证码', trigger: 'blur'}
]
},
ruleIn: { // 验证规则
};
const ruleIn = { // 验证规则
newPassword: [
{required: true, message: '请输入新密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码不能少于6位'}
@@ -123,8 +126,8 @@ export default {
{required: true, message: '请输入新密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码不能少于6位'}
]
},
ruleInline: { // 验证规则
};
const ruleInline = { // 验证规则
password: [
{required: true, message: '请输入旧密码', trigger: 'blur'}
],
@@ -136,26 +139,23 @@ export default {
{required: true, message: '请确认新密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码不能少于6位'}
]
}
}
},
computed: {
displayMobile () {
if (!this.mobile) return '未绑定手机号';
return this.$filters.secrecyMobile(this.mobile);
}
},
mounted () {
this.status = this.$route.query.status
this.loadMobile()
},
methods: {
loadMobile () {
};
const formDataRef = ref(null);
const formRegisterRef = ref(null);
const formDataUpdateRef = ref(null);
const displayMobile = computed(() => {
if (!mobile.value) return '未绑定手机号';
return secrecyMobile(mobile.value);
});
function loadMobile () {
const rawUserInfo = storage.getItem('userInfo');
if (rawUserInfo) {
try {
const userInfo = JSON.parse(rawUserInfo);
if (userInfo && userInfo.mobile) this.mobile = userInfo.mobile;
if (userInfo && userInfo.mobile) mobile.value = userInfo.mobile;
} catch {
// 缓存的用户信息解析失败时忽略，改走接口获取
}
@@ -164,24 +164,26 @@ export default {
getMemberMsg().then(res => {
if (res.success && res.result) {
storage.setItem('userInfo', res.result);
this.mobile = res.result.mobile || '';
mobile.value = res.result.mobile || '';
}
}).catch((err) => {
console.warn('获取会员信息失败', err);
});
},
normalizePwdError (message) {
}
function normalizePwdError (message) {
if (!message) return '修改失败，请稍后重试';
if (String(message).includes('旧密码') || String(message).includes('密码不正确')) {
return '旧密码不正确';
}
return message;
},
// 修改
handleRegist () {
this.$refs['formRegister'].validate((valid) => {
}
// 修改
function handleRegist () {
formRegisterRef.value.validate((valid) => {
if (valid) {
const {newPassword, againPassword, password} = this.formRegister
const {newPassword, againPassword, password} = formRegister
if (newPassword !== againPassword) {
Message.error({
content: '新密码和确认密码不一致'
@@ -194,29 +196,31 @@ export default {
editPwd(params).then(res => {
if (res.success && res.result) {
Message.success('修改密码成功');
this.$router.push('/home')
router.push('/home')
} else {
Message.error(this.normalizePwdError(res.message));
Message.error(normalizePwdError(res.message));
}
}).catch((err) => {
Message.error(this.normalizePwdError(err?.message || err?.data?.message));
Message.error(normalizePwdError(err?.message || err?.data?.message));
});
}
})
},
// 提交验证
submitRegister () {
this.$refs['formData'].validate((valid) => {
}
// 提交验证
function submitRegister () {
formDataRef.value.validate((valid) => {
if (valid) {
this.showPwd = true
showPwd.value = true
}
})
},
// 设置密码
setPassword () {
this.$refs['formDataUpdate'].validate((valid) => {
}
// 设置密码
function setPassword () {
formDataUpdateRef.value.validate((valid) => {
if (valid) {
const {newPassword, againPassword} = this.formDataUpdate
const {newPassword, againPassword} = formDataUpdate
if (newPassword === '') {
Message.error({
content: '请输入密码'
@@ -234,14 +238,17 @@ export default {
setPwd(params).then(res => {
if (res.message === 'success' && res.result) {
Message.success('支付密码设置成功');
this.$router.push('/home')
router.push('/home')
}
});
}
})
}
}
}
onMounted(() => {
status.value = route.query.status
loadMobile()
});
</script>
<style scoped lang="scss">

73
buyer/src/pages/home/memberCenter/Point.vue
View File

@@ -42,48 +42,47 @@
</UserCenterLayout>
</div>
</template>
<script>
import {memberPoint, memberPointHistory} from '@/api/member.js'
<script setup>
import { onMounted, reactive, ref } from "vue";
import { memberPoint, memberPointHistory } from '@/api/member.js'
export default {
name: 'Point',
data () {
return {
logData: {}, // 积分日志
pointObj: {}, // 积分明细
loading: false, // 请求接口加载框
params: { // 积分列表请求参数
defineOptions({ name: "Point" });
const logData = ref({}); // 积分日志
const pointObj = ref({}); // 积分明细
const loading = ref(false); // 请求接口加载框
const params = reactive({ // 积分列表请求参数
pageNumber: 1,
pageSize: 20
},
}
},
mounted () {
this.getHistory()
this.getPoint()
},
methods: {
getHistory () { // 获取积分历史
memberPointHistory(this.params).then(res => {
this.logData = res.result;
});
function getHistory() { // 获取积分历史
memberPointHistory(params).then(res => {
logData.value = res.result;
})
},
getPoint () { // 获取积分详情
memberPoint().then(res => {
if (res.success) this.pointObj = res.result
})
},
changePage (val) { // 修改页码
this.params.pageNumber = val
this.getHistory()
},
changePageSize (val) { // 修改页数
this.params.pageSize = val
this.params.pageNumber = 1
this.getHistory()
}
}
}
function getPoint() { // 获取积分详情
memberPoint().then(res => {
if (res.success) pointObj.value = res.result
})
}
function changePage(val) { // 修改页码
params.pageNumber = val
getHistory()
}
function changePageSize(val) { // 修改页数
params.pageSize = val
params.pageNumber = 1
getHistory()
}
onMounted(() => {
getHistory()
getPoint()
});
</script>
<style lang="scss" scoped>
h3 {

105
buyer/src/pages/home/memberCenter/Profile.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="wrapper">
<UserCenterLayout>
<el-form class="profile-form" :model="formItem" :rules="rules" ref="form" label-width="72px" label-position="left">
<el-form class="profile-form" :model="formItem" :rules="rules" ref="formRef" label-width="72px" label-position="left">
<el-form-item label="头像" class="avatar-form-item">
<div class="avatar-upload">
<el-avatar v-if="formItem.face" :src="formItem.face" :size="72" />
@@ -42,66 +42,70 @@
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import { editMemberInfo } from '@/api/account.js';
import { getMemberMsg } from '@/api/login.js';
import { buyerUrl } from '@/plugins/request.js';
import storage from '@/plugins/storage.js';
import { User } from '@element-plus/icons-vue';
export default {
components: { User },
name: 'Profile',
data () {
return {
rules: { // 验证规则
defineOptions({ name: 'Profile' });
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const rules = { // 验证规则
nickName: [{required: true, message: '用户昵称不能为空'}, { max: 16, message: '用户昵称不能超过15个字符' }]
},
formItem: {}, // 表单数据
action: buyerUrl + '/buyer/common/upload/file', // 上传接口
accessToken: {} // 验证token
}
},
mounted () {
this.accessToken.accessToken = storage.getItem('accessToken');
this.loadUserInfo();
},
methods: {
loadUserInfo () {
};
const formItem = ref({}); // 表单数据
const action = buyerUrl + '/buyer/common/upload/file'; // 上传接口
const accessToken = reactive({}); // 验证token
onMounted(() => {
accessToken.accessToken = storage.getItem('accessToken');
loadUserInfo();
});
function loadUserInfo () {
const rawUserInfo = storage.getItem('userInfo');
if (rawUserInfo) {
this.applyUserInfo(JSON.parse(rawUserInfo));
applyUserInfo(JSON.parse(rawUserInfo));
return;
}
if (!storage.getItem('accessToken')) {
this.redirectToLogin();
redirectToLogin();
return;
}
getMemberMsg().then(res => {
if (res.success && res.result) {
storage.setItem('userInfo', res.result);
this.applyUserInfo(res.result);
applyUserInfo(res.result);
} else {
this.redirectToLogin();
redirectToLogin();
}
}).catch(() => {
this.redirectToLogin();
redirectToLogin();
});
},
applyUserInfo (userInfo) {
this.formItem = { ...userInfo };
this.formItem.birthday = this.normalizeBirthday(this.formItem.birthday);
},
redirectToLogin () {
this.$router.push({
}
function applyUserInfo (userInfo) {
formItem.value = { ...userInfo };
formItem.value.birthday = normalizeBirthday(formItem.value.birthday);
}
function redirectToLogin () {
router.push({
path: '/login',
query: {
rePath: this.$route.path,
query: JSON.stringify(this.$route.query || {}),
rePath: route.path,
query: JSON.stringify(route.query || {}),
},
});
},
normalizeBirthday (value) {
}
function normalizeBirthday (value) {
if (!value) return ''
if (value instanceof Date) return value
if (typeof value === 'number') return new Date(value)
@@ -112,8 +116,8 @@ export default {
return isNaN(d.getTime()) ? '' : d
}
return ''
},
formatBirthday (value) {
}
function formatBirthday (value) {
if (!value) return null
if (typeof value === 'string') {
const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)
@@ -125,31 +129,28 @@ export default {
const mm = String(d.getMonth() + 1).padStart(2, '0')
const dd = String(d.getDate()).padStart(2, '0')
return `${yyyy}-${mm}-${dd}`
},
save () { // 保存
this.$refs.form.validate(valid => {
}
function save () { // 保存
formRef.value.validate(valid => {
if (valid) {
let params = {
birthday: this.formatBirthday(this.formItem.birthday),
face: this.formItem.face,
nickName: this.formItem.nickName,
sex: this.formItem.sex
birthday: formatBirthday(formItem.value.birthday),
face: formItem.value.face,
nickName: formItem.value.nickName,
sex: formItem.value.sex
}
editMemberInfo(params).then(res => {
if (res.success) {
Message.success('修改个人资料成功')
storage.setItem('userInfo', res.result)
this.$router.go(0)
router.go(0)
}
})
}
})
},
handleSuccess (res, file) { // 上传成功
this.formItem['face'] = res.result
},
}
}
function handleSuccess (res, file) { // 上传成功
formItem.value['face'] = res.result
}
</script>

132
buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
View File

@@ -74,119 +74,125 @@
</UserCenterLayout>
</div>
</template>
<script>
<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Notice } from "@/utils/message";
import { Camera, Delete, View } from '@element-plus/icons-vue';
import { orderDetail } from '@/api/order.js';
import { addEvaluation } from '@/api/member.js';
import { buyerUrl } from '@/plugins/request.js';
import storage from '@/plugins/storage';
export default {
components: { Camera, Delete, View },
data () {
return {
order: {}, // 订单详情
orderGoods: {}, // 订单商品
form: { // 评分展示
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const order = ref({}); // 订单详情
const orderGoods = ref({}); // 订单商品
const form = reactive({ // 评分展示
deliveryScore: 5,
serviceScore: 5,
descriptionScore: 5
}, // 表单
visible: false, // 图片预览
action: buyerUrl + '/buyer/common/upload/file', // 上传地址
accessToken: {}, // 验证token
previewImage: '', // 预览图片地址
loading: false, // 提交加载状态
// el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
rateThemeColors: ['var(--theme-color)', 'var(--theme-color)', 'var(--theme-color)']
}
},
methods: {
getOrderDetail () { // 获取订单详情
orderDetail(this.$route.query.sn).then(res => {
this.order = res.result
this.orderGoods = res.result.orderItems[this.$route.query.index]
this.orderGoods['grade'] = 'GOOD'
this.orderGoods.uploadList = []
}); // 表单
const visible = ref(false); // 图片预览
const action = buyerUrl + '/buyer/common/upload/file'; // 上传地址
const accessToken = reactive({}); // 验证token
const previewImage = ref(''); // 预览图片地址
const loading = ref(false); // 提交加载状态
// el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
const rateThemeColors = ['var(--theme-color)', 'var(--theme-color)', 'var(--theme-color)'];
function getOrderDetail () { // 获取订单详情
orderDetail(route.query.sn).then(res => {
order.value = res.result
orderGoods.value = res.result.orderItems[route.query.index]
orderGoods.value['grade'] = 'GOOD'
orderGoods.value.uploadList = []
})
},
save () { // 保存评价
if (!this.form.serviceScore || !this.form.deliveryScore) {
}
function save () { // 保存评价
if (!form.serviceScore || !form.deliveryScore) {
Message.warning('物流服务评价不能为空')
return false;
}
if (!this.form.descriptionScore) {
if (!form.descriptionScore) {
Message.warning('描述评价不能为空')
return false;
}
if (!this.orderGoods.content || !String(this.orderGoods.content).trim()) {
if (!orderGoods.value.content || !String(orderGoods.value.content).trim()) {
Message.warning('评论内容不能为空')
return false;
}
this.loading = true;
let goods = this.orderGoods
loading.value = true;
let goods = orderGoods.value
let params = {
goodsId: goods.goodsId,
orderItemSn: goods.sn,
skuId: goods.skuId,
descriptionScore: this.form.descriptionScore,
serviceScore: this.form.serviceScore,
deliveryScore: this.form.deliveryScore,
descriptionScore: form.descriptionScore,
serviceScore: form.serviceScore,
deliveryScore: form.deliveryScore,
grade: goods.grade,
content: goods.content.trim(),
images: goods.uploadList.length ? goods.uploadList.join(',') : ''
}
addEvaluation(params).then(res => {
this.loading = false
loading.value = false
if (res.success) {
Message.success('评价成功')
this.$router.push('/home/CommentList')
router.push('/home/CommentList')
} else {
Message.error(res.message || '评价失败，请稍后重试')
}
}).catch((err) => {
this.loading = false;
loading.value = false;
Message.error(err?.message || '评价失败，请稍后重试')
})
},
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = this.$router.resolve({
}
function goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = router.resolve({
path: '/goodsDetail',
query: {skuId, goodsId}
})
window.open(routerUrl.href, '_blank')
},
handleView (name) { // 预览图片
this.previewImage = name;
this.visible = true;
},
handleRemove (index) { // 移除图片
this.orderGoods.uploadList.splice(index, 1)
this.$forceUpdate()
},
handleSuccess (res, file) { // 上传成功回调
this.orderGoods.uploadList.push(res.result)
this.$forceUpdate()
},
handleBeforeUpload () { // 上传之前钩子
const check = this.orderGoods.uploadList.length < 9;
}
function handleView (name) { // 预览图片
previewImage.value = name;
visible.value = true;
}
function handleRemove (index) { // 移除图片
orderGoods.value.uploadList.splice(index, 1)
instance.proxy.$forceUpdate()
}
function handleSuccess (res, file) { // 上传成功回调
orderGoods.value.uploadList.push(res.result)
instance.proxy.$forceUpdate()
}
function handleBeforeUpload () { // 上传之前钩子
const check = orderGoods.value.uploadList.length < 9;
if (!check) {
Notice.warning({
title: '最多可以上传九张图片'
});
return check;
}
}
},
mounted () {
window.scrollTo(0, 0)
this.accessToken.accessToken = storage.getItem('accessToken');
this.getOrderDetail()
}
}
onMounted(() => {
window.scrollTo(0, 0)
accessToken.accessToken = storage.getItem('accessToken');
getOrderDetail()
})
</script>
<style lang="scss" scoped>
.delivery-rate {

69
buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
View File

@@ -79,51 +79,50 @@
</UserCenterLayout>
</div>
</template>
<script>
<script setup>
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { evaluationDetail } from "@/api/member.js";
export default {
data() {
return {
order: {}, // 订单详情
orderGoods: {}, // 订单商品
visible: false, // 图片预览
previewImage: "", // 预览图片链接
loading: false, // 加载状态
// el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
rateThemeColors: ["var(--theme-color)", "var(--theme-color)", "var(--theme-color)"],
};
},
computed: {
gradeText () {
const route = useRoute();
const router = useRouter();
const order = ref({}); // 订单详情
const orderGoods = ref({}); // 订单商品
const visible = ref(false); // 图片预览
const previewImage = ref(""); // 预览图片链接
const loading = ref(false); // 加载状态
// el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
const rateThemeColors = ref(["var(--theme-color)", "var(--theme-color)", "var(--theme-color)"]);
const gradeText = computed(() => {
const map = { GOOD: '好评', MODERATE: '中评', WORSE: '差评' }
return map[this.orderGoods.grade] || '评价详情'
}
},
methods: {
getDetail() {
return map[orderGoods.value.grade] || '评价详情'
});
function getDetail() {
// 获取评价详情
evaluationDetail(this.$route.query.id).then((res) => {
if (res.success) this.orderGoods = res.result;
evaluationDetail(route.query.id).then((res) => {
if (res.success) orderGoods.value = res.result;
});
},
goGoodsDetail(skuId, goodsId) {
}
function goGoodsDetail(skuId, goodsId) {
// 跳转商品详情
let routerUrl = this.$router.resolve({
let routerUrl = router.resolve({
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routerUrl.href, "_blank");
},
handleView(name) {
}
function handleView(name) {
// 预览图片
this.previewImage = name;
this.visible = true;
},
},
mounted() {
this.getDetail();
},
};
previewImage.value = name;
visible.value = true;
}
onMounted(() => {
getDetail();
});
</script>
<style lang="scss" scoped>
.add-eval {

78
buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue
View File

@@ -22,46 +22,45 @@
</div>
</template>
<script>
<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Message, Modal } from "@/utils/message";
import { delMemberMsg, getMemberMessage, readMemberMsg } from '@/api/member.js';
import { refreshUnreadMessage } from '@/utils/unreadMessage';
defineOptions({ name: 'MsgDetail' });
const route = useRoute();
const router = useRouter();
const CACHE_KEY = 'buyer-member-message';
export default {
name: 'MsgDetail',
data () {
return {
detail: {},
loaded: false
}
},
mounted () {
this.loadDetail()
},
methods: {
loadDetail () {
const id = this.$route.query.id
const detail = ref({});
const loaded = ref(false);
function loadDetail () {
const id = route.query.id
if (!id) {
this.loaded = true
loaded.value = true
return
}
const cached = this.readCache(id)
if (cached) this.detail = cached
const cached = readCache(id)
if (cached) detail.value = cached
getMemberMessage(id).then(res => {
if (res && res.success && res.result && res.result.id) {
this.detail = res.result
detail.value = res.result
sessionStorage.setItem(CACHE_KEY, JSON.stringify(res.result))
}
}).catch((err) => {
console.warn('获取消息详情失败', err)
}).finally(() => {
this.loaded = true
this.markRead()
loaded.value = true
markRead()
})
},
readCache (id) {
}
function readCache (id) {
try {
const raw = sessionStorage.getItem(CACHE_KEY)
if (!raw) return null
@@ -70,38 +69,43 @@ export default {
} catch (e) {
return null
}
},
markRead () {
if (!this.detail.id || this.detail.status !== 'UN_READY') return
readMemberMsg(this.detail.id).then(res => {
}
function markRead () {
if (!detail.value.id || detail.value.status !== 'UN_READY') return
readMemberMsg(detail.value.id).then(res => {
if (res && res.success) {
this.detail.status = 'ALREADY_READY'
detail.value.status = 'ALREADY_READY'
refreshUnreadMessage()
}
}).catch(() => {
// 标记已读为尽力而为操作，失败可忽略
})
},
goBack () {
this.$router.push({ name: 'MsgList' })
},
removeMessage () {
}
function goBack () {
router.push({ name: 'MsgList' })
}
function removeMessage () {
Modal.confirm({
title: '确认删除',
content: '确认要删除此消息?',
loading: true,
onOk: () =>
delMemberMsg(this.detail.id).then((res) => {
delMemberMsg(detail.value.id).then((res) => {
if (res.success) {
Message.success('消息已成功放入回收站')
refreshUnreadMessage()
this.goBack()
goBack()
}
})
})
}
}
}
onMounted(() => {
loadDetail()
})
</script>
<style lang="scss" scoped>

102
buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
View File

@@ -47,67 +47,68 @@
</UserCenterLayout>
</div>
</template>
<script>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import {memberMsgList, readMemberMsg, delMemberMsg} from '@/api/member.js'
export default {
data() {
return {
messageData: {},
status: ['未读', '已读', '回收站'],
params: {
import { useAppStore } from "@/stores/app";
const router = useRouter();
const appStore = useAppStore();
const messageData = ref({});
const status = ref(['未读', '已读', '回收站']);
const params = reactive({
pageNumber: 1,
pageSize: 20,
status: 'UN_READY'
},
}
},
computed: {
activeStatusIndex () {
});
const activeStatusIndex = computed(() => {
const map = ['UN_READY', 'ALREADY_READY', 'ALREADY_REMOVE'];
const index = map.indexOf(this.params.status);
const index = map.indexOf(params.status);
return index > -1 ? index : 0;
}
},
methods: {
statusChange (index) {
if (index === 0) { this.params.status = 'UN_READY' }
if (index === 1) { this.params.status = 'ALREADY_READY' }
if (index === 2) { this.params.status = 'ALREADY_REMOVE' }
this.params.pageNumber = 1
this.getList()
},
changePage (v) {
this.params.pageNumber = v;
this.getList();
},
changePageSize (v) {
this.params.pageNumber = 1
this.params.pageSize = v;
this.getList();
},
openDetail (row) {
});
function statusChange (index) {
if (index === 0) { params.status = 'UN_READY' }
if (index === 1) { params.status = 'ALREADY_READY' }
if (index === 2) { params.status = 'ALREADY_REMOVE' }
params.pageNumber = 1
getList()
}
function changePage (v) {
params.pageNumber = v;
getList();
}
function changePageSize (v) {
params.pageNumber = 1
params.pageSize = v;
getList();
}
function openDetail (row) {
sessionStorage.setItem('buyer-member-message', JSON.stringify(row))
this.$router.push({ name: 'MsgDetail', query: { id: row.id } })
},
getList () {
memberMsgList(this.params).then(res => {
router.push({ name: 'MsgDetail', query: { id: row.id } })
}
function getList () {
memberMsgList(params).then(res => {
if (res.success) {
this.messageData = res.result;
if (this.params.status === 'UN_READY') {
this.$store.commit('SET_UNREAD_MSG', Number(res.result.total) || 0);
messageData.value = res.result;
if (params.status === 'UN_READY') {
appStore.setUnreadMsg(Number(res.result.total) || 0);
}
}
})
},
setRead (id) {
}
function setRead (id) {
readMemberMsg(id).then(res => {
if (res.success) {
this.getList()
getList()
}
})
},
removeMessage (id) {
}
function removeMessage (id) {
Modal.confirm({
title: '确认删除',
content: '确认要删除此消息?',
@@ -116,16 +117,15 @@ export default {
delMemberMsg(id).then((res) => {
if (res.success) {
Message.success('消息已成功放入回收站');
this.getList();
getList();
}
}),
});
}
},
mounted () {
this.getList()
}
}
onMounted(() => {
getList()
})
</script>
<style lang="scss" scoped>
.msg-table {

107
buyer/src/pages/home/orderCenter/AddAddress.vue
View File

@@ -2,14 +2,14 @@
<div>
<UserCenterLayout>
<div class="add-box">
<el-form :model="formData" ref="form" label-position="left" label-width="100px" :rules="ruleInline">
<el-form :model="formData" ref="formRef" label-position="left" label-width="100px" :rules="ruleInline">
<el-form-item label="收件人" prop="name">
<el-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></el-input>
</el-form-item>
<el-form-item label="收件地区" prop="address">
<span>{{ formData.address || '暂无地址' }}</span>
<el-button type="default" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</el-button>
<el-button type="default" style="margin-left: 10px;" size="small" @click="mapRef.open()">选择</el-button>
</el-form-item>
<el-form-item label="详细地址" prop="detail">
<el-input v-model="formData.detail" placeholder="请输入详细地址" style="width: 600px"></el-input>
@@ -32,11 +32,13 @@
</div>
</UserCenterLayout>
<multipleMap ref="map" @callback="getAddress" />
<multipleMap ref="mapRef" @callback="getAddress" />
</div>
</template>
<script>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import multipleMap from "@/components/map/multiple-map";
import * as RegExp from "@/plugins/RegExp.js";
import {
@@ -44,15 +46,20 @@ import {
editMemberAddress,
getAddrDetail,
} from "@/api/address";
export default {
name: "AddAddress",
data() {
return {
formData: {
defineOptions({ name: "AddAddress" });
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const mapRef = ref(null);
const formData = ref({
// 添加地址表单
isDefault: false,
},
ruleInline: {
});
const ruleInline = {
// 验证规则
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
address: [{ required: true, message: "请输入地址", trigger: "change" }],
@@ -67,85 +74,79 @@ export default {
message: "请输入正确的手机号",
},
],
},
loading: false, // 加载状态
mapMsg: {}, // 地图信息
};
},
methods: {
save() {
// 保存地址
this.$refs.form.validate((valid) => {
};
const loading = ref(false); // 加载状态
const mapMsg = ref({}); // 地图信息
// 保存地址
function save() {
formRef.value.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.formData));
const params = JSON.parse(JSON.stringify(formData.value));
params.consigneeAddressPath = params.address.replace(/\s/g, ",");
delete params.address;
this.loading = true;
if (this.$route.query.id) {
loading.value = true;
if (route.query.id) {
editMemberAddress(params)
.then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
this.$router.push("/home/MyAddress");
router.push("/home/MyAddress");
}
})
.catch(() => {
this.loading = false;
loading.value = false;
});
} else {
newMemberAddress(params)
.then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
this.$router.push("/home/MyAddress");
router.push("/home/MyAddress");
}
})
.catch(() => {
this.loading = false;
loading.value = false;
});
}
}
});
},
getAddrById(id) {
}
function getAddrById(id) {
// 获取地址详情
getAddrDetail(id).then((res) => {
if (res.success) {
const data = res.result;
data.address = res.result.consigneeAddressPath.replace(/,/g, " ");
this.formData = data;
formData.value = data;
}
});
},
getAddress(val) {
}
function getAddress(val) {
// 获取地图选择信息
if(val.type === 'select'){
const paths = val.data.map(item => item.name).join(',')
const ids = val.data.map(item => item.id).join(',')
this.formData['address'] = paths
this.formData['consigneeAddressIdPath'] = ids
formData.value['address'] = paths
formData.value['consigneeAddressIdPath'] = ids
const coord = val.data[val.data.length - 1].center.split(',')
this.formData.lat = coord[1]
this.formData.lon = coord[0]
formData.value.lat = coord[1]
formData.value.lon = coord[0]
}else{
this.formData["address"] = val.data.addr;
this.formData["consigneeAddressIdPath"] = val.data.addrId;
this.formData["detail"] = val.data.address;
this.formData.lat = val.data.position.lat;
this.formData.lon = val.data.position.lng;
formData.value["address"] = val.data.addr;
formData.value["consigneeAddressIdPath"] = val.data.addrId;
formData.value["detail"] = val.data.address;
formData.value.lat = val.data.position.lat;
formData.value.lon = val.data.position.lng;
}
},
},
mounted() {
const id = this.$route.query.id;
if (id) this.getAddrById(id);
},
components: {
multipleMap
},
};
}
onMounted(() => {
const id = route.query.id;
if (id) getAddrById(id);
});
</script>
<style scoped lang="scss">

193
buyer/src/pages/home/orderCenter/AfterSale.vue
View File

@@ -102,7 +102,7 @@
</div>
</div>
</div>
<el-form ref="form" :model="form" label-position="left" label-width="100px" :rules="rules">
<el-form ref="formRef" :model="form" label-position="left" label-width="100px" :rules="rules">
<el-form-item label="物流公司" prop="logisticsId">
<el-select v-model="form.logisticsId" placeholder="请选择物流公司">
<el-option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</el-option>
@@ -131,64 +131,61 @@
</div>
</template>
<script>
<script setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import {afterSaleList, cancelAfterSale} from '@/api/member.js';
import {afterSaleDelivery, getLogisticsCompany} from '@/api/order.js';
import {afterSaleStatusList} from '../enumeration.js'
export default {
name: 'AfterSale',
data() {
return {
orderList: [], // 订单列表
params: { // 请求参数
defineOptions({ name: 'AfterSale' });
const router = useRouter();
const formRef = ref(null);
const orderList = ref([]); // 订单列表
const params = reactive({ // 请求参数
pageNumber: 1,
pageSize: 20,
keywords: '',
sn: '',
sort: 'createTime',
order: 'desc'
},
// 状态数组
afterSaleStatusList,
total: 0, // 订单总数
spinShow: false, // 加载状态
companyList: [], // 物流公司列表
logisticsShow: false, // 物流信息modal
singleOrder: {}, // 单独的售后信息
form: { // 物流信息数据
});
const total = ref(0); // 订单总数
const spinShow = ref(false); // 加载状态
const companyList = ref([]); // 物流公司列表
const logisticsShow = ref(false); // 物流信息modal
const singleOrder = ref({}); // 单独的售后信息
const form = reactive({ // 物流信息数据
afterSaleSn: '',
logisticsId: '',
logisticsNo: '',
mDeliverTime: ''
},
rules: { // 必填校验
});
const rules = { // 必填校验
logisticsId: [{required: true, message: '请选择物流公司'}],
logisticsNo: [{required: true, message: '请填写物流编号'}],
mDeliverTime: [{required: true, message: '请选择发货时间'}]
},
submitLoading: false, // 提交加载状态
changeWay: [
};
const submitLoading = ref(false); // 提交加载状态
const changeWay = [
{ name: '全部', status: '' },
{ name: '申请中', status: 'APPLY' },
{ name: '通过', status: 'PASS' },
{ name: '完成售后', status: 'COMPLETE' },
],
activeTab: 0,
};
},
mounted() {
this.getList();
},
methods: {
goDetail(sn) { // 跳转售后详情
this.$router.push({
];
const activeTab = ref(0);
function goDetail(sn) { // 跳转售后详情
router.push({
name: 'AfterSaleDetail',
query: {sn}
})
},
cancel(sn) { // 取消售后申请
}
function cancel(sn) { // 取消售后申请
Modal.confirm({
title: '取消',
content: '确定取消此次售后申请吗？',
@@ -196,105 +193,107 @@ export default {
cancelAfterSale(sn).then(res => {
if (res.success) {
Message.success('取消售后申请成功')
this.getList()
getList()
}
})
},
onCancel: () => {
}
});
},
goodsDetail(skuId, goodsId) {
}
function goodsDetail(skuId, goodsId) {
// 跳转商品详情
let routeUrl = this.$router.resolve({
let routeUrl = router.resolve({
path: '/goodsDetail',
query: {skuId, goodsId}
});
window.open(routeUrl.href, '_blank');
},
// 跳转店铺首页
shopPage(id) {
this.$router.push({
}
// 跳转店铺首页
function shopPage(id) {
router.push({
path: '/merchant',
query: {id: id}
});
},
change(index) {
this.activeTab = index
this.params.pageNumber = 1
const current = this.changeWay[index]
}
function change(index) {
activeTab.value = index
params.pageNumber = 1
const current = changeWay[index]
if (!current || !current.status) {
delete this.params.serviceStatus
delete params.serviceStatus
} else {
this.params.serviceStatus = current.status
params.serviceStatus = current.status
}
this.getList()
},
getList() { // 获取售后列表
this.spinShow = true;
let params = JSON.parse(JSON.stringify(this.params))
afterSaleList(params).then(res => {
this.spinShow = false
getList()
}
function getList() { // 获取售后列表
spinShow.value = true;
let paramsData = JSON.parse(JSON.stringify(params))
afterSaleList(paramsData).then(res => {
spinShow.value = false
if (res.success) {
this.orderList = res.result.records;
this.total = res.result.total;
orderList.value = res.result.records;
total.value = res.result.total;
}
});
},
changePageNum(val) { // 修改页码
this.params.pageNumber = val;
this.getList()
},
changePageSize(val) { // 修改页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList()
},
filterOrderStatus(status) { // 获取订单状态中文
const ob = this.afterSaleStatusList.filter(e => {
}
function changePageNum(val) { // 修改页码
params.pageNumber = val;
getList()
}
function changePageSize(val) { // 修改页数
params.pageNumber = 1;
params.pageSize = val;
getList()
}
function filterOrderStatus(status) { // 获取订单状态中文
const ob = afterSaleStatusList.filter(e => {
return e.status === status
});
return ob && ob[0] ? ob[0].name : status
},
// 获取物流公司列表
getCompany() {
}
// 获取物流公司列表
function getCompany() {
getLogisticsCompany().then(res => {
if (res.success) {
this.companyList = res.result
companyList.value = res.result
}
})
},
// 提交物流信息
submitDelivery() {
this.$refs.form?.validate((valid) => {
}
// 提交物流信息
function submitDelivery() {
formRef.value?.validate((valid) => {
if (!valid) return;
this.submitLoading = true;
afterSaleDelivery(this.form).then(res => {
submitLoading.value = true;
afterSaleDelivery(form).then(res => {
if (res.success) {
this.logisticsShow = false;
logisticsShow.value = false;
Message.success('提交成功');
this.getList();
getList();
}
this.submitLoading = false;
submitLoading.value = false;
}).catch(() => {
this.submitLoading = false;
submitLoading.value = false;
});
});
},
// 提交物流modal
openModal(row) {
this.singleOrder = row;
this.logisticsShow = true;
if (!this.companyList.length) {
this.getCompany();
}
// 提交物流modal
function openModal(row) {
singleOrder.value = row;
logisticsShow.value = true;
if (!companyList.value.length) {
getCompany();
}
this.$nextTick(() => {
this.$refs.form?.resetFields();
this.form.afterSaleSn = row.sn;
nextTick(() => {
formRef.value?.resetFields();
form.afterSaleSn = row.sn;
});
}
}
};
}
onMounted(() => {
getList();
});
</script>
<style scoped lang="scss">

175
buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
View File

@@ -106,7 +106,7 @@
<span>提交物流信息</span>
</p></template>
<div>
<el-form ref="form" :model="form" label-position="left" label-width="100px" :rules="rules">
<el-form ref="formRef" :model="form" label-position="left" label-width="100px" :rules="rules">
<el-form-item label="物流公司" prop="logisticsId">
<el-select v-model="form.logisticsId" placeholder="请选择物流公司">
<el-option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</el-option>
@@ -135,97 +135,99 @@
</UserCenterLayout>
</div>
</template>
<script>
<script setup>
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import { afterSaleDetail, afterSaleLog, afterSaleReason, cancelAfterSale } from '@/api/member.js';
import { afterSaleDelivery, getLogisticsCompany } from '@/api/order.js';
import { afterSaleStatusList } from '../enumeration.js'
export default {
name: 'aftersale-detail',
data () {
return {
afterSale: {}, // 售后详情数据
logList: [], // 日志
reasonList: [], // 售后原因列表
afterSaleStatusList, // 售后状态列表
companyList: [], // 物流公司列表
logisticsShow: false, // 物流信息modal
form: { // 物流信息数据
defineOptions({ name: 'aftersale-detail' });
const route = useRoute();
const router = useRouter();
const afterSale = ref({}); // 售后详情数据
const logList = ref([]); // 日志
const reasonList = ref([]); // 售后原因列表
const companyList = ref([]); // 物流公司列表
const logisticsShow = ref(false); // 物流信息modal
const form = reactive({ // 物流信息数据
afterSaleSn: '',
logisticsId: '',
logisticsNo: '',
mDeliverTime: ''
},
rules: { // 必填校验
});
const rules = { // 必填校验
logisticsId: [{ required: true, message: '请选择物流公司' }],
logisticsNo: [{ required: true, message: '请填写物流编号' }],
mDeliverTime: [{ required: true, message: '请选择发货时间' }]
},
submitLoading: false // 提交加载状态
};
},
computed: {
canSubmitLogistics () {
return this.afterSale.serviceStatus == 'PASS' && this.afterSale.serviceType != 'RETURN_MONEY'
},
canCancel () {
return this.afterSale.afterSaleAllowOperationVO && this.afterSale.afterSaleAllowOperationVO.cancel
}
},
methods: {
getDetail () { // 售后详情
afterSaleDetail(this.$route.query.sn).then(res => {
};
const submitLoading = ref(false); // 提交加载状态
const formRef = ref(null);
const canSubmitLogistics = computed(() => {
return afterSale.value.serviceStatus == 'PASS' && afterSale.value.serviceType != 'RETURN_MONEY'
});
const canCancel = computed(() => {
return afterSale.value.afterSaleAllowOperationVO && afterSale.value.afterSaleAllowOperationVO.cancel
});
function getDetail () { // 售后详情
afterSaleDetail(route.query.sn).then(res => {
if (res.success) {
this.afterSale = res.result;
this.afterSale.serviceName = this.filterOrderStatus(this.afterSale.serviceStatus)
afterSale.value = res.result;
afterSale.value.serviceName = filterOrderStatus(afterSale.value.serviceStatus)
// 如果是原因id，则调接口查询原因中文释义
const pattern3 = new RegExp('[0-9]+');
if (pattern3.test(this.afterSale.reason)) {
this.getReason(this.afterSale.serviceType)
if (pattern3.test(afterSale.value.reason)) {
getReason(afterSale.value.serviceType)
} else {
this.afterSale['reasonName'] = this.afterSale.reason
afterSale.value['reasonName'] = afterSale.value.reason
}
}
})
},
getReason (type) { // 获取售后原因
}
function getReason (type) { // 获取售后原因
afterSaleReason(type).then(res => {
if (res.success) {
this.reasonList = res.result
this.reasonList.forEach(e => {
if (e.id === this.afterSale.reason) {
this.afterSale['reasonName'] = e.reason
reasonList.value = res.result
reasonList.value.forEach(e => {
if (e.id === afterSale.value.reason) {
afterSale.value['reasonName'] = e.reason
}
})
}
})
},
getLog () { // 获取售后日志
afterSaleLog(this.$route.query.sn).then(res => {
this.logList = (res.result || []).slice().sort((a, b) => {
}
function getLog () { // 获取售后日志
afterSaleLog(route.query.sn).then(res => {
logList.value = (res.result || []).slice().sort((a, b) => {
return new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
})
})
},
logDesc (log) {
}
function logDesc (log) {
const operator = log.operatorName ? `操作人：${log.operatorName}` : ''
return [operator, log.createTime].filter(Boolean).join(' ')
},
shopPage (id) {
}
function shopPage (id) {
if (!id) return
this.$router.push({
router.push({
path: '/merchant',
query: { id }
})
},
filterOrderStatus (status) { // 获取订单状态中文
const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
}
function filterOrderStatus (status) { // 获取订单状态中文
const ob = afterSaleStatusList.filter(e => { return e.status === status });
if (ob.length) return ob[0].name
},
perviewImg (img) { // 查看图片
}
function perviewImg (img) { // 查看图片
window.open(img, '_blank')
},
cancel (sn) { // 取消售后申请
}
function cancel (sn) { // 取消售后申请
Modal.confirm({
title: '取消',
content: '<p>确定取消此次售后申请吗？</p>',
@@ -233,52 +235,51 @@ export default {
cancelAfterSale(sn).then(res => {
if (res.success) {
Message.success('取消售后申请成功')
this.getDetail()
getDetail()
}
})
},
onCancel: () => {}
});
},
// 获取物流公司列表
getCompany () {
}
// 获取物流公司列表
function getCompany () {
getLogisticsCompany().then(res => {
if (res.success) {
this.companyList = res.result
companyList.value = res.result
}
})
},
// 提交物流信息
submitDelivery () {
this.submitLoading = true
afterSaleDelivery(this.form).then(res => {
}
// 提交物流信息
function submitDelivery () {
submitLoading.value = true
afterSaleDelivery(form).then(res => {
if (res.success) {
this.logisticsShow = false;
logisticsShow.value = false;
Message.success('提交成功')
this.getDetail()
getDetail()
}
this.submitLoading = false
submitLoading.value = false
}).catch(() => {
this.submitLoading = false
submitLoading.value = false
})
},
// 提交物流modal
openModal () {
this.logisticsShow = true;
if (!this.companyList.length) {
this.getCompany();
}
// 提交物流modal
function openModal () {
logisticsShow.value = true;
if (!companyList.value.length) {
getCompany();
}
this.$nextTick(() => {
this.$refs.form?.resetFields();
this.form.afterSaleSn = this.afterSale.sn;
nextTick(() => {
formRef.value?.resetFields();
form.afterSaleSn = afterSale.value.sn;
});
}
},
mounted () {
this.getDetail();
this.getLog()
}
};
}
onMounted(() => {
getDetail();
getLog()
});
</script>
<style lang="scss" scoped>
.order-detail {

142
buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
View File

@@ -18,7 +18,7 @@
<el-table-column prop="num" label="购买数量" />
</el-table>
<div>
<el-form :model="form" ref="form" class="mt_10" :rules="rules" label-width="80px">
<el-form :model="form" ref="formRef" class="mt_10" :rules="rules" label-width="80px">
<el-form-item label="售后类别">
<el-radio-group v-model="form.serviceType" @change="changeReason" type="button" button-style="solid">
<el-radio v-if="info.returnGoods" label="RETURN_GOODS">退货</el-radio>
@@ -101,41 +101,46 @@
</UserCenterLayout>
</div>
</template>
<script>
<script setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Notice } from "@/utils/message";
import { Camera, Delete, View } from '@element-plus/icons-vue';
import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
import { buyerUrl } from '@/plugins/request.js';
import storage from '@/plugins/storage';
import * as RegExp from '@/plugins/RegExp'
export default {
components: { Camera, Delete, View },
data () {
const checkNum = (rule, value, callback) => {
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const goodsData = ref([]); // 商品数据
const reasonList = ref([]); // 售后原因列表
const info = ref({}); // 售后信息
const form = reactive({ // 售后数据
serviceType: 'RETURN_GOODS',
num: 1
});
const uploadList = ref([]); // 上传列表
const action = buyerUrl + '/buyer/common/upload/file'; // 上传地址
const accessToken = reactive({}); // 验证token
const visible = ref(false); // 图片预览
const previewImage = ref(''); // 预览图片url
const checkNum = (rule, value, callback) => {
if (value === '') {
callback(new Error('请填写提交数量'));
} else if (value > this.info.num) {
} else if (value > info.value.num) {
callback(new Error('提交数量不能大于购买数量'));
} else if (!RegExp.integer.test(value)) {
callback(new Error('提交数量必须为正整数'));
} else {
callback();
}
};
return {
goodsData: [], // 商品数据
reasonList: [], // 售后原因列表
info: {}, // 售后信息
form: { // 售后数据
serviceType: 'RETURN_GOODS',
num: 1
},
uploadList: [], // 上传列表
action: buyerUrl + '/buyer/common/upload/file', // 上传地址
accessToken: {}, // 验证token
visible: false, // 图片预览
previewImage: '', // 预览图片url
rules: { // 验证规则
};
const rules = { // 验证规则
num: [{ validator: checkNum }],
reason: [{ required: true, message: '请选择提交原因' }],
problemDesc: [{ required: true, message: '请输入问题描述' }],
@@ -149,77 +154,72 @@ export default {
],
bankAccountName: [{ required: true, message: '请输入银行开户名' }],
bankDepositName: [{ required: true, message: '请输入银行开户行' }]
}
}
},
methods: {
getInfo () { // 获取售后信息
afterSaleInfo(this.$route.query.sn).then(res => {
};
function getInfo () { // 获取售后信息
afterSaleInfo(route.query.sn).then(res => {
if (res.success) {
this.info = res.result
this.goodsData.push(res.result)
if (!this.info.returnGoods && this.info.returnMoney) {
this.form.serviceType = 'RETURN_MONEY'
info.value = res.result
goodsData.value.push(res.result)
if (!info.value.returnGoods && info.value.returnMoney) {
form.serviceType = 'RETURN_MONEY'
}
this.getReason(this.form.serviceType)
getReason(form.serviceType)
}
})
},
getReason (type) { // 获取售后原因
}
function getReason (type) { // 获取售后原因
afterSaleReason(type).then(res => {
if (res.success) this.reasonList = res.result
if (res.success) reasonList.value = res.result
})
},
changeReason (type) { // 改变售后原因列表
this.form.reason = undefined
this.getReason(type)
this.$nextTick(() => {
this.$refs.form?.clearValidate('reason')
}
function changeReason (type) { // 改变售后原因列表
form.reason = undefined
getReason(type)
nextTick(() => {
formRef.value?.clearValidate('reason')
})
},
apply () { // 售后申请提交
this.$refs.form.validate(valid => {
}
function apply () { // 售后申请提交
formRef.value.validate(valid => {
if (valid) {
let params = Object.assign(this.info, this.form)
params.images = this.uploadList.toString()
params.orderItemSn = this.$route.query.sn
params.reason = this.reasonList.find(item => item.id == params.reason).reason
let params = Object.assign(info.value, form)
params.images = uploadList.value.toString()
params.orderItemSn = route.query.sn
params.reason = reasonList.value.find(item => item.id == params.reason).reason
applyAfterSale(params).then(res => {
if (res.success) {
Message.success('售后申请提交成功，请到售后订单查看！')
this.$router.push({name: 'AfterSale'})
router.push({name: 'AfterSale'})
}
})
}
})
},
handleView (name) { // 预览图片
this.previewImage = name;
this.visible = true;
},
handleRemove (index) { // 移除图片
this.uploadList.splice(index, 1)
this.$forceUpdate()
},
handleSuccess (res, file) { // 上传成功回调
this.uploadList.push(res.result)
this.$forceUpdate()
},
handleBeforeUpload () { // 上传之前钩子函数
const check = this.uploadList.length < 6;
}
function handleView (name) { // 预览图片
previewImage.value = name;
visible.value = true;
}
function handleRemove (index) { // 移除图片
uploadList.value.splice(index, 1)
}
function handleSuccess (res, file) { // 上传成功回调
uploadList.value.push(res.result)
}
function handleBeforeUpload () { // 上传之前钩子函数
const check = uploadList.value.length < 6;
if (!check) {
Notice.warning({
title: '最多可以上传5张图片'
});
return check;
}
}
},
mounted () {
this.accessToken.accessToken = storage.getItem('accessToken');
this.getInfo()
}
}
onMounted(() => {
accessToken.accessToken = storage.getItem('accessToken');
getInfo()
});
</script>
<style lang="scss" scoped>

128
buyer/src/pages/home/orderCenter/Complain.vue
View File

@@ -61,101 +61,107 @@
</UserCenterLayout>
</div>
</template>
<script>
<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Notice } from "@/utils/message";
import { Camera, Delete, View } from '@element-plus/icons-vue';
import { orderDetail } from '@/api/order.js';
import { afterSaleReason, handleComplain } from '@/api/member.js';
import { buyerUrl } from '@/plugins/request.js';
import storage from '@/plugins/storage';
export default {
components: { Camera, Delete, View },
data () {
return {
order: {}, // 订单详情
orderGoods: {}, // 订单商品
form: { // 投诉表单
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const order = ref({}); // 订单详情
const orderGoods = ref({}); // 订单商品
const form = reactive({ // 投诉表单
complainTopic: '',
content: ''
}, // 表单
visible: false, // 图片预览
action: buyerUrl + '/buyer/common/upload/file', // 上传地址
accessToken: {}, // 验证token
previewImage: '', // 图片地址
loading: false, // 加载状态
reasonList: [] // 投诉原因
}
},
methods: {
getOrderDetail () { // 获取订单详情
orderDetail(this.$route.query.sn).then(res => {
this.order = res.result
this.orderGoods = res.result.orderItems[this.$route.query.index]
this.orderGoods.uploadList = []
}); // 表单
const visible = ref(false); // 图片预览
const action = ref(buyerUrl + '/buyer/common/upload/file'); // 上传地址
const accessToken = reactive({}); // 验证token
const previewImage = ref(''); // 图片地址
const loading = ref(false); // 加载状态
const reasonList = ref([]); // 投诉原因
function getOrderDetail() { // 获取订单详情
orderDetail(route.query.sn).then(res => {
order.value = res.result
orderGoods.value = res.result.orderItems[route.query.index]
orderGoods.value.uploadList = []
})
afterSaleReason('COMPLAIN').then(res => {
if (res.success) {
this.reasonList = res.result
this.form['complainTopic'] = res.result[0].reason
this.$forceUpdate()
reasonList.value = res.result
form['complainTopic'] = res.result[0].reason
instance.proxy.$forceUpdate()
}
})
},
save () { // 提交投诉信息
if (!this.form.content || !String(this.form.content).trim()) {
}
function save() { // 提交投诉信息
if (!form.content || !String(form.content).trim()) {
Message.warning('投诉内容不能为空')
return
}
let params = {
goodsId: this.orderGoods.goodsId,
complainTopic: this.form.complainTopic,
content: this.form.content,
images: this.orderGoods.uploadList.toString(),
orderSn: this.$route.query.sn,
skuId: this.orderGoods.skuId
goodsId: orderGoods.value.goodsId,
complainTopic: form.complainTopic,
content: form.content,
images: orderGoods.value.uploadList.toString(),
orderSn: route.query.sn,
skuId: orderGoods.value.skuId
}
handleComplain(params).then(res => {
if (res.success) {
Message.success('投诉申请已提交，感谢您的反馈')
this.$router.push({name: 'ComplainList'})
router.push({name: 'ComplainList'})
}
})
},
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = this.$router.resolve({
}
function goGoodsDetail(skuId, goodsId) { // 跳转商品详情
let routerUrl = router.resolve({
path: '/goodsDetail',
query: {skuId, goodsId}
})
window.open(routerUrl.href, '_blank')
},
handleView (name) { // 预览图片
this.previewImage = name;
this.visible = true;
},
handleRemove (index) { // 移除图片
this.orderGoods.uploadList.splice(index, 1)
this.$forceUpdate()
},
handleSuccess (res, file) { // 上传成功回调
this.orderGoods.uploadList.push(res.result)
this.$forceUpdate()
},
handleBeforeUpload () { // 上传之前钩子函数
const check = this.orderGoods.uploadList.length < 6;
}
function handleView(name) { // 预览图片
previewImage.value = name;
visible.value = true;
}
function handleRemove(index) { // 移除图片
orderGoods.value.uploadList.splice(index, 1)
instance.proxy.$forceUpdate()
}
function handleSuccess(res, file) { // 上传成功回调
orderGoods.value.uploadList.push(res.result)
instance.proxy.$forceUpdate()
}
function handleBeforeUpload() { // 上传之前钩子函数
const check = orderGoods.value.uploadList.length < 6;
if (!check) {
Notice.warning({
title: '最多可以上传五张图片'
});
return check;
}
}
},
mounted () {
this.accessToken.accessToken = storage.getItem('accessToken');
this.getOrderDetail()
window.scrollTo(0, 0)
}
}
onMounted(() => {
accessToken.accessToken = storage.getItem('accessToken');
getOrderDetail()
window.scrollTo(0, 0)
})
</script>
<style lang="scss" scoped>
.delivery-rate {

60
buyer/src/pages/home/orderCenter/MyAddress.vue
View File

@@ -35,30 +35,30 @@
</div>
</template>
<script>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import { Delete, Edit } from '@element-plus/icons-vue';
import { memberAddress, delMemberAddress } from '@/api/address.js';
export default {
components: { Delete, Edit },
name: 'MyAddress',
defineOptions({ name: 'MyAddress' });
data () {
return {
list: [] // 地址列表
};
},
methods: {
add () {
this.$router.push('/home/addAddress');
},
edit (id) {
// 编辑地址
this.$router.push({ path: '/home/addAddress', query: { id: id } });
},
del (id) {
// 删除地址
const router = useRouter();
const list = ref([]); // 地址列表
function add () {
router.push('/home/addAddress');
}
// 编辑地址
function edit (id) {
router.push({ path: '/home/addAddress', query: { id: id } });
}
// 删除地址
function del (id) {
Modal.confirm({
title: '提示',
content: '你确定删除这个收货地址',
@@ -66,7 +66,7 @@ export default {
delMemberAddress(id).then((res) => {
if (res.success) {
Message.success('删除成功');
this.getAddrList();
getAddrList();
}
});
},
@@ -74,20 +74,20 @@ export default {
Message.info('取消删除');
}
});
},
getAddrList () {
// 获取地址列表
}
// 获取地址列表
function getAddrList () {
memberAddress().then((res) => {
if (res.success) {
this.list = res.result.records;
list.value = res.result.records;
}
});
}
},
mounted () {
this.getAddrList();
}
};
}
onMounted(() => {
getAddrList();
});
</script>
<style scoped lang="scss">

290
buyer/src/pages/home/orderCenter/MyOrder.vue
View File

@@ -197,63 +197,49 @@
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import { getOrderList, sureReceived, cancelOrder, delOrder } from '@/api/order';
import { getOrderList, sureReceived, cancelOrder, delOrder as deleteOrder } from '@/api/order';
import { afterSaleReason } from '@/api/member';
import { orderStatusList, afterSaleStatusList } from '../enumeration.js'
export default {
name: 'MyOrder',
props: {
defineOptions({ name: 'MyOrder' });
const props = defineProps({
homePage: { // 判断是否个人中心首页展示内容
type: Boolean,
default: false
}
},
data () {
return {
orderList: [], // 订单列表
params: { // 请求参数
});
const route = useRoute();
const router = useRouter();
const orderList = ref([]); // 订单列表
const params = reactive({ // 请求参数
pageNumber: 1,
pageSize: 20,
// orderStatus: 'ALL',
keywords: '',
tag: 'ALL'
},
cancelParams: { // 取消售后参数
});
const cancelParams = reactive({ // 取消售后参数
orderSn: '',
reason: ''
},
// 状态数组
orderStatusList,
afterSaleStatusList,
changeWay: ['全部', '待付款', '待发货', '待收货/使用'],
activeOrderTab: 0,
total: 0, // 数据总数
spinShow: false, // 加载状态
afterSaleModal: false, // 选择售后商品模态框
afterSaleArr: [], // 售后商品列表
cancelAvail: false, // 取消订单modal控制
cancelReason: [] // 取消订单原因
};
},
mounted () {
if (this.homePage) this.params.pageSize = 5;
if (!this.homePage) this.applyRouteTag();
this.getList();
},
watch: {
'$route.query.tag' () {
if (this.homePage || this.$route.name !== 'MyOrder') return;
const next = this.$route.query.tag || 'ALL';
if (this.params.tag === next) return;
this.applyRouteTag();
this.getList();
}
},
methods: {
// 退款状态枚举
refundPriceList(status) {
});
const changeWay = ref(['全部', '待付款', '待发货', '待收货/使用']);
const activeOrderTab = ref(0);
const total = ref(0); // 数据总数
const spinShow = ref(false); // 加载状态
const afterSaleModal = ref(false); // 选择售后商品模态框
const afterSaleArr = ref([]); // 售后商品列表
const cancelAvail = ref(false); // 取消订单modal控制
const cancelReason = ref([]); // 取消订单原因
// 退款状态枚举
function refundPriceList(status) {
switch (status) {
case 'ALL_REFUND':
return "全部退款";
@@ -266,67 +252,67 @@ export default {
default:
return "";
}
},
goodsDetail (skuId, goodsId) {
}
function goodsDetail (skuId, goodsId) {
// 跳转商品详情
let routeUrl = this.$router.resolve({
let routeUrl = router.resolve({
path: '/goodsDetail',
query: { skuId, goodsId }
});
window.open(routeUrl.href, '_blank');
},
orderTags () {
}
function orderTags () {
return ['ALL', 'WAIT_PAY', 'WAIT_SHIP', 'WAIT_USE'];
},
applyRouteTag () {
const tags = this.orderTags();
const tag = this.$route.query.tag;
}
function applyRouteTag () {
const tags = orderTags();
const tag = route.query.tag;
const index = tags.indexOf(tag);
this.activeOrderTab = index > -1 ? index : 0;
this.params.tag = tags[this.activeOrderTab];
this.params.pageNumber = 1;
},
// 切换订单状态
change (index) {
this.activeOrderTab = index;
this.params.pageNumber = 1;
delete this.params.commentStatus;
const tags = this.orderTags();
this.params.tag = tags[index] || 'ALL';
const query = { ...this.$route.query };
activeOrderTab.value = index > -1 ? index : 0;
params.tag = tags[activeOrderTab.value];
params.pageNumber = 1;
}
// 切换订单状态
function change (index) {
activeOrderTab.value = index;
params.pageNumber = 1;
delete params.commentStatus;
const tags = orderTags();
params.tag = tags[index] || 'ALL';
const query = { ...route.query };
if (index === 0) delete query.tag;
else query.tag = this.params.tag;
const current = this.$route.query.tag || 'ALL';
if (current !== this.params.tag) {
this.$router.replace({ name: 'MyOrder', query });
else query.tag = params.tag;
const current = route.query.tag || 'ALL';
if (current !== params.tag) {
router.replace({ name: 'MyOrder', query });
}
this.getList()
},
// 跳转店铺首页
shopPage (id) {
this.$router.push({
getList()
}
// 跳转店铺首页
function shopPage (id) {
router.push({
path: '/merchant',
query: { id: id }
});
},
orderDetail (sn) {
this.$router.push({ name: 'OrderDetail', query: {sn} });
},
goAfterSaleDetail (sn) {
this.$router.push({ name: 'AfterSaleDetail', query: { sn } });
},
received (sn) { // 确认收货
}
function orderDetail (sn) {
router.push({ name: 'OrderDetail', query: {sn} });
}
function goAfterSaleDetail (sn) {
router.push({ name: 'AfterSaleDetail', query: { sn } });
}
function received (sn) { // 确认收货
sureReceived(sn).then(res => {
if (res.success) {
Message.success('确认收货成功')
this.getList()
getList()
}
})
},
goPay (sn) { // 去支付
this.$router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
},
applyAfterSale (goodsItem) { // 申请售后
}
function goPay (sn) { // 去支付
router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
}
function applyAfterSale (goodsItem) { // 申请售后
let arr = []
goodsItem.forEach(e => {
if (e.afterSaleStatus === 'NOT_APPLIED'|| e.afterSaleStatus === 'PART_AFTER_SALE') {
@@ -334,49 +320,49 @@ export default {
}
});
if (arr.length === 1) {
this.$router.push({name: 'ApplyAfterSale', query: {sn: arr[0].sn}})
router.push({name: 'ApplyAfterSale', query: {sn: arr[0].sn}})
} else {
this.afterSaleArr = arr;
this.afterSaleModal = true
afterSaleArr.value = arr;
afterSaleModal.value = true
}
},
// 申请售后
afterSaleSelect (item) {
this.$router.push({name: 'ApplyAfterSale', query: {sn: item.sn}})
},
complain (sn, goodsIndex) { // 投诉
this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
},
delOrder (sn) { // 删除订单
}
// 申请售后
function afterSaleSelect (item) {
router.push({name: 'ApplyAfterSale', query: {sn: item.sn}})
}
function complain (sn, goodsIndex) { // 投诉
router.push({name: 'Complain', query: {sn, index: goodsIndex}})
}
function delOrder (sn) { // 删除订单
Modal.confirm({
title: '删除订单',
content: '<p>确认删除当前订单吗？</p>',
onOk: () => {
delOrder(sn).then(res => {
deleteOrder(sn).then(res => {
if (res.success) {
Message.success('删除成功');
this.getList()
getList()
}
})
},
onCancel: () => {}
});
},
getList () {
this.spinShow = true;
let params = JSON.parse(JSON.stringify(this.params))
if (params.orderStatus === 'ALL') {
delete params.orderStatus
}
function getList () {
spinShow.value = true;
let _params = JSON.parse(JSON.stringify(params))
if (_params.orderStatus === 'ALL') {
delete _params.orderStatus
}
getOrderList(params).then(res => {
this.spinShow = false
getOrderList(_params).then(res => {
spinShow.value = false
if (res.success) {
this.orderList = res.result.records;
this.total = res.result.total;
orderList.value = res.result.records;
total.value = res.result.total;
}
});
},
mapAfterSaleOrder (item) {
}
function mapAfterSaleOrder (item) {
return {
...item,
isAfterSale: true,
@@ -396,51 +382,51 @@ export default {
],
allowOperationVO: {},
}
},
changePageNum (val) { // 修改页码
this.params.pageNumber = val;
this.getList()
},
changePageSize (val) { // 修改页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList()
},
handleCancelOrder (sn) {
}
function changePageNum (val) { // 修改页码
params.pageNumber = val;
getList()
}
function changePageSize (val) { // 修改页数
params.pageNumber = 1;
params.pageSize = val;
getList()
}
function handleCancelOrder (sn) {
// 取消订单
this.cancelParams.orderSn = sn;
cancelParams.orderSn = sn;
afterSaleReason('CANCEL').then(res => {
if (res.success) {
this.cancelReason = res.result;
this.cancelAvail = true
this.cancelParams.reason = this.cancelReason[0].reason
cancelReason.value = res.result;
cancelAvail.value = true
cancelParams.reason = cancelReason.value[0].reason
}
})
},
sureCancel () { // 确定取消
cancelOrder(this.cancelParams).then(res => {
}
function sureCancel () { // 确定取消
cancelOrder(cancelParams).then(res => {
if (res.success) {
Message.success('取消订单成功')
this.getList()
this.cancelAvail = false
getList()
cancelAvail.value = false
}
})
},
filterOrderStatus (status) { // 获取订单状态中文
const ob = this.orderStatusList.filter(e => { return e.status === status });
}
function filterOrderStatus (status) { // 获取订单状态中文
const ob = orderStatusList.filter(e => { return e.status === status });
return ob && ob[0] ? ob[0].name : status
},
filterAfterSaleStatus (status) {
const ob = this.afterSaleStatusList.filter(e => e.status === status);
}
function filterAfterSaleStatus (status) {
const ob = afterSaleStatusList.filter(e => e.status === status);
return ob && ob[0] ? ob[0].name : status
},
canAfterSale (order) {
}
function canAfterSale (order) {
if (order.isAfterSale || order.orderType === 'E_COUPON' || !order.groupAfterSaleStatus) {
return false
}
return order.groupAfterSaleStatus.includes('NOT_APPLIED') || order.groupAfterSaleStatus.includes('PART_AFTER_SALE')
},
paymentLabel (order) {
}
function paymentLabel (order) {
const map = {
WECHAT: '微信支付',
ALIPAY: '支付宝',
@@ -454,9 +440,21 @@ export default {
return '待支付'
}
return ''
}
}
};
}
watch(() => route.query.tag, () => {
if (props.homePage || route.name !== 'MyOrder') return;
const next = route.query.tag || 'ALL';
if (params.tag === next) return;
applyRouteTag();
getList();
});
onMounted(() => {
if (props.homePage) params.pageSize = 5;
if (!props.homePage) applyRouteTag();
getList();
});
</script>
<style scoped lang="scss">

316
buyer/src/pages/home/orderCenter/OrderDetail.vue
View File

@@ -410,7 +410,9 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import {
orderDetail,
@@ -438,89 +440,72 @@ import {
* 订单详情：E_COUPON 展示 orderItems[].cardKeys，屏蔽售后/物流（FR-B-03 / FR-B-04）。
* 移动端已完成订单用 Dialog 查看卡密（原型 P-09 / D-01）。
*/
export default {
name: "order-detail",
data() {
return {
order: {}, // 订单详情数据
progressList: [], // 订单流程
logistics: "", // 物流数据
cardKeyDialogVisible: false,
cancelParams: {
defineOptions({ name: "order-detail" });
const route = useRoute();
const router = useRouter();
const order = ref({}); // 订单详情数据
const progressList = ref([]); // 订单流程
const logistics = ref(""); // 物流数据
const cardKeyDialogVisible = ref(false);
const cancelParams = reactive({
// 取消售后参数
orderSn: "",
reason: "",
},
cancelAvail: false, // 取消订单modal控制
cancelReason: [], // 取消订单原因
orderPackage: [],
packageTraceList: [],
logisticsModal: false,
};
},
computed: {
/** 电子卡券订单：无物流/核验码，卡密数据来自 API-B-01 orderItems[].cardKeys */
isECouponOrder() {
return checkECouponOrder(this.order?.order?.orderType);
},
isVirtualOrder() {
return this.order?.order?.orderType === "VIRTUAL";
},
isNonPhysicalOrder() {
return this.isVirtualOrder || this.isECouponOrder;
},
/** 是否展示卡密区块（仅当前订单 orderItems） */
hasCardKeySection() {
return orderHasCardKeySection({
orderItems: this.order.orderItems,
isECouponOrder: this.isECouponOrder,
});
},
cardKeyFulfillLines() {
return collectCardKeyFulfillLines(this.order.orderItems);
},
ecouponCardKeyRows() {
return flattenOrderCardKeys(this.order.orderItems, false);
},
/** 商家以无需配送方式发货（包裹 fulfillmentMode=NO_DELIVERY） */
isNoDeliveryOrder() {
return checkNoDeliveryOrder(this.orderPackage);
},
displayDeliveryMethodValue() {
if (this.isNoDeliveryOrder) return "无需配送";
return this.order?.deliveryMethodValue || "-";
},
noDeliveryPackages() {
return (this.orderPackage || []).filter(isNoDeliveryPackage);
},
noDeliveryRemark() {
const pkg = this.noDeliveryPackages.find((p) => p.deliveryRemark);
});
const cancelAvail = ref(false); // 取消订单modal控制
const cancelReason = ref([]); // 取消订单原因
const orderPackage = ref([]);
const packageTraceList = ref([]);
const logisticsModal = ref(false);
/** 电子卡券订单：无物流/核验码，卡密数据来自 API-B-01 orderItems[].cardKeys */
const isECouponOrder = computed(() => checkECouponOrder(order.value?.order?.orderType));
const isVirtualOrder = computed(() => order.value?.order?.orderType === "VIRTUAL");
const isNonPhysicalOrder = computed(() => isVirtualOrder.value || isECouponOrder.value);
/** 是否展示卡密区块（仅当前订单 orderItems） */
const hasCardKeySection = computed(() =>
orderHasCardKeySection({
orderItems: order.value.orderItems,
isECouponOrder: isECouponOrder.value,
})
);
const cardKeyFulfillLines = computed(() => collectCardKeyFulfillLines(order.value.orderItems));
const ecouponCardKeyRows = computed(() => flattenOrderCardKeys(order.value.orderItems, false));
/** 商家以无需配送方式发货（包裹 fulfillmentMode=NO_DELIVERY） */
const isNoDeliveryOrder = computed(() => checkNoDeliveryOrder(orderPackage.value));
const displayDeliveryMethodValue = computed(() => {
if (isNoDeliveryOrder.value) return "无需配送";
return order.value?.deliveryMethodValue || "-";
});
const noDeliveryPackages = computed(() => (orderPackage.value || []).filter(isNoDeliveryPackage));
const noDeliveryRemark = computed(() => {
const pkg = noDeliveryPackages.value.find((p) => p.deliveryRemark);
return pkg?.deliveryRemark || "";
},
noDeliveryShipTime() {
const pkg = this.noDeliveryPackages[0];
});
const noDeliveryShipTime = computed(() => {
const pkg = noDeliveryPackages.value[0];
return pkg?.logisticsTime || "";
},
},
methods: {
isNoDeliveryPackage,
getFulfillmentModeLabel,
cardKeyFulfillAlertType,
resolveCardKeyFulfillMessage,
lineCardKeyRows(line) {
});
function lineCardKeyRows(line) {
return line.cardKeys || [];
},
copyCardKey(row) {
}
function copyCardKey(row) {
const text = `卡号：${row.cardNo || ""}\n卡密：${row.cardSecret || ""}`;
this.copyText(text);
},
copyAllCardKeys() {
const text = this.ecouponCardKeyRows
copyText(text);
}
function copyAllCardKeys() {
const text = ecouponCardKeyRows.value
.map((row, i) => `${i + 1}. 卡号：${row.cardNo || ""} 卡密：${row.cardSecret || ""}`)
.join("\n");
this.copyText(text || "");
},
copyText(text) {
copyText(text || "");
}
function copyText(text) {
if (!text) return;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(() => {
@@ -535,32 +520,37 @@ export default {
document.body.removeChild(ta);
Message.success("已复制到剪贴板");
}
},
isVatSpecialReceipt (receipt) {
}
function isVatSpecialReceipt(receipt) {
if (!receipt) return false;
const rt = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
if (rt === "2" || rt === "增值税专用发票" || receipt.invoiceKind === "VAT_SPECIAL") {
return true;
}
return false;
},
isPersonalReceipt (receipt) {
return !this.isVatSpecialReceipt(receipt);
},
formatReceiptType (receipt) {
}
function isPersonalReceipt(receipt) {
return !isVatSpecialReceipt(receipt);
}
function formatReceiptType(receipt) {
if (!receipt) return "";
const rt = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
if (rt === "电子普通发票" || rt === "增值税专用发票") return rt;
return this.isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
},
formatReceiptHeaderType (receipt) {
return isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
}
function formatReceiptHeaderType(receipt) {
if (!receipt) return "";
if (this.isVatSpecialReceipt(receipt)) return "单位";
if (isVatSpecialReceipt(receipt)) return "单位";
if (receipt.taxpayerId) return "单位";
return "个人";
},
hasValidReceipt () {
const receipt = this.order && this.order.receipt;
}
function hasValidReceipt() {
const receipt = order.value && order.value.receipt;
if (!receipt) return false;
const content = receipt.receiptContent ? String(receipt.receiptContent).trim() : '';
const title = receipt.receiptTitle ? String(receipt.receiptTitle).trim() : '';
@@ -568,39 +558,44 @@ export default {
// 后端有时会返回占位 receipt（如 receiptContent=不开发票），这里过滤掉
if (content === '不开发票') return false;
return Boolean(content || title || taxpayerId);
},
getInvoiceAddress (receipt) {
}
function getInvoiceAddress(receipt) {
if (!receipt) return "";
return receipt.invoiceAddress || receipt.invoiceFileUrl || "";
},
viewReceiptInvoice (receipt) {
const invoiceAddress = this.getInvoiceAddress(receipt);
}
function viewReceiptInvoice(receipt) {
const invoiceAddress = getInvoiceAddress(receipt);
if (!invoiceAddress) {
Message.warning("暂无发票附件");
return;
}
window.open(invoiceAddress, "_blank");
},
goodsDetail(skuId, goodsId) {
}
function goodsDetail(skuId, goodsId) {
// 跳转商品详情
let routeUrl = this.$router.resolve({
let routeUrl = router.resolve({
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routeUrl.href, "_blank");
},
// 跳转店铺首页
shopPage(id) {
this.$router.push({
}
// 跳转店铺首页
function shopPage(id) {
router.push({
path: "/merchant",
query: { id: id },
});
},
async getDetail() {
}
async function getDetail() {
// 获取订单详情
orderDetail(this.$route.query.sn).then(async (res) => {
orderDetail(route.query.sn).then(async (res) => {
if (res.success) {
this.order = res.result;
order.value = res.result;
const receiptId =
(res.result.order && res.result.order.receiptId) ||
res.result.receiptId ||
@@ -608,106 +603,115 @@ export default {
if (receiptId) {
const receiptRes = await receiptDetail(receiptId);
if (receiptRes && receiptRes.success && receiptRes.result) {
this.order["receipt"] = receiptRes.result;
order.value["receipt"] = receiptRes.result;
}
}
this.progressList = (res.result.orderLogs || []).slice().sort((a, b) => {
progressList.value = (res.result.orderLogs || []).slice().sort((a, b) => {
return new Date(a.createTime).getTime() - new Date(b.createTime).getTime();
});
if (this.order.order.deliveryMethod === 'LOGISTICS') {
this.getOrderPackage(this.order.order.sn);
if (order.value.order.deliveryMethod === 'LOGISTICS') {
getOrderPackage(order.value.order.sn);
}
}
});
},
getOrderPackage(sn) {
}
function getOrderPackage(sn) {
getPackage(sn).then(res => {
if (res.success) {
this.orderPackage = Array.isArray(res.result) ? res.result : [];
if (!this.orderPackage.length) {
this.traces();
orderPackage.value = Array.isArray(res.result) ? res.result : [];
if (!orderPackage.value.length) {
traces();
}
} else {
this.traces();
traces();
}
}).catch(() => {
this.traces();
traces();
});
},
traces() {
}
function traces() {
// 物流信息
getTraces(this.$route.query.sn).then((res) => {
getTraces(route.query.sn).then((res) => {
if (res.success) {
this.logistics = res.result;
logistics.value = res.result;
}
});
},
logisticsList() {
this.logisticsModal = true;
this.packageTraceList = this.orderPackage;
}
function logisticsList() {
logisticsModal.value = true;
packageTraceList.value = orderPackage.value;
// getTracesList(this.order.order.sn).then((res) => {
// if (res.success && res.result != null) {
// this.packageTraceList = res.result;
// }
// });
},
received(sn) {
}
function received(sn) {
// 确认收货
sureReceived(sn).then((res) => {
if (res.success) {
Message.success("确认收货成功");
this.getDetail();
getDetail();
}
});
},
goPay(sn) {
}
function goPay(sn) {
// 去支付
this.$router.push({
router.push({
path: "/payment",
query: { orderType: "ORDER", sn },
});
},
applyAfterSale(sn) {
}
function applyAfterSale(sn) {
// 申请售后
this.$router.push({ name: "ApplyAfterSale", query: { sn: sn } });
},
comment(sn, goodsIndex) {
router.push({ name: "ApplyAfterSale", query: { sn: sn } });
}
function comment(sn, goodsIndex) {
// 评价
this.$router.push({
router.push({
path: "/home/addEval",
query: { sn, index: goodsIndex },
});
},
complain(sn, goodsIndex) {
}
function complain(sn, goodsIndex) {
// 投诉
this.$router.push({ name: "Complain", query: { sn, index: goodsIndex } });
},
handleCancelOrder(sn) {
router.push({ name: "Complain", query: { sn, index: goodsIndex } });
}
function handleCancelOrder(sn) {
// 取消订单
this.cancelParams.orderSn = sn;
cancelParams.orderSn = sn;
afterSaleReason("CANCEL").then((res) => {
if (res.success) {
this.cancelReason = res.result;
this.cancelAvail = true;
this.cancelParams.reason = this.cancelReason[0].reason;
cancelReason.value = res.result;
cancelAvail.value = true;
cancelParams.reason = cancelReason.value[0].reason;
}
});
},
sureCancel() {
}
function sureCancel() {
// 确定取消
cancelOrder(this.cancelParams).then((res) => {
cancelOrder(cancelParams).then((res) => {
if (res.success) {
Message.success("取消订单成功");
this.getDetail();
this.cancelAvail = false;
getDetail();
cancelAvail.value = false;
}
});
},
},
mounted() {
this.getDetail();
},
};
}
onMounted(() => {
getDetail();
});
</script>
<style lang="scss" scoped>
.mb_10 {

139
buyer/src/pages/home/userCenter/Coupons.vue
View File

@@ -50,85 +50,87 @@
</div>
</template>
<script>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { memberCouponList } from "@/api/member.js";
export default {
name: "Coupons",
data() {
return {
statusNameList: [
defineOptions({ name: "Coupons" });
const router = useRouter();
const statusNameList = ref([
// 优惠券状态
"未使用",
"已使用",
"已过期",
],
statusList: ["NEW", "USED", "EXPIRE"], // 优惠券状态
loading: false, // 列表加载状态
params: {
]);
const statusList = ref(["NEW", "USED", "EXPIRE"]); // 优惠券状态
const loading = ref(false); // 列表加载状态
const params = reactive({
// 请求参数
pageNumber: 1,
pageSize: 20,
memberCouponStatus: "NEW",
},
total: 0, // 优惠券总数
list: [], // 优惠券列表
};
},
computed: {
activeStatusIndex() {
const index = this.statusList.indexOf(this.params.memberCouponStatus);
});
const total = ref(0); // 优惠券总数
const list = ref([]); // 优惠券列表
const activeStatusIndex = computed(() => {
const index = statusList.value.indexOf(params.memberCouponStatus);
return index > -1 ? index : 0;
},
},
methods: {
getList() {
// 获取优惠券列表
this.loading = true;
memberCouponList(this.params)
});
// 获取优惠券列表
function getList() {
loading.value = true;
memberCouponList(params)
.then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
this.list = res.result.records || [];
this.total = res.result.total || 0;
list.value = res.result.records || [];
total.value = res.result.total || 0;
}
})
.catch(() => {
this.loading = false;
this.list = [];
this.total = 0;
loading.value = false;
list.value = [];
total.value = 0;
});
},
// 切换优惠券状态
change(index) {
this.params.memberCouponStatus = this.statusList[index];
this.params.pageNumber = 1;
this.getList();
},
go(item) {
// 根据使用条件跳转商品列表页面
if (this.params.memberCouponStatus !== "NEW") return;
}
this.$router.push({
// 切换优惠券状态
function change(index) {
params.memberCouponStatus = statusList.value[index];
params.pageNumber = 1;
getList();
}
// 根据使用条件跳转商品列表页面
function go(item) {
if (params.memberCouponStatus !== "NEW") return;
router.push({
path: "/goodsList",
query: { promotionsId: item.couponId, promotionType: "COUPON" },
});
},
}
changePageNum(val) {
// 分页改变页码
this.params.pageNumber = val;
this.getList();
},
// 分页改变页码
function changePageNum(val) {
params.pageNumber = val;
getList();
}
changePageSize(val) {
// 分页改变页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList();
},
// 分页改变页数
function changePageSize(val) {
params.pageNumber = 1;
params.pageSize = val;
getList();
}
useScope(type, storeName) {
// 根据字段返回 优惠券适用范围
// 根据字段返回 优惠券适用范围
function useScope(type, storeName) {
let shop = "平台";
let goods = "全部商品";
if (storeName !== "platform") shop = storeName;
@@ -144,16 +146,18 @@ export default {
break;
}
return `${shop}${goods}可用`;
},
formatValidity(item) {
const start = this.formatCouponTime(item && item.startTime);
const end = this.formatCouponTime(item && item.endTime);
}
function formatValidity(item) {
const start = formatCouponTime(item && item.startTime);
const end = formatCouponTime(item && item.endTime);
if (start && end) return `${start} 至 ${end}`;
if (end) return `至 ${end}`;
if (start) return `${start} 起`;
return "长期有效";
},
formatCouponTime(value) {
}
function formatCouponTime(value) {
if (!value) return "";
const text = String(value).trim();
if (/^\d{4}-\d{2}-\d{2}/.test(text)) {
@@ -163,12 +167,11 @@ export default {
if (Number.isNaN(date.getTime())) return text;
const pad = (n) => String(n).padStart(2, "0");
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
},
},
mounted() {
this.getList();
},
};
}
onMounted(() => {
getList();
});
</script>
<style scoped lang="scss">

269
buyer/src/pages/home/userCenter/MoneyManagement.vue
View File

@@ -23,7 +23,7 @@
</p></template>
<div>
<el-form
ref="formData"
ref="formDataRef"
label-width="100px"
:model="formData"
:rules="formValidate"
@@ -47,7 +47,7 @@
</p></template>
<div>
<el-form
ref="withdrawApplyFormData"
ref="withdrawApplyFormDataRef"
label-width="120px"
:model="withdrawApplyFormData"
:rules="withdrawApplyFormValidate"
@@ -180,55 +180,59 @@
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@/utils/message";
import {getDepositLog, getMembersWallet, getRecharge, getWithdrawApply, recharge, withdrawalApply} from '@/api/member';
import {getDepositLog, getMembersWallet, getRecharge, getWithdrawApply, recharge as apiRecharge, withdrawalApply as apiWithdrawalApply} from '@/api/member';
import {withdrawalSettingVO} from "@/api/pay";
import { Edit } from '@element-plus/icons-vue';
export default {
name: 'MoneyManagement',
components: { Edit },
data() {
return {
activeWalletTab: "log",
frozenDeposit: 0, // 冻结余额
memberDeposit: 0, // 余额
defineOptions({ name: 'MoneyManagement' });
modal: false, // 余额充值
withdrawApplyModal: false, // 提现申请
formData: {
const router = useRouter();
const formDataRef = ref(null);
const withdrawApplyFormDataRef = ref(null);
const activeWalletTab = ref("log");
const frozenDeposit = ref(0); // 冻结余额
const memberDeposit = ref(0); // 余额
const modal = ref(false); // 余额充值
const withdrawApplyModal = ref(false); // 提现申请
const formData = reactive({
// 充值金额
price: 1
},
// 提现金额
withdrawApplyFormData: {
});
// 提现金额
const withdrawApplyFormData = reactive({
price: 1,
minPrice: 1,
type: '',
realName: '',
connectNumber: '',
},
// 余额日志
walletForm: {
});
// 余额日志
const walletForm = reactive({
// 搜索框初始化对象
pageNumber: 1,
pageSize: 20
},
// 充值记录
rechargeForm: {
});
// 充值记录
const rechargeForm = reactive({
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20 // 页面大小
},
// 提现记录
withdrawApplyForm: {
});
// 提现记录
const withdrawApplyForm = reactive({
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20 // 页面大小
},
// 提现申请校验
withdrawApplyFormValidate: {
});
// 提现申请校验
const withdrawApplyFormValidate = {
price: [
{required: true, message: '请输入大于0小于9999的合法提现金额'},
{
@@ -243,8 +247,8 @@ export default {
connectNumber: [
{required: true, message: '请输入第三方登录账号'},
],
},
formValidate: {
};
const formValidate = {
price: [
{required: true, message: '请输入大于等于1小于9999的合法充值金额'},
{
@@ -253,65 +257,64 @@ export default {
trigger: 'change'
}
]
},
logColumnsData: {},
rechargeListData: {},
withdrawApplyColumnsListData: {}
};
},
mounted() {
this.init();
},
methods: {
// 初始化数据
init() {
};
const logColumnsData = ref({});
const rechargeListData = ref({});
const withdrawApplyColumnsListData = ref({});
onMounted(() => {
init();
});
// 初始化数据
function init() {
getMembersWallet().then((res) => {
this.frozenDeposit = res.result.memberFrozenWallet;
this.memberDeposit = res.result.memberWallet;
frozenDeposit.value = res.result.memberFrozenWallet;
memberDeposit.value = res.result.memberWallet;
});
getDepositLog(this.walletForm).then((res) => {
getDepositLog(walletForm).then((res) => {
if (res.message === 'success') {
this.logColumnsData = res.result;
logColumnsData.value = res.result;
}
});
},
tabPaneChange(v) {
this.activeWalletTab = v;
}
function tabPaneChange(v) {
activeWalletTab.value = v;
if (v === 'recharge') {
this.getRechargeData();
getRechargeData();
}
if (v === 'log') {
this.init();
init();
}
if (v === 'withdrawApply') {
this.getWithdrawApplyData();
getWithdrawApplyData();
}
},
// 充值记录
getRechargeData() {
getRecharge(this.rechargeForm).then((res) => {
}
// 充值记录
function getRechargeData() {
getRecharge(rechargeForm).then((res) => {
if (res.message === 'success') {
this.rechargeListData = res.result;
rechargeListData.value = res.result;
}
});
},
// 提现记录
getWithdrawApplyData() {
getWithdrawApply(this.withdrawApplyForm).then((res) => {
}
// 提现记录
function getWithdrawApplyData() {
getWithdrawApply(withdrawApplyForm).then((res) => {
if (res.message === 'success') {
this.withdrawApplyColumnsListData = res.result;
withdrawApplyColumnsListData.value = res.result;
}
});
},
rechargeStatusText (status) {
}
function rechargeStatusText (status) {
const map = { PAID: '已付款', UNPAID: '未付款', CANCEL: '已取消' }
return map[status] || status || '—'
},
rechargeWayText (way) {
}
function rechargeWayText (way) {
const map = { ALIPAY: '支付宝', WECHAT: '微信', BANK_TRANSFER: '线下转账' }
return map[way] || way || '—'
},
withdrawStatusText (status) {
}
function withdrawStatusText (status) {
const map = {
APPLY: '申请中',
VIA_AUDITING: '审核通过',
@@ -319,49 +322,49 @@ export default {
ERROR: '提现失败'
}
return map[status] || '审核拒绝'
},
// 余额日志
changePage(v) {
this.walletForm.pageNumber = v;
this.init();
},
changePageSize(v) {
this.walletForm.pageNumber = 1;
this.walletForm.pageSize = v;
this.init();
},
// 充值记录
rechargeChangePage(v) {
this.rechargeForm.pageNumber = v;
this.getRechargeData();
},
rechargeChangePageSize(v) {
this.rechargeForm.pageNumber = 1;
this.rechargeForm.pageSize = v;
this.getRechargeData();
},
// 提现记录
withdrawChangePage(v) {
this.withdrawApplyForm.pageNumber = v;
this.getWithdrawApplyData();
},
withdrawChangePageSize(v) {
this.withdrawApplyForm.pageNumber = 1;
this.withdrawApplyForm.pageSize = v;
this.getWithdrawApplyData();
},
// 弹出在线充值框
recharge() {
this.formData.price = 1;
this.modal = true;
},
// 在线充值
rechargePrice() {
this.$refs['formData'].validate((valid) => {
}
// 余额日志
function changePage(v) {
walletForm.pageNumber = v;
init();
}
function changePageSize(v) {
walletForm.pageNumber = 1;
walletForm.pageSize = v;
init();
}
// 充值记录
function rechargeChangePage(v) {
rechargeForm.pageNumber = v;
getRechargeData();
}
function rechargeChangePageSize(v) {
rechargeForm.pageNumber = 1;
rechargeForm.pageSize = v;
getRechargeData();
}
// 提现记录
function withdrawChangePage(v) {
withdrawApplyForm.pageNumber = v;
getWithdrawApplyData();
}
function withdrawChangePageSize(v) {
withdrawApplyForm.pageNumber = 1;
withdrawApplyForm.pageSize = v;
getWithdrawApplyData();
}
// 弹出在线充值框
function recharge() {
formData.price = 1;
modal.value = true;
}
// 在线充值
function rechargePrice() {
formDataRef.value.validate((valid) => {
if (valid) {
recharge(this.formData).then((res) => {
apiRecharge(formData).then((res) => {
if (res.message === 'success') {
this.$router.push({
router.push({
path: '/payment',
query: {orderType: 'RECHARGE', sn: res.result.rechargeSn}
});
@@ -369,40 +372,38 @@ export default {
});
}
});
},
// 申请提现弹出框
withdrawalApply() {
this.withdrawApplyModal = true;
this.withdrawApplyFormData.minPrice = 1;
this.withdrawApplyFormData.price = 1;
this.withdrawApplyFormData.type = '';
this.withdrawApplyFormData.realName = '';
this.withdrawApplyFormData.connectNumber = '';
}
// 申请提现弹出框
function withdrawalApply() {
withdrawApplyModal.value = true;
withdrawApplyFormData.minPrice = 1;
withdrawApplyFormData.price = 1;
withdrawApplyFormData.type = '';
withdrawApplyFormData.realName = '';
withdrawApplyFormData.connectNumber = '';
withdrawalSettingVO().then((res) => {
if (res.code === 200) {
this.withdrawApplyFormData.minPrice = res.result.minPrice;
this.withdrawApplyFormData.type = res.result.type;
this.withdrawApplyFormData.price = 1;
withdrawApplyFormData.minPrice = res.result.minPrice;
withdrawApplyFormData.type = res.result.type;
withdrawApplyFormData.price = 1;
}
});
},
// 提现
withdrawal() {
this.$refs['withdrawApplyFormData'].validate((valid) => {
}
// 提现
function withdrawal() {
withdrawApplyFormDataRef.value.validate((valid) => {
if (valid) {
withdrawalApply(this.withdrawApplyFormData).then((res) => {
apiWithdrawalApply(withdrawApplyFormData).then((res) => {
if (res && res.success) {
Message.success('提现申请成功，关注提现状态');
this.withdrawApplyModal = false;
this.init(); // 余额查询
this.getWithdrawApplyData(); // 提现记录
withdrawApplyModal.value = false;
init(); // 余额查询
getWithdrawApplyData(); // 提现记录
}
});
}
});
}
}
};
}
</script>
<style lang="scss" scoped>

209
buyer/src/pages/home/userCenter/MyGiftCards.vue
View File

@@ -4,7 +4,7 @@
<div class="bind-section mb_20">
<div class="section-title">兑换礼品卡</div>
<el-form ref="bindForm" :model="bindForm" :rules="bindRules" inline class="bind-form">
<el-form ref="bindFormRef" :model="bindForm" :rules="bindRules" inline class="bind-form">
<el-form-item label="卡号" prop="cardNo" label-width="60px">
<el-input v-model="bindForm.cardNo" placeholder="请输入卡号" maxlength="64" style="width: 220px" />
</el-form-item>
@@ -92,7 +92,9 @@
</div>
</template>
<script>
<script setup>
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@/utils/message";
import {
getGiftCardCashMemberCardPage,
@@ -100,57 +102,56 @@ import {
activateGiftCardCashMemberCard,
} from "@/api/promotion.js";
export default {
name: "MyGiftCards",
data() {
return {
statusTab: "AVAILABLE",
loading: false,
total: 0,
list: [],
params: {
defineOptions({ name: "MyGiftCards" });
const router = useRouter();
const statusTab = ref("AVAILABLE");
const loading = ref(false);
const total = ref(0);
const list = ref([]);
const params = reactive({
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
memberCardStatus: "AVAILABLE",
},
bindSubmitting: false,
bindForm: {
});
const bindSubmitting = ref(false);
const bindForm = ref({
cardNo: "",
cardSecret: "",
},
bindRules: {
});
const bindRules = {
cardNo: [{ required: true, message: "请输入卡号", trigger: "blur" }],
cardSecret: [{ required: true, message: "请输入兑换码", trigger: "blur" }],
},
noticeModal: false,
serviceHotline: "12221111",
activatingId: "",
};
},
computed: {
primaryActionLabel() {
if (this.statusTab === "PENDING_ACTIVATION") {
};
const noticeModal = ref(false);
const serviceHotline = ref("12221111");
const activatingId = ref("");
const bindFormRef = ref(null);
const primaryActionLabel = computed(() => {
if (statusTab.value === "PENDING_ACTIVATION") {
return "激活自用";
}
if (this.statusTab === "AVAILABLE") {
if (statusTab.value === "AVAILABLE") {
return "去使用";
}
return "不可用";
},
primaryActionDisabled() {
return this.statusTab === "UNAVAILABLE";
},
pendingActivateLocked() {
return this.statusTab === "PENDING_ACTIVATION" && !!this.activatingId;
},
},
mounted() {
this.getList();
},
methods: {
formatYuan(val) {
});
const primaryActionDisabled = computed(() => {
return statusTab.value === "UNAVAILABLE";
});
const pendingActivateLocked = computed(() => {
return statusTab.value === "PENDING_ACTIVATION" && !!activatingId.value;
});
onMounted(() => {
getList();
});
function formatYuan(val) {
if (val == null || val === "") {
return "—";
}
@@ -159,8 +160,9 @@ export default {
return String(val);
}
return Number.isInteger(n) ? String(n) : n.toFixed(2).replace(/\.?0+$/, "");
},
formatValidity(row) {
}
function formatValidity(row) {
const t = row && row.expireTime;
if (!t) {
return "长期有效";
@@ -176,103 +178,111 @@ export default {
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${y}-${m}-${day} 到期`;
},
onStatusTab(name) {
this.statusTab = name;
this.params.memberCardStatus = name;
this.params.pageNumber = 1;
this.getList();
},
getList() {
this.loading = true;
const p = { ...this.params };
}
function onStatusTab(name) {
statusTab.value = name;
params.memberCardStatus = name;
params.pageNumber = 1;
getList();
}
function getList() {
loading.value = true;
const p = { ...params };
if (p.memberCardStatus) {
p.memberCardStatus = String(p.memberCardStatus);
}
getGiftCardCashMemberCardPage(p)
.then((res) => {
this.loading = false;
loading.value = false;
if (res.success && res.result) {
this.list = res.result.records || [];
this.total = res.result.total || 0;
list.value = res.result.records || [];
total.value = res.result.total || 0;
}
})
.catch(() => {
this.loading = false;
loading.value = false;
});
},
changePage(val) {
this.params.pageNumber = val;
this.getList();
},
changePageSize(val) {
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList();
},
resetBindForm() {
this.bindForm = { cardNo: "", cardSecret: "" };
this.$nextTick(() => {
if (this.$refs.bindForm) {
this.$refs.bindForm.resetFields();
}
function changePage(val) {
params.pageNumber = val;
getList();
}
function changePageSize(val) {
params.pageNumber = 1;
params.pageSize = val;
getList();
}
function resetBindForm() {
bindForm.value = { cardNo: "", cardSecret: "" };
nextTick(() => {
if (bindFormRef.value) {
bindFormRef.value.resetFields();
}
});
},
submitBind() {
this.$refs.bindForm.validate((valid) => {
}
function submitBind() {
bindFormRef.value.validate((valid) => {
if (!valid) {
return;
}
this.bindSubmitting = true;
bindSubmitting.value = true;
bindGiftCardCashMemberCard({
cardNo: String(this.bindForm.cardNo).trim(),
cardSecret: String(this.bindForm.cardSecret).trim(),
cardNo: String(bindForm.value.cardNo).trim(),
cardSecret: String(bindForm.value.cardSecret).trim(),
})
.then((res) => {
this.bindSubmitting = false;
bindSubmitting.value = false;
if (res.success) {
Message.success(res.message || "兑换成功");
this.resetBindForm();
this.params.pageNumber = 1;
this.getList();
resetBindForm();
params.pageNumber = 1;
getList();
}
})
.catch(() => {
this.bindSubmitting = false;
bindSubmitting.value = false;
});
});
},
onCardPrimaryAction(item) {
if (this.primaryActionDisabled) {
}
function onCardPrimaryAction(item) {
if (primaryActionDisabled.value) {
return;
}
if (this.statusTab === "PENDING_ACTIVATION") {
const memberCardId = this.resolveMemberCardId(item);
if (statusTab.value === "PENDING_ACTIVATION") {
const memberCardId = resolveMemberCardId(item);
if (!memberCardId) {
Message.error("卡片信息异常，无法激活");
return;
}
this.activatingId = memberCardId;
activatingId.value = memberCardId;
activateGiftCardCashMemberCard(memberCardId)
.then((res) => {
if (res.success) {
Message.success(res.message || "激活成功");
this.getList();
getList();
}
})
.catch((err) => {
console.warn('激活礼品卡失败', err);
})
.finally(() => {
this.activatingId = "";
activatingId.value = "";
});
return;
}
if (this.statusTab === "AVAILABLE") {
this.$router.push({ path: "/goodsList" });
if (statusTab.value === "AVAILABLE") {
router.push({ path: "/goodsList" });
}
},
resolveMemberCardId(row) {
}
function resolveMemberCardId(row) {
if (!row) {
return "";
}
@@ -281,13 +291,12 @@ export default {
: row.id != null && row.id !== ""
? String(row.id)
: "";
},
isActivating(item) {
const id = this.resolveMemberCardId(item);
return !!this.activatingId && this.activatingId === id;
},
},
};
}
function isActivating(item) {
const id = resolveMemberCardId(item);
return !!activatingId.value && activatingId.value === id;
}
</script>
<style scoped lang="scss">

103
buyer/src/pages/home/userCenter/MyTracks.vue
View File

@@ -38,46 +38,45 @@
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message, Modal } from "@/utils/message";
import { Delete } from '@element-plus/icons-vue';
import { tracksList, clearTracks, clearTracksById } from "@/api/member";
export default {
components: { Delete },
name: "MyTrack",
data() {
return {
list: [], // 我的足迹，商品列表
spinShow: false, // 控制loading是否加载
params: {
defineOptions({ name: "MyTrack" });
const router = useRouter();
const list = ref([]); // 我的足迹，商品列表
const spinShow = ref(false); // 控制loading是否加载
const params = reactive({
pageNumber: 1,
pageSize: 20,
order: "desc",
sort: "updateTime",
},
total: 0,
};
},
mounted() {
this.getList();
},
methods: {
goodsDetail(skuId, goodsId) {
});
const total = ref(0);
function goodsDetail(skuId, goodsId) {
// 跳转商品详情
let routeUrl = this.$router.resolve({
let routeUrl = router.resolve({
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routeUrl.href, "_blank");
},
// 跳转店铺首页
shopPage(id) {
this.$router.push({
}
// 跳转店铺首页
function shopPage(id) {
router.push({
path: "/merchant",
query: { id: id },
});
},
clearAll() {
}
function clearAll() {
// 清除全部足迹
Modal.confirm({
title: "删除",
@@ -86,50 +85,56 @@ export default {
clearTracks().then((res) => {
if (res.success) {
Message.success("删除成功");
this.getList();
getList();
}
});
},
onCancel: () => {},
});
},
clearById(id) {
}
function clearById(id) {
// 清除全部足迹
clearTracksById(id).then((res) => {
if (res.success) {
Message.success("删除成功");
this.getList();
getList();
}
});
},
changePageNum(val) {
}
function changePageNum(val) {
// 修改页码
this.params.pageNumber = val;
this.getList();
},
changePageSize(val) {
params.pageNumber = val;
getList();
}
function changePageSize(val) {
// 修改页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList();
},
getList() {
params.pageNumber = 1;
params.pageSize = val;
getList();
}
function getList() {
// 获取足迹列表
this.spinShow = true;
tracksList(this.params).then((res) => {
this.spinShow = false;
spinShow.value = true;
tracksList(params).then((res) => {
spinShow.value = false;
if (res.success && res.result.records.length) {
this.list = res.result.records.filter(item =>{
list.value = res.result.records.filter(item =>{
return item != null
});
this.total = res.result.total
total.value = res.result.total
} else {
this.list = [];
list.value = [];
}
});
},
},
};
}
onMounted(() => {
getList();
});
</script>
<style scoped lang="scss">
.wrapper {

525
buyer/src/pages/payment/Pay.vue
View File

@@ -4,7 +4,7 @@
<!-- LOGO 步骤条 -->
<div class="width_1200 logo">
<div>
<router-link to="/"><img :src="$store.state.logoImg" /></router-link>
<router-link to="/"><img :src="logoImg" /></router-link>
<div>结算页</div>
</div>
<div class="cart-steps">
@@ -317,7 +317,9 @@
</div>
</template>
<script>
<script setup>
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message, Modal, Spin } from "@/utils/message";
import { ArrowDown, ArrowUp, Check, Help } from '@element-plus/icons-vue';
import invoiceModal from "@/components/invoiceModal";
@@ -337,36 +339,96 @@ import {
import { getStoreAddress } from "@/api/shopentry.js"
import { canUseCouponList } from "@/api/member.js";
import { isECoupon, shouldSkipPaymentPage } from "@/constants/goodsType";
import { useAppStore } from "@/stores/app";
export default {
name: "Pay",
components: { invoiceModal, addressManage },
computed: {
hasInvoiceInfo() {
defineOptions({ name: "Pay" });
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const instance = getCurrentInstance();
const logoImg = computed(() => appStore.logoImg);
const invModal = ref(null);
const address = ref(null);
const selectedStoreAddress = ref('m');
const selectMethod = ref('');
const stepIndex = ref(1); // 顶部步骤条状态
const invoiceAvailable = ref(false); // 发票编辑按钮
const showEditBtn = ref(""); // 鼠标移入显示编辑按钮
const orderMark = ref(""); // 订单备注
const remarkEditing = ref({}); // 正在填写备注的店铺
const goodsType = ref(""); // 商品类型
const storeMoreAddr = ref(false);
const invoiceData = ref({
// 发票数据
//receiptContent: "不开发票",
});
const searchForm = reactive({
pageNumber: 1,
pageSize: 100
});
const shippingMethod = ref([]);
const storeAddressList = ref([]);
const shippingWay = [
{
value: "LOGISTICS",
label: "物流",
},
{
value: "SELF_PICK_UP",
label: "自提",
},
];
const selectedDeliverMethod = ref('LOGISTICS');
const addressList = ref([]); // 地址列表
const selectedAddress = ref({}); // 所选地址
const goodsList = ref([]); // 商品列表
const skuList = ref([]); // 商品sku列表
const priceDetailDTO = ref({}); // 商品价格
const totalNum = ref(0); // 购买数量
const addrId = ref(""); // 编辑地址传入的id
const moreAddr = ref(false); // 更多地址
const canUseCouponNum = ref(0); // 可用优惠券数量
const couponList = ref([]); // 可用优惠券列表
const usedCouponId = ref([]); // 已使用优惠券id
const selectedCoupon = ref({}); // 已选优惠券对象
const storeId = ref(''); //店铺Id
const giftCardList = ref([]); // TradeDTO.canUseGiftCards
const giftCardNoticeModal = ref(false);
const giftCardDeductItems = ref([]); // 已选礼品卡抵扣明细（TradeDTO.giftCardDeductItems）
const tradeGiftCardDeductTotal = ref(null); // TradeDTO.giftCardDeductTotal
const selectedGiftCardCredentialIds = ref([]); // 已选凭证 id，与 deductItems 同步
// 各店铺备注输入框组件实例，key 为 remarkKey(shop)
const remarkInputRefs = {};
const hasInvoiceInfo = computed(() => {
const title =
this.invoiceData.personalName ||
this.invoiceData.companyName ||
this.invoiceData.receiptTitle;
const content = this.invoiceData.receiptContent;
invoiceData.value.personalName ||
invoiceData.value.companyName ||
invoiceData.value.receiptTitle;
const content = invoiceData.value.receiptContent;
if (content && String(content).trim() === "不开发票") return false;
return Boolean(
(title && String(title).trim()) ||
(content && String(content).trim())
);
},
invoiceDisplayTitle() {
});
const invoiceDisplayTitle = computed(() => {
return (
this.invoiceData.personalName ||
this.invoiceData.companyName ||
this.invoiceData.receiptTitle ||
invoiceData.value.personalName ||
invoiceData.value.companyName ||
invoiceData.value.receiptTitle ||
""
);
},
giftCardDeductAmount() {
if (this.tradeGiftCardDeductTotal != null && Number(this.tradeGiftCardDeductTotal) > 0) {
return Number(this.tradeGiftCardDeductTotal);
});
const giftCardDeductAmount = computed(() => {
if (tradeGiftCardDeductTotal.value != null && Number(tradeGiftCardDeductTotal.value) > 0) {
return Number(tradeGiftCardDeductTotal.value);
}
const items = this.giftCardDeductItems || [];
const items = giftCardDeductItems.value || [];
let sum = 0;
items.forEach((it) => {
sum += Number(it.deductAmount || 0);
@@ -374,7 +436,7 @@ export default {
if (sum > 0) {
return sum;
}
const p = this.priceDetailDTO || {};
const p = priceDetailDTO.value || {};
const n = Number(
p.giftCardPrice != null
? p.giftCardPrice
@@ -385,88 +447,37 @@ export default {
: 0
);
return Number.isFinite(n) ? n : 0;
},
/** 电子卡券结算：免地址、隐藏发票；优惠券/礼品卡/促销明细可用（M-02） */
isECouponCheckout() {
return isECoupon(this.goodsType);
},
/** 虚拟型结算（核销虚拟 + 电子卡券）：均不需要收货地址 */
isVirtualLikeCheckout() {
return this.goodsType === "VIRTUAL_GOODS" || this.isECouponCheckout;
},
},
data() {
return {
selectedStoreAddress: 'm',
selectMethod: '',
stepIndex: 1, // 顶部步骤条状态
invoiceAvailable: false, // 发票编辑按钮
showEditBtn: "", // 鼠标移入显示编辑按钮
orderMark: "", // 订单备注
remarkEditing: {}, // 正在填写备注的店铺
goodsType: "", // 商品类型
storeMoreAddr: false,
invoiceData: {
// 发票数据
//receiptContent: "不开发票",
},
searchForm: {
pageNumber: 1,
pageSize: 100
},
shippingMethod: [],
storeAddressList: [],
shippingWay: [
{
value: "LOGISTICS",
label: "物流",
},
{
value: "SELF_PICK_UP",
label: "自提",
},
],
selectedDeliverMethod: 'LOGISTICS',
addressList: [], // 地址列表
selectedAddress: {}, // 所选地址
goodsList: [], // 商品列表
priceDetailDTO: {}, // 商品价格
totalNum: 0, // 购买数量
addrId: "", // 编辑地址传入的id
moreAddr: false, // 更多地址
canUseCouponNum: 0, // 可用优惠券数量
couponList: [], // 可用优惠券列表
usedCouponId: [], // 已使用优惠券id
selectedCoupon: {}, // 已选优惠券对象
storeId: '', //店铺Id
giftCardList: [], // TradeDTO.canUseGiftCards
giftCardNoticeModal: false,
giftCardDeductItems: [], // 已选礼品卡抵扣明细（TradeDTO.giftCardDeductItems）
tradeGiftCardDeductTotal: null, // TradeDTO.giftCardDeductTotal
selectedGiftCardCredentialIds: [], // 已选凭证 id，与 deductItems 同步
};
},
mounted() {
this.init();
},
methods: {
// 初始化数据
init() {
this.getGoodsDetail();
this.getDistribution();
},
goAddressManage() {
});
/** 电子卡券结算：免地址、隐藏发票；优惠券/礼品卡/促销明细可用（M-02） */
const isECouponCheckout = computed(() => {
return isECoupon(goodsType.value);
});
/** 虚拟型结算（核销虚拟 + 电子卡券）：均不需要收货地址 */
const isVirtualLikeCheckout = computed(() => {
return goodsType.value === "VIRTUAL_GOODS" || isECouponCheckout.value;
});
onMounted(() => {
init();
});
// 初始化数据
function init() {
getGoodsDetail();
getDistribution();
}
function goAddressManage() {
// 跳转地址管理页面
this.$router.push("/home/MyAddress");
},
getAddress() {
router.push("/home/MyAddress");
}
function getAddress() {
// 获取收货地址列表
memberAddress(this.searchForm).then((res) => {
memberAddress(searchForm).then((res) => {
if (res.success) {
this.addressList = res.result?.records || [];
this.addressList.forEach((e, index) => {
if (e.id === this.selectedAddress.id && index > 2) {
this.moreAddr = true;
addressList.value = res.result?.records || [];
addressList.value.forEach((e, index) => {
if (e.id === selectedAddress.value.id && index > 2) {
moreAddr.value = true;
}
});
}
@@ -474,37 +485,37 @@ export default {
// 网络/登录异常已由 request 层统一提示，地址列表保持为空，可正常新增地址
console.warn("获取收货地址列表失败", err);
});
},
// 获取配送方式列表
async getDistribution() {
}
// 获取配送方式列表
async function getDistribution() {
try {
let shopRes = await shippingMethodList({ way: this.$route.query.way });
let shopRes = await shippingMethodList({ way: route.query.way });
let shopList;
if (shopRes.success) {
shopList = shopRes.result || [];
let way = [];
this.shippingWay.forEach((item) => {
shippingWay.forEach((item) => {
shopList.forEach((child) => {
if (item.value == child) {
way.push(item);
}
});
});
this.shippingMethod = way;
shippingMethod.value = way;
}
} catch (err) {
// 网络/登录异常已由 request 层统一提示，配送方式保持为空不影响页面其余模块
console.warn("获取配送方式列表失败", err);
}
},
}
async getStoreAddressList() {
getStoreAddress(this.storeId,this.searchForm).then(res => {
async function getStoreAddressList() {
getStoreAddress(storeId.value, searchForm).then(res => {
if (res.success) {
this.storeAddressList = res.result?.records || []
this.storeAddressList.forEach((e, index) => {
if (e.id === this.selectedAddress.id && index > 2) {
this.storeMoreAddr = true;
storeAddressList.value = res.result?.records || []
storeAddressList.value.forEach((e, index) => {
if (e.id === selectedAddress.value.id && index > 2) {
storeMoreAddr.value = true;
}
});
}
@@ -512,11 +523,11 @@ export default {
// 网络/登录异常已由 request 层统一提示，自提点列表保持为空
console.warn("获取自提点列表失败", err);
})
},
getGoodsDetail() {
}
function getGoodsDetail() {
// 订单商品详情
Spin.show();
cartGoodsPay({ way: this.$route.query.way })
cartGoodsPay({ way: route.query.way })
.then((res) => {
Spin.hide();
if (res.success) {
@@ -536,27 +547,27 @@ export default {
(firstSku.errorMessage || ""),
});
}
this.$router.push({
router.push({
path: "/cart",
replace: true,
});
return;
}
this.goodsList = result.cartList || [];
this.priceDetailDTO = result.priceDetailDTO || {};
this.skuList = result.skuList || [];
if (this.skuList[0]?.goodsSku) {
this.goodsType = this.skuList[0].goodsSku.goodsType;
goodsList.value = result.cartList || [];
priceDetailDTO.value = result.priceDetailDTO || {};
skuList.value = result.skuList || [];
if (skuList.value[0]?.goodsSku) {
goodsType.value = skuList.value[0].goodsSku.goodsType;
}
this.storeId = this.goodsList[0]?.storeId || ''
storeId.value = goodsList.value[0]?.storeId || ''
if (result.receiptVO) {
this.invoiceData = result.receiptVO;
invoiceData.value = result.receiptVO;
}
let notSupArea = result.notSupportFreight;
this.selectedCoupon = {};
selectedCoupon.value = {};
const platformCouponId = result.platformCoupon?.memberCoupon?.id;
if (platformCouponId)
this.selectedCoupon[platformCouponId] = result.platformCoupon;
selectedCoupon.value[platformCouponId] = result.platformCoupon;
if (
result.storeCoupons &&
Object.keys(result.storeCoupons)[0]
@@ -567,7 +578,7 @@ export default {
let storeCouponId =
result.storeCoupons[storeMemberCouponsId]?.memberCoupon?.id;
if (storeCouponId)
this.selectedCoupon[storeCouponId] =
selectedCoupon.value[storeCouponId] =
result.storeCoupons[storeMemberCouponsId];
}
if (notSupArea) {
@@ -583,39 +594,39 @@ export default {
});
}
if (result.memberAddress) {
this.selectedAddress = result.memberAddress;
selectedAddress.value = result.memberAddress;
}
this.getAddress();
this.getStoreAddressList();
this.totalNum = 0;
for (let i = 0; i < this.skuList.length; i++) {
this.totalNum += this.skuList[i].num || 0;
getAddress();
getStoreAddressList();
totalNum.value = 0;
for (let i = 0; i < skuList.value.length; i++) {
totalNum.value += skuList.value[i].num || 0;
}
this.usedCouponId = [];
this.couponList = result.canUseCoupons || [];
const couponKeys = Object.keys(this.selectedCoupon);
usedCouponId.value = [];
couponList.value = result.canUseCoupons || [];
const couponKeys = Object.keys(selectedCoupon.value);
if (couponKeys.length) {
this.couponList.forEach((e) => {
couponList.value.forEach((e) => {
if (
this.selectedCoupon[e.id] &&
e.id === this.selectedCoupon[e.id]?.memberCoupon?.id
selectedCoupon.value[e.id] &&
e.id === selectedCoupon.value[e.id]?.memberCoupon?.id
) {
this.usedCouponId.push(e.id);
usedCouponId.value.push(e.id);
}
});
this.$nextTick(() => {
this.$forceUpdate();
nextTick(() => {
instance.proxy.$forceUpdate();
});
}
this.giftCardDeductItems = Array.isArray(result.giftCardDeductItems)
giftCardDeductItems.value = Array.isArray(result.giftCardDeductItems)
? result.giftCardDeductItems
: [];
this.tradeGiftCardDeductTotal =
tradeGiftCardDeductTotal.value =
result.giftCardDeductTotal != null && result.giftCardDeductTotal !== ""
? Number(result.giftCardDeductTotal)
: null;
this.giftCardList = Array.isArray(result.canUseGiftCards) ? result.canUseGiftCards : [];
this.syncGiftCardSelectionFromCart(result);
giftCardList.value = Array.isArray(result.canUseGiftCards) ? result.canUseGiftCards : [];
syncGiftCardSelectionFromCart(result);
}
})
.catch((err) => {
@@ -626,22 +637,22 @@ export default {
}
console.warn("获取结算数据失败", err);
});
},
syncGiftCardSelectionFromCart(result) {
}
function syncGiftCardSelectionFromCart(result) {
if (!result) {
this.selectedGiftCardCredentialIds = [];
selectedGiftCardCredentialIds.value = [];
return;
}
const selectedIds = result.selectedGiftCardIds;
if (Array.isArray(selectedIds) && selectedIds.length) {
this.selectedGiftCardCredentialIds = selectedIds
selectedGiftCardCredentialIds.value = selectedIds
.map((id) => (id != null && id !== "" ? String(id) : ""))
.filter(Boolean);
return;
}
const items = Array.isArray(result.giftCardDeductItems) ? result.giftCardDeductItems : [];
if (items.length) {
this.selectedGiftCardCredentialIds = items
selectedGiftCardCredentialIds.value = items
.map((it) => (it.credentialId != null && it.credentialId !== "" ? String(it.credentialId) : ""))
.filter(Boolean);
return;
@@ -655,10 +666,10 @@ export default {
(result.selectedGiftCard && (result.selectedGiftCard.id || result.selectedGiftCard.credentialId)) ||
(result.giftCardCashSelected && result.giftCardCashSelected.id) ||
null;
this.selectedGiftCardCredentialIds =
selectedGiftCardCredentialIds.value =
id != null && id !== "" ? [String(id)] : [];
},
formatGiftFaceValue(val) {
}
function formatGiftFaceValue(val) {
if (val == null || val === "") {
return "—";
}
@@ -667,8 +678,8 @@ export default {
return String(val);
}
return Number.isInteger(n) ? String(n) : n.toFixed(2).replace(/\.?0+$/, "");
},
formatGiftExpire(row) {
}
function formatGiftExpire(row) {
const t = row && row.expireTime;
if (!t) {
return "长期有效";
@@ -684,27 +695,27 @@ export default {
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${y}-${m}-${day} 到期`;
},
toggleGiftCard(item) {
}
function toggleGiftCard(item) {
if (!item || item.id == null || item.id === "") {
return;
}
if (this.isGiftCardSelected(item)) {
this.useGiftCard(item.id, false);
if (isGiftCardSelected(item)) {
useGiftCard(item.id, false);
} else {
this.useGiftCard(item.id, true);
useGiftCard(item.id, true);
}
},
isGiftCardSelected(item) {
if (!item || !this.selectedGiftCardCredentialIds.length) {
}
function isGiftCardSelected(item) {
if (!item || !selectedGiftCardCredentialIds.value.length) {
return false;
}
const id = item.id != null ? String(item.id) : "";
return id && this.selectedGiftCardCredentialIds.includes(id);
},
useGiftCard(credentialId, used) {
return id && selectedGiftCardCredentialIds.value.includes(id);
}
function useGiftCard(credentialId, used) {
const params = {
way: this.$route.query.way,
way: route.query.way,
used,
};
if (credentialId != null && credentialId !== "") {
@@ -712,21 +723,21 @@ export default {
}
selectGiftCard(params).then((res) => {
if (res.success) {
this.init();
init();
}
}).catch((err) => {
// 网络/登录异常已由 request 层统一提示
console.warn("选择礼品卡失败", err);
});
},
getCouponNum() {
}
function getCouponNum() {
// 获取可用优惠券数量
couponNum({ way: this.$route.query.way }).then((res) => {
this.canUseCouponNum = res.result;
couponNum({ way: route.query.way }).then((res) => {
canUseCouponNum.value = res.result;
if (res.result) {
let storeArr = [];
let skuArr = [];
this.goodsList.forEach((e) => {
goodsList.value.forEach((e) => {
storeArr.push(e.storeId);
e.skuList?.forEach((i) => {
skuArr.push(i.goodsSku?.id);
@@ -738,21 +749,21 @@ export default {
memberCouponStatus: "NEW",
scopeId: skuArr.toString(),
storeId: storeArr.toString(),
totalPrice: this.priceDetailDTO.goodsPrice,
totalPrice: priceDetailDTO.value.goodsPrice,
};
canUseCouponList(params).then((res) => {
// 可用优惠券列表
if (res.success) this.couponList = res.result?.records || [];
const couponKeys = Object.keys(this.selectedCoupon);
this.usedCouponId = [];
if (res.success) couponList.value = res.result?.records || [];
const couponKeys = Object.keys(selectedCoupon.value);
usedCouponId.value = [];
if (couponKeys.length) {
this.couponList.forEach((e) => {
if (e.id === this.selectedCoupon[couponKeys]?.memberCoupon?.id) {
this.usedCouponId.push(e.id);
couponList.value.forEach((e) => {
if (e.id === selectedCoupon.value[couponKeys]?.memberCoupon?.id) {
usedCouponId.value.push(e.id);
}
});
this.$nextTick(() => {
this.$forceUpdate();
nextTick(() => {
instance.proxy.$forceUpdate();
});
}
}).catch((err) => {
@@ -764,87 +775,89 @@ export default {
// 网络/登录异常已由 request 层统一提示
console.warn("获取可用优惠券数量失败", err);
});
},
remarkKey(shop) {
}
function remarkKey(shop) {
return shop.storeId || shop.storeName;
},
remarkInputRef(shop) {
return "remarkInput" + this.remarkKey(shop);
},
isRemarkOpen(shop) {
return !!this.remarkEditing[this.remarkKey(shop)];
},
openRemark(shop) {
const key = this.remarkKey(shop);
this.remarkEditing = { ...this.remarkEditing, [key]: true };
this.$nextTick(() => {
const input = this.$refs[this.remarkInputRef(shop)];
}
function remarkInputRef(shop) {
return (el) => {
remarkInputRefs[remarkKey(shop)] = el;
};
}
function isRemarkOpen(shop) {
return !!remarkEditing.value[remarkKey(shop)];
}
function openRemark(shop) {
const key = remarkKey(shop);
remarkEditing.value = { ...remarkEditing.value, [key]: true };
nextTick(() => {
const input = remarkInputRefs[remarkKey(shop)];
const target = Array.isArray(input) ? input[0] : input;
target?.focus?.();
});
},
closeRemark(shop) {
}
function closeRemark(shop) {
if (shop.remark) {
shop.remark = String(shop.remark).trim();
}
const key = this.remarkKey(shop);
this.remarkEditing = { ...this.remarkEditing, [key]: false };
},
selectAddress(item) {
const key = remarkKey(shop);
remarkEditing.value = { ...remarkEditing.value, [key]: false };
}
function selectAddress(item) {
// 选择地址
let params = {
way: this.$route.query.way,
way: route.query.way,
shippingAddressId: item.id,
};
selectAddr(params).then((res) => {
if (res.success) {
Message.success("选择收货地址成功");
this.selectMethod = item;
this.getGoodsDetail();
selectMethod.value = item;
getGoodsDetail();
}
}).catch((err) => {
// 网络/登录异常已由 request 层统一提示
console.warn("选择收货地址失败", err);
});
},
selectStoreAddress(item) {
}
function selectStoreAddress(item) {
// 选择自提地址
setStoreAddressId(item.id,this.$route.query.way).then((res) => {
setStoreAddressId(item.id, route.query.way).then((res) => {
if (res.success) {
Message.success("选择自提地址成功");
this.selectedStoreAddress = item;
this.getGoodsDetail();
selectedStoreAddress.value = item;
getGoodsDetail();
}
}).catch((err) => {
// 网络/登录异常已由 request 层统一提示
console.warn("选择自提地址失败", err);
});
},
selectDeliverMethod(item) {
}
function selectDeliverMethod(item) {
let params = {
way: this.$route.query.way,
way: route.query.way,
shippingMethod: item.value,
};
setShipMethod(params).then((res) => {
if (res.success) {
this.selectedDeliverMethod = item.value;
this.getGoodsDetail();
selectedDeliverMethod.value = item.value;
getGoodsDetail();
}
}).catch((err) => {
// 网络/登录异常已由 request 层统一提示
console.warn("切换配送方式失败", err);
});
},
editAddress(id) {
}
function editAddress(id) {
// 编辑地址
this.addrId = id;
this.$refs.address.show();
},
addrChange() {
addrId.value = id;
address.value.show();
}
function addrChange() {
// 添加，编辑地址回显
this.getAddress();
},
delAddress(item) {
getAddress();
}
function delAddress(item) {
// 删除地址
Modal.confirm({
title: "提示",
@@ -853,7 +866,7 @@ export default {
delMemberAddress(item.id).then((res) => {
if (res.success) {
Message.success("删除成功");
this.getAddress();
getAddress();
}
}).catch((err) => {
// 网络/登录异常已由 request 层统一提示
@@ -862,56 +875,56 @@ export default {
},
onCancel: () => { },
});
},
goGoodsDetail(skuId, goodsId) {
}
function goGoodsDetail(skuId, goodsId) {
// 跳转商品详情
let routeUrl = this.$router.resolve({
let routeUrl = router.resolve({
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routeUrl.href, "_blank");
},
// 跳转店铺首页
goShopPage(id) {
this.$router.push({
}
// 跳转店铺首页
function goShopPage(id) {
router.push({
path: "/merchant",
query: { id: id },
});
},
useCoupon(id, used) {
}
function useCoupon(id, used) {
// 使用优惠券
let params = {
way: this.$route.query.way,
way: route.query.way,
memberCouponId: id,
used: used, // true 为使用， false为弃用
};
selectCoupon(params).then((res) => {
if (res.success) this.init();
if (res.success) init();
}).catch((err) => {
// 网络/登录异常已由 request 层统一提示
console.warn("使用优惠券失败", err);
});
},
editInvoice() {
}
function editInvoice() {
// 编辑发票信息
this.$refs.invModal.invoiceAvailable = true;
},
getInvMsg(item) {
invModal.value.invoiceAvailable = true;
}
function getInvMsg(item) {
// 获取发票信息
if (item) {
this.init();
this.$refs.invModal.invoiceAvailable = false;
init();
invModal.value.invoiceAvailable = false;
}
},
}
pay() {
function pay() {
// 结算
const params = {
client: "PC",
remark: [],
way: this.$route.query.way,
way: route.query.way,
};
this.goodsList.forEach((e) => {
goodsList.value.forEach((e) => {
if (e.remark) {
params.remark.push({
remark: e.remark,
@@ -929,10 +942,10 @@ export default {
if (res.success) {
const way = params.way;
if (shouldSkipPaymentPage(res.result, way)) {
this.$router.push("/payDone");
router.push("/payDone");
return;
}
this.$router.push({
router.push({
path: "/payment",
query: { orderType: "TRADE", sn: res.result.sn },
});
@@ -948,9 +961,9 @@ export default {
}
console.warn("提交订单失败", err);
});
},
// 优惠券可用范围
useScope(type, storeName) {
}
// 优惠券可用范围
function useScope(type, storeName) {
let shop = "平台";
let goods = "全部商品";
if (storeName !== "platform") shop = storeName;
@@ -966,9 +979,7 @@ export default {
break;
}
return `${shop}${goods}可用`;
},
},
};
}
</script>
<style scoped lang="scss">

13
buyer/src/pages/payment/PayDone.vue
View File

@@ -12,13 +12,14 @@
</div>
</template>
<script>
export default {
name: 'PayDone',
mounted () {
<script setup>
import { onMounted } from "vue";
defineOptions({ name: 'PayDone' });
onMounted(() => {
document.querySelector('.pay-done').style.height = window.innerHeight + 'px'
}
};
});
</script>
<style scoped lang='scss'>

107
buyer/src/pages/payment/PayMent.vue
View File

@@ -35,72 +35,71 @@
<BaseFooter></BaseFooter>
</div>
</template>
<script>
<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { tradeDetail, pay } from '@/api/pay.js';
import { Message, Modal } from "@/utils/message";
export default {
data () {
return {
payDetail: {},
support: [],
walletValue: 0,
qrcode: '',
endTime: 0,
endText: '订单已超时取消',
isStart: false,
now: Date.now(),
countdownTimer: null,
};
},
computed: {
countdownText () {
if (!this.isStart || !this.endTime) return '';
const diff = this.endTime - this.now;
if (diff <= 0) return this.endText;
const route = useRoute();
const router = useRouter();
const payDetail = ref({});
const support = ref([]);
const walletValue = ref(0);
const qrcode = ref('');
const endTime = ref(0);
const endText = ref('订单已超时取消');
const isStart = ref(false);
const now = ref(Date.now());
let countdownTimer = null;
const countdownText = computed(() => {
if (!isStart.value || !endTime.value) return '';
const diff = endTime.value - now.value;
if (diff <= 0) return endText.value;
const days = Math.floor(diff / 86400000);
const hours = Math.floor((diff % 86400000) / 3600000);
const minutes = Math.floor((diff % 3600000) / 60000);
const seconds = Math.floor((diff % 60000) / 1000);
return `${days}天${hours}小时${minutes}分钟${seconds}秒`;
},
},
methods: {
// 获取订单详情
getTradeDetail () {
const params = this.$route.query;
});
// 获取订单详情
function getTradeDetail() {
const params = route.query;
params.clientType = 'PC'
tradeDetail(params).then(res => {
if (res.success) {
this.payDetail = res.result;
this.endTime = this.payDetail.autoCancel
this.isStart = true
this.support = this.payDetail.support
this.walletValue = this.payDetail.walletValue
const price = Number(this.payDetail.price);
payDetail.value = res.result;
endTime.value = payDetail.value.autoCancel
isStart.value = true
support.value = payDetail.value.support
walletValue.value = payDetail.value.walletValue
const price = Number(payDetail.value.price);
if (!Number.isNaN(price) && price <= 0) {
this.$router.replace('/payDone');
router.replace('/payDone');
}
}
}).catch((err) => {
this.$router.push({name: 'MyOrder'});
router.push({name: 'MyOrder'});
});
},
// 支付
handlePay (way) {
}
// 支付
function handlePay(way) {
// 余额支付则直接跳转
if (way === 'WALLET') {
// 如果待支付金额大于余额，则报错
if (this.payDetail.price > this.walletValue) {
if (payDetail.value.price > walletValue.value) {
Message.error('余额不足以支付当前订单，如需充值请前往会员中心');
return;
}
}
const params = this.$route.query;
const params = route.query;
params.paymentMethod = way;
params.paymentClient = 'NATIVE';
params.price = this.payDetail.price;
params.price = payDetail.value.price;
if (way === 'WALLET') {
Modal.confirm({
title: '支付确认',
@@ -110,7 +109,7 @@ export default {
.then((res) => {
if (res.success) {
Message.success(res.message || '支付成功');
this.$router.push('/payDone');
router.push('/payDone');
} else {
Message.warning(res.message || '支付失败');
}
@@ -124,20 +123,20 @@ export default {
}
});
} else {
this.$router.push({path: '/qrpay', query: params});
router.push({path: '/qrpay', query: params});
}
}
},
mounted () {
this.getTradeDetail();
this.countdownTimer = setInterval(() => {
this.now = Date.now();
}
onMounted(() => {
getTradeDetail();
countdownTimer = setInterval(() => {
now.value = Date.now();
}, 1000);
},
beforeUnmount () {
if (this.countdownTimer) clearInterval(this.countdownTimer);
},
};
});
onBeforeUnmount(() => {
if (countdownTimer) clearInterval(countdownTimer);
});
</script>
<style scoped lang="scss">
.head-left {

120
buyer/src/pages/payment/ThirdPay.vue
View File

@@ -44,89 +44,91 @@
<BaseFooter></BaseFooter>
</div>
</template>
<script>
<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import { Iphone } from '@element-plus/icons-vue';
import vueQr from 'vue-qr';
import { payCallback, pay } from '@/api/pay.js';
export default {
components: { vueQr, Iphone },
data () {
return {
qrcode: '',
params: this.$route.query,
interval: null,
num: 0,
payLoading: false,
payError: '',
};
},
computed: {
payWayName () {
return this.params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信';
},
},
methods: {
formatPayError (rawMessage) {
const route = useRoute();
const router = useRouter();
const qrcode = ref('');
const params = ref(route.query);
const num = ref(0);
const payLoading = ref(false);
const payError = ref('');
let interval = null;
const payWayName = computed(() => {
return params.value.paymentMethod === 'ALIPAY' ? '支付宝' : '微信';
});
function formatPayError (rawMessage) {
const message = (rawMessage || '').trim();
if (!message || message === '支付业务异常，请稍后重试') {
return `${this.payWayName}支付暂不可用，请稍后重试或选择其他支付方式`;
return `${payWayName.value}支付暂不可用，请稍后重试或选择其他支付方式`;
}
return message;
},
clearPayPoll () {
if (this.interval) {
clearInterval(this.interval);
this.interval = null;
}
function clearPayPoll () {
if (interval) {
clearInterval(interval);
interval = null;
}
},
handlePay () {
this.clearPayPoll();
const params = this.$route.query;
this.payLoading = true;
this.payError = '';
this.qrcode = '';
}
function handlePay () {
clearPayPoll();
const params = route.query;
payLoading.value = true;
payError.value = '';
qrcode.value = '';
pay(params, { skipMessage: true })
.then((res) => {
this.payLoading = false;
payLoading.value = false;
if (res.success && res.result) {
this.qrcode = res.result;
this.num = 0;
this.interval = setInterval(this.callback, 5000);
qrcode.value = res.result;
num.value = 0;
interval = setInterval(callback, 5000);
return;
}
this.payError = this.formatPayError(res.message);
Message.error(this.payError);
payError.value = formatPayError(res.message);
Message.error(payError.value);
})
.catch((err) => {
this.payLoading = false;
this.payError = this.formatPayError(err?.message || err?.data?.message);
Message.error(this.payError);
payLoading.value = false;
payError.value = formatPayError(err?.message || err?.data?.message);
Message.error(payError.value);
});
},
callback () {
this.num++;
if (this.num >= 7) {
this.clearPayPoll();
}
function callback () {
num.value++;
if (num.value >= 7) {
clearPayPoll();
}
const params = JSON.parse(JSON.stringify(this.$route.query));
const params = JSON.parse(JSON.stringify(route.query));
delete params.paymentMethod;
delete params.paymentClient;
payCallback(params).then((res) => {
if (res.result) {
this.clearPayPoll();
this.$router.push({ path: '/payDone', query: { orderType: this.$route.query.orderType } });
clearPayPoll();
router.push({ path: '/payDone', query: { orderType: route.query.orderType } });
}
});
},
},
mounted () {
this.handlePay();
},
beforeUnmount () {
this.clearPayPoll();
},
};
}
onMounted(() => {
handlePay();
});
onBeforeUnmount(() => {
clearPayPoll();
});
</script>
<style scoped lang="scss">
.head-left {

162
buyer/src/pages/promotion/PointGoodsDetail.vue
View File

@@ -93,6 +93,18 @@
</template>
<script>
export default {
name: "PointGoodsDetail",
beforeRouteEnter(to, from, next) {
window.scrollTo(0, 0);
next();
},
};
</script>
<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@/utils/message";
import Search from "@/components/Search";
import { addCartGoods } from "@/api/cart.js";
@@ -104,115 +116,109 @@ import {
E_COUPON_CART_POINTS,
} from "@/constants/goodsType";
export default {
name: "PointGoodsDetail",
components: { Search },
beforeRouteEnter(to, from, next) {
window.scrollTo(0, 0);
next();
},
created() {
this.getGoodsDetail();
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
data() {
return {
goodsMsg: {},
goodsSku: {},
isLoading: false,
onceFlag: true,
count: 1,
loading: false,
};
},
computed: {
isECouponSku() {
return isECoupon(this.goodsSku.goodsType);
},
displayStock() {
if (this.isECouponSku) {
return getECouponStock(this.goodsSku);
const route = useRoute();
const router = useRouter();
const goodsMsg = ref({});
const goodsSku = ref({});
const isLoading = ref(false);
const onceFlag = ref(true);
const count = ref(1);
const loading = ref(false);
const itemIntroGoods = ref(null);
const isECouponSku = computed(() => {
return isECoupon(goodsSku.value.goodsType);
});
const displayStock = computed(() => {
if (isECouponSku.value) {
return getECouponStock(goodsSku.value);
}
return Number(this.goodsSku.quantity) || 0;
},
quantityMax() {
if (this.isECouponSku) {
return getECouponMaxBuyNum(this.goodsSku);
return Number(goodsSku.value.quantity) || 0;
});
const quantityMax = computed(() => {
if (isECouponSku.value) {
return getECouponMaxBuyNum(goodsSku.value);
}
const qty = Number(this.goodsSku.quantity) || 0;
const qty = Number(goodsSku.value.quantity) || 0;
return qty > 0 ? qty : 1;
},
isOutOfStock() {
return this.displayStock <= 0;
},
},
methods: {
getGoodsDetail() {
this.isLoading = true;
pointGoodsDetail(this.$route.query.id)
});
const isOutOfStock = computed(() => {
return displayStock.value <= 0;
});
function getGoodsDetail() {
isLoading.value = true;
pointGoodsDetail(route.query.id)
.then((res) => {
this.isLoading = false;
isLoading.value = false;
if (res.success) {
this.goodsMsg = res.result;
this.goodsSku = res.result.goodsSku || {};
this.syncCountWithQuantity();
goodsMsg.value = res.result;
goodsSku.value = res.result.goodsSku || {};
syncCountWithQuantity();
} else {
Message.error(res.message);
this.$router.push("/");
router.push("/");
}
})
.catch(() => {
this.$router.push("/");
router.push("/");
});
},
syncCountWithQuantity() {
const max = this.quantityMax;
}
function syncCountWithQuantity() {
const max = quantityMax.value;
if (max <= 0) {
this.count = 1;
count.value = 1;
return;
}
if (this.count > max) this.count = max;
if (this.count < 1) this.count = 1;
},
pointBuy() {
if (count.value > max) count.value = max;
if (count.value < 1) count.value = 1;
}
function pointBuy() {
const params = {
num: this.count,
skuId: this.goodsMsg.skuId,
num: count.value,
skuId: goodsMsg.value.skuId,
cartType: E_COUPON_CART_POINTS,
};
this.loading = true;
loading.value = true;
addCartGoods(params)
.then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
this.$router.push({ path: "/pay", query: { way: params.cartType } });
router.push({ path: "/pay", query: { way: params.cartType } });
} else {
Message.warning(res.message);
}
})
.catch(() => {
this.loading = false;
loading.value = false;
});
},
handleScroll() {
if (this.onceFlag) {
this.$nextTick(() => {
this.changeHeight();
}
function handleScroll() {
if (onceFlag.value) {
nextTick(() => {
changeHeight();
});
this.onceFlag = false;
onceFlag.value = false;
}
},
changeHeight() {
}
function changeHeight() {
const goodsDetailCon = document.querySelector(".item-intro");
if (!goodsDetailCon || !this.$refs.itemIntroGoods) return;
if (!goodsDetailCon || !itemIntroGoods.value) return;
let heightCss = window.getComputedStyle(goodsDetailCon).height;
heightCss = parseInt(heightCss.substr(0, heightCss.length - 2), 10) + 89;
this.$refs.itemIntroGoods.style.height = heightCss + "px";
},
},
};
itemIntroGoods.value.style.height = heightCss + "px";
}
getGoodsDetail();
onMounted(() => {
window.addEventListener("scroll", handleScroll);
});
</script>
<style scoped lang="scss">

138
buyer/src/pages/promotion/PointMall.vue
View File

@@ -44,78 +44,92 @@
<BaseFooter></BaseFooter>
</div>
</template>
<script>
import {pointGoods, pointGoodsCategory} from '@/api/promotion.js'
export default {
data () {
return {
goodsList: [], // 积分商品列表
cateList: [{ // 商品分类
name: '全部分类',
id: 0
}], // 积分分类列表
params: { // 商品列表请求参数
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { pointGoods, pointGoodsCategory } from "@/api/promotion.js";
const route = useRoute();
const router = useRouter();
const goodsList = ref([]); // 积分商品列表
const cateList = ref([{ // 商品分类
name: "全部分类",
id: 0,
}]); // 积分分类列表
// 商品列表请求参数
const params = reactive({
pageNumber: 1,
pageSize: 20,
pointsGoodsCategoryId: ''
},
total: 0, // 商品总数
cateId: '' // 店铺分类id
}
},
mounted () {
this.params.pointsGoodsCategoryId = this.$route.query.categoryId || ''
this.cateId = this.$route.query.categoryId || 0
this.getList()
this.getCate()
},
methods: {
/** 列表 API 返回 PointsGoods（thumbnail/goodsName 在顶层）；详情 API 才有 goodsSku */
itemThumbnail (item) {
return item?.goodsSku?.thumbnail || item?.thumbnail || ''
},
itemGoodsName (item) {
return item?.goodsSku?.goodsName || item?.goodsName || ''
},
getList () { // 获取列表
pointGoods(this.params).then(res => {
pointsGoodsCategoryId: "",
});
const total = ref(0); // 商品总数
const cateId = ref(""); // 店铺分类id
onMounted(() => {
params.pointsGoodsCategoryId = route.query.categoryId || "";
cateId.value = route.query.categoryId || 0;
getList();
getCate();
});
/** 列表 API 返回 PointsGoods（thumbnail/goodsName 在顶层）；详情 API 才有 goodsSku */
function itemThumbnail(item) {
return item?.goodsSku?.thumbnail || item?.thumbnail || "";
}
function itemGoodsName(item) {
return item?.goodsSku?.goodsName || item?.goodsName || "";
}
// 获取列表
function getList() {
pointGoods(params).then((res) => {
if (res.success) {
this.goodsList = res.result.records
this.total = res.result.total
goodsList.value = res.result.records;
total.value = res.result.total;
}
})
},
getCate () { // 获取分类
pointGoodsCategory(this.params).then(res => {
});
}
// 获取分类
function getCate() {
pointGoodsCategory(params).then((res) => {
if (res.success) {
this.cateList.push(...res.result.records)
cateList.value.push(...res.result.records);
}
})
},
selectCate (item) { // 选择商品分类
let cateId = item.value === 0 ? '' : item.value
this.params.pointsGoodsCategoryId = cateId
this.getList()
this.$router.push({query: {categoryId: cateId}})
},
goGoodsDetail (id) { // 跳转商品详情
this.$router.push({path: '/pointGoodsDetail', query: {id}})
// let routerUrl = this.$router.resolve({
});
}
// 选择商品分类
function selectCate(item) {
let cateId = item.value === 0 ? "" : item.value;
params.pointsGoodsCategoryId = cateId;
getList();
router.push({ query: { categoryId: cateId } });
}
// 跳转商品详情
function goGoodsDetail(id) {
router.push({ path: "/pointGoodsDetail", query: { id } });
// let routerUrl = router.resolve({
// path: '/pointGoodsDetail',
// query: {id}
// })
// window.open(routerUrl.href, '_blank')
},
changePageNum (val) { // 修改页码
this.params.pageNumber = val;
this.getList()
},
changePageSize (val) { // 修改页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList()
}
}
}
// 修改页码
function changePageNum(val) {
params.pageNumber = val;
getList();
}
// 修改页数
function changePageSize(val) {
params.pageNumber = 1;
params.pageSize = val;
getList();
}
</script>
<style lang="scss" scoped>

146
buyer/src/pages/promotion/seckill.vue
View File

@@ -61,32 +61,30 @@
<BaseFooter />
</div>
</template>
<script>
<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { seckillByDay } from "@/api/promotion";
export default {
data () {
return {
list: [], // 秒杀时段列表
goodsList: [], // 商品列表
interval: null, // 定时器
currIndex: 0, // 当前时间段的下标
currTime: 0, // 当前显示的倒计时
diffSeconds: 0, // 倒计时时间戳
nowHour: new Date().getHours(), // 当前小时数
};
},
beforeUnmount () {
clearInterval(this.interval);
},
watch: {
currIndex (val) {
clearInterval(this.interval);
this.interval = null;
this.nowHour = new Date().getHours();
this.countDown(val);
this.goodsList = this.list[val].seckillGoodsList;
},
diffSeconds (val) {
const router = useRouter();
const list = ref([]); // 秒杀时段列表
const goodsList = ref([]); // 商品列表
let interval = null; // 定时器
const currIndex = ref(0); // 当前时间段的下标
const currTime = ref(0); // 当前显示的倒计时
const diffSeconds = ref(0); // 倒计时时间戳
const nowHour = ref(new Date().getHours()); // 当前小时数
watch(currIndex, (val) => {
clearInterval(interval);
interval = null;
nowHour.value = new Date().getHours();
countDown(val);
goodsList.value = list.value[val].seckillGoodsList;
});
watch(diffSeconds, (val) => {
const hours = Math.floor(val / 3600);
// 当前秒数 / 60，向下取整
// 获取到所有分钟数 3600 / 60 = 60分钟
@@ -94,11 +92,11 @@ export default {
const minutes = Math.floor(val / 60) % 60;
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
const seconds = val % 60;
this.currTime =
currTime.value =
filteTime(hours) + ":" + filteTime(minutes) + ":" + filteTime(seconds);
if (val <= 0) {
clearInterval(this.interval);
this.interval = null;
clearInterval(interval);
interval = null;
}
function filteTime (time) {
if (time < 10) {
@@ -107,75 +105,83 @@ export default {
return time;
}
}
},
},
methods: {
getListByDay () {
});
function getListByDay () {
// 当天秒杀活动
seckillByDay().then((res) => {
if (res.success) {
this.list = res.result;
this.goodsList = this.list[0].seckillGoodsList;
this.countDown(this.currIndex);
list.value = res.result;
goodsList.value = list.value[0].seckillGoodsList;
countDown(currIndex.value);
}
});
},
goGoodsDetail (skuId, goodsId) {
}
function goGoodsDetail (skuId, goodsId) {
// 跳转商品详情
let routeUrl = this.$router.resolve({
let routeUrl = router.resolve({
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routeUrl.href, "_blank");
},
// 已售占比。没有库存时按售罄展示
salePercent (item) {
}
// 已售占比。没有库存时按售罄展示
function salePercent (item) {
if (!item.quantity || item.quantity <= 0) return 100;
return Math.min(100, Math.ceil((item.salesNum / item.quantity) * 100));
},
// 场次已开始，且销量达到库存
isSoldOut (item) {
return this.nowHour >= this.list[this.currIndex].timeLine && item.quantity <= item.salesNum;
},
// 场次已开始且未售罄才可抢
canBuy (item) {
return this.nowHour >= this.list[this.currIndex].timeLine && !this.isSoldOut(item);
},
// 按钮文案：未开始 / 已售罄 / 立即抢购
buyText (item) {
if (this.nowHour < this.list[this.currIndex].timeLine) return "即将开始";
if (this.isSoldOut(item)) return "已售罄";
}
// 场次已开始，且销量达到库存
function isSoldOut (item) {
return nowHour.value >= list.value[currIndex.value].timeLine && item.quantity <= item.salesNum;
}
// 场次已开始且未售罄才可抢
function canBuy (item) {
return nowHour.value >= list.value[currIndex.value].timeLine && !isSoldOut(item);
}
// 按钮文案：未开始 / 已售罄 / 立即抢购
function buyText (item) {
if (nowHour.value < list.value[currIndex.value].timeLine) return "即将开始";
if (isSoldOut(item)) return "已售罄";
return "立即抢购";
},
countDown (currIndex) {
}
function countDown (currIndex) {
// 倒计时
// 0点时间戳
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
let currTime = new Date().getTime();
let actTime = 0;
let nowHour = new Date().getHours(); // 当前小时数
if (this.list[currIndex].timeLine > nowHour) {
if (list.value[currIndex].timeLine > nowHour) {
// 活动未开始
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
} else if (this.list[currIndex].timeLine <= nowHour) {
actTime = zeroTime + list.value[currIndex].timeLine * 3600 * 1000;
} else if (list.value[currIndex].timeLine <= nowHour) {
// 活动进行中
if (currIndex === this.list.length - 1) {
if (currIndex === list.value.length - 1) {
// 如果是最后一个活动，直到24点结束
actTime = zeroTime + 24 * 3600 * 1000;
} else {
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
actTime = zeroTime + list.value[currIndex + 1].timeLine * 3600 * 1000;
}
}
this.diffSeconds = Math.floor((actTime - currTime) / 1000);
this.interval = setInterval(() => {
this.diffSeconds--;
diffSeconds.value = Math.floor((actTime - currTime) / 1000);
interval = setInterval(() => {
diffSeconds.value--;
}, 1000);
},
},
mounted () {
this.getListByDay();
},
};
}
onMounted(() => {
getListByDay();
});
onBeforeUnmount(() => {
clearInterval(interval);
});
</script>
<style lang="scss" scoped>
@import "../../assets/styles/goodsList.scss";

261
buyer/src/pages/shopEntry/FirstApply.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="company-msg">
<el-form
ref="firstForm"
ref="firstFormRef"
:model="form"
:rules="rules"
label-width="140px"
@@ -190,7 +190,8 @@
<multipleMap ref="map" @callback="getAddress" />
</div>
</template>
<script>
<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
import { Message, Notice } from "@/utils/message";
import { Delete, View } from '@element-plus/icons-vue';
import { applyFirst } from '@/api/shopentry';
@@ -200,24 +201,24 @@ import storage from '@/plugins/storage';
import { buyerUrl } from '@/plugins/request.js';
const FIRST_APPLY_DRAFT_KEY = 'shopEntryFirstDraft';
export default {
components: { multipleMap, View, Delete },
emits: ['change'],
props: {
const emit = defineEmits(['change']);
const props = defineProps({
content: {
default: () => ({}),
type: Object
}
},
data () {
return {
action: buyerUrl + '/buyer/common/upload/file', // 上传地址
accessToken: {}, // 验证token
visible: false, // 预览图片
loading: false, // 加载状态
});
previewPicture: '', // 预览图片url
form: { // 表单数据
const firstFormRef = ref(null);
const map = ref(null);
const action = buyerUrl + '/buyer/common/upload/file'; // 上传地址
const accessToken = reactive({}); // 验证token
const visible = ref(false); // 预览图片
const loading = ref(false); // 加载状态
const previewPicture = ref(''); // 预览图片url
const form = ref({ // 表单数据
companyName: '',
companyAddressIdPath: '',
companyAddressPath: '',
@@ -234,8 +235,8 @@ export default {
legalId: '',
legalPhoto: [],
licencePhoto: []
},
rules: { // 验证规则
});
const rules = { // 验证规则
companyName: [{ required: true, message: '请填写公司信息' }],
companyAddressIdPath: [{ required: true, message: '请选择公司所在地' }],
companyAddress: [{ required: true, message: '请填写公司详细地址' }],
@@ -272,189 +273,187 @@ export default {
{ required: true, message: '请输入法人证件号' },
{ pattern: RegExp.IDCard, message: '请输入正确的证件号' }
]
},
uploadLoading1: false, // 上传loading
uploadLoading: false, // 上传loading
contentInitialized: false
};
},
methods: {
// 获取店铺地址
getAddress(val){
};
const uploadLoading1 = ref(false); // 上传loading
const uploadLoading = ref(false); // 上传loading
const contentInitialized = ref(false);
// 获取店铺地址
function getAddress(val){
if(val.type === 'select'){
const paths = val.data.map(item => item.name).join(',')
const ids = val.data.map(item => item.id).join(',')
this.form['companyAddressIdPath'] = ids
this.form['companyAddressPath'] = paths
form.value['companyAddressIdPath'] = ids
form.value['companyAddressPath'] = paths
}else{
this.form['companyAddressIdPath'] = val.data.addrId
this.form['companyAddressPath'] = val.data.addr
form.value['companyAddressIdPath'] = val.data.addrId
form.value['companyAddressPath'] = val.data.addr
}
},
}
// 下一步
next () {
this.$refs.firstForm.validate((valid) => {
// 下一步
function next () {
firstFormRef.value.validate((valid) => {
if (valid) {
this.loading = true;
let params = JSON.parse(JSON.stringify(this.form));
params.legalPhoto = this.form.legalPhoto.toString();
params.licencePhoto = this.normalizeLicencePhoto(this.form.licencePhoto);
loading.value = true;
let params = JSON.parse(JSON.stringify(form.value));
params.legalPhoto = form.value.legalPhoto.toString();
params.licencePhoto = normalizeLicencePhoto(form.value.licencePhoto);
applyFirst(params)
.then((res) => {
this.loading = false;
loading.value = false;
if (res.success) {
sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
this.$emit('change', 1);
emit('change', 1);
}
})
.catch(() => {
this.loading = false;
loading.value = false;
});
}
});
},
}
// 上传之前
beforeUpload (file) {
this.uploadLoading = true;
if (this.form.licencePhoto.length >= 1) {
// 上传之前
function beforeUpload (file) {
uploadLoading.value = true;
if (form.value.licencePhoto.length >= 1) {
Message.warning('最多上传一张图片')
this.uploadLoading = false;
uploadLoading.value = false;
return false;
}
return this.validateUploadFile(file);
},
// 上传之前
beforeUpload1 (file) {
this.uploadLoading1 = true;
if (this.form.legalPhoto.length >= 2) {
return validateUploadFile(file);
}
// 上传之前
function beforeUpload1 (file) {
uploadLoading1.value = true;
if (form.value.legalPhoto.length >= 2) {
Message.warning('最多上传两张图片')
this.uploadLoading1 = false;
uploadLoading1.value = false;
return false;
}
return this.validateUploadFile(file);
},
validateUploadFile (file) {
return validateUploadFile(file);
}
function validateUploadFile (file) {
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
const isAllowedType = allowedTypes.includes(file.type);
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isAllowedType) {
this.uploadLoading = false;
this.uploadLoading1 = false;
uploadLoading.value = false;
uploadLoading1.value = false;
Message.warning('上传文件格式不正确');
return false;
}
if (!isLt2M) {
this.uploadLoading = false;
this.uploadLoading1 = false;
uploadLoading.value = false;
uploadLoading1.value = false;
Message.warning('文件大小不能超过2M');
return false;
}
return true;
},
// 上传成功回调
handleSuccess (res, file) {
this.uploadLoading = false;
this.form.licencePhoto = [res.result];
},
// 上传成功回调
handleSuccess1 (res, file) {
this.uploadLoading1 = false;
this.form.legalPhoto.push(res.result);
},
// 上传失败
uploadErr () {
this.uploadLoading = false;
this.uploadLoading1 = false;
},
// 上传失败回调
handleFormatError (file) {
this.uploadLoading = false;
this.uploadLoading1 = false;
}
// 上传成功回调
function handleSuccess (res, file) {
uploadLoading.value = false;
form.value.licencePhoto = [res.result];
}
// 上传成功回调
function handleSuccess1 (res, file) {
uploadLoading1.value = false;
form.value.legalPhoto.push(res.result);
}
// 上传失败
function uploadErr () {
uploadLoading.value = false;
uploadLoading1.value = false;
}
// 上传失败回调
function handleFormatError (file) {
uploadLoading.value = false;
uploadLoading1.value = false;
Notice.warning({
title: 'The file format is incorrect',
desc: '上传文件格式不正确'
});
},
// 上传大小限制
handleMaxSize (file) {
this.uploadLoading = false;
this.uploadLoading1 = false;
}
// 上传大小限制
function handleMaxSize (file) {
uploadLoading.value = false;
uploadLoading1.value = false;
Notice.warning({
title: 'Exceeding file size limit',
desc: '文件大小不能超过2M'
});
},
// 图片查看
handleView (item) {
this.previewPicture = item;
this.visible = true;
},
// 删除图片
handleRemove (index, listName) {
this.form[listName].splice(index, 1);
},
normalizeLicencePhoto (value) {
}
// 图片查看
function handleView (item) {
previewPicture.value = item;
visible.value = true;
}
// 删除图片
function handleRemove (index, listName) {
form.value[listName].splice(index, 1);
}
function normalizeLicencePhoto (value) {
if (Array.isArray(value)) {
return value.length ? value[0] : '';
}
return value ? String(value).split(',').filter(Boolean)[0] || '' : '';
},
initFormFromContent(content) {
}
function initFormFromContent(content) {
if (!content || !Object.keys(content).length) return;
this.form = JSON.parse(JSON.stringify(content));
this.form.legalPhoto = content.legalPhoto
form.value = JSON.parse(JSON.stringify(content));
form.value.legalPhoto = content.legalPhoto
? String(content.legalPhoto).split(',').filter(Boolean)
: [];
this.form.licencePhoto = content.licencePhoto
form.value.licencePhoto = content.licencePhoto
? String(content.licencePhoto).split(',').filter(Boolean).slice(0, 1)
: [];
this.contentInitialized = true;
},
restoreDraft() {
contentInitialized.value = true;
}
function restoreDraft() {
const draft = sessionStorage.getItem(FIRST_APPLY_DRAFT_KEY);
if (!draft) return;
try {
const parsed = JSON.parse(draft);
this.form = {
form.value = {
legalPhoto: [],
licencePhoto: [],
...parsed,
};
this.form.legalPhoto = Array.isArray(parsed.legalPhoto) ? parsed.legalPhoto : [];
this.form.licencePhoto = Array.isArray(parsed.licencePhoto)
form.value.legalPhoto = Array.isArray(parsed.legalPhoto) ? parsed.legalPhoto : [];
form.value.licencePhoto = Array.isArray(parsed.licencePhoto)
? parsed.licencePhoto.slice(0, 1)
: [];
} catch (e) {
sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
}
}
function saveDraft() {
sessionStorage.setItem(FIRST_APPLY_DRAFT_KEY, JSON.stringify(form.value));
}
watch(
() => props.content,
(val) => {
if (contentInitialized.value || !val || !Object.keys(val).length) return;
initFormFromContent(val);
},
saveDraft() {
sessionStorage.setItem(FIRST_APPLY_DRAFT_KEY, JSON.stringify(this.form));
}
},
watch: {
content: {
immediate: true,
handler(val) {
if (this.contentInitialized || !val || !Object.keys(val).length) return;
this.initFormFromContent(val);
}
}
},
mounted () {
this.accessToken.accessToken = storage.getItem('accessToken');
if (Object.keys(this.content).length) {
this.initFormFromContent(this.content);
{ immediate: true }
);
onMounted(() => {
accessToken.accessToken = storage.getItem('accessToken');
if (Object.keys(props.content).length) {
initFormFromContent(props.content);
} else {
this.restoreDraft();
restoreDraft();
}
},
beforeUnmount() {
this.saveDraft();
}
};
});
onBeforeUnmount(() => {
saveDraft();
});
</script>
<style lang="scss" scoped>
h4 {

56
buyer/src/pages/shopEntry/SecondApply.vue
View File

@@ -40,21 +40,22 @@
</el-form>
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { applySecond } from '@/api/shopentry';
export default {
emits: ['change'],
props: {
const emit = defineEmits(['change']);
const props = defineProps({
content: {
default: () => ({}),
type: Object
}
},
data () {
return {
loading: false, // 加载状态
form: {}, // 表单数据
rules: { // 验证规则
});
const secondForm = ref(null);
const loading = ref(false); // 加载状态
const form = reactive({}); // 表单数据
const rules = { // 验证规则
settlementBankAccountName: [
{ required: true, message: '请填写银行开户名称' }
],
@@ -67,33 +68,30 @@ export default {
settlementBankJointName: [
{ required: true, message: '请填写支行联行号' }
]
}
};
},
methods: {
// 下一步
next () {
this.$refs.secondForm.validate((valid) => {
};
// 下一步
function next() {
secondForm.value.validate((valid) => {
if (valid) {
this.loading = true;
applySecond(this.form)
loading.value = true;
applySecond(form)
.then((res) => {
this.loading = false;
if (res.success) this.$emit('change', 2);
loading.value = false;
if (res.success) emit('change', 2);
})
.catch(() => {
this.loading = false;
loading.value = false;
});
}
});
}
onMounted(() => {
if (props.content && Object.keys(props.content).length) {
Object.assign(form, JSON.parse(JSON.stringify(props.content)));
}
},
mounted () {
if (this.content && Object.keys(this.content).length) {
this.form = JSON.parse(JSON.stringify(this.content));
}
}
};
});
</script>
<style lang="scss" scoped>
h4 {

121
buyer/src/pages/shopEntry/ShopEntry.vue
View File

@@ -56,39 +56,31 @@
</el-dialog>
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { agreement, applyStatus } from "@/api/shopentry";
import firstApply from "./FirstApply";
import secondApply from "./SecondApply";
import thirdApply from "./ThirdApply";
export default {
components: {
firstApply,
secondApply,
thirdApply,
},
data() {
return {
currentIndex: 0, // 当前步骤
showAgreement: false, // 协议显示
agreementCon: "", // 协议内容
checked: false, // 选中协议
firstData: {}, // 第一步数据
secondData: {}, // 第二步数据
thirdData: {}, // 第三步数据
storeDisable: "", // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒绝 APPLYING 申请中，审核
initLoading: true,
agreementAccepted: false, // 是否已同意入驻协议
};
},
methods: {
confirmAgreement() {
this.agreementAccepted = true;
this.showAgreement = false;
const currentIndex = ref(0); // 当前步骤
const showAgreement = ref(false); // 协议显示
const agreementCon = ref(""); // 协议内容
const checked = ref(false); // 选中协议
const firstData = reactive({}); // 第一步数据
const secondData = reactive({}); // 第二步数据
const thirdData = reactive({}); // 第三步数据
const storeDisable = ref(""); // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒绝 APPLYING 申请中，审核
const initLoading = ref(true);
const agreementAccepted = ref(false); // 是否已同意入驻协议
function confirmAgreement() {
agreementAccepted.value = true;
showAgreement.value = false;
sessionStorage.setItem("shopEntryAgreementAccepted", "1");
},
assignApplyData(data) {
}
function assignApplyData(data) {
const first = [
"companyAddressPath",
"companyAddress",
@@ -124,71 +116,74 @@ export default {
"storeAddressDetail",
];
this.storeDisable = data.storeDisable || "";
Object.assign(this.firstData, Object.fromEntries(first.map((key) => [key, data[key]])));
Object.assign(this.secondData, Object.fromEntries(second.map((key) => [key, data[key]])));
Object.assign(this.thirdData, Object.fromEntries(third.map((key) => [key, data[key]])));
},
getArticle() {
storeDisable.value = data.storeDisable || "";
Object.assign(firstData, Object.fromEntries(first.map((key) => [key, data[key]])));
Object.assign(secondData, Object.fromEntries(second.map((key) => [key, data[key]])));
Object.assign(thirdData, Object.fromEntries(third.map((key) => [key, data[key]])));
}
function getArticle() {
// 入驻协议：库中无 STORE_REGISTER 文章时 result 为 null，不能直接读 content
agreement().then((res) => {
this.agreementCon = res.result?.content || "";
agreementCon.value = res.result?.content || "";
});
},
getData(status) {
}
function getData(status) {
applyStatus().then((res) => {
if (!res.success) {
return;
}
if (!res.result) {
if (status === "init" && !this.agreementAccepted) {
this.showAgreement = true;
if (status === "init" && !agreementAccepted.value) {
showAgreement.value = true;
}
return;
}
this.assignApplyData(res.result);
assignApplyData(res.result);
if (status === "init") {
this.agreementAccepted = true;
agreementAccepted.value = true;
sessionStorage.setItem("shopEntryAgreementAccepted", "1");
if (this.storeDisable === "APPLY") {
this.currentIndex = 0;
if (storeDisable.value === "APPLY") {
currentIndex.value = 0;
} else {
this.currentIndex = 3;
currentIndex.value = 3;
}
}
}).finally(() => {
if (status === "init") {
this.initLoading = false;
initLoading.value = false;
}
});
},
refreshApplyData() {
}
function refreshApplyData() {
return applyStatus().then((res) => {
if (res.success && res.result) {
this.assignApplyData(res.result);
assignApplyData(res.result);
}
}).catch((err) => {
console.warn('获取入驻申请状态失败', err);
});
},
// 下一步：先拉最新申请数据，再切步骤，避免第三步挂载后再改 content 触发校验
async nextPage(step) {
}
// 下一步：先拉最新申请数据，再切步骤，避免第三步挂载后再改 content 触发校验
async function nextPage(step) {
if (typeof step !== "number") return;
if (step > 0 && step <= 3) {
await this.refreshApplyData();
await refreshApplyData();
}
this.currentIndex = step;
},
},
created() {
this.agreementAccepted = sessionStorage.getItem("shopEntryAgreementAccepted") === "1";
},
mounted() {
this.getData("init");
this.getArticle();
},
};
currentIndex.value = step;
}
// 初始化（原 created 钩子逻辑）
agreementAccepted.value = sessionStorage.getItem("shopEntryAgreementAccepted") === "1";
onMounted(() => {
getData("init");
getArticle();
});
</script>
<style lang="scss" scoped>
.content {

203
buyer/src/pages/shopEntry/ThirdApply.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="person-msg">
<el-form ref="thirdForm" :model="form" :rules="rules" label-width="140px">
<el-form ref="thirdFormRef" :model="form" :rules="rules" label-width="140px">
<h4>基础信息</h4>
<el-form-item prop="storeName" label="店铺名称">
<el-input
@@ -92,7 +92,8 @@
<multipleMap ref="map" @callback="getAddress" />
</div>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { Message } from "@/utils/message";
import { Delete, View } from '@element-plus/icons-vue';
import { applyThird } from '@/api/shopentry';
@@ -105,25 +106,25 @@ import { buyerUrl } from '@/plugins/request.js';
import multipleMap from "@/components/map/multiple-map";
export default {
emits: ['change'],
props: {
const emit = defineEmits(['change']);
const props = defineProps({
content: {
default: () => ({}),
type: Object
}
},
components: { multipleMap, View, Delete },
data () {
return {
loading: false, // 加载状态
uploadLoading: false, // 上传加载状态
action: buyerUrl + '/buyer/common/upload/file', // 上传地址
accessToken: {}, // 验证token
previewPicture: '', // 预览图片
});
visible: false, // 图片预览
form: { // 表单数据
const thirdFormRef = ref(null);
const loading = ref(false); // 加载状态
const uploadLoading = ref(false); // 上传加载状态
const action = buyerUrl + '/buyer/common/upload/file'; // 上传地址
const accessToken = reactive({}); // 验证token
const previewPicture = ref(''); // 预览图片
const visible = ref(false); // 图片预览
const form = ref({ // 表单数据
storeLogo: [],
goodsManagementCategory: [],
storeName: "",
@@ -132,8 +133,8 @@ export default {
storeAddressIdPath: "",
storeAddressPath: "",
storeCenter: "",
},
rules: { // 验证规则
});
const rules = { // 验证规则
goodsManagementCategory: [
{ required: true, message: '请选择店铺经营类目' }
],
@@ -143,112 +144,110 @@ export default {
storeCenter: [{ required: true, message: '请选择店铺位置' }],
storeAddressIdPath: [{ required: true, message: '请选择店铺位置' }],
storeAddressDetail: [{ required: true, message: '请输入店铺详细地址' }]
},
categoryList: [] // 分类数据
};
},
methods: {
// 下一步
next () {
this.$refs.thirdForm.validate((valid) => {
};
const categoryList = ref([]); // 分类数据
// 下一步
function next () {
thirdFormRef.value.validate((valid) => {
if (valid) {
this.loading = true;
let params = JSON.parse(JSON.stringify(this.form));
params.storeLogo = this.form.storeLogo.toString();
params.goodsManagementCategory = this.form.goodsManagementCategory.toString();
loading.value = true;
let params = JSON.parse(JSON.stringify(form.value));
params.storeLogo = form.value.storeLogo.toString();
params.goodsManagementCategory = form.value.goodsManagementCategory.toString();
applyThird(params)
.then((res) => {
this.loading = false;
if (res.success) this.$emit('change', 3);
loading.value = false;
if (res.success) emit('change', 3);
})
.catch(() => {
this.loading = false;
loading.value = false;
});
}
});
},
// 上传之前
beforeUpload (file) {
this.uploadLoading = true;
if (this.form.storeLogo.length >= 1) {
}
// 上传之前
function beforeUpload (file) {
uploadLoading.value = true;
if (form.value.storeLogo.length >= 1) {
Message.warning('最多上传一张图片')
this.uploadLoading = false;
uploadLoading.value = false;
return false;
}
return this.validateUploadFile(file);
},
validateUploadFile (file) {
return validateUploadFile(file);
}
function validateUploadFile (file) {
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
const isAllowedType = allowedTypes.includes(file.type);
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isAllowedType) {
this.uploadLoading = false;
uploadLoading.value = false;
Message.warning('上传文件格式不正确');
return false;
}
if (!isLt2M) {
this.uploadLoading = false;
uploadLoading.value = false;
Message.warning('文件大小不能超过2M');
return false;
}
return true;
},
// 上传成功回调
handleSuccess (res, file) {
this.uploadLoading = false;
this.form.storeLogo = [res.result];
},
// 上传失败
uploadErr () {
this.uploadLoading = false;
},
// 查看图片
handleView (item) {
this.previewPicture = item;
this.visible = true;
},
// 删除图片
handleRemove (index, listName) {
this.form[listName].splice(index, 1);
},
// 选择坐标回调
getAddress (val) {
}
// 上传成功回调
function handleSuccess (res, file) {
uploadLoading.value = false;
form.value.storeLogo = [res.result];
}
// 上传失败
function uploadErr () {
uploadLoading.value = false;
}
// 查看图片
function handleView (item) {
previewPicture.value = item;
visible.value = true;
}
// 删除图片
function handleRemove (index, listName) {
form.value[listName].splice(index, 1);
}
// 选择坐标回调
function getAddress (val) {
if(val.type === 'select'){
const paths = val.data.map(item => item.name).join(',')
const ids = val.data.map(item => item.id).join(',')
this.form["storeAddressPath"] = paths;
this.form["storeAddressIdPath"] = ids;
this.form.storeCenter = val.data[val.data.length - 1].center
form.value["storeAddressPath"] = paths;
form.value["storeAddressIdPath"] = ids;
form.value.storeCenter = val.data[val.data.length - 1].center
}else{
this.form["storeAddressPath"] = val.data.addr;
this.form["storeAddressIdPath"] = val.data.addrId;
form.value["storeAddressPath"] = val.data.addr;
form.value["storeAddressIdPath"] = val.data.addrId;
this.form['storeCenter'] = val.data.position.lng + ',' + val.data.position.lat
form.value['storeCenter'] = val.data.position.lng + ',' + val.data.position.lat
;
}
},
// 获取商品分类
getCategoryList () {
}
// 获取商品分类
function getCategoryList () {
getCategory(0).then((res) => {
if (res.success) {
this.categoryList = res.result || [];
this.syncCategorySelection();
categoryList.value = res.result || [];
syncCategorySelection();
}
});
},
normalizeCategoryId (id) {
}
function normalizeCategoryId (id) {
return id == null ? '' : String(id);
},
syncCategorySelection () {
if (!Array.isArray(this.form.goodsManagementCategory)) {
this.form.goodsManagementCategory = [];
}
function syncCategorySelection () {
if (!Array.isArray(form.value.goodsManagementCategory)) {
form.value.goodsManagementCategory = [];
return;
}
this.form.goodsManagementCategory = this.form.goodsManagementCategory.map(
(id) => this.normalizeCategoryId(id)
form.value.goodsManagementCategory = form.value.goodsManagementCategory.map(
(id) => normalizeCategoryId(id)
);
},
createEmptyForm () {
}
function createEmptyForm () {
return {
storeLogo: [],
goodsManagementCategory: [],
@@ -259,34 +258,32 @@ export default {
storeAddressPath: "",
storeCenter: "",
};
},
initFormFromContent (content) {
}
function initFormFromContent (content) {
const src = content && Object.keys(content).length
? JSON.parse(JSON.stringify(content))
: {};
this.form = {
...this.createEmptyForm(),
form.value = {
...createEmptyForm(),
...src,
};
this.form.storeLogo = src.storeLogo
form.value.storeLogo = src.storeLogo
? String(src.storeLogo).split(",").filter(Boolean)
: [];
this.form.goodsManagementCategory = src.goodsManagementCategory
form.value.goodsManagementCategory = src.goodsManagementCategory
? String(src.goodsManagementCategory).split(",").filter(Boolean)
: [];
["storeName", "storeAddressDetail", "storeDesc", "storeAddressIdPath", "storeAddressPath", "storeCenter"].forEach((key) => {
if (this.form[key] == null) this.form[key] = "";
if (form.value[key] == null) form.value[key] = "";
});
},
},
created () {
this.initFormFromContent(this.content);
},
mounted () {
this.accessToken.accessToken = storage.getItem('accessToken');
this.getCategoryList();
}
};
}
initFormFromContent(props.content);
onMounted(() => {
accessToken.accessToken = storage.getItem('accessToken');
getCategoryList();
});
</script>
<style lang="scss" scoped>
h4 {

Some files were not shown because too many files have changed in this diff Show More