product.vue

<template>
    <view class="content">
		<view class="item" style="padding-bottom: 0;">
			<image src="../static/vlog/product_fengmian.jpg" mode="widthFix"></image>
			<view class="title">
				<view>我的VLOG照片</view>
				<navigator url="../myVlogPhotos/myVlogPhotos" class="btnn" style="margin-top: 50rpx;">
					<view>点击查看</view>
				</navigator>
			</view>
		</view>
		<block v-for="(item,index) in list" :key="index">
			<view class="item">
				<image :src="item.imgUrl" style="height: 230rpx;"></image>
				<view class="title">
					<text>{{item.name}}</text>
					<view style="margin: 15rpx 0;">
						<text class="noprice">¥{{item.originalPrice}}</text>
						<text class="price">¥{{item.sellingPrice}}</text>
					</view>
					<navigator :url="'../productDetails/productDetails?id='+item.id+'&name='+item.name" class="btnn">
						<view>开始制作</view>
					</navigator>
				</view>
				<view class="guige" v-if="item.priceStockList[0].standardName">
					规格:{{item.priceStockList[0].standardName || ""}}张
				</view>
			</view>
		</block>
	</view>
</template>
<script>
export default {
  data() {
    return {
      list:[],//商品列表
    }
  },
  onLoad(){//代替 vue 里面的 created
    this.getList()
  },
  onReady() {//代替 vue 里面的 mounted
  },
  methods: {
    getList(){//获取商品列表
      this.$request('scenic/user/product/findProductList', {
        openid: uni.getStorageSync('openid'),
        productType:9,
        type:4
      }).then(res => {
        if (res.code == '00') {
          this.list=res.data.list
        }else{
          uni.showModal({
            title: '提示',
            content: res.message,
            showCancel: false,
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
	.content{padding: 0 20rpx;box-sizing: border-box;margin: 0 auto;background-color: #fff;height: 100%;
		.item{display: flex;justify-content: space-between;padding: 40rpx 0;position: relative;width: 100%;align-items: center;
			image{width: 55%;border-radius: 10rpx;}
			.title{width: 40%;text-align: center;font-weight: bold;
				.btnn {display: inline-block;border-radius: 15rpx;background-color: #FFE600;font-weight: bold;padding: 15rpx 20rpx;}
			}
			.guige{position: absolute;color: #999999;height: 16rpx;line-height: 16rpx;bottom: 8rpx;left: 20%;}
		}
	}
	.noprice{font-size: 24rpx; text-decoration: line-through;color: #ccc;}
	.price{font-size: 32rpx;color: #EE520E;margin-left: 10rpx;}
</style>