<template>
|
<view class="detailBody">
|
<view style="position: relative;">
|
<swiper class="topswiper" @change="imgNumCHange">
|
<swiper-item v-for="(item,index) in info.imgs" :key="index">
|
<img style="width: 100%;height: 100%;" :src="item" alt="">
|
</swiper-item>
|
|
</swiper>
|
<view v-if="info.imgs?.length>0" class="fixedImgNum">
|
{{imgNum}} / {{info.imgs.length}}
|
</view>
|
</view>
|
|
<view v-if="info?.subdivisionName" style="background-color: white;padding: 24rpx 12rpx;">
|
<view class="banner">
|
<view>
|
{{info.subdivisionName}}热销排行第<text style="color:red;">{{info.subdivisionRank}}</text>名
|
</view>
|
<!-- <view>
|
查看>
|
</view> -->
|
</view>
|
</view>
|
|
<view class="pricebox">
|
<text class="price">￥{{info.actualPrice=='0'?info.originalPrice:info.actualPrice}}</text>
|
<text class="oldPrice"
|
v-if="Number(info.actualPrice)&&(Number(info.actualPrice)<Number(info.originalPrice))">原价：{{info.originalPrice}}</text>
|
<text style="float: right;padding-top: 6px;">
|
已售
|
<text style="color: red; ">
|
{{getNumData(info.monthSales??0)+(getNumData(info.monthSales)?'+':'')}}
|
</text>
|
件
|
</text>
|
</view>
|
|
<view style="display: flex;background-color: white;">
|
<view v-if="(info.shopType==0||info.shopType==1)&&type!=='2'" style="padding-top: 10px;margin-left: 12px;">
|
<img style="width:16px;height: 16px;"
|
:src="info.shopType==0?'https://img.alicdn.com/imgextra/i4/751308485/O1CN01ppfg8j2CYBRpPtb51_!!751308485.png':'https://img.alicdn.com/imgextra/i4/751308485/O1CN01mKVp3U2CYBRzeHVcG_!!751308485.png'"
|
alt="">
|
</view>
|
<view class="title">
|
{{info?.dtitle}}
|
</view>
|
|
</view>
|
<!-- <view class="title">
|
{{info.dtitle}}
|
</view> -->
|
<!-- <view style="background-color: white; border-radius: 0 0 24rpx 24rpx;margin-bottom: 24rpx;">
|
<view class="coupon" v-if="info?.couponPrice">
|
<view class="couponLeft">
|
<view class="couponPrice">
|
￥{{info.couponPrice}}
|
</view>
|
<view class="coupondate">
|
<view>
|
优惠券使用有效期
|
</view>
|
<view style="font-size: 24rpx;">
|
{{info.couponStartTime.slice(0,10)}} - {{info.couponEndTime.slice(0,10)}}
|
</view>
|
</view>
|
|
</view>
|
<view class="couponRight">
|
<view class="couponget">
|
立即领取
|
</view>
|
</view>
|
</view>
|
</view> -->
|
<view v-if="info.desc"
|
style="background-color: white;margin-bottom: 24rpx;border-radius:24rpx;padding: 24rpx;margin-top: 24rpx;">
|
<view style="align-items: center;display: flex;">
|
<image style="width: 60rpx;height: 60rpx;"
|
src="https://img.alicdn.com/imgextra/i1/751308485/O1CN01XyBg5d2CYBRjExT5h_!!751308485.png"></image>
|
<text style="color: rgb(254, 55, 56);font-weight: 700;margin-left: 12rpx;">达人推荐</text>
|
</view>
|
<view class="tuihuabox">
|
<image style="width: 60rpx;height:30rpx ;position: absolute;top: -30rpx;left: 120rpx;"
|
src="../../static/homeimg/jiantou.png"></image>
|
<view>
|
{{info.desc}}
|
</view>
|
</view>
|
|
</view>
|
<!-- <view style="background-color: white;margin-bottom: 24rpx;border-radius:24rpx;">
|
<view class="shopinfo">
|
<img style="width: 120rpx;height: 120rpx;" :src="shopInfo.logoUrl" alt="">
|
<view class="describe">
|
<view class="describe_top">
|
<view class="describe_name">{{shopInfo.shopname}}</view>
|
<view class="btn">
|
全部商品
|
</view>
|
</view>
|
<view class="describe_info">
|
<view>描述：{{shopInfo.des}}</view>
|
<view>卖家：{{shopInfo.seller}}</view>
|
<view>物流：{{shopInfo.logistics}}</view>
|
</view>
|
</view>
|
|
</view>
|
</view> -->
|
<view v-if="info.detailImages&&info.detailImages?.[0]!==''" class="goodDetail">
|
<view class="goodDetailTop">
|
<view class="tiao">
|
|
</view>
|
<view class="goodDetailTop_title">
|
商品详情
|
</view>
|
</view>
|
<view class="" v-for="(item,index) in info.detailImages" :key="item">
|
<!-- <img style="width: 100%;" :src="item" alt=""> -->
|
<image mode='widthFix' :src="item" style="width: 100%;display: block;"></image>
|
</view>
|
</view>
|
<view class="fixedBar">
|
<view class="fixedBar_body">
|
<!-- <view class="fixedBar_item1">
|
<image style="width: 30rpx;height: 30rpx;margin: 8rpx;" src="../../static/homeimg/share.png">
|
</image>
|
<view>分享</view>
|
</view>
|
<view class="fixedBar_item1">
|
<img style="width: 30rpx;height: 30rpx;margin: 8rpx;" src="../../static/homeimg/shoucang.png"
|
alt="">
|
<view>收藏</view>
|
</view> -->
|
<view class="fixedBar_item2">
|
<view v-if="type==2||type==4" class="fixedBar_btn2" @click="GetPrivilegeLink(goodid)">
|
<view>
|
￥{{info.actualPrice}}
|
<text class="fixedBar_oldPrice"
|
v-if="Number(info.actualPrice)<Number(info.originalPrice)">原价：{{info.originalPrice}}</text>
|
</view>
|
<view v-if="Number(info.actualPrice)<Number(info.originalPrice)">领券购买</view>
|
<view v-else>立即购买</view>
|
</view>
|
<view v-else class="fixedBar_btn1" @click="GetPrivilegeLink(goodid)">
|
<view>口令复制</view>
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getNumData,
|
} from "../../common/util.js"
|
import requestx from '../../common/request.js'
|
export default {
|
data() {
|
return {
|
getNumData,
|
requestx,
|
goodid: '',
|
info: {},
|
copyText: '',
|
hasGet: false,
|
type: 1,
|
routerr: '',
|
imgNum: 1,
|
baseUrl: '',
|
}
|
},
|
onShareAppMessage: function() {
|
return {
|
title: '淘券获取',
|
path: '/pages/index/index',
|
// promise
|
}
|
},
|
onShareTimeline() {
|
return {
|
title: '淘券获取',
|
query: '/pages/index/index',
|
}
|
},
|
onLoad(opt) {
|
let rr = getCurrentPages()
|
this.routerr = rr[rr.length - 1].$page?.fullPath
|
// debugger
|
// document.addEventListener("plusready", function() {
|
// plus.navigator.setFullscreen(true)
|
// });
|
// if (opt.info && opt.type !== '2') {
|
// if (JSON.parse(decodeURIComponent(opt.info)).imgs && JSON.parse(decodeURIComponent(opt.info)).imgs.length >
|
// 0) {
|
// this.info = JSON.parse(decodeURIComponent(opt.info))
|
// } else {
|
// let data = JSON.parse(decodeURIComponent(opt.info))
|
// data.imgs = [data.mainPic]
|
// this.info = data
|
// }
|
|
// } else {
|
this.GetGoodDetail(opt.id, opt.type, opt)
|
// }
|
|
// this.GetPrivilegeLink(opt.id)
|
this.type = opt.type ?? 1
|
this.goodid = opt.id
|
},
|
methods: {
|
GetGoodDetail(id, type, opt) {
|
let me = this
|
let url = '/TkProduct/GetGoodDetail'
|
|
if (type == '2') {
|
url = '/TkJdProduct/GetJdGoodDetail'
|
}
|
this.requestx({
|
url: url,
|
method: 'POST',
|
data: {
|
id: id,
|
},
|
}).then((res) => {
|
// debugger
|
if (res.success) {
|
let data = res.result
|
if (data.detailPics) {
|
let imgss = JSON.parse(data.detailPics)
|
let img = []
|
|
imgss.map(ii => {
|
img.push(ii.img)
|
})
|
data.detailImages = img
|
}
|
this.info = data
|
}else{
|
if (JSON.parse(decodeURIComponent(opt.info)).imgs && JSON.parse(decodeURIComponent(opt
|
.info)).imgs.length > 0) {
|
this.info = JSON.parse(decodeURIComponent(opt.info))
|
} else {
|
var data = JSON.parse(decodeURIComponent(opt.info))
|
console.log(data);
|
data.imgs = [data.mainPic]
|
this.info = data
|
}
|
}
|
|
})
|
|
},
|
GetPrivilegeLink(id) {
|
let me = this
|
let url = '/TkProduct/GetPrivilegeLink'
|
let param = {
|
id: id,
|
}
|
if (me.type == '3') {
|
url = '/TkTiktokProduct/GetTiktokProductShare'
|
let prourl=me.info.detailUrl?me.info.detailUrl:me.info.itemLink;
|
param = {
|
productUrl:prourl,
|
}
|
} else if (me.type == '2') {
|
url = '/TkJdProduct/GetTiktokProductShare'
|
param = {
|
productUrl: me.info.materialUrl,
|
}
|
} else if (me.type == '4') {
|
url = '/TkPddProduct/GetPddProductShare'
|
let goodssign=me.info.goodsSign?me.info.goodsSign:me.info.goods_sign
|
param = {
|
id: goodssign,
|
}
|
}
|
this.requestx({
|
url: url,
|
method: 'POST',
|
data: param,
|
}).then((res) => {
|
// debugger
|
if (res.success) {
|
if (me.type == '2') {
|
let e = encodeURIComponent(res.result.shortUrl)
|
uni.navigateToMiniProgram({
|
appId: 'wx91d27dbf599dff74',
|
path: 'pages/union/proxy/proxy?spreadUrl=' + e +
|
'&appid=wxb4e7e6d63908a36e', // 不填默认首页
|
// extraData: {
|
// 'data1': 'test'
|
// },
|
success(res) {
|
// 打开成功
|
}
|
})
|
} else if (me.type == '4') {
|
let e = encodeURIComponent(res.result)
|
uni.navigateToMiniProgram({
|
appId: 'wx32540bd863b27570',
|
path: res.result,
|
success(res) {
|
|
}
|
})
|
} else {
|
if(res.data)
|
{
|
let txt = res.data.result.longTpwd ?? res.data.result.dyPassword
|
me.copyText = txt
|
me.copy(txt)
|
}
|
else{
|
let txt = res.result.longTpwd ?? res.result.dyPassword
|
me.copyText = txt
|
me.copy(txt)
|
}
|
}
|
|
}
|
|
})
|
|
},
|
copy(txt) {
|
let title = this.type == '3' ? '复制口令成功，打开【抖音】领券购买' : '复制口令成功，打开【淘宝】领券购买'
|
uni.setClipboardData({
|
data: txt,
|
success(res) {
|
uni.showToast({
|
title: title,
|
icon: 'none'
|
})
|
}
|
})
|
|
},
|
imgNumCHange(val) {
|
// debugger
|
this.imgNum = val.detail.current + 1
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.detailBody {
|
background-color: #e7e7e7;
|
padding-bottom: 110rpx;
|
min-height: 90vh;
|
}
|
|
.topswiper {
|
height: 720rpx;
|
}
|
|
.fixedBar {
|
position: fixed;
|
bottom: 0;
|
background-color: white;
|
|
width: 100%;
|
height: 100rpx;
|
|
}
|
|
.fixedBar_body {
|
padding: 12rpx;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.fixedBar_item1 {
|
display: flex;
|
flex-direction: column;
|
font-size: 24rpx;
|
color: #949292;
|
}
|
|
.fixedBar_item2 {
|
display: flex;
|
align-items: center;
|
border-radius: 40rpx;
|
width: 100%;
|
}
|
|
.fixedBar_btn1 {
|
|
width: 100%;
|
color: rgb(255, 78, 81);
|
background-color: rgb(255, 238, 222);
|
text-align: center;
|
padding: 26rpx 0;
|
border-radius: 42rpx;
|
font-size: 24rpx;
|
}
|
|
.fixedBar_btn2 {
|
width: 100%;
|
color: white;
|
background-color: rgb(252, 56, 57);
|
text-align: center;
|
padding: 13rpx 0 12rpx 0;
|
border-radius: 42rpx;
|
font-size: 22rpx;
|
}
|
|
.fixedBar_oldPrice {
|
text-decoration: line-through;
|
color: #b6bbbe;
|
font-size: 22rpx;
|
margin-left: 4rpx;
|
}
|
|
.banner {
|
display: flex;
|
justify-content: space-between;
|
background-color: #f2eac9;
|
color: #e7ad00;
|
height: 60rpx;
|
padding: 12rpx;
|
align-items: center;
|
border-radius: 12rpx;
|
/* background-color: white; */
|
}
|
|
.pricebox {
|
padding: 12rpx;
|
background-color: white;
|
}
|
|
.price {
|
color: red;
|
font-size: 46rpx;
|
}
|
|
.oldPrice {
|
text-decoration: line-through;
|
color: #b6bbbe;
|
font-size: 24rpx;
|
margin-left: 36rpx;
|
}
|
|
.title {
|
font-weight: 600px;
|
font-size: 24rpx;
|
padding: 16rpx;
|
font-size: 30rpx;
|
background-color: white;
|
}
|
|
.coupon {
|
display: flex;
|
padding: 12rpx 12rpx 36rpx 12rpx;
|
/* border-radius: 0 0 24rpx 24rpx; */
|
}
|
|
.couponLeft {
|
background: url('https://cmsstaticv2.ffquan.cn/img/quanleft.dcece460.png') no-repeat;
|
background-size: 100% 100%;
|
justify-content: space-around;
|
display: flex;
|
align-items: center;
|
height: 140rpx;
|
width: 480rpx;
|
color: red;
|
border-radius: 0 0 0 22rpx;
|
}
|
|
.couponPrice {
|
font-size: 48rpx;
|
font-weight: 600;
|
}
|
|
.coupondate {}
|
|
.couponRight {
|
display: flex;
|
justify-content: center;
|
background: url('https://cmsstaticv2.ffquan.cn/img/quanright.ca29e942.png') no-repeat;
|
background-size: 100% 100%;
|
height: 140rpx;
|
width: 248rpx;
|
border-radius: 0 22rpx 22rpx 0;
|
align-items: center;
|
/* color: red; */
|
}
|
|
.couponget {
|
text-align: center;
|
color: red;
|
font-weight: 600;
|
}
|
|
.shopinfo {
|
display: flex;
|
height: 160rpx;
|
padding: 12rpx;
|
align-items: center;
|
justify-content: space-around;
|
}
|
|
.describe {
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
height: 120rpx;
|
width: 460rpx;
|
}
|
|
.describe_top {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.describe_info {
|
display: flex;
|
justify-content: space-between;
|
color: #b6bbbe;
|
font-size: 26rpx;
|
|
}
|
|
.btn {
|
background-color: rgb(255, 78, 81);
|
color: white;
|
padding: 4rpx 20rpx;
|
border-radius: 22rpx;
|
font-size: 22rpx;
|
}
|
|
.fixedBar_item1 {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.tuihuabox {
|
margin-top: 24rpx;
|
background-color: #f4f4f4;
|
padding: 12rpx 24rpx;
|
position: relative;
|
border-radius: 24rpx;
|
color: dimgray;
|
}
|
|
.goodDetail {
|
background-color: white;
|
padding: 12rpx;
|
margin: 12rpx 0;
|
border-radius: 24rpx;
|
}
|
|
.goodDetailTop {
|
display: flex;
|
margin-bottom: 12px;
|
/* justify-content: start; */
|
}
|
|
.tiao {
|
background-image: linear-gradient(180deg, #ff3643, #ffcccf);
|
width: 4px;
|
height: 20px;
|
border-radius: 1px;
|
margin-right: 6px;
|
}
|
|
.goodDetailTop_title {
|
line-height: 20px;
|
font-weight: bold;
|
}
|
|
.fixedImgNum {
|
position: absolute;
|
bottom: 20px;
|
right: 12px;
|
color: white;
|
background-color: #949292;
|
padding: 2px 8px;
|
font-size: 12px;
|
border-radius: 12px;
|
}
|
</style>
|
