education_mp/pages/product/index.vue

<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view>
    <view class="goback" :style="{top:StatusBarHeight+ 'px'}" @click="goBack">
      <uni-icons type="back" color="#fff" size="20"></uni-icons>
    </view>
    <view class="product_image_box">
      <image class="product_image" :src="productInfo.thumb"></image>
    </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">{{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="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">
      <navigator url="/pages/car/index" open-type="switchTab" class="to_car" >
        <image src="../../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" @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>
          <view class="contact_addr">
            {{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="productInfo.thumb" mode=""></image>
          </view>
          <view class="box_right">
            <view class="car_name">{{productInfo.name}}</view>
            <view class="stock_price">
              <view class="product_price" v-if="isShowPrice">
                <text>￥{{productInfo.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="../../static/icon/sub_icon.png" mode=""></image>
                </button>
                <input type="number" class="product_quantity" placeholder="数量" v-model="quantity" @blur="changeQuantity(0)" ></input>
                <button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
                  <image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
                </button>
              </view>
            </view>
            <view class="product_stock">剩{{productInfo.stock}}个</view>
          </view>
        </view>
        <view class="select_sku" >
          <view class="product_attr" v-for="(spec,spec_index) in productInfo.product_attr" :key="spec_index">
            <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)">
                {{option.name}}
              </view>
            </view>
          </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" >合计： ￥{{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>
        </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)" :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">限定商品可用</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/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? '../../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_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">长按识别二维码添加客服</view>
        <view class="qr_code_area">
          <image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress></image>
        </view>
        <button class="save_btn" @click="saveImage()">保存图片添加客服</button>
        <view class="rule_info">
          <view class="">报单规则：</view>
          <view class="">1、预约报单需要添加客服人员</view>
          <view class="">2、添加完客服人员后返回小程序填写商家资质</view>
          <view class="">3、开始预约报单</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:"",
        business_info:{
          name:"",
          logopic:"",
          desc:"",
        },
        product_attr:[],
        product_sku:[],
      },
      requestParam:{
        id:0,
      },
      // 数量
      quantity:1,
      // 总价
      priceTotal:"0.00",
      // 优惠券列表
      couponList:[],
      // 总价
      priceTotal:'0.00',
      // 优惠券使用
      couponUsed:"去使用 >",
      // 扣减金额
      rebatePrice:0.00,
      // 已经选择的优惠券ID
      customCoupon: 0,
      // 规格选择按钮类型
      specBtnType: 1, // 1预约。2购物车
      // 地址列表
      addrList:[],
      // 已选地址
      checkedAddr:{
        id:0,
        contact_name:"",
        contact_phone:"",
        contact_province:"",
        contact_city:"",
        contact_area:"",
        contact_addr:"",
        is_default:0,
      },
      // 客服二维码
      followQrcode:"",
      // 是否登录状态
      isShowPrice:false,
      // 选择的skuid
      sku_id:0,
    }
  },
  onLoad(param) {
    // 接受路由参数，产品ID
    this.requestParam.id = param.product_id;
    var that = this;
    // 监听地址变动
    uni.$on('addr_list_change',function(data){
      // 地址列表
      that.addrList = data.list;
    })
  },
  onShow() {
    // 没有添加客服就不显示
    this.isShowPrice = this.$checkAccess.getFollowQrcode() ? 0 : 1;
    // 如果存在产品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;
          //设置默认sku
          this.setDefaultSpec();
        }
      });
    };
  },
  methods: {
    // 地址弹出层
    showAddrPopup(){
      // 显示下单弹出层
      this.$refs.addrPopup.open('bottom');
    },
    // 规格弹出层
    showSpecPopup(type){
      // 登录提示
      if( !this.$checkAccess.alterLogin()) return ;
      // 判断是否弹出
      if( this.$checkAccess.getFollowQrcode() ) return this.openAddFollow();
      // 显示类型，1预约，2购物车
      this.specBtnType  = type;
      // 恢复优惠券使用按钮
      this.couponUsed   = "去使用 >";
      // 恢复扣减金额
      this.rebatePrice  = 0.00;
      // 选择优惠券重置
      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();
      }
    },
    // 优惠券弹出层
    openCoupon(){
      this.$refs.couponPopup.open('bottom')
    },
    // 数量调整
    changeQuantity(number){
      // 如果不是0.表示两侧按钮点击，0表示输入的修改
      if( number != 0 ) {
        // 计算个数
        this.quantity 		= this.quantity + number;
      }
      // 如果大于库存设置为库存
      if( this.quantity > this.productInfo.stock ) {
        this.quantity = this.productInfo.stock;
        uni.showToast({
          title:"库存不足",
          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;
      // 下单数量小于0
      if( this.quantity < 1 ) {
        uni.showToast({
          title:"至少购买1个"
        })
        return;
      }
      // 如果大于库存设置为库存
      if( this.productInfo.stock < 1 ) {
        uni.showToast({
          title:"库存不足",
          icon:"none"
        })
        return;
      }
      // 地址未填
      if( !this.checkedAddr.id ) {
        uni.showToast({
          title:"请选择收货地址",
          icon:"none"
        })
        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);
      // 请求接口
      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();
          //订单详情
          let orderInfo = re.data;
          orderInfo = JSON.stringify(orderInfo)
          let params = encodeURIComponent(orderInfo);
          // 跳转到报单完成页面
          uni.navigateTo({url:`/pages/orders/confirm?params=${params}`});
        }else{
          uni.showModal({title:re.msg,showCancel:false});
        }
      });
    },
    // 加入购物车
    createCart(){
      // 不可预约
      if( !this.$checkAccess.alertCity() ) return;
      // 下单数量小于0
      if( this.quantity < 1 ) {
        uni.showToast({
          title:"至少购买1个"
        })
        return;
      }
      // 如果大于库存设置为库存
      if( this.productInfo.stock < 1 ) {
        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 ){
        // 循环优惠券
        for (let i in this.couponList) {
          /* 商品的总价格，决定是否可用 */
          var totalPrice	 = 0.00;
          // 如果是商品券
          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.add(totalPrice,this.$decimal.mul(this.productInfo.price,this.quantity));
            // 店铺券
          }else{
            // 店铺券
            totalPrice				= this.$decimal.add(totalPrice,this.$decimal.mul(this.productInfo.price,this.quantity));
          }
          // 判断价格到不到限额
          this.couponList[i].is_std	= totalPrice.toFixed() >= this.$decimal.mul(this.couponList[i].std_pay,1).toFixed();
        }
      }
    },
    // 选择优惠券
    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.couponPopup.close();
    },
    // 计算价格
    priceHandler(){
      // 总价格
      let 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.00;
        // 如果是商品券
        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{
          // 折扣券以及满减券的话，计算价格
          totalPrice				= this.$decimal.mul(this.productInfo.price,this.quantity);
        }
        // 如果是可以用的话
        if( totalPrice.toFixed() >= 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();
      // 有图才展示
      if( this.followQrcode )	this.$refs.addFollow.open('center');
    },
    closeAddFollow(){
      this.$refs.addFollow.close();
    },
    // 保存图片
    saveImage(){
      var that = this;
      // 下载远程图片后保存到相册
      uni.downloadFile({
        url: this.followQrcode,
        success:function(res) {
          if(res.statusCode == 200){
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success:function(res) {
                uni.showToast({title:"保存成功",icon:'none'});
                that.$refs.addFollow.close();
              },
              fail:function(err){

              }
            });
          }
        },
      })
    },
    // 设置默认sku
    setDefaultSpec(){
      // 如果列表存在
      if( this.productInfo.product_sku.length ){
        //如果列表大于1
        if(this.productInfo.product_sku.length > 1){
          //循环sku列表
          for(var k = 0 ; k < this.productInfo.product_sku.length;k++ ){
            //全部规格都已经下架
            if(k === this.productInfo.product_sku.length){
              uni.showToast({
                title:"当前商品已全部下架",
                icon:"error"
              })
              this.productInfo.stock = 0;
              return;
            }
            // 获取第一个没有下架的sku作为默认值
            if(this.productInfo.product_sku[k].status === 0){
              var attr_ids = this.productInfo.product_sku[k].attr_ids.split(",");
              break;
            }
          }
          // 循环规格列表
          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 = 1;
              }else{
                this.productInfo.product_attr[i].attr_list[j].active = 0;
              }
            }
          }
          // 产品价格修改
          this.productInfo.price = this.productInfo.product_sku[k].price;
          // 产品规格修改
          this.productInfo.spec = this.productInfo.product_sku[k].attr_names;
          // 产品库存
          this.productInfo.stock = this.productInfo.product_sku[k].stock;
          // 产品SKU
          this.sku_id 		= this.productInfo.product_sku[k].id;
          // 计算价格
          this.priceHandler();
        }else{
          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 = 1;
              }else{
                this.productInfo.product_attr[i].attr_list[j].active = 0;
              }
            }
          }
          // 产品价格修改
          this.productInfo.price = this.productInfo.product_sku[0].price;
          // 产品规格修改
          this.productInfo.spec = this.productInfo.product_sku[0].attr_names;
          // 产品库存
          this.productInfo.stock = this.productInfo.product_sku[0].stock;
          // 产品SKU
          this.sku_id = this.productInfo.product_sku[0].id;
          // 计算价格
          this.priceHandler();
        }
      }
    },
    // 属性变更
    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(",");
      // 如果当前点击的属性对应的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;
          }
          // 产品价格修改
          this.productInfo.price = this.productInfo.product_sku[i].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.priceHandler();
        }
        // 如果没有对应的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;
        }
      }
    },
    goBack(){
      uni.navigateBack({
        success: () => {

        },
        fail: (err) => {
          uni.reLaunch({
            url:"/pages/index/index"
          })
        }
      });
    },
  }
}
</script>

