info.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
  5. <view class="list-scroll-view">
  6. <view class="one">
  7. <rich-text :nodes="info.content.value"></rich-text>
  8. </view>
  9. <view class="two">
  10. <view class="list" v-for="(item,index) in list" :key="index" @tap="toBuy(item)">
  11. <view class="img">
  12. <image class="image" :src="item.file&&item.file.length?item.file[0].url:''" mode="">
  13. </image>
  14. </view>
  15. <view class="name textOver">
  16. <text>{{item.goods_name}}</text>
  17. </view>
  18. <view class="money">
  19. <view class="money_1">
  20. <text>¥</text><text>{{item.sell_money||0}}</text>
  21. </view>
  22. <view class="money_2">
  23. <text>¥</text><text>{{item.flow_money||0}}</text>
  24. </view>
  25. </view>
  26. <view class="acttags">
  27. <text v-for="i in item.act_tags" :key="i">{{i.label}}</text>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="is_bottom" v-if="is_bottom">
  32. <text>{{config.bottom_title}}</text>
  33. </view>
  34. </view>
  35. </scroll-view>
  36. </view>
  37. </mobile-frame>
  38. </template>
  39. <script>
  40. export default {
  41. components: {},
  42. data() {
  43. return {
  44. // 系统设置
  45. config: {},
  46. id: '',
  47. // 详情
  48. info: {},
  49. // 商品列表
  50. list: [],
  51. total: 0,
  52. page: 0,
  53. skip: 0,
  54. limit: 10,
  55. // 数据是否触底
  56. is_bottom: false,
  57. scrollTop: 0,
  58. };
  59. },
  60. onLoad: async function(e) {
  61. const that = this;
  62. that.$set(that, `id`, e.id || '');
  63. that.searchConfig();
  64. await that.searchAct();
  65. await that.configShare();
  66. },
  67. onUnload: function() {
  68. // 页面卸载,重新部署分享内容
  69. const that = this;
  70. if (that.config) {
  71. // 赋值默认值
  72. that.$config.share = {
  73. title: that.config.title,
  74. path: '/pages/index/index',
  75. imageUrl: that.config.config.share[0].url
  76. }
  77. }
  78. },
  79. methods: {
  80. // 查询基本设置
  81. searchConfig() {
  82. const that = this;
  83. uni.getStorage({
  84. key: 'config',
  85. success: function(res) {
  86. if (res.data) that.$set(that, `config`, res.data)
  87. },
  88. fail: function(err) {
  89. console.log(err);
  90. }
  91. })
  92. },
  93. async searchAct() {
  94. const that = this;
  95. // 查询详情
  96. let res = await that.$api(`/platformAct/${that.id}`, 'GET');
  97. if (res.errcode == '0') {
  98. uni.setNavigationBarTitle({
  99. title: res.data.act_time.title
  100. });
  101. if (res.data.content.value) res.data.content.value = res.data.content.value.replace(/\<img/gi,
  102. '<img class="rich-img"');
  103. that.$set(that, `info`, res.data);
  104. that.search()
  105. }
  106. },
  107. async search() {
  108. const that = this;
  109. // 查询商品列表
  110. let info = {
  111. skip: that.skip,
  112. limit: that.limit,
  113. platform_act: that.id
  114. }
  115. let res = await that.$api(`/goodsJoinAct`, 'GET', {
  116. ...info,
  117. })
  118. if (res.errcode == '0') {
  119. let list = [...that.list, ...res.data];
  120. that.$set(that, `list`, list)
  121. that.$set(that, `total`, res.total)
  122. }
  123. },
  124. toPage() {
  125. const that = this;
  126. let list = that.list;
  127. let limit = that.limit;
  128. if (that.total > list.length) {
  129. uni.showLoading({
  130. title: '加载中',
  131. mask: true
  132. })
  133. let page = that.page + 1;
  134. that.$set(that, `page`, page)
  135. let skip = page * limit;
  136. that.$set(that, `skip`, skip)
  137. that.search();
  138. uni.hideLoading();
  139. } else that.$set(that, `is_bottom`, true)
  140. },
  141. toScroll(e) {
  142. const that = this;
  143. let up = that.scrollTop;
  144. that.$set(that, `scrollTop`, e.detail.scrollTop);
  145. let num = Math.sign(up - e.detail.scrollTop);
  146. if (num == 1) that.$set(that, `is_bottom`, false);
  147. },
  148. // 购买
  149. toBuy(e) {
  150. const that = this;
  151. uni.navigateTo({
  152. url: `/pagesHome/order/detail?id=${e.goods}`
  153. })
  154. },
  155. // 清空列表
  156. clearPage() {
  157. const that = this;
  158. that.$set(that, `list`, [])
  159. that.$set(that, `skip`, 0)
  160. that.$set(that, `limit`, 6)
  161. that.$set(that, `page`, 0)
  162. },
  163. // 配置分享内容
  164. configShare() {
  165. const that = this;
  166. let info = that.info;
  167. let imageUrl = that.config.config.logo[0].url;
  168. if (info.share.length > 0) imageUrl = info.share[0].url;
  169. that.$config.share = {
  170. title: info.act_time.title,
  171. path: `/pagesRest/activity/info?id=${that.id}`,
  172. imageUrl: imageUrl
  173. }
  174. }
  175. }
  176. }
  177. </script>
  178. <style lang="scss">
  179. .main {
  180. display: flex;
  181. flex-direction: column;
  182. width: 100vw;
  183. height: 100vh;
  184. .one {
  185. padding: 2vw;
  186. .rich-img {
  187. width: 100% !important;
  188. display: block;
  189. }
  190. }
  191. .two {
  192. display: flex;
  193. flex-wrap: wrap;
  194. padding: 2vw;
  195. .list {
  196. position: relative;
  197. padding: 2vw;
  198. background-color: var(--f1Color);
  199. margin: 0 2vw 2vw 0;
  200. border-radius: 5px;
  201. width: 43vw;
  202. .img {
  203. .image {
  204. width: 100%;
  205. height: 30vh;
  206. border-radius: 5px;
  207. }
  208. }
  209. .name {
  210. margin: 0 0 1vw 0;
  211. text {
  212. font-size: var(--font14Size);
  213. }
  214. }
  215. .money {
  216. display: flex;
  217. .money_1 {
  218. color: var(--fFB1Color);
  219. font-size: 12px;
  220. text:last-child {
  221. font-size: 16px;
  222. padding: 0 0 0 1vw;
  223. }
  224. }
  225. .money_2 {
  226. font-size: 12px;
  227. margin: 0 0 0 2vw;
  228. color: var(--f99Color);
  229. text {
  230. text-decoration: line-through;
  231. }
  232. text:last-child {
  233. font-size: 16px;
  234. padding: 0 0 0 1vw;
  235. }
  236. }
  237. }
  238. .acttags {
  239. position: absolute;
  240. top: 2vw;
  241. width: 93%;
  242. text {
  243. display: inline-block;
  244. background-color: #ff0000;
  245. color: #fff;
  246. border-radius: 1vw;
  247. padding: 0.5vw;
  248. font-size: 12px;
  249. margin: 0 1vw 0 0;
  250. }
  251. }
  252. }
  253. .list:nth-child(2n) {
  254. margin: 0 0 2vw 0;
  255. }
  256. }
  257. }
  258. .scroll-view {
  259. position: absolute;
  260. top: 0;
  261. left: 0;
  262. right: 0;
  263. bottom: 0;
  264. .list-scroll-view {
  265. display: flex;
  266. flex-direction: column;
  267. }
  268. }
  269. .is_bottom {
  270. text-align: center;
  271. width: 100vw;
  272. text {
  273. padding: 2vw 0;
  274. display: inline-block;
  275. color: #858585;
  276. font-size: 14px;
  277. }
  278. }
  279. </style>