<template>
<view class="content">
<view class="carousel">
<swiper indicator-dots :circular="true" duration="400">
<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
<view class="image-wrapper">
<image :src="item" class="loaded" mode="scaleToFill"></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="introduce-section">
<view class="price-box">
<text class="price-tip">¥</text>
<text class="price">{{ goodInfo.price_after}}</text>
<!-- <text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text> -->
</view>
<text class="title">{{ goodInfo.goods_name }}</text>
</view>
<view class="c-list">
<view class="c-row b-b">
<text class="tit">店铺</text>
<view class="con">
<text class="selected-text">{{ goodInfo.shopname }}</text>
</view>
</view>
</view>
<view class="detail-desc">
<view class="d-header"><text>商品详情</text></view>
<image :src="item" mode="widthFix" v-for="item in content" style="width: 100%;"></image>
</view>
<view class="" style="height: 98rpx;">
</view>
<view class="page-bottom">
<view class="action-btn-group">
<view class="buy-now">
<button type="primary" class=" action-btn no-border add-cart-btn" @click="getDDUrl">立即购买</button>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getGoodDetail,
getUrl
} from '@/api/three.js'
export default {
data() {
return {
id: 0,
goods_sign: '',
imgList: [],
goodInfo: {},
content: []
}
},
onLoad(opt) {
this.id = opt.id
this.goods_sign = opt.goods_sign
this.getGoodDetail()
},
onShow() {
},
onReachBottom() {
},
onReady() {
},
methods: {
goGS_app(url) {
// plus.runtime.openURL('its://') 此方法（浏览器）不管安卓还是ios都可以直接唤起APP， 'its://' 表示要唤起APP所支持的schemeURL协议
// plus.runtime.launchApplication( appInf, errorCB ); appInf：需要唤起的三方， errorCB：启动第三方程序操作失败的回调函数
// 判断平台
plus.runtime.openURL(url);
},
getDDUrl() {
getUrl({
goods_sign: this.goods_sign
}).then(res => {
this.goGS_app(res.data.data.alldata.schema_url)
})
},
getGoodDetail() {
let that = this
getGoodDetail({
goods_sign: that.goods_sign
}).then(res => {
let data = res.data.data
if (data) {
that.goodInfo = data
that.imgList = data.picurls
for (let i = 0; i < that.imgList.length; i++) {
that.content.unshift(that.imgList[i]);
}
} else {
that.$api.msg('当前商品已下架')
uni.navigateBack()
}
})
}
}
}
</script>
<style lang="scss" scoped>
.carousel {
/* #ifdef APP-PLUS */
padding-top: var(--status-bar-height);
/* #endif */
height: 722rpx;
position: relative;
swiper {
height: 100%;
}
.image-wrapper {
width: 100%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
// height: 750rpx;
height: 710rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
/* 标题简介 */
.introduce-section {
background: #fff;
padding: 20rpx 30rpx;
.title {
font-size: 32rpx;
color: $font-color-dark;
height: 50rpx;
line-height: 50rpx;
}
.price-box {
display: flex;
align-items: baseline;
height: 64rpx;
padding: 10rpx 0;
font-size: 26rpx;
color: #FD3B39;
}
.price {
font-size: $font-lg + 2rpx;
}
.m-price {
margin: 0 12rpx;
color: $font-color-light;
text-decoration: line-through;
}
.pt {
text-decoration: none;
}
.coupon-tip {
align-items: center;
padding: 4rpx 10rpx;
background: $uni-color-primary;
font-size: $font-sm;
color: #fff;
border-radius: 6rpx;
line-height: 1;
transform: translateY(-4rpx);
}
.bot-row {
display: flex;
align-items: center;
height: 50rpx;
font-size: $font-sm;
color: $font-color-light;
text {
flex: 1;
}
}
}
/* 详情 */
.detail-desc {
background: #fff;
margin-top: 16rpx;
/deep/ img {
max-width: 100% !important;
display: inline !important;
}
/deep/ div {
max-width: 100% !important;
}
.d-header {
display: flex;
justify-content: center;
align-items: center;
height: 80rpx;
font-size: $font-base + 2rpx;
color: $font-color-dark;
position: relative;
text {
padding: 0 20rpx;
background: #fff;
position: relative;
z-index: 1;
}
&:after {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
width: 300rpx;
height: 0;
content: '';
border-bottom: 1px solid #ccc;
}
}
}
.c-list {
margin-top: 20rpx;
font-size: $font-sm + 2rpx;
color: $font-color-base;
background: #fff;
.c-row {
display: flex;
align-items: center;
padding: 20rpx 30rpx;
position: relative;
}
.tit {
width: 140rpx;
}
.con {
flex: 1;
color: $font-color-dark;
.selected-text {
margin-right: 10rpx;
.num {
color: #FD3B39;
}
}
}
}
/* 底部操作菜单 */
.page-bottom {
position: fixed;
left: 0rpx;
bottom: 0rpx;
z-index: 95;
display: flex;
justify-content: center;
align-items: center;
width: 750rpx;
height: 98rpx;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
// border-radius: 16rpx;
.p-b-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: $font-sm;
color: $font-color-base;
width: 100rpx;
height: 98rpx;
.iconfont {
font-size: 40rpx;
line-height: 48rpx;
color: $font-color-light;
}
&.active,
&.active .iconfont {
color: $uni-color-primary;
}
.icon-fenxiang2 {
font-size: 42rpx;
transform: translateY(-2rpx);
}
.iconlikefill {
font-size: 46rpx;
}
}
.action-btn-group {
display: flex;
height: 98rpx;
overflow: hidden;
position: relative;
.shoucang {
width: 100rpx;
height: 100rpx;
background: #FFFFFF;
flex-direction: column;
justify-content: center;
font-size: 20rpx;
image {
width: 36rpx;
height: 35rpx;
margin-bottom: 10rpx;
}
}
.buy-now {
flex-grow: 1;
// width: 650rpx;
width: 750rpx;
display: flex;
}
.action-btn {
flex-shrink: 0;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
// width: 580rpx;
flex-grow: 1;
height: 100%;
font-size: 34rpx;
padding: 0;
border-radius: 0;
// background: transparent;
background: #ffb238;
&.buy-now-btn {
background-color: #ffb238;
}
&.add-cart-btn {
background: #FD3B39;
}
}
}
}
</style>