861 lines
22 KiB
Vue
861 lines
22 KiB
Vue
<template>
|
||
<view class="page">
|
||
<scroll-view scroll-y="true" @scrolltolower="fightPage" style="position: absolute;height:100%;width:100%;">
|
||
<view class="m-product-list">
|
||
<navigator :url="'/pages/product/detail?pid=' + (GbInfo.activity_rule.item_id) + '&gb_id=' + (GbInfo.gb_id)" class="m-product-item m-product-GP">
|
||
<view class="m-product-img">
|
||
<image lazy-load :src="(GbInfo.activity_rule.product_image)" />
|
||
</view>
|
||
<view class="m-product-info">
|
||
<view class="m-product-name">
|
||
<label>{{GbInfo.activity_rule.item.product_item_name}}</label>
|
||
<view class='groupNumber' style='margin-top:18rpx'>{{__('拼团省')}} {{__('￥')}}{{number_format(parseFloat((GbInfo.activity_rule.item_unit_price - GbInfo.activity_rule.group_sale_price).toFixed(12)), 2)}}</view>
|
||
</view>
|
||
<view style='position:absolute;bottom:20rpx;'>
|
||
<view class="groupNumber" style='margin-bottom:12rpx'>
|
||
<!-- <label class="iconfont icon-icon"></label> -->
|
||
<text style="margin-right: 6rpx;">{{GbInfo.gb_quantity}}</text> {{__('人团')}}
|
||
</view>
|
||
<view class="m-product-price">
|
||
<label>{{__('￥')}}</label>{{number_format(GbInfo.activity_rule.group_sale_price, 2)}}
|
||
<label class="u-del-price" style="margin-left: 6rpx;">{{__('￥')}}{{number_format(GbInfo.activity_rule.item_unit_price, 2)}}</label>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="isSucces">
|
||
<image lazy-load class='simg' v-if="(1==GbInfo.gb_enable)" src='https://static.lancerdt.com/xcxfile/appicon/groupbooking/success.png'></image>
|
||
<image lazy-load class='simg' v-if="(0==GbInfo.gb_enable)" src='https://static.lancerdt.com/xcxfile/appicon/groupbooking/failure.png'></image>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
<view class="headPhoto">
|
||
<view class="personPhoto" v-for="(item, i) in GroupUsers" :key="i">
|
||
<image lazy-load class="photo" :src="(item.user_avatar)"></image>
|
||
<image lazy-load class="photo-icon" src="https://static.lancerdt.com/xcxfile/appicon/groupbooking/group_leader.png" v-if="(GbInfo.user_id == item.user_id)"></image>
|
||
</view>
|
||
<view class="personPhoto" v-if="(GbInfo.gb_quantity>8?(8-GbInfo.gb_amount_quantity):(GbInfo.gb_quantity-GbInfo.gb_amount_quantity))">
|
||
<image lazy-load class="photo-bg" src='https://static.lancerdt.com/xcxfile/appicon/groupbooking/waiting.png'></image>
|
||
</view>
|
||
</view>
|
||
<view class="surplus" v-if="(GbInfo.gb_enable==2 && show)">
|
||
<view>{{sprintf(__('仅剩 %s 名额，'), GbInfo.gb_quantity-GbInfo.gb_amount_quantity)}}</view>
|
||
<label style='min-width:160rpx;'>
|
||
<day-countdown :timer="(GbInfo.gb_endtime)" :Type="2"></day-countdown>
|
||
</label>
|
||
<label>{{__('后结束')}}</label>
|
||
</view>
|
||
<block v-if="(show)">
|
||
<view class="m-btn-box" v-if="(GbInfo.gb_enable==2 && !groupIsEnd)">
|
||
<view class="u-btn u-btn-default" @click="shareBox">{{__('邀请好友参团')}}</view>
|
||
</view>
|
||
<navigator url="/activity/fightgroup/list" class="m-btn-box" v-if="(GbInfo.gb_enable==0)">
|
||
<view class="u-btn u-btn-default">{{__('点击再开一团')}}</view>
|
||
</navigator>
|
||
<navigator url="/activity/fightgroup/list" class="m-btn-box" v-if="(GbInfo.gb_enable==1)">
|
||
<view class="u-btn u-btn-default">{{__('点击再开一团')}}</view>
|
||
</navigator>
|
||
<view class="m-btn-box" v-if="(GbInfo.gb_enable==2 && !ispaysuccess)">
|
||
<view class="u-btn u-btn-default" @click="immediatelyOffered">{{__('参与活动')}}</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class='rule'>
|
||
<view class='rule-header'>
|
||
{{__('拼团规则')}}
|
||
</view>
|
||
<view class='rule-content'>
|
||
{{GbInfo.activity_rule.activity_intro}}
|
||
</view>
|
||
</view>
|
||
<view class="link">
|
||
<navigator url="/pages/index/index" open-type="switchTab" class="nav">
|
||
<image lazy-load class="nav-img" src="https://static.lancerdt.com/xcxfile/appicon/images/index.png"></image>
|
||
<text>{{__('首页逛逛')}}</text>
|
||
</navigator>
|
||
<navigator url="/pages/category/category" open-type="switchTab" class="nav">
|
||
<image lazy-load class="nav-img" src="https://static.lancerdt.com/xcxfile/appicon/images/allproduct.png"></image>
|
||
<text>{{__('全部商品')}}</text>
|
||
</navigator>
|
||
<navigator url="/activity/coupon/list" class="nav">
|
||
<image lazy-load class="nav-img" src="https://static.lancerdt.com/xcxfile/appicon/images/coupon.png"></image>
|
||
<text>{{__('领券中心')}}</text>
|
||
</navigator>
|
||
<navigator url="/pages/index/member" open-type="switchTab" class="nav">
|
||
<image lazy-load class="nav-img" src="https://static.lancerdt.com/xcxfile/appicon/images/center.png"></image>
|
||
<text>{{__('个人中心')}}</text>
|
||
</navigator>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- #ifdef H5 -->
|
||
<share-box-h5 :shareDataDefault="shareData" ref="shareBoxH5"></share-box-h5>
|
||
<!-- #endif -->
|
||
<share-box-mp :shareDataDefault="shareData" @cancelShare="cancelShare" @showCodeImg="showCodeImg" @shareQRCode="shareQRCode" @saveImg="saveImg" ref="shareBoxMp"></share-box-mp>
|
||
<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $ from "../../helpers/util";
|
||
|
||
|
||
import dayCountdown from "../../components/day-countdown.vue";
|
||
import shareBoxMp from '../../components/share-box-mp.vue'
|
||
import shareBoxApp from '../../components/share-box-app.vue'
|
||
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex'
|
||
|
||
export default {
|
||
data: function() {
|
||
return {
|
||
options: {},
|
||
Photo: "",
|
||
UserName: "",
|
||
splistStr: [],
|
||
ispaysuccess: false,
|
||
IsOwner: false,
|
||
order_id: "",
|
||
isfg: false,
|
||
GbInfo: {
|
||
activity_rule: {}
|
||
},
|
||
GroupUsers: [],
|
||
isPage: true,
|
||
page: 1,
|
||
Coupons: [],
|
||
isCancelSuccess: true,
|
||
isCancel: true,
|
||
CouponAmount: 0,
|
||
user_is_new: 0,
|
||
userInfoId: 0,
|
||
show: true,
|
||
groupIsEnd: false,
|
||
|
||
|
||
PageQRCodeInfo: {
|
||
Path: "",
|
||
IsShare: false,
|
||
IsShareBox: false,
|
||
IsJT: false
|
||
},
|
||
shareData: {
|
||
shareText: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
|
||
shareTitle: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
|
||
href: "https://www.suteshop.com",
|
||
image: ''
|
||
},
|
||
|
||
shareText: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
|
||
shareTitle: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
|
||
href: "https://www.suteshop.com",
|
||
image: ''
|
||
|
||
}
|
||
},
|
||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||
components: {
|
||
dayCountdown,
|
||
shareBoxMp,
|
||
shareBoxApp
|
||
},
|
||
onLoad: function(options) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.__('拼团详情')
|
||
});
|
||
|
||
var that = this;
|
||
|
||
that.setData({
|
||
options: options
|
||
})
|
||
|
||
this.forceUserInfo(function(user) {
|
||
that.setData({
|
||
user_is_new: that.userInfo.user_is_new,
|
||
CouponAmount: that.userInfo.CouponAmount
|
||
});
|
||
|
||
that.InitData(options);
|
||
});
|
||
|
||
this.notice.addNotification("RefreshFG", that.RefreshFG, that)
|
||
},
|
||
onBackPress() {
|
||
// #ifdef APP-PLUS
|
||
if (this.$refs.shareBoxApp.showBoxView) {
|
||
this.$refs.shareBoxApp.cancel();
|
||
return true;
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (this.$refs.shareBoxMp.showBoxView) {
|
||
this.$refs.shareBoxMp.cancel();
|
||
return true;
|
||
}
|
||
// #endif
|
||
},
|
||
onUnload() {
|
||
// 离开页面，注销事件
|
||
var that = this
|
||
this.notice.removeNotification("RefreshFG", that);
|
||
|
||
// #ifdef APP-PLUS
|
||
if (this.$refs.shareBoxApp.showBoxView) {
|
||
this.$refs.shareBoxApp.cancel();
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (this.$refs.shareBoxMp.showBoxView) {
|
||
this.$refs.shareBoxMp.cancel();
|
||
}
|
||
// #endif
|
||
},
|
||
onShareAppMessage: function() {
|
||
var e = this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity,
|
||
t = e > 0 ? this.$.sprintf(this.__("【还差 %d 人】 %s 邀请您参加拼团！立省 %.2f 元！"), (this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity), this.userInfo.user_nickname, (this.GbInfo.activity_rule.group_sale_price - this.GbInfo.activity_rule.item_unit_price).toFixed(2)) : this.$.sprintf(this.__("%s 拼团成功！他已节省 %.2f 元！赶快来拼团吧!"), this.userInfo.user_nickname, (this.GbInfo.activity_rule.group_sale_price - this.GbInfo.activity_rule.item_unit_price).toFixed(2));
|
||
return {
|
||
title: t,
|
||
desc: this.GbInfo.activity_rule.product_item_name,
|
||
path: "/activity/fightgroup/detail?gb_id=" + this.GbInfo.gb_id + "&pid=" + this.GbInfo.activity_rule.item_id +
|
||
"&uid=" + this.userInfo.user_id
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
|
||
InitData: function(options) {
|
||
var that = this;
|
||
that.setData({
|
||
Photo: that.userInfo.user_avatar,
|
||
UserName: that.userInfo.user_nickname,
|
||
isfg: options.isfg || false
|
||
});
|
||
|
||
var params = {
|
||
gb_id: options.gb_id || "",
|
||
order_id: options.on || ""
|
||
};
|
||
|
||
//todo 详情
|
||
$.request({
|
||
url: this.Config.URL.user.getUserGroupbooking,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
if (status == 200) {
|
||
data.gbh_rows.forEach(function(e) {
|
||
e.user_id == that.userInfo.user_id && (that.setData({
|
||
userInfoId: e.user_id
|
||
}));
|
||
|
||
//判断是否团长
|
||
if (e.user_id == that.userInfo.user_id) {
|
||
e.user_id == that.userInfo.user_id && that.setData({
|
||
ispaysuccess: e.gbh_flag,
|
||
IsOwner: e.user_id == data.user_id,
|
||
order_id: e.order_id
|
||
})
|
||
}
|
||
});
|
||
|
||
var $now = (new Date).getTime();
|
||
var $end = (new Date(data.gb_endtime.replace(/-/g, "/"))).getTime();
|
||
var $activityEnd = (new Date(data.activity_rule.activity_endtime.replace(/-/g, "/"))).getTime();
|
||
data.endTime = $end - $now;
|
||
if (data.endTime <= 0) {
|
||
that.setData({
|
||
groupIsEnd: true,
|
||
show: false
|
||
});
|
||
}
|
||
if ($activityEnd - $now <= 0) {
|
||
that.setData({
|
||
show: false,
|
||
});
|
||
}
|
||
that.setData({
|
||
GbInfo: data,
|
||
GroupUsers: data.gbh_rows,
|
||
});
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
RefreshFG: function() {
|
||
var that = this,
|
||
t = {
|
||
gb_id: that.GbInfo.gb_id
|
||
};
|
||
that.InitData(t)
|
||
},
|
||
|
||
immediatelyOffered: function() {
|
||
var that = this;
|
||
/*
|
||
var param = {
|
||
Amount: 1,
|
||
ProductId: this.proId,
|
||
orderType: 1,
|
||
activity_id: this.MEID,
|
||
isOwner: "true",
|
||
isFightGroup: "2",
|
||
item_id: this.skuid,
|
||
AddTime: getNowFormatDate(),
|
||
ownGroupId: 0,
|
||
ProductSaleName: this.pname,
|
||
|
||
speStr: JSON.stringify(this.splistStr).replace("[", "").replace("]", "").replace(/\,/g, " ").replace(/\"/g, "")
|
||
};*/
|
||
$.navigateTo({
|
||
url: "/pages/checkout/checkout?ifcart=0&cart_id=" + this.GbInfo.activity_rule.item_id + "|" + 1 + "&activity_id=" +
|
||
this.GbInfo.activity_id + "&gb_id=" + this.GbInfo.gb_id
|
||
})
|
||
},
|
||
|
||
doReceive: function() {
|
||
this.cancel(), this.userReceiveCoupon()
|
||
},
|
||
cancel: function() {
|
||
this.setData({
|
||
isCancel: false
|
||
})
|
||
},
|
||
cancelsuccess: function() {
|
||
this.setData({
|
||
isCancelSuccess: true
|
||
})
|
||
},
|
||
innertouch: function() {},
|
||
userReceiveCoupon: function() {
|
||
var e = {
|
||
|
||
CouponIds: "",
|
||
|
||
user_is_new: this.user_is_new
|
||
};
|
||
//console.log(e);
|
||
var t = this;
|
||
$.xsr($.makeUrl(userapi.UserReceiveCoupon, e), function(e) {
|
||
e.Code == 0 ? t.setData({
|
||
isCancelSuccess: false,
|
||
Coupons: e.Info
|
||
}) : $.alert(e.Msg)
|
||
})
|
||
},
|
||
fightPage: function(e) {
|
||
if (this.isPage) {
|
||
this.setData({
|
||
isPage: false
|
||
});
|
||
var t = this;
|
||
clearTimeout(n);
|
||
var n = setTimeout(function() {
|
||
var e = {
|
||
gb_id: t.GbInfo.gb_id,
|
||
EventId: t.GbInfo.MarketingEventId,
|
||
page: parseInt(t.page) + 1
|
||
};
|
||
/*$.xsr($.makeUrl(fgapi.GetGroupMarketingEventUsersByPage, e), function (n) {
|
||
if (n.Info.length > 0)
|
||
{
|
||
var r = t.GbInfo;
|
||
r.gbh_rows = r.gbh_rows.concat(n.Info), t.setData({
|
||
isPage: true,
|
||
page: e.page,
|
||
GbInfo: r
|
||
})
|
||
}
|
||
else
|
||
{
|
||
t.setData({isPage: false})
|
||
}
|
||
})*/
|
||
},
|
||
500)
|
||
}
|
||
},
|
||
shareQRCode: function(e) {
|
||
return;
|
||
var that = this,
|
||
params = {
|
||
|
||
Path: "/activity/fightgroup/detail?gb_id=" + this.GbInfo.gb_id + "&pid=" + this.GbInfo.activity_rule.item_id +
|
||
"&uid=" + this.userInfo.user_id,
|
||
MainImg: this.GbInfo.ProductPic,
|
||
MainTitle: this.GbInfo.activity_rule.product_item_name,
|
||
item_id: this.GbInfo.activity_rule.item_id,
|
||
MarketingEventId: this.GbInfo.MarketingEventId,
|
||
ItemSalePrice: this.GbInfo.activity_rule.group_sale_price,
|
||
OriginalPrice: this.GbInfo.activity_rule.item_unit_price,
|
||
GroupPersonAmout: this.GbInfo.gb_quantity,
|
||
CutPrice: "",
|
||
user_id: this.userInfoId,
|
||
MarketingEventTime: this.GbInfo.EndTimeStr
|
||
};
|
||
|
||
|
||
//生成二维码并返回地址。 - 需要修改调整为小程序地址
|
||
$.request({
|
||
url: this.Config.URL.wx.getMiniAppQRCodeUnlimit,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
that.setData({
|
||
PageQRCodeInfo: {
|
||
Path: data.url,
|
||
IsShare: true,
|
||
IsShareBox: false,
|
||
IsJT: true
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
shareBox: function() {
|
||
let that = this;
|
||
|
||
let $href = $.sprintf('%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&uid=%d', that.Config.SiteUrl, this.GbInfo.gb_id, this.GbInfo.activity_rule.item_id, this.userInfo.user_id);
|
||
// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
|
||
// #ifdef APP-PLUS
|
||
$href = $.sprintf('%s/tmpl/activity/group_detail.html?gb_id=%d&pid=%d&FX=%d', this.Config.WapSiteUrl, this.GbInfo.gb_id, this.GbInfo.activity_rule.item_id, this.userInfo.user_id);
|
||
$href = $.sprintf('%s/tmpl/activity/group_detail.html?gb_id=%d&pid=%d&FX=%d', this.Config.WapSiteUrl, this.GbInfo.gb_id, this.GbInfo.activity_rule.item_id, this.userInfo.user_id);
|
||
|
||
$href = $.sprintf('%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&uid=%d', that.Config.SiteUrl, this.GbInfo.gb_id, this.GbInfo.activity_rule.item_id, this.userInfo.user_id);
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
$href = "/activity/fightgroup/detail?gb_id=" + this.GbInfo.gb_id + "&pid=" + this.GbInfo.activity_rule.item_id + "&uid=" + this.userInfo.user_id;
|
||
// #endif
|
||
|
||
var e = this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity,
|
||
t = e > 0 ? "【还差" + (this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity) + "人】" + this.userInfo.user_nickname +
|
||
"邀请您参加拼团！立省" + (this.GbInfo.activity_rule.group_sale_price - this.GbInfo.activity_rule.item_unit_price).toFixed(2) +
|
||
"元！" : this.userInfo.user_nickname + "拼团成功！他已节省" + (this.GbInfo.activity_rule.group_sale_price - this.GbInfo.activity_rule
|
||
.item_unit_price).toFixed(2) + "元！赶快来拼团吧!";
|
||
|
||
this.setData({
|
||
shareData: {
|
||
shareTitle: this.GbInfo.activity_rule.product_item_name,
|
||
shareText: t,
|
||
href: $href,
|
||
image: this.GbInfo.activity_rule.product_image,
|
||
price: this.GbInfo.activity_rule.group_sale_price
|
||
}
|
||
});
|
||
|
||
|
||
// #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]
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/_variables";
|
||
|
||
.groupNumber {
|
||
font-size: 24rpx;
|
||
color: #888;
|
||
}
|
||
|
||
.groupNumber .icon-icon {
|
||
font-size: 24rpx;
|
||
display: inline
|
||
}
|
||
|
||
/* .groupNumber text{margin: 0 2rpx} */
|
||
.progressBarBox {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0rpx;
|
||
margin-bottom: -20rpx;
|
||
color: #888;
|
||
font-size: 24rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.u-progressBar {
|
||
display: inline-block;
|
||
width: 140rpx;
|
||
height: 20rpx;
|
||
background-color: #d5d5d5;
|
||
border-radius: 20rpx;
|
||
overflow: hidden
|
||
}
|
||
|
||
.u-progressBar-cont {
|
||
height: 20rpx;
|
||
background-color: #ffc001;
|
||
}
|
||
|
||
.u-progressBar-text {
|
||
line-height: 25rpx;
|
||
}
|
||
|
||
.m-product-price .u-btn {
|
||
padding: 0 10rpx;
|
||
margin: 0 20rpx;
|
||
float: right;
|
||
font-size: 24rpx;
|
||
line-height: 50rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.m-product-GP {
|
||
height: 270rpx;
|
||
}
|
||
|
||
.m-product-GP .m-product-img {
|
||
height: 270rpx;
|
||
width: 270rpx;
|
||
}
|
||
|
||
.m-product-GP .m-product-price {
|
||
line-height: 28rpx;
|
||
font-size: 40rpx
|
||
}
|
||
|
||
.m-product-GP .m-product-info {
|
||
height: 270rpx;
|
||
width: 480rpx;
|
||
position: relative
|
||
}
|
||
|
||
.u-del-price {
|
||
color: #888888;
|
||
font-size: 20rpx;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.icon-box {
|
||
display: -webkit-box;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-box-align: center;
|
||
-webkit-align-items: center;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.icon-box image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.icon-box image {
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.icon-box-title {
|
||
font-weight: 400;
|
||
color: #DB384B;
|
||
}
|
||
|
||
.icon-box-desc {
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #888;
|
||
}
|
||
|
||
.icon-box icon {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.m-media-box-bd text {
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.m-media-box-info {
|
||
color: #888;
|
||
}
|
||
|
||
.u-time-show {
|
||
position: absolute;
|
||
width: 280rpx;
|
||
height: 80rpx;
|
||
border: 1rpx solid $default-skin-bg;
|
||
left: 50%;
|
||
bottom: 0;
|
||
margin-left: -140rpx;
|
||
border-radius: 80rpx;
|
||
margin-bottom: -60rpx;
|
||
z-index: 2;
|
||
background-color: #fff;
|
||
box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35);
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.u-time-show label {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.u-time-show text {
|
||
color: $default-skin-bg !important;
|
||
}
|
||
|
||
/*底部按钮 start*/
|
||
.m-footer-btn {
|
||
height: 100rpx;
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
z-index: 3
|
||
}
|
||
|
||
.m-footer-btn-main {
|
||
width: 50%;
|
||
height: 100%;
|
||
float: left;
|
||
background-color: $default-skin-bg;
|
||
color: #fff;
|
||
line-height: 100rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.m-footer-desable {
|
||
-webkit-filter: grayscale(1);
|
||
filter: grayscale(1);
|
||
}
|
||
|
||
.m-now {
|
||
background-color: #ffc001;
|
||
}
|
||
|
||
/*底部按钮 end*/
|
||
/*团长标签*/
|
||
.u-fg-label {
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
color: #888;
|
||
padding-right: 20rpx;
|
||
color: $default-skin-bg
|
||
}
|
||
|
||
.u-fg-label label {
|
||
color: yellow;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.m-media-box-thumb {
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.icon-box image {
|
||
border-radius: 100%;
|
||
}
|
||
|
||
/*团长标签*/
|
||
/* .u-btn {
|
||
padding:0 10rpx;
|
||
width:200rpx;
|
||
font-size:24rpx;
|
||
line-height:50rpx;
|
||
background-color:$default-skin-bg;
|
||
color:#fff;
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top:54rpx;
|
||
} */
|
||
.m-product-list {
|
||
background: #fff;
|
||
overflow: hidden
|
||
}
|
||
|
||
.m-product-name {
|
||
height: 116rpx
|
||
}
|
||
|
||
.headPhoto {
|
||
overflow: hidden;
|
||
display: flex;
|
||
width: 90%;
|
||
margin: 20rpx auto;
|
||
justify-content: center
|
||
}
|
||
|
||
.personPhoto {
|
||
position: relative;
|
||
margin: 0.2%
|
||
}
|
||
|
||
.photo-icon {
|
||
position: absolute;
|
||
width: 52rpx;
|
||
height: 36rpx;
|
||
top: -6rpx;
|
||
left: -10rpx
|
||
}
|
||
|
||
.photo {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid sandybrown;
|
||
margin-top: 8rpx;
|
||
margin-left: 2rpx;
|
||
margin-right: 2rpx
|
||
}
|
||
|
||
.photo-bg {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
margin-top: 8rpx;
|
||
|
||
}
|
||
|
||
.m-product-info::before {
|
||
border: none
|
||
}
|
||
|
||
.time text {
|
||
color: #DB384c
|
||
}
|
||
|
||
.surplus {
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
margin: 20rpx 0;
|
||
align-items: center
|
||
}
|
||
|
||
.link {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: #fff;
|
||
margin-top: 20rpx
|
||
}
|
||
|
||
.nav {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 200rpx
|
||
}
|
||
|
||
.nav-img {
|
||
width: 80rpx;
|
||
height: 80rpx
|
||
}
|
||
|
||
.nav text {
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #333
|
||
}
|
||
|
||
.isSucces {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
bottom: 10rpx;
|
||
}
|
||
|
||
.isSucces image {
|
||
width: 150rpx;
|
||
height: 150rpx
|
||
}
|
||
|
||
.rule {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
margin-top: 20rpx
|
||
}
|
||
|
||
.rule-header {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx
|
||
}
|
||
|
||
.rule-content {
|
||
font-size: 24rpx;
|
||
color: #777777
|
||
}
|
||
</style> |