kailin_mp/pages/product/index.vue

<template>
  <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
  <view>
    <view class="product_image_box" v-if="!productInfo.photo_list.length">
      <image class="product_image" :src="sku_thumb"></image>
    </view>
    <view class="product_image_box" v-if="productInfo.photo_list.length">
      <swiper class="photo_list" :autoplay="true">
        <swiper-item v-for="(item, index) in productInfo.photo_list" :key="index">
          <image :src="item.thumb" class="photo_image"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="product_info">
      <view class="stock_price" v-if="isShowPrice">
        <view class="product_price">
          <text>￥{{ productInfo.price }} </text>
          <text class="product_market">￥{{ productInfo.market_price }} </text>
        </view>
      </view>
      <view class="product_name">
        <text v-if="productInfo.regiment_title" class="regiment_title">{{ productInfo.regiment_title }}</text>
        <text v-if="productInfo.promo_title" class="regiment_title">{{ productInfo.promo_title }}</text>
        {{ productInfo.name }}
      </view>
      <view class="product_spec">
        <view class="spec_name">{{ productInfo.spec }}</view>
        <view class="product_stock">剩{{ productInfo.stock }}个</view>
      </view>
    </view>
    <view class="regiment_list" v-if="productInfo.regiment_list.length">
      <view class="regiment_list_title">
        <text class="title1">{{ productInfo.regiment_list.length }}人正在拼单</text>
        <text class="title2" @click="openRegiment()">查看更多</text>
      </view>
      <view class="regiment">
        <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="2000" :circular="true" :vertical="true" :display-multiple-items="2" easing-function="linear">
          <swiper-item v-for="item in productInfo.regiment_list" :key="index">
            <view class="swiper-item">
              <view class="username">
                <image class="user_image" :src="item.userpic"></image>
                <text class="username_text">{{ item.username }}</text>
              </view>
              <view class="regiment_right">
                <button class="regiment_but" data-eventsync="true" @click="showSpecPopup(4, item.id)">去拼单</button>
              </view>
              <view class="regiment_center">
                <view class="regiment_center_text">还差{{ item.surplus_number }}人成团</view>
                <view class="regiment_center_time">
                  <view class="center_title">还剩</view>
                  <uni-countdown color="#E03519" :show-day="false" :hour="remainder(item.end_time, 1)" :minute="remainder(item.end_time, 2)" :second="remainder(item.end_time, 3)"></uni-countdown>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="product_business" v-if="productInfo.business_info.name">
      <image class="logopic" :src="productInfo.business_info.logopic"></image>
      <view class="business_info">
        <view class="business_name">
          {{ productInfo.business_info.name }}
        </view>
        <view class="business_desc">
          {{ productInfo.business_info.desc }}
        </view>
      </view>
    </view>
    <view class="product_description">
      <rich-text :nodes="productInfo.description"></rich-text>
    </view>
    <view class="product_poster" v-if="productInfo.poster">
      <image class="product_image" :src="productInfo.poster" mode="widthFix"></image>
    </view>
    <view class="order_car" v-if="productInfo.regiment_type === 2">
      <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
        <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/car.png" class="car_icon"></image>
      </navigator>
      <button class="show_order" data-eventsync="true" @click="showSpecPopup(3)">{{ this.productInfo.regiment_title }}专享/{{ this.productInfo.regiment_price }}</button>
      <button class="show_car" data-eventsync="true" @click="showSpecPopup(1)">单独预约/{{ this.productInfo.price }}</button>
    </view>
    <view class="order_car" v-else-if="productInfo.regiment_type === 1">
      <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
        <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/car.png" class="car_icon"></image>
      </navigator>
      <view class="show_order_regiment" @click="showSpecPopup(4)">
        <view>立即参与多人团拼单</view>
        <view class="regiment_countdown">
          <uni-countdown
            color="#FFFFFF"
            :show-day="false"
            :hour="remainder(productInfo.automatic_info.end_time, 1)"
            :minute="remainder(productInfo.automatic_info.end_time, 2)"
            :second="remainder(productInfo.automatic_info.end_time, 3)"
          ></uni-countdown>
        </view>
      </view>
    </view>
    <view class="order_car" v-else>
      <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
        <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/car.png" class="car_icon"></image>
      </navigator>
      <button class="show_order" data-eventsync="true" @click="showSpecPopup(1)">立即预约</button>
      <button class="show_car" data-eventsync="true" @click="showSpecPopup(2)">加入购物车</button>
    </view>
    <view class="to_bottom"> --- 到底了 --- </view>
    <uni-popup ref="specPopup" :show="true" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
      <view class="order_info">
        <view class="custom_addr" v-if="specBtnType == 1 || specBtnType == 3 || specBtnType == 4" @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>
            <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
              <text v-if="checkedAddr.shop_type">&nbsp;({{ $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type] }})</text>
              {{ checkedAddr.contact_shop }}
            </view>
          </view>
          <view class="contact_addr" style="display: flex">
            {{ checkedAddr.contact_province }} {{ checkedAddr.contact_city }} {{ checkedAddr.contact_area }}
            {{ checkedAddr.contact_addr }}
          </view>
        </view>
        <view class="car_item">
          <view class="box_left">
            <image class="car_image" :src="sku_thumb" mode=""></image>
          </view>
          <view class="box_right">
            <view class="car_name">{{ productInfo.name }}</view>
            <view v-if="productInfo.promo_title" class="promo_title">{{ productInfo.promo_title }}</view>
            <view class="stock_price">
              <view class="product_price" v-if="isShowPrice">
                <text v-if="specBtnType == 1">￥{{ productInfo.price }} </text>
                <text v-if="specBtnType == 3 || specBtnType == 4">￥{{ productInfo.regiment_price }} </text>
                <text class="car_market">￥{{ productInfo.market_price }}</text>
              </view>
              <view class="product_quantity_box">
                <button class="product_quantity_sub" @click="changeQuantity(-1)" data-eventsync="true">
                  <image class="sub_icon" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/sub_icon.png" mode=""></image>
                </button>
                <input type="number" class="product_quantity" placeholder="数量" v-model="quantity" @blur="changeQuantity(0)" />
                <button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
                  <image class="add_icon" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/add_icon.png" mode=""></image>
                </button>
              </view>
            </view>
            <view class="product_stock">剩{{ productInfo.stock }}个</view>
          </view>
        </view>
        <view class="select_sku" v-if="productInfo.product_attr.length">
          <scroll-view scroll-y="true" class="scroll_max">
            <view class="product_attr" v-for="(spec, spec_index) in productInfo.product_attr" :key="spec_index">
              <scroll-view scroll-y="true" class="scroll_y">
                <view class="spec_name">{{ spec.spec_name }}</view>
                <view class="arrt_list">
                  <view class="arrt_option" :class="option.active ? 'active' : ''" v-for="(option, attr_index) in spec.attr_list" :key="attr_index" @click="attrChange(spec_index, attr_index)">
                    <text> {{ option.name }}</text> <text v-if="option.remark">【{{ option.remark }}】</text>
                  </view>
                </view>
              </scroll-view>
            </view>
          </scroll-view>
        </view>
        <!-- 选择优惠券 -->
        <view class="to_select_coupon" v-if="specBtnType == 1" @click="openCoupon()">
          <text>优惠券</text>
          <view class="coupon_deduction">{{ couponUsed }}</view>
        </view>
        <view class="order_price" v-if="specBtnType == 1 || specBtnType == 3">合计： ￥{{ priceTotal }}</view>
        <view class="order_btn">
          <button class="to_order" @click="createOrder()" v-if="specBtnType == 1" data-eventsync="true">预约</button>
          <button class="to_car" @click="createCart()" v-if="specBtnType == 2" data-eventsync="true">加入购物车</button>
          <button class="to_order" @click="createOrder()" v-if="specBtnType == 3" data-eventsync="true">拼团预约</button>
          <button class="to_order" @click="createOrder()" v-if="specBtnType == 4" data-eventsync="true">{{ productInfo.regiment_title }}预约</button>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="couponPopup" type="bottom" class="popup" background-color="#FFFFFF">
      <view class="popup_title">优惠券</view>
      <view class="coupon_list">
        <view class="coupon_item" v-for="(item, index) in couponList" @click="checkedCoupon(index, false)" :key="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">{{ item.is_scope ? "当前商品可用" : "当前商品不可用" }}</text>
              <text class="" v-if="item.type_id == 2">全场可用</text>
              <text class="" v-if="item.type_id == 3">{{ item.is_scope ? "当前商品可用" : "当前商品不可用" }}</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 ? 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/checked.png' : 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/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/index?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 ? 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/radioed.png' : 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/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 class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
              <text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text>
              {{ item.contact_shop }}
            </view>
          </view>
          <view class="contact_addr" style="display: flex"> {{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }} </view>
        </view>
      </view>
      <view class="create_box">
        <navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
      </view>
    </uni-popup>
    <uni-popup ref="addFollow" type="center" class="center_popup" @change="popupChange">
      <view class="add_follow">
        <view class="close_area"><button class="close_btn" @click="closeAddFollow()">关闭</button></view>
        <view class="info_alter">
          <text v-if="follow_linkurl">点击二维码添加客服</text>
          <text v-if="!follow_linkurl">长按二维码添加客服</text>
        </view>
        <view class="qr_code_area" @click="followLinkurl">
          <image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress> </image>
        </view>
        <view class="rule_info">
          <view class="">报单规则：</view>
          <view class="">1、预约报单需要添加客服人员</view>
          <view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
          <view class="">3、开始预约报单</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="regiment" type="bottom" class="popup" background-color="#FFFFFF">
      <view class="popup_title">可参与的拼单</view>
      <view class="regiment_popup_list">
        <view class="regiment_popup_item" v-for="(item, index) in productInfo.regiment_list" @click="checkedCoupon(index, false)" :key="index">
          <view class="username">
            <image class="user_image" :src="item.userpic"></image>
            <text class="username_text">{{ item.username }}</text>
          </view>
          <view class="regiment_right">
            <button class="regiment_but" data-eventsync="true" @click="showSpecPopup(4, item.id)">去拼单</button>
          </view>
          <view class="regiment_center">
            <view class="regiment_center_text">还差{{ item.surplus_number }}人成团</view>
            <view class="regiment_center_time">
              <view class="center_title">还剩</view>
              <uni-countdown color="#E03519" :show-day="false" :hour="remainder(item.end_time, 1)" :minute="remainder(item.end_time, 2)" :second="remainder(item.end_time, 3)"></uni-countdown>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      show: false, // 使用Popup组件时,阻止禁止滚动穿透
      productInfo: {
        id: 0,
        name: "",
        price: "0.00",
        market_price: "0.00",
        spec: "",
        stock: 0,
        thumb: "",
        poster: "",
        description: "",
        regiment_title: "",
        promo_title: "",
        automatic_info: {
          end_time: "",
        },
        regiment_active: [],
        business_info: {
          name: "",
          logopic: "",
          desc: "",
        },
        regiment_price: "0.00",
        regiment_quota: 0,
        regiment_list: [],
        product_attr: [],
        photo_list: [],
        product_sku: [],
        regiment_type: 0,
        regiment_number: 0,
      },
      requestParam: {
        id: 0,
      },
      // 数量
      quantity: 1,
      // 总价
      priceTotal: "0.00",
      // 优惠券列表
      couponList: [],
      // 总价
      priceTotal: "0.00",
      // 优惠券使用
      couponUsed: "去使用 >",
      // 扣减金额
      rebatePrice: 0.0,
      // 已经选择的优惠券ID
      customCoupon: 0,
      // 规格选择按钮类型
      specBtnType: 1, // 1预约。2购物车。3拼团
      // 地址列表
      addrList: [],
      // 已选地址
      checkedAddr: {
        id: 0,
        contact_name: "",
        contact_shop: "",
        contact_phone: "",
        contact_province: "",
        contact_city: "",
        contact_area: "",
        contact_addr: "",
        is_default: 0,
        show_type: 0,
      },
      // 客服二维码
      followQrcode: "",
      // 二维码链接
      follow_linkurl: "",
      // 是否登录状态
      isShowPrice: false,
      // 选择的skuid
      sku_id: 0,
      sku_thumb: "",
      regiment_id: 0,
      specBtnType: 0,
    };
  },
  onLoad(param) {
    // 接受路由参数，产品ID
    this.requestParam.id = param.product_id;
    // 如果有scene参数的话，获取其中的ID
    if (param.scene) {
      // 转键值对参数
      let scene = this.$http.strToParam(param.scene);
      // 如果没有传入ID，但是传入了场景ID，获取场景ID
      if (!param.product_id && scene.id) this.requestParam.id = scene.id;
    }
    var that = this;
    // 监听地址变动
    uni.$on("addr_list_change", function (data) {
      // 地址列表
      that.addrList = data.list;
    });
    // #ifdef MP-WEIXIN
    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    // #endif
  },
  onShareAppMessage(obj) {
    return {
      title: `999智控终端平台\n${this.productInfo.name}`,
      path: "/pages/product/index?product_id=" + this.productInfo.id,
      promise: new Promise((resolve, reject) => {
        this.$http.request("api/share_message/get_item", { item_id: this.productInfo.id, pages: "/pages/product/index" }).then((callback) => {
          console.log(callback, "api/share_message/get_item");
          let obj = {
            title: callback.data?.title == "" ? `999智控终端平台\n${this.productInfo.name}` : callback.data.title,
            path: "/pages/product/index?product_id=" + this.productInfo.id,
          };
          if (callback.data?.image_url !== "") {
            obj.imageUrl = callback.data.image_url;
          }
          resolve(obj);
        });
      }),
    };
  },
  onShow() {
    // 没有添加客服就不显示
    this.isShowPrice = this.$checkAccess.checkShowPrice();
    // 如果有添加二维码的话，获取客户信息
    if (this.$checkAccess.getFollowQrcode()) {
      // 判断数据
      this.$http.request("api/custom/get_info").then((callback) => {
        if (callback.code == "success") {
          if (!callback.data.userpic) callback.data.userpic = "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png";
          // 存储登录标识
          uni.setStorageSync("userInfo", callback.data);
        }
      });
    }
    // 如果存在产品ID的话
    if (this.requestParam.id > 0) {
      // 请求详情
      this.$http.request("api/product/get_detail", this.requestParam).then((re) => {
        // 成功渲染数据
        if (re.code == "success") {
          // 刷新数据
          this.productInfo = re.data;
		  // 
          if (this.productInfo.automatic_info.id) {
            this.regiment_id = this.productInfo.automatic_info.id;
          }
		  //设置默认sku
		  this.sku_id = 0;
		  // 显示图片
		  this.sku_thumb = this.productInfo.thumb;
		  // 如果只有一个SKU，默认选择一个
          if (this.productInfo.product_sku.length == 1) {
			// 设置对应的属性已经选中
            if ( this.productInfo.product_attr[0].attr_list.length && this.productInfo.product_attr[0].attr_list.length > 0 ) {
              this.attrChange(0,0);
            }
          }
        } else {
          if (re.code != "no_login") {
            uni.showModal({
              content: re.msg,
              showCancel: false,
            });
          }
        }
      });
    }
  },
  methods: {
    //计算剩余时间
    remainder(end_time, type) {
      const now = Math.floor(Date.now() / 1000);
      const distance = end_time - now;

      if (distance < 0) {
        return 0;
      }
      const hours = Math.floor(distance / (60 * 60));
      const minutes = Math.floor((distance % (60 * 60)) / 60);
      const seconds = Math.floor(distance % 60);
      if (type === 1) {
        return hours;
      }
      if (type === 2) {
        return minutes;
      }
      if (type === 3) {
        return seconds;
      }
    },
    // 地址弹出层
    showAddrPopup() {
      // 显示下单弹出层
      this.$refs.addrPopup.open("bottom");
    },
    // 规格弹出层
    showSpecPopup(type, regiment_id = 0) {
      // 登录提示
      if (!this.$checkAccess.alterLogin()) return;
      // 判断是否弹出
      // if (this.$checkAccess.getFollowQrcode()) return this.openAddFollow();
      if (regiment_id) {
        this.regiment_id = regiment_id;
      }
      // 显示类型，1预约，2购物车,3拼团
      this.specBtnType = type;
      // 恢复优惠券使用按钮
      this.couponUsed = "去使用 >";
      // 恢复扣减金额
      this.rebatePrice = 0.0;
      // 选择优惠券重置
      this.customCoupon = 0;
      // 计算价格
      this.priceHandler();
      // 显示下单弹出层
      this.$refs.specPopup.open("bottom");
      // 结果
      this.$http.request("api/custom_coupon/get_checked", this.requestParam).then((re) => {
        if (re.code == "success") {
          // 赋值
          this.couponList = re.data;
          // 优惠券是否可用
          this.checkCoupon();
        }
      });
      // 地址列表
      this.getAddrList();
      //只有一组sku时是否下架
      if (this.productInfo.product_sku.length === 1) {
        this.defaultSkuStatus();
      }
    },
    // 拼团列表弹出层
    openRegiment() {
      this.$refs.regiment.open("bottom");
    },
    // 优惠券弹出层
    openCoupon() {
      this.$refs.couponPopup.open("bottom");
    },
    // 数量调整
    changeQuantity(number) {
      // 如果不是0.表示两侧按钮点击，0表示输入的修改
      if (number != 0) {
        // 计算个数
        this.quantity = parseInt(this.quantity) + parseInt(number);
      }
      // 如果大于库存设置为库存
      if (this.quantity > this.productInfo.stock) {
        this.quantity = this.productInfo.stock;
        uni.showToast({
          title: "库存不足",
          icon: "none",
        });
      }
      if ((this.specBtnType === 3 || this.specBtnType == 4) && this.quantity > this.productInfo.regiment_quota) {
        this.quantity = this.productInfo.regiment_quota;
        uni.showToast({
          title: "拼团限购" + this.productInfo.regiment_quota + "份",
          icon: "none",
        });
      }
      // 如果小于1.设置为1
      if (this.quantity < 1) {
        this.quantity = 1;
        uni.showToast({
          title: "数量不可以小于0",
          icon: "none",
        });
      }
      // 计算价格
      this.priceHandler();
      // 优惠券是否可用
      this.checkCoupon();
    },
    // 创建订单
    createOrder() {
      // 不可预约
      if (!this.$checkAccess.alertCity()) return;
      // 如果有SKU，但是没有选择
      if (this.productInfo.product_sku.length && !this.sku_id) {
        // 选择提示
        let skuname = [];
        // 循环产品属性
        for (let i in this.productInfo.product_attr) {
          // 属性名称
          skuname.push(this.productInfo.product_attr[i].spec_name);
        }
        uni.showToast({
          title: "请选择" + skuname.join(" 与 "),
          icon: "none",
        });
        return;
      }
      // 下单数量小于0
      if (this.quantity < 1) {
        uni.showToast({
          title: "至少购买1个",
          icon: "none",
        });
        return;
      }
      // 如果大于库存设置为库存
      if (this.productInfo.stock < 1) {
        uni.showToast({
          title: "库存不足",
          icon: "none",
        });
        return;
      }
      // 如果大于库存设置为库存
      if (this.productInfo.stock < this.quantity) {
        this.quantity = this.productInfo.stock;
        uni.showToast({
          title: "库存不足",
          icon: "none",
        });
        return;
      }
      if (this.specBtnType === 3 || this.specBtnType === 4) {
        if (this.quantity > this.productInfo.regiment_quota) {
          this.quantity = this.productInfo.regiment_quota;
          uni.showToast({
            title: "拼团限购" + this.productInfo.regiment_quota + "份",
            icon: "none",
          });
          return;
        }
        const timestamp = Math.round(new Date().getTime() / 1000).toString();
        if (timestamp > this.productInfo.regiment_active.end_time) {
          uni.showToast({
            title: "拼团活动已结束",
            icon: "none",
          });
          return;
        }
        if (this.specBtnType === 4 && timestamp > this.productInfo.automatic_info.end_time) {
          uni.showToast({
            title: "该团已过期",
            icon: "none",
          });
          return;
        }
      }
      // 地址未填
      if (!this.checkedAddr.id) {
        this.showAddrPopup();
        return;
      }
      //需要下单的产品信息参数传给completion页面
      let productInfo = [
        {
          name: this.productInfo.name,
          spec: this.productInfo.spec,
          price: this.productInfo.price,
        },
      ];
      //转成json字符串
      productInfo = JSON.stringify(productInfo);
      //加密json格式成编码数组
      let encodedArray = encodeURIComponent(productInfo);
      // 需要下单的产品列表
      let productList = [
        {
          product_id: this.productInfo.id,
          buy_num: this.quantity,
          product_skuid: this.sku_id,
        },
      ];
      // 转成json字符串传输
      productList = JSON.stringify(productList);
      if (this.specBtnType === 3 || this.specBtnType === 4) {
        //拼团
        // 请求接口
        this.$http
          .request(
            "api/orders/create_regiment",
            {
              product_list: productList,
              custom_coupon_id: this.customCoupon,
              addr_id: this.checkedAddr.id,
              btn_type: this.specBtnType,
              regiment_id: this.regiment_id,
              regiment_active_id: this.productInfo.regiment_active_id,
            },
            "post"
          )
          .then((re) => {
            // 判断结果
            if (re.code == "success") {
              // 处理结果
              this.productInfo.stock = this.productInfo.stock - this.quantity;
              // 关闭弹窗
              this.$refs.specPopup.close();
              // 跳转到报单完成页面
              uni.navigateTo({
                url: `/pages/orders/completion?params=${encodedArray}`,
              });
            } else {
              uni.showModal({
                title: re.msg,
                showCancel: false,
              });
            }
          });
      } else {
        // 请求接口
        this.$http
          .request(
            "api/orders/create",
            {
              product_list: productList,
              custom_coupon_id: this.customCoupon,
              addr_id: this.checkedAddr.id,
            },
            "post"
          )
          .then((re) => {
            // 判断结果
            if (re.code == "success") {
              // 处理结果
              this.productInfo.stock = this.productInfo.stock - this.quantity;
              // 关闭弹窗
              this.$refs.specPopup.close();
              // 跳转到报单完成页面
              uni.navigateTo({
                url: `/pages/orders/completion?params=${encodedArray}`,
              });
            } else {
              uni.showModal({
                title: re.msg,
                showCancel: false,
              });
            }
          });
      }
    },
    // 加入购物车
    createCart() {
      // 不可预约
      if (!this.$checkAccess.alertCity()) return;
      // 如果有SKU，但是没有选择
      if (this.productInfo.product_sku.length && !this.sku_id) {
        // 选择提示
        let skuname = [];
        // 循环产品属性
        for (let i in this.productInfo.product_attr) {
          // 属性名称
          skuname.push(this.productInfo.product_attr[i].spec_name);
        }
        uni.showToast({
          title: "请选择" + skuname.join(" 与 "),
          icon: "none",
        });
        return;
      }
      // 下单数量小于0
      if (this.quantity < 1) {
        uni.showToast({
          title: "至少购买1个",
        });
        return;
      }
      // 如果库存不足
      if (this.productInfo.stock < 1) {
        uni.showToast({
          title: "库存不足",
          icon: "none",
        });
        return;
      }
      // 如果大于库存设置为库存
      if (this.productInfo.stock < this.quantity) {
        this.quantity = this.productInfo.stock;
        uni.showToast({
          title: "库存不足",
          icon: "none",
        });
        return;
      }
      // 商品信息
      let data = {
        product_id: this.productInfo.id,
        buy_num: this.quantity,
        skuid: this.sku_id,
      };
      // 请求接口
      this.$http.request("api/shop_cart/add", data, "post").then((re) => {
        // 判断结果
        if (re.code == "success") {
          // 跳转到订单列表
          uni.showToast({
            icon: "success",
            title: "加入购物车成功",
          });
          // 关闭结果
          this.$refs.specPopup.close();
        } else {
          // 跳转到订单列表
          uni.showToast({
            icon: "error",
            title: "加入购物车失败",
          });
        }
      });
    },
    // 检查优惠券是否可用
    checkCoupon() {
      // 如果存在的话
      if (this.couponList.length) {
        // 推荐使用的优惠券
        let oldrebatePrice = 0.0;
        let hasIsStd = false;
        // 循环优惠券
        for (let i in this.couponList) {
          /* 商品的总价格，决定是否可用 */
          let totalPrice = 0.0;
          // 如果是商品券
          if (this.couponList[i].type_id == 1) {
            // 判断商品是不是在商品范围
            let isScope = false;
            // 循环商品范围
            for (let k in this.couponList[i].product_scope) {
              // 如果存在商品范围
              if (this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
            }
            // 范围内的做计算
            if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo.price, this.quantity));
            // 是否在可用范围
            this.couponList[i].is_scope = isScope;
            // 排除券
          } else if (this.couponList[i].type_id == 3) {
            // 判断商品是不是在商品范围
            let isScope = true;
            // 循环排除范围
            for (let k in this.couponList[i].product_exclude) {
              // 如果在排除范围
              if (this.couponList[i].product_exclude[k].product_id == this.productInfo.id) isScope = false;
            }
            // 范围内的做计算
            if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo.price, this.quantity));
            // 是否在可用范围
            this.couponList[i].is_scope = isScope;
            // 店铺券
          } else {
            // 店铺券
            totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo.price, this.quantity));
            // 是否在可用范围
            this.couponList[i].is_scope = true;
          }
          // 判断价格到不到限额
          this.couponList[i].is_std = parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed());
          // 如果不可用的话，该项已选择则不选
          if (!this.couponList[i].is_std && this.couponList[i].checked) this.checkedCoupon(i, false);
          // 如果可用的话，并且优惠券没有选中
          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(oldrebatePrice.toFixed(2)) <= parseFloat(newRebatePrice.toFixed(2))) {
              // 覆盖价格
              oldrebatePrice = parseFloat(newRebatePrice.toFixed(2));
              // 如果选中的是自己，不需要取消
              if (this.customCoupon == this.couponList[i].id && this.couponList[i].checked) {
                // 选中
                this.checkedCoupon(i, true);
              } else {
                // 选中
                this.checkedCoupon(i, false);
              }
            }
          }
        }
      }
    },
    // 选择优惠券
    checkedCoupon(index, save_checked = false) {
      // 单个设置选中/未选（如果保持选中，则不变）
      this.couponList[index].checked = save_checked ? 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.couponPopup.close();
    },
    // 计算价格
    priceHandler() {
      // 总价格
      let priceTotal = 0;
      if (this.specBtnType == 3) {
        priceTotal = this.$decimal.mul(this.productInfo.regiment_price, this.quantity);
      } else {
        priceTotal = this.$decimal.mul(this.productInfo.price, this.quantity);
      }
      // 扣减数据
      priceTotal = priceTotal.sub(this.rebatePrice);
      // 小数点保留
      this.priceTotal = priceTotal.toFixed(2);
    },
    // 计算优惠券扣减
    couponRebate() {
      // 默认扣减0
      this.rebatePrice = 0;
      // 循环优惠券
      for (let i in this.couponList) {
        // 判断是否选中
        if (this.couponList[i].id != this.customCoupon) {
          // 未选择的不管
          continue;
        }
        /* 商品的总价格，决定是否可用 */
        var totalPrice = 0.0;
        // 如果是商品券
        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.productInfo.id) isScope = true;
          }
          // 范围内的做计算
          if (isScope) totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
          // 排除券
        } else if (this.couponList[i].type_id == 3) {
          // 判断商品是不是在商品范围
          var isScope = true;
          // 循环排除范围
          for (let k in this.couponList[i].product_exclude) {
            // 如果存在排除范围
            if (this.couponList[i].product_exclude[k].product_id == this.productInfo.id) isScope = false;
          }
          // 范围内的做计算
          if (isScope) totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
          // 店铺券
        } else {
          // 折扣券以及满减券的话，计算价格
          totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
        }
        // 如果是可以用的话
        if (parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed())) {
          // 扣减金额
          let rebatePrice = this.$decimal.mul(1, 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);
            // 减数
            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);
        }
      }
    },
    popupChange(e) {
      // 禁止滚动穿透
      this.show = e.show;
    },
    // 选择地址
    checkedAddrItem(item) {
      this.checkedAddr = item;
      this.$refs.addrPopup.close();
    },
    getAddrList() {
      // 判断数据
      this.$http.request("api/custom_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];
            }
          }
        }
      });
    },
    // 客服显示
    openAddFollow() {
      // 返回结果
      this.followQrcode = this.$checkAccess.getFollowQrcode();
      // 返回结果
      this.follow_linkurl = this.$checkAccess.getFollowLinkUrl();
      // 有图才展示
      if (this.followQrcode) this.$refs.addFollow.open("center");
    },
    closeAddFollow() {
      this.$refs.addFollow.close();
    },
    // 属性变更
    attrChange(spec_index, attr_index) {
      // 判断当前属性是否选择。选择的跳过
      if (this.productInfo.product_attr[spec_index].attr_list[attr_index].active) return;
      // 先记录当前规格下所有属性原来的active状态
      let originalActiveStates = {};
      for (let i in this.productInfo.product_attr[spec_index].attr_list) {
        originalActiveStates[i] = this.productInfo.product_attr[spec_index].attr_list[i].active;
      }
      //循环规格下的属性
      for (let i in this.productInfo.product_attr[spec_index].attr_list) {
        // 全部改为未选中
        this.productInfo.product_attr[spec_index].attr_list[i].active = 0;
      }
      //选择选项
      this.productInfo.product_attr[spec_index].attr_list[attr_index].active = 1;
      //选中的规格
      var attr_ids = [];
      // 循环规格
      for (let i in this.productInfo.product_attr) {
        // 再循环属性
        for (let j in this.productInfo.product_attr[i].attr_list) {
          // 如果选中的
          if (this.productInfo.product_attr[i].attr_list[j].active) {
            attr_ids.push(this.productInfo.product_attr[i].attr_list[j].id);
          }
        }
      }
      // 转成字符串
      var attrids = attr_ids.join(",");
      // 如果选项不足的话
      if (attr_ids.length != this.productInfo.product_attr.length) return;
      // 如果当前点击的属性对应的SKU状态为未下架（初始化为0）
      let currentSKUStatus = 0;
      // 匹配规格
      if (this.productInfo.product_sku.length) {
        // 是否有对应的SKU
        let haveSku = 0;
        // 循环sku
        for (let i in this.productInfo.product_sku) {
          // 如果sku不匹配
          if (this.productInfo.product_sku[i].attr_ids != attrids) continue;
          // 设置有SKU
          haveSku = 1;
          // 获取当前匹配到的SKU的状态
          currentSKUStatus = this.productInfo.product_sku[i].status;
          // 如果商品已经下架（status等于1），则恢复当前规格下所有属性原来的active状态
          if (currentSKUStatus === 1) {
            uni.showToast({
              title: "该规格已下架",
              icon: "none",
            });
            for (let k in originalActiveStates) {
              this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
            }
            continue;
          }
          // 如果商品没有库存
          if (this.productInfo.product_sku[i].stock <= 0) {
            uni.showToast({
              title: "该规格库存不足",
              icon: "none",
            });
            for (let k in originalActiveStates) {
              this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
            }
            continue;
          }
          // 产品价格修改
          this.productInfo.price = this.productInfo.product_sku[i].price;
          // 产品价格修改
          if (this.productInfo.product_sku[i].market_price != 0.0) this.productInfo.market_price = this.productInfo.product_sku[i].market_price;
          // 产品规格修改
          this.productInfo.spec = this.productInfo.product_sku[i].attr_names;
          // 产品库存
          this.productInfo.stock = this.productInfo.product_sku[i].stock;
          // 产品SKU
          this.sku_id = this.productInfo.product_sku[i].id;
          // 有图替换，没图使用产品原缩略图
          this.sku_thumb = this.productInfo.product_sku[i].sku_thumb ? this.productInfo.product_sku[i].sku_thumb : this.productInfo.thumb;
          // 如果有图册
          if (this.productInfo.photo_list.length) {
            this.productInfo.photo_list[0].thumb = this.sku_thumb;
          }
          // 计算价格
          this.priceHandler();
          // 优惠券是否可用
          this.checkCoupon();
        }
        // 如果没有对应的SKU
        if (!haveSku) {
          uni.showToast({
            title: "该规格已下架",
            icon: "none",
          });
          for (let k in originalActiveStates) {
            this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
          }
        }
      }
    },
    //只有一组sku默认规格是否已下架
    defaultSkuStatus() {
      if (this.productInfo.product_sku.length) {
        if (this.productInfo.product_sku[0].status === 1) {
          uni.showToast({
            title: "该规格已下架",
            icon: "none",
          });
          this.productInfo.stock = 0;
          var attr_ids = this.productInfo.product_sku[0].attr_ids.split(",");
          // 循环规格列表
          for (let i in this.productInfo.product_attr) {
            // 再循环属性
            for (let j in this.productInfo.product_attr[i].attr_list) {
              // 如果不等于id
              if (attr_ids.includes(this.productInfo.product_attr[i].attr_list[j].id + "")) {
                // 取消选中
                this.productInfo.product_attr[i].attr_list[j].active = 0;
              }
            }
          }
          return;
        }
      }
    },
    // 去往webview
    followLinkurl() {
      // 获取登录标识
      let userInfo = uni.getStorageSync("userInfo");
      // 如果不存在的话
      if (!userInfo) return "";
      // 未添加好友
      if (!userInfo.follow_linkurl) return "";
      // 获取Url
      let url = userInfo.follow_linkurl;
      // 没有路径，不跳转
      if (!url) return;
      // 判断是不是小程序链接
      if (url.includes("http")) {
        // 转码
        let link_url = encodeURIComponent(url);
        // 跳转到webview
        uni.redirectTo({
          url: `/pages/webview/index?link_url=${link_url}`,
        });
      } else {
        // 跳转到webview
        uni.navigateTo({
          url: url,
        });
      }
    },
  },
};
</script>

