185 lines
3.7 KiB
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> |