product.vue 27 KB

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