detail.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="onemain">
  5. <scroll-view scroll-y="true" class="scroll-view" scroll-with-animation :scroll-into-view="topItem" @scroll="handleScroll">
  6. <view class="list-scroll-view" id="top">
  7. <view class="one">
  8. <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
  9. <swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
  10. <image class="image" :src="item.url" mode="">
  11. </image>
  12. </swiper-item>
  13. </swiper>
  14. </view>
  15. <view class="two">
  16. <view class="two_1">
  17. <view class="money_1">
  18. <text>¥</text>
  19. <text>{{specs&&specs.length>0?specs[0].sell_money:''}}</text>
  20. </view>
  21. <view class="money_2">
  22. <text>¥</text>
  23. <text>{{specs&&specs.length>0?specs[0].flow_money:''}}</text>
  24. </view>
  25. </view>
  26. <view class="two_2">{{info.name}}</view>
  27. <view class="two_3">{{info.shot_brief}}</view>
  28. <view class="two_4">
  29. <text>运费{{specs&&specs.length>0?specs[0].freight:''}}元</text>
  30. <text>{{info.send_time}}内发货</text>
  31. </view>
  32. </view>
  33. <view class="thr">
  34. <view class="thr_1" @click="toChoose">
  35. <view class="title">选择规格</view>
  36. <text class="iconfont icon-jiantouyou"></text>
  37. </view>
  38. <view class="thr_1">
  39. <view class="title">商品评价({{info.comment||0}})</view>
  40. <text class="iconfont icon-jiantouyou"></text>
  41. </view>
  42. </view>
  43. <view class="four">
  44. <view class="four_1">
  45. <image class="image" :src="shop.logo&&shop.logo.length>0?shop.logo[0].url:''"></image>
  46. <view class="other">
  47. <view class="name">{{shop.name}}</view>
  48. <view class="other_1"><text>宝贝数</text>{{shop.num||0}}</view>
  49. </view>
  50. </view>
  51. <view class="four_2">
  52. <view class="grade">商品:<text>{{shop.grade||0}}</text></view>|
  53. <view class="grade">发货:<text>{{shop.grade||0}}</text></view>|
  54. <view class="grade">服务:<text>{{shop.grade||0}}</text></view>
  55. </view>
  56. <view class="four_2">
  57. <view class="btn" @tap="toShop('pagesHome/shop/index')">进入店铺</view>
  58. <view class="btn">关注</view>
  59. </view>
  60. </view>
  61. <view class="five">
  62. <view class="five_1">{{info.brief}}</view>
  63. <view class="five_2" v-for="(item,index) in bannerList" :key="index">
  64. <image class="image" :src="item.url"></image>
  65. </view>
  66. </view>
  67. </view>
  68. </scroll-view>
  69. </view>
  70. <view class="foot">
  71. <uni-goods-nav :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
  72. </view>
  73. </view>
  74. <view class="collect">
  75. <text v-if="!collection" @click="toCollect" class="iconfont icon-yduishoucangkongxin"></text>
  76. <text v-else @click="toCollect" class="iconfont icon-yduishoucangshixin"></text>
  77. </view>
  78. <view class="menu">
  79. <text @click="toMenu" class="iconfont icon-gengduo"></text>
  80. </view>
  81. <view class="menu_1" v-if="menu">
  82. <view class="title" v-for="(item,index) in barList" :key="index" @click="toPath(item)">
  83. <image class="image" :src="item.normal"></image>
  84. <view class="name">{{item.name}}</view>
  85. </view>
  86. </view>
  87. <view class="backTop" v-if="isShow==true">
  88. <text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
  89. </view>
  90. <uni-popup ref="popup" background-color="#fff" type="bottom">
  91. <view class="content">
  92. <view class="one">
  93. <image class="image" :src="info.file&&info.file.length>0?info.file[0].url:''"></image>
  94. <view class="other">
  95. <view class="money">
  96. <text>¥</text>
  97. <text>{{money}}</text>
  98. </view>
  99. <view class="other_1">
  100. 已选: <text>{{Selected}}</text>
  101. </view>
  102. </view>
  103. <view class="btn">
  104. <text @click="toClose" class="iconfont icon-shanchu"></text>
  105. </view>
  106. </view>
  107. <view class="two">
  108. <view class="two_1">规格</view>
  109. <view class="two_2">
  110. <text v-for="(item,index) in specs" :key="index" @click="toStyle(item,index)" :class="{ 'style': isActive==index}">{{item.name}}</text>
  111. </view>
  112. </view>
  113. <view class="thr">
  114. <text>数量</text>
  115. <view class="count">
  116. <uni-number-box :min="1" :max="max" :disabled="disabled" v-model="num" @change="toCount">
  117. </uni-number-box>
  118. </view>
  119. <text>库存{{max}}</text>
  120. </view>
  121. <view @click="toBuy(type)" class="button">{{type=='0'?'加入购物车':'立即购买'}}</view>
  122. </view>
  123. </uni-popup>
  124. </mobile-frame>
  125. </template>
  126. <script>
  127. export default {
  128. data() {
  129. return {
  130. barList: [{
  131. name: '首页',
  132. route: 'pages/home/index',
  133. normal: require('@/static/shouye.png'),
  134. },
  135. {
  136. name: '微店',
  137. route: 'pages/store/index',
  138. normal: require('@/static/store.png'),
  139. },
  140. {
  141. name: '周边',
  142. route: 'pages/week/index',
  143. normal: require('@/static/week.png'),
  144. },
  145. {
  146. name: '购物车',
  147. route: 'pages/market/index',
  148. normal: require('@/static/market.png'),
  149. },
  150. {
  151. name: '我的',
  152. route: 'pages/my/index',
  153. normal: require('@/static/my.png'),
  154. },
  155. ],
  156. options: [{
  157. icon: 'shop',
  158. text: '店铺',
  159. route: 'pagesHome/shop/index',
  160. },
  161. {
  162. icon: 'cart',
  163. text: '购物车',
  164. route: 'pages/market/index',
  165. },
  166. // {
  167. // icon: 'chat',
  168. // text: '客服',
  169. // }
  170. ],
  171. buttonGroup: [{
  172. text: '加入购物车',
  173. backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  174. color: '#fff',
  175. type: '0'
  176. },
  177. {
  178. text: '立即购买',
  179. backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  180. color: '#fff',
  181. type: '1'
  182. }
  183. ],
  184. // 商品id
  185. id: '',
  186. // 轮播图
  187. bannerList: [],
  188. // 商品详情
  189. info: {},
  190. // 商店详情
  191. shop: {},
  192. // 规格情况
  193. specs: [],
  194. // 已选
  195. Selected: '',
  196. // 是否显示返回顶部
  197. isShow: false,
  198. topItem: '',
  199. // 收藏
  200. collection: false,
  201. // 菜单显示
  202. menu: false,
  203. disabled: true,
  204. // 显示文字判断
  205. type: '0',
  206. // 选择规格
  207. isActive: -1,
  208. money: 0,
  209. // 计数器
  210. num: 1,
  211. max: 0
  212. };
  213. },
  214. onLoad: async function(e) {
  215. const that = this;
  216. that.$set(that, `id`, e.id || '');
  217. that.search();
  218. },
  219. onShow: function() {},
  220. methods: {
  221. //店铺,
  222. // 购物车,客服跳转
  223. onClick(e) {
  224. const that = this;
  225. if (e.index == '0' && e.content.route) {
  226. // 进入店铺
  227. that.toShop();
  228. } else {
  229. uni.reLaunch({
  230. url: `/${e.content.route}`
  231. })
  232. }
  233. },
  234. // 进入店铺
  235. toShop() {
  236. const that = this;
  237. uni.navigateTo({
  238. url: `/pagesHome/shop/index?id=${that.shop._id}`
  239. })
  240. },
  241. // 公共跳转
  242. toCommon(e) {
  243. uni.navigateTo({
  244. url: `/${e}`
  245. })
  246. },
  247. // 收藏
  248. toCollect() {
  249. const that = this;
  250. that.collection = !that.collection;
  251. if (that.collection == true) {
  252. uni.showToast({
  253. title: `收藏成功`,
  254. icon: 'none'
  255. })
  256. } else {
  257. uni.showToast({
  258. title: `取消成功`,
  259. icon: 'none'
  260. })
  261. }
  262. },
  263. //主菜单跳转
  264. toPath(e) {
  265. if (e && e.route) uni.reLaunch({
  266. url: `/${e.route}`
  267. })
  268. },
  269. // 菜单展开
  270. toMenu() {
  271. const that = this;
  272. that.menu = !that.menu
  273. },
  274. // 计算高度
  275. handleScroll(e) {
  276. const that = this;
  277. let scrollTop = e.detail.scrollTop;
  278. that.isShow = scrollTop > 500;
  279. that.topItem = '';
  280. },
  281. // 返回顶部
  282. backTop() {
  283. const that = this;
  284. that.topItem = 'top'
  285. },
  286. //加入购物车,立即购买弹窗
  287. buttonClick(e) {
  288. const that = this;
  289. if (e && e.content) that.type = e.content.type;
  290. that.$refs.popup.open();
  291. },
  292. // 选择规格
  293. toChoose() {
  294. const that = this;
  295. that.type = '1';
  296. that.$refs.popup.open();
  297. },
  298. // 修改样式
  299. toStyle(e, index) {
  300. const that = this;
  301. that.$set(that, `isActive`, index)
  302. that.$set(that, `Selected`, e.name)
  303. that.$set(that, `max`, e.num)
  304. that.$set(that, `money`, e.sell_money)
  305. that.disabled = false;
  306. },
  307. // 计数器
  308. toCount(e) {
  309. const that = this;
  310. that.num = e;
  311. },
  312. // 立即购买
  313. toBuy(e) {
  314. const that = this;
  315. uni.getStorage({
  316. key: 'token',
  317. success: async function(res) {
  318. let user = that.$jwt(res.data);
  319. if (that.Selected) {
  320. let specs_id;
  321. let specs = that.specs.find(i => i.name == that.Selected)
  322. if (specs) specs_id = specs._id
  323. let data = {
  324. customer: user._id,
  325. shop: that.shop._id,
  326. goods: that.info._id,
  327. goodsSpec: specs_id,
  328. num: that.num
  329. }
  330. if (e == '0') {
  331. let arr = await that.$api(`/cart`, 'POST', data)
  332. if (arr.errcode == '0') {
  333. uni.showToast({
  334. title: `加入购物车成功`,
  335. icon: 'success'
  336. })
  337. that.$refs.popup.close()
  338. } else {
  339. uni.showToast({
  340. title: arr.errmsg,
  341. icon: 'none'
  342. })
  343. }
  344. } else {
  345. let arr = await that.$api(`/util/checkCanBuy`, 'POST', data)
  346. if (arr.errcode == '0') {
  347. if (arr.data.result == true) {
  348. uni.navigateTo({
  349. url: `/pagesHome/order/order?key=${arr.data.key}`
  350. })
  351. } else {
  352. uni.showToast({
  353. title: arr.data.msg,
  354. icon: 'none'
  355. })
  356. }
  357. } else {
  358. uni.showToast({
  359. title: arr.errmsg,
  360. icon: 'none'
  361. })
  362. }
  363. }
  364. } else {
  365. uni.showModal({
  366. title: '提示',
  367. content: '请选择规格',
  368. confirmColor: '#ff0000',
  369. showCancel: false,
  370. success: function(res) {}
  371. });
  372. }
  373. },
  374. fail: function(err) {
  375. uni.navigateTo({
  376. url: `/pages/login/index`
  377. })
  378. }
  379. });
  380. },
  381. // 关闭弹框
  382. toClose() {
  383. const that = this;
  384. that.$refs.popup.close()
  385. },
  386. // 详情数据
  387. async search() {
  388. const that = this;
  389. let res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  390. id: that.id
  391. });
  392. if (res.errcode == '0') {
  393. that.$set(that, `info`, res.data.goods)
  394. that.$set(that, `specs`, res.data.specs)
  395. that.$set(that, `shop`, res.data.shop)
  396. if (res.data.specs.length > 0) that.$set(that, `money`, res.data.specs[0].sell_money)
  397. that.$set(that, `bannerList`, res.data.goods.file)
  398. }
  399. },
  400. }
  401. }
  402. </script>
  403. <style lang="scss">
  404. .scrollView {
  405. height: 100vh;
  406. }
  407. .main {
  408. display: flex;
  409. flex-direction: column;
  410. width: 100vw;
  411. height: 100vh;
  412. .onemain {
  413. position: relative;
  414. flex-grow: 1;
  415. background-color: var(--f1Color);
  416. .one {
  417. swiper {
  418. height: 70vw;
  419. }
  420. .list {
  421. border-radius: 5px;
  422. .image {
  423. width: 100%;
  424. height: 100%;
  425. border-radius: 5px;
  426. }
  427. }
  428. }
  429. .two {
  430. padding: 0 0 2vw 0;
  431. background-color: var(--mainColor);
  432. .two_1 {
  433. display: flex;
  434. align-items: center;
  435. border-bottom: 0.5vw solid var(--f9Color);
  436. padding: 2vw;
  437. .money_1 {
  438. color: var(--ff0Color);
  439. text {
  440. margin: 0 1vw 0 0;
  441. }
  442. text:last-child {
  443. font-size: var(--font20Szie);
  444. font-weight: bold;
  445. }
  446. }
  447. .money_2 {
  448. text-decoration: line-through;
  449. color: var(--f99Color);
  450. text {
  451. margin: 0 1vw 0 0;
  452. }
  453. text:last-child {
  454. font-size: var(--font16Size);
  455. }
  456. }
  457. }
  458. .two_2 {
  459. font-size: var(--font18Szie);
  460. font-weight: bold;
  461. padding: 1vw 2vw;
  462. }
  463. .two_3 {
  464. font-size: var(--font16Szie);
  465. color: var(--f85Color);
  466. padding: 1vw 2vw;
  467. }
  468. .two_4 {
  469. font-size: var(--font12Size);
  470. color: var(--fcColor);
  471. padding: 1vw 2vw;
  472. text {
  473. margin: 0 2vw 0 0;
  474. }
  475. }
  476. }
  477. .thr {
  478. .thr_1 {
  479. display: flex;
  480. flex-direction: row;
  481. justify-content: space-between;
  482. margin: 2vw 0 2vw 0;
  483. padding: 2vw;
  484. background-color: var(--mainColor);
  485. }
  486. }
  487. .four {
  488. padding: 2vw;
  489. background-color: var(--mainColor);
  490. .four_1 {
  491. display: flex;
  492. justify-content: space-between;
  493. .image {
  494. width: 15vw;
  495. height: 15vw;
  496. border: 0.1vw solid var(--fcColor);
  497. }
  498. .other {
  499. flex-grow: 1;
  500. margin: 0 0 0 2vw;
  501. .name {
  502. font-size: var(--font16Szie);
  503. }
  504. .other_1 {
  505. font-size: var(--font12Size);
  506. text {
  507. color: var(--fcColor);
  508. margin: 0 2vw 0 0;
  509. }
  510. }
  511. }
  512. }
  513. .four_2 {
  514. display: flex;
  515. flex-direction: row;
  516. justify-content: space-evenly;
  517. padding: 2vw 0;
  518. color: var(--f99Color);
  519. .grade {
  520. font-size: var(--font14Size);
  521. color: var(--f85Color);
  522. text {
  523. color: var(--ff0Color);
  524. }
  525. }
  526. .btn {
  527. border: 0.1vw solid var(--fcColor);
  528. padding: 1vw 6vw;
  529. border-radius: 1vw;
  530. color: var(--f00Color);
  531. }
  532. .btn:last-child {
  533. padding: 1vw 10vw;
  534. }
  535. }
  536. }
  537. .five {
  538. margin: 2vw 0 0 0;
  539. .five_1 {
  540. padding: 2vw;
  541. background-color: var(--mainColor);
  542. font-size: var(--font18Szie);
  543. color: var(--f99Color);
  544. }
  545. .five_2 {
  546. padding: 0 2vw;
  547. background-color: var(--mainColor);
  548. text-align: center;
  549. }
  550. }
  551. }
  552. }
  553. .scroll-view {
  554. position: absolute;
  555. top: 0;
  556. left: 0;
  557. right: 0;
  558. bottom: 0;
  559. .list-scroll-view {
  560. display: flex;
  561. flex-direction: column;
  562. }
  563. }
  564. .scrollView {
  565. height: 100vh;
  566. }
  567. .collect {
  568. position: fixed;
  569. top: 4vw;
  570. right: 5vw;
  571. text {
  572. font-size: 30px;
  573. background-color: #0000005f;
  574. border-radius: 90px;
  575. }
  576. }
  577. .menu {
  578. position: fixed;
  579. bottom: 30vw;
  580. right: 5vw;
  581. text {
  582. font-size: 30px;
  583. background-color: #0000005f;
  584. border-radius: 90px;
  585. }
  586. }
  587. .menu_1 {
  588. position: fixed;
  589. bottom: 40vw;
  590. right: 5vw;
  591. background-color: var(--mainColor);
  592. padding: 2vw;
  593. .title {
  594. display: flex;
  595. padding: 2vw;
  596. border-bottom: 0.1vw solid var(--fcColor);
  597. .image {
  598. width: 7vw;
  599. height: 6vw;
  600. }
  601. .name {
  602. margin: 0 0 0 1vw;
  603. font-size: var(--font14Size);
  604. }
  605. }
  606. }
  607. .backTop {
  608. position: fixed;
  609. bottom: 20vw;
  610. right: 5vw;
  611. text {
  612. font-size: 30px;
  613. background-color: #0000005f;
  614. border-radius: 90px;
  615. }
  616. }
  617. uni-popup {
  618. z-index: 999999 !important;
  619. }
  620. .content {
  621. height: 100vw;
  622. .one {
  623. display: flex;
  624. flex-direction: row;
  625. justify-content: space-between;
  626. margin: 2vw;
  627. padding: 2vw 0;
  628. border-bottom: 1px solid var(--f9Color);
  629. .image {
  630. width: 25vw;
  631. height: 25vw;
  632. margin: 0 2vw 0 0;
  633. }
  634. .other {
  635. display: flex;
  636. flex-direction: column;
  637. flex-grow: 1;
  638. margin: 0 0 0 2vw;
  639. .money {
  640. color: var(--fFB1Color);
  641. font-size: var(--font20Szie);
  642. padding: 2vw 0;
  643. }
  644. .other_1 {
  645. font-size: var(--font14Size);
  646. text {
  647. padding: 0 2vw;
  648. color: var(--f85Color);
  649. }
  650. }
  651. }
  652. }
  653. .two {
  654. margin: 0 2vw;
  655. padding: 2vw 0;
  656. font-size: var(--font12Size);
  657. border-bottom: 1px solid var(--f9Color);
  658. .two_2 {
  659. padding: 1vw;
  660. text {
  661. margin: 0 2vw 0 0;
  662. padding: 1vw;
  663. border-radius: 1vw;
  664. background-color: var(--f9Color);
  665. }
  666. .style {
  667. color: var(--mainColor);
  668. background-color: var(--ff0Color);
  669. }
  670. }
  671. }
  672. .thr {
  673. display: flex;
  674. justify-content: flex-start;
  675. margin: 0 2vw;
  676. padding: 2vw 0;
  677. text {
  678. margin: 0 2vw 0 0;
  679. }
  680. text:last-child {
  681. margin: 0 0 0 2vw;
  682. font-size: var(--font12Size);
  683. color: var(--f85Color);
  684. }
  685. }
  686. .button {
  687. position: fixed;
  688. width: 100vw;
  689. padding: 4vw 0;
  690. background-color: var(--fFB1Color);
  691. bottom: 0;
  692. text-align: center;
  693. font-size: var(--font18Szie);
  694. color: var(--mainColor);
  695. }
  696. }
  697. </style>