增加优惠券相关

pageCoupon/editCertificate.vue

@@ -0,0 +1,160 @@
+<template>
+	<view class="content">
+		<view class="card">
+			<view class="item">
+				<view class="lable">商品兑换券名称</view>
+				<view class="value"> 
+					<up-input placeholder="填写名称" border="none" clearable ></up-input>	
+				</view>
+			</view>
+			<view class="item">
+				<view class="lable">使用门槛</view>
+				<view class="value"> 
+					<view>满</view><input placeholder="填写金额" border="none"></input><view>元，可用</view>
+				</view>
+			</view>
+			<view class="item">
+				<view class="lable">总发放数量</view>
+				<view class="value"> 
+					<up-input v-model="saveData.num" placeholder="填写数量" border="none" clearable ></up-input>	
+				</view>
+			</view>
+		</view>
+		<view class="card">
+		
+			<view class="item">
+				<view class="lable">指定抵扣商品</view>
+				<view class="value"> 
+					<view class="selectGoods" @tap="selectGoodsOpen">
+						<view>
+							<view class="title">选择商品</view>
+							<view class="goodsName">选择指定商品</view>
+						</view>
+						<up-icon name="arrow-right" color="#9F9F9F" size="22"></up-icon>
+					</view>
+				</view>
+			</view>
+		
+			
+		</view>
+	
+		<view class="bottomPop">
+			<button @click="save">保存</button>
+		</view>
+		
+		<select-goods ref="goods" @affirm="affirm"></select-goods>
+	</view>
+</template>
+<script setup>
+	import myActionSheet from '@/components/my-components/my-action-sheet';
+	import selectGoods from './components/select-goods';
+	import {
+		reactive,
+		ref,
+		toRef,
+		watch
+	} from 'vue';
+	const pageData = reactive({
+		
+		title: "",
+		show: false,
+	})
+	const saveData = reactive({
+		type: '1',
+		timeType: '1',
+		num: '',
+	})
+	
+	let goods = ref(null)
+	let selectGoodsOpen = () => {
+		goods.value.open();
+	}
+	
+	/**
+	 * 保存
+	 */
+	let save = () => {
+		console.log(saveData.type)
+		console.log(saveData.timeType)
+	}
+	
+</script>
+
+<style lang="scss">
+	
+	.content {
+		background: #F9F9F9;
+		padding: 32rpx 28rpx 150rpx 28rpx;
+
+		.card{
+			padding: 32rpx 24rpx;
+			background-color: #fff;
+			margin-bottom: 32rpx;
+			.item{
+				padding-bottom: 24rpx;
+				border-bottom: 2rpx solid #E5E5E5;
+				margin-bottom: 24rpx;
+				.lable{
+					font-weight: bold;
+					font-size: 28rpx;
+					color: #333333;
+					margin-bottom: 16rpx;
+					display: flex;
+					align-items: center;
+				}
+				.value{
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					input{
+						width: 150rpx;
+						text-align: center;
+					}
+					.selectGoods{
+						width: 100%;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						padding: 32rpx 16rpx;
+						background: #F9F9F9;
+						border-radius: 12rpx 12rpx 12rpx 12rpx;
+						.title{
+							font-weight: bold;
+							font-size: 28rpx;
+							color: #333333;
+							margin-bottom: 16rpx;
+						}
+						.goodsName{
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #999999;
+						}
+					}
+				}
+			}
+			.item:last-child{
+				border-bottom: none;
+				margin-bottom: 0;
+			}
+		}
+		.bottomPop{
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			height: 150rpx;
+			width: 100%;
+			background-color: #fff;
+			>button {
+				width: 530rpx;
+				margin: 30rpx 0;
+				margin-left: 50%;
+				transform: translateX(-50%);
+				height: 80rpx;
+				line-height: 80rpx;
+				color: #fff;
+				background: #318AFE;
+				border-radius: 56rpx 56rpx 56rpx 56rpx;
+			}
+		}
+	}
+</style>