index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  3. <tm-menubars title="消息列表" :shadow="0" :showback="true"></tm-menubars>
  4. <div class="zhuti">
  5. <tm-sheet class="kuang" style="padding-bottom: 30px !important;" v-if="listdata.length!=0" >
  6. <view style="width: 94%;margin:0 auto;" class="remen">
  7. <view v-for="(item,index) in listdata" class="round-5 contone black mt-20" :class="index%2==0?'fl':'fr'" @click="goDetail(item.category_id)">
  8. <image class="logo" :src="item.image" mode="widthFix"></image>
  9. <view class="pa-15 text-size-s">
  10. <view class="text-overflow-2">
  11. <text class="text-size-lg">{{item.goods_name}}</text>
  12. <view class="text-gray mt-6">销量:{{item.stock_num}}</view>
  13. </view>
  14. <view class="mt-2 flex-between flex-center">
  15. <view class="touxiang mt-30">
  16. <text class="text-white text-size-m text-weight-b">¥ {{item.sale_price}}</text>
  17. </view>
  18. <view >
  19. <image @click.stop="jiarufuFun(item)" class="remenzan" src="/static/img/86.png" mode="widthFix"></image>
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. <view style="clear: both;"></view>
  25. <view style="clear: both;" class="more ma-40 pt-40" @click="gengmore()" v-if="listdata.length<total" >
  26. <image src="/static/img/30.png" mode="widthFix"></image>
  27. <text class="text-size-s">下拉加载更多~</text>
  28. </view>
  29. </view>
  30. </tm-sheet>
  31. <view style="height:60px"></view>
  32. </div>
  33. <!-- 弹出层消息 -->
  34. <tm-message ref="toast"></tm-message>
  35. </view>
  36. </template>
  37. <script>
  38. import{myRequest} from '@/api/request.js'
  39. export default {
  40. data() {
  41. return {
  42. typeclick:1,
  43. listdata:[],
  44. soId:'',
  45. page:1,
  46. pagesize:8,
  47. total:0
  48. };
  49. },
  50. onLoad(op) {
  51. console.log(op);
  52. this.soId=op.id
  53. },
  54. created() {
  55. if (!uni.getStorageSync("token")) {
  56. uni.navigateTo({
  57. url: "/pages/login/index",
  58. })
  59. }
  60. this.sys = uni.getSystemInfoSync();
  61. // this.randouh()
  62. this.getSort()
  63. },
  64. methods: {
  65. gengmore(){
  66. this.page++;
  67. let that=this;
  68. myRequest({
  69. url:'/api/ShopGoods/childrenClassificationList',
  70. method:'post',
  71. data:{id:that.soId,page:that.page,pagesize:that.pagesize}
  72. }).then(res=>{
  73. if(res.data.code==200){
  74. if(res.data.data.length<res.data.data.total){
  75. console.log(res.data.data,'liebiao');
  76. // that.total=res.data.data.total;
  77. that.listdata=that.listdata.concat(res.data.data.data);
  78. }else{
  79. that.page--;
  80. }
  81. }else{
  82. that.$refs.toast.show({
  83. model: 'error',
  84. label: res.data.msg
  85. })
  86. }
  87. })
  88. },
  89. jiarufuFun(data){
  90. let that=this;
  91. myRequest({
  92. url: "/api/ShopCart/addShopCart",
  93. method:'post',
  94. data:{
  95. goods_id:data.id,
  96. goods_name:data.goods_name,
  97. goods_image:data.image,
  98. goods_price:data.sale_price,
  99. goods_num:1
  100. }
  101. }).then(res => {
  102. if (res.data.code == 200) {
  103. that.$refs.toast.show({model:'success',label:res.data.msg})
  104. }else{
  105. that.$refs.toast.show({model:'error',label:res.data.msg})
  106. }
  107. })
  108. // console.log(data)
  109. // this.gouwuche.push(data)
  110. },
  111. getSort(){
  112. this.page=1;
  113. this.pagesize=8;
  114. let that=this;
  115. myRequest({
  116. url:'/api/ShopGoods/childrenClassificationList',
  117. method:'post',
  118. data:{id:that.soId,page:that.page,pagesize:that.pagesize}
  119. }).then(res=>{
  120. if(res.data.code==200){
  121. if(res.data.data.length!=0){
  122. console.log(res.data.data,'liebiao');
  123. that.total=res.data.data.total;
  124. that.listdata=res.data.data.data;
  125. }else{
  126. that.listdata=[]
  127. }
  128. }else{
  129. that.$refs.toast.show({
  130. model: 'error',
  131. label: res.data.msg
  132. })
  133. }
  134. })
  135. },
  136. goindex(){
  137. uni.navigateBack();
  138. },
  139. goDetail(id){
  140. uni.navigateTo({
  141. url:'/pages/shopdetail/index?cartId='+id
  142. })
  143. },
  144. change(e){
  145. console.log(e)
  146. },
  147. sosoFun(){
  148. }
  149. },
  150. }
  151. </script>
  152. <style lang="scss">
  153. /deep/ .tm-menubars .body{
  154. background-color: #1b1b1b !important;
  155. }
  156. /deep/ .zhuti{padding: 10px 10px;}
  157. /deep/ .kuang{margin:0 !important;padding: 0px !important;}
  158. /deep/ .icon-search{
  159. font-size: 23px !important;
  160. color: #8E8E93 !important;
  161. }
  162. /deep/ .tm-search{
  163. width: 66%;
  164. background-color: #414141 !important;
  165. border-radius: 10px;
  166. }
  167. /deep/ .tm-search .grey-darken-5{
  168. background-color: #414141 !important;
  169. }
  170. .dingwei{width: 21%;margin-top:3%;}
  171. .shuruk{width: 77%;}
  172. .sousuo{width:94%;margin:0 auto;}
  173. .quxiao{color: #707070;line-height: 47px;}
  174. .contone{width: 48%;}
  175. .logo{width: 100%;}
  176. .remenzan{width: 18px !important;margin-top: 10px;}
  177. .more{text-align: center;}
  178. .more image{margin-right: 10px;vertical-align: middle;width: 30px;}
  179. </style>