jiuyiUniapp/jiuyi/pages/shop/commodity/components/jy-commodity-head/index.vue

185 lines
3.7 KiB
Vue

<template>
<view class="head df jcsb aic pa" :style="{ width: screenWidth(), top: bottomSafeAreaHeight() }">
<image @click="goBack('/pages/shop/shop')" class="back" :src="back" />
<view class="df">
<image @click="open('share')" class="share" :src="share" />
<image @click="open('more')" class="more" :src="more" />
</view>
</view>
<uni-popup ref="share_more" type="bottom" borderRadius="20px 20px 0 0">
<view class="popup-content">
<view class="df fjc item">
<view class="df fdc aic " v-for="(item, index) in more_share_data" :key="index" @click="handle_share(item)">
<image :src="item.icon" />
<text class="title">{{ item.title }}</text>
</view>
</view>
<p class="cancel" @click="share_more.close()" :style="{ bottom: bottomSafeAreaHeight() }">取消</p>
</view>
</uni-popup>
</template>
<script setup>
import {
ref
} from 'vue'
import back from '@/static/back.png'
import share from '@/static/share1.png'
import more from '@/static/more.png'
import news from '@/static/news.png'
import home from '@/static/home.png'
import individual from '@/static/individual.png'
import order from '@/static/order.png'
import linkage from '@/static/linkage.png'
import download from '@/static/download.png'
import wx from '@/static/wx.png'
import qq from '@/static/qq.png'
import {
screenWidth,
bottomSafeAreaHeight,
goBack
} from '@/components/public/Mixins.js'
const share_more = ref(null)
const more_share_data = ref([])
// 分享弹窗
const more_share = {
more: [{
icon: news,
title: '信息'
},
{
icon: home,
title: '回到首页'
},
{
icon: individual,
title: '个人中心'
},
{
icon: order,
title: '我的订单'
}
],
share: [{
icon: linkage,
title: '复制链接'
},
{
icon: download,
title: '保存图片'
},
{
icon: wx,
key: 'weixin',
title: '微信'
},
{
icon: qq,
key: 'qq',
title: 'QQ'
}
]
}
//
const open = (val) => {
more_share_data.value = more_share[val]
share_more.value.open()
}
// 分享
function handle_share(item) {
// 如果是分享
if (['weixin', 'qq'].includes(item.key)) {
uni.getProvider({
service: 'share',
success: res => {
const shareInfo = store.state.shareInfo; // 分享数据
let data = {
provider: item.key,
/**
* 0 图文 1纯文字 2图片 3音乐 4视频 5小程序
* qq只支持 123
*/
type: 2,
// 图片
imageUrl: '',
// 分享标题
title: "来自",
// 分享内容 自定义文案
summary: `分享给您`,
// h5链接
href: ``,
}
uni.share({
...data,
complete: (rs) => {
console.log('uni share', rs, data)
}
})
},
})
}
}
</script>
<style lang="scss" scoped>
.head {
// 固定在屏幕顶部
position: fixed;
padding: 20rpx 0;
height: 56rpx;
z-index: 2;
image {
margin: 0 20rpx;
width: 56rpx;
height: 56rpx;
}
}
.popup-content {
width: 100%;
height: 600rpx;
background: #F0F0F0; //上面两个圆角
border-top-left-radius: 50rpx;
border-top-right-radius: 50rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.item {
position: absolute;
top: 60rpx;
margin: 0 10rpx;
}
image {
margin: 0 20rpx;
width: 100rpx;
height: 100rpx;
}
.title {
margin-top: 20rpx;
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
}
.cancel {
position: absolute;
bottom: 60rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 0 20rpx 20rpx 20rpx;
width: 700rpx;
height: 80rpx;
border-radius: 2314rpx;
background: $uni-bg-color;
}
}
</style>