jfproduct.vue 26 KB

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