flyx/pages/zizhi/detail.vue

<template>
  <view class="content">
    <mescroll-body
      ref="mescrollRef"
      class="valbox"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <view
        class="goods"
        :style="
          'background: url(' +
          z_imgPath +
          'goods_bg.png' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      >
        <view class="goods_l">
          <!-- <image src="../../static/tabbar/5_act.png"></image> -->
          <text>龙珠手办店</text>
        </view>
        <view class="goods_r">
          <!-- <image src="../../static/tabbar/5_act.png"></image> -->
        </view>
      </view>

      <image :src="z_imgPath + 'xian.png'" class="line"></image>

      <view class="qbt_con">
        <view
          v-for="(item, index) in listdata"
          :key="index"
          class="qbt_con_item"
          @click="todetails(item)"
          :style="
            'background: url(' +
            z_imgPath +
            'kuang_bg.png' +
            ') no-repeat 0 0 / 100% 100%;'
          "
        >
          <view class="list_1">
            <image :src="item.imgurl"></image>
          </view>
          <view class="list_2">
            <view class="hang1">{{ item.title }}</view>
            <view class="qbt_con_item_price">
              <cmd-progress
                :percent="55"
                :show-info="false"
                stroke-color="#FF7514"
                :strokeWidth="8"
                :is_num="true"
                :num_1="item.sale_stock"
                :num_2="item.stock"
              ></cmd-progress>
            </view>
            <view class="qbt_con_item_3">
              <view>
                ￥
                <text style="font-size: 32rpx">{{ item.price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <!-- 群聊弹窗 -->
    <uni-popup ref="qunliao_show" type="center">
      <view
        class="pop"
        :style="
          'background: url(' +
          z_imgPath +
          'qunliao_bg.png' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      >
        <image :src="erweima"></image>
        <image
          :src="z_imgPath + 'close.png'"
          class="qunliao_close"
          @click="$refs.qunliao_show.close()"
        ></image>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
export default {
  components: {
    lffBarrage
  },
  data() {
    return {
      z_imgPath: this.$z_img + 'shouye/',
      arr: ['新品推荐', '一番赏', '积分赏', '无限赏', '擂台赏'],
      show: '新品推荐',
      keyword: '',
      listdata: [],
      downOption: {
        auto: false
      },
      erweima: '' // 福利群
    }
  },

  onShareAppMessage() {
    let that = this
    return {
      title: "吧唧一番，正版潮玩手办一番赏",
      imageUrl: that.advert[0].imgurl,
      path: '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
    }
  },

  onLoad(v) {
    if (v.pid) {
      uni.setStorageSync('pid', v.pid)
    }
  },
  methods: {
    /*下拉刷新的回调 */
    downCallback() {
      // this.mescroll.resetUpScroll()
      this.loadData(1)
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.loadData(page.num)
    },
    loadData(pageNo) {
      // 模拟接口
      let that = this
      that.req({
        url: 'goods',
        data: {
          page: pageNo,
          type: that.show,
          keyword: that.keyword
        },
        success: function (res) {
          that.mescroll.endByPage(res.data.data.length, res.data.data.last_page)
          if (pageNo == 1) {
            that.listdata = res.data.data
          } else {
            that.listdata = that.listdata.concat(res.data.data)
          }
          console.log(that.listdata)
        }
      })
    },
    todetails(e) {
      // 无限赏
      if (e.type == 2) {
        uni.navigateTo({
          url: 'detail_wuxian?goods_id=' + e.id
        })
      } else {
        uni.navigateTo({
          url: 'detail?goods_id=' + e.id
        })
      }
    },
    getlist(v) {
      this.show = v
      // this.listdata = []
      // this.mescroll.resetUpScroll()
      this.loadData(1)
    }
  }
}
</script>

<style>
.qunliao_close {
  width: 70rpx;
  height: 70rpx;
  margin: 116rpx auto;
  display: block;
  /* position: absolute; */
}

.pop > image:nth-of-type(1) {
  width: 399rpx;
  height: 399rpx;
  margin: 258rpx auto 0;
  display: block;
}

.pop {
  width: 640rpx;
  height: 743rpx;
  padding-top: 1rpx;
  position: relative;
}

.line {
  width: 750rpx;
  height: 20rpx;
  display: block;
}

.goods_r > image {
  width: 100rpx;
  height: 100rpx;
}

.goods_r {
  width: 122rpx;
  height: 122rpx;
  border: 2rpx solid #ff6500;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goods_l > image {
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
}

.goods_l {
  display: flex;
  align-items: center;
  color: #ffffff;
}

.goods {
  width: 750rpx;
  height: 220rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content {
  background: #222222;
  width: 100vw;
  /* height: 100vh; */
  box-sizing: border-box;
  position: relative;
  background-attachment: fixed;
  position: relative;
}

.qbt_con {
  margin: 0rpx auto;
  width: 702rpx;
  padding-bottom: 100rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 24rpx;
}

.qbt_con_item {
  margin-top: 30rpx;
  border-radius: 20rpx 20rpx 0 0;
  width: 335rpx;
  height: 490rpx;
  position: relative;
  padding: 18rpx 17rpx 0;
  box-sizing: border-box;
}

.list_1 {
  width: 300rpx;
  height: 300rpx;
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.list_1 > image {
  width: 300rpx;
  height: 300rpx;
  border-radius: 10rpx 10rpx 0 0;
  margin-top: 5rpx;
}

.list_2 {
  padding: 20rpx 0;
  border-radius: 0rpx 0rpx 10rpx 10rpx;
  color: #ffffff;
}

.qbt_con_item_3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4rpx;
  color: #ff6500;
  margin: 10rpx auto 0;
}

.qbt_con_item_price {
  color: #ffffff;
  width: 280rpx;
  display: flex;
  align-items: center;
  margin: 16rpx auto 0;
}
</style>