product.vue 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099
  1. <template>
  2. <view class="container">
  3. <!-- 轮播图 -->
  4. <top-swiper :imgList="imgList" :video="video"></top-swiper>
  5. <!-- 标题 -->
  6. <product-content :goodsObjact="goodsObjact"></product-content>
  7. <view class="ptsf_box" @click="shareLink()">
  8. <image class="ptsf_img" src="../../static/img/sharejt.png" mode=""></image>
  9. <view class="ptfx_tit">分享</view>
  10. </view>
  11. <!-- 秒杀倒计时 -->
  12. <!-- <view class="sckill-top" v-if="isSckill">
  13. <view class="bg"><image src="https://zccy.liuniu946.com/static/img/base-sckill.png" mode=""></image></view>
  14. <view class="top-left">
  15. <view class="left-top">限时秒杀价</view>
  16. <view class="left-btm">
  17. <text class="now-pri">{{ goodsObjact.price }}</text>
  18. <text class="old-pri">¥{{ goodsObjact.ot_price }}</text>
  19. </view>
  20. </view>
  21. <view class="top-right">
  22. <view class="right-top">距离本场结束还剩</view>
  23. <uni-countdown
  24. class="timeBox"
  25. color="#901b21"
  26. background-color="#fff"
  27. splitor-color="#fff"
  28. :show-day="true"
  29. :hour="seckillObj.stopTimeH"
  30. :minute="seckillObj.stopTimeM"
  31. :second="seckillObj.stopTimeS"
  32. ></uni-countdown>
  33. </view>
  34. </view> -->
  35. <!-- 拼货时间及优惠 -->
  36. <!-- <discounts @clickCoupon="Getcoupon" :Info="goodsObjact.store_info" :showCoupon="true"></discounts> -->
  37. <!-- 猜你喜欢 -->
  38. <!-- <guess-like @Addcar='Addcar' @clickNavTo='navToDetailPage' :goodList = 'good_list||[]'></guess-like> -->
  39. <!-- 评价 -->
  40. <estimate @navTo="navTo('/pages/product/reply?id=' + goodsid)" v-if="reply" :reply="reply" :list="list">
  41. </estimate>
  42. <!-- 规格信息 -->
  43. <fresh-detail :goodsObjact="goodsObjact"></fresh-detail>
  44. <!-- 图文详情 -->
  45. <content-text :description="description"></content-text>
  46. <!-- 底部高度撑开 -->
  47. <view class="contentBottomHeight"></view>
  48. <!-- 底部操作菜单 -->
  49. <product-bottom @buy="buy" :goodsObjact="goodsObjact" :goodsid="goodsid" @specOPne="specOPne"></product-bottom>
  50. <!-- 规格-模态层弹窗 -->
  51. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
  52. <!-- 遮罩层 -->
  53. <view class="mask"></view>
  54. <view class="layer attr-content" @click.stop="stopPrevent">
  55. <view class="a-t">
  56. <image :src="actionImage"></image>
  57. <view class="right">
  58. <text class="name">{{ goodsObjact.store_name }}</text>
  59. <text class="price">¥{{ actionPrice * goodsNumber }}</text>
  60. <text class="stock">库存:{{ goodsStore }}件</text>
  61. <view class="selected" v-if="specList != ''">
  62. 已选:
  63. <text class="selected-text" v-for="(sItem, sIndex) in specSelected"
  64. :key="sIndex">{{ sItem }}</text>
  65. </view>
  66. </view>
  67. </view>
  68. <view v-for="(item, index) in specList" :key="index" class="attr-list">
  69. <text>{{ item.attr_name }}</text>
  70. <view class="item-list">
  71. <text v-for="(childItem, childIndex) in item.attr_value" :key="childIndex" class="tit"
  72. :class="{ selected: childItem.check }" @click="selectSpec(childItem, item, index)">
  73. {{ childItem.attr }}
  74. </text>
  75. </view>
  76. </view>
  77. <!-- <view class="attr-list">
  78. <text>购买数量</text>
  79. <view class="item-list">
  80. <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
  81. </view>
  82. </view> -->
  83. <button class="btn" @click.stop="buy" v-show="buys_show">完成</button>
  84. <button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button>
  85. </view>
  86. </view>
  87. <uni-popup ref="popupshare" type="center">
  88. <view class="share-box">
  89. <image :src="shareImage" mode="" class="box-img" @longpress="saveImg()"></image>
  90. </view>
  91. </uni-popup>
  92. <view v-if="shareShow" class="Shraremask" @click="cancel">
  93. <view class="mask-content">
  94. <scroll-view class="view-content" scroll-y>
  95. <view class="share-header">分享到</view>
  96. <view class="share-list">
  97. <view class="share-item">
  98. <button class="wechat-box" open-type="share">
  99. <image class="itemImage" src="../../static/icon/share1.png" mode=""></image>
  100. <text class="itemText">微信好友</text>
  101. </button>
  102. <view class="wechat-box" @click="shareToFriend()">
  103. <image class="itemImage" src="../../static/icon/share4.png" mode=""></image>
  104. <text class="itemText">生成海报</text>
  105. </view>
  106. </view>
  107. </view>
  108. </scroll-view>
  109. <view class="bottomButtom b-t" @click="cancel">取消</view>
  110. </view>
  111. </view>
  112. </view>
  113. </template>
  114. <script>
  115. import {
  116. goodsDetail,
  117. cartAdd,
  118. seckillGoods,
  119. poster
  120. } from '@/api/product.js';
  121. import {
  122. mapState
  123. } from 'vuex';
  124. import store from '@/store/index.js';
  125. import {
  126. timeComputed
  127. } from '@/utils/rocessor.js';
  128. import {
  129. saveUrl
  130. } from '@/utils/loginUtils.js';
  131. // #ifdef H5
  132. import {
  133. weixindata
  134. } from '@/utils/wxAuthorized';
  135. // #endif
  136. // 头部轮播图
  137. import topSwiper from './common/topSwiper.vue';
  138. // 标题
  139. import productContent from './common/productContent.vue';
  140. // 到货时间及优惠
  141. import discounts from './common/discounts.vue';
  142. // 规格信息
  143. import freshDetail from './common/freshDetail.vue';
  144. // 图文详情
  145. import contentText from './common/contentText.vue';
  146. // 底部按钮
  147. import productBottom from './common/productBottom.vue';
  148. // 猜你喜欢
  149. import guessLike from './common/guessLike.vue';
  150. // 评价
  151. import estimate from './common/estimate.vue';
  152. export default {
  153. components: {
  154. guessLike,
  155. topSwiper,
  156. productContent,
  157. discounts,
  158. freshDetail,
  159. contentText,
  160. productBottom,
  161. estimate
  162. },
  163. data() {
  164. return {
  165. video: '',
  166. shareShow: false,
  167. shareImage: '', // 获取的分享海报
  168. isSckill: false,
  169. goodsStore: 0, //选中库存
  170. specList: [],
  171. buys_show: true,
  172. buys_shows: false,
  173. specSelected: [], //选中的分类
  174. specClass: 'none', //显示隐藏弹窗
  175. many: 1, //1是单规格 2是多规格
  176. reply: '', //评论
  177. option: '', //保存传值
  178. opt: '', //保存小程序传值
  179. list: '', //商品详情的数据
  180. type: 1, //默认支付方式add为
  181. goodsType: 0,
  182. goodsNumber: 1, //购买数量
  183. goodsid: '', //商品id
  184. description: '', //商品描述
  185. goodsObjact: {
  186. percent: 1
  187. }, //保存商品数据
  188. //图片循环
  189. imgList: [],
  190. // 对比对象
  191. actionPrice: 0, //默认选中商品价格
  192. actionImage: '', //默认选中图片
  193. good_list: '', //猜你喜欢列表
  194. goodsNumberMax: 0, //最大可购买数量
  195. // 倒计时数据保存
  196. seckillObj: {
  197. stopTime: 0, //结束时间
  198. stop: false, //是否结束
  199. stopTimeH: 0, //小时
  200. stopTimeM: 0, //分钟
  201. stopTimeS: 0, //秒钟
  202. stopTimeD: 0, //天
  203. upTime: 0 //更新组件内部组件用
  204. },
  205. // 拼团数据保存
  206. pink: {
  207. id: '', //拼团编号
  208. uid: '', //用户编号
  209. people: '', //拼团人数
  210. price: '', //拼团价格
  211. stop_time: '', //拼团结束时间
  212. nickname: '', //团长昵称
  213. avatar: '', //团长头像
  214. count: '', //拼团剩余人数
  215. h: '', //时
  216. i: '', //分
  217. s: '' //秒
  218. },
  219. userInfo: ''
  220. };
  221. },
  222. filters: {
  223. parseIntTo(percent) {
  224. percent = +percent * 100;
  225. if (percent % 1 === 0) {
  226. return percent;
  227. } else {
  228. percent = percent.toFixed(1);
  229. return percent;
  230. }
  231. }
  232. },
  233. async onLoad(options) {
  234. let obj = this;
  235. obj.userInfo = uni.getStorageSync('userInfo');
  236. if (options.scene) {
  237. if (typeof options.scene == 'string') {
  238. let scene = ('{' + options.scene + '}')
  239. .replace('qr%26', '')
  240. .replace(/%3D/g, ':')
  241. .replace(/%26/g, ',')
  242. .replace('pid', '"pid"')
  243. .replace('type', '"type"')
  244. .replace('id', '"id"')
  245. .replace('sid', '"sid"');
  246. let opt = JSON.parse(scene);
  247. this.opt = opt;
  248. // 保存拼团订单id
  249. this.goodsid = opt.id;
  250. if (opt.pid) {
  251. // 存储邀请人
  252. // this.spread = opt.pid;
  253. uni.setStorageSync('spread', opt.pid);
  254. }
  255. if (opt.type) {
  256. this.goodsType = opt.type;
  257. }
  258. }
  259. } else {
  260. console.log(options.id);
  261. //保存商品id
  262. this.goodsid = options.id;
  263. if (options.type) {
  264. this.goodsType = options.type;
  265. }
  266. }
  267. if (options.type == 1) {
  268. obj.isSckill = true;
  269. }
  270. // 判断有无人邀请
  271. if (options.spread) {
  272. // 存储邀请人
  273. uni.setStorageSync('spread', options.spread);
  274. }
  275. saveUrl();
  276. this.goodsDetail();
  277. // 注册邀请信息
  278. // #ifdef H5
  279. let bool = uni.getStorageSync('weichatBrowser') || '';
  280. if (bool) {
  281. weixindata();
  282. }
  283. // #endif
  284. },
  285. computed: {
  286. ...mapState(['weichatObj', 'baseURL', 'urlFile'])
  287. },
  288. // 分享
  289. onShareAppMessage(options) {
  290. // 设置菜单中的转发按钮触发转发事件时的转发内容
  291. let pages = getCurrentPages(); //获取加载的页面
  292. let currentPage = pages[pages.length - 1]; //获取当前页面的对象
  293. let url = currentPage.route; //当前页面url
  294. let item = currentPage.options; //如果要获取url中所带的参数可以查看options
  295. let shareObj = {
  296. title: this.goodsObjact.store_name + ' 价格:' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
  297. path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面,必须是以‘/’开头的完整路径
  298. imageUrl: this.goodsObjact.image,
  299. success: function(res) {
  300. // 转发成功之后的回调
  301. if (res.errMsg == 'shareAppMessage:ok') {}
  302. },
  303. fail: function() {
  304. // 转发失败之后的回调
  305. if (res.errMsg == 'shareAppMessage:fail cancel') {
  306. // 用户取消转发
  307. } else if (res.errMsg == 'shareAppMessage:fail') {
  308. // 转发失败,其中 detail message 为详细失败信息
  309. }
  310. }
  311. };
  312. return shareObj;
  313. },
  314. methods: {
  315. //选择规格
  316. selectSpec(item, arr, ind) {
  317. arr.attr_value.forEach(function(e) {
  318. e.check = false;
  319. });
  320. item.check = true;
  321. let obj = this;
  322. obj.specSelected[ind] = item.attr;
  323. let str = obj.specSelected.join(',');
  324. // 获取当前选中的对象
  325. if (obj.productValue[str]) {
  326. obj.buys_show = true;
  327. obj.buys_shows = false;
  328. obj.actionPrice = obj.productValue[str].price;
  329. obj.goodsNumberMax = obj.productValue[str].stock;
  330. obj.actionImage = obj.productValue[str].image;
  331. obj.uniqueId = obj.productValue[str].unique;
  332. obj.goodsStore = obj.productValue[str].stock;
  333. } else {
  334. (obj.buys_show = false), (obj.buys_shows = true);
  335. }
  336. if (obj.goodsStore == 0) {
  337. obj.buys_show = false;
  338. obj.buys_shows = true;
  339. }
  340. obj.specSelected[ind] = item.attr;
  341. },
  342. // 打開彈窗
  343. specOPne(type = 1) {
  344. let obj = this;
  345. obj.specClass = 'show';
  346. obj.type = type;
  347. },
  348. //规格弹窗开关
  349. toggleSpec(str) {
  350. if (this.specClass === 'show') {
  351. this.specClass = 'hide';
  352. setTimeout(() => {
  353. this.specClass = 'none';
  354. }, 250);
  355. } else if (this.specClass === 'none') {
  356. this.specClass = 'show';
  357. }
  358. // 保存当前购买类型
  359. this.type = str;
  360. },
  361. //领取优惠券
  362. Getcoupon() {
  363. uni.navigateTo({
  364. url: '/pages/coupon/getcoupon'
  365. });
  366. },
  367. //详情页
  368. navToDetailPage(item) {
  369. let id = item.id;
  370. uni.navigateTo({
  371. url: '/pages/product/product?id=' + id
  372. });
  373. },
  374. shareToFriend() {
  375. let obj = this;
  376. uni.showLoading({
  377. title: 'Loading...',
  378. mask: true
  379. });
  380. // #ifdef H5
  381. let fromname = 'wechat';
  382. // #endif
  383. // #ifdef MP
  384. let fromname = 'routine';
  385. // #endif
  386. console.log(obj.goodsid, 'id');
  387. poster({
  388. productId: obj.goodsid,
  389. from: fromname
  390. })
  391. .then(({
  392. data
  393. }) => {
  394. obj.shareImage = data.url;
  395. console.log(obj.shareImage, '123456');
  396. uni.hideLoading();
  397. this.$refs.popupshare.open();
  398. })
  399. .catch(e => {
  400. uni.hideLoading();
  401. });
  402. },
  403. // 跳转页面
  404. navTo(url) {
  405. uni.navigateTo({
  406. url: '/pages/product/reply?id=' + this.goodsid
  407. });
  408. },
  409. //加入购物车
  410. Addcar(item) {
  411. let obj = this;
  412. cartAdd({
  413. cartNum: '1', //商品数量
  414. uniqueId: '', //商品标签
  415. new: 0, //商品是否新增加到购物车1为不加入0为加入
  416. mer_id: '',
  417. productId: item.id //商品编号
  418. })
  419. .then(function(e) {
  420. uni.showToast({
  421. title: '成功加入购物车',
  422. type: 'top',
  423. duration: 500,
  424. icon: 'none'
  425. });
  426. obj.goodsDetail();
  427. })
  428. .catch(e => {
  429. console.log(e);
  430. });
  431. },
  432. goodsDetail() {
  433. let obj = this;
  434. // 获取普通商品信息
  435. if (obj.goodsType == 0) {
  436. goodsDetail({}, this.goodsid).then(function({
  437. data
  438. }) {
  439. obj.list = data;
  440. obj.good_list = data.good_list; //保存猜你喜欢列表
  441. obj.reply = data.reply; //保存评论列表
  442. let goods = data.storeInfo;
  443. obj.goodsObjact = goods;
  444. console.log(goods, '123456789');
  445. if (obj.goodsObjact.description != null) {
  446. obj.description = obj.goodsObjact.description.replace(/\<img/gi,
  447. '<img class="rich-img"');
  448. } //小程序商品详情图超出屏幕问题
  449. obj.imgList = goods.slider_image; //保存轮播图
  450. if (goods.video_link) {
  451. obj.video = goods.video_link
  452. // obj.imgList = obj.imgList.unshift(goods.video_link)
  453. }
  454. obj.specList = data.productAttr; //保存分类列表
  455. if (Array.isArray(data.productValue) != true) {
  456. obj.many = 2;
  457. obj.specList = data.productAttr; //保存产品属性
  458. obj.productValue = data.productValue; //保存属性值
  459. obj.specSelected = []; //初始化默认选择对象
  460. for (let i = 0; i < obj.specList.length; i++) {
  461. // 设置默认数据
  462. let attrValue = obj.specList[i].attr_value[0];
  463. attrValue.check = true;
  464. obj.specSelected.push(attrValue.attr);
  465. }
  466. let str = obj.specSelected.join(',');
  467. console.log(str, 'str');
  468. // 设置默认值
  469. obj.actionPrice = obj.productValue[str].price;
  470. obj.goodsNumberMax = obj.productValue[str].stock;
  471. obj.actionImage = obj.productValue[str].image;
  472. obj.uniqueId = obj.productValue[str].unique;
  473. obj.goodsStore = obj.productValue[str].stock;
  474. } else {
  475. obj.many = 1;
  476. obj.productValue = data.productValue; //保存分类查询数据
  477. obj.actionPrice = goods.price; //保存默认选中商品价格
  478. obj.actionImage = goods.image_base; //保存默认选中商品图片
  479. obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
  480. }
  481. obj.shopId = data.mer_id; //保存商店id
  482. });
  483. }
  484. if (obj.goodsType == 1) {
  485. seckillGoods({}, this.goodsid).then(({
  486. data
  487. }) => {
  488. obj.list = data;
  489. console.log(obj.list, '秒杀商品数据++++++++++');
  490. // obj.good_list = data.good_list; //保存猜你喜欢列表
  491. obj.reply = data.reply; //保存评论列表
  492. let goods = data.storeInfo;
  493. obj.goodsNumberMax = goods.num;
  494. // console.log('obj.goodsNumberMin+++++++++',obj.goodsNumberMin)
  495. const time = timeComputed(goods.stop_time * 1000);
  496. obj.seckillObj = {
  497. stop: time.tpye, //是否结束
  498. stopTimeH: time.hours + time.day * 24, //小时
  499. stopTimeM: time.minutes, //分钟
  500. stopTimeS: time.seconds //秒钟
  501. };
  502. console.log(obj.seckillObj, '数据');
  503. // console.log(obj.seckillObj,'obj.seckillObj++++++++++++++++++++++')
  504. obj.goodsObjact = goods;
  505. if (obj.goodsObjact.description != null) {
  506. obj.description = obj.goodsObjact.description.replace(/\<img/gi,
  507. '<img class="rich-img"');
  508. } //小程序商品详情图超出屏幕问题
  509. obj.imgList = goods.images; //保存轮播图
  510. obj.specList = data.productAttr; //保存分类列表
  511. if (Array.isArray(data.productValue) != true) {
  512. console.log('多规格+++++++++++++');
  513. obj.many = 2;
  514. obj.specList = data.productAttr; //保存产品属性
  515. obj.productValue = data.productValue; //保存属性值
  516. obj.specSelected = []; //初始化默认选择对象
  517. for (let i = 0; i < obj.specList.length; i++) {
  518. // 设置默认数据
  519. let attrValue = obj.specList[i].attr_value[0];
  520. attrValue.check = true;
  521. obj.specSelected.push(attrValue.attr);
  522. }
  523. let str = obj.specSelected.join(',');
  524. console.log(str, 'str');
  525. // 设置默认值
  526. obj.actionPrice = obj.productValue[str].price;
  527. // obj.goodsNumberMax = obj.productValue[str].quota;
  528. // console.log(obj.goodsNumberMax,'obj.goodsNumberMax++++++++++++')
  529. obj.actionImage = obj.productValue[str].image;
  530. obj.uniqueId = obj.productValue[str].unique;
  531. obj.goodsStore = obj.productValue[str].stock;
  532. } else {
  533. console.log('单规格+++++++++++++');
  534. obj.many = 1;
  535. obj.productValue = data.productValue; //保存分类查询数据
  536. obj.actionPrice = goods.price; //保存默认选中商品价格
  537. obj.actionImage = goods.image_base; //保存默认选中商品图片
  538. // obj.goodsNumberMax = goods.quota; //保存默认选中最大可购买商品数量
  539. console.log(obj.goodsNumberMax, 'obj.goodsNumberMax---------------');
  540. obj.shopId = data.mer_id; //保存商店id
  541. }
  542. });
  543. }
  544. },
  545. shareLink(item) {
  546. console.log('dainjideniang');
  547. this.shareShow = true;
  548. },
  549. cancel() {
  550. this.shareShow = false;
  551. },
  552. // 长按保存图片
  553. saveImg(w) {
  554. console.log(w);
  555. let obj = this;
  556. uni.downloadFile({
  557. //下载图片
  558. url: obj.shareImage,
  559. success: res => {
  560. console.log(res.tempFilePath);
  561. uni.saveImageToPhotosAlbum({
  562. //将图片保存在手机
  563. filePath: res.tempFilePath, //保存的位置
  564. success: res => {
  565. uni.showToast({
  566. title: '保存成功',
  567. icon: 'none'
  568. });
  569. }
  570. });
  571. }
  572. });
  573. },
  574. // 立即购买
  575. buy() {
  576. let obj = this;
  577. // 创建传值对象
  578. let data = {
  579. productId: obj.goodsid, //商品编号
  580. cartNum: obj.goodsNumber, //商品数量
  581. uniqueId: obj.uniqueId, //分类编号
  582. new: 0,
  583. secKillId: '',
  584. integralId: '',
  585. free_check: 0
  586. };
  587. if (obj.type == 2) {
  588. console.log('加入购物车');
  589. data.new = 0;
  590. } else if (obj.type == 1) {
  591. data.new = 1;
  592. }
  593. console.log(obj.goodsType, 'obj.goodsType77777777777777777777');
  594. if (obj.goodsType == 1) {
  595. data.secKillId = obj.goodsObjact.id;
  596. data.new = 1;
  597. }
  598. if (obj.goodsType == 2) {
  599. data.new = 1;
  600. data.integralId = obj.goodsObjact.id;
  601. }
  602. if (obj.goodsType == 3) {
  603. data.new = 1;
  604. data.free_check = 1;
  605. }
  606. cartAdd(data)
  607. .then(function(e) {
  608. let da = e.data;
  609. if (obj.type == 1) {
  610. // 跳转到支付页
  611. console.log(obj.goodsType, 'this.goodsType456444444444444444');
  612. uni.navigateTo({
  613. url: '/pages/order/createOrder?id=' + da.cartId + '&goodsType=' + obj.goodsType
  614. });
  615. }
  616. if (obj.type == 2) {
  617. uni.showToast({
  618. title: '成功加入购物车',
  619. type: 'top',
  620. duration: 2000,
  621. icon: 'none'
  622. });
  623. obj.goodsDetail();
  624. }
  625. obj.toggleSpec();
  626. })
  627. .catch(e => {
  628. console.log(e);
  629. });
  630. },
  631. // 阻止触发上级事件
  632. stopPrevent() {}
  633. }
  634. };
  635. </script>
  636. <style lang="scss">
  637. /* 弹出层 */
  638. .popup {
  639. position: fixed;
  640. left: 0;
  641. top: 0;
  642. right: 0;
  643. bottom: 0;
  644. z-index: 99;
  645. &.show {
  646. display: block;
  647. .mask {
  648. animation: showPopup 0.2s linear both;
  649. }
  650. .layer {
  651. animation: showLayer 0.2s linear both;
  652. }
  653. }
  654. &.hide {
  655. .mask {
  656. animation: hidePopup 0.2s linear both;
  657. }
  658. .layer {
  659. animation: hideLayer 0.2s linear both;
  660. }
  661. }
  662. &.none {
  663. display: none;
  664. }
  665. .mask {
  666. position: fixed;
  667. top: 0;
  668. width: 100%;
  669. height: 100%;
  670. z-index: 1;
  671. background-color: rgba(0, 0, 0, 0.4);
  672. }
  673. .layer {
  674. position: fixed;
  675. z-index: 99;
  676. bottom: 0;
  677. width: 100%;
  678. min-height: 35vh;
  679. border-radius: 10rpx 10rpx 0 0;
  680. background-color: #fff;
  681. .btn {
  682. height: 66rpx;
  683. line-height: 66rpx;
  684. border-radius: 100rpx;
  685. background: $uni-color-primary;
  686. font-size: $font-base + 2rpx;
  687. color: #fff;
  688. margin: 30rpx auto 20rpx;
  689. }
  690. }
  691. @keyframes showPopup {
  692. 0% {
  693. opacity: 0;
  694. }
  695. 100% {
  696. opacity: 1;
  697. }
  698. }
  699. @keyframes hidePopup {
  700. 0% {
  701. opacity: 1;
  702. }
  703. 100% {
  704. opacity: 0;
  705. }
  706. }
  707. @keyframes showLayer {
  708. 0% {
  709. transform: translateY(120%);
  710. }
  711. 100% {
  712. transform: translateY(0%);
  713. }
  714. }
  715. @keyframes hideLayer {
  716. 0% {
  717. transform: translateY(0);
  718. }
  719. 100% {
  720. transform: translateY(120%);
  721. }
  722. }
  723. }
  724. /* 规格选择弹窗 */
  725. .attr-content {
  726. padding: 25rpx 30rpx;
  727. .a-t {
  728. display: flex;
  729. image {
  730. width: 170rpx;
  731. height: 170rpx;
  732. flex-shrink: 0;
  733. border-radius: 8rpx;
  734. }
  735. .right {
  736. display: flex;
  737. flex-direction: column;
  738. padding-left: 24rpx;
  739. font-size: $font-sm + 2rpx;
  740. color: $font-color-base;
  741. line-height: 42rpx;
  742. width: 75%;
  743. .price {
  744. font-size: $font-lg;
  745. color: $uni-color-primary;
  746. margin: 10rpx 0rpx;
  747. }
  748. .name {
  749. font-size: 32rpx;
  750. color: $font-color-dark;
  751. height: 50rpx;
  752. overflow: hidden;
  753. text-overflow: ellipsis;
  754. white-space: nowrap;
  755. display: block;
  756. }
  757. .selected-text {
  758. margin-right: 10rpx;
  759. }
  760. }
  761. }
  762. .attr-list {
  763. display: flex;
  764. flex-direction: column;
  765. font-size: $font-base + 2rpx;
  766. color: $font-color-base;
  767. padding-top: 30rpx;
  768. padding-left: 10rpx;
  769. }
  770. .item-list {
  771. padding: 20rpx 0 0;
  772. display: flex;
  773. flex-wrap: wrap;
  774. text {
  775. display: flex;
  776. align-items: center;
  777. justify-content: center;
  778. background: #eee;
  779. margin-right: 20rpx;
  780. margin-bottom: 20rpx;
  781. border-radius: 100rpx;
  782. min-width: 60rpx;
  783. height: 60rpx;
  784. padding: 0 20rpx;
  785. font-size: $font-base;
  786. color: $font-color-dark;
  787. }
  788. .selected {
  789. background: #ddffdf;
  790. color: $uni-color-primary;
  791. }
  792. }
  793. }
  794. //默认商品底部高度
  795. .goodsBottom {
  796. height: 160rpx;
  797. }
  798. page {
  799. background: #f0f0f0;
  800. }
  801. //秒杀、拼团底部高度
  802. .contentBottomHeight {
  803. height: 110rpx;
  804. }
  805. //默认商品底部高度
  806. .goodsBottom {
  807. height: 160rpx;
  808. }
  809. /deep/ .iconenter {
  810. font-size: $font-base + 2rpx;
  811. color: #888;
  812. }
  813. /deep/ .con_image {
  814. width: 130rpx;
  815. height: 130rpx;
  816. display: inline-block;
  817. padding: 15rpx;
  818. image {
  819. width: 100%;
  820. height: 100%;
  821. }
  822. }
  823. /* 商品详情中限制图片大小 */
  824. /deep/ .rich-img {
  825. width: 100% !important;
  826. height: auto;
  827. }
  828. .sckill-top {
  829. width: 750rpx;
  830. height: 165rpx;
  831. position: relative;
  832. top: -40rpx;
  833. margin-bottom: -40rpx;
  834. display: flex;
  835. justify-content: space-between;
  836. .bg {
  837. width: 750rpx;
  838. height: 165rpx;
  839. position: absolute;
  840. left: 0;
  841. top: 0;
  842. image {
  843. width: 100%;
  844. height: 100%;
  845. }
  846. }
  847. .top-left {
  848. position: relative;
  849. z-index: 10;
  850. line-height: 1;
  851. .left-top {
  852. padding: 35rpx 0 23rpx 22rpx;
  853. font-size: 44rpx;
  854. font-weight: 500;
  855. color: #ffffff;
  856. line-height: 1;
  857. }
  858. .left-btm {
  859. line-height: 1;
  860. font-size: 30rpx;
  861. font-weight: 500;
  862. padding-left: 25rpx;
  863. // text-decoration: line-through;
  864. color: #ffffff;
  865. .now-pri {
  866. display: inline-block;
  867. padding-right: 8rpx;
  868. font-size: 44rpx;
  869. font-weight: 800;
  870. color: #ffffff;
  871. }
  872. .old-pri {
  873. text-decoration: line-through;
  874. }
  875. }
  876. }
  877. .top-right {
  878. position: relative;
  879. z-index: 10;
  880. padding: 67rpx 20rpx 18rpx 0;
  881. .right-top {
  882. font-size: 22rpx;
  883. font-weight: 400;
  884. color: #ffffff;
  885. line-height: 1;
  886. padding-bottom: 8rpx;
  887. }
  888. }
  889. }
  890. .ptsf_box {
  891. border-radius: 50%;
  892. position: fixed;
  893. z-index: 2;
  894. right: 20rpx;
  895. top: 60%;
  896. width: 90rpx;
  897. height: 90rpx;
  898. background: #626262;
  899. display: flex;
  900. flex-direction: column;
  901. align-items: center;
  902. justify-content: center;
  903. padding: 10rpx;
  904. margin: 0;
  905. &::after {
  906. border: none;
  907. }
  908. .ptsf_img {
  909. width: 28rpx;
  910. height: 28rpx;
  911. display: block;
  912. }
  913. .ptfx_tit {
  914. margin-top: 15rpx;
  915. font-size: 18rpx;
  916. font-family: PingFang SC;
  917. font-weight: bold;
  918. color: #ffffff;
  919. line-height: 1;
  920. }
  921. }
  922. .share-box {
  923. width: 600rpx;
  924. height: 1000rpx;
  925. .box-img {
  926. width: 600rpx;
  927. height: 1000rpx;
  928. }
  929. }
  930. .Shraremask {
  931. position: fixed;
  932. left: 0;
  933. top: 0;
  934. right: 0;
  935. bottom: 0;
  936. display: flex;
  937. justify-content: center;
  938. align-items: flex-end;
  939. z-index: 998;
  940. transition: 0.3s;
  941. background-color: rgba(51, 51, 51, 0.6);
  942. .bottomButtom {
  943. position: absolute;
  944. left: 0;
  945. bottom: 0;
  946. display: flex;
  947. justify-content: center;
  948. align-items: center;
  949. width: 100%;
  950. height: 90rpx;
  951. background: #fff;
  952. z-index: 9;
  953. font-size: $font-base + 2rpx;
  954. color: $font-color-dark;
  955. }
  956. }
  957. .mask-content {
  958. margin-bottom: 88rpx;
  959. width: 100%;
  960. height: 380rpx;
  961. transition: 0.3s;
  962. background: #fff;
  963. &.has-bottom {
  964. padding-bottom: 90rpx;
  965. }
  966. .view-content {
  967. height: 100%;
  968. }
  969. }
  970. .share-header {
  971. height: 110rpx;
  972. font-size: $font-base + 2rpx;
  973. color: font-color-dark;
  974. display: flex;
  975. align-items: center;
  976. justify-content: center;
  977. padding-top: 10rpx;
  978. &:before,
  979. &:after {
  980. content: '';
  981. width: 240rpx;
  982. height: 0;
  983. border-top: 1px solid $border-color-base;
  984. transform: scaleY(0.5);
  985. margin-right: 30rpx;
  986. }
  987. &:after {
  988. margin-left: 30rpx;
  989. margin-right: 0;
  990. }
  991. }
  992. .share-list {
  993. display: flex;
  994. width: 80%;
  995. margin: 0rpx auto;
  996. }
  997. .share-item {
  998. min-width: 33.33%;
  999. display: flex;
  1000. justify-content: center;
  1001. align-items: center;
  1002. height: 180rpx;
  1003. width: 100%;
  1004. .wechat-box {
  1005. width: 50%;
  1006. height: 100%;
  1007. background: #ffffff;
  1008. border: 0;
  1009. display: flex;
  1010. align-items: center;
  1011. flex-direction: column;
  1012. &::after {
  1013. border: 0;
  1014. }
  1015. .itemImage {
  1016. width: 80rpx;
  1017. height: 80rpx;
  1018. margin-bottom: 16rpx;
  1019. }
  1020. .itemText {
  1021. font-size: $font-base;
  1022. color: $font-color-base;
  1023. line-height: 2;
  1024. }
  1025. }
  1026. }
  1027. </style>