Client-Teapay/src/pages/product/p_details.vue

<template>
  <view class="container">
    <!-- 轮播图 -->
    <swiper-banner
      imgScale="1:1"
      :imgArr="detail.goods_img"
      :duration="1000"
      :interval="5000"
      :circular="true"
      :autoplay="true"
      :indicator-dots="true"
      indicator-active-color="#12B280"
      indicator-color="rgba(255, 255, 255, .82)"
    ></swiper-banner>
    <!-- 轮播图-end -->

    <!-- 价格信息栏 -->
    <view class="price_info flex_r flex_ac flex_jb">
      <view v-if="type == 5" class="price">
        <span v-if="Number(detail.cost_price) != 0"
          >{{ detail.cost_price }}元</span
        >
        <span
          v-if="Number(detail.cha_bao) != 0 && Number(detail.cost_price) != 0"
          >+</span
        >
        <span v-if="Number(detail.cha_bao) != 0">{{ detail.cha_bao }}茶宝</span>
      </view>
      <view v-else class="price" :class="type == 2 ? 'samll' : ''"
        >￥{{ type == 2 ? detail.trade_price : detail.cost_price }}</view
      >
      <view class="price_span flex_r flex_ac flex_je">
        <view class="triangle"></view>
        <view class="span_conten flex_r flex_ac flex_jc">{{
          goodsDa.type == 1
            ? "零售专区"
            : goodsDa.type == 2
            ? "批发专区"
            : goodsDa.type == 3
            ? "精品专区"
            : goodsDa.type == 4
            ? "今日值得买"
            : goodsDa.type == 5
            ? "茶宝兑换"
            : ""
        }}</view>
      </view>
    </view>
    <!-- 价格信息栏-end -->

    <!-- 标题信息栏 -->
    <view class="title_info">
      <view class="goods_name">{{ detail.goods_name }}</view>
      <view class="goods_subName">{{ detail.goodsMsg }}</view>
    </view>
    <!-- 标题信息栏-end -->

    <!-- 产品简介 -->
    <view class="brief mar_t20">
      <view class="brief_title flex_r flex_ac">产品简介</view>
      <view class="brief_con">
        <jyfParser :html="detail.goods_content" ref="jyf"></jyfParser>
        <!-- <image :lazy-load="true" style="width: 100%;display: block;" v-for="(item,index) in detail.goodsDetailesImage" :key="index" :src="item" mode="widthFix"></image> -->
      </view>
    </view>
    <!-- 产品简介-end -->

    <!-- 底部导航组件 -->
    <view class="option">
      <uni-goods-nav
        :fill="true"
        :options="options"
        :buttonGroup="buttonGroup"
        @click="onClick"
        @buttonClick="buttonClick"
      />
    </view>
    <!-- 底部导航组件-end -->
    <!-- 授权 -->
    <!-- <authorize-module v-if="showAuth" :shopInfo="shopInfo" @authSuccess="onAuthSuccess" @onGotUserInfo="onGotUserInfo" ></authorize-module> -->
    <!-- 授权-end -->

    <!-- 购买或加入购物车弹窗 -->
    <uni-popup ref="shopping" type="bottom">
      <view class="shopping">
        <view class="close_con flex_r flex_je">
          <image
            class="close_img"
            src="/static/close.png"
            @tap="closeBtn"
            mode=""
          ></image>
        </view>
        <view class="goods_info flex_r">
          <image class="goods_img" :src="detail.original_img" mode=""></image>
          <view class="goods_con flex_c flex_jb">
            <view class="shop_names">{{ detail.goods_name }}</view>
            <!-- <view class="goods_msg">{{type == 2 ? detail.pfCombination : '￥' + detail.price}}</view> -->
            <view class="num_con flex_r flex_je">
              <uni-number-box
                :min="1"
                @change="bindChange"
                :value="buyNum"
              ></uni-number-box>
            </view>
          </view>
        </view>
        <view class="goods_option flex_r flex_ac flex_jc" v-if="type == 2">
          <view class="goods_raido flex_r flex_ac" @tap="setWay('1')">
            <view
              class="raido_img"
              :class="pfway == '1' ? 'raido_box' : ''"
            ></view>
            <view class="raido_text">申请寄售</view>
          </view>
          <view class="goods_raido flex_r flex_ac" @tap="setWay('0')">
            <view
              class="raido_img"
              :class="pfway == '0' ? 'raido_box' : ''"
            ></view>
            <view class="raido_text">发货邮寄</view>
          </view>
        </view>
        <checkbox-group class="flex_r flex_ac flex_jc" @change="checkboxChange">
          <label class="option_box">
            <checkbox
              value="1"
              :checked="checked"
              color="#2DB389"
              style="transform: scale(0.7)"
            />
            我已阅读同意<text @tap.stop="getProPage">《购买协议》</text>
          </label>
        </checkbox-group>
        <view class="confim flex_r flex_ac flex_jc" @tap="ToPayPage">确定</view>
      </view>
    </uni-popup>
    <!-- 购买或加入购物车弹窗-end -->
  </view>
