@alu008/test_yuanqikaixiang 1.0.0

package/subpackages/sendLogistics/sendLogistics.vue

@@ -0,0 +1,1097 @@
+<template>
+  <view class="sendLogisticsContent">
+    <view class="topBgc"></view>
+
+    <u-sticky bgColor="#fff">
+      <Header title="邮寄"></Header>
+      <view style="padding: 6px; display: flex; align-items: center">
+        <u-tabs
+          :list="tabsList"
+          :activeStyle="{
+            color: '#000000',
+            fontWeight: 'bold',
+            fontSize: '32rpx',
+          }"
+          :inactiveStyle="{
+            color: 'rgba(0, 0, 0, 0.5)',
+            fontWeight: 'bold',
+            fontSize: '28rpx',
+          }"
+          @change="changeStatus"
+          lineColor="linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);"
+          :current="current"
+        ></u-tabs>
+
+        <view @click="toMyAddress" class="addressManager">
+          <image
+            src="https://img.shinemang.com/static/img/addressIcon.png"
+            mode="scaleToFill"
+          />
+          <text>地址管理</text>
+        </view>
+      </view>
+    </u-sticky>
+
+    <!-- <scroll-view
+      style="height: calc(100vh - 68px);"
+      scroll-y="true"
+      :scroll-top="scrollTop"
+      refresher-enabled="true"
+      :refresher-triggered="triggered"
+      @scrolltolower="scrollToLower"
+      @refresherrefresh="refresherrefresh"
+    > -->
+    <view class="cardsList">
+      <view
+        @click="check(value, !value.isChecked)"
+        v-for="value in list"
+        :key="value.id"
+        class="item"
+      >
+        <view class="cardBg">
+          <view
+            :style="{
+              backgroundImage:
+                'url(' + formateUrl(value.item.itemCoverThumb) + ')',
+            }"
+            class="boxImg bgcCenter"
+          >
+            <view class="count">x{{ value.num }}</view>
+          </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" -->
+              <!-- @blur="countChangeBlur(value, $event.detail.value)" -->
+              <view class="amount"
+                ><input
+                  type="number"
+                  :disabled="value.item.option.length > 0"
+                  style="text-align: center; color: #fff; font-size: 32rpx"
+                  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 class="title over"> {{ value.item.itemName }} </view>
+      </view>
+
+      <view v-if="!isFirstLoading && list.length == 0" class="noData">
+        <image
+          src="https://img.shinemang.com/static/noData.png"
+          mode="scaleToFill"
+        />
+        <view>暂无可发货物品</view>
+      </view>
+    </view>
+
+    <view class="confirmBtn">
+      <view>
+        <view
+          >已选 <text style="color: #e73e3d">{{ chooseCount }}</text
+          >张</view
+        >
+        <view
+          @click="confirm"
+          :class="['btn', chooseCount > 0 ? 'active' : '']"
+          hover-class="hoverActive"
+          >邮寄</view
+        >
+      </view>
+    </view>
+
+    <u-popup
+      @close="showSelectTypesPoupon = false"
+      :show="showSelectTypesPoupon"
+      mode="bottom"
+      :round="32"
+      :safeAreaInsetBottom="false"
+    >
+      <view
+        v-if="showSelectTypesPoupon && selectTypeValue"
+        @touchmove.stop.prevent
+        class="records"
+      >
+        <view class="title">
+          <view>选择类型</view>
+          <image
+            @click="showSelectTypesPoupon = false"
+            src="https://img.shinemang.com/static/img/closeIcon.png"
+            mode="scaleToFill"
+          />
+        </view>
+
+        <scroll-view class="details" scroll-y>
+          <view v-if="selectTypeList.length > 0" class="list">
+            <view v-for="value in selectTypeList" :key="value.id" class="item">
+              <!-- <view class="image">
+            <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 class="editCount">
+                  <view @click="exchangeReduce(value)" class="reduce">
+                    <image
+                      v-if="value.selectCount == 0 || 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 < selectTypeValue.stockId.length
+                      "
+                      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>
+            </view>
+          </view>
+        </scroll-view>
+
+        <view class="confirmBtn">
+          <view @click="confirmSelectTypes">确定</view>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+<script>
+import { fetchMyCardsList, fetchMyBackPack } from "@/utils/fetch";
+import {
+  formateServerUrl,
+  isPositiveInteger,
+  navigateTo,
+  reportMessage,
+  subBigNumer,
+} from "@/utils";
+import Header from "@/components/header/header.vue";
+export default {
+  data() {
+    return {
+      tabsList: [
+        {
+          name: "付邮申领",
+          status: "carriage_start",
+        },
+        {
+          name: "官方免邮",
+          status: "",
+        },
+      ],
+      scrollTop: 0,
+      triggered: false,
+      show: false,
+      cardDetail: null,
+      cardItem: "",
+      pageSize: -1,
+      pageNo: 1,
+      hasMore: false,
+      isFirstLoading: true,
+      list: [],
+      current: 0,
+      is_free_shipping: false, //true
+      showSelectTypesPoupon: false,
+      selectTypeList: [],
+      selectTypeValue: null,
+    };
+  },
+  components: { Header },
+  onLoad(option) {
+    if(option.current){
+      this.current = option.current
+    }
+  },
+
+  computed: {
+    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: {
+    exchangeCountChange(value, count, type) {
+      const index = this.selectTypeList.findIndex(
+        (item) => item.id === value.id,
+      );
+      let totalSelect = this.selectTypeList.reduce(
+        (total, item) =>
+          Number(total) +
+          (isPositiveInteger(item.selectCount) ? Number(item.selectCount) : 0),
+        0,
+      );
+
+      let otherSelect = this.selectTypeList.reduce(
+        (total, item) =>
+          Number(total) +
+          (item.id !== value.id && isPositiveInteger(item.selectCount)
+            ? Number(item.selectCount)
+            : 0),
+        0,
+      );
+      if (type) {
+        if (value.stock == 0) {
+          this.$nextTick(() => {
+            this.selectTypeList[index].selectCount = 0;
+          });
+          return;
+        }
+        if (!count || !isPositiveInteger(count)) {
+        } else {
+          if(value.stock == -1){
+           if (totalSelect > this.selectTypeValue.num) {
+                this.$nextTick(() => {
+                  this.selectTypeList[index].selectCount = Number(
+                    subBigNumer(
+                      this.selectTypeValue.num,
+                      otherSelect,
+                    ).toFixed(),
+                  );
+                });
+             }
+          }else{
+            if (totalSelect > this.selectTypeValue.num) {
+              if (
+                Number(subBigNumer(this.selectTypeValue.num, otherSelect).toFixed()) >value.stock
+              ) {
+                this.$nextTick(() => {
+                  this.selectTypeList[index].selectCount = Number(value.stock);
+                });
+              } else {
+                this.$nextTick(() => {
+                  this.selectTypeList[index].selectCount = Number(
+                    subBigNumer(
+                      this.selectTypeValue.num,
+                      otherSelect,
+                    ).toFixed(),
+                  );
+                });
+              }
+          }
+          }
+        }
+        return;
+      }
+      if (!count || !isPositiveInteger(count)) {
+        this.$nextTick(() => {
+          this.selectTypeList[index].selectCount = 0;
+        });
+      } else {
+
+         if(Number(count) < 0){
+          this.$nextTick(() => {
+              this.selectTypeList[index].selectCount = 0;
+            });
+         }else{
+           if(value.stock == -1){
+              if (totalSelect > this.selectTypeValue.num) {
+                this.$nextTick(() => {
+                  this.selectTypeList[index].selectCount = Number(
+                    subBigNumer(this.selectTypeValue.num, otherSelect).toFixed(),
+                  );
+                });
+              } else {
+                this.$nextTick(() => {
+                  this.selectTypeList[index].selectCount = Number(count);
+                });
+              }
+           }else{
+               if (totalSelect > this.selectTypeValue.num) {
+                  if(Number(subBigNumer(this.selectTypeValue.num, otherSelect).toFixed()) >value.stock){
+                    this.$nextTick(() => {
+                    this.selectTypeList[index].selectCount = Number(value.stock);
+                  });
+                }else{
+                  this.$nextTick(() => {
+                    this.selectTypeList[index].selectCount = Number(
+                      subBigNumer(this.selectTypeValue.num, otherSelect).toFixed(),
+                    );
+                  });
+                }
+            
+              }else{
+                this.$nextTick(() => {
+                  this.selectTypeList[index].selectCount = Number(count);
+                });
+              }
+           }
+         }
+       
+      }
+    },
+    //点击选中的确认
+    confirmSelectTypes() {
+      this.selectTypeValue.item.option = this.selectTypeList;
+      const index = this.list.findIndex(
+        (item) => item.item.itemId === this.selectTypeValue.item.itemId,
+      );
+
+     
+      const totalSelect = this.selectTypeList.reduce(
+        (total, item) =>
+          Number(total) +
+          (isPositiveInteger(item.selectCount) ? Number(item.selectCount) : 0),
+        0,
+      );
+      if (totalSelect > 0) {
+        this.list[index].isChecked = true;
+        this.list[index].selectCount = totalSelect;
+         this.list[index].item.option = this.selectTypeList;
+      }
+
+      this.showSelectTypesPoupon = false;
+    },
+    // 点击加
+    exchangeAdd(value) {
+      const index = this.selectTypeList.findIndex(
+        (item) => item.id === value.id,
+      );
+      const totalSelect = this.selectTypeList.reduce(
+        (total, item) =>
+          Number(total) +
+          (isPositiveInteger(item.selectCount) ? Number(item.selectCount) : 0),
+        0,
+      );
+
+      if (totalSelect < Number(this.selectTypeValue.num)) {
+        if (
+          value.stock == -1 ||
+          (value.stock != -1 && value.selectCount < value.stock)
+        ) {
+          this.selectTypeList[index].selectCount++;
+        }
+      }
+    },
+    // 点击减
+    exchangeReduce(value) {
+      const index = this.selectTypeList.findIndex(
+        (item) => item.id === value.id,
+      );
+      if (this.selectTypeList[index].selectCount > 0) {
+        this.selectTypeList[index].selectCount--;
+      }
+    },
+    toMyAddress() {
+      reportMessage("集好运-邮寄界面-地址管理");
+      navigateTo("/subpackages/myAddress/myAddress");
+    },
+    changeStatus(e) {
+      this.current = e.index;
+      this.is_free_shipping = !Boolean(e.index);
+      this.getCardsList();
+    },
+    confirm() {
+      reportMessage("集好运-邮寄界面-确认邮寄");
+      if (this.chooseCount == 0) return;
+      const data = this.list.filter((item) => item.isChecked);
+      uni.setStorageSync("confirmSendLogistics", data);
+      // ${this.current}
+
+      this.list.forEach(
+        (item) => ((item.isChecked = false), (item.selectCount = 1)),
+      );
+      uni.navigateTo({
+        url: `/subpackages/confirmSendLogistics/confirmSendLogistics?current=${this.current == 0 ? 1 : 0}`,
+      });
+    },
+
+    // countChangeBlur(){
+    // },
+    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) {
+      if (isChecked && value.item.option.length > 0) {
+        let data = JSON.parse(JSON.stringify(value.item.option));
+
+        data.forEach((item) => {
+          item.selectCount =item.selectCount?item.selectCount: 0;
+        });
+        this.selectTypeValue = value;
+        this.selectTypeList = data;
+
+        this.showSelectTypesPoupon = true;
+        return;
+      }
+      const index = this.list.findIndex(
+        (item) => item.item.itemId === value.item.itemId,
+      );
+
+      this.list[index].isChecked = isChecked;
+    },
+    add(value) {
+      if(value.item.option.length > 0){
+        let data = JSON.parse(JSON.stringify(value.item.option));
+        data.forEach((item) => {
+          item.selectCount =item.selectCount?item.selectCount: 0;
+        });
+        this.selectTypeValue = value;
+        this.selectTypeList = data;
+        this.showSelectTypesPoupon = true;
+        return
+      }
+      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) {
+       if(value.item.option.length > 0){
+        let data = JSON.parse(JSON.stringify(value.item.option));
+        data.forEach((item) => {
+          item.selectCount =item.selectCount?item.selectCount: 0;
+        });
+        this.selectTypeValue = value;
+        this.selectTypeList = data;
+        this.showSelectTypesPoupon = true;
+        return
+      }
+      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);
+    },
+    toGachaDetail() {},
+    // 获取小卡详情
+    getGoodsDetail() {
+      // fetchCardDetail({
+      //   id: value.id,
+      // }).then((res) => {
+      //   this.cardDetail = res.data;
+      //   this.show = true;
+      // });
+    },
+    //  this.current == 0
+    //         ? "DeliveryType_Can_Free"
+    //         :
+    getCardsList() {
+      fetchMyBackPack({
+        page: this.pageNo,
+        page_size: 10000,
+        delivery_type:
+          this.current == 0
+            ? "DeliveryType_Can_Charge"
+            : "DeliveryType_Can_Free",
+        goods_state: "GoodsState_Spots",
+      }).then((res) => {
+        res.list.forEach((item) => {
+          item.isChecked = false;
+          item.selectCount = 1;
+        });
+        this.list = res.list;
+        this.isFirstLoading = false;
+      });
+    },
+    toDetail(value) {
+      // 顺便打开对应的那个
+      uni.navigateTo({
+        url: "/subpackages/gachaDetail/gachaDetail?series_id=" + value.seriesId,
+      });
+    },
+    toSend() {
+      uni.navigateTo({
+        url: "/subpackages/sendLogistics/sendLogistics",
+      });
+    },
+    refresherrefresh({ done }) {
+      console.log("refresherrefresh");
+      if (!this.triggered) {
+        this.triggered = true;
+        setTimeout(() => {
+          this.triggered = false;
+        }, 5000);
+      }
+    },
+    scrollToLower() {
+      console.log("scrollToLower");
+    },
+    toLogistics() {
+    },
+
+    onReachBottom() {},
+  },
+  onShow() {    this.getCardsList()},
+  onShareAppMessage() {},
+  onShareTimeline() {},
+};
+</script>
+
+<style lang="less" scoped>
+page {
+  // height: 100%;
+  background-color: #f6f6f6;
+  min-height: 100vh;
+  //  background: linear-gradient( 0deg, #FFE0B3 0%, #FFF7E7 100%) !important;
+}
+/deep/.u-tabs__wrapper__nav__line {
+  width: 30rpx;
+  height: 4rpx;
+  background: linear-gradient(90deg, #0bd690 0%, #00b0e0 100%);
+  border-radius: 338rpx 338rpx 338rpx 338rpx;
+}
+.sendLogisticsContent {
+  padding-bottom: 150rpx;
+  .addressManager {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 32rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+    image {
+      width: 40rpx;
+      height: 40rpx;
+      margin-right: 5rpx;
+    }
+  }
+  .topBgc {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: transparent;
+    width: 100%;
+    height: 420rpx;
+  }
+  .noData {
+    text-align: center;
+    margin-top: 166rpx;
+    color: #999999;
+    font-size: 28rpx;
+    width: 100%;
+    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;
+      color: #fff;
+      font-size: 32rpx;
+      margin: auto;
+      margin-top: 40rpx;
+    }
+  }
+
+  .cardsList {
+    padding: 0 32rpx;
+    // gap: 24rpx;
+    display: flex;
+    padding-top: 32rpx;
+    flex-wrap: wrap;
+    padding-bottom: 16rpx;
+    padding-right: 0;
+    .item {
+      width: 218rpx;
+      height: 278rpx;
+      position: relative;
+      background: #fff;
+      border-radius: 24rpx;
+      // border: 2rpx solid #E73E3D;
+      margin-bottom: 16rpx;
+      margin-right: 16rpx;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      .boxImg {
+        width: 214rpx;
+        height: 214rpx;
+        border-radius: 24rpx 24rpx 0rpx 0rpx;
+        position: relative;
+        background-color: transparent;
+      }
+      .cardBg {
+        // width: 213rpx;
+        // height: 281rpx;
+        // border-radius: 16rpx;
+        // position: relative;
+        .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.level {
+          width: 100%;
+          height: 100%;
+        }
+
+        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%;
+            background-color: rgba(0, 0, 0, 0.3);
+            overflow: hidden;
+            transform: translate(-50%, -50%);
+            border: 1px solid #fff;
+            border-radius: 8rpx;
+            > view {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 32rpx;
+              width: 48rpx;
+              height: 48rpx;
+              line-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;
+            }
+          }
+        }
+      }
+      .title {
+        font-size: 24rpx;
+        color: #000;
+        padding-left: 16rpx;
+        margin-top: 14rpx;
+      }
+      .time {
+        font-size: 20rpx;
+        color: #999999;
+        line-height: 36rpx;
+        text-align: center;
+      }
+    }
+  }
+  .confirmBtn {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 140rpx;
+    background: #ffffff;
+    padding-left: 32rpx;
+    padding-right: 32rpx;
+    z-index: 999;
+
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 16rpx;
+    font-size: 28rpx;
+
+    > view {
+      height: 80rpx;
+      display: flex;
+      line-height: 80rpx;
+      align-items: center;
+      justify-content: space-between;
+      > view {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .btn {
+      width: 280rpx;
+      height: 80rpx;
+      background: linear-gradient(90deg, #0bd690 0%, #00b0e0 100%);
+      border-radius: 40rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      font-size: 28rpx;
+      color: #fff;
+      opacity: 0.5;
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+}
+.noData {
+  text-align: center;
+  margin-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;
+    color: #fff;
+    font-size: 32rpx;
+    margin: auto;
+    margin-top: 40rpx;
+  }
+}
+.records {
+  background: #f6f6f6;
+  border-radius: 32rpx 32rpx 0 0;
+  height: 1296rpx;
+  position: relative;
+  > .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% - 264rpx);
+    .list {
+      .item {
+        width: 686rpx;
+        height: 200rpx;
+        margin-left: 32rpx;
+        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: 470rpx;
+          // margin-left: 24rpx;
+          // margin-right: 32rpx;
+          font-size: 24rpx;
+          color: #505050;
+          > .title {
+            // font-size: 28rpx;
+            font-weight: bold;
+            color: #000;
+            margin-bottom: 24rpx;
+          }
+          .msg {
+            // line-height: 36rpx;
+            // margin-top: 4rpx;
+            margin: 12rpx 0;
+            display: flex;
+            align-items: center;
+          }
+          // .amount {
+          // }
+        }
+      }
+    }
+  }
+  .confirmBtn {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 140rpx;
+    background: #ffffff;
+    padding-left: 32rpx;
+    z-index: 999;
+
+    // border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 16rpx;
+    > view {
+      width: 686rpx;
+      height: 80rpx;
+      background: linear-gradient(90deg, #0bd690 0%, #00b0e0 100%);
+      border-radius: 44rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32rpx;
+      color: #fff;
+      font-weight: 600;
+      view {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        line-height: 80rpx;
+      }
+    }
+  }
+}
+</style>