|
|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="product_box">
|
|
|
+ <view class="to_bottom" v-if="!productList.length"> -----还没有产品啦-----</view>
|
|
|
+ <!-- 产品列表 -->
|
|
|
+ <view class="product_list" >
|
|
|
+ <!-- Vue3 项目部分小程序端事件延迟或调用失败 在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题 -->
|
|
|
+ <view @click="toDetail(item)" data-eventsync="true" class="product_item" v-for="(item,index) in productList" :key="index" >
|
|
|
+ <image class="product_image" :src="item.thumb" mode=""></image>
|
|
|
+ <view class="product_name"><text>{{item.name}}</text></view>
|
|
|
+ <view class="product_spec"><text>{{item.spec}}</text></view>
|
|
|
+ <view class="stock_price">
|
|
|
+ <view class="product_price" >
|
|
|
+ <text >￥{{item.price}} </text>
|
|
|
+ </view>
|
|
|
+ <view class="product_stock">剩{{item.stock}}个</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 产品列表
|
|
|
+ productList:[],
|
|
|
+ // 请求参数
|
|
|
+ requestParam:{
|
|
|
+ coupon_id:0,
|
|
|
+ name:"",
|
|
|
+ page:1,
|
|
|
+ },
|
|
|
+ // 是否最后一页
|
|
|
+ isLast:false,
|
|
|
+ // 是否请求中
|
|
|
+ isReqing:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(param) {
|
|
|
+ this.requestParam.coupon_id = param.coupon_id;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 没有数据的话，或者请求中，不允许刷新
|
|
|
+ if( this.isReqing ) return ;
|
|
|
+ // 请求参数
|
|
|
+ this.requestParam.name = "";
|
|
|
+ // 请求参数
|
|
|
+ this.requestParam.page = 1;
|
|
|
+ // 是否是最后一页
|
|
|
+ this.isLast = false;
|
|
|
+ // 设置请求中
|
|
|
+ this.isReqing = true;
|
|
|
+ // 请求
|
|
|
+ this.$http.request('api/coupon/get_product',this.requestParam).then((re)=>{
|
|
|
+ // 设置非请求中
|
|
|
+ this.isReqing = false;
|
|
|
+ // 成功结果
|
|
|
+ if( re.code == 'success' ){
|
|
|
+ if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
|
|
|
+ this.productList = re.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ // 如果请求中，不允许请求，
|
|
|
+ if( this.isReqing ) return false;
|
|
|
+ // 初始化页码为1
|
|
|
+ this.requestParam.page = 1;
|
|
|
+ // 是否是最后一页
|
|
|
+ this.isLast = false;
|
|
|
+ // 设置请求中
|
|
|
+ this.isReqing = true;
|
|
|
+ // 请求列表
|
|
|
+ this.$http.request('/api/coupon/get_product',this.requestParam).then((re)=>{
|
|
|
+ // 设置非请求中
|
|
|
+ this.isReqing = false;
|
|
|
+ // 成功结果
|
|
|
+ if( re.code == 'success' ){
|
|
|
+ if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
|
|
|
+ this.productList = re.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ // 如果页码是0，避免第一页重复
|
|
|
+ if( this.requestParam.page < 1 ) return;
|
|
|
+ // 最后一页不再请求
|
|
|
+ if( this.isLast ) return;
|
|
|
+ // 请求中，不再请求
|
|
|
+ if( this.isReqing ) return;
|
|
|
+ // 增加一页
|
|
|
+ this.requestParam.page = this.requestParam.page+1;
|
|
|
+ // 设置请求中
|
|
|
+ this.isReqing = true;
|
|
|
+ // 请求列表
|
|
|
+ this.$http.request('api/product/get_list',this.requestParam).then((re)=>{
|
|
|
+ // 设置非请求中
|
|
|
+ this.isReqing = false;
|
|
|
+ // 成功结果
|
|
|
+ if( re.code == 'success' ){
|
|
|
+ // 最后一页
|
|
|
+ if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
|
|
|
+ // 追加数据
|
|
|
+ this.productList.push(...re.data.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toDetail(item){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pages/product/index?product_id="+item.id,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .product_box{
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ padding: 0rpx 35rpx;
|
|
|
+ .product_list{
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ .product_item{
|
|
|
+ float: left;
|
|
|
+ width: 320rpx;
|
|
|
+ height: 520rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20rpx 0rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .product_image{
|
|
|
+ width: 320rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ }
|
|
|
+ .product_name{
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 10rpx 0rpx;
|
|
|
+ padding: 0rpx 10rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .product_spec{
|
|
|
+ height: 30rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ padding: 0rpx 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .stock_price{
|
|
|
+ color: #dddddd;
|
|
|
+ font-size: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 30rpx;
|
|
|
+ padding: 0rpx 10rpx;
|
|
|
+ .product_price{
|
|
|
+ float: left;
|
|
|
+ color: red;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ .product_market{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 30rpx;
|
|
|
+ vertical-align: top;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product_stock{
|
|
|
+ float: right;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product_item:nth-child(even){
|
|
|
+ margin-right: 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
