jfproduct.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901
  1. <template>
  2. <view class="container">
  3. <!-- 轮播图 -->
  4. <top-swiper :imgList="imgList"></top-swiper>
  5. <!-- 标题 -->
  6. <view class="introduce-section">
  7. <text class="title clamp2">{{ goodsObjact.goods_name }}</text>
  8. <view class="price-box">
  9. <view class="price">
  10. {{ ((goodsObjact.price*1)*(three_integral*1)).toFixed(2) }}<text class="price-tip">积分</text>
  11. <text class="text">/份</text>
  12. </view>
  13. </view>
  14. <view class="bot-row">
  15. <text>快递: {{ goodsObjact.express_fee }}</text>
  16. <text style="text-align: left;">已售: {{ goodsObjact.sales_show }}</text>
  17. <!-- <text style="text-align: right;">{{ storeObjact.address | address }}</text> -->
  18. </view>
  19. </view>
  20. <estimate @navTo="navTo('/pages/product/reply?id=' + goodsid)" v-if="reply" :reply="reply" :list="list"></estimate>
  21. <!-- 规格信息 -->
  22. <fresh-detail :goodsObjact="goodsObjact"></fresh-detail>
  23. <!-- 图文详情 -->
  24. <content-text :description="description"></content-text>
  25. <!-- 底部高度撑开 -->
  26. <view class="contentBottomHeight" style="background:#fff;"></view>
  27. <!-- 底部操作菜单 -->
  28. <view class="contentBottomHeight" style="position: fixed;bottom: 0rpx;" @click="specOPne(1)">
  29. 立即兑换
  30. </view>
  31. <!-- <product-bottom v-if="goodsObjact.id" @buy="buy" :goodsObjact="goodsObjact" :goodsid="goodsid" @specOPne="specOPne"></product-bottom> -->
  32. <!-- 规格-模态层弹窗 -->
  33. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
  34. <!-- 遮罩层 -->
  35. <view class="mask"></view>
  36. <view class="layer attr-content" @click.stop="stopPrevent">
  37. <view class="a-t">
  38. <image :src="actionImage"></image>
  39. <view class="right">
  40. <text class="name clamp2">{{ goodsObjact.goods_name }}</text>
  41. <text class="price">{{ ((actionPrice * goodsNumber)*(three_integral*1)).toFixed(2) }}</text>
  42. <!-- <view class="selected" v-if="specList != ''">
  43. 已选:
  44. <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem | showName }}</text>
  45. </view> -->
  46. </view>
  47. </view>
  48. <view v-for="(item, index) in specList" :key="index" class="attr-list">
  49. <text>{{ item.name }}</text>
  50. <view class="item-list" v-show="loaded">
  51. <text
  52. v-for="(childItem, childIndex) in item.item"
  53. :key="childIndex"
  54. class="tit"
  55. :class="{ selected: childItem.check }"
  56. @click="selectSpec(childItem, item, index)"
  57. >
  58. {{ childItem.name }}
  59. </text>
  60. </view>
  61. </view>
  62. <!-- <view v-if="goodsObjact.is_gp!=1" class="attr-list">
  63. <text>购买数量</text>
  64. <view class="item-list">
  65. <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
  66. </view>
  67. </view> -->
  68. <navigator url="/pages/set/address?source=1" class="address-section">
  69. <view class="order-content" v-if="addressData.real_name">
  70. <text class="iconfont iconlocation"></text>
  71. <view class="cen">
  72. <view class="top">
  73. <text class="name">{{ addressData.real_name }}</text>
  74. <text class="mobile">{{ addressData.phone }}</text>
  75. </view>
  76. <text class="address">{{ addressData.province + addressData.city + addressData.district }} {{ addressData.detail }}</text>
  77. </view>
  78. <text class="iconfont iconenter"></text>
  79. </view>
  80. <view class="order-content" v-if="!addressData.real_name">
  81. <view class="addAddress">
  82. <text class="iconfont iconaddition"></text>
  83. <text>选择收货地址</text>
  84. </view>
  85. </view>
  86. <image class="a-bg" :src="addressImg"></image>
  87. </navigator>
  88. <button class="btn" @click.stop="gobuy" v-show="buys_show">完成</button>
  89. <!-- <button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button> -->
  90. </view>
  91. </view>
  92. </view>
  93. </template>
  94. <script>
  95. import { goodsDetail, cartAdd, getJfDetail, getBl } from '@/api/product.js';
  96. import { jfOrderCreate } from '@/api/order.js'
  97. import { mapState,mapMutations } from 'vuex';
  98. import store from '@/store/index.js';
  99. import { saveUrl } from '@/utils/loginUtils.js';
  100. import { getUserInfo } from '@/api/user.js'
  101. import uniNumberBox from '@/components/uni-number-box.vue';
  102. // #ifdef H5
  103. import { weixindata } from '@/utils/wxAuthorized';
  104. // #endif
  105. // 头部轮播图
  106. import topSwiper from './common/topSwiper.vue';
  107. // 标题
  108. import productContent from './common/productContent.vue';
  109. // 到货时间及优惠
  110. import discounts from './common/discounts.vue';
  111. // 规格信息
  112. import freshDetail from './common/freshDetail.vue';
  113. // 图文详情
  114. import contentText from './common/contentText.vue';
  115. // 底部按钮
  116. import productBottom from './common/productBottom.vue';
  117. // 猜你喜欢
  118. import guessLike from './common/guessLike.vue';
  119. // 评价
  120. import estimate from './common/estimate.vue';
  121. export default {
  122. components: {
  123. guessLike,
  124. topSwiper,
  125. productContent,
  126. discounts,
  127. freshDetail,
  128. contentText,
  129. productBottom,
  130. estimate,
  131. uniNumberBox
  132. },
  133. data() {
  134. return {
  135. specLList: [],
  136. loaded: true,
  137. addressImg:
  138. 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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',
  139. // 当前选中的支付方式
  140. addressData: {},
  141. goodsStore: 0, //选中库存
  142. specList: [],
  143. buys_show: true,
  144. buys_shows: false,
  145. specSelected: [], //选中的分类
  146. specClass: 'none', //显示隐藏弹窗
  147. many: 1, //1是单规格 2是多规格
  148. reply: '', //评论
  149. list: '', //商品详情的数据
  150. type: 1, //默认支付方式add为
  151. goodsType: 0,
  152. goodsNumber: 1, //购买数量
  153. goodsid: '', //商品id
  154. description: '', //商品描述
  155. goodsObjact: {
  156. percent: 1
  157. }, //保存商品数据
  158. //图片循环
  159. imgList: [],
  160. // 对比对象
  161. actionPrice: 0, //默认选中商品价格
  162. actionImage: '', //默认选中图片
  163. good_list: '', //猜你喜欢列表
  164. goodsNumberMax: 0, //最大可购买数量
  165. // 倒计时数据保存
  166. seckillObj: {
  167. stopTime: 0, //结束时间
  168. stop: false, //是否结束
  169. stopTimeH: 0, //小时
  170. stopTimeM: 0, //分钟
  171. stopTimeS: 0, //秒钟
  172. stopTimeD: 0, //天
  173. upTime: 0 //更新组件内部组件用
  174. },
  175. // 拼团数据保存
  176. pink: {
  177. id: '', //拼团编号
  178. uid: '', //用户编号
  179. people: '', //拼团人数
  180. price: '', //拼团价格
  181. stop_time: '', //拼团结束时间
  182. nickname: '', //团长昵称
  183. avatar: '', //团长头像
  184. count: '', //拼团剩余人数
  185. h: '', //时
  186. i: '', //分
  187. s: '' //秒
  188. },
  189. userInfo: '',
  190. three_integral: 1,
  191. };
  192. },
  193. filters: {
  194. parseIntTo(percent) {
  195. percent = +percent * 100;
  196. if (percent % 1 === 0) {
  197. return percent;
  198. } else {
  199. percent = percent.toFixed(1);
  200. return percent;
  201. }
  202. }
  203. },
  204. async onLoad(options) {
  205. let obj = this;
  206. obj.getBl()
  207. obj.userInfo = uni.getStorageSync('userInfo');
  208. //保存商品id
  209. this.goodsid = options.id;
  210. this.goodsType = options.type;
  211. // 判断有无人邀请
  212. if (options.spread) {
  213. // 存储邀请人
  214. uni.setStorageSync('spread', options.spread);
  215. }
  216. saveUrl();
  217. this.goodsDetail();
  218. // 注册邀请信息
  219. // #ifdef H5
  220. let bool = uni.getStorageSync('weichatBrowser') || '';
  221. if (bool) {
  222. weixindata();
  223. }
  224. // #endif
  225. },
  226. computed: {
  227. ...mapState(['weichatObj', 'baseURL', 'urlFile'])
  228. },
  229. // 分享
  230. onShareAppMessage(options) {
  231. // 设置菜单中的转发按钮触发转发事件时的转发内容
  232. let pages = getCurrentPages(); //获取加载的页面
  233. let currentPage = pages[pages.length - 1]; //获取当前页面的对象
  234. let url = currentPage.route; //当前页面url
  235. let item = currentPage.options; //如果要获取url中所带的参数可以查看options
  236. let shareObj = {
  237. title: this.goodsObjact.store_name + ' 价格:' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
  238. path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面,必须是以‘/’开头的完整路径
  239. imageUrl: this.goodsObjact.image,
  240. success: function(res) {
  241. // 转发成功之后的回调
  242. if (res.errMsg == 'shareAppMessage:ok') {
  243. }
  244. },
  245. fail: function() {
  246. // 转发失败之后的回调
  247. if (res.errMsg == 'shareAppMessage:fail cancel') {
  248. // 用户取消转发
  249. } else if (res.errMsg == 'shareAppMessage:fail') {
  250. // 转发失败,其中 detail message 为详细失败信息
  251. }
  252. }
  253. };
  254. return shareObj;
  255. },
  256. methods: {
  257. ...mapMutations('user',['setUserInfo']),
  258. getBl(){
  259. let obj = this
  260. getBl().then(res => {
  261. console.log(res)
  262. obj.three_integral = res.data.three_integral
  263. console.log(obj.three_integral)
  264. })
  265. },
  266. numberChange(e){
  267. this.goodsNumber = e.number;
  268. },
  269. //选择规格
  270. selectSpec(item, arr, ind) {
  271. let obj = this;
  272. console.log(item, arr, ind)
  273. arr.item.forEach(function(e) {
  274. e.check = false;
  275. });
  276. obj.loaded = false
  277. item.check = true;
  278. obj.loaded = true
  279. console.log(item,arr,'item+9+++')
  280. obj.specSelected[ind] = item.id;
  281. let str = obj.specSelected.join('_');
  282. console.log(str,'str')
  283. let chooseGood = obj.specLList[str]
  284. console.log(chooseGood,'price++++++++++++++++')
  285. // // 获取当前选中的对象
  286. // if (obj.productValue[str]) {
  287. // obj.buys_show = true;
  288. // obj.buys_shows = false;
  289. // obj.actionPrice = obj.productValue[str].price;
  290. // obj.goodsNumberMax = obj.productValue[str].stock;
  291. // obj.actionImage = obj.productValue[str].image;
  292. // obj.uniqueId = obj.productValue[str].unique;
  293. // obj.goodsStore = obj.productValue[str].stock;
  294. // } else {
  295. // (obj.buys_show = false), (obj.buys_shows = true);
  296. // }
  297. // if (obj.goodsStore == 0) {
  298. // obj.buys_show = false;
  299. // obj.buys_shows = true;
  300. // }
  301. // obj.specSelected[ind] = item.id;
  302. console.log(obj.specSelected,'obj.specSelected++++++')
  303. obj.actionPrice = chooseGood.price
  304. obj.actionImage = chooseGood.image || obj.goodsObjact.image[0].url; //保存默认选中商品图片
  305. console.log(obj.actionPrice,'obj.actionPrice++++++')
  306. },
  307. // 打開彈窗
  308. specOPne(type = 1) {
  309. let obj = this;
  310. obj.specClass = 'show';
  311. obj.type = type;
  312. },
  313. //规格弹窗开关
  314. toggleSpec(str) {
  315. if (this.specClass === 'show') {
  316. this.specClass = 'hide';
  317. setTimeout(() => {
  318. this.specClass = 'none';
  319. }, 250);
  320. } else if (this.specClass === 'none') {
  321. this.specClass = 'show';
  322. }
  323. // 保存当前购买类型
  324. this.type = str;
  325. },
  326. //领取优惠券
  327. Getcoupon() {
  328. uni.navigateTo({
  329. url: '/pages/coupon/getcoupon'
  330. });
  331. },
  332. //详情页
  333. navToDetailPage(item) {
  334. let id = item.id;
  335. uni.navigateTo({
  336. url: '/pages/product/product?id=' + id
  337. });
  338. },
  339. // 跳转页面
  340. navTo(url) {
  341. uni.navigateTo({
  342. url: '/pages/product/reply?id=' + this.goodsid
  343. });
  344. },
  345. //加入购物车
  346. Addcar(item) {
  347. let obj = this;
  348. let data = {
  349. cartNum: '1', //商品数量
  350. uniqueId: '', //商品标签
  351. new: 0, //商品是否新增加到购物车1为不加入0为加入
  352. mer_id: '',
  353. productId: item.id //商品编号
  354. }
  355. cartAdd(data)
  356. .then(function(e) {
  357. uni.showToast({
  358. title: '成功加入购物车',
  359. type: 'top',
  360. duration: 500,
  361. icon: 'none'
  362. });
  363. obj.goodsDetail();
  364. })
  365. .catch(e => {
  366. console.log(e);
  367. });
  368. },
  369. goodsDetail() {
  370. let obj = this;
  371. console.log(obj.goodsid,'obj.goodsid')
  372. // getJfDetail({id: obj.goodsid}).then(res => {
  373. // console.log(res)
  374. // })
  375. // 获取普通商品信息
  376. getJfDetail({id:this.goodsid}).then(function({ data }) {
  377. obj.list = data;
  378. obj.good_list = data.good_list; //保存猜你喜欢列表
  379. obj.reply = data.reply; //保存评论列表
  380. let goods = data.goods;
  381. obj.goodsObjact = goods;
  382. if (obj.goodsObjact.content != null) {
  383. obj.description = obj.goodsObjact.content.replace(/\<img/gi, '<img class="rich-img"');
  384. } //小程序商品详情图超出屏幕问题
  385. obj.imgList = goods.image.map(item => {return item.url}); //保存轮播图
  386. if(goods.spec_items.length > 0) {
  387. obj.specList = goods.spec_items; //保存分类列表
  388. obj.specLList = goods.spec
  389. for (let i = 0; i < obj.specList.length; i++) {
  390. // 设置默认数据
  391. let attrValue = obj.specList[i].item[0];
  392. attrValue.check = true;
  393. obj.specSelected.push(attrValue.id);
  394. console.log(obj.specSelected,'obj.specSelected')
  395. // obj.actionImage = goods.image[0].url; //保存默认选中商品图片
  396. }
  397. let str = obj.specSelected.join('_');
  398. let chooseGood = obj.specLList[str]
  399. obj.actionPrice = chooseGood.price
  400. obj.actionImage = chooseGood.image || obj.goodsObjact.image[0].url; //保存默认选中商品图片
  401. }else {
  402. obj.actionPrice = goods.price; //保存默认选中商品价格
  403. obj.actionImage = goods.image[0].url; //保存默认选中商品图片
  404. obj.goodsNumberMax = 1; //保存默认选中最大可购买商品数量
  405. }
  406. // if()
  407. obj.productValue = data.productValue; //保存分类查询数据
  408. });
  409. },
  410. // 立即购买
  411. buy() {
  412. let obj = this;
  413. // 创建传值对象
  414. let data = {
  415. cartNum: obj.goodsNumber, //商品数量
  416. new: 1,
  417. productId: obj.goodsid, //商品编号
  418. uniqueId: obj.uniqueId
  419. };
  420. if (obj.type == 2) {
  421. data.new = 0;
  422. }
  423. if(obj.goodsObjact.is_gp==1){
  424. data.is_gp = 1;
  425. }
  426. cartAdd(data)
  427. .then(function(e) {
  428. let da = e.data;
  429. if (obj.type == 1) {
  430. // 跳转到支付页
  431. let url = '/pages/order/createOrder?id=' + da.cartId;
  432. if(obj.goodsObjact.is_gp==1){
  433. data.is_gp = 1;
  434. url+=`&is_gp=1`
  435. }
  436. uni.navigateTo({
  437. url
  438. });
  439. }
  440. if (obj.type == 2) {
  441. uni.showToast({
  442. title: '成功加入购物车',
  443. type: 'top',
  444. duration: 2000,
  445. icon: 'none'
  446. });
  447. obj.goodsDetail();
  448. }
  449. obj.toggleSpec();
  450. })
  451. .catch(e => {
  452. console.log(e);
  453. });
  454. },
  455. // 阻止触发上级事件
  456. stopPrevent() {},
  457. // 购买积分商品
  458. gobuy() {
  459. let obj = this
  460. //判断是否选择地址
  461. if(!obj.addressData.real_name) {
  462. return obj.$api.msg('请选择收货地址')
  463. }
  464. console.log(obj.addressData,'addressData')
  465. // 判断用户积分是否足够
  466. if(obj.userInfo){
  467. if(obj.userInfo.integral*1 < ((((obj.actionPrice*1)*(obj.goodsNumber*1))*(obj.three_integral*1)).toFixed(2) + obj.goodsObjact.express_fee*1)){
  468. return obj.$api.msg('您的积分不足!')
  469. }
  470. }
  471. let senddata = {
  472. real_name: obj.addressData.real_name,
  473. user_phone: obj.addressData.phone,
  474. province: obj.addressData.province,
  475. city: obj.addressData.city,
  476. district: obj.addressData.district,
  477. user_address: obj.addressData.detail,
  478. pay_price: (((obj.actionPrice*1)*(obj.goodsNumber*1))*(obj.three_integral*1)).toFixed(2) + obj.goodsObjact.express_fee*1,
  479. goods_name: obj.goodsObjact.goods_name,
  480. goods_image: obj.goodsObjact.image[0].url,
  481. goods_num: obj.goodsNumber,
  482. spec: obj.specSelected,
  483. goods_id: obj.goodsObjact.id,
  484. }
  485. console.log(senddata,'senddata++++')
  486. jfOrderCreate(senddata).then(res => {
  487. console.log(res,'res+++++++++++++++++++++')
  488. this.$api.msg('您已购买成功!')
  489. getUserInfo({}).then((e) => {
  490. // 保存返回用户数据
  491. obj.setUserInfo(e.data);
  492. })
  493. })
  494. }
  495. }
  496. };
  497. </script>
  498. <style lang="scss">
  499. /* 弹出层 */
  500. .popup {
  501. position: fixed;
  502. left: 0;
  503. top: 0;
  504. right: 0;
  505. bottom: 0;
  506. z-index: 99;
  507. &.show {
  508. display: block;
  509. .mask {
  510. animation: showPopup 0.2s linear both;
  511. }
  512. .layer {
  513. animation: showLayer 0.2s linear both;
  514. }
  515. }
  516. &.hide {
  517. .mask {
  518. animation: hidePopup 0.2s linear both;
  519. }
  520. .layer {
  521. animation: hideLayer 0.2s linear both;
  522. }
  523. }
  524. &.none {
  525. display: none;
  526. }
  527. .mask {
  528. position: fixed;
  529. top: 0;
  530. width: 100%;
  531. height: 100%;
  532. z-index: 1;
  533. background-color: rgba(0, 0, 0, 0.4);
  534. }
  535. .layer {
  536. position: fixed;
  537. z-index: 99;
  538. bottom: 0;
  539. width: 100%;
  540. min-height: 35vh;
  541. border-radius: 10rpx 10rpx 0 0;
  542. background-color: #fff;
  543. .btn {
  544. height: 66rpx;
  545. line-height: 66rpx;
  546. border-radius: 100rpx;
  547. background: $uni-color-primary;
  548. font-size: $font-base + 2rpx;
  549. color: #fff;
  550. margin: 30rpx auto 20rpx;
  551. }
  552. }
  553. @keyframes showPopup {
  554. 0% {
  555. opacity: 0;
  556. }
  557. 100% {
  558. opacity: 1;
  559. }
  560. }
  561. @keyframes hidePopup {
  562. 0% {
  563. opacity: 1;
  564. }
  565. 100% {
  566. opacity: 0;
  567. }
  568. }
  569. @keyframes showLayer {
  570. 0% {
  571. transform: translateY(120%);
  572. }
  573. 100% {
  574. transform: translateY(0%);
  575. }
  576. }
  577. @keyframes hideLayer {
  578. 0% {
  579. transform: translateY(0);
  580. }
  581. 100% {
  582. transform: translateY(120%);
  583. }
  584. }
  585. }
  586. /* 规格选择弹窗 */
  587. .attr-content {
  588. padding: 25rpx 30rpx;
  589. .address-section {
  590. padding: 30rpx 0;
  591. background: #fff;
  592. position: relative;
  593. border-top: 1px solid $border-color-light;
  594. .order-content {
  595. min-height: 100rpx;
  596. display: flex;
  597. align-items: center;
  598. .addAddress {
  599. text-align: center;
  600. width: 100%;
  601. display: flex;
  602. justify-content: center;
  603. align-items: center;
  604. .iconaddition {
  605. font-size: 55rpx;
  606. line-height: 1;
  607. border-radius: 100rpx;
  608. margin-right: 20rpx;
  609. }
  610. }
  611. }
  612. .iconlocation {
  613. flex-shrink: 0;
  614. display: flex;
  615. align-items: center;
  616. justify-content: center;
  617. width: 90rpx;
  618. color: #888;
  619. font-size: 44rpx;
  620. }
  621. .cen {
  622. display: flex;
  623. flex-direction: column;
  624. flex: 1;
  625. font-size: 28rpx;
  626. color: $font-color-dark;
  627. }
  628. .name {
  629. font-size: 34rpx;
  630. margin-right: 24rpx;
  631. }
  632. .address {
  633. margin-top: 16rpx;
  634. margin-right: 20rpx;
  635. color: $font-color-light;
  636. }
  637. .icon-you {
  638. font-size: 32rpx;
  639. color: $font-color-light;
  640. margin-right: 30rpx;
  641. }
  642. .a-bg {
  643. position: absolute;
  644. left: 0;
  645. bottom: 0;
  646. display: block;
  647. width: 100%;
  648. height: 5rpx;
  649. }
  650. }
  651. .a-t {
  652. display: flex;
  653. image {
  654. width: 170rpx;
  655. height: 170rpx;
  656. flex-shrink: 0;
  657. border-radius: 8rpx;
  658. }
  659. .right {
  660. display: flex;
  661. flex-direction: column;
  662. justify-content: space-around;
  663. padding-left: 24rpx;
  664. font-size: $font-sm + 2rpx;
  665. color: $font-color-base;
  666. line-height: 42rpx;
  667. width: 75%;
  668. .price {
  669. font-size: $font-lg;
  670. color: $uni-color-primary;
  671. margin: 10rpx 0rpx;
  672. }
  673. .name {
  674. font-size: 32rpx;
  675. color: $font-color-dark;
  676. // height: 50rpx;
  677. // overflow: hidden;
  678. // text-overflow: ellipsis;
  679. // white-space: nowrap;
  680. // display: block;
  681. }
  682. .selected-text {
  683. margin-right: 10rpx;
  684. }
  685. }
  686. }
  687. .attr-list {
  688. display: flex;
  689. flex-direction: column;
  690. font-size: $font-base + 2rpx;
  691. color: $font-color-base;
  692. padding-top: 30rpx;
  693. padding-left: 10rpx;
  694. }
  695. .item-list {
  696. padding: 20rpx 0 0;
  697. display: flex;
  698. flex-wrap: wrap;
  699. text {
  700. display: flex;
  701. align-items: center;
  702. justify-content: center;
  703. background: #eee;
  704. margin-right: 20rpx;
  705. margin-bottom: 20rpx;
  706. border-radius: 100rpx;
  707. min-width: 60rpx;
  708. height: 60rpx;
  709. padding: 0 20rpx;
  710. font-size: $font-base;
  711. color: $font-color-dark;
  712. }
  713. .selected {
  714. background: #ddffdf;
  715. color: $uni-color-primary;
  716. }
  717. }
  718. }
  719. //默认商品底部高度
  720. .goodsBottom {
  721. height: 160rpx;
  722. }
  723. page {
  724. background: #f0f0f0;
  725. }
  726. //秒杀、拼团底部高度
  727. .contentBottomHeight {
  728. height: 110rpx;
  729. background-color: #5dbc7c;
  730. width: 750rpx;
  731. color: #fff;
  732. font-size: 36rpx;
  733. letter-spacing:10rpx;
  734. line-height: 110rpx;
  735. text-align: center;
  736. }
  737. //默认商品底部高度
  738. .goodsBottom {
  739. height: 160rpx;
  740. }
  741. /deep/ .iconenter {
  742. font-size: $font-base + 2rpx;
  743. color: #888;
  744. }
  745. /deep/ .con_image {
  746. width: 130rpx;
  747. height: 130rpx;
  748. display: inline-block;
  749. padding: 15rpx;
  750. image {
  751. width: 100%;
  752. height: 100%;
  753. }
  754. }
  755. /* 商品详情中限制图片大小 */
  756. /deep/ .rich-img {
  757. width: 100% !important;
  758. height: auto;
  759. }
  760. .introduce-section {
  761. position: relative;
  762. background: #fff;
  763. padding: 35rpx 0rpx;
  764. padding-left: 35rpx;
  765. .title {
  766. font-size: 32rpx;
  767. color: $font-color-dark;
  768. .tip-o {
  769. color: #ff3334;
  770. padding-left: 15rpx;
  771. }
  772. }
  773. .shareDate {
  774. position: absolute;
  775. top: 25rpx;
  776. right: 25rpx;
  777. font-size: 26rpx;
  778. color: #3d3f46;
  779. border-radius: 15rpx;
  780. background-color: #ffffff;
  781. height: 60rpx;
  782. line-height: 60rpx;
  783. }
  784. .share-img {
  785. width: 30rpx;
  786. height: 30rpx;
  787. position: relative;
  788. top: 5rpx;
  789. left: 0;
  790. margin-right: 10rpx;
  791. }
  792. .info {
  793. color: #999999;
  794. font-size: 26rpx;
  795. padding-bottom: 15rpx;
  796. }
  797. .progress-box {
  798. width: 260rpx;
  799. position: relative;
  800. margin-top: 15rpx;
  801. line-height: 10px;
  802. .number {
  803. font-size: 17rpx;
  804. position: absolute;
  805. z-index: 999;
  806. top: 3rpx;
  807. left: 15rpx;
  808. color: #ffffff;
  809. }
  810. }
  811. .price-box {
  812. display: flex;
  813. align-items: baseline;
  814. height: 64rpx;
  815. padding: 10rpx 0;
  816. font-size: 26rpx;
  817. color: $uni-color-primary;
  818. }
  819. .price {
  820. font-size: $font-lg + 6rpx;
  821. .text {
  822. padding-left: 5rpx;
  823. color: #b0b0b0;
  824. font-size: 22rpx !important;
  825. }
  826. }
  827. .price-green {
  828. color: #2dbd59;
  829. font-size: 28rpx !important;
  830. text {
  831. background: #2dbd59;
  832. color: #ffffff;
  833. padding: 0rpx 10rpx;
  834. border-radius: 5rpx;
  835. font-size: 22rpx !important;
  836. margin-left: 15rpx;
  837. }
  838. }
  839. .m-price {
  840. margin: 0 12rpx;
  841. color: $font-color-light;
  842. text-decoration: line-through;
  843. margin-left: 25rpx;
  844. font-size: 24rpx;
  845. }
  846. }
  847. .bot-row {
  848. display: flex;
  849. align-items: center;
  850. height: 50rpx;
  851. font-size: $font-sm;
  852. color: $font-color-light;
  853. text {
  854. flex: 1;
  855. }
  856. }
  857. </style>