detail.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. <template>
  2. <view v-show="!isLoading" class="container">
  3. <!-- 商品图片轮播 -->
  4. <SlideImage v-if="!isLoading" :images="goods.images" />
  5. <!-- 商品信息 -->
  6. <view v-if="!isLoading" class="goods-info m-top20">
  7. <!-- 价格、销量 -->
  8. <view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
  9. <view class="block-left dis-flex flex-y-end">
  10. <!-- 商品售价 -->
  11. <text class="floor-price__samll">¥</text>
  12. <text class="floor-price">{{ goods.price }}</text>
  13. <!-- 划线价 -->
  14. <text class="original-price">¥{{ goods.linePrice }}</text>
  15. </view>
  16. <view class="block-right dis-flex">
  17. <!-- 销量 -->
  18. <view class="goods-sales">
  19. <text>已销售{{ goods.initSale }}</text>
  20. </view>
  21. </view>
  22. </view>
  23. <!-- 标题、分享 -->
  24. <view class="info-item info-item__name dis-flex flex-y-center">
  25. <view class="goods-name flex-box">
  26. <text class="twolist-hidden">{{ goods.name }}</text>
  27. </view>
  28. <!-- #ifdef MP-WEIXIN -->
  29. <view class="goods-share__line"></view>
  30. <view class="goods-share">
  31. <button class="share-btn dis-flex flex-dir-column" open-type="share">
  32. <text class="share__icon iconfont icon-fenxiang-post"></text>
  33. <text class="f-24">分享</text>
  34. </button>
  35. </view>
  36. <!-- #endif -->
  37. </view>
  38. <!-- 商品卖点 -->
  39. <view v-if="goods.salePoint" class="info-item info-item_selling-point">
  40. <text>{{ goods.salePoint }}</text>
  41. </view>
  42. </view>
  43. <!-- 选择商品规格 -->
  44. <view v-if="goods.isSingleSpec == 'N'" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(3)">
  45. <view class="spec-list">
  46. <view class="flex-box">
  47. <text class="col-8">选择:</text>
  48. <text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.name }}</text>
  49. </view>
  50. <view class="f-26 col-9 t-r">
  51. <text class="iconfont icon-xiangyoujiantou"></text>
  52. </view>
  53. </view>
  54. </view>
  55. <!-- 商品SKU弹窗 -->
  56. <SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart"/>
  57. <!-- 商品描述 -->
  58. <view v-if="!isLoading" class="goods-content m-top20">
  59. <view class="item-title b-f">
  60. <text>商品详情</text>
  61. </view>
  62. <block v-if="goods.description != ''">
  63. <view class="goods-content-detail b-f">
  64. <jyf-parser :html="goods.description"></jyf-parser>
  65. </view>
  66. </block>
  67. <empty v-else tips="亲,暂无商品描述" />
  68. </view>
  69. <!-- 底部选项卡 -->
  70. <view class="footer-fixed">
  71. <view class="footer-container">
  72. <!-- 导航图标 -->
  73. <view class="foo-item-fast">
  74. <!-- 首页 -->
  75. <view class="fast-item fast-item--home" @click="onTargetHome">
  76. <view class="fast-icon">
  77. <text class="iconfont icon-shouye"></text>
  78. </view>
  79. <view class="fast-text">
  80. <text>首页</text>
  81. </view>
  82. </view>
  83. <!-- 购物车-->
  84. <view class="fast-item fast-item--cart" @click="onTargetCart">
  85. <view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}</view>
  86. <view class="fast-icon">
  87. <text class="iconfont icon-gouwuche"></text>
  88. </view>
  89. <view class="fast-text">
  90. <text>购物车</text>
  91. </view>
  92. </view>
  93. </view>
  94. <!-- 操作按钮 -->
  95. <view class="foo-item-btn">
  96. <view class="btn-wrapper">
  97. <view class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
  98. <text>加入购物车</text>
  99. </view>
  100. <view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
  101. <text>立即购买</text>
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. <!-- 快捷导航 -->
  108. <shortcut bottom="200rpx" />
  109. </view>
  110. </template>
  111. <script>
  112. import { setCartTabBadge, setCartTotalNum } from '@/utils/app'
  113. import * as GoodsApi from '@/api/goods'
  114. import * as CartApi from '@/api/cart'
  115. import jyfParser from '@/components/jyf-parser/jyf-parser'
  116. import Shortcut from '@/components/shortcut'
  117. import SlideImage from './components/SlideImage'
  118. import SkuPopup from './components/SkuPopup'
  119. export default {
  120. components: {
  121. jyfParser,
  122. Shortcut,
  123. SlideImage,
  124. SkuPopup,
  125. },
  126. data() {
  127. return {
  128. // 正在加载
  129. isLoading: true,
  130. // 当前商品ID
  131. goodsId: null,
  132. // 商品详情
  133. goods: {},
  134. // 购物车总数量
  135. cartTotal: 0,
  136. // 显示/隐藏SKU弹窗
  137. showSkuPopup: false,
  138. // 模式 1:都显示 2:只显示购物车 3:只显示立即购买
  139. skuMode: 1
  140. }
  141. },
  142. /**
  143. * 生命周期函数--监听页面加载
  144. */
  145. onLoad(options) {
  146. // 商品ID
  147. this.goodsId = parseInt(options.goodsId)
  148. // 加载页面数据
  149. this.onRefreshPage()
  150. },
  151. methods: {
  152. // 刷新页面数据
  153. onRefreshPage() {
  154. const app = this
  155. app.isLoading = true
  156. Promise.all([app.getGoodsDetail(), app.getCartTotal()])
  157. .finally(() => app.isLoading = false)
  158. },
  159. // 获取商品信息
  160. getGoodsDetail() {
  161. const app = this
  162. return new Promise((resolve, reject) => {
  163. GoodsApi.detail(app.goodsId)
  164. .then(result => {
  165. const goodsData = result.data;
  166. if (goodsData.skuList) {
  167. goodsData.skuList.forEach(function(sku, index) {
  168. goodsData.skuList[index].specIds = sku.specIds.split('-');
  169. goodsData.skuList[index].skuId = sku.id;
  170. })
  171. }
  172. app.goods = goodsData;
  173. app.skuMode = 3;
  174. resolve(result);
  175. })
  176. .catch(err => reject(err))
  177. })
  178. },
  179. // 获取购物车总数量
  180. getCartTotal() {
  181. const app = this
  182. return new Promise((resolve, reject) => {
  183. CartApi.list()
  184. .then(result => {
  185. app.cartTotal = result.data.totalNum;
  186. setCartTotalNum(app.cartTotal);
  187. setCartTabBadge();
  188. resolve(result);
  189. })
  190. .catch(err => reject(err));
  191. })
  192. },
  193. // 更新购物车数量
  194. onAddCart() {
  195. this.$toast("添加购物车成功");
  196. this.getCartTotal();
  197. },
  198. /**
  199. * 显示/隐藏SKU弹窗
  200. * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
  201. */
  202. onShowSkuPopup(skuMode = 1) {
  203. this.skuMode = skuMode;
  204. this.showSkuPopup = !this.showSkuPopup;
  205. },
  206. // 跳转到首页
  207. onTargetHome(e) {
  208. this.$navTo('pages/index/index');
  209. },
  210. // 跳转到购物车页
  211. onTargetCart() {
  212. this.$navTo('pages/cart/index')
  213. }
  214. },
  215. /**
  216. * 分享当前页面
  217. */
  218. onShareAppMessage() {
  219. const app = this
  220. // 构建页面参数
  221. const params = app.$getShareUrlParams({
  222. goodsId: app.goodsId,
  223. })
  224. return {
  225. title: app.goods.name,
  226. imageUrl: app.goods.images[0],
  227. path: `/pages/goods/detail?${params}`
  228. }
  229. },
  230. /**
  231. * 分享到朋友圈
  232. * 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta)
  233. * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
  234. */
  235. onShareTimeline() {
  236. const app = this
  237. // 构建页面参数
  238. const params = app.$getShareUrlParams({
  239. goodsId: app.goodsId,
  240. })
  241. return {
  242. title: app.goods.name,
  243. imageUrl: app.goods.images[0],
  244. path: `/pages/goods/detail?${params}`
  245. }
  246. }
  247. }
  248. </script>
  249. <style>
  250. page {
  251. background: #fafafa;
  252. }
  253. </style>
  254. <style lang="scss" scoped>
  255. @import "./detail.scss";
  256. </style>