|
@@ -1,36 +1,58 @@
|
|
|
<template>
|
|
|
<view class="fight-share-entry">
|
|
|
+ <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
|
|
|
<view class="row">
|
|
|
<!-- 商品信息 -->
|
|
|
- <cm-order-prodcut :countVisible="false"></cm-order-prodcut>
|
|
|
-
|
|
|
+ <cm-order-prodcut
|
|
|
+ :countVisible="false"
|
|
|
+ :goodsData="collageData"
|
|
|
+ :normal="true"
|
|
|
+ :tagsList="tagsList"
|
|
|
+ ></cm-order-prodcut>
|
|
|
+
|
|
|
<view class="service">
|
|
|
<view class="iconfont icon-wuyoushouhou"><text>无忧退货</text></view>
|
|
|
<view class="iconfont icon-wuyoushouhou"><text>快速退款</text></view>
|
|
|
<view class="iconfont icon-wuyoushouhou"><text>正品保证</text></view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
<view class="grid t0b48"></view>
|
|
|
-
|
|
|
+
|
|
|
<view class="fight-tip">还差<text>1</text>人,赶快邀请好友来拼单吧!</view>
|
|
|
<!-- 倒计时 -->
|
|
|
- <countdown-box></countdown-box>
|
|
|
+ <countdown-box :countDownTime="countDownTime"></countdown-box>
|
|
|
|
|
|
<!-- 操作 -->
|
|
|
- <view class="fight-control">
|
|
|
- <button class="btn type1" @click="handleClick">立即参团</button>
|
|
|
- </view>
|
|
|
+ <view class="fight-control"> <button class="btn type1" @click="handleClick">立即参团</button> </view>
|
|
|
|
|
|
<view class="grid t48b48"></view>
|
|
|
<!-- 拼单用户列表 -->
|
|
|
<user-list></user-list>
|
|
|
<view class="line"></view>
|
|
|
<view class="goods-info">
|
|
|
- <image src="https://picsum.photos/100/100?random=3" class="cover"></image>
|
|
|
- <view class="title">肌本演绎360愉悦修护套组 PLUS 尊享版防晒修复 补水保湿</view>
|
|
|
+ <image :src="collageData.productImage" class="cover"></image>
|
|
|
+ <view class="title" v-text="collageData.productName"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 购买数量弹窗 -->
|
|
|
+ <cm-drawer :visible="countVisible" @close="drawerClose" position="bottom">
|
|
|
+ <view class="count">
|
|
|
+ <view class="top">
|
|
|
+ <image :src="collageData.productImage" class="cover"></image>
|
|
|
+ <view class="right">
|
|
|
+ <view class="number">
|
|
|
+ <text>数量:</text>
|
|
|
+ <cm-number-box v-model="count" :min="1" :max="2"></cm-number-box>
|
|
|
+ </view>
|
|
|
+ <view class="single-price">
|
|
|
+ <text>单价:¥</text> <text class="price">{{ collageData.price | formatPrice }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn" @click="buyGroupNow">确认</view>
|
|
|
+ </view>
|
|
|
+ </cm-drawer>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -38,17 +60,38 @@
|
|
|
import UserList from './components/user-list.vue'
|
|
|
import CountdownBox from './components/countdown-box.vue'
|
|
|
import CmOrderProdcut from '@/components/cm-module/cm-order-prodcut/cm-order-prodcut.vue'
|
|
|
+import CmNumberBox from '@/components/cm-module/cm-number-box/cm-number-box.vue'
|
|
|
+import CmDrawer from '@/components/cm-module/cm-drawer/cm-drawer.vue'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
export default {
|
|
|
components: {
|
|
|
UserList,
|
|
|
CountdownBox,
|
|
|
- CmOrderProdcut
|
|
|
+ CmOrderProdcut,
|
|
|
+ CmDrawer,
|
|
|
+ CmNumberBox
|
|
|
},
|
|
|
computed: {
|
|
|
-
|
|
|
+ ...mapGetters(['userId', 'hasLogin'])
|
|
|
},
|
|
|
data() {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ isRequest: true,
|
|
|
+ collageId: '',
|
|
|
+ initiatorId: '',
|
|
|
+ collageData: {},
|
|
|
+ // 自定义标签
|
|
|
+ tagsList: ['2人拼团价'],
|
|
|
+ // 倒计时
|
|
|
+ countDownTime: {},
|
|
|
+ timer: null,
|
|
|
+ // 商品数量
|
|
|
+ count: 1,
|
|
|
+ countVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearTimeout(this.timer)
|
|
|
},
|
|
|
onShareTimeline(e) {
|
|
|
// 加密参数
|
|
@@ -78,10 +121,87 @@ export default {
|
|
|
imageUrl: 'https://picsum.photos/400/400?random=3'
|
|
|
}
|
|
|
},
|
|
|
+ onLoad(options) {
|
|
|
+ this.collageId = options.collageId
|
|
|
+ this.initiatorId = options.initiatorId
|
|
|
+ setTimeout(() => {
|
|
|
+ this.fetchOrderDetails()
|
|
|
+ }, 2000)
|
|
|
+ },
|
|
|
methods: {
|
|
|
handleClick(type) {
|
|
|
- console.log('拼单')
|
|
|
+ if (!this.hasLogin) {
|
|
|
+ // 保存当前页面链接参数
|
|
|
+ uni.setStorageSync(
|
|
|
+ 'login_redirect_url',
|
|
|
+ `/pages/fight-order/fight-share-entry?type=share&collageId=${this.collageId}&initiatorId=${
|
|
|
+ this.initiatorId
|
|
|
+ }`
|
|
|
+ )
|
|
|
+ this.$api.navigateTo('/pages/login/login')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.userId == this.initiatorId) {
|
|
|
+ this.$util.msg('您不能参与自己发起的拼团')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.countVisible = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 拼团购买
|
|
|
+ buyGroupNow() {
|
|
|
+ console.log('拼团购买')
|
|
|
+ let productStp = {
|
|
|
+ allPrice: this.count * this.collageData.price,
|
|
|
+ allCount: this.count,
|
|
|
+ productId: this.collageData.productId,
|
|
|
+ productCount: this.count,
|
|
|
+ heUserId: this.userId,
|
|
|
+ collageFlag: 1,
|
|
|
+ collageId: this.collageId
|
|
|
+ }
|
|
|
+ uni.setStorageSync('commitProductInfo', productStp)
|
|
|
+ this.$api.navigateTo('/pages/order/create-order?type=prodcut')
|
|
|
+ this.countVisible = false
|
|
|
+ },
|
|
|
+
|
|
|
+ countDown() {
|
|
|
+ const diffTime = new Date(this.collageData.endTime).getTime()
|
|
|
+ const loadTime = new Date().getTime()
|
|
|
+
|
|
|
+ this.$util.countDown(diffTime, loadTime, {}, item => {
|
|
|
+ this.countDownTime = item.conttainer
|
|
|
+ this.timer = item.t
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取拼单详情
|
|
|
+ fetchOrderDetails() {
|
|
|
+ this.FightService.OrderCollageDetails({
|
|
|
+ collageId: this.collageId,
|
|
|
+ userId: this.userId
|
|
|
+ }).then(res => {
|
|
|
+ this.collageData = res.data
|
|
|
+ // 拼团已完成
|
|
|
+ if (this.collageData.orderId) {
|
|
|
+ this.$util.msg('拼团已结束')
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.switchTab({ url: '/pages/tabBar/index/index' })
|
|
|
+ }, 2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 拼团未完成
|
|
|
+ this.countDown()
|
|
|
+ this.isRequest = false
|
|
|
+ })
|
|
|
},
|
|
|
+
|
|
|
+ // 购买数量弹窗关闭
|
|
|
+ drawerClose() {
|
|
|
+ this.count = 1
|
|
|
+ this.countVisible = false
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -110,7 +230,7 @@ export default {
|
|
|
background: #fff;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.service {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
@@ -120,21 +240,19 @@ export default {
|
|
|
height: 72rpx;
|
|
|
padding: 0 24rpx;
|
|
|
margin-top: 64rpx;
|
|
|
- background: #FFF8FD;
|
|
|
+ background: #fff8fd;
|
|
|
opacity: 1;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
+
|
|
|
.iconfont {
|
|
|
font-size: 24rpx;
|
|
|
line-height: 24rpx;
|
|
|
text {
|
|
|
- color: #FF457B;
|
|
|
+ color: #ff457b;
|
|
|
margin-left: 4rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
|
|
|
.fight-tip {
|
|
|
@extend .flex-center-box;
|
|
@@ -186,12 +304,12 @@ export default {
|
|
|
width: 750rpx;
|
|
|
height: 20rpx;
|
|
|
background: #f7f7f7;
|
|
|
- &.t48b48{
|
|
|
+ &.t48b48 {
|
|
|
margin-top: 48rpx;
|
|
|
margin-bottom: 48rpx;
|
|
|
}
|
|
|
-
|
|
|
- &.t0b48{
|
|
|
+
|
|
|
+ &.t0b48 {
|
|
|
margin-top: 0;
|
|
|
margin-bottom: 48rpx;
|
|
|
}
|
|
@@ -227,4 +345,42 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.count {
|
|
|
+ padding: 60rpx 0;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 60rpx;
|
|
|
+ .cover {
|
|
|
+ width: 104rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ margin-left: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333;
|
|
|
+ .single-price {
|
|
|
+ color: #ff457b;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ margin-top: 32px;
|
|
|
+ background: #ff457b;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|