detail.vue 25 KB

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