product.vue 25 KB

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