<style lang="less">
.product_image_box {
  display: block;
  overflow: hidden;
  background: #ffffff;
  margin: 10rpx auto;

  .product_image {
    display: block;
    margin: 0 auto;
    width: 750rpx;
    height: 750rpx;
  }

  .photo_list {
    display: block;
    width: 750rpx;
    height: 750rpx;
    line-height: 750rpx;
    text-align: center;

    .photo_image {
      width: 750rpx;
      height: 750rpx;
    }
  }
}

.product_info {
  display: block;
  background: #ffffff;
  margin: 10rpx 0rpx;
  padding: 10px 10px;

  .product_name {
    max-height: 80rpx;
    font-size: 30rpx;
    line-height: 40rpx;
    overflow: hidden;
    padding: 10rpx 0rpx;

    .regiment_title {
      background-color: red;
      color: #f9f9f9;
    }
  }

  .product_spec {
    color: #999999;
    font-size: 24rpx;
    line-height: 30rpx;
    overflow: hidden;

    .spec_name {
      float: left;
    }

    .product_stock {
      float: right;
    }
  }

  .stock_price {
    font-size: 20rpx;
    overflow: hidden;
    margin-top: 10rpx;
    line-height: 30rpx;

    .product_price {
      float: left;
      color: red;
      font-size: 38rpx;
      line-height: 60rpx;

      .product_market {
        font-size: 24rpx;
        color: #999999;
        line-height: 30rpx;
        margin-left: 10rpx;
        text-decoration: line-through;
      }
    }
  }
}

