shop.vue 24 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057
  1. <template>
  2. <view class="container">
  3. <scroll-view style="height: 100vh;" class="floor-list"
  4. :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower"
  5. refresher-enabled="true">
  6. <view class="carousel">
  7. <swiper indicator-dots circular=true duration="400">
  8. <swiper-item class="swiper-item" v-for="(item,index) in datalist.images" :key="index">
  9. <view class="image-wrapper">
  10. <image
  11. :src="pictureUrl+'/uploads/home/adv/'+item.goodsimage_url"
  12. class="loaded"
  13. mode="aspectFill"
  14. ></image>
  15. </view>
  16. </swiper-item>
  17. </swiper>
  18. </view>
  19. <view class="introduce-section">
  20. <view class="titleLayout" >
  21. <view class="title">{{datalist.goods_name}}</view>
  22. <view @tap="shopDetail" style="display: flex;flex-direction: row;">
  23. <view class="titleRight">
  24. <view style="font-size: 36upx;color: #D9332E;text-align: right;">{{datalist.praise}}%</view>
  25. <view style="color: #606266;font-size: 28upx;">好评率</view>
  26. </view>
  27. <view style="display: flex;align-items: center;">
  28. <uni-icon size="18" type="arrowright"></uni-icon>
  29. </view>
  30. </view>
  31. </view>
  32. <view style="color: #909399;padding: 10upx 0 15upx 0;" v-if="datalist.points>0">购买得{{datalist.points}}圈币</view>
  33. <view class="titleLayout price-box">
  34. <view>
  35. <text class="price-tip">¥</text>
  36. <text class="price">{{datalist.goods_price}}</text>
  37. <text class="m-price">¥{{datalist.goods_marketprice}}</text>
  38. <text class="price-tip" v-if="datalist.goods_storage == 0">已下架</text>
  39. </view>
  40. <view>
  41. <text style="color: #909399">月销售{{datalist.sale_number}}</text>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="c-list">
  46. <view style="display: flex;justify-content: space-between;" class="c-row b-b" @click="toggleSpec">
  47. <view style="font-size: 32upx;color: #909399;">规则数量选择</view>
  48. <view>
  49. <uni-icon size="20" type="arrowright"></uni-icon>
  50. </view>
  51. </view>
  52. </view>
  53. <!-- 评价 -->
  54. <view @tap="shopDetail" style="border-bottom: 20rpx solid #F5F5F5;" class="eva-section">
  55. <view style="display: flex;justify-content: space-between;" class="c-row b-b">
  56. <view style="font-size: 32upx;color: #909399;">评价</view>
  57. <view>
  58. <uni-icon size="20" type="arrowright"></uni-icon>
  59. </view>
  60. </view>
  61. <assess />
  62. </view>
  63. <!-- :class="iScrolltop == 2?'activeColor' : ''" -->
  64. <view class="detail-desc" >
  65. <van-tabs v-model="active" @click="onChange">
  66. <van-tab :name="0" title="详情">
  67. <view style="padding: 0 32upx;">
  68. <rich-text :nodes="datalist.goods_body"></rich-text>
  69. </view>
  70. </van-tab>
  71. <van-tab :name="1" title="常见问题">
  72. <view style="padding: 0 32upx;">
  73. <rich-text :nodes="datalist.issue"></rich-text>
  74. </view>
  75. </van-tab>
  76. </van-tabs>
  77. </view>
  78. <!-- 底部操作菜单 -->
  79. <!-- <view class="page-bottom">
  80. <navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
  81. <text class="yticon icon-xiatubiao--copy"></text>
  82. <text>首页</text>
  83. </navigator>
  84. <navigator url="/pages/index/cart" open-type="navigate" class="p-b-btn">
  85. <text class="yticon icon-gouwuche"></text>
  86. <text>购物车</text>
  87. </navigator>
  88. <view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
  89. <text class="yticon icon-shoucang"></text>
  90. <text>收藏</text>
  91. </view>
  92. <view class="action-btn-group">
  93. <button type="primary" @click="openCar" class=" action-btn no-border add-cart-btn">加入购物车</button>
  94. <button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
  95. </view>
  96. </view> -->
  97. <View class="page-bottom">
  98. <van-goods-action>
  99. <van-goods-action-icon @click="goIndex" icon="bag-o" />
  100. <van-goods-action-icon icon="cart-o" @click="openCar" :info="cartnumber" />
  101. <van-goods-action-icon icon="star-o" v-if="has_collected == 0" @click="toFavorite"/>
  102. <van-goods-action-icon icon="star" v-if="has_collected == 1" icon-class="colored" @click="toFavorite"/>
  103. <van-goods-action-button @click="addCar" text="加入购物车" type="warning" />
  104. <van-goods-action-button text="立即购买" @click="buynow" />
  105. </van-goods-action>
  106. </View>
  107. <!-- 规格-模态层弹窗 -->
  108. <view
  109. class="popup spec"
  110. :class="specClass"
  111. @touchmove.stop.prevent="stopPrevent"
  112. @click="toggleSpec"
  113. >
  114. <!-- 遮罩层 -->
  115. <view class="mask"></view>
  116. <view class="layer attr-content" @click.stop="stopPrevent">
  117. <view class="a-t">
  118. <image :src="nuberImg"></image>
  119. <view class="right">
  120. <text class="price" style="font-size: 36upx;color: #303133">{{datalist.goods_price}}</text>
  121. <view v-if="datalist.spec_list.length > 0 ">
  122. <view class="selected" v-if="specSelected.length > 0 ">
  123. <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
  124. {{sItem.value_name}}X {{shopnumber}}
  125. </text>
  126. </view>
  127. <view class="selected" v-else>
  128. <text class="selected-text">
  129. 请选择规格数量
  130. </text>
  131. </view>
  132. </view>
  133. <view v-else>
  134. X {{shopnumber}}
  135. </view>
  136. </view>
  137. <view @click="closeCar" style="position: absolute;right: 10%;">
  138. <uni-icon size="20" type="close"></uni-icon>
  139. </view>
  140. </view>
  141. <view v-for="(item,index) in datalist.spec_list" :key="index" class="attr-list">
  142. <text>{{item.spec_name}}</text>
  143. <view class="item-list">
  144. <!-- v-if="childItem.pid === item.id" -->
  145. <text
  146. v-for="(childItem, childIndex) in item.value_list"
  147. :key="childIndex" class="tit"
  148. :class="{selected: childItem.selected, disabled: childItem.goods_storage==0}"
  149. @click="selectSpec(index, childItem.value_id, childItem.value_name, childItem.goods_storage)"
  150. >
  151. {{childItem.value_name}}
  152. </text>
  153. </view>
  154. </view>
  155. <view class="numberchange">
  156. <span>数量</span>
  157. <uninumberbox :max="goods_storage" :min="1" @change="changestorage"/>
  158. </view>
  159. </view>
  160. </view>
  161. <!-- 分享 -->
  162. <!-- <share
  163. ref="share"
  164. :contentHeight="580"
  165. :shareList="shareList"
  166. ></share> -->
  167. </scroll-view>
  168. <logionDialog @confirmDiaolog="confirmDiaolog" @cancelDiaolog="cancelDiaolog" :showdialog="showdialog"/>
  169. </view>
  170. </template>
  171. <script>
  172. import {
  173. mapMutations,mapState
  174. } from 'vuex'
  175. import logionDialog from '@/component/loginDialog.vue'
  176. import uninumberbox from '@/component/uinNumber.vue'
  177. import assess from '@/component/assess.vue' // 评价列表
  178. import uniIcon from '@/component/uni-icon/uni-icon.vue'
  179. export default{
  180. components: {
  181. uniIcon,
  182. assess,
  183. uninumberbox,
  184. logionDialog
  185. },
  186. data() {
  187. return {
  188. arrayId:[],
  189. scopemapId: 0,
  190. showdialog: false,
  191. has_collected: false, // 是否收藏
  192. cartnumber: 0, // 购物车数量
  193. changnumber: 100,
  194. ismax: false, // 输入狂禁止数量
  195. goods_storage: '', // 规格商品参数
  196. nuberImg:'',
  197. shopnumber: 1,
  198. pictureUrl: this.pictureUrl,
  199. datalist: {},
  200. store_id: 0, // 酒店id
  201. goodId: 0, // 商品公共id
  202. goods_id: 0, // 商品规格id
  203. windowHeight: 0, // 窗口高度
  204. iScrolltop: 1,
  205. active: 0,
  206. scrollTop: 0,
  207. old: {
  208. scrollTop: 0
  209. },
  210. specClass: 'none',
  211. specSelected:[],
  212. favorite: true,
  213. shareList: [],
  214. imgList: [
  215. ],
  216. desc: `
  217. `,
  218. specList: [
  219. ]
  220. };
  221. },
  222. onLaunch: function(){
  223. this.active = 1;
  224. },
  225. computed:{
  226. ...mapState([
  227. 'hasLogin',
  228. 'userInfo'
  229. ]),
  230. },
  231. onShow: function() {
  232. let _this = this;
  233. uni.getSystemInfo({
  234. success: function (res) {
  235. _this.windowHeight = res.screenHeight;
  236. // console.log("屏幕宽度:"+res.screenWidth);
  237. // console.log("屏幕高度:"+res.screenHeight);
  238. // console.log("可使用窗口宽度:"+res.windowWidth);
  239. // console.log("可使用窗口高度:"+res.windowHeight);
  240. }
  241. });
  242. },
  243. async onLoad(options){
  244. this.goodId = options.id; // 商品Id
  245. this.store_id = options.store_id;
  246. this.getshopdetail(); // 获取商品详情
  247. //规格 默认选中第一条
  248. // this.datalist.spec_list[0].value_list.forEach(item=>{
  249. // for(let cItem of this.specChildList){
  250. // if(cItem.pid === item.id){
  251. // this.$set(cItem, 'selected', true);
  252. // this.specSelected.push(cItem);
  253. // break; //forEach不能使用break
  254. // }
  255. // }
  256. // })
  257. //this.shareList = await this.$api.json('shareList');
  258. },
  259. methods:{
  260. // 跳转到首页
  261. goIndex() {
  262. uni.switchTab({
  263. url:'./index'
  264. })
  265. },
  266. // 更改商品数量
  267. changestorage(e) {
  268. this.shopnumber = e;
  269. },
  270. // 获取商品详情
  271. getshopdetail() {
  272. let params = {};
  273. params.goods_commonid =this.goodId;
  274. params.store_id = this.store_id;
  275. this.request({
  276. url:'/v2/goods/detail',
  277. method:'POST',
  278. data: params,
  279. success: (res)=> {
  280. let { data } = res.data;
  281. this.cartnumber = data.cart;
  282. this.has_collected = data.has_collected;
  283. let array = data;
  284. if(array.spec_list.length == 0) {
  285. this.datalist = data;
  286. this.goods_id = data.goods_list[0].goods_id;
  287. this.goods_storage = data.goods_storage;
  288. }else {
  289. array.spec_list[0].value_list.forEach( (item,idx) => {
  290. item.goods_storage = data.goods_list[idx].goods_storage;
  291. })
  292. this.datalist = array;
  293. }
  294. }
  295. })
  296. },
  297. shopDetail() {
  298. // url: `/pages/index/shop?id=${id}&store_id=${store_id}`
  299. let goodId = this.goodId; // 商品Id
  300. let store_id = this.store_id;
  301. uni.navigateTo({
  302. url: `/pages/index/commemt?goodId=${goodId}&store_id=${store_id}`
  303. });
  304. },
  305. onChange(event) {
  306. this.active = event.detail.name;
  307. console.log(this.active)
  308. },
  309. //规格弹窗开关
  310. toggleSpec() {
  311. this.specClass = 'show';
  312. //this.specSelected = [];
  313. // if(this.specClass === 'show'){
  314. // this.specClass = 'hide';
  315. // setTimeout(() => {
  316. // this.specClass = 'none';
  317. // }, 250);
  318. // }else if(this.specClass === 'none'){
  319. // this.specClass = 'show';
  320. // }
  321. },
  322. // 关闭弹窗
  323. cancelDiaolog() {
  324. this.showdialog = false;
  325. },
  326. // 确定
  327. confirmDiaolog() {
  328. this.showdialog = false;
  329. uni.navigateTo({
  330. url: '../myCenter/information' // 我的收藏
  331. })
  332. },
  333. openCar() {
  334. if(this.hasLogin) {
  335. let store_id = this.store_id;
  336. uni.navigateTo({
  337. url:`/pages/index/cart?store_id=${store_id}`
  338. })
  339. }else {
  340. this.showdialog = true;
  341. }
  342. },
  343. // 加入购物车
  344. addCar() {
  345. if(this.hasLogin) {
  346. if(this.specSelected.length == 0 && this.datalist.spec_list.length != 0) {
  347. this.specClass = 'show';
  348. this.$msg("请选择规格数量");
  349. return;
  350. }else {
  351. this.request({
  352. url:'/v2/order/add_cart',
  353. method:'POST',
  354. data: {
  355. goods_id: this.goods_id,
  356. goods_num: this.shopnumber
  357. },
  358. success: () => {
  359. this.$msg("商品添加成功");
  360. this.specClass = 'none';
  361. this.getshopdetail();
  362. }
  363. })
  364. }
  365. }else {
  366. this.showdialog = true;
  367. }
  368. },
  369. // 立即购买
  370. buynow() {
  371. if(this.hasLogin) {
  372. }else {
  373. this.showdialog = true;
  374. }
  375. },
  376. closeCar() {
  377. this.specClass = 'none';
  378. },
  379. //选择规格
  380. selectSpec(index, pid,value_name,goods_storage){
  381. this.specSelected = [];
  382. if(goods_storage == 0) {
  383. return;
  384. }
  385. let list = this.datalist.spec_list[index].value_list;
  386. this.datalist.spec_list[index].value_list.forEach(item=>{
  387. if(item.value_id === pid){
  388. this.$set(item, 'selected', true);
  389. }else {
  390. this.$set(item, 'selected', false);
  391. }
  392. })
  393. let array = [];
  394. for(let i = 0; i < this.datalist.spec_list.length; i++) {
  395. for(let j = 0; j<this.datalist.spec_list[i].value_list.length;j++) {
  396. if(this.datalist.spec_list[i].value_list[j].selected) {
  397. array.push(this.datalist.spec_list[i].value_list[j].value_id);
  398. }
  399. }
  400. }
  401. this.arrayId = array;
  402. if(this.arrayId.length == this.datalist.spec_list.length) {
  403. console.log("进来了")
  404. this.scopemapId = array.join("_");
  405. let goodId = this.datalist.spec_map[this.scopemapId]; //
  406. let items = this.datalist.goods_list[goodId]
  407. items.value_name = value_name;
  408. this.nuberImg = items.spec_img;
  409. this.specSelected.push(items)
  410. this.goods_storage = items.goods_storage;
  411. this.goods_id = items.goods_id;
  412. }
  413. // if(this.arrayId.length == this.datalist.spec_list.length) {
  414. // }
  415. // let obj = {};
  416. // obj.firstId = index;
  417. // obj.pid = pid;
  418. // this.arrayId.push(obj);
  419. // console.log(this.arrayId)
  420. // let arr = this.arrayId;
  421. // for(var i=0; i<arr.length; i++){
  422. // for(var j=i+1; j<arr.length; j++){
  423. // if(arr[i].firstId==arr[j].firstId){
  424. // arr.splice(j,1);
  425. // j--;
  426. // }
  427. // }
  428. // }
  429. // let newarray = []
  430. // arr.forEach(item => {
  431. // newarray.push(item.pid);
  432. // })
  433. // this.arrayId = arr;
  434. // if(this.arrayId.length == 0) {
  435. // this.scopemapId = newarray.toString(); ;
  436. // }else {
  437. // this.scopemapId = newarray.join("_");
  438. // }
  439. // console.log(this.scopemapId);
  440. //this.datalist.spec_list[index].value_list = list;
  441. },
  442. // 滚动到顶部
  443. upper(e) {
  444. console.log(e)
  445. console.log("顶部")
  446. },
  447. // 滚到底部
  448. lower(e) {
  449. console.log("底部")
  450. },
  451. // 滚动时触发
  452. scroll(e) {
  453. this.old.scrollTop = e.detail.scrollTop
  454. if(e.detail.scrollTop > this.windowHeight) {
  455. this.iScrolltop = 2;
  456. }else {
  457. this.iScrolltop = 1;
  458. }
  459. },
  460. //收藏
  461. toFavorite(){
  462. if(this.hasLogin) {
  463. this.request({
  464. url: '/v1/favorites/collect',
  465. method: 'post',
  466. data: {
  467. type:'goods',
  468. fav_id: this.goodId
  469. },
  470. success: () => {
  471. this.getshopdetail()
  472. }
  473. })
  474. }else {
  475. this.showdialog = true;
  476. }
  477. //this.favorite = !this.favorite;
  478. },
  479. buy(){
  480. uni.navigateTo({
  481. url: './sureBuy'
  482. })
  483. },
  484. stopPrevent(){}
  485. },
  486. }
  487. </script>
  488. <style lang='scss'>
  489. page{
  490. /* background: $page-color-base; */
  491. /* padding-bottom: 160upx; */
  492. position: relative;
  493. }
  494. .icon-you{
  495. font-size: 28upx + 2upx;
  496. color: #888;
  497. }
  498. .carousel {
  499. height: 722upx;
  500. position:relative;
  501. swiper{
  502. height: 100%;
  503. }
  504. .image-wrapper{
  505. width: 100%;
  506. height: 100%;
  507. }
  508. .swiper-item {
  509. display: flex;
  510. justify-content: center;
  511. align-content: center;
  512. height: 750upx;
  513. overflow: hidden;
  514. image {
  515. width: 100%;
  516. height: 100%;
  517. }
  518. }
  519. }
  520. .titleLayout {
  521. display: flex;
  522. justify-content: space-between;
  523. padding-bottom: 20upx;
  524. }
  525. /* 标题简介 */
  526. .introduce-section{
  527. background: #fff;
  528. padding: 20upx 30upx;
  529. .title{
  530. font-size: 36upx;
  531. color: #303133;
  532. height: 50upx;
  533. line-height: 50upx;
  534. width: 70%;
  535. white-space:nowrap;
  536. overflow:hidden;
  537. text-overflow:ellipsis;
  538. }
  539. .titleRight {
  540. border-left: 1px solid #F5F5F5;
  541. padding-left: 32upx;
  542. }
  543. .price-box{
  544. display:flex;
  545. align-items:baseline;
  546. height: 64upx;
  547. padding: 10upx 0;
  548. font-size: 26upx;
  549. color:#fa436a;
  550. }
  551. .price{
  552. font-size: $font-lg + 2upx;
  553. }
  554. .m-price{
  555. margin:0 12upx;
  556. color: #909399;
  557. text-decoration: line-through;
  558. }
  559. .coupon-tip{
  560. align-items: center;
  561. padding: 4upx 10upx;
  562. background: #fa436a;
  563. font-size: 24upx;
  564. color: #fff;
  565. border-radius: 6upx;
  566. line-height: 1;
  567. transform: translateY(-4upx);
  568. }
  569. .bot-row{
  570. display:flex;
  571. align-items:center;
  572. height: 50upx;
  573. font-size: 24upx;
  574. color: #909399;
  575. text{
  576. flex: 1;
  577. }
  578. }
  579. }
  580. /* 分享 */
  581. .share-section{
  582. display:flex;
  583. align-items:center;
  584. color: #606266;
  585. background: linear-gradient(left, #fdf5f6, #fbebf6);
  586. padding: 12upx 30upx;
  587. .share-icon{
  588. display:flex;
  589. align-items:center;
  590. width: 70upx;
  591. height: 30upx;
  592. line-height: 1;
  593. border: 1px solid #fa436a;
  594. border-radius: 4upx;
  595. position:relative;
  596. overflow: hidden;
  597. font-size: 22upx;
  598. color: #fa436a;
  599. &:after{
  600. content: '';
  601. width: 50upx;
  602. height: 50upx;
  603. border-radius: 50%;
  604. left: -20upx;
  605. top: -12upx;
  606. position:absolute;
  607. background: #fa436a;
  608. }
  609. }
  610. .icon-xingxing{
  611. position:relative;
  612. z-index: 1;
  613. font-size: 24upx;
  614. margin-left: 2upx;
  615. margin-right: 10upx;
  616. color: #fff;
  617. line-height: 1;
  618. }
  619. .tit{
  620. font-size: 28upx;
  621. margin-left:10upx;
  622. }
  623. .icon-bangzhu1{
  624. padding: 10upx;
  625. font-size: 30upx;
  626. line-height: 1;
  627. }
  628. .share-btn{
  629. flex: 1;
  630. text-align:right;
  631. font-size: 24upx;
  632. color: #fa436a;
  633. }
  634. .icon-you{
  635. font-size: 24upx;
  636. margin-left: 4upx;
  637. color: #fa436a;
  638. }
  639. }
  640. .c-list{
  641. font-size: 24upx + 2upx;
  642. color: #606266;
  643. background: #fff;
  644. border-top: 20upx solid #F5F5F5;
  645. border-bottom: 20upx solid #F5F5F5;
  646. .c-row{
  647. display:flex;
  648. align-items:center;
  649. padding: 20upx 30upx;
  650. position:relative;
  651. }
  652. .tit{
  653. width: 140upx;
  654. }
  655. .con{
  656. flex: 1;
  657. color: #303133;
  658. .selected-text{
  659. margin-right: 10upx;
  660. }
  661. }
  662. .bz-list{
  663. height: 40upx;
  664. font-size: 24upx+2upx;
  665. color: #303133;
  666. text{
  667. display: inline-block;
  668. margin-right: 30upx;
  669. }
  670. }
  671. .con-list{
  672. flex: 1;
  673. display:flex;
  674. flex-direction: column;
  675. color: #303133;
  676. line-height: 40upx;
  677. }
  678. .red{
  679. color: #fa436a;
  680. }
  681. }
  682. /* 评价 */
  683. .eva-section{
  684. display: flex;
  685. flex-direction: column;
  686. padding: 20upx 30upx;
  687. background: #fff;
  688. margin-top: 16upx;
  689. .e-header{
  690. display: flex;
  691. align-items: center;
  692. height: 70upx;
  693. font-size: 24upx + 2upx;
  694. color: #909399;
  695. .tit{
  696. font-size: 28upx + 2upx;
  697. color: #303133;
  698. margin-right: 4upx;
  699. }
  700. .tip{
  701. flex: 1;
  702. text-align: right;
  703. }
  704. .icon-you{
  705. margin-left: 10upx;
  706. }
  707. }
  708. }
  709. .eva-box{
  710. display: flex;
  711. padding: 20upx 0;
  712. .portrait{
  713. flex-shrink: 0;
  714. width: 80upx;
  715. height: 80upx;
  716. border-radius: 100px;
  717. }
  718. .right{
  719. flex: 1;
  720. display: flex;
  721. flex-direction: column;
  722. font-size: 28upx;
  723. color: #606266;
  724. padding-left: 26upx;
  725. .con{
  726. font-size: 28upx;
  727. color: #303133;
  728. padding: 20upx 0;
  729. }
  730. .bot{
  731. display: flex;
  732. justify-content: space-between;
  733. font-size: 24upx;
  734. color:#909399;
  735. }
  736. }
  737. }
  738. /* 详情 */
  739. .detail-desc{
  740. background: #fff;
  741. margin-top: 16upx;
  742. margin-bottom: 150rpx;
  743. width: 100%;
  744. .d-header{
  745. display: flex;
  746. justify-content: center;
  747. align-items: center;
  748. height: 80upx;
  749. font-size: 28upx + 2upx;
  750. color: #303133;
  751. position: relative;
  752. text{
  753. padding: 0 20upx;
  754. background: #fff;
  755. position: relative;
  756. z-index: 1;
  757. }
  758. &:after{
  759. position: absolute;
  760. left: 50%;
  761. top: 50%;
  762. transform: translateX(-50%);
  763. width: 300upx;
  764. height: 0;
  765. content: '';
  766. border-bottom: 1px solid #ccc;
  767. }
  768. }
  769. }
  770. /* 规格选择弹窗 */
  771. .attr-content{
  772. padding: 10upx 30upx;
  773. .a-t{
  774. display: flex;
  775. image{
  776. width: 170upx;
  777. height: 170upx;
  778. flex-shrink: 0;
  779. margin-top: -40upx;
  780. border-radius: 8upx;;
  781. }
  782. .right{
  783. display: flex;
  784. flex-direction: column;
  785. padding-left: 24upx;
  786. font-size: 24upx + 2upx;
  787. color: #606266;
  788. line-height: 42upx;
  789. justify-content: space-around;
  790. .price{
  791. font-size: $font-lg;
  792. color: #fa436a;
  793. margin-bottom: 10upx;
  794. }
  795. .selected-text{
  796. margin-right: 10upx;
  797. }
  798. }
  799. }
  800. .attr-list{
  801. display: flex;
  802. flex-direction: column;
  803. font-size: 28upx + 2upx;
  804. color: #606266;
  805. padding-top: 30upx;
  806. padding-left: 10upx;
  807. }
  808. .item-list{
  809. padding: 20upx 0 0;
  810. display: flex;
  811. flex-wrap: wrap;
  812. text{
  813. display: flex;
  814. align-items: center;
  815. justify-content: center;
  816. background: #eee;
  817. margin-right: 20upx;
  818. margin-bottom: 20upx;
  819. border-radius: 100upx;
  820. min-width: 60upx;
  821. height: 60upx;
  822. padding: 0 20upx;
  823. font-size: 28upx;
  824. color: #303133;
  825. }
  826. .selected{
  827. background: #fbebee;
  828. color: #fa436a;
  829. }
  830. .disabled {
  831. color:#fbebee;
  832. background: rgba(245,245,245, 0.5);
  833. }
  834. }
  835. }
  836. /* 弹出层 */
  837. .popup {
  838. position: fixed;
  839. left: 0;
  840. top: 0;
  841. right: 0;
  842. bottom: 100upx;
  843. z-index: 99;
  844. &.show {
  845. display: block;
  846. .mask{
  847. animation: showPopup 0.2s linear both;
  848. }
  849. .layer {
  850. animation: showLayer 0.2s linear both;
  851. }
  852. }
  853. &.hide {
  854. .mask{
  855. animation: hidePopup 0.2s linear both;
  856. }
  857. .layer {
  858. animation: hideLayer 0.2s linear both;
  859. }
  860. }
  861. &.none {
  862. display: none;
  863. }
  864. .mask{
  865. position: fixed;
  866. top: 0;
  867. width: 100%;
  868. height: 90%;
  869. z-index: 1;
  870. background-color: rgba(0, 0, 0, 0.4);
  871. }
  872. .layer {
  873. position: fixed;
  874. z-index: 99;
  875. bottom: 100upx;
  876. width: 100%;
  877. min-height: 40vh;
  878. border-radius: 10upx 10upx 0 0;
  879. background-color: #fff;
  880. .btn{
  881. height: 66upx;
  882. line-height: 66upx;
  883. border-radius: 100upx;
  884. background: #fa436a;
  885. font-size: 28upx + 2upx;
  886. color: #fff;
  887. margin: 30upx auto 20upx;
  888. }
  889. }
  890. @keyframes showPopup {
  891. 0% {
  892. opacity: 0;
  893. }
  894. 100% {
  895. opacity: 1;
  896. }
  897. }
  898. @keyframes hidePopup {
  899. 0% {
  900. opacity: 1;
  901. }
  902. 90% {
  903. opacity: 0;
  904. }
  905. }
  906. @keyframes showLayer {
  907. 0% {
  908. transform: translateY(120%);
  909. }
  910. 100% {
  911. transform: translateY(0%);
  912. }
  913. }
  914. @keyframes hideLayer {
  915. 0% {
  916. transform: translateY(0);
  917. }
  918. 100% {
  919. transform: translateY(120%);
  920. }
  921. }
  922. }
  923. .colored {
  924. color: red;
  925. }
  926. .van-sticky {
  927. /* z-index: 0!important; */
  928. }
  929. /* 详情固定 */
  930. .activeColor {
  931. /* background: #fff!important; */
  932. position: fixed;
  933. background-color: #fff;
  934. top: 0upx;
  935. z-index: 99;
  936. margin-top: 0;
  937. }
  938. .numberchange {
  939. padding-top: 48px;
  940. overflow: hidden;
  941. clear: both;
  942. padding-right: 59rpx;
  943. }
  944. .uni-numbox {
  945. float: right;
  946. }
  947. /* 底部操作菜单 */
  948. .page-bottom{
  949. position: fixed;
  950. left: 0;
  951. bottom: 0;
  952. display: flex;
  953. justify-content: center;
  954. align-items: center;
  955. width: 100%;
  956. height: 100upx;
  957. z-index: 99;
  958. background: rgba(255,255,255,.9);
  959. .p-b-btn{
  960. display:flex;
  961. flex-direction: column;
  962. align-items: center;
  963. justify-content: center;
  964. font-size: 24upx;
  965. color: #606266;
  966. width: 96upx;
  967. height: 80upx;
  968. .yticon{
  969. font-size: 40upx;
  970. line-height: 48upx;
  971. color: #909399;
  972. }
  973. &.active, &.active .yticon{
  974. color: #fa436a;
  975. }
  976. .icon-fenxiang2{
  977. font-size: 42upx;
  978. transform: translateY(-2upx);
  979. }
  980. .icon-shoucang{
  981. font-size: 46upx;
  982. }
  983. }
  984. .action-btn-group{
  985. display: flex;
  986. height: 76upx;
  987. border-radius: 100px;
  988. overflow: hidden;
  989. box-shadow: 0 20upx 40upx -16upx #fa436a;
  990. box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  991. background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
  992. margin-left: 20upx;
  993. position:relative;
  994. &:after{
  995. content: '';
  996. position:absolute;
  997. top: 50%;
  998. right: 50%;
  999. transform: translateY(-50%);
  1000. height: 28upx;
  1001. width: 0;
  1002. border-right: 1px solid rgba(255,255,255,.5);
  1003. }
  1004. .action-btn{
  1005. display:flex;
  1006. align-items: center;
  1007. justify-content: center;
  1008. width: 180upx;
  1009. height: 100%;
  1010. font-size: 28upx ;
  1011. padding: 0;
  1012. border-radius: 0;
  1013. background: transparent;
  1014. }
  1015. }
  1016. }
  1017. </style>