app-AgricultureSmart/uniapp/subpkg/shopdetail/shopdetail.vue

<template>
  <view>
    <view class="detail-header">
<!--      <image :src="shop.imgUrl"></image>-->
      <view class="head">
        <view class="info">
        <view class="title">{{shop.storeName|truncate(10)}}</view>
        <view class="address">{{shop.address.address|truncate(15)}}</view>
        </view>
        <image class="shopIcon" :src="shop.storePicUrl"></image>
<!--        <view class="card">-->
<!--        </view>-->
      </view>
      <van-tabs :active="active" @change="onChange" sticky>
        <van-tab title="点 单">
          <view class="container">
            <scroll-view class="left-menu" scroll-y="true">
              <block v-for="(type, index) in types" :key="index">
                <view class="menu-item" :class="{ active: index === activeIndex }" @tap="scrollToElement('type_'+ (index+1))" >{{ type.productTypeName }}</view>
              </block>
            </scroll-view>
            <scroll-view class="right-content" scroll-y="true" style="height: calc(100vh - 100rpx);" @scroll="onScroll" :scroll-into-view="scrollIntoView">

              <block v-for="(type, index) in types" :key="index">
                <view style="font-weight: bolder;font-size: 30rpx;margin-left: 10rpx;margin-top: 2px" :id='"type_"+ (index+1)'>{{type.productTypeName}}</view>
                <block v-for="(product, idx) in getProjectsByType(index)" :key="idx">
<!--                  <van-card ></van-card>-->
                  <my-card :product="product" card-height="200rpx" card-width="210px"></my-card>
                </block>
              </block>
              <view style="height: 60px; width: 100%;"></view>

              <!--              <block v-for="(product, index) in products" :key="index">-->
<!--                <view class="product-item">{{ product.name }}</view>-->
<!--              </block>-->
            </scroll-view>
          </view>

        </van-tab>
        <van-tab title="评 价">
          <view class="review-container">
<!--            <view class="header">-->
<!--              <view class="title">商品评论</view>-->
<!--              <view class="filter">-->
<!--                <text>默认时间排序</text>-->
<!--              </view>-->
<!--            </view>-->
            <view class="review-list">
              <view class="review-item" v-for="(review, index) in sortedReviews" :key="index">
                <view class="item-header">
                  <view class="user-info">
                    <image class="avatar" :src="review.avatar" mode="aspectFill"></image>
                    <text class="username">{{ review.username }}</text>
                  </view>
                  <view class="rating">
                    <van-rate :value="review.rating" readonly />
                  </view>
                </view>
                <view class="review-content">{{ review.content }}</view>
                <view class="item-footer">
                  <text class="date">{{ formatDate(review.date) }}</text>
                  <view class="actions">
                    <van-icon name="like-o" @click="like(index)" :class="{ liked: review.liked }" />
                    <van-icon name="warning-o" @click="showActionSheet(index)" />
                  </view>
                </view>
              </view>
              <view class="add-review-btn" @click="showReviewModal = true">我要评论</view>
              <van-popup :show="showReviewModal" position="bottom" round :close-on-click-overlay="true" @close="closeReviewModal">
                <view class="review-modal">
                  <view class="modal-header">发表评论</view>
                  <view class="modal-content">
                    <van-rate :value="newReview.rating" size="25" allow-half void-color="#eee" @change="onRate"/>
                    <van-field :value="contentValue" rows="4" autosize type="textarea" @change="onContentChange" maxlength="200" placeholder="请输入评论内容" show-word-limit />
                  </view>
                  <view class="modal-footer" >
                    <van-button type="primary" size="small" @click="submitReview">发表</van-button>
                  </view>
                </view>
              </van-popup>
            </view>
            <van-action-sheet :show="showSheet" :actions="actions" @select="onSelect" />
          </view>
        </van-tab>
        <van-tab title="监 控">
          <view v-if="active === 2" class="monitor-view">
            <video class="monitor-video" :src="videoSrc" :autoplay="true" :loop="true" :muted="true" :show-play-btn="false" :controls="false" :objectFit="fill" ></video>
            <view class="monitor-info">
              <image class="monitor-img" src="../..//static/vedio/1.jpg" mode="aspectFit"></image>
              <text class="monitor-text">请去PC端查看更多内容</text>
            </view>
            <video
                id="myVideo"
                :src="videoSrc"
                :controls="controls"
                :autoplay="autoplay"
                style="width: 100%; height: 300px;"
            ></video>

