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

<template>
	<view>
		<view class="text-base padding-30 text-lg">
			构建您的私域流量 牢牢锁住您的客户
		</view>
		<view class="bg-white padding-30 flex justify-between">
			<text class="bold">会员门槛</text>
			<text class="desc center">完成一笔任意金额交易即成会员</text>
		</view>
		<view class="card">
			<view class="title">
				<text class="bold">积分设置</text>
				<text class="desc center">积分为本平台通用，可在任意场景使用</text>
			</view>
			<view class="padding-30 u-border-bottom">
				<u-form :model="form" ref="uForm" label-width="180" label-align="right">
					<u-form-item label="积分兑率" :border-bottom="false">
						<view class="margin-left-20">
							<u-slider :min="1" height="10" v-model="value"  active-color="#EF9944" :use-slot="true" >
								<view class="">
									<view class="" >
										<view class="badge-button">
											{{value}}
										</view>
									</view>
								</view>
							</u-slider>
						</view>
					</u-form-item>
					<u-form-item label="消费1元赠送" :border-bottom="false">
						<view class="center" style="justify-content: flex-start;margin-left: 20rpx;">
							<u-input type="digit" style="width: 90%;" height="60" :border="true" :clearable="false"
								v-model="form.consumeOnePoint" placeholder="请输入积分数" />
							<view class="cu-tag bg-color radius" style="height: 60rpx;">
								积分
							</view>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="title" style="margin-top: 20rpx;">
				<text class="bold">积分价值</text>
				<text class="desc">1积分={{value / 100}}元</text>
			</view>

			<view class="desc" style="margin-top: 60rpx;" v-if="false">
				提示：消费返利赠送积分比例建议不超过30%，如超过30%需要另外
				进行申请，审批通过后即可。
				<text class="text-base">申请更高返利</text>
				<text class="cuIcon-right text-base"></text>
			</view>
		</view>

		<view class="tips">
			从公域聚合投放到私域流量的沉淀，智能化数字化的数据管理，联兑通帮助企业在裂变获客、私域留存、营销转化、客户管理各个环节提供帮助和辅助，形成一个完整的私域闭环，能有效的提高企业的私域运营效率，减少了客户的流失以及提升产品的转化和复购。
		</view>

		<view class="center flex-direction" style="margin: 70rpx 0;">
			<view class="margin-bottom-30 text-sm">
				<text>提交代表已同意</text>
				<text style="color: #3099F1;">会员中心规则说明</text>
			</view>
			<view @click="confirmShow=true" class="cu-btn bg-color round" style="width: 70%;height: 90rpx;font-size: 36rpx;">
				提交
			</view>
		</view>
		<u-modal :mask-close-able="true" v-model="confirmShow" @confirm="confirm" :confirm-text="isHigh?'重新设置':'确认'" confirm-color="#EF9944">
			<view class="slot-content">
				<text class="text-lg text-bold">消费1元赠送 {{form.consumeOnePoint}} 积分</text>
				<text class="text-lg text-bold">积分折合 {{pointsValue}} 元</text>
				<text v-if="isHigh" class="text-red margin-top-20 text-sm">*赠送积分价值高于系统风险阈值!</text>
			</view>
		</u-modal>
		<u-select confirm-color="#EF9944" v-model="show" :list="list"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'',
				
				isHigh:false,
				value:1,
				show:false,
				confirmShow:false,
				list: [{
						value: '0.01',
						label: '10%'
					},
					{
						value: '0.02',
						label: '20%'
					},
					{
						value: '0.03',
						label: '30%'
					}
				],
				form:{
					consumeOnePoint:'5'
				}
			}
		},
		computed:{
			pointsValue(){
				let data=this.$digital.floatMul( this.form.consumeOnePoint,(this.value / 100))
				if (data>0.3) {
					this.isHigh=true
				}else{
					this.isHigh=false
				}
				return data
			}
		},
		onLoad(options) {
			this.type=options.type || ''
			if (this.$isNotEmpty(this.type)) {
				uni.setNavigationBarTitle({
					title:'更改规则'
				})
			}
		},
		methods: {
			confirm(){
				if (this.$isEmpty(this.form.consumeOnePoint)) {
					this.$u.toast('请输入积分规则')
					return
				}
				this.confirmShow=false
				if (!this.isHigh) {
					this.submit()
				}
			},
			submit(){
				let id=this.vuex_mallId
				let params={
					id,
					sendPointUnit: this.form.consumeOnePoint,
					pointRate: this.value / 100,
					useMember: 1
				}
				this.$api.mall.submit(params).then(res=>{
					if (res.success) {
						this.$dialog.showModal('操作成功',false).then(res=>{
							uni.redirectTo({
								url:"/pages/member-center/member-center"
							})
						})
					}else{
						this.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f4f5f7;
	}
</style>

<style lang="scss">
	
	.slot-content{
		font-size: 28rpx;
		padding: 40rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		line-height: 50rpx;
	}
	
	.bold {
		font-size: 34rpx;
		color: #1C1C1C;
		font-weight: 800;
	}

	.desc {
		color: #8f8f8f;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.bg-color {
		background-color: #EE9230;
		color: #FFFFFF;
	}

	.card {
		padding: 40rpx 30rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.title {
			display: flex;
			justify-content: space-between;
		}
	}

	.tips {
		font-size: 24rpx;
		padding: 30rpx;
		line-height: 46rpx;
		color: #b3b3b3;
	}
	
	.badge-button {
		padding: 14rpx 16rpx;
		background-color: $base-color;
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 1;
	}
</style>