合并初始化
This commit is contained in:
落日晚风
@@ -0,0 +1,209 @@
|
||||
<!-- 评价 -->
|
||||
<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="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].level2" />
|
||||
</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: [],
|
||||
orderId: null
|
||||
});
|
||||
|
||||
const rateMap = {
|
||||
1: '糟糕',
|
||||
2: '差评',
|
||||
3: '一般',
|
||||
4: '良好',
|
||||
5: '好评',
|
||||
};
|
||||
|
||||
async function onSubmit() {
|
||||
// 对接商品评价
|
||||
// console.log(state.orderInfo);
|
||||
// return;
|
||||
let obj = {
|
||||
anonymous: false,
|
||||
benefitScores: state.commentList[0].level2,
|
||||
content: state.commentList[0].content,
|
||||
descriptionScores: state.commentList[0].level,
|
||||
orderItemId: state.commentList[0].item_id,
|
||||
picUrls: 'https://t7.baidu.com/it/u=2531125946,3055766435&fm=193&f=GIF'
|
||||
}
|
||||
const {
|
||||
code
|
||||
} = await sheep.$api.order.comment(obj);
|
||||
if (code === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = '';
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
if (options.orderId) {
|
||||
state.orderId = options.orderId
|
||||
}
|
||||
|
||||
const res = await sheep.$api.order.detail(id);
|
||||
if (res.code === 0) {
|
||||
let obj = {
|
||||
10: ['待发货', '等待买家付款', ["apply_refund"]],
|
||||
30: ['待评价', '等待买家评价', ["express", "comment"]]
|
||||
}
|
||||
|
||||
res.data.status_text = obj[res.data.status][0];
|
||||
res.data.status_desc = obj[res.data.status][1];
|
||||
res.data.btns = obj[res.data.status][2];
|
||||
res.data.address = {
|
||||
province_name: res.data.receiverAreaName.split(' ')[0],
|
||||
district_name: res.data.receiverAreaName.split(' ')[2],
|
||||
city_name: res.data.receiverAreaName.split(' ')[1],
|
||||
address: res.data.receiverDetailAddress,
|
||||
consignee: res.data.receiverName,
|
||||
mobile: res.data.receiverMobile,
|
||||
}
|
||||
res.data.pay_fee = res.data.payPrice / 100
|
||||
res.data.create_time = sheep.$helper.timeFormat(res.data.createTime, 'yyyy-mm-dd hh:MM:ss')
|
||||
res.data.order_sn = res.data.no
|
||||
res.data.id = res.data.id
|
||||
res.data.goods_amount = res.data.totalPrice / 100
|
||||
res.data.dispatch_amount = res.data.deliveryPrice / 100
|
||||
res.data.pay_types_text = res.data.payChannelName.split(',')
|
||||
res.data.items = res.data.items.map(ite => {
|
||||
return {
|
||||
...ite,
|
||||
btns: obj[res.data.status][2],
|
||||
goods_title: ite.spuName,
|
||||
goods_num: ite.count,
|
||||
goods_price: ite.price / 100,
|
||||
goods_image: ite.picUrl,
|
||||
goods_sku_text: ite.properties.reduce((it0, it1) => it0 + it1.valueName + ' ', '')
|
||||
}
|
||||
})
|
||||
if (res.data.btns.includes('comment')) {
|
||||
state.orderInfo = res.data;
|
||||
state.orderInfo.items.forEach((item) => {
|
||||
if (item.btns.includes('comment')) {
|
||||
state.commentList.push({
|
||||
item_id: item.id,
|
||||
level: 5,
|
||||
content: '',
|
||||
images: [],
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(state.orderInfo.items, '循环')
|
||||
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>
|
||||
@@ -0,0 +1,167 @@
|
||||
<!-- 商品评论的分页 -->
|
||||
<template>
|
||||
<s-layout title="全部评价">
|
||||
<su-tabs
|
||||
:list="state.type"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
/>
|
||||
<!-- 评论列表 -->
|
||||
<view class="ss-m-t-20">
|
||||
<view class="list-item" v-for="item in state.pagination.list" :key="item">
|
||||
<comment-item :item="item" />
|
||||
</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 CommentApi from '@/sheep/api/product/comment';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import commentItem from '../components/detail/comment-item.vue';
|
||||
|
||||
const state = reactive({
|
||||
id: 0, // 商品 SPU 编号
|
||||
type: [
|
||||
{ type: 0, name: '全部' },
|
||||
{ type: 1, name: '好评' },
|
||||
{ type: 2, name: '中评' },
|
||||
{ type: 3, name: '差评' },
|
||||
],
|
||||
currentTab: 0, // 选中的 TAB
|
||||
loadStatus: '',
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 1,
|
||||
},
|
||||
});
|
||||
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
state.currentTab = e.index;
|
||||
// 加载列表
|
||||
state.pagination.pageNo = 1;
|
||||
state.pagination.list = [];
|
||||
state.pagination.total = 0;
|
||||
getList();
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
// 加载列表
|
||||
state.loadStatus = 'loading';
|
||||
let res = await CommentApi.getCommentPage(
|
||||
state.id,
|
||||
state.pagination.pageNo,
|
||||
state.pagination.pageSize,
|
||||
state.type[state.currentTab].type,
|
||||
);
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
// 合并列表
|
||||
state.pagination.list = _.concat(state.pagination.list, res.data.list);
|
||||
state.pagination.total = res.data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getList();
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
state.id = options.id;
|
||||
getList();
|
||||
});
|
||||
|
||||
// 上拉加载更多
|
||||
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>
|
||||
Reference in New Issue
Block a user