590 lines
14 KiB
Vue
590 lines
14 KiB
Vue
<template>
|
||
<view class="add-group-buying">
|
||
<custom-navbar :title="title" backgroundColor="#FFFFFF"></custom-navbar>
|
||
<view class="tip" v-if="tip && formData.id">
|
||
<image src="/static/images/shop/pintuan/warn.png" class="tip-icon">
|
||
</image>
|
||
|
||
<text>{{ tip }}</text>
|
||
</view>
|
||
<view class="add-service" :class="{tipTop: tip}" >
|
||
|
||
<!-- 拼团名称 -->
|
||
<view class="form-item-up">
|
||
<text class="form-label">拼团名称</text>
|
||
<view class="form-input-box">
|
||
<input type="text" v-model="formData.title" placeholder="请输入名称" placeholder-class="placeholder"
|
||
class="form-input" :disabled="disabled" />
|
||
</view>
|
||
</view>
|
||
<!-- 活动时间-->
|
||
<view class="form-item-up flex-wrap__warp">
|
||
<text class="form-label" style="margin-bottom: 24rpx">活动时间</text>
|
||
<view class="form-input-card">
|
||
<selectActiveTime v-model="tiemValue" :disabled="disabled"></selectActiveTime>
|
||
</view>
|
||
</view>
|
||
<!-- 几人团 -->
|
||
<view class="form-item-up">
|
||
<text class="form-label">几人团</text>
|
||
<view class="form-input-box box-width-190">
|
||
<input v-model="formData.person_num" placeholder="请输入人数" placeholder-class="placeholder"
|
||
class="form-input" :disabled="disabled" type="number" />
|
||
</view>
|
||
<text class="redTip">*人数越少，成团难度越低</text>
|
||
</view>
|
||
<!-- 总开团数 -->
|
||
<view class="form-item-up">
|
||
<text class="form-label">总开团数</text>
|
||
<view class="form-input-box box-width-190">
|
||
<input v-model="formData.team_num" placeholder="请输入数量" placeholder-class="placeholder"
|
||
class="form-input" :disabled="disabled" type="number" />
|
||
</view>
|
||
<text class="redTip">*拼团活动的总数量</text>
|
||
</view>
|
||
<!-- 活动商品 -->
|
||
<view class="form-item-up" @click="selectServe" v-if="!disabled">
|
||
<text class="form-label">活动商品</text>
|
||
<view class="form-input-select">
|
||
<text> {{ serveDetail.title?serveDetail.title:'选择服务' }}</text>
|
||
<image src="/static/images/arrow_right.png" class="form-input-select__img" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<view class="form-item-up" v-if="serveDetail.id">
|
||
<serveCard :info="serveDetail" :showRadio="false"></serveCard>
|
||
</view>
|
||
<!-- 活动价 -->
|
||
<view class="form-item-up" v-if="serveDetail.id">
|
||
<text class="form-label">活动价</text>
|
||
<view class="form-input-box box-width-190">
|
||
<input v-model="formData.price" placeholder="请输入价格" placeholder-class="placeholder"
|
||
class="form-input" :disabled="disabled" type="digit" />
|
||
</view>
|
||
</view>
|
||
<!-- 限购规则 -->
|
||
<view class="form-item-up">
|
||
<text class="form-label">限购规则</text>
|
||
<view class="form-radio-box">
|
||
<uv-radio-group v-model="formData.quota_type" placement="row" :labelColor="`#333333`"
|
||
:labelSize="`28rpx`" :disabled="disabled">
|
||
<uv-radio :name="1" activeColor="#E8101E" label="限购">
|
||
|
||
<template #icon>
|
||
|
||
<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
|
||
v-show="formData.quota_type==1">
|
||
</image>
|
||
|
||
</template>
|
||
</uv-radio>
|
||
<uv-radio :name="2" activeColor="#E8101E" label="不限购" @change="formData.person_quota = null">
|
||
<template #icon>
|
||
|
||
<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
|
||
v-show="formData.quota_type==2">
|
||
</image>
|
||
|
||
</template>
|
||
</uv-radio>
|
||
</uv-radio-group>
|
||
</view>
|
||
</view>
|
||
<!-- 每人限购 -->
|
||
<view class="form-item-up">
|
||
<text class="form-label">每人限购</text>
|
||
<view class="form-input-box box-width-190">
|
||
<input :disabled="
|
||
disabled || (formData.quota_type == 2 && formData.person_quota == null)
|
||
" v-model="formData.person_quota" placeholder="请输入数量" placeholder-class="placeholder"
|
||
class="form-input" type="number" />
|
||
</view>
|
||
</view>
|
||
<!-- 活动时效 -->
|
||
<view class="form-item-up" style="flex-wrap: wrap">
|
||
<text class="form-label">活动时效</text>
|
||
<view class="form-radio-box2">
|
||
<uv-radio-group v-model="formData.time_quota" placement="row" :labelColor="`#333333`"
|
||
:labelSize="`28rpx`" :disabled="disabled">
|
||
<uv-radio :name="12" activeColor="#E8101E" label="12小时">
|
||
<template #icon>
|
||
|
||
<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
|
||
v-show="formData.time_quota==12">
|
||
</image>
|
||
|
||
</template>
|
||
</uv-radio>
|
||
<uv-radio :name="24" activeColor="#E8101E" label="24小时">
|
||
<template #icon>
|
||
|
||
<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
|
||
v-show="formData.time_quota==24">
|
||
</image>
|
||
|
||
</template>
|
||
</uv-radio>
|
||
<uv-radio :name="48" activeColor="#E8101E" label="48小时">
|
||
<template #icon>
|
||
|
||
<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
|
||
v-show="formData.time_quota==48">
|
||
</image>
|
||
|
||
</template>
|
||
</uv-radio>
|
||
</uv-radio-group>
|
||
</view>
|
||
<view class="blackTip">新人开团后！在设置时间内邀请剩余好友参团完成成团。若超过设置时间未达成，订单将自动取消。</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="select-serve-footer" v-if="!disabled">
|
||
<view class="select-serve-footer__btn" @click="submit">提交 </view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import serveCard from "./components/serveCard.vue";
|
||
import timeDatePicker from "components/time-picker/time-date-picker.vue";
|
||
import selectActiveTime from "components/select-active-time/select-active-time.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
tip: null, //驳回原因
|
||
title: "添加活动",
|
||
formData: {
|
||
start_time: null,
|
||
end_time: null,
|
||
},
|
||
isSubmit: false,
|
||
tiemValue: [],
|
||
serveDetail: {},
|
||
disabled: false,
|
||
};
|
||
},
|
||
components: {
|
||
timeDatePicker,
|
||
selectActiveTime,
|
||
serveCard,
|
||
},
|
||
onLoad(e) {
|
||
if (e.dateItem) {
|
||
let dateItem = JSON.parse(decodeURIComponent(e.dateItem));
|
||
if (dateItem.back_text?.length != 0) {
|
||
this.tip = dateItem.back_text
|
||
}
|
||
let {
|
||
title,
|
||
start_time,
|
||
end_time,
|
||
person_num,
|
||
team_num,
|
||
server_id,
|
||
price,
|
||
quota_type,
|
||
person_quota,
|
||
time_quota,
|
||
id,
|
||
} = dateItem;
|
||
this.formData = {
|
||
title,
|
||
start_time,
|
||
end_time,
|
||
person_num,
|
||
team_num,
|
||
server_id,
|
||
price,
|
||
quota_type,
|
||
person_quota,
|
||
time_quota,
|
||
id,
|
||
};
|
||
}
|
||
this.tiemValue = [this.formData.start_time, this.formData.end_time];
|
||
if (this.formData.server_id) {
|
||
request
|
||
.post("/user/serverdetail", {
|
||
id: this.formData.server_id
|
||
})
|
||
.then((res) => {
|
||
if (res.state == 1) {
|
||
this.serveDetail = res.data;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
}
|
||
if (e.disabled) {
|
||
this.disabled = true
|
||
}
|
||
if (e.title) {
|
||
this.title = e.title
|
||
}
|
||
},
|
||
methods: {
|
||
//获取当前时间
|
||
getFormattedTime() {
|
||
const date = new Date();
|
||
|
||
// 获取年份
|
||
const year = date.getFullYear();
|
||
|
||
// 获取月份，注意月份从0开始，需要加1，并且确保是两位数
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
|
||
// 获取日期，确保是两位数
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
|
||
// 获取小时，确保是两位数
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
|
||
// 获取分钟，确保是两位数
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
|
||
// 获取秒数，确保是两位数
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
|
||
// 拼接成需要的格式
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
openPicker() {
|
||
console.log(22222);
|
||
this.$refs.timePopup.openTimePopup();
|
||
},
|
||
confirmTime(e) {
|
||
console.log(e);
|
||
},
|
||
selectServe() {
|
||
uni.navigateTo({
|
||
url: "/pages/shop/groupBuying/selectServe",
|
||
});
|
||
},
|
||
submit() {
|
||
let formData = this.formData;
|
||
if (!formData.title) {
|
||
uni.showToast({
|
||
title: "请输入拼团名称",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
formData.start_time = this.tiemValue[0];
|
||
formData.end_time = this.tiemValue[1];
|
||
if (!formData.start_time) {
|
||
uni.showToast({
|
||
title: "请选择开始时间",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.end_time) {
|
||
uni.showToast({
|
||
title: "请选择结束时间",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.person_num) {
|
||
uni.showToast({
|
||
title: "请输入开团人数",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (2 > formData.person_num) {
|
||
uni.showToast({
|
||
title: "开团人数不能少于2人",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (10 < formData.person_num) {
|
||
uni.showToast({
|
||
title: "开团人数不能超过10人",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.team_num) {
|
||
uni.showToast({
|
||
title: "请输入总开团数",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.server_id) {
|
||
uni.showToast({
|
||
title: "请选择活动商品",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.price) {
|
||
uni.showToast({
|
||
title: "请输入活动价",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.quota_type) {
|
||
uni.showToast({
|
||
title: "请选择限购规则",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.person_quota && formData.quota_type == 1) {
|
||
uni.showToast({
|
||
title: "请输入每人限购",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if(formData.quota_type == 1 && formData.person_quota<=0 ){
|
||
uni.showToast({
|
||
title: "每人限购必须大于1",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.time_quota) {
|
||
uni.showToast({
|
||
title: "请选择活动时效",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (formData.quota_type == 2) {
|
||
formData.person_quota = 0;
|
||
}
|
||
if (this.isSubmit) return;
|
||
this.isSubmit = true;
|
||
let url = "/sj/teamBuy/add";
|
||
if (formData.id) {
|
||
url = "/sj/teamBuy/edit";
|
||
}
|
||
request
|
||
.post(url, formData)
|
||
.then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
const pages = getCurrentPages();
|
||
const prevPage = pages[pages.length - 2]; // 上一个页面
|
||
uni.showToast({
|
||
title: formData.id ? "修改成功" : "添加成功",
|
||
icon: "none",
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
success: () => {
|
||
prevPage.$vm.switchTab(4, 1);
|
||
},
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.showToast({
|
||
title: "网络异常，请稍后再试",
|
||
icon: "none",
|
||
});
|
||
})
|
||
.finally(() => {
|
||
this.isSubmit = false;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.radioYes {
|
||
width: 24rpx;
|
||
height: 16rpx;
|
||
}
|
||
|
||
.redTip {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #E8101E;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.blackTip {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.add-group-buying {
|
||
padding-bottom: 160rpx;
|
||
|
||
.tip {
|
||
padding: 20rpx 30rpx;
|
||
background: #FEEFEC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #F31D2F;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
text-align: center;
|
||
|
||
.tip-icon {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
margin-right: 10rpx;
|
||
transform: translateY(6rpx);
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-service {
|
||
padding: 30rpx;
|
||
|
||
.form-item-up {
|
||
background-color: #fff;
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
column-gap: 20rpx;
|
||
|
||
.form-label {
|
||
white-space: nowrap;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.form-input-card {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
column-gap: 22rpx;
|
||
}
|
||
|
||
.form-input-box {
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #e5e5e5;
|
||
width: 100%;
|
||
height: 72rpx;
|
||
|
||
.form-input {
|
||
height: 72rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.uni-input-placeholder {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #cacccc;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.box-width-190 {
|
||
width: 190rpx;
|
||
}
|
||
|
||
.form-radio-box {
|
||
margin-left: 106rpx;
|
||
|
||
.uv-radio-group--row {
|
||
gap: 88rpx;
|
||
}
|
||
}
|
||
|
||
.form-radio-box2 {
|
||
margin-left: 32rpx;
|
||
flex: 1;
|
||
|
||
.uv-radio-group--row {
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.form-input-select {
|
||
border-radius: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
|
||
&__img {
|
||
margin-left: 11rpx;
|
||
width: 12rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.flex-wrap__warp {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.select-serve-footer {
|
||
background-color: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 40rpx 30rpx;
|
||
|
||
&__btn {
|
||
width: 690rpx;
|
||
height: 78rpx;
|
||
background: #E8101E;
|
||
border-radius: 798rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 39rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.tipTop{
|
||
padding-top: 8rpx;
|
||
}
|
||
</style> |