<template>
  <div class="settlement" :style="{ overflow: isShow ? 'hidden' : 'auto' }">
    <OrderStatus :status="1" v-if="isSubmit" :reservationDate="currentDate" />
    <div class="topBox">
      <!-- <div class="tabBox">
        <div
          @click="handleChangeTab(1)"
          :class="selectTab === 1 ? 'tabItem seleTabItem' : 'tabItem'"
        >
          配送
        </div>
        <div
          @click="handleChangeTab(2)"
          :class="selectTab === 2 ? 'tabItem seleTabItem' : 'tabItem'"
        >
          自提
        </div>
      </div> -->
      <div
        class="address"
        v-if="selectTab === 1"
        :class="isSubmit ? 'address_submit' : ''"
      >
        <div class="address_info">
          <div class="title">
            <div class="link_man">
              {{ addressInfo.USER_NAME || ""
              }}{{ addressInfo.USER_SEX_TEXT || "" }}
            </div>
            <div class="mobile">{{ addressInfo.MOBILEPHONE }}</div>
          </div>
          <div class="addressBox">
            <div
              @click="handleOpenAddress"
              style="display: flex; align-items: center"
            >
              <text class="addressText">选择地址</text>
              <img
                class="pickerImg"
                src="https://eshangtech.com/ShopICO/ahyd-mall/editIcon.svg"
              />
            </div>
            <div class="address_text">
              {{ addressInfo.ADDRESS || "" }}{{ addressInfo.DOORPLATE || "" }}
            </div>
          </div>
        </div>
        <img
          src="/static/images/home/addressShopCar.png"
          alt=""
          class="addrss_bg"
        />
      </div>

      <div class="selfPickup" v-if="selectTab === 2">
        <div class="pickupBox">
          <div class="label">预留电话</div>
          <Input
            class="value"
            v-model="phoneNumber"
            :maxlength="11"
            type="number"
          />
        </div>
      </div>
    </div>

    <div class="commodity margin_auto">
      <CommodityItem
        :isSubmit="isSubmit"
        :obj="item"
        v-for="(item, index) in shopOrder.slice(0, 5)"
        :key="index"
      />
      <div class="is_more" @click="isShowMore = !isShowMore">
        <img
          v-if="shopOrder.length > 5"
          :src="
            isShowMore
              ? '/static/images/home/up_arrow.png'
              : '/static/images/home/down_arrow.png'
          "
          alt=""
          class="arrow_icon"
        />
        共{{ shopOrder.length }}个品项，{{ shopCount }}件商品
      </div>
    </div>

    <!-- <div class="order_remark margin_auto payBox">
      <div class="label">支付方式</div>
      <div class="selectBox">
        <picker
          class="pickerBox"
          @change="handlePayTypeChange"
          :value="payType"
          :range="payTypeList"
          range-key="label"
        >
          <view class="picker"> {{ payTypeList[payType].label }} </view>
        </picker>
        <img class="rightIcon" src="/static/images/home/rightArrow.png" />
      </div>
    </div> -->

    <div class="order_remark margin_auto">
      <div class="title">订单备注</div>
      <div class="order_remark_input" v-if="!isSubmit">
        <textarea auto-height placeholder="选填" v-model="remark"></textarea>
      </div>
      <div class="order_remark_cnt" v-else>
        {{ remark }}
      </div>
    </div>

    <div class="order_remark margin_auto">
      <div class="title">营销工号</div>
      <div
        class="order_remark_input"
        style="min-height: 40rpx"
        v-if="!isSubmit"
      >
        <input placeholder="选填" v-model="recommendCode" type="number" />
      </div>
      <div class="order_remark_cnt" v-else>
        {{ recommendCode }}
      </div>
    </div>

    <OrderInfo :obj="orderInfo" v-if="isSubmit" />

    <div class="place_order">
      <div class="place_order_box" v-if="!isSubmit">
        <div class="sum_count">
          合计<span class="unit">￥</span
          ><span class="price">{{ couponOrder }}</span>
        </div>

        <div
          v-if="pageType === 'UnionMall' && payType === 1"
          class="place_order_btn"
          @click="handleCombinationPayment"
        >
          组合支付
        </div>

        <div
          v-if="
            (pageType === 'UnionMall' && payType === 0) ||
            pageType !== 'UnionMall'
          "
          class="place_order_btn"
          @click="createOrder"
        >
          立即下单
        </div>
      </div>
      <div class="back" v-else @click="handleBackIndex">返回购物车</div>
    </div>

    <div v-if="datePicker" class="dataTimeSelect">
      <date-time
        :show="datePicker"
        @change="handleTimeChange"
        :currentDate="currentDate"
      ></date-time>
    </div>
    <loading v-if="isShowLoading"></loading>
    <div v-if="isShowLoading" class="meng"></div>
    <div v-if="datePicker" @click="datePicker = !datePicker" class="meng"></div>

    <uni-popup ref="addressPopup" :safe-area="false">
      <view class="addressPopupBox">
        <view class="addressPopupTitle">选择收货地址</view>
        <view class="addressList">
          <view
            class="addressItem"
            v-for="(item, index) in addressList"
            :key="index"
          >
            <view class="addressItemTop">
              <view class="itemTopLeft">
                <radio
                  :checked="item.MEMBERADDRESS_ID === selectAddressId"
                  color="#1890FF"
                  @click="handleChangeAddress(item.MEMBERADDRESS_ID)"
                ></radio>
                <text class="addressText"
                  >{{ item.ADDRESS || "" }}{{ item.DOORPLATE || "" }}</text
                >
              </view>
              <view
                class="itemTopRight"
                @click="checkOrEdit(item.MEMBERADDRESS_ID)"
              >
                <img
                  class="pickerImg"
                  src="https://eshangtech.com/ShopICO/ahyd-mall/editIcon.svg"
                />
              </view>
            </view>

            <view class="addressItemBottom">
              <text class="bigName" style="margin-right: 8rpx">{{
                item.USER_NAME || ""
              }}</text>
              <text class="name" style="margin-right: 8rpx">{{
                item.USER_SEX_TEXT || ""
              }}</text>
              <text class="phone">{{ item.MOBILEPHONE || "" }}</text>
            </view>
          </view>
        </view>

        <navigator url="/pages/myAddress/newAdd/index" class="btn"
          >新增收货地址</navigator
        >
      </view>
    </uni-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import CommodityItem from "./components/commodityItem.vue";