<!--            <video></video>-->
          </view>
        </van-tab>
        <!--          <van-tab title="标签 4">内容 4</van-tab>-->
      </van-tabs>
    </view>

    <view v-show="active === 0">
    <view class="order">
      <view class="order-footer">
        <view class="discount-info" @click="showPop">
          <div class="icon-container">
            <van-icon name="balance-o" size="30"></van-icon>
            <div class="badge" v-show="total()>0">{{ total() }}</div>
          </div>^
        </view>
        <view class="order-action">
          <view class="order-detail" @click="showOrderDetail">
            <text>￥0</text>
            <text>免配送费</text>
          </view>
          <view class="pay-button" @click="navigateToPayment">

            <text v-show="checkedGoodsAmount()<0">￥{{ 20 }}起送</text>
            <text v-show="checkedGoodsAmount()>=


            0">￥{{ checkedGoodsAmount()}}</text>
          </view>
        </view>
      </view>
    </view>
    </view>
<!--    <view class="shop-container">-->
<!--      <van-tabs :active="active " @change="onChange" swipeable sticky :ellipsis="false">-->
<!--        <van-tab title="全部饮品" name='all' sticky>-->

<!--        </van-tab>-->
<!--        <van-tab v-for="(item,index) in types " :key="index" :title="item.name" :name='item.id' >-->
<!--&lt;!&ndash;          <my-menu-index :projects='projects'></my-menu-index>&ndash;&gt;-->
<!--        </van-tab>-->
<!--      </van-tabs>-->
<!--    </view>-->
  </view>

</template>

<script>

