jiuyiUniapp/jiuyi2/components/index/proDetailAlt.vue

178 lines
3.0 KiB
Vue
Raw Normal View History

2025-02-15 08:59:41 +08:00
<script setup>
import {
onMounted,
ref,
reactive,
getCurrentInstance,
defineExpose,
computed,
onBeforeUnmount,
defineProps,
2025-02-15 16:10:05 +08:00
defineEmits,
2025-02-15 08:59:41 +08:00
} from 'vue';
// 工具库
import util from '@/common/js/util.js'
// api
import api from '@/api/index.js'
// 产品详情
import proDetail from '@/components/shop/detail/detail'
//底部
import footerMenu from '@/components/shop/detail/footerMenu';
const {
proxy
} = getCurrentInstance()
const props = defineProps({
//
})
2025-02-15 16:10:05 +08:00
//
const emit = defineEmits(['buy'])
2025-02-15 08:59:41 +08:00
// 商品id
const proId = ref('42')
// 详情
const detail = reactive({})
// 用户信息
const userinfo = computed(() => uni.$store.state.userinfo || {})
/**
* 初始化
* @param {Object} productId 产品id
*/
function init(productId) {
2025-02-15 16:10:05 +08:00
if (productId) proId.value = productId
2025-02-15 08:59:41 +08:00
// 打开
open()
// 获取详情
getDetail()
// 添加商品浏览记录
addBrowsing()
}
// 获取详情
function getDetail() {
api.shop.productDetail({
query: {
2025-02-28 19:19:35 +08:00
userId: userinfo.value.id || '',
2025-02-15 08:59:41 +08:00
// 产品id
productionId: proId.value
}
}).then(rs => {
if (rs.code == 200) {
Object.assign(detail, {}, rs.data)
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
// 添加商品浏览记录
function addBrowsing() {
// 验证登录
util.isLogin(() => {
// 添加浏览记录
api.shop.addBrowsing({
data: {
userId: userinfo.value.id,
goodsId: proId.value
},
}).then(rs => {
if (rs.code != 200) console.log('addbrows err', rs.msg)
})
})
}
2025-02-15 16:10:05 +08:00
// 购买
function handleBuy() {
emit('buy', detail)
}
2025-02-15 08:59:41 +08:00
/**
* 详情
* @param {Object} ev 修改的详情
*/
function handleDetail(ev) {
Object.assign(detail, {}, ev)
}
// 打开弹窗
function open() {
proxy.$refs.detailAlt.open()
}
// 关闭弹窗
function close() {
proxy.$refs.detailAlt.close()
}
defineExpose({
init,
open,
close,
})
</script>
<template>
<uni-popup ref="detailAlt" type="bottom">
<view class="container popBot">
2025-02-15 16:10:05 +08:00
<view class="header">
<image @click="close" class="back wh55" src="/static/back.png" />
</view>
2025-02-15 08:59:41 +08:00
<scroll-view class="scroll" :scroll-y="true">
<view class="main">
<!-- 获取详情 -->
<proDetail :id="proId" :detail="detail" />
2025-03-12 22:11:26 +08:00
<!-- 填充 -->
<view class="fill" style="height: 180rpx;"></view>
2025-02-15 08:59:41 +08:00
</view>
</scroll-view>
2025-02-15 16:10:05 +08:00
<!-- 底部 -->
<view class="footerMenu pt30">
<view class="content ptb30 plr20 bfff">
<footerMenu :detail="detail" @update="handleDetail" @buy="handleBuy" />
</view>
</view>
2025-02-15 08:59:41 +08:00
</view>
</uni-popup>
</template>
<style lang="scss">
// 详情
.container {
2025-02-15 16:10:05 +08:00
position: relative;
height: 1300rpx;
2025-02-15 08:59:41 +08:00
background-color: #f8f8f8;
2025-02-15 16:10:05 +08:00
// 头
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
2025-02-15 08:59:41 +08:00
.scroll {
2025-02-15 16:10:05 +08:00
flex: 1;
}
// 阴影盒子底部
.footerMenu {
position: absolute;
left: 0;
right: 0;
bottom: 0;
//
.content {
box-shadow: 0 0rpx 10rpx rgba(102, 102, 102, 0.3);
}
2025-02-15 08:59:41 +08:00
}
}
</style>