完成智慧充值模块

pageRecharge/components/recharge-item.vue

@@ -1,79 +1,98 @@
 <template>
-	<view class=" item">
-		<view class="u-flex ">
-			<view class="color-333 u-flex font-bold ">
-				<view class="u-font-40">{{to2(props.data.price) }}</view>
+	<view class="item">
+		<view class="u-flex">
+			<view class="color-333 u-flex font-bold">
+				<view class="u-font-40">{{ to2(data.amount) }}</view>
 				<view>元</view>
 			</view>
-			<view class="u-font-24 u-m-l-20 color-999 id">
-				id:{{props.data.id}}
-			</view>
+			<view class="u-font-24 u-m-l-20 color-999 id">ID:{{ data.id }}</view>
 		</view>
-
-		<view class="u-m-t-32 u-p-22 desc">
+		<view class="u-m-t-32 u-p-22 desc" v-if="returnSendStr.length">
 			<text class="color-999">充值赠送</text>
-			<text class="u-m-l-16 color-333">{{props.data.desc}}</text>
+			<text class="u-m-l-16 color-333">
+				{{ returnSendStr.join('、') }}
+			</text>
 		</view>
 		<view class="u-flex u-row-right u-m-t-32 gap-20">
-			<view class="" style="width: 140rpx;">
+			<view class="" style="width: 140rpx">
 				<my-button plain height="56" type="cancel" shape="circle" @tap="del">删除</my-button>
 			</view>
-			<view class="" style="width: 140rpx;">
+			<view class="" style="width: 140rpx">
 				<my-button height="56" shape="circle" @tap="toEdit">编辑</my-button>
 			</view>
-
 		</view>
-
 	</view>
 </template>
 
 <script setup>
-	import go from '@/commons/utils/go.js';
-	import myButton from '@/components/my-components/my-button.vue'
-	const props = defineProps({
-		index:{
-			type:Number,
-			default:-1
-		},
-		data: {
-			type: Object,
-			default: () => {
-				return {}
-			}
+import { computed } from 'vue';
+import go from '@/commons/utils/go.js';
+import myButton from '@/components/my-components/my-button.vue';
+const props = defineProps({
+	index: {
+		type: Number,
+		default: -1
+	},
+	data: {
+		type: Object,
+		default: () => {
+			return {};
 		}
-	})
-	const emits=defineEmits(['del'])
-	function del(){
-		emits('del',{
-			index:props.index,
-			data:props.data
-		})
 	}
-	function toEdit(){
-		go.to('PAGES_RECHARGE_ADD_RECHARGE',{...props.data})
+});
+const emits = defineEmits(['del']);
+function del() {
+	emits('del', {
+		index: props.index,
+		data: props.data
+	});
+}
+function toEdit() {
+	uni.setStorageSync('rechargeCouponInfoListDetail', props.data);
+	go.to('PAGES_RECHARGE_ADD_RECHARGE');
+}
+function to2(n) {
+	return Number(n).toFixed(2);
+}
+
+// 返回赠送优惠券总数
+function returnCouponCount() {
+	let num = 0;
+	props.data.couponInfoList.map((item) => {
+		num += item.num;
+	});
+	return num;
+}
+
+const returnSendStr = computed(() => {
+	let arr = [];
+	if (props.data.rewardAmount > 0) {
+		arr.push(`${props.data.rewardAmount}元`);
 	}
-	function to2(n) {
-		return Number(n).toFixed(2)
+	if (props.data.couponInfoList.length > 0) {
+		arr.push(`${returnCouponCount()}张券`);
 	}
+	return arr;
+});
 </script>
 
 <style lang="scss" scoped>
-	.item {
-		padding: 32rpx 24rpx;
-		background: #FFFFFF;
-		border-radius: 18rpx 18rpx 18rpx 18rpx;
-		overflow: hidden;
+.item {
+	padding: 32rpx 24rpx;
+	background: #ffffff;
+	border-radius: 18rpx 18rpx 18rpx 18rpx;
+	overflow: hidden;
 
-		.desc {
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-			background-color: #F9F9F9;
-		}
-
-		.id {
-			background: #F7F7FA;
-			border-radius: 4rpx 4rpx 4rpx 4rpx;
-			padding: 4prx 10rpx;
-			overflow: hidden;
-		}
+	.desc {
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+		background-color: #f9f9f9;
 	}
-</style>
+
+	.id {
+		background: #f7f7fa;
+		border-radius: 4rpx 4rpx 4rpx 4rpx;
+		padding: 4prx 10rpx;
+		overflow: hidden;
+	}
+}
+</style>