tuiProduct.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <view>
  3. <!-- <view class="like-title">
  4. <image src="/static/images/tui.png" mode=""></image>
  5. <text class="text">精选商品</text>
  6. </view> -->
  7. <view class="like-list">
  8. <view class="item" v-for="(item,index) in list" :key="index" @click="showProduct(item)">
  9. <view class="img-box">
  10. <image :src="item.image" mode=""></image>
  11. </view>
  12. <view class="info-box">
  13. <view class="title ellipsis2">{{ item.productName }}</view>
  14. <view class="price-box">
  15. <view class="now">
  16. <text class="unit">¥</text>
  17. <text class="num" v-if="userinfoa.isShow==1&&isuser==false">{{item.price.toFixed(2)}}</text>
  18. <text class="num" v-else>{{item.otPrice.toFixed(2)}}</text>
  19. </view>
  20. <view class="old" v-if="userinfoa.isShow==1&&isuser==false">¥{{item.otPrice.toFixed(2)}}</view>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. <Loading :loaded="loaded" :loading="loading"></Loading>
  26. </view>
  27. </template>
  28. <script>
  29. import {getTuiProducts} from '@/api/product'
  30. import {getUserInfo} from '@/api/user'
  31. import Loading from "@/components/Loading";
  32. export default {
  33. components: {Loading },
  34. name: "likeProduct",
  35. data() {
  36. return {
  37. page:{
  38. page: 1,
  39. pageSize: 10
  40. },
  41. total:0,
  42. list:[],
  43. loaded: false,
  44. loading: false,
  45. userinfoa:[],
  46. isuser:false,
  47. };
  48. },
  49. created() {
  50. },
  51. mounted() {
  52. this.getTuiProducts();
  53. if(uni.getStorageSync('AppToken')){
  54. this.getUserInfos()
  55. }else{
  56. this.isuser=true
  57. }
  58. },
  59. methods: {
  60. getUserInfos(){
  61. getUserInfo().then(res => {
  62. if(res.code==200){
  63. if(res.user!=null){
  64. // if(res.user.isPromoter==null||res.user.isPromoter==0){
  65. // this.tuiModalControl=true
  66. // }
  67. this.userinfoa=res.user
  68. console.log(this.userinfoa.isShow,78787)
  69. }
  70. }else{
  71. uni.showToast({
  72. icon:'none',
  73. title: "请求失败",
  74. });
  75. }
  76. },
  77. rej => {}
  78. );
  79. },
  80. getTuiProducts(){
  81. console.log(1)
  82. var that=this;
  83. if (that.loaded == true || that.loading == true) return;
  84. that.loading = true;
  85. uni.showLoading({
  86. title:"加载中..."
  87. })
  88. getTuiProducts(that.page).then(
  89. res => {
  90. if(res.code==200){
  91. that.total=res.data.total;
  92. that.list.push.apply(that.list, res.data.list);
  93. that.loading = false;
  94. that.loaded = that.list.length<that.total?false:true;
  95. that.page.page = that.page.page + 1;
  96. uni.hideLoading()
  97. }
  98. },
  99. err => {
  100. uni.hideLoading()
  101. uni.showToast({
  102. title: err.msg ,
  103. icon: 'none',
  104. duration: 2000
  105. });
  106. }
  107. );
  108. },
  109. showProduct(item){
  110. uni.navigateTo({
  111. url: '/pages/shopping/productDetails?productId='+item.productId
  112. })
  113. },
  114. }
  115. };
  116. </script>
  117. <style lang="scss">
  118. .like-title{
  119. display: flex;
  120. align-items: center;
  121. justify-content: center;
  122. padding: 15upx 0rpx 30upx 0rpx;
  123. image{
  124. width: 37upx;
  125. height: 37upx;
  126. margin-right: 20upx;
  127. }
  128. .text{
  129. font-size: 36upx;
  130. font-family: PingFang SC;
  131. font-weight: bold;
  132. color: #111111;
  133. line-height: 1;
  134. }
  135. }
  136. .like-list{
  137. display: flex;
  138. flex-wrap: wrap;
  139. .item{
  140. margin-right: 20rpx;
  141. margin-bottom: 20rpx;
  142. width: 345rpx;
  143. background: #FFFFFF;
  144. box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
  145. border-radius: 20rpx;
  146. overflow: hidden;
  147. &:nth-child(2n) {
  148. margin-right: 0;
  149. }
  150. .img-box{
  151. width: 100%;
  152. height: 334upx;
  153. image{
  154. width: 100%;
  155. height: 100%;
  156. }
  157. }
  158. .info-box{
  159. box-sizing: border-box;
  160. height: 182upx;
  161. padding: 20upx 20upx 30upx;
  162. display: flex;
  163. flex-direction: column;
  164. justify-content: space-between;
  165. .title{
  166. font-size: 26upx;
  167. font-family: PingFang SC;
  168. font-weight: 500;
  169. color: #111111;
  170. line-height: 40upx;
  171. }
  172. .price-box{
  173. display: flex;
  174. align-items: flex-end;
  175. .now{
  176. display: flex;
  177. align-items: flex-end;
  178. margin-right: 20upx;
  179. .unit{
  180. font-size: 24upx;
  181. font-family: PingFang SC;
  182. font-weight: 500;
  183. color: #FF6633;
  184. line-height: 1.2;
  185. margin-right: 4upx;
  186. }
  187. .num{
  188. font-size: 36upx;
  189. font-family: PingFang SC;
  190. font-weight: bold;
  191. color: #FF6633;
  192. line-height: 1;
  193. }
  194. }
  195. .old{
  196. font-size: 26upx;
  197. font-family: PingFang SC;
  198. font-weight: 500;
  199. text-decoration: line-through;
  200. color: #BBBBBB;
  201. line-height: 1.1;
  202. }
  203. }
  204. }
  205. }
  206. }
  207. </style>