Files
crmeb_java/app/pages/activity/goods_combination_status/index.vue
2020-08-13 16:12:57 +08:00

876 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="group-con">
<div class="header acea-row row-between-wrapper">
<div class="pictrue">
<img :src="storeCombination.image" />
</div>
<div class="text">
<div class="line1" v-text="storeCombination.title"></div>
<div class="money">
<span class="num" v-text="storeCombination.price"></span>
<span class="team cart-color" v-text="storeCombination.people + '人拼'"></span>
</div>
</div>
<div v-if="pinkBool === -1" class="iconfont icon-pintuanshibai"></div>
<div v-else-if="pinkBool === 1" class="iconfont icon-pintuanchenggong font-color-red"></div>
</div>
<div class="wrapper">
<div class="title acea-row row-center-wrapper" v-if="pinkBool === 0">
<div class="line"></div>
<div class="name acea-row row-center-wrapper">
剩余
<CountDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '" :minute-text="' : '" :second-text="' '"
:datatime="pinkT.stop_time"></CountDown>结束
</div>
<div class="line"></div>
</div>
<div class="tips font-color-red" v-if="pinkBool === 1">
恭喜您拼团成功
</div>
<div class="tips" v-else-if="pinkBool === -1">
还差{{ count }}拼团失败
</div>
<div class="tips font-color-red" v-else-if="pinkBool === 0">
拼团中还差{{ count }}人拼团成功
</div>
<div class="list acea-row row-middle" :class="[
pinkBool === 1 || pinkBool === -1 ? 'result' : '',
iShidden ? 'on' : ''
]">
<div class="pictrue">
<img :src="pinkT.avatar" />
</div>
<div class="acea-row row-middle" v-if="pinkAll.length > 0">
<div class="pictrue" v-for="(item, index) in pinkAll" :key="index">
<img :src="item.avatar" />
</div>
</div>
<div class="pictrue" v-for="index in count" :key="index">
<img class="img-none" src="/static/images/vacancy.png" />
</div>
</div>
<div v-if="(pinkBool === 1 || pinkBool === -1) && count > 9" class="lookAll acea-row row-center-wrapper" @click="lookAll">
{{ iShidden ? "收起" : "查看全部" }}
<span class="iconfont" :class="iShidden ? 'icon-xiangshang' : 'icon-xiangxia'"></span>
</div>
<!-- #ifdef H5 -->
<div v-if="userBool === 1 && isOk == 0 && pinkBool === 0">
<div class="teamBnt bg-color-red" v-if="$wechat.isWeixin()" @click="H5ShareBox = true">邀请好友参团</div>
<div class="teamBnt bg-color-red" v-else @click="goPoster">邀请好友参团</div>
</div>
<!-- <div class="teamBnt bg-color-red" v-if="userBool === 1 && isOk == 0 && pinkBool === 0" @click="goPoster">
邀请好友参团
</div> -->
<!-- #endif -->
<!-- #ifdef MP -->
<button open-type='share' class="teamBnt bg-color-red" v-if="userBool === 1 && isOk == 0 && pinkBool === 0">邀请好友参团</button>
<!-- #endif -->
<div class="teamBnt bg-color-red" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">
我要参团
</div>
<div class="teamBnt bg-color-red" v-if="pinkBool === 1 || pinkBool === -1" @click="goDetail(storeCombination.id)">
再次开团
</div>
<div class="cancel" @click="getCombinationRemove" v-if="pinkBool === 0 && userBool === 1">
<span class="iconfont icon-guanbi3"></span>取消开团
</div>
<div class="lookOrder" v-if="pinkBool === 1" @click="goOrder">
查看订单信息
<span class="iconfont icon-xiangyou"></span>
</div>
</div>
<div class="group-recommend">
<div class="title acea-row row-between-wrapper">
<div>大家都在拼</div>
<div class="more" @click="goList">
更多拼团
<span class="iconfont icon-jiantou"></span>
</div>
</div>
<div class="list acea-row row-middle">
<div class="item" v-for="(item, index) in storeCombinationHost" :key="index" @click="goDetail(item.id)">
<div class="pictrue">
<img :src="item.image" />
<div class="team" v-text="item.people + '人团'"></div>
</div>
<div class="name line1" v-text="item.title"></div>
<div class="money font-color-red" v-text="'¥' + item.price"></div>
</div>
</div>
</div>
<product-window :attr='attr' :limitNum='1' :iSbnt='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum" @iptCartNum="iptCartNum"
@attrVal="attrVal" @goCat="goPay"></product-window>
<!-- 发送给朋友图片 -->
<view class="share-box" v-if="H5ShareBox">
<image src="/static/images/share-info.png" @click="H5ShareBox = false"></image>
</view>
<!-- #ifdef MP -->
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
<!-- #endif -->
<!-- <Product-window v-on:changeFun="changeFun" :attr="attr" :limitNum='1' :iSbnt='1'></Product-window> -->
<home></home>
</div>
</template>
<script>
import CountDown from "@/components/countDown";
import ProductWindow from "@/components/productWindow";
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
import {
getCombinationPink,
postCombinationRemove
} from "@/api/activity";
import {
postCartAdd
} from "@/api/store";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import home from '@/components/home';
const NAME = "GroupRule";
const app = getApp();
export default {
name: NAME,
components: {
CountDown,
ProductWindow,
home,
// #ifdef MP
authorize
// #endif
},
props: {},
data: function() {
return {
currentPinkOrder: "", //当前拼团订单
isOk: 0, //判断拼团是否完成
pinkBool: 0, //判断拼团是否成功|0=失败,1=成功
userBool: 0, //判断当前用户是否在团内|0=未在,1=在
pinkAll: [], //团员
pinkT: [], //团长信息
storeCombination: [], //拼团产品
storeCombinationHost: [], //拼团推荐
pinkId: 0,
count: 0, //拼团剩余人数
iShidden: false,
isOpen: false, //是否打开属性组件
attr: {
cartAttr: false,
productSelect: {
image: "",
store_name: "",
price: "",
quota: 0,
unique: "",
cart_num: 1,
quota_show: 0,
product_stock: 0
},
attrValue: "",
productAttr: []
},
cart_num:'',
userInfo:{},
H5ShareBox: false, //公众号分享图片
isAuto: false, //没有授权的不会自动授权
isShowAuth: false //是否隐藏授权
};
},
computed: mapGetters(['isLogin']),
onLoad(options) {
var that = this;
that.pinkId = options.id;
if (that.isLogin == false) {
// #ifdef H5 || APP-PLUS
toLogin();
// #endif
// #ifdef MP
that.isAuto = true;
that.$set(that, 'isShowAuth', true);
// #endif
}else{
// #ifdef H5
this.getCombinationPink();
// #endif
}
},
mounted: function() {
this.getCombinationPink();
},
//#ifdef MP
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
let that = this;
that.close();
that.addShareBargain();
return {
title: '您的好友' + that.userInfo.nickname + '邀请您参团' + that.storeCombination.title,
path: app.globalData.openPages,
imageUrl: that.storeCombination.image,
}
},
//#endif
methods: {
// 授权关闭
authColse: function(e) {
this.isShowAuth = e;
},
// 授权后回调
onLoadFun: function(e) {
this.userInfo = e
app.globalData.openPages = '/pages/activity/goods_combination_status/index?id=' + this.pinkId;
this.getCombinationPink();
},
/**
* 购物车手动填写
*
*/
iptCartNum: function (e) {
this.$set(this.attr.productSelect,'cart_num',e);
this.$set(this, "cart_num", e);
},
attrVal(val) {
this.attr.productAttr[val.indexw].index = this.attr.productAttr[val.indexw].attr_values[val.indexn];
},
onMyEvent: function() {
this.$set(this.attr, 'cartAttr', false);
this.$set(this, 'isOpen', false);
},
//将父级向子集多次传送的函数合二为一;
// changeFun: function(opt) {
// if (typeof opt !== "object") opt = {};
// let action = opt.action || "";
// let value = opt.value === undefined ? "" : opt.value;
// this[action] && this[action](value);
// },
// changeattr: function(res) {
// var that = this;
// that.attr.cartAttr = res;
// },
//选择属性;
ChangeAttr: function(res) {
this.$set(this,'cart_num',1);
let productSelect = this.productValue[res];
if (productSelect) {
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "quota", productSelect.quota);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(
this.attr.productSelect,
"product_stock",
productSelect.product_stock
);
this.$set(
this.attr.productSelect,
"quota_show",
productSelect.quota_show
);
this.$set(this, "attrValue", res);
this.$set(this, "attrTxt", "已选择");
} else {
this.$set(
this.attr.productSelect,
"image",
this.storeCombination.image
);
this.$set(
this.attr.productSelect,
"price",
this.storeCombination.price
);
this.$set(this.attr.productSelect, "quota", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(this.attr.productSelect, "quota_show", 0);
this.$set(this.attr.productSelect, "product_stock", 0);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", "请选择");
}
},
ChangeCartNum: function(res) {
//changeValue:是否 加|减
//获取当前变动属性
let productSelect = this.productValue[this.attrValue];
if (this.cart_num) {
productSelect.cart_num = this.cart_num;
this.attr.productSelect.cart_num = this.cart_num;
}
//如果没有属性,赋值给商品默认库存
if (productSelect === undefined && !this.attr.productAttr.length)
productSelect = this.attr.productSelect;
if (productSelect === undefined) return;
let stock = productSelect.stock || 0;
let quotaShow = productSelect.quota_show || 0;
let productStock = productSelect.product_stock || 0;
let num = this.attr.productSelect;
//设置默认数据
if (productSelect.cart_num == undefined) productSelect.cart_num = 1;
if (res) {
num.cart_num ++;
if(quotaShow >= productStock){
if (num.cart_num > productStock) {
this.$set(this.attr.productSelect, "cart_num", productStock);
this.$set(this, "cart_num", productStock);
}
}else{
if (num.cart_num > quotaShow) {
this.$set(this.attr.productSelect, "cart_num", quotaShow);
this.$set(this, "cart_num", quotaShow);
}
}
this.$set(this, "cart_num", num.cart_num);
this.$set(this.attr.productSelect, "cart_num", num.cart_num);
} else {
num.cart_num--;
if (num.cart_num < 1) {
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "cart_num", 1);
}
this.$set(this, "cart_num", num.cart_num);
this.$set(this.attr.productSelect, "cart_num", num.cart_num);
}
// if (res) {
// num.cart_num++;
// if (num.cart_num > quota) {
// this.$set(this.attr.productSelect, "cart_num", quota);
// this.$set(this, "cart_num", quota);
// }
// } else {
// num.cart_num--;
// if (num.cart_num < 1) {
// this.$set(this.attr.productSelect, "cart_num", 1);
// this.$set(this, "cart_num", 1);
// }
// }
},
//默认选中属性;
DefaultSelect() {
let productAttr = this.attr.productAttr,
value = [];
for (var key in this.productValue) {
if (this.productValue[key].quota > 0) {
value = this.attr.productAttr.length ? key.split(",") : [];
break;
}
}
for (let i = 0; i < productAttr.length; i++) {
this.$set(productAttr[i], "index", value[i]);
}
//sort();排序函数:数字-英文-汉字;
let productSelect = this.productValue[value.sort().join(",")];
if (productSelect && productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeCombination.title
);
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "quota", productSelect.quota);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(
this.attr.productSelect,
"product_stock",
productSelect.product_stock
);
this.$set(
this.attr.productSelect,
"quota_show",
productSelect.quota_show
);
this.$set(this, "attrValue", value.sort().join(","));
this.attrValue = value.sort().join(",");
this.$set(this, "attrTxt", "已选择");
} else if (!productSelect && productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeCombination.title
);
this.$set(
this.attr.productSelect,
"image",
this.storeCombination.image
);
this.$set(
this.attr.productSelect,
"price",
this.storeCombination.price
);
this.$set(this.attr.productSelect, "quota", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(this.attr.productSelect, "product_stock", 0);
this.$set(this.attr.productSelect, "quota_show", 0);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", "请选择");
} else if (!productSelect && !productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeCombination.title
);
this.$set(
this.attr.productSelect,
"image",
this.storeCombination.image
);
this.$set(
this.attr.productSelect,
"price",
this.storeCombination.price
);
this.$set(this.attr.productSelect, "quota", 0);
this.$set(
this.attr.productSelect,
"unique",
this.storeCombination.unique || ""
);
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this.attr.productSelect, "quota_show", 0);
this.$set(this.attr.productSelect, "product_stock", 0);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", "请选择");
}
},
setProductSelect: function() {
var that = this;
var attr = that.attr;
attr.productSelect.image = that.storeCombination.image;
attr.productSelect.store_name = that.storeCombination.title;
attr.productSelect.price = that.storeCombination.price;
attr.productSelect.quota = 0;
attr.productSelect.quota_show = 0;
attr.productSelect.product_stock = 0;
attr.cartAttr = false;
that.$set(that, "attr", attr);
},
pay: function() {
var that = this;
that.attr.cartAttr = true;
that.isOpen = true;
},
goPay() {
var that = this;
var data = {};
// that.attr.cartAttr = res;
data.productId = that.storeCombination.product_id;
data.cartNum = that.attr.productSelect.cart_num;
data.uniqueId = that.attr.productSelect.unique;
data.combinationId = that.storeCombination.id;
data.new = 1;
console.log(that.pinkId);
postCartAdd(data)
.then(res => {
uni.navigateTo({
url:'/pages/users/order_confirm/index?cartId=' +res.data.cartId +'&pinkid='+that.pinkId
})
})
.catch(res => {
that.$util.Tips({
title:res
})
});
},
goPoster: function() {
var that = this;
// this.$router.push({
// path: "/activity/poster/" + that.pinkId + "/1"
// });
uni.navigateTo({
url:'/pages/activity/poster-poster/index?type=2&id='+that.pinkId
})
},
goOrder: function() {
var that = this;
uni.navigateTo({
url:"/pages/order_details/index?order_id=" + that.currentPinkOrder
})
},
//拼团列表
goList: function() {
uni.navigateTo({
url:'/pages/activity/goods_combination/index'
})
},
//拼团详情
goDetail: function(id) {
this.pinkId = id
// this.getCombinationPink();
uni.navigateTo({
url:'/pages/activity/goods_combination_details/index?id='+id
})
// this.$router.push({
// path: "/activity/group_detail/" + id
// });
},
//拼团信息
getCombinationPink: function() {
var that = this;
getCombinationPink(that.pinkId).then(res => {
that.$set(
that,
"storeCombinationHost",
res.data.store_combination_host
);
res.data.pinkT.stop_time = parseInt(res.data.pinkT.stop_time)
that.$set(that, "storeCombination", res.data.store_combination);
that.$set(that, "pinkT", res.data.pinkT);
that.$set(that, "pinkAll", res.data.pinkAll);
that.$set(that, "count", res.data.count);
that.$set(that, "userBool", res.data.userBool);
that.$set(that, "pinkBool", res.data.pinkBool);
that.$set(that, "isOk", res.data.is_ok);
that.$set(that, "currentPinkOrder", res.data.current_pink_order);
that.$set(that, "userInfo", res.data.userInfo);
that.attr.productAttr = res.data.store_combination.productAttr;
that.productValue = res.data.store_combination.productValue;
//#ifdef H5
that.setOpenShare();
//#endif
that.setProductSelect();
if (that.attr.productAttr != 0) that.DefaultSelect();
});
},
//#ifdef H5
setOpenShare() {
let that = this;
let configTimeline = {
title:
"您的好友" +
that.userInfo.nickname +
"邀请您参团" +
that.storeCombination.title,
desc: that.storeCombination.title,
link:
window.location.protocol +
"//" +
window.location.host +
"/pages/activity/goods_combination_status/index?id=" +
that.pinkId,
imgUrl: that.storeCombination.image
};
if (this.$wechat.isWeixin()) {
this.$wechat.wechatEvevt([
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline"
],
configTimeline
)
.then(res => {
console.log(res);
})
.catch(res => {
if (res.is_ready) {
res.wx.updateAppMessageShareData(configTimeline);
res.wx.updateTimelineShareData(configTimeline);
res.wx.onMenuShareAppMessage(configTimeline);
res.wx.onMenuShareTimeline(configTimeline);
}
});
}
},
//#endif
//拼团取消
getCombinationRemove: function() {
var that = this;
postCombinationRemove({
id: that.pinkId,
cid: that.storeCombination.id
})
.then(res => {
that.$util.Tips({
title:res.msg
},{
tab: 3,
})
})
.catch(res => {
that.$util.Tips({
title:res
})
});
},
lookAll: function() {
this.iShidden = !this.iShidden;
}
}
};
</script>
<style lang="scss" scoped>
/*开团*/
.group-con .header {
width: 100%;
height: 186rpx;
background-color: #fff;
border-top: 1px solid #f5f5f5;
padding: 0 30rpx;
position: relative;
}
.group-con .header .iconfont {
font-size: 100rpx;
position: absolute;
color: #ccc;
right: 33rpx;
bottom: 20rpx;
}
.group-con .header .pictrue {
width: 140rpx;
height: 140rpx;
}
.group-con .header .pictrue img {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
.group-con .header .text {
width: 540rpx;
font-size: 30rpx;
color: #222;
}
.group-con .header .text .money {
font-size: 24rpx;
font-weight: bold;
margin-top: 15rpx;
}
.group-con .header .text .money .num {
font-size: 32rpx;
}
.group-con .header .text .money .team {
padding: 1rpx 10rpx;
font-weight: normal;
border-radius: 50rpx;
font-size: 20rpx;
vertical-align: 4rpx;
margin-left: 15rpx;
}
.group-con .wrapper {
background-color: #fff;
margin-top: 20rpx;
padding: 2rpx 0 35rpx 0;
}
.group-con .wrapper .title {
margin-top: 30rpx;
}
.group-con .wrapper .title .line {
width: 136rpx;
height: 1px;
background-color: #ddd;
}
.group-con .wrapper .title .name {
margin: 0 45rpx;
font-size: 28rpx;
color: #282828;
}
.group-con .wrapper .title .name .time {
margin: 0 14rpx;
}
.group-con .wrapper .title .name .timeTxt {
color: #fc4141;
}
.group-con .wrapper .title .name .time .styleAll {
background-color: #ffcfcb;
text-align: center;
border-radius: 3rpx;
font-size: 28rpx;
font-weight: bold;
display: inline-block;
vertical-align: middle;
color: #fc4141;
padding: 2rpx 5rpx;
}
.group-con .wrapper .tips {
font-size: 30rpx;
font-weight: bold;
text-align: center;
margin-top: 30rpx;
color: #999;
}
.group-con .wrapper .list {
padding: 0 30rpx;
margin-top: 45rpx;
}
.group-con .wrapper .list.result {
max-height: 240rpx;
overflow: hidden;
}
.group-con .wrapper .list.result.on {
max-height: 2000rpx;
}
.group-con .wrapper .list .pictrue {
width: 94rpx;
height: 94rpx;
margin: 0 0 29rpx 35rpx;
}
.group-con .wrapper .list .pictrue img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2rpx solid #e93323;
}
.group-con .wrapper .list .pictrue img.img-none {
border: none;
}
.group-con .wrapper .lookAll {
font-size: 24rpx;
color: #282828;
padding-top: 10rpx;
}
.group-con .wrapper .lookAll .iconfont {
font-size: 25rpx;
margin: 2rpx 0 0 10rpx;
}
.group-con .wrapper .teamBnt {
font-size: 30rpx;
width: 620rpx;
height: 86rpx;
border-radius: 50rpx;
text-align: center;
line-height: 86rpx;
color: #fff;
margin: 21rpx auto 0 auto;
}
.group-con .wrapper .cancel,
.group-con .wrapper .lookOrder {
text-align: center;
font-size: 24rpx;
color: #282828;
padding-top: 30rpx;
}
.group-con .wrapper .cancel .iconfont {
font-size: 35rpx;
color: #2c2c2c;
vertical-align: -4rpx;
margin-right: 9rpx;
}
.group-con .wrapper .lookOrder .iconfont {
font-size: 25rpx;
color: #2c2c2c;
margin-left: 10rpx;
}
.group-con .group-recommend {
background-color: #fff;
margin-top: 25rpx;
}
.group-con .group-recommend .title {
padding-right: 30rpx;
margin-left: 30rpx;
height: 85rpx;
border-bottom: 1px solid #eee;
font-size: 28rpx;
color: #282828;
}
.group-con .group-recommend .title .more {
color: #808080;
}
.group-con .group-recommend .title .more .iconfont {
margin-left: 13rpx;
font-size: 28rpx;
}
.group-con .group-recommend .list {
margin-top: 30rpx;
}
.group-con .group-recommend .list .item {
width: 210rpx;
margin: 0 0 25rpx 30rpx;
}
.group-con .group-recommend .list .item .pictrue {
width: 100%;
height: 210rpx;
position: relative;
}
.group-con .group-recommend .list .item .pictrue img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.group-con .group-recommend .list .item .pictrue .team {
position: absolute;
top: 28rpx;
left: -5rpx;
min-width: 100rpx;
height: 36rpx;
line-height: 36rpx;
text-align: center;
border-radius: 0 18rpx 18rpx 0;
font-size: 20rpx;
color: #fff;
background-image: linear-gradient(to right, #fb5445 0%, #e93323 100%);
background-image: -webkit-linear-gradient(to right, #fb5445 0%, #e93323 100%);
background-image: -moz-linear-gradient(to right, #fb5445 0%, #e93323 100%);
}
.group-con .group-recommend .list .item .name {
font-size: 28rpx;
color: #333;
margin-top: 0.18rem;
}
.group-con .group-recommend .list .item .money {
font-weight: bold;
font-size: 28rpx;
}
.share-box {
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
}
}
</style>