Fix：5003 【商城小程序】体验券的选中状态与上方“已选清单”显示不一致

pkg_product/views/experienceCoupon.vue

@@ -23,6 +23,7 @@ export default {
       ],
       activeCategoryId: 'all',
       experienceList: [],
+      selectedProjectIds: [],
       userLatitude: null,
       userLongitude: null
     }
@@ -112,6 +113,7 @@ export default {
       const remain = coupon.remainNum != null ? coupon.remainNum : 0
       this.remainNum = remain
       this.initialUsedCount = Math.max(this.totalCount - remain, 0)
+      this.selectedProjectIds = []
       this.selectedCount = this.initialUsedCount
       this.startTime = coupon.startTime || ''
       this.endTime = coupon.endTime || ''
@@ -173,6 +175,7 @@ export default {
       }
       getExperienceCouponItems(params).then(({ data }) => {
         const list = data || []
+        const selectedSet = new Set(this.selectedProjectIds)
         this.experienceList = list.map(item => {
           const lat = Number(item.latitude || 0)
           const lon = Number(item.longitude || 0)
@@ -181,8 +184,10 @@ export default {
             distance = this.calculateDistance(this.userLatitude, this.userLongitude, lat, lon)
           }
 
+          const id = item.id != null ? item.id : (item.projectId != null ? item.projectId : item.merId)
+
           return {
-            id: item.id != null ? item.id : (item.projectId != null ? item.projectId : item.merId),
+            id,
             title: item.name || '',
             subTitle: item.projectName || item.intro || '',
             distance,
@@ -192,9 +197,10 @@ export default {
             tags: item.intro || '',
             categoryId: this.activeCategoryId === 'all' ? 'all' : this.activeCategoryId,
             image: item.image || item.cover || '',
-            selected: false
+            selected: selectedSet.has(id)
           }
         })
+        this.selectedCount = this.initialUsedCount + this.selectedProjectIds.length
       }).catch(() => {
         this.experienceList = []
       })
@@ -215,8 +221,15 @@ export default {
         return
       }
       item.selected = !item.selected
-      const currentSelected = this.experienceList.filter(it => it.selected).length
-      this.selectedCount = this.initialUsedCount + currentSelected
+      const id = item.id
+      if (item.selected) {
+        if (!this.selectedProjectIds.includes(id)) {
+          this.selectedProjectIds.push(id)
+        }
+      } else {
+        this.selectedProjectIds = this.selectedProjectIds.filter(pid => pid !== id)
+      }
+      this.selectedCount = this.initialUsedCount + this.selectedProjectIds.length
     },
     submitOrder() {
       if (!this.activeCouponId) {
@@ -226,15 +239,14 @@ export default {
         })
         return
       }
-      const selected = this.experienceList.filter(it => it.selected)
-      if (!selected.length) {
+      if (!this.selectedProjectIds.length) {
         uni.showToast({
           title: '请先选择体验项目',
           icon: 'none'
         })
         return
       }
-      const projectIds = selected.map(it => it.id)
+      const projectIds = this.selectedProjectIds.slice()
       const data = {
         couponId: this.activeCouponId,
         projectIds