254 lines
6.4 KiB
Vue
254 lines
6.4 KiB
Vue
<template>
|
||
<view class="claim-order-collage-detail" v-if="detail.id">
|
||
<view class="mg-md">
|
||
<view class="collage-item flex-center pd-lg fill-base radius-16">
|
||
<image mode="aspectFill" lazy-load class="cover radius-10" :src="detail.claim_cover"></image>
|
||
<view class="flex-1 ml-md">
|
||
<view class="f-title c-title text-bold ellipsis">{{detail.claim_title}}</view>
|
||
<view class="flex-y-center f-desc c-warning mt-sm">众筹价<view class="flex-y-baseline f-caption ml-sm">
|
||
¥<view class="f-sm-title text-bold">{{detail.price}}</view>
|
||
</view>
|
||
<view class="f-icontext c-caption text-delete ml-sm">原价 ¥{{detail.claim_price}}</view>
|
||
</view>
|
||
<view class="flex-center mt-md">
|
||
<view class="collage-tag flex-center f-caption c-base" :style="{background:primaryColor}">
|
||
{{detail.success_num}}人团
|
||
</view>
|
||
<view class="flex-1"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-md pd-lg flex-center flex-column fill-base radius-16">
|
||
<view class="space-md"></view>
|
||
<view class="flex-center">
|
||
<image lazy-load class="tag-img mr-lg" src="/static/image/farm/tag.png"></image>
|
||
<view class="f-md-title text-bold" :style="{color:primaryColor}">
|
||
{{detail.status==1?`还差${detail.surplus_num}人, 成团立享超值优惠`:statusType[detail.status].title}}
|
||
</view>
|
||
<image lazy-load class="tag-img ml-lg" src="/static/image/farm/tag.png"></image>
|
||
</view>
|
||
<block v-if="detail.status==1">
|
||
<view class="user-list flex-center mt-lg mb-md">
|
||
<block v-for="(item,index) in detail.user_list" :key="index">
|
||
<image class="avatar radius" :src="item"
|
||
v-if="index< detail.success_num > 4 ? 4 : detail.success_num - 1"></image>
|
||
</block>
|
||
<block v-if="detail.surplus_num">
|
||
<view class="avatar flex-center radius" v-for="(item,index) in detail.more_num"
|
||
:key="index"><i class="iconfont icon-add"></i>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="flex-y-center mt-lg mb-lg" :style="{color:primaryColor}">
|
||
<min-countdown :type="2" :targetTime="detail.end_time * 1000" color="#333" textColor="#999"
|
||
bgColor="#F7F7F7" className="sm" @callback="countEnd">
|
||
</min-countdown>
|
||
</view>
|
||
<view class="f-desc c-caption">还差{{detail.surplus_num}}人成团，距离结束还剩</view>
|
||
<view class="space-lg"></view>
|
||
</block>
|
||
<view class="collage-status-icon iconfont icon-biaoqian flex-center"
|
||
:style="{color:detail.status==2?primaryColor:'#E82F21'}" v-else>
|
||
<view class="f-md-title text-bold abs">{{statusType[detail.status].text}}</view>
|
||
</view>
|
||
<block v-if="detail.status == 1 && !detail.can_join">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button open-type="share" class="clear-btn share-btn flex-center f-sm-title"
|
||
:style="{background:primaryColor}">
|
||
邀请好友
|
||
</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view @click="toAppShare" class="share-btn flex-center f-sm-title"
|
||
:style="{background:primaryColor}">
|
||
邀请好友
|
||
</view>
|
||
<!-- #endif -->
|
||
</block>
|
||
|
||
<view @click="toOrder" class="share-btn flex-center f-sm-title" :style="{background:primaryColor}"
|
||
v-if="(detail.status == 1 && detail.can_join) || (detail.status>1 && detail.can_start)">
|
||
{{detail.status==1 ? '立即参与' : '再开一团'}}
|
||
</view>
|
||
<view class="space-lg"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapActions
|
||
} from "vuex"
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
options: {},
|
||
detail: {},
|
||
statusType: {
|
||
2: {
|
||
title: '众筹活动已人满成功',
|
||
text: '众筹成功'
|
||
},
|
||
3: {
|
||
title: '众筹超时失败',
|
||
text: '众筹失败'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.$util.showLoading()
|
||
this.options = options
|
||
this.initIndex()
|
||
},
|
||
onPullDownRefresh() {
|
||
// #ifndef APP-PLUS
|
||
uni.showNavigationBarLoading()
|
||
// #endif
|
||
this.initRefresh()
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
computed: mapState({
|
||
primaryColor: state => state.config.configInfo.primaryColor,
|
||
subColor: state => state.config.configInfo.subColor,
|
||
configInfo: state => state.config.configInfo,
|
||
userInfo: state => state.user.userInfo
|
||
}),
|
||
methods: {
|
||
...mapActions(['']),
|
||
async initIndex() {
|
||
let {
|
||
id
|
||
} = this.options
|
||
let data = await this.$api.claim.claimCollageInfo({
|
||
id
|
||
})
|
||
let {
|
||
success_num,
|
||
user_list
|
||
} = data
|
||
let len = user_list.length
|
||
data.more_num = len > 3 ? 1 : success_num > 4 ? 5 - len : success_num - len
|
||
this.detail = data
|
||
this.$util.hideAll()
|
||
},
|
||
initRefresh() {
|
||
this.initIndex()
|
||
},
|
||
countEnd() {
|
||
this.$util.log("倒计时完了")
|
||
setTimeout(() => {
|
||
this.initRefresh()
|
||
}, 1000)
|
||
},
|
||
toAppShare() {
|
||
// #ifdef APP-PLUS
|
||
let {
|
||
siteroot
|
||
} = siteInfo
|
||
let url = siteroot.split('/index.php')[0]
|
||
let href = `${url}/h5/#/user/pages/coupon/share?coupon_atv_id=${id}&pid=${pid}`
|
||
let scene = type == 1 ? 'WXSceneSession' : 'WXSceneTimeline'
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene,
|
||
type: 0,
|
||
href,
|
||
title,
|
||
summary,
|
||
imageUrl,
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
toOrder() {
|
||
let {
|
||
id,
|
||
atv_id,
|
||
claim_id,
|
||
status
|
||
} = this.detail
|
||
let type = status == 1 ? 2 : 1
|
||
let cid = type == 1 ? atv_id : id
|
||
let url = `/claim/pages/order?id=${claim_id}&cid=${cid}&type=${type}`
|
||
this.$util.goUrl({
|
||
url
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
.claim-order-collage-detail {
|
||
|
||
.collage-item {
|
||
|
||
.cover {
|
||
width: 180rpx;
|
||
height: 170rpx;
|
||
}
|
||
|
||
.ellipsis {
|
||
max-width: 450rpx;
|
||
}
|
||
|
||
.collage-tag {
|
||
height: 36rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.tag-img {
|
||
width: 26rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.collage-status-icon {
|
||
width: 210rpx;
|
||
height: 200rpx;
|
||
font-size: 200rpx;
|
||
margin: 50rpx auto;
|
||
|
||
.text-bold {
|
||
height: 40rpx;
|
||
transform: rotate(-32deg);
|
||
}
|
||
}
|
||
|
||
.user-list {
|
||
|
||
.avatar {
|
||
width: 92rpx;
|
||
height: 92rpx;
|
||
margin: 0 17rpx;
|
||
|
||
.icon-add {
|
||
color: #D8D8D7
|
||
}
|
||
}
|
||
|
||
.avatar.flex-center {
|
||
background: #F8F8F8;
|
||
border: 1px solid #DBDBDB;
|
||
}
|
||
}
|
||
|
||
.share-btn {
|
||
width: 590rpx;
|
||
height: 90rpx;
|
||
color: #fff;
|
||
border-radius: 100rpx;
|
||
}
|
||
}
|
||
</style>
|