123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435 |
- <template>
- <view class="detail-price-share" :style="{paddingBottom: level_show !== 2 ? '20rpx' : 0}">
- <view class="goods-name">
- <view class="name">{{detail.name}}
- <view v-if="detail.sales" class="bd-sales">销量{{detail.sales}}{{detail.unit}}</view>
- </view>
- <view class="subtitle" v-if="detail.subtitle">{{detail.subtitle}}</view>
- </view>
- <view class="bd-tags">
- <div class="bd-tag-group">
- <view class="bd-tag">
- <image src="../../../static/image/icon/icon-zheng.png"></image>
- <text>正品保证</text>
- </view>
- <view class="bd-tag">
- <image src="../../../static/image/icon/icon-tui.png" style="width: 34rpx;"></image>
- <text>退换无忧</text>
- </view>
- </div>
- <view class="bd-tag bd-tag-share" @click="share_show" style="background: #ff3366">
- <image src="../../../static/image/icon/icon-share1.png"></image>
- <text style="background-color:#F84469;color: #fff;">分享商品</text>
- </view>
- </view>
- <view class="bottom">
- <view>
- <text class="des" :class="theme+'-m-text ' + theme" v-if="de_status === 0 && swell_status === 0">
- 定金¥{{de_price}}抵¥{{swell_price}}
- </text>
- <text class="des" :class="theme+'-m-text ' + theme" v-if="de_status === 1 && swell_status === 0">
- 定金¥{{de_price_min}}-{{de_price_max}}抵¥{{swell_price}}
- </text>
- <text class="des" :class="theme+'-m-text ' + theme" v-if="de_status === 1 && swell_status === 1">
- 定金¥{{de_price_min}}-{{de_price_max}}抵¥{{swell_price_min}}-{{swell_price_max}}
- </text>
- <text class="des" :class="theme+'-m-text ' + theme" v-if="de_status === 0 && swell_status === 1">
- 定金¥{{de_price}}抵¥{{swell_price_min}}-{{swell_price_max}}
- </text>
- </view>
- <view class="time">
- 尾款支付时间:{{set_time}}
- </view>
- </view>
- <view>
- <app-share-qr-code v-model="shareShow"
- :url="url"
- :has-poster-nav="hasPosterNav"
- :poster-config="posterConfig"
- :poster-generate="posterGenerate"
- ></app-share-qr-code>
- </view>
- </view>
- </template>
- <script>
- import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
- import {mapGetters, mapState} from 'vuex';
- export default {
- name: "detail-price-share",
- data() {
- return {
- price: 0,
- status: 0,
- de_price: 0,
- de_status: 0,
- swell_price: 0,
- swell_status: 0,
- de_price_min: 0,
- de_price_max: 0,
- swell_price_min: 0,
- swell_price_max: 0,
- shareShow: false,
- member_price_min: 0,
- member_price_max: 0,
- member_price_status: 0,
- start_end: '',
- }
- },
- props: {
- price_min: Number,
- price_max: Number,
- attr: Array,
- original_price: String,
- url: String,
- level_show: Number,
- group_min_member_price: Number,
- group_max_member_price: Number,
- end_prepayment_at: String,
- pay_limit: Number,
- cats: Array,
- id: Number,
- discount: {
- type: String
- },
- is_vip_card_user: {
- type: Number,
- default() {
- return 0;
- }
- },
- theme: String,
- posterConfig: String,
- posterGenerate: String,
- hasPosterNav: {
- type: Boolean,
- default() {
- return false
- },
- },
- themeObject: Object,
- detail: Object,
- },
- mounted() {
- if (this.price_min === this.price_max) {
- this.status = 0;
- } else {
- this.status = 1;
- }
- let deposit = [];
- let swell_deposit = [];
- for (let i = 0; i < this.attr.length; i++) {
- deposit.push(this.attr[i].deposit);
- swell_deposit.push(this.attr[i].swell_deposit);
- }
- let max = Math.max.apply(null, deposit);
- let min = Math.min.apply(null, deposit);
- let swell_max = Math.max.apply(null, swell_deposit);
- let swell_min = Math.min.apply(null, swell_deposit);
- if (max === min) {
- this.de_price = min;
- this.de_status = 0;
- } else {
- this.de_status = 1;
- this.de_price_min = min;
- this.de_price_max = max;
- }
- if (swell_min === swell_max) {
- this.swell_price = swell_min;
- this.swell_status = 0;
- } else {
- this.swell_status = 1;
- this.swell_price_min = swell_min;
- this.swell_price_max = swell_max;
- }
- if (this.group_min_member_price === this.group_max_member_price) {
- this.member_price_status = 0;
- } else {
- this.member_price_status = 1;
- }
- },
- computed: {
- set_time() {
- if (this.pay_limit === -1) {
- return `${this.getDate(this.end_prepayment_at)} ~ 无期限`
- } else {
- this.addDate(this.end_prepayment_at, this.pay_limit);
- return `${this.getDate(this.end_prepayment_at)} ~ ${this.addDate(this.end_prepayment_at, this.pay_limit)}`
- }
- },
- ...mapGetters('mallConfig', {
- vip: 'getVip'
- }),
- ...mapState({
- mall: state => state.mallConfig.mall,
- isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
- })
- },
- methods: {
- addDate(date, days) {
- if (days == undefined || days == '') {
- days = 1;
- }
- var date = new Date(date.replace(/-/g, '/'));
- date.setDate(date.getDate() + days);
- let month = date.getMonth() + 1;
- let day = date.getDate();
- let mm = "'" + month + "'";
- let dd = "'" + day + "'";
- if (mm.length == 3) {
- month = "0" + month;
- }
- if (dd.length == 3) {
- day = "0" + day;
- }
- let hour = date.getHours();//得到小时
- let minu = date.getMinutes();//得到分钟
- let sec = date.getSeconds();//得到秒
- if (sec === 0) {
- sec = 59;
- if (minu === 0) {
- minu = 59;
- if (hour === 0) {
- hour = 23;
- day = '0' + Number(day) - 1;
- } else {
- hour = hour - 1;
- }
- } else {
- minu = minu - 1;
- }
- } else {
- sec = sec - 1;
- }
- sec = `${sec}`;
- minu = `${minu}`;
- hour = `${hour}`;
- if (hour.length === 1) {
- hour = `0${hour}`
- }
- if (minu.length === 1) {
- minu = `0${minu}`
- }
- if (sec.length === 1) {
- sec = `0${sec}`
- }
- let time = date.getFullYear() + "." + month + "." + day + ' ' + hour + ':' + minu + ':' + sec;
- return time;
- },
- getDate(end_prepayment_at) {
- let newDate = new Date(end_prepayment_at.replace(/-/g, '/'));
- newDate.setDate(newDate.getDate());
- let month = newDate.getMonth() + 1;
- let day = newDate.getDate();
- let mm = "'" + month + "'";
- let dd = "'" + day + "'";
- let hour = newDate.getHours();//得到小时
- let minu = newDate.getMinutes();//得到分钟
- let sec = newDate.getSeconds();//得到秒
- sec = `${sec}`;
- minu = `${minu}`;
- hour = `${hour}`;
- if (mm.length == 3) {
- month = "0" + month;
- }
- if (dd.length == 3) {
- day = "0" + day;
- }
- if (hour.length === 1) {
- hour = `0${hour}`
- }
- if (minu.length === 1) {
- minu = `0${minu}`
- }
- if (sec.length === 1) {
- sec = `0${sec}`
- }
- let time = newDate.getFullYear() + "." + month + "." + day + ' ' + hour + ':' + minu + ':' + sec;
- return time;
- },
- share_show() {
- if (this.$user.isLogin()) {
- this.shareShow = true;
- } else {
- this.$user.getInfo();
- }
- },
- },
- components: {
- 'app-share-qr-code': appShareQrCode
- }
- }
- </script>
- <style scoped lang="scss">
- .detail-price-share {
- background-color: #ffffff;
- width: 100%;
- padding: 20upx;
- margin-top: 16upx;
- .goods-name{
- .name{
- font-size: 30upx;
- color: #000000;
- line-height: 42upx;
- margin-top: 5upx;
- font-weight: 600;
- }
- .subtitle{
- margin-top: 23upx;
- font-size: 24upx;
- line-height: 34upx;
- color: #999999;
- }
- }
- .presale {
- font-size: #{56rpx};
- margin-right: #{16rpx};
- font-family: DIN;
- text-align: end;
- .symbol {
- font-size: #{32rpx};
- }
- }
- .title {
- font-size: #{28rpx};
- }
- .des {
- font-size: #{26rpx};
- line-height: #{26rpx};
- }
- .original-price {
- font-size: #{24rpx};
- color: #999999;
- margin-top: #{8rpx};
- text-decoration: line-through;
- }
- .share {
- margin-top: #{23rpx};
- width: #{50rpx};
- height: #{80rpx};
- padding: #{5rpx};
- > image {
- width: #{40rpx};
- height: #{40rpx};
- }
- > text {
- font-size: #{21rpx};
- color: #666666;
- white-space: nowrap;
- }
- }
- }
- .bd-sales {
- color: #999999;
- font-size: 30rpx;
- float: right;
- }
- .bd-tags{
- width: 100%;
- display: flex;
- margin-top: 24rpx;
- justify-content: space-between;
- }
- .bd-tag-group{
- flex: 1;
- display: flex;
- }
- .bd-tags .bd-tag{
- display: flex;
- align-items: center;
- margin-right: 10px;
- }
- .bd-tags .bd-tag image{
- width: 32rpx;
- height: 32rpx;
- }
- .bd-tags .bd-tag text{
- background: #FED2D5;
- color: #E73E67;
- padding: 5rpx 10rpx;
- border-radius: 10rpx;
- font-size: 26rpx;
- margin-left: 10rpx;
- }
- .bd-tag-share{
- background: #FED2D5;
- color: #E73E67;
- border-radius: 10rpx;
- padding: 5rpx 10rpx;
- }
- .bd-tag-share image{
- margin-right: -10rpx;
- }
- .bd-tag-share text{
- font-size: 30rpx;
- margin-left: 0;
- }
- .bd-vip{
- margin-top: 24rpx;
- }
- .bd-vip image{
- height: 72rpx;
- width: 100%;
- }
- .member-price {
- .symbol {
- font-size: #{23rpx};
- }
- .member {
- color: #f39800;
- font-family: DIN;
- .m-p {
- font-family: DIN;
- font-size: #{40rpx};
- }
- .logo {
- display: inline-block;
- font-size: #{20rpx};
- border: #{1rpx} solid;
- padding: #{2rpx 4rpx};
- margin-left: #{12rpx};
- border-radius: #{8rpx};
- margin-bottom: #{5rpx};
- }
- }
- .yushou {
- .p {
- font-size: #{26rpx};
- font-family: DIN;
- }
- .p-t {
- font-size: #{26rpx};
- margin-left: #{8rpx};
- }
- }
- .ori {
- text-decoration: line-through;
- color: #999999;
- font-size: #{24rpx};
- margin-left: #{16rpx};
- }
- }
- .time {
- font-size: #{22rpx};
- color: #999999;
- }
- </style>
|