detail.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506
  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 info.file" :key="index">
  10. <image class="image" :src="item.url" mode="aspectFit">
  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>{{info.cost||0}}</text>
  19. </view>
  20. </view>
  21. <view class="two_2">{{info.name}}</view>
  22. <view class="two_3">{{info.shot_brief}}</view>
  23. <view class="two_4">
  24. <text>{{info.send_time}}内发货</text>
  25. </view>
  26. </view>
  27. <view class="thr">
  28. <view class="thr_1">
  29. <image class="image" :src="shop.logo&&shop.logo.length>0?shop.logo[0].url:''"></image>
  30. <view class="other">
  31. <view class="name">{{shop.name}}</view>
  32. </view>
  33. </view>
  34. <view class="thr_2">
  35. <view class="grade">商品:<text>{{shop.goods_score||5}}</text></view>|
  36. <view class="grade">发货:<text>{{shop.send_score||5}}</text></view>|
  37. <view class="grade">服务:<text>{{shop.service_score||5}}</text></view>
  38. </view>
  39. </view>
  40. <view class="four">
  41. <view class="four_1">
  42. <rich-text :nodes="info.brief"></rich-text>
  43. </view>
  44. </view>
  45. </view>
  46. </scroll-view>
  47. </view>
  48. <view class="foot">
  49. <uni-goods-nav :options="[]" :buttonGroup="buttonGroup" @buttonClick="buttonClick" />
  50. </view>
  51. </view>
  52. <view class="menu">
  53. <text @click="toMenu" class="iconfont icon-gengduo"></text>
  54. </view>
  55. <view class="menu_1" v-if="menu">
  56. <view class="title" v-for="(item,index) in barList" :key="index" @click="toPath(item)" v-if="item.is_use=='0'">
  57. <image class="image" :src="item.normal&&item.normal.length>0?item.normal[0].url:''"></image>
  58. <view class="name">{{item.name}}</view>
  59. </view>
  60. </view>
  61. <view class="backTop" v-if="isShow==true">
  62. <text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
  63. </view>
  64. <uni-popup ref="popup" background-color="#fff" type="bottom">
  65. <view class="content">
  66. <view class="one">
  67. <text>数量</text>
  68. <view class="count">
  69. <uni-number-box :min="1" :max="info.num" v-model="num" @change="toCount">
  70. </uni-number-box>
  71. </view>
  72. <text>库存{{info.num||0}}</text>
  73. </view>
  74. <view class="btn">
  75. <text @tap="toExchange" class="button">立即兑换</text>
  76. </view>
  77. </view>
  78. </uni-popup>
  79. </mobile-frame>
  80. </template>
  81. <script>
  82. export default {
  83. data() {
  84. return {
  85. user: {},
  86. // 商品id
  87. id: '',
  88. // 商品详情
  89. info: {},
  90. // 商店详情
  91. shop: {},
  92. // 数量
  93. num: 1,
  94. barList: [],
  95. buttonGroup: [ //
  96. {
  97. text: '兑换',
  98. backgroundColor: 'linear-gradient(90deg, #6A5ACD, #6A5ACD)',
  99. color: '#fff',
  100. }
  101. ],
  102. // 是否显示返回顶部
  103. isShow: false,
  104. topItem: '',
  105. // 菜单显示
  106. menu: false,
  107. };
  108. },
  109. onLoad: async function(e) {
  110. const that = this;
  111. that.$set(that, `id`, e.id || '');
  112. },
  113. onShow: async function() {
  114. const that = this;
  115. await that.searchConfig();
  116. await that.watchLogin();
  117. await that.search();
  118. },
  119. methods: {
  120. // 查询基本信息
  121. searchConfig() {
  122. const that = this;
  123. uni.getStorage({
  124. key: 'config',
  125. success: function(res) {
  126. let data = res.data;
  127. if (data.bottom_menu && data.bottom_menu.list.length > 0) {
  128. let list = data.bottom_menu.list.sort((a, b) => {
  129. return a.sort - b.sort
  130. });
  131. that.$set(that, `barList`, list)
  132. }
  133. }
  134. })
  135. },
  136. watchLogin() {
  137. const that = this;
  138. uni.getStorage({
  139. key: 'token',
  140. success: function(res) {
  141. let user = that.$jwt(res.data);
  142. if (user) that.$set(that, `user`, user);
  143. },
  144. fail: function(err) {}
  145. });
  146. },
  147. // 详情数据
  148. async search() {
  149. const that = this;
  150. let arr = await that.$api(`/zrGoods/${that.id}`, `POST`, {}, `integral`)
  151. if (arr.errcode == '0') {
  152. if (arr.data.brief) arr.data.brief = arr.data.brief.replace(/\<img/gi,
  153. '<img class="rich-img"');
  154. that.$set(that, `info`, arr.data)
  155. let shop = await that.$api(`/shop/${arr.data.shop}`, `GET`)
  156. if (shop.errcode == '0') {
  157. that.$set(that, `shop`, shop.data)
  158. }
  159. }
  160. },
  161. //立即兑换弹框打开
  162. buttonClick(e) {
  163. const that = this;
  164. that.$refs.popup.open();
  165. },
  166. // 计数器
  167. toCount(e) {
  168. const that = this;
  169. that.num = e;
  170. },
  171. // 立即兑换
  172. async toExchange() {
  173. const that = this;
  174. let user = that.user;
  175. if (user._id) {
  176. let obj = {
  177. shop: that.shop._id,
  178. goods: that.id,
  179. num: that.num
  180. };
  181. let arr = await that.$api(`/zrOrder/checkCanBuy`, `POST`, obj, `integral`)
  182. if (arr.errcode == '0') {
  183. if (arr.data.result == true) {
  184. uni.navigateTo({
  185. url: `/pagesIntegral/order/index?key=${arr.data.key}`
  186. })
  187. } else {
  188. uni.showToast({
  189. title: arr.data.msg,
  190. icon: 'none'
  191. })
  192. }
  193. } else {
  194. uni.showToast({
  195. title: arr.errmsg,
  196. icon: 'none'
  197. })
  198. }
  199. } else {
  200. uni.navigateTo({
  201. url: `/pages/login/index`
  202. })
  203. }
  204. },
  205. // 计算高度
  206. handleScroll(e) {
  207. const that = this;
  208. let scrollTop = e.detail.scrollTop;
  209. that.isShow = scrollTop > 500;
  210. that.topItem = '';
  211. },
  212. // 返回顶部
  213. backTop() {
  214. const that = this;
  215. that.topItem = 'top'
  216. },
  217. // 菜单展开
  218. toMenu() {
  219. const that = this;
  220. that.menu = !that.menu
  221. },
  222. //主菜单跳转
  223. toPath(e) {
  224. if (e && e.route) uni.reLaunch({
  225. url: `/${e.route}`
  226. })
  227. },
  228. }
  229. }
  230. </script>
  231. <style lang="scss">
  232. .scrollView {
  233. height: 100vh;
  234. }
  235. .main {
  236. display: flex;
  237. flex-direction: column;
  238. width: 100vw;
  239. height: 100vh;
  240. .onemain {
  241. position: relative;
  242. flex-grow: 1;
  243. background-color: var(--f1Color);
  244. .one {
  245. swiper {
  246. height: 70vw;
  247. }
  248. .list {
  249. border-radius: 5px;
  250. .image {
  251. width: 100%;
  252. height: 100%;
  253. border-radius: 5px;
  254. background-color: #fff;
  255. }
  256. }
  257. }
  258. .two {
  259. padding: 0 0 2vw 0;
  260. background-color: var(--mainColor);
  261. .two_1 {
  262. display: flex;
  263. align-items: center;
  264. border-bottom: 0.5vw solid var(--f9Color);
  265. padding: 2vw;
  266. .money_1 {
  267. color: var(--ff0Color);
  268. text {
  269. margin: 0 1vw 0 0;
  270. }
  271. text:last-child {
  272. font-size: var(--font20Szie);
  273. font-weight: bold;
  274. }
  275. }
  276. }
  277. .two_2 {
  278. font-size: var(--font18Szie);
  279. font-weight: bold;
  280. padding: 1vw 2vw;
  281. }
  282. .two_3 {
  283. font-size: var(--font16Szie);
  284. color: var(--f85Color);
  285. padding: 1vw 2vw;
  286. }
  287. .two_4 {
  288. font-size: var(--font12Size);
  289. color: var(--fcColor);
  290. padding: 1vw 2vw;
  291. text {
  292. margin: 0 2vw 0 0;
  293. }
  294. }
  295. }
  296. .thr {
  297. margin: 2vw 0 0 0;
  298. padding: 2vw;
  299. background-color: var(--mainColor);
  300. .thr_1 {
  301. display: flex;
  302. justify-content: space-between;
  303. align-items: center;
  304. .image {
  305. width: 15vw;
  306. height: 15vw;
  307. border: 0.1vw solid var(--fcColor);
  308. }
  309. .other {
  310. flex-grow: 1;
  311. margin: 0 0 0 2vw;
  312. .name {
  313. font-size: var(--font16Szie);
  314. }
  315. .other_1 {
  316. font-size: var(--font12Size);
  317. text {
  318. color: var(--fcColor);
  319. margin: 0 2vw 0 0;
  320. }
  321. }
  322. }
  323. }
  324. .thr_2 {
  325. display: flex;
  326. flex-direction: row;
  327. justify-content: space-evenly;
  328. padding: 2vw 0;
  329. color: var(--f99Color);
  330. .grade {
  331. font-size: var(--font14Size);
  332. color: var(--f85Color);
  333. text {
  334. color: var(--ff0Color);
  335. }
  336. }
  337. .btn {
  338. border: 0.1vw solid var(--fcColor);
  339. padding: 1vw 6vw;
  340. border-radius: 1vw;
  341. color: var(--f00Color);
  342. }
  343. .btn:last-child {
  344. padding: 1vw 10vw;
  345. }
  346. }
  347. }
  348. .four {
  349. margin: 2vw 0 0 0;
  350. .four_1 {
  351. background-color: var(--mainColor);
  352. padding: 2vw;
  353. .rich-img {
  354. width: 100% !important;
  355. display: block;
  356. }
  357. }
  358. }
  359. }
  360. }
  361. .scroll-view {
  362. position: absolute;
  363. top: 0;
  364. left: 0;
  365. right: 0;
  366. bottom: 0;
  367. .list-scroll-view {
  368. display: flex;
  369. flex-direction: column;
  370. }
  371. }
  372. .scrollView {
  373. height: 100vh;
  374. }
  375. .menu {
  376. position: fixed;
  377. bottom: 30vw;
  378. right: 5vw;
  379. text {
  380. font-size: 30px;
  381. background-color: #0000005f;
  382. border-radius: 90px;
  383. }
  384. }
  385. .menu_1 {
  386. position: fixed;
  387. bottom: 40vw;
  388. right: 5vw;
  389. background-color: var(--mainColor);
  390. padding: 2vw;
  391. .title {
  392. display: flex;
  393. padding: 2vw;
  394. border-bottom: 0.1vw solid var(--fcColor);
  395. .image {
  396. width: 7vw;
  397. height: 6vw;
  398. }
  399. .name {
  400. margin: 0 0 0 1vw;
  401. font-size: var(--font14Size);
  402. }
  403. }
  404. }
  405. .backTop {
  406. position: fixed;
  407. bottom: 20vw;
  408. right: 5vw;
  409. text {
  410. font-size: 30px;
  411. background-color: #0000005f;
  412. border-radius: 90px;
  413. }
  414. }
  415. .uni-tab__cart-sub-left {
  416. padding: 0 !important;
  417. }
  418. .uni-popup {
  419. z-index: 999 !important;
  420. }
  421. .content {
  422. height: 60vw;
  423. .one {
  424. display: flex;
  425. justify-content: flex-start;
  426. align-items: center;
  427. margin: 0 2vw;
  428. padding: 2vw 0;
  429. text {
  430. margin: 0 2vw 0 0;
  431. }
  432. text:last-child {
  433. margin: 0 0 0 2vw;
  434. font-size: var(--font12Size);
  435. color: var(--f85Color);
  436. }
  437. }
  438. .btn {
  439. display: flex;
  440. justify-content: space-between;
  441. position: fixed;
  442. bottom: 0;
  443. .button {
  444. width: 100vw;
  445. padding: 4vw 0;
  446. background-color: #6A5ACD;
  447. text-align: center;
  448. font-size: var(--font18Szie);
  449. color: var(--mainColor);
  450. }
  451. }
  452. }
  453. </style>