@alu008/test_yuanqikaixiang 1.0.0

package/subpackages/fragment/fragment.vue

@@ -0,0 +1,1592 @@
+<template>
+  <view class="fragmentContent">
+    <!-- <image class="bgc" src="https://img.shinemang.com/static/rednote/exchangeRed.png" mode="scaleToFill" /> -->
+    <u-sticky bgColor="#f6f6f6">
+      <headers :title="current == 1?'兑换':'分解'"></headers>
+      <view class="stickyHeader">
+        <u-tabs
+          :current="current"
+          :list="tabsList"
+          :activeStyle="{
+            color: '#000000',
+            fontWeight: 'bold',
+            fontSize: '32rpx',
+          }"
+          :inactiveStyle="{
+            color: '#505050',
+            fontWeight: 'bold',
+            fontSize: '28rpx',
+          }"
+          @change="changeStatus"
+          lineColor="linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);"
+        ></u-tabs>
+
+        <!-- <view class="rules"> 活动规则</view> -->
+      </view>
+
+      <!-- :current="current" -->
+    </u-sticky>
+  <!-- :style="{
+        height: `calc(100vh - ${statusBarHeight + 100}px)`,
+      }" -->
+    <view
+      v-if="current == 1"
+      class="exchange"
+    >
+      <view class="title">
+        <image src="https://img.shinemang.com/static/img/fuqi.png" mode="scaleToFill" />
+        我的好运值:
+        <text style="color: #EB6E2A">&nbsp;&nbsp;&nbsp;{{ myPoint }}</text>
+      </view>
+      <view v-if="composeList.length > 0 && !IsComposeLoading" class="list">
+        <view v-for="value in composeList" :key="value.id" class="item">
+          <view class="image">
+            <!-- <view></view> -->
+            <image :src="formateUrl(value.thumb)" mode="scaleToFill" />
+          </view>
+          <view class="content">
+            <view class="title over">{{ value.name }}</view>
+            <view class="msg over"
+              >兑换需要：
+              <text style="color: #EB6E2A">{{ value.point }} </text>好运值</view
+            >
+            <view class="amount"
+              >库存：{{ value.stock == -1 ? "不限" : value.stock }}</view
+            >
+          </view>
+
+          <view class="rightContent">
+            <view v-if="myPoint < value.point || value.item[0].item.itemType == 'ItemType_ThirdParty_Ticket'">
+              <image
+                src="https://img.shinemang.com/static/img/one.png"
+                mode="scaleToFill"
+                style="width: 48rpx; height: 48rpx; margin-bottom: 24rpx"
+              />
+            </view>
+            <view v-else class="editCount">
+              <view @click="exchangeReduce(value)" class="reduce">
+                <image
+                  v-if="value.selectCount == 1 || value.stock == 0"
+                  src="https://img.shinemang.com/static/img/exchangeReduce.png"
+                  mode="scaleToFill"
+                  style="width: 48rpx; height: 48rpx"
+                />
+                <image
+                  v-else
+                  src="https://img.shinemang.com/static/img/exchangeReduce1.png"
+                  mode="scaleToFill"
+                  style="width: 48rpx; height: 48rpx"
+                />
+              </view>
+              <view
+                ><input
+                  @input="
+                    exchangeCountChange(value, $event.detail.value, 'input')
+                  "
+                  @blur="exchangeCountChange(value, $event.detail.value)"
+                  type="number"
+                  v-model="value.selectCount"
+              /></view>
+
+              <view @click="exchangeAdd(value)" class="add">
+                <image
+                  v-if="
+                    (value.stock != -1 && value.selectCount < value.stock) ||
+                    value.selectCount < Math.floor(myPoint / value.point)
+                  "
+                  src="https://img.shinemang.com/static/img/exchangeAdd1.png"
+                  mode="scaleToFill"
+                  style="width: 48rpx; height: 48rpx"
+                />
+                <image
+                  v-else
+                  src="https://img.shinemang.com/static/img/exchangeAdd.png"
+                  mode="scaleToFill"
+                  style="width: 48rpx; height: 48rpx"
+                />
+              </view>
+            </view>
+
+            <view
+              @click="confirmExchange(value)"
+              :class="['btn', myPoint < value.point ? 'disabled' : '']"
+              >去兑换</view
+            >
+          </view>
+        </view>
+        
+      </view>
+
+      <view v-if="composeList.length == 0 && !IsComposeLoading" class="noData">
+        <image src="https://img.shinemang.com/static/noData.png" mode="scaleToFill" />
+        <view>敬请期待</view>
+      </view>
+    </view>
+
+     <!-- :style="{
+        height: `calc(100vh - ${statusBarHeight + 100}px)`,
+      }" -->
+    <view
+     
+      v-else
+      class="decompose"
+    >
+      <view v-if="list.length > 0 && !isFirstLoading">
+        <view class="list">
+          <view
+            @click="check(value, !value.isChecked)"
+            v-for="(value,index) in list"
+            :key="index"
+            class="item"
+          >
+            <view
+              :style="{
+                backgroundImage:
+                  'url(' + formateUrl(value.item.itemCoverThumb) + ')',
+              }"
+              class="boxImg bgcCenter"
+            >
+              <view class="count">x{{ value.num }}</view>
+            </view>
+
+            <view class="name over">{{ value.item.itemName }}</view>
+
+            <image
+              v-if="value.isChecked"
+              class="check"
+              src="https://img.shinemang.com/static/rednote/check.png"
+              mode="scaleToFill"
+            />
+            <image
+              v-else
+              class="check"
+              src="https://img.shinemang.com/static/rednote/notCheck.png"
+              mode="scaleToFill"
+            />
+            <view v-if="value.isChecked" class="chooseCount">
+              <view @click.stop class="actions">
+                <view @click="reduce(value)" class="reduce">
+                  <image
+                    v-if="value.selectCount == 1"
+                    style="width: 40rpx; height: 40rpx"
+                    src="https://img.shinemang.com/static/img/reduce.png"
+                    mode="scaleToFill"
+                  />
+                  <image
+                    v-else
+                    style="width: 40rpx; height: 40rpx"
+                    src="https://img.shinemang.com/static/img/reduce1.png"
+                    mode="scaleToFill"
+                  />
+                </view>
+                <!-- disabled -->
+                <!-- @input="1" -->
+                <view class="amount"
+                  ><input
+                    type="number"
+                    style="text-align: center; color: #fff; font-size: 24rpx"
+                    v-model="value.selectCount"
+                    @input="countChange(value, $event.detail.value, 'input')"
+                    @blur="countChange(value, $event.detail.value)"
+                /></view>
+                <view @click="add(value)" class="add">
+                  <image
+                    v-if="value.selectCount < value.num"
+                    style="width: 40rpx; height: 40rpx"
+                    src="https://img.shinemang.com/static/img/add1.png"
+                    mode="scaleToFill" />
+                  <image
+                    v-else
+                    style="width: 40rpx; height: 40rpx"
+                    src="https://img.shinemang.com/static/img/add.png"
+                    mode="scaleToFill"
+                /></view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view class="confirmBtn">
+          <view @click="cancelDecompose">取消</view>
+          <view @click="confirmDecompose" hover-class="hoverActive"
+            >分解({{ decomposeCount }})</view
+          >
+        </view>
+      </view>
+      <view v-if="list.length == 0 && !isFirstLoading" class="noData">
+        <image src="https://img.shinemang.com/static/noData.png" mode="scaleToFill" />
+        <view>暂无可分解物品</view>
+      </view>
+    </view>
+
+    <view class="fixedRight">
+      <view v-if="current == 1">
+        <view @click="getRecords(1)" class="rule">兑换记录</view>
+        <view @click="toArticel('system:PointExchange')" class="record"
+          >兑换规则</view
+        >
+      </view>
+      <view v-else>
+        <view @click="getRecords(0)" class="rule">分解记录</view>
+        <view @click="toArticel('backpack:Decompose')" class="record"
+          >分解规则</view
+        >
+      </view>
+    </view>
+
+    <view v-if="sureExchange"  @touchmove.stop.prevent  class="sureExchangeModal">
+      <view class="contentBox">
+        <view class="title"> {{ composeItem.name }}兑换</view>
+        <view style="text-align: center; padding: 0 32rpx" class="des"
+          >消耗{{
+            composeItem &&
+            getTimesBigNumer(composeItem.point, composeItem.selectCount)
+          }}好运值，兑换{{ composeItem && composeItem.selectCount }}张{{
+            composeItem && composeItem.name
+          }}
+        </view>
+        <view class="desTips">(温馨提示：确认兑换后无法取消)</view>
+
+        <view class="actionsBtn">
+          <view @click="sureExchange = false">取消</view>
+          <view @click="sureExchangeCards"> 确认兑换</view>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="sureDecompose"
+       @touchmove.stop.prevent 
+      class="sureExchangeModal sureDecomposeModal"
+    >
+      <view class="contentBox">
+        <view class="title">物品分解二次确认</view>
+        <view class="des"
+          >本次将分解{{ chooseCount }}个物品，共获得{{ decomposeCount }}好运值；
+        </view>
+        <view class="desBox">
+          <view
+            v-for="value in decompseList"
+            :key="value.item.itemId"
+            class="des"
+          >
+            已选择{{ value.selectCount }}张 {{ value.item.itemName }}，获得
+            {{
+              getTimesBigNumer(
+                value.selectCount,
+                value.item.goodsDecomposePoint,
+              )
+            }}好运值；
+          </view>
+        </view>
+        <view class="desTips"> 温馨提示：分解后将无法恢复，请谨慎操作~</view>
+        <view class="actionsBtn">
+          <view @click="sureDecompose = false">取消</view>
+          <view @click="sureDecomposeCards"> 确认分解</view>
+        </view>
+      </view>
+    </view>
+
+    <u-popup
+      @close="show = false"
+      :show="show"
+      mode="bottom"
+      :round="32"
+      :safeAreaInsetBottom="false"
+    >
+      <view v-if="show"  @touchmove.stop.prevent  class="records">
+        <view class="title">
+          <view>分解记录</view>
+          <image
+            @click="show = false"
+            src="https://img.shinemang.com/static/img/closeIcon.png"
+            mode="scaleToFill"
+          />
+        </view>
+
+        <scroll-view class="details" scroll-y>
+          <view class="list">
+            <view v-for="value in recordList" :key="value.id" class="item">
+              <view class="top">{{ value.createAt }}</view>
+              <view class="shops">
+                <view
+                  v-for="(item, index) in value.item"
+                  :key="index"
+                  class="shop"
+                >
+                  <view
+                    :style="{
+                      backgroundImage: 'url(' + formateUrl(item.goods.coverThumb) + ')',
+                    }"
+                    class="image bgcCenter"
+                  ></view>
+                  <view class="detail">
+                    <view class="title">
+                      <view>{{ item.goods.name }}</view>
+                      <view class="count">x{{ item.stockId.length }}</view>
+                    </view>
+                    <view class="des">
+                      获得好运值： &nbsp;&nbsp;{{
+                        getTimesBigNumer(
+                          item.stockId.length,
+                          item.goods.decomposePoint,
+                        )
+                      }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view v-if="recordList.length == 0">
+              <view class="noData">
+                <image src="https://img.shinemang.com/static/noData.png" mode="scaleToFill" />
+                <view>暂无记录</view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </u-popup>
+    <u-popup
+      @close="showExchangeRecord = false"
+      :show="showExchangeRecord"
+      mode="bottom"
+      :round="32"
+      :safeAreaInsetBottom="false"
+    >
+      <view v-if="showExchangeRecord"  @touchmove.stop.prevent  class="records">
+        <view class="title">
+          <view>兑换记录</view>
+          <image
+            @click="showExchangeRecord = false"
+            src="https://img.shinemang.com/static/img/closeIcon.png"
+            mode="scaleToFill"
+          />
+        </view>
+
+        <scroll-view class="details" scroll-y>
+          <view class="list">
+            <view v-for="value in recordList" :key="value.id" class="item">
+              <view class="top">{{ value.createdAt }}</view>
+              <view class="shops">
+                <view class="shop">
+                  <view
+                    :style="{
+                      backgroundImage: 'url(' + value.config.thumb + ')',
+                    }"
+                    class="image bgcCenter"
+                  ></view>
+                  <view class="detail">
+                    <view class="title">
+                      <view>{{ value.config.name }}</view>
+                      <view class="count">x{{ value.num }}</view>
+                    </view>
+                    <view class="des">
+                      消耗好运值： &nbsp;&nbsp;{{
+                        getTimesBigNumer(value.num, value.config.point)
+                      }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+              <view v-if="recordList.length == 0">
+              <view class="noData">
+                <image src="https://img.shinemang.com/static/noData.png" mode="scaleToFill" />
+                <view>暂无记录</view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </u-popup>
+    
+   <view @touchmove.stop.prevent v-if="showFillTicketInfo" class="surePayment">
+      <view class="contentBox">
+        <view class="title"> 兑换成功</view>
+        <view style="text-align: center; padding: 0 32rpx; display: flex;flex-direction: column;justify-content: center;align-items: center;" class="des"
+          ><text>您需要填写信息,请前往</text> <text style="color:#e73e3d">我的奖品-虚拟奖品-未领取-点击物品</text> <text>进行填写</text>
+        </view>
+
+        <view class="actionsBtn">
+          <view @click="showFillTicketInfo=false">取消</view>
+          <view @click="toFillTicketInfo"> 去填写</view>
+        </view>
+      </view>
+    </view>
+
+    <fillInfo :showTips="false"  :rewardDetail="composeItemDetail" :showExchangePeitunPoupon="showExchangePeitunPoupon" @closePoupon="closePoupon" @exchangePeitunPoupon="exchangePeitunPoupon"></fillInfo>
+  </view>
+</template>
+
+<script>
+import {
+  fetchDecomposed,
+  fetchBanlance,
+  fetchExchangeConfigList,
+  fetchExchange,
+  fetchExchangeRecordList,
+  fetchDecomposedRecord,
+  fetchMyBackPack,
+} from "@/utils/fetch";
+import {
+  formateServerUrl,
+  isPositiveInteger,
+  navigateTo,
+  reportMessage,
+  timesBigNumer,
+} from "@/utils";
+import { getDecomposedRecordUrl } from "@/utils/api";
+import headers from "@/components/header/header.vue";
+import fillInfo from "@/components/fillInfo/fillInfo.vue";
+export default {
+  data() {
+    return {
+      tabsList: [
+        {
+          name: "物品分解",
+          status: "OrderState_UnDeliver",
+        },
+        {
+          name: "物品兑换",
+          status: "OrderState_Nil",
+        },
+      ],
+      scrollTop: 0,
+      current: 0,
+      list: [],
+      composeList: [], // 合成
+      isFirstLoading: true,
+      IsComposeLoading: true,
+      sureDecompose: false,
+      sureExchange: false,
+      composeItem: '',
+      decompseList: [],
+      showExchangeRecord: false,
+      show: false,
+      myPoint: 0,
+      recordList: [],
+      pageNo: 1,
+      pageSize: 10,
+      hasMore: true,
+      statusBarHeight: 0,
+      showFillTicketInfo:false,
+      showExchangePeitunPoupon:false,
+      composeItemDetail:{}
+    };
+  },
+  components: {
+    headers,
+    fillInfo
+    // login,
+  },
+  onReady(options) {
+    console.log(options);
+  },
+  onLoad(options) {
+    this.current = Number(options.current) || 0;
+  },
+  computed: {
+    decomposeCount() {
+      const data = this.list.filter((item) => item.isChecked);
+      return data.reduce(
+        (total, item) =>
+          (timesBigNumer(total,1).plus((isPositiveInteger(item.selectCount)
+            ? timesBigNumer(
+                item.selectCount,
+                item.item.goodsDecomposePoint,
+              )
+            : 0))).toFixed(2)
+         ,
+        0,
+      );
+    },
+    chooseCount() {
+      const data = this.list.filter((item) => item.isChecked);
+      return data.reduce(
+        (total, item) =>
+          Number(total) +
+          (isPositiveInteger(item.selectCount) ? Number(item.selectCount) : 0),
+        0,
+      );
+    },
+  },
+  methods: {
+   exchangePeitunPoupon(data) {
+      fetchExchange({
+           config_id: this.composeItem.id,
+           num: this.composeItem.selectCount,
+           exchange_info:{
+            phone: data.phone.trim(),
+            real_name:data.realName,
+            id_card_no:data.cardNum.trim(),
+            id_card_type:data.cardType,
+            other:{
+              address:data.fromAddress,
+              sex:data.sex
+            }
+          }
+      }).then((res) => {
+         this.showExchangePeitunPoupon = false;
+          uni.showToast({
+          title: "兑换成功",
+          icon: "none",
+        });
+         uni.setStorageSync("phone", data.phone);
+          uni.setStorageSync("realName", data.realName);
+          uni.setStorageSync("fromAddress", data.fromAddress);
+        this.getBalance();
+        this.getExchangeConfigList();
+      });
+    },
+    closePoupon(state){
+      this.showExchangePeitunPoupon=false
+    },
+     toFillTicketInfo() {
+       this.showFillTicketInfo =false;
+       navigateTo("/subpackages/myCards/myCards?current=1");
+    },
+    // 获取我的背包可分解的
+    toArticel(key) {
+      navigateTo("/subpackages/article/article?key=" + key);
+    },
+    getCanDecomposedList() {
+      fetchMyBackPack({
+        page: 1,
+        page_size: 10000,
+        can_decomposed: true,
+      }).then((res) => {
+        res.list.forEach((item) => {
+          item.isChecked = false;
+          item.selectCount = item.stock == 0 ? 0 : 1;
+        });
+        this.list = res.list;
+        this.isFirstLoading = false;
+      });
+    },
+    // 获取记录
+
+    getRecords(type) {
+      // 分解
+      this.pageNo = 1;
+      if (type == 1) {
+        this.getExchangeRecord();
+      } else {
+        this.getDecomposedRecord();
+      }
+    },
+
+    getExchangeRecord() {
+      fetchExchangeRecordList({
+        page_size: 10000,
+        page: this.pageNo,
+      }).then((res) => {
+        this.recordList =
+          this.pageNo == 1 ? res.list : this.recordList.concat(res.list);
+        if (res.list && res.list.length < this.pageSize) {
+          this.hasMore = false;
+        } else {
+          this.hasMore = true;
+        }
+        this.showExchangeRecord = true;
+      });
+    },
+    getDecomposedRecord() {
+      fetchDecomposedRecord({
+        page_size: 10000,
+        page: this.pageNo,
+      }).then((res) => {
+        this.recordList =
+          this.pageNo == 1 ? res.list : this.recordList.concat(res.list);
+        if (res.list && res.list.length < this.pageSize) {
+          this.hasMore = false;
+        } else {
+          this.hasMore = true;
+        }
+        this.show = true;
+      });
+    },
+
+    // 确认兑换
+    exchange() {},
+    // 兑换输入框
+    exchangeCountChange(value, count, type) {
+      const index = this.composeList.findIndex((item) => item.id === value.id);
+      if (type) {
+        if (!count || !isPositiveInteger(count)) {
+        } else {
+          if (value.stock == -1) {
+            if (Number(count) >= Math.floor(this.myPoint / value.point)) {
+              this.$nextTick(() => {
+                this.composeList[index].selectCount = Math.floor(
+                  this.myPoint / value.point,
+                );
+              });
+            } else {
+              this.composeList[index].selectCount = Number(count);
+            }
+          } else {
+            if (Number(count) > Number(value.stock)) {
+              this.$nextTick(() => {
+                this.composeList[index].selectCount = Number(value.stock);
+              });
+            }else{
+               this.composeList[index].selectCount = Number(count);
+            }
+          }
+        }
+
+        return;
+      }
+
+      if (!count || !isPositiveInteger(count)) {
+        this.$nextTick(() => {
+          this.composeList[index].selectCount = 1;
+        });
+      } else {
+        if (value.stock != -1 && Number(count) > Number(value.stock)) {
+          this.$nextTick(() => {
+            this.composeList[index].selectCount = Number(value.stock);
+          });
+        } else if (Number(count) < 1) {
+          this.$nextTick(() => {
+            this.composeList[index].selectCount = 1;
+          });
+        } else {
+          this.$nextTick(() => {
+            this.composeList[index].selectCount = Number(count);
+          });
+        }
+      }
+    },
+    //  兑换的减
+    exchangeReduce(value) {
+      const index = this.composeList.findIndex((item) => item.id === value.id);
+      if (this.composeList[index].selectCount > 1) {
+        this.composeList[index].selectCount--;
+      }
+    },
+    // 兑换的加
+    exchangeAdd(value) {
+      const index = this.composeList.findIndex((item) => item.id === value.id);
+      console.log(value.stock, index);
+      if (value.stock == 0) return;
+      if (value.stock == -1) {
+        this.composeList[index].selectCount++;
+        if (
+          this.composeList[index].selectCount >=
+          Math.floor(this.myPoint / value.point)
+        ) {
+          this.composeList[index].selectCount = Math.floor(
+            this.myPoint / value.point,
+          );
+        }
+      } else {
+        if (
+          this.composeList[index].selectCount <
+          Number(this.composeList[index].stock)
+        ) {
+          this.composeList[index].selectCount++;
+        } else {
+          this.composeList[index].selectCount = stock;
+        }
+      }
+      console.log(this.composeList);
+    },
+    // 获取兑换配置
+    getExchangeConfigList() {
+      fetchExchangeConfigList({
+        page_size: 10000,
+        page: 1,
+        point_type: "BalanceType_Point",
+      }).then((res) => {
+        res.list.forEach((item) => {
+          item.selectCount = 1;
+        });
+        this.composeList = res.list;
+        this.IsComposeLoading = false;
+      });
+    },
+    // 获取我的好运值
+    getBalance() {
+      fetchBanlance({
+        //好运值              现金                       积分
+        type: ["BalanceType_Point"],
+      }).then((res) => {
+        console.log(res);
+        this.myPoint = res.dict["2"];
+        // this.myBalance = res.dict;
+      });
+    },
+    getTimesBigNumer(value1, value2) {
+      return timesBigNumer(value1, value2).toNumber();
+    },
+
+    mergeByLevel(list) {
+      const merged = Object.values(
+        list.reduce((acc, item) => {
+          if (!acc[item.level]) {
+            acc[item.level] = { level: item.level, selectCount: 0 };
+          }
+          acc[item.level].selectCount += item.selectCount;
+          return acc;
+        }, {}),
+      );
+
+      // 按 level 升序排序
+      return merged.sort((a, b) => a.level - b.level);
+    },
+    // 确认兑换
+    confirmExchange(value) {
+      reportMessage("集好运-点击兑换界面-去兑换");
+      if (value.stock == 0) {
+        uni.showToast({
+          title: "库存不足",
+          icon: "none",
+        });
+        return;
+      }
+      if (
+        this.myPoint < timesBigNumer(value.point, value.selectCount).toNumber()
+      ) {
+        uni.showToast({
+          title: "好运值不足",
+          icon: "none",
+        });
+        return;
+      }
+      this.composeItem = value;
+      this.composeItemDetail = value.item[0];
+      this.sureExchange = true;
+    },
+    // 确认兑换
+    sureExchangeCards() {
+       reportMessage("集好运-点击兑换界面-确认兑换");
+      this.sureExchange = false;
+      if(this.composeItem.item[0].item.itemType == 'ItemType_ThirdParty_Ticket'){
+         this.showExchangePeitunPoupon = true;
+         return;
+      }
+      fetchExchange({
+        config_id: this.composeItem.id,
+        num: this.composeItem.selectCount,
+      }).then((res) => {
+          uni.showToast({
+          title: "兑换成功",
+          icon: "none",
+        });
+
+        this.getBalance();
+        this.getExchangeConfigList();
+      });
+    },
+
+    // 确认分解
+    sureDecomposeCards() {
+       reportMessage("集好运-点击分解界面-分解");
+      this.sureDecompose = false;
+      let data = {};
+      this.decompseList.forEach((item) => {
+        data[item.item.itemId] = item.selectCount;
+      });
+      console.log(data);
+      fetchDecomposed({
+        dict: data,
+      }).then((res) => {
+        uni.showToast({
+          title: "分解成功",
+          icon: "none",
+        });
+        this.getCanDecomposedList();
+        this.getBalance();
+      });
+    },
+    //分解
+    confirmDecompose() {
+       reportMessage("集好运-点击分解界面-确认分解");
+      if (this.chooseCount == 0) {
+        uni.showToast({
+          title: "请选择要分解的物品",
+          icon: "none",
+        });
+        return;
+      }
+
+      this.sureDecompose = true;
+      // 选中的卡片和数量
+      const data = this.list.filter((item) => item.isChecked);
+
+      console.log(data);
+      this.decompseList = data;
+
+      // const merged = this.mergeByLevel(data);
+      // console.log(merged);
+    },
+    //取消
+    cancelDecompose() {
+      this.list.forEach((item) => {
+        item.isChecked = false;
+        item.selectCount = 1;
+      });
+    },
+    countChange(value, count, type) {
+      const index = this.list.findIndex(
+        (item) => item.item.itemId === value.item.itemId,
+      );
+
+      if (type) {
+        if (!count || !isPositiveInteger(count)) {
+        } else {
+          if (Number(count) > Number(value.num)) {
+            this.$nextTick(() => {
+              this.list[index].selectCount = Number(value.num);
+            });
+          }
+        }
+
+        return;
+      }
+
+      if (!count || !isPositiveInteger(count)) {
+        this.$nextTick(() => {
+          this.list[index].selectCount = 1;
+        });
+      } else {
+        if (Number(count) > Number(value.num)) {
+          this.$nextTick(() => {
+            this.list[index].selectCount = Number(value.num);
+          });
+        } else if (Number(count) < 1) {
+          this.$nextTick(() => {
+            this.list[index].selectCount = 1;
+          });
+        } else {
+          this.$nextTick(() => {
+            this.list[index].selectCount = Number(count);
+          });
+        }
+      }
+    },
+    check(value, isChecked) {
+      console.log(value, isChecked);
+      const index = this.list.findIndex(
+        (item) => item.item.itemId === value.item.itemId,
+      );
+
+      this.list[index].isChecked = isChecked;
+    },
+    add(value) {
+      const index = this.list.findIndex(
+        (item) => item.item.itemId === value.item.itemId,
+      );
+
+      if (this.list[index].selectCount < Number(this.list[index].num)) {
+        this.list[index].selectCount++;
+      }
+    },
+    reduce(value) {
+      const index = this.list.findIndex(
+        (item) => item.item.itemId === value.item.itemId,
+      );
+
+      if (this.list[index].selectCount > 1) {
+        this.list[index].selectCount--;
+      }
+    },
+
+    formateUrl(url) {
+      return formateServerUrl(url);
+    },
+
+    changeStatus(e) {
+      this.current = e.index;
+      
+      if (this.current == 0) {
+         this.isFirstLoading = true;
+        this.getCanDecomposedList();
+      } else {
+        this.IsComposeLoading = true;
+        this.getExchangeConfigList();
+      }
+    },
+  },
+
+  onShow(e) {
+    const systemInfo = uni.getSystemInfoSync();
+    const safeTop = uni.getStorageSync("safeTop");
+    this.statusBarHeight = safeTop
+    this.getBalance();
+    this.getExchangeConfigList();
+    this.getCanDecomposedList();
+  },
+
+  onShareAppMessage() {},
+  onShareTimeline() {},
+};
+</script>
+
+<style lang="less" scoped>
+page {
+  // height: 100%;
+    min-height: 100vh;
+  background-color: #f6f6f6 !important;
+}
+.fragmentContent {
+  height: 100%;
+  background-position: top center !important;
+  > .bgc {
+    width: 750rpx;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 496rpx;
+    @media (min-width: 500px) {
+    max-width: 375px !important;
+  }
+
+  }
+  .stickyHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 32rpx;
+    padding: 6px;
+
+    // .rules {
+    //   width: 136rpx;
+    //   height: 44rpx;
+    //   border-radius: 152rpx 152rpx 152rpx 152rpx;
+    //   border: 1px solid #666666;
+    //   color: #666666;
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    // }
+    // /deep/ .u-tabs {
+    //   width: 60%;
+    // }
+  }
+
+  .exchange {
+    // background: #f6f6f6;
+    padding: 0 32rpx;
+    padding-bottom: 12rpx;
+    z-index: 99;
+    position: relative;
+    z-index: 33;
+
+    // height: calc(100% - 56px);
+    overflow-y: auto;
+    // position: absolute;
+
+    width: 100%;
+
+    > .title {
+      padding: 26rpx 0;
+      display: flex;
+      font-size: 28rpx;
+      color: #505050;
+      // justify-content: center;
+      align-items: center;
+      image {
+        width: 48rpx;
+        height: 48rpx;
+        margin-right: 12rpx;
+      }
+    }
+    .list {
+      .item {
+        width: 686rpx;
+        height: 200rpx;
+        background: #fff;
+        border-radius: 24rpx 24rpx 24rpx 24rpx;
+        // border: 2rpx solid #e73e3d;
+        display: flex;
+
+        align-items: center;
+        padding: 40rpx 24rpx;
+        border-radius: 16rpx;
+        // grid-template-columns: 114rpx 350rpx 152rpx;
+        margin-bottom: 24rpx;
+
+        .image {
+          width: 120rpx;
+          height: 120rpx;
+          // margin-right: 20rpx;
+          border-radius: 16rpx;
+          position: relative;
+          view {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 16rpx;
+            background: rgba(0, 0, 0, 0.32);
+            background-color: rgba(216, 216, 216, 0.6);
+            backdrop-filter: blur(6rpx);
+            z-index: 99;
+          }
+          image {
+            width: 114rpx;
+            height: 114rpx;
+            border-radius: 16rpx;
+          }
+        }
+
+        .btn {
+          width: 144rpx;
+          height: 60rpx;
+          background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+          border-radius: 30rpx 30rpx 30rpx 30rpx;
+          color: #fff;
+          display: flex;
+          font-size: 24rpx;
+          font-weight: bold;
+          align-items: center;
+          justify-content: center;
+          line-height: 60rpx;
+          &.disabled {
+            opacity: 0.5;
+          }
+        }
+        .rightContent {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          align-items: flex-end;
+          justify-content: flex-end;
+          .editCount {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 28rpx;
+            view {
+              background-color: #f4f6f8;
+              width: 48rpx;
+              height: 48rpx;
+            }
+            input {
+              width: 48rpx;
+              height: 48rpx;
+
+              margin: 0 2rpx;
+              font-size: 24rpx;
+              text-align: center;
+            }
+          }
+        }
+        .content {
+          width: 300rpx;
+          margin-left: 24rpx;
+          // margin-right: 32rpx;
+          font-size: 24rpx;
+          color: #505050;
+          > .title {
+            // font-size: 28rpx;
+            font-weight: bold;
+            color: #000;
+          }
+          .msg {
+            // line-height: 36rpx;
+            // margin-top: 4rpx;
+            margin: 12rpx 0;
+            display: flex;
+            align-items: center;
+          }
+          .amount {
+          }
+        }
+      }
+    }
+  }
+  .decompose {
+    padding: 0 32rpx;
+    // position: absolute;
+    padding-right: 0;
+    padding-top: 10rpx;
+    padding-bottom: 150rpx;
+    z-index: 99;
+    // height: calc(100% - 56px);
+    overflow-y: auto;
+
+    left: 0;
+    width: 100%;
+
+    > view {
+      .title {
+        padding: 26rpx 0;
+        line-height: 40rpx;
+        padding-right: 32rpx;
+      }
+    }
+
+    .list {
+      display: flex;
+      // gap: 24rpx;
+      flex-wrap: wrap;
+      .item {
+        width: 218rpx;
+        height: 278rpx;
+        position: relative;
+        background: #ffffff;
+        border-radius: 24rpx;
+        // border: 2rpx solid #e73e3d;
+        margin-bottom: 16rpx;
+        margin-right: 16rpx;
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+        .name {
+          font-size: 24rpx;
+          color: #000;
+          padding-left: 16rpx;
+          margin-top: 14rpx;
+        }
+        .boxImg {
+          width: 214rpx;
+          height: 214rpx;
+          border-radius: 24rpx 24rpx 0rpx 0rpx;
+          position: relative;
+        }
+        .level {
+          width: 213rpx;
+          height: 281rpx;
+          border-radius: 16rpx;
+          border-radius: 24rpx 24rpx 0rpx 0rpx;
+        }
+        .count {
+          position: absolute;
+          right: 8rpx;
+          bottom: 8rpx;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 16rpx;
+          // padding: 0 14rpx;
+          width: 48rpx;
+          height: 32rpx;
+          color: #fff;
+          font-size: 24rpx;
+          line-height: 32rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        image.check {
+          position: absolute;
+          top: 8rpx;
+          left: 8rpx;
+          width: 40rpx;
+          height: 40rpx;
+          z-index: 88;
+        }
+        .chooseCount {
+          z-index: 85;
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 16rpx;
+          top: 0;
+          left: 0;
+
+          .actions {
+            display: flex;
+            align-items: center;
+            width: 146rpx;
+            height: 48rpx;
+            position: absolute;
+            justify-content: center;
+            top: 50%;
+            left: 50%;
+            overflow: hidden;
+            transform: translate(-50%, -50%);
+            background-color: rgba(0, 0, 0, 0.3);
+            border: 1px solid #fff;
+            border-radius: 8rpx;
+            > view {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 32rpx;
+              width: 48rpx;
+              height: 48rpx;
+              // border-top: 1px solid #fff;
+              // border-bottom: 1px solid #fff;
+              // border-left: 1px solid #fff;
+              // border-right: 1px solid #fff;
+              // box-sizing: border-box;
+            }
+            .reduce {
+              font-size: 50rpx;
+              color: #fff;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-right: 0;
+              // border-radius: 12rpx 0 0 12rpx;
+              line-height: 48rpx;
+              border-right: 1px solid #fff;
+              view {
+                width: 20rpx;
+                height: 4rpx;
+                background: #b6b6b6;
+              }
+            }
+            .add {
+              // font-size: 43rpx;
+              // color: #b6b6b6;
+              line-height: 48rpx;
+              border-left: 1px solid #fff;
+              // border-radius: 0 12rpx 12rpx 0;
+            }
+          }
+        }
+      }
+    }
+  }
+  .confirmBtn {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 140rpx;
+    background: transparent;
+    padding-left: 32rpx;
+    padding-right: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    background-color: #EDEDED;
+    // border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 16rpx;
+    z-index: 9999;
+    view {
+      width: 328rpx;
+      height: 80rpx;
+      border-radius: 40rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 28rpx;
+      line-height: 80rpx;
+      &:first-child {
+        color: #13B77F;
+        border: 2rpx solid #13B77F;
+        // background-color: #fff;
+      }
+      &:last-child {
+        color: #fff;
+
+        background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+      }
+    }
+  }
+
+  .sureExchangeModal {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .contentBox {
+      width: 654rpx;
+
+      background: #ffffff;
+      border-radius: 32rpx;
+      padding-top: 64rpx;
+      padding-bottom: 64rpx;
+      padding-left: 16rpx;
+      padding-right: 16rpx;
+
+      .title {
+        font-size: 36rpx;
+        margin-bottom: 64rpx;
+        font-weight: 600;
+        text-align: center;
+      }
+      > .des {
+        font-size: 28rpx;
+        margin-bottom: 32rpx;
+        text-align: center;
+      }
+      .desTips {
+        font-size: 24rpx;
+        color: #e73e3d;
+        text-align: center;
+        margin-top: 48rpx;
+      }
+
+      .actionsBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 32rpx;
+        // gap: 30rpx;
+
+        view {
+          width: 264rpx;
+          height: 80rpx;
+          border-radius: 40rpx;
+          font-size: 32rpx;
+          display: flex;
+          align-items: center;
+          line-height: 80rpx;
+          justify-content: center;
+          &:first-child {
+            background: #e9e9e9;
+            margin-right: 30rpx;
+          }
+
+          &:last-child {
+            background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  .sureDecomposeModal {
+    .contentBox {
+      .desBox {
+        max-height: 600rpx;
+        overflow-y: auto;
+        margin-left: 48rpx;
+        width: 558rpx;
+        // height: 168rpx;
+        padding: 32rpx 24rpx;
+        background: #f6f6f6;
+        border-radius: 16rpx;
+        color: #505050;
+        font-size: 28rpx;
+        .des {
+          text-align: left;
+          margin-bottom: 24rpx;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .noData {
+    text-align: center;
+    padding-top: 166rpx;
+    color: #999999;
+    font-size: 28rpx;
+    image {
+      width: 370rpx;
+      height: 368rpx;
+    }
+    view {
+      margin-top: -10rpx;
+    }
+
+    .toShop {
+      width: 322rpx;
+      height: 80rpx;
+      background: #7c66ff;
+      border-radius: 864rpx 864rpx 864rpx 864rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 80rpx;
+      color: #fff;
+      font-size: 32rpx;
+      margin: auto;
+      margin-top: 40rpx;
+    }
+  }
+}
+
+.records {
+  background: #f6f6f6;
+  border-radius: 32rpx 32rpx 0 0;
+  height: 1296rpx;
+  > .title {
+    width: 100%;
+    height: 100rpx;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: center;
+    border-radius: 32rpx 32rpx 0 0;
+    font-size: 36rpx;
+    font-weight: 600;
+
+    image {
+      width: 48rpx;
+      height: 48rpx;
+      position: absolute;
+      top: 26rpx;
+      left: 32rpx;
+    }
+  }
+  .details {
+    margin-top: 16rpx;
+    height: calc(100% - 116rpx);
+    .list {
+      .item {
+        padding: 0 32rpx;
+
+        width: 100%;
+        background-color: #fff;
+        margin-bottom: 16rpx;
+
+        .top {
+          height: 80rpx;
+          display: flex;
+          align-items: center;
+          // justify-content: center;
+          line-height: 78rpx;
+          color: #505050;
+          font-size: 24rpx;
+          border-bottom: 2rpx solid #f6f6f6;
+        }
+        .shops {
+          padding: 32rpx 0;
+          .shop {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            margin-bottom: 16rpx;
+            &:last-child {
+              margin-bottom: 0;
+            }
+            .image {
+              width: 128rpx;
+              height: 128rpx;
+              border-radius: 16rpx;
+              margin-right: 24rpx;
+            }
+
+            .detail {
+              width: 530rpx;
+              > .title {
+                font-size: 28rpx;
+                font-weight: bold;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .count {
+                  color: #505050;
+                  font-size: 24rpx;
+                  font-weight: normal;
+                }
+              }
+              .des {
+                color: #505050;
+                font-size: 24rpx;
+                margin-top: 16rpx;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.fixedRight {
+  position: fixed;
+  right: 0;
+  z-index: 888;
+  top: 50%;
+  transform: translateY(-50%);
+  > view {
+    > view {
+      width: 44rpx;
+      height: 128rpx;
+      background: rgba(0, 0, 0, 0.5);
+      box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(195, 102, 33, 0.5);
+      font-size: 20rpx;
+      color: #fff;
+      padding: 0 8rpx;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      border-radius: 16rpx 0 0 16rpx;
+
+      &:last-child {
+        margin-top: 20rpx;
+      }
+    }
+  }
+}
+.surePayment {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .contentBox {
+    width: 654rpx;
+
+    background: #ffffff;
+    border-radius: 32rpx;
+    padding-top: 64rpx;
+    padding-bottom: 64rpx;
+    padding-left: 16rpx;
+    padding-right: 16rpx;
+
+    .title {
+      font-size: 36rpx;
+      margin-bottom: 44rpx;
+      text-align: center;
+    }
+    > .des {
+      font-size: 28rpx;
+      margin-bottom: 62rpx;
+      text-align: center;
+    }
+    .desTips {
+      font-size: 24rpx;
+      color: #e73e3d;
+      text-align: center;
+      margin-top: 48rpx;
+    }
+
+    .actionsBtn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 32rpx;
+      // gap: 30rpx;
+
+      view {
+        width: 264rpx;
+        height: 80rpx;
+        border-radius: 40rpx;
+        font-size: 32rpx;
+        display: flex;
+        align-items: center;
+        line-height: 80rpx;
+        justify-content: center;
+        &:first-child {
+          background: #e9e9e9;
+          margin-right: 30rpx;
+        }
+
+        &:last-child {
+          background: linear-gradient(90deg, #0bd690 0%, #00b0e0 100%);
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>