jiuyiUniapp/jiuyi2/pages/shop/commodity/index.vue

148 lines
2.7 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<script setup>
2025-02-12 09:05:14 +08:00
// 商品详情
2024-12-18 15:46:27 +08:00
import {
ref,
reactive,
nextTick,
getCurrentInstance,
2024-12-27 15:03:48 +08:00
computed,
2024-12-18 15:46:27 +08:00
} from 'vue'
import {
onLoad,
onReady,
onPageScroll,
2025-01-15 23:47:08 +08:00
onUnload,
2024-12-18 15:46:27 +08:00
} from '@dcloudio/uni-app'
2024-12-27 15:03:48 +08:00
import {
useStore
} from 'vuex'
// 接口地址
import api from '@/api/index.js'
//
import util from '@/common/js/util.js'
2024-12-18 15:46:27 +08:00
// 头部
import apex from './components/jy-commodity-head';
// 商品列表
import productList from '@/components/shop/productList/productList'
2025-02-15 08:59:41 +08:00
// 产品详情
import proDetail from '@/components/shop/detail/detail'
2024-12-18 15:46:27 +08:00
//底部
2025-02-15 08:59:41 +08:00
import footerMenu from '@/components/shop/detail/footerMenu';
2024-12-18 15:46:27 +08:00
const {
proxy
} = getCurrentInstance()
2025-01-11 03:51:29 +08:00
const store = useStore()
2024-12-27 15:03:48 +08:00
// 产品id
const id = ref('')
2025-02-15 08:59:41 +08:00
// 产品详情
const detail = reactive({})
2025-01-11 03:51:29 +08:00
// 当前登录的用户信息
const userinfo = computed(() => {
return store.state.userinfo
})
2024-12-18 15:46:27 +08:00
2024-12-27 15:03:48 +08:00
onLoad(option => {
if (option.productId) id.value = option.productId
// 获取产品详情
getDetail()
2025-01-11 03:51:29 +08:00
// 添加商品浏览记录
addBrowsing()
2025-02-12 09:05:14 +08:00
// 开启监听
addListener()
2024-12-18 15:46:27 +08:00
})
onReady(() => {
//
})
2025-01-15 23:47:08 +08:00
// 销毁监听
onUnload(() => {
removeListener()
})
2024-12-18 15:46:27 +08:00
onPageScroll((ev) => {
if (ev.scrollTop > 44) proxy.$refs.apexRef.headerActive = true
else proxy.$refs.apexRef.headerActive = false
})
2025-01-15 23:47:08 +08:00
// 开启监听
function addListener() {
// 监听商品详情
uni.$on('commodityDetail', (data) => {
//
if (detail.id == data.id) getDetail()
})
}
// 移除监听
function removeListener() {
uni.$off('commodityDetail')
}
2024-12-27 15:03:48 +08:00
// 获取详情
function getDetail() {
api.shop.productDetail({
query: {
2025-01-15 23:47:08 +08:00
userId: userinfo.value.id,
2025-01-10 10:51:21 +08:00
// 产品id
2024-12-27 15:03:48 +08:00
productionId: id.value
}
}).then(rs => {
if (rs.code == 200) {
Object.assign(detail, {}, rs.data)
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
2025-02-15 08:59:41 +08:00
// 添加商品浏览记录
function addBrowsing() {
// 验证登录
util.isLogin(() => {
// 添加浏览记录
api.shop.addBrowsing({
2025-01-15 23:47:08 +08:00
data: {
2025-02-15 08:59:41 +08:00
userId: userinfo.value.id,
goodsId: id.value
},
2025-01-15 23:47:08 +08:00
}).then(rs => {
2025-02-15 08:59:41 +08:00
if (rs.code != 200) console.log('addbrows err', rs.msg)
2025-01-15 23:47:08 +08:00
})
})
}
/**
* 详情
* @param {Object} ev 修改的详情
*/
function handleDetail(ev) {
Object.assign(detail, {}, ev)
2025-01-11 03:51:29 +08:00
}
2024-12-18 15:46:27 +08:00
</script>
<template>
<view class="app pr">
<!-- 头部 -->
2025-02-15 08:59:41 +08:00
<apex ref="apexRef" :detail="detail" />
2024-12-18 15:46:27 +08:00
2025-02-15 08:59:41 +08:00
<!-- 获取详情 -->
<proDetail :id="id" :detail="detail" />
2024-12-18 15:46:27 +08:00
<!-- 精选 -->
<view class="recommend mlr20">
<productList :choicenessTitle="true" />
</view>
<!-- 底部 -->
2025-02-15 08:59:41 +08:00
<footerMenu :detail="detail" @update="handleDetail" />
2024-12-18 15:46:27 +08:00
</view>
</template>
<style lang="scss" scoped>
2025-02-15 08:59:41 +08:00
//
2024-12-18 15:46:27 +08:00
</style>