wx-qhb/pages/express/express.vue

<template>
  <!-- 商城 -->
  <view class="" style="padding: 0 24rpx">
    <view style="position: relative; padding-bottom: 20rpx">
      <!-- 自定义导航栏 -->
      <image
        src="../../static/images/index/back.png"
        style="
          width: 750rpx;
          height: 1200rpx;
          position: absolute;
          top: 0;
          z-index: -1;
          left: -24rpx;
        "
        mode=""
      >
      </image>
      <u-navbar
        bgColor="rgba(255, 215,215, 1)"
        :placeholder="true"
        :safeAreaInsetTop="true"
      >
        <view class="u-nav-slot" slot="left" style="display: flex">
          <view
            class=""
            style="width: 40rpx; height: 40rpx; position: relative"
          >
            <u-badge
              :absolute="true"
              :offset="[0, -8]"
              :type="type"
              max="99"
              :value="unReadCount"
            ></u-badge>
            <image
              @click="tochat"
              src="../../static/images/index/xiaoxi.png"
              mode=""
              style="width: 40rpx; height: 40rpx"
            >
            </image>
          </view>
          <image
            @click="counter"
            src="../../static/images/index/compile.png"
            mode=""
            style="width: 40rpx; height: 40rpx; margin-left: 22rpx"
          ></image>
          <image
            src="../../static/images/index/dianhua.png"
            mode=""
            style="width: 40rpx; height: 40rpx; margin-left: 22rpx"
            @click="callphone"
          ></image>
        </view>
        <view class="u-nav-slot" slot="center" style="width: 320rpx">
          <u-subsection
            bgColor="rgba(248, 50, 36, 0.1)"
            activeColor="#F83224"
            inactiveColor="#222"
            :list="list"
            :current="current"
            @change="sectionChange"
          ></u-subsection>
        </view>
      </u-navbar>
      <!-- 地址 -->
      <view class="address">
        <view class="left u-flex" style="display: flex">
          <view
            class="u-row-between left"
            style="display: flex; flex-direction: column"
          >
            <image
              src="../../static/express/ji.png"
              style="width: 40rpx; height: 40rpx"
              mode=""
            ></image>
            <image
              @click="changeadd"
              src="../../static/express/change.png"
              style="width: 40rpx; height: 40rpx"
              mode=""
            >
            </image>
          </view>
          <view
            class="u-row-between left"
            style="
              flex: 1;
              margin-left: 28rpx;
              border-bottom: 2rpx solid rgba(151, 151, 151, 0.08);
              display: flex;
            "
          >
            <view
              v-if="JSON.stringify(topadd) == '{}'"
              class="u-row-between"
              style=""
              @click="send"
            >
              <view class="pople">{{ i18n.sender }}</view>
              <view class="jiadd" style="margin-top: 14rpx">{{
                i18n.informat
              }}</view>
            </view>
            <view v-else class="u-row-between" style="" @click="send">
              <view class="">
                <text class="topname">{{ topadd.name }}</text>
                <text class="topaddress" style="margin-left: 8rpx">{{
                  replacePhoneToStar(topadd.mobile)
                }}</text>
              </view>
              <view class="topaddress" style="margin-top: 14rpx">{{
                topadd.full_address
              }}</view>
            </view>
            <view class="u-flex" @click.stop="addbook(1)">
              <view class="" style="color: rgba(151, 151, 151, 1)">|</view>
              <text class="right">{{ i18n.addressbook }}</text>
            </view>
          </view>
        </view>
        <view
          class="left u-flex"
          style="
            display: flex;
            margin-top: 26rpx;
            border-bottom: 2rpx solid rgba(151, 151, 151, 0.08);
          "
        >
          <view
            class="u-row-between left"
            style="display: flex; flex-direction: column"
          >
            <image
              src="../../static/express/shou.png"
              style="width: 40rpx; height: 40rpx"
              mode=""
            ></image>
            <!-- <image src="../../static/express/change.png" style='width: 40rpx;;height:40rpx ;' mode=""> -->
          </view>
          <view
            class="u-row-between left"
            style="flex: 1; margin-left: 28rpx; display: flex"
          >
            <view
              v-if="JSON.stringify(bottomadd) == '{}'"
              class="u-row-between"
              style=""
              @click="recipirnt"
            >
              <view class="pople">{{ i18n.recipient }}</view>
              <view class="jiadd" style="margin-top: 14rpx">{{
                i18n.informate
              }}</view>
            </view>
            <view v-else class="u-row-between" style="" @click="recipirnt">
              <view class="">
                <text class="topname">{{ bottomadd.name }}</text>
                <text class="topaddress" style="margin-left: 8rpx">{{
                  replacePhoneToStar(bottomadd.mobile)
                }}</text>
              </view>
              <view class="topaddress" style="margin-top: 14rpx">{{
                bottomadd.full_address
              }}</view>
            </view>
            <view class="u-flex" @click.stop="addbook(0)">
              <view class="" style="color: rgba(151, 151, 151, 1)">|</view>
              <text class="right">{{ i18n.addressbook }}</text>
            </view>
          </view>
        </view>
        <!-- 物品信息 -->
        <view class="info u-flex u-row-between">
          <view class="u-flex">
            <text class="wupin">{{ i18n.item }}</text>
            <view class="mast">{{ i18n.required }}</view>
          </view>
          <view
            v-if="JSON.stringify(goodinfo) === '{}'"
            class="u-flex"
            @click="goods"
          >
            <view class="change">{{ i18n.selection }}</view>
            <image
              src="../../static/express/next1.png"
              style="width: 28rpx; height: 28rpx; margin-left: 6rpx"
              mode=""
            ></image>
          </view>
          <view v-else class="goodname" @click="goods">
            {{ goodinfo.goodname }},{{ goodinfo.weight }}kg
          </view>
        </view>
        <!-- 跨境物流 -->
        <view class="info u-flex u-row-between">
          <view class="u-flex">
            <text class="wupin">{{ i18n.flow }}</text>
          </view>
          <view class="u-flex" @click="changewu">
            <!-- <text class="change" style="color: rgba(248, 50, 36, 1);">{{i18n.selection}}</text> -->
            <text class="change" style="color: rgba(248, 50, 36, 1)">{{
              leftname ? leftname + " |  " + rightname : i18n.selection
            }}</text>
            <image
              v-if="leftname == ''"
              src="../../static/express/next1.png"
              style="width: 28rpx; height: 28rpx; margin-left: 6rpx"
              mode=""
            ></image>
          </view>
        </view>
        <!-- 去寄件 -->
        <view class="" style="margin-top: 34rpx">
          <view class="mail" @click="todev">
            {{ i18n.mail }}
          </view>
        </view>
        <view class="bottom u-flex u-row-between">
          <button
            style="
              background-color: transparent;
              padding-left: 0 !important;
              padding-right: 0 !important;
              margin: 0 !important;
            "
            open-type="share"
            class="u-flex"
          >
            <image
              src="../../static/express/share.png"
              style="width: 36rpx; height: 36rpx"
              mode=""
            ></image>
            <text class="friend">{{ i18n.share }}</text>
          </button>
          <view class="friend">|</view>
          <view class="u-flex" @click="counter">
            <image
              src="/static/images/index/compile.png"
              style="width: 36rpx; height: 36rpx"
              mode=""
            >
            </image>
            <text class="friend">{{ i18n.compute }}</text>
          </view>
        </view>
      </view>
      <!-- 我的包裹 -->
      <view class="parcel">
        <view class="u-flex u-row-between">
          <view class="myparcel">
            <text>{{ i18n.mine }}</text>
            <text style="color: rgba(248, 50, 36, 1)">{{ i18n.parcel }}</text>
          </view>
          <view class="add u-flex">
            <image
              src="../../static/express/add.png"
              mode=""
              style="width: 44rpx; height: 44rpx"
            ></image>
            <text class="addtext" @click="toparcel">{{ i18n.addsign }}</text>
          </view>
        </view>
        <view class="u-flex u-row-around" style="margin-top: 44rpx">
          <view class="flexc" @click="pack('to_transit')">
            <view
              class=""
              style="position: relative; width: 68rpx; height: 68rpx"
            >
              <u-badge
                :absolute="true"
                :offset="[0, -15]"
                :type="type"
                max="99"
                :value="transit"
              ></u-badge>
              <image
                src="/static/express/address.png"
                style="width: 68rpx; height: 68rpx"
                mode=""
              >
              </image>
            </view>
            <text style="margin-top: 16rpx" class="bao">{{
              i18n.deliver
            }}</text>
          </view>
          <view
            class="flexc"
            style="position: relative"
            @click="pack('transit_receipt')"
          >
            <view
              class=""
              style="position: relative; width: 68rpx; height: 68rpx"
            >
              <u-badge
                :absolute="true"
                :offset="[0, -15]"
                :type="type"
                max="99"
                :value="receipt"
              ></u-badge>
              <image
                src="/static/express/sign.png"
                style="width: 68rpx; height: 68rpx"
                mode=""
              ></image>
            </view>
            <text style="margin-top: 16rpx" class="bao">{{ i18n.Sign }}</text>
          </view>
          <view
            class="flexc"
            style="position: relative"
            @click="pack('to_overseas')"
          >
            <view
              class=""
              style="position: relative; width: 68rpx; height: 68rpx"
            >
              <u-badge
                :absolute="true"
                :offset="[0, -15]"
                :type="type"
                max="99"
                :value="overseas"
              ></u-badge>
              <image
                src="../../static/express/send.png"
                style="width: 68rpx; height: 68rpx"
                mode=""
              ></image>
            </view>
            <text style="margin-top: 16rpx" class="bao">{{
              i18n.overseas
            }}</text>
          </view>
        </view>
      </view>
      <!-- 拼包 -->
      <view class="u-flex u-row-between" style="margin-top: 32rpx">
        <view class="u-flex">
          <text class="hai">{{ i18n.parceling }}</text>
          <image
            v-if="language == 'zh-CN'"
            style="width: 180rpx; height: 32rpx"
            src="/static/express/label.png"
            mode=""
          ></image>
          <image
            v-if="language == 'en-US'"
            style="width: 300rpx; height: 32rpx"
            src="/static/express/label1.png"
            mode=""
          ></image>
          <image
            v-if="language == 'es-ES'"
            style="width: 334rpx; height: 32rpx"
            src="/static/express/label2.png"
            mode=""
          ></image>
          <image
            v-if="language == 'it-IT'"
            style="width: 366rpx; height: 32rpx"
            src="/static/express/label3.png"
            mode=""
          ></image>
        </view>
        <view class="u-flex">
          <text class="more" @click="more">{{ i18n.more }}</text>
          <image
            src="../../static/express/next2.png"
            style="width: 30rpx; height: 30rpx"
            mode=""
          ></image>
        </view>
      </view>
      <!-- 拼包数据 -->
      <view class="label" v-for="(item, idx) in expressList" :key="idx">
        <view class="" style="display: flex">
          <view class="left flexc">
            <text class="bourn">{{ i18n.destination }}</text>
            <view class="addres">{{ item.containerBase.country_name }}</view>
            <view class="addres">{{ item.containerBase.province_name }}</view>
          </view>
          <view class="" style="flex: 1; margin-left: 20rpx">
            <view class="u-flex u-row-between">
              <view class="">
                <text class="bigtitle" v-if="item.type == 'normal'">{{
                  i18n.Ordinary
                }}</text>
                <text class="bigtitle" v-else>{{ i18n.Special }}</text>
                <text style="margin: 0 8rpx">|</text>
                <text v-if="language == 'zh-CN'" class="bigtitle">{{
                  item.transportType.name_cn
                }}</text>
                <text v-if="language == 'en-US'" class="bigtitle">{{
                  item.transportType.name_en
                }}</text>
                <text v-if="language == 'es-ES'" class="bigtitle">{{
                  item.transportType.name_es
                }}</text>
                <text v-if="language == 'it-IT'" class="bigtitle">{{
                  item.transportType.name_ita
                }}</text>
              </view>
              <view class="mon">
                <text class="timeb">{{ i18n.price }}</text>
                <text>￥</text>
                <text v-if="item.price" style="font-size: 32rpx">{{
                  item.price.slice(0, -3)
                }}</text>
                <text v-if="item.price">{{ item.price.slice(-3) }}</text>
              </view>
            </view>
            <view class="" style="margin-top: 34rpx">
              <u-line-progress
                activeColor="rgba(255, 21, 21, 1)"
                :percentage="item.progress"
                height="6"
                :showText="false"
              ></u-line-progress>
            </view>
            <view class="u-flex u-row-between" style="margin-top: 20rpx">
              <view class="u-flex">
                <view class="">
                  <text class="timeb">{{ i18n.already }} </text>
                  <text class="timeb" style="color: rgba(255, 21, 21, 1)"
                    >{{ item.used_weight }}kg</text
                  >
                </view>
                <text style="margin: 0 8rpx">|</text>
                <view class="">
                  <text class="timeb">{{ i18n.residue }} </text>
                  <text class="timeb" style="color: rgba(255, 21, 21, 1)"
                    >{{ item.residual_weight }}kg</text
                  >
                </view>
              </view>
              <view class="">
                <text class="timeb">{{ i18n.plan }}{{ item.progress }}%</text>
              </view>
            </view>
          </view>
        </view>
        <view class="u-flex u-row-between" style="margin-top: 32rpx">
          <text class="timea"
            >{{ i18n.start }}：{{ item.begin_date }}/{{ i18n.cut }}：{{
              item.end_date
            }}</text
          >
          <view class="pinb" @click="toaccount(item)">{{
            i18n.goparceling
          }}</view>
        </view>
      </view>
    </view>
    <u-popup round="28" :show="logshow" @close="close">
      <view class="pop">
        <kj-flow
          :language="language"
          :goodstype="goodinfo.goodtype"
          ref="child"
          :province_id="province_id"
          @success="success"
          @close="close()"
          :leftchangea="leftchange"
          :rightchangea="rightchange"
          :typeida="typeid"
        ></kj-flow>
      </view>
    </u-popup>
    <!-- <u-button @click="show = true">打开</u-button> -->
    <view class="" style="height: 160rpx"></view>
    <kj-tabbar :value1="0"></kj-tabbar>
  </view>
