detail.vue 12 KB

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