clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品详情接口对接

This commit is contained in:
donqi 2022-05-28 18:45:27 +08:00
parent 6bb5de68be
commit f816e8a9fc
6 changed files with 138 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
common/js/request.js
View File

@ -336,5 +336,13 @@ export default {
data: params data: params
}) })
return res[1].data; 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;
} }
} }

2
components/goods-card/horizontal-goods-card.vue
View File

@ -9,7 +9,7 @@
</view> </view>
<view class="flex justify-between align-center"> <view class="flex justify-between align-center">
<view class="flex justify-start 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> <text class="text-del" v-if="product.goodsPrice">¥{{product.goodsPrice}}</text>
</view> </view>
<view class="padding-xs"> <view class="padding-xs">

10
pages/order/order-detail.vue
View File

@ -165,15 +165,9 @@
}, },
methods: { methods: {
async loadData(params) { async loadData(params) {
console.log(params)
// this.pickedProductList = await this.$api.data('pickedProductList'); // this.pickedProductList = await this.$api.data('pickedProductList');
this.pickedProductList = params.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.formInfo.defaultAddress = await this.$api.data('defaultAddress'); this.formInfo.defaultAddress = await this.$api.data('defaultAddress');
}, },
bindEvent() { bindEvent() {
@ -208,7 +202,7 @@
shopInfo.product.forEach((productInfo) => { shopInfo.product.forEach((productInfo) => {
productInfo.pickedList.forEach((pickedSpecs) => { productInfo.pickedList.forEach((pickedSpecs) => {
goodsList.push({ goodsList.push({
goodsId: pickedSpecs.id, goodsStandardId: pickedSpecs.id,
num: pickedSpecs.pickedNum, num: pickedSpecs.pickedNum,
}) })
}) })

2
pages/product/filtered-products.vue
View File

@ -206,7 +206,7 @@
}, },
showDetails(productItem) { showDetails(productItem) {
let params = { let params = {
id: productItem.goodsId goodsId: productItem.goodsId
} }
uni.navigateTo({ uni.navigateTo({
url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params)) url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))

115
pages/product/product-detail.vue
View File

@ -17,19 +17,21 @@
</uni-transition> </uni-transition>
<!-- 轮播图，视频 --> <!-- 轮播图，视频 -->
<swiper class="screen-swiper" @change="changeSwiper"> <swiper class="screen-swiper" @change="changeSwiper">
<swiper-item v-for="(item,index) in swiperList" :key="item.id" @click="clickSwiper($event, item)"> <swiper-item v-if="productDetail.goodsVideoUrl">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image> <video id="productVideo" :src="productDetail.goodsVideoUrl" :controls="true" :autoplay="false"
<video v-if="item.type=='video'" id="productVideo" :src="item.url" :controls="true" :autoplay="false" :show-center-play-btn="true" :show-fullscreen-btn="false" @click="clickSwiper($event, item, 0)"></video>
:show-center-play-btn="true" :show-fullscreen-btn="false"></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-item>
</swiper> </swiper>
<!-- 价格及活动栏 --> <!-- 价格及活动栏 -->
<view class="bg-gradual-color padding-sm margin-bottom-xs shadow-blur"> <view class="bg-gradual-color padding-sm margin-bottom-xs shadow-blur">
<view class="flex justify-between align-center"> <view class="flex justify-between align-center">
<view> <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-del">
<text class="text-xxl">¥{{curProductSpecs.price}}</text> <text class="text-xxl">¥{{curProductSpecs.goodsPrice}}</text>
</text> </text>
</view> </view>
<view> <view>
@ -38,7 +40,7 @@
</view> </view>
<view id="pageAnchor0" class="flex justify-between align-end"> <view id="pageAnchor0" class="flex justify-between align-end">
<view class="text-df"> <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> --> <!-- <text class="cuIcon-share"></text> -->
</view> </view>
<!-- <view class="text-df"> <!-- <view class="text-df">
@ -59,7 +61,7 @@
<view class='cu-tag round bg-orange light' v-if="productInfo.isGoldServ"> <view class='cu-tag round bg-orange light' v-if="productInfo.isGoldServ">
<text class="cuIcon-medal">金牌服务</text> <text class="cuIcon-medal">金牌服务</text>
</view> </view>
{{productInfo.goodsName}} {{productDetail.goodsName}}
</view> </view>
<view class="text-sm text-gray margin-top-xs">{{productInfo.comments}}</view> <view class="text-sm text-gray margin-top-xs">{{productInfo.comments}}</view>
</view> </view>
@ -72,25 +74,51 @@
</view> </view>
<!-- 服务保障和规格 --> <!-- 服务保障和规格 -->
<view class="margin-lr-sm padding margin-top-sm bg-white"> <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-capsule margin-tb-xs">
<view class='cu-tag bg-main-color'> <view class='cu-tag bg-main-color'>
<text :class="'cuIcon-' + item.icon"></text> <text class="cuIcon-repairfill"></text>
</view> </view>
<view class="cu-tag line-main-color"> <view class="cu-tag line-main-color">
{{item.name}} 服务保障
</view> </view>
</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>
<view class="solid-top text-lg padding-tb-sm"> <view class="solid-top text-lg padding-tb-sm">
<text class="text-black">选择品类</text> <text class="text-black">选择品类</text>
</view> </view>
<view class="flex flex-wrap" :class="isShowAllSpecs ? '' : 'certern-height'"> <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' <view class='cu-tag round padding'
:class="curProductSpecs.id === item.id ? 'line-main-color' : 'line-default'" :class="curProductSpecs.goodsStandardId === item.goodsStandardId ? 'line-main-color' : 'line-default'"
@click="chooseSpecs(item)">{{item.name}}</view> @click="chooseSpecs(item)">{{item.goodsStandardName}}</view>
</view> </view>
</view> </view>
<view class="text-bold text-gray text-lg text-center bg-white padding-top-sm" @click="showAllSpecs()"><text <view class="text-bold text-gray text-lg text-center bg-white padding-top-sm" @click="showAllSpecs()"><text
@ -119,8 +147,7 @@
</view> </view>
<!-- 服务详情 --> <!-- 服务详情 -->
<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image"> <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>
<!-- 底部操作条 --> <!-- 底部操作条 -->
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar"> <view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
@ -146,7 +173,7 @@
<uni-popup ref="productPickPopup" type="bottom" @change="changePopupState"> <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 <view class="text-bold text-gray text-lg text-center left-top-sm-bar" @click="toggleProductPickModal"><text
class="cuIcon-close"></text></view> 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> </uni-popup>
</view> </view>
</template> </template>
@ -162,14 +189,14 @@
}, },
data() { data() {
return { return {
productDetail: {},
detailPicList: [],
swiperList: [], swiperList: [],
curProductSpecs: {}, curProductSpecs: {},
productInfo: {}, productInfo: {},
guaranteeList: [], guaranteeList: [],
specsList: [],
isShowAllSpecs: false, isShowAllSpecs: false,
reviewers: [], reviewers: [],
productDetailImgUrl: '',
productVideoPlaying: false, productVideoPlaying: false,
showTopNav: false, showTopNav: false,
curTopNav: 0, curTopNav: 0,
@ -178,7 +205,7 @@
orderNow: false, orderNow: false,
totalPickCount: 0, totalPickCount: 0,
ifHasCsMsg: true, ifHasCsMsg: true,
swiperPicUrls: [] picUrls: []
} }
}, },
onLoad(options) { onLoad(options) {
@ -197,20 +224,28 @@
}, },
methods: { methods: {
async loadData(params) { async loadData(params) {
let productDetail = await this.$api.data('productDetail'); let productDetailMock = await this.$api.data('productDetail');
this.swiperList = productDetail.swiperList; this.productDetail = await this.$request.getGoodsDetail({
this.productInfo = productDetail.productInfo; goodsId: params.goodsId
this.guaranteeList = productDetail.guaranteeList; });
this.specsList = productDetail.specsList; // 默认规格
this.curProductSpecs = this.specsList[0]; this.curProductSpecs = this.productDetail.goodsStandardList[0];
this.reviewers = productDetail.reviewers; // 轮播图
this.productDetailImgUrl = productDetail.productDetailImgUrl; this.swiperList = this.productDetail.goodsImgsMap["0"];
this.shopInfo = productDetail.shopInfo; // 详情图
for (let i = 0; i < this.swiperList.length; i++) { this.detailPicList = this.productDetail.goodsImgsMap["1"];
if (this.swiperList[i].type === 'image') { // 用于点击放大查看图片
this.swiperPicUrls.push(this.swiperList[i].url); 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() { bindEvent() {
uni.$on('product-detail_add2Cart', this.add2Cart); uni.$on('product-detail_add2Cart', this.add2Cart);
@ -224,16 +259,16 @@
showAllSpecs() { showAllSpecs() {
this.isShowAllSpecs = !this.isShowAllSpecs; this.isShowAllSpecs = !this.isShowAllSpecs;
}, },
clickSwiper(e, item) { clickSwiper(e, item, type) {
if (item.type === 'image') { if (type === 1) {
this.viewImage(item.url); this.viewImage(item.url);
} else if (item.type === 'video') { } else if (type === 0) {
this.pauseVideo(e); this.pauseVideo(e);
} }
}, },
viewImage(url) { viewImage(url) {
uni.previewImage({ uni.previewImage({
urls: this.swiperPicUrls, urls: this.picUrls,
current: url current: url
}); });
}, },
@ -292,7 +327,7 @@
<style scoped> <style scoped>
.certern-height { .certern-height {
height: 300rpx; max-height: 300rpx;
overflow: hidden; overflow: hidden;
} }

33
pages/product/product-pick.vue
View File

@ -3,12 +3,12 @@
<view class="padding-lr bg-white main-container"> <view class="padding-lr bg-white main-container">
<view class="cu-list menu-avatar margin-bottom-sm"> <view class="cu-list menu-avatar margin-bottom-sm">
<view class="cu-item padding-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>
<view class="content margin-left"> <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"> <text class="text-gray text-sm flex justify-between">
{{curSpec.comments}} {{curSpec.remark}}
</text> </text>
</view> </view>
</view> </view>
@ -19,10 +19,11 @@
</view> </view>
<scroll-view class="certern-height-with-scroll" :scroll-y="true" :scroll-with-animation="true"> <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" <view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
:key="item.id"> :key="item.goodsStandardId">
<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'" <view class='cu-tag padding'
@click="chooseSpecs(item)">{{item.name}}</view> :class="curSpec.goodsStandardId === item.goodsStandardId ? 'line-main-color' : 'line-default'"
<uni-number-box :min="0" :max="item.maxPieces" :value="0" @change="changePiecesNum($event, index)"> @click="chooseSpecs(item)">{{item.goodsStandardName}}</view>
<uni-number-box :min="0" :max="item.goodsNum" :value="0" @change="changePiecesNum($event, index)">
</uni-number-box> </uni-number-box>
</view> </view>
</scroll-view> </scroll-view>
@ -73,16 +74,18 @@
totalPickCount: 0 totalPickCount: 0
} }
}, },
onReady() { watch: {
this.loadData(); specsList(newV, oldV) {
this.loadData();
}
}, },
methods: { methods: {
loadData() { loadData() {
this.curSpec = this.specsList[0]; this.curSpec = this.specsList[0];
this.specsList.forEach(function(item) { this.specsList.forEach(function(item) {
this.pickList.push({ this.pickList.push({
price: item.price, price: item.goodsPrice,
salePrice: item.salePrice, salePrice: item.discountPrice,
pickCount: 0 pickCount: 0
}) })
}.bind(this)); }.bind(this));
@ -101,10 +104,10 @@
for (let i = 0; i < this.pickList.length; i++) { for (let i = 0; i < this.pickList.length; i++) {
if (this.pickList[i].pickCount > 0) { if (this.pickList[i].pickCount > 0) {
pickedList.push({ pickedList.push({
id: this.specsList[i].id, id: this.specsList[i].goodsStandardId,
name: this.specsList[i].name, name: this.specsList[i].goodsStandardName,
pickedNum: this.pickList[i].pickCount, pickedNum: this.pickList[i].pickCount,
maxPieces: this.specsList[i].maxPieces, maxPieces: this.specsList[i].goodsNum,
}) })
} }
} }
@ -126,6 +129,8 @@
...this.shopInfo, ...this.shopInfo,
product: [{ product: [{
...this.productInfo, ...this.productInfo,
discountPrice: this.specsList[0].discountPrice,
goodsPrice: this.specsList[0].goodsPrice,
pickedList: pickedList pickedList: pickedList
}] }]
}] }]