IntegralGood.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988
  1. <template>
  2. <view class="container">
  3. <navbar :config="config" backColor="#666"></navbar>
  4. <view class="product">
  5. <view class="u-bg-fff pb40">
  6. <view class="pic">
  7. <!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
  8. <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500" circular="true">
  9. <swiper-item v-if="dataForm.video_url">
  10. <!-- <video :src="dataForm.video_url"></video> -->
  11. <j-video class="jvideo" :url="dataForm.video_url" width="750rpx" height="620rpx"></j-video>
  12. </swiper-item>
  13. <swiper-item v-for="(item, index) in imglist" :key="index">
  14. <image :src="item" mode="aspectFill"></image>
  15. </swiper-item>
  16. </swiper>
  17. <view class="p-price">
  18. <view class="pd24 u-flex-center" style="align-items: baseline;">
  19. <view class="u-FFF u-font36">
  20. <text class="iconfont2" style="font-size: 50rpx;vertical-align: bottom;">&#xe669;</text>
  21. <text>{{ dataForm.min_exchange_point }}</text>
  22. <!-- <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text> -->
  23. </view>
  24. <text class="discount u-font24 u-ml20 u-del">¥{{ dataForm.max_market_price }}</text>
  25. </view>
  26. </view>
  27. <view class="mt80 u-plr30">
  28. <view>
  29. <view class="tipsStatus" v-if="dataForm.platform_store">自营</view>
  30. <text class="u-font34 u-bold u-1A1A1A">{{ dataForm.title }}</text>
  31. </view>
  32. <view class="u-font24 u-mt15 u-999">
  33. <text>
  34. 已售
  35. <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>
  36. 件,仅剩
  37. <text class="u-FF0000">{{ dataForm.residual_inventory }}</text>
  38. </text>
  39. </view>
  40. <!--优惠-->
  41. <!-- <view
  42. class="bg-FFF6EE pd20 u-mt20 u-flex-center br-rd10"
  43. v-if="shopDiscounts.is_use == true"
  44. >
  45. <view class="u-FF0000 br-FF0000 u-font24">首单优惠</view>
  46. <view class="u-ml15 u-font24 u-CA7E57"
  47. >满{{ shopDiscounts.full }}元减{{
  48. shopDiscounts.reduction
  49. }}元</view
  50. >
  51. </view> -->
  52. </view>
  53. </view>
  54. </view>
  55. <view class="u-bg-fff u-mt10">
  56. <view class="u-plr30 u-flex-center-sb pt-pb35">
  57. <view class="u-flex-center">
  58. <view @click="goShop">
  59. <image class="u-avatar104" :src="shop.logo"></image>
  60. </view>
  61. <view class="u-ml25">
  62. <view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }}</view>
  63. <view class="u-999 u-font24 u-mt5 u-text2" @click="goLocal">
  64. <text class="iconfont" style="color: #FA6138;">&#xe6db;</text>
  65. {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name }}{{ shop.address }}
  66. </view>
  67. </view>
  68. </view>
  69. <view class="iconfont" @click="goShop">&#xe6c7;</view>
  70. </view>
  71. </view>
  72. <view class="u-bg-fff u-mt10">
  73. <view class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one">
  74. <view @tap="change(0)" class="pb30" :class="{ active: isChecked == 0 }">商品详情</view>
  75. <view @tap="change(1)" class="pb30" :class="{ active: isChecked == 1 }">用户评论({{ commentList.length }})</view>
  76. </view>
  77. <view class="u-mt10">
  78. <!--商品详情-->
  79. <view v-if="isChecked == 0">
  80. <view class="richText ql-editor-box">
  81. <rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
  82. <!-- <jyf-parser :html="$mUtil.formatRichText(goodsInfo.mobile_detail)" ref="article"></jyf-parser> -->
  83. </view>
  84. </view>
  85. <!--评论-->
  86. <view class="u-plr30" v-else>
  87. <comment :value="commentList"></comment>
  88. </view>
  89. </view>
  90. </view>
  91. </view>
  92. <view style="height:170rpx;background-color:white"></view>
  93. <view class="bottom-btn u-bg-fff">
  94. <view class="pt-pb30 u-plr30 u-flex-center-sb">
  95. <!-- <button @click="share" open-type="share" class="u-text-center goods-tools" style="line-height: 40rpx">
  96. <view class="iconfont u-font40 u-999">&#xe6b1;</view>
  97. <view class="u-font28 u-1A1A1A">分享</view>
  98. </button>
  99. <button class="u-text-center" style="line-height: 40rpx" @click="collection">
  100. <view v-if="!isCollection">
  101. <view class="iconfont2 u-font36 u-999">&#xe6bf;</view>
  102. <view class="u-font28 u-1A1A1A">收藏</view>
  103. </view>
  104. <view v-else>
  105. <view class="iconfont2 u-999 collectionActive">&#xe616;</view>
  106. <view class="u-font28 u-1A1A1A">取消</view>
  107. </view>
  108. </button> -->
  109. <view class="u-flex-center"><button class="cart-btn u-00321E u-font30"
  110. @click="buy(1, dataForm.id)">立即兑换</button></view>
  111. </view>
  112. </view>
  113. <!--规格-->
  114. <uniPopup type="bottom" ref="specOpen">
  115. <view class="u-bg-fff spec">
  116. <view class="u-plr30 flex-sb u-border-one-one pb30">
  117. <view class="u-flex-center">
  118. <image class="u-goods200" :src="choseConfig.cover ? choseConfig.cover : cover"></image>
  119. <view class="u-ml20">
  120. <view class="u-999 u-font24 u-flex-center">
  121. <view class="u-FF0000 u-font36">
  122. {{ choseConfig.exchange_point ? choseConfig.exchange_point : dataForm.min_exchange_point }}积分
  123. <!-- <rich-text :nodes="$mUtil.priceBigSmall(choseConfig.sale_price?choseConfig.sale_price:moPrice)"></rich-text> -->
  124. </view>
  125. <text
  126. class="u-del u-ml15">¥{{ choseConfig.market_price ? choseConfig.market_price : moDelPrice }}</text>
  127. <!-- <text class="u-ml10">7.5折</text> -->
  128. </view>
  129. <view class="u-font22 u-999 u-mt5">库存 {{ stock }} 件</view>
  130. <view class="u-1A1A1A u-mt25">{{ choseConfig.sku_set_name ? choseConfig.sku_set_name : '请选择' }}</view>
  131. </view>
  132. </view>
  133. <view class="iconfont u-999 closeIcon" @click="specOpenClose">&#xe612;</view>
  134. </view>
  135. <view>
  136. <view class="">
  137. <view class="u-mt30" v-for="(item, index) in skuTab" :key="item.head.id">
  138. <view class="u-plr30">{{ item.head.name }}</view>
  139. <view class="u-mt20 u-border-one-one pb30">
  140. <view class="u-plr30 u-flex u-flex-warp">
  141. <view class="spec-item" :class="childrenItem.flag ? 'activeColor' : ''"
  142. @click="chonseSku(index, childrenItem.id)" v-for="childrenItem in item.values"
  143. :key="childrenItem.id">
  144. {{ childrenItem.name }}
  145. </view>
  146. </view>
  147. </view>
  148. </view>
  149. </view>
  150. <view class="u-plr30 u-mt30">
  151. <view class="u-flex-center-sb">
  152. <view>购买数量</view>
  153. <view class="u-flex-center">
  154. <view class="iconfont minus" @click="resNum">&#xe60b;</view>
  155. <view class="num">{{ add_num }}</view>
  156. <view class="iconfont plus-sign" @click="addNum">&#xe686;</view>
  157. </view>
  158. </view>
  159. <view class="specOpen-btn">
  160. <view v-if="btnType == 0">
  161. <button class="u-btn-two" @click="btnBuy(btnType)">{{ btnName }}</button>
  162. </view>
  163. <view v-else>
  164. <button class="u-btn-two" @click="btnBuy(btnType)">{{ btnName }}</button>
  165. </view>
  166. </view>
  167. </view>
  168. </view>
  169. </view>
  170. </uniPopup>
  171. <!--页面加载动画-->
  172. <ldLoading isFullScreen :active="loading"></ldLoading>
  173. <share ref="shares" :contentHeight="580" v-if="isvisible"></share>
  174. </view>
  175. </template>
  176. <script>
  177. import uniPopup from '../../../components/uni-popup/uni-popup.vue';
  178. import comment from '../../../components/ld-comment/ld-comment.vue';
  179. import jyfParser from '../../../components/jyf-parser/jyf-parser';
  180. import share from './../../public/share';
  181. import jVideo from '../../../components/j-video/j-video.vue';
  182. export default {
  183. components: {
  184. uniPopup,
  185. comment,
  186. jyfParser,
  187. share,
  188. jVideo
  189. },
  190. data() {
  191. return {
  192. config: {
  193. back: true, //false是tolbar页面 是则不写
  194. title: '商品详情',
  195. color: '#1a1a1a',
  196. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  197. backgroundColor: [1, '#ffffff'],
  198. statusBarFontColor: '#FFFFFF',
  199. backTabPage: ''
  200. },
  201. imglist: [], //详情图片数组
  202. isChecked: 0,
  203. btnName: '',
  204. btnType: '', //0 购物车,1 立即购买
  205. dataForm: {}, //商品详情
  206. shop: {}, //店铺信息
  207. shopDiscounts: {}, //店铺首单优惠
  208. stock: 0,
  209. cover: '',
  210. loading: true,
  211. moDelPrice: '',
  212. moPrice: '',
  213. goodsSkuList: [], //sku组合值
  214. skuTab: [], //sku二位数组
  215. goods_id: null,
  216. limit_buy_num: 0,
  217. choseConfig: {},
  218. hasId: '',
  219. add_num: 1,
  220. goStatus: 0, //0:购物车,1下单
  221. shop_id: 0,
  222. commentList: [],
  223. goodsInfo: {},
  224. dataShopId: '',
  225. isvisible: false,
  226. isCollection: false, //是否收藏
  227. option: null,
  228. imgUrl: this.$mConfig.staticUrl
  229. };
  230. },
  231. onShow() {
  232. var pages = getCurrentPages();
  233. var prevPage = pages[pages.length - 2];
  234. if (prevPage == undefined) {
  235. // this.config.backTabPage = "/pages/research/homepage/lidaPage";
  236. }
  237. },
  238. onLoad(options) {
  239. this.option = options.id;
  240. //店铺推荐(商品)
  241. if (options.id) {
  242. this.getDetailInfo(options.id);
  243. this.goodsDetail(options.id);
  244. this.loadComment(options.id);
  245. }
  246. if (options.shareId) {
  247. this.recordSave(options.shareId, options.id);
  248. }
  249. },
  250. onShareAppMessage(res) {
  251. if (res.from === 'button') {
  252. // 来自页面内分享按钮
  253. console.log(res.target);
  254. }
  255. return {
  256. title: this.shareTitle,
  257. imageUrl: this.shareImg,
  258. path: `/pages/product/goods/goods?id=${this.goodsId}&shopid=${this.shop_id}`
  259. };
  260. },
  261. methods: {
  262. goLocal() {
  263. uni.openLocation({
  264. latitude: Number(this.shop.tx_latitude),
  265. longitude: Number(this.shop.tx_longitude),
  266. name: this.shop.name,
  267. address: this.shop.address,
  268. success: function() {
  269. console.log('success');
  270. }
  271. });
  272. },
  273. goShop() {
  274. uni.navigateTo({
  275. url: '/pages/research/homepage/shopHomepage?shopId=' + this.shop_id
  276. });
  277. },
  278. recordSave(share_user_id, goods_id) {
  279. this.$http
  280. .post('/share/record/save', {
  281. share_user_id: share_user_id,
  282. goods_id: goods_id
  283. })
  284. .then(res => {});
  285. },
  286. share() {
  287. this.isvisible = false
  288. let token = uni.getStorageSync("apiToken");
  289. if (!token) {
  290. uni.navigateTo({
  291. url: '/pages/login/index'
  292. });
  293. } else {
  294. console.log('option', this.option);
  295. this.$http.get('/goods/info/' + this.option).then(res => {
  296. if (res && res.code == 200) {
  297. if (res.data == null) {
  298. this.$mUtil.toast('该商品不存在');
  299. } else {
  300. let user = uni.getStorageSync('personal');
  301. this.isvisible = true;
  302. this.$nextTick(() => {
  303. this.$refs.shares.shareInfo('/?pageType=1&type=5&id=' + this.goodsId + '&shareId=' + user.id,
  304. 'pages/down',
  305. this.dataForm.title, '', this.dataForm.cover);
  306. });
  307. }
  308. }
  309. });
  310. }
  311. },
  312. collection() {
  313. let token = uni.getStorageSync("apiToken");
  314. if (!token) {
  315. uni.navigateTo({
  316. url: '/pages/login/index'
  317. });
  318. } else {
  319. if (this.isCollection) {
  320. this.$http.delete('/collect/goods/delete/' + this.dataForm.id).then(res => {
  321. if (res && res.code == 200) {
  322. this.isCollection = false;
  323. this.$mUtil.toast('取消收藏成功');
  324. } else {
  325. this.$mUtil.toast(res.msg);
  326. }
  327. });
  328. } else {
  329. this.$http.put('/collect/goods/save', {
  330. goods_id: this.dataForm.id
  331. }).then(res => {
  332. if (res && res.code == 200) {
  333. this.isCollection = true;
  334. this.$mUtil.toast('收藏成功');
  335. } else {
  336. this.$mUtil.toast(res.msg);
  337. }
  338. });
  339. }
  340. }
  341. },
  342. // 获取主页数据
  343. getIndexList(shopid) {
  344. this.$http.get('/yxt/shop/info/' + shopid).then(res => {
  345. uni.stopPullDownRefresh();
  346. this.loading = false;
  347. if (res.data && res.code == 200) {
  348. this.shop = res.data;
  349. }
  350. });
  351. },
  352. getByShop(id) {
  353. //店铺优惠查询
  354. this.$http.get('/marketing/firstOrder/getByShop/' + id).then(res => {
  355. if (res && res.code == 200) {
  356. this.shopDiscounts = res.data;
  357. }
  358. });
  359. },
  360. getDetailInfo(id) {
  361. this.$http.get('/goods/info/' + id).then(res => {
  362. this.loading = false;
  363. if (res && res.code == 200) {
  364. this.dataForm = res.data;
  365. this.goodsId = res.data.id;
  366. this.imglist = res.data.images;
  367. this.shareImg = res.data.cover;
  368. this.shareTitle = res.data.title;
  369. this.dataShopId = res.data.shop_id;
  370. this.shop_id = res.data.shop_id;
  371. this.getByShop(this.dataShopId);
  372. this.getIndexList(this.dataShopId);
  373. }
  374. });
  375. let token = uni.getStorageSync("apiToken");
  376. if (token) {
  377. this.$http.get('/collect/goods/is-collect/' + id).then(res => {
  378. if (res && res.code == 200) {
  379. this.isCollection = res.data;
  380. }
  381. });
  382. }
  383. },
  384. goTocart() {
  385. uni.navigateTo({
  386. url: '/pages/index/shop'
  387. });
  388. },
  389. //点击拼团更多
  390. goGb() {
  391. this.$refs.gbOpen.open();
  392. },
  393. //点击关闭
  394. gbClose() {
  395. this.$refs.gbOpen.close();
  396. },
  397. //评论,商品详情切换
  398. change(i) {
  399. this.isChecked = i;
  400. },
  401. //点购物车,立即购买
  402. buy(i, id) {
  403. this.btnType = i;
  404. this.checkSku(id);
  405. if (i == 0) {
  406. this.btnName = '加入购物车';
  407. } else {
  408. this.btnName = '立即兑换';
  409. }
  410. console.log('buyyyyyyyyy');
  411. },
  412. // 减数量
  413. resNum() {
  414. if (this.add_num > 1) {
  415. this.add_num--;
  416. }
  417. },
  418. //加数量
  419. addNum() {
  420. this.add_num++;
  421. },
  422. chonseSku(index, id) {
  423. this.skuTab[index].values.forEach(res => {
  424. res.flag = false;
  425. if (res.id == id) {
  426. res.flag = true;
  427. }
  428. });
  429. let choseId = [];
  430. this.skuTab.forEach(res => {
  431. res.values.forEach(Key => {
  432. if (Key.flag) {
  433. choseId.push(Key.id);
  434. }
  435. });
  436. });
  437. let totalId = choseId.join('|');
  438. this.hasId = totalId;
  439. this.goodsSkuList.forEach(res => {
  440. if (res.sku_hash_code == totalId) {
  441. this.choseConfig = res;
  442. this.stock = res.able_stock;
  443. this.able_stock = res.able_stock;
  444. }
  445. });
  446. console.log(this.goodsSkuList);
  447. console.log('goodsSkuList');
  448. },
  449. //查询sku
  450. checkSku(id) {
  451. this.$http.get(`/goods/skus/${this.shop_id}/${id}`).then(res => {
  452. this.loading = false;
  453. if (res && res.code == 200) {
  454. this.choseConfig = {};
  455. this.hasId = '';
  456. res.data.goods.sku_table.forEach(keys => {
  457. keys.values.forEach(val => {
  458. val.flag = false;
  459. });
  460. });
  461. this.limit_buy_num = res.data.goods.limit_buy_num;
  462. this.goods_id = res.data.goods.id;
  463. // this.skuTab = res.data.goods.sku_table;
  464. this.goodsSkuList = res.data.goods_sku_list;
  465. this.moPrice = res.data.goods.min_sale_price;
  466. this.moDelPrice = res.data.goods.max_sale_price;
  467. this.cover = res.data.goods.cover;
  468. this.stock = res.data.total_stock;
  469. if (res.data.goods_auth) {
  470. if (res.data.goods_auth.added) {
  471. this.$refs.specOpen.open();
  472. } else {
  473. this.$mUtil.toast('该商品已经下架');
  474. }
  475. } else {
  476. this.$mUtil.toast('没有经营权限');
  477. }
  478. //只有没数据才去重新渲染sku的数据
  479. if (this.skuTab.length == 0) {
  480. this.skuTab = res.data.goods.sku_table;
  481. for (let i in this.skuTab) {
  482. //默认选中第一个可选项
  483. this.skuTab[i].values[0].flag = true;
  484. }
  485. //显示选中的sku信息
  486. // this.chonseSku(0, this.skuTab[0].values[0].id);
  487. }
  488. this.chonseSku(0, this.skuTab[0].values[0].id);
  489. console.log(this.skuTab);
  490. console.log('skuTab');
  491. console.log('id:' + this.skuTab[0].values[0].id);
  492. // if(res.data.goods.sku_table.length>0){
  493. // this.$refs.specOpen.open()
  494. // }else{
  495. // this.hasId = ''
  496. // this.btnBuy()
  497. // }
  498. }
  499. });
  500. },
  501. //关闭规格弹窗
  502. specOpenClose() {
  503. this.$refs.specOpen.close();
  504. },
  505. //加入购物车
  506. btnBuys() {
  507. // 判断是否选中sku
  508. if (this.skuTab.length > 0 && this.hasId == '') {
  509. this.$mUtil.toast('请选中sku');
  510. return false;
  511. }
  512. // 判断限购
  513. if (this.add_num > this.limit_buy_num && this.limit_buy_num != 0) {
  514. this.$mUtil.toast('商品限购' + this.limit_buy_num + '件');
  515. return false;
  516. }
  517. //判断库存
  518. if (this.goodsSkuList.length > 0 && this.able_stock < this.add_num) {
  519. this.$mUtil.toast('商品库存只有' + this.able_stock + '件');
  520. this.$http
  521. .post(`/singlegoods/understockrecord/save`, {
  522. shop_id: this.shop_id,
  523. goods_id: this.goods_id,
  524. single_goods_id: this.choseConfig.single_goods_id,
  525. sku_set_name: this.choseConfig.sku_set_name,
  526. buy_num: this.add_num
  527. })
  528. .then(res => {});
  529. return false;
  530. }
  531. if (this.goStatus == 0) {
  532. let data = {
  533. goods_id: this.goods_id,
  534. sku_hash_code: this.hasId,
  535. add_num: this.add_num,
  536. source_shop_id: this.shop_id.toString()
  537. };
  538. this.$http.post(`/cart/add`, data).then(res => {
  539. if (res && res.code == 200) {
  540. this.$mUtil.toast('添加成功');
  541. this.$refs.specOpen.close();
  542. this.choseConfig = {};
  543. this.add_num = 1;
  544. this.cartList();
  545. }
  546. });
  547. } else {
  548. this.psotJson();
  549. }
  550. },
  551. //组合数据
  552. psotJson() {
  553. // this.loading = true;
  554. let dataJson = {};
  555. let childArr = [];
  556. let parendArr = [];
  557. // let shop = uni.getStorageSync('shop')
  558. // let shopid = shop.id ? shop.id : ''
  559. childArr.push({
  560. goods_id: this.goods_id,
  561. num: this.add_num,
  562. sku_hash_code: this.hasId
  563. });
  564. parendArr.push({
  565. shop_id: this.dataShopId,
  566. source_shop_id: this.shop_id,
  567. user_remark: '',
  568. items: childArr
  569. });
  570. dataJson = {
  571. is_cart: false, //是否来源于购物车
  572. receipt_id: null,
  573. shipment_mode: 0, //0物流,1自提
  574. shop_orders: parendArr,
  575. point_goods: true
  576. };
  577. uni.setStorageSync('dataJson', dataJson);
  578. uni.navigateTo({
  579. url: '../surePay/IntegraPay'
  580. });
  581. // let shop = uni.getStorageSync('shop')
  582. // let shopid=shop.id?shop.id:''
  583. // this.loading = false;
  584. // this.$http.post(`/order/build`, dataJson).then(res => {
  585. // if (res && res.code == 200) {
  586. // uni.setStorageSync('sureData', res.data)
  587. // uni.navigateTo({
  588. // url: '../surePay/surePay'
  589. // })
  590. // }
  591. // })
  592. },
  593. //
  594. btnBuy(i) {
  595. this.goStatus = i;
  596. let token = uni.getStorageSync("apiToken");
  597. //判断是否微信授权登录(没有授权登录进wx-login,授权了但没有注册进login)
  598. if (!token) {
  599. uni.navigateTo({
  600. url: '/pages/login/index'
  601. });
  602. } else {
  603. this.btnBuys();
  604. }
  605. //0 购物车,1 立即购买
  606. },
  607. /**
  608. * 详情
  609. * */
  610. goodsDetail(id) {
  611. this.$http.get(`/goods/content/${id}`).then(res => {
  612. if (res && res.code == 200) {
  613. this.goodsInfo = res.data;
  614. }
  615. });
  616. },
  617. /*评论*/
  618. loadComment(id) {
  619. this.$http.get(`/comment/orderGoods/getgoodscomments/${id}`).then(res => {
  620. if (res && res.code == 200) {
  621. this.commentList = res.list;
  622. }
  623. });
  624. }
  625. }
  626. };
  627. </script>
  628. <style lang="scss" scopd>
  629. .love-color {
  630. width: 36rpx;
  631. height: 36rpx;
  632. }
  633. .collectionActive {
  634. color: #ff0000;
  635. // font-size: 45rpx;
  636. transform: scale(1.2);
  637. }
  638. page {
  639. background-color: #f5f5f5;
  640. }
  641. .pd24 {
  642. padding: 24rpx;
  643. }
  644. .pd20 {
  645. padding: 20rpx;
  646. }
  647. .pt20-pb14 {
  648. padding-top: 20rpx;
  649. padding-bottom: 14rpx;
  650. }
  651. .pt28-pb18 {
  652. padding-top: 28rpx;
  653. padding-bottom: 18rpx;
  654. }
  655. .pb30 {
  656. padding-bottom: 30rpx;
  657. }
  658. .pb40 {
  659. padding-bottom: 40rpx;
  660. }
  661. .pb50 {
  662. padding-bottom: 50rpx;
  663. }
  664. .pt-pb30 {
  665. padding-top: 30rpx;
  666. padding-bottom: 30rpx;
  667. >view{
  668. margin: auto;
  669. }
  670. }
  671. .pt-pb35 {
  672. padding-top: 35rpx;
  673. padding-bottom: 35rpx;
  674. }
  675. .ml54 {
  676. margin-left: 54rpx;
  677. }
  678. .ml138 {
  679. margin-left: 138rpx;
  680. }
  681. .br-rd10 {
  682. border-radius: 10rpx;
  683. }
  684. .br-rd20 {
  685. border-radius: 20rpx;
  686. }
  687. .stb-btn {
  688. padding: 8rpx 18rpx;
  689. border-radius: 10rpx;
  690. }
  691. .br-FF0000 {
  692. border: 1rpx solid #ff0000;
  693. border-radius: 24rpx;
  694. padding: 6rpx 12rpx;
  695. }
  696. .bg-FFF6EE {
  697. background-color: #fff6ee;
  698. }
  699. .mt80 {
  700. margin-top: 80rpx;
  701. }
  702. .product {
  703. // padding-bottom: 150rpx;
  704. }
  705. .pic {
  706. width: 100%;
  707. position: relative;
  708. .swiper {
  709. // height: 620rpx;
  710. height: 100vw;
  711. video {
  712. width: 100%;
  713. // height: 620rpx;
  714. height: 100vw;
  715. }
  716. image {
  717. width: 100%;
  718. // height: 620rpx;
  719. height: 100vw;
  720. }
  721. }
  722. .p-price {
  723. width: 100%;
  724. position: absolute;
  725. top: 580rpx;
  726. background: #FA6138;
  727. border-radius: 20rpx 20rpx 0px 0px;
  728. .discount {
  729. color: #ffffff;
  730. }
  731. }
  732. }
  733. .richText {
  734. padding: 30rpx;
  735. /deep/ img {
  736. margin-top: 0 !important;
  737. }
  738. }
  739. //秒杀,拼团样式
  740. .p-ab {
  741. position: absolute;
  742. top: 448rpx;
  743. }
  744. .stb-list {
  745. padding-bottom: 10rpx;
  746. }
  747. .triangle-bottomright {
  748. width: 0;
  749. height: 0;
  750. border-bottom: 108rpx solid #dccda4;
  751. border-left: 60rpx solid transparent;
  752. }
  753. .seckill {
  754. background-color: #dccda4;
  755. color: #0b844a;
  756. padding: 16rpx;
  757. padding-right: 28rpx;
  758. border-radius: 5rpx 20rpx 0px 0px;
  759. }
  760. .seckill-btn {
  761. width: 86%;
  762. }
  763. .br-284534 {
  764. border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
  765. }
  766. .gb-te {
  767. padding-top: 20rpx;
  768. padding-bottom: 15rpx;
  769. }
  770. .gb-btn {
  771. padding: 18rpx 80rpx 8rpx;
  772. line-height: 30rpx;
  773. }
  774. .btn-bg-dccda4 {
  775. background: #dccda4;
  776. border-radius: 48rpx 0rpx 0rpx 48rpx;
  777. }
  778. .btn-bg-00321E {
  779. background: #0b844a;
  780. border-radius: 0px 48px 48px 0px;
  781. }
  782. .tab {
  783. position: sticky;
  784. top: 0;
  785. background-color: #fff;
  786. padding-top: 38rpx;
  787. z-index: 9;
  788. .pb30 {
  789. position: relative;
  790. &::before {
  791. content: '';
  792. position: absolute;
  793. left: 50%;
  794. bottom: 0;
  795. transform: translateX(-50%);
  796. width: 0;
  797. height: 2px;
  798. background: #FA6138;
  799. transition: all 0.3s;
  800. }
  801. &.active {
  802. font-size: 30rpx;
  803. color: #FA6138;
  804. font-weight: 700;
  805. &::before {
  806. width: 100%;
  807. }
  808. }
  809. }
  810. }
  811. .bottom-btn {
  812. width: 100%;
  813. position: fixed;
  814. bottom: 0;
  815. z-index: 9;
  816. border-top: 1rpx solid #e6e6e6;
  817. .cart {
  818. position: relative;
  819. .number {
  820. position: absolute;
  821. top: -10rpx;
  822. left: 45rpx;
  823. padding: 4rpx 8rpx;
  824. background-color: #ff0000;
  825. border: 4rpx solid #ffffff;
  826. border-radius: 40rpx;
  827. }
  828. }
  829. .cart-btn {
  830. width: 500rpx;
  831. height: 85rpx;
  832. background: #FA6138;
  833. color: white;
  834. border-radius: 43rpx;
  835. display: flex;
  836. justify-content: center;
  837. align-items: center;
  838. }
  839. .buy-btn {
  840. width: 230rpx;
  841. height: 85rpx;
  842. line-height: 85rpx;
  843. background: #0b844a;
  844. border-radius: 0rpx 43rpx 43rpx 0rpx;
  845. }
  846. }
  847. .flex-sb {
  848. display: flex;
  849. justify-content: space-between;
  850. }
  851. //弹窗
  852. .spec {
  853. border-radius: 18rpx 18rpx 0rpx 0rpx;
  854. padding-top: 30rpx;
  855. overflow-y: auto;
  856. .spec-item {
  857. background-color: #f6f6f6;
  858. border: 1px solid #f6f6f6;
  859. padding: 12rpx 30rpx;
  860. font-size: 24rpx;
  861. color: #1a1a1a;
  862. border-radius: 4px;
  863. }
  864. .activeColor {
  865. background-color: #e1e6e3;
  866. border: 1px solid #FA6138;
  867. color: #FA6138;
  868. border-radius: 8rpx;
  869. }
  870. .spec-item:not(:last-child) {
  871. margin-right: 24rpx;
  872. }
  873. //减号
  874. .minus {
  875. width: 50rpx;
  876. height: 50rpx;
  877. line-height: 50rpx;
  878. text-align: center;
  879. background: #dedede;
  880. border-radius: 8rpx 0rpx 0rpx 8rpx;
  881. }
  882. .num {
  883. width: 74rpx;
  884. height: 46rpx;
  885. line-height: 46rpx;
  886. text-align: center;
  887. border: 1px solid #dedede;
  888. }
  889. //加号
  890. .plus-sign {
  891. width: 50rpx;
  892. height: 50rpx;
  893. line-height: 50rpx;
  894. text-align: center;
  895. background: #dedede;
  896. border-radius: 0rpx 8rpx 8rpx 0rpx;
  897. }
  898. .specOpen-btn {
  899. margin-top: 68rpx;
  900. padding-bottom: 34rpx;
  901. button {
  902. background-color: #FA6138;
  903. color: #ffffff;
  904. }
  905. }
  906. }
  907. </style>