176 lines
3.0 KiB
Vue
176 lines
3.0 KiB
Vue
<script setup>
|
|
import {
|
|
onMounted,
|
|
ref,
|
|
reactive,
|
|
getCurrentInstance,
|
|
defineExpose,
|
|
computed,
|
|
onBeforeUnmount,
|
|
defineProps,
|
|
defineEmits,
|
|
} 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({
|
|
//
|
|
})
|
|
//
|
|
const emit = defineEmits(['buy'])
|
|
// 商品id
|
|
const proId = ref('42')
|
|
// 详情
|
|
const detail = reactive({})
|
|
// 用户信息
|
|
const userinfo = computed(() => uni.$store.state.userinfo || {})
|
|
|
|
/**
|
|
* 初始化
|
|
* @param {Object} productId 产品id
|
|
*/
|
|
function init(productId) {
|
|
if (productId) proId.value = productId
|
|
|
|
// 打开
|
|
open()
|
|
// 获取详情
|
|
getDetail()
|
|
// 添加商品浏览记录
|
|
addBrowsing()
|
|
}
|
|
|
|
// 获取详情
|
|
function getDetail() {
|
|
api.shop.productDetail({
|
|
query: {
|
|
userId: userinfo.value.id,
|
|
// 产品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)
|
|
})
|
|
})
|
|
}
|
|
|
|
// 购买
|
|
function handleBuy() {
|
|
emit('buy', detail)
|
|
}
|
|
|
|
/**
|
|
* 详情
|
|
* @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">
|
|
<view class="header">
|
|
<image @click="close" class="back wh55" src="/static/back.png" />
|
|
</view>
|
|
|
|
<scroll-view class="scroll" :scroll-y="true">
|
|
<view class="main">
|
|
<!-- 获取详情 -->
|
|
<proDetail :id="proId" :detail="detail" />
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 底部 -->
|
|
<view class="footerMenu pt30">
|
|
<view class="content ptb30 plr20 bfff">
|
|
<footerMenu :detail="detail" @update="handleDetail" @buy="handleBuy" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// 详情
|
|
.container {
|
|
position: relative;
|
|
height: 1300rpx;
|
|
background-color: #f8f8f8;
|
|
|
|
// 头
|
|
.header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.scroll {
|
|
flex: 1;
|
|
}
|
|
|
|
// 阴影盒子底部
|
|
.footerMenu {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
//
|
|
.content {
|
|
box-shadow: 0 0rpx 10rpx rgba(102, 102, 102, 0.3);
|
|
}
|
|
}
|
|
}
|
|
</style> |