product.vue 31 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276
  1. <template>
  2. <view class="container">
  3. <view class="carousel">
  4. <swiper indicator-dots :circular="true" duration="400">
  5. <swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
  6. <view class="image-wrapper"><image :src="item" class="loaded" mode="aspectFill"></image></view>
  7. </swiper-item>
  8. </swiper>
  9. </view>
  10. <view class="introduce-section seckill-box-title" v-if="goodsType == 1">
  11. <view class="title flex">
  12. <view class="title-box">
  13. <text class="price-tip">¥</text>
  14. <text class="price">{{ goodsObjact.price }}</text>
  15. <!-- <text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text> -->
  16. <!-- <text class="coupon-tip">7折</text> -->
  17. </view>
  18. <view class="flex timeStop">
  19. <view>距离结束</view>
  20. <uni-countdown
  21. color="#ffffff"
  22. background-color="#D65B3F"
  23. splitor-color="#FFFFFF"
  24. :show-day="false"
  25. :hour="seckillObj.stopTimeH"
  26. :minute="seckillObj.stopTimeM"
  27. :second="seckillObj.stopTimeS"
  28. ></uni-countdown>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="introduce-section">
  33. <text class="title" v-if="goodsType == 1">{{ goodsObjact.title }}</text>
  34. <view class="price-box" v-if="goodsType == 0">
  35. <text class="price-tip">¥</text>
  36. <text class="price">{{ goodsObjact.price }}</text>
  37. <text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text>
  38. <!-- <text class="coupon-tip">7折</text> -->
  39. </view>
  40. <text class="title" v-if="goodsType == 0">{{ goodsObjact.store_name }}</text>
  41. <view class="bot-row">
  42. <text>快递: {{ goodsObjact.postage }}</text>
  43. <text style="text-align: center;">销量: {{ goodsObjact.sales }}</text>
  44. <text style="text-align: right;">{{ storeObjact.address | address}}</text>
  45. </view>
  46. </view>
  47. <!-- 评价 -->
  48. <view class="eva-section" v-if="reply" @click="navTo('/pages/product/reply?id=' + goodsid)">
  49. <view class="e-header">
  50. <text class="tit">评价</text>
  51. <text>({{ details.replyCount }})</text>
  52. <text class="tip">好评率 {{ details.replyChance }}%</text>
  53. <text class="iconfont iconenter"></text>
  54. </view>
  55. <view class="eva-box">
  56. <image class="portrait" :src="reply.avatar" mode="aspectFill"></image>
  57. <view class="right">
  58. <text class="name">{{ reply.nickname }}</text>
  59. <text class="con">{{ reply.comment }}</text>
  60. <view class="con_box">
  61. <view class="con_image" v-for="item in reply.pics"><image :src="item"></image></view>
  62. </view>
  63. <view class="bot">
  64. <text class="attr"></text>
  65. <text class="time">{{ reply.add_time }}</text>
  66. </view>
  67. </view>
  68. </view>
  69. <view class="eva-boxs" v-if="reply.merchant_reply_content">
  70. <view class="right">
  71. <text class="con">
  72. <text style="color: #FD5B23;margin-right: 8rpx;">商家回复 :</text>
  73. {{ reply.merchant_reply_content }}
  74. </text>
  75. <view class="bot">
  76. <text class="attr"></text>
  77. <text class="time">{{ reply.merchant_reply_time }}</text>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. <view class="c-list">
  83. <view class="c-row b-b" @click="toggleSpec">
  84. <text class="tit">购买数量</text>
  85. <view class="con">
  86. <text class="selected-text">{{ goodsNumber }}</text>
  87. </view>
  88. <text class="iconfont iconenter"></text>
  89. </view>
  90. <view class="c-row b-b" v-if="goodsType == 1">
  91. <text class="tit">限购数量</text>
  92. <view class="con">
  93. <text class="selected-text">{{ goodsObjact.num + goodsObjact.unit_name }}</text>
  94. </view>
  95. </view>
  96. <!-- <view class="c-row b-b">
  97. <text class="tit">优惠券</text>
  98. <text class="con t-r red">领取优惠券</text>
  99. <text class="iconfont iconenter"></text>
  100. </view> -->
  101. <view class="c-row b-b" v-if="goodsObjact.is_integral == 1 && goodsType == 0">
  102. <text class="tit">积分</text>
  103. <view class="bz-list con">
  104. <text>最高抵扣¥{{ moneyNum(goodsObjact.use_max_integral) == 0 ? moneyNum(goodsObjact.price) : moneyNum(goodsObjact.use_max_integral) }}</text>
  105. </view>
  106. </view>
  107. </view>
  108. <view class="shop-box flex" v-if="goodsType == 0 && shopId > 0">
  109. <view class="flex">
  110. <image :src="shopInfo.logo" mode=" aspectFit" class="shop-img"></image>
  111. <text class="font-size-lg">{{ shopInfo.title }}</text>
  112. </view>
  113. <navigator :url="'/pages/shoping/index?merid=' + shopId"><view class="shop-button">进店逛逛</view></navigator>
  114. </view>
  115. <view class="detail-desc">
  116. <view class="d-header"><text>图文详情</text></view>
  117. <rich-text class="detail-centent" :nodes="goodsObjact.description"></rich-text>
  118. <view :class="{ contentBottomHeight: goodsType == 1 || goodsType == 2, goodsBottom: goodsType == 0 }"></view>
  119. </view>
  120. <!-- 底部操作菜单 -->
  121. <view class="page-bottom" v-if="goodsType == 0">
  122. <!-- <navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
  123. <text class="iconfont iconhome"></text>
  124. <text>首页</text>
  125. </navigator>
  126. <navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
  127. <text class="iconfont iconcart"></text>
  128. <text>购物车</text>
  129. </navigator> -->
  130. <view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
  131. <text class="iconfont " :class="{ iconlike: !goodsObjact.userCollect, iconlikefill: goodsObjact.userCollect }"></text>
  132. <text>收藏</text>
  133. </view>
  134. <view class="action-btn-group">
  135. <button type="primary" class=" action-btn no-border buy-now-btn" @click="toggleSpec(2)">加入购物车</button>
  136. <button type="primary" class=" action-btn no-border add-cart-btn" @click="toggleSpec(1)">立即购买</button>
  137. </view>
  138. </view>
  139. <!-- 秒杀商品购买 -->
  140. <view class="goods-pay-box flex" :class="{ stop: seckillObj.stop }" v-if="goodsType == 1">
  141. <view class="goods-pay bgLine" v-if="!seckillObj.stop" @click="toggleSpec(1)"><text>立即购买</text></view>
  142. <view class="goods-pay-stop" v-else>活动已结束</view>
  143. </view>
  144. <!-- 拼团商品购买 -->
  145. <view class="goods-pay-box flex" v-if="goodsType == 2">
  146. <view class="goods-pay bg-warning" @click="navToProductGoods">
  147. <view class="goods-buttom-money">¥{{ goodsObjact.product_price }}</view>
  148. <view class="goods-buttom">单独购买</view>
  149. </view>
  150. <view class="goods-pay bg-danger" @click="toggleSpec(1)">
  151. <view class="goods-buttom-money">¥{{ goodsObjact.price }}</view>
  152. <view class="goods-buttom">我要拼团</view>
  153. </view>
  154. </view>
  155. <!-- 规格-模态层弹窗 -->
  156. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
  157. <!-- 遮罩层 -->
  158. <view class="mask"></view>
  159. <view class="layer attr-content" @click.stop="stopPrevent">
  160. <view class="a-t">
  161. <image :src="actionImage"></image>
  162. <view class="right">
  163. <view class="good-name clamp">{{goodsObjact.store_name}}</view>
  164. <text class="price">¥{{ actionPrice }}</text>
  165. <!-- <text class="stock">库存:{{ goodsObjact.stock }}件</text> -->
  166. <!-- <view class="selected" v-if="goodsType == 0">
  167. 已选:
  168. <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem }}</text>
  169. </view> -->
  170. </view>
  171. </view>
  172. <view v-for="(item, index) in specList" :key="index" class="attr-list">
  173. <text>{{ item.attr_name }}</text>
  174. <view class="item-list">
  175. <text
  176. v-for="(childItem, childIndex) in item.attr_value"
  177. :key="childIndex"
  178. class="tit"
  179. :class="{ selected: childItem.check }"
  180. @click="selectSpec(childItem, item, index)"
  181. >
  182. {{ childItem.attr }}
  183. </text>
  184. </view>
  185. </view>
  186. <view class="attr-list">
  187. <text>购买数量</text>
  188. <view class="item-list">
  189. <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
  190. </view>
  191. </view>
  192. <button class="btn" @click.stop="buy">完成</button>
  193. </view>
  194. </view>
  195. <view :class="{ seckillBottom: goodsType == 1, goodsBottom: goodsType == 0 }"></view>
  196. <!-- 分享 -->
  197. <!-- <share ref="share" :contentHeight="580" :shareList="shareList"></share> -->
  198. </view>
  199. </template>
  200. <script>
  201. import share from '@/components/share';
  202. import uniNumberBox from '@/components/uni-number-box.vue';
  203. import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
  204. import { goodsDetail, cartAdd, collectAdd, collectDel, seckillGoods, groupGoods } from '@/api/product.js';
  205. import { getShoping } from '@/api/shoping.js';
  206. // import { weixindata } from '@/utils/wxAuthorized';
  207. import { mapState } from 'vuex';
  208. // #ifdef H5
  209. import { weixindata, weixinlocation,shareLoad } from '@/utils/wxAuthorized';
  210. // #endif
  211. export default {
  212. components: {
  213. share,
  214. uniNumberBox,
  215. uniCountdown
  216. },
  217. filters: {
  218. address(val) {
  219. let str = ''
  220. if(val) {
  221. str = val[0] + ' ' + val[1]
  222. }
  223. return str
  224. }
  225. },
  226. data() {
  227. return {
  228. details: '',
  229. reply: '', //评论
  230. type: 1, //默认支付方式add为
  231. goodsNumber: 1, //购买数量
  232. goodsid: '', //商品id
  233. specClass: 'none', //显示隐藏弹窗
  234. shareList: [], //分享列表
  235. goodsObjact: {}, //保存商品数据
  236. storeObjact: {},//保存店铺数据
  237. //图片循环
  238. imgList: [],
  239. specList: [],
  240. // 对比对象
  241. productValue: [],
  242. actionPrice: 0, //默认选中商品价格
  243. actionImage: '', //默认选中图片
  244. uniqueId: '', //选中的商品分类
  245. specSelected: [], //选中的分类
  246. specSelectedName: '', //选中分类名称
  247. goodsNumberMax: 0, //最大可购买数量
  248. shopId: '', //商店id
  249. //商店信息
  250. shopInfo: {
  251. logo: '',
  252. title: ''
  253. }, //商店信息
  254. goodsType: 0, //商品类型1秒杀商品0为普通商品2为拼团商品
  255. // 秒杀数据保存
  256. seckillObj: {
  257. stopTime: 0, //结束时间
  258. stop: false, //是否结束
  259. stopTimeH: 0, //小时
  260. stopTimeM: 0, //分钟
  261. stopTimeS: 0 //秒钟
  262. },
  263. // 拼团数据保存
  264. pink: {
  265. id: '', //拼团编号
  266. uid: '', //用户编号
  267. people: '', //拼团人数
  268. price: '', //拼团价格
  269. stop_time: '', //拼团结束时间
  270. nickname: '', //团长昵称
  271. avatar: '', //团长头像
  272. count: '', //拼团剩余人数
  273. h: '', //时
  274. i: '', //分
  275. s: '' //秒
  276. }
  277. };
  278. },
  279. async onLoad(options) {
  280. let obj = this;
  281. //保存商品id
  282. this.goodsid = options.id;
  283. // 判断有无人邀请
  284. if (options.spread) {
  285. // 存储邀请人
  286. uni.setStorageSync('spread', options.spread);
  287. }
  288. // 判断是否为秒杀商品
  289. if (options.type == 1) {
  290. // 保存商品类型
  291. this.goodsType = 1;
  292. // 保存结束时间
  293. this.seckillObj.stopTime = options.stoptime;
  294. // 获取当前时间毫秒数
  295. let stoptime = options.stoptime * 1000;
  296. // 获取当前时间
  297. let acitonTime = new Date();
  298. // 判断当前时间是否大于结束时间
  299. if (acitonTime.getTime() > stoptime) {
  300. // 当前秒杀时间已经结束
  301. this.seckillObj.stop = true;
  302. } else {
  303. // 计算倒计时
  304. this.timeComputed(stoptime, this.seckillObj);
  305. }
  306. this.seckillGoods();
  307. return;
  308. }
  309. if (options.type == 2) {
  310. // 保存当前拼团商品类型
  311. this.goodsType = 2;
  312. // 家在数据
  313. this.groupGoods();
  314. return;
  315. }
  316. if (this.goodsType == 0) {
  317. // 加载普通商品详情
  318. this.goodsDetail();
  319. }
  320. },
  321. computed: {
  322. // #ifdef H5
  323. ...mapState(['weichatObj', 'baseURL', 'urlFile']),
  324. ...mapState('user', ['userInfo'])
  325. // #endif
  326. },
  327. methods: {
  328. // 分享
  329. // #ifdef H5
  330. IndexShare() {
  331. let obj = this
  332. // console.log('dddddddffffffffffffff')
  333. // 设置菜单中的转发按钮触发转发事件时的转发内容
  334. let pages = getCurrentPages(); //获取加载的页面
  335. let currentPage = pages[pages.length - 1]; //获取当前页面的对象
  336. let url = '/#/' + currentPage.route; //当前页面url
  337. let item = currentPage.options; //如果要获取url中所带的参数可以查看options
  338. let shareObj = {
  339. title: obj.goodsObjact.store_name, // 默认是小程序的名称(可以写slogan等)
  340. link: obj.baseURL + url + '?id=' + item.id + '&spread=' + obj.userInfo.uid, // 默认是当前页面,必须是以‘/’开头的完整路径
  341. desc: obj.goodsObjact.store_name + ' 价格:' + obj.goodsObjact.price,
  342. imgUrl: obj.goodsObjact.image,
  343. success: function(res) {
  344. // 转发成功之后的回调
  345. if (res.errMsg == 'shareAppMessage:ok') {
  346. }
  347. },
  348. fail: function() {
  349. // 转发失败之后的回调
  350. if (res.errMsg == 'shareAppMessage:fail cancel') {
  351. // 用户取消转发
  352. } else if (res.errMsg == 'shareAppMessage:fail') {
  353. // 转发失败,其中 detail message 为详细失败信息
  354. }
  355. }
  356. };
  357. console.log(shareObj, '8888888888888888888');
  358. shareLoad(shareObj);
  359. },
  360. // #endif
  361. navTo(url) {
  362. uni.navigateTo({
  363. url
  364. });
  365. },
  366. //获取商店信息
  367. getShoping() {
  368. let obj = this;
  369. getShoping({
  370. mer_id: this.shopId
  371. })
  372. .then(function({ data }) {
  373. console.log(data);
  374. obj.shopInfo = data;
  375. })
  376. .catch(e => {
  377. console.log(e);
  378. });
  379. },
  380. // 转换字符串为数字
  381. moneyNum: function(value) {
  382. return +value;
  383. },
  384. navToProductGoods() {
  385. uni.redirectTo({
  386. url: '/pages/product/product?id=' + this.goodsObjact.product_id
  387. });
  388. },
  389. // 获取拼团商品详情
  390. groupGoods() {
  391. let obj = this;
  392. groupGoods({}, this.goodsid).then(function({ data }) {
  393. obj.pink = data.pink[0]; //保存拼团信息
  394. let goods = data.storeInfo;
  395. obj.goodsObjact = goods;
  396. obj.imgList = goods.images; //保存轮播图
  397. obj.specList = data.productAttr; //保存分类列表
  398. obj.productValue = data.productValue; //保存分类查询数据
  399. obj.actionPrice = goods.price; //保存默认选中商品价格
  400. obj.actionImage = goods.image_base; //保存默认选中商品图片
  401. obj.goodsNumberMax = 1; //保存默认选中最大可购买商品数量
  402. obj.shopId = data.mer_id; //保存商店id
  403. if (obj.shopId > 0) {
  404. obj.getShoping();
  405. }
  406. // #ifdef H5
  407. obj.shareDate();
  408. // #endif
  409. });
  410. },
  411. // 获取秒杀商品详情
  412. seckillGoods() {
  413. let obj = this;
  414. seckillGoods({}, this.goodsid).then(function({ data }) {
  415. let goods = data.storeInfo;
  416. obj.goodsObjact = goods;
  417. obj.imgList = goods.images; //保存轮播图
  418. obj.specList = data.productAttr; //保存分类列表
  419. obj.productValue = data.productValue; //保存分类查询数据
  420. obj.actionPrice = goods.price; //保存默认选中商品价格
  421. obj.actionImage = goods.image_base; //保存默认选中商品价格
  422. obj.goodsNumberMax = goods.num; //保存默认选中最大可购买商品数量
  423. obj.shopId = data.mer_id; //保存商店id
  424. if (obj.shopId > 0) {
  425. obj.getShoping();
  426. }
  427. // #ifdef H5
  428. obj.shareDate();
  429. // #endif
  430. });
  431. },
  432. // 计算倒计时时间
  433. timeComputed(da, ar) {
  434. let obj = ar;
  435. // 设置到期时间
  436. let time = new Date(da);
  437. // 获取当前时间
  438. let actTime = new Date();
  439. // 获取到期时间具体值
  440. let tH = time.getHours();
  441. let tM = time.getMinutes();
  442. let tS = time.getSeconds();
  443. // 获取当前时间具体值
  444. let aH = actTime.getHours();
  445. let aM = actTime.getMinutes();
  446. let aS = actTime.getSeconds();
  447. // 计算时间,保存需要多少时间到期
  448. obj.stopTimeH = tH - aH;
  449. obj.stopTimeM = tM - aM;
  450. obj.stopTimeS = tS - aS;
  451. },
  452. // 获取商品信息
  453. goodsDetail() {
  454. let obj = this;
  455. goodsDetail({}, this.goodsid).then(function({ data }) {
  456. obj.details = data;
  457. let goods = data.storeInfo;
  458. let store_info = data.system_store// 保存店铺信息
  459. console.log(store_info)
  460. obj.storeObjact = store_info
  461. obj.goodsObjact = goods;
  462. obj.reply = data.reply; //保存评论列表
  463. obj.imgList = goods.slider_image; //保存轮播图
  464. obj.specList = data.productAttr; //保存分类列表
  465. obj.productValue = data.productValue; //保存分类查询数据
  466. obj.actionPrice = goods.price; //保存默认选中商品价格
  467. obj.actionImage = goods.image_base; //保存默认选中商品价格
  468. obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
  469. obj.shopId = data.mer_id; //保存商店id
  470. if (obj.shopId > 0) {
  471. obj.getShoping();
  472. }
  473. // #ifdef H5
  474. obj.shareDate();
  475. obj.IndexShare()
  476. // #endif
  477. });
  478. },
  479. // #ifdef H5
  480. // 加载微信html5页面分享方法
  481. shareDate() {
  482. let obj = this;
  483. // 保存分享人id链接
  484. let url = window.location.href + '&spread=' + this.userInfo.uid;
  485. // 判断是否微信浏览器
  486. let bool = uni.getStorageSync('weichatBrowser') || '';
  487. if (bool) {
  488. // 过滤微信强制添加的链接地址
  489. url = url.replace(/[\?,&]from=singlemessage/g, '');
  490. let data = {
  491. link: url, // 分享链接
  492. imgUrl: obj.goodsObjact.image, // 分享图标
  493. desc: obj.goodsObjact.store_info,
  494. title: obj.goodsObjact.store_name,
  495. success: function(e) {
  496. console.log(e);
  497. }
  498. };
  499. weixindata(data);
  500. }
  501. },
  502. // #endif
  503. // 购买数量变化
  504. numberChange(e) {
  505. this.goodsNumber = e.number;
  506. },
  507. //规格弹窗开关
  508. toggleSpec(str) {
  509. if (this.specClass === 'show') {
  510. this.specClass = 'hide';
  511. setTimeout(() => {
  512. this.specClass = 'none';
  513. }, 250);
  514. } else if (this.specClass === 'none') {
  515. this.specClass = 'show';
  516. }
  517. // 保存当前购买类型
  518. this.type = str;
  519. },
  520. //选择规格
  521. selectSpec(item, arr, ind) {
  522. arr.attr_value.forEach(function(e) {
  523. e.check = false;
  524. });
  525. item.check = true;
  526. this.specSelected[ind] = item.attr;
  527. let str = this.specSelected.join(',');
  528. this.specSelectedName = this.specSelected.join(' ');
  529. if (this.productValue[str]) {
  530. let data = this.productValue[str];
  531. this.actionPrice = data.price;
  532. this.goodsNumberMax = data.stock;
  533. this.actionImage = data.image;
  534. this.uniqueId = data.unique;
  535. }
  536. },
  537. //分享
  538. share() {
  539. this.$refs.share.toggleMask();
  540. },
  541. //收藏
  542. toFavorite(item) {
  543. let obj = this;
  544. item.userCollect = !item.userCollect;
  545. if (!item.userCollect) {
  546. collectDel({ id: obj.goodsid, category: 'product' }).then(function(e) {
  547. uni.showToast({
  548. title: '成功取消收藏',
  549. type: 'top',
  550. duration: 1500
  551. });
  552. });
  553. } else {
  554. collectAdd({ id: obj.goodsid, category: 'product' }).then(function(e) {
  555. uni.showToast({
  556. title: '成功加入收藏',
  557. type: 'top',
  558. duration: 1500
  559. });
  560. });
  561. }
  562. },
  563. // 立即购买
  564. buy() {
  565. let obj = this;
  566. let data = {
  567. cartNum: obj.goodsNumber, //商品数量
  568. uniqueId: obj.uniqueId, //商品标签
  569. new: '1', //商品是否新增加到购物车1为不加入0为加入
  570. mer_id: obj.shopId,
  571. is_consumer: 0,
  572. // type: 0,//0为余额支付 1为消费券支付 2为积分支付
  573. };
  574. if (obj.type == 2) {
  575. data.new = 0;
  576. }
  577. if (obj.goodsType == 0) {
  578. data.productId = obj.goodsid; //商品编号
  579. }
  580. // 判断是否为秒杀商品
  581. if (obj.goodsType == 1) {
  582. data.secKillId = obj.goodsid; //秒杀商品编号
  583. data.productId = obj.goodsObjact.product_id; //商品编号
  584. // 判断是否秒杀已经结束
  585. if (obj.seckillObj.stop) {
  586. uni.showModal({
  587. title: '提示',
  588. content: '当前活动已经结束',
  589. showCancel: false
  590. });
  591. return;
  592. }
  593. }
  594. // 判断是否为拼团商品
  595. if (obj.goodsType == 2) {
  596. data.combinationId = obj.goodsid; //拼团编号
  597. data.productId = obj.goodsObjact.product_id; //商品编号
  598. }
  599. cartAdd(data)
  600. .then(function({ data }) {
  601. if (obj.type == 1) {
  602. // 跳转到支付页
  603. uni.navigateTo({
  604. url: '/pages/order/createOrder?id=' + data.cartId + '&goodsType=' + obj.goodsType
  605. });
  606. }
  607. if (obj.type == 2) {
  608. uni.showToast({
  609. title: '成功加入购物车',
  610. type: 'top',
  611. duration: 2000
  612. });
  613. obj.toggleSpec();
  614. }
  615. })
  616. .catch(e => {
  617. console.log(e);
  618. });
  619. },
  620. stopPrevent() {}
  621. }
  622. };
  623. </script>
  624. <style lang="scss">
  625. page {
  626. background: $page-color-base;
  627. }
  628. //秒杀底部高度
  629. .seckillBottom {
  630. height: 110rpx;
  631. }
  632. // 文章页底部高度撑开
  633. .contentBottomHeight {
  634. height: 110rpx;
  635. }
  636. //默认商品底部高度
  637. .goodsBottom {
  638. height: 160rpx;
  639. }
  640. .iconenter {
  641. font-size: $font-base + 2rpx;
  642. color: #888;
  643. }
  644. .carousel {
  645. /* #ifdef APP-PLUS */
  646. padding-top: var(--status-bar-height);
  647. /* #endif */
  648. height: 722rpx;
  649. position: relative;
  650. swiper {
  651. height: 100%;
  652. }
  653. .image-wrapper {
  654. width: 100%;
  655. height: 100%;
  656. }
  657. .swiper-item {
  658. display: flex;
  659. justify-content: center;
  660. align-content: center;
  661. // height: 750rpx;
  662. height: 710rpx;
  663. overflow: hidden;
  664. image {
  665. width: 100%;
  666. height: 100%;
  667. }
  668. }
  669. }
  670. // 秒杀
  671. .seckill-box-title {
  672. background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%) !important;
  673. .price,
  674. .price-tip,
  675. .timeStop,
  676. .m-price {
  677. color: #ffffff !important;
  678. }
  679. .price-tip {
  680. font-size: $font-base;
  681. }
  682. .price {
  683. font-size: 45rpx !important;
  684. font-weight: bold;
  685. }
  686. .timeStop {
  687. }
  688. }
  689. // 底部拼团、秒杀支付按钮
  690. .goods-pay-box {
  691. position: fixed;
  692. left: 0;
  693. bottom: 0;
  694. z-index: 95;
  695. width: 750rpx;
  696. height: 100rpx;
  697. line-height: 1;
  698. color: #ffffff;
  699. text-align: center;
  700. font-size: $font-lg;
  701. .bgLine {
  702. background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%);
  703. }
  704. // 拼团支付按钮
  705. .goods-pay {
  706. display: flex;
  707. align-content: center;
  708. flex-wrap: wrap;
  709. justify-content: center;
  710. .goods-buttom,
  711. .goods-buttom-money {
  712. width: 100%;
  713. }
  714. .goods-buttom-money {
  715. font-size: $font-base;
  716. }
  717. }
  718. .goods-pay-stop,
  719. .goods-pay {
  720. padding: 15rpx 0;
  721. height: 100%;
  722. width: 100%;
  723. }
  724. .goods-pay-stop {
  725. background: $color-gray;
  726. line-height: 70rpx;
  727. }
  728. }
  729. /* 标题简介 */
  730. .introduce-section {
  731. background: #fff;
  732. padding: 20rpx 30rpx;
  733. .title {
  734. font-size: 32rpx;
  735. color: $font-color-dark;
  736. height: 50rpx;
  737. line-height: 50rpx;
  738. }
  739. .price-box {
  740. display: flex;
  741. align-items: baseline;
  742. height: 64rpx;
  743. padding: 10rpx 0;
  744. font-size: 26rpx;
  745. color: $uni-color-primary;
  746. }
  747. .price {
  748. font-size: $font-lg + 2rpx;
  749. }
  750. .m-price {
  751. margin: 0 12rpx;
  752. color: $font-color-light;
  753. text-decoration: line-through;
  754. }
  755. .coupon-tip {
  756. align-items: center;
  757. padding: 4rpx 10rpx;
  758. background: $uni-color-primary;
  759. font-size: $font-sm;
  760. color: #fff;
  761. border-radius: 6rpx;
  762. line-height: 1;
  763. transform: translateY(-4rpx);
  764. }
  765. .bot-row {
  766. display: flex;
  767. align-items: center;
  768. height: 50rpx;
  769. font-size: $font-sm;
  770. color: $font-color-light;
  771. text {
  772. flex: 1;
  773. }
  774. }
  775. }
  776. /* 分享 */
  777. .share-section {
  778. display: flex;
  779. align-items: center;
  780. color: $font-color-base;
  781. background: linear-gradient(left, #fdf5f6, #fbebf6);
  782. padding: 12rpx 30rpx;
  783. .share-icon {
  784. display: flex;
  785. align-items: center;
  786. width: 70rpx;
  787. height: 30rpx;
  788. line-height: 1;
  789. border: 1px solid $uni-color-primary;
  790. border-radius: 4rpx;
  791. position: relative;
  792. overflow: hidden;
  793. font-size: 22rpx;
  794. color: $uni-color-primary;
  795. &:after {
  796. content: '';
  797. width: 50rpx;
  798. height: 50rpx;
  799. border-radius: 50%;
  800. left: -20rpx;
  801. top: -12rpx;
  802. position: absolute;
  803. background: $uni-color-primary;
  804. }
  805. }
  806. .iconfavorfill {
  807. position: relative;
  808. z-index: 1;
  809. font-size: 24rpx;
  810. margin-left: 2rpx;
  811. margin-right: 10rpx;
  812. color: #fff;
  813. line-height: 1;
  814. }
  815. .tit {
  816. font-size: $font-base;
  817. margin-left: 10rpx;
  818. }
  819. .iconprompt {
  820. padding: 10rpx;
  821. font-size: 30rpx;
  822. line-height: 1;
  823. }
  824. .share-btn {
  825. flex: 1;
  826. text-align: right;
  827. font-size: $font-sm;
  828. color: $uni-color-primary;
  829. }
  830. .iconenter {
  831. font-size: $font-sm;
  832. margin-left: 4rpx;
  833. color: $uni-color-primary;
  834. }
  835. }
  836. .c-list {
  837. margin-top: 20rpx;
  838. font-size: $font-sm + 2rpx;
  839. color: $font-color-base;
  840. background: #fff;
  841. .c-row {
  842. display: flex;
  843. align-items: center;
  844. padding: 20rpx 30rpx;
  845. position: relative;
  846. }
  847. .tit {
  848. width: 140rpx;
  849. }
  850. .con {
  851. flex: 1;
  852. color: $font-color-dark;
  853. .selected-text {
  854. margin-right: 10rpx;
  855. }
  856. }
  857. .bz-list {
  858. height: 40rpx;
  859. font-size: $font-sm + 2rpx;
  860. color: $font-color-dark;
  861. text {
  862. display: inline-block;
  863. margin-right: 30rpx;
  864. }
  865. }
  866. .con-list {
  867. flex: 1;
  868. display: flex;
  869. flex-direction: column;
  870. color: $font-color-dark;
  871. line-height: 40rpx;
  872. }
  873. .red {
  874. color: $uni-color-primary;
  875. }
  876. }
  877. /* 评价 */
  878. .eva-section {
  879. display: flex;
  880. flex-direction: column;
  881. padding: 20rpx 30rpx;
  882. background: #fff;
  883. margin-top: 16rpx;
  884. .e-header {
  885. display: flex;
  886. align-items: center;
  887. height: 70rpx;
  888. font-size: $font-sm + 2rpx;
  889. color: $font-color-light;
  890. .tit {
  891. font-size: $font-base + 2rpx;
  892. color: $font-color-dark;
  893. margin-right: 4rpx;
  894. }
  895. .tip {
  896. flex: 1;
  897. text-align: right;
  898. }
  899. .iconenter {
  900. margin-left: 10rpx;
  901. }
  902. }
  903. }
  904. .eva-box {
  905. display: flex;
  906. padding: 20rpx 0;
  907. .portrait {
  908. flex-shrink: 0;
  909. width: 80rpx;
  910. height: 80rpx;
  911. border-radius: 100px;
  912. }
  913. .right {
  914. flex: 1;
  915. display: flex;
  916. flex-direction: column;
  917. font-size: $font-base;
  918. color: $font-color-base;
  919. padding-left: 26rpx;
  920. .con {
  921. font-size: $font-base;
  922. color: $font-color-dark;
  923. padding: 20rpx 0;
  924. }
  925. .bot {
  926. display: flex;
  927. justify-content: space-between;
  928. font-size: $font-sm;
  929. color: $font-color-light;
  930. }
  931. }
  932. }
  933. .eva-boxs {
  934. width: 100%;
  935. overflow: hidden;
  936. padding: 10px 28rpx;
  937. background: #f4f4f4;
  938. border-radius: 12rpx;
  939. font-size: $font-sm + 2rpx;
  940. color: #333;
  941. .portrait {
  942. flex-shrink: 0;
  943. width: 80rpx;
  944. height: 80rpx;
  945. border-radius: 100px;
  946. }
  947. .right {
  948. flex: 1;
  949. display: flex;
  950. flex-direction: column;
  951. font-size: $font-base;
  952. color: $font-color-base;
  953. .con {
  954. font-size: $font-base;
  955. color: $font-color-dark;
  956. }
  957. .bot {
  958. display: flex;
  959. justify-content: space-between;
  960. font-size: $font-sm;
  961. color: $font-color-light;
  962. }
  963. }
  964. }
  965. /* 详情 */
  966. .detail-desc {
  967. background: #fff;
  968. margin-top: 16rpx;
  969. /deep/ img {
  970. max-width: 100% !important;
  971. display: inline !important;
  972. }
  973. /deep/ div {
  974. max-width: 100% !important;
  975. }
  976. .d-header {
  977. display: flex;
  978. justify-content: center;
  979. align-items: center;
  980. height: 80rpx;
  981. font-size: $font-base + 2rpx;
  982. color: $font-color-dark;
  983. position: relative;
  984. text {
  985. padding: 0 20rpx;
  986. background: #fff;
  987. position: relative;
  988. z-index: 1;
  989. }
  990. &:after {
  991. position: absolute;
  992. left: 50%;
  993. top: 50%;
  994. transform: translateX(-50%);
  995. width: 300rpx;
  996. height: 0;
  997. content: '';
  998. border-bottom: 1px solid #ccc;
  999. }
  1000. }
  1001. }
  1002. /* 规格选择弹窗 */
  1003. .attr-content {
  1004. padding: 10rpx 30rpx;
  1005. .a-t {
  1006. display: flex;
  1007. image {
  1008. width: 170rpx;
  1009. height: 170rpx;
  1010. flex-shrink: 0;
  1011. margin-top: -40rpx;
  1012. border-radius: 8rpx;
  1013. }
  1014. .right {
  1015. display: flex;
  1016. flex-direction: column;
  1017. padding-left: 24rpx;
  1018. font-size: $font-sm + 2rpx;
  1019. color: $font-color-base;
  1020. line-height: 42rpx;
  1021. .good-name {
  1022. padding-top: 20rpx;
  1023. max-width: 320rpx;
  1024. font-size: 30rpx;
  1025. font-family: PingFang SC;
  1026. font-weight: bold;
  1027. color: #1D2023;
  1028. line-height: 42rpx;
  1029. margin-bottom: 15rpx;
  1030. }
  1031. .price {
  1032. font-size: 60rpx;
  1033. font-family: PingFang SC;
  1034. font-weight: bold;
  1035. color: #FF6F0F;
  1036. // font-size: $font-lg;
  1037. // color: $uni-color-primary;
  1038. // margin-bottom: 10rpx;
  1039. }
  1040. .selected-text {
  1041. margin-right: 10rpx;
  1042. }
  1043. }
  1044. }
  1045. .attr-list {
  1046. display: flex;
  1047. flex-direction: column;
  1048. font-size: $font-base + 2rpx;
  1049. color: $font-color-base;
  1050. padding-top: 30rpx;
  1051. padding-left: 10rpx;
  1052. }
  1053. .item-list {
  1054. padding: 20rpx 0 0;
  1055. display: flex;
  1056. flex-wrap: wrap;
  1057. text {
  1058. display: flex;
  1059. align-items: center;
  1060. justify-content: center;
  1061. background: #eee;
  1062. margin-right: 20rpx;
  1063. margin-bottom: 20rpx;
  1064. border-radius: 100rpx;
  1065. min-width: 60rpx;
  1066. height: 60rpx;
  1067. padding: 0 20rpx;
  1068. font-size: $font-base;
  1069. color: $font-color-dark;
  1070. }
  1071. .selected {
  1072. background: #fbebee;
  1073. color: $uni-color-primary;
  1074. }
  1075. }
  1076. }
  1077. /* 弹出层 */
  1078. .popup {
  1079. position: fixed;
  1080. left: 0;
  1081. top: 0;
  1082. right: 0;
  1083. bottom: 0;
  1084. z-index: 99;
  1085. &.show {
  1086. display: block;
  1087. .mask {
  1088. animation: showPopup 0.2s linear both;
  1089. }
  1090. .layer {
  1091. animation: showLayer 0.2s linear both;
  1092. }
  1093. }
  1094. &.hide {
  1095. .mask {
  1096. animation: hidePopup 0.2s linear both;
  1097. }
  1098. .layer {
  1099. animation: hideLayer 0.2s linear both;
  1100. }
  1101. }
  1102. &.none {
  1103. display: none;
  1104. }
  1105. .mask {
  1106. position: fixed;
  1107. top: 0;
  1108. width: 100%;
  1109. height: 100%;
  1110. z-index: 1;
  1111. background-color: rgba(0, 0, 0, 0.4);
  1112. }
  1113. .layer {
  1114. position: fixed;
  1115. z-index: 99;
  1116. bottom: 0;
  1117. width: 100%;
  1118. min-height: 30vh;
  1119. border-radius: 10rpx 10rpx 0 0;
  1120. background-color: #fff;
  1121. .btn {
  1122. height: 66rpx;
  1123. line-height: 66rpx;
  1124. border-radius: 100rpx;
  1125. // background: $uni-color-primary;
  1126. background: $base-color;
  1127. font-size: $font-base + 2rpx;
  1128. color: #fff;
  1129. margin: 30rpx auto 20rpx;
  1130. }
  1131. }
  1132. @keyframes showPopup {
  1133. 0% {
  1134. opacity: 0;
  1135. }
  1136. 100% {
  1137. opacity: 1;
  1138. }
  1139. }
  1140. @keyframes hidePopup {
  1141. 0% {
  1142. opacity: 1;
  1143. }
  1144. 100% {
  1145. opacity: 0;
  1146. }
  1147. }
  1148. @keyframes showLayer {
  1149. 0% {
  1150. transform: translateY(120%);
  1151. }
  1152. 100% {
  1153. transform: translateY(0%);
  1154. }
  1155. }
  1156. @keyframes hideLayer {
  1157. 0% {
  1158. transform: translateY(0);
  1159. }
  1160. 100% {
  1161. transform: translateY(120%);
  1162. }
  1163. }
  1164. }
  1165. /* 底部操作菜单 */
  1166. .page-bottom {
  1167. position: fixed;
  1168. left: 0rpx;
  1169. bottom: 0rpx;
  1170. z-index: 95;
  1171. display: flex;
  1172. justify-content: center;
  1173. align-items: center;
  1174. width: 750rpx;
  1175. height: 98rpx;
  1176. background: rgba(255, 255, 255, 0.9);
  1177. box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
  1178. // border-radius: 16rpx;
  1179. .p-b-btn {
  1180. display: flex;
  1181. flex-direction: column;
  1182. align-items: center;
  1183. justify-content: center;
  1184. font-size: $font-sm;
  1185. color: $font-color-base;
  1186. width: 100rpx;
  1187. height: 98rpx;
  1188. .iconfont {
  1189. font-size: 40rpx;
  1190. line-height: 48rpx;
  1191. color: $font-color-light;
  1192. }
  1193. &.active,
  1194. &.active .iconfont {
  1195. color: $uni-color-primary;
  1196. }
  1197. .icon-fenxiang2 {
  1198. font-size: 42rpx;
  1199. transform: translateY(-2rpx);
  1200. }
  1201. .iconlikefill {
  1202. font-size: 46rpx;
  1203. }
  1204. }
  1205. .action-btn-group {
  1206. display: flex;
  1207. height: 98rpx;
  1208. // border-radius: 100px;
  1209. overflow: hidden;
  1210. // margin-left: 20rpx;
  1211. position: relative;
  1212. // &:after {
  1213. // content: '';
  1214. // position: absolute;
  1215. // top: 50%;
  1216. // right: 50%;
  1217. // transform: translateY(-50%);
  1218. // height: 28rpx;
  1219. // width: 0;
  1220. // border-right: 1px solid rgba(255, 255, 255, 0.5);
  1221. // }
  1222. .action-btn {
  1223. display: flex;
  1224. align-items: center;
  1225. justify-content: center;
  1226. width: 350rpx;
  1227. height: 100%;
  1228. font-size: $font-base;
  1229. padding: 0;
  1230. border-radius: 0;
  1231. // background: transparent;
  1232. background: #31332D;
  1233. &.buy-now-btn {
  1234. background-color: #303e49;
  1235. }
  1236. &.add-cart-btn {
  1237. background-color: $base-color;
  1238. }
  1239. }
  1240. }
  1241. }
  1242. // 商店头
  1243. .shop-box {
  1244. background-color: #ffffff;
  1245. margin-top: 20rpx;
  1246. margin-bottom: 10rpx;
  1247. padding: 20rpx;
  1248. .shop-img {
  1249. border-radius: 300rpx;
  1250. height: 80rpx;
  1251. width: 80rpx;
  1252. margin-right: 20rpx;
  1253. }
  1254. .shop-button {
  1255. border-radius: 100rpx;
  1256. padding: 10rpx 20rpx;
  1257. color: $color-red;
  1258. border: 1px solid $color-red;
  1259. font-size: $font-lg;
  1260. line-height: 1;
  1261. }
  1262. }
  1263. </style>