web-base-h5/pages/shareArea/hiList.vue

<template>
  <view class="contain">
    <view class="zhan"></view>
    <view class="goodList">
          <view v-for="item in goodList"
                :key="item.waresCode"
                class="goodList_i"
               >
            <img :src="item.cover1"
                 class="cover"
                 alt="">
            <view class="goodList_ir">
              <view class="tit1">
                {{ item.waresName }}
              </view>
            
              <view class="sales">
                销量:{{ item.sales |seles}}
              </view>
              <view class="goodList_ib">
                <view>
                  ￥{{ item.waresPrice | numberToCurrency}}
                </view>
                <!-- <img @click.stop="addCar(item)"
                     src="@/static/images/cart.png"
                     alt=""> -->
                     
              </view>
              <view class="toBuy" @click.stop="goBuy(item)">立即购买</view>
            </view>
          </view>
          <view class="zhan2"></view>
        </view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'

export default {
  data(){
    return{
      pkParent:'',
      goodList:[],
      placeParent:''
    }
  },
  filters:{
        seles(value){
          
          if(value>999){
            return 999 + '+'
          }else{
            return value
          }
            
        }
    },
  onLoad(options) {
    this.pkParent = options.pkParent
    this.getToken()
    
  },
  methods:{
    getToken(){
      api.autoLogin({
        pkParent:this.pkParent
      }).then(res=>{
        setToken(res.data.access_token, res.data.expires_in)
        this.getList()
        this.getCode()
      })
    },
    getCode(){
      api.fansConvertCode(
        this.pkParent
      ).then(res=>{
        this.placeParent = res.msg
        uni.setStorageSync('placeParent',  this.placeParent)
      })
    },
    getList(){
      api.queryWares({
        shareMemberCode:this.pkParent
      }).then(res=>{
        this.goodList = res.data
      })
    },
    goBuy(item){
      uni.navigateTo({ url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item)})
    }
  }
}
</script>

<style lang="scss" scoped>
.contain{
  background: #fff;
  height: 100vh;
  background: url('~@/static/images/hf1.jpg') no-repeat;
  background-size: cover;
  padding: 0 20px;
}
.zhan{
  height: 36%;
}
.goodList {
  padding: 40rpx;
  height: 55vh;
  overflow-y: auto;
  background: url('~@/static/images/hf2.png') no-repeat;
  background-size: cover;
  .goodList_i {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 60rpx 60rpx 30rpx 60rpx;
  //   background: url('~@/static/images/hf3.png') no-repeat;
  // background-size: cover;
  border-radius: 20rpx;
  background-image: linear-gradient(to bottom, #fefbf8, #fadf97);
  margin-bottom: 20rpx;
    .goodList_ir {
      margin-left: 40rpx;
     
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      .goodList_ib {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        color: #a36b28;
        img {
          width: 56rpx;
          height: 56rpx;
        }
      }
    }
  }
  .cover {
    width: 200rpx;
    height: 200rpx;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10rpx;
    margin-bottom: 40px;
  }
  .toBuy{
    color: #fff;
    background: #005BAC;
    padding: 10rpx 0;
    text-align: center;
    border-radius: 10rpx;
    font-size: 20px;
  }
}
.tit1{
  color: #93561f;
  font-size: 16px;
  font-weight: 700;
}
.sales{
  color: #923f32;
  font-size: 10px;
  font-weight: 700;
}
</style>