baokan_mp/pages/car/order.vue

<template>
  <view>
    <view class="custom_addr" @click="showAddrPopup()">
      <view class="contact_user">
        <text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
        <text class="contact_name">{{ checkedAddr.contact_name }}</text>
        <text class="contact_phone">{{ checkedAddr.contact_phone }}</text>
        <text class="contact_more"> &gt;</text>
        <text class="contact_shop">{{ checkedAddr.contact_shop }}</text>
      </view>
      <view class="contact_addr"> {{ checkedAddr.contact_area }} {{ checkedAddr.contact_school }} {{ checkedAddr.contact_grade }} {{ checkedAddr.contact_class }} </view>
    </view>
    <view class="car_list">
      <view class="car_item" v-for="(item, index) in cartList" :key="index">
        <view class="box_left">
          <image class="car_image" :src="item.thumb" mode=""></image>
        </view>
        <view class="box_center">
          <view class="car_name">{{ item.name }}</view>
          <view class="car_spec">{{ item.spec }}</view>
          <view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
          <view class="car_price">
            <text class="price">￥{{ item.price }}</text>
          </view>
        </view>
        <view class="box_right">
          <view class="buy_num_box">
            <view class="buy_num">共{{ item.buy_num }}件</view>
          </view>
        </view>
      </view>
      <view class="car_item" v-for="(item, index) in promoRebateList" :key="index">
        <view class="box_left">
          <image class="car_image" :src="item.thumb" mode=""></image>
        </view>
        <view class="box_center">
          <view class="car_name"><text v-if="item.promo_rebate_id">【赠品】</text>{{ item.name }}</view>
          <view class="car_spec">{{ item.spec }}</view>
          <view class="car_price">
            <text class="price">￥{{ item.price }}</text>
          </view>
        </view>
        <view class="box_right">
          <view class="buy_num_box">
            <view class="buy_num">共{{ item.buy_num }}件</view>
          </view>
        </view>
      </view>
    </view>
    <view>
      <view class="to_select_coupon" v-if="couponList.length" @click="popupCoupon()">
        <text>优惠券</text>
        <view class="coupon_deduction">{{ couponUsed }}</view>
      </view>
      <view class="to_select_coupon" v-if="reduction > 0">
        <text>满减</text>
        <view class="coupon_deduction">-{{ reduction }}</view>
      </view>
      <view class="to_select_coupon" v-if="discount > 0">
        <text>商品折扣</text>
        <view class="coupon_deduction">-{{ discount }}</view>
      </view>
    </view>
    <view class="bottom_box">
      <view class="price_box">
        合计：<text class="price_total">￥{{ priceTotal }}</text>
      </view>
      <button class="to_order" @click="createOrder()" data-eventsync="true">提交订单</button>
    </view>
    <uni-popup ref="popup" type="bottom" class="popup" background-color="#FFFFFF" @touchmove.stop.prevent="() => {}">
      <view class="coupon_list">
        <view class="coupon_item" v-for="(item, index) in couponList" :key="index" @click="checkedCoupon(index)">
          <view class="box_left">
            <view class="rebate" v-if="item.rebate_type == 1"> ￥{{ item.rebate }}</view>
            <view class="rebate" v-if="item.rebate_type == 2"> 打 {{ item.rebate }} 折</view>
            <view class="rebate" v-if="item.rebate_type == 3">
              赠
              <text v-if="item.rebate_scope.length"> {{ item.rebate_scope[0].product_name }} </text>
            </view>
            <view class="std_pay"> 满{{ item.std_pay }}</view>
          </view>
          <view class="box_right">
            <view class="coupon_title">
              <view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
              <view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
              <view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
            </view>
            <view class="product_scope">
              <text class="" v-if="item.type_id == 1">限定商品可用</text>
              <text class="" v-if="item.type_id == 2">全场可用</text>
              <view class="check_label">
                <view class="isstd" v-if="!item.is_std">不可用</view>
                <image class="checkbox" v-if="item.is_std" :src="item.checked ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'"> </image>
              </view>
            </view>
            <view class="coupon_info">
              <view class="coupon_exp">{{ item.exp_time }} 到期</view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
      <view class="popup_title">收货地址 <navigator url="/pages/addr/order?notify=addr" class="to_addr_page">管理 </navigator> </view>
      <view class="addr_list">
        <view class="addr_item" v-for="(item, index) in addrList" :key="index" @click="checkedAddrItem(item)">
          <view class="radio_label">
            <image class="radio_icon" :src="item.id == checkedAddr.id ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"> </image>
          </view>
          <view class="contact_user">
            <text class="contact_name">{{ item.contact_name }}</text>
            <text class="contact_phone">{{ item.contact_phone }}</text>
            <text class="contact_default" v-if="item.is_default">默认</text>
          </view>
          <view class="contact_addr"> {{ item.contact_area }} {{ item.contact_school }} {{ item.contact_grade }} {{ item.contact_class }}</view>
        </view>
      </view>
      <view class="create_box">
        <navigator url="/pages/addr/order?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 购物车列表
      cartList: [],
      // 优惠券列表
      couponList: [],
      //赠品列表
      promoRebateList: [],
      // 请求参数
      requestParam: {
        cart_ids: "",
      },
      // 总价
      priceTotal: "0.00",
      discount: "0.00",
      reduction: "0.00",
      // 优惠券使用
      couponUsed: "去使用 >",
      // 扣减金额
      rebatePrice: 0.0,
      // 已经选择的优惠券ID
      customCoupon: 0,
      // 地址列表
      addrList: [],
      // 已选地址
      checkedAddr: {
        id: 0,
        contact_name: "",
        contact_phone: "",
        contact_province: "",
        contact_city: "",
        contact_area: "",
        contact_addr: "",
        is_default: 0,
      },
    };
  },
  onLoad(param) {
    // 获取路由参数
    this.requestParam.cart_ids = param.cart_ids;
    var that = this;
    // 监听地址变动
    uni.$on("addr_list_change", function (data) {
      // 地址列表
      that.addrList = data.list;
    });
  },
  onShow() {
    // 结果
    this.$http.request("api/shop_cart/check_list", this.requestParam).then((re) => {
      if (re.code == "success") {
        // 赋值
        this.cartList = re.data;
        this.promoRebateList = re.promoRebateList;
        this.discount = re.discount;
        this.reduction = re.reduction;
        // 结果
        this.$http.request("api/custom_coupon/get_checked", this.requestParam).then((re) => {
          if (re.code == "success") {
            // 赋值
            this.couponList = re.data;
            // 推荐使用的优惠券
            let rebatePrice = 0;
            // 循环优惠券
            for (let i in this.couponList) {
              /* 商品的总价格，决定是否可用 */
              var totalPrice = 0.0;
              // 循环产品，
              for (let j in this.cartList) {
                // 如果是商品券
                if (this.couponList[i].type_id == 1) {
                  // 判断商品是不是在商品范围
                  var isScope = false;
                  // 循环商品范围
                  for (let k in this.couponList[i].product_scope) {
                    // 如果存在商品范围
                    if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
                  }
                  // 范围内的做计算
                  if (isScope) {
                    totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
                  }
                  // 如果排除商品
                } else if (this.couponList[i].type_id == 3) {
                  // 判断商品是不是在排除范围
                  var isExclude = false;
                  // 循环排除范围
                  for (let k in this.couponList[i].product_exclude) {
                    // 如果存在排除范围
                    if (this.couponList[i].product_exclude[k].product_id == this.cartList[j].product_id) isExclude = true;
                  }
                  // 不在排除内的做计算
                  if (!isExclude) {
                    totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
                  }
                  // 店铺券
                } else {
                  // 折扣券以及满减券的话，计算价格
                  totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
                }
                // 判断价格到不到限额
                this.couponList[i].is_std = parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2));
                // 如果可用的话，并且没有主动选择优惠券
                if (this.couponList[i].is_std) {
                  // 优惠金额
                  let newRebatePrice = 0.0;
                  // 计算满减价格
                  if (this.couponList[i].rebate_type == 1) {
                    // 计算扣减数据
                    newRebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
                  }
                  // 计算折扣价格
                  if (this.couponList[i].rebate_type == 2) {
                    // 折扣
                    newRebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
                    // 减数
                    newRebatePrice = this.$decimal.sub(totalPrice, newRebatePrice.mul(0.1));
                  }
                  // 判断哪个比较优惠
                  if (parseFloat(rebatePrice.toFixed(2)) < parseFloat(newRebatePrice.toFixed(2))) {
                    // 覆盖价格
                    rebatePrice = parseFloat(newRebatePrice.toFixed(2));
                    // 选中
                    this.checkedCoupon(i);
                  }
                }
              }
            }
          }
        });
        // 计算价格
        this.priceHandler();
      }
    });
    // 地址列表
    this.getAddrList();
  },
  methods: {
    // 地址弹出层
    showAddrPopup() {
      // 显示下单弹出层
      this.$refs.addrPopup.open("bottom");
    },
    // 价格计算
    priceHandler() {
      // 总价格
      let priceTotal = 0;
      // 循环处理
      for (let index in this.cartList) {
        priceTotal = this.$decimal.add(priceTotal, this.$decimal.mul(this.cartList[index].price, this.cartList[index].buy_num));
      }
      // 扣减数据
      priceTotal = this.$decimal.sub(priceTotal, this.rebatePrice);
      priceTotal = this.$decimal.sub(priceTotal, this.reduction);
      priceTotal = this.$decimal.sub(priceTotal, this.discount);
      // 小数点保留
      this.priceTotal = priceTotal.toFixed(2);
    },
    // 创建订单
    createOrder() {
      // 不可预约
      if (!this.$checkAccess.alertCity()) return;
      // 需要下单的产品列表
      let productList = [];
      // 循环列表数据
      for (let index in this.cartList) {
        // 购买数量必须大于0的才行
        if (this.cartList[index].buy_num > 0) {
          // 追加需要下单的数据
          productList.push({
            product_id: this.cartList[index].product_id,
            buy_num: this.cartList[index].buy_num,
            product_skuid: this.cartList[index].skuid,
          });
        }
      }
      if (productList.length <= 0) {
        uni.showToast({
          title: "未选择可预约的产品",
          icon: "none",
        });
        return;
      }
      // 地址未填
      if (!this.checkedAddr.id) {
        uni.showToast({
          title: "请选择收货地址",
          icon: "none",
        });
        return;
      }
      //需要下单的产品信息参数传给OrederCompletion页面
      let productInfo = [];
      for (let index in this.cartList) {
        // 购买数量必须大于0的才行
        if (this.cartList[index].buy_num > 0) {
          // 追加需要下单的数据
          productInfo.push({
            name: this.cartList[index].name,
            spec: this.cartList[index].spec,
            price: this.cartList[index].price,
          });
        }
      }
      // 转成json字符串
      productInfo = JSON.stringify(productInfo);
      //加密json格式成编码数组
      let encodedArray = encodeURIComponent(productInfo);
      // 转成json字符串传输
      productList = JSON.stringify(productList);
      // 请求接口
      this.$http
        .request(
          "api/orders/create",
          {
            product_list: productList,
            custom_coupon_id: this.customCoupon,
            is_cart: 1,
            addr_id: this.checkedAddr.id,
          },
          "post"
        )
        .then((re) => {
          // 判断结果
          if (re.code == "success") {
            // 跳转到报单完成页面
            let orderInfo = re.data;
            orderInfo = JSON.stringify(orderInfo);
            let params = encodeURIComponent(orderInfo);
            uni.navigateTo({ url: `/pages/orders/confirm?params=${params}` });
            return;
          } else {
            uni.showToast({
              title: re.msg,
              icon: "none",
            });
          }
        });
    },
    // 弹出优惠券
    popupCoupon() {
      this.$refs.popup.open();
    },
    // 选择优惠券
    checkedCoupon(index) {
      // 单个设置选中/未选
      this.couponList[index].checked = this.couponList[index].checked ? 0 : 1;
      // 循环处理
      for (let i in this.couponList) {
        // 有未选的就不做全选
        if (index != i) this.couponList[i].checked = 0;
      }
      // 如果未选中，提示可用
      if (!this.couponList[index].checked) this.couponUsed = "去使用 >";
      // 已经选择的优惠券ID
      this.customCoupon = this.couponList[index].checked ? this.couponList[index].id : 0;
      // 计算扣减
      this.couponRebate();
      // 计算价格
      this.priceHandler();
      // 关闭弹窗
      this.$refs.popup.close();
    },
    // 计算优惠券扣减
    couponRebate() {
      // 默认扣减0
      this.rebatePrice = 0;
      // 循环优惠券
      for (let i in this.couponList) {
        // 判断是否选中
        if (!this.couponList[i].checked) {
          // 未选择的不管
          continue;
        }
        /* 商品的总价格，决定是否可用 */
        var totalPrice = 0.0;
        // 循环产品，
        for (let j in this.cartList) {
          // 如果是商品券
          if (this.couponList[i].type_id == 1) {
            // 判断商品是不是在商品范围
            var isScope = false;
            // 循环商品范围
            for (let k in this.couponList[i].product_scope) {
              // 如果存在商品范围
              if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
            }
            // 范围内的做计算
            if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
            // 店铺券
          } else {
            // 折扣券以及满减券的话，计算价格
            totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
          }
        }
        // 如果是可以用的话
        if (parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2))) {
          // 扣减金额
          let rebatePrice = 0;
          // 满减
          if (this.couponList[i].rebate_type == 1) {
            // 计算扣减数据
            rebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
            // 替换文字
            this.couponUsed = "￥-" + rebatePrice.toFixed(2);
          }
          // 折扣
          if (this.couponList[i].rebate_type == 2) {
            // 折扣
            rebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
            // -0.1 表示折扣
            rebatePrice = this.$decimal.sub(totalPrice, rebatePrice.mul(0.1));
            // 替换文字
            this.couponUsed = "￥-" + rebatePrice.toFixed(2);
          }
          //  赠品
          if (this.couponList[i].rebate_type == 3) {
            // 替换文字
            this.couponUsed = "送" + (this.couponList[i].rebate_scope.length ? this.couponList[i].rebate_scope[0].product_name : "");
          }
          // 小数点保留
          this.rebatePrice = rebatePrice.toFixed(2);
        }
      }
    },
    // 选择地址
    checkedAddrItem(item) {
      this.checkedAddr = item;
      this.$refs.addrPopup.close();
    },
    getAddrList() {
      // 判断数据
      this.$http.request("api/student_addr/get_list").then((callback) => {
        // 获取成功
        if (callback.code == "success") {
          this.addrList = callback.data;
          // 如果有的话
          if (this.addrList.length) {
            // 获取默认的
            for (let i in this.addrList) {
              // 如果是默认的
              if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
            }
            // 如果没有默认的话
            if (!this.checkedAddr.id) {
              this.checkedAddr = this.addrList[this.addrList.length - 1];
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="less">
.custom_addr {
  width: 680rpx;
  display: block;
  font-size: 24rpx;
  overflow: hidden;
  margin: 0rpx auto;
  line-height: 40rpx;
  padding: 20rpx 35rpx;
  background-color: #ffffff;
  border-bottom: 2rpx solid #dddddd;

  .contact_user {
    display: block;
    font-size: 24rpx;
    line-height: 50rpx;

    .contact_none {
      font-size: 26rpx;
      font-weight: bold;
    }

    .contact_name {
      font-size: 26rpx;
      font-weight: bold;
      margin-right: 16rpx;
    }

    .contact_more {
      float: right;
      font-size: 40rpx;
      font-weight: bold;
    }

    .contact_shop {
      float: right;
      font-size: 26rpx;
      margin-right: 16rpx;
    }
  }

  .contact_addr {
    width: 620rpx;
    display: block;
    font-size: 24rpx;
    line-height: 30rpx;
    padding: 10rpx 5rpx;
  }
}

.car_list {
  display: block;
  overflow: hidden;
  margin: 0rpx auto;
  margin-top: 20rpx;
  background: #ffffff;

  .car_item {
    height: 170rpx;
    display: block;
    overflow: hidden;
    margin: 0rpx auto;
    padding: 20rpx 35rpx;
    border-bottom: 2rpx solid #dddddd;

    .box_left {
      float: left;
      width: 140rpx;
      height: 190rpx;
      margin-top: 10rpx;

      .car_image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 5rpx;
      }
    }

    .box_center {
      float: left;
      width: 300rpx;
      margin-left: 25rpx;

      .car_name {
        max-height: 70rpx;
        font-size: 30rpx;
        line-height: 40rpx;
        overflow: hidden;
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 隐藏超出的内容 */
        text-overflow: ellipsis;
        /* 用省略号表示被隐藏的部分 */
      }

      .car_spec {
        color: #999999;
        font-size: 24rpx;
        line-height: 60rpx;
        max-height: 60rpx;
        overflow: hidden;
      }

      .promo_title {
        max-height: 80rpx;
        font-size: 20rpx;
        line-height: 40rpx;
        overflow: hidden;
        padding: 0rpx 0rpx;
        color: #dd524d;
      }

      .car_price {
        font-size: 30rpx;
        line-height: 60rpx;

        .price {
          color: red;
        }
      }
    }

    .box_right {
      float: right;
      width: 185rpx;

      .buy_num_box {
        float: right;
        color: #333333;
        overflow: hidden;
        font-size: 24rpx;
        margin-top: 130rpx;
        text-align: center;

        .buy_num {
          float: left;
          width: 100rpx;
          height: 30rpx;
          font-size: 24rpx;
          line-height: 30rpx;
          padding: 0rpx 0rpx;
          border-radius: 8rpx;
        }
      }
    }
  }

  .car_item:last-child {
    border-bottom: none;
  }
}

.to_select_coupon {
  display: block;
  height: 120rpx;
  font-size: 30rpx;
  margin: 20rpx auto;
  background: #ffffff;
  padding: 0rpx 35rpx;
  line-height: 120rpx;

  .coupon_deduction {
    color: red;
    float: right;
    font-size: 26rpx;
  }
}

.to_select_coupon:last-child {
  margin-bottom: 160rpx;
}

.bottom_box {
  left: 0rpx;
  z-index: 9;
  width: 100%;
  height: 140rpx;
  display: block;
  position: fixed;
  overflow: hidden;
  background: #ffffff;
  padding: 0rpx 35rpx;
  bottom: var(--window-bottom);

  .price_box {
    float: left;
    width: 500rpx;
    display: block;
    color: #666666;
    font-size: 26rpx;
    text-align: right;
    line-height: 100rpx;
    margin-right: 20rpx;

    .price_total {
      color: red;
      font-size: 30rpx;
    }
  }

  .to_order {
    float: left;
    width: 180rpx;
    height: 80rpx;
    display: block;
    color: #ffffff;
    font-size: 28rpx;
    margin-top: 10rpx;
    line-height: 80rpx;
    padding: 0rpx 0rpx;
    text-align: center;
    border-radius: 40rpx;
    background-color: #e03519;
  }
}

.popup {
  .popup_title {
    display: block;
    overflow: hidden;
    margin: 0rpx auto;
    font-size: 36rpx;
    height: 120rpx;
    line-height: 120rpx;
    padding: 0rpx 20rpx;
    border-bottom: 10rpx solid #f8f8f8;

    .to_addr_page {
      float: right;
      color: #f59a23;
      display: block;
      height: 120rpx;
      line-height: 120rpx;
      font-size: 26rpx;
      padding: 0rpx 10rpx;
    }
  }

  .coupon_list {
    display: block;
    overflow: hidden;
    margin: 10rpx auto;
    min-height: 600rpx;
    background: #ffffff;
    padding-bottom: 50rpx;

    .coupon_item {
      height: 200rpx;
      display: block;
      margin: 10rpx auto;
      border-bottom: 2rpx solid #dddddd;

      .box_left {
        float: left;
        width: 160rpx;
        height: 160rpx;
        font-size: 20rpx;
        text-align: center;
        margin-left: 35rpx;
        line-height: 60rpx;
        margin-top: 20rpx;
        background: pink;

        .rebate {
          width: 120rpx;
          height: 60rpx;
          margin: 0rpx auto;
          line-height: 60rpx;
          margin-top: 20rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .box_right {
        float: left;
        width: 485rpx;
        margin-left: 35rpx;
        padding-top: 20rpx;

        .coupon_title {
          width: 485rpx;
          max-height: 80rpx;
          font-size: 30rpx;
          overflow: hidden;
          line-height: 40rpx;
          padding: 0rpx 0rpx;

          .coupon_name {
            float: left;
            height: 40rpx;
            width: 380rpx;
          }

          .coupon_status {
            width: 85rpx;
            float: right;
            color: #999999;
            font-size: 24rpx;
          }
        }

        .product_scope {
          width: 485rpx;
          height: 80rpx;
          color: #999999;
          font-size: 24rpx;
          overflow: hidden;
          line-height: 80rpx;

          .check_label {
            float: right;
            display: block;
            overflow: hidden;
            padding: 20rpx 20rpx;

            .isstd {
              line-height: 40rpx;
            }

            .checkbox {
              float: right;
              width: 40rpx;
              height: 40rpx;
            }
          }
        }

        .coupon_info {
          width: 485rpx;
          max-height: 80rpx;
          font-size: 30rpx;
          overflow: hidden;
          line-height: 40rpx;
          padding: 0rpx 0rpx;

          .coupon_exp {
            float: left;
            font-size: 20rpx;
          }
        }
      }
    }

    .coupon_item:last-child {
      border-bottom: none;
    }
  }

  .addr_list {
    width: 730rpx;
    display: block;
    overflow: hidden;
    margin: 0rpx auto;
    min-height: 500rpx;

    .addr_item {
      display: block;
      font-size: 24rpx;
      overflow: hidden;
      line-height: 40rpx;
      padding: 15rpx 10rpx;
      border-radius: 15rpx;
      border-bottom: 2rpx solid #dddddd;

      .radio_label {
        width: 40rpx;
        float: left;
        height: 50rpx;
        padding-top: 30rpx;
        margin-right: 20rpx;

        .radio_icon {
          float: left;
          width: 40rpx;
          height: 40rpx;
        }
      }

      .contact_user {
        float: left;
        width: 640rpx;
        display: block;
        height: 50rpx;
        font-size: 24rpx;
        line-height: 50rpx;

        .contact_name {
          font-size: 26rpx;
          font-weight: bold;
          margin-right: 16rpx;
        }

        .contact_default {
          color: #f59a23;
          font-size: 20rpx;
          margin-left: 16rpx;
          border: 1rpx solid #f59a23;
        }

        .contact_shop {
          float: right;
          font-size: 26rpx;
          margin-right: 16rpx;
        }
      }

      .contact_addr {
        float: left;
        width: 640rpx;
        display: block;
        font-size: 24rpx;
        line-height: 30rpx;
        padding: 10rpx 5rpx;
      }
    }
  }

  .create_box {
    height: 140rpx;
    display: block;

    .create_addr {
      width: 700rpx;
      height: 80rpx;
      display: block;
      color: #ffffff;
      font-size: 30rpx;
      overflow: hidden;
      line-height: 80rpx;
      padding: 0rpx 0rpx;
      text-align: center;
      margin: 0rpx auto;
      margin-top: 20rpx;
      border-radius: 40rpx;
      background-color: #e03519;
    }
  }
}
</style>