|
| xqd
@@ -1,548 +1,509 @@
|
|
|
-<template>
|
|
|
- <app-layout>
|
|
|
- <uni-nav-bar fixed="true" :background-color="titleBg" left-icon="back" @click-left="back"
|
|
|
- ></uni-nav-bar>
|
|
|
- <view v-if="!detail" class="u-goods-detail"></view>
|
|
|
- <template class="detail" v-if="detail">
|
|
|
- <!--商品轮播图-->
|
|
|
- <app-goods-banner
|
|
|
- v-bind:picList="detail.pic_url"
|
|
|
- v-bind:share="detail.share"
|
|
|
- v-bind:isCart="false"
|
|
|
- v-bind:videoUrl="detail.video_url"
|
|
|
- v-bind:goods_id="detail.id"
|
|
|
- sign="advance"
|
|
|
- ></app-goods-banner>
|
|
|
- <!--商品公告-->
|
|
|
- <detail-ad
|
|
|
- v-if="detail.advanceGoods.end_prepayment_at"
|
|
|
- v-bind:sales="detail.sales"
|
|
|
- v-bind:d="d"
|
|
|
- v-bind:h="h"
|
|
|
- v-bind:m="m"
|
|
|
- v-bind:s="s"
|
|
|
- v-bind:theme="getTheme"
|
|
|
- v-bind:detail="detail"
|
|
|
- ></detail-ad>
|
|
|
- <!--商品价格-->
|
|
|
- <detail-price-share
|
|
|
- :theme-object="themeObject"
|
|
|
- v-if="detail.attr.length > 0"
|
|
|
- v-bind:url="url"
|
|
|
- v-bind:original_price="detail.original_price"
|
|
|
- v-bind:attr="detail.attr"
|
|
|
- v-bind:price_min="detail.price_min"
|
|
|
- v-bind:price_max="detail.price_max"
|
|
|
- v-bind:group_max_member_price="detail.group_max_member_price"
|
|
|
- v-bind:group_min_member_price="detail.group_min_member_price"
|
|
|
- v-bind:end_prepayment_at="detail.advanceGoods.end_prepayment_at"
|
|
|
- v-bind:pay_limit="detail.advanceGoods.pay_limit"
|
|
|
- v-bind:level_show="detail.level_show"
|
|
|
- v-bind:cats="detail.goodsWarehouse.cats"
|
|
|
- v-bind:id="detail.id"
|
|
|
- v-bind:is_vip_card_user="detail.vip_card_appoint.is_vip_card_user"
|
|
|
- v-bind:discount="detail.vip_card_appoint.discount"
|
|
|
- v-bind:theme="getTheme"
|
|
|
- v-bind:has-poster-nav="true"
|
|
|
- v-bind:poster-config="poster_config + `&goods_id=` + detail.id"
|
|
|
- v-bind:poster-generate="poster_generate + `&goods_id=` + detail.id"
|
|
|
- v-bind:detail="detail"
|
|
|
- ></detail-price-share>
|
|
|
- <!-- 详情标题 -->
|
|
|
- <!--<app-name v-bind:name="detail.name"></app-name>-->
|
|
|
- <!-- <view v-if="detail.subtitle" class="goods-subtitle">
|
|
|
- <view class="t-omit-three">{{detail.subtitle}}</view>
|
|
|
- </view> -->
|
|
|
- <!--商品会员-->
|
|
|
- <view class="join-member" v-if="detail.level_show === 2">
|
|
|
- <view class="bd-vip" @click="goToMember">
|
|
|
- <image style="height: 72rpx; width: 100%;" src="/static/image/addvip.png" alt="">
|
|
|
- </view>
|
|
|
- <!--<app-join-member
|
|
|
- v-bind:member-min-price="`${detail.group_min_member_price}`"
|
|
|
- v-bind:member-max-price="`${detail.group_min_member_price}`"
|
|
|
- v-bind:price="`${detail.original_price}`"
|
|
|
- ></app-join-member>-->
|
|
|
- </view>
|
|
|
- <!--超级会员卡-->
|
|
|
- <view class="detail-vip" v-if="detail.vip_card_appoint.discount > 0">
|
|
|
- <app-vip-card top="0" background="#fff"></app-vip-card>
|
|
|
- </view>
|
|
|
- <template v-if="detail.advanceGoods.ladder_rules.length>0">
|
|
|
- <detail-discount
|
|
|
- v-bind:url="url"
|
|
|
- v-bind:ladder_rules="detail.advanceGoods.ladder_rules"
|
|
|
- v-bind:sales="detail.sales"
|
|
|
- ></detail-discount>
|
|
|
- </template>
|
|
|
- <bd-coupon @change="setCoupon" :theme="themeObject" :coupons="detail.goods_coupon_center"></bd-coupon>
|
|
|
- <bd-xbc
|
|
|
- :coAttr="is_open"
|
|
|
- :attr-list="select_attr_group"
|
|
|
- :type="detail.type"
|
|
|
- :guarantee-title="detail.guarantee_title"
|
|
|
- :guarantee-pic="detail.guarantee_pic"
|
|
|
- :param_content="detail.param_content"
|
|
|
- :param_name="detail.param_name"
|
|
|
- :services="detail.services"
|
|
|
- :attr-groups="detail.attr_groups"
|
|
|
- :goods-stock="detail.goods_stock"
|
|
|
- @openAttr="active = false"
|
|
|
- ></bd-xbc>
|
|
|
- <detail-attr
|
|
|
- v-if="!active && detail.attr.length>0"
|
|
|
- v-bind:theme="getTheme"
|
|
|
- v-bind:height="110"
|
|
|
- v-bind:cover_pic="detail.cover_pic"
|
|
|
- v-bind:attr="detail.attr"
|
|
|
- v-bind:attr_groups="detail.attr_groups"
|
|
|
- v-bind:goods_stock="detail.goods_stock"
|
|
|
- v-bind:attr_deposit="attr_deposit"
|
|
|
- v-bind:attr_swell_deposit="attr_swell_deposit"
|
|
|
- v-bind:attr_stock="attr_stock"
|
|
|
- v-bind:attr_price="attr_price"
|
|
|
- v-bind:attr_price_member="attr_price_member"
|
|
|
- v-bind:level_show="detail.level_show"
|
|
|
- v-bind:attr_pic_url="attr_pic_url"
|
|
|
- @select_attr="select_attr"
|
|
|
- @close_attr="close_attr"
|
|
|
- v-bind:num="num"
|
|
|
- v-bind:detail="detail"
|
|
|
- @change_num="change_num"
|
|
|
- @change_num_data="change_num_data"
|
|
|
- ></detail-attr>
|
|
|
- <bd-hc
|
|
|
- :integral="detail.goods_marketing_award.integral"
|
|
|
- :coupon="detail.goods_marketing_award.coupon"
|
|
|
- :card="detail.goods_marketing_award.card"
|
|
|
- :balance="detail.goods_marketing_award.balance"
|
|
|
- :theme="themeObject"
|
|
|
- ></bd-hc>
|
|
|
- <bd-kb
|
|
|
- :limit="detail.goods_marketing.limit"
|
|
|
- :express="detail.express"
|
|
|
- :shipping="detail.goods_marketing.shipping"
|
|
|
- :pickup="detail.goods_marketing.pickup"
|
|
|
- ></bd-kb>
|
|
|
- <bd-comments :goods-id="detail.id"></bd-comments>
|
|
|
- <bd-detail :detail="detail.detail"></bd-detail>
|
|
|
- <!-- 相关推荐 -->
|
|
|
- <app-related-suggestion-product text="您或许会喜欢" sign="advance" v-bind:theme="getTheme" v-bind:list="list"></app-related-suggestion-product>
|
|
|
- <!-- 空白格 -->
|
|
|
- <view class="safe-area-inset-bottom">
|
|
|
- <view :class="full_reduce ? 'u-bottom-height-1' : 'u-bottom-height-0'"></view>
|
|
|
- </view>
|
|
|
- <view v-if="is_open == 1" class="safe-area-inset-bottom u-bottom-fixed">
|
|
|
- <view v-if="full_reduce && active">
|
|
|
- <app-goods-full-reduce
|
|
|
- :theme="getTheme"
|
|
|
- :full_reduce="full_reduce"
|
|
|
- >
|
|
|
- </app-goods-full-reduce>
|
|
|
- </view>
|
|
|
- <detail-bottom-button
|
|
|
- v-bind:theme="getTheme"
|
|
|
- @close_attr="close_attr"
|
|
|
- v-bind:favorite="detail.favorite"
|
|
|
- v-bind:active="active"
|
|
|
- v-bind:goods_id="detail.id"
|
|
|
- @favorite="favorite"
|
|
|
- v-bind:detail="detail"
|
|
|
- v-bind:num="num"
|
|
|
- v-bind:buttonDisabled="buttonDisabled"
|
|
|
- v-bind:end_prepayment_at="detail.advanceGoods.end_prepayment_at"
|
|
|
- @request="request_detail"
|
|
|
- ></detail-bottom-button>
|
|
|
- </view>
|
|
|
- <app-close v-if="showClose" :modal="false" @update="getMall"></app-close>
|
|
|
- <!-- 快捷导航 -->
|
|
|
- <app-quick-navigation></app-quick-navigation>
|
|
|
- </template>
|
|
|
- </app-layout>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { mapState, mapGetters } from'vuex';
|
|
|
- import appGoodsBanner from '../../../components/page-component/goods/app-goods-banner.vue';
|
|
|
- import detailAd from '../components/detail-ad.vue';
|
|
|
- import detailPriceShare from '../components/detail-price-share.vue';
|
|
|
- import detailBottomButton from '../components/detail-bottom-button.vue';
|
|
|
- import detailAttr from '../components/detail-attr.vue';
|
|
|
- import appJoinMember from '../../../components/page-component/app-join-member/app-join-member.vue';
|
|
|
- import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue'
|
|
|
- import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
|
|
|
- import detailDiscount from '../components/detail-discount.vue';
|
|
|
- import detailVip from '../components/detail-vip.vue';
|
|
|
- import appVipCard from '../../../components/page-component/app-vip-card/app-vip-card.vue';
|
|
|
- import appName from '../../../components/page-component/app-goods-detail/app-name.vue';
|
|
|
- import appQuickNavigation from '../../../components/page-component/app-quick-navigation/app-quick-navigation.vue';
|
|
|
- import appGoodsFullReduce from '../../../components/page-component/goods/app-goods-full-reduce.vue';
|
|
|
- import appClose from '@/components/basic-component/app-close/app-close.vue';
|
|
|
- import bdDetail from '@/components/page-component/goods/bd-detail.vue';
|
|
|
- import bdComments from '@/components/page-component/goods/bd-comments.vue';
|
|
|
- import bdKb from '@/components/page-component/goods/bd-kb.vue';
|
|
|
- import bdHc from '@/components/page-component/goods/bd-hc.vue';
|
|
|
- import bdCoupon from '@/components/page-component/goods/bd-coupon.vue';
|
|
|
- import bdXbc from '@/components/page-component/goods/bd-xbc.vue';
|
|
|
- import uniNavBar from '@/components/page-component/uni-plugins/uni-nav-bar.vue';
|
|
|
-
|
|
|
- export default {
|
|
|
- name: "detail",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showClose: false,
|
|
|
- is_open: 0,
|
|
|
- detail: null,
|
|
|
- full_reduce: null,
|
|
|
- active: true,
|
|
|
- attr_deposit: '0',
|
|
|
- attr_swell_deposit: '0',
|
|
|
- attr_stock: 0,
|
|
|
- attr_price: '0',
|
|
|
- attr_price_member: 0,
|
|
|
- url: '',
|
|
|
- level_show: 0,
|
|
|
- loading: false,
|
|
|
- select_attr_group: [],
|
|
|
- zhe: false,
|
|
|
- list: [],
|
|
|
- num: 1,
|
|
|
- shareShow: false,
|
|
|
- attr_pic_url: '',
|
|
|
- goods_id: -1,
|
|
|
- d: 0,
|
|
|
- h: 0,
|
|
|
- m: 0,
|
|
|
- s: 0,
|
|
|
- end_time: -1,
|
|
|
- buttonDisabled: false,
|
|
|
- poster_config: this.$api.advance.poster_config,
|
|
|
- poster_generate: this.$api.advance.poster_generate,
|
|
|
- titleBg:'rgba(255,255,255,0)',
|
|
|
- root: this.$siteInfo.root,
|
|
|
- }
|
|
|
- },
|
|
|
- onPageScroll:function(e){
|
|
|
- this.titleBg = 'rgba(255,255,255,'+e.scrollTop / 300+')';
|
|
|
- },
|
|
|
- onLoad(data) {
|
|
|
- this.goods_id = data.id;
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- wx.showShareMenu({
|
|
|
- menus: ['shareAppMessage', 'shareTimeline']
|
|
|
- })
|
|
|
- // #endif
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.showClose = false;
|
|
|
- setTimeout(()=>{
|
|
|
- this.showClose = true;
|
|
|
- })
|
|
|
- this.$nextTick(() => {
|
|
|
- this.request_detail({id: this.goods_id});
|
|
|
- this.$request({
|
|
|
- url: this.$api.advance.goods_list,
|
|
|
- data: {
|
|
|
- goods_id: this.goods_id,
|
|
|
- }
|
|
|
- }).then(response => {
|
|
|
- if (response.code === 0) {
|
|
|
- this.list = response.data.list;
|
|
|
- } else if (response.code === 1) {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: response.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- clearInterval(this.end_time);
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- clearInterval(this.end_time);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goToMember(){
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/member/index/index'
|
|
|
- })
|
|
|
- },
|
|
|
- getMall(e) {
|
|
|
- this.is_open = e.is_open;
|
|
|
- },
|
|
|
- request_detail(data) {
|
|
|
- this.$request({
|
|
|
- url: this.$api.advance.detail,
|
|
|
- data: {
|
|
|
- id: data.id
|
|
|
- },
|
|
|
- method: 'get'
|
|
|
- }).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.detail = res.data.detail;
|
|
|
- if (this.detail.goods_activity) {
|
|
|
- this.full_reduce = this.detail.goods_activity.full_reduce;
|
|
|
- }
|
|
|
- this.detail.num = 1;
|
|
|
- this.loading = true;
|
|
|
- this.url = `${this.$api.advance.poster}&goods_id=${this.detail.id}`;
|
|
|
- this.getTime(this.detail.advanceGoods.end_prepayment_at);
|
|
|
- this.set_attr_active();
|
|
|
- } else if (res.code === 1) {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showModal({
|
|
|
- content: res.msg,
|
|
|
- showCancel: false,
|
|
|
- success() {
|
|
|
- uni.navigateBack();
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- open_share() {
|
|
|
- this.shareShow = true;
|
|
|
- },
|
|
|
- change_num(data) {
|
|
|
- this.num += data;
|
|
|
- },
|
|
|
- change_num_data(data) {
|
|
|
- this.num = data;
|
|
|
- },
|
|
|
- favorite(data) {
|
|
|
- this.detail.favorite = data;
|
|
|
- },
|
|
|
- select_attr(data, item) {
|
|
|
- let attr_groups = this.detail.attr_groups;
|
|
|
- let str = ':';
|
|
|
- let sd = 0;
|
|
|
- for (let i = 0; i < attr_groups.length;i++) {
|
|
|
- let attr_list = this.detail.attr_groups[i].attr_list;
|
|
|
- for (let j = 0; j < attr_list.length; j++) {
|
|
|
- if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id === item) {
|
|
|
- this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
|
|
|
- } else if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id !== item){
|
|
|
- this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
|
|
|
- }
|
|
|
- if (this.detail.attr_groups[i].attr_list[j].active) {
|
|
|
- sd = this.detail.attr_groups[i].attr_list[j].attr_id;
|
|
|
- str += `:${sd}`;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- let result = str.substr(2);
|
|
|
- this.get_price_stock(result);
|
|
|
- },
|
|
|
- set_attr_active() {
|
|
|
- let item = 0;
|
|
|
- let str = ':';
|
|
|
- for (let i = 0; i < this.detail.attr_groups.length;i++) {
|
|
|
- for (let j = 0; j < this.detail.attr_groups[i].attr_list.length; j++) {
|
|
|
- if (j !== 0) {
|
|
|
- this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
|
|
|
- } else if (j === 0) {
|
|
|
- item = this.detail.attr_groups[i].attr_list[j].attr_id;
|
|
|
- str += `:${item}`;
|
|
|
- this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- this.get_price_stock(str.substr(2));
|
|
|
- },
|
|
|
- get_price_stock(data) {
|
|
|
- let attr = this.detail.attr;
|
|
|
- for (let i = 0; i < attr.length;i++) {
|
|
|
- if (attr[i].sign_id === data) {
|
|
|
- this.select_attr_group = attr[i].attr_list;
|
|
|
- let { deposit, swell_deposit, stock, price, price_member, pic_url } = attr[i];
|
|
|
- this.attr_deposit = deposit;
|
|
|
- this.attr_swell_deposit = swell_deposit;
|
|
|
- this.attr_stock = stock;
|
|
|
- this.attr_price = price;
|
|
|
- this.attr_price_member = price_member;
|
|
|
- this.attr_pic_url = pic_url;
|
|
|
- }
|
|
|
- }
|
|
|
- this.attr_stock == 0 ? this.buttonDisabled = true : this.buttonDisabled = false;
|
|
|
- },
|
|
|
- close_attr(data) {
|
|
|
- this.active = data;
|
|
|
- },
|
|
|
- getTime(end_prepayment_at) {
|
|
|
- let time = new Date(end_prepayment_at.replace(/-/g, '/')).getTime() - (new Date()).getTime();
|
|
|
- this.d = parseInt((time/1000/60/60/24));
|
|
|
- this.h = parseInt((time/1000/60/60)%24);
|
|
|
- this.m = parseInt((time/1000/60)%60);
|
|
|
- this.s = parseInt((time/1000)%60);
|
|
|
- this.end_time = setInterval(() => {
|
|
|
- let now = new Date().getTime();
|
|
|
- let timelog = new Date(end_prepayment_at.replace(/-/g, '/')).getTime();
|
|
|
- let time = timelog - now;
|
|
|
- if (time > 0) {
|
|
|
- let day = parseInt((time/1000/60/60/24));
|
|
|
- let hou = parseInt((time/1000/60/60)%24);
|
|
|
- let min = parseInt((time/1000/60)%60);
|
|
|
- let sec = parseInt((time/1000)%60);
|
|
|
- this.d = day;
|
|
|
- this.h = hou;
|
|
|
- this.m = min;
|
|
|
- this.s = sec;
|
|
|
- } else {
|
|
|
- clearInterval(this.end_time);
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
- setCoupon(index) {
|
|
|
- this.$set(this.detail.goods_coupon_center[index], 'is_receive', 1);
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- 'app-goods-banner': appGoodsBanner,
|
|
|
- 'detail-ad': detailAd,
|
|
|
- 'detail-price-share': detailPriceShare,
|
|
|
- 'detail-bottom-button': detailBottomButton,
|
|
|
- 'detail-attr': detailAttr,
|
|
|
- 'app-join-member': appJoinMember,
|
|
|
- 'app-goods-service': appGoodsService,
|
|
|
- 'app-related-suggestion-product': appRelatedSuggestionProduct,
|
|
|
- 'detail-discount': detailDiscount,
|
|
|
- 'detail-vip': detailVip,
|
|
|
- 'app-name': appName,
|
|
|
- 'app-vip-card': appVipCard,
|
|
|
- 'app-quick-navigation': appQuickNavigation,
|
|
|
- appGoodsFullReduce,
|
|
|
- appClose,
|
|
|
- bdDetail,
|
|
|
- bdComments,
|
|
|
- bdKb,
|
|
|
- bdHc,
|
|
|
- bdCoupon,
|
|
|
- bdXbc,
|
|
|
- uniNavBar
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters('mallConfig',{
|
|
|
- vip: 'getVip',
|
|
|
- getTheme: 'getTheme'
|
|
|
- }),
|
|
|
- ...mapGetters('user', {
|
|
|
- is_vip: 'is_vip'
|
|
|
- }),
|
|
|
- ...mapState({
|
|
|
- mall: state => state.mallConfig.mall
|
|
|
- }),
|
|
|
- themeObject:function() {
|
|
|
- return {
|
|
|
- back: this.getTheme + '-m-back ' + this.getTheme,
|
|
|
- backP: this.getTheme + '-m-back-p ' + this.getTheme,
|
|
|
- backO: this.getTheme + '-m-back-o ' + this.getTheme,
|
|
|
- theme: this.getTheme,
|
|
|
- color: this.getTheme + '-m-text ' + this.getTheme,
|
|
|
- sBack: this.getTheme + '-s-back ' + this.getTheme,
|
|
|
- border: this.getTheme + '-m-border ' + this.getTheme,
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- onShareAppMessage() {
|
|
|
- let { app_share_title, name, id, app_share_pic } = this.detail;
|
|
|
- return this.$shareAppMessage({
|
|
|
- path: '/plugins/advance/detail/detail',
|
|
|
- title: app_share_title ? app_share_title : name,
|
|
|
- imageUrl: app_share_pic ? app_share_pic : '',
|
|
|
- params: { id }
|
|
|
- });
|
|
|
- },
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- onShareTimeline() {
|
|
|
- let { app_share_title, name, id } = this.detail;
|
|
|
- return this.$shareTimeline({
|
|
|
- title: app_share_title ? app_share_title : name,
|
|
|
- query: { id }
|
|
|
- });
|
|
|
- }
|
|
|
- // #endif
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
- .goods-subtitle {
|
|
|
- padding: 0 #{20rpx};
|
|
|
- font-size: 24rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- color: #999999;
|
|
|
- width: 702upx;
|
|
|
- margin: 0 24upx;
|
|
|
- }
|
|
|
-
|
|
|
- .join-member {
|
|
|
- background-color: #ffffff;
|
|
|
- padding: 0 #{30rpx};
|
|
|
- }
|
|
|
- .border-top {
|
|
|
- border-top: #{1rpx} solid #e2e2e2;
|
|
|
- }
|
|
|
- .zhe {
|
|
|
- height: #{80rpx};
|
|
|
- background-color: white;
|
|
|
- width: #{750rpx};
|
|
|
- padding: 0 #{24rpx};
|
|
|
- margin-top: #{20rpx};
|
|
|
- .symbol {
|
|
|
- width: #{116rpx};
|
|
|
- font-size: #{20rpx};
|
|
|
- color: #ff4544;
|
|
|
- border: #{1rpx} solid #ff4544;
|
|
|
- border-radius: #{4rpx};
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .image {
|
|
|
- width: #{12rpx};
|
|
|
- height: #{22rpx};
|
|
|
- }
|
|
|
- .content {
|
|
|
- width: #{520rpx};
|
|
|
- font-size: #{21rpx};
|
|
|
- color: #666666;
|
|
|
- word-break: break-all;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- overflow: hidden;
|
|
|
- margin-left: #{12rpx};
|
|
|
- }
|
|
|
- }
|
|
|
- .detail-vip {
|
|
|
- padding: 20upx;
|
|
|
- background-color: #ffffff;
|
|
|
- width: 702upx;
|
|
|
- margin: 0 24upx 0 24upx;
|
|
|
- border-radius: 0 0 15upx 15upx;
|
|
|
- }
|
|
|
- .u-bottom-fixed {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- z-index: 1500;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
- .u-bottom-height-0 {
|
|
|
- height: 110upx;
|
|
|
- }
|
|
|
- .u-bottom-height-1 {
|
|
|
- height: 190upx;
|
|
|
- }
|
|
|
- .goods-margin {
|
|
|
- margin-top: 20upx;
|
|
|
- }
|
|
|
- .bd-vip{
|
|
|
- padding: 24rpx 0;
|
|
|
- }
|
|
|
- .bd-vip image{
|
|
|
- height: 130rpx;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <app-layout>
|
|
|
+ <uni-nav-bar fixed="true" :background-color="titleBg" left-icon="back" @click-left="back"></uni-nav-bar>
|
|
|
+ <view v-if="!detail" class="u-goods-detail"></view>
|
|
|
+ <template class="detail" v-if="detail">
|
|
|
+ <!--商品轮播图-->
|
|
|
+ <app-goods-banner v-bind:picList="detail.pic_url" v-bind:share="detail.share" v-bind:isCart="false" v-bind:videoUrl="detail.video_url"
|
|
|
+ v-bind:goods_id="detail.id" sign="advance"></app-goods-banner>
|
|
|
+ <!--商品公告-->
|
|
|
+ <detail-ad v-if="detail.advanceGoods.end_prepayment_at" v-bind:sales="detail.sales" v-bind:d="d" v-bind:h="h"
|
|
|
+ v-bind:m="m" v-bind:s="s" v-bind:theme="getTheme" v-bind:detail="detail"></detail-ad>
|
|
|
+ <!--商品价格-->
|
|
|
+ <detail-price-share :theme-object="themeObject" v-if="detail.attr.length > 0" v-bind:url="url" v-bind:original_price="detail.original_price"
|
|
|
+ v-bind:attr="detail.attr" v-bind:price_min="detail.price_min" v-bind:price_max="detail.price_max"
|
|
|
+ v-bind:group_max_member_price="detail.group_max_member_price" v-bind:group_min_member_price="detail.group_min_member_price"
|
|
|
+ v-bind:end_prepayment_at="detail.advanceGoods.end_prepayment_at" v-bind:pay_limit="detail.advanceGoods.pay_limit"
|
|
|
+ v-bind:level_show="detail.level_show" v-bind:cats="detail.goodsWarehouse.cats" v-bind:id="detail.id"
|
|
|
+ v-bind:is_vip_card_user="detail.vip_card_appoint.is_vip_card_user" v-bind:discount="detail.vip_card_appoint.discount"
|
|
|
+ v-bind:theme="getTheme" v-bind:has-poster-nav="true" v-bind:poster-config="poster_config + `&goods_id=` + detail.id"
|
|
|
+ v-bind:poster-generate="poster_generate + `&goods_id=` + detail.id" v-bind:detail="detail"></detail-price-share>
|
|
|
+ <!-- 详情标题 -->
|
|
|
+ <!--<app-name v-bind:name="detail.name"></app-name>-->
|
|
|
+ <!-- <view v-if="detail.subtitle" class="goods-subtitle">
|
|
|
+ <view class="t-omit-three">{{detail.subtitle}}</view>
|
|
|
+ </view> -->
|
|
|
+ <!--商品会员-->
|
|
|
+ <view class="join-member" v-if="detail.level_show === 2">
|
|
|
+ <view class="bd-vip" @click="goToMember">
|
|
|
+ <image style="height: 72rpx; width: 100%;" src="/static/image/addvip.png" alt="">
|
|
|
+ </view>
|
|
|
+ <!--<app-join-member
|
|
|
+ v-bind:member-min-price="`${detail.group_min_member_price}`"
|
|
|
+ v-bind:member-max-price="`${detail.group_min_member_price}`"
|
|
|
+ v-bind:price="`${detail.original_price}`"
|
|
|
+ ></app-join-member>-->
|
|
|
+ </view>
|
|
|
+ <!--超级会员卡-->
|
|
|
+ <view class="detail-vip" v-if="detail.vip_card_appoint.discount > 0">
|
|
|
+ <app-vip-card top="0" background="#fff"></app-vip-card>
|
|
|
+ </view>
|
|
|
+ <template v-if="detail.advanceGoods.ladder_rules.length>0">
|
|
|
+ <detail-discount v-bind:url="url" v-bind:ladder_rules="detail.advanceGoods.ladder_rules" v-bind:sales="detail.sales"></detail-discount>
|
|
|
+ </template>
|
|
|
+ <bd-coupon @change="setCoupon" :theme="themeObject" :coupons="detail.goods_coupon_center"></bd-coupon>
|
|
|
+ <bd-xbc :coAttr="is_open" :attr-list="select_attr_group" :type="detail.type" :guarantee-title="detail.guarantee_title"
|
|
|
+ :guarantee-pic="detail.guarantee_pic" :param_content="detail.param_content" :param_name="detail.param_name"
|
|
|
+ :services="detail.services" :attr-groups="detail.attr_groups" :goods-stock="detail.goods_stock" @openAttr="active = false"></bd-xbc>
|
|
|
+ <detail-attr v-if="!active && detail.attr.length>0" v-bind:theme="getTheme" v-bind:height="110" v-bind:cover_pic="detail.cover_pic"
|
|
|
+ v-bind:attr="detail.attr" v-bind:attr_groups="detail.attr_groups" v-bind:goods_stock="detail.goods_stock"
|
|
|
+ v-bind:attr_deposit="attr_deposit" v-bind:attr_swell_deposit="attr_swell_deposit" v-bind:attr_stock="attr_stock"
|
|
|
+ v-bind:attr_price="attr_price" v-bind:attr_price_member="attr_price_member" v-bind:level_show="detail.level_show"
|
|
|
+ v-bind:attr_pic_url="attr_pic_url" @select_attr="select_attr" @close_attr="close_attr" v-bind:num="num"
|
|
|
+ v-bind:detail="detail" @change_num="change_num" @change_num_data="change_num_data"></detail-attr>
|
|
|
+ <bd-hc :integral="detail.goods_marketing_award.integral" :coupon="detail.goods_marketing_award.coupon" :card="detail.goods_marketing_award.card"
|
|
|
+ :balance="detail.goods_marketing_award.balance" :theme="themeObject"></bd-hc>
|
|
|
+ <bd-kb :limit="detail.goods_marketing.limit" :express="detail.express" :shipping="detail.goods_marketing.shipping"
|
|
|
+ :pickup="detail.goods_marketing.pickup"></bd-kb>
|
|
|
+ <bd-comments :goods-id="detail.id"></bd-comments>
|
|
|
+ <bd-detail :detail="detail.detail"></bd-detail>
|
|
|
+ <!-- 相关推荐 -->
|
|
|
+ <app-related-suggestion-product text="您或许会喜欢" sign="advance" v-bind:theme="getTheme" v-bind:list="list"></app-related-suggestion-product>
|
|
|
+ <!-- 空白格 -->
|
|
|
+ <view class="safe-area-inset-bottom">
|
|
|
+ <view :class="full_reduce ? 'u-bottom-height-1' : 'u-bottom-height-0'"></view>
|
|
|
+ </view>
|
|
|
+ <view v-if="is_open == 1" class="safe-area-inset-bottom u-bottom-fixed">
|
|
|
+ <view v-if="full_reduce && active">
|
|
|
+ <app-goods-full-reduce :theme="getTheme" :full_reduce="full_reduce">
|
|
|
+ </app-goods-full-reduce>
|
|
|
+ </view>
|
|
|
+ <detail-bottom-button v-bind:theme="getTheme" @close_attr="close_attr" v-bind:favorite="detail.favorite"
|
|
|
+ v-bind:active="active" v-bind:goods_id="detail.id" @favorite="favorite" v-bind:detail="detail" v-bind:num="num"
|
|
|
+ v-bind:buttonDisabled="buttonDisabled" v-bind:end_prepayment_at="detail.advanceGoods.end_prepayment_at" @request="request_detail"></detail-bottom-button>
|
|
|
+ </view>
|
|
|
+ <app-close v-if="showClose" :modal="false" @update="getMall"></app-close>
|
|
|
+ <!-- 快捷导航 -->
|
|
|
+ <app-quick-navigation></app-quick-navigation>
|
|
|
+ </template>
|
|
|
+ </app-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex';
|
|
|
+ import appGoodsBanner from '../../../components/page-component/goods/app-goods-banner.vue';
|
|
|
+ import detailAd from '../components/detail-ad.vue';
|
|
|
+ import detailPriceShare from '../components/detail-price-share.vue';
|
|
|
+ import detailBottomButton from '../components/detail-bottom-button.vue';
|
|
|
+ import detailAttr from '../components/detail-attr.vue';
|
|
|
+ import appJoinMember from '../../../components/page-component/app-join-member/app-join-member.vue';
|
|
|
+ import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue'
|
|
|
+ import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
|
|
|
+ import detailDiscount from '../components/detail-discount.vue';
|
|
|
+ import detailVip from '../components/detail-vip.vue';
|
|
|
+ import appVipCard from '../../../components/page-component/app-vip-card/app-vip-card.vue';
|
|
|
+ import appName from '../../../components/page-component/app-goods-detail/app-name.vue';
|
|
|
+ import appQuickNavigation from '../../../components/page-component/app-quick-navigation/app-quick-navigation.vue';
|
|
|
+ import appGoodsFullReduce from '../../../components/page-component/goods/app-goods-full-reduce.vue';
|
|
|
+ import appClose from '@/components/basic-component/app-close/app-close.vue';
|
|
|
+ import bdDetail from '@/components/page-component/goods/bd-detail.vue';
|
|
|
+ import bdComments from '@/components/page-component/goods/bd-comments.vue';
|
|
|
+ import bdKb from '@/components/page-component/goods/bd-kb.vue';
|
|
|
+ import bdHc from '@/components/page-component/goods/bd-hc.vue';
|
|
|
+ import bdCoupon from '@/components/page-component/goods/bd-coupon.vue';
|
|
|
+ import bdXbc from '@/components/page-component/goods/bd-xbc.vue';
|
|
|
+ import uniNavBar from '@/components/page-component/uni-plugins/uni-nav-bar.vue';
|
|
|
+ import routeJump from '../../../core/routeJump.js';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "detail",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showClose: false,
|
|
|
+ is_open: 0,
|
|
|
+ detail: null,
|
|
|
+ full_reduce: null,
|
|
|
+ active: true,
|
|
|
+ attr_deposit: '0',
|
|
|
+ attr_swell_deposit: '0',
|
|
|
+ attr_stock: 0,
|
|
|
+ attr_price: '0',
|
|
|
+ attr_price_member: 0,
|
|
|
+ url: '',
|
|
|
+ level_show: 0,
|
|
|
+ loading: false,
|
|
|
+ select_attr_group: [],
|
|
|
+ zhe: false,
|
|
|
+ list: [],
|
|
|
+ num: 1,
|
|
|
+ shareShow: false,
|
|
|
+ attr_pic_url: '',
|
|
|
+ goods_id: -1,
|
|
|
+ d: 0,
|
|
|
+ h: 0,
|
|
|
+ m: 0,
|
|
|
+ s: 0,
|
|
|
+ end_time: -1,
|
|
|
+ buttonDisabled: false,
|
|
|
+ poster_config: this.$api.advance.poster_config,
|
|
|
+ poster_generate: this.$api.advance.poster_generate,
|
|
|
+ titleBg: 'rgba(255,255,255,0)',
|
|
|
+ root: this.$siteInfo.root,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll: function(e) {
|
|
|
+ this.titleBg = 'rgba(255,255,255,' + e.scrollTop / 300 + ')';
|
|
|
+ },
|
|
|
+ onLoad(data) {
|
|
|
+ this.goods_id = data.id;
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ wx.showShareMenu({
|
|
|
+ menus: ['shareAppMessage', 'shareTimeline']
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.showClose = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.showClose = true;
|
|
|
+ })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.request_detail({
|
|
|
+ id: this.goods_id
|
|
|
+ });
|
|
|
+ this.$request({
|
|
|
+ url: this.$api.advance.goods_list,
|
|
|
+ data: {
|
|
|
+ goods_id: this.goods_id,
|
|
|
+ }
|
|
|
+ }).then(response => {
|
|
|
+ if (response.code === 0) {
|
|
|
+ this.list = response.data.list;
|
|
|
+ } else if (response.code === 1) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: response.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ clearInterval(this.end_time);
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ clearInterval(this.end_time);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ back(){
|
|
|
+ routeJump({
|
|
|
+ open_type: 'back',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goToMember() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/member/index/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getMall(e) {
|
|
|
+ this.is_open = e.is_open;
|
|
|
+ },
|
|
|
+ request_detail(data) {
|
|
|
+ this.$request({
|
|
|
+ url: this.$api.advance.detail,
|
|
|
+ data: {
|
|
|
+ id: data.id
|
|
|
+ },
|
|
|
+ method: 'get'
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.detail = res.data.detail;
|
|
|
+ if (this.detail.goods_activity) {
|
|
|
+ this.full_reduce = this.detail.goods_activity.full_reduce;
|
|
|
+ }
|
|
|
+ this.detail.num = 1;
|
|
|
+ this.loading = true;
|
|
|
+ this.url = `${this.$api.advance.poster}&goods_id=${this.detail.id}`;
|
|
|
+ this.getTime(this.detail.advanceGoods.end_prepayment_at);
|
|
|
+ this.set_attr_active();
|
|
|
+ } else if (res.code === 1) {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showModal({
|
|
|
+ content: res.msg,
|
|
|
+ showCancel: false,
|
|
|
+ success() {
|
|
|
+ uni.navigateBack();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ open_share() {
|
|
|
+ this.shareShow = true;
|
|
|
+ },
|
|
|
+ change_num(data) {
|
|
|
+ this.num += data;
|
|
|
+ },
|
|
|
+ change_num_data(data) {
|
|
|
+ this.num = data;
|
|
|
+ },
|
|
|
+ favorite(data) {
|
|
|
+ this.detail.favorite = data;
|
|
|
+ },
|
|
|
+ select_attr(data, item) {
|
|
|
+ let attr_groups = this.detail.attr_groups;
|
|
|
+ let str = ':';
|
|
|
+ let sd = 0;
|
|
|
+ for (let i = 0; i < attr_groups.length; i++) {
|
|
|
+ let attr_list = this.detail.attr_groups[i].attr_list;
|
|
|
+ for (let j = 0; j < attr_list.length; j++) {
|
|
|
+ if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id === item) {
|
|
|
+ this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
|
|
|
+ } else if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id !== item) {
|
|
|
+ this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
|
|
|
+ }
|
|
|
+ if (this.detail.attr_groups[i].attr_list[j].active) {
|
|
|
+ sd = this.detail.attr_groups[i].attr_list[j].attr_id;
|
|
|
+ str += `:${sd}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let result = str.substr(2);
|
|
|
+ this.get_price_stock(result);
|
|
|
+ },
|
|
|
+ set_attr_active() {
|
|
|
+ let item = 0;
|
|
|
+ let str = ':';
|
|
|
+ for (let i = 0; i < this.detail.attr_groups.length; i++) {
|
|
|
+ for (let j = 0; j < this.detail.attr_groups[i].attr_list.length; j++) {
|
|
|
+ if (j !== 0) {
|
|
|
+ this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
|
|
|
+ } else if (j === 0) {
|
|
|
+ item = this.detail.attr_groups[i].attr_list[j].attr_id;
|
|
|
+ str += `:${item}`;
|
|
|
+ this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.get_price_stock(str.substr(2));
|
|
|
+ },
|
|
|
+ get_price_stock(data) {
|
|
|
+ let attr = this.detail.attr;
|
|
|
+ for (let i = 0; i < attr.length; i++) {
|
|
|
+ if (attr[i].sign_id === data) {
|
|
|
+ this.select_attr_group = attr[i].attr_list;
|
|
|
+ let {
|
|
|
+ deposit,
|
|
|
+ swell_deposit,
|
|
|
+ stock,
|
|
|
+ price,
|
|
|
+ price_member,
|
|
|
+ pic_url
|
|
|
+ } = attr[i];
|
|
|
+ this.attr_deposit = deposit;
|
|
|
+ this.attr_swell_deposit = swell_deposit;
|
|
|
+ this.attr_stock = stock;
|
|
|
+ this.attr_price = price;
|
|
|
+ this.attr_price_member = price_member;
|
|
|
+ this.attr_pic_url = pic_url;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.attr_stock == 0 ? this.buttonDisabled = true : this.buttonDisabled = false;
|
|
|
+ },
|
|
|
+ close_attr(data) {
|
|
|
+ this.active = data;
|
|
|
+ },
|
|
|
+ getTime(end_prepayment_at) {
|
|
|
+ let time = new Date(end_prepayment_at.replace(/-/g, '/')).getTime() - (new Date()).getTime();
|
|
|
+ this.d = parseInt((time / 1000 / 60 / 60 / 24));
|
|
|
+ this.h = parseInt((time / 1000 / 60 / 60) % 24);
|
|
|
+ this.m = parseInt((time / 1000 / 60) % 60);
|
|
|
+ this.s = parseInt((time / 1000) % 60);
|
|
|
+ this.end_time = setInterval(() => {
|
|
|
+ let now = new Date().getTime();
|
|
|
+ let timelog = new Date(end_prepayment_at.replace(/-/g, '/')).getTime();
|
|
|
+ let time = timelog - now;
|
|
|
+ if (time > 0) {
|
|
|
+ let day = parseInt((time / 1000 / 60 / 60 / 24));
|
|
|
+ let hou = parseInt((time / 1000 / 60 / 60) % 24);
|
|
|
+ let min = parseInt((time / 1000 / 60) % 60);
|
|
|
+ let sec = parseInt((time / 1000) % 60);
|
|
|
+ this.d = day;
|
|
|
+ this.h = hou;
|
|
|
+ this.m = min;
|
|
|
+ this.s = sec;
|
|
|
+ } else {
|
|
|
+ clearInterval(this.end_time);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ setCoupon(index) {
|
|
|
+ this.$set(this.detail.goods_coupon_center[index], 'is_receive', 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ 'app-goods-banner': appGoodsBanner,
|
|
|
+ 'detail-ad': detailAd,
|
|
|
+ 'detail-price-share': detailPriceShare,
|
|
|
+ 'detail-bottom-button': detailBottomButton,
|
|
|
+ 'detail-attr': detailAttr,
|
|
|
+ 'app-join-member': appJoinMember,
|
|
|
+ 'app-goods-service': appGoodsService,
|
|
|
+ 'app-related-suggestion-product': appRelatedSuggestionProduct,
|
|
|
+ 'detail-discount': detailDiscount,
|
|
|
+ 'detail-vip': detailVip,
|
|
|
+ 'app-name': appName,
|
|
|
+ 'app-vip-card': appVipCard,
|
|
|
+ 'app-quick-navigation': appQuickNavigation,
|
|
|
+ appGoodsFullReduce,
|
|
|
+ appClose,
|
|
|
+ bdDetail,
|
|
|
+ bdComments,
|
|
|
+ bdKb,
|
|
|
+ bdHc,
|
|
|
+ bdCoupon,
|
|
|
+ bdXbc,
|
|
|
+ uniNavBar
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('mallConfig', {
|
|
|
+ vip: 'getVip',
|
|
|
+ getTheme: 'getTheme'
|
|
|
+ }),
|
|
|
+ ...mapGetters('user', {
|
|
|
+ is_vip: 'is_vip'
|
|
|
+ }),
|
|
|
+ ...mapState({
|
|
|
+ mall: state => state.mallConfig.mall
|
|
|
+ }),
|
|
|
+ themeObject: function() {
|
|
|
+ return {
|
|
|
+ back: this.getTheme + '-m-back ' + this.getTheme,
|
|
|
+ backP: this.getTheme + '-m-back-p ' + this.getTheme,
|
|
|
+ backO: this.getTheme + '-m-back-o ' + this.getTheme,
|
|
|
+ theme: this.getTheme,
|
|
|
+ color: this.getTheme + '-m-text ' + this.getTheme,
|
|
|
+ sBack: this.getTheme + '-s-back ' + this.getTheme,
|
|
|
+ border: this.getTheme + '-m-border ' + this.getTheme,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onShareAppMessage() {
|
|
|
+ let {
|
|
|
+ app_share_title,
|
|
|
+ name,
|
|
|
+ id,
|
|
|
+ app_share_pic
|
|
|
+ } = this.detail;
|
|
|
+ return this.$shareAppMessage({
|
|
|
+ path: '/plugins/advance/detail/detail',
|
|
|
+ title: app_share_title ? app_share_title : name,
|
|
|
+ imageUrl: app_share_pic ? app_share_pic : '',
|
|
|
+ params: {
|
|
|
+ id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ onShareTimeline() {
|
|
|
+ let {
|
|
|
+ app_share_title,
|
|
|
+ name,
|
|
|
+ id
|
|
|
+ } = this.detail;
|
|
|
+ return this.$shareTimeline({
|
|
|
+ title: app_share_title ? app_share_title : name,
|
|
|
+ query: {
|
|
|
+ id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .goods-subtitle {
|
|
|
+ padding: 0 #{20rpx};
|
|
|
+ font-size: 24rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #999999;
|
|
|
+ width: 702upx;
|
|
|
+ margin: 0 24upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .join-member {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 0 #{30rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-top {
|
|
|
+ border-top: #{1rpx} solid #e2e2e2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zhe {
|
|
|
+ height: #{80rpx};
|
|
|
+ background-color: white;
|
|
|
+ width: #{750rpx};
|
|
|
+ padding: 0 #{24rpx};
|
|
|
+ margin-top: #{20rpx};
|
|
|
+
|
|
|
+ .symbol {
|
|
|
+ width: #{116rpx};
|
|
|
+ font-size: #{20rpx};
|
|
|
+ color: #ff4544;
|
|
|
+ border: #{1rpx} solid #ff4544;
|
|
|
+ border-radius: #{4rpx};
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: #{12rpx};
|
|
|
+ height: #{22rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: #{520rpx};
|
|
|
+ font-size: #{21rpx};
|
|
|
+ color: #666666;
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: #{12rpx};
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-vip {
|
|
|
+ padding: 20upx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 702upx;
|
|
|
+ margin: 0 24upx 0 24upx;
|
|
|
+ border-radius: 0 0 15upx 15upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-bottom-fixed {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1500;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-bottom-height-0 {
|
|
|
+ height: 110upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-bottom-height-1 {
|
|
|
+ height: 190upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-margin {
|
|
|
+ margin-top: 20upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bd-vip {
|
|
|
+ padding: 24rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bd-vip image {
|
|
|
+ height: 130rpx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
</style>
|
