index.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }"
  3. :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  4. <tm-menubars title="详情" :shadow="0" :showback="true"></tm-menubars>
  5. <image class="touimg" :src="moren" mode="widthFix"></image>
  6. <view class="qiehuancla">
  7. <view :class="index==0?'border':'border1'" class="da" v-for="(item,index) in datall.images" @click="qiehuan(index,item)">
  8. <image class="xiaoimg" :src="item"></image>
  9. <image v-if="index==chooseindex" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
  10. </view>
  11. <!-- <view :class="index==1?'border':'border1'" class="da" @click="qiehuan(1)">
  12. <image class="xiaoimg" src="/static/img/92.png"></image>
  13. <image v-if="index==1" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
  14. </view>
  15. <view :class="index==2?'border':'border1'" class="da" @click="qiehuan(2)">
  16. <image class="xiaoimg" src="/static/img/92.png"></image>
  17. <image v-if="index==2" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
  18. </view>
  19. <view :class="index==3?'border':'border1'" class="da" @click="qiehuan(3)">
  20. <image class="xiaoimg" src="/static/img/92.png"></image>
  21. <image v-if="index==3" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
  22. </view>
  23. <view :class="index==4?'border':'border1'" class="da" @click="qiehuan(4)">
  24. <image class="xiaoimg" src="/static/img/92.png"></image>
  25. <image v-if="index==4" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
  26. </view> -->
  27. <view style="clear: both;"></view>
  28. </view>
  29. <tm-sheet class="contzui">
  30. <div class="zhuti" v-if="datall !=0">
  31. <view class="text-white">{{datall.title}}</view>
  32. <!-- <view class="text-gray text-size-m mt-20">adidas 白色、黑色和灰色双层泡沫和网布 Triple S 运动鞋是与 adidas 携手推出的合作款。</view> -->
  33. <!-- <view class="shoucang mt-30 fr">
  34. <view class="fl di mr-20" @click="shouc">
  35. <tm-translate ref="a_3" :auto="true" :duration="80" animation-name="zoomIn">
  36. <image :src="shoucangsrc?'/static/img/15.png':'/static/img/8.png'" mode="widthFix" style="margin-right: 15px;"></image>
  37. </tm-translate>
  38. </view>
  39. <view class="fl di" @click="zan">
  40. <tm-translate ref="a_2" :auto="true" :duration="80" animation-name="zoomIn">
  41. <image :src="dianzan?'/static/img/16.png':'/static/img/9.png'" mode="widthFix" style="margin-right: 15px;"></image>
  42. </tm-translate>
  43. </view>
  44. </view> -->
  45. <view style="clear: both;"></view>
  46. </div>
  47. </tm-sheet>
  48. <tm-sheet :padding="[0, 0]" class="jiaoxi">
  49. <view class="zhuti shangpin">
  50. <view class="mb-30 mt-20 text-white">商品</view>
  51. <tm-cartCellListFood v-on:jiaruFun="jiarufuFun" v-for="item in test" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy"></tm-cartCellListFood>
  52. </view>
  53. </tm-sheet>
  54. <!-- 弹出层消息 -->
  55. <tm-message ref="toast"></tm-message>
  56. </view>
  57. </template>
  58. <script>
  59. import{myRequest} from '@/api/request.js'
  60. export default {
  61. data() {
  62. return {
  63. index:0,
  64. shoucangsrc:true,
  65. dianzan:true,
  66. test: [],
  67. typeclick:3,//1加入购物车,2购物车,3详情
  68. datall:0,
  69. chooseindex:0,
  70. moren:''
  71. };
  72. },
  73. onLoad(e) {
  74. this.id=e.id?e.id:8;
  75. },
  76. created() {
  77. this.sys = uni.getSystemInfoSync();
  78. this.getDate();
  79. },
  80. methods: {
  81. getDate(){
  82. let that = this;
  83. myRequest({
  84. url: "/api/ShopCollocation/getShopCollocationDetails",
  85. method: 'post',
  86. data: {id:that.id}
  87. }).then(res => {
  88. if (res.data.code == 200) {
  89. console.log(res.data.data.details,'shuju1');
  90. that.datall=res.data.data.data;
  91. that.moren=that.datall.images[0]
  92. res.data.data.details.forEach(item => {
  93. that.test.push({
  94. img: item.shopGoods.image,
  95. title: item.shopGoods.goods_name,
  96. label: item.shopGoods.goods_details,
  97. goods_id:item.shop_goods_id,
  98. id: item.shopGoods.id,
  99. price:item.shopGoods.sale_price,
  100. category_id:item.shopGoods.category_id,
  101. sale_num:item.shopGoods.sale_num,
  102. })
  103. })
  104. } else {
  105. that.$refs.toast.show({
  106. model: 'error',
  107. label: res.data.msg
  108. })
  109. }
  110. })
  111. },
  112. jiarufuFun(data){
  113. console.log(data,'前往');
  114. uni.navigateTo({
  115. url: "/pages/shopdetail/index?cartId="+data.data.id+'&classId='+data.data.category_id,
  116. })
  117. console.log(data)
  118. },
  119. shouc(){
  120. this.shoucangsrc=! this.shoucangsrc;
  121. this.$refs.a_3.play()
  122. },
  123. zan(){
  124. this.dianzan=! this.dianzan;
  125. this.$refs.a_2.play()
  126. },
  127. qiehuan(index,item){
  128. this.chooseindex=index;
  129. this.moren=item;
  130. }
  131. },
  132. }
  133. </script>
  134. <style lang="scss">
  135. /deep/ .tm-menubars .body{
  136. background-color: #1b1b1b !important;
  137. }
  138. /deep/ .zhuti{padding: 10px 10px;}
  139. /deep/ .kuang{margin:0 !important;padding: 0px !important;}
  140. .touimg{width: 100%;display: block;}
  141. .qiehuancla{width: 100%;}
  142. .xiaoimg{width: 100%;height: 55px;display: block;}
  143. .qiehuancla .da{width: 19.4%;float: left;height: 55px;position:relative;}
  144. .border{border: 1px solid #0178FD;}
  145. .border1{border: 1px solid #0D0D0D;}
  146. .sanjiao{width: 18px;height: 18px;position: absolute;top: -10px;left:39%;}
  147. .shoucang image{width: 45px;}
  148. .qiehuan{float: right;}
  149. .qiehuan .a_1{margin-top: 25%;}
  150. .qiehuan .anniu{width: 20px;height: 20px !important;}
  151. .di{background: #0D0D0D;width: 45px;height: 45px;text-align: center;line-height: 50px;border-radius: 30px;}
  152. .di image{width: 22px;margin: 0 !important;height: 20px !important;}
  153. .contzui{margin:0;}
  154. /deep/ .shangpin .white.bk{background-color:#1b1b1b!important;}
  155. /deep/ .shangpin .tm-cartCellListFood{padding: 0px 10px 15px 10px !important;
  156. margin-top: 5px !important;margin-bottom: 20px !important;
  157. border-bottom: 1px solid #303030;}
  158. /deep/ .shangpin .border-t-1.bk{border-top:1px solid #1B1B1B!important;}
  159. /deep/ .shangpin .round-3{width:110px !important;height:110px !important;}
  160. /deep/ .shangpin .tm-cartCellListFood-img{width:110px !important;height:110px !important;}
  161. .fudong{position: fixed;right:30px;bottom:80px;background: #0DABF2;width: 60px;height:60px;
  162. border-radius: 30px;text-align: center;}
  163. /deep/ .shangpin .title{color: white !important;font-size: 16px;}
  164. /deep/ .shangpin .text-red{color: white !important;}
  165. .jiaoxi{margin: 0px;margin-top: 15px;}
  166. /deep/ .shangpin .tm-cartCellListFood-label{font-size: 14px;color: white !important;margin-top: 10px !important;}
  167. </style>