detail.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  1. <template>
  2. <app-layout>
  3. <uni-nav-bar fixed="true" :background-color="titleBg" left-icon="back" @click-left="back"
  4. ></uni-nav-bar>
  5. <view v-if="!detail" class="u-goods-detail"></view>
  6. <template class="detail" v-if="detail">
  7. <!--商品轮播图-->
  8. <app-goods-banner
  9. v-bind:picList="detail.pic_url"
  10. v-bind:share="detail.share"
  11. v-bind:isCart="false"
  12. v-bind:videoUrl="detail.video_url"
  13. v-bind:goods_id="detail.id"
  14. sign="advance"
  15. ></app-goods-banner>
  16. <!--商品公告-->
  17. <detail-ad
  18. v-if="detail.advanceGoods.end_prepayment_at"
  19. v-bind:sales="detail.sales"
  20. v-bind:d="d"
  21. v-bind:h="h"
  22. v-bind:m="m"
  23. v-bind:s="s"
  24. v-bind:theme="getTheme"
  25. v-bind:detail="detail"
  26. ></detail-ad>
  27. <!--商品价格-->
  28. <detail-price-share
  29. :theme-object="themeObject"
  30. v-if="detail.attr.length > 0"
  31. v-bind:url="url"
  32. v-bind:original_price="detail.original_price"
  33. v-bind:attr="detail.attr"
  34. v-bind:price_min="detail.price_min"
  35. v-bind:price_max="detail.price_max"
  36. v-bind:group_max_member_price="detail.group_max_member_price"
  37. v-bind:group_min_member_price="detail.group_min_member_price"
  38. v-bind:end_prepayment_at="detail.advanceGoods.end_prepayment_at"
  39. v-bind:pay_limit="detail.advanceGoods.pay_limit"
  40. v-bind:level_show="detail.level_show"
  41. v-bind:cats="detail.goodsWarehouse.cats"
  42. v-bind:id="detail.id"
  43. v-bind:is_vip_card_user="detail.vip_card_appoint.is_vip_card_user"
  44. v-bind:discount="detail.vip_card_appoint.discount"
  45. v-bind:theme="getTheme"
  46. v-bind:has-poster-nav="true"
  47. v-bind:poster-config="poster_config + `&goods_id=` + detail.id"
  48. v-bind:poster-generate="poster_generate + `&goods_id=` + detail.id"
  49. v-bind:detail="detail"
  50. ></detail-price-share>
  51. <!-- 详情标题 -->
  52. <!--<app-name v-bind:name="detail.name"></app-name>-->
  53. <view v-if="detail.subtitle" class="goods-subtitle">
  54. <view class="t-omit-three">{{detail.subtitle}}</view>
  55. </view>
  56. <!--商品会员-->
  57. <view class="join-member" v-if="detail.level_show === 2">
  58. <view class="bd-vip" @click="goToMember">
  59. <img :src="root+'/web/statics/img/app/common/vip.png'" alt="">
  60. </view>
  61. <!--<app-join-member
  62. v-bind:member-min-price="`${detail.group_min_member_price}`"
  63. v-bind:member-max-price="`${detail.group_min_member_price}`"
  64. v-bind:price="`${detail.original_price}`"
  65. ></app-join-member>-->
  66. </view>
  67. <!--超级会员卡-->
  68. <view class="detail-vip" v-if="detail.vip_card_appoint.discount > 0">
  69. <app-vip-card top="0" background="#fff"></app-vip-card>
  70. </view>
  71. <template v-if="detail.advanceGoods.ladder_rules.length>0">
  72. <detail-discount
  73. v-bind:url="url"
  74. v-bind:ladder_rules="detail.advanceGoods.ladder_rules"
  75. v-bind:sales="detail.sales"
  76. ></detail-discount>
  77. </template>
  78. <bd-coupon @change="setCoupon" :theme="themeObject" :coupons="detail.goods_coupon_center"></bd-coupon>
  79. <bd-xbc
  80. :coAttr="is_open"
  81. :attr-list="select_attr_group"
  82. :type="detail.type"
  83. :guarantee-title="detail.guarantee_title"
  84. :guarantee-pic="detail.guarantee_pic"
  85. :param_content="detail.param_content"
  86. :param_name="detail.param_name"
  87. :services="detail.services"
  88. :attr-groups="detail.attr_groups"
  89. :goods-stock="detail.goods_stock"
  90. @openAttr="active = false"
  91. ></bd-xbc>
  92. <detail-attr
  93. v-if="!active && detail.attr.length>0"
  94. v-bind:theme="getTheme"
  95. v-bind:height="110"
  96. v-bind:cover_pic="detail.cover_pic"
  97. v-bind:attr="detail.attr"
  98. v-bind:attr_groups="detail.attr_groups"
  99. v-bind:goods_stock="detail.goods_stock"
  100. v-bind:attr_deposit="attr_deposit"
  101. v-bind:attr_swell_deposit="attr_swell_deposit"
  102. v-bind:attr_stock="attr_stock"
  103. v-bind:attr_price="attr_price"
  104. v-bind:attr_price_member="attr_price_member"
  105. v-bind:level_show="detail.level_show"
  106. v-bind:attr_pic_url="attr_pic_url"
  107. @select_attr="select_attr"
  108. @close_attr="close_attr"
  109. v-bind:num="num"
  110. v-bind:detail="detail"
  111. @change_num="change_num"
  112. @change_num_data="change_num_data"
  113. ></detail-attr>
  114. <bd-hc
  115. :integral="detail.goods_marketing_award.integral"
  116. :coupon="detail.goods_marketing_award.coupon"
  117. :card="detail.goods_marketing_award.card"
  118. :balance="detail.goods_marketing_award.balance"
  119. :theme="themeObject"
  120. ></bd-hc>
  121. <bd-kb
  122. :limit="detail.goods_marketing.limit"
  123. :express="detail.express"
  124. :shipping="detail.goods_marketing.shipping"
  125. :pickup="detail.goods_marketing.pickup"
  126. ></bd-kb>
  127. <bd-comments :goods-id="detail.id"></bd-comments>
  128. <bd-detail :detail="detail.detail"></bd-detail>
  129. <!-- 相关推荐 -->
  130. <app-related-suggestion-product text="您或许会喜欢" sign="advance" v-bind:theme="getTheme" v-bind:list="list"></app-related-suggestion-product>
  131. <!-- 空白格 -->
  132. <view class="safe-area-inset-bottom">
  133. <view :class="full_reduce ? 'u-bottom-height-1' : 'u-bottom-height-0'"></view>
  134. </view>
  135. <view v-if="is_open == 1" class="safe-area-inset-bottom u-bottom-fixed">
  136. <view v-if="full_reduce && active">
  137. <app-goods-full-reduce
  138. :theme="getTheme"
  139. :full_reduce="full_reduce"
  140. >
  141. </app-goods-full-reduce>
  142. </view>
  143. <detail-bottom-button
  144. v-bind:theme="getTheme"
  145. @close_attr="close_attr"
  146. v-bind:favorite="detail.favorite"
  147. v-bind:active="active"
  148. v-bind:goods_id="detail.id"
  149. @favorite="favorite"
  150. v-bind:detail="detail"
  151. v-bind:num="num"
  152. v-bind:buttonDisabled="buttonDisabled"
  153. v-bind:end_prepayment_at="detail.advanceGoods.end_prepayment_at"
  154. @request="request_detail"
  155. ></detail-bottom-button>
  156. </view>
  157. <app-close v-if="showClose" :modal="false" @update="getMall"></app-close>
  158. <!-- 快捷导航 -->
  159. <app-quick-navigation></app-quick-navigation>
  160. </template>
  161. </app-layout>
  162. </template>
  163. <script>
  164. import { mapState, mapGetters } from'vuex';
  165. import appGoodsBanner from '../../../components/page-component/goods/app-goods-banner.vue';
  166. import detailAd from '../components/detail-ad.vue';
  167. import detailPriceShare from '../components/detail-price-share.vue';
  168. import detailBottomButton from '../components/detail-bottom-button.vue';
  169. import detailAttr from '../components/detail-attr.vue';
  170. import appJoinMember from '../../../components/page-component/app-join-member/app-join-member.vue';
  171. import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue'
  172. import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
  173. import detailDiscount from '../components/detail-discount.vue';
  174. import detailVip from '../components/detail-vip.vue';
  175. import appVipCard from '../../../components/page-component/app-vip-card/app-vip-card.vue';
  176. import appName from '../../../components/page-component/app-goods-detail/app-name.vue';
  177. import appQuickNavigation from '../../../components/page-component/app-quick-navigation/app-quick-navigation.vue';
  178. import appGoodsFullReduce from '../../../components/page-component/goods/app-goods-full-reduce.vue';
  179. import appClose from '@/components/basic-component/app-close/app-close.vue';
  180. import bdDetail from '@/components/page-component/goods/bd-detail.vue';
  181. import bdComments from '@/components/page-component/goods/bd-comments.vue';
  182. import bdKb from '@/components/page-component/goods/bd-kb.vue';
  183. import bdHc from '@/components/page-component/goods/bd-hc.vue';
  184. import bdCoupon from '@/components/page-component/goods/bd-coupon.vue';
  185. import bdXbc from '@/components/page-component/goods/bd-xbc.vue';
  186. import uniNavBar from '@/components/page-component/uni-plugins/uni-nav-bar.vue';
  187. export default {
  188. name: "detail",
  189. data() {
  190. return {
  191. showClose: false,
  192. is_open: 0,
  193. detail: null,
  194. full_reduce: null,
  195. active: true,
  196. attr_deposit: '0',
  197. attr_swell_deposit: '0',
  198. attr_stock: 0,
  199. attr_price: '0',
  200. attr_price_member: 0,
  201. url: '',
  202. level_show: 0,
  203. loading: false,
  204. select_attr_group: [],
  205. zhe: false,
  206. list: [],
  207. num: 1,
  208. shareShow: false,
  209. attr_pic_url: '',
  210. goods_id: -1,
  211. d: 0,
  212. h: 0,
  213. m: 0,
  214. s: 0,
  215. end_time: -1,
  216. buttonDisabled: false,
  217. poster_config: this.$api.advance.poster_config,
  218. poster_generate: this.$api.advance.poster_generate,
  219. titleBg:'rgba(255,255,255,0)',
  220. root: this.$siteInfo.root,
  221. }
  222. },
  223. onPageScroll:function(e){
  224. this.titleBg = 'rgba(255,255,255,'+e.scrollTop / 300+')';
  225. },
  226. onLoad(data) {
  227. this.goods_id = data.id;
  228. // #ifdef MP-WEIXIN
  229. wx.showShareMenu({
  230. menus: ['shareAppMessage', 'shareTimeline']
  231. })
  232. // #endif
  233. },
  234. onShow() {
  235. this.showClose = false;
  236. setTimeout(()=>{
  237. this.showClose = true;
  238. })
  239. this.$nextTick(() => {
  240. this.request_detail({id: this.goods_id});
  241. this.$request({
  242. url: this.$api.advance.goods_list,
  243. data: {
  244. goods_id: this.goods_id,
  245. }
  246. }).then(response => {
  247. if (response.code === 0) {
  248. this.list = response.data.list;
  249. } else if (response.code === 1) {
  250. uni.showModal({
  251. title: '提示',
  252. content: response.msg,
  253. });
  254. }
  255. });
  256. })
  257. },
  258. onHide() {
  259. clearInterval(this.end_time);
  260. },
  261. onUnload() {
  262. clearInterval(this.end_time);
  263. },
  264. methods: {
  265. goToMember(){
  266. uni.navigateTo({
  267. url:'/pages/member/index/index'
  268. })
  269. },
  270. getMall(e) {
  271. this.is_open = e.is_open;
  272. },
  273. request_detail(data) {
  274. this.$request({
  275. url: this.$api.advance.detail,
  276. data: {
  277. id: data.id
  278. },
  279. method: 'get'
  280. }).then(res => {
  281. if (res.code === 0) {
  282. this.detail = res.data.detail;
  283. if (this.detail.goods_activity) {
  284. this.full_reduce = this.detail.goods_activity.full_reduce;
  285. }
  286. this.detail.num = 1;
  287. this.loading = true;
  288. this.url = `${this.$api.advance.poster}&goods_id=${this.detail.id}`;
  289. this.getTime(this.detail.advanceGoods.end_prepayment_at);
  290. this.set_attr_active();
  291. } else if (res.code === 1) {
  292. uni.hideLoading();
  293. uni.showModal({
  294. content: res.msg,
  295. showCancel: false,
  296. success() {
  297. uni.navigateBack();
  298. }
  299. });
  300. }
  301. });
  302. },
  303. open_share() {
  304. this.shareShow = true;
  305. },
  306. change_num(data) {
  307. this.num += data;
  308. },
  309. change_num_data(data) {
  310. this.num = data;
  311. },
  312. favorite(data) {
  313. this.detail.favorite = data;
  314. },
  315. select_attr(data, item) {
  316. let attr_groups = this.detail.attr_groups;
  317. let str = ':';
  318. let sd = 0;
  319. for (let i = 0; i < attr_groups.length;i++) {
  320. let attr_list = this.detail.attr_groups[i].attr_list;
  321. for (let j = 0; j < attr_list.length; j++) {
  322. if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id === item) {
  323. this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
  324. } else if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id !== item){
  325. this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
  326. }
  327. if (this.detail.attr_groups[i].attr_list[j].active) {
  328. sd = this.detail.attr_groups[i].attr_list[j].attr_id;
  329. str += `:${sd}`;
  330. }
  331. }
  332. }
  333. let result = str.substr(2);
  334. this.get_price_stock(result);
  335. },
  336. set_attr_active() {
  337. let item = 0;
  338. let str = ':';
  339. for (let i = 0; i < this.detail.attr_groups.length;i++) {
  340. for (let j = 0; j < this.detail.attr_groups[i].attr_list.length; j++) {
  341. if (j !== 0) {
  342. this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
  343. } else if (j === 0) {
  344. item = this.detail.attr_groups[i].attr_list[j].attr_id;
  345. str += `:${item}`;
  346. this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
  347. }
  348. }
  349. }
  350. this.get_price_stock(str.substr(2));
  351. },
  352. get_price_stock(data) {
  353. let attr = this.detail.attr;
  354. for (let i = 0; i < attr.length;i++) {
  355. if (attr[i].sign_id === data) {
  356. this.select_attr_group = attr[i].attr_list;
  357. let { deposit, swell_deposit, stock, price, price_member, pic_url } = attr[i];
  358. this.attr_deposit = deposit;
  359. this.attr_swell_deposit = swell_deposit;
  360. this.attr_stock = stock;
  361. this.attr_price = price;
  362. this.attr_price_member = price_member;
  363. this.attr_pic_url = pic_url;
  364. }
  365. }
  366. this.attr_stock == 0 ? this.buttonDisabled = true : this.buttonDisabled = false;
  367. },
  368. close_attr(data) {
  369. this.active = data;
  370. },
  371. getTime(end_prepayment_at) {
  372. let time = new Date(end_prepayment_at.replace(/-/g, '/')).getTime() - (new Date()).getTime();
  373. this.d = parseInt((time/1000/60/60/24));
  374. this.h = parseInt((time/1000/60/60)%24);
  375. this.m = parseInt((time/1000/60)%60);
  376. this.s = parseInt((time/1000)%60);
  377. this.end_time = setInterval(() => {
  378. let now = new Date().getTime();
  379. let timelog = new Date(end_prepayment_at.replace(/-/g, '/')).getTime();
  380. let time = timelog - now;
  381. if (time > 0) {
  382. let day = parseInt((time/1000/60/60/24));
  383. let hou = parseInt((time/1000/60/60)%24);
  384. let min = parseInt((time/1000/60)%60);
  385. let sec = parseInt((time/1000)%60);
  386. this.d = day;
  387. this.h = hou;
  388. this.m = min;
  389. this.s = sec;
  390. } else {
  391. clearInterval(this.end_time);
  392. }
  393. }, 1000);
  394. },
  395. setCoupon(index) {
  396. this.$set(this.detail.goods_coupon_center[index], 'is_receive', 1);
  397. }
  398. },
  399. components: {
  400. 'app-goods-banner': appGoodsBanner,
  401. 'detail-ad': detailAd,
  402. 'detail-price-share': detailPriceShare,
  403. 'detail-bottom-button': detailBottomButton,
  404. 'detail-attr': detailAttr,
  405. 'app-join-member': appJoinMember,
  406. 'app-goods-service': appGoodsService,
  407. 'app-related-suggestion-product': appRelatedSuggestionProduct,
  408. 'detail-discount': detailDiscount,
  409. 'detail-vip': detailVip,
  410. 'app-name': appName,
  411. 'app-vip-card': appVipCard,
  412. 'app-quick-navigation': appQuickNavigation,
  413. appGoodsFullReduce,
  414. appClose,
  415. bdDetail,
  416. bdComments,
  417. bdKb,
  418. bdHc,
  419. bdCoupon,
  420. bdXbc,
  421. uniNavBar
  422. },
  423. computed: {
  424. ...mapGetters('mallConfig',{
  425. vip: 'getVip',
  426. getTheme: 'getTheme'
  427. }),
  428. ...mapGetters('user', {
  429. is_vip: 'is_vip'
  430. }),
  431. ...mapState({
  432. mall: state => state.mallConfig.mall
  433. }),
  434. themeObject:function() {
  435. return {
  436. back: this.getTheme + '-m-back ' + this.getTheme,
  437. backP: this.getTheme + '-m-back-p ' + this.getTheme,
  438. backO: this.getTheme + '-m-back-o ' + this.getTheme,
  439. theme: this.getTheme,
  440. color: this.getTheme + '-m-text ' + this.getTheme,
  441. sBack: this.getTheme + '-s-back ' + this.getTheme,
  442. border: this.getTheme + '-m-border ' + this.getTheme,
  443. }
  444. },
  445. },
  446. onShareAppMessage() {
  447. let { app_share_title, name, id, app_share_pic } = this.detail;
  448. return this.$shareAppMessage({
  449. path: '/plugins/advance/detail/detail',
  450. title: app_share_title ? app_share_title : name,
  451. imageUrl: app_share_pic ? app_share_pic : '',
  452. params: { id }
  453. });
  454. },
  455. // #ifdef MP-WEIXIN
  456. onShareTimeline() {
  457. let { app_share_title, name, id } = this.detail;
  458. return this.$shareTimeline({
  459. title: app_share_title ? app_share_title : name,
  460. query: { id }
  461. });
  462. }
  463. // #endif
  464. }
  465. </script>
  466. <style scoped lang="scss">
  467. .goods-subtitle {
  468. padding: 0 #{20rpx};
  469. font-size: 24rpx;
  470. background-color: #ffffff;
  471. color: #999999;
  472. width: 702upx;
  473. margin: 0 24upx;
  474. }
  475. .join-member {
  476. background-color: #ffffff;
  477. padding: 0 #{24rpx};
  478. }
  479. .border-top {
  480. border-top: #{1rpx} solid #e2e2e2;
  481. }
  482. .zhe {
  483. height: #{80rpx};
  484. background-color: white;
  485. width: #{750rpx};
  486. padding: 0 #{24rpx};
  487. margin-top: #{20rpx};
  488. .symbol {
  489. width: #{116rpx};
  490. font-size: #{20rpx};
  491. color: #ff4544;
  492. border: #{1rpx} solid #ff4544;
  493. border-radius: #{4rpx};
  494. text-align: center;
  495. }
  496. .image {
  497. width: #{12rpx};
  498. height: #{22rpx};
  499. }
  500. .content {
  501. width: #{520rpx};
  502. font-size: #{21rpx};
  503. color: #666666;
  504. word-break: break-all;
  505. text-overflow: ellipsis;
  506. display: -webkit-box;
  507. -webkit-box-orient: vertical;
  508. -webkit-line-clamp: 1;
  509. overflow: hidden;
  510. margin-left: #{12rpx};
  511. }
  512. }
  513. .detail-vip {
  514. padding: 20upx;
  515. background-color: #ffffff;
  516. width: 702upx;
  517. margin: 0 24upx 0 24upx;
  518. border-radius: 0 0 15upx 15upx;
  519. }
  520. .u-bottom-fixed {
  521. position: fixed;
  522. bottom: 0;
  523. left: 0;
  524. width: 100%;
  525. z-index: 1500;
  526. background-color: #ffffff;
  527. }
  528. .u-bottom-height-0 {
  529. height: 110upx;
  530. }
  531. .u-bottom-height-1 {
  532. height: 190upx;
  533. }
  534. .goods-margin {
  535. margin-top: 20upx;
  536. }
  537. .bd-vip{
  538. padding: 24rpx 0;
  539. }
  540. .bd-vip image{
  541. height: 72rpx;
  542. width: 100%;
  543. }
  544. </style>