glhcp/uniapp/bundle/pages/bargain_process/bargain_process.vue

727 lines
91 KiB
Vue
Raw Normal View History

2023-08-10 06:59:52 +00:00
<template>
<view class="bargain-process-container">
<!-- #ifdef H5 -->
<download-nav v-if="showDownload"></download-nav>
<!-- #endif -->
<view v-show="status == -1">
<view class="bargain-process-header">
<view class="mt20 column status-container">
<view class="white xxl">
{{activityObj.bargain_tips}}
</view>
<view class="mt10 white xxs">
{{activityObj.simple_tips}}
</view>
</view>
</view>
<view class="main">
<navigator class="goods-planel row" :url="'/pages/goods_details/goods_details?id=' + activityObj.goods_id" hover-class="none">
<u-image width="180rpx" height="180rpx" :src="activityObj.image" border-radius="10rpx" />
<view class="goods-info">
<view class="goods-name line2 nr">
{{activityObj.name}}
</view>
<view class="xs" style="color: #F95F2F;">
最低可砍至<text class="sm" style="line-height: 48rpx;">¥<text class="xl">{{activityObj.activity_price}}</text></text>
</view>
<view class="xs muted">
原价 <text style="text-decoration:line-through;">¥{{activityObj.price}}</text>
</view>
</view>
</navigator>
<view class="choose-container">
<view class="title xl normal">
请选择商品规格
</view>
<view class="choose-content row-between" @click="showSpecPop">
<view class="row">
<view class="muted sm">已选</view>
<view class="md normal">
{{userSpecText}}
</view>
</view>
<u-icon name="arrow-right" size="28" color="#999" />
</view>
</view>
<view class="lunch-btn white br60 row-center" @click="$launchBargain"></view>
</view>
</view>
<view v-show="status != -1">
<view class="bargain-process-header">
<view class="mt20 status-container row">
<u-image
v-if="bargainObj.share_avatar"
width="80rpx"
height="80rpx"
:src="bargainObj.share_avatar"
round
:customStyle="{'border': '2rpx solid #fff'}"
/>
<view class="column ml20">
<view class="white xxl">
{{bargainObj.bargain_tips}}
</view>
<view class="mt10 white xxs">
{{bargainObj.simple_tips || '邀请好友帮忙砍价 —— 砍至'+ bargainObj.current_price +'元即可发货'}}
</view>
</view>
</view>
</view>
<view class="main">
<navigator class="goods-planel row" :url="'/pages/goods_details/goods_details?id=' + bargainObj.goods_id" hover-class="none">
<u-image width="180rpx" height="180rpx" :src="bargainObj.image" border-radius="10rpx" />
<view class="goods-info">
<view class="goods-name line2 nr">
{{bargainObj.name}}
</view>
<view class="xs muted">
{{bargainObj.spec_value_str}}
</view>
<view class="row-between mt10">
<view class="xxs muted">
原价 ¥{{bargainObj.price || 0}}
</view>
<view class="row" v-show="showCountDown">
<u-count-down
:timestamp="timestamp"
bg-color="#FF2C3C"
color="#fff"
separator-color="#FF2C3C"
height="36"
:show-days="true"
@end="closeBargainOrderFun"
/>
<text class="muted xs ml10">内可砍</text>
</view>
</view>
</view>
</navigator>
<!-- 非被邀请状态 -->
<view class="bargain-panel" v-if="status != 5">
<view class="bargain-panel-header nr">
已砍{{bargainObj.knife_price || 0}}还差{{bargainObj.diff_price || 0}}
</view>
<view class="progress-container row">
<view class="progress">
<view class="progress-bar" :style="{'width': precent + '%'}">
</view>
</view>
<view class="primary xs ml20">
<text class="xxs">¥</text>{{bargainObj.activity_price}}
</view>
</view>
<view class="nr lighter row-center" style="margin-top: 35rpx;" v-if="bargainObj.status != 0 && bargainObj != -1">
{{bargainObj.status_tips}}
</view>
<view class="invite-btn1 br60 white row-center lg" @click="shareToBargain" v-if="bargainObj.direct_buy_btn != 1 && bargainObj.invite_btn">
邀请好友帮砍价
</view>
<view class="invite-btn1 br60 white row-center lg" v-if="bargainObj.buy_btn" @tap="handleClickBuy" >
立即购买
</view>
<view class="fail-btn br60 white row-center lg" v-if="bargainObj.status == 2">
砍价失败
</view>
<view class="invite-btn-group row-between" v-if="bargainObj.direct_buy_btn">
<view class="buy-now-btn br60 md row-center" @click="handleClickBuy">
¥{{bargainObj.current_price}} 直接购买
</view>
<view class="invite-friend-btn white br60 md row-center" @click="shareToBargain">
邀请好友帮砍价
</view>
</view>
<view class="invite-btn1 br60 white row-center lg" v-if="bargainObj.order_btn" @click="toOrderDetail">
查看订单
</view>
<view class="bargain-code-content">
<view class="bargain-code-title row-between">
<view class="md normal bold">
砍价记录
</view>
<view class="muted xs">
已有{{bargainObj.knife_list && bargainObj.knife_list.length}}人帮砍
</view>
</view>
<view class="code-content">
<view class="user-item row-between" v-for="(item, index) in bargainObj.knife_list" :key="item.id">
<view class="user-content row">
<u-image width="80rpx" height="80rpx" radius="60rpx" :src="item.avatar" />
<view class="ml20">
<view class="sm normal">
{{item.nickname}}
</view>
<view class="muted xxs">
小刀一砍惊喜满满
</view>
</view>
</view>
<view class="bargain-price xs primary">
¥{{item.help_price || 0}}
</view>
</view>
</view>
</view>
</view>
<!-- end -->
<!-- 被邀请状态 -->
<view class="shared-panel" v-if="status == 5" >
<view class="btn-container">
<view class="nr muted row-center">
{{bargainObj.status_tips}}
</view>
<view class="help-knife-btn row-center white lg br60" v-if="bargainObj.knife_btn" @click="$helpBargain">
帮忙砍一刀
</view>
<navigator hover-class="none" url="bundle/pages/bargain/bargain" class="knife-btn row-center lg normal br60" v-if="bargainObj.sponsor_btn">
我也要砍价
</navigator>
</view>
<view class="code-content">
<view class="bargain-code-title row-between">
<view class="md normal bold">
砍价记录
</view>
<view class="muted xs">
已有{{bargainObj.knife_list.length}}人帮砍
</view>
</view>
<view class="user-item row-between" v-for="(item, index) in bargainObj.knife_list" :key="item.id">
<view class="user-content row">
<u-image width="80rpx" height="80rpx" radius="60rpx" :src="item.avatar" />
<view class="ml20">
<view class="sm normal">
{{item.nickname}}
</view>
<view class="muted xxs">
小刀一砍惊喜满满
</view>
</view>
</view>
<view class="bargain-price xs primary">
¥{{item.help_price || 0}}
</view>
</view>
</view>
</view>
<!-- end -->
</view>
</view>
<loading-view v-if="showLoadingView" />
<goods-bargain v-if="status != -1" ref="goodsBargain" />
<u-popup v-model="showBargainPop" mode="center">
<view class="bargain-pop-container">
<view class="md normal bold row-center" style="padding-top: 64rpx;">
恭喜您成功砍下<text class="primary lg">{{knifePrice || 0}}</text>
</view>
<view class="bold md row-center" style="margin-top: 38rpx;" v-if="!isHelpKnife">
还差<text class="ml20 differ-price primary">{{diffPrice || 0}}<text style="font-size: 40rpx;"></text></text>
</view>
<view class="bold primary xxl row-center" style="margin-top: 38rpx;" v-else>
已为好友砍价成功
</view>
<view class="progress-container row-center">
<view class="progress">
<view class="progress-bar" :style="{'width': precent + '%'}" />
</view>
</view>
<view class="row-center">
<view class="invite-btn row-center md" @click="shareToBargain">
{{isHelpKnife ? '确定' : '邀请好友帮砍'}}
</view>
</view>
</view>
<view class="close-icon row-center" @click="closeBargainPop" mode="bottom">
<u-icon name="close-circle" size="68rpx" color="#fff"></u-icon>
</view>
</u-popup>
<spec-popup
:show="showPop"
:goods="activityObj"
:isBargain="true"
:show-add="false"
:show-buy="false"
:showConfirm="true"
:disabledNumberBox="true"
:showStock="false"
@confirm="chooseSpec"
@close="showPop=false"
/>
<!-- 分享弹窗 -->
<share-popup v-model="showSharePop" :share-id="bargainId"
pagePath="bundle/pages/bargain_process/bargain_process" :config="{
avatar: userInfo.avatar,
nickname: userInfo.nickname,
image: bargainObj.image,
name: bargainObj.name,
}" type="2" />
<float-tab></float-tab>
</view>
</template>
<script>
import {
mapActions,
mapGetters
} from 'vuex';
import {getBargainDetail, launchBargain, getBargainActivityDetail, helpBargain, closeBargainOrder} from '@/api/activity'
import {strToParams} from '@/utils/tools'
import config from '@/config/app'
export default {
data() {
return {
showPop: false,
showBargainPop: false,
showSharePop: false,
activityObj: {},
bargainObj: {},
status: 1,
precent: 0,
timestamp: 3000,
userSpecText: '请选择商品规格',
userSpec: {},
bargainId: -1,
activityId: -1,
// 砍价弹窗变量
knifePrice: 0,
diffPrice: 0,
isHelpKnife: false,
showCountDown: true,
showLoadingView: true,
showDownload: false
}
},
onLoad(options) {
console.log(options)
if (options && options.scene) {
let scene = strToParams(decodeURIComponent(options.scene));
options.bargainId = scene.id;
}
if(options && options.id) {
options.bargainId = options.id
}
// #ifdef H5
if(options && options.isapp == 1) {
this.showDownload = true
}
// #endif
// 活动详情ID
this.bargainId = options.bargainId;
// 砍价活动ID
this.activityId = options.activityId;
console.log(this.bargainId, this.activityId, "option")
if(this.activityId && this.activityId != -1) {
this.$getBargainDetail(this.activityId);
}
else if(this.bargainId && this.bargainId != -1) {
this.$getBargainActivityDetail(this.bargainId)
}
},
onReachBottom() {
if(this.$refs.goodsBargain) {
this.$refs.goodsBargain.$getBargainList();
}
},
// #ifdef MP-WEIXIN
onShareAppMessage() {
console.log(this.bargainId)
return {
path: "bundle/pages/bargain_process/bargain_process?bargainId=" + this.bargainId,
title: this.bargainObj.share_titles
}
},
// #endif
methods: {
...mapActions(['getCartNum', 'wxShare']),
showSpecPop() {
this.showPop = true;
},
closeBargainPop() {
this.showBargainPop = false
},
$getBargainDetail(id) {
getBargainDetail({bargain_id: id}).then(res => {
if(res.code == 0) return setTimeout(() => {uni.navigateBack(1)},500);
if(res.code == 1) {
this.activityObj = res.data;
this.status = res.data.status;
this.showLoadingView = false;
this.userSpecText = res.data.goods_item[0].spec_value_str
this.userSpec = {
id: res.data.goods_item[0].id
}
console.log(location)
let options = {
shareTitle: this.activityObj.name,
shareLink: location.href + "&invite_code=" + this.$store.getters.inviteCode,
shareImage: this.activityObj.image,
shareDesc: this.activityObj.simple_tips
}
this.wxShare(options)
console.log(options, "share-bargain-options1", location.href);
}
})
},
chooseSpec(e) {
this.userSpec = e.detail;
this.userSpecText = e.detail.spec_value_str;
this.showPop = false;
},
$launchBargain() {
if (!this.isLogin) return this.$Router.push('/pages/login/login')
let data = {
// 砍价活动id
bargain_id: this.activityId,
item_id: this.userSpec.id
}
launchBargain(data).then(res => {
if(res.code == 1) {
this.$toast({title: res.msg});
this.knifePrice = res.data.knife_price;
this.diffPrice = res.data.diff_price;
this.precent = res.data.progress * 100;
if(this.precent > 100) {
this.precent = 100
}
this.showBargainPop = true;
this.bargainId = res.data.id;
this.showLoadingView = true;
uni.showLoading()
this.$getBargainActivityDetail(res.data.id);
}
})
},
$getBargainActivityDetail(id) {
let timestamp = 0;
let now_time = (new Date().getTime()) / 1000
getBargainActivityDetail({
id: id
}).then(res => {
if(res.code == 1) {
uni.hideLoading()
this.status = res.data.status;
this.bargainObj = res.data;
console.log(this.bargainObj)
timestamp = res.data.over_time;
this.precent = res.data.progress * 100;
if(this.precent > 100) {
this.precent = 100
}
this.showLoadingView = false;
this.timestamp = (timestamp - Math.floor(now_time));
console.log('calc: ', timestamp, '-', Math.floor(now_time), '=', this.timestamp )
let url = location.href.replace(/activityId=\d*/g, "bargainId=" + id);
let options = {
shareTitle: this.bargainObj.share_titles || this.bargainObj.name,
shareLink: url + "&invite_code=" + this.$store.getters.inviteCode,
shareImage: this.bargainObj.image,
shareDesc: this.bargainObj.share_intros || this.bargainObj.simple_tips
}
this.wxShare(options)
console.log(options, "share-bargain-options2", url);
if(this.timestamp <= 0 || this.status == 1) {
// 砍价已结束
this.showCountDown = false;
}
else {
this.showCountDown = true;
}
}
})
},
shareToBargain() {
this.showBargainPop = false
if(this.isHelpKnife) {
return;
}
this.showSharePop = true
},
$helpBargain() {
// 帮好友砍价
helpBargain({
id: this.bargainId
}).then(res => {
console.log(res)
if(res.code == 1) {
this.knifePrice = res.data.knife_price;
this.precent = res.data.progress * 100;
if(this.precent > 100) {
this.precent = 100
}
this.isHelpKnife = true;
this.showBargainPop = true;
this.$getBargainActivityDetail(this.bargainId)
}
})
},
toOrderDetail() {
console.log(this.bargainObj.order_id)
this.$Router.push({
path: '/bundle/pages/order_details/order_details',
query: {
id: this.bargainObj.order_id
}
})
},
closeBargainOrderFun() {
// 计时结束后关闭订单
closeBargainOrder({
id: this.bargainObj.id
}).then(res => {
if(res.code == 1) {
this.$toast({
title: res.msg
})
this.$getBargainActivityDetail(this.bargainObj.id)
}
})
},
// 直接购买
handleClickBuy() {
let goods = [{
num: 1,
shop_id: this.bargainObj.shop_id,
goods_id: this.bargainObj.goods_id,
bargain_launch_id: this.bargainObj.id,
item_id: this.bargainObj.item_id
}]
let params = {
goods
}
this.$Router.push({
path: '/pages/confirm_order/confirm_order',
query: {
data: params
}
})
}
},
computed: {
...mapGetters(['userInfo'])
}
}
</script>
<style lang="scss">
@import "@/styles/base.scss";
.bargain-process-container {
.bargain-process-header {
background-image: url(data:image/png;base64,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
height: 420rpx;
background-size: 100% 100%;
padding-top: 30rpx;
.rule-contain {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 100rpx;
padding: 6rpx 10rpx;
margin-right: 24rpx;
}
.status-container {
margin-left: 24rpx;
}
}
.main {
padding: 0 24rpx;
margin-top: -230rpx;
.goods-planel {
background-color: white;
padding: 30rpx 24rpx;
border-radius: 20rpx;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
.goods-info {
margin-left: 24rpx;
flex: 1;
.goods-name {
line-height: 40rpx;
}
}
}
// 砍价状态2
.bargain-panel {
margin-top: 30rpx;
padding: 24rpx 24rpx 20rpx;
background-color: $-color-white;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
border-radius: 20rpx;
.bargain-panel-header {
font-weight: bold;
}
.progress-container {
margin-top: 33rpx;
.progress {
flex: 1;
background-color: #FFEBE5;
height: 20rpx;
border-radius: 50rpx;
.progress-bar {
background: linear-gradient(90deg, #F95F2F 0%, #FF2C3C 100%);
transition: width .5s ease;
height: 100%;
width: 0%;
border-radius: 50rpx;
}
}
}
.invite-btn1 {
background-color: $-color-primary;
height: 84rpx;
margin-top: 36rpx;
box-shadow: 0px 3px 10px rgba(235, 36, 51, 0.5);
}
.fail-btn {
background-color: #E5E5E5;
height: 84rpx;
margin-top: 30rpx;
}
.invite-btn-group {
margin-top: 60rpx;
.buy-now-btn {
width: 316rpx;
height: 84rpx;
color: #F95F2F;
font-size: 30rpx;
background-color: rgba($color: #F95F2F, $alpha: 0.2);
}
.invite-friend-btn {
width: 316rpx;
height: 84rpx;
background-color: $-color-primary;
}
}
.bargain-code-content {
margin-top: 62rpx;
.bargain-code-title {
}
.code-content {
margin-top: 30rpx;
.user-item {
padding: 15rpx 0;
margin-bottom: 30rpx;
}
}
}
}
// end
// 被邀请状态
.shared-panel {
.btn-container {
margin-top: 40rpx;
.help-knife-btn {
background-color: $-color-primary;
height: 84rpx;
box-shadow: 0px 3px 10px rgba(235, 36, 51, 0.5);
}
.knife-btn {
height: 84rpx;
background-color: $-color-white;
border: 1px solid #BBBBBB;
margin-top: 30rpx;
}
}
.code-content {
margin-top: 30rpx;
padding: 27rpx 24rpx;
background-color: $-color-white;
.user-item {
padding: 15rpx 0;
margin-top: 10rpx;
}
}
}
// end
.choose-container {
margin: 40rpx 0;
.title {
font-weight: 500;
margin-bottom: 30rpx;
}
.choose-content {
padding: 30rpx 20rpx;
background-color: $-color-white;
border-radius: 10px;
}
}
.lunch-btn {
height: 84rpx;
background-color: $-color-primary;
box-shadow: 0px 3px 10px rgba(235, 36, 51, 0.5);
}
}
.pop-container {
height: 800rpx;
.goods-info {
padding: 20rpx 20rpx;
.goods-spec {
align-self: flex-end;
}
}
.spec-selector {
padding: 30rpx 20rpx;
.title {
line-height: 36rpx;
}
.spec-item {
padding: 8rpx 28rpx;
background-color: #F4F4F4;
}
.spec-active-item {
padding: 8rpx 28rpx;
color: white;
background-color: $-color-primary;
}
}
.pickup-number {
margin-top: 30rpx;
padding: 0 20rpx;
}
}
.bargain-pop-container {
width: 559rpx;
height: 580rpx;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAi8AAAJFCAMAAAAiZedKAAAC/VBMVEUAAAD/MjL/JCT9LDv/M0D0PkT4Q0r40Hz5Pkn5Qkv7OUX98tv2Lib7O0f8NEH98dj8N0P979b+8975LjX3Jy79Ljv4zXv7Ojv2OkP2QkT50Xv/9eH4OD/81Yv8ND/8RTz4Q0v+NTz40Hz+4an/+tz+9OD/9OD4pmz4s3H4wHX8Pz340Hv+9OD+NTv+8+D8Oj37TED+8+D+9OD+8+D+Mzn40Hv+9N/50Hv+9N/4PUb40Hv40Hz+9OD+Mj7+NTz40Hz50Hz50Xz40Hv99OH3z3r30Hv+LTz8NkP+89376sf8OEX98dj768r979P+8tv+9OD87c37Okb87tH77Mz9M0H7PUj7PEf9MUD66cT98Nb9NEL+Lz787c/9MD/98NX+MD787tD7P0n76cb6Q1/6Q2b6Q2H6Q2j6QEr658L98tn6Q2T6Q2X6Q2P40Hz6QUv6Ql35iXD6Qkz65sH65L/6Qlz64r/5Qlf3qWb4mmL3nWP65cD4pWX627n5zK75x6r5QVn50rL62rj64b75iW352Lf5vqP5QVr64b363bv4q2f5s5v4mGH6l5X4oWT61LP5tp77mJj5yqz5uaD4nmP4m2L64Lz5vKL5zrD6lpL4q2z4omf4q2n4lmH7mZz4qWr517f4pmf5xaj4r2v5v6X4pGX5yav5tJz4rWn65sL63rz4tW74nWX4rm34oGT6REr6Rkv4t3D4n2b3lmD5wab4o2T6w6j63734pGj61rX3s2z4pmr4qWf6Qkn61bX50LH4p2X7mJr5uJ74unP4sm74lGD4sJr4rWz6TEz6SEv5sIT4snD4sG35jV/5aFT6X1L5cFb6UU74oGP4vqT4rnX5sJD5sZX5sYv4oWP5sZr5fVv5Qlb7mZ75hVz6V0/4gWX5d1j4sZj4r4D4znv4rXv4v3X6Q1v4sWv4xXn4tHP4o2r4nWL6xan4mGf6v6T4s3v5S1j5c2/5YWz4dGH5QUz5g3/7mp/5kIv4oXX6VGv4kmb5YFz5Vlr64Kj636j4knIhfrVRAAAARnRSTlMABQeFFClFgK2trYACra1/rX+ADgoS/RokNS0+Hg2ncD/07hYH88OgkYaEbSberJ5Y7ebdyJtyWlEr29egoLy3sqaThsC9EmGNegAAGVRJREFUeNrs2DFqI0EQhtHObTA4HRxppEgIJIFxoMyJwLB9jr3/BTaZZDdZ/WDcU8N7fYWPmppq32SePk+Hy72zNvfL4fQ5zW1NptO+s2b729TWYjp01u+wjmJ2p04Np10b7njtVHE9tsGmc6eO89SGOtpza9kPnTA7H6Nqrrs2zOzHqJ7D3EZ579Tz3gZ5s+tWdH5rY7x2KnptQ8z+jWraz22Ej05NH22EW6emWxvg+dKp6fLcft6xU9WII+/UqWpqD7Hukiy8jrtEJ17XOh682OkFvVCnlztVPbXA9/XSvZLvsV7MF8wXz3zhb1uZLxSlF/TCQi8k9EJCLyT0QkIvJPRCQi8k9EJCLyT0QkIvJPRCQi8k9EJCLyT0QmITvTzdqUov6IWFXkjohYReSOiFhF5I6IXENnr5RVV6QS8s9EJCLyT0QkIvJPRCQi8k9EJCLyT0QkIvJPRCQi8M9dL+Sy/oBb3wL72Q0AsJvZDQCwm9kNALiW308puq9IJeWOiFhF5IbKOXL6rSC3phoRcSeiGhFxJ6IaEXEnohsYleXr6oSi/ohYVeSOiFhF5I6IWEXkjohYReSOiFhF5I6IWEXkjohYRe/rBjt7iNg1EUhj0oJKTEwFKIM8w4qpSA/mgGdgElQdVlR/KGspluIdDMqmRqg5EDJlUjNShuHV9W+3ufNby6OrrwoBd40As86AUe0+jlGWN1E11FL6AX0AsuTaKXm2eMFb2AXnBGL/CgF3jQCzzoBR70Ag96gQe9wINe4EEv8JhGL1uMFb2AXnD243v5lWSPd+tYff5vMVZH9YnXd49Z8jsaKlmdS6GXiTrquniVDKvljyR6mbSjBvl7vZjFSiflW1s3B+v1b4uxKqzXoanbt1Inq0XUa7mRFLefqdDLVBV23aGNJW2WUY8klcr9qRZ6mbTChjjsSylNeq5LKsW1Gb1MXGHD1LGULr/dLmupaoxeJq+wgZpK2nyzYeb3UtwYvUxfYUM1sXQ/j76SSWVtgxVPGKvCBqtLKYu+sEil3OglBIUNl0vpIuqaSZXRSxAKc6ikWdSxiKWaXsLg6qWW4u6BuZVejV7CUJjHq3QbXXqQcnoJhK+XXHqILsxTqaGXQOzMo5HS6EIiVUYvgdiZSyUlF+clkfb0EgpnL3sp6c7dll5C4eyl7Q7eTHqnl1A4e3mXsu63LjeX3RPGytlLLs3oJWD0AnrBGb3Ag17gQS/woBd40As86AUeP7SXFxd6Ga/diwu9BO6DnTq2YRAIgCBYoSXLsQPH0AwlUZoDvoGN4GHmWljdKb18mNVJvbxsyn38C/7F/AtX4F/MvzDc5V+YlF7QC4NeKPRCoRdOtesFvXDQC4VeKPRCoRcKvVDohUIvFHqhuEcvP2alF/TCoBcKvVDoheKivazJ/mNW+5ro5eH0gl4Y9EJxj16+zEovFJte0AsHvVDohUIvFHqh0AuFXigu2suSbF9mtS2JXh5OL1y+lzez0gt6YdALhV4o9EKhFwq9/NmlYyoIYQCAYgZvQwKPDResDCeZpQb+1kKiIRS+UPhC4QuFLxS+UEz65Ux8Wdf/THz5OF/whcEXCl8ofKHwhcIXCl8o3vFlY1W+4AuDLxS+UEz65Uh8Wdd9JJcv3+YLvjD4QuELhS8Ur/hyb6zKF3xh8IXCFwpfKHyh8IXCF4o5v1zxy49V+YIvDL5Q+ELhC4UvFL5Q+ELhC4UvFL5Q+ELhC4UvFJN+2RNf1nXviS8f5wsPO3bQ2kQQBXCchKgUckvUFjx4S/IR/Ah+g5z1klPLQjoHsUarLr2JBXW2h4gVJV1D3VI0tGAPG0gladMiKjTYVMqGGAwGagm0XnyzO2vTuKaZg9Dsvv95jz/ee7PoBeOhF0wk9IKJhF4wkdALJhJ6wURCL5hI6AUTCb1gIrnDy1VsUKPoBUMvmJUrvNCr2KCGXrD/52Xs7u7uuSB68W5UiIvlJRhEL16Nimix5osPwKAXj0ZFuMB8uXAh5vehF89GRbiAl3o9FvajF89G++bCSlYNIxYK+/B+8WpUhIssV3U9Ggj7cL54NSqiBbwUjeilkB+9eDXa/y4CLqk9vR4dDoTRi1ejAlxSKdKs1yNXLoZ86MWj0b60XB8ztZBlwzAiI5fQi2ejfXCB5KScIi3N0HU9MjJ8Hr14NXqyFn66kENd1zStOnQZvXg32ksLTza5VA39W7G4Iw1dPhPwd3rZ3UUvnomeyIWfLg1dK5ay65I0dLbTSzDIvMBX6MUT0RNeRXC3MC6/NOCSVbalLi9B7gVCL16InsQFNhFhu0jLZxur0pEXzsXni12ogxcWenF/zl44FnO4ENJS2C5SDl5LDl7CsXq9mkxaYtCL26M9VxFEKnu6uYu2JKh7H/n8oZhhgBdbDHpxd9RJC+diHrqtrKklXZYcvMB4CUR1vQqf/hGDXtwcdZ4tphYCVXV2uSjN95KjF3/oYlQr7qVSDIwtBr24N+qkBYLDhT2LiqaW9I4kOXsJB4ajhr5HCPteBjBW6MWt0S4tnXcuaeqami8ojU3pH158oYtXIoahVyskRUwwthj04s6okxZYRfzOZcOFH7rOXi6NRHSoeEigY2LQixujDrMlRaBf1p2rLGxKPbycHx6JaGpR1XSlxbz0JYZewwY12nW3cC2thsZWEb9ceng5c3loIVvI5oua1iRHYjgZ9OK2aLcW08sBbCKm5WBV6unFHwAvUnlZUbJ5VdOqTIxsi7FCL66KjnVokS0tVZgt7HBZLkvSiV7ODo2Ozu8spzvE8Nf1GA+9uChqc6mBFgJaKqBFM7VszY869bcX6P2aLWavAmLI8RmDXlwTtf+3pLgWe7Y
background-size: 100% 100%;
.differ-price {
font-size: 58rpx;
line-height: 38rpx;
}
.progress-container {
margin-top: 26rpx;
.progress {
width: 409rpx;
height: 20rpx;
background-color: #FD498F1A;
border-radius: 50rpx;
.progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #FA444D 0%, #FD498F 100%);
border-radius: 50rpx;
transition: width .5s ease;
}
}
}
.invite-btn {
background-image: url(data:image/png;base64,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
background-size: 100% 100%;
height: 106rpx;
color: #7B3200;
font-weight: 500;
margin-top: 180rpx;
width: 478rpx;
}
}
.close-icon {
margin-top: 26rpx;
}
.share-pop-container {
height: 500rpx;
background-color: $-color-white;
}
}
</style>