index.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <view class="list" @tap="toView">
  6. <image class="image" :src="goodsInfo.file&&goodsInfo.file.length>0?goodsInfo.file[0].url:''"
  7. mode="">
  8. </image>
  9. <view class="list_1_1">
  10. <view class="name">
  11. {{goodsInfo.name||'暂无'}}
  12. </view>
  13. <view class="specs">
  14. <text>规格:{{specsInfo.name}}</text>
  15. <text>店铺:{{shopInfo.name}}</text>
  16. </view>
  17. <view class="money">
  18. <text>¥</text>
  19. <text>{{specsInfo.group_config.money}}</text>
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. <view class="two">
  25. <button type="default" size="default" @click="toGroup">我要开团</button>
  26. </view>
  27. <view class="thr">
  28. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
  29. <view class="list-scroll-view">
  30. <view class="list" v-for="(item, index) in list" :key="index">
  31. <view class="image">
  32. <image class="file" v-for="(tag, indexs) in item.persons.slice(0,7)" :key="indexs"
  33. :src="tag.icon&&tag.icon.length>0?tag.icon[0].url:''" mode="">
  34. </view>
  35. </image>
  36. <view class="list_1">
  37. <view class="name">
  38. {{item.person_limit||0}}人即可开团成功
  39. </view>
  40. <view class="some">
  41. <text>团长</text>
  42. <text>{{item.leader.name||'暂无'}}</text>
  43. </view>
  44. <view class="some">
  45. <text>参团人数</text>
  46. <text>{{item.persons.length||0}}人</text>
  47. </view>
  48. </view>
  49. <view class="other">
  50. <view class="btn" @click="onSubmit(item)">
  51. <text>{{item.zhStatus||'暂无状态'}}</text>立即参团
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </scroll-view>
  57. </view>
  58. </view>
  59. <uni-popup ref="popup" background-color="#fff" type="bottom">
  60. <view class="content">
  61. <view class="one">
  62. <text>数量</text>
  63. <view class="count">
  64. <uni-number-box :min="1" :max="specsInfo.num" v-model="num" @change="toCount">
  65. </uni-number-box>
  66. </view>
  67. <text>库存{{specsInfo.num||0}}</text>
  68. </view>
  69. <view class="btn">
  70. <text @click="onSubmit" class="button">确认开团</text>
  71. </view>
  72. </view>
  73. </uni-popup>
  74. </mobile-frame>
  75. </template>
  76. <script>
  77. export default {
  78. data() {
  79. return {
  80. query: {},
  81. user: {},
  82. // 商品详情
  83. goodsInfo: {},
  84. // 规格详情
  85. specsInfo: {},
  86. // 店铺详情
  87. shopInfo: {},
  88. // 参团列表
  89. list: [],
  90. statusList: [],
  91. num: 1,
  92. total: 0,
  93. skip: 0,
  94. limit: 6,
  95. page: 0
  96. };
  97. },
  98. onLoad: async function(e) {
  99. const that = this;
  100. that.$set(that, `query`, {
  101. goods_id: e.goods_id || '6343878989bdcb128d846990',
  102. specs_id: e.specs_id || '634394bc32c3065a80eb14ad'
  103. });
  104. },
  105. onShow: async function() {
  106. const that = this;
  107. await that.watchLogin();
  108. await that.search();
  109. },
  110. methods: {
  111. // 开团
  112. async toGroup() {
  113. const that = this;
  114. that.$refs.popup.open();
  115. },
  116. // 计数器
  117. toCount(e) {
  118. const that = this;
  119. that.num = e;
  120. },
  121. // 确认开团 立即参团
  122. async onSubmit(e) {
  123. const that = this;
  124. let user = that.user;
  125. if (user._id) {
  126. let data = {
  127. customer: user._id,
  128. shop: that.shopInfo._id,
  129. goods: that.goodsInfo._id,
  130. goodsSpec: that.specsInfo._id,
  131. num: that.num,
  132. type: '1'
  133. }
  134. if (e._id) {
  135. data.group_id = e._id
  136. }
  137. let arr = await that.$api(`/util/checkCanBuy`, 'POST', data)
  138. if (arr.errcode == '0') {
  139. if (arr.data.result == true) {
  140. that.clearPage();
  141. uni.navigateTo({
  142. url: `/pagesHome/order/order?key=${arr.data.key}&group_id=${e?._id}`
  143. })
  144. } else {
  145. uni.showToast({
  146. title: arr.data.msg,
  147. icon: 'none'
  148. })
  149. }
  150. } else {
  151. uni.showToast({
  152. title: arr.errmsg,
  153. icon: 'none'
  154. })
  155. }
  156. } else {
  157. uni.navigateTo({
  158. url: `/pages/login/index`
  159. })
  160. }
  161. },
  162. // 监听用户是否登录
  163. watchLogin() {
  164. const that = this;
  165. uni.getStorage({
  166. key: 'token',
  167. success: async function(res) {
  168. let user = that.$jwt(res.data);
  169. that.$set(that, `user`, user);
  170. let status = await that.$api(`/dictData`, 'GET', {
  171. code: "group_status"
  172. });
  173. if (status.errcode == '0') {
  174. that.$set(that, `statusList`, status.data)
  175. }
  176. },
  177. fail: function(err) {}
  178. })
  179. },
  180. // 查询列表
  181. async search() {
  182. const that = this;
  183. let res;
  184. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  185. id: that.query.goods_id
  186. });
  187. if (res.errcode == '0') {
  188. that.$set(that, `goodsInfo`, res.data.goods)
  189. that.$set(that, `shopInfo`, res.data.shop)
  190. }
  191. res = await that.$api(`/goodsSpec/${that.query.specs_id}`, 'GET')
  192. if (res.errcode == '0') {
  193. that.$set(that, `specsInfo`, res.data);
  194. }
  195. let info = {
  196. skip: that.skip,
  197. limit: that.limit,
  198. goodsSpec: that.query.specs_id,
  199. status: '0'
  200. }
  201. res = await that.$api(`/group`, 'GET', {
  202. ...info
  203. })
  204. if (res.errcode == '0') {
  205. let list = [...that.list, ...res.data];
  206. for (let val of list) {
  207. let status = that.statusList.find(i => i.value == val.status)
  208. if (status) val.zhStatus = status.label;
  209. }
  210. that.$set(that, `list`, list);
  211. that.$set(that, `total`, res.total)
  212. }
  213. },
  214. // 分页
  215. toPage(e) {
  216. const that = this;
  217. let list = that.list;
  218. let limit = that.limit;
  219. if (that.total > list.length) {
  220. uni.showLoading({
  221. title: '加载中',
  222. mask: true
  223. })
  224. let page = that.page + 1;
  225. that.$set(that, `page`, page)
  226. let skip = page * limit;
  227. that.$set(that, `skip`, skip)
  228. that.search();
  229. uni.hideLoading();
  230. } else uni.showToast({
  231. title: '没有更多数据了'
  232. });
  233. },
  234. // 清空列表
  235. clearPage() {
  236. const that = this;
  237. that.$set(that, `list`, [])
  238. that.$set(that, `skip`, 0)
  239. that.$set(that, `limit`, 6)
  240. that.$set(that, `page`, 0)
  241. }
  242. }
  243. }
  244. </script>
  245. <style lang="scss">
  246. .main {
  247. display: flex;
  248. flex-direction: column;
  249. width: 100vw;
  250. height: 100vh;
  251. .one {
  252. .list {
  253. display: flex;
  254. flex-direction: row;
  255. justify-content: space-between;
  256. width: 91vw;
  257. border: 0.5vw dashed var(--ff0Color);
  258. margin: 2vw 2vw 0 2vw;
  259. padding: 2vw;
  260. border-radius: 5px;
  261. .image {
  262. width: 25vw;
  263. height: 25vw;
  264. border-radius: 5px;
  265. margin: 0 2vw 0 0;
  266. }
  267. .list_1_1 {
  268. display: flex;
  269. flex-direction: column;
  270. justify-content: space-between;
  271. flex-grow: 1;
  272. padding: 2vw 0;
  273. .name {
  274. font-size: var(--font16Size);
  275. margin: 0 0 1vw 0;
  276. }
  277. .specs {
  278. display: flex;
  279. justify-content: space-between;
  280. color: var(--f85Color);
  281. font-size: var(--font12Size);
  282. }
  283. .money {
  284. color: var(--fFB1Color);
  285. font-size: var(--font14Size);
  286. margin: 0 0 1vw 0;
  287. text:last-child {
  288. font-size: var(--font16Size);
  289. }
  290. }
  291. }
  292. }
  293. }
  294. .two {
  295. margin: 4vw 0 0 0;
  296. button {
  297. margin: 0 2vw 2vw 2vw;
  298. background-color: #FFA500;
  299. color: var(--fffColor);
  300. }
  301. }
  302. .thr {
  303. position: relative;
  304. flex-grow: 1;
  305. .list {
  306. display: flex;
  307. flex-direction: row;
  308. justify-content: space-between;
  309. align-items: center;
  310. width: 91vw;
  311. border: 1px solid var(--f1Color);
  312. margin: 2vw 2vw 0 2vw;
  313. padding: 0 2vw;
  314. border-radius: 5px;
  315. .image {
  316. display: flex;
  317. flex-wrap: wrap;
  318. justify-content: center;
  319. align-items: center;
  320. width: 27vw;
  321. height: 27vw;
  322. border-radius: 5px;
  323. margin: 0 2vw 0 0;
  324. .file {
  325. width: 9vw;
  326. height: 9vw;
  327. }
  328. }
  329. .list_1 {
  330. display: flex;
  331. flex-direction: column;
  332. flex-grow: 1;
  333. padding: 2vw 0;
  334. .name {
  335. font-size: var(--font16Size);
  336. margin: 0 0 1vw 0;
  337. }
  338. .some {
  339. color: var(--f85Color);
  340. font-size: var(--font14Size);
  341. margin: 0 0 1vw 0;
  342. text:last-child {
  343. margin: 0 0 0 1vw;
  344. color: var(--f00Color);
  345. }
  346. }
  347. }
  348. .other {
  349. .btn {
  350. display: flex;
  351. flex-direction: column;
  352. align-items: center;
  353. margin: 0 2vw;
  354. padding: 2vw 3vw;
  355. background-color: var(--ff0Color);
  356. color: var(--fffColor);
  357. border-radius: 2vw;
  358. font-size: var(--font14Size);
  359. text {
  360. font-size: var(--font12Size);
  361. }
  362. }
  363. }
  364. }
  365. }
  366. }
  367. .scroll-view {
  368. position: absolute;
  369. top: 0;
  370. left: 0;
  371. right: 0;
  372. bottom: 0;
  373. .list-scroll-view {
  374. display: flex;
  375. flex-direction: column;
  376. }
  377. }
  378. .content {
  379. height: 60vw;
  380. .one {
  381. display: flex;
  382. justify-content: flex-start;
  383. align-items: center;
  384. margin: 0 2vw;
  385. padding: 2vw 0;
  386. text {
  387. margin: 0 2vw 0 0;
  388. }
  389. text:last-child {
  390. margin: 0 0 0 2vw;
  391. font-size: var(--font12Size);
  392. color: var(--f85Color);
  393. }
  394. }
  395. .btn {
  396. display: flex;
  397. justify-content: space-between;
  398. position: fixed;
  399. bottom: 0;
  400. .button {
  401. width: 100vw;
  402. padding: 4vw 0;
  403. background-color: var(--fFB1Color);
  404. text-align: center;
  405. font-size: var(--font18Szie);
  406. color: var(--mainColor);
  407. }
  408. }
  409. }
  410. </style>