ec.uniapp-master/pages/order/comment/comment.vue

<template>

<view id="order-index">
    <view class="navbar mx-1px-bottom">
        <block v-for="(item, index) in tabList" :key="index" >
            <view :id="index" class="navbar-item" :class="activeIndex == index ? 'activity' : ''" @tap="tabClick">
                <view class="navbar-title">{{item.title}}</view>
            </view>
        </block>
        <view class="navbar-slider" :style="'width: ' + width + 'px; transform: translateX(' + sliderOffset + 'px); -webkit-transform: translateX(' + sliderOffset + 'px);'"></view>

    </view>
    <view class="tab-panel">
        <view class="tab-content" :hidden="activeIndex != 0">

            <view class="order-box">
                <view class="order-item__none" v-if="dataList[0] == '' && tabList[activeIndex].init">
                    暂无数据
                </view>
                <view v-for="(item, idx) in dataList[0]" :key="idx">
                    <view class="order-item" :data-no="order.order_no" v-for="(order, index) in dataList[0][idx]" :key="index"  @tap="jumps">
                        <view class="item-top">
                            <view class="indent mx-1px-bottom">
                                <view class="order-num">
                                    <span>线上门店</span> | 订单编号：{{order.order_no}}
                                </view>
                                <view class="order-type">
                                    {{typeList[0]}}
                                </view>
                            </view>
                        </view>
                        <view class="item-middle">
                            <view class="middle-item mx-1px-bottom" v-for="(good, index) in order.items" :key="index" >
                                <image :src="good.item_meta.image"></image>
                                <view class="commodity_detail">
                                    <view class="detail_name">
                                        {{good.item_name}}
                                    </view>
                                    <view class="detail_num">
                                        <view class="num_css">
                                            <span>{{good.quantity}}件</span>
                                            <span>{{good.item_meta.specs_text}}</span>
                                        </view>
                                        <view class="num_money">
                                            ￥{{good.total_yuan}}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="item-bottom" >
                            <view class="all-money">
                                {{order.count}}件, 共计 ￥{{order.total_yuan}}
                            </view>
                            <view class="button-box">
                                立即评价
                            </view>
                        </view>
                    </view>
                </view>
                <view class="loadingbox" :hidden="!tabList[0].show">
                    {{showText}}
                </view>

            </view>

        </view>
        <view class="tab-content" :hidden="activeIndex != 1">
            <view class="order-box">
                <view class="order-item__none" v-if="dataList[1] == '' && tabList[activeIndex].init">
                    暂无数据
                </view>
                <view v-for="(item, indexs) in dataList[1]" :key="indexs" >
                    <view class="evaluate-item" v-for="(comment, index) in dataList[1][indexs]" :key="index">
                        <view class="adapter mx-1px-bottom">
                            <view class="adapter_item">
                                <view class="item_title">
                                    <view class="adapter-img">
                                        <image :src="comment.user.avatar"></image>
                                       <!-- <view class="justify globalColor">V{{comment.user.grade}}</view> -->
                                    </view>
                                    <view class="text">{{comment.user.nick_name}}</view>
                                </view>
                                <view class="rater">
									 <uni-rate size="18" disabled="true" active-color="red"  :value="comment.point" ></uni-rate>
                                </view>
                            </view>

                            <view class="adapter_type">
                                <span>{{comment.created_at}}</span>
                                <span>颜色分类：{{comment.item_meta.specs_text}}</span>
                            </view>
                            <view class="adapter_content">
                                <view class="content_item">
                                    <view class="content_text">
                                        {{comment.contents}}
                                    </view>
                                    <view class="content_img">
                                        <view class="img_item" v-for="(imgList, index) in comment.pic_list" :key="index" >
                                            <view class="img">
                                                <image mode="widthFix" :src="imgList"></image>
                                            </view>
                                        </view>
                                    </view>
                                </view>

                            </view>
                        </view>
                        <view class="commodity" :hidden="order_item == ''">
					
                            <view class="commodity_item" :data-id="comment.item_meta.detail_id" @tap="jumpDetail">
                                <view class="commodity_img">
                                    <image :src="comment.item_meta.image"></image>
                                </view>
                                <view class="commodity_detail">
                                    <view class="detail_name">
                                        {{comment.order_item.item_name}}
                                    </view>
                                    <view class="detail_num">
                                        <view class="num_css">
                                            <span>{{comment.order_item.quantity}}件</span>
                                            <span>{{comment.item_meta.specs_text}}</span>
                                        </view>
                                        <view class="num_money">
                                            ￥{{comment.order_item.total_yuan}}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="loadingbox" :hidden="!tabList[0].show">
                    {{showText}}
                </view>
            </view>
        </view>
    </view>
</view>

</template>
<script>
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
import uniRate from "@/components/score/uni-rate/uni-rate.vue"

