mt-swipe mt-popup使用案例

最新推荐文章于 2022-05-11 20:29:06 发布

原创最新推荐文章于 2022-05-11 20:29:06 发布 · 645 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文详细介绍了HTML中两个常用的组件——mt-swipe和mt-popup的使用方法和应用场景。通过实例展示了如何集成这两个组件，实现滑动切换效果和弹出窗口功能，为网页交互增添更多可能性。

<script>
import numbox from '../../components/numbox.vue'
export default {
  components: {
    numbox,
  },
  methods: {
    countChange(res) {
      this.selectCount = res.count
    },
    goBuy() {
      this.$store.commit('shopcart/setBuy', {
        id: this.id,
        count: this.selectCount,
      })
      this.$router.push('/order/create')
    },
    addCar() {
      this.showNum = false
      this.goodsInfo.count = this.selectCount
      this.$store.commit('shopcart/addGoods', this.goodsInfo)
      this.$toast('已加入购物车')
    },
  },
}
</script>

<template>
  <div class="goods-info">
    <mt-swipe :auto="4000" class="banner">
      <mt-swipe-item v-for="item in goodsInfo.album" :key="item.id">
        <img :src="item.img" />
      </mt-swipe-item>
    </mt-swipe>
    <div class="main-info">
      <p class="price">￥<span>{{ goodsInfo.price }}</span></p>
      <p class="name">{{ goodsInfo.name }}</p>
    </div>
    <div style="height:10px;background-color:#F5F6F6;"></div>
    <div class="main-info" style="padding-right:0;">
      <mt-cell title="快速购买" :value="goodsInfo.num?'点击购买':'该商品暂时无货'" @click.native="goodsInfo.num?showNum=true:''"
        is-link></mt-cell>
    </div>
    <div style="height:10px;background-color:#F5F6F6;"></div>
    <div class="param">
      <p class="title">商品信息</p>
      <div class="cell">
        <p>商品卖点：{{ goodsInfo.sell_point }}</p>
        <p>库存情况：{{ goodsInfo.num }}件</p>
        <p>上架时间：{{ goodsInfo.create_time }}</p>
      </div>
    </div>
    <div style="height:10px;background-color:#F5F6F6;"></div>
    <div class="param">
      <p class="title">详情</p>
      <div class="content" v-html="goodsInfo.content"></div>
    </div>

    <mt-popup v-model="showNum" position="bottom">
      <div class="select-num">
        <div class="content">
          <p class="title">请选择数量</p>
          <numbox :initCount="1" :max="goodsInfo.num" :goods_id="goodsInfo.id" @countChange="countChange"></numbox>
        </div>
        <p class="handle"><span @click="goBuy">立即购买</span><span @click="addCar">加入购物车</span></p>
      </div>
    </mt-popup>
  </div>
</template>

<style scoped lang="scss">
.goods-info {
  background-color: #fff;
  .banner {
    height: 7.5rem;
    border-bottom: 1px solid #eee;
    img {
      width: 7.5rem;
      height: 7.5rem;
    }
  }
  .main-info {
    padding: 0.2rem 0.3rem;
    .name {
      text-align: left;
      color: #202020;
      font-size: 0.3rem;
      font-family: PingFang SC;
      font-weight: bold;
      span {
        background-color: #ef4f4f;
        color: #fff;
        padding: 2px 5px;
        border-radius: 4px;
        margin-right: 5px;
      }
    }
    .price {
      color: #fb2c1c;
      font-size: 0.48rem;
      font-weight: bold;
      span {
        font-size: 24px;
      }
    }
    /deep/ .mint-cell-wrapper {
      font-size: 14px;
      padding-left: 0;
    }
    .mint-cell {
      min-height: 30px;
      border-top: 0;
      border-bottom: 0;
    }
  }
  .param {
    padding: 0.2rem 0;
    .title {
      padding: 0 0.3rem 0.2rem 0.4rem;
      margin: 0;
      color: #333;
      &::before {
        position: absolute;
        z-index: 1;
        left: 0.3rem;
        margin-top: 3px;
        content: '';
        display: block;
        width: 2px;
        height: 15px;
        background-color: #1ca6ff;
      }
    }
    .cell {
      padding: 0 0.3rem;
      p {
        margin-bottom: 5px;
      }
    }
    .content {
      /deep/ p {
        margin: 0;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
  .select-num {
    width: 7.5rem;
    .title {
      text-align: left;
      padding: 0.2rem 0.3rem;
      font-size: 14px;
      color: #333;
      margin: 0;
    }
    .content {
      display: flex;
      justify-content: space-between;
      text-align: center;
      padding: 0.4rem 0 0.4rem 0;
      .mui-numbox {
        font-size: 22px;
        width: 170px;
        border: 0;
        /deep/.mui-btn {
          width: 40px;
          height: 100%;
          background-color: #fff;
        }
        /deep/ .mui-input-numbox {
          background-color: #ececec;
          border-right: 0 !important;
          border-left: 0 !important;
        }
      }
    }
    .handle {
      display: flex;
      margin: 0;
      padding: 0.3rem 0;
      span {
        flex: 1;
        text-align: center;
        color: #fff;
        background-color: #fc7c44;
        padding: 9px 0;
        border-radius: 50px;
        margin: 0 0.2rem;
        &:last-child {
          background-color: #f4be41;
        }
      }
    }
  }
}
</style>