charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 微信分享

Browse Source
This commit is contained in:
charles
2026-07-23 14:03:35 +08:00
parent 39d0dcea86
commit c7e71a6219
2 changed files with 283 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/other_package/components/share-popup.vue
+226 -188
View File
@@ -1,219 +1,257 @@
<template>
<up-popup
:show="show"
:round="24"
:closeOnClickOverlay="false"
>
<view class="share-popup-view">
<view class="share-head">
<text class="text-28 text-gray">分享信任桥</text>
</view>
<view class="share-btn-view">
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :key="index">
<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
<text class="text-24 text-gray">{{item}}</text>
</view>
<!-- #ifdef APP-PLUS || H5 -->
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in appBtnList" :key="index">
<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`" class="share-img"></image>
<text class="text-24 text-gray">{{item}}</text>
</view>
<!-- #endif -->
</view>
<view class="share-line" style="margin-top:40rpx;"></view>
<view class="share-line" style="min-height:16rpx;height:16rpx">
</view>
<view class="share-bottom" @click="onClose">
<text class="text-32 text-fu1">取消</text>
</view>
<up-popup :show="show" :round="24" :closeOnClickOverlay="false">
<view class="share-popup-view">
<view class="share-head">
<text class="text-28 text-gray">分享信任桥</text>
</view>
<view class="share-btn-view">
<!-- #ifndef APP-PLUS || H5 -->
<block v-for="(item, index) in btnList" :key="index">
<button v-if="index === 0" open-type="share" hover-class="none" class="share-box share-btn-clean" @click="onBtn(index)">
<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
<text class="text-24 text-gray">{{ item }}</text>
</button>
<view v-else class="share-box" @click="onBtn(index)">
<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
<text class="text-24 text-gray">{{ item }}</text>
</view>
</block>
<!-- #endif -->
<!-- #ifdef APP-PLUS || H5 -->
<view class="share-box" @click="onBtn(index)" v-for="(item, index) in appBtnList" :key="index">
<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`"
class="share-img"></image>
<text class="text-24 text-gray">{{ item }}</text>
</view>
<!-- #endif -->
</view>
<view class="share-line" style="margin-top:40rpx;"></view>
<view class="share-line" style="min-height:16rpx;height:16rpx">
</view>
<view class="share-bottom" @click="onClose">
<text class="text-32 text-fu1">取消</text>
</view>
<view class="share-top-image-view">
<image :src="tu" class="tu-img"></image>
<view class="image-view-bottom">
<view class="image-view-bottom-left">
<text class="text-24 text-gray text-overflow1">{{text}}</text>
<text class="text-24 text-gray text-overflow1">{{ text }}</text>
</view>
<view class="image-view-bottom-right">
<text class="text-24 text-zi">￥{{price}}</text>
<text class="text-24 text-zi">￥{{ price }}</text>
</view>
</view>
</view>
</view>
</view>
</up-popup>
</template>
<script>
import Func from '/utils/func'
import {SHARE_URL} from '@/utils/config.js'
export default {
data() {
return {
btnList:['微信','朋友圈'],
appBtnList:['微信', '朋友圈', '复制链接', '保存图片', 'QQ'],
}
import Func from '/utils/func'
import { SHARE_URL } from '@/utils/config.js'
export default {
data() {
return {
btnList: ['微信', '朋友圈'],
appBtnList: ['微信', '朋友圈', '复制链接', '保存图片', 'QQ'],
}
},
props: {
show: {
type: Boolean,
default: false
},
props:{
show:{
type:Boolean,
default:false
},
id:{
type:String,
default:''
},
tu:{
type:String,
default:''
},
price:{
type:String,
default:''
},
text:{
type:String,
default:''
}
id: {
type: String,
default: ''
},
methods: {
onWxBtn(index){
console.log('微信分享',index);
this.$emit('wxShare',index)
},
onClose(){
this.$emit('close');
},
onOk(){
Func.debounce(this.dOk())
},
dOk(){
this.$emit('ok');
}
tu: {
type: String,
default: ''
},
price: {
type: String,
default: ''
},
text: {
type: String,
default: ''
}
},
methods: {
onBtn(index) {
console.log('微信分享', index);
this.$emit('wxShare', index)
},
onClose() {
this.$emit('close');
},
onOk() {
Func.debounce(this.dOk())
},
dOk() {
this.$emit('ok');
}
}
}
</script>
<style lang="scss" scoped>
.share-top-image-view{
width:400rpx;
min-height:496rpx;
height:496rpx;
.share-top-image-view {
width: 400rpx;
min-height: 496rpx;
height: 496rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 32rpx;
box-sizing: border-box;
border-radius: 24rpx;
position: absolute;
background-color: #fff;
top: -638rpx;
.image-view-bottom {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
padding: 32rpx;
justify-content: space-between;
margin-top: 20rpx;
.image-view-bottom-left {
height: 72rpx;
min-height: 72rpx;
border-right: 2rpx solid #EBEBEB;
display: flex;
align-items: center;
padding-right: 10rpx;
}
.image-view-bottom-right {
// min-width:130rpx;
margin-left: 10rpx;
height: 72rpx;
min-height: 72rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
}
.tu-img {
width: 100%;
height: 344rpx;
}
}
.share-popup-view {
width: 100%;
height: 400rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
position: relative;
.share-head {
width: 100%;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-bottom {
width: 100%;
height: 92rpx;
min-height: 92rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-line {
display: flex;
width: 100%;
height: 2rpx;
min-height: 2rpx;
background-color: #e7e7e7;
}
.qr-view {
width: 100%;
height: 332rpx;
min-height: 332rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-btn-view {
width: 100%;
height: 124rpx;
min-height: 124rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
// padding: 0 36rpx;
box-sizing: border-box;
border-radius: 24rpx;
position: absolute;
background-color: #fff;
top:-638rpx;
.image-view-bottom{
width:100%;
flex:1;
margin-top: 36rpx;
.share-box {
flex: 1;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
justify-content: space-between;
margin-top:20rpx;
.image-view-bottom-left{
height:72rpx;
min-height:72rpx;
border-right: 2rpx solid #EBEBEB;
display: flex;
align-items: center;
padding-right: 10rpx;
}
.image-view-bottom-right{
// min-width:130rpx;
margin-left:10rpx;
height:72rpx;
min-height:72rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
align-items: center;
.share-img {
width: 80rpx;
height: 80rpx;
}
}
.tu-img{
width:100%;
height:344rpx;
.share-btn-clean {
background: none !important;
background-color: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
line-height: normal !important;
font-size: inherit !important;
color: inherit !important;
outline: none !important;
border-radius: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
&::after {
border: none !important;
display: none !important;
}
}
}
.share-popup-view{
width:100%;
height:400rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
position: relative;
.share-head{
width:100%;
height:88rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-bottom{
width:100%;
height:92rpx;
min-height:92rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-line{
display: flex;
width:100%;
height:2rpx;
min-height:2rpx;
background-color: #e7e7e7;
}
.qr-view{
width:100%;
height:332rpx;
min-height:332rpx;
display: flex;
align-items: center;
justify-content: center;
}
.share-btn-view{
width:100%;
height:124rpx;
min-height:124rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
// padding: 0 36rpx;
box-sizing: border-box;
margin-top:36rpx;
.share-box{
flex:1;
height:100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.share-img{
width:80rpx;
height:80rpx;
}
}
}
}
}
</style>