商品详情接口对接
This commit is contained in:
donqi
parent
6bb5de68be
commit
f816e8a9fc
|
|
@ -336,5 +336,13 @@ export default {
|
|||
data: params
|
||||
})
|
||||
return res[1].data;
|
||||
},
|
||||
async getGoodsDetail(params) {
|
||||
let res = await uni.request({
|
||||
url: '/goods/goods/getDetail',
|
||||
method: 'POST',
|
||||
data: params
|
||||
})
|
||||
return res[1].data.data;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</view>
|
||||
<view class="flex justify-between align-center">
|
||||
<view class="flex justify-start align-center">
|
||||
<text class="text-price text-red text-bold text-xl">{{product.discountsPrice}}</text>
|
||||
<text class="text-price text-red text-bold text-xl">{{product.discountPrice}}</text>
|
||||
<text class="text-del" v-if="product.goodsPrice">¥{{product.goodsPrice}}</text>
|
||||
</view>
|
||||
<view class="padding-xs">
|
||||
|
|
|
|||
|
|
@ -164,16 +164,10 @@
|
|||
this.offBindEvent();
|
||||
},
|
||||
methods: {
|
||||
async loadData(params) {
|
||||
async loadData(params) {
|
||||
console.log(params)
|
||||
// this.pickedProductList = await this.$api.data('pickedProductList');
|
||||
this.pickedProductList = params.pickedProductList;
|
||||
// TODO: 遍历查询每个product的总价并赋值，此处先赋定值
|
||||
for (let i = 0; i < this.pickedProductList.length; i++) {
|
||||
for (let j = 0; j < this.pickedProductList[i].product.length; j++) {
|
||||
this.pickedProductList[i].product[j].discountsPrice = 100;
|
||||
this.pickedProductList[i].product[j].goodsPrice = 200;
|
||||
}
|
||||
}
|
||||
this.pickedProductList = params.pickedProductList;
|
||||
this.formInfo.defaultAddress = await this.$api.data('defaultAddress');
|
||||
},
|
||||
bindEvent() {
|
||||
|
|
@ -208,7 +202,7 @@
|
|||
shopInfo.product.forEach((productInfo) => {
|
||||
productInfo.pickedList.forEach((pickedSpecs) => {
|
||||
goodsList.push({
|
||||
goodsId: pickedSpecs.id,
|
||||
goodsStandardId: pickedSpecs.id,
|
||||
num: pickedSpecs.pickedNum,
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@
|
|||
},
|
||||
showDetails(productItem) {
|
||||
let params = {
|
||||
id: productItem.goodsId
|
||||
goodsId: productItem.goodsId
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
|
||||
|
|
|
|||
|
|
@ -16,20 +16,22 @@
|
|||
</view>
|
||||
</uni-transition>
|
||||
<!-- 轮播图，视频 -->
|
||||
<swiper class="screen-swiper" @change="changeSwiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="item.id" @click="clickSwiper($event, item)">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
<video v-if="item.type=='video'" id="productVideo" :src="item.url" :controls="true" :autoplay="false"
|
||||
:show-center-play-btn="true" :show-fullscreen-btn="false"></video>
|
||||
<swiper class="screen-swiper" @change="changeSwiper">
|
||||
<swiper-item v-if="productDetail.goodsVideoUrl">
|
||||
<video id="productVideo" :src="productDetail.goodsVideoUrl" :controls="true" :autoplay="false"
|
||||
:show-center-play-btn="true" :show-fullscreen-btn="false" @click="clickSwiper($event, item, 0)"></video>
|
||||
</swiper-item>
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="item.goodsImgsId" @click="clickSwiper($event, item, 1)">
|
||||
<image :src="item.imgUrl" mode="aspectFill"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 价格及活动栏 -->
|
||||
<view class="bg-gradual-color padding-sm margin-bottom-xs shadow-blur">
|
||||
<view class="flex justify-between align-center">
|
||||
<view>
|
||||
<text class="text-sl text-price">{{curProductSpecs.salePrice}}</text>
|
||||
<text class="text-sl text-price">{{curProductSpecs.discountPrice}}</text>
|
||||
<text class="text-del">
|
||||
<text class="text-xxl">¥{{curProductSpecs.price}}</text>
|
||||
<text class="text-xxl">¥{{curProductSpecs.goodsPrice}}</text>
|
||||
</text>
|
||||
</view>
|
||||
<view>
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
</view>
|
||||
<view id="pageAnchor0" class="flex justify-between align-end">
|
||||
<view class="text-df">
|
||||
佣金：<text class="text-price margin-right-sm">{{curProductSpecs.commission}}</text>
|
||||
佣金：<text class="text-price margin-right-sm">{{curProductSpecs.groupPrice}}</text>
|
||||
<!-- <text class="cuIcon-share"></text> -->
|
||||
</view>
|
||||
<!-- <view class="text-df">
|
||||
|
|
@ -59,7 +61,7 @@
|
|||
<view class='cu-tag round bg-orange light' v-if="productInfo.isGoldServ">
|
||||
<text class="cuIcon-medal">金牌服务</text>
|
||||
</view>
|
||||
{{productInfo.goodsName}}
|
||||
{{productDetail.goodsName}}
|
||||
</view>
|
||||
<view class="text-sm text-gray margin-top-xs">{{productInfo.comments}}</view>
|
||||
</view>
|
||||
|
|
@ -72,25 +74,51 @@
|
|||
</view>
|
||||
<!-- 服务保障和规格 -->
|
||||
<view class="margin-lr-sm padding margin-top-sm bg-white">
|
||||
<view v-for="(item, index) in guaranteeList" :key="item.id">
|
||||
<view>
|
||||
<view class="cu-capsule margin-tb-xs">
|
||||
<view class='cu-tag bg-main-color'>
|
||||
<text :class="'cuIcon-' + item.icon"></text>
|
||||
<text class="cuIcon-repairfill"></text>
|
||||
</view>
|
||||
<view class="cu-tag line-main-color">
|
||||
{{item.name}}
|
||||
服务保障
|
||||
</view>
|
||||
</view>
|
||||
<text class="margin-lr-xs text-sm">{{item.desc}}</text>
|
||||
<text v-for="(item,index) in productDetail.guaranteeList">
|
||||
<text class="margin-lr-xs text-sm">{{item.areaName}}<text v-if="index != productDetail.servAreaList.length - 1">,</text></text>
|
||||
</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="cu-capsule margin-tb-xs">
|
||||
<view class='cu-tag bg-main-color'>
|
||||
<text class="cuIcon-deliver_fill"></text>
|
||||
</view>
|
||||
<view class="cu-tag line-main-color">
|
||||
服务区域
|
||||
</view>
|
||||
</view>
|
||||
<text v-for="(item,index) in productDetail.goodsAreaList">
|
||||
<text class="margin-lr-xs text-sm">{{item.areaName}}<text v-if="index != productDetail.goodsAreaList.length - 1">,</text></text>
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="productDetail.remark">
|
||||
<view class="cu-capsule margin-tb-xs">
|
||||
<view class='cu-tag bg-main-color'>
|
||||
<text class="cuIcon-commentfill"></text>
|
||||
</view>
|
||||
<view class="cu-tag line-main-color">
|
||||
备注
|
||||
</view>
|
||||
</view>
|
||||
<text class="margin-lr-xs text-sm">{{productDetail.remark}}</text>
|
||||
</view>
|
||||
<view class="solid-top text-lg padding-tb-sm">
|
||||
<text class="text-black">选择品类</text>
|
||||
</view>
|
||||
<view class="flex flex-wrap" :class="isShowAllSpecs ? '' : 'certern-height'">
|
||||
<view class="margin-tb-xs margin-right-xs" v-for="(item,index) in specsList" :key="item.id">
|
||||
<view class="margin-tb-xs margin-right-xs" v-for="(item,index) in productDetail.goodsStandardList" :key="item.goodsStandardId">
|
||||
<view class='cu-tag round padding'
|
||||
:class="curProductSpecs.id === item.id ? 'line-main-color' : 'line-default'"
|
||||
@click="chooseSpecs(item)">{{item.name}}</view>
|
||||
:class="curProductSpecs.goodsStandardId === item.goodsStandardId ? 'line-main-color' : 'line-default'"
|
||||
@click="chooseSpecs(item)">{{item.goodsStandardName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-bold text-gray text-lg text-center bg-white padding-top-sm" @click="showAllSpecs()"><text
|
||||
|
|
@ -119,8 +147,7 @@
|
|||
</view>
|
||||
<!-- 服务详情 -->
|
||||
<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image">
|
||||
<!-- <image :src="productDetailImgUrl" mode="widthFix"></image> -->
|
||||
详情图片......
|
||||
<image v-for="(item,index) in detailPicList" :src="item.imgUrl" mode="widthFix" style="width: 100%;"></image>
|
||||
</view>
|
||||
<!-- 底部操作条 -->
|
||||
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
||||
|
|
@ -146,7 +173,7 @@
|
|||
<uni-popup ref="productPickPopup" type="bottom" @change="changePopupState">
|
||||
<view class="text-bold text-gray text-lg text-center left-top-sm-bar" @click="toggleProductPickModal"><text
|
||||
class="cuIcon-close"></text></view>
|
||||
<product-pick :shopInfo="shopInfo" :productInfo="productInfo" :specsList="specsList" :orderNow="orderNow"></product-pick>
|
||||
<product-pick :shopInfo="shopInfo" :productInfo="productDetail" :specsList="productDetail.goodsStandardList" :orderNow="orderNow"></product-pick>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -161,15 +188,15 @@
|
|||
productPick
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
return {
|
||||
productDetail: {},
|
||||
detailPicList: [],
|
||||
swiperList: [],
|
||||
curProductSpecs: {},
|
||||
productInfo: {},
|
||||
guaranteeList: [],
|
||||
specsList: [],
|
||||
isShowAllSpecs: false,
|
||||
reviewers: [],
|
||||
productDetailImgUrl: '',
|
||||
productVideoPlaying: false,
|
||||
showTopNav: false,
|
||||
curTopNav: 0,
|
||||
|
|
@ -178,7 +205,7 @@
|
|||
orderNow: false,
|
||||
totalPickCount: 0,
|
||||
ifHasCsMsg: true,
|
||||
swiperPicUrls: []
|
||||
picUrls: []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
|
@ -197,20 +224,28 @@
|
|||
},
|
||||
methods: {
|
||||
async loadData(params) {
|
||||
let productDetail = await this.$api.data('productDetail');
|
||||
this.swiperList = productDetail.swiperList;
|
||||
this.productInfo = productDetail.productInfo;
|
||||
this.guaranteeList = productDetail.guaranteeList;
|
||||
this.specsList = productDetail.specsList;
|
||||
this.curProductSpecs = this.specsList[0];
|
||||
this.reviewers = productDetail.reviewers;
|
||||
this.productDetailImgUrl = productDetail.productDetailImgUrl;
|
||||
this.shopInfo = productDetail.shopInfo;
|
||||
for (let i = 0; i < this.swiperList.length; i++) {
|
||||
if (this.swiperList[i].type === 'image') {
|
||||
this.swiperPicUrls.push(this.swiperList[i].url);
|
||||
}
|
||||
}
|
||||
let productDetailMock = await this.$api.data('productDetail');
|
||||
this.productDetail = await this.$request.getGoodsDetail({
|
||||
goodsId: params.goodsId
|
||||
});
|
||||
// 默认规格
|
||||
this.curProductSpecs = this.productDetail.goodsStandardList[0];
|
||||
// 轮播图
|
||||
this.swiperList = this.productDetail.goodsImgsMap["0"];
|
||||
// 详情图
|
||||
this.detailPicList = this.productDetail.goodsImgsMap["1"];
|
||||
// 用于点击放大查看图片
|
||||
this.swiperList.forEach((picItem) => {
|
||||
this.picUrls.push(picItem.imgUrl);
|
||||
})
|
||||
this.detailPicList.forEach((picItem) => {
|
||||
this.picUrls.push(picItem.imgUrl);
|
||||
})
|
||||
|
||||
this.guaranteeList = productDetailMock.guaranteeList;
|
||||
this.productInfo = productDetailMock.productInfo;
|
||||
this.reviewers = productDetailMock.reviewers;
|
||||
this.shopInfo = productDetailMock.shopInfo;
|
||||
},
|
||||
bindEvent() {
|
||||
uni.$on('product-detail_add2Cart', this.add2Cart);
|
||||
|
|
@ -224,16 +259,16 @@
|
|||
showAllSpecs() {
|
||||
this.isShowAllSpecs = !this.isShowAllSpecs;
|
||||
},
|
||||
clickSwiper(e, item) {
|
||||
if (item.type === 'image') {
|
||||
clickSwiper(e, item, type) {
|
||||
if (type === 1) {
|
||||
this.viewImage(item.url);
|
||||
} else if (item.type === 'video') {
|
||||
} else if (type === 0) {
|
||||
this.pauseVideo(e);
|
||||
}
|
||||
},
|
||||
viewImage(url) {
|
||||
uni.previewImage({
|
||||
urls: this.swiperPicUrls,
|
||||
urls: this.picUrls,
|
||||
current: url
|
||||
});
|
||||
},
|
||||
|
|
@ -292,7 +327,7 @@
|
|||
|
||||
<style scoped>
|
||||
.certern-height {
|
||||
height: 300rpx;
|
||||
max-height: 300rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
<view class="padding-lr bg-white main-container">
|
||||
<view class="cu-list menu-avatar margin-bottom-sm">
|
||||
<view class="cu-item padding-bottom-sm">
|
||||
<view class="cu-avatar xl" :style="'background-image:url(' + curSpec.picUrl + ');'">
|
||||
<view class="cu-avatar xl" :style="'background-image:url(' + productInfo.goodsImgUrl + ');'">
|
||||
</view>
|
||||
<view class="content margin-left">
|
||||
<text class="text-price text-red text-xxl">{{curSpec.salePrice}}</text>
|
||||
<text class="text-price text-red text-xxl">{{curSpec.discountPrice}}</text>
|
||||
<text class="text-gray text-sm flex justify-between">
|
||||
{{curSpec.comments}}
|
||||
{{curSpec.remark}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -19,10 +19,11 @@
|
|||
</view>
|
||||
<scroll-view class="certern-height-with-scroll" :scroll-y="true" :scroll-with-animation="true">
|
||||
<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
|
||||
:key="item.id">
|
||||
<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'"
|
||||
@click="chooseSpecs(item)">{{item.name}}</view>
|
||||
<uni-number-box :min="0" :max="item.maxPieces" :value="0" @change="changePiecesNum($event, index)">
|
||||
:key="item.goodsStandardId">
|
||||
<view class='cu-tag padding'
|
||||
:class="curSpec.goodsStandardId === item.goodsStandardId ? 'line-main-color' : 'line-default'"
|
||||
@click="chooseSpecs(item)">{{item.goodsStandardName}}</view>
|
||||
<uni-number-box :min="0" :max="item.goodsNum" :value="0" @change="changePiecesNum($event, index)">
|
||||
</uni-number-box>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
|
@ -46,10 +47,10 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "product-pick",
|
||||
props: {
|
||||
shopInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
props: {
|
||||
shopInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
productInfo: {
|
||||
type: Object,
|
||||
|
|
@ -72,17 +73,19 @@
|
|||
pickList: [],
|
||||
totalPickCount: 0
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.loadData();
|
||||
},
|
||||
watch: {
|
||||
specsList(newV, oldV) {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
this.curSpec = this.specsList[0];
|
||||
this.specsList.forEach(function(item) {
|
||||
this.pickList.push({
|
||||
price: item.price,
|
||||
salePrice: item.salePrice,
|
||||
price: item.goodsPrice,
|
||||
salePrice: item.discountPrice,
|
||||
pickCount: 0
|
||||
})
|
||||
}.bind(this));
|
||||
|
|
@ -95,38 +98,40 @@
|
|||
},
|
||||
chooseSpecs(item) {
|
||||
this.curSpec = item;
|
||||
},
|
||||
getPickedSpecsList() {
|
||||
let pickedList = [];
|
||||
for (let i = 0; i < this.pickList.length; i++) {
|
||||
if (this.pickList[i].pickCount > 0) {
|
||||
pickedList.push({
|
||||
id: this.specsList[i].id,
|
||||
name: this.specsList[i].name,
|
||||
pickedNum: this.pickList[i].pickCount,
|
||||
maxPieces: this.specsList[i].maxPieces,
|
||||
})
|
||||
}
|
||||
}
|
||||
return pickedList;
|
||||
},
|
||||
getPickedSpecsList() {
|
||||
let pickedList = [];
|
||||
for (let i = 0; i < this.pickList.length; i++) {
|
||||
if (this.pickList[i].pickCount > 0) {
|
||||
pickedList.push({
|
||||
id: this.specsList[i].goodsStandardId,
|
||||
name: this.specsList[i].goodsStandardName,
|
||||
pickedNum: this.pickList[i].pickCount,
|
||||
maxPieces: this.specsList[i].goodsNum,
|
||||
})
|
||||
}
|
||||
}
|
||||
return pickedList;
|
||||
},
|
||||
submit() {
|
||||
if (this.orderNow) {
|
||||
// 从立即订购按钮进来的直接跳转到订单详情确认页
|
||||
let pickedList = this.getPickedSpecsList();
|
||||
if (pickedList.length === 0) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请选择型号'
|
||||
})
|
||||
return;
|
||||
// 从立即订购按钮进来的直接跳转到订单详情确认页
|
||||
let pickedList = this.getPickedSpecsList();
|
||||
if (pickedList.length === 0) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请选择型号'
|
||||
})
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
pickedProductList: [{
|
||||
...this.shopInfo,
|
||||
product: [{
|
||||
pickedProductList: [{
|
||||
...this.shopInfo,
|
||||
product: [{
|
||||
...this.productInfo,
|
||||
pickedList: pickedList
|
||||
discountPrice: this.specsList[0].discountPrice,
|
||||
goodsPrice: this.specsList[0].goodsPrice,
|
||||
pickedList: pickedList
|
||||
}]
|
||||
}]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue