cashier_app/pageCoupon/editCertificate.vue

<template>
	<view class="content">
		<view class="card">
			<view class="item">
				<view class="lable">商品兑换券名称</view>
				<view class="value"> 
					<up-input v-model="formData.title" placeholder="填写名称" border="none" clearable ></up-input>	
				</view>
			</view>
			<view class="item">
				<view class="lable">使用门槛</view>
				<view class="value"> 
					<view>满</view><input v-model="formData.fullAmount" type="number" placeholder="填写金额" border="none"></input><view>元，可用</view>
				</view>
			</view>
			<view class="item">
				<view class="lable">总发放数量</view>
				<view class="value"> 
					<up-input v-model="formData.number" type="number" 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" v-if='formData.products.length <= 0'>选择指定商品</view>
							<view class="goodsName" v-else>
								<view class="goodsItem" v-for="(item,index) in formData.products" :key="index">
									<view class="productName">{{item.name}}</view><up-input @tap.stop="stop" style="border-bottom: 1rpx solid #666;" v-model="item.num" placeholder="填写数量" border="none"  ></up-input>	
								</view>
							</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 go from '@/commons/utils/go.js'
	import myActionSheet from '@/components/my-components/my-action-sheet';
	import selectGoods from './components/select-goods';
	import { getTbShopCouponInfo, addTbShopCoupon } from '@/http/yskApi/coupon.js'
	import { reactive, ref } from 'vue';
	import { onLoad, onShow  } from '@dcloudio/uni-app';
	const pageData = reactive({
		id: null,
		goodsData: null,
		title: "",
		show: false,
	})
	let formData = reactive({
		title: "",
		type: '2',
		fullAmount: null,
		number: null,
		products: []
	})
	
	onLoad((options) => {
		if ( options.type == 'info' ) {
			pageData.id = options.id;
			getConponInfo();
		}
	})
	
	let goods = ref(null)
	let selectGoodsOpen = () => {
		goods.value.open();
	}
	
	let getConponInfo = () => {
		getTbShopCouponInfo(pageData.id).then((res) => {
			// formData = res;
			for (let item in res) {
			    formData[item] = res[item]
			}
			console.log(formData)
		})
	}
	
	let stop = () => { }
	
	let affirm = (item) => {
		pageData.goodsData = item;
		formData.products = [];
		formData.products.push({
			productId: item.id,
			name: item.name,
			num: null
		})
	}
	
	/**
	 * 保存
	 */
	let save = () => {
		let params = {
			...formData
		}
		addTbShopCoupon(params).then((res) => {
			go.back(1)
		})
	}
	
</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;
						}
						.goodsItem{
							display: flex;
							align-items: center;
							.productName{
								margin-right: 20rpx;
							}
						}
					}
				}
			}
			.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>