// 描述简介
.product_business {
  display: block;
  overflow: hidden;
  padding: 20rpx 20rpx;
  margin: 10rpx auto;
  background: #ffffff;

  .logopic {
    float: left;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .business_info {
    float: left;
    width: 600rpx;
    overflow: hidden;

    .business_name {
      font-size: 26rpx;
      line-height: 40rpx;
    }

    .business_desc {
      color: #999999;
      font-size: 24rpx;
      line-height: 40rpx;
    }
  }
}

.product_description {
  width: 700rpx;
  display: block;
  overflow: hidden;
  background: #ffffff;
  min-height: 600rpx;
  font-size: 26rpx;
  margin: 0rpx auto;
  line-height: 50rpx;
  padding: 10rpx 25rpx;

  [alt] {
    //web_view图片
    max-width: 100%; // 避免图片超宽
    vertical-align: bottom; // 避免图片之间间隙
  }
}

.product_poster {
  display: block;
  overflow: hidden;
  padding: 10rpx 0rpx;
  margin: 10rpx auto;
  background: #ffffff;

  .product_image {
    width: 750rpx;
    display: block;
  }
}

.order_car {
  left: 0rpx;
  width: 750rpx;
  height: 140rpx;
  display: block;
  position: fixed;
  padding-top: 20rpx;
  background: #ffffff;
  bottom: var(--window-bottom);
  border-top: 2rpx solid #dddddd;

  .show_order {
    float: right;
    width: 280rpx;
    height: 80rpx;
    display: block;
    color: #ffffff;
    font-size: 30rpx;
    overflow: hidden;
    line-height: 80rpx;
    padding: 0rpx 0rpx;
    text-align: center;
    margin-right: 35rpx;
    background-color: #e03519;
    border-radius: 0rpx;
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
  }

  .show_order_regiment {
    float: right;
    width: 280rpx;
    height: 80rpx;
    display: block;
    color: #ffffff;
    font-size: 25rpx;
    overflow: hidden;
    padding: 0rpx 0rpx;
    text-align: center;
    margin-right: 35rpx;
    background-color: #e03519;
    border-radius: 20rpx;

    .regiment_countdown {
      padding-left: 50rpx;
    }
  }

  .show_car {
    float: right;
    width: 280rpx;
    height: 80rpx;
    display: block;
    color: #ffffff;
    font-size: 30rpx;
    overflow: hidden;
    line-height: 80rpx;
    padding: 0rpx 0rpx;
    text-align: center;
    background-color: #f59a23;
    border-radius: 0rpx;
    border-top-left-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
  }

  .to_car {
    float: left;
    width: 100rpx;
    height: 60rpx;
    display: block;
    text-align: center;
    margin-left: 35rpx;
    padding-top: 10rpx;

    .car_icon {
      float: left;
      width: 60rpx;
      height: 60rpx;
      display: block;
    }
  }
}

.popup {
  overflow: hidden;

  .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;
    }
  }

  .order_info {
    overflow: hidden;
    background: #ffffff;

    .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_shop {
          float: right;
          font-size: 26rpx;
          margin-right: 16rpx;
        }

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

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

    .car_item {
      height: 200rpx;
      display: block;
      background: #ffffff;
      margin: 20rpx auto;

      .box_left {
        float: left;
        width: 160rpx;
        height: 200rpx;
        margin-left: 35rpx;

        .car_image {
          width: 160rpx;
          height: 160rpx;
          margin: 20rpx 0rpx;
          border-radius: 5rpx;
        }
      }

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

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

        .stock_price {
          width: 485rpx;
          color: #dddddd;
          font-size: 20rpx;
          overflow: hidden;
          margin-top: 10rpx;
          line-height: 30rpx;

          .product_price {
            float: left;
            color: red;
            font-size: 30rpx;
            line-height: 60rpx;

            .car_market {
              font-size: 24rpx;
              color: #999999;
              line-height: 30rpx;
              vertical-align: middle;
              text-decoration: line-through;
            }
          }

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

            .product_quantity_sub {
              float: left;
              border: none;
              height: 36rpx;
              background: none;
              text-align: center;
              line-height: 36rpx;
              padding: 10rpx 10rpx;

              .sub_icon {
                width: 22rpx;
                height: 22rpx;
                display: block;
              }
            }

            .product_quantity_sub::after {
              border: none;
              background: none;
            }

            .product_quantity {
              float: left;
              width: 100rpx;
              height: 36rpx;
              font-size: 24rpx;
              min-height: 36rpx;
              line-height: 36rpx;
              padding: 0rpx 0rpx;
              border-radius: 8rpx;
              border: 2rpx solid #dddddd;
            }

            .product_quantity_add {
              float: left;
              border: none;
              height: 36rpx;
              background: none;
              text-align: center;
              padding: 10rpx 10rpx;
              line-height: 36rpx;

              .add_icon {
                width: 22rpx;
                height: 22rpx;
                display: block;
              }
            }

            .product_quantity_add::after {
              border: none;
              background: none;
            }
          }
        }

        .product_stock {
          font-size: 20rpx;
          line-height: 60rpx;
        }
      }
    }

    .select_sku {
      font-size: 28rpx;
      padding: 20rpx 35rpx;
      margin-bottom: 10rpx;

      .scroll_max {
        height: 440rpx;

        .product_attr {
          display: block;
          overflow: hidden;
          margin-bottom: 20rpx;

          .spec_name {
            display: block;
            height: 40rpx;
            font-size: 28rpx;
            line-height: 40rpx;
          }

          .arrt_list {
            display: block;
            overflow: hidden;
            background-color: #f5f5f5;

            .arrt_option {
              float: left;
              font-size: 28rpx;
              line-height: 40rpx;
              text-align: center;
              border-radius: 6rpx;
              padding: 10rpx 20rpx;
              margin: 10rpx 0rpx;
              margin-right: 20rpx;
              background-color: #eeeeee;
            }

            .arrt_option.active {
              color: #ffffff;
              background-color: #fe6000;
            }
          }
        }
      }
    }

    .to_select_coupon {
      font-size: 28rpx;
      padding: 10rpx 35rpx;
      margin-bottom: 10rpx;

      .coupon_deduction {
        color: red;
        float: right;
      }
    }

    .order_price {
      font-size: 28rpx;
      text-align: right;
      margin: 0rpx 35rpx;
      padding: 10rpx 0rpx;
      border-top: 2rpx solid #dddddd;

      .coupon_deduction {
        color: red;
        float: right;
      }
    }

    .order_btn {
      width: 700rpx;
      height: 100rpx;
      display: block;
      margin: 0 auto;
      margin-top: 20rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 30rpx;

      .to_car {
        color: #ffffff;
        float: right;
        width: 700rpx;
        height: 80rpx;
        display: block;
        overflow: hidden;
        font-size: 30rpx;
        line-height: 80rpx;
        padding: 0rpx 0rpx;
        border-radius: 40rpx;
        border: 0rpx solid transparent;
        background-color: #f59a23;
      }

      .to_car::after {
        border: 0rpx solid transparent;
      }

      .to_order {
        color: #ffffff;
        float: right;
        width: 700rpx;
        height: 80rpx;
        display: block;
        font-size: 30rpx;
        overflow: hidden;
        line-height: 80rpx;
        padding: 0rpx 0rpx;
        border-radius: 40rpx;
        background-color: #e03519;
        border: 0rpx solid transparent;
      }

      .to_order::after {
        border: 0rpx solid transparent;
      }
    }
  }

  .coupon_list {
    display: block;
    overflow: hidden;
    min-height: 600rpx;
    margin: 10rpx auto;
    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;
    }
  }

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

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

      .username {
        float: left;
        padding-left: 20rpx;
        padding-top: 20rpx;

        .user_image {
          float: left;
          display: block;
          width: 80rpx;
          height: 80rpx;
          border-radius: 40%;
        }

        .username_text {
          height: 80rpx;
          line-height: 80rpx;
        }
      }

      .regiment_center {
        float: right;
        padding-right: 18rpx;
        padding-top: 25rpx;

        .regiment_center_text {
          font-size: 25rpx;
        }

        .regiment_center_time {
          font-size: 25rpx;

          .center_title {
            float: left;
          }
        }
      }

      .regiment_right {
        float: right;
        padding-top: 25rpx;

        .regiment_but {
          font-size: 25rpx;
          background-color: #e03519;
          color: #f9f9f9;
        }
      }
    }

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