</template>

<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import { get, post, u_post } from "@/request/api.js";
// let reqApi = new ReqApi();
// import { ReqApi } from "@/utils/reqTools.js";
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
import swiperBanner from "@/components/swiperBanner";
import uniGoodsNav from "@/components/uni-goods-nav/uni-goods-nav.vue";
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue";
import authorizeModule from "@/components/authorize-module/index";
export default {
  components: {
    uniPopup,
    jyfParser,
    uniGoodsNav,
    swiperBanner,
    uniNumberBox,
    authorizeModule,
  },
  data() {
    return {
      imgArr: ["/static/goods5.jpg"],
      content: "",
      options: [
        // 底部导航跳转
        {
          icon: "home",
          text: "主页",
        },
        // {
        // 	icon: 'cart',
        // 	text: '购物车',
        // 	info: 0
        // }
      ],
      buttonGroup: [
        // 底部操作按钮
        // {
        // 	text: '加入购物车',
        // 	backgroundColor: '#ff0000',
        // 	color: '#fff'
        // },
        {
          text: "立即购买",
          backgroundColor: "#ffa200",
          color: "#fff",
        },
      ],
      btnIndex: 0, // 用户点击按钮事件判断 0：加入购物车；1：立即购买
      type: null, // 商品类型，1零售 2批发 3精品 4今日值买
      goodsId: "", // 商品ID
      id: "", //合伙人套餐ID
      detail: {
        goods: {},
      }, // 商品详情
      checked: false, //是否选中协议
      buyNum: 1, //购买数量
      pfway: "1", // 批发
      showAuth: false,

      userinfo: {},
      goodsDa: {},
    };
  },
  onLoad: function (e) {
    this.type = e.type;
    this.goodsDa = e;
    this.userinfo = uni.getStorageSync("userinfo");
    this.loadData(e);
  },
  onShow: function () {},
  methods: {
    // 商品详情信息
    loadData(da) {
      post("goods/goodsDetail", da).then((res) => {
        if (res.code === 0) {
          this.detail = res.data.data;
          let imgs = [];
          imgs.push(this.detail.original_img);
          imgs.push(...this.detail.goods_img);
          this.detail.goods_img = imgs;
        } else {
          uni.showModal({
            title: "提示",
            content: res.msg,
            showCancel: false,
            success: function (res) {
              if (res) {
                uni.navigateBack({
                  delta: 1,
                });
              }
            },
          });
        }
      });
    },

    //授权并登录
    onAuthSuccess: function () {
      var that = this;
      uni.showLoading({ mask: true });
      appEv.setData((res) => {
        uni.hideLoading();
        that.showAuth = false;
      });
    },
    // 去购买
    ToPayPage: function () {
      if (!this.checked) {
        appEv.errTips("请阅读并同意购买协议");
        return;
      }
      if (this.btnIndex == 0) {
        this.toPayOrder();
      }
    },
    // 创建购买订单
    toPayOrder: function () {
      let da = {
        ...this.goodsDa,
        num: this.buyNum,
        is_sell: this.type == 2 ? this.pfway : '0'
      }
      this.goto("/pages/to-pay-list/index", da);
    },
    // 添加到购物车
    SetCartGoodsList: function () {
      let that = this;
      let data = {
        goodsId: this.goodsId,
        buyCount: this.buyNum,
        specialArea: this.type,
      };
      u_post("ShuZiTeaYW/shop/conShoppingCart", data).then((res) => {
        if (res.status == 200) {
          appEv.errTips("添加成功");
          that.checked = false;
          that.buyNum = 1;
          that.$refs.shopping.close();
        } else {
          appEv.errTips(res.msg);
        }
      });
    },
    // 购买数量更改
    bindChange(e) {
      this.buyNum = e;
    },
    // 更改批发方式
    setWay(e) {
      this.pfway = e;
    },
    // 点击同意协议
    checkboxChange(e) {
      let index = e.detail.value.indexOf("1");
      if (index != -1) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    // 点击底部主页购物车等按钮
    onClick(e) {
      if (e.index === 0) {
        uni.switchTab({ url: "/pages/index/index" });
      }
    },
    // 点击立即购买或加入购物车
    buttonClick: function (e) {
      this.btnIndex = e.index;
      this.$refs.shopping.open();
    },
    // 点击关闭弹窗
    closeBtn: function () {
      this.$refs.shopping.close();
    },
    getProPage() {
      // if (this.type == 1 || this.type == 2) {
      //   uni.navigateTo({
      //     url: "/pages/protocol/index?type=" + this.type,
      //   });
      // } else if (this.type == 4) {
      //   uni.navigateTo({
      //     url: "/pages/protocol/index?type=" + 3,
      //   });
      // } else if (this.type == 3) {
      //   uni.navigateTo({
      //     url: "/pages/protocol/index?type=" + 5,
      //   });
      // }
      console.log("aaaaaaaaaa");
      uni.navigateTo({
        url: "/pages/pay-agreement/index",
      });
    },
  },
  onShareAppMessage: function () {
    let userinfo = uni.getStorageSync("userinfo");
    var path = "/pages/product/p_details?agentId=1" + '&id=' + this.goodsDa.id + '&type=' + this.goodsDa.id.type;
    if (userinfo.user_id) {
      path = "/pages/product/p_details?agentId=" + userinfo.user_id + '&id=' + this.goodsDa.id + '&type=' + this.goodsDa.id.type;
    }
    var title = `让数字经济赋能美好生活！`;
    return {
      title: title,
      path: path,
    };
  },
};
</script>

<style lang="scss">
// 页面配置
page {
  background: #f5f5f5;
}
.container {
  padding-bottom: 90rpx;
}
// 页面配置-end

// 价格信息栏
.price_span {
  width: 283rpx;
  height: 100%;
  position: relative;
}
.price text {
  font-size: 24rpx;
  color: #fff;
  font-family: "SourceHanSansCN-Medium";
}
.price_info {
  background: #ff6d44;
  height: 92rpx;
  width: 100%;
  box-sizing: border-box;
}
.price {
  font-size: 38rpx;
  color: #fff;
  font-family: "SourceHanSansCN-Medium";
  margin-left: 20rpx;
}
.span_conten {
  width: calc(283rpx - 46rpx);
  height: 100%;
  background: #ffcabb;
  position: relative;
  font-size: 34rpx;
  font-family: "SourceHanSansCN-Medium";
  color: #682918;
}
.triangle {
  width: 0px;
  height: 0px;
  border-top: 92rpx solid rgba(0, 0, 0, 0);
  border-right: 92rpx solid rgba(0, 0, 0, 0);
  border-bottom: 92rpx solid #ffcabb;
  border-left: 92rpx solid rgba(0, 0, 0, 0);
  transform: translate(-46rpx, -92rpx);
  position: absolute;
  top: 0;
  left: 0;
}
.samll {
  font-size: 28rpx;
  max-width: calc(100% - 360rpx);
  line-height: 1.3;
  text-align: justify;
}
// 价格信息栏-end

// 标题信息栏
.goods_subName {
  width: 100%;
  overflow: hidden;
  font-size: 22rpx;
  color: #787878;
}
.title_info {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  padding: 20rpx;
  box-sizing: border-box;
}
.goods_name {
  width: 100%;
  overflow: hidden;
  font-size: 32rpx;
  color: #1b1b1b;
  font-family: "SourceHanSansCN-Bold";
  font-weight: bold;
  margin-bottom: 20rpx;
}
// 标题信息栏-end

// 产品简介
.brief {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}
.brief_con {
  width: 100%;
  overflow: hidden;
  padding: 20rpx;
  box-sizing: border-box;
}
.brief_title {
  width: 100%;
  overflow: hidden;
  font-size: 26rpx;
  color: #1b1b1b;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
  height: 74rpx;
}
// 产品简介-end

// 底部导航组件
.option {
  position: fixed;
  width: 100%;
  overflow: hidden;
  left: 0;
  bottom: 0;
}
// 底部导航组件-end

// 购买或加入购物车弹窗
.option_box text {
  color: #2db389;
}
.goods_raido {
  margin-right: 180rpx;
}
.close_img {
  width: 36rpx;
  height: 36rpx;
}
.option_box {
  font-size: 26rpx;
  margin-top: 80rpx;
}
.goods_raido:nth-last-child(1) {
  margin-right: 0;
}
.num_con {
  width: 100%;
  overflow: hidden;
  padding-bottom: 3rpx;
}
.goods_option {
  width: 100%;
  overflow: hidden;
  padding-top: 50rpx;
}
.close_con {
  width: 100%;
  overflow: hidden;
  margin-bottom: 35rpx;
}
.raido_text {
  font-size: 26rpx;
  color: #545454;
  margin-left: 30rpx;
}
.goods_con {
  width: calc(100% - 202rpx - 30rpx);
  overflow: hidden;
}
.goods_img {
  width: 202rpx;
  height: 187rpx;
  margin-right: 30rpx;
  border-radius: 12rpx;
}
.confim {
  width: 100%;
  height: 60rpx;
  border-radius: 30rpx;
  background: #2db389;
  color: #fff;
  font-size: 26rpx;
  margin-top: 44rpx;
}
.shopping {
  width: 100%;
  overflow: hidden;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 30rpx 30rpx 0 0;
  background: #fff;
}
.goods_info {
  width: 100%;
  overflow: hidden;
  align-items: inherit;
  padding-bottom: 48rpx;
  border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
}
.shop_names {
  width: 100%;
  overflow: hidden;
  font-family: "SourceHanSansCN-Bold";
  font-weight: bold;
  color: #1b1b1b;
  font-size: 32rpx;
}
.goods_msg {
  width: 100%;
  overflow: hidden;
  font-size: 28rpx;
  color: #18bb88;
  font-family: "SourceHanSansCN-Medium";
  font-weight: 500;
}
.raido_img {
  width: 39rpx;
  height: 35rpx;
  background: url(~@/static/img/weixuanzhong.png);
  background-repeat: no-repeat;
  background-size: 35rpx 35rpx;
  background-position: center center;
}

.raido_box {
  background: url(~@/static/img/consent.png);
  background-repeat: no-repeat;
  background-size: 39rpx 35rpx;
  background-position: center center;
}
// 购买或加入购物车弹窗-end
</style>