350 lines
9.4 KiB
Vue
350 lines
9.4 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 轮播 -->
|
|
<view class="banner" v-if="productData.share">
|
|
<swiper class="swiperCont" interval="3000" autoplay circular @change="swiperChange">
|
|
<swiper-item v-for="(item, index) in productData.share.pictures" :key="index">
|
|
<image class="swiperImg" :src="item" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="swiperDot" v-if="productData.share.pictures.length > 0">
|
|
{{ current }}/{{ productData.share.pictures.length }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 权益介绍 -->
|
|
<view class="content">
|
|
<view class="contentText">
|
|
<view class="contentText-title">{{ productData.title }}</view>
|
|
<view class="contentText-text" v-if="productData.share">{{ productData.share.description }}</view>
|
|
<view class="contentText-price">
|
|
<view class="contentText-price-primary"><text>￥</text>{{ productData.price }}</view>
|
|
<view class="contentText-price-close" v-if="productData.share">门市价￥{{ productData.share.cost }}</view>
|
|
</view>
|
|
</view>
|
|
<view @tap="userNav" class="contentBuy">立即购买</view>
|
|
</view>
|
|
|
|
<!-- 规格 -->
|
|
<view class="specs">
|
|
<view class="specs-label" v-if="productData.share">
|
|
<text>规格</text>
|
|
{{ productData.share.type_name }}
|
|
</view>
|
|
<view class="specs-label">
|
|
<text>门店</text>
|
|
<view class="specs-site">
|
|
<view class="specs-site-list" v-for="(item, index) in productStores" :key="index">
|
|
<view class="specs-site-name">{{ item.title }}</view>
|
|
{{ item.address }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 规格 -->
|
|
<view class="imageText">
|
|
<view class="imageText-title">
|
|
图文详情
|
|
</view>
|
|
<view class="imageText-text" v-if="productContent">
|
|
<rich-text :nodes="productContent"></rich-text>
|
|
</view>
|
|
<view class="imageText-end">
|
|
END
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 漂浮窗 -->
|
|
<movable-area class="indexFloat" v-if="canShare">
|
|
<movable-view y="400" direction="vertical" class="indexFloat-movable">
|
|
<navigator hover-class="none" :url="'/pages/userGoods/goodsCode?rightid=' + rightId"
|
|
class="indexFloat-img">
|
|
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/index_float_01.png" mode="aspectFill"></image>
|
|
</navigator>
|
|
</movable-view>
|
|
</movable-area>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { productInfo } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isUser : false, //用户登录状态
|
|
qrcode : '', //二维码
|
|
userInfo : '', //我的信息
|
|
current : 1, //产品轮播index
|
|
rightId : '', //产品id
|
|
parentId : '', //分享人id
|
|
productData : '', //详情数据
|
|
productStores : [], //门店列表
|
|
productContent : '', //图文详情
|
|
canShare : '' //分享按钮状态
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if(options.type){
|
|
getApp().globalData.shareObj = {
|
|
type : options.type,
|
|
goodsId : options.rightid,
|
|
userId : options.parent_id
|
|
}
|
|
}
|
|
|
|
this.rightId = options.rightid
|
|
},
|
|
onShow(){
|
|
// 获取产品详情
|
|
this.goodsShow();
|
|
this.isUser = getApp().globalData.isUser
|
|
},
|
|
methods: {
|
|
// 商品轮播
|
|
swiperChange(e) {
|
|
this.current = e.detail.current + 1
|
|
},
|
|
|
|
// 产品详情
|
|
goodsShow(){
|
|
productInfo(this.rightId).then(res=>{
|
|
this.canShare = res.canShare
|
|
this.productData = res.info
|
|
this.productStores = res.stores
|
|
this.productContent= res.info.share.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
|
}).catch(err=>{})
|
|
},
|
|
|
|
// 处理未登录时的转跳
|
|
userNav(){
|
|
if(uni.getStorageSync("token")) {
|
|
uni.navigateTo({
|
|
url: '/pages/rights/index?id=' + this.productData.right_config_id + '&parent_id=' + this.parentId + '&type=share'
|
|
})
|
|
} else {
|
|
// 去登录
|
|
uni.navigateTo({
|
|
url: "/pages/auth/login?way=shareLogin"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
/* 轮播图 */
|
|
.banner {
|
|
width: 100%;
|
|
position: relative;
|
|
padding-top: 60%;
|
|
}
|
|
|
|
.swiperCont, .swiperImg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiperDot {
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, .5);
|
|
border-radius: 80rpx;
|
|
padding: 0 25rpx;
|
|
line-height: 46rpx;
|
|
z-index: 2;
|
|
bottom: 20rpx;
|
|
right: 50rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 权益介绍 */
|
|
.content {
|
|
width: 100%;
|
|
padding: 25rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
|
|
.contentText {
|
|
width: calc(100% - 240rpx);
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.contentText-title {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.contentText-text {
|
|
font-size: 26rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
color: #646464;
|
|
}
|
|
|
|
.contentText-price {
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
|
|
.contentText-price-primary {
|
|
color: #f57400;
|
|
font-size: 48rpx;
|
|
font-weight: 600;
|
|
text {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.contentText-price-close {
|
|
font-size: 24rpx;
|
|
color: #646464;
|
|
margin: 20rpx 0 0 10rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.contentBuy {
|
|
background: linear-gradient(to left, #fe6d52, #fe8750);
|
|
border-radius: 20rpx;
|
|
width: 200rpx;
|
|
text-align: center;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
color: #ffffff;
|
|
margin-top: 70rpx;
|
|
}
|
|
|
|
/* 规格 */
|
|
.specs {
|
|
background-color: #ffffff;
|
|
padding: 25rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.specs-label {
|
|
display: flex;
|
|
margin-bottom: 30rpx;
|
|
text {
|
|
font-size: 30rpx;
|
|
display: block;
|
|
width: 100rpx;
|
|
color: #808080;
|
|
line-height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.specs-label:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.specs-site {
|
|
box-sizing: border-box;
|
|
font-size: 30rpx;
|
|
width: calc(100% - 120rpx);
|
|
}
|
|
|
|
.specs-site-list {
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.specs-site-list:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.specs-site-name {
|
|
font-size: 32rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
/* 详情 */
|
|
.imageText {
|
|
width: 100%;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.imageText-title {
|
|
width: 200rpx;
|
|
margin: 0 auto 30rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.imageText-title::after,
|
|
.imageText-title::before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 49%;
|
|
background-color: #000000;
|
|
width: 100rpx;
|
|
height: 2rpx;
|
|
}
|
|
|
|
.imageText-title::after {
|
|
left: -100rpx;
|
|
}
|
|
|
|
.imageText-title::before {
|
|
right: -100rpx;
|
|
}
|
|
|
|
.imageText-end {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin: 30rpx auto;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #000000;
|
|
position: relative;
|
|
}
|
|
|
|
.imageText-end::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
top: 0rpx;
|
|
right: 16rpx;
|
|
background-color: #000000;
|
|
}
|
|
|
|
/* 漂浮弹出层 */
|
|
.indexFloat {
|
|
position: fixed;
|
|
height: 52%;
|
|
width: 130rpx;
|
|
right: 20rpx;
|
|
bottom: 40rpx;
|
|
z-index: 99;
|
|
}
|
|
|
|
.indexFloat-movable {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 150rpx;
|
|
z-index: 99;
|
|
image {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
</style>
|