jfproduct.vue 25 KB

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