detail.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678
  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"
  6. @scroll="handleScroll">
  7. <view class="list-scroll-view" id="top">
  8. <view class="one">
  9. <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
  10. indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
  11. <swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
  12. <image class="image" :src="item.url" mode=""></image>
  13. </swiper-item>
  14. </swiper>
  15. </view>
  16. <view class="two">
  17. <view class="two_1">
  18. <view class="money_1">
  19. <text>¥</text>
  20. <text>{{info.sell_money}}</text>
  21. </view>
  22. <view class="money_2">
  23. <text>¥</text>
  24. <text>{{info.flow_money}}</text>
  25. </view>
  26. </view>
  27. <view class="two_2">{{info.name}}</view>
  28. <view class="two_3">{{info.shot_brief}}</view>
  29. <view class="two_4">
  30. <text>运费{{info.freight}}元</text>
  31. <text>{{info.send_time}}内发货</text>
  32. </view>
  33. </view>
  34. <view class="thr">
  35. <view class="thr_1" @click="toChoose">
  36. <view class="title">选择规格</view>
  37. <text class="iconfont icon-jiantouyou"></text>
  38. </view>
  39. <view class="thr_1">
  40. <view class="title">商品评价({{info.comment||0}})</view>
  41. <text class="iconfont icon-jiantouyou"></text>
  42. </view>
  43. </view>
  44. <view class="four">
  45. <view class="four_1">
  46. <image class="image" :src="shop.file"></image>
  47. <view class="other">
  48. <view class="name">{{shop.name}}</view>
  49. <view class="other_1"><text>宝贝数</text>{{shop.num}}</view>
  50. </view>
  51. </view>
  52. <view class="four_2">
  53. <view class="grade">商品:<text>{{shop.grade||'5.00'}}</text></view>|
  54. <view class="grade">发货:<text>{{shop.grade||'5.00'}}</text></view>|
  55. <view class="grade">服务:<text>{{shop.grade||'5.00'}}</text></view>
  56. </view>
  57. <view class="four_2">
  58. <view class="btn">进入店铺</view>
  59. <view class="btn">关注</view>
  60. </view>
  61. </view>
  62. <view class="five">
  63. <view class="five_1">{{info.brief}}</view>
  64. <view class="five_2" v-for="(item,index) in bannerList" :key="index">
  65. <image class="image" :src="item.url"></image>
  66. </view>
  67. </view>
  68. </view>
  69. </scroll-view>
  70. </view>
  71. <view class="foot">
  72. <uni-goods-nav :options="options" :button-group="buttonGroup" @click="onClick"
  73. @buttonClick="buttonClick" />
  74. </view>
  75. </view>
  76. <view class="collect">
  77. <text v-if="!collection" @click="toCollect" class="iconfont icon-yduishoucangkongxin"></text>
  78. <text v-else @click="toCollect" class="iconfont icon-yduishoucangshixin"></text>
  79. </view>
  80. <view class="menu">
  81. <text @click="toMenu" class="iconfont icon-gengduo"></text>
  82. </view>
  83. <view class="menu_1" v-if="menu">
  84. <view class="title" v-for="(item,index) in barList" :key="index" @click="toPath(item)">
  85. <image class="image" :src="item.normal"></image>
  86. <view class="name">{{item.name}}</view>
  87. </view>
  88. </view>
  89. <view class="backTop" v-if="isShow==true">
  90. <text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
  91. </view>
  92. <uni-popup ref="popup" background-color="#fff" type="bottom">
  93. <view class="content">
  94. <view class="one">
  95. <image class="image" :src="info.file"></image>
  96. <view class="other">
  97. <view class="money">
  98. <text>¥</text>
  99. <text>{{info.sell_money}}</text>
  100. </view>
  101. <view class="other_1">
  102. 已选: <text>{{Selected}}</text>
  103. </view>
  104. </view>
  105. <view class="btn">
  106. <text @click="toClose" class="iconfont icon-shanchu"></text>
  107. </view>
  108. </view>
  109. <view class="two">
  110. <view class="two_1">口味</view>
  111. <view class="two_2"><text @click="toStyle"
  112. :style="{color:color,background:background}">{{info.specs.flavor}}</text></view>
  113. </view>
  114. <view class="thr">
  115. <text>数量:</text>
  116. <view class="count">
  117. <uni-number-box :disabled="disabled" v-model="info.specs.num" @change="toCount">
  118. </uni-number-box>
  119. </view>
  120. </view>
  121. <view @click="toBuy" 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. },
  160. {
  161. icon: 'cart',
  162. text: '购物车',
  163. }, {
  164. icon: 'chat',
  165. text: '客服',
  166. }
  167. ],
  168. buttonGroup: [{
  169. text: '加入购物车',
  170. backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  171. color: '#fff',
  172. type: '0'
  173. },
  174. {
  175. text: '立即购买',
  176. backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  177. color: '#fff',
  178. type: '1'
  179. }
  180. ],
  181. bannerList: [ // 轮播图
  182. {
  183. url: require('@/static/test.png')
  184. },
  185. {
  186. url: require('@/static/test.png')
  187. },
  188. {
  189. url: require('@/static/test.png')
  190. },
  191. {
  192. url: require('@/static/test.png')
  193. },
  194. ],
  195. // 详情
  196. info: {
  197. file: require('@/static/test.png'),
  198. name: '大红门无淀粉果木熏火腿360g',
  199. sell_money: 28.8,
  200. flow_money: 35,
  201. shot_brief: '果木熏制 传统技法',
  202. freight: 8.00,
  203. send_time: '24h',
  204. specs: {
  205. flavor: '果木熏火腿',
  206. num: 1
  207. },
  208. brief: '简介',
  209. },
  210. shop: {
  211. file: require('@/static/test.png'),
  212. name: '官方自营店',
  213. num: 2,
  214. time: '2022-09-27'
  215. },
  216. // 已选
  217. Selected: '',
  218. // 是否显示返回顶部
  219. isShow: false,
  220. topItem: '',
  221. // 收藏
  222. collection: false,
  223. // 菜单显示
  224. menu: false,
  225. disabled: true,
  226. background: '#f9f9f9',
  227. color: '#000',
  228. // 显示文字判断
  229. type: '0'
  230. };
  231. },
  232. onShow: function() {},
  233. methods: {
  234. onClick(e) {
  235. uni.showToast({
  236. title: `点击${e.content.text}`,
  237. icon: 'none'
  238. })
  239. },
  240. toPath(e) {
  241. if (e && e.route) uni.reLaunch({
  242. url: `/${e.route}`
  243. })
  244. },
  245. buttonClick(e) {
  246. const that = this;
  247. if (e && e.content) that.type = e.content.type;
  248. that.$refs.popup.open();
  249. },
  250. // 选择规格
  251. toChoose() {
  252. const that = this;
  253. that.type = '1';
  254. that.$refs.popup.open();
  255. },
  256. // 关闭弹框
  257. toClose() {
  258. const that = this;
  259. that.$refs.popup.close()
  260. },
  261. // 修改样式
  262. toStyle() {
  263. const that = this;
  264. that.color = '#ffffff';
  265. that.background = '#ff0000';
  266. that.Selected = that.info.specs.flavor;
  267. that.disabled = false;
  268. },
  269. // 计数器
  270. toCount(e) {
  271. console.log(e);
  272. },
  273. // 收藏
  274. toCollect() {
  275. const that = this;
  276. that.collection = !that.collection;
  277. if (that.collection == true) {
  278. uni.showToast({
  279. title: `收藏成功`,
  280. icon: 'none'
  281. })
  282. } else {
  283. uni.showToast({
  284. title: `取消成功`,
  285. icon: 'none'
  286. })
  287. }
  288. },
  289. // 菜单展开
  290. toMenu() {
  291. const that = this;
  292. that.menu = !that.menu
  293. },
  294. // 立即购买
  295. toBuy() {
  296. const that = this;
  297. if (that.Selected) {
  298. uni.navigateTo({
  299. url: `/pagesHome/order/order`
  300. })
  301. } else {
  302. uni.showModal({
  303. title: '提示',
  304. content: '请选择规格',
  305. confirmColor: '#ff0000',
  306. showCancel: false,
  307. success: function(res) {}
  308. });
  309. }
  310. },
  311. // 计算高度
  312. handleScroll(e) {
  313. const that = this;
  314. let scrollTop = e.detail.scrollTop;
  315. that.isShow = scrollTop > 500;
  316. that.topItem = '';
  317. },
  318. // 返回顶部
  319. backTop() {
  320. const that = this;
  321. that.topItem = 'top'
  322. }
  323. }
  324. }
  325. </script>
  326. <style lang="scss">
  327. .scrollView {
  328. height: 100vh;
  329. }
  330. .main {
  331. display: flex;
  332. flex-direction: column;
  333. width: 100vw;
  334. height: 100vh;
  335. .onemain {
  336. position: relative;
  337. flex-grow: 1;
  338. background-color: var(--f9Color);
  339. .one {
  340. swiper {
  341. height: 70vw;
  342. }
  343. .list {
  344. border-radius: 5px;
  345. .image {
  346. width: 100%;
  347. height: 100%;
  348. border-radius: 5px;
  349. }
  350. }
  351. }
  352. .two {
  353. padding: 0 0 2vw 0;
  354. background-color: var(--mainColor);
  355. .two_1 {
  356. display: flex;
  357. align-items: center;
  358. border-bottom: 0.5vw solid var(--f9Color);
  359. padding: 2vw;
  360. .money_1 {
  361. color: var(--ff0Color);
  362. text {
  363. margin: 0 1vw 0 0;
  364. }
  365. text:last-child {
  366. font-size: var(--font20Szie);
  367. font-weight: bold;
  368. }
  369. }
  370. .money_2 {
  371. text-decoration: line-through;
  372. color: var(--f99Color);
  373. text {
  374. margin: 0 1vw 0 0;
  375. }
  376. text:last-child {
  377. font-size: var(--font16Size);
  378. }
  379. }
  380. }
  381. .two_2 {
  382. font-size: var(--font18Szie);
  383. font-weight: bold;
  384. padding: 1vw 2vw;
  385. }
  386. .two_3 {
  387. font-size: var(--font16Szie);
  388. color: var(--f85Color);
  389. padding: 1vw 2vw;
  390. }
  391. .two_4 {
  392. font-size: var(--font12Size);
  393. color: var(--fcColor);
  394. padding: 1vw 2vw;
  395. text {
  396. margin: 0 2vw 0 0;
  397. }
  398. }
  399. }
  400. .thr {
  401. .thr_1 {
  402. display: flex;
  403. flex-direction: row;
  404. justify-content: space-between;
  405. margin: 2vw 0 2vw 0;
  406. padding: 2vw;
  407. background-color: var(--mainColor);
  408. }
  409. }
  410. .four {
  411. padding: 2vw;
  412. background-color: var(--mainColor);
  413. .four_1 {
  414. display: flex;
  415. justify-content: space-between;
  416. .image {
  417. width: 15vw;
  418. height: 15vw;
  419. border: 0.1vw solid var(--fcColor);
  420. }
  421. .other {
  422. flex-grow: 1;
  423. margin: 0 0 0 2vw;
  424. .name {
  425. font-size: var(--font16Szie);
  426. }
  427. .other_1 {
  428. font-size: var(--font12Size);
  429. text {
  430. color: var(--fcColor);
  431. margin: 0 2vw 0 0;
  432. }
  433. }
  434. }
  435. }
  436. .four_2 {
  437. display: flex;
  438. flex-direction: row;
  439. justify-content: space-evenly;
  440. padding: 2vw 0;
  441. color: var(--f99Color);
  442. .grade {
  443. font-size: var(--font14Size);
  444. color: var(--f85Color);
  445. text {
  446. color: var(--ff0Color);
  447. }
  448. }
  449. .btn {
  450. border: 0.1vw solid var(--fcColor);
  451. padding: 1vw 6vw;
  452. border-radius: 1vw;
  453. color: var(--f00Color);
  454. }
  455. .btn:last-child {
  456. padding: 1vw 10vw;
  457. }
  458. }
  459. }
  460. .five {
  461. margin: 2vw 0 0 0;
  462. .five_1 {
  463. padding: 2vw;
  464. background-color: var(--mainColor);
  465. font-size: var(--font18Szie);
  466. color: var(--f99Color);
  467. }
  468. .five_2 {
  469. padding: 0 2vw;
  470. background-color: var(--mainColor);
  471. text-align: center;
  472. }
  473. }
  474. }
  475. }
  476. .scroll-view {
  477. position: absolute;
  478. top: 0;
  479. left: 0;
  480. right: 0;
  481. bottom: 0;
  482. .list-scroll-view {
  483. display: flex;
  484. flex-direction: column;
  485. }
  486. }
  487. .scrollView {
  488. height: 100vh;
  489. }
  490. .collect {
  491. position: fixed;
  492. top: 4vw;
  493. right: 5vw;
  494. text {
  495. font-size: 30px;
  496. background-color: #0000005f;
  497. border-radius: 90px;
  498. }
  499. }
  500. .menu {
  501. position: fixed;
  502. bottom: 30vw;
  503. right: 5vw;
  504. text {
  505. font-size: 30px;
  506. background-color: #0000005f;
  507. border-radius: 90px;
  508. }
  509. }
  510. .menu_1 {
  511. position: fixed;
  512. bottom: 40vw;
  513. right: 5vw;
  514. background-color: var(--mainColor);
  515. padding: 2vw;
  516. .title {
  517. display: flex;
  518. padding: 2vw;
  519. border-bottom: 0.1vw solid var(--fcColor);
  520. .image {
  521. width: 7vw;
  522. height: 6vw;
  523. }
  524. .name {
  525. margin: 0 0 0 1vw;
  526. font-size: var(--font14Size);
  527. }
  528. }
  529. }
  530. .backTop {
  531. position: fixed;
  532. bottom: 20vw;
  533. right: 5vw;
  534. text {
  535. font-size: 30px;
  536. background-color: #0000005f;
  537. border-radius: 90px;
  538. }
  539. }
  540. uni-popup {
  541. z-index: 999999 !important;
  542. }
  543. .content {
  544. height: 100vw;
  545. .one {
  546. display: flex;
  547. flex-direction: row;
  548. justify-content: space-between;
  549. margin: 2vw;
  550. padding: 2vw 0;
  551. border-bottom: 1px solid var(--f9Color);
  552. .image {
  553. width: 25vw;
  554. height: 25vw;
  555. margin: 0 2vw 0 0;
  556. }
  557. .other {
  558. display: flex;
  559. flex-direction: column;
  560. flex-grow: 1;
  561. margin: 0 0 0 2vw;
  562. .money {
  563. color: var(--fFB1Color);
  564. font-size: var(--font20Szie);
  565. padding: 2vw 0;
  566. }
  567. .other_1 {
  568. font-size: var(--font14Size);
  569. text {
  570. padding: 0 2vw;
  571. color: var(--f85Color);
  572. }
  573. }
  574. }
  575. }
  576. .two {
  577. margin: 0 2vw;
  578. padding: 2vw 0;
  579. font-size: var(--font12Size);
  580. border-bottom: 1px solid var(--f9Color);
  581. .two_2 {
  582. padding: 1vw;
  583. text {
  584. padding: 1vw;
  585. border-radius: 1vw;
  586. background-color: var(--f9Color);
  587. }
  588. }
  589. }
  590. .thr {
  591. display: flex;
  592. justify-content: space-between;
  593. margin: 0 2vw;
  594. padding: 2vw 0;
  595. text {
  596. margin: 1vw 0 0 0;
  597. }
  598. .count {
  599. margin: 0 2vw;
  600. flex-grow: 1;
  601. }
  602. }
  603. .button {
  604. position: fixed;
  605. width: 100vw;
  606. padding: 4vw 0;
  607. background-color: var(--fFB1Color);
  608. bottom: 0;
  609. text-align: center;
  610. font-size: var(--font18Szie);
  611. color: var(--mainColor);
  612. }
  613. }
  614. </style>