// 添加客服
.center_popup {
  .add_follow {
    display: block;
    color: #ffffff;
    width: 700rpx;
    height: 800rpx;
    margin: 0 auto;
    font-size: 26rpx;
    border-radius: 40rpx;
    background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);

    .close_area {
      height: 80rpx;
      display: block;
      line-height: 80rpx;

      .close_btn {
        color: #ffffff;
        float: right;
        width: 80rpx;
        height: 80rpx;
        font-size: 26rpx;
        text-align: center;
        line-height: 80rpx;
        padding: 0rpx 0rpx;
        border: 0rpx solid transparent;
        background-color: transparent;
      }

      .close_btn::after {
        border: 0rpx solid transparent;
      }
    }

    .info_alter {
      display: block;
      height: 100rpx;
      font-size: 42rpx;
      font-weight: bold;
      text-align: center;
      line-height: 100rpx;
    }

    .qr_code_area {
      display: block;
      width: 300rpx;
      height: 300rpx;
      margin: 30rpx auto;

      .qr_code {
        float: left;
        width: 300rpx;
        height: 300rpx;
      }
    }

    .save_btn {
      color: #333333;
      display: block;
      width: 260rpx;
      height: 80rpx;
      font-size: 26rpx;
      text-align: center;
      line-height: 80rpx;
      padding: 0rpx 0rpx;
      margin: 40rpx auto;
      border-radius: 40rpx;
      background-color: #ffffff;
      border: 0rpx solid transparent;
    }

    .rule_info {
      width: 600rpx;
      display: block;
      font-size: 26rpx;
      margin: 20rpx auto;
      overflow: hidden;
      line-height: 40rpx;
    }
  }
}