</template>

<script>
import { conn } from "@/utils/WebIM";
export default {
  data() {
    return {
      //顶部分段器
      list: [],
      current: 0,
      type: "error",
      percentage: 50, //进度条
      logshow: false, //物流选择
      status_collection: "", //我的包裹选择值
      transit: 0, //发往中转点
      receipt: 0, //中转已签收
      overseas: 0, //正发往海外
      topadd: {}, //新建寄件人
      bottomadd: {}, //新建收件人
      province_id: "",
      leftname: "",
      rightname: "",
      container_id: "", //货柜列表
      language: "zh-CN",
      goodinfo: {}, //物品信息
      unit_price: "",
      expressList: [],
      leftchange: "",
      rightchange: "",
      typeid: "",
      unReadCount: 0,
    };
  },
  onLoad(options) {
    this.list = [this.i18n.border, this.i18n.shop];
    if (options.current) {
      this.current = options.current;
    }
    this.topadd = {}; //新建寄件人
    this.bottomadd = {}; //新建收件人
  },
  onShow() {
    this.list[0] = this.i18n.border;
    this.list[1] = this.i18n.shop;
    // uni.setNavigationBarTitle({
    // 	title: this.i18n.setup
    // })
    this.express(); //获取包裹数量
    if (uni.getStorageSync("language") != "") {
      this.language = uni.getStorageSync("language");
    }
    this.getexpress();
    this.getlist();
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    getlist() {
      this.unReadCount = 0;
      conn
        .getServerConversations({
          pageSize: 50,
          cursor: "",
        })
        .then((res) => {
          console.log(res);
          res.data.conversations.forEach((item) => {
            this.unReadCount += item.unReadCount;
          });
        });
    },
    onShareAppMessage(res) {
      if (res.from === "button") {
        // 来自页面内分享按钮
        console.log(res.target);
      }
      return {
        title: this.i18n.border,
        path: "/pages/express/express",
      };
    },
    callphone() {
      uni.$u.http
        .get("/api/config", {
          params: {
            module: "basic",
          },
        })
        .then((res) => {
          console.log(res);

          uni.makePhoneCall({
            phoneNumber: res.service_mobile,
          });
        })
        .catch(() => {});
    },
    //价格计算
    calculate() {
      uni.$u.http
        .get("/api/express-order/calculate", {
          params: {
            container_id: this.container_id, // 是 String 货柜ID
            weight: this.goodinfo.weight, //是 String 重量(kg)
            length: this.goodinfo.length, //是 String 长(m)
            width: this.goodinfo.width, //是 String 宽(m)
            height: this.goodinfo.height, //是 String 高(m)
            type: this.goodinfo.goodtype, //是 String 商品类型: normal.普通商品,
          },
        })
        .then((res) => {
          console.log(res);
          uni.navigateTo({
            url:
              "/pageB/delivery?goodinfo=" +
              encodeURIComponent(JSON.stringify(this.goodinfo)) +
              "&topadd=" +
              encodeURIComponent(JSON.stringify(this.topadd)) +
              "&bottom=" +
              encodeURIComponent(JSON.stringify(this.bottomadd)) +
              "&leftname=" +
              this.leftname +
              "&rightname=" +
              this.rightname +
              "&container_id=" +
              this.container_id +
              "&unit_price=" +
              this.unit_price +
              "&all=" +
              res,
          });
        })
        .catch(() => {});
    },
    //拼包列表
    getexpress() {
      uni.$u.http
        .get("/api/express-group-package", {
          params: {
            is_page: 0,
            page: 1,
            limit: 3,
            transport_type_id: "",
            container_base_id: "",
            type: "",
          },
        })
        .then((res) => {
          this.expressList = res;
        })
        .catch(() => {});
    },
    //跨境物流选择
    success(msg) {
      this.logshow = false;
      this.leftname = msg.leftname;
      this.container_id = msg.dateid;
      this.rightname = msg.rightname;
      this.unit_price = msg.unit_price;
      this.leftchange = msg.leftchange;
      this.rightchange = msg.rightchange;
      this.typeid = msg.typeid;
    },
    //物流选择
    changewu() {
      var that = this;
      if (this.province_id) {
        this.logshow = true;
        setTimeout(() => {
          console.log("2222222", this.$refs.child);
          that.$refs.child.transport();
        }, 800);
      } else {
        this.$u.toast(this.i18n.selectcity);
      }
    },
    //改变地址
    changeadd() {
      var a = {};
      a = this.topadd;
      this.topadd = this.bottomadd;
      this.bottomadd = a;
      this.province_id = this.bottomadd.province_id;
    },
    //正则匹配手机号
    replacePhoneToStar: function (phone) {
      if (phone) {
        return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
      }
    },
    //地址薄
    addbook(index) {
      var that = this;
      uni.navigateTo({
        url: "/pageC/addressManagement/addressManagement?tabs=" + index,
        events: {
          getadd(res) {
            if (index == 1) {
              that.topadd = res;
              console.log("topadd", that.topadd);
            } else {
              that.bottomadd = res;
              console.log("bottom", that.bottomadd);
              that.province_id = that.bottomadd.province_id;
            }
          },
        },
      });
    },
    //我的包裹
    express() {
      uni.$u.http
        .get("/api/express-order/status-count", {})
        .then((res) => {
          console.log(res);
          this.overseas = res.to_overseas;
          this.receipt = res.transit_receipt;
          this.transit = res.to_transit;
        })
        .catch(() => {});
    },
    todev() {
      if (JSON.stringify(this.topadd) === "{}") {
        this.$u.toast("请填写寄件人地址");
      } else if (JSON.stringify(this.bottomadd) === "{}") {
        this.$u.toast("请填写收件人地址");
      } else if (JSON.stringify(this.goodinfo) === "{}") {
        this.$u.toast("请填写物品信息");
      } else if (this.leftname == "") {
        this.$u.toast("请选择物流方式");
      } else {
        this.calculate();
      }
    },
    count() {
      uni.navigateTo({
        url: "/pageB/account",
      });
    },
    pack(index) {
      uni.navigateTo({
        // url: '/pageB/myPackage?index=' + index
        url: "/pageC/myPackage/myPackage?type=" + index,
      });
    },
    more() {
      uni.navigateTo({
        url: "/pageB/list/list",
      });
    },
    //拼包快递
    toaccount(info) {
      uni.navigateTo({
        url:
          "/pageB/ParcelExpress?expressinfo=" +
          encodeURIComponent(JSON.stringify(info)) +
          "&type=" +
          "pin",
      });
    },
    //物流计算器
    counter() {
      uni.navigateTo({
        url: "/pageA/counter",
      });
    },
    //消息
    tochat() {
      uni.navigateTo({
        url: "/pageA/chat/news",
      });
    },
    //物品信息
    goods() {
      var that = this;
      if (JSON.stringify(this.goodinfo) == "{}") {
        uni.navigateTo({
          url: "/pageB/goods",
          events: {
            goodinfo: function (res) {
              console.log("goodinfo", res);
              that.goodinfo = res;
            },
          },
        });
      } else {
        uni.navigateTo({
          url:
            "/pageB/goods?goodinfo=" +
            encodeURIComponent(JSON.stringify(this.goodinfo)),
          events: {
            goodinfo: function (res) {
              that.goodinfo = res;
              console.log(res);
            },
          },
        });
      }
    },
    //寄件人信息
    send() {
      var that = this;
      if (JSON.stringify(that.topadd) == "{}") {
        uni.navigateTo({
          url: "/pageC/addEditAddress/addEditAddress",
          events: {
            topadd: function (res) {
              // console.log(res);
              that.topadd = res;
            },
          },
        });
      } else {
        var that = this;
        uni.navigateTo({
          url: "/pageC/addEditAddress/addEditAddress?id=" + that.topadd.id,
          events: {
            topadd: function (res) {
              // console.log(res);
              that.topadd = res;
            },
          },
        });
      }
    },
    recipirnt() {
      var that = this;
      if (JSON.stringify(that.bottomadd) == "{}") {
        uni.navigateTo({
          url: "/pageB/recipientinfo",
          events: {
            bottomadd: function (res) {
              console.log(res);
              that.bottomadd = res;
              that.province_id = res.province_id;
            },
          },
        });
      } else {
        uni.navigateTo({
          url: "/pageB/recipientinfo?id=" + that.bottomadd.id,
          events: {
            bottomadd: function (res) {
              console.log(res);
              that.bottomadd = res;
              that.province_id = res.province_id;
            },
          },
        });
      }
    },
    close() {
      this.logshow = false;
    },
    //分段器切换
    sectionChange(index) {
      this.current = index;
      console.log(index);
      if (this.current == 1) {
        uni.switchTab({
          url: "/pages/index/index?current=1",
        });
        this.current = 0;
      }
    },
    toparcel() {
      uni.navigateTo({
        url: "/pageB/parcel",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
button {
  border: 0rpx solid rgba(0, 0, 0, 1) !important;
}

page {
  background-color: rgba(0, 0, 0, 0);
}

.bao {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #222222;
  line-height: 36rpx;
  text-align: center;
  font-style: normal;
}

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

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

.topaddress {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #777777;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
}

.pop {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  color: #333333;
  line-height: 50rpx;
  text-align: left;
  font-style: normal;
  padding: 32rpx 28rpx 0 0;
  box-sizing: border-box;
}

.mon {
  font-family: HarmonyOS_Sans_Medium;
  font-size: 20rpx;
  color: #f83224;
  line-height: 26rpx;
  text-align: left;
  font-style: normal;
  font-weight: 600;
}

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

.timeb {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #666666;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.timea {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #555555;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.pinb {
  width: 148rpx;
  height: 64rpx;
  background: #ff1515;
  border-radius: 42rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 64rpx;
  text-align: center;
  font-style: normal;
}

.label {
  margin-top: 20rpx;
  width: 702rpx;
  // height: 288rpx;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx 20rpx;
  box-sizing: border-box;

  .left {
    width: 144rpx;
    height: 144rpx;
    background: #f5f5f5;
    border-radius: 8rpx;

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

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

.flexc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hai {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 32rpx;
  color: #222222;
  line-height: 44rpx;
  text-align: left;
  font-style: normal;
  margin-right: 10rpx;
}

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

.parcel {
  width: 702rpx;
  // height: 260rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin-top: 20rpx;
  padding: 24rpx;
  box-sizing: border-box;

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

  .add {
    // width: 240rpx;
    height: 48rpx;
    background: rgba(248, 50, 36, 0.06);
    border-radius: 24rpx;

    .addtext {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 20rpx;
      color: #000000;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }
  }
}

.address {
  width: 702rpx;
  // height: 776rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 48rpx 24rpx 36rpx;
  box-sizing: border-box;
  margin-top: 38rpx;

  .bottom {
    padding: 0 76rpx;
    box-sizing: border-box;
    margin-top: 48rpx;

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

  .mail {
    width: 646rpx;
    height: 84rpx;
    background: #f83224;
    box-shadow: 0rpx 16rpx 40rpx -12rpx rgba(255, 21, 21, 0.5);
    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;
  }

  .info {
    height: 100rpx;
    border-bottom: 2rpx solid rgba(151, 151, 151, 0.08);

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

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

    .mast {
      // width: 62rpx;
      height: 30rpx;
      border-radius: 16rpx;
      border: 1rpx solid #f83224;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #ff1515;
      line-height: 30rpx;
      text-align: center;
      font-style: normal;
      margin-left: 12rpx;
      padding: 0 4rpx;
      box-sizing: border-box;
    }
  }

  .left {
    height: 128rpx;

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

    .jiadd {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #777777;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }

    .right {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 26rpx;
      color: #222222;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      margin-left: 18rpx;
    }
  }
}

// ::v-deep .u-navbar__content.data-v-1194bf80 {
// 	background-color: rgba(0, 0, 0, 0) !important;
// }

// ::v-deep .u-status-bar.data-v-13f16680 {
// 	background-color: rgba(0, 0, 0, 0) !important;
// }

::v-deep .u-subsection--button.data-v-b14d3440 {
  /* padding: 6rpx 34rpx !important; */
  border-radius: 64rpx !important;
}

::v-deep .u-subsection--button__bar.data-v-b14d3440 {
  border-radius: 32rpx !important;
}
</style>