myproduct.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <template>
  2. <view class="center">
  3. <view v-for="(item, index) in list" :key="index" class="order-item">
  4. <view class="goods-box-single">
  5. <image class="goods-img" :src="item.image" mode="scaleToFill"></image>
  6. <view class="right">
  7. <view class="flex-start">
  8. <text class="title clamp1">{{ item.name }}</text>
  9. </view>
  10. <view class="create-time">{{ item.g_time }}</view>
  11. <view class="price">{{ item.price | moneyNum }}</view>
  12. </view>
  13. </view>
  14. <view class="buy-box">
  15. <view class="buy-info"><view class="font">挂售价格:{{ item.hanging_price }}</view></view>
  16. <view class="buy-info"><view class="font">挂售时间:{{ item.update_time }}</view></view>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import { user_product } from '@/api/user.js';
  23. import { getTime } from '@/utils/rocessor.js'
  24. export default {
  25. data() {
  26. return {
  27. list: [],
  28. page: 1,
  29. limit: 10,
  30. loadingType: 'more'
  31. };
  32. },
  33. onLoad() {
  34. this.loadData();
  35. },
  36. methods: {
  37. loadData() {
  38. const obj = this;
  39. if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
  40. return;
  41. }
  42. obj.loadingType = 'loading';
  43. user_product({
  44. page: obj.page,
  45. limit: obj.limit
  46. }).then(({ data }) => {
  47. console.log(data);
  48. data.forEach(e =>{
  49. e.g_time = getTime(e.add_time)
  50. })
  51. obj.list = data;
  52. if (data.length != obj.limit) {
  53. obj.loadingType == 'noMore'
  54. }else{
  55. obj.page++
  56. obj.loadingType == 'more'
  57. }
  58. });
  59. }
  60. }
  61. };
  62. </script>
  63. <style lang="scss">
  64. .center {
  65. background: #f3f5f4;
  66. }
  67. .order-item {
  68. display: flex;
  69. flex-direction: column;
  70. background: #fff;
  71. margin-top: 20rpx;
  72. .i-top {
  73. display: flex;
  74. align-items: center;
  75. height: 80rpx;
  76. font-size: $font-base;
  77. color: $font-color-dark;
  78. position: relative;
  79. padding: 0 30rpx;
  80. .time {
  81. flex: 1;
  82. }
  83. .state {
  84. color: $base-color;
  85. }
  86. .del-btn {
  87. padding: 10rpx 0 10rpx 36rpx;
  88. font-size: $font-lg;
  89. color: $font-color-light;
  90. position: relative;
  91. &:after {
  92. content: '';
  93. width: 0;
  94. height: 30rpx;
  95. border-left: 1px solid $border-color-dark;
  96. position: absolute;
  97. left: 20rpx;
  98. top: 50%;
  99. transform: translateY(-50%);
  100. }
  101. }
  102. }
  103. /* 多条商品 */
  104. .goods-box {
  105. height: 160rpx;
  106. padding: 20rpx 0;
  107. white-space: nowrap;
  108. .goods-item {
  109. width: 120rpx;
  110. height: 120rpx;
  111. display: inline-block;
  112. margin-right: 24rpx;
  113. }
  114. .goods-img {
  115. display: block;
  116. width: 100%;
  117. height: 100%;
  118. }
  119. }
  120. /* 单条商品 */
  121. .goods-box-single {
  122. display: flex;
  123. padding: 20rpx 30rpx;
  124. background: #FFFFFF;
  125. .goods-img {
  126. display: block;
  127. width: 160rpx;
  128. height: 160rpx;
  129. }
  130. .right {
  131. flex: 1;
  132. display: flex;
  133. flex-direction: column;
  134. padding: 0 0 0 24rpx;
  135. overflow: hidden;
  136. .price {
  137. margin-top: 30rpx;
  138. display: inline;
  139. font-size: $font-base + 8rpx;
  140. color: #fd3938;
  141. &:before {
  142. content: '¥';
  143. font-size: $font-sm;
  144. }
  145. }
  146. .title {
  147. font-size: $font-base + 6rpx;
  148. color: #4f4f4f;
  149. line-height: 1;
  150. width: 80%;
  151. }
  152. .create-time {
  153. margin-top: 10rpx;
  154. font-size: $font-base;
  155. color: #9d9d9d;
  156. }
  157. }
  158. }
  159. .price-box {
  160. display: flex;
  161. justify-content: flex-end;
  162. align-items: baseline;
  163. padding: 20rpx 30rpx;
  164. font-size: $font-sm + 2rpx;
  165. color: $font-color-light;
  166. .num {
  167. margin: 0 8rpx;
  168. color: $font-color-dark;
  169. }
  170. .price {
  171. font-size: $font-lg;
  172. color: $font-color-dark;
  173. &:before {
  174. content: '¥';
  175. font-size: $font-sm;
  176. margin: 0 2rpx 0 8rpx;
  177. }
  178. }
  179. }
  180. .action-box {
  181. padding: 0 30rpx;
  182. display: flex;
  183. justify-content: flex-end;
  184. align-items: center;
  185. height: 100rpx;
  186. position: relative;
  187. }
  188. .refuse {
  189. margin: 0;
  190. padding: 0;
  191. width: 160rpx;
  192. height: 60rpx;
  193. border: 2rpx solid #ebebeb;
  194. border-radius: 28rpx;
  195. text-align: center;
  196. line-height: 60rpx;
  197. font-size: 26rpx;
  198. font-family: PingFang SC;
  199. font-weight: 500;
  200. color: #999999;
  201. &:after {
  202. border-radius: 100px;
  203. }
  204. &.recom {
  205. color: #999999;
  206. &:after {
  207. border-color: #999999;
  208. }
  209. }
  210. }
  211. .buy-box {
  212. padding: 10rpx 22rpx;
  213. background-color: #ffffff;
  214. .buy-info {
  215. margin-top: 20rpx;
  216. .font {
  217. font-size: 32rpx;
  218. font-family: PingFang SC;
  219. font-weight: 500;
  220. color: #333333;
  221. }
  222. }
  223. }
  224. .action-btn {
  225. width: 160rpx;
  226. height: 60rpx;
  227. margin: 0;
  228. margin-left: 24rpx;
  229. padding: 0;
  230. text-align: center;
  231. line-height: 60rpx;
  232. font-size: $font-sm + 2rpx;
  233. color: $font-color-dark;
  234. background: #fff;
  235. border-radius: 100px;
  236. border: 2rpx solid #fd3b39;
  237. border-radius: 28px;
  238. &:after {
  239. border-radius: 100px;
  240. }
  241. &.recom {
  242. color: $base-color;
  243. &:after {
  244. border-color: $base-color;
  245. }
  246. }
  247. &.evaluate {
  248. color: $color-yellow;
  249. &:after {
  250. border-color: $color-yellow;
  251. }
  252. }
  253. }
  254. }
  255. </style>