yicangzongtai_app_240321/pages/product/goods/serviceGood.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>
    <view id="page-top">
      <view class="product">
        <view class="u-bg-fff pb40">
          <view class="pic">
            <!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
            <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500"
              circular="true">
              <swiper-item v-if="dataForm.video_url">
                <!-- <video :src="dataForm.video_url"></video> -->
                <j-video class="jvideo" :url="dataForm.video_url" width="750rpx" height="620rpx"></j-video>
              </swiper-item>
              <swiper-item v-for="(item, index) in imglist" :key="index">
                <image :src="item" mode="aspectFill"></image>
              </swiper-item>
            </swiper>

            <view class="p-price">
              <view class="pd24" style="display: flex;justify-content: space-between;align-items: flex-end;">
                <view style="display: flex; color: #FFFFFF; font-size: 28rpx;align-items: center;margin-left: 6rpx;">
                  优惠价：
                  <view class="u-FFF u-font36">
                    <rich-text :nodes="$mUtil.priceBigSmallTwo(dataForm.sale_price)"></rich-text>
                  </view>
                </view>

                <view class="discount u-font24">
                  门市价:
                  <text class="discount u-font24 u-ml20 u-del">￥{{ dataForm.market_price}}元</text>
                </view>

              </view>
            </view>

            <view class="u-plr30" style="margin-top: 100rpx;">
              <view>

                <view class="tipsStatus" v-if="shop.platform_shop">自营</view>
                <text class="u-font34 u-bold u-1A1A1A">{{ dataForm.title}}</text>
              </view>
              <view class="u-font24 u-mt15 u-999" style="text-align: right;">
                <text>消费
                  <text class="u-ml10">{{
			              dataForm.result_sale_num
			            }}</text></text>
              </view>
              <!--优惠-->
              <!-- <view class="bg-FFF6EE pd20 u-mt20  u-flex-center br-rd10" v-if="shopDiscounts.is_use==true">
								<view class="u-FF0000 br-FF0000 u-font24">首单优惠</view>
								<view class="u-ml15 u-font24 u-CA7E57">满{{shopDiscounts.full}}元减{{shopDiscounts.reduction}}元</view>
							</view> -->
            </view>
          </view>
        </view>
        <!-- 查看地图 -->
        <!-- <view class="u-bg-fff u-mt10">
			    <view class="u-plr30 u-flex-center-sb pt-pb35">
			      <view class="u-flex-center">
			        <view class="u-ml25" @click="openMap(shop)">
			          <view class="u-999 u-font24 u-text2" style="padding-right: 20rpx;">
			            <text class="iconfont" style="color: #0F8947;">&#xe6db;</text>
			            <text
			              >{{ shop.province_name }}{{ shop.city_name
			              }}{{ shop.area_name }}{{ shop.address }}
			            </text>
			            <text class="u-FE9000">[查看地图]</text></view
			          >
			        </view>
							<text class="iconfont" style="color: #0F8947;">&#xe6c7;</text>
			      </view>
			    </view>
			  </view> -->
        <view class="u-bg-fff u-mt10">
          <view class="u-plr30 u-flex-center-sb pt-pb35">
            <view class="u-flex-center">
              <view @click="goShop">
                <image class="u-avatar104" :src="shop.logo"></image>
              </view>
              <view class="u-ml25">
                <view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }} </view>
                <view class="u-999 u-font24 u-mt5 u-text2" @click="goLocal">
                  <text class="iconfont " style="color: #0F8947;">&#xe6db;</text>
                  {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
			            }}{{ shop.address }}
                </view>
              </view>
            </view>
            <view class="iconfont" @click="goShop">&#xe6c7;</view>
          </view>
        </view>
      </view>
      <view class="u-bg-fff u-mt10">
        <view class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
          :style="`top: calc(${statusBarHeight}px + 44px)`">
          <view @tap="change(0)" class="pb30" :class="{ active: isChecked == 0 }">商品详情</view>
          <view @tap="change(1)" class="pb30" :class="{ active: isChecked == 1 }">用户评论({{ commentList.length }})</view>
        </view>
        <view class="u-mt10">
          <!--商品详情-->
          <view v-if="isChecked == 0">
            <view class="introduce">
              <view class="top">
                <view class="simple">
                  <view class="line"> </view>
                  <view class="item"> 套餐内内容 </view>
                </view>
                <view class="simple-content">
                  <view v-for="item in dataForm.service_items" :key="item.id" class="row">
                    <view class="row_l">
                      <view>{{ item.item_name }}</view> x {{ item.num }}
                    </view>
                    <view class="gry">{{ item.item_price }}元</view>
                  </view>
                </view>
              </view>
              <view class="middle">
                <view class="middle-item">
                  <view class="simple"> </view>
                  <view class="material"> 福利 </view>
                </view>
                <view class="item-block">
                  <view v-for="item in dataForm.welfare_items" :key="item.id" class="row">
                    <image class="select-icon" :src="imgUrl+'/checked.png'" mode="aspectFill" />
                    <text>{{ item }} </text>
                  </view>
                </view>
              </view>
              <view class="practice">
                <view class="practice-item">
                  <view class="simple"> </view>
                  <view class="practice-details"> 图文介绍 </view>
                </view>
              </view>
            </view>

            <view class="richText ql-editor-box">
              <rich-text :nodes="mobileDetail"></rich-text>
              <!-- <jyf-parser :html="$mUtil.formatRichText(mobileDetail)" ref="article"></jyf-parser> -->
            </view>
          </view>

          <!--评论-->
          <view class="u-plr30" v-else>
            <comment :value="commentList"></comment>
          </view>
        </view>
      </view>
    </view>
    <view style="height:170rpx;background-color:white"></view>
    <view class="bottom-btn u-bg-fff">
      <view class="pt-pb30 u-plr30 u-flex-center-sb">
        <button @click="share" class="u-text-center" style="line-height: normal;margin-left: 15rpx;">
          <view class="iconfont2 u-font44 u-999">&#xe684;</view>
          <view class="u-font28 u-1A1A1A">分享</view>
        </button>

        <!--普通商品-->
        <!-- <view class="cart" @click="goTocart"> -->
        <!-- <view class="u-text-center">
						<view class="iconfont u-font44 u-999">&#xe609;</view>
						<view class="u-font28 u-1A1A1A">购物车</view>
					</view> -->
        <!-- <view class="number u-font20 u-FFF">10</view> -->
        <!-- </view> -->
        <!-- <view class="u-flex-center"> -->
        <!-- <button class="cart-btn u-00321E u-font30" @click="buy(0,dataForm.id)">加入购物车</button> -->
        <button class="buy-btn u-DCCDA4 u-font30" @click="btnBuy()">
          立即购买
        </button>
        <!-- </view> -->
      </view>
    </view>
    <share ref="shares" :contentHeight="580" v-if="isvisible"></share>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
    <share ref="shares" :contentHeight="580" v-if="isvisible"></share>
  </view>
