detail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view">
  6. <view class="list-scroll-view">
  7. <view class="one_1">
  8. <banner :goodsInfo="goodsInfo" :goodsColect="goodsColect" @toGoodscolect="toGoodscolect">
  9. </banner>
  10. </view>
  11. <view class="one_2">
  12. <text class="money_1" v-if="infospecs.leader_price"><text>团长价¥</text>{{infospecs.leader_price||0}}</text>
  13. <text class="money" v-if="infospecs.price"><text>特价¥</text>{{infospecs.price||0}}</text>
  14. <text class="money" v-if="!infospecs.price&&!infospecs.leader_price"><text>¥</text>{{infospecs.sell_money||0}}</text>
  15. <text class="money"><text>¥</text>{{infospecs.flow_money||0}}</text>
  16. </view>
  17. <view class="one_3" v-if="discount">
  18. <text v-if="discount.full_decrement&&discount.full_decrement.length>0" class="act" v-for="(item,index) in discount.full_decrement" :key="index">{{item}}</text>
  19. <text v-if="discount.full_fold&&discount.full_decrement.length>0" class="act" v-for="(item,index) in discount.full_fold" :key="index">{{item}}</text>
  20. </view>
  21. <view class="one_4">
  22. <text class="num">已售{{info.goods.sell_num||0}}件</text>
  23. </view>
  24. <view class="one_5">
  25. 5
  26. </view>
  27. </view>
  28. </scroll-view>
  29. </view>
  30. <view class="two">
  31. <uni-goods-nav :options="options" :button-group="buttonGroup" @click="toNavleft" @buttonClick="toNavright" />
  32. </view>
  33. </view>
  34. </mobile-frame>
  35. </template>
  36. <script>
  37. import banner from './parts/banner_1.vue';
  38. export default {
  39. <<<<<<< HEAD
  40. components: {},
  41. =======
  42. components: {
  43. banner
  44. },
  45. >>>>>>> 05da159d61256c6a0236cdc1ed80cfc988b67efa
  46. data() {
  47. return {
  48. // 系统设置
  49. config: {},
  50. // 商品id
  51. id: '',
  52. // 分享人id
  53. inviter: '',
  54. // 当前用户信息
  55. user: {},
  56. // 是否关注商品
  57. goodsColect: false,
  58. // 是否关注店铺
  59. shopColect: false,
  60. // 评价数
  61. evaluate_num: 0,
  62. // 商品详情
  63. info: {},
  64. // 商品详情
  65. goodsInfo: {},
  66. // 规格
  67. infospecs: {},
  68. // 优惠
  69. discount: {},
  70. // 底部菜单
  71. options: [{
  72. icon: 'shop',
  73. text: '店铺',
  74. type: 'shop',
  75. route: 'pagesHome/shop/index',
  76. },
  77. {
  78. icon: 'cart',
  79. text: '购物车',
  80. type: 'market',
  81. route: 'pages/market/index',
  82. },
  83. ],
  84. buttonGroup: [{
  85. text: '加入购物车',
  86. backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  87. color: '#fff',
  88. type: '0'
  89. },
  90. {
  91. text: '立即购买',
  92. backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  93. color: '#fff',
  94. type: '1'
  95. }
  96. ],
  97. <<<<<<< HEAD
  98. // one_2
  99. // 商品价格
  100. infospecs: {},
  101. // one_3
  102. discount: {
  103. full_decrement: [
  104. '测试一'
  105. ]
  106. }
  107. =======
  108. // 系统菜单
  109. barList: [],
  110. is_menu: false,
  111. // 规格弹框
  112. popupShow: '1',
  113. // 规格信息
  114. is_specs: 0,
  115. btn_type: '1',
  116. specsInfo: {},
  117. // 是否零库存
  118. is_zero: false,
  119. // 商品设置
  120. group_config: [],
  121. // 限制说明
  122. buyList: [],
  123. // 购买数量
  124. buy_num: 1,
  125. // 规格弹出框
  126. dialog: {
  127. show: false,
  128. type: '1'
  129. },
  130. >>>>>>> 05da159d61256c6a0236cdc1ed80cfc988b67efa
  131. };
  132. },
  133. onLoad: async function(e) {
  134. const that = this;
  135. that.$set(that, `id`, e.id || '');
  136. that.$set(that, `inviter`, e.inviter || '');
  137. await that.searchConfig();
  138. await that.search();
  139. await that.configShare();
  140. },
  141. onShow: async function() {
  142. const that = this;
  143. await that.watchLogin();
  144. },
  145. onUnload: function() {
  146. // 页面卸载,重新部署分享内容
  147. const that = this;
  148. if (that.config) {
  149. // 赋值默认值
  150. that.$config.share = {
  151. title: that.config.title,
  152. path: '/pages/index/index',
  153. imageUrl: that.config.config.share[0].url
  154. }
  155. }
  156. },
  157. methods: {
  158. // 查询系统设置
  159. searchConfig() {
  160. const that = this;
  161. uni.getStorage({
  162. key: 'config',
  163. success: function(res) {
  164. let data = res.data;
  165. that.$set(that, `config`, data);
  166. if (data.bottom_menu && data.bottom_menu.list.length > 0) {
  167. let list = data.bottom_menu.list.sort((a, b) => {
  168. return a.sort - b.sort
  169. });
  170. that.$set(that, `barList`, list)
  171. }
  172. }
  173. })
  174. },
  175. // 查询用户信息
  176. watchLogin() {
  177. const that = this;
  178. uni.getStorage({
  179. key: 'token',
  180. success: async function(res) {
  181. let user = that.$jwt(res.data);
  182. if (user) that.$set(that, `user`, user);
  183. },
  184. fail: function(err) {
  185. console.log('暂无用户信息');
  186. }
  187. })
  188. },
  189. // 查询其他信息
  190. async searchOther() {
  191. const that = this;
  192. let user = that.user;
  193. let res;
  194. // 是否关注商品
  195. res = await that.$api(`/storeGoods/check`, `GET`, {
  196. customer: user._id,
  197. goods: that.id
  198. });
  199. if (res.errcode == '0') that.$set(that, `goodsColect`, res.data);
  200. // 是否关注店铺
  201. res = await that.$api(`/storeShop/check`, `GET`, {
  202. customer: user._id,
  203. shop: that.info?.shop?._id
  204. });
  205. if (res.errcode == '0') that.$set(that, `shopColect`, res.data);
  206. // 商品设置
  207. res = await that.$api(`/goodsConfig`, `GET`, {
  208. goods: that.id,
  209. shop: that.info?.shop?._id
  210. }, 'group');
  211. if (res.errcode == '0' && res.total > 0) that.$set(that, `group_config`, res.data);
  212. // 限制说明
  213. res = await that.$api(`/dictData`, 'GET', {
  214. code: "buy_limit"
  215. });
  216. if (res.errcode == '0') that.$set(that, `buyList`, res.data)
  217. },
  218. // 查询商品信息
  219. async search() {
  220. const that = this;
  221. let id = that.id;
  222. if (id) {
  223. let res;
  224. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  225. id: id
  226. });
  227. if (res.errcode == '0') {
  228. let data = res.data;
  229. if (data.goods.brief) data.goods.brief = data.goods.brief.replace(/\<img/gi,
  230. '<img class="rich-img"');
  231. // 特价
  232. let act;
  233. act = data.act.find(i => i.type == '3')
  234. if (act) {
  235. for (let val of act.list) {
  236. for (let [index, arr] of data.specs.entries()) {
  237. if (val.spec == arr._id) arr.price = val.price
  238. }
  239. }
  240. }
  241. // 显示最低价格的规格信息,不考虑库存问题
  242. if (data.specs && data.specs.length > 0) {
  243. // 规格排序
  244. let indexSpecs = data.specs.sort(function(a, b) {
  245. let i, j;
  246. if (a.price) i = 'price'
  247. else i = 'sell_money'
  248. if (b.price) j = 'price'
  249. else j = 'sell_money'
  250. return a[i] - b[j];
  251. })
  252. that.$set(that, `infospecs`, indexSpecs[0])
  253. }
  254. that.$set(that, `info`, data);
  255. that.$set(that, `goodsInfo`, data?.goods);
  256. // 优惠
  257. act = data.act.find(i => i.type == '5')
  258. if (act) that.$set(that.discount, `full_decrement`, act.text.split(';'));
  259. act = data.act.find(i => i.type == '6')
  260. if (act) that.$set(that.discount, `full_fold`, act.text.split(';'));
  261. await that.searchOther();
  262. // 查询规格
  263. await that.searchSpecs(data.specs);
  264. // 查询评价数
  265. await that.searchRate(data);
  266. }
  267. } else {
  268. uni.showToast({
  269. title: '暂无商品信息',
  270. icon: 'none'
  271. })
  272. }
  273. },
  274. // 查询规格
  275. searchSpecs(e) {
  276. const that = this;
  277. if (e.length > 0) {
  278. let data = e.find(i => i.num > 0);
  279. let dataIndex = e.findIndex(i => i._id == data._id);
  280. if (data) {
  281. let specsInfo = that.group_config.find(i => i.spec._id == data._id)
  282. if (specsInfo?._id && that.user.is_leader == '0') data.can_group = '0'
  283. else data.can_group = '1'
  284. let limit = that.buyList.find((i) => i.value == data.buy_limit);
  285. if (limit) data.buy_name = limit.label
  286. that.$set(that, `specsInfo`, data);
  287. that.$set(that, `is_specs`, dataIndex);
  288. }
  289. }
  290. },
  291. // 查询评价数
  292. async searchRate(e) {
  293. const that = this;
  294. let res = await that.$api(`/goodsRate`, `GET`, {
  295. limit: 1,
  296. goods: e.goods._id
  297. })
  298. if (res.errcode == '0') that.$set(that, `evaluate_num`, res.total);
  299. },
  300. // 关注商品
  301. async toGoodscolect() {
  302. const that = this;
  303. let user = that.user;
  304. if (user && user._id) {
  305. let res = await that.$api(`/storeGoods`, `POST`, {
  306. customer: user._id,
  307. goods: that.id
  308. });
  309. if (res.errcode == '0') {
  310. uni.showToast({
  311. title: res.data.msg,
  312. icon: 'none'
  313. })
  314. that.$set(that, `goodsColect`, res.data.result)
  315. }
  316. } else {
  317. uni.showToast({
  318. title: '暂无账号,无法收藏商品',
  319. icon: 'none'
  320. })
  321. }
  322. },
  323. // 店铺,购物车
  324. toNavleft(e) {
  325. const that = this;
  326. if (e.content.type == 'shop') {
  327. that.toShop();
  328. } else if (e.content.type == 'market') {
  329. let obj = {
  330. route: e.content.route
  331. }
  332. that.toPath(obj)
  333. }
  334. },
  335. // 加入购物车,立即购买
  336. toNavright(e) {
  337. const that = this;
  338. that.$set(that, `popupShow`, '1');
  339. that.$set(that, `btn_type`, e.content.type);
  340. that.$refs.specShow.open();
  341. },
  342. <<<<<<< HEAD
  343. },
  344. =======
  345. // 配置分享内容
  346. configShare() {
  347. const that = this;
  348. let id = that.id;
  349. let inviter = that.user && that.user._id ? that.user._id : '';
  350. let title = that.info && that.info.goods ? that.info.goods.name : '';
  351. let imageUrl = that.info && that.info.goods ? that.info.goods.file[0].url : '';
  352. that.$config.share = {
  353. title: title,
  354. path: `/pagesHome/order/detail?id=${id}&inviter=${inviter}`,
  355. imageUrl: imageUrl
  356. }
  357. },
  358. }
  359. >>>>>>> 05da159d61256c6a0236cdc1ed80cfc988b67efa
  360. }
  361. </script>
  362. <style lang="scss">
  363. .main {
  364. display: flex;
  365. flex-direction: column;
  366. width: 100vw;
  367. height: 100vh;
  368. .one {
  369. position: relative;
  370. flex-grow: 1;
  371. .one_2 {
  372. border-bottom: 0.5vw solid var(--f9Color);
  373. padding: 2vw;
  374. .money_1 {
  375. color: #23B67A;
  376. font-size: 20px;
  377. padding: 0 1vw 0 0;
  378. font-weight: bold;
  379. text {
  380. font-size: 14px;
  381. }
  382. }
  383. .money {
  384. font-size: 20px;
  385. padding: 0 1vw 0 0;
  386. color: #ff0000;
  387. font-weight: bold;
  388. text {
  389. font-size: 14px;
  390. }
  391. }
  392. .money:last-child {
  393. font-size: 16px;
  394. color: #858585;
  395. text-decoration: line-through;
  396. }
  397. }
  398. .one_3 {
  399. display: flex;
  400. flex-wrap: wrap;
  401. padding: 1vw;
  402. border-bottom: 0.5vw solid var(--f9Color);
  403. .act {
  404. font-size: 12px;
  405. border: 1px solid var(--fFB1Color);
  406. margin: 0 1vw 1vw 0;
  407. color: var(--fFB1Color);
  408. border-radius: 6px;
  409. padding: 0 1vw;
  410. }
  411. .num {
  412. font-size: 12px;
  413. color: #858585;
  414. }
  415. }
  416. .one_4 {
  417. display: flex;
  418. flex-wrap: wrap;
  419. padding: 1vw;
  420. border-bottom: 0.5vw solid var(--f9Color);
  421. .num {
  422. font-size: 12px;
  423. color: #858585;
  424. }
  425. }
  426. }
  427. .two {
  428. width: 100vw;
  429. height: 8vh;
  430. overflow: hidden;
  431. }
  432. }
  433. .scroll-view {
  434. position: absolute;
  435. top: 0;
  436. left: 0;
  437. right: 0;
  438. bottom: 0;
  439. .list-scroll-view {
  440. display: flex;
  441. flex-direction: column;
  442. }
  443. }
  444. </style>