import OrderInfo from "./components/orderInfo.vue";
import ReceiveGoods from "./components/receiveGoods.vue";
import OrderStatus from "./components/orderStatus.vue";
import Loading from "./components/loading/index.vue";
export default {
  components: {
    Loading,
    CommodityItem,
    OrderInfo,
    OrderStatus,
    ReceiveGoods,
  },
  data() {
    let newM = new Date().getTime();
    let startT = newM + 1000 * 60 * 15;
    return {
      isShowLoading: false,
      datePicker: false,
      isSubmit: false,
      orderInfo: {},
      isShowMore: true, // 是否展示更多菜品
      start: this.$utils.getLocalTime(startT, "hh:mm"),
      end: "23:59",
      time: this.$utils.getLocalTime(startT, "hh:mm"),
      startT: this.$utils.getLocalTime(new Date(), "hh:mm"),
      remark: "", // 备注
      shopName: "", // 站点名称
      isShow: false,
      shopOrder: [],
      address: "",
      currentDate: "",
      shopCount: 0, // 多少件商品
      addressList: [],
      addressInfo: {}, // 选择的地址信息
      selectAddressId: 0,
      isFirst: true, // 判断是不是第一次进入到页面
      pageType: "", // 判断是工会商城 还是 精选商城
      userInfo: {}, // 最新的用户信息
      selectTab: 1, // 1 是 配送  2 到店自取
      phoneNumber: "", // 当前用户的默认手机号
      isMakeOrdering: false,
      payType: 0, // 默认是立即下单
      payTypeList: [
        { label: "立即下单", value: 1 },
        { label: "组合支付", value: 2 },
      ],
      recommendCode: "", // 营销工号
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
      tableNum: "orderTable",
      orderRemark: "orderRemark",
      provinceCode: "provinceCode",
      couponPrice: "couponPrice",
      nowStore: "nowStore",
    }),
    couponOrder() {
      // 商品金额
      let amount = 0;
      this.shopOrder.map((v) => {
        amount += v.ORDER_AMOUNT;
      });
      return amount.toFixed(2);
    },
  },
  onShow() {
    this.phoneNumber = this.user.MEMBERSHIP_MOBILEPHONE;
    if (!this.isFirst) {
      // 更新用户的地址
      this.handleGetAddressList();
    }
  },
  onUnload() {},
  async onLoad(option) {
    console.log("option", option);
    if (option.rcmCode) {
      this.recommendCode = Number(option.rcmCode);
    }

    if (option.shopCarList) {
      let shopList = JSON.parse(option.shopCarList);
      console.log("shopList", shopList);
      let sum = 0;
      let newList = [];
      if (shopList && shopList.length > 0) {
        shopList.forEach((item) => {
          let obj = this.parseBracketString(item.COMMODITY_NAME);
          console.log("obj", obj);
          sum += item.count;
          newList.push({
            ...obj,
            ...item,
          });
        });
      }
      this.shopOrder = newList;
      console.log("this.shopOrder", this.shopOrder);
      this.shopCount = sum;
    }
    if (option.addressId) {
      this.selectAddressId = Number(option.addressId);
    }
    if (option.pageType) {
      this.pageType = option.pageType;
    }
    console.log("this.shopOrder", this.shopOrder);
    // 请求用户的地址
    await this.handleGetAddressList();
    console.log("1");

    this.isFirst = false;
  },
  methods: {
    // 选择支付方式的切换
    handlePayTypeChange(e) {
      console.log("e", e);
      this.payType = Number(e.detail.value);
    },
    // 组合支付
    handleCombinationPayment() {},
    // 切换tab
    handleChangeTab(value) {
      this.selectTab = value;
      this.$forceUpdate();
    },
    // 打开选择地址的悬浮框
    handleOpenAddress() {
      this.$refs.addressPopup.open("bottom");
    },
    parseBracketString(input) {
      const pattern = /【([^】]+)】/;
      const match = pattern.exec(input);
      if (!match) {
        // 如果没有找到【】，直接返回原始字符串
        return {
          bracketContent: "",
          restContent: input,
        };
      }
      // match[0] 是带【】的完整字符串，例如 "【凌云一楼自提】"
      // match[1] 是不带【】的字符串，例如 "凌云一楼自提"
      const bracketContent = match[0];
      // 剩余内容：将匹配到的带【】的部分删掉
      const restContent = input.replace(bracketContent, "");
      return {
        bracketContent,
        restContent,
      };
    },
    // 请求该用户的地址列表
    async handleGetAddressList() {
      const data = await this.$api.getCoop({ action_type: "GetAddressList" });
      console.log("data", data);
      let list = data.Data.List;
      let defaultAddress = {};
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (this.selectAddressId > 0) {
            if (item.MEMBERADDRESS_ID === this.selectAddressId) {
              defaultAddress = item;
            }
          } else {
            if (this.isFirst) {
              if (item.ISDEFAULT === 1) {
                defaultAddress = item;
              }
            } else {
              if (item.MEMBERADDRESS_ID === this.addressInfo.MEMBERADDRESS_ID) {
                defaultAddress = item;
              }
            }
          }
        });

        console.log("defaultAddress", defaultAddress);
        if (!defaultAddress.MEMBERADDRESS_ID) {
          defaultAddress = list[0];
        }
        this.addressList = list;
        this.addressInfo = defaultAddress;
        this.selectAddressId = defaultAddress.MEMBERADDRESS_ID;
        this.$forceUpdate();
      } else {
        this.addressList = [];
        this.addressInfo = {};
        this.selectAddressId = 0;
      }
    },
    // 切换选中的地址
    handleChangeAddress(id) {
      console.log("this.selectAddressId", this.selectAddressId);

      this.addressList.forEach((item) => {
        if (item.MEMBERADDRESS_ID === id) {
          this.addressInfo = item;
          this.selectAddressId = item.MEMBERADDRESS_ID;
        }
      });
      this.$forceUpdate();
      this.$refs.addressPopup.close();
    },
    // 编辑地址
    checkOrEdit(id) {
      uni.navigateTo({ url: "/pages/myAddress/newAdd/index?id=" + id });
    },
    // 验证手机号
    validatePhoneNumber(phoneNumber) {
      const phoneRegex = /^1[3-9]\d{9}$/; // 中国手机号码常见正则
      return phoneRegex.test(phoneNumber);
    },
    // 立即下单
    async createOrder() {
      if (this.selectTab === 1) {
        if (!this.addressInfo.MEMBERADDRESS_ID) {
          uni.showToast({
            title: "请选择收货地址！",
            duration: 2000,
            icon: "none",
          });
          return;
        }
      } else if (this.selectTab === 2) {
        if (!this.phoneNumber) {
          uni.showToast({
            title: "请输入手机号码！",
            duration: 2000,
            icon: "none",
          });
          return;
        } else if (!this.validatePhoneNumber(this.phoneNumber)) {
          uni.showToast({
            title: "输入手机号码错误！",
            duration: 2000,
            icon: "none",
          });
          return;
        }
      }

      if (this.isMakeOrdering) {
        uni.showToast({
          title: "请勿连续点击！",
          icon: "none",
        });
        return;
      }
      this.isMakeOrdering = true;

      console.log("_this.user", this.user);
      console.log("_this.shopOrder", this.shopOrder);
      if (this.shopOrder && this.shopOrder.length > 0) {
        this.shopOrder.forEach((item) => {
          if (item.SALEDETAIL_DESC) {
          } else {
            item.SALEDETAIL_DESC = "";
          }
        });
      }
      let openId = uni.getStorageSync("openId");
      console.log("openId", openId);

      console.log("this.user", this.user);

      let req = {
        action_type: "ScanOrder",
        salebillType: this.pageType === "UnionMall" ? "3001" : "3000",
        provinceCode: this.user.PROVINCE_CODE || "530000",
        serverpartShopId: "5634",
        takeType: this.selectTab === 1 ? 2000 : this.selectTab === 2 ? 1000 : 0, // 1000 自提   邮寄
        salebillDesc:
          (this.remark || "") + (this.selectTab === 1 ? "" : "(用户自提)"),
        wechatOpenId: openId || "",
        wechatUnionId: this.user.USER_UNIONID || "",
        recommendCode: this.recommendCode,
        // tableNumber: '',
        // takeType: '',
        // packType: '',
        // reservationDate: '',
        addressId:
          this.selectTab === 1 ? this.addressInfo.MEMBERADDRESS_ID : "",
        orderPersonTel:
          this.selectTab === 1
            ? this.addressInfo.MOBILEPHONE
            : this.phoneNumber,
        // couponCode: '',//优惠券
        t_saleorderdetail: JSON.stringify(this.shopOrder),
        requestType: "application/x-www-form-urlencoded",
      };
      console.log("req", req);

      const data = await this.$api.postCoop(req);
      console.log("data", data);

      if (data.ResultCode === "100") {
        let shopCarList = [];
        if (this.pageType === "UnionMall") {
          shopCarList = this.$store.state.unionMyShopCar;
        } else {
          shopCarList = this.$store.state.myShopCar;
        }
        if (shopCarList && shopCarList.length > 0) {
          let newList = [];
          shopCarList.forEach((item) => {
            let find = false;
            this.shopOrder.forEach((subItem) => {
              if (item.COMMODITY_ID === subItem.COMMODITY_ID) {
                find = true;
              }
            });
            if (find) {
            } else {
              newList.push(item);
            }
          });
          // list
          if (this.pageType === "UnionMall") {
            this.$store.commit("unionMyShopCar", newList);
          } else {
            this.$store.commit("myShopCar", newList);
          }
        } else {
          if (this.pageType === "UnionMall") {
            this.$store.commit("unionMyShopCar", []);
          } else {
            this.$store.commit("myShopCar", []);
          }
        }

        // 判断是工会商城下单 还是精选商城下单
        // 精选商城 调用微信支付  工会商城是调用余额支付
        if (this.pageType === "UnionMall") {
          this.handleBalancePayment(data.Data);
        } else {
          this.getOrderInfo(data.Data);
        }
      } else {
        // uni.showToast({
        //   title: data.ResultDesc,
        //   icon: "none",
        //   duration: 2000,
        // });
        uni.showModal({
          title: "提示",
          content: data.ResultDesc,
          success: function (res) {},
        });
        this.isMakeOrdering = false;
      }
    },
    // 余额支付
    async handleBalancePayment(obj) {
      let _this = this;
      console.log("this.user", this.user);
      console.log("obj", obj);

      // 获取最新的用户余额
      uni.showLoading({
        title: "获取用户余额...",
      });
      const userData = await this.$api.getCoop({
        action_type: "GetMembershipInfo",
        WechatUserId: this.user.WechatUserId,
      });
      this.userInfo = userData.Data;
      console.log("this.userInfo", this.userInfo);
      uni.hideLoading();

      // 判断余额是否不足
      let insufficientBalance = false;

      if (this.userInfo.ACCOUNT_BALANCE < Number(obj.PAY_AMOUNT)) {
        insufficientBalance = true;
        // uni.showToast({
        //   title: "余额不足！无法支付",
        //   icon: "none",
        // });
        // this.isMakeOrdering = false;
        // return;
      }

      const req = {
        action_type: "ECodeConsume",
        saleBill: obj.SALEBILL_ID,
        industryMembershipId: this.user.INDUSTRY_MEMBERSHIP_ID,
        requestType: "application/x-www-form-urlencoded",
        mixPay: insufficientBalance ? 1 : "", // 组合支付的时候传1
      };
      const data = await this.$api.postCoop(req);
      console.log("data", data);
      if (data.ResultCode === "100") {
        if (insufficientBalance) {
          uni.showModal({
            title: "提示",
            content: `当前积分${this.userInfo.ACCOUNT_BALANCE}，还需额外支付${data.ResultData}元`,
            success: function (res) {
              if (res.confirm) {
                uni.showLoading({
                  title: "进行组合支付...",
                });
                _this.getOrderInfo(obj, data.ResultData);
                uni.hideLoading();
              } else if (res.cancel) {
              }
            },
          });
        } else {
          this.isMakeOrdering = false;
          uni.showToast({
            title: "支付成功！",
            icon: "none",
          });
          setTimeout(() => {
            uni.redirectTo({
              url: `/pages/order/orderdetail/index?orderInternal=${obj.SALEBILL_ID}`,
            });
          }, 1500);
        }
      }
    },

    // 生成订单号
    generateOutTradeNo(length) {
      // 定义允许的字符集
      const characters =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_|*";

      // 生成随机字符串
      let orderNumber = "";
      for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        orderNumber += characters[randomIndex];
      }

      // 如果长度不在6到32之间，调整为合法的长度
      if (length < 6) {
        length = 6;
      } else if (length > 32) {
        length = 32;
      }

      return orderNumber.slice(0, length); // 返回生成的订单号
    },
    // 生成一个符合要求的商户订单号（长度为16的示例）
    // 获取后台信息调取微信支付
    async getOrderInfo(obj, payMoney) {
      // payMoney 工会商城订单 组合支付时可能会出现的值
      let _this = this;
      console.log("_this.couponOrder", _this.couponOrder);
      // 拿到签名
      let mchid = "1672298991";
      let timeStamp = Math.ceil(new Date().getTime() / 1000);
      let nonceStr = Math.random().toString(36).substring(2, 8);
      let serial_no = "5BA7C0F427FC042DB5BF299E35B373D5EFCECD35";
      // let out_trade_no = this.generateOutTradeNo(32)
      let out_trade_no = obj.SALEBILL_CODE;

      let req = {
        appid: "wxee018fb96955552a", // 公众账号ID
        mchid: "1672298991", // 商户号
        description: "彩云驿商城", //商品描述
        out_trade_no: out_trade_no, // 商户订单号
        notify_url:
          "https://mp.eshangtech.com/Coop.Merchant/Handler/Handler_Trade.ashx", // 商户回调地址
        amount: {
          total: payMoney ? payMoney * 100 : Number(obj.PAY_AMOUNT) * 100 || 1,
          currency: "CNY",
        }, // 订单金额
        payer: {
          openid: _this.user.WECHATAPP_OPENID,
        }, // 支付者信息
      };
      console.log("req", req);

      let reqSign = {
        parameters:
          "POST\n/v3/pay/transactions/jsapi\n" +
          timeStamp +
          "\n" +
          nonceStr +
          "\n" +
          JSON.stringify(req) +
          "\n",
        provinceCode: _this.provinceCode || "530000",
      };

      const data = await this.$api.$get("/WeChat/GenerateSign", reqSign);
      console.log("data3213123", data.Result_Data);
      let Authorization = `mchid="${mchid}",nonce_str="${nonceStr}",signature="${data.Result_Data}",timestamp="${timeStamp}",serial_no="${serial_no}"`;
      let AuthorizationStr = `WECHATPAY2-SHA256-RSA2048 ${Authorization}`;
      console.log("AuthorizationStr", AuthorizationStr);

      uni.request({
        url: "https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi", //仅为示例，并非真实接口地址。
        method: "POST",
        data: req,
        header: {
          Authorization: AuthorizationStr,
          Accept: "application/json", //自定义请求头信息
          "Content-Type": "application/json",
        },
        success: async (res) => {
          console.log(res.data.prepay_id);
          _this.text = "request success";
          let paySign = "";
          let reqSign = {
            parameters:
              "wxee018fb96955552a\n" +
              timeStamp +
              "\n" +
              nonceStr +
              "\nprepay_id=" +
              res.data.prepay_id +
              "\n",
          };
          const data = await _this.$api.$get("/WeChat/GenerateSign", reqSign);
          paySign = data.Result_Data;

          wx.requestPayment({
            timeStamp: timeStamp.toString(),
            nonceStr: nonceStr,
            package: `prepay_id=${res.data.prepay_id}`,
            signType: "RSA",
            paySign: paySign,
            total_fee: payMoney
              ? payMoney * 100
              : Number(obj.PAY_AMOUNT) * 100 || 1,
            success(res) {
              console.log("res", res);
            },
            fail(res) {
              console.log("fail", res);
            },
            complete(res) {
              _this.isMakeOrdering = false;
              uni.redirectTo({
                url: `/pages/order/orderdetail/index?orderInternal=${obj.SALEBILL_ID}`,
              });
            },
          });
        },
      });
      return;

      // let req = {
      //   action_type: "JsApiPay",
      //   action_data: 1,
      //   action_record: _this.user.WECHATAPP_OPENID,
      //   // action_record: 'ortWV5OP2g9P81cxxJYIIhrAezS4',
      //   TOTAL_FEE: _this.orderAmount,
      //   OFFPRICE: 0,
      //   payType: 2,
      //   SALEBILL_ID: _this.orderInternal,
      //   // SALEBILL_CODE: _this.orderNumber,
      //   SALEBILL_CODE: this.orderInfo.SALEBILL_CODE,
      //   requestType: "application/x-www-form-urlencoded",
      // };
      // console.log("getOrderInfo", req);
      return;
      _this.$api.postCoop(req).then((res) => {
        console.log("getOrderInfo", res);
        if (res) {
          uni.requestPayment({
            appId: "wxee018fb96955552a", // 公众号名称，由商户传入
            timeStamp: res.timeStamp + "", // 时间戳，自1970年以来的秒数
            nonceStr: res.nonceStr, // 随机串
            package: res.package,
            signType: res.signType, // 微信签名方式
            paySign: res.paySign, // 微信签名
            success(res) {
              if (res.errMsg === "requestPayment:ok") {
                _this.$api
                  .postCoop({
                    action_type: "EndPay",
                    action_data: _this.orderNumber,
                    action_record: 1,
                  })
                  .then((res) => {
                    _this.$store.commit("couponPrice", "");
                  });
              }
            },
            fail(res) {
              if (res.errMsg === "requestPayment:fail cancel") {
              }
            },
            complete(res) {},
          });
        } else {
          uni.showToast({
            title: "网络异常，请稍后再试",
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.meng {
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
}

.dataTimeSelect {
  width: 100%;
  height: 350px;
  position: fixed;
  bottom: 0px;
  z-index: 999;
  background: #fff;
  padding-bottom: 20px;

  .bottom {
    width: 100%;
    height: 40px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    border-bottom: 2px solid #ccc;

    .cancel {
      color: #ccc;
    }

    .success {
      color: green;
    }
  }
}

.settlement {
  background-color: #f2f4f5;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 196rpx;
  .topBox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24rpx;
    margin-bottom: 24rpx;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    margin-top: 24rpx;

    .tabBox {
      width: 100%;
      height: 108rpx;
      background-image: url("https://eshangtech.com/minTestImg/tabBg.png");
      background-repeat: no-repeat;
      border-radius: 32rpx 32rpx 0rpx 0rpx;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      .tabItem {
        width: 50%;
        height: 108rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .seleTabItem {
        background-image: url("https://eshangtech.com/minTestImg/leftTabSelect.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }

    .address {
      width: 100%;
      // width: 638rpx;
      border-radius: 0 0 16rpx 16rpx;
      display: flex;
      flex-direction: row;
      align-items: start;
      // margin: 24rpx auto;
      position: relative;
      z-index: 1;
      background: #fefffe;
      box-sizing: border-box;
      padding: 24rpx;

      .icon {
        width: 40rpx;
        height: 40rpx;
        background: #1890ff;
        border-radius: 4rpx;
        color: #fff;
        text-align: center;
        line-height: 40rpx;
      }

      .address_info {
        width: 582rpx;
        margin-left: 16rpx;

        .title {
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 34rpx;
          color: #020e1a;
          height: 40rpx;
          line-height: 40rpx;
          line-height: 48rpx;
          font-weight: 600;

          .link_man {
            margin-right: 16rpx;
          }
        }

        .addressBox {
          margin-top: 8px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .addressText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #020e1a;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
          }

          .pickerImg {
            width: 14px;
            height: 14px;
          }

          .address_text {
            font-size: 24rpx;
            font-weight: 400;
            color: #020e1a;
            line-height: 32rpx;
          }

          .pickerBox {
            display: flex;
            align-items: center;

            .pickerText {
              font-size: 12px;
              font-weight: 400;
              color: #1890ff;
            }

            .pickerImg {
              width: 14px;
              height: 14px;
            }
          }
        }
      }

      .addrss_bg {
        position: absolute;
        bottom: 0;
        left: 18rpx;
        width: 652rpx;
        height: 4rpx;
      }
    }

    .selfPickup {
      width: 100%;
      // width: 638rpx;
      border-radius: 0 0 16rpx 16rpx;
      display: flex;
      flex-direction: row;
      align-items: start;
      // margin: 24rpx auto;
      position: relative;
      z-index: 1;
      background: #fefffe;
      box-sizing: border-box;
      padding: 24rpx;
      .pickupBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .label {
          font-size: 28rpx;
          font-weight: 600;
        }
        .value {
          font-size: 28rpx;
          font-weight: 600;
          text-align: right;
        }
      }
    }
  }

  .address_submit {
    margin-top: -80rpx;
  }

  .serve_time {
    width: 638rpx;
    height: 48rpx;
    padding: 28rpx 24rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 24rpx auto;
    border-radius: 16rpx;

    .serve_title {
      font-size: 28rpx;
      color: #020e1a;
    }

    .time {
      font-size: 28rpx;
      color: #1890ff;
      display: flex;
      flex-direction: row;
      align-items: center;

      img {
        margin-left: 16rpx;
        width: 14px;
        height: 14px;
      }
    }
  }

  .commodity {
    width: 638rpx;
    padding: 24rpx 24rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;

    .store_name {
      color: #020e1a;
      font-size: 28rpx;
      margin-bottom: 24rpx;
      display: flex;
      justify-content: space-between;

      .link_service {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #1890ff;

        .service {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
        }
      }
    }

    .is_more {
      width: 400rpx;
      height: 40rpx;
      margin: auto;
      text-align: center;
      //display: flex;
      //flex-direction: row;
      //align-items: center;
      color: #9fa3a8;
      font-size: 28rpx;

      .arrow_icon {
        width: 26rpx;
        height: 16rpx;
        margin-left: 16rpx;
      }
    }
  }

  .order_remark {
    width: 638rpx;
    padding: 24rpx 24rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;

    .title {
      color: #020e1a;
      font-size: 28rpx;
      margin-bottom: 24rpx;
      font-weight: 600;
    }

    .order_remark_input {
      padding: 16rpx 24rpx;
      background: #f2f4f5;
      border-radius: 8rpx;
      min-height: 120rpx;
    }

    .order_remark_cnt {
      color: #6c737a;
      line-height: 40rpx;
      font-size: 28rpx;
    }
  }

  .place_order {
    position: fixed;
    z-index: 3;
    bottom: 0rpx;
    left: 0rpx;
    background: #ffffff;
    width: 100%;
    height: 164rpx;
    padding-top: 16rpx;

    .place_order_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .sum_count {
        margin-left: 32rpx;
        font-size: 28rpx;
        color: #6c737a;

        .unit {
          color: #ff6219;
          font-size: 24rpx;
        }

        .price {
          color: #ff6219;
          font-size: 36rpx;
        }
      }
    }

    .place_order_btn {
      width: 240rpx;
      height: 80rpx;
      background: #1890ff;
      border-radius: 8rpx;
      margin-right: 32rpx;
      color: #fff;
      text-align: center;
      line-height: 80rpx;
      font-size: 32rpx;
    }

    .back {
      margin: auto;
      width: 686rpx;
      height: 80rpx;
      border-radius: 8rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 32rpx;
      color: #fff;
      background: #1890ff;
    }

    .check {
      background: #1890ff;
      color: white;
    }
  }

  .addressPopupBox {
    width: 100%;
    height: 60vh;
    background-color: #fff;
    box-sizing: border-box;
    padding: 16rpx;

    .addressPopupTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #020e1a;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      display: block;
      text-align: center;
    }

    .addressList {
      margin-top: 24rpx;
      width: 100%;
      height: calc(60vh - 250rpx);
      overflow-y: auto;

      .addressItem {
        width: 100%;
        padding: 16rpx 0;
        box-sizing: border-box;
        border-bottom: 1px solid #f6f6f6;

        .addressItemTop {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .itemTopLeft {
            display: flex;
            align-items: center;

            .addressText {
              font-size: 28rpx;
              display: inline-block;
              width: 70vw;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }

          .itemTopRight {
            .pickerImg {
              width: 18px;
              height: 18px;
            }
          }
        }

        .addressItemBottom {
          width: 100%;
          margin-top: 8rpx;
          box-sizing: border-box;
          padding-left: 64rpx;
          color: #9fa3a8;
          font-size: 24rpx;
        }
      }
    }

    .addressList::-webkit-scrollbar {
      display: none;
    }

    .btn {
      height: 88rpx;
      width: 90%;
      line-height: 88rpx;
      background: linear-gradient(to right, #1f1f1f, #62605f);
      color: #f0dccf;
      text-align: center;
      font-size: 30rpx;
      position: fixed;
      bottom: 32rpx;
      transform: translateX(-50%);
      left: 50%;
      border-radius: 12rpx;
    }
  }
}

.margin_auto {
  margin: auto;
  background: #fefffe;
}

.payBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .label {
    font-size: 14px;
    font-weight: 600;
  }
  .selectBox {
    display: flex;
    align-items: center;
    .pickerBox {
      font-size: 28rpx;
      font-family: "PingFang SC";
      line-height: 34rpx;
      color: #9fa3a8;
    }
    .rightIcon {
      width: 18rpx;
      height: 18rpx;
      margin-left: 8rpx;
    }
  }
}

uni-modal .uni-modal__bd {
  white-space: pre-wrap;
}
</style>
