|
@@ -1,61 +1,132 @@
|
|
|
<template>
|
|
|
- <zj-page-layout
|
|
|
- :hasFooter="false"
|
|
|
- :isScroll="true"
|
|
|
- :refresherTriggered="refresherTriggered"
|
|
|
- @refresherrefresh="refresherrefresh">
|
|
|
- <view class="top-container">
|
|
|
- <view class="user">
|
|
|
- <image src="@/static/common/logo.png"></image>
|
|
|
- <view class="info">
|
|
|
- <view class="name">张三</view>
|
|
|
- <view class="phone">联系电话:138****2233</view>
|
|
|
+ <view>
|
|
|
+ <zj-page-layout
|
|
|
+ :hasFooter="true"
|
|
|
+ :isScroll="true"
|
|
|
+ :refresherTriggered="refresherTriggered"
|
|
|
+ @refresherrefresh="refresherrefresh">
|
|
|
+ <view class="top-container">
|
|
|
+ <view class="user">
|
|
|
+ <image src="@/static/common/logo.png"></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="name">张三</view>
|
|
|
+ <view class="phone">联系电话:138****2233</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>
|
|
|
</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>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
|
|
|
- <view class="info-container">
|
|
|
- <view class="title">
|
|
|
- <view class="tit">商品名称</view>
|
|
|
- <view class="price">¥1234.00</view>
|
|
|
- </view>
|
|
|
- <view class="des">商品描述商品描述商品描述商品描述商品描述</view>
|
|
|
- <view class="tags">
|
|
|
- <view class="it">格力</view>
|
|
|
- <view class="it">7200w</view>
|
|
|
- <view class="it">一级能效</view>
|
|
|
- </view>
|
|
|
- <view class="info">
|
|
|
- <view class="left">
|
|
|
- <text>23小时前发布</text>
|
|
|
- <text>20人浏览</text>
|
|
|
+ <view class="info-container">
|
|
|
+ <view class="title">
|
|
|
+ <view class="tit">商品名称</view>
|
|
|
+ <view class="price">¥1234.00</view>
|
|
|
+ </view>
|
|
|
+ <view class="des">商品描述商品描述商品描述商品描述商品描述</view>
|
|
|
+ <view class="tags">
|
|
|
+ <view class="it">格力</view>
|
|
|
+ <view class="it">7200w</view>
|
|
|
+ <view class="it">一级能效</view>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="left">
|
|
|
+ <text>23小时前发布</text>
|
|
|
+ <text>20人浏览</text>
|
|
|
+ </view>
|
|
|
+ <view class="right">库存10</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="left-location">天河区棠下</view>
|
|
|
+ <view class="right-stats">
|
|
|
+ <view class="it">
|
|
|
+ <text class="iconfont icon-dianzan"></text>
|
|
|
+ <text class="text">点赞</text>
|
|
|
+ </view>
|
|
|
+ <view class="it">
|
|
|
+ <text class="iconfont icon-pinglun"></text>
|
|
|
+ <text class="text">收藏</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="right">库存10</view>
|
|
|
</view>
|
|
|
- <view class="bottom">
|
|
|
- <view class="left-location">天河区棠下</view>
|
|
|
- <view class="right-stats">
|
|
|
- <view class="it">
|
|
|
- <text class="iconfont icon-dianzan"></text>
|
|
|
- <text class="text">点赞</text>
|
|
|
+
|
|
|
+ <view class="remark-container">
|
|
|
+ <view class="title">
|
|
|
+ <view class="tit">全部留言</view>
|
|
|
+ <view class="right">内容违规,我要举报</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <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>
|
|
|
</view>
|
|
|
- <view class="it">
|
|
|
- <text class="iconfont icon-pinglun"></text>
|
|
|
- <text class="text">收藏</text>
|
|
|
+ <view class="content">
|
|
|
+ <view class="left">商品很nice</view>
|
|
|
+ <view class="right"><text class="iconfont icon-bianji"></text><text>回复</text></view>
|
|
|
</view>
|
|
|
+ <view class="reply">主人回复:好的,我知道了</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- </zj-page-layout>
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </zj-page-layout>
|
|
|
+
|
|
|
+ <zj-dialog-remark
|
|
|
+ ref="remarkDialog"
|
|
|
+ :isShow="isShowRemarkDialog"
|
|
|
+ @close="isShowRemarkDialog = false">
|
|
|
+ </zj-dialog-remark>
|
|
|
+
|
|
|
+ <u-action-sheet
|
|
|
+ :actions="actionList"
|
|
|
+ :title="'操作'"
|
|
|
+ :show="isShowActionDialog"
|
|
|
+ @close="isShowActionDialog = false"
|
|
|
+ @select="selectAction">
|
|
|
+ </u-action-sheet>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script>
|
|
|
+ import zjDialogRemark from '@/components/zj-dialog/zj-dialog-remark.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ zjDialogRemark
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ refresherTriggered: false,
|
|
|
+ isShowRemarkDialog: false,
|
|
|
+ actionList: [
|
|
|
+ {name: '已卖出'},
|
|
|
+ {name: '下架'},
|
|
|
+ {name: '重新上架'},
|
|
|
+ {name: '编辑'},
|
|
|
+ ],
|
|
|
+ isShowActionDialog: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ selectAction() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
</script>
|
|
|
|
|
@@ -179,4 +250,98 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.remark-container {
|
|
|
+ background: #ffffff;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .tit {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $sec-font;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 1px solid #eaeaea;
|
|
|
+ &:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ image {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .user {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ .name {
|
|
|
+
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ color: $sec-font;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ color: $assist-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .left {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 24rpx;
|
|
|
+ background: #eaeaea;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8rpx 12rpx;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reply {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $sec-font;
|
|
|
+ border-left: 4rpx solid $theme-color;
|
|
|
+ padding-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-container {
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .u-button {
|
|
|
+ width: auto;
|
|
|
+ height: 60rpx;
|
|
|
+ margin: 0;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|