210 lines
3.9 KiB
Vue
210 lines
3.9 KiB
Vue
<script setup>
|
||
// 商品详情
|
||
import {
|
||
ref,
|
||
reactive,
|
||
nextTick,
|
||
getCurrentInstance,
|
||
computed,
|
||
} from 'vue'
|
||
import {
|
||
onLoad,
|
||
onReady,
|
||
onPageScroll,
|
||
onUnload,
|
||
} from '@dcloudio/uni-app'
|
||
import {
|
||
useStore
|
||
} from 'vuex'
|
||
// 接口地址
|
||
import api from '@/api/index.js'
|
||
//
|
||
import util from '@/common/js/util.js'
|
||
// 头部
|
||
import apex from './components/jy-commodity-head';
|
||
// 商品列表
|
||
import productList from '@/components/shop/productList/productList'
|
||
// 产品详情
|
||
import proDetail from '@/components/shop/detail/detail'
|
||
//底部
|
||
import footerMenu from '@/components/shop/detail/footerMenu';
|
||
// 生成订单
|
||
import makeOrder from '@/components/shop/detail/makeOrder.vue'
|
||
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance()
|
||
const store = useStore()
|
||
// 产品id
|
||
const id = ref('')
|
||
// 产品详情
|
||
const detail = reactive({})
|
||
// 当前登录的用户信息
|
||
const userinfo = computed(() => {
|
||
return store.state.userinfo
|
||
})
|
||
|
||
onLoad(option => {
|
||
if (option.productId) id.value = option.productId
|
||
// 获取产品详情
|
||
getDetail()
|
||
// 添加商品浏览记录
|
||
addBrowsing()
|
||
// 开启监听
|
||
addListener()
|
||
})
|
||
|
||
onReady(() => {
|
||
//
|
||
})
|
||
|
||
// 销毁监听
|
||
onUnload(() => {
|
||
removeListener()
|
||
})
|
||
|
||
onPageScroll((ev) => {
|
||
if (ev.scrollTop > 44) proxy.$refs.apexRef.headerActive = true
|
||
else proxy.$refs.apexRef.headerActive = false
|
||
})
|
||
|
||
// 开启监听
|
||
function addListener() {
|
||
// 监听商品详情
|
||
uni.$on('commodityDetail', (data) => {
|
||
//
|
||
if (detail.id == data.id) getDetail()
|
||
})
|
||
}
|
||
|
||
// 移除监听
|
||
function removeListener() {
|
||
uni.$off('commodityDetail')
|
||
}
|
||
|
||
// 获取详情
|
||
function getDetail() {
|
||
api.shop.productDetail({
|
||
query: {
|
||
userId: userinfo.value.id || '',
|
||
// 产品id
|
||
productionId: id.value
|
||
}
|
||
}).then(rs => {
|
||
if (rs.code == 200) {
|
||
//
|
||
const result = rs.data
|
||
Object.assign(detail, {}, result)
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 添加商品浏览记录
|
||
function addBrowsing() {
|
||
// 验证登录
|
||
util.isLogin(() => {
|
||
// 添加浏览记录
|
||
api.shop.addBrowsing({
|
||
data: {
|
||
userId: userinfo.value.id || '',
|
||
goodsId: id.value
|
||
},
|
||
}).then(rs => {
|
||
if (rs.code != 200) console.log('addbrows err', rs.msg)
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 详情
|
||
* @param {Object} ev 修改的详情
|
||
*/
|
||
function handleDetail(ev) {
|
||
Object.assign(detail, {}, ev)
|
||
}
|
||
|
||
// 拉起订单
|
||
function showMakeOrder() {
|
||
util.isLogin(() => {}).then(rs => {
|
||
proxy.$refs.makeOrderRef.open()
|
||
}).catch(rs => {
|
||
uni.navigateTo({
|
||
url: '/pages/login/loginPhone'
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 立即下单
|
||
*/
|
||
function handlePay(event) {
|
||
// 产生待付款订单
|
||
api.shop.addOrder({
|
||
data: [{
|
||
// 地址id
|
||
addressId: event.address.id,
|
||
// 产品id
|
||
productId: detail.id,
|
||
// 规格id
|
||
attrValueId: event.spec.id,
|
||
// 数量
|
||
payNum: event.payNum,
|
||
// 0-普通订单，1-视频号订单
|
||
orderType: 0,
|
||
// 分享人id
|
||
// shareId: userinfo.id,
|
||
}],
|
||
}).then(rs => {
|
||
if (rs.code === 200) {
|
||
// 跳转
|
||
if (rs.data && rs.data[0]) uni.navigateTo({
|
||
url: util.setUrl('/pages/shop/commodity/payment', {
|
||
orderId: rs.data[0].orderId,
|
||
})
|
||
})
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app pr">
|
||
<!-- 头部 -->
|
||
<apex ref="apexRef" :detail="detail" />
|
||
|
||
<!-- 获取详情 -->
|
||
<proDetail :id="id" :detail="detail" />
|
||
<!-- 精选 -->
|
||
<view class="recommend mlr20">
|
||
<productList :choicenessTitle="true" />
|
||
</view>
|
||
|
||
<!-- 底部菜单 -->
|
||
<view class="footer plr20 shadow bfff">
|
||
<footerMenu :detail="detail" @update="handleDetail" @buy="showMakeOrder" />
|
||
</view>
|
||
|
||
<!-- 立即支付 -->
|
||
<makeOrder ref="makeOrderRef" :detail="detail" @confirm="handlePay" />
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
//
|
||
.footerMenu {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
</style> |