import {mapState,mapMutations,mapGetters} from'vuex'
export default {

  onLoad(args) {
    console.log(args.shopID, 'shopdetail')
    this.shop=this.getShopById()(args.shopID)
    console.log(args,"啊啊啊")
    console.log(this.shop.address.address)
    this.distance=this.getDistance()(10)
    this.products=this.shop.products
    let types=this.shop.productTypes
    this.types=types
    // for (let i=0;i<types.length;i++){
    //   this.types.push( { id: i+1, name: types[i] } )
    // }
    // console.log(this.getDistance()(10))
    // console.log(this.shop,"是吗")
    // console.log(this.projects)
    console.log(this.types)
    console.log(this.products)
    // console.log(this.getShopById(args.shopID)())
  },
  data() {
    return {
      videoSrc: '../../static/vedio/1.mp4',
      showReviewModal: false,
      newReview: {
        avatar: this.getAvatarUrl(), // 默认头像
        username: this.getUserName(),
        rating: 5,
        content: '',
        date: new Date().toISOString().slice(0, 10),
        liked: false
      },
      contentValue: '',

    reviews: [
        {
          avatar: '../../static/avator/1.jpg',
          username: '张三',
          rating: 5,
          content: '这家水果店的苹果真是太好吃了,甜度刚刚好,口感也很脆甜。',
          date: '2024-05-01',
          liked: false
        },
        {
          avatar: '../../static/avator/2.jpg',
          username: '李斯',
          rating: 4,
          content: '香蕉的品质一般,个头较小,但口感还可以。',
          date: '2024-04-28',
          liked: false
        },
        {
          avatar: '../../static/avator/3.jpg',
          username: '辛雨东',
          rating: 3,
          content: '橘子的甜度不够,希望下次能够更甜一些。',
          date: '2024-04-25',
          liked: false
        },
        {
          avatar: '../../static/avator/4.jpg',
          username: '默认名称200151024',
          rating: 5,
          content: '这家店的樱桃真是太棒了,个头大颗颗饱满,甜度也刚刚好,非常满意!',
          date: '2024-04-20',
          liked: false
        },{
          avatar: '../../static/avator/5.jpg',
          username: '李晓',
          rating: 4,
          content: '草莓新鲜可口，个头也很大，值得推荐。',
          date: '2024-04-20',
          liked: false
        },
        {
          avatar: '../../static/avator/6.jpg',
          username: '钱齐星',
          rating: 5,
          content: '西瓜非常甜脆，吃起来非常解渴，很满意。',
          date: '2024-04-20',
          liked: false
        },
        {
          avatar: '../../static/avator/7.jpg',
          username: '刘王雪',
          rating: 3,
          content: '柚子的味道不错，但个头偏小，希望可以选到更大的。',
          date: '2024-04-20',
          liked: false
        }
      ],
      showSheet: false,
      actions: [{ name: '我要举报' }, { name: '取消' }],
      currentIndex: -1,
      shop: {},
      projects: [],
      distance:0,
      active: 0,
      //
      types: [
        { id: '1', productName: '类型1' },
        { id: '2', productName: '类型2' },
        { id: '3', productName: '类型3' },
        // 其他类型...
      ],
      products: [
        { type: '1', name: '商品1' },
        { type: '1', name: '商品1' },
        { type: '1', name: '商品1' },
        { type: '1', name: '商品1' },
        { type: '1', name: '商品1' },
        { type: '1', name: '商品1' },
        { type: '1', name: '商品1' },
        { type: '1', name: '商品1' },
        { type: '1', name: '商品2' },
        { type: '1', name: '商品2' },
        { type: '1', name: '商品2' },
        { type: '1', name: '商品2' },
        { type: '1', name: '商品2' },
        { type: '2', name: '商品3' },
        { type: '2', name: '商品3' },
        { type: '2', name: '商品3' },
        { type: '2', name: '商品3' },
        { type: '2', name: '商品4' },
        { type: '2', name: '商品4' },
        { type: '2', name: '商品4' },
        { type: '2', name: '商品4' },
        { type: '3', name: '商品5' },
        // 其他商品...
      ],
      scrollIntoView: ''
    };
  },
  computed: {

    sortedReviews() {
      return this.reviews.sort((a, b) => new Date(b.date) - new Date(a.date))
    },
      newReviewContent() {
        return this.newReview.content.toString();
    },
  }, watch: {
    newReviewContent(newVal) {
      this.contentValue = newVal;
    }
  },
  methods: {
    ...mapGetters('m_shop',['getTypeById','getProductById']),
    ...mapGetters('m_user',['getUserName','getAvatarUrl']),
    onContentChange(event) {
      console.log(event)
      this.newReview.content = event.detail;
    },
    onRate(event) {
      console.log(event)
      this.newReview.rating = event.detail;
    },
    scrollToElement: function(target) {
      console.log('滚不滚')
      this.scrollIntoView = target; // 滚动到指定元素
    },submitReview() {
      console.log(this.newReview)
      // return
      if (this.newReview.content.trim() !== '') {
        console.log('来了')
        this.reviews.unshift(this.newReview);
        this.newReview = {
          avatar: this.getAvatarUrl(),
          username: this.getUserName(),
          rating: 5,
          content: '',
          date: new Date().toISOString().slice(0, 10),
          liked: false
        };
        this.showReviewModal = false;
      }
      console.log(this.reviews,"reviews")
    },
    closeReviewModal() {
      this.showReviewModal = false;
      this.newReview.content = '';
    },
    showPop() {

    },
    ...mapGetters('m_shop', {'getShopById':'getShopById', 'getDistance':'getDistance'}),
    ...mapGetters('m_proj',{'getProjects':'getProjects','getTypes':'getTypes'}),
    ...mapGetters('m_cart', {'total':'total','checkedGoodsAmount':'checkedGoodsAmount'}),//total:计算数量，checkedGoodsAmount:计算总价
    //
    getProjectsByType(idx){
      // console.log(idx)
      // console.log(this.products)
      let mp={
        0:[1,2,4,5],
        1:[3,2,4,6],
        2:[8,9,7,6],
        3:[10,11,12,13],
        4:[14,15,16,10],
        5:[10,3,13,2],
      }
      let ret=[]
      if (!mp[idx]) return
      for (let i=0;i<mp[idx].length;i++){
        ret.push(this.products[mp[idx][i]-1])
      }
      console.log(ret)
      return ret
    },
    onChange(event) {
      console.log(event)
      console.log(this.active)

      this.active = event.detail.index;
      console.log(this.active)
    },
    scrollToView(index) {
      const typeId = this.types[index].id;
      this.activeIndex = index;
      this.$nextTick(() => {
        uni.pageScrollTo({
          selector: `#type_${typeId}`,
          duration: 300
        });
      });
    },
    onScroll(event) {
      const scrollTop = event.detail.scrollTop;
      const types = this.types;
      let currentTypeIndex = 0;

      for (let i = 0; i < types.length; i++) {

        const typeId = types[i].id;
        const query = uni.createSelectorQuery();
        query.select('#type_' + typeId).boundingClientRect();
        query.exec((res) => {
          if (res && res[0] && res[0].top <= 0) {
            currentTypeIndex = i;
          }
        });
      }
      this.activeIndex = currentTypeIndex;
    },
    showOrderDetail() {
      // 显示订单详情界面的逻辑
    },
    pay() {
      // 付款逻辑

    },
    formatDate(dateStr) {
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    like(index) {
      this.reviews[index].liked = !this.reviews[index].liked
    },
    showActionSheet(index) {
      this.currentIndex = index
      this.showSheet = true
    },
    onSelect(event) {
      if (event.detail.name === '我要举报') {
        // 执行举报操作

        console.log(`举报第${this.currentIndex + 1}条评论`)
        uni.showToast({
          title: '举报成功',
          icon: 'success',
          duration: 3000
        });
      }
      this.showSheet = false
    },
    navigateToPayment() {
      uni.navigateTo({
        url: '/subpkg/payment/payment?shopTitle=' + this.shop.storeName+'&shopId=' + this.shop.id
      });
    }
  },
  filters: {
    formatPrice(price) {
      return '¥' + price.toFixed(2);
    },
  //   字数过长用...限制
    truncate(value, length = 10) {
      if (!value) return '';
      if (value.length > length) {
        return value.slice(0, length) + '...';
      }
      return value;
    }


  }
}

</script>

<style lang="scss">
.icon-container {
  position: relative;
  display: inline-block;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}
page {
  background-color: #f5f5f5;
  //overflow: hidden;
}
.head{
  display: flex;
  align-items: center;
  justify-content: center;
  .info{
    //上下布局
    display: flex;
    flex-direction: column;
    align-items: center;
    .title{
      font-weight: bold;
      font-size: 40rpx;
      margin-bottom: 20rpx;
    }
    .address{
      font-size: 30rpx;
      color: #999;
      margin-bottom: 20rpx;

    }
  }
  image{
    width: 130rpx;
    height: 130rpx;
    border-radius: 2%;
    margin-right: 20rpx;
    margin-left: 20rpx;

  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 130rpx;
  position: fixed;
  top: 0;
  z-index: 900;
  background-color: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);

  .left {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      width: 90%;
      color: #343434;
      font-size: 30rpx;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .address {
      width: 90%;
      color: #999;
      font-size: 26rpx;
      padding-top: 6rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .right {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .type {
      display: flex;
      width: 180rpx;
      height: 60rpx;
      border-radius: 100rpx;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;

      .name {
        background-color: #343434;
        color: #fff;
        width: 86rpx;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 54rpx;
        transition: all .3s;
      }

      .text {
        width: 86rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
    }

    .more {
      color: #999;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      padding-top: 6rpx;

      icon {
        padding-left: 4rpx;
      }
    }
  }
}

.goodsBox {
  width: 100%;
  display: flex;

  .left {
    flex: 0 0 28%;

    .menuList {
      overflow-y: scroll;
      padding-bottom: 20rpx;

      .menu {
        color: #999999;
        font-size: 26rpx;
        padding: 30rpx 10rpx;
        text-align: center;
        background-color: transparent;
        border-left: 6rpx solid transparent;
        transition: all 0.6s;
      }

      .active {
        font-weight: bold;
        background-color: #FFFFFF;
      }
    }
  }

  .right {
    flex: 0 0 72%;
    background-color: #FFFFFF;

    .swiperBpx {
      width: 95%;
      margin: 0 auto;
      padding-top: 14rpx;
      position: relative;

      swiper {
        height: 220rpx;

        .swiper-item {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFFFFF;
          font-size: 56rpx;
        }
      }

      .swiperDots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12rpx;
        display: flex;
        justify-content: center;
        height: 10rpx;

        .dot {
          margin: 0 5rpx;
          width: 25rpx;
          height: 4rpx;
          background: #fff;
          border-radius: 20rpx;
          transition: all 0.6s;
          opacity: 0.5;
        }

        .active {
          opacity: 1;
        }
      }
    }
    .goodsList{
      width: 95%;
      margin: 0 auto;
      .gheader{
        font-weight: bold;
        font-size: 26rpx;
        display: flex;
        height: 100rpx;
        align-items: center;
      }
      .goods{
        display: flex;
        position: relative;
        padding-bottom: 20rpx;
        margin-bottom: 20rpx;
        .left{
          flex: 0 0 30%;
          display: flex;
          .image{
            width: 140rpx;
            height: 140rpx;
            background-color: #f5f5f5;
            border-radius: 6rpx;
            overflow: hidden;
            position: relative;
            .icon{
              position: absolute;
              top: 0;
              left: 0;
            }
            .none{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(255,255,255,.6);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 26rpx;
              color: #999;
            }
          }
        }
        .right{
          flex: 0 0 70%;
          .title{
            color:#343434;
            font-size:26rpx;
            font-weight:bold;
          }
          .intro{
            color:#999;
            font-size:24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            padding-top: 4rpx;
          }
          .box{
            display:flex;
            align-items:center;
            padding-top: 10rpx;
            position: relative;
            .price{
              color:#343434;
              font-size:28rpx;
              font-weight:bold;
              flex: 0 0 50%
            }
            .button{
              flex: 0 0 50%;
              display: flex;
              justify-content: flex-end;
              .text{
                background-color: #d3aa79;
                color: #fff;
                font-size: 24rpx;
                padding: 4rpx 16rpx;
                border-radius: 100rpx;
              }
            }
          }
        }

      }
    }
  }
}
.footer{
  position:fixed;
  bottom: 140rpx;
  width:92%;
  left:0;
  right: 0;
  height:80rpx;
  margin: 0 auto;
  border-radius: 100rpx;
  background-color:#fff;
  display:flex;
  align-items:center;
  z-index:899;
  box-shadow: 0 0 20rpx rgba(0,0,0,.05);
  .label{
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .left{
    flex: 0 0 70%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    .cart{
      position: absolute;
      width: 180rpx;
      height: 100%;
      left: 0;
      color: #343434;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      icon{
        padding-right: 8rpx;
      }
      text{
        position: absolute;
        top: -8rpx;
        right: -12rpx;
        background-color: #d3aa79;
        border-radius: 100%;
        width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24rpx;
      }
    }
    .price{
      color:#343434;
      font-size:30rpx;
      padding-right: 30rpx;
      font-weight: bold;
    }
  }
  .right{
    flex: 0 0 30%;
    height: 100%;
    border-top-right-radius: 100rpx;
    border-bottom-right-radius: 100rpx;
    overflow: hidden;
    .button{
      width: 100%;
      height: 100%;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color:#d3aa79;
    }
    .none{
      background-color:#bbbbbb;
    }
  }
}
.footerX{
  bottom: 166rpx;
}

.showPopBox{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 970;
  transition: all 0.3s;
  .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 971;
  }
  .showContent{
    position: absolute;
    z-index: 972;
    width: 100%;
    max-height: 600rpx;
    bottom: 120rpx;
    background-color: #fff;
    left: 0;
    .sheade{
      width: 100%;
      background-color: #f2f2f2;
      font-size: 24rpx;
      height: 56rpx;
      display: flex;
      align-items: center;
      .left{
        flex: 0 0 50%;
        .text{
          color: #999;
          padding-left: 20rpx;
        }
      }
      .right{
        flex: 0 0 50%;
        .text{
          color: #999;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 20rpx;
          icon{
            padding-right: 6rpx;
          }
        }
      }
    }
    .sconten{
      max-height: 544rpx;
      overflow-y: scroll;
      .goods{
        width: 95%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #f5f5f5;
        height: 110rpx;
        .left{
          flex: 0 0 60%;
          .title{
            color:#343434;
          }
          .label{
            color:#999;
            font-size: 24rpx;
          }
        }
        .right{
          flex: 0 0 40%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .price{
            flex: 0 0 40%;
            color:#343434;
          }
          .buy{
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 60%;
            input{
              text-align: center;
              color:#343434;
            }
            text{
              color: #999;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
  .infoContent{
    position: absolute;
    z-index: 972;
    width: 100%;
    max-height: 55vh;
    top: 130rpx;
    background-color: #fff;
    left: 0;
    overflow-y: scroll;
    padding-bottom: 20rpx;
    padding-top: 10rpx;
    .label{
      width: 95%;
      margin: 0 auto;
      padding: 12rpx 0;
      .title{
        color: #343434;
        font-size: 26rpx;
      }
      .text{
        color: #999;
        font-size: 24rpx;
        padding-top: 4rpx;
      }
    }
    .images{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 6rpx;
      .image{
        width: 200rpx;
        height: 200rpx;
        border: 2rpx solid #f5f5f5;
        background-color: #f5f5f5;
        margin-right: 20rpx;
        position: relative;
        .text{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: rgba(255,255,255,.6);
          height: 50rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666;
          font-size: 26rpx;
        }
      }
    }
  }
  .goodsConten{
    position: absolute;
    z-index: 972;
    width: 80%;
    background-color: #fff;
    border-radius: 10rpx;
    padding-bottom: 20rpx;
    margin-top: -5vh;
    box-shadow: 0 10rpx 20rpx rgba(0,0,0,.06);
    .image{
      width: 100%;
      height: 320rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      icon{
        position: absolute;
      }
    }
    .title{
      width: 90%;
      margin: 0 auto;
      padding-top: 10rpx;
      padding-bottom: 10rpx;
      color: #343434;
      font-weight: bold;
    }
    .moreBox{
      width: 90%;
      margin: 0 auto;
      .label{
        padding-bottom: 10rpx;
        .stitle{
          padding-bottom: 10rpx;
          text{
            color: #999;
            font-size: 26rpx;
          }
        }
        .specBox{
          display: flex;
          flex-wrap: wrap;
          .spec{
            border: 1px solid #eee;
            padding: 8rpx 20rpx;
            margin-right: 12rpx;
            font-size: 24rpx;
            color: #999999;
          }
          .active{
            color: #FFFFFF;
          }
        }
      }
      .more{
        padding-bottom: 20rpx;
        .labtit{
          color: #999;
          font-size: 26rpx;
          padding-top: 10rpx;
        }
        .intro{
          color: #999;
          font-size: 24rpx;
        }
      }
    }
    .gfooter{
      border-top: 1px solid #f5f5f5;
      padding-top: 20rpx;
      .price{
        width: 90%;
        margin: 0 auto;
        display: flex;
        padding: 10rpx 0;
        align-items: center;
        justify-content: center;
        .left{
          flex: 0 0 65%;
          .text{
            color: #d3aa79;
            font-size: 32rpx;
            font-weight: bold;
            display: flex;
            align-items: center;
            text{
              text-decoration: line-through;
              color: #999;
              font-size: 26rpx;
              margin-left: 10rpx;
              font-weight: normal;
            }
          }
          .label{
            color: #999;
            font-size: 24rpx;
          }
        }
        .right{
          flex: 0 0 35%;
          display: flex;
          justify-content: flex-end;
          .buy{
            display: flex;
            align-items: center;
            input{
              text-align: center;
              color:#343434;
            }
          }
        }
      }
      .button{
        width: 90%;
        margin: 0 auto;
        margin-top: 20rpx;
        background-color: #d3aa79;
        color: #fff;
        height: 66rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100rpx;
        font-size: 26rpx;
      }
      .none{
        background-color: #cccccc;
      }
    }
  }
}
.couponsIcon{
  position: fixed;
  bottom: 230rpx;
  width: 100rpx;
  height: 100rpx;
  left: 60rpx;
}
.showCoupons{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .coupons{
    position: absolute;
    width: 600rpx;
    height: 568rpx;
    border-radius: 10rpx;
    z-index: 1001;
    transition: all 0.6s;
    margin-top: -10%;
    .headerTitle{
      position: absolute;
      top: 76rpx;
      width: 100%;
      text-align: center;
      color: #af8859;
      font-size: 26rpx;
    }
    .listBox{
      width: 72%;
      margin: 0 auto;
      margin-top: 50rpx;
      position: absolute;
      left: 0;
      right: 0;
      top: 100rpx;
      height: 260rpx;
      border-bottom-left-radius: 20%;
      border-bottom-right-radius: 20%;
      overflow: hidden;
      .list{
        display:flex;
        align-items:center;
        width:99%;
        height:120rpx;
        justify-content:center;
        border-radius:4rpx;
        position: relative;
        overflow:hidden;
        padding: 2rpx;
        margin: 0 auto;
        margin-bottom: 20rpx;
        .left{
          width:35%;
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          height:120rpx;
          border:2rpx solid #f5f5f5;
          border-right:none;
          .price{
            color:#d3aa79;
            font-size:42rpx;
            font-weight:500;
            display:flex;
            text{
              font-size:26rpx;
              padding-top:6rpx;
              padding-right:2rpx;
            }
          }
          .text{
            color:#999;
            font-size:22rpx;
          }
        }
        .active{
          position:absolute;
          width:2rpx;
          height:80rpx;
          left:34%;
          border-right:2rpx dashed #eee;
          display:flex;
          align-items:center;
          justify-content:center;
          .top{
            width:20rpx;
            height:20rpx;
            background-color:#fff;
            border-radius:100%;
            position:absolute;
            top:-30rpx;
            border:2rpx solid #f5f5f5;
          }
          .buttom{
            width:20rpx;
            height:20rpx;
            background-color:#fff;
            border-radius:100%;
            position:absolute;
            bottom:-30rpx;
            border:2rpx solid #f5f5f5;;
          }
        }
        .right{
          width:65%;
          height:120rpx;
          display:flex;
          flex-direction:column;
          justify-content:center;
          border:2rpx solid #f5f5f5;
          border-left:none;
          .title{
            color:#343434;
            font-weight:500;
            font-size:26rpx;
            width:90%;
            margin:0 auto;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          .times{
            color:#999;
            font-size:24rpx;
            padding-top:10rpx;
            width:90%;
            margin:0 auto;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
      }
    }
    .buttonBox{
      width: 80%;
      margin: 0 auto;
      height: 70rpx;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      position: absolute;
      bottom: 36rpx;
      left: 0;
      right: 0;
      .button{
        background-color:#af8859;
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        border-radius:4rpx;
        font-size: 26rpx;
      }
    }
    .close{
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100rpx;
    }
  }
}
.showShare{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .share{
    position: absolute;
    width: 500rpx;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    z-index: 1001;
    transition: all 0.6s;
    .title{
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 38rpx 0 30rpx;
    }
    .box{
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 38rpx;
      .label{
        flex: 0 0 45%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        position: relative;
        .text{
          font-size: 24rpx;
        }
        button{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    }
    .haibao{
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      image{
        width: 400rpx;
        height: 600rpx;
        border: 1px solid #f5f5f5;
        border-radius: 6rpx;
      }
      .save{
        color: #FFFFFF;
        width: 280rpx;
        height: 60rpx;
        border-radius: 100rpx;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30rpx 0;
      }
    }
  }
}





.container {
  display: flex;
}
.left-menu {
  flex: 1;
}
.right-content {
  flex: 2;
}
.menu-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  color: #333;
}
.menu-item.active {
  color: red; /* 激活状态的颜色 */
}
.product-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}


.order-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.discount-info {
  font-size: 14px;
}

.order-action {
  display: flex;
}

.order-detail {
  background-color: #666;
  padding: 15px 20px; /* 增加了padding */
  border-radius: 20px 0 0 20px; /* 增加了圆角半径 */
  font-size: 16px; /* 增加了字体大小 */
}

.pay-button {
  background-color: #ff6700;
  padding: 15px 20px; /* 增加了padding */
  border-radius: 0 20px 20px 0; /* 增加了圆角半径 */
  font-size: 18px; /* 增加了字体大小 */
}




.review-container {
  padding: 20rpx;
  background-color: #f7f7f7;
  .add-review-btn {
    margin-top: 20rpx;
    background-color: #07c160;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .review-modal {
    background-color: #fff;
    padding: 30rpx;

    .modal-header {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .modal-content {
      margin-bottom: 30rpx;
    }

    .modal-footer {
      text-align: right;
    }
}
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
  }

  .filter {
    font-size: 26rpx;
    color: #666;
  }
}

.review-list {
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;
}

.review-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;

    .user-info {
      display: flex;
      align-items: center;

      .avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }

      .username {
        font-size: 28rpx;
        color: #333;
      }
    }

    .rating {
      font-size: 24rpx;
      color: #ffd21e;
    }
  }

  .review-content {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10rpx;
  }

  .item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .date {
      font-size: 24rpx;
      color: #999;
    }

    .actions {
      .van-icon-like-o,
      .van-icon-warning-o {
        font-size: 24rpx;
        margin-left: 10rpx;
        color: #999;
      }

      .liked {
        color: #ff6600;
      }
    }
  }
}
.monitor-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500rpx;
}

.monitor-video {
  width: 100%;
  height: 300rpx;
}

.monitor-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
}

.monitor-img {
  width: 200rpx;
  height: 200rpx;
}

.monitor-text {
  margin-top: 30rpx;
  font-size: 50rpx;
  color: #666;
}
</style>