1902 lines
48 KiB
Vue
1902 lines
48 KiB
Vue
<template>
|
||
<view>
|
||
<view style="background: rgb(41, 36, 56)">
|
||
<view class="bargin" v-if="show == false">
|
||
<view class="top-sty">
|
||
<view class="user-info" @tap="handleAvatarClick">
|
||
<image class="user-img" lazy-load :src="imgPath"></image>
|
||
<view class="username">{{ user_nickname }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="goods-sty">
|
||
<view class="goods-back-sty">
|
||
<view class="part1_product">
|
||
<view>
|
||
<image
|
||
class="pro_img"
|
||
lazy-load
|
||
:src="Info.activity_rule.product_image"
|
||
></image>
|
||
</view>
|
||
<view class="pro_info">
|
||
<view class="item_name_sty">{{
|
||
Info.activity_rule.product_item_name
|
||
}}</view>
|
||
<view class="price_sty">
|
||
<label style="color: #ff6803">{{ __("底价：") }}</label>
|
||
<label
|
||
style="color: #ff6803; font-weight: bold; font-size: 50rpx"
|
||
>{{
|
||
sprintf(
|
||
"%.2f",
|
||
Info.activity_rule.cut_down_min_limit_price
|
||
)
|
||
}}</label
|
||
>
|
||
<span
|
||
style="
|
||
text-decoration: line-through;
|
||
margin-left: 10rpx;
|
||
color: #999;
|
||
"
|
||
>{{ Info.activity_rule.item_unit_price }}</span
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="part-bottom-sty">
|
||
<view
|
||
:class="
|
||
Info.can_buy_now == 2
|
||
? 'time_fon_sty_reason1'
|
||
: 'time_fon_sty_reason2'
|
||
"
|
||
>{{ Info.cannot_buy_now_reason }}</view
|
||
>
|
||
<view class="time_sty">
|
||
<view class="time_fon_sty">
|
||
{{ __("活动时间仅剩") }}
|
||
</view>
|
||
<view v-if="end == 1">
|
||
<view class="remaining_time">
|
||
<view class="time">{{ Time.hour }}</view
|
||
><view class="point_sty">{{ __(":") }}</view>
|
||
<view class="time">{{ Time.min }}</view
|
||
><view class="point_sty">{{ __(":") }}</view>
|
||
<view class="time">{{ Time.sec }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="end == 2">
|
||
<view class="remaining_time">
|
||
<view class="time">{{ Time.hour }}</view
|
||
><view class="point_sty">{{ __(":") }}</view>
|
||
<view class="time">{{ Time.min }}</view
|
||
><view class="point_sty">{{ __(":") }}</view>
|
||
<view class="time">{{ Time.sec }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-progressBar">
|
||
<view
|
||
class="u-progressBar-cont"
|
||
:style="'width:' + width + '%'"
|
||
></view>
|
||
</view>
|
||
<view class="part3">
|
||
<!-- 还未砍价，发起人=帮砍人，活动正在进行 开始砍价 -->
|
||
<view
|
||
class="button-start"
|
||
@click="bargin"
|
||
v-if="
|
||
Info.is_cut == false &&
|
||
istrue &&
|
||
end != 1 &&
|
||
end != 3 &&
|
||
Info.order_id == ''
|
||
"
|
||
></view>
|
||
<!-- 还未砍价，发起人=帮砍人，活动还未开始 -->
|
||
<view
|
||
class="button-start"
|
||
v-if="
|
||
Info.is_cut == false &&
|
||
istrue &&
|
||
end == 1 &&
|
||
Info.order_id == ''
|
||
"
|
||
></view>
|
||
<view class="cut_down_sty" v-if="Info.is_cut">
|
||
<view style="margin-left: 150rpx">
|
||
{{ __("原价") }}{{ __("￥")
|
||
}}{{ sprintf("%.2f", Info.activity_rule.item_unit_price) }}
|
||
</view>
|
||
<view style="margin-right: 150rpx">
|
||
{{ __("已砍") }}{{ __("￥")
|
||
}}{{
|
||
sprintf(
|
||
"%.2f",
|
||
Info.activity_rule.item_unit_price - Info.ac_sale_price
|
||
)
|
||
}}
|
||
</view>
|
||
</view>
|
||
<!-- 已经砍价，发起人=帮砍人，活动还未结束，已砍价！=砍价空间 -->
|
||
<view
|
||
style="display: flex"
|
||
v-if="
|
||
Info.is_cut &&
|
||
istrue &&
|
||
isCut &&
|
||
end != 1 &&
|
||
end != 3 &&
|
||
Info.order_id == ''
|
||
"
|
||
>
|
||
<!-- <view class="" @click="goshop">还差xx</view> -->
|
||
<view
|
||
class="immediately_btn"
|
||
v-if="Info.can_buy_now == 1"
|
||
@click="goshop"
|
||
></view>
|
||
<view
|
||
:class="
|
||
Info.can_buy_now === 2 ? 'help_cut_btn2' : 'help_cut_btn'
|
||
"
|
||
style=""
|
||
v-if="Info.activity_state == 1"
|
||
@click="shareBox"
|
||
></view>
|
||
</view>
|
||
<view style="display: flex; justify-content: space-between"> </view>
|
||
|
||
<!-- 还未砍价，发起人！=帮砍人，活动还未结束 帮忙砍价 -->
|
||
<view
|
||
class="cut_pri_sty"
|
||
@click="bargin"
|
||
v-if="
|
||
Info.is_cut == false &&
|
||
istrue == false &&
|
||
isCut &&
|
||
end != 1 &&
|
||
end != 3 &&
|
||
Info.order_id == ''
|
||
"
|
||
></view>
|
||
|
||
<!-- 已经砍价，发起人=帮砍人，活动还未结束，已砍价=砍价空间 立即出手-->
|
||
<!-- <view class="up_hands_sty" @click="goshop" v-if="(Info.is_cut&&istrue&&isCut==false&&end!=1&&end!=3&&Info.order_id=='')"></view> -->
|
||
|
||
<!-- 已经砍价，发起人！=帮砍人，活动还未结束，已砍价！=砍价空间 -->
|
||
<view
|
||
v-if="
|
||
Info.is_cut &&
|
||
istrue == false &&
|
||
isCut &&
|
||
end != 1 &&
|
||
end != 3 &&
|
||
Info.order_id == ''
|
||
"
|
||
>
|
||
<!-- 我也要 -->
|
||
<navigator
|
||
:url="
|
||
'/activity/cutprice/detail?mid=' +
|
||
mid +
|
||
'&pid=' +
|
||
pid +
|
||
'&ac_id=' +
|
||
ac_id
|
||
"
|
||
class="i_want_sty"
|
||
></navigator>
|
||
<!-- <button open-type="share" class="button1" style="margin:40rpx 0 0 0" @click='shareBox'>{{__('找人帮砍')}}</button> -->
|
||
<!-- 找人帮砍 -->
|
||
<button
|
||
:class="help_cut_btn_1"
|
||
v-if="Info.activity_state == 1"
|
||
@click="shareBox"
|
||
></button>
|
||
</view>
|
||
<!-- 已经砍价，发起人！=帮砍人，活动还未结束，已砍价=砍价空间 我也要 -->
|
||
<navigator
|
||
:url="
|
||
'/activity/cutprice/detail?mid=' +
|
||
mid +
|
||
'&pid=' +
|
||
pid +
|
||
'&ac_id=' +
|
||
ac_id
|
||
"
|
||
v-if="
|
||
istrue == false &&
|
||
isCut == false &&
|
||
end != 1 &&
|
||
end != 3 &&
|
||
Info.order_id == ''
|
||
"
|
||
class="i_want_sty"
|
||
></navigator>
|
||
<!-- 活动已经结束 再逛逛-->
|
||
<navigator
|
||
class="again_stroll_sty"
|
||
url="/activity/cutprice/list"
|
||
v-if="end == 3"
|
||
></navigator>
|
||
<!-- 您已购买，再逛逛 -->
|
||
<navigator
|
||
class="again_stroll_sty"
|
||
url="/activity/cutprice/list"
|
||
v-if="Info.order_id && end != 3"
|
||
></navigator>
|
||
<!-- 恭喜你，砍价成功 -->
|
||
<view
|
||
class="congratulate-success"
|
||
@click="goshop"
|
||
v-if="
|
||
Info.is_cut &&
|
||
istrue &&
|
||
isCut == false &&
|
||
end != 1 &&
|
||
end != 3 &&
|
||
Info.order_id == ''
|
||
"
|
||
></view>
|
||
</view>
|
||
<view class="part4" v-if="Info.Description">
|
||
<view class="header">{{ __("活动说明") }}</view>
|
||
<rich-text :nodes="htmlString"></rich-text>
|
||
</view>
|
||
|
||
<view class="part6">
|
||
<scroll-view
|
||
class="m-nearbylist"
|
||
scroll-y="true"
|
||
@scrolltolower="scrollbottom"
|
||
>
|
||
<view
|
||
v-for="(items, index) in List"
|
||
:key="index"
|
||
style="
|
||
display: flex;
|
||
position: relative;
|
||
border-bottom: 1rpx solid mediumpurple;
|
||
"
|
||
>
|
||
<view>
|
||
<image
|
||
class="avatar_sty"
|
||
lazy-load
|
||
:src="items.user_avatar"
|
||
></image>
|
||
</view>
|
||
<view>
|
||
<view class="user_nickname_sty">
|
||
{{ items.user_nickname
|
||
}}<label style="margin-left: 10rpx">{{
|
||
items.user_mobile
|
||
}}</label>
|
||
</view>
|
||
</view>
|
||
<view class="cut_away_sty">
|
||
{{ __("砍掉") }}{{ sprintf("%.2f", items.ach_price)
|
||
}}{{ __("元") }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- <view style="display:flex; flex-direction: column; justify-content:center;align-items: center;">
|
||
<view>活动规则</view>
|
||
<textarea name="" id="" cols="30" rows="10">
|
||
砍价时间：顾客发起活动后需要在规定时间内完成砍价，超过时间则砍价失败。一般建议时间为24小时。
|
||
1
|
||
砍价次数：顾客需要让朋友帮忙砍价的次数，通常每人只能帮砍一次。
|
||
2
|
||
参与方式：用户可以通过商城砍价列表选择产品，或通过好友分享的链接参与砍价活动。
|
||
1
|
||
砍价成功：当产品价格砍至系统设置的最低价时，砍价成功，顾客需支付相应金额购买产品。
|
||
1
|
||
|
||
这些规则有助于商家和顾客更好地参与砍价活动。</textarea>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mask" v-if="showMask && !showImg">
|
||
|
||
<text class="mask-close" @tap="maskClose">✕</text>
|
||
<text class="mask-text-wrap sign">恭喜你!</text>
|
||
<text class="mask-text-wrap">获得一次摇骰子机会</text>
|
||
<view class='yaotouzi'>
|
||
|
||
<image
|
||
class="mask-img"
|
||
src="/static/images/cutPrice/zero.png"
|
||
mode="widthFix"
|
||
v-if="tossResult==0"
|
||
/>
|
||
<image
|
||
class="mask-img"
|
||
src="/static/images/cutPrice/one.gif"
|
||
mode="widthFix"
|
||
v-if="maskImg&&tossResult==1"
|
||
/>
|
||
<image
|
||
class="mask-img"
|
||
src="/static/images/cutPrice/two.gif"
|
||
mode="widthFix"
|
||
v-if="maskImg&&tossResult==2"
|
||
/>
|
||
<image
|
||
class="mask-img"
|
||
src="/static/images/cutPrice/three.gif"
|
||
mode="widthFix"
|
||
v-if="maskImg&&tossResult==3"
|
||
/>
|
||
<image
|
||
class="mask-img"
|
||
src="/static/images/cutPrice/four.gif"
|
||
mode="widthFix"
|
||
v-if="maskImg&&tossResult==4"
|
||
/>
|
||
<image
|
||
class="mask-img"
|
||
src="/static/images/cutPrice/five.gif"
|
||
mode="widthFix"
|
||
v-if="maskImg&&tossResult==5"
|
||
/>
|
||
<image
|
||
class="mask-img"
|
||
src="/static/images/cutPrice/six.gif"
|
||
mode="widthFix"
|
||
v-if="maskImg&&tossResult==6"
|
||
/>
|
||
<button @tap='showMaskImg' class="breath-btn">点我开始翻倍</button>
|
||
</view>
|
||
</view>
|
||
<view :class="['msk']" @tap="back" v-if="showImg">
|
||
<view class="msk_box">
|
||
<navigator
|
||
:url="'/pagesub/index/store?store_id=' + Info.store_id"
|
||
@tap.stop="goToStore"
|
||
>
|
||
<image
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/cut-price-animation.png "
|
||
style="width: 100%"
|
||
mode="widthFix"
|
||
></image>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-tap-btn">
|
||
<navigator
|
||
:url="'/pagesub/index/store?store_id=' + Info.store_id"
|
||
class="u-go-home"
|
||
>
|
||
<view class="iconfont icon-shouyeshouye"></view>
|
||
</navigator>
|
||
</view>
|
||
<share-box-mp
|
||
:PageQRCodeInfo="PageQRCodeInfo"
|
||
@cancelShare="cancelShare"
|
||
@showCodeImg="showCodeImg"
|
||
@shareQRCode="shareQRCode"
|
||
@saveImg="saveImg"
|
||
:shareDataDefault="shareData"
|
||
ref="shareBoxMp"
|
||
></share-box-mp>
|
||
<share-box-app
|
||
:shareDataDefault="shareData"
|
||
ref="shareBoxApp"
|
||
></share-box-app>
|
||
<loginPopup :show="showLoginPopup" @close="closeLoginPopup" @loginSuccess="handleLoginSuccess"></loginPopup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
function getNowFormatDate() {
|
||
var e = new Date(),
|
||
t = "-",
|
||
n = e.getMonth() + 1,
|
||
r = e.getDate();
|
||
n >= 1 && n <= 9 && (n = "0" + n), r >= 0 && r <= 9 && (r = "0" + r);
|
||
var i = e.getFullYear() + t + n + t + r;
|
||
return i;
|
||
}
|
||
|
||
import $ from "../../helpers/util";
|
||
import { mapState, mapMutations } from "vuex";
|
||
|
||
import shareBoxMp from "../../components/share-box-mp.vue";
|
||
import shareBoxApp from "../../components/share-box-app.vue";
|
||
import loginPopup from "@/components/loginPopup.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
Time: "",
|
||
hours: "",
|
||
show: false,
|
||
showImg: false,
|
||
showMask: false, // 遮罩层
|
||
showPrice: false,
|
||
maskImg:false,
|
||
tossResult:0,
|
||
isCut: true,
|
||
imgPath: "",
|
||
user_nickname: "",
|
||
mid: 0,
|
||
uid: 0,
|
||
pid: 0,
|
||
page: 1,
|
||
rows: 10,
|
||
Info: {
|
||
activity_rule: {
|
||
product_image: "",
|
||
},
|
||
},
|
||
end: 0,
|
||
startTime: "",
|
||
endTime: "",
|
||
istrue: true,
|
||
flag: true,
|
||
ispage: true,
|
||
width: 100,
|
||
participantId: "",
|
||
ac_id: 0,
|
||
money: 0,
|
||
List: [],
|
||
hour: 0,
|
||
min: 0,
|
||
sec: 0,
|
||
htmlString: "",
|
||
PageQRCodeInfo: {
|
||
Path: "",
|
||
IsShare: false,
|
||
IsShareBox: false,
|
||
IsJT: false,
|
||
},
|
||
shareData: {
|
||
shareText: "澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！",
|
||
shareTitle: "澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！",
|
||
href: "https://www.suteshop.com ",
|
||
image: "",
|
||
},
|
||
showLoginPopup: false,
|
||
expiredAt: 0, // 初始化时间戳为0
|
||
countdownTimer: null, // 定时器实例，用于清除
|
||
};
|
||
},
|
||
components: {
|
||
shareBoxMp,
|
||
shareBoxApp,
|
||
loginPopup,
|
||
},
|
||
computed: mapState([
|
||
"Config",
|
||
"StateCode",
|
||
"notice",
|
||
"plantformInfo",
|
||
"shopInfo",
|
||
"userInfo",
|
||
"hasLogin",
|
||
]),
|
||
onLoad: function (options) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.__("砍价详情"),
|
||
});
|
||
var t = this;
|
||
// 长参数解析
|
||
if (options.scene) {
|
||
let longUrl = decodeURIComponent(options.scene);
|
||
let paramsArray = longUrl.replace("longUrl=", "").split("-");
|
||
options.mid = paramsArray[0];
|
||
options.pid = paramsArray[1];
|
||
options.ac_id = paramsArray[2];
|
||
options.uid = paramsArray[3];
|
||
}
|
||
|
||
options.sid
|
||
? t.setData({
|
||
imgPath: t.userInfo.user_avatar,
|
||
user_nickname: t.userInfo.user_nickname,
|
||
mid: options.mid,
|
||
uid: options.sid,
|
||
participantId: t.userInfo.user_id,
|
||
pid: options.pid,
|
||
})
|
||
: t.setData({
|
||
imgPath: t.userInfo.user_avatar,
|
||
user_nickname: t.userInfo.user_nickname,
|
||
mid: options.mid,
|
||
uid: options.uid || t.userInfo.user_id,
|
||
participantId: t.userInfo.user_id,
|
||
pid: options.pid,
|
||
});
|
||
|
||
// 已登录才执行后续逻辑
|
||
if (t.hasLogin) {
|
||
t.forceUserInfo(function (user) {
|
||
t.GetOtherCutPriceActivityList();
|
||
});
|
||
}
|
||
},
|
||
onShow: function () {
|
||
//未登录时，直接显示登录弹窗
|
||
if (!this.hasLogin) {
|
||
this.showLoginPopup = true; // 显示登录弹窗
|
||
return;
|
||
}
|
||
this.GetVendorCutPriceEventDetail();
|
||
},
|
||
onBackPress() {
|
||
if (this.$refs.shareBoxApp.showBoxView) {
|
||
this.$refs.shareBoxApp.cancel();
|
||
return true;
|
||
}
|
||
},
|
||
onUnload() {
|
||
// 离开页面，注销事件
|
||
var that = this;
|
||
|
||
if (this.$refs.shareBoxApp.showBoxView) {
|
||
this.$refs.shareBoxApp.cancel();
|
||
}
|
||
// 新增：清除倒计时定时器
|
||
if (that.countdownTimer) {
|
||
clearInterval(that.countdownTimer);
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations([
|
||
"login",
|
||
"logout",
|
||
"getPlantformInfo",
|
||
"forceUserInfo",
|
||
"getUserInfo",
|
||
]),
|
||
|
||
GetVendorCutPriceEventDetail: function () {
|
||
var that = this,
|
||
params = {
|
||
activity_id: this.mid,
|
||
user_id: this.uid,
|
||
participant_id: this.userInfo.user_id,
|
||
};
|
||
params.user_id == params.participant_id
|
||
? this.setData({
|
||
istrue: true,
|
||
})
|
||
: this.setData({
|
||
istrue: false,
|
||
});
|
||
$.request({
|
||
url: this.Config.URL.user.getCutPriceActivity,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (200 == status) {
|
||
// 新增：保存接口返回的过期时间戳（注意判断是否存在）
|
||
if (data.expired_at) {
|
||
that.setData({ expiredAt: data.expired_at }); // 存储时间戳
|
||
}
|
||
data.CutPricePercent =
|
||
(data.activity_rule.item_unit_price - data.ac_sale_price) /
|
||
(data.activity_rule.item_unit_price -
|
||
data.activity_rule.cut_down_min_limit_price);
|
||
that.setData({
|
||
Info: data,
|
||
ac_id: data.ac_id,
|
||
width: 100 * parseFloat(data.CutPricePercent).toFixed(2),
|
||
});
|
||
// that.getTime();
|
||
that.startCountdown();
|
||
data.ac_sale_price - data.ac_mix_limit_price <= 0
|
||
? that.setData({
|
||
isCut: false,
|
||
})
|
||
: "";
|
||
|
||
//WxParse.wxParse("PromotionRule", "html", data.activity_rule.activity_intro, that)
|
||
|
||
if (data.activity_rule.activity_intro) {
|
||
that.htmlString = data.activity_rule.activity_intro
|
||
.replace(/\\/g, "")
|
||
.replace(/<img/g, '<img style="display:none;"');
|
||
}
|
||
} else {
|
||
that.setData({
|
||
flag: false,
|
||
ispage: true,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
showMaskImg(){
|
||
this.maskImg=true;
|
||
const that = this
|
||
$.request({
|
||
url: this.Config.URL.user.dolookTurnCutPrice,
|
||
data: {ac_id:this.ac_id},
|
||
success:function(data, status, msg, code){
|
||
if(status==200){
|
||
that.tossResult=data.point
|
||
setTimeout(()=>{
|
||
wx.showModal({
|
||
title: '幸运骰子',
|
||
content: `恭喜你,摇到了${data.point}点,幸运暴击${data.point}倍,砍了${data.achPrice}元`,
|
||
showCancel: false,
|
||
confirmText: '确定',
|
||
success(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
that.maskClose()
|
||
}
|
||
}
|
||
});
|
||
},2500)
|
||
}
|
||
console.log("hhhhhh",that.tossResult)
|
||
}
|
||
})
|
||
},
|
||
// 头像区域点击事件
|
||
handleAvatarClick() {
|
||
const that = this;
|
||
if (!that.hasLogin) {
|
||
that.showLoginPopup = true; // 显示登录弹窗
|
||
return;
|
||
}
|
||
},
|
||
handleLoginSuccess() {
|
||
const that = this;
|
||
that.showLoginPopup = false; // 关闭弹窗
|
||
|
||
// 强制重新获取用户信息（触发 Vuex 更新 userInfo）
|
||
that.getUserInfo();
|
||
|
||
// 延迟 500ms，确保 userInfo 已完全更新
|
||
setTimeout(() => {
|
||
const user_info = that.userInfo || {};
|
||
|
||
//直接更新页面数据（头像、昵称），确保实时渲染
|
||
that.setData({
|
||
imgPath: user_info.user_avatar || "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/default-avatar.png ",
|
||
user_nickname: user_info.user_nickname || "亲爱的用户",
|
||
participantId: user_info.user_id || "",
|
||
uid: user_info.user_id || that.uid,
|
||
});
|
||
|
||
// 重新请求砍价数据
|
||
if (that.mid) {
|
||
that.GetVendorCutPriceEventDetail(); // 重新加载砍价详情
|
||
that.GetOtherCutPriceActivityList(); // 重新加载砍价记录
|
||
}
|
||
|
||
// 5. 强制刷新 DOM（兜底，确保数据同步到页面）
|
||
that.$forceUpdate();
|
||
}, 500); // 延长延迟到 500ms，确保异步请求完成
|
||
},
|
||
closeLoginPopup() {
|
||
this.showLoginPopup = false;
|
||
},
|
||
// 新增：基于expired_at时间戳的倒计时逻辑
|
||
startCountdown() {
|
||
var that = this;
|
||
// 清除已有定时器（避免重复）
|
||
if (that.countdownTimer) {
|
||
clearInterval(that.countdownTimer);
|
||
}
|
||
|
||
// 定义倒计时更新函数
|
||
function updateCountdown() {
|
||
const now = new Date().getTime(); // 当前时间戳（毫秒）
|
||
const expiredAt = that.expiredAt; // 接口返回的过期时间戳（毫秒）
|
||
const remainingTime = expiredAt - now; // 剩余时间（毫秒）
|
||
|
||
// 情况1：已过期（剩余时间<=0）
|
||
if (remainingTime <= 0) {
|
||
that.setData({
|
||
Time: { hour: "00", min: "00", sec: "00" },
|
||
end: 3, // 标记活动结束
|
||
});
|
||
clearInterval(that.countdownTimer); // 清除定时器
|
||
return;
|
||
}
|
||
|
||
// 情况2：未过期，计算剩余时、分、秒
|
||
const hours = Math.floor(remainingTime / 3600000); // 小时：3600*1000
|
||
const minutes = Math.floor((remainingTime % 3600000) / 60000); // 分钟：60*1000
|
||
const seconds = Math.floor((remainingTime % 60000) / 1000); // 秒
|
||
|
||
// 补零（确保显示两位数）
|
||
const formatHour = hours.toString().padStart(2, "0");
|
||
const formatMin = minutes.toString().padStart(2, "0");
|
||
const formatSec = seconds.toString().padStart(2, "0");
|
||
|
||
// 更新页面数据
|
||
that.setData({
|
||
Time: { hour: formatHour, min: formatMin, sec: formatSec },
|
||
end: 2, // 标记活动进行中
|
||
});
|
||
}
|
||
|
||
// 立即执行一次（避免初始延迟）
|
||
updateCountdown();
|
||
|
||
// 每隔1秒更新一次
|
||
that.countdownTimer = setInterval(updateCountdown, 1000);
|
||
},
|
||
getTime: function () {
|
||
var e = this,
|
||
t = new Date().getTime(),
|
||
s = this.Info.activity_endtime,
|
||
n = this.Info.activity_starttime;
|
||
var i = new Date(n.replace(/-/g, "/")).getTime(),
|
||
u = new Date(s.replace(/-/g, "/")).getTime();
|
||
if (i >= t) {
|
||
var a = setInterval(function () {
|
||
e.setData({
|
||
Time: $.Formattime1(e.Info.activity_starttime, a),
|
||
end: 1,
|
||
}),
|
||
e.Time == undefined && e.getTime();
|
||
}, 1e3);
|
||
return;
|
||
}
|
||
if (u <= t) {
|
||
var a = setInterval(function () {
|
||
e.setData({
|
||
Time: $.Formattime(e.Info.activity_endtime, a),
|
||
end: 3,
|
||
}),
|
||
e.Time == undefined && e.getTime();
|
||
}, 1e3);
|
||
return;
|
||
}
|
||
if (i < t < u) {
|
||
var a = setInterval(function () {
|
||
e.setData({
|
||
Time: $.Formattime(e.Info.activity_endtime, a),
|
||
end: 2,
|
||
}),
|
||
e.Time == undefined && e.getTime();
|
||
}, 1e3);
|
||
return;
|
||
}
|
||
},
|
||
GetOtherCutPriceActivityList: function () {
|
||
var params = {
|
||
activity_id: this.mid,
|
||
user_id: this.uid,
|
||
page: this.page,
|
||
},
|
||
t = this;
|
||
|
||
$.request({
|
||
url: this.Config.URL.user.listsCutPriceHistory,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (200 == status && data.items.length > 0) {
|
||
t.setData({
|
||
flag: false,
|
||
});
|
||
t.setData({
|
||
ispage: true,
|
||
List: data.items,
|
||
});
|
||
} else {
|
||
t.setData({
|
||
flag: false,
|
||
ispage: true,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
scrollbottom: function () {
|
||
var e = this;
|
||
e.setData({
|
||
flag: false,
|
||
}),
|
||
clearTimeout(t);
|
||
var t = setTimeout(function () {
|
||
e.setData({
|
||
type: e.type,
|
||
page: parseInt(e.page) + 1,
|
||
rows: 10,
|
||
}),
|
||
e.GetOtherCutPriceActivityList();
|
||
}, 500);
|
||
},
|
||
CutPrice: function () {
|
||
if (this.Info.activity_state > 1) {
|
||
this.$.alert(this.__("活动已结束！"));
|
||
return;
|
||
}
|
||
var params = {
|
||
ac_id: this.ac_id,
|
||
user_id: this.userInfo.user_id,
|
||
},
|
||
that = this;
|
||
$.request({
|
||
url: this.Config.URL.user.doCutPrice,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (200 == status) {
|
||
that.setData({
|
||
money: data.ach_price,
|
||
ac_id: data.ac_id,
|
||
// showMask: true,
|
||
});
|
||
wx.showModal({
|
||
title: '恭喜',
|
||
content: `成功砍了${data.ach_price_pre}元`,
|
||
showCancel: false,
|
||
confirmText: '确定',
|
||
success(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
setTimeout(()=>{
|
||
that.setData({
|
||
showMask: true,
|
||
})
|
||
},200)
|
||
}
|
||
}
|
||
});
|
||
that.GetVendorCutPriceEventDetail();
|
||
that.GetOtherCutPriceActivityList();
|
||
} else {
|
||
that.$.alert(msg);
|
||
}
|
||
},
|
||
});
|
||
// that.setData({
|
||
// showMask: true,
|
||
// });
|
||
},
|
||
onShareAppMessage: function () {
|
||
// #ifdef MP-WEIXIN
|
||
wx.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ["shareAppMessage", "shareTimeline"],
|
||
});
|
||
// #endif
|
||
|
||
return {
|
||
title: this.Info.activity_rule.item_name,
|
||
path:
|
||
"/activity/cutprice/detail?mid=" +
|
||
this.mid +
|
||
"&uid=" +
|
||
this.uid +
|
||
"&pid=" +
|
||
this.pid +
|
||
"&ac_id=" +
|
||
this.ac_id,
|
||
};
|
||
},
|
||
|
||
/**
|
||
* 用户点击右上角分享朋友圈
|
||
*/
|
||
onShareTimeline: function () {
|
||
return {
|
||
title: this.Info.activity_rule.item_name,
|
||
query: {
|
||
mid: this.mid,
|
||
pid: this.pid,
|
||
ac_id: this.ac_id,
|
||
uid: this.userInfo.user_id,
|
||
},
|
||
};
|
||
},
|
||
|
||
bargin: function () {
|
||
// 未登录时显示登录弹窗
|
||
if (!this.hasLogin) {
|
||
this.showLoginPopup = true;
|
||
return;
|
||
}
|
||
this.CutPrice();
|
||
},
|
||
// 图片点击跳转店铺
|
||
goToStore() {
|
||
var that = this;
|
||
that.setData({ showImg: false });
|
||
that.GetVendorCutPriceEventDetail();
|
||
that.GetOtherCutPriceActivityList();
|
||
},
|
||
back: function () {
|
||
this.setData({
|
||
showImg: false,
|
||
}),
|
||
this.GetVendorCutPriceEventDetail(),
|
||
this.GetOtherCutPriceActivityList();
|
||
},
|
||
more: function (e) {
|
||
if (this.flag) {
|
||
var t = this;
|
||
clearTimeout(n);
|
||
var n = setTimeout(function () {
|
||
t.setData({
|
||
page: parseInt(t.page) + 1,
|
||
}),
|
||
t.GetOtherCutPriceActivityList();
|
||
}, 500);
|
||
}
|
||
},
|
||
goshop: function () {
|
||
// 未登录时显示登录弹窗
|
||
if (!this.hasLogin) {
|
||
this.showLoginPopup = true;
|
||
return;
|
||
}
|
||
var e = this,
|
||
params = {
|
||
amount: 1,
|
||
item_id: this.Info.activity_rule.item_id,
|
||
ac_id: this.Info.ac_id,
|
||
order_id: this.Info.order_id,
|
||
ac_id: this.ac_id,
|
||
};
|
||
if (this.Info.order_id == "") {
|
||
$.navigateTo({
|
||
url:
|
||
"/pages/checkout/checkout?single_activity=1&ifcart=0&cart_id=" +
|
||
params.item_id +
|
||
"|" +
|
||
params.amount +
|
||
"&activity_id=" +
|
||
this.mid +
|
||
"&ac_id=" +
|
||
this.ac_id,
|
||
});
|
||
} else {
|
||
// $.navigateTo({url: "/pages/checkout/checkout?spid=" + JSON.stringify(params) + "&activity_id=" + this.mid + "&sponsorId=" + this.uid + "&sp=" + this.Info.ServicePlaceCode + "&pm=" + this.Info.PayMethodCode + "&et=" + this.Info.BusinessHoursEnd + "&st=" + this.Info.BusinessHoursStart + "&showdate=" + this.Info.ReservationTimeEnabled + "&showname=" + this.Info.ContactEnabled})
|
||
}
|
||
},
|
||
shareQRCode: function (e) {
|
||
var that = this,
|
||
params = {
|
||
path:
|
||
this.Config.SiteUrl +
|
||
"/h5/activity/cutprice/detail?mid=" +
|
||
this.mid +
|
||
"&uid=" +
|
||
this.uid +
|
||
"&pid=" +
|
||
this.pid +
|
||
"&ac_id=" +
|
||
this.ac_id,
|
||
Path:
|
||
"/activity/cutprice/detail?mid=" +
|
||
this.mid +
|
||
"&uid=" +
|
||
this.uid +
|
||
"&pid=" +
|
||
this.pid +
|
||
"&ac_id=" +
|
||
this.ac_id,
|
||
MainImg: this.Info.activity_rule.product_image,
|
||
MainTitle: this.Info.activity_rule.product_item_name,
|
||
ProductId: this.pid,
|
||
MarketingEventId: this.mid,
|
||
ItemSalePrice: this.Info.activity_rule.item_unit_price,
|
||
OriginalPrice: "",
|
||
GroupPersonAmout: "",
|
||
CutPrice:
|
||
this.Info.activity_rule.item_unit_price - this.Info.ac_sale_price,
|
||
UserInfoId: this.uid,
|
||
MarketingEventTime: this.Info.activity_starttime,
|
||
};
|
||
//生成二维码并返回地址。 - 需要修改调整为小程序地址
|
||
$.request({
|
||
url: this.Config.URL.wx.getMiniAppQRCodeUnlimitPoster,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
that.setData({
|
||
PageQRCodeInfo: {
|
||
Path: data.url,
|
||
IsShare: true,
|
||
IsShareBox: false,
|
||
IsJT: true,
|
||
},
|
||
});
|
||
},
|
||
});
|
||
},
|
||
shareBox: function () {
|
||
// 未登录时显示登录弹窗
|
||
if (!this.hasLogin) {
|
||
this.showLoginPopup = true;
|
||
return;
|
||
}
|
||
let that = this;
|
||
// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
|
||
var $href = $.sprintf(
|
||
"%s/h5/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d",
|
||
that.Config.SiteUrl,
|
||
this.mid,
|
||
this.pid,
|
||
this.ac_id,
|
||
this.uid
|
||
);
|
||
// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
|
||
// #ifdef APP-PLUS
|
||
$href = $.sprintf(
|
||
"%s/h5/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d",
|
||
that.Config.SiteUrl,
|
||
this.mid,
|
||
this.pid,
|
||
this.ac_id,
|
||
this.uid
|
||
);
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
$href = $.sprintf(
|
||
"%s/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d",
|
||
that.Config.SiteUrl,
|
||
this.mid,
|
||
this.pid,
|
||
this.ac_id,
|
||
this.uid
|
||
);
|
||
// #endif
|
||
|
||
this.setData({
|
||
shareData: {
|
||
shareTitle: this.Info.activity_rule.product_item_name,
|
||
shareText: "",
|
||
href: $href,
|
||
image: this.Info.activity_rule.product_image,
|
||
price: this.number_format(this.Info.activity_rule.item_unit_price, 2),
|
||
},
|
||
});
|
||
|
||
// #ifdef APP-PLUS
|
||
this.$refs.shareBoxApp.show();
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
this.$refs.shareBoxMp.show();
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
if (that.$.ifUniApp()) {
|
||
this.$refs.shareBoxH5.show();
|
||
} else {
|
||
this.$refs.shareBoxMp.show();
|
||
}
|
||
// #endif
|
||
|
||
return;
|
||
|
||
this.setData({
|
||
PageQRCodeInfo: {
|
||
Path: "",
|
||
IsShare: true,
|
||
IsShareBox: true,
|
||
IsJT: false,
|
||
},
|
||
});
|
||
},
|
||
cancelShare: function () {
|
||
this.setData({
|
||
PageQRCodeInfo: {
|
||
Path: "",
|
||
IsShare: false,
|
||
IsShareBox: false,
|
||
IsJT: false,
|
||
},
|
||
});
|
||
},
|
||
saveImg: function () {
|
||
var e = this;
|
||
$.showLoading(),
|
||
$.downloadFile({
|
||
url: this.PageQRCodeInfo.Path,
|
||
success: function (t) {
|
||
$.hideLoading(),
|
||
$.saveImageToPhotosAlbum({
|
||
filePath: t.tempFilePath,
|
||
success: function () {
|
||
e.setData({
|
||
PageQRCodeInfo: {
|
||
Path: "",
|
||
IsShare: false,
|
||
IsShareBox: false,
|
||
IsJT: false,
|
||
},
|
||
}),
|
||
$.alert("保存图片成功！");
|
||
},
|
||
fail: function (e) {
|
||
$.hideLoading();
|
||
},
|
||
});
|
||
},
|
||
fail: function (e) {
|
||
$.hideLoading();
|
||
},
|
||
});
|
||
},
|
||
showCodeImg: function () {
|
||
$.previewImage({
|
||
current: this.PageQRCodeInfo.Path,
|
||
urls: [this.PageQRCodeInfo.Path],
|
||
});
|
||
},
|
||
maskClose:function() {
|
||
this.showMask = false;
|
||
this.showImg = true; // 关闭遮罩后立刻展示动画图
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/_variables";
|
||
|
||
.u-tap-btn {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
bottom: 150rpx;
|
||
}
|
||
|
||
.u-go-home {
|
||
border-radius: 100%;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border: 1px solid #eee;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
|
||
z-index: 2;
|
||
opacity: 0.8;
|
||
line-height: 80rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.u-go-home .iconfont {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.bargin {
|
||
width: 750rpx;
|
||
// background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/whole-background-start.png );
|
||
// background-repeat: no-repeat;
|
||
// background-size: 100% 100%;
|
||
// -moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.goods-back-sty {
|
||
background-color: #fff;
|
||
margin-left: 80rpx;
|
||
margin-right: 80rpx;
|
||
padding-bottom: 1rpx;
|
||
}
|
||
|
||
.part1_product {
|
||
display: flex;
|
||
background-color: #eceeff;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.pro_img {
|
||
margin-top: 20rpx;
|
||
margin-left: 10rpx;
|
||
width: 215rpx;
|
||
height: 205rpx;
|
||
border-radius: 15rpx;
|
||
border: 6rpx solid mediumpurple; /* 添加紫色 1px 边框 */
|
||
}
|
||
|
||
.pro_info {
|
||
margin-top: 50rpx;
|
||
margin-left: 20rpx;
|
||
position: relative;
|
||
padding-right: 70rpx;
|
||
}
|
||
|
||
.item_name_sty {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: normal;
|
||
}
|
||
|
||
.price_sty {
|
||
position: absolute;
|
||
left: 1rpx;
|
||
bottom: 10rpx;
|
||
width: 300rpx;
|
||
}
|
||
|
||
.part-bottom-sty {
|
||
margin-top: -2rpx;
|
||
width: 750rpx;
|
||
height: 1200rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/background-bottom-one.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.goods {
|
||
padding-left: 60rpx;
|
||
padding-top: 90rpx;
|
||
}
|
||
|
||
.wxParse-p {
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.remaining {
|
||
padding-left: 340rpx;
|
||
padding-top: 18rpx;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.time_sty {
|
||
height: 125rpx;
|
||
margin-left: 90rpx;
|
||
margin-right: 90rpx;
|
||
padding-left: 150rpx;
|
||
}
|
||
|
||
.time_fon_sty {
|
||
margin-left: 65rpx;
|
||
font-weight: bold;
|
||
}
|
||
.time_fon_sty_reason1 {
|
||
margin-left: 70px;
|
||
font-weight: bold;
|
||
}
|
||
.time_fon_sty_reason2 {
|
||
margin-left: 100px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.remaining_time {
|
||
font-size: 45rpx;
|
||
color: white;
|
||
}
|
||
|
||
.time {
|
||
margin-right: 10rpx;
|
||
padding-left: 10rpx;
|
||
padding-right: 10rpx;
|
||
padding-top: 6rpx;
|
||
padding-bottom: 4rpx;
|
||
display: inline;
|
||
background-size: 80% 80%;
|
||
background-color: #5555ff;
|
||
border-radius: 8rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.point_sty {
|
||
color: #5555ff;
|
||
display: inline;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.present {
|
||
padding-left: 340rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.present_price {
|
||
display: inline;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.price {
|
||
display: inline;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.top-sty {
|
||
width: 750rpx;
|
||
height: 950rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/background-start-top.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.user-info {
|
||
padding-top: 690rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
.user-img {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 50%;
|
||
border: 8rpx solid mediumpurple;
|
||
}
|
||
|
||
.username {
|
||
margin-top: 5px;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: mediumpurple;
|
||
}
|
||
|
||
.goods-sty {
|
||
margin-top: -2rpx;
|
||
width: 750rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/background-goods.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
// .part2 {
|
||
// margin-top: 45rpx;
|
||
// margin-left: 58rpx;
|
||
// margin-right: 62rpx;
|
||
// border: 1rpx solid rgb(201, 76, 98);
|
||
// background: rgb(176, 14, 46);
|
||
// border-radius: 30rpx;
|
||
// height: 146rpx;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
// padding: 0 10rpx;
|
||
// }
|
||
|
||
.text1 {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.progress-bar {
|
||
margin-top: 36rpx;
|
||
margin-left: 64rpx;
|
||
margin-right: 30rpx;
|
||
width: 618rpx;
|
||
height: 36rpx;
|
||
border: 5rpx solid rgb(89, 10, 35);
|
||
background: rgb(89, 10, 35);
|
||
border-radius: 40rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.left {
|
||
border-radius: 40rpx;
|
||
background: rgb(255, 231, 0);
|
||
height: 100%;
|
||
float: left;
|
||
}
|
||
|
||
.m-nearbylist {
|
||
height: 100%;
|
||
}
|
||
|
||
.original {
|
||
color: #fff;
|
||
float: left;
|
||
}
|
||
|
||
.og1 {
|
||
padding-left: 80rpx;
|
||
padding-top: 15rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.og2 {
|
||
padding-left: 75rpx;
|
||
font-weight: bolder;
|
||
padding-top: 6rpx;
|
||
color: #ffc001;
|
||
font-family: "微软雅黑";
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.part3 {
|
||
position: relative;
|
||
height: 210rpx;
|
||
}
|
||
|
||
.cut-off {
|
||
color: #fff;
|
||
display: flex;
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
margin-right: 72rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.button-start {
|
||
margin-top: 20rpx;
|
||
margin-left: 270rpx;
|
||
margin-right: 270rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/begin-bargaining-button.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.cut_down_sty {
|
||
justify-content: space-between;
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: mediumpurple;
|
||
}
|
||
|
||
.immediately_btn {
|
||
margin-left: 180rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/sell-immediately.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.help_cut_btn {
|
||
margin-left: 100rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/help-cut.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
.help_cut_btn2 {
|
||
margin-left: 300rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/help-cut.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.cut_pri_sty {
|
||
position: absolute;
|
||
right: 180rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/help-cut-price.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.up_hands_sty {
|
||
position: absolute;
|
||
left: 180rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/sell-immediately.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.i_want_sty {
|
||
position: absolute;
|
||
left: 180rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/i-want.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.help_cut_btn_1 {
|
||
position: absolute;
|
||
right: 180rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/help-cut.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.again_stroll_sty {
|
||
position: absolute;
|
||
left: 300rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/again-stroll.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.congratulate-success {
|
||
position: absolute;
|
||
left: 300rpx;
|
||
height: 60rpx;
|
||
width: 150rpx;
|
||
background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/sell-immediately.png );
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
-moz-background-size: 100% 100%;
|
||
}
|
||
|
||
.button {
|
||
margin-top: 40rpx;
|
||
margin-left: 160rpx;
|
||
margin-right: 160rpx;
|
||
border: 1rpx solid rgb(255, 172, 51);
|
||
background: rgb(255, 172, 51);
|
||
border-radius: 12rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.button1 {
|
||
width: 240rpx;
|
||
height: 70rpx;
|
||
font-size: 32rpx;
|
||
margin-top: 40rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
border-radius: 12rpx;
|
||
background: rgb(255, 172, 51);
|
||
}
|
||
|
||
.button2 {
|
||
margin-top: 40rpx;
|
||
margin-left: 160rpx;
|
||
margin-right: 160rpx;
|
||
background: rgb(136, 136, 136);
|
||
border-radius: 12rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.part4 {
|
||
color: #fff;
|
||
border-top: 2rpx solid rgb(140, 19, 55);
|
||
margin-top: 63rpx;
|
||
min-height: 360rpx;
|
||
}
|
||
|
||
.header {
|
||
padding-top: 36rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.content {
|
||
text-indent: 3em;
|
||
padding-top: 22rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.content1 {
|
||
text-indent: 3em;
|
||
padding-top: 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.part5 {
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.header1 {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
background: rgb(255, 172, 51);
|
||
border-radius: 42rpx;
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
}
|
||
|
||
.header_shadow {
|
||
margin-left: 222rpx;
|
||
margin-right: 233rpx;
|
||
border-radius: 42rpx;
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
padding-bottom: 4rpx;
|
||
}
|
||
|
||
.part6 {
|
||
margin-top: 110rpx;
|
||
height: 630rpx;
|
||
margin-left: 80rpx;
|
||
margin-right: 80rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar_sty {
|
||
margin-top: 20rpx;
|
||
margin-left: 20rpx;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
border: 3rpx solid mediumpurple;
|
||
}
|
||
|
||
.user_nickname_sty {
|
||
margin-top: 30rpx;
|
||
margin-left: 15rpx;
|
||
font-size: 32rpx;
|
||
width: 280rpx;
|
||
height: 55rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.cut_away_sty {
|
||
color: #0543d5;
|
||
font-size: 32rpx;
|
||
position: absolute;
|
||
right: 5rpx;
|
||
top: 50rpx;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.kanjia view {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.animation {
|
||
width: 100%;
|
||
height: 100%;
|
||
// background: black;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
|
||
.dao {
|
||
width: 380rpx;
|
||
height: 340rpx;
|
||
position: absolute;
|
||
top: 4%;
|
||
right: 0%;
|
||
}
|
||
|
||
.dao1 {
|
||
width: 380rpx;
|
||
height: 340rpx;
|
||
position: absolute;
|
||
top: 4%;
|
||
right: 0%;
|
||
animation: move 300ms linear;
|
||
animation-delay: 500ms;
|
||
transform-origin: right bottom;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes move {
|
||
0% {
|
||
transform: rotateX(0);
|
||
}
|
||
|
||
50% {
|
||
transform: rotateZ(-45deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotateZ(-30deg);
|
||
}
|
||
}
|
||
|
||
.bag {
|
||
width: 336rpx;
|
||
height: 344rpx;
|
||
position: absolute;
|
||
top: 32%;
|
||
left: 25%;
|
||
}
|
||
|
||
.bagmoney {
|
||
width: 525rpx;
|
||
height: 516rpx;
|
||
position: absolute;
|
||
top: 24%;
|
||
left: 21%;
|
||
}
|
||
|
||
.success {
|
||
width: 60%;
|
||
height: 66rpx;
|
||
border-radius: 10rpx;
|
||
background: rgb(250, 51, 1);
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
bottom: 15%;
|
||
left: 20%;
|
||
color: #fff;
|
||
}
|
||
|
||
.Price {
|
||
display: inline;
|
||
font-size: 42rpx;
|
||
position: absolute;
|
||
top: 67%;
|
||
width: 100%;
|
||
// #ifdef MP-WEIXIN
|
||
top: 62% !important;
|
||
// #endif
|
||
text-align: center;
|
||
color: rgb(255, 227, 130);
|
||
}
|
||
|
||
.more {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
background: rgb(41, 36, 56);
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
/* .progressBarBox{position: absolute;right: 0;bottom: 38%;color: #888;font-size: 24rpx;margin-right: 20rpx;} */
|
||
|
||
.u-progressBar {
|
||
display: inline-block;
|
||
width: 80%;
|
||
height: 26rpx;
|
||
background-color: #d5d5d5;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.u-progressBar-cont {
|
||
height: 26rpx;
|
||
background-color: mediumpurple;
|
||
}
|
||
|
||
.floor {
|
||
color: #ffc001;
|
||
font-size: 28rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
.mask {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.75);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
flex-direction: column;
|
||
padding: 40rpx 0;
|
||
}
|
||
.mask-box{
|
||
width:602rpx;
|
||
background:#fff;
|
||
border-radius:16rpx;
|
||
padding:40rpx;
|
||
position:relative;
|
||
}
|
||
.mask-close{
|
||
position:absolute;
|
||
right:20rpx;
|
||
top:20rpx;
|
||
font-size:40rpx;
|
||
color:#fff;
|
||
}
|
||
.mask-text-wrap {
|
||
font-size: 40rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
font-weight: bold;
|
||
line-height: 44rpx;
|
||
}
|
||
.mask-text{
|
||
position:absolute;
|
||
top:0rpx;
|
||
font-size:30rpx;
|
||
color:#999;
|
||
}
|
||
.mask-img{
|
||
width:60%;
|
||
height:auto;
|
||
margin:0 auto;
|
||
}
|
||
.mask-btn{
|
||
width:100%;
|
||
height:80rpx;
|
||
line-height:80rpx;
|
||
background:#ff6803;
|
||
color:#fff;
|
||
font-size:32rpx;
|
||
border-radius:12rpx;
|
||
}
|
||
.yaotouzi{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
|
||
/* 呼吸按钮核心样式 */
|
||
.breath-btn {
|
||
/* 基础按钮样式（可根据你的UI调整） */
|
||
width: 280rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: #ff6803;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
border-radius: 40rpx;
|
||
border: none;
|
||
outline: none;
|
||
|
||
/* 呼吸动画核心 */
|
||
animation: breath 2s ease-in-out infinite; /* 2秒一个周期，匀速循环 */
|
||
}
|
||
|
||
/* 定义呼吸动画（缩放） */
|
||
@keyframes breath {
|
||
0% {
|
||
transform: scale(1); /* 原始大小 */
|
||
}
|
||
50% {
|
||
transform: scale(1.1); /* 放大10%（可调整幅度） */
|
||
}
|
||
100% {
|
||
transform: scale(1); /* 回到原始大小 */
|
||
}
|
||
}
|
||
|
||
/* 可选：点击时的按压效果，增强交互 */
|
||
.breath-btn:active {
|
||
transform: scale(0.95); /* 点击时稍微缩小 */
|
||
animation: none; /* 点击时暂停呼吸动画 */
|
||
}
|
||
/* 温馨提示文本样式（核心） */
|
||
.warm-tip {
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
margin-top: 10rpx;
|
||
line-height: 32rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
.sign{
|
||
font-size: 70rpx;
|
||
color: red;
|
||
text-align: center;
|
||
}
|
||
</style> |