南通建设局网站查询,9377白蛇传奇,郴州网站seo外包,本地做那种网站好一些文章目录21-商品详情-评价组件-头部渲染22-商品详情-评价组件-实现列表21-商品详情-评价组件-头部渲染 目的#xff1a;根据后台返回的评价信息渲染评价头部内容。 yapi 平台可提供模拟接口#xff0c;当后台接口未开发完毕或者没有数据的情况下#xff0c;可以支持前端的开…
文章目录21-商品详情-评价组件-头部渲染22-商品详情-评价组件-实现列表21-商品详情-评价组件-头部渲染 目的根据后台返回的评价信息渲染评价头部内容。 yapi 平台可提供模拟接口当后台接口未开发完毕或者没有数据的情况下可以支持前端的开发。
大致步骤
完成静态布局定义API接口获取数据处理完毕提供给模版渲染模版
落的代码
布局 src/views/goods/components/goods-comment.vue
templatediv classgoods-commentdiv classheaddiv classdatapspan100/spanspan人购买/span/ppspan99.99%/spanspan好评率/span/p/divdiv classtagsdiv classdt大家都在说/divdiv classdda hrefjavascript:; classactive全部评价1000/aa hrefjavascript:;好吃1000/aa hrefjavascript:;便宜1000/aa hrefjavascript:;很好1000/aa hrefjavascript:;再来一次1000/aa hrefjavascript:;快递棒1000/a/div/div/divdiv classsortspan排序/spana hrefjavascript:; classactive默认/aa hrefjavascript:;最新/aa hrefjavascript:;最热/a/divdiv classlist/div/div
/template
script
export default {name: GoodsComment
}
/script
style scoped langless
.goods-comment {.head {display: flex;padding: 30px 0;.data {width: 340px;display: flex;padding: 20px;p {flex: 1;text-align: center;span {display: block;:first-child {font-size: 32px;color: priceColor;}:last-child {color: #999;}}}}.tags {flex: 1;display: flex;border-left: 1px solid #f5f5f5;.dt {font-weight: bold;width: 100px;text-align: right;line-height: 42px;}.dd {flex: 1;display: flex;flex-wrap: wrap; a {width: 132px;height: 42px;margin-left: 20px;margin-bottom: 20px;border-radius: 4px;border: 1px solid #e4e4e4;background: #f5f5f5;color: #999;text-align: center;line-height: 40px;:hover {border-color: xtxColor;background: lighten(xtxColor,50%);color: xtxColor;}.active {border-color: xtxColor;background: xtxColor;color: #fff;}}}}}.sort {height: 60px;line-height: 60px;border-top: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;margin: 0 20px;color: #666; span {margin-left: 20px;} a {margin-left: 30px;.active,:hover {color: xtxColor;}}}
}
/style接口 src/api/goods.js
/*** 获取商品的评价统计信息* param {String} id - 商品ID*/
export const findCommentInfoByGoods (id) {return request(/goods/${id}/evaluate)
}
// https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate获取数据处理数据 src/views/goods/components/goods-comment.vue
import { findCommentInfoByGoods } from /api/goods
import { ref } from vue
const getCommentInfo (props) {const commentInfo ref(null)findCommentInfoByGoods(props.goods.id).then(data {// type 的目的是将来点击可以区分点的是不是标签data.result.tags.unshift({ type: img, title: 有图, tagCount: data.result.hasPictureCount })data.result.tags.unshift({ type: all, title: 全部评价, tagCount: data.result.evaluateCount })commentInfo.value data.result})return commentInfo
}
export default {name: GoodsComment,props: {goods: {type: Object,default: () {}}},setup (props) {const commentInfo getCommentInfo(props)return { commentInfo }}
}渲染模版 tag选中效果 src/views/goods/components/goods-comment.vue !-- 头部 --div classhead v-ifcommentInfodiv classdatapspan{{commentInfo.salesCount}}/spanspan人购买/span/ppspan{{commentInfo.praisePercent}}/spanspan好评率/span/p/divdiv classtagsdiv classdt大家都在说/divdiv classddav-for(item,i) in commentInfo.tags:keyitem.titlehrefjavascript:;:class{active:currTagIndexi}clickchangeTag(i){{item.title}}{{item.tagCount}}/a/div/div/div!-- 排序 --div classsort v-ifcommentInfosetup (props) {const commentInfo getCommentInfo(props)// 记录当前激活的索引const currTagIndex ref(0)const changeTag (i) {currTagIndex.value i}return { commentInfo, currTagIndex, changeTag }}22-商品详情-评价组件-实现列表 目的完成列表渲染筛选和排序。 大致步骤
列表基础布局筛选条件数据准备何时去获取数据 组件初始化点标签点排序 渲染列表
落地代码
列表基础布局 !-- 列表 --div classlistdiv classitemdiv classuserimg srchttp://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/avatar_1.png altspan兔****m/span/divdiv classbodydiv classscorei classiconfont icon-wjx01/ii classiconfont icon-wjx01/ii classiconfont icon-wjx01/ii classiconfont icon-wjx01/ii classiconfont icon-wjx02/ispan classattr颜色黑色 尺码M/span/divdiv classtext网易云app上这款耳机非常不错 新人下载网易云购买这款耳机优惠大 而且耳机确实正品 音质特别好 戴上这款耳机 听音乐看电影效果声音真是太棒了 无线方便 小盒自动充电 最主要是质量好音质棒 想要买耳机的放心拍 音效巴巴滴 老棒了/divdiv classtimespan2020-10-10 10:11:22/spanspan classzani classiconfont icon-dianzan/i100/span/div/div/div/div.list {padding: 0 20px;.item {display: flex;padding: 25px 10px;border-bottom: 1px solid #f5f5f5;.user {width: 160px;img {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}span {padding-left: 10px;color: #666;}}.body {flex: 1;.score {line-height: 40px;.iconfont {color: #ff9240;padding-right: 3px;}.attr {padding-left: 10px;color: #666;}}}.text {color: #666;line-height: 24px;}.time {color: #999;display: flex;justify-content: space-between;margin-top: 5px;}}}筛选条件数据准备 定义筛选条件 // 筛选条件准备const reqParams reactive({page: 1,pageSize: 10,hasPicture: null,tag: null,sortField: null})收集排序条件 !-- 排序 --div classsortspan排序/spanaclickchangeSort(null)hrefjavascript:;:class{active:reqParams.sortFieldnull}默认/aaclickchangeSort(praiseCount)hrefjavascript:;:class{active:reqParams.sortFieldpraiseCount}最热/aaclickchangeSort(createTime)hrefjavascript:;:class{active:reqParams.sortFieldcreateTime}最新/a/div// 改变排序const changeSort (type) {reqParams.sortField typereqParams.page 1}收集标签和是否有图条件 const changeTag (i) {currTagIndex.value i// 设置有图和标签条件const currTag commentInfo.value.tags[i]if (currTag.type all) {reqParams.hasPicture falsereqParams.tag null} else if (currTag.type img) {reqParams.hasPicture truereqParams.tag null} else {reqParams.hasPicture falsereqParams.tag currTag.title}reqParams.page 1}获取数据当组件初始化的时候筛选条件改变的时候 // 初始化或者筛选条件改变后获取列表数据。const commentList ref([])watch(reqParams, async () {const data await findCommentListByGoods(props.goods.id, reqParams)commentList.value data.result.items}, { immediate: true })渲染模版 处理数据昵称加*号规格拼接字符串。 // 定义转换数据的函数对应vue2.0的过滤器const formatSpecs (specs) {return specs.reduce((p, c) ${p} ${c.name}${c.nameValue}, ).trim()}const formatNickname (nickname) {return nickname.substr(0, 1) **** nickname.substr(-1)}所有数据和函数
return { commentInfo, currentTagIndex, changeTag, reqParams, commentList, changeSort, formatSpecs, formatNickname }渲染html !-- 列表 --div classlistdiv classitem v-foritem in commentList :keyitem.iddiv classuserimg :srcitem.member.avatar altspan{{formatNickname(item.member.nickname)}}/span/divdiv classbodydiv classscorei v-fori in item.score :keyi1 classiconfont icon-wjx01/ii v-fori in 5-item.score :keyi2 classiconfont icon-wjx02/ispan classattr{{formatSpecs(item.orderInfo.specs)}}/span/divdiv classtext{{item.content}}/divdiv classtimespan{{item.createTime}}/spanspan classzani classiconfont icon-dianzan/i {{item.praiseCount}}/span/div/div/div/div
