|
|
@ -56,7 +56,7 @@
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 商品SKU弹窗 -->
|
|
|
|
<!-- 商品SKU弹窗 -->
|
|
|
|
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
|
|
|
|
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart"/>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 商品描述 -->
|
|
|
|
<!-- 商品描述 -->
|
|
|
|
<view v-if="!isLoading" class="goods-content m-top20">
|
|
|
|
<view v-if="!isLoading" class="goods-content m-top20">
|
|
|
@ -85,35 +85,9 @@
|
|
|
|
<text>首页</text>
|
|
|
|
<text>首页</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 客服 -->
|
|
|
|
|
|
|
|
<view class="fast-item fast-item--home" @click="modalShow = true">
|
|
|
|
|
|
|
|
<view class="fast-icon">
|
|
|
|
|
|
|
|
<u-icon name="phone" size="32"></u-icon>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="fast-text">
|
|
|
|
|
|
|
|
<text>客服</text>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<u-modal v-model="modalShow" title="店铺信息" width="650rpx" class="store-list">
|
|
|
|
|
|
|
|
<view class="store-info">
|
|
|
|
|
|
|
|
<view class="base-info">
|
|
|
|
|
|
|
|
<view class="name">{{ storeList.name }}</view>
|
|
|
|
|
|
|
|
<view class="hours">营业时间:{{ storeList.hours }}</view>
|
|
|
|
|
|
|
|
<view class="address"><text class="location-icon iconfont icon-dingwei"></text>{{ storeList.address }}
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="tel">联系电话:{{ storeList.phone }}</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="loc-info">
|
|
|
|
|
|
|
|
<text class="dis"><text class="distance">{{ parseFloat(storeList.distance).toFixed(1) }}</text>公里</text>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</u-modal>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 购物车-->
|
|
|
|
<!-- 购物车-->
|
|
|
|
<view class="fast-item fast-item--cart" @click="onTargetCart">
|
|
|
|
<view class="fast-item fast-item--cart" @click="onTargetCart">
|
|
|
|
<view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}
|
|
|
|
<view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="fast-icon">
|
|
|
|
<view class="fast-icon">
|
|
|
|
<text class="iconfont icon-gouwuche"></text>
|
|
|
|
<text class="iconfont icon-gouwuche"></text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
@ -143,229 +117,161 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { setCartTabBadge, setCartTotalNum } from '@/utils/app'
|
|
|
|
import { setCartTabBadge, setCartTotalNum } from '@/utils/app'
|
|
|
|
import * as GoodsApi from '@/api/goods'
|
|
|
|
import * as GoodsApi from '@/api/goods'
|
|
|
|
import * as CartApi from '@/api/cart'
|
|
|
|
import * as CartApi from '@/api/cart'
|
|
|
|
import jyfParser from '@/components/jyf-parser/jyf-parser'
|
|
|
|
import jyfParser from '@/components/jyf-parser/jyf-parser'
|
|
|
|
import Shortcut from '@/components/shortcut'
|
|
|
|
import Shortcut from '@/components/shortcut'
|
|
|
|
import SlideImage from './components/SlideImage'
|
|
|
|
import SlideImage from './components/SlideImage'
|
|
|
|
import SkuPopup from './components/SkuPopup'
|
|
|
|
import SkuPopup from './components/SkuPopup'
|
|
|
|
import * as settingApi from '@/api/setting'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
jyfParser,
|
|
|
|
jyfParser,
|
|
|
|
Shortcut,
|
|
|
|
Shortcut,
|
|
|
|
SlideImage,
|
|
|
|
SlideImage,
|
|
|
|
SkuPopup,
|
|
|
|
SkuPopup,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
// 正在加载
|
|
|
|
|
|
|
|
isLoading: true,
|
|
|
|
|
|
|
|
// 当前商品ID
|
|
|
|
|
|
|
|
goodsId: null,
|
|
|
|
|
|
|
|
// 商品详情
|
|
|
|
|
|
|
|
goods: {},
|
|
|
|
|
|
|
|
// 购物车总数量
|
|
|
|
|
|
|
|
cartTotal: 0,
|
|
|
|
|
|
|
|
// 显示/隐藏SKU弹窗
|
|
|
|
|
|
|
|
showSkuPopup: false,
|
|
|
|
|
|
|
|
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
|
|
|
|
|
|
|
skuMode: 1,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
modalShow: false,//店主电话弹框
|
|
|
|
|
|
|
|
storeList: {},//店铺信息
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 生命周期函数--监听页面加载
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
|
|
|
// 商品ID
|
|
|
|
|
|
|
|
this.goodsId = parseInt(options.goodsId)
|
|
|
|
|
|
|
|
// 加载页面数据
|
|
|
|
|
|
|
|
this.onRefreshPage()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取店主电话
|
|
|
|
|
|
|
|
this.getStoreList()
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 刷新页面数据
|
|
|
|
|
|
|
|
onRefreshPage() {
|
|
|
|
|
|
|
|
const app = this
|
|
|
|
|
|
|
|
app.isLoading = true
|
|
|
|
|
|
|
|
Promise.all([app.getGoodsDetail(), app.getCartTotal()])
|
|
|
|
|
|
|
|
.finally(() => app.isLoading = false)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取商品信息
|
|
|
|
|
|
|
|
getGoodsDetail() {
|
|
|
|
|
|
|
|
const app = this
|
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
|
|
|
GoodsApi.detail(app.goodsId)
|
|
|
|
|
|
|
|
.then(result => {
|
|
|
|
|
|
|
|
const goodsData = result.data;
|
|
|
|
|
|
|
|
if (goodsData.skuList) {
|
|
|
|
|
|
|
|
goodsData.skuList.forEach(function (sku, index) {
|
|
|
|
|
|
|
|
goodsData.skuList[index].specIds = sku.specIds.split('-');
|
|
|
|
|
|
|
|
goodsData.skuList[index].skuId = sku.id;
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
app.goods = goodsData;
|
|
|
|
|
|
|
|
app.skuMode = 3;
|
|
|
|
|
|
|
|
resolve(result);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(err => reject(err))
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取购物车总数量
|
|
|
|
|
|
|
|
getCartTotal() {
|
|
|
|
|
|
|
|
const app = this
|
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
|
|
|
CartApi.list()
|
|
|
|
|
|
|
|
.then(result => {
|
|
|
|
|
|
|
|
app.cartTotal = result.data.totalNum;
|
|
|
|
|
|
|
|
setCartTotalNum(app.cartTotal);
|
|
|
|
|
|
|
|
setCartTabBadge();
|
|
|
|
|
|
|
|
resolve(result);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(err => reject(err));
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
// 更新购物车数量
|
|
|
|
return {
|
|
|
|
onAddCart() {
|
|
|
|
// 正在加载
|
|
|
|
this.$toast("添加购物车成功");
|
|
|
|
isLoading: true,
|
|
|
|
this.getCartTotal();
|
|
|
|
// 当前商品ID
|
|
|
|
|
|
|
|
goodsId: null,
|
|
|
|
|
|
|
|
// 商品详情
|
|
|
|
|
|
|
|
goods: {},
|
|
|
|
|
|
|
|
// 购物车总数量
|
|
|
|
|
|
|
|
cartTotal: 0,
|
|
|
|
|
|
|
|
// 显示/隐藏SKU弹窗
|
|
|
|
|
|
|
|
showSkuPopup: false,
|
|
|
|
|
|
|
|
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
|
|
|
|
|
|
|
skuMode: 1
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 显示/隐藏SKU弹窗
|
|
|
|
* 生命周期函数--监听页面加载
|
|
|
|
* @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
|
|
|
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
onShowSkuPopup(skuMode = 1) {
|
|
|
|
onLoad(options) {
|
|
|
|
this.skuMode = skuMode;
|
|
|
|
// 商品ID
|
|
|
|
this.showSkuPopup = !this.showSkuPopup;
|
|
|
|
this.goodsId = parseInt(options.goodsId)
|
|
|
|
},
|
|
|
|
// 加载页面数据
|
|
|
|
|
|
|
|
this.onRefreshPage()
|
|
|
|
// 跳转到首页
|
|
|
|
|
|
|
|
onTargetHome(e) {
|
|
|
|
|
|
|
|
this.$navTo('pages/index/index');
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 跳转到购物车页
|
|
|
|
methods: {
|
|
|
|
onTargetCart() {
|
|
|
|
|
|
|
|
this.$navTo('pages/cart/index')
|
|
|
|
// 刷新页面数据
|
|
|
|
|
|
|
|
onRefreshPage() {
|
|
|
|
|
|
|
|
const app = this
|
|
|
|
|
|
|
|
app.isLoading = true
|
|
|
|
|
|
|
|
Promise.all([app.getGoodsDetail(), app.getCartTotal()])
|
|
|
|
|
|
|
|
.finally(() => app.isLoading = false)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取商品信息
|
|
|
|
|
|
|
|
getGoodsDetail() {
|
|
|
|
|
|
|
|
const app = this
|
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
|
|
|
GoodsApi.detail(app.goodsId)
|
|
|
|
|
|
|
|
.then(result => {
|
|
|
|
|
|
|
|
const goodsData = result.data;
|
|
|
|
|
|
|
|
if (goodsData.skuList) {
|
|
|
|
|
|
|
|
goodsData.skuList.forEach(function(sku, index) {
|
|
|
|
|
|
|
|
goodsData.skuList[index].specIds = sku.specIds.split('-');
|
|
|
|
|
|
|
|
goodsData.skuList[index].skuId = sku.id;
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
app.goods = goodsData;
|
|
|
|
|
|
|
|
app.skuMode = 3;
|
|
|
|
|
|
|
|
resolve(result);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(err => reject(err))
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取购物车总数量
|
|
|
|
|
|
|
|
getCartTotal() {
|
|
|
|
|
|
|
|
const app = this
|
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
|
|
|
CartApi.list()
|
|
|
|
|
|
|
|
.then(result => {
|
|
|
|
|
|
|
|
app.cartTotal = result.data.totalNum;
|
|
|
|
|
|
|
|
setCartTotalNum(app.cartTotal);
|
|
|
|
|
|
|
|
setCartTabBadge();
|
|
|
|
|
|
|
|
resolve(result);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(err => reject(err));
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 更新购物车数量
|
|
|
|
|
|
|
|
onAddCart() {
|
|
|
|
|
|
|
|
this.$toast("添加购物车成功");
|
|
|
|
|
|
|
|
this.getCartTotal();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 显示/隐藏SKU弹窗
|
|
|
|
|
|
|
|
* @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
onShowSkuPopup(skuMode = 1) {
|
|
|
|
|
|
|
|
this.skuMode = skuMode;
|
|
|
|
|
|
|
|
this.showSkuPopup = !this.showSkuPopup;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 跳转到首页
|
|
|
|
|
|
|
|
onTargetHome(e) {
|
|
|
|
|
|
|
|
this.$navTo('pages/index/index');
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 跳转到购物车页
|
|
|
|
|
|
|
|
onTargetCart() {
|
|
|
|
|
|
|
|
this.$navTo('pages/cart/index')
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 获取店铺列表
|
|
|
|
/**
|
|
|
|
async getStoreList() {
|
|
|
|
* 分享当前页面
|
|
|
|
let storeId = uni.getStorageSync("storeId");
|
|
|
|
*/
|
|
|
|
let res = await settingApi.storeList()
|
|
|
|
onShareAppMessage() {
|
|
|
|
let temp = res.data.data
|
|
|
|
const app = this
|
|
|
|
this.storeList = (temp.filter(item => item.id === storeId))[0]
|
|
|
|
// 构建页面参数
|
|
|
|
|
|
|
|
const params = app.$getShareUrlParams({
|
|
|
|
console.log(this.storeList, '123132');
|
|
|
|
goodsId: app.goodsId,
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
title: app.goods.name,
|
|
|
|
|
|
|
|
imageUrl: app.goods.images[0],
|
|
|
|
|
|
|
|
path: `/pages/goods/detail?${params}`
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 分享到朋友圈
|
|
|
|
/**
|
|
|
|
* 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta)
|
|
|
|
* 分享当前页面
|
|
|
|
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
onShareAppMessage() {
|
|
|
|
onShareTimeline() {
|
|
|
|
const app = this
|
|
|
|
const app = this
|
|
|
|
// 构建页面参数
|
|
|
|
// 构建页面参数
|
|
|
|
const params = app.$getShareUrlParams({
|
|
|
|
const params = app.$getShareUrlParams({
|
|
|
|
goodsId: app.goodsId,
|
|
|
|
goodsId: app.goodsId,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
title: app.goods.name,
|
|
|
|
title: app.goods.name,
|
|
|
|
imageUrl: app.goods.images[0],
|
|
|
|
imageUrl: app.goods.images[0],
|
|
|
|
path: `/pages/goods/detail?${params}`
|
|
|
|
path: `/pages/goods/detail?${params}`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 分享到朋友圈
|
|
|
|
|
|
|
|
* 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta)
|
|
|
|
|
|
|
|
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
onShareTimeline() {
|
|
|
|
|
|
|
|
const app = this
|
|
|
|
|
|
|
|
// 构建页面参数
|
|
|
|
|
|
|
|
const params = app.$getShareUrlParams({
|
|
|
|
|
|
|
|
goodsId: app.goodsId,
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
title: app.goods.name,
|
|
|
|
|
|
|
|
imageUrl: app.goods.images[0],
|
|
|
|
|
|
|
|
path: `/pages/goods/detail?${params}`
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|
page {
|
|
|
|
page {
|
|
|
|
background: #fafafa;
|
|
|
|
background: #fafafa;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import "./detail.scss";
|
|
|
|
@import "./detail.scss";
|
|
|
|
|
|
|
|
|
|
|
|
// 店铺列表
|
|
|
|
|
|
|
|
.store-list {
|
|
|
|
|
|
|
|
// display: flex;
|
|
|
|
|
|
|
|
.store-info {
|
|
|
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
border: 2rpx solid #cccccc;
|
|
|
|
|
|
|
|
min-height: 240rpx;
|
|
|
|
|
|
|
|
line-height: 55rpx;
|
|
|
|
|
|
|
|
border-radius: 5rpx;
|
|
|
|
|
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.base-info {
|
|
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
|
|
width: 70%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
|
|
|
font-size: 34rpx;
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
margin-top: 15rpx;
|
|
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.location-icon {
|
|
|
|
|
|
|
|
color: #f03c3c;
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loc-info {
|
|
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
|
|
// dispaly:flex;
|
|
|
|
|
|
|
|
line-height: 75rpx;
|
|
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
width: 30%;
|
|
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.distance {
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
color: #f03c3c;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|