feat: 对接商品详情

src/components/zj-dialog/zj-dialog-remark.vue

@@ -8,7 +8,7 @@
 		<u--textarea
 			fixed
 			v-model="value"
-			placeholder="请输入留言内容"
+			:placeholder="replyItem ? `回复${replyItem.uaerName || ''}：` : `留言内容：`"
 			border="none"
 			height="250">
 		</u--textarea>
@@ -28,51 +28,29 @@
 				type: Boolean,
 				default: false
 			},
-			orderId: {
-				type: String,
-				default: ''
-			},
 		},
 
 		data() {
 			return {
+        name: '',
 				value: '',
 			}
 		},
 
 		methods: {
-			setValue(id) {
-				this.$axios({
-					url: '/order/detail',
-					method: 'POST',
-					params: {
-						id,
-					}
-				}).then(res => {
-					this.value = res.data.workerRemark;
-				})
+			setValue(replyItem) {
+        this.replyItem = replyItem;
+				this.value = '';
 			},
 
 			cancelDialog() {
-				this.value = '';
 				this.$emit('close');
 			},
 
 			confirmDialog() {
 				if(!this.value) return this.$toast('请填写备注信息');
 
-				this.$axios({
-					url: '/order/remark',
-					method: 'POST',
-					params: {
-						id: this.orderId,
-						workerRemark: this.value,
-					}
-				}).then(res => {
-					uni.$emit('refreshHome');
-					this.$successToast('修改成功');
-					this.cancelDialog();
-				})
+        this.$emit('confirm', this.value);
 			}
 		}
 	}

src/filters/index.js

@@ -56,6 +56,6 @@ export function priceFilter2(val) {
   if(val === 0) return '面议';
 	if(!val) return '-';
 	val = Number(val);
-	return val.toFixed(2);
+	return `¥${val.toFixed(2)}`;
 }
 

src/pages/goods/detail.vue

@@ -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,74 +16,80 @@
         <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"></u-button>
+          <u-button type="primary" text="立即购买" class="buy" @click="toBuy"></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>
-        <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="openRemark()"></u-button>
           <u-button text="操作" type="primary" shape="circle" @click="isShowActionDialog = true"></u-button>
         </view>
       </template>
@@ -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,132 @@
           {name: '编辑'},
         ],
         isShowActionDialog: false,
+        replyId: '',
       }
     },
 
+    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 +289,7 @@
         font-size: 28rpx;
       }
       .phone {
-        font-size: 28rpx;
+        font-size: 24rpx;
         margin-top: 12rpx;
       }
     }
@@ -205,16 +345,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 +378,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 +456,7 @@
         font-size: 28rpx;
       }
       .right {
+        flex-shrink: 0;
         font-size: 24rpx;
         background: #eaeaea;
         display: flex;
@@ -323,11 +471,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;
+      }
     }
   }
 }

src/pages/index/index.vue

@@ -43,22 +43,22 @@
             <view class="title">{{item.title}}</view>
             <view class="des">{{item.content}}</view>
             <view class="imgs">
-              <image :src="imgUrl + it.imgUrl" v-for="(it, idx) in item.goodsFiles" :key="idx"></image>
+              <image :src="imageUrl + it.imgUrl" v-for="(it, idx) in item.goodsFiles" :key="idx"></image>
             </view>
             <view class="bottom">
               <view class="left-location"><text class="iconfont icon-dingwei"></text>{{item.address}}</view>
               <view class="right-stats">
                 <view class="it">
                   <text class="iconfont icon-dianzan"></text>
-                  <text class="text">2</text>
+                  <text class="text">{{item.up || 0}}</text>
                 </view>
                 <view class="it">
-                  <text class="iconfont icon-pinglun"></text>
-                  <text class="text">2</text>
+                  <text class="iconfont icon-shoucang"></text>
+                  <text class="text">{{item.collectNum || 0}}</text>
                 </view>
                 <view class="it">
                   <text class="iconfont icon-liulan"></text>
-                  <text class="text">2</text>
+                  <text class="text">{{item.visit || 0}}</text>
                 </view>
               </view>
             </view>
@@ -221,7 +221,7 @@
         this.pageNum = 1;
         this.getList();
       },
-      
+
       handleSearch() {
         this.$navToPage({
           url: `/pages/goods/list?keyword=${this.keyword}`

src/pages/mine/myBuy/detail.vue

@@ -94,14 +94,18 @@
         }).then(res => {
 					this.detail = res.data;
 					this.loadStatus = 0;
-					this.getLogisticsData();
 				}).catch(res => {
 					this.errorText = res.message;
 					this.loadStatus = 2;
 				}).finally(res => {
 					this.refresherTriggered = false;
 				})
-      }
+      },
+      
+      refresherrefresh() {
+        this.refresherTriggered = true;
+        this.getDetail();
+      },
     }
   }
   // #endif
@@ -112,7 +116,7 @@
         pam: {},
       }
     },
-  
+
     onLoad(pam) {
       this.pam = pam;
     },

src/pages/mine/myEarnings/list.vue

@@ -86,7 +86,7 @@
 
       //获取列表数据
       async getList() {
-        this.$api.postJson('/order/share/list', {
+        this.$api.post('/order/share/list', {
           pageNum: this.pageNum,
           pageSize: 10,
         }).then(res => {