export default {
  data() {
    return {
      status: {
        0: 0,
        1: 0,
        2: 0,
        3: 0
      },
      activeIndex: 0,
      sliderOffset: 0,
      sliderLeft: 0,
      width: 0,
      tabList: [{
        title: "待评价",
        init: false,
        line: false,
        statusNum: {
          page: 0,
          more: true
        },
        show: false
      }, {
        title: "已评价",
        init: false,
        line: false,
        statusNum: {
          page: 0,
          more: true
        },
        show: false
      }],
      dataList: {
        0: [],
        1: []
      },
      orderList: {},
      typeList: {
        0: '已完成'
      },
      showText: '正在加载下一页数据'
    };
  },
 components:{
	 uniRate 
  },

  onReachBottom(e) {
    var status = this.activeIndex;
    var page = this.tabList[status].page + 1;
    var tabList = `tabList[${status}]`;

    if (this.tabList[status].more) {
      if (status == 0) {
		  
        // this.setData({
        //   [`${tabList}.show`]: true
        // });
		
		this.tabList.show=true;
		
        this.orderListF(page);
      } else if (status == 1) {
        // this.setData({
        //   [`${tabList}.show`]: true
        // });
		this.tabList.show=true;
        this.commentList(page);
      }
    } else {
      wx.showToast({
        title: '再拉也没有啦'
      });
    }
  },

  onShow() {
    wx.showLoading({
      title: "加载中",
      mask: true
    });
    wx.getSystemInfo({
      success: res => {
        this.setData({
          width: res.windowWidth / this.tabList.length,
          sliderOffset: res.windowWidth / this.tabList.length * this.activeIndex
        });
      }
    });
    this.orderListF();
  },

  onLoad(e) {},

  components: {},
  props: {},
  methods: {
  
    tabClick(e) {
      var status = e.currentTarget.id;

   //    this.setData({
   //      sliderOffset: e.currentTarget.offsetLeft,
   //      activeIndex: status
   //    });
	  // 
	  this.sliderOffset=e.currentTarget.offsetLeft;
	  this.activeIndex=status
	  
      if (status == 0) {
        if (!this.tabList[status].init) {
          wx.showLoading({
            title: "加载中",
            mask: true
          });
          this.orderListF();
        }
      } else if (status == 1) {
        if (!this.tabList[status].init) {
          wx.showLoading({
            title: "加载中",
            mask: true
          });
          this.commentList();
        }
      }
    },

    jump(e) {
      wx.navigateTo({
        url: '/pages/order/detail/detail?no=' + e.currentTarget.dataset.no
      });
    },

    jumps(e) {
      wx.navigateTo({
        url: '/pages/order/evaluate/evaluate?no=' + e.currentTarget.dataset.no
      });
      console.log(1);
    },

    jumpDetail(e) {
      wx.navigateTo({
        url: '/pages/store/detail/detail?id=' + e.currentTarget.dataset.id
      });
    },

    //获取已评价列表
    commentList(page = 1) {
      this.$http.get({
        api: 'api/comment/list',
        header: {
          Authorization: this.$cookieStorage.get('user_token')
        },
        data: {
          page: page
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            console.log(res.data);
            var pages = res.meta.pagination;
            var current_page = pages.current_page;
            var total_pages = pages.total_pages;
            var tabList = `tabList[1]`;
            // this.setData({
            //   [`dataList[1][${page - 1}]`]: res.data,
            //   [`${tabList}.init`]: true,
            //   [`${tabList}.page`]: current_page,
            //   [`${tabList}.more`]: current_page < total_pages
            // });
			
		    this.dataList[1][page - 1]=res.data;
			this.tabList[1].init=res.data;
			this.tabList[1].page=current_page;
			this.tabList[1].more=current_page < total_pages;
			
            res.data.forEach(v => {
              /* Rater.init(`${v.id}`, {
                   value: v.point,
                   disabled: true,
                   activeColor: '#EA4448',
                   fontSize: 14
               })*/
			   
			   
            });
          } else {
            wx.showToast({
              title: "请求失败",
              image: '../../../static/error.png'
            });
          }
        } else {
          wx.showModal({
            content: '请求失败',
            showCancel: false
          });
        }

        wx.hideLoading();
      }).catch(rej => {
        wx.showToast({
          title: "请求失败",
          image: '../../../static/error.png'
        });
        wx.hideLoading();
      });
    },

    // 获取订单列表
    orderListF(page = 1, type = 0) {
      var token = this.$cookieStorage.get('user_token');
      var params = {};
      params.status = 4, params.page = page;
      params.type = type;
      params.channel = '';
      this.$http.get({
        api: 'api/order/list',
        header: {
          Authorization: token
        },
        data: params
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            console.log(res.data);
            var pages = res.meta.pagination;
            var current_page = pages.current_page;
            var total_pages = pages.total_pages;
            var tabList = `tabList[0]`;
            // this.setData({
            //   [`dataList[0][${page - 1}]`]: res.data,
            //   [`${tabList}.init`]: true,
            //   [`${tabList}.page`]: current_page,
            //   [`${tabList}.more`]: current_page < total_pages
            // });
			
			this.dataList[0][page - 1]=res.data;
			this.tabList[0].init=res.data;
			this.tabList[0].page=current_page;
			this.tabList[0].more=current_page < total_pages;
			
	
          } else {
            wx.showToast({
              title: res.message,
              image: '../../../static/error.png'
            });
          }
        } else {
          wx.showModal({
            content: '请求失败',
            showCancel: false
          });
        }

        wx.hideLoading();
      }).catch(rej => {
        wx.showToast({
          title: "请求失败",
          image: '../../../static/error.png'
        });
        wx.hideLoading();
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  },
  computed: {},
  watch: {}
};
</script>

<style rel="stylesheet/less" lang="less">
    @import "comment";
</style>