studytour-front/pages_order/product/productDetail.vue

<template>
  <view class="page__view">

    <view class="main">
		  <navbar title="活动详情" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="transparent" />

      <view class="swiper">
        <uv-swiper 
          :list="bannerList" 
          keyName="image"
          indicator 
          indicatorMode="dot"
          indicatorInactiveColor="rgba(255, 255, 255, 0.7)" 
          height="680rpx" 
        ></uv-swiper>
      </view>

      <view class="summary">
        <view class="card info">
          <view class="card-header">{{ detail.title }}</view>
          <view class="card-content">
            <view class="desc">{{ detail.brief }}</view>
            <view class="flex tags" v-if="tagList.length">
              <view class="tag" v-for="(tag, tIdx) in tagList" :key="tIdx">
                {{ tag }}
              </view>
            </view>
            <view class="flex data">
              <view class="flex price">
                <view class="price-val">
                  <text>¥</text>
                  <text class="highlight">{{ priceInt }}</text>
                  <text>{{ `${priceFrac}起` }}</text>
                </view>
                <view class="price-bef" v-if="detail.priceOrigin">¥<text>{{ detail.priceOrigin }}</text></view>
              </view>
              <view class="registered" v-if="detail.applyNum">
                {{ `${detail.applyNum}人已报名` }}
              </view>
            </view>
          </view>
        </view>

        <view class="card">
          <view class="card-header">选择团期</view>
          <view class="card-content">
            <timeOptionsSelect v-model="selectTime" :options="detail.dateList"></timeOptionsSelect>
          </view>
        </view>

        <view class="card comment">
          <view class="flex card-header">
            <view>评论</view>
            <button class="flex btn" @click="jumpToCommentRecords">
              <view>查看全部</view>
              <image class="img" src="@/static/image/icon-arrow-right.png" mode="widthFix"></image>
            </button>
          </view>
          <view class="card-content">
            <commentList :list="commentList"></commentList>
          </view>
        </view>
      </view>
      
      <!-- <uv-sticky bgColor="#F3F3F3"> -->
        <view class="tabs">
          <uv-tabs 
            :list="tabs" 
            :scrollable="false" 
            lineColor="#00A9FF"
            lineWidth="48rpx"
            lineHeight="4rpx"
            :activeStyle="{
              'font-family': 'PingFang SC',
              'font-weight': 500,
              'font-size': '32rpx',
              'line-height': 1.4,
              'color': '#00A9FF',
            }" 
            :inactiveStyle="{
              'font-family': 'PingFang SC',
              'font-weight': 400,
              'font-size': '32rpx',
              'line-height': 1.4,
              'color': '#191919',
            }" 
            @click="clickTabs"
          ></uv-tabs>
        </view>
      <!-- </uv-sticky> -->
      <view class="detail" v-if="displayContent">
  			<uv-parse :content="displayContent"></uv-parse>
      </view>

    </view>

		<view class="flex bottom">
      <button plain class="flex flex-column btn btn-simple" open-type="contact">
        <image class="icon" src="@/pages_order/static/product/icon-service.png" mode="widthFix"></image>
        <view>客服</view>
      </button>
      <view class="flex operate">
        <button class="flex btn btn-palin" @click="onCollect">{{ isCollected ? '移除收藏' : '收藏' }}</button>
        <button class="flex btn btn-primary" @click="onBuy">立即购买</button>
      </view>
    </view>

    <orderInfoPopup ref="orderInfoPopup" :data="detail" @timeChange="selectTime = $event"></orderInfoPopup>

  </view>
</template>