</template>

<script>
  import uniPopup from "../../../components/uni-popup/uni-popup.vue";
  import comment from "../../../components/ld-comment/ld-comment.vue";
  import jyfParser from "../../../components/jyf-parser/jyf-parser";
  import share from "./../../public/share";
  import jVideo from "../../../components/j-video/j-video.vue"
  export default {
    components: {
      uniPopup,
      comment,
      jyfParser,
      share,
      jVideo
    },
    data() {
      return {
        //手机状态栏高度
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
        config: {
          back: true, //false是tolbar页面 是则不写
          title: "服务详情",
          color: "#1a1a1a",
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#ffffff"],
          backTabPage: "",
        },
        imglist: [], //详情图片数组
        isChecked: 0,
        btnName: "",
        btnType: "", //0  购物车，1 立即购买
        dataForm: {}, //商品详情
        shop: {}, //店铺信息
        shopDiscounts: {}, //店铺首单优惠
        stock: 0,
        cover: "",
        loading: true,
        moDelPrice: "",
        moPrice: "",
        goodsSkuList: [], //sku组合值
        skuTab: [], //sku二位数组
        goods_id: null,
        limit_buy_num: 0,
        choseConfig: {},
        hasId: "",
        add_num: 1,
        goStatus: 0, //0:购物车，1下单
        shop_id: 0,
        commentList: [],
        dataShopId: "",
        isvisible: false,
        mobileDetail: "",
        option: null,
        imgUrl: this.$mConfig.staticUrl,
        serviceId: 0
      };
    },
    onShow() {
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];
      if (prevPage == undefined) {
        this.config.backTabPage = "/pages/research/homepage/lidaPage";
      }
    },
    onLoad(options) {
      console.log(options)
      //店铺推荐（商品）
      this.option = options.id
      this.serviceId = options.id
      if (options.id) {
        this.getDetailInfo(options.id);

        this.loadComment(options.id);
      }
      if (options.shareId) {
        this.recordSave(options.shareId, options.id);
      }
    },
    onShareAppMessage(res) {
      if (res.from === "button") {
        // 来自页面内分享按钮
        console.log(res.target);
      }
      let that = this
      return {
        title: that.shareTitle,
        imageUrl: that.shareImg,
        path: '/pages/product/goods/serviceGood?id=' + that.serviceId,
      };
    },
    methods: {
      goLocal() {
        uni.openLocation({
          latitude: Number(this.shop.tx_latitude),
          longitude: Number(this.shop.tx_longitude),
          name: this.shop.name,
          address: this.shop.address,
          success: function() {
            console.log("success");
          },
        });
      },
      goShop() {
        uni.navigateTo({
          url: "/pages/research/homepage/shopHomepage?shopId=" + this.shop_id,
        });

      },
      recordSave(share_user_id, goods_id) {
        this.$http
          .post("/share/record/save", {
            share_user_id: share_user_id,
            goods_id: goods_id,
          })
          .then((res) => {});
      },

      share() {
        this.isvisible = false
        let token = uni.getStorageSync("apiToken");

        if (!token) {
          uni.navigateTo({
            url: "/pages/login/index",
          });
        } else {

          console.log(this.option)
          this.$http.get("/service/goods/info/" + this.option).then(res => {
            if (res && res.code == 200) {
              if (res.data == null) {
                this.$mUtil.toast("该商品不存在")
              } else {
                let user = uni.getStorageSync("personal");
                this.isvisible = true;
                this.$nextTick(() => {
                  this.$refs.shares.shareInfo(
                    "/?pageType=1&type=4&id=" + this.goodsId + "&shareId=" + user.id,
                    'pages/down',
                    this.dataForm.title,
                    "",
                    this.dataForm.cover
                  );
                });
              }
            }
          })

        }
      },
      openMap(shop) {
        uni.openLocation({
          latitude: Number(shop.tx_latitude),
          longitude: Number(shop.tx_longitude),
          // name:shop.name,
          address: shop.address,
          success: function() {
            console.log("success");
          },
        });
      },
      // 获取主页数据
      getIndexList(shopid) {
        this.$http.get("/yxt/shop/info/" + shopid).then((res) => {
          uni.stopPullDownRefresh();
          this.loading = false;
          if (res.data && res.code == 200) {
            this.shop = res.data;
          }
        });
      },
      getByShop(id) {
        //店铺优惠查询
        this.$http.get("/marketing/firstOrder/getByShop/" + id).then((res) => {
          if (res && res.code == 200) {
            this.shopDiscounts = res.data;
          }
        });
      },
      getDetailInfo(id) {
        this.$http.get("/service/goods/info/" + id).then((res) => {
          this.loading = false;
          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.goodsId = res.data.id;
            console.log('id类型' + typeof this.goodsId)
            this.imglist = res.data.images;
            this.shareImg = res.data.cover;
            this.shareTitle = res.data.title;
            this.mobileDetail = res.data.mobile_detail
            this.dataShopId = res.data.shop_id;
            this.shop_id = res.data.shop_id;
            this.getByShop(this.dataShopId);
            this.getIndexList(this.dataShopId);
          }
        });
      },

      //评论，商品详情切换
      change(i) {
        this.isChecked = i;
      },

      //组合数据
      btnBuys() {
        let dataJson = {
          order_type: 2,
          shipment_mode: 2,

          marketing_type: 0,
          service_contacts: {
            contacts: "",
            mobile: "",
            gender: "",
          },
          shop_orders: [{
            shop_id: this.shop_id,
            source_shop_id: this.shop_id,
            activity_id: 0,
            sponsor_activity_id: 0,
            user_remark: "",
            items: [{
              goods_id: this.dataForm.id,
              num: 1,
              sku_hash_code: this.dataForm.code,
            }, ],
          }, ],
        };

        uni.setStorageSync("dataJson", dataJson);
        uni.navigateTo({
          url: "../surePay/servicePay?type=service",
        });
      },
      //
      btnBuy(i) {
        this.goStatus = i;
        let token = uni.getStorageSync("apiToken");
        //判断是否微信授权登录（没有授权登录进wx-login,授权了但没有注册进login）
        if (!token) {
          uni.navigateTo({
            url: "/pages/login/index",
          });
        } else {
          this.btnBuys();
        }

        //0  购物车，1 立即购买
      },

      /*评论*/
      loadComment(id) {
        this.$http
          .get(`/comment/orderGoods/service/goods/comments/${id}`)
          .then((res) => {
            if (res && res.code == 200) {
              this.commentList = res.list;
            }
          });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .introduce {
    padding: 40rpx 19rpx 40rpx 30rpx;

    .practice {
      margin-top: 34rpx;

      .practice-item {
        display: flex;
        align-items: center;

        .simple {
          width: 6rpx;
          height: 26rpx;
          background: #0B844A;
          border-radius: 3rpx;
        }

        .practice-details {
          font-size: 28rpx;
          font-weight: 700;
          color: #1a1a1a;
          margin-left: 16rpx;
        }
      }

      .introduction-details {
        margin-top: 19rpx;
        font-size: 24rpx;
        color: #666666;
        font-weight: 500;
        text-align: left;

        .item {
          font-size: 24rpx;
          color: #666666;
        }
      }
    }

    .middle {
      margin-top: 34rpx;

      .middle-item {
        display: flex;
        align-items: center;

        .simple {
          width: 6rpx;
          height: 26rpx;
          background-color: #0B844A;
          border-radius: 3rpx;
        }

        .material {
          font-size: 28rpx;
          font-weight: 700;
          color: #1a1a1a;
          margin-left: 16rpx;
        }
      }

      .item-block {
        margin-top: 19rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #666;
        line-height: 38rpx;
        display: flex;
        flex-wrap: wrap;

        text {
          width: 660rpx;
          display: inline-block;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .row {
          margin-right: 54rpx;
          display: flex;
          align-items: center;
        }
      }
    }

    .top {
      .simple-content {
        color: #666666;
        font-weight: 400;
        font-size: 24rpx;
        margin-top: 19rpx;

        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;

          margin-bottom: 14rpx;
          color: #1a1a1a;

          .row_l {
            display: flex;

            view {
              width: 500rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }

          .gry {
            color: #999999;
          }
        }
      }

      .simple {
        display: flex;
        align-items: center;

        .line {
          width: 6rpx;
          height: 26rpx;
          line-height: 26rpx;
          background-color: #0B844A;
          border-radius: 3rpx;
        }

        .item {
          margin-left: 16rpx;
          font-size: 28rpx;
          font-weight: 700;
          color: #1a1a1a;
        }
      }
    }

    .select-icon {
      width: 27rpx;
      height: 27rpx;

      border-radius: 4rpx;
      margin-right: 11rpx;
    }
  }
</style>
<style lang="scss">
  .u-FE9000 {
    color: #fe9000;
  }

  page {
    background-color: #f5f5f5;
  }

  .pd24 {
    padding: 24rpx;
  }

  .pd20 {
    padding: 20rpx;
  }

  .pt20-pb14 {
    padding-top: 20rpx;
    padding-bottom: 14rpx;
  }

  .pt28-pb18 {
    padding-top: 28rpx;
    padding-bottom: 18rpx;
  }

  .pb30 {
    padding-bottom: 30rpx;
  }

  .pb40 {
    padding-bottom: 40rpx;
  }

  .pb50 {
    padding-bottom: 50rpx;
  }

  .pt-pb30 {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }

  .pt-pb35 {
    padding-top: 35rpx;
    padding-bottom: 35rpx;
  }

  .ml54 {
    margin-left: 54rpx;
  }

  .ml138 {
    margin-left: 138rpx;
  }

  .br-rd10 {
    border-radius: 10rpx;
  }

  .br-rd20 {
    border-radius: 20rpx;
  }

  .stb-btn {
    padding: 8rpx 18rpx;
    border-radius: 10rpx;
  }

  .br-FF0000 {
    border: 1rpx solid #ff0000;
    border-radius: 24rpx;
    padding: 6rpx 12rpx;
  }

  .bg-FFF6EE {
    background-color: #fff6ee;
  }

  .mt80 {
    margin-top: 80rpx;
  }

  .product {
    // padding-bottom: 150rpx;
  }

  .pic {
    width: 100%;
    position: relative;

    .swiper {
      // height: 620rpx;
	  height: 100vw;

      video {
        width: 100%;
        // height: 620rpx;
		height: 100vw;
      }

      image {
        width: 100%;
        // height: 620rpx;
		height: 100vw;
      }
    }

    .p-price {
      width: 100%;
      position: absolute;
      top: 600rpx;
      background: linear-gradient(90deg, #20a733, #0a824b);
      border-radius: 20rpx 20rpx 0px 0px;

      .discount {
        color: #ffffff;
      }
    }
  }

  .richText {
    padding: 0 30rpx;

    /deep/ img {
      margin-top: 0 !important;
    }
  }

  //秒杀，拼团样式
  .p-ab {
    position: absolute;
    top: 448rpx;
  }

  .stb-list {
    padding-bottom: 10rpx;
  }

  .triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 108rpx solid #dccda4;
    border-left: 60rpx solid transparent;
  }

  .seckill {
    background-color: #dccda4;
    color: #0B844A;
    padding: 16rpx;
    padding-right: 28rpx;
    border-radius: 5rpx 20rpx 0px 0px;
  }

  .seckill-btn {
    width: 86%;
  }

  .br-284534 {
    border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
  }

  .gb-te {
    padding-top: 20rpx;
    padding-bottom: 15rpx;
  }

  .gb-btn {
    padding: 18rpx 80rpx 8rpx;
    line-height: 30rpx;
  }

  .btn-bg-dccda4 {
    background: #dccda4;
    border-radius: 48rpx 0rpx 0rpx 48rpx;
  }

  .btn-bg-00321E {
    background: #0B844A;
    border-radius: 0px 48px 48px 0px;
  }

  .tab {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding-top: 38rpx;
    background: #ffffff;
    z-index: 9;

    .pb30 {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: #0f8a46;
        transition: all 0.3s;
      }

      &.active {
        font-size: 30rpx;
        color: #0D8847;
        font-weight: 700;

        &::before {
          width: 100%;
        }
      }
    }
  }

  .bottom-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 50;
    border-top: 1rpx solid #e6e6e6;

    .cart {
      position: relative;

      .number {
        position: absolute;
        top: -10rpx;
        left: 45rpx;
        padding: 4rpx 8rpx;
        background-color: #ff0000;
        border: 4rpx solid #ffffff;
        border-radius: 40rpx;
      }
    }

    .cart-btn {
      width: 230rpx;
      height: 85rpx;
      background: #dccda4;
      border-radius: 43rpx 0rpx 0rpx 43rpx;
    }

    .buy-btn {
      width: 76%;
      height: 85rpx;
      line-height: 85rpx;
      background: #0B844A;
      border-radius: 43rpx;
    }
  }

  .flex-sb {
    display: flex;
    justify-content: space-between;
  }

  //弹窗
  .spec {
    border-radius: 18rpx 18rpx 0rpx 0rpx;
    padding-top: 30rpx;
    max-height: 900rpx;
    overflow-y: auto;

    .spec-item {
      background-color: #f6f6f6;
      border: 1px solid #f6f6f6;
      padding: 12rpx 30rpx;
      font-size: 24rpx;
      color: #1a1a1a;
      border-radius: 4px;
    }

    .activeColor {
      background-color: #e1e6e3;
      border: 1px solid #01321d;
      color: #01321d;
      border-radius: 4px;
    }

    .spec-item:not(:last-child) {
      margin-right: 24rpx;
    }

    //减号
    .minus {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 8rpx 0rpx 0rpx 8rpx;
    }

    .num {
      width: 74rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      border: 1px solid #dedede;
    }

    //加号
    .plus-sign {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 0rpx 8rpx 8rpx 0rpx;
    }

    .specOpen-btn {
      margin-top: 68rpx;
      padding-bottom: 34rpx;

      button {
        background-color: #0B844A;
        color: #ffffff;
      }
    }
  }
</style>