-
分享库 uniapp.dcloud.io/api/plugins…
// 点击分享 onNavigationBarButtonTap(e) { if (e.type == 'share') { uni.share({ "provider": "weixin", type: 0, "scene": "WXSceneSession", 'title': this.goodsContent.name, "href":
http://192.168.31.62:8080/#/pages/details/details?id=${this.goodsContent.id}, imageUrl: this.goodsContent.img, success: function(res) { uni.showTabBar({ "title": '分享成功' }) }, fail: function(err) { console.log("fail:" + JSON.stringify(err)); } }) } },
完整代码：
<template>
<view class="details">
<!-- 商品图 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item>
<view class="swiper-item">
<image class="swiper-img" :src="goodsContent.img" mode=""></image>
</view>
</swiper-item>
</swiper>
<!-- 价格和名称 -->
<view class="detial-goods">
<view class="goods-pprice">￥{{goodsContent.pprice}}</view>
<view class="goods-oprice">￥{{goodsContent.oprice}}</view>
<view class="goods-name">{{goodsContent.name}}</view>
</view>
<!-- 商品详情 -->
<view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
</view>
<!-- 商品列表 -->
<Card name="看了又看"></Card>
<CommodityList :commodityList='dataList'></CommodityList>
<!-- 底部 -->
<view class="detial-footer">
<view class="iconfont icon-xiaoxi"></view>
<view class="iconfont icon-gouwuche"></view>
<view class="add-shopcard" @tap="showPop">加入购物车</view>
<view class="purchase" @tap="showPop">立即购买</view>
</view>
<!-- 底部弹出层 -->
<view class="pop" v-if="isShow" @touchmove.stop.prevent="">
<!-- 蒙层 -->
<view class="pop-mask" @tap="hidePop">
<!-- 内容块 -->
<view class="pop-box" :animation="animationData">
<view class="">
<image class="pop-img" src="../../static/img/hot.png" mode=""></image>
</view>
<view class="pop-num">
<view class="">购买数量</view>
<UniNumberBox min="1"></UniNumberBox>
</view>
<view class="pop-sub">确定</view>
</view>
</view>
</view>
</view>
</template>
<script>
import $http from '@/common/api/request.js'
import Card from '@/components/common/card.vue'
import CommodityList from '@/components/common/commodityList.vue'
import UniNumberBox from '@/components/unix/uni-number-box/uni-number-box.vue'
export default {
data() {
return {
goodsContent: {},
isShow: false,
animationData: {},
dataList: [{
id: 1,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '299',
oprice: '699',
discount: '5.5'
},
{
id: 2,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '269',
oprice: '699',
discount: '5.5'
},
{
id: 3,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '289',
oprice: '688',
discount: '5.5'
}
]
}
},
components: {
Card,
CommodityList,
UniNumberBox
},
onLoad(e) {
this.getData(e.id)
},
// 点击分享
onNavigationBarButtonTap(e) {
if (e.type == 'share') {
uni.share({
"provider": "weixin",
type: 0,
"scene": "WXSceneSession",
'title': this.goodsContent.name,
"href": `http://192.168.31.62:8080/#/pages/details/details?id=${this.goodsContent.id}`,
imageUrl: this.goodsContent.img,
success: function(res) {
uni.showTabBar({
"title": '分享成功'
})
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
})
}
},
methods: {
//请求商品详情数据
getData(id) {
$http.request({
url: '/goods/id',
data: {
id: id
}
}).then((res) => {
this.goodsContent = res[0]
}).catch(() => {
uni.showTabBar({
title: '请求失败',
icon: 'none'
})
})
},
// 修改返回按钮的默认行为
onBackPress() {
if (this.isShow) {
this.hidePop();
return true;
}
},
showPop() {
// 现实蒙层动画
var animation = uni.createAnimation({
duration: 200,
});
animation.translateY(600).step();
this.animationData = animation.export();
this.isShow = true;
setTimeout(() => {
animation.translateY(0).step();
this.animationData = animation.export();
}, 200)
},
hidePop() {
// 隐藏蒙层动画
var animation = uni.createAnimation({
duration: 200,
});
animation.translateY(600).step();
this.animationData = animation.export();
this.isShow = false;
setTimeout(() => {
animation.translateY(0).step();
this.isShow = false;
}, 200)
},
},
}
</script>
<style>
.details {
padding-bottom: 90rpx;
}
swiper {
width: 100%;
height: 700rpx;
}
.swiper-img {
width: 100%;
height: 700rpx;
}
.detial-goods {
text-align: center;
font-size: 36rpx;
font-weight: bold;
padding: 10rpx 0;
}
.detial-imgs {
width: 100%;
}
.detial-footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 90rpx;
background-color: #FFFFFF;
justify-content: center;
align-items: center;
}
.detial-footer .iconfont {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
border-radius: 100%;
background-color: #333333;
text-align: center;
color: #FFFFFF;
margin: 0 10rpx;
}
.add-shopcard {
margin: 0 40rpx;
padding: 6rpx 30rpx;
background-color: #000000;
color: #FFFFFF;
border-radius: 40rpx;
}
.purchase {
margin: 0 40rpx;
margin: 0 40rpx;
padding: 6rpx 30rpx;
background-color: #49BDFB;
color: #FFFFFF;
border-radius: 40rpx;
}
.pop {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
.pop-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.pop-box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 450rpx;
background-color: #FFFFFF;
}
.pop-img {
width: 260rpx;
height: 260rpx;
}
.pop-sub {
line-height: 80rpx;
color: #FFFFFF;
text-align: center;
background-color: #49BDFB;
}
.pop-num {
display: flex;
justify-content: space-between;
padding: 20rpx 20rpx;
}
</style>
