product.vue 27 KB

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