.regiment_list {
  width: 700rpx;
  margin-left: 20rpx;
  background-color: red;
  border-radius: 10px;

  .regiment_list_title {
    padding-top: 20rpx;
    height: 60rpx;

    .title1 {
      margin-top: 20rpx;
      padding-left: 20rpx;
      color: #f9f9f9;
    }

    .title2 {
      padding-left: 350rpx;
      color: #f9f9f9;
    }
  }

  .regiment {
    width: 685rpx;
    height: 250rpx;
    background-color: #f9f9f9;
    margin-left: 10rpx;
    border-radius: 10px;

    .swiper {
      height: 250rpx;

      .swiper-item {
        .username {
          float: left;
          padding-left: 20rpx;
          padding-top: 20rpx;

          .user_image {
            float: left;
            display: block;
            width: 80rpx;
            height: 80rpx;
            border-radius: 40%;
          }

          .username_text {
            height: 80rpx;
            line-height: 80rpx;
          }
        }

        .regiment_center {
          float: right;
          padding-right: 18rpx;
          padding-top: 25rpx;

          .regiment_center_text {
            font-size: 25rpx;
          }

          .regiment_center_time {
            font-size: 25rpx;

            .center_title {
              float: left;
            }
          }
        }

        .regiment_right {
          float: right;
          padding-top: 25rpx;

          .regiment_but {
            font-size: 25rpx;
            background-color: #e03519;
            color: #f9f9f9;
          }
        }
      }
    }
  }
}
</style>