<script>
  import timeOptionsSelect from '@/pages_order/order/orderConfirm/timeOptionsSelect.vue'
  import commentList from './commentList.vue'
  import orderInfoPopup from '@/pages_order/order/orderConfirm/infoPopup.vue'

  export default {
    components: {
      timeOptionsSelect,
      commentList,
      orderInfoPopup,
    },
    data() {
      return {
        id: null,
        detail: {},
        next: 'createOrder', // createOrder | addCart
        commentList: [],
        tabs: [
          { name: '行程亮点' },
          { name: '课程目标' },
          { name: '详细行程' },
        ],
        current: 0,
        selectTime: null,
      }
    },
    computed: {
			bannerList() {
				const { image } = this.detail

				if (!image) {
					return []
				}

				return Array.isArray(image) ? image : image.split(',')
			},
      tagList() {
        // todo: check key
        const { tagDetails } = this.detail || {}

        return tagDetails?.length ? tagDetails.split('、') : []
      },
      priceInt() {
        return Math.floor(this.detail.priceDiscount)
      },
      priceFrac() {
        let frac = this.detail.priceDiscount % this.priceInt
        return frac > 0 ? frac.toFixed(2).slice(1) : ''
      },
      displayContent() {
        const {
          special,
          target,
          process,
        } = this.detail

        if (this.current == 0) {
          return special
        } else if (this.current == 1) {
          return target
        } else if (this.current == 2) {
          return process
        }

        return ''
      },
      isCollected() {
        return this.detail.isCollection == '1'
      },
    },
    onLoad(arg) {
      const { id } = arg

      this.id = id

      this.fetchDetail(id)
      this.fetchComment(id)
    },
    methods: {
      async fetchDetail(activityId) {

        try {
          const result = await this.$fetch('queryActivityById', { activityId })

          this.detail = result
        } catch (err) {

        }
 
      },
      async fetchComment(activityId) {
        try {
          const queryParams = {
            pageNo: 1,
            pageSize: 2,
            activityId,
          }
          this.commentList = (await this.$fetch('queryCommentList', queryParams))?.records
        } catch (err) {
          console.log('fetchComment', err)
        }

      },
      async onCollect() {
				let succ = await this.$store.dispatch('collect', this.id)
        succ && this.fetchDetail(this.id)
      },
      onBuy() {
        this.$refs.orderInfoPopup.open({ selectTime: this.selectTime })
      },
      jumpToCommentRecords() {
        this.$utils.navigateTo(`/pages_order/comment/commentRecordsOfProduct?id=${this.id}`)
      },
			//点击tab栏
			clickTabs({ index }) {
        this.current = index
			},
    },
  }
</script>

<style scoped lang="scss">
  .page__view {
    width: 100vw;
    min-height: 100vh;
	  background: linear-gradient(#DAF3FF, #F3F3F3 500rpx, #F3F3F3);
    position: relative;
  }

  .main {
    width: 100vw;
    // padding: calc(var(--status-bar-height) + 120rpx) 0 198rpx 0;
    padding-bottom: 198rpx;
    box-sizing: border-box;
	}

  .swiper {
    /deep/ .uv-swiper-indicator__wrapper__dot,
    /deep/ .uv-swiper-indicator__wrapper__dot--active {
      width: 30rpx;
    }

    /deep/ .uv-swiper-indicator__wrapper__dot--active {
      background: linear-gradient(to right, #21FEEC, #019AF9);
    }
  }

  .summary {
    width: 100%;
    padding: 40rpx 32rpx;
    box-sizing: border-box;
  }

  .card {
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 24rpx;

    & + & {
      margin-top: 40rpx;
    }

    &-header {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 1.4;
      color: #181818;
    }

    &-content {
      margin-top: 16rpx;
    }

    &.info {

      .desc {
        font-size: 26rpx;
        white-space: pre-wrap;
        color: #8B8B8B;
      }

      .tags {
        margin-top: 16rpx;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 16rpx;

        .tag {
          padding: 2rpx 14rpx;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          line-height: 1.4;
          color: #00A9FF;
          background: #E9F8FF;
          border: 2rpx solid #00A9FF;
          border-radius: 8rpx;
        }
      }

      .data {
        margin-top: 16rpx;
        justify-content: space-between;
      }

      .price {
        justify-content: flex-start;
        align-items: baseline;
        column-gap: 6rpx;

        &-val {
          font-size: 24rpx;
          font-weight: 500;
          color: #FF4800;

          .highlight {
            font-size: 48rpx;
          }
        }

        &-bef {
          text-decoration: line-through;
          font-size: 24rpx;
          color: #8B8B8B;
        }
      }

      .registered {
        padding: 2rpx 10rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: #FF4800;
        border: 2rpx solid #FF4800;
        border-radius: 4rpx;
      }

    }

    &.comment {

      .card-header {
        justify-content: space-between;
      }

			.btn {
				column-gap: 4rpx;
				font-size: 24rpx;
				color: #8B8B8B;

				.img {
					width: 32rpx;
					height: auto;
				}
			}
    }

  }

  .detail {
    // font-size: 0;
  }

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
    z-index: 999;
    justify-content: space-between;
    column-gap: 16rpx;
		width: 100vw;
		// height: 198rpx;
		padding: 24rpx 40rpx 0 40rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
		background: #FFFFFF;
		box-sizing: border-box;

    .btn-simple {
      border: none;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      line-height: 1.1;
      color: #999999;

      .icon {
        width: 52rpx;
        height: auto;
        margin-bottom: 4rpx;
      }
    }

    .operate {
      justify-content: flex-end;
      column-gap: 16rpx;
      
      .btn {
        font-size: 36rpx;
        font-weight: 500;
        border-radius: 41rpx;
        line-height: 1.4;

        &-palin {
          padding: 14rpx 46rpx;
          color: #252545;
          border: 2rpx solid #252545;
        }

        &-primary {
          padding: 14rpx 62rpx;
          color: #FFFFFF;
          background: linear-gradient(to right, #21FEEC, #019AF9);
          border: 2rpx solid #00A9FF;
        }
      }

    }
	}

</style>