app-good-shop-recommendation.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <template>
  2. <view class="app-good-shop-recommendation">
  3. <view class="app-top-title dir-left-nowrap main-between cross-center" v-if="!showGoods && type === 'mch'">
  4. <view class="app-left dir-left-nowrap cross-center">
  5. <icon class="icon"></icon>
  6. <text>好店推荐</text>
  7. </view>
  8. <view class="app-right dir-left-nowrap cross-center">
  9. <app-jump-button form url="/plugins/mch/list/list">
  10. <text>更多</text>
  11. <icon class="icon"></icon>
  12. </app-jump-button>
  13. </view>
  14. </view>
  15. <view class="app-content" :style="[{'background-color':`${temp.data.backgroundColor}`}]" v-if="!showGoods">
  16. <scroll-view scroll-x class="app-scroll">
  17. <view class="app-item" :style="[{'background-color':`${cardStyle < 3 ? '#ffffff': ''}`,'border': `${cardStyle == 2 ? '2rpx solid #e2e2e2': '0'}`}]"
  18. v-for="(item, index) in list"
  19. :key="index"
  20. >
  21. <app-jump-button arrangement="column" form :url="'/plugins/mch/shop/shop?mch_id=' + item.id">
  22. <image class="app-image" :src="item.picUrl"></image>
  23. <text class="app-name">
  24. {{item.name}}
  25. </text>
  26. </app-jump-button>
  27. </view>
  28. </scroll-view>
  29. </view>
  30. <view class="app-goods-shop" v-if="showGoods">
  31. <view class="app-shop" :style="[{'background-color':`${cardStyle < 3 ? '#ffffff': ''}`,'border': `${cardStyle == 2 ? '2rpx solid #e2e2e2': '0'}`,'height': `${item.goodsList.length !== 0 ? '381rpx' : '148rpx'}`}]"
  32. v-for="(item, index) in list" :key="index">
  33. <view class="app-top" @click.stop="jump(item.id)">
  34. <image class="app-image" :src="item.pic_url"></image>
  35. <view class="app-title">
  36. <text class="app-name">{{item.name}}</text>
  37. <view class="app-number-title">
  38. <text class="app-shops">商品数量: {{item.goods_num}}</text>
  39. <text class="app-sell" v-if="type === 'mch'">已售: {{item.order_num}}</text>
  40. </view>
  41. </view>
  42. <view v-if="item.distance" class="box-grow-0 distance" >距离{{item.distance}}</view>
  43. <view class="app-button-jump" v-else>
  44. <app-jump-button form >
  45. <view class="app-button">进店逛逛</view>
  46. </app-jump-button>
  47. </view>
  48. </view>
  49. <view class="app-bottom" v-if="item.goodsList.length !== 0">
  50. <scroll-view class="app-scroll" scroll-x>
  51. <view class="app-item" :style="{marginLeft: number !== 0 ? '8rpx' : '0'}"
  52. v-for="(good, number) in item.goodsList">
  53. <app-jump-button form
  54. @click.native.stop="router_jump(good, item.id)"
  55. >
  56. <image class="app-image" :src="good.picUrl"></image>
  57. <text class="app-price">¥{{good.price}}</text>
  58. </app-jump-button>
  59. </view>
  60. </scroll-view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. import {mapGetters} from 'vuex';
  68. export default {
  69. name: "app-good-shop-recommendation",
  70. props: {
  71. list: {
  72. type: Array,
  73. default: function () {
  74. return []
  75. }
  76. },
  77. showGoods: {
  78. type: Boolean,
  79. default: function () {
  80. return false;
  81. }
  82. },
  83. cardStyle: {
  84. type: String,
  85. default: function () {
  86. return 1;
  87. }
  88. },
  89. type: {
  90. type: String,
  91. default() {
  92. return 'mch';
  93. }
  94. },
  95. backgroundColor: {
  96. type: String,
  97. default() {
  98. return '#fff';
  99. }
  100. }
  101. },
  102. computed: {
  103. ...mapGetters('mallConfig',{
  104. getVideo: 'getVideo'
  105. }),
  106. },
  107. methods: {
  108. jump(data) {
  109. this.$jump({
  110. url: `/plugins/mch/shop/shop?mch_id=${data}`,
  111. open_type: 'navigate',
  112. });
  113. },
  114. router_jump(data, id) {
  115. // #ifndef MP-BAIDU
  116. if (data.goodsWarehouse.video_url && this.getVideo == 1) {
  117. uni.navigateTo({
  118. url: `/pages/goods/video?goods_id=${data.id}&sign=mch`
  119. });
  120. } else {
  121. uni.navigateTo({
  122. url: `/plugins/mch/goods/goods?id=${data.id}&mch_id=${id}`,
  123. });
  124. }
  125. // #endif
  126. // #ifdef MP-BAIDU
  127. uni.navigateTo({
  128. url: `/plugins/mch/goods/goods?id=${data.id}&mch_id=${id}`,
  129. });
  130. // #endif
  131. }
  132. }
  133. }
  134. </script>
  135. <style scoped lang="scss">
  136. .app-good-shop-recommendation {
  137. width: #{750rpx};
  138. .distance {
  139. align-self: flex-start;
  140. padding-top: #{36rpx};
  141. font-size: #{24rpx};
  142. color: #999999;
  143. float: right;
  144. padding-right: #{50rpx};
  145. }
  146. .app-top-title {
  147. width: #{750rpx};
  148. height: #{80rpx};
  149. border-bottom: #{1rpx} solid #e2e2e2;
  150. background-color: #ffffff;
  151. .icon {
  152. background-size: 100% 100%;
  153. background-repeat: no-repeat;
  154. }
  155. .app-left {
  156. height: #{80rpx};
  157. .icon {
  158. width: #{46rpx};
  159. height: #{46rpx};
  160. background-image: url("../../../static/image/icon/good-shop.png");
  161. margin-left: #{24rpx};
  162. }
  163. text {
  164. font-size: #{26rpx};
  165. color: #ff8831;
  166. margin-left: #{16rpx};
  167. }
  168. }
  169. .app-right {
  170. height: #{80rpx};
  171. .icon {
  172. width: #{12rpx};
  173. height: #{22rpx};
  174. background-image: url("../../../static/image/icon/arrow-right.png");
  175. margin-right: #{24rpx};
  176. }
  177. text {
  178. font-size: #{26rpx};
  179. color: #999999;
  180. margin-right: #{12rpx};
  181. }
  182. }
  183. }
  184. .app-content {
  185. width: #{750rpx};
  186. padding: #{12rpx} 0;
  187. .app-scroll {
  188. width: #{750rpx};
  189. padding-left: #{16rpx};
  190. white-space: nowrap;
  191. height: #{224+20+20+23rpx};
  192. .app-item {
  193. display: inline-block;
  194. width: #{224rpx};
  195. height: #{224+20+20+24rpx};
  196. margin: 0 #{8rpx};
  197. border-radius: #{16rpx};
  198. .app-image {
  199. width: #{224rpx};
  200. height: #{224rpx};
  201. border-top-left-radius: #{16rpx};
  202. border-top-right-radius: #{16rpx};
  203. }
  204. .app-name {
  205. height: #{24+20+20rpx};
  206. /* #ifndef MP-ALIPAY */
  207. width: #{189rpx};
  208. /* #endif */
  209. /* #ifdef MP-ALIPAY */
  210. width: #{195rpx};
  211. /* #endif */
  212. font-size: #{24rpx};
  213. color: #353535;
  214. line-height: #{24+20+20rpx};
  215. display: inline-block;
  216. overflow: hidden;
  217. text-align: center;
  218. }
  219. }
  220. }
  221. }
  222. .app-goods-shop {
  223. width: #{750rpx};
  224. padding: #{20rpx};
  225. .app-shop {
  226. width: #{750-20-20rpx};
  227. height: #{381rpx};
  228. padding: 0 #{24rpx};
  229. margin-top: #{20rpx};
  230. margin-bottom: #{20rpx};
  231. overflow: hidden;
  232. border-radius: #{16rpx};
  233. .app-top {
  234. width: #{750-20-20-24-24rpx};
  235. height: #{100rpx};
  236. margin: #{24rpx} 0;
  237. .app-image {
  238. width: #{100rpx};
  239. height: #{100rpx};
  240. border-radius: #{8rpx};
  241. float: left;
  242. }
  243. .app-title {
  244. float: left;
  245. margin-left: #{24rpx};
  246. margin-top: #{36-24rpx};
  247. .app-name {
  248. font-size: #{28rpx};
  249. color: #353535;
  250. }
  251. .app-number-title {
  252. margin-top: #{12rpx};
  253. color: #999999;
  254. font-size: #{24rpx};
  255. .app-sell {
  256. margin-left: #{32rpx};
  257. }
  258. }
  259. }
  260. .app-button-jump {
  261. float: right;
  262. margin-right: #{24rpx};
  263. width: #{144rpx};
  264. height: #{64rpx};
  265. margin-top: #{18rpx};
  266. margin-bottom: #{18rpx};
  267. .app-button {
  268. width: #{144rpx};
  269. height: #{64rpx};
  270. text-align: center;
  271. border: #{1rpx} solid #cccccc;
  272. font-size: #{26rpx};
  273. color: #666666;
  274. line-height: #{64rpx};
  275. border-radius: #{40rpx};
  276. }
  277. }
  278. }
  279. .app-bottom {
  280. height: #{210+23rpx};
  281. width: #{750-20-20-24-24rpx};
  282. padding-bottom: #{23rpx};
  283. .app-scroll {
  284. height: #{210rpx};
  285. width: #{750-20-20-24-24rpx};
  286. white-space: nowrap;
  287. margin-bottom: #{23rpx};
  288. .app-item {
  289. /*background-color: red;*/
  290. display: inline-block;
  291. width: #{210rpx};
  292. height: #{210rpx};
  293. margin-left: #{8rpx};
  294. margin-right: #{8rpx};
  295. position: relative;
  296. .app-image {
  297. width: #{210rpx};
  298. height: #{210rpx};
  299. }
  300. .app-price {
  301. position: absolute;
  302. bottom: 0;
  303. left: 0;
  304. width: #{210rpx};
  305. font-size: #{28rpx};
  306. color: #ff4544;
  307. height: #{50rpx};
  308. text-align: center;
  309. background-color: rgba(245, 245, 246, 0.5);
  310. }
  311. }
  312. }
  313. }
  314. }
  315. .app-shop:first-of-type {
  316. margin-top: 0;
  317. }
  318. .app-shop:last-of-type {
  319. margin-bottom: 0;
  320. }
  321. }
  322. }
  323. </style>