feat: 商品详情开发完成
This commit is contained in:
zc
parent
1d41440d80
commit
bcff31ba7f
@ -1,6 +1,6 @@
|
||||
import request from '@/utils/request'
|
||||
import {httpRequest} from '@/utils/request/axios'
|
||||
const baseUrl = 'https://api.1024api.com/api-interface'
|
||||
const baseUrl = 'https://api.1024api.com/api-interface/app'
|
||||
|
||||
// api地址
|
||||
const api = {
|
||||
@ -46,3 +46,19 @@ export const apiGetCommodityList = (data) => {
|
||||
);
|
||||
}
|
||||
|
||||
// 获取商品详情
|
||||
export const apiGetCommodityDetail = (data) => {
|
||||
return httpRequest.post(
|
||||
`${baseUrl}/index/product/detail`,
|
||||
data
|
||||
);
|
||||
}
|
||||
|
||||
// 加入购物车
|
||||
export const apiAddCart = (data) => {
|
||||
return httpRequest.post(
|
||||
`${baseUrl}/shipping/cart/addOrUpdate`,
|
||||
data
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -801,6 +801,7 @@
|
||||
let that = this;
|
||||
that.checkSelectComplete({
|
||||
success: function(selectShop) {
|
||||
console.warn('----- my data is : ', selectShop)
|
||||
selectShop.buy_num = that.selectNum;
|
||||
that.$emit('buy-now', selectShop);
|
||||
that.$emit('buy', selectShop);
|
||||
|
||||
@ -139,13 +139,10 @@
|
||||
"devServer" : {
|
||||
"port" : 8010,
|
||||
"proxy" : {
|
||||
"/api" : {
|
||||
"/index.php" : {
|
||||
"target" : "https://shop2.client.yiovo.com",
|
||||
"changeOrigin" : true,
|
||||
"secure" : true,
|
||||
"pathRewrite" : {
|
||||
"^/api" : "/index.php?s=/api"
|
||||
}
|
||||
"secure" : true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -49,13 +49,16 @@
|
||||
// 显示详情内容弹窗
|
||||
showPopup: false,
|
||||
// 服务列表数据
|
||||
list: []
|
||||
list: [{
|
||||
"name": "48小时发货",
|
||||
"summary": "下单后48小时之内发货"
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 获取商品服务列表
|
||||
this.getServiceList()
|
||||
// this.getServiceList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
@ -7,9 +7,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setCartTotalNum } from '@/core/app'
|
||||
import { hex2rgba } from '@/utils/color'
|
||||
import * as CartApi from '@/api/cart'
|
||||
import * as GoodsApi from '@/api/goods'
|
||||
import GoodsSkuPopup from '@/components/goods-sku-popup'
|
||||
|
||||
export default {
|
||||
@ -52,9 +51,9 @@
|
||||
const app = this
|
||||
const { goods } = app
|
||||
app.goodsInfo = {
|
||||
_id: goods.goods_id,
|
||||
name: goods.goods_name,
|
||||
goods_thumb: goods.goods_image,
|
||||
_id: goods.id,
|
||||
name: goods.title,
|
||||
goods_thumb: goods.mainImageUrl,
|
||||
sku_list: app.getSkuList(),
|
||||
spec_list: app.getSpecList()
|
||||
}
|
||||
@ -71,60 +70,36 @@
|
||||
// 整理商品SKU列表
|
||||
getSkuList() {
|
||||
const app = this
|
||||
const { goods: { goods_name, goods_image, skuList } } = app
|
||||
const skuData = []
|
||||
skuList.forEach(item => {
|
||||
const { goods: { id, title, mainImageUrl, skuList } } = app
|
||||
const skuData = [];
|
||||
(skuList || []).forEach(item => {
|
||||
skuData.push({
|
||||
_id: item.id,
|
||||
goods_sku_id: item.goods_sku_id,
|
||||
goods_id: item.goods_id,
|
||||
goods_name: goods_name,
|
||||
image: item.image_url ? item.image_url : goods_image,
|
||||
price: item.goods_price * 100,
|
||||
stock: item.stock_num,
|
||||
spec_value_ids: item.spec_value_ids,
|
||||
sku_name_arr: app.getSkuNameArr(item.spec_value_ids)
|
||||
goods_sku_id: item.id,
|
||||
goods_id: id,
|
||||
goods_name: title,
|
||||
image: item.imageUrl ? item.imageUrl : mainImageUrl,
|
||||
price: item.promotionPrice * 100,
|
||||
stock: item.stock,
|
||||
spec_value_ids: item.vvSkuPropertyValueList.map(item => item.id).join('_'),
|
||||
sku_name_arr: item.vvSkuPropertyValueList.map(item => item.productPropertyValue)
|
||||
})
|
||||
})
|
||||
return skuData
|
||||
},
|
||||
|
||||
// 获取sku记录的规格值列表
|
||||
getSkuNameArr(specValueIds) {
|
||||
const app = this
|
||||
const defaultData = ['默认']
|
||||
const skuNameArr = []
|
||||
if (specValueIds) {
|
||||
specValueIds.forEach((valueId, groupIndex) => {
|
||||
const specValueName = app.getSpecValueName(valueId, groupIndex)
|
||||
skuNameArr.push(specValueName)
|
||||
})
|
||||
}
|
||||
return skuNameArr.length ? skuNameArr : defaultData
|
||||
},
|
||||
|
||||
// 获取指定的规格值名称
|
||||
getSpecValueName(valueId, groupIndex) {
|
||||
const app = this
|
||||
const { goods: { specList } } = app
|
||||
const res = specList[groupIndex].valueList.find(specValue => {
|
||||
return specValue.spec_value_id == valueId
|
||||
})
|
||||
return res.spec_value
|
||||
},
|
||||
|
||||
// 整理规格数据
|
||||
getSpecList() {
|
||||
const { goods: { specList } } = this
|
||||
const { goods: { productPropertyList } } = this
|
||||
const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
|
||||
const specData = []
|
||||
specList.forEach(group => {
|
||||
const specData = [];
|
||||
(productPropertyList || []).forEach(group => {
|
||||
const children = []
|
||||
group.valueList.forEach(specValue => {
|
||||
children.push({ name: specValue.spec_value })
|
||||
group.vvProductPropertyValueList.forEach(specValue => {
|
||||
children.push({ name: specValue.productPropertyValue })
|
||||
})
|
||||
specData.push({
|
||||
name: group.spec_name,
|
||||
name: group.productPropertyName,
|
||||
list: children
|
||||
})
|
||||
})
|
||||
@ -150,18 +125,19 @@
|
||||
addCart(selectShop) {
|
||||
const app = this
|
||||
const { goods_id, goods_sku_id, buy_num } = selectShop
|
||||
CartApi.add(goods_id, goods_sku_id, buy_num)
|
||||
// CartApi.add(goods_id, goods_sku_id, buy_num)
|
||||
GoodsApi.apiAddCart({ num: buy_num, skuId: goods_sku_id })
|
||||
.then(result => {
|
||||
// 显示成功
|
||||
app.$toast(result.message)
|
||||
app.$toast('添加成功')
|
||||
// 隐藏当前弹窗
|
||||
app.onChangeValue(false)
|
||||
// 购物车商品总数量
|
||||
/* // 购物车商品总数量
|
||||
const cartTotal = result.data.cartTotal
|
||||
// 缓存购物车数量
|
||||
setCartTotalNum(cartTotal)
|
||||
// 传递给父级
|
||||
app.$emit('addCart', cartTotal)
|
||||
app.$emit('addCart', cartTotal) */
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<!-- 轮播图片 -->
|
||||
<swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
|
||||
<view class="slide-image">
|
||||
<image class="image" :draggable="false" :src="item.preview_url"></image>
|
||||
<image class="image" :draggable="false" :src="item"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
@ -77,7 +77,7 @@
|
||||
const app = this
|
||||
const imageUrls = []
|
||||
app.images.forEach(item => {
|
||||
imageUrls.push(item.preview_url);
|
||||
imageUrls.push(item);
|
||||
});
|
||||
uni.previewImage({
|
||||
current: imageUrls[index],
|
||||
|
||||
@ -10,25 +10,25 @@
|
||||
<view class="block-left dis-flex flex-y-center">
|
||||
<!-- 商品售价 -->
|
||||
<text class="floor-price__samll">￥</text>
|
||||
<text class="floor-price">{{ goods.goods_price_min }}</text>
|
||||
<text class="floor-price">{{ goods.showPromotionPrice }}</text>
|
||||
<!-- 会员价标签 -->
|
||||
<view v-if="goods.is_user_grade" class="user-grade">
|
||||
<text>会员价</text>
|
||||
</view>
|
||||
<!-- 划线价 -->
|
||||
<text v-if="goods.line_price_min > 0" class="original-price">￥{{ goods.line_price_min }}</text>
|
||||
<text v-if="goods.showSalePrice > 0" class="original-price">￥{{ goods.showSalePrice }}</text>
|
||||
</view>
|
||||
<view class="block-right dis-flex">
|
||||
<!-- 销量 -->
|
||||
<view class="goods-sales">
|
||||
<text>已售{{ goods.goods_sales }}件</text>
|
||||
<text>已售{{ goods.showSaleCount }}件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 标题、分享 -->
|
||||
<view class="info-item info-item__name dis-flex flex-y-center">
|
||||
<view class="goods-name flex-box">
|
||||
<text class="twoline-hide">{{ goods.goods_name }}</text>
|
||||
<text class="twoline-hide">{{ goods.title }}</text>
|
||||
</view>
|
||||
<view class="goods-share__line"></view>
|
||||
<view class="goods-share">
|
||||
@ -45,11 +45,11 @@
|
||||
</view>
|
||||
|
||||
<!-- 选择商品规格 -->
|
||||
<view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
|
||||
<view class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
|
||||
<view class="spec-list">
|
||||
<view class="flex-box">
|
||||
<text class="col-8">选择：</text>
|
||||
<text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.spec_name }}</text>
|
||||
<text class="spec-name" v-for="(item, index) in goods.productPropertyList" :key="index">{{ item.productPropertyName }}</text>
|
||||
</view>
|
||||
<view class="f-26 col-9 t-r">
|
||||
<text class="iconfont icon-arrow-right"></text>
|
||||
@ -71,8 +71,8 @@
|
||||
<view class="item-title b-f">
|
||||
<text>商品描述</text>
|
||||
</view>
|
||||
<view v-if="goods.content != ''" class="goods-content__detail b-f">
|
||||
<mp-html :content="goods.content" />
|
||||
<view v-if="goods.contentHtml != ''" class="goods-content__detail b-f">
|
||||
<mp-html :content="goods.contentHtml" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 客服 -->
|
||||
<customer-btn v-if="isShowCustomerBtn" :showCard="true" :cardTitle="goods.goods_name" :cardImage="goods.goods_image"
|
||||
<customer-btn v-if="isShowCustomerBtn" :showCard="true" :cardTitle="goods.title" :cardImage="goods.goods_image"
|
||||
:cardPath="pagePath">
|
||||
<view class="fast-item">
|
||||
<view class="fast-icon">
|
||||
@ -117,7 +117,7 @@
|
||||
<!-- 操作按钮 -->
|
||||
<view class="foo-item-btn">
|
||||
<view class="btn-wrapper">
|
||||
<view v-if="isEnableCart" class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
|
||||
<view class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
|
||||
<text>加入购物车</text>
|
||||
</view>
|
||||
<view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
|
||||
@ -132,7 +132,7 @@
|
||||
<!-- <shortcut bottom="120" /> -->
|
||||
|
||||
<!-- 分享菜单 -->
|
||||
<share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" />
|
||||
<share-sheet v-model="showShareSheet" :shareTitle="goods.title" :shareImageUrl="goods.goods_image" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
@ -141,7 +141,6 @@
|
||||
import { getSceneData } from '@/core/app'
|
||||
import * as GoodsApi from '@/api/goods'
|
||||
import * as CartApi from '@/api/cart'
|
||||
import SettingModel from '@/common/model/Setting'
|
||||
import { GoodsTypeEnum } from '@/common/enum/goods'
|
||||
import ShareSheet from '@/components/share-sheet'
|
||||
import CustomerBtn from '@/components/customer-btn'
|
||||
@ -175,10 +174,8 @@
|
||||
skuMode: 1,
|
||||
// 显示/隐藏分享菜单
|
||||
showShareSheet: false,
|
||||
// 是否支持加入购物车
|
||||
isEnableCart: false,
|
||||
// 是否显示在线客服按钮
|
||||
isShowCustomerBtn: false,
|
||||
isShowCustomerBtn: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -197,12 +194,9 @@
|
||||
this.onRecordQuery(options)
|
||||
// 加载页面数据
|
||||
this.onRefreshPage()
|
||||
// 是否显示在线客服按钮
|
||||
this.isShowCustomerBtn = await SettingModel.isShowCustomerBtn()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 记录query参数
|
||||
onRecordQuery(query) {
|
||||
const scene = getSceneData(query)
|
||||
@ -213,7 +207,8 @@
|
||||
onRefreshPage() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
Promise.all([app.getGoodsDetail(), app.getCartTotal()])
|
||||
// Promise.all([app.getGoodsDetail(), app.getCartTotal()])
|
||||
Promise.all([app.getGoodsDetail()])
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
@ -221,12 +216,16 @@
|
||||
getGoodsDetail() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.detail(app.goodsId)
|
||||
// GoodsApi.detail(app.goodsId)
|
||||
GoodsApi.apiGetCommodityDetail({ productId: app.goodsId })
|
||||
.then(result => {
|
||||
app.goods = result.data.detail
|
||||
if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
|
||||
app.isEnableCart = true
|
||||
}
|
||||
app.goods = result.data
|
||||
app.goods.goods_images = result.data.vvProductDetailList.filter((item) => item.type === 1).map((item) => item.detail)
|
||||
app.goods.goods_images.unshift(result.data.mainImageUrl)
|
||||
app.goods.video = result.data.videoUrl
|
||||
app.goods.contentHtml = result.data.vvProductDetailList.find((item) => item.type === 2)?.detail
|
||||
app.goods.productPropertyList = result.data.vvProductPropertyList
|
||||
app.goods.skuList = result.data.vvSkuList
|
||||
resolve(result)
|
||||
})
|
||||
.catch(reject)
|
||||
@ -248,7 +247,7 @@
|
||||
|
||||
// 更新购物车数量
|
||||
onAddCart(total) {
|
||||
this.cartTotal = total
|
||||
// this.cartTotal = total
|
||||
},
|
||||
|
||||
/**
|
||||
@ -257,11 +256,7 @@
|
||||
*/
|
||||
onShowSkuPopup(skuMode = 1) {
|
||||
const app = this
|
||||
if (app.isEnableCart) {
|
||||
app.skuMode = skuMode
|
||||
} else {
|
||||
app.skuMode = 3
|
||||
}
|
||||
app.skuMode = skuMode
|
||||
app.showSkuPopup = !app.showSkuPopup
|
||||
},
|
||||
|
||||
@ -287,7 +282,7 @@
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.goods.goods_name,
|
||||
title: this.goods.title,
|
||||
path: this.pagePath
|
||||
}
|
||||
},
|
||||
@ -299,7 +294,7 @@
|
||||
*/
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.goods.goods_name,
|
||||
title: this.goods.title,
|
||||
path: this.pagePath
|
||||
}
|
||||
}
|
||||
|
||||
@ -221,6 +221,7 @@
|
||||
GoodsApi.detail(app.goodsId)
|
||||
.then(result => {
|
||||
app.goods = result.data.detail
|
||||
console.warn('----- my data is app.goods: ', app.goods)
|
||||
if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
|
||||
app.isEnableCart = true
|
||||
}
|
||||
|
||||
@ -62,7 +62,15 @@ class HttpRequest {
|
||||
// 服务器接口请求
|
||||
request(requestConfig) {
|
||||
const _this = this;
|
||||
const user_info = uni.getStorageSync("user_info") || {};
|
||||
// 兼容H5（字符串）和微信小程序（对象）场景
|
||||
let user_info = uni.getStorageSync("user_info") || {};
|
||||
if (typeof user_info === "string") {
|
||||
try {
|
||||
user_info = JSON.parse(user_info) || {};
|
||||
} catch (e) {
|
||||
user_info = {};
|
||||
}
|
||||
}
|
||||
const reqData = Object.assign(requestConfig.data, {
|
||||
buyerId: user_info.buyerId,
|
||||
flag: user_info.flag,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user