feat : 添加评论部分筛选款式功能
This commit is contained in:
赵毅
parent
48b26483c0
commit
d50dd6167e
@ -521,4 +521,95 @@ image {
|
|||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header {
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
padding-left: 80rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header-h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header-view {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #959595;
|
||||||
|
margin: 20rpx 0 5rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp_img {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp_img1 {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin: 5rpx 5rpx 0 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize {
|
||||||
|
width: 30%;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin:20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_active {
|
||||||
|
background: #FF370B;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize-img{
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
border:1rpx solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_top{
|
||||||
|
display: flex;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_info {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
color: red;
|
||||||
}
|
}
|
||||||
@ -1,16 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<div class="header">
|
<view class="header">
|
||||||
<div
|
<view
|
||||||
class="searchBox"
|
class="searchBox"
|
||||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="searchBox_left" @click="back">
|
<view class="searchBox_left" @click="back">
|
||||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="swiper">
|
<view class="swiper">
|
||||||
<swiper
|
<swiper
|
||||||
:indicator-dots="false"
|
:indicator-dots="false"
|
||||||
:autoplay="true"
|
:autoplay="true"
|
||||||
@ -26,24 +26,24 @@
|
|||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
<div class="NumDot">
|
<view class="NumDot">
|
||||||
{{ currentIndex }} /{{ currentGG.goods_carousel.length }}
|
{{ currentIndex }} /{{ currentGG.goods_carousel.length }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="Money">
|
<view class="Money">
|
||||||
<div class="MoneyMark">￥</div>
|
<view class="MoneyMark">￥</view>
|
||||||
{{ currentGG.sales_price }}
|
{{ currentGG.sales_price }}
|
||||||
<div class="MoneyUnit">/{{ currentGG.goods_unit }}</div>
|
<view class="MoneyUnit">/{{ currentGG.goods_unit }}</view>
|
||||||
|
|
||||||
<div class="oldMoney">￥{{ currentGG.market_price }}</div>
|
<view class="oldMoney">￥{{ currentGG.market_price }}</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 规格 -->
|
<!-- 规格 -->
|
||||||
<!-- @click="changeGG2(item, index)" :class="index == currentGGIndex ? 'active' : ''"> -->
|
<!-- @click="changeGG2(item, index)" :class="index == currentGGIndex ? 'active' : ''"> -->
|
||||||
<div class="GGBox">
|
<view class="GGBox">
|
||||||
<div class="GG_left">
|
<view class="GG_left">
|
||||||
<div
|
<view
|
||||||
class="GG_Item"
|
class="GG_Item"
|
||||||
v-for="(item, index) in info.commodity_goods_info_list"
|
v-for="(item, index) in info.commodity_goods_info_list"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
@ -51,130 +51,127 @@
|
|||||||
:class="index == currentGGIndex ? 'active' : ''"
|
:class="index == currentGGIndex ? 'active' : ''"
|
||||||
>
|
>
|
||||||
{{ item.goods_spec }} / {{ item.goods_unit }}
|
{{ item.goods_spec }} / {{ item.goods_unit }}
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="GG_rigth">
|
<view class="GG_rigth">
|
||||||
共{{ info.commodity_goods_info_list.length }}款<u-icon
|
共{{ info.commodity_goods_info_list.length }}款<u-icon
|
||||||
size="26rpx"
|
size="26rpx"
|
||||||
name="arrow-right"
|
name="arrow-right"
|
||||||
></u-icon>
|
></u-icon>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="Tit">{{ currentGG.goods_name }}</div>
|
<view class="Tit">{{ currentGG.goods_name }}</view>
|
||||||
<div class="Msg">{{ currentGG.commodity_brief }}</div>
|
<view class="Msg">{{ currentGG.commodity_brief }}</view>
|
||||||
|
|
||||||
<div class="fenge"></div>
|
<view class="fenge"></view>
|
||||||
|
|
||||||
<!-- 促销信息区域 -->
|
<!-- 促销信息区域 -->
|
||||||
<div class="promotions-container">
|
<view class="promotions-container">
|
||||||
<div class="promotion-item">
|
<view class="promotion-item">
|
||||||
<div class="promotion-tag">优惠</div>
|
<view class="promotion-tag">优惠</view>
|
||||||
<div class="promotion-content promotion-content1">满100减10</div>
|
<view class="promotion-content promotion-content1">满100减10</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="promotion-item">
|
<view class="promotion-item">
|
||||||
<div class="promotion-tag">限购</div>
|
<view class="promotion-tag">限购</view>
|
||||||
<div class="promotion-content">限购5件</div>
|
<view class="promotion-content">限购5件</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="promotion-item">
|
<view class="promotion-item">
|
||||||
<div class="promotion-tag">阶梯价</div>
|
<view class="promotion-tag">阶梯价</view>
|
||||||
<div class="promotion-content">1~9件 9.5元/件;>10件 8.0元/件</div>
|
<view class="promotion-content">1~9件 9.5元/件;>10件 8.0元/件</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="promotion-item">
|
<view class="promotion-item">
|
||||||
<div class="promotion-tag">满赠</div>
|
<view class="promotion-tag">满赠</view>
|
||||||
<div class="promotion-content">满5赠1，满10赠3</div>
|
<view class="promotion-content">满5赠1，满10赠3</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="promotion-item">
|
<view class="promotion-item">
|
||||||
<div class="promotion-tag">满减</div>
|
<view class="promotion-tag">满减</view>
|
||||||
<div class="promotion-content">满100减5，满200减20</div>
|
<view class="promotion-content">满100减5，满200减20</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="fenge"></div>
|
<view class="fenge"></view>
|
||||||
|
|
||||||
<div class="Msg_Item">
|
<view class="Msg_Item">
|
||||||
<div class="Msg_ItemTit">质检</div>
|
<view class="Msg_ItemTit">质检</view>
|
||||||
<div class="Msg_ItemCon">质检报告</div>
|
<view class="Msg_ItemCon">质检报告</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="Msg_Item">
|
<view class="Msg_Item">
|
||||||
<div class="Msg_ItemTit">押金</div>
|
<view class="Msg_ItemTit">押金</view>
|
||||||
<div class="Msg_ItemCon">需另付押金:￥30.00(30天可退)</div>
|
<view class="Msg_ItemCon">需另付押金:￥30.00(30天可退)</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="Msg_Item">
|
<view class="Msg_Item">
|
||||||
<div class="Msg_ItemTit">配送</div>
|
<view class="Msg_ItemTit">配送</view>
|
||||||
<text class="Msg_ItemCon">
|
<view class="Msg_ItemCon"> 12:00前下单,预计8月21日送达; </view>
|
||||||
12:00前下单,预计8月21日送达;
|
</view>
|
||||||
12:00前下单,预计8月21日送达;
|
<view class="fenge"></view>
|
||||||
</text>
|
|
||||||
</div>
|
|
||||||
<div class="fenge"></div>
|
|
||||||
|
|
||||||
<!-- 评价部分 -->
|
<!-- 评价部分 -->
|
||||||
<div class="reviews-section">
|
<view class="reviews-section">
|
||||||
<div class="reviews-header">
|
<view class="reviews-header">
|
||||||
<h3>评价({{ comments.length }})</h3>
|
<h3>评价({{ comments.length }})</h3>
|
||||||
<view class="view-all" @click="showPopup">查看全部 ></view>
|
<view class="view-all" @click="showPopup">查看全部 ></view>
|
||||||
</div>
|
</view>
|
||||||
<div class="reviews-list" v-if="comments.length > 0">
|
<view class="reviews-list" v-if="comments.length > 0">
|
||||||
<div
|
<view
|
||||||
class="review-item"
|
class="review-item"
|
||||||
v-for="(comment, index) in comments"
|
v-for="(comment, index) in comments"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<div class="review-user">
|
<view class="review-user">
|
||||||
<image :src="comment.avatar" class="user-avatar"></image>
|
<image :src="comment.avatar" class="user-avatar"></image>
|
||||||
<div class="user-info">
|
<view class="user-info">
|
||||||
<div class="user-name">{{ comment.username }}</div>
|
<view class="user-name">{{ comment.username }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="review-time">{{ comment.time }}</div>
|
<view class="review-time">{{ comment.time }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="user-purchase">已购 {{ comment.product }}</div>
|
<view class="user-purchase">已购 {{ comment.product }}</view>
|
||||||
<div class="review-content">{{ comment.content }}</div>
|
<view class="review-content">{{ comment.content }}</view>
|
||||||
<div class="review-images" v-if="comment.images.length > 0">
|
<view class="review-images" v-if="comment.images.length > 0">
|
||||||
<image
|
<image
|
||||||
:src="img"
|
:src="img"
|
||||||
class="review-img"
|
class="review-img"
|
||||||
v-for="(img, idx) in comment.images"
|
v-for="(img, idx) in comment.images"
|
||||||
:key="idx"
|
:key="idx"
|
||||||
></image>
|
></image>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="fenge"></div>
|
<view class="fenge"></view>
|
||||||
|
|
||||||
<h3 class="GoodsMsg">商品详情</h3>
|
<h3 class="GoodsMsg">商品详情</h3>
|
||||||
|
|
||||||
<div class="Msg_Item">
|
<view class="Msg_Item">
|
||||||
<div class="Msg_ItemTit">商品编号</div>
|
<view class="Msg_ItemTit">商品编号</view>
|
||||||
<div class="Msg_ItemCon" @click="copys(currentGG.goods_no)">
|
<view class="Msg_ItemCon" @click="copys(currentGG.goods_no)">
|
||||||
{{ currentGG.goods_no }}
|
{{ currentGG.goods_no }}
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"
|
||||||
></image>
|
></image>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="Msg_Item">
|
<view class="Msg_Item">
|
||||||
<div class="Msg_ItemTit">规格说明</div>
|
<view class="Msg_ItemTit">规格说明</view>
|
||||||
<div class="Msg_ItemCon">{{ currentGG.goods_spec }}</div>
|
<view class="Msg_ItemCon">{{ currentGG.goods_spec }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="Msg_Item">
|
<view class="Msg_Item">
|
||||||
<div class="Msg_ItemTit">售卖单位</div>
|
<view class="Msg_ItemTit">售卖单位</view>
|
||||||
<div class="Msg_ItemCon">{{ currentGG.goods_unit }}</div>
|
<view class="Msg_ItemCon">{{ currentGG.goods_unit }}</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="GoosMsg">
|
<view class="GoosMsg">
|
||||||
<image
|
<image
|
||||||
v-for="item in currentGG.goods_detail_pic"
|
v-for="item in currentGG.goods_detail_pic"
|
||||||
:src="picUrl + item"
|
:src="picUrl + item"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
></image>
|
></image>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div class="priceInfo">
|
<view class="priceInfo">
|
||||||
<h3 class="priceInfo-title">价格说明</h3>
|
<h3 class="priceInfo-title">价格说明</h3>
|
||||||
<div class="priceInfo-content">
|
<view class="priceInfo-content">
|
||||||
<view>
|
<view>
|
||||||
<text class="priceInfo-content-title">划线价格：</text>
|
<text class="priceInfo-content-title">划线价格：</text>
|
||||||
指商品的厂商指导价、正品零售价、市面常见价或该商品曾经展示过的销售价等，并非原价。仅供参考。
|
指商品的厂商指导价、正品零售价、市面常见价或该商品曾经展示过的销售价等，并非原价。仅供参考。
|
||||||
@ -183,20 +180,20 @@
|
|||||||
<text class="priceInfo-content-title">未划线价格：</text>
|
<text class="priceInfo-content-title">未划线价格：</text>
|
||||||
指商品的实时价格，不因表述的差异改变性质，具体成交价格根据商品参加活动，或使用优惠券等发生变化最终以订单结算价格为准。
|
指商品的实时价格，不因表述的差异改变性质，具体成交价格根据商品参加活动，或使用优惠券等发生变化最终以订单结算价格为准。
|
||||||
</view>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 底部购物车 -->
|
<!-- 底部购物车 -->
|
||||||
<div class="Car">
|
<view class="Car">
|
||||||
<div class="car_left">
|
<view class="car_left">
|
||||||
<div class="share" @click="share">
|
<view class="share" @click="share">
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
></image>
|
></image>
|
||||||
分享
|
分享
|
||||||
</div>
|
</view>
|
||||||
<div class="cars" @click="car">
|
<view class="cars" @click="car">
|
||||||
<u-badge
|
<u-badge
|
||||||
numberType="limit"
|
numberType="limit"
|
||||||
:type="type"
|
:type="type"
|
||||||
@ -209,10 +206,10 @@
|
|||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
></image>
|
></image>
|
||||||
购物车
|
购物车
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div
|
<view
|
||||||
class="car_right"
|
class="car_right"
|
||||||
v-if="
|
v-if="
|
||||||
!info.commodity_goods_info_list[currentGGIndex].cart_count ||
|
!info.commodity_goods_info_list[currentGGIndex].cart_count ||
|
||||||
@ -221,9 +218,9 @@
|
|||||||
@click="addCar"
|
@click="addCar"
|
||||||
>
|
>
|
||||||
加入购物车
|
加入购物车
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<div
|
<view
|
||||||
class="car_right"
|
class="car_right"
|
||||||
v-if="
|
v-if="
|
||||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0
|
info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0
|
||||||
@ -252,54 +249,54 @@
|
|||||||
<u-icon name="plus" color="#FFFFFF" size="36" bold></u-icon>
|
<u-icon name="plus" color="#FFFFFF" size="36" bold></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</u-number-box>
|
</u-number-box>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 分享 -->
|
<!-- 分享 -->
|
||||||
<div class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
|
<view class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
|
||||||
<div class="shadowBox1">
|
<view class="shadowBox1">
|
||||||
<div class="shadowBox1Item" @click="shareFriend">
|
<view class="shadowBox1Item" @click="shareFriend">
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
></image>
|
></image>
|
||||||
微信好友
|
微信好友
|
||||||
</div>
|
</view>
|
||||||
<div class="shadowBox1Item" @click="openSave">
|
<view class="shadowBox1Item" @click="openSave">
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
></image>
|
></image>
|
||||||
生成海报
|
生成海报
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<!-- 海报 -->
|
<!-- 海报 -->
|
||||||
<div class="shadow" @click="changeShadow2" v-if="boxshadow2">
|
<view class="shadow" @click="changeShadow2" v-if="boxshadow2">
|
||||||
<div class="shadowBox2">
|
<view class="shadowBox2">
|
||||||
<div class="shadowBox_img">
|
<view class="shadowBox_img">
|
||||||
<div class="boxshadow_tit">今日商品推荐</div>
|
<view class="boxshadow_tit">今日商品推荐</view>
|
||||||
<div class="boxshadow_img">
|
<view class="boxshadow_img">
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png"
|
||||||
>
|
>
|
||||||
</image>
|
</image>
|
||||||
</div>
|
</view>
|
||||||
<div class="line"></div>
|
<view class="line"></view>
|
||||||
<div class="shadowBoxInfo">
|
<view class="shadowBoxInfo">
|
||||||
<div class="shadowboxInfo_left">二维码</div>
|
<view class="shadowboxInfo_left">二维码</view>
|
||||||
<div class="shadowboxInfo_right">
|
<view class="shadowboxInfo_right">
|
||||||
<div class="shadowboxInfo_right_1">正鲜生</div>
|
<view class="shadowboxInfo_right_1">正鲜生</view>
|
||||||
<div class="shadowboxInfo_right_2">
|
<view class="shadowboxInfo_right_2">
|
||||||
长按识别小程序 <br />
|
长按识别小程序 <br />
|
||||||
数量有限马上抢购
|
数量有限马上抢购
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="shadowBox_btn" @click.stop="saveImg">保存海报</div>
|
<view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 评价 查看详情 -->
|
<!-- 评价 查看详情 -->
|
||||||
<u-popup
|
<u-popup
|
||||||
@ -308,37 +305,79 @@
|
|||||||
mode="bottom"
|
mode="bottom"
|
||||||
@close="close"
|
@close="close"
|
||||||
@open="open"
|
@open="open"
|
||||||
|
:z-index="10070"
|
||||||
>
|
>
|
||||||
<div class="reviews-section">
|
<view class="reviews-section">
|
||||||
<div class="reviews-header">
|
<view class="popup-header">
|
||||||
<h3>评价</h3>
|
<h3 class="popup-header-h3">评价</h3>
|
||||||
</div>
|
<view class="popup-header-view" @click="close">取消</view>
|
||||||
<div class="reviews-list" v-if="comments.length > 0">
|
</view>
|
||||||
<div
|
<view class="temp">
|
||||||
|
<view class="temp1">
|
||||||
|
<img class="temp_img" src="http://localhost:8080/pingjia.png" />
|
||||||
|
为你展示真实评价
|
||||||
|
</view>
|
||||||
|
<view class="temp1" @click="showSizePopup">
|
||||||
|
款式
|
||||||
|
<img class="temp_img1" src="http://localhost:8080/kuanshi.png" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="reviews-list" v-if="comments.length > 0">
|
||||||
|
<view
|
||||||
class="review-item"
|
class="review-item"
|
||||||
v-for="(comment, index) in comments"
|
v-for="(comment, index) in comments"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<div class="review-user">
|
<view class="review-user">
|
||||||
<image :src="comment.avatar" class="user-avatar"></image>
|
<image :src="comment.avatar" class="user-avatar"></image>
|
||||||
<div class="user-info">
|
<view class="user-info">
|
||||||
<div class="user-name">{{ comment.username }}</div>
|
<view class="user-name">{{ comment.username }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="review-time">{{ comment.time }}</div>
|
<view class="review-time">{{ comment.time }}</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="user-purchase">已购 {{ comment.product }}</div>
|
<view class="user-purchase">已购 {{ comment.product }}</view>
|
||||||
<div class="review-content">{{ comment.content }}</div>
|
<view class="review-content">{{ comment.content }}</view>
|
||||||
<div class="review-images" v-if="comment.images.length > 0">
|
<view class="review-images" v-if="comment.images.length > 0">
|
||||||
<image
|
<image
|
||||||
:src="img"
|
:src="img"
|
||||||
class="review-img"
|
class="review-img"
|
||||||
v-for="(img, idx) in comment.images"
|
v-for="(img, idx) in comment.images"
|
||||||
:key="idx"
|
:key="idx"
|
||||||
></image>
|
></image>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
|
||||||
|
<!-- 选择款式 -->
|
||||||
|
<u-popup
|
||||||
|
:show="showSize"
|
||||||
|
round="20rpx"
|
||||||
|
mode="bottom"
|
||||||
|
@close="closeSize"
|
||||||
|
@open="open"
|
||||||
|
>
|
||||||
|
<view class="popup-header">
|
||||||
|
<h3 class="popup-header-h3">选择款式</h3>
|
||||||
|
<view class="popup-header-view" @click="closeSize">取消</view>
|
||||||
|
</view>
|
||||||
|
<view class="itemSize_top">
|
||||||
|
<image :src="changeImg" class="itemSize-img"></image>
|
||||||
|
<view class="itemSize_info">
|
||||||
|
<view class="itemSize_name">{{ changeName }}</view>
|
||||||
|
<view class="itemSize_price">￥{{ changePrice }}/袋</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="itemSize"
|
||||||
|
v-for="(item, index) in info.commodity_goods_info_list"
|
||||||
|
:key="item.id"
|
||||||
|
@click="changeGG(item, index)"
|
||||||
|
:class="index == currentGGIndex ? 'itemSize_active' : ''"
|
||||||
|
>
|
||||||
|
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
||||||
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -393,6 +432,11 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
show: false,
|
show: false,
|
||||||
|
showSize: false,
|
||||||
|
|
||||||
|
changeImg: "",
|
||||||
|
changeName: "",
|
||||||
|
changePrice: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -502,6 +546,10 @@ export default {
|
|||||||
this.info = res;
|
this.info = res;
|
||||||
this.currentGG = res.commodity_goods_info_list[0];
|
this.currentGG = res.commodity_goods_info_list[0];
|
||||||
this.currentGGIndex = 0;
|
this.currentGGIndex = 0;
|
||||||
|
|
||||||
|
this.changeImg = this.currentGG.commodity_pic[0]
|
||||||
|
this.changeName = this.currentGG.goods_alias
|
||||||
|
this.changePrice = this.currentGG.sales_price
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -520,6 +568,7 @@ export default {
|
|||||||
|
|
||||||
// 切换规格
|
// 切换规格
|
||||||
changeGG(item, index) {
|
changeGG(item, index) {
|
||||||
|
console.log("🚀 ~ changeGG ~ item:", item);
|
||||||
this.currentGG = item;
|
this.currentGG = item;
|
||||||
this.currentGGIndex = index;
|
this.currentGGIndex = index;
|
||||||
if (this.currentGG.cart_count) {
|
if (this.currentGG.cart_count) {
|
||||||
@ -527,6 +576,9 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
this.currentGG.cart_count = { count: 0 };
|
this.currentGG.cart_count = { count: 0 };
|
||||||
}
|
}
|
||||||
|
this.changeImg = item.commodity_pic[0]
|
||||||
|
this.changeName = item.goods_alias
|
||||||
|
this.changePrice = item.sales_price
|
||||||
},
|
},
|
||||||
car() {
|
car() {
|
||||||
NavgateTo("../shopCar/index");
|
NavgateTo("../shopCar/index");
|
||||||
@ -609,12 +661,20 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
showPopup() {
|
showPopup() {
|
||||||
console.log("🚀 ~ showPopup ~ showPopup:");
|
|
||||||
this.show = true;
|
this.show = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
showSizePopup() {
|
||||||
|
this.showSize = true;
|
||||||
|
},
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
this.show = false;
|
this.show = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
closeSize() {
|
||||||
|
this.showSize = false;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user