product.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708
  1. <template>
  2. <view class="container">
  3. <!-- 轮播图 -->
  4. <top-swiper :imgList="imgList"></top-swiper>
  5. <!-- 标题 -->
  6. <product-content :goodsObjact="goodsObjact"></product-content>
  7. <!-- 规格信息 -->
  8. <fresh-detail @click='specOPne' :specSelected="specSelected"></fresh-detail>
  9. <!-- 图文详情 -->
  10. <content-text :description="description"></content-text>
  11. <!-- 底部高度撑开 -->
  12. <view class="contentBottomHeight"></view>
  13. <!-- 底部操作菜单 -->
  14. <product-bottom :systemStore='system_store' @buy="buy" :goodsObjact="goodsObjact" :goodsid="goodsid"
  15. @specOPne="specOPne"></product-bottom>
  16. <!-- 规格-模态层弹窗 -->
  17. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
  18. <!-- 遮罩层 -->
  19. <view class="mask"></view>
  20. <view class="layer attr-content" @click.stop="stopPrevent">
  21. <image class="close" src="../../static/icon/goodsExit.png" mode="aspectFit" @click="toggleSpec">
  22. </image>
  23. <view class="a-t">
  24. <image @click="showImg(true)" :src="actionGoodsType.actionImage"></image>
  25. <view class="right">
  26. <!-- <text class="name">{{ goodsObjact.store_name }}</text> -->
  27. <text class="price">
  28. <text class="font-size-base margin-r-10">
  29. ¥
  30. </text>
  31. <text>
  32. {{ actionGoodsType.actionPrice * goodsNumber }}
  33. </text>
  34. <text class="font-color-gray font-size-sm margin-l-10">
  35. 库存:{{actionGoodsType.goodsStore}}
  36. </text>
  37. </text>
  38. <!-- <view class="flex">
  39. <view class="type">
  40. 服务费:{{actionGoodsType.day_deducted}}
  41. </view>
  42. <view class="type">
  43. 服务天数:{{actionGoodsType.deal_price_num}}
  44. </view>
  45. </view> -->
  46. </view>
  47. </view>
  48. <view v-for="(item, index) in specList" :key="index" class="attr-list">
  49. <text>{{ item.attr_name }}</text>
  50. <view class="item-list flex">
  51. <text v-for="(childItem, childIndex) in item.attr_value" :key="childIndex" class="tit"
  52. :class="{ selected: childItem.check }" @click="selectSpec(childItem, item, index)">
  53. {{ childItem.attr }}
  54. </text>
  55. </view>
  56. </view>
  57. <!-- <view class="attr-list">
  58. <text>购买数量</text>
  59. <view class="item-list">
  60. <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
  61. </view>
  62. </view> -->
  63. <button class="btn" @click.stop="buy" v-show="buys_show">完成</button>
  64. <button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button>
  65. </view>
  66. </view>
  67. </view>
  68. </template>
  69. <script>
  70. import {
  71. goodsDetail,
  72. cartAdd
  73. } from '@/api/product.js';
  74. import {
  75. mapState
  76. } from 'vuex';
  77. import store from '@/store/index.js';
  78. import {
  79. saveUrl
  80. } from '@/utils/loginUtils.js';
  81. // #ifdef H5
  82. import {
  83. weixindata
  84. } from '@/utils/wxAuthorized';
  85. // #endif
  86. // 头部轮播图
  87. import topSwiper from './common/topSwiper.vue';
  88. // 标题
  89. import productContent from './common/productContent.vue';
  90. // 规格信息
  91. import freshDetail from './common/freshDetail.vue';
  92. // 图文详情
  93. import contentText from './common/contentText.vue';
  94. // 底部按钮
  95. import productBottom from './common/productBottom.vue';
  96. export default {
  97. components: {
  98. topSwiper,
  99. productContent,
  100. freshDetail,
  101. contentText,
  102. productBottom,
  103. },
  104. data() {
  105. return {
  106. specList: [],
  107. buys_show: true,
  108. buys_shows: false,
  109. specSelected: [], //选中的分类
  110. specClass: 'none', //显示隐藏弹窗
  111. many: 1, //1是单规格 2是多规格
  112. reply: '', //评论
  113. list: '', //商品详情的数据
  114. type: 1, //默认支付方式add为
  115. goodsType: 0,
  116. goodsNumber: 1, //购买数量
  117. goodsid: '', //商品id
  118. description: '', //商品描述
  119. goodsObjact: {
  120. percent: 1
  121. }, //保存商品数据
  122. //图片循环
  123. imgList: [],
  124. // 对比对象
  125. good_list: '', //猜你喜欢列表
  126. goodsNumberMax: 0, //最大可购买数量
  127. userInfo: '',
  128. // 选中商品的分类
  129. actionGoodsType: {
  130. goodsStore: 0, //选中库存
  131. actionImage: '', //默认选中图片
  132. actionPrice: 0, //默认选中商品价格
  133. day_deducted: 0, //选中商品的服务费用
  134. deal_price_num: 0, //选中商品的扣款天数
  135. uniqueId: '', //选中规格商品id
  136. },
  137. system_store: {}, //商家信息
  138. onShopId: -1, //默认-1为不存在商家id
  139. };
  140. },
  141. async onLoad(options) {
  142. let obj = this;
  143. obj.userInfo = uni.getStorageSync('userInfo');
  144. //保存商品id
  145. this.goodsid = options.id;
  146. this.goodsType = options.type;
  147. // 判断是否要读取商家id
  148. if (options.shopId) {
  149. console.log(options.shopId, '商店');
  150. this.onShopId = +options.shopId;
  151. }
  152. // 判断有无人邀请
  153. if (options.spread) {
  154. // 存储邀请人
  155. uni.setStorageSync('spread', options.spread);
  156. }
  157. saveUrl();
  158. this.goodsDetail();
  159. // 注册邀请信息
  160. // #ifdef H5
  161. let bool = uni.getStorageSync('weichatBrowser') || '';
  162. if (bool) {
  163. weixindata();
  164. }
  165. // #endif
  166. },
  167. computed: {
  168. ...mapState(['weichatObj', 'baseURL', 'urlFile']),
  169. ...mapState('shop', ['shopDetail'])
  170. },
  171. // 分享
  172. onShareAppMessage(options) {
  173. // 设置菜单中的转发按钮触发转发事件时的转发内容
  174. let pages = getCurrentPages(); //获取加载的页面
  175. let currentPage = pages[pages.length - 1]; //获取当前页面的对象
  176. let url = currentPage.route; //当前页面url
  177. let item = currentPage.options; //如果要获取url中所带的参数可以查看options
  178. let shareObj = {
  179. title: this.goodsObjact.store_name + ' 价格:' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
  180. path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面,必须是以‘/’开头的完整路径
  181. imageUrl: this.goodsObjact.image,
  182. success: function(res) {
  183. // 转发成功之后的回调
  184. if (res.errMsg == 'shareAppMessage:ok') {}
  185. },
  186. fail: function() {
  187. // 转发失败之后的回调
  188. if (res.errMsg == 'shareAppMessage:fail cancel') {
  189. // 用户取消转发
  190. } else if (res.errMsg == 'shareAppMessage:fail') {
  191. // 转发失败,其中 detail message 为详细失败信息
  192. }
  193. }
  194. };
  195. return shareObj;
  196. },
  197. methods: {
  198. showImg(bool) {
  199. uni.navigateTo({
  200. url: './showImg?imgs=' + JSON.stringify([this.actionGoodsType.actionImage]) + '&current=' +0,
  201. animationType: "fade-in"
  202. })
  203. },
  204. //选择规格
  205. selectSpec(item, arr, ind) {
  206. arr.attr_value.forEach(function(e) {
  207. e.check = false;
  208. });
  209. item.check = true;
  210. let obj = this;
  211. obj.specSelected[ind] = item.attr;
  212. // 重置触发修改事件
  213. obj.specSelected = obj.specSelected.map((e) => {
  214. return e
  215. });
  216. let str = obj.specSelected.join(',');
  217. let goodItemAction = obj.actionGoodsType
  218. // 获取当前选中的对象
  219. if (obj.productValue[str]) {
  220. obj.buys_show = true;
  221. obj.buys_shows = false;
  222. goodItemAction.actionPrice = obj.productValue[str].price;
  223. goodItemAction.goodsNumberMax = obj.productValue[str].stock;
  224. goodItemAction.actionImage = obj.productValue[str].image;
  225. goodItemAction.uniqueId = obj.productValue[str].unique;
  226. goodItemAction.goodsStore = obj.productValue[str].stock;
  227. console.log(goodItemAction.goodsStore, 'kc')
  228. goodItemAction.day_deducted = obj.productValue[str].day_deducted; //每天扣款
  229. if (+obj.productValue[str].day_deducted) {
  230. goodItemAction.deal_price_num = Math.ceil((obj.productValue[str].deal_price - obj.productValue[str]
  231. .price) / obj.productValue[str].day_deducted); //每天扣款
  232. } else {
  233. goodItemAction.deal_price_num = 0
  234. }
  235. // 扣款天数
  236. if(obj.productValue[str].cycle) {
  237. goodItemAction.cycle = obj.productValue[str].cycle;
  238. goodItemAction.cycle_day = obj.productValue[str].cycle_day;
  239. }
  240. } else {
  241. (obj.buys_show = false), (obj.buys_shows = true);
  242. }
  243. if (goodItemAction.goodsStore == 0) {
  244. console.log('这里');
  245. obj.buys_show = false;
  246. obj.buys_shows = true;
  247. }
  248. // obj.specSelected[ind] = item.attr;
  249. },
  250. // 打開彈窗
  251. specOPne(type = 1) {
  252. let obj = this;
  253. obj.specClass = 'show';
  254. obj.type = type;
  255. },
  256. //规格弹窗开关
  257. toggleSpec(str) {
  258. if (this.specClass === 'show') {
  259. this.specClass = 'hide';
  260. setTimeout(() => {
  261. this.specClass = 'none';
  262. }, 250);
  263. } else if (this.specClass === 'none') {
  264. this.specClass = 'show';
  265. }
  266. // 保存当前购买类型
  267. this.type = str;
  268. },
  269. //领取优惠券
  270. Getcoupon() {
  271. uni.navigateTo({
  272. url: '/pages/coupon/getcoupon'
  273. });
  274. },
  275. //详情页
  276. navToDetailPage(item) {
  277. let id = item.id;
  278. uni.navigateTo({
  279. url: '/pages/product/product?id=' + id
  280. });
  281. },
  282. // 跳转页面
  283. navTo(url) {
  284. uni.navigateTo({
  285. url: '/pages/product/reply?id=' + this.goodsid
  286. });
  287. },
  288. // 获取商品详情
  289. goodsDetail() {
  290. let obj = this;
  291. // 获取普通商品信息
  292. let data = {}
  293. // 判断是否需要读取非默认商家id
  294. if (obj.onShopId != -1) {
  295. data.store_id = obj.onShopId;
  296. } else {
  297. if(obj.userInfo.store_id) {
  298. data.store_id = obj.userInfo.store_id
  299. }else {
  300. data.store_id = obj.shopDetail.id;
  301. }
  302. }
  303. goodsDetail(data, this.goodsid).then(function({
  304. data
  305. }) {
  306. obj.list = data;
  307. //保存猜你喜欢列表
  308. obj.good_list = data.good_list;
  309. //保存评论列表
  310. obj.reply = data.reply;
  311. let goods = data.storeInfo;
  312. obj.goodsObjact = goods;
  313. //保存商家信息
  314. obj.system_store = data.system_store;
  315. if (obj.goodsObjact.description != null) {
  316. obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
  317. } //小程序商品详情图超出屏幕问题
  318. obj.imgList = goods.slider_image; //保存轮播图
  319. obj.specList = data.productAttr; //保存分类列表
  320. let goodItemAction = obj.actionGoodsType
  321. if (Array.isArray(data.productValue) != true) {
  322. obj.many = 2; //多规格
  323. obj.specList = data.productAttr; //保存产品属性
  324. obj.productValue = data.productValue; //保存属性值
  325. obj.specSelected = []; //初始化默认选择对象
  326. for (let i = 0; i < obj.specList.length; i++) {
  327. // 设置默认数据
  328. let attrValue = obj.specList[i].attr_value[0];
  329. attrValue.check = true;
  330. obj.specSelected.push(attrValue.attr);
  331. }
  332. let str = obj.specSelected.join(',');
  333. console.log(str, 'str');
  334. // 设置默认值
  335. goodItemAction.actionPrice = obj.productValue[str].price;
  336. goodItemAction.goodsNumberMax = obj.productValue[str].stock;
  337. goodItemAction.actionImage = obj.productValue[str].image;
  338. goodItemAction.uniqueId = obj.productValue[str].unique;
  339. goodItemAction.goodsStore = obj.productValue[str].stock;
  340. goodItemAction.day_deducted = obj.productValue[str].day_deducted; //每天扣款
  341. goodItemAction.deal_price_num = Math.ceil((obj.productValue[str].deal_price - obj
  342. .productValue[str].price) / obj.productValue[str].day_deducted); //每天扣款
  343. // 扣款天数
  344. goodItemAction.cycle = obj.productValue[str].cycle;
  345. goodItemAction.cycle_day = obj.productValue[str].cycle_day;
  346. } else {
  347. obj.many = 1; //单规格
  348. obj.productValue = data.productValue; //保存分类查询数据
  349. goodItemAction.actionPrice = goods.price; //保存默认选中商品价格
  350. goodItemAction.actionImage = goods.image_base; //保存默认选中商品图片
  351. goodItemAction.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
  352. }
  353. obj.shopId = data.mer_id; //保存商店id
  354. });
  355. },
  356. // 立即购买
  357. buy() {
  358. let obj = this;
  359. // if (obj.userInfo.is_real == 0) {
  360. // uni.showModal({
  361. // title: '提示',
  362. // content: '请先实名认证才可购买',
  363. // showCancel: false,
  364. // success: res => {
  365. // if (res.confirm) {
  366. // uni.navigateTo({
  367. // url: '/pages/user/realName/realNameAuthentication'
  368. // })
  369. // }
  370. // },
  371. // });
  372. // return
  373. // }
  374. // 创建传值对象
  375. let data = {
  376. cartNum: obj.goodsNumber, //商品数量
  377. productId: obj.goodsid, //商品编号
  378. uniqueId: obj.actionGoodsType.uniqueId,
  379. is_car: obj.goodsObjact.is_car, //是否电动车
  380. day_deducted: obj.actionGoodsType.day_deducted,
  381. day: obj.actionGoodsType.deal_price_num,
  382. is_battery: obj.goodsObjact.is_battery,
  383. is_booster: obj.goodsObjact.is_booster,
  384. cycle: obj.actionGoodsType.cycle,
  385. cycle_day: obj.actionGoodsType.cycle_day,
  386. };
  387. // 判断是否需要读取非默认商家id
  388. if (obj.onShopId != -1) {
  389. data.store_id = obj.onShopId;
  390. } else {
  391. data.store_id = obj.shopDetail.id;
  392. }
  393. // 判断是否加入购物车
  394. if (obj.type == 2) {
  395. data.new = 0;
  396. } else {
  397. data.new = 1;
  398. }
  399. cartAdd(data)
  400. .then(function(e) {
  401. let da = e.data;
  402. // 不是购物车跳转支付页面
  403. if (obj.type == 1) {
  404. // 跳转到支付页
  405. let url;
  406. if(obj.goodsObjact.is_battery == 1 || obj.goodsObjact.is_booster == 1) {
  407. url = '/pages/order/createOrderT?id=' + da.cartId + '&is_battery=' + obj.goodsObjact.is_battery + '&is_booster=' + obj.goodsObjact.is_booster
  408. } else {
  409. url = '/pages/order/createOrder?id=' + da.cartId
  410. }
  411. // 判断是否指定商店购买商品
  412. if (obj.onShopId != -1) {
  413. url += '&shopId=' + obj.onShopId
  414. }
  415. uni.navigateTo({
  416. url: url
  417. });
  418. }
  419. // 购物车不跳转购物车页面
  420. if (obj.type == 2) {
  421. uni.showToast({
  422. title: '成功加入购物车',
  423. type: 'top',
  424. duration: 2000,
  425. icon: 'none'
  426. });
  427. // obj.goodsDetail();
  428. }
  429. obj.toggleSpec();
  430. })
  431. .catch(e => {
  432. console.log(e);
  433. });
  434. },
  435. // 阻止触发上级事件
  436. stopPrevent() {}
  437. }
  438. };
  439. </script>
  440. <style lang="scss">
  441. .alertImgBox {
  442. display: flex;
  443. justify-content: center;
  444. align-items: center;
  445. width: 100%;
  446. .alertImg {
  447. width: 730rpx;
  448. }
  449. }
  450. /* 弹出层 */
  451. .popup {
  452. position: fixed;
  453. left: 0;
  454. top: 0;
  455. right: 0;
  456. bottom: 0;
  457. z-index: 99;
  458. &.show {
  459. display: block;
  460. .mask {
  461. animation: showPopup 0.2s linear both;
  462. }
  463. .layer {
  464. animation: showLayer 0.2s linear both;
  465. }
  466. }
  467. &.hide {
  468. .mask {
  469. animation: hidePopup 0.2s linear both;
  470. }
  471. .layer {
  472. animation: hideLayer 0.2s linear both;
  473. }
  474. }
  475. &.none {
  476. display: none;
  477. }
  478. .mask {
  479. position: fixed;
  480. top: 0;
  481. width: 100%;
  482. height: 100%;
  483. z-index: 1;
  484. background-color: rgba(0, 0, 0, 0.4);
  485. }
  486. .layer {
  487. position: fixed;
  488. z-index: 99;
  489. bottom: 0;
  490. width: 100%;
  491. min-height: 35vh;
  492. border-radius: 10rpx 10rpx 0 0;
  493. background-color: #fff;
  494. .btn {
  495. height: 66rpx;
  496. line-height: 66rpx;
  497. border-radius: 100rpx;
  498. background: $uni-color-primary;
  499. font-size: $font-base + 2rpx;
  500. color: #fff;
  501. margin: 30rpx auto 20rpx;
  502. }
  503. }
  504. @keyframes showPopup {
  505. 0% {
  506. opacity: 0;
  507. }
  508. 100% {
  509. opacity: 1;
  510. }
  511. }
  512. @keyframes hidePopup {
  513. 0% {
  514. opacity: 1;
  515. }
  516. 100% {
  517. opacity: 0;
  518. }
  519. }
  520. @keyframes showLayer {
  521. 0% {
  522. transform: translateY(120%);
  523. }
  524. 100% {
  525. transform: translateY(0%);
  526. }
  527. }
  528. @keyframes hideLayer {
  529. 0% {
  530. transform: translateY(0);
  531. }
  532. 100% {
  533. transform: translateY(120%);
  534. }
  535. }
  536. }
  537. /* 规格选择弹窗 */
  538. .attr-content {
  539. padding: 50rpx;
  540. position: relative;
  541. .close {
  542. width: 36rpx;
  543. height: 36rpx;
  544. position: absolute;
  545. top: 50rpx;
  546. right: 50rpx;
  547. }
  548. .a-t {
  549. display: flex;
  550. image {
  551. border: 1px solid $page-color-light;
  552. width: 170rpx;
  553. height: 170rpx;
  554. flex-shrink: 0;
  555. border-radius: 8rpx;
  556. }
  557. .right {
  558. display: flex;
  559. flex-direction: column;
  560. padding-left: 24rpx;
  561. font-size: $font-sm + 2rpx;
  562. color: $font-color-base;
  563. line-height: 42rpx;
  564. width: 75%;
  565. .price {
  566. font-size: 44rpx;
  567. color: $uni-color-primary;
  568. margin: 10rpx 0rpx;
  569. flex-grow: 1;
  570. width: 100%;
  571. }
  572. .name {
  573. font-size: 32rpx;
  574. color: $font-color-dark;
  575. height: 50rpx;
  576. overflow: hidden;
  577. text-overflow: ellipsis;
  578. white-space: nowrap;
  579. display: block;
  580. }
  581. .selected-text {
  582. margin-right: 10rpx;
  583. }
  584. }
  585. }
  586. .attr-list {
  587. display: flex;
  588. flex-direction: column;
  589. font-size: $font-base + 2rpx;
  590. color: $font-color-base;
  591. padding-top: 30rpx;
  592. }
  593. .item-list {
  594. padding: 20rpx 0 0;
  595. display: flex;
  596. flex-wrap: wrap;
  597. justify-content: flex-start;
  598. .tit {
  599. min-width: 200rpx;
  600. display: flex;
  601. align-items: center;
  602. justify-content: center;
  603. background: #eee;
  604. margin-bottom: 20rpx;
  605. margin-right: 16rpx;
  606. border-radius: 5rpx;
  607. height: 60rpx;
  608. padding: 0 20rpx;
  609. font-size: $font-base;
  610. color: $font-color-dark;
  611. }
  612. .selected {
  613. background: #E1F4EA;
  614. color: $color-green;
  615. border: 1px solid $color-green;
  616. }
  617. }
  618. }
  619. //默认商品底部高度
  620. .goodsBottom {
  621. height: 160rpx;
  622. }
  623. page {
  624. background: #f0f0f0;
  625. }
  626. //秒杀、拼团底部高度
  627. .contentBottomHeight {
  628. height: 110rpx;
  629. }
  630. //默认商品底部高度
  631. .goodsBottom {
  632. height: 160rpx;
  633. }
  634. /deep/ .iconenter {
  635. font-size: $font-base + 2rpx;
  636. color: #888;
  637. }
  638. /deep/ .con_image {
  639. width: 130rpx;
  640. height: 130rpx;
  641. display: inline-block;
  642. padding: 15rpx;
  643. image {
  644. width: 100%;
  645. height: 100%;
  646. }
  647. }
  648. /* 商品详情中限制图片大小 */
  649. /deep/ .rich-img {
  650. width: 100% !important;
  651. height: auto;
  652. }
  653. </style>