wx-qhb/pageA/order.vue

<template>
  <view class="back">
    <!-- 地址 -->
    <view class="address" @click="toadd">
      <view class="u-flex u-row-between">
        <view class="add" v-if="addinfo">{{ addinfo.full_address }}</view>
        <view class="" v-else>{{ i18n.shippingaddress }}</view>
        <u-icon name="arrow-right" size="16"></u-icon>
      </view>
      <view class="info" v-if="addinfo">
        <text>{{ addinfo.name }}</text>
        <text style="margin-left: 20rpx">{{
          replacePhoneToStar(addinfo.mobile)
        }}</text>
      </view>
    </view>
    <!-- 商品 -->
    <view class="shop">
      <view class="" v-if="typea == 'shop'">
        <view
          class="u-flex"
          style="margin-top: 32rpx"
          v-for="(item, idx) in selelist"
          :key="idx"
        >
          <image
            :src="item.sku_item[0].image"
            style="width: 184rpx; height: 184rpx"
            mode=""
          ></image>
          <view
            class=" "
            style="
              margin-left: 20rpx;
              flex-direction: column;
              justify-content: space-between;
              height: 184rpx;
              display: flex;
              flex: 1;
            "
          >
            <view class="">
              <text class="toptitle" v-if="language == 'zh-CN'">{{
                item.name_cn
              }}</text>
              <text class="toptitle" v-if="language == 'en-US'">{{
                item.name_en
              }}</text>
              <text class="toptitle" v-if="language == 'es-ES'">{{
                item.name_es
              }}</text>
              <text class="toptitle" v-if="language == 'it-IT'">{{
                item.name_ita
              }}</text>
              <view class="weight">{{ item.sku_item[0].item }} </view>
            </view>
            <view class="u-flex u-row-between">
              <view class="">
                <text class="money">¥</text>
                <text class="money" style="font-size: 34rpx">{{
                  item.sku_item[0].discount_price
                }}</text>
              </view>
              <view class=""> x {{ item.cart.goods_num }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="" v-else>
        <view class="">
          <image
            :src="goodinfo.merchant.image"
            style="width: 38rpx; height: 38rpx"
            mode=""
          ></image>
          <text class="name">{{ goodinfo.merchant.merchant_name }}</text>
        </view>
        <view class="u-flex" style="margin-top: 32rpx">
          <image
            :src="sku_info.image"
            style="width: 184rpx; height: 184rpx"
            mode=""
          ></image>
          <view
            class=" "
            style="
              margin-left: 20rpx;
              flex-direction: column;
              justify-content: space-between;
              height: 184rpx;
              display: flex;
              flex: 1;
            "
          >
            <view class="">
              <text class="toptitle" v-if="language == 'zh-CN'">{{
                goodinfo.name_cn
              }}</text>
              <text class="toptitle" v-if="language == 'en-US'">{{
                goodinfo.name_en
              }}</text>
              <text class="toptitle" v-if="language == 'es-ES'">{{
                goodinfo.name_es
              }}</text>
              <text class="toptitle" v-if="language == 'it-IT'">{{
                goodinfo.name_ita
              }}</text>
              <view class="weight">{{ sku_info.item }} </view>
              <!-- <view class="">{{Number(sku_info.weight)*value}}kg</view> -->
            </view>
            <view class="u-flex u-row-between">
              <view class="">
                <text class="money">¥</text>
                <text class="money" style="font-size: 34rpx">{{
                  goodinfo.is_discount == 1
                    ? (Number(sku_info.price * 1000) * Number(value * 1000)) /
                      1000000
                    : (Number(sku_info.discount_price * 1000) *
                        Number(value) *
                        1000) /
                      1000000
                }}</text>
              </view>
              <!-- 							<u-number-box @change="valChange" v-model="value">
								<view slot="minus" class="">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<input slot="input" v-model="value" style="width: 40px; text-align: center"
									class="input" />
								<view slot="plus" class="">
									<u-icon name="plus" size="12"></u-icon>
								</view>
							</u-number-box> -->
              <view class="">x{{ value }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 物流 -->
    <view class="logistics u-flex u-row-between">
      <text style="font-weight: 600; width: 320rpx">{{ i18n.flow }}</text>
      <view class="u-flex" @click="changwu">
        <text class="change">{{
          containname1 ? type1 + " | " + containname1 : i18n.selection
        }}</text>
        <u-icon name="arrow-right" size="16"></u-icon>
      </view>
    </view>
    <!-- 推荐 -->
    <view class="recommend">
      <view class="top">
        <image
          v-if="language == 'zh-CN'"
          src="static/images/recommend.png"
          style="width: 124rpx; height: 30rpx"
          mode=""
        ></image>
        <image
          v-if="language == 'en-US'"
          src="static/images/recommend1.png"
          style="width: 378rpx; height: 30rpx"
          mode=""
        >
        </image>
        <image
          v-if="language == 'es-ES'"
          src="static/images/recommend2.png"
          style="width: 550rpx; height: 30rpx"
          mode=""
        >
        </image>
        <image
          v-if="language == 'it-IT'"
          src="static/images/recommend3.png"
          style="width: 460rpx; height: 30rpx"
          mode=""
        >
        </image>
      </view>
      <view class="bottom">
        <scroll-view
          scroll-x
          class="u-flex"
          style="column: gap 28rpx; display: flex"
        >
          <view class="u-flex" style="column-gap: 16rpx">
            <view
              class=""
              v-for="(item, idx) in swiptlist"
              :key="idx"
              @click="todetail(item.id)"
            >
              <image
                :src="item.image"
                style="width: 156rpx; height: 156rpx"
                mode=""
              >
              </image>
              <view class="title" v-if="language == 'zh-CN'">
                {{ item.name_cn }}
              </view>
              <view class="title" v-if="language == 'en-US'">
                {{ item.name_en }}
              </view>
              <view class="title" v-if="language == 'es-ES'">
                {{ item.name_es }}
              </view>
              <view class="title" v-if="language == 'it-IT'">
                {{ item.name_ita }}
              </view>
              <view class="money" style="color: #f83224; font-size: 20rpx">
                <text>¥</text>
                <text style="font-size: 28rpx">{{
                  item.is_discount == 0
                    ? item.discount_price.slice(0, -3)
                    : item.price.slice(0, -3)
                }}</text>
                <text>{{
                  item.is_discount == 0
                    ? item.discount_price.slice(-3)
                    : item.price.slice(-3)
                }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 商品相关 -->
    <view class="abount" style="margin-top: 20rpx">
      <view class="u-flex u-row-between" style="margin-bottom: 40rpx">
        <view class="name">{{ i18n.Commodityamount }}</view>
        <view class="" v-if="typea == 'shop'">{{ goodsPrice }}</view>
        <view class="money" v-else>
          ¥{{
            goodinfo.is_discount == 1
              ? (Number(sku_info.price * 100) * Number(value * 100)) / 10000
              : (Number(sku_info.discount_price * 100) * Number(value * 100)) /
                10000
          }}
        </view>
      </view>
      <view class="u-flex u-row-between" v-show="containname1">
        <view class="name">{{ i18n.Grosscommodityweight }}</view>
        <!-- 				<view class="money" v-if="typea=='shop'">{{
					goodsWeight
				}}kg</view> -->
        <!-- <view class="money" v-else>{{Number(sku_info.weight)*value}}kg</view> -->
        <view class="money">{{ weight_total }}</view>
      </view>
      <view class="back u-flex" v-if="containname1">
        <image
          src="static/images/warning.png"
          style="width: 32rpx; height: 32rpx"
          mode=""
        ></image>
        <text style="margin-left: 12rpx; font-size: 24rpx"
          >{{ i18n.buy }}{{ recommend_weight }}kg{{ i18n.price }}¥{{
            unit_fee
          }}，{{ i18n.morefavorable }}</text
        >
      </view>
      <view
        class="u-flex u-row-between"
        style="margin-bottom: 40rpx; margin-top: 20rpx"
      >
        <view class="name">{{ i18n.Costperkilogram }}</view>
        <view class="money">{{
          containname1 ? unit_price : i18n.shippingmethod
        }}</view>
      </view>
      <view class="u-flex u-row-between">
        <view class="name">{{ i18n.freight }}</view>
        <view class="money">{{
          containname1 ? sum : i18n.shippingmethod
        }}</view>
      </view>
      <view class="zong u-flex u-row-right">
        <view class="">
          <text class="small">{{ i18n.subtotal }}</text>
          <text class="mon">¥</text>
          <text class="mon" v-if="typea == 'shop'">{{ goodsPrice }}</text>
          <text class="mon" v-else style="font-size: 40rpx">{{
            goodinfo.is_discount == 1
              ? (Number(sku_info.price * 100) * Number(value * 100)) / 10000
              : (Number(sku_info.discount_price * 100) * Number(value * 100)) /
                10000
          }}</text>
        </view>
      </view>
    </view>
    <view class="" style="height: 166rpx"></view>
    <view class="btn u-flex u-row-right">
      <view class="u-flex">
        <!-- 				<text v-if="typea == 'shop'">{{i18n.Atotalof}}{{goodsWeight}}kg,</text>
				<text v-else class="kg">{{i18n.Atotalof}}{{Number(sku_info.weight) * value}}kg,</text> -->
        <text class="kg" v-show="containname1"
          >{{ i18n.Atotalof }}{{ weight_total }}kg,</text
        >
        <text>{{ i18n.total }}:</text>
        <text class="money" style="font-size: 28rpx">¥</text>
        <text style="font-weight: bold" class="money" v-if="typea == 'shop'">{{
          Number(sum * 10000 + Number(goodsPrice) * 10000) / 10000
        }}</text>
        <view class="" v-else>
          <text
            class="money"
            v-if="goodinfo.is_discount == 1"
            style="font-weight: bold"
            >{{
              Number(
                sum * 10000 + Number(sku_info.price) * Number(value) * 10000
              ) / 10000
            }}</text
          >
          <text
            class="money"
            v-if="goodinfo.is_discount == 0"
            style="font-weight: bold"
            >{{
              Number(
                sum * 10000 +
                  Number(sku_info.discount_price) * Number(value) * 10000
              ) / 10000
            }}</text
          >
        </view>
      </view>
      <view class="order" @click="topay">
        {{ i18n.Submitorder }}
      </view>
    </view>
    <!-- 跨境物流 -->
    <u-popup
      :show="show"
      @close="close"
      mode="bottom"
      closeIconPos="top-right"
      round="28"
    >
      <view style="padding: 40rpx 28rpx; box-sizing: border-box">
        <view class="u-flex u-row-between">
          <view class="" style="width: 28px; height: 28px"></view>
          <view class="poptitle">
            {{ i18n.flow }}
          </view>
          <u-icon
            name="close"
            @click="close"
            color="background: #333333;"
            size="28"
          ></u-icon>
        </view>
        <view
          class="u-flex"
          style="margin-top: 60rpx; flex-wrap: wrap; column-gap: 16rpx"
        >
          <view
            :class="index == idx ? 'active' : 'unactive'"
            v-for="(item, idx) in containerList"
            @click="change(item, idx)"
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-bottom: 28rpx;
              position: relative;
            "
          >
            <image
              v-if="index == idx"
              src="static/images/change.png"
              style="
                width: 36rpx;
                height: 32rpx;
                position: absolute;
                top: 0;
                right: 0;
              "
              mode=""
            ></image>
            <view class="logname" v-if="language == 'zh-CN'">{{
              item.name_cn
            }}</view>
            <view class="logname" v-if="language == 'en-US'">{{
              item.name_en
            }}</view>
            <view class="logname" v-if="language == 'es-ES'">{{
              item.name_es
            }}</view>
            <view class="logname" v-if="language == 'it-IT'">{{
              item.name_ita
            }}</view>
            <!-- 						<view class="wei">¥{{goodinfo.cate==0?item.normal_delivery_fee:item.special_delivery_fee}}/kg</view> -->
            <view class="wei" style="font-size: 32rpx; font-weight: 600"
              >¥{{ item.unit_price }}/kg</view
            >
          </view>
        </view>
        <view class="nextto" @click="next">{{ i18n.next }}</view>
      </view>
    </u-popup>
    <!-- 跨境物流下一步 -->
    <u-popup
      :safeAreaInsetTop="true"
      :show="show1"
      @close="close"
      mode="bottom"
      closeIconPos="top-right"
      round="28"
      bgColor="#F4F4F4"
    >
      <view
        style="padding: 40rpx 28rpx; box-sizing: border-box; position: relative"
      >
        <view class="u-flex u-row-between">
          <view class="" style="width: 28px; height: 28px"></view>
          <view class="poptitle">
            {{ i18n.flow }}
          </view>
          <u-icon
            name="close"
            @click="close"
            color="background: #333333;"
            size="28"
          ></u-icon>
        </view>
        <scroll-view :scroll-y="true" style="500rpx">
          <view
            class="transport"
            style="margin-top: 32rpx"
            @click="activea(item, idx)"
            v-for="(item, idx) in containlist"
            v-if="item.sum != 0"
          >
            <view class="u-flex u-row-between">
              <text class="yundate"
                >{{ i18n.Shipmentdate }} {{ item.end_date }}</text
              >
              <image
                v-if="datechan == idx"
                src="/pageA/static/images/active.png"
                style="width: 36rpx; height: 36rpx"
                mode=""
              ></image>
              <image
                v-else
                src="/pageA/static/images/unactive.png"
                style="width: 36rpx; height: 36rpx"
                mode=""
              ></image>
            </view>
            <view class="u-flex u-row-between" style="margin-top: 28rpx">
              <view class="chest">
                <text v-if="language == 'zh-CN'">{{ item.name_cn }}</text>
                <text v-if="language == 'en-US'">{{ item.name_en }}</text>
                <text v-if="language == 'es-ES'">{{ item.name_es }}</text>
                <text v-if="language == 'it-IT'">{{ item.name_ita }}</text>
                <text style="margin: 0 16rpx">|</text>
                <text
                  >{{ i18n.Estimatedtimeofarrival }}{{ item.transport_days
                  }}{{ i18n.Workingday }}</text
                >
              </view>
              <view class="mone">
                <text>¥</text>
                <text style="font-size: 48rpx; font-weight: 600">{{
                  item.sum
                }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="" style="height: 166rpx"></view>
        <view class="enbottom u-flex u-row-between">
          <view class="cancel" @click="close">{{ i18n.Cancel }}</view>
          <view class="confirm" @click="confirm">{{ i18n.enter }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 1,
      show: false,
      index: "",
      show1: false,
      datechan: "",
      sku_info: {},
      goodinfo: {},
      swiptlist: [], //推荐列表
      language: "zh-CN",
      containerList: [], //列表
      province_id: "",
      transport_type_id: "",
      containlist: [],
      containid: "", //货柜id
      containname: "", //货柜名称
      type: "", //货运方式名称
      containname1: "",
      type1: "",
      sum: "",
      unit_price: "",
      recommend_weight: "",
      sum1: "",
      unit_price1: "",
      recommend_weight1: "",
      max_weight: "",
      min_weight: "",
      unit_fee: "",
      addinfo: "",
      huoid: "",
      selelist: [],
      typea: "",
      goodsPrice: "",
      goodsWeight: "",
      stringcheck: "",
      cartid: "",
      weight_total: "",
      valuenum: false,
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onLoad(options) {
    // url: '/pageA/order?sku=' + this.sku_info + '&value=' + this.value+'&goodinfo='+this.goodinfo
    if (options.typea) {
      this.typea = options.typea;
      this.selelist = JSON.parse(decodeURIComponent(options.selelist));
      console.log(this.selelist);
      this.goodsPrice = options.goodsPrice;
      this.goodsWeight = options.goodsWeight;
      this.stringcheck = options.stringcheck;
      this.cartid = options.cartid;
    } else if (options) {
      this.value = options.value;
      this.sku_info = JSON.parse(decodeURIComponent(options.sku));
      this.goodinfo = JSON.parse(decodeURIComponent(options.goodinfo));
      if (options.share_merchant_id) {
        this.share_merchant_id = options.share_merchant_id;
      }
    }
  },
  onShow() {
    if (uni.getStorageSync("language") != "") {
      this.language = uni.getStorageSync("language");
    }
    this.recommend();
    // this.container()
  },
  methods: {
    changwu() {
      if (this.addinfo) {
        this.show = true;
      } else {
        this.$u.toast(this.i18n.shippingaddress);
      }
    },
    valChange() {
      this.valuenum = true;
    },
    todetail(id) {
      uni.navigateTo({
        url: "/pageA/productdetails?id=" + id,
      });
    },
    //正则匹配手机号
    replacePhoneToStar: function (phone) {
      if (phone) {
        return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
      }
    },
    //推荐重量
    recommendweight() {
      uni.$u.http
        .get("/api/express-order/recommend-container", {
          params: {
            container_id: this.containid,
            type: this.goodinfo.cate == 0 ? "normal" : "special",
          },
        })
        .then((res) => {
          console.log(res);
          this.max_weight = res.max_weight;
          this.min_weight = res.min_weight;
          this.unit_fee = res.unit_fee;
        })
        .catch(() => {});
    },
    //货运类型列表
    transport() {
      uni.$u.http
        .get("/api/transport-type", {
          params: {
            province_id: this.province_id,
          },
        })
        .then((res) => {
          this.containerList = res;
          this.transport_type_id = res[0].id;
          if (this.language == "zh-CN") {
            this.type = res[0].name_cn;
          }
          if (this.language == "en-US") {
            this.type = res[0].name_en;
          }
          if (this.language == "es-ES") {
            this.type = res[0].name_es;
          }
          if (this.language == "it-IT") {
            this.type = res[0].name_ita;
          }
        })
        .catch(() => {});
    },
    //跳转到填写地址
    toadd() {
      var that = this;
      uni.navigateTo({
        url: "/pageC/addressManagement/addressManagement?tabs=" + Number(0),
        events: {
          getadd(res) {
            that.addinfo = res;
            that.province_id = res.province_id;
            that.transport();
          },
        },
      });
    },
    //货柜列表
    container() {
      this.containlist = [];
      uni.$u.http
        .get("/api/container-base", {
          params: {
            is_page: 0,
            province_id: this.province_id,
            transport_type_id: this.transport_type_id,
            weight:
              this.typea == "shop"
                ? ""
                : Number(this.sku_info.weight) * this.value,
            type:
              this.typea == "shop"
                ? ""
                : this.goodinfo.cate == 0
                ? "normal"
                : "special",
            length:
              this.typea == "shop"
                ? ""
                : Number(this.sku_info.length) * this.value, //		是	String	长
            width: this.sku_info.width, //		是	String	宽
            height: this.sku_info.height, //		是	String	高
            cart_id: this.cartid,
            // cart_id: '147,148'
          },
        })
        .then((res) => {
          res.forEach((item) => {
            if (item.sum != 0) {
              this.containlist.push(item);
            }
            console.log(this.containlist);
          });
          if (this.cartid.length == 0 && this.typea == "shop") {
            console.log("his.cartid.length", this.cartid.length);
            this.sum = 0;
          }
          // this.sum = this.containlist[0].sum
          // this.unit_price = this.containlist[0].unit_price
          if (this.goodinfo.is_shipping == 0) {
            this.sum = 0;
          } else {
            this.sum = this.containlist[0].sum;
          }
          if (this.goodinfo.is_shipping == 0) {
            this.unit_price = 0;
          } else {
            this.unit_price = this.containlist[0].unit_price;
          }
          this.recommend_weight = this.containlist[0].recommend_weight;
          this.weight_total = this.containlist[0].weight_total;
          this.containid = this.containlist[0].id;
          if (this.language == "zh-CN") {
            this.containname = this.containlist[0].name_cn;
          }
          if (this.language == "en-US") {
            this.containname = this.containlist[0].name_en;
          }
          if (this.language == "es-ES") {
            this.containname = this.containlist[0].name_es;
          }
          if (this.language == "it-IT") {
            this.containname = this.containlist[0].name_ita;
          }
        })
        .catch(() => {});
    },
    //运费满减
    config() {
      var that = this;
      uni.$u.http
        .get("/api/config", {
          params: {
            module: "free_shipping",
          },
        })
        .then((res) => {
          if (
            Number(that.goodsPrice) > res.free_shipping &&
            that.typea == "shop"
          ) {
            console.log("goodsPrice", that.goodsPrice);
            console.log("res.free_shipping", res.free_shipping);
            that.sum = 0;
            that.unit_price = 0;
          }
          let goodsum = "";
          if (that.goodinfo.is_discount == 1) {
            goodsum =
              (Number(that.sku_info.price * 100) * Number(that.value * 100)) /
              10000;
            console.log("that.sum", that.sum);
            console.log("that.goodsum", goodsum);
            if (goodsum > res.free_shipping) {
              that.sum = 0;
              that.unit_price = 0;
            }
          } else {
            goodsum =
              (Number(that.sku_info.discount_price * 100) *
                Number(that.value * 100)) /
              10000;
            if (goodsum > res.free_shipping) {
              that.sum = 0;
              that.unit_price = 0;
            }
          }
        })
        .catch(() => {});
    },
    //商品推荐
    recommend() {
      uni.$u.http
        .post("/api/goods/recommend", {
          keyword: "",
        })
        .then((res) => {
          this.swiptlist = res;
        })
        .catch(() => {});
    },
    change(item, index) {
      this.transport_type_id = item.id;
      this.index = index;
      if (this.language == "zh-CN") {
        this.type = item.name_cn;
      }
      if (this.language == "en-US") {
        this.type = item.name_en;
      }
      if (this.language == "es-ES") {
        this.type = item.name_es;
      }
      if (this.language == "it-IT") {
        this.type = item.name_ita;
      }
    },
    next() {
      this.show = false;
      this.show1 = true;
      this.type1 = this.type;
      this.container();
    },
    activea(item, idx) {
      this.datechan = idx;
      this.sum = item.sum;
      this.unit_price = item.unit_price;
      this.recommend_weight = item.recommend_weight;
      this.containid = item.id;
      this.weight_total = item.weight_total;
      if (this.language == "zh-CN") {
        this.containname = item.name_cn;
      }
      if (this.language == "en-US") {
        this.containname = item.name_en;
      }
      if (this.language == "es-ES") {
        this.containname = item.name_es;
      }
      if (this.language == "it-IT") {
        this.containname = item.name_ita;
      }
    },
    //确定
    confirm() {
      this.valuenum = false;
      this.show1 = false;
      this.containname1 = this.containname;
      this.recommendweight();
      this.config();
    },
    // 取消
    close() {
      this.show = false;
      this.show1 = false;
    },
    //提交订单
    topay() {
      if (this.valuenum) {
        this.$u.toast(this.i18n.newcontainer);
      } else {
        uni.$u.http
          .post("/api/order", {
            address_id: this.addinfo.id, //3	是	String	地址ID
            goods_id: this.goodinfo.id, //65	是	String	商品id
            goods_num: this.value, //2	是	String	商品数量
            sku_item_id: this.sku_info.id, //60	是	String	规格id
            cart_ids: this.stringcheck, //8,9	是	String	购物车id
            remark: "", //备注	是	String	备注
            merchant_goods_id: this.goodinfo.merchant_goods_id || "", //39	是	String	团长商品id
            container_id: this.containid, //1	是	String	货柜id
            share_member_id: this.share_merchant_id, //	是	String	分享团长id 分享商品的时候传
            belong: this.goodinfo.source || "", //0	是	String	商品归属 0团长 1平台自营 2团长发布或者分享的平台自营商品、供应链商品
          })
          .then((res) => {
            console.log("share_merchant_id", this.share_merchant_id);
            console.log(res);
            uni.navigateTo({
              // url: '/pageA/payorder?sum=' + (Number(this.sum*10000+ Number(this.sku_info.discount_price)*Number(this.value)*10000))/10000 +'&orderid=' + res.id
              url: "/pageA/payorder?orderid=" + res.id + "&sum=" + res.amount,
            });
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.toptitle {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  // font-size: 22rpx;
  color: #222222;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
  // width: 148rpx;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

::v-deep .u-status-bar {
  height: 0 !important;
}

.confirm {
  width: 398rpx;
  height: 84rpx;
  background: #f83224;
  border-radius: 42rpx;
  text-align: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 84rpx;
  text-align: center;
  font-style: normal;
}

.cancel {
  width: 280rpx;
  height: 84rpx;
  border-radius: 42rpx;
  border: 2rpx solid rgba(151, 151, 151, 0.3);
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #444444;
  line-height: 84rpx;
  text-align: center;
  font-style: normal;
}

.enbottom {
  width: 750rpx;
  height: 166rpx;
  background: #ffffff;
  position: absolute;
  left: 0rpx;
  bottom: 0;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.mone {
  font-family: JDZhengHT, JDZhengHT;
  font-weight: 400;
  font-size: 26rpx;
  color: #f83224;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.yundate {
  font-family: PingFangSC, PingFang SC;
  font-weight: 550;
  font-size: 32rpx;
  color: #333333;
  line-height: 44rpx;
  text-align: left;
  font-style: normal;
}

.chest {
  font-family: SFPro, SFPro;
  font-weight: 400;
  font-size: 24rpx;
  color: #555555;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
}

.act {
  width: 702rpx;
  height: 164rpx;
  background: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  box-sizing: border-box;
  border: 1rpx solid #f83224;
}

.transport {
  width: 702rpx;
  height: 164rpx;
  background: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  box-sizing: border-box;
}

.nextto {
  width: 702rpx;
  height: 84rpx;
  background: #f83224;
  border-radius: 44rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 84rpx;
  text-align: center;
  font-style: normal;
  margin-top: 108rpx;
}

.logname {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: right;
  font-style: normal;
  overflow: hidden;
  width: 220rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  word-break: break-all;
}

.wei {
  font-family: JDZhengHT, JDZhengHT;
  font-weight: 400;
  font-size: 32rpx;
  color: #f83224;
  line-height: 40rpx;
  text-align: right;
  font-style: normal;
  margin-top: 8rpx;
}

.active {
  width: 218rpx;
  height: 148rpx;
  background: rgba(247, 50, 36, 0.05);
  border-radius: 8rpx;
  border: 1rpx solid #f83224;
}

.unactive {
  width: 218rpx;
  height: 148rpx;
  border-radius: 12rpx;
  border: 1rpx solid #c3c3c3;
}

.poptitle {
  width: 142rpx;
  height: 50rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 36rpx;
  color: #333333;
  text-align: center;
  width: 100%;
}

.back {
  background: rgba(244, 244, 244, 1);
  padding: 20rpx 24rpx;
  box-sizing: border-box;

  .btn {
    width: 750rpx;
    height: 166rpx;
    background: #ffffff;
    box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 24rpx 5rpx 5rpx;
    box-sizing: border-box;

    .money {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 48rpx;
      color: #f83224;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      // font-weight: 500;
      font-weight: bold;
    }

    .kg {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
    }

    .order {
      width: 232rpx;
      height: 80rpx;
      background: #f83224;
      border-radius: 40rpx;
      font-family: PingFangTC, PingFangTC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      font-style: normal;
      margin-left: 20rpx;
    }
  }

  //商品相关
  .abount {
    padding: 28rpx 24rpx;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16rpx;
    width: 702rpx;

    .zong {
      width: 654rpx;
      padding: 22rpx 0 0 0;
      border-top: 2rpx solid rgba(151, 151, 151, 0.1);
      margin-top: 32rpx;

      .small {
        font-family: PingFangTC, PingFangTC;
        font-weight: 400;
        font-size: 24rpx;
        color: #444444;
        line-height: 34rpx;
        text-align: left;
        font-style: normal;
      }

      .mon {
        font-family: HarmonyOS_Sans_Medium;
        font-size: 28rpx;
        color: #f83224;
        line-height: 38rpx;
        text-align: left;
        font-style: normal;
        margin-left: 12rpx;
        font-weight: bold;
      }
    }

    .back {
      background: rgba(244, 244, 244, 1);
      padding: 22rpx 16rpx;
      box-sizing: border-box;
      margin-top: 10rpx;
      // margin-bottom: 20rpx;
    }

    .name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }

    .money {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 28rpx;
      color: #222222;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      font-weight: 600;
    }
  }

  .recommend {
    margin-top: 20rpx;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      color: #222222;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      width: 148rpx;
      height: 64rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .top {
      width: 702rpx;
      height: 64rpx;
      background: linear-gradient(
        180deg,
        #ffe7e3 0%,
        rgba(255, 255, 255, 1) 100%
      );
      border-radius: 16rpx 16rpx 0 0;
      padding: 24rpx 22rpx;
      box-sizing: border-box;
    }

    .bottom {
      padding: 0 20rpx 22rpx;
      box-sizing: border-box;
      background: #fff;
    }
  }

  //物流
  .logistics {
    width: 702rpx;
    // height: 96rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx 22rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .change {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #f83224;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      margin-right: 8rpx;
    }
  }

  //商城
  .shop {
    width: 702rpx;
    // height: 322rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx 24rpx;
    margin-top: 20rpx;
    box-sizing: border-box;

    .bu {
      width: 120rpx;
      height: 40rpx;
      border-radius: 20rpx;
      border: 1rpx solid rgba(151, 151, 151, 0.3);
    }

    .money {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 24rpx;
      color: #f83224;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
      font-weight: 600;
    }

    .name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #222222;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      margin-left: 10rpx;
    }

    .weight {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(34, 34, 34, 0.6);
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
      margin-top: 16rpx;
    }
  }

  // 地址
  .address {
    width: 702rpx;
    // height: 182rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    box-sizing: border-box;

    .add {
      font-family: SFPro, SFPro;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }

    .info {
      font-family: SFPro, SFPro;
      font-weight: 400;
      font-size: 24rpx;
      color: #555555;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      margin-top: 20rpx;
    }
  }
}

.minus {
  width: 22px;
  height: 22px;
  border-width: 1px;
  border-color: #e6e6e6;
  border-style: solid;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  @include flex;
  justify-content: center;
  align-items: center;
}

.input {
  padding: 0 10px;
}

.plus {
  width: 22px;
  height: 22px;
  background-color: #ff0000;
  border-radius: 50%;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
}
</style>