<template>
|
<view class="activity-container">
|
<view class="base-message">
|
<view class="message-item">
|
<view class="logo">
|
<view class="label">活动图片</view>
|
<text class="label-tip">上传png/jpg格式图片，建议尺寸：800*800px</text>
|
</view>
|
<view class="message-value">
|
<uni-file-picker limit="9">
|
</uni-file-picker>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">活动名称</view>
|
<view class="message-value">
|
<input
|
:inputBorder="false"
|
v-model="form.realName"
|
placeholderStyle="color:#ccc; font-size: 30rpx;"
|
placeholder="请输入活动名称" />
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">活动类型</view>
|
<view class="message-value" @click="$refs.activityType.open()">
|
<text :class="form.activityType?'':'un-select'">{{ form.activityType||'请选择活动类型' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">活动时间</view>
|
<view class="message-value" @click="picker">
|
<text :class="form.startDate?'':'un-select'">{{ form.startDate ? `${form.startDate}~${form.endDate}`:'开始时间-结束时间' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">报名时间</view>
|
<view class="message-value" @click="pickerApply">
|
<text :class="form.startApplyDate?'':'un-select'">{{ form.startApplyDate ? `${form.startApplyDate}~${form.endApplyDate}`:'开始时间-结束时间' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">活动地址</view>
|
<view class="message-value" @click="selectAddress">
|
<text :class="form.address?'':'un-select'">{{ form.address||'请选择地址' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">人员上限</view>
|
<view class="message-value">
|
<input
|
:inputBorder="false"
|
type="number"
|
v-model="form.numLimt"
|
placeholderStyle="color:#ccc; font-size: 30rpx;"
|
placeholder="0" />
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">人员上限</view>
|
<view class="message-value">
|
￥
|
<input
|
:inputBorder="false"
|
type="number"
|
v-model="form.numLimt"
|
placeholderStyle="color:#ccc; font-size: 30rpx;"
|
placeholder="0" />
|
</view>
|
</view>
|
<view class="parting"></view>
|
<view class="bran-story">
|
<view class="label">活动详情</view>
|
<uni-easyinput
|
:inputBorder="false"
|
v-model="form.content"
|
:maxlength="500"
|
autoHeight
|
placeholder="请输入"
|
type="textarea"
|
/>
|
<uni-file-picker limit="9">
|
</uni-file-picker>
|
</view>
|
<view class="next-btn" @click="save">发布活动</view>
|
<view class="safe-area"></view>
|
</view>
|
<activityType ref="activityType" :activityTypes="activityTypes" @updata="updataType" />
|
<view class="pickers" style="">
|
<uni-datetime-picker ref="activityTime" @change="change" type="datetimerange" rangeSeparator="至" />
|
<uni-datetime-picker ref="activityApplyTime" @change="applyChange" type="datetimerange" rangeSeparator="至" />
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import activityType from "@/components/merchant/activityType.vue"
|
export default {
|
components: { activityType },
|
data() {
|
return {
|
form: {
|
activityType: '',
|
datetimerange: '',
|
startDate: '',
|
endDate: '',
|
startApplyDate: '',
|
endApplyDate: '',
|
address: '',
|
numLimt: '',
|
},
|
activityTypes: ['2131', 'dsada']
|
};
|
},
|
onLoad(props) {
|
console.log(props);
|
if (props.title) {
|
uni.setNavigationBarTitle({
|
title: props.title
|
});
|
}
|
},
|
methods: {
|
updataType(v) {
|
this.form.activityType = v
|
},
|
picker() {
|
this.$refs.activityTime.show()
|
},
|
pickerApply() {
|
this.$refs.activityApplyTime.show()
|
},
|
change(v) {
|
console.log(v);
|
thi.form.startDate = v[0]
|
thi.form.endDate = v[1]
|
},
|
applyChange(v) {
|
console.log(v);
|
thi.form.startApplyDate = v[0]
|
thi.form.endApplyDate = v[1]
|
},
|
selectAddress() {
|
uni.navigateTo({
|
url: '/pages/selectLocation/selectLocation'
|
})
|
},
|
save() {
|
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.activity-container {
|
height: 100%;
|
background-color: #fff;
|
overflow-y: scroll;
|
overflow-x: hidden;
|
}
|
.base-message {
|
background-color: #FFFFFF;
|
padding: 20rpx 32rpx;
|
box-sizing: border-box;
|
width: 100%;
|
.message-item {
|
// height: 148rpx;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
border-bottom: 2rpx solid #F4F5F4;
|
.logo {
|
display: flex;
|
.label-tip {
|
height: 36rpx;
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
line-height: 36rpx;
|
}
|
}
|
.label {
|
line-height: 30rpx;
|
height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 500;
|
margin-bottom: 24rpx;
|
// &::after {
|
// content: ' *';
|
// color: #D20A0A;
|
// }
|
}
|
.message-value {
|
line-height: 30rpx;
|
font-size: 30rpx;
|
display: flex;
|
justify-content: space-between;
|
input {
|
flex: 1;
|
}
|
.un-select {
|
font-size: 28rpx;
|
color: #CCCCCC;
|
}
|
.labels {
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
.label-item {
|
padding: 10rpx 12rpx;
|
background: rgba(210,10,10,0.1);
|
border-radius: 4rpx;
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #D20A0A;
|
line-height: 24rpx;
|
margin-right: 12rpx;
|
margin-bottom: 12rpx;
|
}
|
}
|
}
|
}
|
}
|
.parting {
|
background: #f7f7f7;
|
height: 16rpx;
|
width: 120%;
|
margin-left:-33rpx;
|
}
|
.bran-story {
|
padding-top: 44rpx;
|
border-bottom: 2rpx solid #F4F5F4;
|
.label {
|
line-height: 30rpx;
|
height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 500;
|
margin-bottom: 24rpx;
|
}
|
}
|
.next-btn {
|
height: 72rpx;
|
margin: 126rpx 56rpx 0;
|
background: linear-gradient(270deg, #D20A0A 0%, #D95A5A 100%);
|
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
color: #FFFFFF;
|
line-height: 72rpx;
|
text-align: center;
|
}
|
.save-btn {
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
.safe-area {
|
height: env(safe-area-inset-bottom);
|
padding: 20rpx;
|
}
|
.pickers {
|
position: fixed;
|
bottom: -300rpx;
|
z-index:9999;
|
}
|
/deep/ .uni-calendar-item--checked {
|
background-color: #D20A0A!important;
|
}
|
/deep/ .uni-calendar-item--multiple .uni-calendar-item--before-checked, .uni-calendar-item--multiple .uni-calendar-item--after-checked {
|
background-color: #D20A0A!important;
|
}
|
/deep/ .uni-datetime-picker--btn {
|
background: linear-gradient(270deg, #D20A0A 0%, #D95A5A 100%);
|
}
|
</style>
|
