180 lines
3.1 KiB
Vue
180 lines
3.1 KiB
Vue
<script setup>
|
|
import {
|
|
ref,
|
|
defineProps,
|
|
} from 'vue'
|
|
// 状态栏
|
|
import statusBar from '@/components/header/statusBar'
|
|
//
|
|
const props = defineProps({
|
|
detail: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
})
|
|
// 顶部激活
|
|
const headerActive = ref(false)
|
|
const share_more = ref(null)
|
|
const more_share_data = ref([])
|
|
// 分享弹窗
|
|
const more_share = {
|
|
more: [
|
|
// {
|
|
// icon: '/static/news.png',
|
|
// title: '信息'
|
|
// },
|
|
{
|
|
icon: '/static/home.png',
|
|
title: '回到首页',
|
|
event: () => {
|
|
uni.switchTab({
|
|
url: '/pages/shop/shop'
|
|
})
|
|
}
|
|
},
|
|
{
|
|
icon: '/static/individual.png',
|
|
title: '个人中心',
|
|
event: () => {
|
|
uni.switchTab({
|
|
url: '/pages/mine/mine'
|
|
})
|
|
}
|
|
},
|
|
{
|
|
icon: '/static/order.png',
|
|
title: '我的订单',
|
|
event: () => {
|
|
uni.redirectTo({
|
|
url: '/pages/shop/order/index'
|
|
})
|
|
}
|
|
}
|
|
],
|
|
share: [{
|
|
icon: '/static/linkage.png',
|
|
title: '复制链接'
|
|
},
|
|
{
|
|
icon: '/static/download.png',
|
|
title: '保存图片'
|
|
}
|
|
]
|
|
}
|
|
|
|
// 打开
|
|
function open(val) {
|
|
more_share_data.value = more_share[val]
|
|
share_more.value.open()
|
|
}
|
|
|
|
/**
|
|
* 列表项事件
|
|
* @param {Object} item
|
|
*/
|
|
function handleItem(item) {
|
|
if (item.event) item.event()
|
|
}
|
|
|
|
// 返回
|
|
function goBack(url) {
|
|
// 获取当前页面栈
|
|
const pages = getCurrentPages();
|
|
|
|
// 判断是否存在上一页
|
|
if (pages.length > 1) {
|
|
return uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else {
|
|
return uni.reLaunch({
|
|
url: url
|
|
})
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
headerActive,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="apex pf t0 l0 r0" :class="{'active': headerActive}">
|
|
<!-- 状态栏 -->
|
|
<statusBar />
|
|
|
|
<view class="head rows plr30">
|
|
<view class="side">
|
|
<image @click="goBack('/pages/shop/shop')" class="back wh55" src="/static/back.png" />
|
|
</view>
|
|
|
|
<view class="main f1 tac">
|
|
<text>销量: {{detail.sales}}</text>
|
|
</view>
|
|
|
|
<view class="side df fdr jcr">
|
|
<!-- <image @click="open('share')" class="share wh55" src="/static/share1.png" /> -->
|
|
<image @click="open('more')" class="more wh55 ml20" src="/static/more.png" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 详情 -->
|
|
<uni-popup ref="share_more" type="bottom">
|
|
<view class="menuAlt popBot">
|
|
<view class="main df ptb40">
|
|
<view class="item ver" v-for="(item, index) in more_share_data" :key="index" @click="handleItem(item)">
|
|
<image class="wh100" :src="item.icon" />
|
|
<view class="title mt10">
|
|
<text class="txt c666 f8">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn lg bar mlr30 mtb30 bfff" @click="share_more.close()">
|
|
<text class="c333">取消</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 顶部
|
|
.apex {
|
|
z-index: 10;
|
|
background-color: #ffffff00;
|
|
|
|
.head {
|
|
.side {
|
|
width: 150rpx;
|
|
}
|
|
|
|
.main {
|
|
opacity: 0;
|
|
transition: .1s;
|
|
}
|
|
}
|
|
|
|
// 激活的
|
|
&.active {
|
|
background-color: #fff;
|
|
|
|
.main {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 菜单弹窗
|
|
.menuAlt {
|
|
background: #F0F0F0;
|
|
|
|
.main {
|
|
height: 400rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 150rpx;
|
|
}
|
|
}
|
|
</style> |