|
@@ -1,6 +1,13 @@
|
|
|
<template>
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
<view>
|
|
|
+ <Loading
|
|
|
+ :type="3"
|
|
|
+ :loadStatus="loadStatus"
|
|
|
+ :showText="errorText"
|
|
|
+ />
|
|
|
<zj-page-layout
|
|
|
+ v-if="detail"
|
|
|
:hasFooter="true"
|
|
|
:isScroll="true"
|
|
|
:refresherTriggered="refresherTriggered"
|
|
@@ -9,75 +16,81 @@
|
|
|
<view class="user">
|
|
|
<image src="@/static/common/logo.png"></image>
|
|
|
<view class="info">
|
|
|
- <view class="name">张三</view>
|
|
|
- <view class="phone">联系电话:138****2233</view>
|
|
|
+ <view class="name">{{detail.userName}}</view>
|
|
|
+ <view class="phone">联系电话:{{detail.phone}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="btns">
|
|
|
<u-button type="warning" text="分享好友" class="share"></u-button>
|
|
|
- <u-button type="error" text="立即联系" class="contact"></u-button>
|
|
|
- <u-button type="primary" text="立即购买" class="buy" @tap="$navPage(`/pages/goods/order`)"></u-button>
|
|
|
+ <u-button type="error" text="立即联系" class="contact" @click="toContact" v-if="!isMine"></u-button>
|
|
|
+ <u-button type="primary" text="立即购买" class="buy" @click="toBuy" v-if="!isMine"></u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-container">
|
|
|
<view class="title">
|
|
|
- <view class="tit">商品名称</view>
|
|
|
- <view class="price">¥1234.00</view>
|
|
|
+ <view class="tit">{{detail.goodsTitle}}</view>
|
|
|
+ <view class="price">{{detail.goodsAmount | priceFilter2}}</view>
|
|
|
</view>
|
|
|
- <view class="des">商品描述商品描述商品描述商品描述商品描述</view>
|
|
|
+ <view class="des">{{detail.content}}</view>
|
|
|
<view class="tags">
|
|
|
- <view class="it">格力</view>
|
|
|
- <view class="it">7200w</view>
|
|
|
- <view class="it">一级能效</view>
|
|
|
+ <view class="it">{{detail.brand}}</view>
|
|
|
+ <view class="it">{{detail.power}}</view>
|
|
|
+ <view class="it">{{detail.energy}}</view>
|
|
|
</view>
|
|
|
<view class="info">
|
|
|
- <view class="left">
|
|
|
- <text>23小时前发布</text>
|
|
|
- <text>20人浏览</text>
|
|
|
- </view>
|
|
|
- <view class="right">库存10</view>
|
|
|
+ <text>{{detail.goodsCreateTime}}</text>
|
|
|
</view>
|
|
|
<view class="bottom">
|
|
|
- <view class="left-location">天河区棠下</view>
|
|
|
+ <view class="left-location">{{detail.address}}</view>
|
|
|
<view class="right-stats">
|
|
|
<view class="it">
|
|
|
+ <text class="iconfont icon-liulan"></text>
|
|
|
+ <text class="text">{{detail.visit || 0}}浏览</text>
|
|
|
+ </view>
|
|
|
+ <view class="it" :class="detail.isLike ? 'active':''" @tap="handelLickCollect(1)">
|
|
|
<text class="iconfont icon-dianzan"></text>
|
|
|
<text class="text">点赞</text>
|
|
|
</view>
|
|
|
- <view class="it">
|
|
|
- <text class="iconfont icon-pinglun"></text>
|
|
|
+ <view class="it" :class="detail.isCollect ? 'active':''" @tap="handelLickCollect(2)">
|
|
|
+ <text class="iconfont icon-shoucang"></text>
|
|
|
<text class="text">收藏</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ <view class="imgs-container">
|
|
|
+ <image :src="imageUrl + item.imgUrl" v-for="(item, index) in detail.goodsFiles" :key="index"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
<view class="remark-container">
|
|
|
<view class="title">
|
|
|
<view class="tit">全部留言</view>
|
|
|
- <view class="right">内容违规,我要举报</view>
|
|
|
+ <view class="right" v-if="!isMine">内容违规,我要举报</view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
+ <view class="item" v-for="(item, index) in remarkList" :key="index">
|
|
|
<view class="top">
|
|
|
<image src="@/static/common/logo.png"></image>
|
|
|
<view class="user">
|
|
|
- <view class="name">李海</view>
|
|
|
- <view class="time">2023-11-12 20:22:33</view>
|
|
|
+ <view class="name">{{item.userName}}</view>
|
|
|
+ <view class="time">{{item.createTime}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
- <view class="left">商品很nice</view>
|
|
|
- <view class="right"><text class="iconfont icon-bianji"></text><text>回复</text></view>
|
|
|
+ <view class="left">{{item.message}}</view>
|
|
|
+ <view class="right" @tap="handelReply(item)"><text class="iconfont icon-bianji"></text><text>回复</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="reply">
|
|
|
+ <view class="it" v-for="(it, idx) in item.goodsMessageList" :key="idx" @tap="handelReply(it)">{{it.userName}}回复{{it.replyNickName}}:{{it.message}}</view>
|
|
|
</view>
|
|
|
- <view class="reply">主人回复:好的,我知道了</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<template slot="footer">
|
|
|
<view class="bottom-container">
|
|
|
- <u-button text="留言" type="primary" shape="circle" @click="isShowRemarkDialog = true"></u-button>
|
|
|
- <u-button text="操作" type="primary" shape="circle" @click="isShowActionDialog = true"></u-button>
|
|
|
+ <u-button text="留言" type="primary" shape="circle" @click="openRemark()"></u-button>
|
|
|
+ <u-button text="操作" type="primary" shape="circle" @click="isShowActionDialog = true" v-if="isMine"></u-button>
|
|
|
</view>
|
|
|
</template>
|
|
|
</zj-page-layout>
|
|
@@ -85,7 +98,8 @@
|
|
|
<zj-dialog-remark
|
|
|
ref="remarkDialog"
|
|
|
:isShow="isShowRemarkDialog"
|
|
|
- @close="isShowRemarkDialog = false">
|
|
|
+ @close="isShowRemarkDialog = false"
|
|
|
+ @confirm="confirmRemark">
|
|
|
</zj-dialog-remark>
|
|
|
|
|
|
<u-action-sheet
|
|
@@ -96,9 +110,14 @@
|
|
|
@select="selectAction">
|
|
|
</u-action-sheet>
|
|
|
</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef H5 -->
|
|
|
+ <web-view :src="webViewHref('/pages/goods/detail', pam)"></web-view>
|
|
|
+ <!-- #endif -->
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script>
|
|
|
+ // #ifdef H5
|
|
|
import zjDialogRemark from '@/components/zj-dialog/zj-dialog-remark.vue';
|
|
|
|
|
|
export default {
|
|
@@ -108,6 +127,12 @@
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ id: null,
|
|
|
+ detail: null,
|
|
|
+ remarkList: [],
|
|
|
+ imageUrl: this.$imageUrl,
|
|
|
+ loadStatus: 0,
|
|
|
+ errorText: '',
|
|
|
refresherTriggered: false,
|
|
|
isShowRemarkDialog: false,
|
|
|
actionList: [
|
|
@@ -117,17 +142,138 @@
|
|
|
{name: '编辑'},
|
|
|
],
|
|
|
isShowActionDialog: false,
|
|
|
+ replyId: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ isMine() {
|
|
|
+ return this.$store.state.user.userId === this.detail.userId;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ onLoad({id}) {
|
|
|
+ this.id = id;
|
|
|
+ this.getDetail();
|
|
|
+ this.getRemarkList();
|
|
|
+ },
|
|
|
+
|
|
|
methods: {
|
|
|
+ getDetail() {
|
|
|
+ this.$api.postJson('/goods/detail', {
|
|
|
+ id: this.id
|
|
|
+ }).then(res => {
|
|
|
+ this.detail = res.data;
|
|
|
+ this.loadStatus = 0;
|
|
|
+ }).catch(res => {
|
|
|
+ this.errorText = res.message;
|
|
|
+ this.loadStatus = 2;
|
|
|
+ }).finally(res => {
|
|
|
+ this.refresherTriggered = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ refresherrefresh() {
|
|
|
+ this.refresherTriggered = true;
|
|
|
+ this.getDetail();
|
|
|
+ this.getRemarkList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理点赞留言
|
|
|
+ handelLickCollect(type) {
|
|
|
+ let status = false;
|
|
|
+ if(type === 1) {
|
|
|
+ status = this.detail.isLike || false;
|
|
|
+ }else {
|
|
|
+ status = this.detail.isCollect || false;
|
|
|
+ }
|
|
|
+ this.$api.postJson('/likeOrCollect/likeOrCollect', {
|
|
|
+ userId: this.$store.state.user.userId,
|
|
|
+ goodsId: this.id,
|
|
|
+ type,
|
|
|
+ operate: !status
|
|
|
+ }).then(res => {
|
|
|
+ this.getDetail();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 去联系
|
|
|
+ toContact() {
|
|
|
+ this.$navToPage({
|
|
|
+ url: `/pages/message/msgView?goodsId=${this.id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 去购买
|
|
|
+ toBuy() {
|
|
|
+ this.$navToPage({
|
|
|
+ url: `/pages/goods/order?id=${this.id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取留言列表
|
|
|
+ getRemarkList() {
|
|
|
+ this.$api.postJson('/message/list2', {
|
|
|
+ userId: this.$store.state.user.userId,
|
|
|
+ goodsId: this.id,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: -1,
|
|
|
+ }).then(res => {
|
|
|
+ this.remarkList = res.data.records;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ openRemark(replyItem) {
|
|
|
+ this.$refs.remarkDialog.setValue(replyItem);
|
|
|
+ this.isShowRemarkDialog = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交留言
|
|
|
+ confirmRemark(val) {
|
|
|
+ this.$api.postJson('/message/add', {
|
|
|
+ userId: this.$store.state.user.userId,
|
|
|
+ goodsId: this.id,
|
|
|
+ message: val,
|
|
|
+ replyId: this.replyId,
|
|
|
+ }).then(res => {
|
|
|
+ this.replyId = '';
|
|
|
+ this.isShowRemarkDialog = false;
|
|
|
+ this.getRemarkList();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 回复留言
|
|
|
+ handelReply(item) {
|
|
|
+ this.replyId = item.id;
|
|
|
+ this.openRemark(item);
|
|
|
+ },
|
|
|
+
|
|
|
selectAction() {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+ // #endif
|
|
|
+ // #ifndef H5
|
|
|
+ import zjDialogRemark from '@/components/zj-dialog/zj-dialog-remark.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ zjDialogRemark
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pam: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
+ onLoad(pam) {
|
|
|
+ this.pam = pam;
|
|
|
+ },
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -149,7 +295,7 @@
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
.phone {
|
|
|
- font-size: 28rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
margin-top: 12rpx;
|
|
|
}
|
|
|
}
|
|
@@ -205,16 +351,8 @@
|
|
|
}
|
|
|
.info {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
margin-top: 20rpx;
|
|
|
- .left {
|
|
|
- text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: $sec-font;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
+ text {
|
|
|
font-size: 24rpx;
|
|
|
color: $sec-font;
|
|
|
}
|
|
@@ -246,11 +384,26 @@
|
|
|
margin-left: 4rpx;
|
|
|
color: $sec-font;
|
|
|
}
|
|
|
+ &.active {
|
|
|
+ .iconfont {
|
|
|
+ color: $theme-color;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: $theme-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.imgs-container {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.remark-container {
|
|
|
background: #ffffff;
|
|
|
margin-top: 30rpx;
|
|
@@ -309,6 +462,7 @@
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
.right {
|
|
|
+ flex-shrink: 0;
|
|
|
font-size: 24rpx;
|
|
|
background: #eaeaea;
|
|
|
display: flex;
|
|
@@ -323,11 +477,13 @@
|
|
|
}
|
|
|
}
|
|
|
.reply {
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: $sec-font;
|
|
|
- border-left: 4rpx solid $theme-color;
|
|
|
- padding-left: 8rpx;
|
|
|
+ .it {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $sec-font;
|
|
|
+ border-left: 4rpx solid $theme-color;
|
|
|
+ padding-left: 8rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|