kailin_mp/pages/score/product.vue

<template>
  <view>
    <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
    <view>
      <view class="product_image_box">
        <image class="product_image" :src="productInfo.thumb" mode="heightFix"></image>
      </view>
      <view class="product_info">
        <view class="stock_price">
          <view class="product_price">
            <text>{{ productInfo.score }} 积分</text>
          </view>
          <view class="product_stock">剩{{ productInfo.stock }}个</view>
        </view>
        <view class="product_name">{{ productInfo.name }}</view>
        <view class="product_spec">{{ productInfo.spec }}</view>
      </view>
      <view class="product_description">
        <rich-text :nodes="productInfo.description"></rich-text>
      </view>
      <view class="order_car">
        <button class="show_order" data-eventsync="true" @click="showSpecPopup(1)">立即兑换</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" @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">({{ $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type] }})&nbsp;</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="productInfo.thumb" mode=""></image>
            </view>
            <view class="box_right">
              <view class="car_name">{{ productInfo.name }}</view>
              <view class="stock_price">
                <view class="product_price">
                  <text>{{ productInfo.score }} 积分</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="to_select_coupon"></view>
          <view class="to_select_coupon"></view>
          <view class="order_price">合计： {{ priceTotal }} 积分</view>
          <view class="order_btn">
            <button class="to_order" @click="createOrder()" data-eventsync="true">兑换</button>
          </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>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 使用Popup组件时,阻止禁止滚动穿透
      productInfo: {
        id: 0,
        name: "",
        score: 0,
        spec: "",
        stock: 0,
        thumb: "",
        description: "",
      },
      requestParam: {
        id: 0,
      },
      // 数量
      quantity: 1,
      // 总价
      priceTotal: "0.00",
      // 规格选择按钮类型
      specBtnType: 1, // 1预约。2购物车
      // 地址列表
      addrList: [],
      // 已选地址
      checkedAddr: {
        id: 0,
        contact_name: "",
        contact_phone: "",
        contact_province: "",
        contact_city: "",
        contact_area: "",
        contact_addr: "",
        is_default: 0,
      },
    };
  },
  onLoad(param) {
    // 接受路由参数，产品ID
    this.requestParam.id = param.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: this.productInfo.name,
      path: "/pages/score/product?id=" + this.productInfo.id,
    };
  },
  onShow() {
    // 如果存在产品ID的话
    if (this.requestParam.id > 0) {
      // 请求详情
      this.$http.request("api/score_product/get_detail", this.requestParam).then((re) => {
        // 成功渲染数据
        if (re.code == "success") {
          // 刷新数据
          this.productInfo = re.data;
        }
      });
    }
  },
  methods: {
    // 地址弹出层
    showAddrPopup() {
      // 显示下单弹出层
      this.$refs.addrPopup.open("bottom");
    },
    // 规格弹出层
    showSpecPopup(type) {
      // 登录提示
      // if( !this.$checkAccess.alterLogin()) return ;
      // 显示下单弹出层
      this.$refs.specPopup.open("bottom");
      // 地址列表
      this.getAddrList();
      // 计算价格
      this.priceHandler();
    },
    // 数量调整
    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();
    },
    // 创建订单
    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;
      }
      // 请求接口
      this.$http
        .request(
          "api/score_orders/create",
          {
            product_id: this.productInfo.id,
            buy_num: this.quantity,
            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/score/orders" });
            return;
          } else {
            uni.showModal({ title: re.msg, showCancel: false });
          }
        });
    },
    // 计算价格
    priceHandler() {
      // 小数点保留
      this.priceTotal = this.productInfo.score * this.quantity;
    },
    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];
            }
          }
        }
      });
    },
  },
};
</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;
  }
}
.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;
  }
  .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_stock {
      color: #333333;
      float: right;
      font-size: 20rpx;
      line-height: 60rpx;
    }
  }
}
// 描述简介
.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 {
    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;
    border-radius: 40rpx;
    background-color: #e03519;
  }
}
.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 {
          color: #e03519;
          font-size: 26rpx;
          font-weight: bold;
        }
        .contact_name {
          font-size: 26rpx;
          font-weight: bold;
          margin-right: 16rpx;
        }
        .contact_more {
          float: right;
          font-size: 40rpx;
          font-weight: bold;
        }
        .contact_shop {
          float: right;
          font-size: 26rpx;
          margin-right: 16rpx;
        }
      }
      .contact_addr {
        width: 620rpx;
        display: block;
        font-size: 24rpx;
        line-height: 30rpx;
        padding: 10rpx 5rpx;
      }
    }
    .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;
        }
      }
    }
    .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_shop {
          float: right;
          font-size: 26rpx;
        }
      }
      .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>