<style lang="less">
.goback{
  position: fixed;
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.5);
  left: 30rpx;
  margin-left: 0;
  border-radius: 100px;
  top: 40px;
  backdrop-filter: blur(10rpx);
  border:1rpx solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product_image_box{
  display: block;
  overflow: hidden;
  background: #FFFFFF;
  margin: 10rpx auto;
  .product_image{
    display: block;
    margin: 0 auto;
    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;
  }
  .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: 200rpx;
  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_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_more{
          float: right;
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      .contact_addr{
        width: 620rpx;
        display: block;
        font-size: 24rpx;
        line-height: 30rpx;
        padding: 10rpx 5rpx;
      }
    }
    .min600{
      min-height: 600rpx;
    }
    .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;
        }
        .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: 30rpx 35rpx;
      margin-bottom: 20rpx;
      .product_attr{
        display: block;
        overflow: hidden;
        margin-bottom: 20rpx;
        .spec_name{
          display: block;
          font-size: 28rpx;
          line-height: 40rpx;
          margin-bottom: 20rpx;
        }
        .arrt_list{
          display: block;
          overflow: hidden;
          .arrt_option{
            float: left;
            height: 40rpx;
            font-size: 28rpx;
            line-height: 40rpx;
            text-align: center;
            border-radius: 6rpx;
            padding: 10rpx 30rpx;
            margin: 20rpx;
            background-color: #EEEEEE;
          }
          .arrt_option.active {
            color: #FFFFFF;
            background-color: #fE6000;
          }
        }
      }
    }
    .to_select_coupon{
      font-size: 28rpx;
      padding: 30rpx 35rpx;
      margin-bottom: 20rpx;
      .coupon_deduction{
        color: red;
        float: right;
      }
    }
    .order_price{
      font-size: 28rpx;
      text-align: right;
      margin: 0rpx 35rpx;
      padding: 20rpx 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: 70rpx;
      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_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>