<template>
<view class="container">
<swiper class="swiper" :style="{width: swiperHeight+'px', height: swiperHeight+'px'}" :indicator-dots="true" indicator-color="#9A9A9A" indicator-active-color="#52A63A" :autoplay="true"
:interval="3000" :duration="500">
<swiper-item v-for="(item,index) in goodData.imgs" :key="index">
<image :src="item.imgPath" mode="aspectFill" style="width: 100%;height: 100%;"></image>
</swiper-item>
</swiper>
<view class="good-info">
<view class="auction-date" v-if="goodData.productType == 2">
<text class="iconfont iconshijian"></text>
{{goodData.auctionEndTime}}结束
</view>
<view class="good-price">
<view class="auction-unit" v-if="goodData.productType == 2 || goodData.productType == 4">
<view class="unit-type">RMB</view>
<view class="unit-text">当前价</view>
</view>
<text class="sale-icon">￥</text>
<text class="sale-price">{{ goodData.productType == 2 ? currentPrice : goodData.bizPrice }}</text>
<text class="price" v-if="goodData.productType != 2">原价:{{goodData.originalPrice}}</text>
<text class="seller-count" v-if="goodData.productType != 2 && goodData.productType != 4">{{goodData.sellCount}}人付款</text>
<text class="good-stock" v-if="goodData.productType == 2">仅限{{goodData.stock}}份</text>
</view>
<view class="good-name">{{goodData.productName}}</view>
<view class="good-plant" v-if="goodData.productType == 4">时长：{{goodData.term}}天 面积：{{goodData.areaSize}}平米</view>
<view class="good-detail">{{goodData.productDescribe ? goodData.productDescribe : '暂无描述'}}</view>
</view>
<view class="good-data" v-if="goodData.productType != 2 && goodData.productType != 4">
<text class="good-select">商品规格</text>
<text class="good-unit">{{number}} {{goodData.unit ? goodData.unit : ''}}</text>
<!-- <text class="iconfont iconfangxiang"></text>
-->
</view>
<view class="tab-box">
<view class="tab-col" :class="tabIndex == 1 ? 'tab-col-active' :''" @click="tabIndex = 1">产品介绍</view>
<view class="tab-col" :class="tabIndex == 2 ? 'tab-col-active' :''" v-if="goodData.productType != 2 && goodData.productType != 4 "
@click="tabIndex = 2">用户评价</view>
</view>
<rich-text :nodes="goodData.sellDesc" v-if="tabIndex == 1"></rich-text>
<view class="good-assess" v-else>
<view class="assess-row" v-for="(item,index) in assessList" :key="index">
<image class="assess-head" :src="item.headimg"></image>
<view class="assess-info">
<view class="assess-name">{{item.nickname}}</view>
<view class="assess-date">{{item.evaluateTime}}</view>
<view class="assess-sore-box">
<u-rate v-model="item.score" active-color="#FFAE21" disabled></u-rate>
</view>
<view class="assess-text">{{item.evaluateContent}}</view>
<view class="assess-img-box">
<image class="img-col" v-for="site in item.evaluateImgs" :key="site" :src="site.imgUrl"></image>
</view>
</view>
</view>
<view class="assess-more" @click="goToEvaluate()">显示全部</view>
</view>
<view class="good-recommend">
<view class="recommend-title">为您推荐</view>
<scroll-view class="recommend-box" scroll-x="true">
<view class="good-col" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
<image class="good-img" :src="item.imgPath" mode="aspectFill"></image>
<view class="good-name">{{item.productName}}</view>
<view class="good-price">￥{{item.bizPrice}}</view>
</view>
</scroll-view>
</view>
<uni-goods-nav :fill="true" :options="goodData.productType == 4 ? [] : options" @click="goToShop" @buttonClick="showPopup"
style="width: 100%; position: fixed; bottom: 0px;" :buttonGroup="goodData.productType == 2 ? buttonGroup2 : (goodData.productType == 4 ? (minePlant ? buttonGroup4 : buttonGroup3) : buttonGroup1)" />
<uni-popup ref="popup" type="bottom">
<view class="popup-box">
<view class="popup-good-info-box">
<image class="popup-good-img" v-if="goodData.imgs.length" :src="goodData.imgs[0].imgPath"></image>
<view class="popup-good-data">
<view class="popup-good-price"><text style="font-size: 14px;">￥</text>{{goodData.bizPrice}}</view>
<view class="popup-good-number">库存{{goodData.stock}}件</view>
<view class="popup-good-type">单位：{{goodData.unit}}</view>
</view>
<view class="popup-good-close"></view>
</view>
<view class="popup-good-info">数量</view>
<view class="popup-good-number-box">
<uni-icons type="minus-filled" size="20" color="#A67A54" @click="number>1?number--:''"></uni-icons>
<text class="good-select">{{number}}</text>
<uni-icons type="plus-filled" size="20" color="#A67A54" @click="number++"></uni-icons>
</view>
<uni-goods-nav :fill="true" :options="[]" :buttonGroup="buttonGroup1" @buttonClick="submitData" style="width: 100%; position: absolute; bottom: 0px;left:0px" />
</view>
</uni-popup>
<u-top-tips ref="uTips"></u-top-tips>
</view>
</template>
<script>
const NET = require('@/utils/request')
const API = require('@/config/api')
export default {
data() {
return {
// 从我的种植进入minePlant为true
swiperHeight: 375,
minePlant: false,
goodId: '',
goodData: {
bizPrice: '',
auctionStartPrice: '',
originalPrice: '',
productType: '',
sellCount: '',
productName: '',
productDescribe: '',
unit: '',
sellDesc: '',
stock: '',
auctionEndTime: '',
term: '',
areaSize: '',
imgs: [],
},
currentPrice: '',
assessList: [],
goodsList: [],
number: 1,
tabIndex: 1,
options: [{
icon: 'shop',
text: '店铺',
}],
buttonGroup1: [{
text: '加入购物车',
backgroundColor: '#75BD60',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: '#52A63A',
color: '#fff'
}
],
buttonGroup2: [{
text: '立即参拍',
backgroundColor: '#52A63A',
color: '#fff'
}],
buttonGroup3: [{
text: '立即购买',
backgroundColor: '#52A63A',
color: '#fff'
}],
buttonGroup4: [{
text: '视察',
backgroundColor: '#75BD60',
color: '#fff'
}, {
text: '委托',
backgroundColor: '#52A63A',
color: '#fff'
}],
}
},
onLoad(options) {
this.goodId = options.goodId ? options.goodId : ''
this.minePlant = options.minePlant ? options.minePlant : false
uni.getSystemInfo({
success: (res) => {
this.swiperHeight = res.windowWidth
}
})
},
onReady() {
this.getGoodsList()
if (this.goodId) {
NET.request(API.getCommonGoodDetail + '/' + this.goodId, {}, 'GET').then(res => {
this.goodData = res.data
if (this.goodData.productType == 2) {
this.getAuctionData()
}
}).catch(res => {
this.$refs.uTips.show({
title: '获取商品详情失败',
type: 'warning',
})
})
NET.request(API.getAssessList + this.goodId + '/1/3', {}, 'GET').then(res => {
this.assessList = res.data.list
}).catch(res => {
this.$refs.uTips.show({
title: '获取商品评价失败',
type: 'warning',
})
})
}
},
methods: {
// 获取拍卖详情
getAuctionData() {
NET.request(API.getAuctionDetail + this.goodId, {}, 'GET').then(res => {
this.currentPrice = res.data.currentPrice
}).catch(error => {
this.$refs.uTips.show({
title: error.data.msg,
type: 'warning',
})
})
},
// 跳转商铺页
goToShop() {
uni.navigateTo({
url: '/pagesGood/shopDetails?goodId=' + this.goodId
});
},
// 跳转评价页
goToEvaluate() {
uni.navigateTo({
url: '/pagesGood/evaluateList?goodId=' + this.goodId
});
},
// 获取为你推荐
getGoodsList() {
NET.request(API.getPreferGoods, {}, 'GET').then(res => {
this.goodsList = res.data
}).catch(error => {
this.$refs.uTips.show({
title: '获取为您推荐列表失败',
type: 'warning',
})
})
},
// 跳转为你推荐商品详情
goToGoodDetails(item) {
uni.navigateTo({
url: '/pagesGood/goodDetails?goodId=' + item.productId + '&goodType=' + item.productType
});
},
// 弹出购物弹窗
showPopup(e) {
uni.removeStorageSync('defaultAddress');
this.setGoodStorage()
if (this.goodData.productType == 2) {
uni.navigateTo({
url: '/pagesGood/auctionDetail?goodId=' + this.goodId
});
} else if (this.goodData.productType == 4) {
if (this.minePlant) {
if (e.index == 0) {
uni.navigateTo({
url: '/pagesGood/plantVideo?productId=' + this.goodId
});
} else {
uni.navigateTo({
url: '/pagesMain/entrustList?productId=' + this.goodData.productId + '&tenantCode=' + this.goodData.tenantCode +
'&productName=' + this.goodData.productName + '&areaSize=' + this.goodData.areaSize
});
}
} else {
uni.navigateTo({
url: '/pagesGood/orderPay?flag=2&orderType=3&paySum=' + this.goodData.bizPrice
});
}
} else {
this.$refs.popup.open()
}
},
// 存入商品信息缓存
setGoodStorage() {
uni.setStorage({
key: 'orderData',
data: {
tenantCode: this.goodData.tenantCode,
supplierName: this.goodData.supplierName,
areaSize: this.goodData.productType == 4 ? this.goodData.areaSize : '',
term: this.goodData.productType == 4 ? this.goodData.term : '',
goodsList: [{
bizPrice: this.goodData.bizPrice,
buyNum: this.number,
imgUrl: this.goodData.imgs.length ? this.goodData.imgs[0].imgPath : '',
originalPrice: this.goodData.productType == 2 ? this.goodData.auctionStartPrice : this.goodData.originalPrice,
productId: this.goodId,
productName: this.goodData.productName,
productType: this.goodData.productType,
shoppingcartId: '',
}]
}
});
},
// 提交操作
submitData(e) {
if (e.index) {
// 立即购买
this.setGoodStorage()
uni.navigateTo({
url: '/pagesGood/orderPay?flag=2&orderType=1'
});
} else {
// 加入购物车
NET.request(API.addCart, {
productId: this.goodId,
productName: this.goodData.productName,
imgUrl: this.goodData.imgs.length ? this.goodData.imgs[0].imgPath : '',
bizPrice: this.goodData.bizPrice,
originalPrice: this.goodData.originalPrice,
productType: this.goodData.productType,
tenantCode: this.goodData.tenantCode,
buyNum: this.number
}, 'POST').then(res => {
this.$refs.uTips.show({
title: '加入购物车成功',
type: 'success',
})
this.$refs.popup.close()
}).catch(error => {
this.$refs.uTips.show({
title: '加入购物车失败',
type: 'warning',
})
})
}
},
},
}
</script>
<style lang="less">
.swiper {
/deep/.uni-swiper-dot-active {
width: 16px !important;
border-radius: 8px;
}
}
</style>
<style lang="less" scoped>
.container {
background-color: #f7f7f7;
padding-bottom: 50px;
.swiper {
// height: 375px;
/deep/.uni-swiper-dot-active {
width: 16px !important;
border-radius: 8px;
}
}
.good-info {
box-sizing: border-box;
padding: 0px 16px 22px 16px;
background-color: #FFFFFF;
.auction-date {
width: calc(100% + 32px);
height: 32px;
box-sizing: border-box;
padding: 0 16px;
margin-left: -16px;
background: #999999;
line-height: 32px;
font-size: 12px;
font-family: PingFang SC;
color: #FFFFFF;
.iconshijian {
font-size: 16px;
margin-right: 8px;
}
}
.good-price {
height: 26px;
padding-top: 22px;
box-sizing: content-box;
line-height: 26px;
font-family: PingFang SC;
white-space: nowrap;
.auction-unit {
width: 40px;
height: 26px;
float: left;
.unit-type {
height: 12px;
font-size: 9px;
font-family: PingFang SC;
color: #666666;
line-height: 9px;
}
.unit-text {
height: 12px;
font-size: 9px;
font-family: PingFang SC;
color: #52A63A;
line-height: 12px;
}
}
.sale-icon {
font-size: 16px;
color: #52A63A;
margin-left: -2px;
}
.sale-price {
font-size: 24px;
color: #52A63A;
}
.price {
font-size: 12px;
text-decoration: line-through;
color: #A67A54;
margin-left: 6px;
}
.seller-count {
float: right;
font-size: 12px;
color: #666666;
}
.good-stock {
float: right;
font-size: 12px;
color: #A67954;
}
}
.good-name {
line-height: 20px;
font-size: 16px;
color: #343434;
font-family: PingFang SC;
margin: 12px 0 8px 0;
}
.good-plant {
line-height: 14px;
font-size: 12px;
color: #000000;
font-family: PingFang SC;
margin-bottom: 4px;
}
.good-detail {
line-height: 16px;
font-size: 12px;
color: #666666;
font-family: PingFang SC;
}
}
.good-data {
height: 46px;
margin-top: 10px;
box-sizing: border-box;
background-color: #FFFFFF;
padding: 14px 16px;
font-family: PingFang SC;
font-size: 12px;
line-height: 14px;
.good-select {
color: #666666;
margin-right: 12px;
}
.good-unit {
color: #343434;
}
.iconfont {
float: right;
font-size: 16px;
color: #999999;
}
}
.tab-box {
height: 50px;
background-color: #FFFFFF;
box-sizing: border-box;
padding: 0 16px;
display: flex;
justify-content: space-around;
margin-top: 10px;
.tab-col {
height: 49px;
font-size: 13px;
font-family: PingFang SC;
color: #666666;
line-height: 50px;
}
.tab-col-active {
font-size: 15px;
color: #343434;
border-bottom: 2px solid #52A63A;
}
}
.good-assess {
width: 100%;
box-sizing: border-box;
background-color: #FFFFFF;
padding: 12px 16px 18px 16px;
.assess-row {
border-top: 1px solid #F6F6F6;
padding: 12px 0;
display: flex;
.assess-head {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
.assess-info {
width: calc(100% - 62px);
margin-left: 12px;
.assess-name {
height: 18px;
float: left;
line-height: 18px;
font-size: 15px;
font-family: PingFang SC;
font-weight: bold;
color: #343434;
}
.assess-date {
height: 18px;
float: right;
line-height: 18px;
font-size: 12px;
font-family: PingFang SC;
font-weight: bold;
color: #666666;
}
.assess-sore-box {
width: 100%;
height: 16px;
float: left;
margin: 6px 0;
}
.assess-text {
width: 100%;
float: left;
font-size: 12px;
font-family: PingFang SC;
font-weight: bold;
color: #666666;
line-height: 16px;
margin: 8px 0 10px 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.assess-img-box {
width: 100%;
float: left;
display: flex;
.img-col {
height: 60px;
width: 60px;
object-fit: cover;
margin: 0 10px 10px 0;
}
}
}
}
.assess-row:first-child {
border-top: none;
padding-top: 0;
}
.assess-more {
width: 220px;
height: 32px;
position: relative;
left: 50%;
transform: translateX(-50%);
border: 1px solid #52A63A;
border-radius: 16px;
text-align: center;
font-size: 12px;
font-family: PingFang SC;
color: #53A63A;
line-height: 32px;
}
}
.good-recommend {
height: 192px;
background-color: #FFFFFF;
margin: 10px 0;
.recommend-title {
height: 24px;
padding-left: 16px;
font-size: 14px;
font-family: PingFang SC;
color: #343434;
line-height: 32px;
}
.recommend-box {
width: 100%;
height: 168px;
white-space: nowrap;
.good-col {
width: 108px;
height: 158px;
margin: 10px 12px 10px 0px;
border-radius: 5px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
display: inline-block;
.good-img {
width: 108px;
height: 108px;
object-fit: cover;
}
.good-name {
width: 100%;
height: 14px;
float: left;
box-sizing: border-box;
padding: 0 5px;
font-size: 10px;
font-family: PingFang SC;
color: #343434;
line-height: 14px;
margin: 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.good-price {
width: 100%;
height: 16px;
float: left;
box-sizing: border-box;
padding: 0 3px;
font-size: 14px;
font-family: PingFang SC;
color: #56a83a;
line-height: 16px;
margin-bottom: 10px
}
}
.good-col:first-child {
margin-left: 16px;
}
.good-col:last-child {
margin-right: 16px;
}
}
}
.popup-box {
width: 100vw;
height: 362px;
background-color: #FFFFFF;
border-radius: 15px 15px 0px 0px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
.popup-good-info-box {
height: 90px;
margin-bottom: 4px;
display: flex;
.popup-good-img {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 5px;
overflow: hidden;
}
.popup-good-data {
width: calc(100% - 136px);
height: 90px;
margin-left: 22px;
.popup-good-price {
margin-top: 10px;
height: 20px;
line-height: 20px;
font-size: 20px;
font-family: PingFang SC;
color: #52A63A;
}
.popup-good-number {
height: 16px;
font-size: 13px;
font-family: PingFang SC;
color: #9A9A9A;
line-height: 16px;
margin: 12px 0 10px 0;
}
.popup-good-type {
height: 16px;
font-size: 13px;
font-family: PingFang SC;
color: #343434;
line-height: 16px;
}
}
.popup-good-close {
width: 24px;
height: 24px;
}
}
.popup-good-info {
height: 33px;
box-sizing: border-box;
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid #ECECEC;
font-size: 14px;
font-family: PingFang SC;
color: #9A9A9A;
line-height: 16px;
}
.popup-good-unit {
height: 28px;
display: inline-block;
padding: 0 22px;
margin-top: 14px;
background: #52A63A;
border-radius: 14px;
font-size: 14px;
font-family: PingFang SC;
color: #FFFFFF;
line-height: 28px;
}
.popup-good-number-box {
height: 20px;
float: right;
margin-top: -20px;
.good-select {
font-size: 16px;
font-family: PingFang SC;
color: #343434;
margin: 0 12px;
line-height: 20px;
}
}
}
}
</style>