发布v1.0.3

pages/goods/comment/add.vue

@@ -0,0 +1,157 @@
+<!-- 评价  -->
+<template>
+  <s-layout title="评价">
+    <view>
+      <view v-for="(item, index) in state.orderInfo.items" :key="item.id">
+        <view v-if="item.btns.includes('comment')">
+          <view class="commont-from-wrap">
+            <!-- 评价商品 -->
+            <s-goods-item
+              :img="item.goods_image"
+              :title="item.goods_title"
+              :skuText="item.goods_sku_text"
+              :price="item.goods_price"
+              :num="item.goods_num"
+            ></s-goods-item>
+          </view>
+
+          <view class="form-item">
+            <!-- 评分 -->
+            <view class="star-box ss-flex ss-col-center">
+              <view class="star-title ss-m-r-40">
+                {{ rateMap[state.commentList[index].level] }}
+              </view>
+              <uni-rate v-model="state.commentList[index].level" />
+            </view>
+            <!-- 评价 -->
+            <view class="area-box">
+              <uni-easyinput
+                :inputBorder="false"
+                type="textarea"
+                maxlength="120"
+                autoHeight
+                v-model="state.commentList[index].content"
+                placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧~"
+              ></uni-easyinput>
+
+              <view class="img-box">
+                <s-uploader
+                  v-model:url="state.commentList[index].images"
+                  fileMediatype="image"
+                  limit="9"
+                  mode="grid"
+                  :imageStyles="{ width: '168rpx', height: '168rpx' }"
+                />
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <su-fixed bottom placeholder>
+      <view class="foot_box ss-flex ss-row-center ss-col-center">
+        <button class="ss-reset-button post-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onSubmit">
+          发布
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+
+  const state = reactive({
+    orderInfo: {},
+    commentList: [],
+  });
+
+  const rateMap = {
+    1: '糟糕',
+    2: '差评',
+    3: '一般',
+    4: '良好',
+    5: '好评',
+  };
+
+  async function onSubmit() {
+    const { error } = await sheep.$api.order.comment(state.orderInfo.id, {
+      comments: state.commentList,
+    });
+    if (error === 0) {
+      sheep.$router.back();
+    }
+  }
+
+  onLoad(async (options) => {
+    let id = '';
+    if (options.orderSN) {
+      id = options.orderSN;
+    }
+    if (options.id) {
+      id = options.id;
+    }
+
+    const { data, error } = await sheep.$api.order.detail(id);
+    if (error === 0) {
+      if (data.btns.includes('comment')) {
+        state.orderInfo = data;
+        state.orderInfo.items.forEach((item) => {
+          if (item.btns.includes('comment')) {
+            state.commentList.push({
+              item_id: item.id,
+              level: 5,
+              content: '',
+              images: [],
+            });
+          }
+        });
+        return;
+      }
+    }
+    sheep.$helper.toast('无待评价订单');
+  });
+</script>
+
+<style lang="scss" scoped>
+  // 评价商品
+  .goods-card {
+    margin: 10rpx 0;
+    padding: 20rpx;
+    background: #fff;
+  }
+
+  // 评论，选择图片
+  .form-item {
+    background: #fff;
+    .star-box {
+      height: 100rpx;
+      padding: 0 25rpx;
+    }
+    .star-title {
+      font-weight: 600;
+    }
+  }
+  .area-box {
+    width: 690rpx;
+    min-height: 306rpx;
+    background: rgba(249, 250, 251, 1);
+    border-radius: 20rpx;
+    padding: 28rpx;
+    margin: auto;
+
+    .img-box {
+      margin-top: 20rpx;
+    }
+  }
+  .post-btn {
+    width: 690rpx;
+    line-height: 80rpx;
+    border-radius: 40rpx;
+    color: rgba(#fff, 0.9);
+    margin-bottom: 20rpx;
+  }
+</style>

pages/goods/comment/list.vue

@@ -0,0 +1,182 @@
+<!-- 页面  -->
+<template>
+  <s-layout title="全部评价">
+    <su-tabs
+      :list="state.type"
+      :scrollable="false"
+      @change="onTabsChange"
+      :current="state.currentTab"
+    ></su-tabs>
+    <view class="ss-m-t-20">
+      <view class="list-item" v-for="item in state.pagination.data" :key="item">
+        <view class="ss-flex ss-row-between">
+          <view class="ss-flex">
+            <image class="avatar" :src="sheep.$url.static(item.user_avatar)" />
+            <view class="ss-m-l-20 ss-m-r-24 nickname">{{ item.user_nickname }}</view>
+            <view><uni-rate :readonly="true" size="16" :value="item.level" /></view>
+          </view>
+          <view class="create-time">{{ item.create_time?.substring(0, 11) }}</view>
+        </view>
+        <view class="ss-m-t-20 content-title">{{ item.content }}</view>
+        <view class="ss-m-t-40" v-if="item.images?.length">
+          <scroll-view class="scroll-box" scroll-x scroll-anchoring enable-flex>
+            <view class="ss-flex">
+              <view v-for="i in item.images" :key="i" class="ss-m-r-20"
+                ><image class="content-img" :src="sheep.$url.static(i)" />
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+        <view class="ss-flex ss-row-right">
+          <text class="cicon-info-o"></text>
+          <view class="ss-m-l-8 foot-title">举报</view>
+        </view>
+      </view>
+    </view>
+    <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadmore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+  import _ from 'lodash';
+  const state = reactive({
+    list: [],
+    type: [],
+    currentTab: 0,
+    pagination: {
+      data: [],
+      current_page: 1,
+      total: 1,
+      last_page: 1,
+    },
+    commentId: 0,
+    code: 'all',
+  });
+  // 切换选项卡
+  function onTabsChange(e) {
+    state.pagination = {
+      data: [],
+      current_page: 1,
+      total: 1,
+      last_page: 1,
+    };
+    state.currentTab = e.index;
+    state.code = e.code;
+    getList(state.commentId, e.code);
+  }
+  async function getType(id) {
+    const { error, data } = await sheep.$api.goods.getType(id);
+    if (error === 0) {
+      state.type = data;
+    }
+  }
+  async function getList(id, code, page = 1, list_rows = 6) {
+    state.loadStatus = 'loading';
+    let res = await sheep.$api.goods.comment(id, {
+      type: code,
+      list_rows,
+      page,
+    });
+    if (res.error === 0) {
+      if (page >= 2) {
+        let orderList = _.concat(state.pagination.data, res.data.data);
+        state.pagination = {
+          ...res.data,
+          data: orderList,
+        };
+      } else {
+        state.pagination = res.data;
+      }
+      if (state.pagination.current_page < state.pagination.last_page) {
+        state.loadStatus = 'more';
+      } else {
+        state.loadStatus = 'noMore';
+      }
+    }
+  }
+  // 加载更多
+  function loadmore() {
+    if (state.loadStatus !== 'noMore') {
+      getList(state.commentId, state.code, state.pagination.current_page + 1);
+    }
+  }
+  onLoad((options) => {
+    state.commentId = options.id;
+    getType(state.commentId);
+    getList(state.commentId);
+  });
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadmore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .list-item {
+    padding: 32rpx 30rpx 20rpx 20rpx;
+    background: #fff;
+    .avatar {
+      width: 52rpx;
+      height: 52rpx;
+      border-radius: 50%;
+    }
+    .nickname {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #999999;
+    }
+    .create-time {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #c4c4c4;
+    }
+    .content-title {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #666666;
+      line-height: 42rpx;
+    }
+    .content-img {
+      width: 174rpx;
+      height: 174rpx;
+    }
+    .cicon-info-o {
+      font-size: 26rpx;
+      color: #c4c4c4;
+    }
+    .foot-title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #999999;
+    }
+  }
+
+  .btn-box {
+    width: 100%;
+    height: 120rpx;
+    background: #fff;
+    border-top: 2rpx solid #eee;
+  }
+  .tab-btn {
+    width: 130rpx;
+    height: 62rpx;
+    background: #eeeeee;
+    border-radius: 31rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #999999;
+    border: 1px solid #e5e5e5;
+    margin-right: 10rpx;
+  }
+</style>