guosen-ldt-mall/pages/member-center/add.vue

<template>
	<view>
		<view class="margin-30">
			<text class="build_title">构建您的私域流量</text>
		</view>
		<view class="card">
			<text class="title">会员门槛</text>
			<text class="desc">完成一笔任意金额交易即成会员</text>
		</view>
		<view class="card margin-top-30">
			<text class="title">积分使用范围</text>
			<text class="desc">通用（可在任意场景使用）</text>
		</view>
		
		<view class="card margin-top-30">
			<view class="margin-bottom-20">
				<text class="title">积分价值</text>
				<text class="sub_title">(例：1000积分=10元)</text>
			</view>
			<view class="flex">
				<view class="center" style="width: 45%;">
					<u-input height="50" :border="true" :clearable="false" v-model="form.point" placeholder="请输入积分数"/>
					<view class="cu-tag bg-color radius">
						积分
					</view>
				</view>
				<view class="center" style="margin: 0 20rpx;">
					<text>=</text>
				</view>
				<view class="center" style="width: 45%;">
					<u-input height="50" :border="true" :clearable="false" v-model="form.pointValue" placeholder="请输入积分值" />
					<view class="cu-tag bg-color radius">
						元
					</view>
				</view>
			</view>
		</view>
		
		<view class="card margin-top-30">
			<view class="margin-bottom-20">
				<text class="title">积分规则</text>
			</view>
			<view class="flex">
				<view class="center">
					<text>消费1元赠送</text>
				</view>
				<view class="center" style="width: 45%;margin-left: 20rpx;">
					<u-input height="50" :border="true" :clearable="false" v-model="form.consumeOnePoint" placeholder="请输入积分数"/>
					<view class="cu-tag bg-color radius">
						积分
					</view>
				</view>
			</view>
		</view>
		
		<view class="center flex-direction" style="margin-top: 280rpx;">
			<view class="margin-bottom-30 text-sm">
				<text>提交代表已同意</text>
				<text style="color: #3099F1;">会员中心规则说明</text>
			</view>
			<view @click="submit" class="cu-btn bg-color round" style="width: 70%;height: 90rpx;font-size: 36rpx;">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					point:'',
					pointValue:'',
					consumeOnePoint:''
				}
			}
		},
		methods: {
			submit(){
				if (this.$isEmpty(this.form.point)) {
					this.$u.toast('请输入积分数')
					return
				}
				if (this.$isEmpty(this.form.pointValue)) {
					this.$u.toast('请输入积分值')
					return
				}
				if (this.$isEmpty(this.form.consumeOnePoint)) {
					this.$u.toast('请输入积分规则')
					return
				}
				
				this.form.id=this.vuex_mallId
				this.$api.memberCenter.create(this.form).then(res=>{
					if (res.success) {
						const selectedMall = this.$cache.get("selectedMall")
						this.$cache.put("selectedMall",Object.assign(selectedMall,this.form))
						this.$dialog.showModal('创建成功',false).then(res=>{
							this.$jump('/pages/member-center/member-center')
						})
					}else{
						this.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F4F5F7;
	}
	
	.bg-color{
		background-color: #EE9230;
		color: #FFFFFF;
	}
	
	.build_title{
		color: #EE9230;
		font-size: 32rpx;
	}
	
	.card{
		border-radius: 24rpx;
		background-color: #FFFFFF;
		padding:25rpx 40rpx;
		display: flex;
		flex-direction: column;
		
		.title{
			font-weight: 800;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		
		.sub_title{
			font-size: 24rpx;
			color: #999;
			margin-left: 10rpx;
		}
		
		
		.desc{
			font-size: 26rpx;
			color: #666666;
		}
	}
</style>