detail.vue 29 KB

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