You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1321 lines
33 KiB

<template>
<view style="background-color: var(--view-theme); padding-bottom: 50rpx" :style="colorStyle">
<view class="bargain">
<!-- #ifndef APP-PLUS || MP -->
<view class="iconfont icon-xiangzuo" v-if="retunTop" @tap="goBack" :style="'top:' + navH + 'px'"></view>
<!-- #endif -->
<view :style="'background-image: url(' + (bargainUid != userInfo.uid ? imgHost + picUrl.support : imgHost + picUrl.barga) + ');'" class="header">
<view class="people">
{{ peopleCount.lookCount || 0 }}{{ $t(`人查看`) }} 丨 {{ peopleCount.shareCount || 0 }}{{ $t(`人分享`) }} 丨 {{ peopleCount.userCount || 0 }}{{ $t(`人参与`) }}
</view>
<countDown
:tipText="$t(`倒计时`)"
:dayText="$t(`天`)"
:hourText="$t(`时`)"
:minuteText="$t(`分`)"
:secondText="$t(`秒`)"
:datatime="datatime"
:isDay="true"
v-if="bargainUid == userInfo.uid"
></countDown>
<view v-if="bargainUid != userInfo.uid" class="pictxt acea-row row-center-wrapper">
<view class="pictrue">
<image :src="bargainUserInfo.avatar"></image>
</view>
<view class="text">
{{ bargainUserInfo.nickname || '' }}
<text>{{ $t(`邀请您帮忙砍价`) }}</text>
</view>
</view>
</view>
<view class="wrapper">
<view class="pictxt acea-row row-between-wrapper" @tap="goProduct">
<view class="pictrue">
<image :src="bargainInfo.image"></image>
<view class="bargain_view">
{{ $t(`查看商品`) }}
<text class="iconfont icon-jiantou iconfonts"></text>
</view>
</view>
<view class="text acea-row row-column-around">
<view class="line2">{{ bargainInfo.title || '' }}</view>
<view class="money">
{{ $t(`当前`) }}: {{ $t(`¥`) }}
<text class="num">{{ bargainInfo.price || '' }}</text>
</view>
<view class="successNum">{{ $t(`最低`) }}:{{ $t(`¥`) }}{{ bargainInfo.min_price || '' }}</view>
</view>
</view>
<!-- 进度条 -->
<block v-if="userBargainInfo.price > 0">
<view class="cu-progress acea-row row-middle round margin-top">
<view class="acea-row row-middle bg-red" :style="'width:' + userBargainInfo.pricePercent + '%;'"></view>
</view>
<view class="money acea-row row-between-wrapper">
<view>{{ $t(`已砍`) }}{{ userBargainInfo.alreadyPrice }}</view>
<view>{{ $t(`还剩`) }}{{ userBargainInfo.price }}</view>
</view>
</block>
<!-- 自己砍价 -->
<view v-if="userBargainInfo.bargainType == 1">
<view class="bargainBnt" @tap="userBargain" v-if="productStock > 0 && quota > 0">{{ $t(`立即参与砍价`) }}</view>
<view class="bargainBnt grey" v-if="productStock <= 0 || quota <= 0">{{ $t(`商品暂无库存`) }}</view>
</view>
<!-- 帮助砍价、帮砍成功: -->
<view v-if="userBargainInfo.bargainType == 2">
<view class="bargainBnt" @tap="getBargainUserBargainPricePoster">{{ $t(`邀请好友帮砍价`) }}</view>
<view class="tip">
{{ $t(`已有`) }}
<text class="num">{{ userBargainInfo.count }}</text>
{{ $t(`位好友成功砍价`) }}
</view>
</view>
<view v-if="userBargainInfo.bargainType == 3">
<view class="bargainBnt" @tap="setBargainHelp">{{ $t(`帮好友砍一刀`) }}</view>
</view>
<view v-if="userBargainInfo.bargainType == 4">
<view class="bargainSuccess">
<text class="iconfont icon-xiaolian"></text>
{{ $t(`好友已砍价成功`) }}
</view>
<view class="bargainBnt" @tap="currentBargainUser">{{ $t(`我也要参与`) }}</view>
</view>
<view v-if="userBargainInfo.bargainType == 5">
<view class="bargainSuccess">
<text class="iconfont icon-xiaolian"></text>
{{ $t(`已成功帮助好友砍价`) }}
</view>
<view class="bargainBnt" @tap="currentBargainUser">{{ $t(`我也要参与`) }}</view>
</view>
<view v-if="userBargainInfo.bargainType == 6">
<view class="bargainSuccess">
<text class="iconfont icon-xiaolian"></text>
{{ $t(`恭喜您砍价成功,快去支付`) }}
</view>
<view class="bargainBnt" @tap="goPay">{{ $t(`立即支付`) }}</view>
<view class="bargainBnt on" @tap="goBargainList">{{ $t(`抢更多商品`) }}</view>
</view>
<view class="lock" :style="'background-image: url(' + imgHost + picUrl.lock + ');'"></view>
</view>
<view class="bargainGang">
<view class="title acea-row row-center-wrapper">
<view class="pictrue">
<image :src="picUrl.lace"></image>
</view>
<view class="titleCon">{{ $t(`砍价帮`) }}</view>
<view class="pictrue on">
<image :src="picUrl.lace"></image>
</view>
</view>
<view class="list">
<block v-for="(item, index) in bargainUserHelpList" :key="index" v-if="index < 3 || !couponsHidden">
<view class="item acea-row row-between-wrapper">
<view class="pictxt acea-row row-between-wrapper">
<view class="pictrue">
<image :src="item.avatar"></image>
</view>
<view class="text">
<view class="name line1">{{ item.nickname }}</view>
<view class="line1">{{ item.add_time }}</view>
</view>
</view>
<view class="money">
<text class="iconfont icon-kanjia"></text>
{{ $t(`砍掉`) }}{{ $t(`¥`) }}{{ item.price }}
</view>
</view>
</block>
<view class="open acea-row row-center-wrapper" @click="openTap" v-if="bargainUserHelpList.length > 3">
{{ couponsHidden ? $t(`更多`) : $t(`关闭`) }}
<text class="iconfont" :class="couponsHidden == true ? 'icon-xiangxia' : 'icon-xiangshang'"></text>
</view>
</view>
<view class="load" v-if="!limitStatus" @tap="getBargainUser">{{ $t(`点击加载更多`) }}</view>
<view class="lock" :style="'background-image: url(' + imgHost + picUrl.lock + ');'"></view>
</view>
<view class="goodsDetails">
<view class="title acea-row row-center-wrapper">
<view class="pictrue">
<image src="/images/left.png"></image>
</view>
<view class="titleCon">{{ $t(`商品详情`) }}</view>
<view class="pictrue on">
<image src="/images/left.png"></image>
</view>
</view>
<view class="conter">
<jyf-parser :html="bargainInfo.description" ref="article" :tag-style="tagStyle"></jyf-parser>
</view>
<view class="lock" :style="'background-image: url(' + imgHost + picUrl.lock + ');'"></view>
</view>
<view class="goodsDetails">
<view class="title acea-row row-center-wrapper">
<view class="pictrue">
<image src="/images/left.png"></image>
</view>
<view class="titleCon">{{ $t(`砍价规则`) }}</view>
<view class="pictrue on">
<image src="/images/left.png"></image>
</view>
</view>
<view class="conter">
<jyf-parser :html="bargainInfo.rule" ref="article" :tag-style="tagStyle"></jyf-parser>
</view>
</view>
<view class="bargainTip" :class="active == true ? 'on' : ''">
<view class="pictrue">
<image :src="picUrl.popup"></image>
</view>
<view v-if="bargainUid == userInfo.uid">
<view class="cutOff">
{{ $t(`您已砍掉`) }}
<text style="color: var(--view-theme)">{{ userBargainPrice }}</text>
{{ $t(`元,听说分享次数越多砍价成功的机会越大哦`) }}
</view>
<!-- #ifdef MP -->
<button class="tipBnt" @tap="getBargainUserBargainPricePoster">{{ $t(`邀请好友帮砍价`) }}</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="tipBnt" @tap="getBargainUserBargainPricePoster">{{ $t(`邀请好友帮砍价`) }}</view>
<!-- #endif -->
</view>
<view v-else>
<view class="help" style="color: #fc4141">{{ $t(`成功帮砍`) }}{{ $t(`¥`) }}{{ userBargainPrice }}</view>
<view class="cutOff on">{{ $t(`您也可以砍价低价拿哦,快去挑选心仪的商品吧`) }}</view>
<view @tap="currentBargainUser" class="tipBnt">{{ $t(`我也要参与`) }}</view>
</view>
</view>
<view class="mask" catchtouchmove="true" v-show="active == true" @tap="close"></view>
</view>
<!-- 分享按钮 -->
<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
<!-- #ifndef MP -->
<button class="item" hover-class="none" v-if="weixinStatus === true" @click="H5ShareBox = true">
<view class="iconfont icon-weixin3"></view>
<view class="">{{ $t(`发送给朋友`) }}</view>
</button>
<!-- #endif -->
<!-- #ifdef MP -->
<button class="item" open-type="share" hover-class="none" @click="goFriend">
<view class="iconfont icon-weixin3"></view>
<view class="">{{ $t(`发送给朋友`) }}</view>
</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="item" @click="appShare('WXSceneSession')">
<view class="iconfont icon-weixin3"></view>
<view class="">{{ $t(`微信好友`) }}</view>
</view>
<view class="item" @click="appShare('WXSenceTimeline')">
<view class="iconfont icon-pengyouquan"></view>
<view class="">{{ $t(`微信朋友圈`) }}</view>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<button class="item" hover-class="none" @tap="getBargainUserBargainPricePoster">
<view class="iconfont icon-haibao"></view>
<view class="">{{ $t(`生成海报`) }}</view>
</button>
<!-- #endif -->
</view>
<view class="mask" v-if="posters" @click="listenerActionClose"></view>
<!-- 发送给朋友图片 -->
<view class="share-box" v-if="H5ShareBox">
<image :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false"></image>
</view>
<!-- #ifndef MP -->
<home></home>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="followCode" v-if="followCode">
<view class="pictrue">
<view class="code-bg"><img class="imgs" :src="codeSrc" /></view>
</view>
<view class="mask" @click="closeFollowCode"></view>
</view>
<zb-code
ref="qrcode"
v-show="false"
:show="codeShow"
:cid="cid"
:val="val"
:size="size"
:unit="unit"
:background="background"
:foreground="foreground"
:pdground="pdground"
:icon="icon"
:iconSize="iconsize"
:onval="onval"
:loadMake="loadMake"
@result="qrR"
/>
<!-- #endif -->
</view>
</template>
<script>
import zbCode from '@/components/zb-code/zb-code.vue';
import { getBargainDetail, postBargainStartUser, postBargainStart, postBargainHelp, postBargainHelpList, postBargainShare } from '../../../api/activity.js';
import { colorChange } from '@/api/api.js';
import { postCartAdd } from '../../../api/store.js';
import util from '../../../utils/util.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import countDown from '@/components/countDown';
import home from '@/components/home';
import parser from '@/components/jyf-parser/jyf-parser';
import { TOKENNAME, HTTP_REQUEST_URL } from '@/config/app.js';
const app = getApp();
import colors from '@/mixins/color';
export default {
components: {
countDown,
// #ifdef MP
authorize,
// #endif
home,
'jyf-parser': parser
},
/**
* 页面的初始数据
*/
mixins: [colors],
data() {
return {
imgHost: HTTP_REQUEST_URL,
countDownDay: '00',
countDownHour: '00',
countDownMinute: '00',
countDownSecond: '00',
active: false,
id: 0, //砍价产品编号
userInfo: {}, //当前用户信息
bargainUid: 0, //开启砍价用户
bargainUserInfo: {}, //开启砍价用户信息
bargainUserId: 0, //开启砍价编号
bargainInfo: [], //砍价产品
userBargainInfo: [],
offset: 0,
limit: 20,
limitStatus: false,
bargainUserHelpList: [],
bargainUserHelpInfo: [],
userBargainPrice: 0,
status: '', // 0 开启砍价 1 朋友帮忙砍价 2 朋友帮忙砍价成功 3 完成砍价 4 砍价失败 5已创建订单
peopleCount: [], //分享人数 浏览人数 参与人数
retunTop: true,
bargainPartake: 0,
isHelp: false,
interval: null,
userBargainStatus: 0, //判断自己是否砍价
bargainSumCount: 0, // 购买次数
productStock: 0, //判断是否售罄;
quota: 0, //判断是否已限量;
userBargainStatusHelp: true,
navH: '',
statusPay: '',
bargainPrice: 0,
datatime: 0,
offest: '',
tagStyle: {
img: 'width:100%;display:block;',
table: 'width:100%',
video: 'width:100%'
},
H5ShareBox: false, //公众号分享图片
systemH: 100,
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
pages: '',
posters: false,
weixinStatus: false,
couponsHidden: true,
followCode: false,
//二维码参数
codeShow: false,
cid: '1',
ifShow: true,
val: '', // 要生成的二维码值
size: 200, // 二维码大小
unit: 'upx', // 单位
background: '#FFF', // 背景色
foreground: '#000', // 前景色
pdground: '#000', // 角标色
icon: '', // 二维码图标
iconsize: 40, // 二维码图标大小
lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
onval: true, // val值变化时自动重新生成二维码
loadMake: true, // 组件加载完成后自动生成二维码
src: '', // 二维码生成后的图片地址或base64
codeSrc: '',
picUrl: {},
picList: [
{
popup: '../static/bulet.jpg',
barga: '/statics/system_images/bargain_dt_bg_0.jpeg',
support: '/statics/system_images/bargain_dt2_bg_0.jpeg',
lock: '/statics/system_images/bargain_dt_lock_0.png',
lace: '../static/buled.png'
},
{
popup: '../static/greent.jpg',
barga: '/statics/system_images/bargain_dt_bg_1.jpeg',
support: '/statics/system_images/bargain_dt2_bg_1.jpeg',
lock: '/statics/system_images/bargain_dt_lock_1.png',
lace: '../static/greend.png'
},
{
popup: '../static/redt.jpg',
lace: '../static/redd.png',
barga: '/statics/system_images/bargain_dt_bg_2.jpeg',
support: '/statics/system_images/bargain_dt2_bg_2.jpeg',
lock: '/statics/system_images/bargain_dt_lock_2.png'
},
{
popup: '../static/pinkt.jpg',
lace: '../static/pinkd.png',
barga: '/statics/system_images/bargain_dt_bg_3.jpeg',
support: '/statics/system_images/bargain_dt2_bg_3.jpeg',
lock: '/statics/system_images/bargain_dt_lock_3.png'
},
{
popup: '../static/oranget.jpg',
lace: '../static/oranged.png',
barga: '/statics/system_images/bargain_dt_bg_4.jpeg',
support: '/statics/system_images/bargain_dt2_bg_4.jpeg',
lock: '/statics/system_images/bargain_dt_lock_4.png'
}
]
};
},
computed: mapGetters(['isLogin']),
watch: {
isLogin: {
handler: function (newV, oldV) {
if (newV) {
this.getBargainDetails();
this.addShareBargain();
}
},
deep: true
},
colorStatus(newValue, oldValue) {
if (newValue) {
this.colorShow(newValue);
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var that = this;
if (!this.colorStatus) {
colorChange('color_change').then((res) => {
this.colorShow(res.data.status);
});
}
// #ifdef MP
uni.getSystemInfo({
success: function (res) {
that.systemH = res.statusBarHeight;
that.navH = that.systemH + 10;
}
});
// #endif
var pages = getCurrentPages();
if (pages.length <= 1) {
that.retunTop = false;
}
//扫码携带参数处理
// #ifdef MP
if (options.scene) {
var value = util.getUrlParams(decodeURIComponent(options.scene));
if (typeof value === 'object') {
if (value.id) options.id = value.id;
if (value.bargain) options.bargain = value.bargain;
//记录推广人uid
if (value.pid) app.globalData.spid = value.pid;
} else {
app.globalData.spid = value;
}
}
//记录推广人uid
if (options.spid) app.globalData.spid = options.spid;
// #endif
if (options.hasOwnProperty('id')) {
that.id = options.id;
that.bargainUid = options.bargain || 0;
}
if (this.isLogin) {
if (that.bargainUid == 'undefined' || !that.bargainUid) {
that.bargainUid = that.$store.state.app.uid;
}
this.getBargainDetails();
this.addShareBargain();
} else {
this.$Cache.set('login_back_url', `/pages/activity/goods_bargain_details/index?id=${options.id}&bargain=${this.bargainUid}`);
toLogin();
}
uni.setNavigationBarTitle({
title: this.$t(`砍价详情`)
});
},
methods: {
colorShow(colorStatus) {
switch (colorStatus) {
case 1:
this.picUrl = this.picList[0];
break;
case 2:
this.picUrl = this.picList[1];
break;
case 3:
this.picUrl = this.picList[2];
break;
case 4:
this.picUrl = this.picList[3];
break;
case 5:
this.picUrl = this.picList[4];
break;
default:
this.picUrl = this.picList[2];
break;
}
},
// app分享
// #ifdef APP-PLUS
appShare(scene) {
let that = this;
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由,也就是最后一个打开的页面路由
uni.share({
provider: 'weixin',
scene: scene,
type: 0,
href: `${HTTP_REQUEST_URL}${curRoute}`,
title: that.bargainInfo.title,
imageUrl: that.bargainInfo.small_image,
success: function (res) {
uni.showToast({
title: this.$t(`分享成功`),
icon: 'success'
});
that.posters = false;
},
fail: function (err) {
uni.showToast({
title: this.$t(`分享失败`),
icon: 'none',
duration: 2000
});
that.posters = false;
}
});
},
qrR(res) {
this.codeSrc = res;
},
// #endif
/**
* 分享打开
*
*/
listenerActionSheet() {
if (this.isLogin == false) {
toLogin();
} else {
// #ifdef H5
if (this.$wechat.isWeixin() === true) {
this.weixinStatus = true;
}
// #endif
this.posters = true;
}
},
getBargainUserBargainPricePoster() {
uni.navigateTo({
url: '/pages/activity/poster-poster/index?type=1&id=' + this.id + '&bargain=' + this.bargainUid
});
},
// 分享关闭
listenerActionClose() {
this.posters = false;
},
// 小程序关闭分享弹窗;
goFriend() {
this.posters = false;
},
openTap() {
this.$set(this, 'couponsHidden', !this.couponsHidden);
},
// 授权关闭
authColse(e) {
this.isShowAuth = e;
},
// 去商品页
goProduct() {
uni.navigateTo({
url: `/pages/goods_details/index?id=${this.bargainInfo.product_id}`
});
},
// 自己砍价;
userBargain() {
let that = this;
if (that.userInfo.uid == that.bargainUid) {
if (that.userBargainInfo.bargainOrderCount >= that.bargainInfo.num) {
return that.$util.Tips({
title: that.$t(`该商品每人限购`) + `${that.bargainInfo.num}${that.bargainInfo.unit_name}`
});
} else {
that.setBargain();
}
}
},
goBack() {
uni.navigateBack({
delta: 1
});
},
gobargainUserInfo() {
//获取开启砍价用户信息
var that = this;
var data = {
userId: that.bargainUid
};
postBargainStartUser({
bargainId: that.id,
bargainUserUid: that.bargainUid
}).then((res) => {
that.$set(that, 'bargainUserInfo', res.data);
});
},
goPay() {
//立即支付
var that = this;
var data = {
productId: that.bargainInfo.product_id,
bargainId: that.id,
cartNum: 1,
uniqueId: '',
combinationId: 0,
secKillId: 0,
new: 1
};
postCartAdd(data)
.then((res) => {
uni.navigateTo({
url: '/pages/goods/order_confirm/index?new=1&cartId=' + res.data.cartId
});
})
.catch((err) => {
return that.$util.Tips({
title: err
});
});
},
getBargainDetails() {
//获取砍价产品详情
var that = this;
var id = that.id;
getBargainDetail(id, that.bargainUid)
.then((res) => {
that.bargainInfo = res.data.bargain;
that.userBargainInfo = res.data.userBargainInfo;
that.bargainPrice = res.data.bargain.price;
that.userInfo = res.data.userInfo;
that.productStock = res.data.bargain.attr.product_stock;
that.quota = res.data.bargain.attr.quota;
that.datatime = res.data.bargain.stop_time;
that.pages = '/pages/activity/goods_bargain_details/index?id=' + that.id + '&bargain=' + that.bargainUid + '&scene=' + that.userInfo.uid;
uni.setNavigationBarTitle({
title: res.data.bargain.title.substring(0, 13) + '...'
});
that.bargainUserHelpList = [];
that.getBargainUser();
if (that.bargainUid != that.userInfo.uid) that.gobargainUserInfo();
//#ifdef H5
that.setOpenShare();
//#endif
})
.catch(function (err) {
that.$util.Tips(
{
title: err
},
{
tab: 2,
url: '/pages/activity/goods_bargain/index'
}
);
});
},
currentBargainUser() {
//当前用户砍价
this.$set(this, 'bargainUid', this.userInfo.uid);
this.setBargain();
},
setBargain() {
//参与砍价
var that = this;
postBargainStart(that.id).then(
(res) => {
that.$set(that, 'userBargainPrice', res.data.price);
that.$set(that, 'active', true);
that.getBargainDetails();
that.userBargainStatus = 1;
},
(error) => {
that.$util.Tips({
title: error
});
}
);
},
setBargainHelp() {
//帮好友砍价
var that = this;
var data = {
bargainId: that.id,
bargainUserUid: that.bargainUid
};
postBargainHelp(data)
.then((res) => {
that.$set(that, 'userBargainPrice', res.data.price);
that.$set(that, 'active', true);
that.getBargainDetails();
})
.catch((err) => {
that.$util.Tips({
title: err
});
that.getBargainDetails();
});
},
getBargainUser() {
//获取砍价帮
var that = this;
var data = {
bargainId: that.id,
bargainUserUid: that.bargainUid,
offset: that.offset,
limit: that.limit
};
postBargainHelpList(data).then((res) => {
var bargainUserHelpListNew = [];
var bargainUserHelpList = that.bargainUserHelpList;
var len = res.data.length;
bargainUserHelpListNew = bargainUserHelpList.concat(res.data);
that.$set(that, 'bargainUserHelpList', res.data);
that.$set(that, 'limitStatus', data.limit > len);
that.$set(that, 'offest', Number(data.offset) + Number(data.limit));
});
},
goBargainList() {
uni.navigateTo({
url: '/pages/activity/goods_bargain/index'
});
},
close() {
this.$set(this, 'active', false);
},
addShareBargain() {
//添加分享次数 获取人数
var that = this;
postBargainShare(this.id).then((res) => {
that.$set(that, 'peopleCount', res.data);
this.pages = '/pages/activity/goods_bargain_details/index?id=' + this.id + '&bargain=' + this.bargainUid + '&spid=' + this.userInfo.uid;
});
},
//#ifdef H5
setOpenShare() {
let that = this;
let configTimeline = {
title: that.$t(`您的好友`) + that.userInfo.nickname + that.$t(`邀请您砍价`) + that.bargainInfo.title,
desc: that.bargainInfo.info,
link:
window.location.protocol +
'//' +
window.location.host +
'/pages/activity/goods_bargain_details/index?id=' +
that.id +
'&bargain=' +
that.userInfo.uid +
'&spid=' +
this.userInfo.uid,
imgUrl: that.bargainInfo.image
};
if (this.$wechat.isWeixin()) {
this.$wechat
.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], configTimeline)
.then((res) => {})
.catch((res) => {
if (res.is_ready) {
res.wx.updateAppMessageShareData(configTimeline);
res.wx.updateTimelineShareData(configTimeline);
res.wx.onMenuShareAppMessage(configTimeline);
res.wx.onMenuShareTimeline(configTimeline);
}
});
}
},
closeFollowCode: function () {
this.$set(this, 'followCode', false);
}
//#endif
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
if (this.interval !== null) clearInterval(this.interval);
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
if (this.interval !== null) clearInterval(this.interval);
},
//#ifdef MP
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
let that = this,
share = {
title: that.$t(`您的好友`) + that.userInfo.nickname + this.$t(`邀请您砍价`) + that.bargainInfo.title + this.$t(`go_help`),
path: '/pages/activity/goods_bargain_details/index?id=' + this.id + '&bargain=' + this.bargainUid + '&spid=' + this.userInfo.uid,
imageUrl: that.bargainInfo.image
};
that.close();
that.addShareBargain();
return share;
}
//#endif
};
</script>
<style lang="scss">
page {
// background-color: #e93323 !important;
}
.generate-posters {
width: 100%;
height: 170rpx;
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
z-index: 300;
transform: translate3d(0, 100%, 0);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
border-top: 1rpx solid #eee;
}
.generate-posters.on {
transform: translate3d(0, 0, 0);
}
.generate-posters .item {
flex: 1;
text-align: center;
font-size: 30rpx;
}
.generate-posters .item .iconfont {
font-size: 80rpx;
color: #5eae72;
}
.generate-posters .item .iconfont.icon-haibao {
color: #5391f1;
}
.bargain .bargainGang .open {
font-size: 24rpx;
color: #999;
margin-top: 30rpx;
}
.bargain .bargainGang .open .iconfont {
font-size: 25rpx;
margin: 5rpx 0 0 10rpx;
}
.bargain .icon-xiangzuo {
font-size: 40rpx;
color: #fff;
position: fixed;
top: 56rpx;
left: 30rpx;
z-index: 99;
font-size: 36rpx;
}
.bargain .header {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 572rpx;
margin: 0 auto;
padding-top: 340rpx;
position: relative;
}
.bargain .header .pictxt {
margin: -60rpx auto 0 auto;
font-size: 26rpx;
color: #fff;
}
.bargain .header .pictxt .pictrue {
width: 56rpx;
height: 56rpx;
margin-right: 30rpx;
}
.bargain .header .pictxt .pictrue image {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2rpx solid #fff;
}
.bargain .header .pictxt .text text {
margin-left: 20rpx;
}
.bargain .header .time {
width: 440rpx;
font-size: 22rpx;
line-height: 36rpx;
text-align: center;
box-sizing: border-box;
position: absolute;
left: 50%;
margin-left: -220rpx;
top: 298rpx;
}
.bargain .header .time .red {
color: var(--view-theme);
}
.bargain .header .people {
text-align: center;
color: #fff;
font-size: 20rpx;
position: absolute;
width: 100%;
/* #ifdef MP || APP-PLUS */
height: 44px;
line-height: 44px;
top: 40rpx;
/* #endif */
/* #ifdef H5 */
top: 58rpx;
/* #endif */
}
.bargain .header .time text {
color: #333;
}
.bargain .wrapper,
.bargain .bargainGang,
.bargain .goodsDetails {
width: 660rpx;
border: 6rpx solid #fc8b42;
background-color: #fff;
border-radius: 20rpx;
margin: -190rpx auto 0 auto;
box-sizing: border-box;
padding: 0 24rpx 47rpx 24rpx;
position: relative;
}
.bargain .wrapper .pictxt {
margin: 26rpx 0 37rpx 0;
}
.bargain .wrapper .pictxt .pictrue {
width: 180rpx;
height: 180rpx;
position: relative;
}
.bargain .wrapper .pictxt .pictrue image {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
.bargain .wrapper .pictxt .text {
width: 395rpx;
font-size: 28rpx;
color: #282828;
height: 180rpx;
}
.bargain .wrapper .pictxt .text .money {
font-weight: bold;
font-size: 24rpx;
}
.bargain .wrapper .pictxt .text .money .num {
font-size: 36rpx;
}
.bargain .wrapper .pictxt .text .successNum {
font-size: 22rpx;
color: #999;
}
.bargain .wrapper .cu-progress {
overflow: hidden;
height: 12rpx;
background-color: #eee;
width: 100%;
border-radius: 20rpx;
}
.bargain .wrapper .cu-progress .bg-red {
width: 0;
height: 100%;
transition: width 0.6s ease;
border-radius: 20rpx;
background-image: linear-gradient(to right, var(--view-minorColor) 0%, var(--view-theme) 100%);
}
.bargain .wrapper .money {
font-size: 22rpx;
color: #999;
margin-top: 15rpx;
color: var(--view-priceColor);
}
.bargain .wrapper .bargainSuccess {
font-size: 26rpx;
color: #282828;
text-align: center;
}
.bargain .wrapper .bargainSuccess .iconfont {
font-size: 45rpx;
color: #54c762;
padding-right: 18rpx;
vertical-align: -5rpx;
}
.bargain .wrapper .bargainBnt {
font-size: 30rpx;
font-weight: bold;
color: #fff;
width: 600rpx;
height: 80rpx;
border-radius: 40rpx;
// background-image: linear-gradient(to right, var(--view-minorColor) 0%, var(--view-theme) 100%);
background-color: var(--view-theme);
text-align: center;
line-height: 80rpx;
margin-top: 32rpx;
}
.bargain .wrapper .bargainBnt.on {
border: 2rpx solid var(--view-theme);
color: var(--view-theme);
background-image: linear-gradient(to right, #fff 0%, #fff 100%);
width: 596rpx;
height: 76rpx;
}
.bargain .wrapper .bargainBnt.grey {
color: #fff;
background-image: linear-gradient(to right, #bbbbbb 0%, #bbbbbb 100%);
}
.bargain .wrapper .tip {
font-size: 22rpx;
color: #999;
text-align: center;
margin-top: 20rpx;
}
.bargain .wrapper .tip .num {
color: var(--view-theme);
}
.bargain .wrapper .lock,
.bargain .bargainGang .lock,
.bargain .goodsDetails .lock {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 548rpx;
height: 66rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -43rpx;
z-index: 5;
}
.bargain .bargainGang {
margin: 13rpx auto 0 auto;
}
.bargain .bargainGang .title,
.bargain .goodsDetails .title {
font-size: 32rpx;
font-weight: bold;
height: 80rpx;
margin-top: 30rpx;
color: var(--view-theme);
}
.bargain .bargainGang .title .pictrue,
.bargain .goodsDetails .title .pictrue {
width: 46rpx;
height: 24rpx;
}
.bargain .bargainGang .title .pictrue.on,
.bargain .goodsDetails .title .pictrue.on {
transform: rotate(180deg);
}
.bargain .bargainGang .title .pictrue image,
.bargain .goodsDetails .title .pictrue image {
width: 100%;
height: 100%;
display: block;
}
.bargain .bargainGang .title .titleCon,
.bargain .goodsDetails .title .titleCon {
margin: 0 20rpx;
}
.bargain .bargainGang .list .item {
border-bottom: 1rpx dashed #ddd;
height: 112rpx;
}
.bargain .bargainGang .list .item .pictxt {
width: 310rpx;
}
.bargain .bargainGang .list .item .pictxt .pictrue {
width: 70rpx;
height: 70rpx;
}
.bargain .bargainGang .list .item .pictxt .pictrue image {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2rpx solid var(--view-theme);
}
.bargain .bargainGang .list .item .pictxt .text {
width: 225rpx;
font-size: 20rpx;
color: #999;
}
.bargain .bargainGang .list .item .pictxt .text .name {
font-size: 25rpx;
color: #282828;
margin-bottom: 7rpx;
}
.bargain .bargainGang .list .item .money {
font-size: 25rpx;
color: var(--view-theme);
}
.bargain .bargainGang .list .item .money .iconfont {
font-size: 35rpx;
vertical-align: middle;
margin-right: 10rpx;
}
.bargain .bargainGang .load {
font-size: 24rpx;
text-align: center;
line-height: 80rpx;
height: 80rpx;
color: var(--view-theme);
}
.bargain .goodsDetails {
margin: 13rpx auto 0 auto;
}
.bargain .goodsDetails ~ .goodsDetails {
margin-bottom: 50rpx;
}
.bargain .goodsDetails .conter {
margin-top: 20rpx;
overflow: hidden;
}
.bargain .goodsDetails .conter image {
width: 100% !important;
display: block !important;
}
.bargain .bargainTip {
position: fixed;
top: 50%;
left: 50%;
width: 560rpx;
margin-left: -280rpx;
z-index: 111;
border-radius: 20rpx;
background-color: #fff;
transition: all 0.3s ease-in-out 0s;
opacity: 0;
transform: scale(0);
padding-bottom: 60rpx;
margin-top: -330rpx;
}
.bargain .bargainTip.on {
opacity: 1;
transform: scale(1);
}
.bargain .bargainTip .pictrue {
width: 100%;
height: 321rpx;
}
.bargain .bargainTip .pictrue image {
width: 100%;
height: 100%;
border-radius: 20rpx 20rpx 0 0;
}
.bargain .bargainTip .cutOff {
font-size: 30rpx;
color: #666;
padding: 0 29rpx;
text-align: center;
margin-top: 50rpx;
}
.bargain .bargainTip .cutOff.on {
margin-top: 26rpx;
}
.bargain .bargainTip .help {
font-size: 32rpx;
font-weight: bold;
text-align: center;
margin-top: 40rpx;
}
.bargain .bargainTip .tipBnt {
font-size: 32rpx;
color: #fff;
width: 360rpx;
height: 82rpx;
border-radius: 41rpx;
// background-image: linear-gradient(to right, var(--view-minorColor) 0%, var(--view-theme) 100%);
background-color: var(--view-theme);
text-align: center;
line-height: 82rpx;
margin: 50rpx auto 0 auto;
}
.bargain_view {
width: 180rpx;
height: 48rpx;
background: rgba(0, 0, 0, 0.5);
opacity: 1;
border-radius: 0 0 6rpx 6rpx;
position: absolute;
bottom: 0;
font-size: 22rpx;
color: #fff;
text-align: center;
line-height: 48rpx;
}
.iconfonts {
font-size: 22rpx !important;
}
.wxParse-div {
width: auto !important;
height: auto !important;
}
.bargain .mask {
z-index: 100;
}
.share-box {
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
}
}
.followCode {
.pictrue {
width: 500rpx;
height: 530rpx;
border-radius: 12px;
left: 50%;
top: 50%;
margin-left: -250rpx;
margin-top: -360rpx;
position: fixed;
z-index: 10000;
.code-bg {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
background-image: url('~@/static/images/code-bg.png');
background-size: 100% 100%;
}
.imgs {
width: 310rpx;
height: 310rpx;
margin-top: 92rpx;
}
}
.mask {
z-index: 9999;
}
}
</style>