detail.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view">
  6. <view class="list-scroll-view">
  7. <view class="one_1">
  8. <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :interval="3000" :duration="1000">
  9. <swiper-item class="list" v-for="(item,index) in info.goods.file" :key="index">
  10. <image class="image" :src="item.url" mode="aspectFit">
  11. </image>
  12. </swiper-item>
  13. </swiper>
  14. <!-- 是否关注商品 -->
  15. <view class="goodsColect">
  16. <text @tap="toGoodscolect" :class="['iconfont',goodsColect?'icon-yduishoucangshixin-copy':'icon-yduishoucangkongxin']"></text>
  17. </view>
  18. <view class="acttags" v-if="info.goods.act_tags&&info.goods.act_tags.length>0">
  19. <text v-for="i in info.goods.act_tags" :key="i">{{i.label}}</text>
  20. </view>
  21. </view>
  22. <view class="one_2">
  23. <text class="money" v-if="infospecs.price"><text>特价¥</text>{{infospecs.price||0}}</text>
  24. <text class="money" v-else><text>¥</text>{{infospecs.sell_money||0}}</text>
  25. <text class="money"><text>¥</text>{{infospecs.flow_money||0}}</text>
  26. </view>
  27. <view class="one_3" v-if="discount">
  28. <text v-if="discount.full_decrement" class="act" v-for="(item,index) in discount.full_decrement" :key="index">{{item}}</text>
  29. <text v-if="discount.full_fold" class="act" v-for="(item,index) in discount.full_fold" :key="index">{{item}}</text>
  30. </view>
  31. <view class="one_4">
  32. <view class="name">
  33. {{info.goods.name}}
  34. </view>
  35. <view class="brief">
  36. {{info.goods.shot_brief||''}}
  37. </view>
  38. <view class="money">
  39. <!-- <text>运费{{infospecs.freight||'包邮'}}元</text> -->
  40. <text>{{info.goods.send_time}}内发货</text>
  41. </view>
  42. </view>
  43. <view class="one_5" @tap="toActivity">
  44. <view class="l">
  45. <text>{{info.act.length>0?`活动`:`暂无活动`}}</text>
  46. </view>
  47. <view class="r">
  48. <text class="iconfont icon-jiantouyou"></text>
  49. </view>
  50. </view>
  51. <view class="one_5" @tap="toSpec">
  52. <view class="l">
  53. 选择规格
  54. </view>
  55. <view class="r">
  56. <text class="iconfont icon-jiantouyou"></text>
  57. </view>
  58. </view>
  59. <view class="one_6" @tap="toEvaluate">
  60. <view class="l">
  61. <text>{{evaluate_num>0?`商品评价(${evaluate_num})`:`暂无评价`}}</text>
  62. </view>
  63. <view class="r">
  64. <text class="iconfont icon-jiantouyou"></text>
  65. </view>
  66. </view>
  67. <view class="one_7">
  68. <view class="one_7_1">
  69. <view class="shop_1">
  70. <image class="image" :src="info.shop.logo&&info.shop.logo.length>0?info.shop.logo[0].url:''" mode="aspectFit"></image>
  71. </view>
  72. <view class="shop_2">
  73. <view class="name">{{info.shop.name}}</view>
  74. <view class="num"><text>宝贝数:</text>{{info.shop.goods_num||0}}</view>
  75. </view>
  76. </view>
  77. <view class="one_7_2">
  78. <view class="score_1">
  79. <text>商品:</text>
  80. <text>{{info.shop.goods_score||5}}</text>
  81. <text>|</text>
  82. </view>
  83. <view class="score_1">
  84. <text>发货:</text>
  85. <text>{{info.shop.send_score||5}}</text>
  86. <text>|</text>
  87. </view>
  88. <view class="score_1">
  89. <text>服务:</text>
  90. <text>{{info.shop.service_score||5}}</text>
  91. </view>
  92. </view>
  93. <view class="one_7_3">
  94. <view class="btn">
  95. <button size="mini" @tap="toShop">进入店铺</button>
  96. </view>
  97. <view class="btn">
  98. <button size="mini" @tap="toShopcolect">{{shopColect==true?'已关注':'关注'}}</button>
  99. </view>
  100. </view>
  101. </view>
  102. <view class="one_8">
  103. <rich-text :nodes="info.goods.brief"></rich-text>
  104. </view>
  105. </view>
  106. </scroll-view>
  107. </view>
  108. <view class="two">
  109. <uni-goods-nav :options="options" :button-group="buttonGroup" @click="toNavleft" @buttonClick="toNavright" />
  110. </view>
  111. </view>
  112. <!-- 跳转菜单 -->
  113. <view class="bar_1">
  114. <text @tap="toMenubar" class="iconfont icon-gengduo"></text>
  115. </view>
  116. <view class="bar_2" v-if="is_menu">
  117. <view class="list" v-for="(item,index) in barList" :key="index" v-if="item.is_use=='0'" @click="toPath(item)">
  118. <image class="image" :src="item.normal&&item.normal.length>0?item.normal[0].url:''"></image>
  119. <text class="name"> {{item.name}}</text>
  120. </view>
  121. </view>
  122. <!-- 规格 -->
  123. <uni-popup ref="specShow" background-color="#fff" type="bottom" :is-mask-click="false">
  124. <view class="popup">
  125. <view class="close">
  126. <text @click="toClose" class="iconfont icon-shanchu"></text>
  127. </view>
  128. <view class="info_1" v-if="popupShow=='1'">
  129. <view class="info_1">
  130. <scroll-view scroll-y="true" class="scroll-view">
  131. <view class="list-scroll-view">
  132. <view class="one">
  133. <view class="one_1">
  134. <view class="l">
  135. <image class="image" :src="specsInfo.file.length>0?specsInfo.file[0].url:info.goods.file[0].url" mode="aspectFill" @tap="diaView"></image>
  136. </view>
  137. <view class="r">
  138. <view class="money">
  139. <text v-if="specsInfo.price" class="money_1"><text>特价¥</text>{{specsInfo.price}}</text>
  140. <text v-if="!specsInfo.price" class="money_1"><text>¥</text>{{specsInfo.sell_money}}</text>
  141. <text class="money_1"><text>¥</text>{{specsInfo.flow_money}}</text>
  142. </view>
  143. <view class="other_1">
  144. <text>已选:</text>
  145. <text>{{specsInfo.name}}</text>
  146. </view>
  147. <view class="other_1">
  148. <text>运费:</text>
  149. <text>{{specsInfo.freight===0?'包邮':specsInfo.freight+'元'}}</text>
  150. </view>
  151. </view>
  152. </view>
  153. <view class="one_2">
  154. <view class="one_2_1">
  155. 规格
  156. </view>
  157. <view class="one_2_2">
  158. <view :class="['list',is_specs!=index&&item.num>0?'list':is_specs!=index&&item.num<=0?'huilist':is_specs==index&&item.num>0?'redlist':is_specs==index&&item.num<=0?'huiilist':'list']" v-for="(item,index) in info.specs" :key="index" @tap="toSpecs(item)">
  159. <text>{{item.name}}</text>
  160. </view>
  161. </view>
  162. </view>
  163. <view class="one_3">
  164. <view class="one_3_1">
  165. <text>数量</text>
  166. </view>
  167. <view class="one_3_1">
  168. <uni-number-box v-model="buy_num" @change="toCount" :min="1" :max="specsInfo.num">
  169. </uni-number-box>
  170. </view>
  171. <view class="one_3_1">
  172. <text>库存{{specsInfo.num||0}}</text>
  173. </view>
  174. </view>
  175. </view>
  176. </view>
  177. </scroll-view>
  178. </view>
  179. <view class="info_2">
  180. <view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="btn_type=='0'">
  181. <button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toMarket">加入购物车</button>
  182. </view>
  183. <view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="btn_type=='1'">
  184. <button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toBuy">立即购买</button>
  185. </view>
  186. <view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="specsInfo.can_group=='0'">
  187. <button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toGroup">参团</button>
  188. </view>
  189. </view>
  190. </view>
  191. <view class="info_3" v-else-if="popupShow=='2'">
  192. <scroll-view scroll-y="true" class="scroll-view">
  193. <view class="list" v-for="(item,index) in info.act" :key="index">
  194. <view class="list_1" @tap="toAct(item)">
  195. <view class="title_1">
  196. <view class="l">
  197. <text>{{item.tag||'暂无'}}</text>{{item.act_time.title}}
  198. </view>
  199. <view class="r">
  200. <text class="iconfont icon-jiantouyou"></text>
  201. </view>
  202. </view>
  203. <view class="title_2">
  204. <view class="text" v-if="item.type=='5'||item.type=='6'">{{item.text}}</view>
  205. <view class="time">{{item.config.time_start}}-{{item.config.time_end}}</view>
  206. </view>
  207. <view class="title_2" v-if="item.type=='2'">
  208. <view class="specList" v-for="(tag,indexx) in item.list" :key="indexx">
  209. <view class="name">规格:{{tag.spec_name}}</view>
  210. <view class="giftList" v-for="(tags,indexs) in tag.gift" :key="indexs" @tap.stop="tags.type=='0' && getDetail(tags)">
  211. <view class="left">
  212. <view class="goods">{{tags.goods_name}}{{tags.spec_name}}</view>
  213. <view class="goods">{{tags.desc}}</view>
  214. <view class="num">×{{tags.num}}</view>
  215. </view>
  216. <view class="right"><text class="iconfont icon-jiantouyou"></text>
  217. </view>
  218. </view>
  219. </view>
  220. </view>
  221. </view>
  222. </view>
  223. </scroll-view>
  224. </view>
  225. </view>
  226. </uni-popup>
  227. <view class="dialog" v-if="dialog.show==true" @tap="dialogClose">
  228. <view class="dialog_1" v-if="dialog.type=='1'">
  229. <swiper class="swiper" circular @change="diaSpecs" :current="is_specs">
  230. <swiper-item class="list" v-for="(item,index) in info.specs" :key="index">
  231. <view class="list_1">
  232. <image class="image" :src="item.file.length>0?item.file[0].url:info.goods.file[0].url" mode="aspectFit"></image>
  233. </view>
  234. <view class="name">
  235. <text>{{item.name}}</text>
  236. </view>
  237. </swiper-item>
  238. </swiper>
  239. </view>
  240. </view>
  241. </mobile-frame>
  242. </template>
  243. <script>
  244. export default {
  245. data() {
  246. return {
  247. // 系统设置
  248. config: {},
  249. // 商品id
  250. id: '',
  251. // 分享人id
  252. inviter: '',
  253. // 当前用户信息
  254. user: {},
  255. // 是否关注商品
  256. goodsColect: false,
  257. // 是否关注店铺
  258. shopColect: false,
  259. // 评价数
  260. evaluate_num: 2,
  261. // 商品详情
  262. info: {},
  263. infospecs: {},
  264. // 优惠
  265. discount: {},
  266. // 底部菜单
  267. options: [ //
  268. {
  269. icon: 'shop',
  270. text: '店铺',
  271. type: 'shop',
  272. route: 'pagesHome/shop/index',
  273. },
  274. {
  275. icon: 'cart',
  276. text: '购物车',
  277. type: 'market',
  278. route: 'pages/market/index',
  279. },
  280. ],
  281. buttonGroup: [ //
  282. {
  283. text: '加入购物车',
  284. backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  285. color: '#fff',
  286. type: '0'
  287. },
  288. {
  289. text: '立即购买',
  290. backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  291. color: '#fff',
  292. type: '1'
  293. }
  294. ],
  295. // 系统菜单
  296. barList: [],
  297. is_menu: false,
  298. // 规格弹框
  299. popupShow: '1',
  300. // 规格信息
  301. is_specs: 0,
  302. btn_type: '1',
  303. specsInfo: {},
  304. // 是否零库存
  305. is_zero: false,
  306. // 购买数量
  307. buy_num: 1,
  308. // 规格弹出框
  309. dialog: {
  310. show: false,
  311. type: '1'
  312. },
  313. };
  314. },
  315. onLoad: async function(e) {
  316. const that = this;
  317. that.$set(that, `id`, e.id || '');
  318. that.$set(that, `inviter`, e.inviter || '');
  319. await that.searchConfig();
  320. await that.search();
  321. await that.configShare();
  322. },
  323. onShow: async function() {
  324. const that = this;
  325. await that.watchLogin();
  326. },
  327. onUnload: function() {
  328. // 页面卸载,重新部署分享内容
  329. const that = this;
  330. if (that.config) {
  331. // 赋值默认值
  332. that.$config.share = {
  333. title: that.config.title,
  334. path: '/pages/index/index',
  335. imageUrl: that.config.config.share[0].url
  336. }
  337. }
  338. },
  339. methods: {
  340. // 查询系统设置
  341. searchConfig() {
  342. const that = this;
  343. uni.getStorage({
  344. key: 'config',
  345. success: function(res) {
  346. let data = res.data;
  347. that.$set(that, `config`, data);
  348. if (data.bottom_menu && data.bottom_menu.list.length > 0) {
  349. let list = data.bottom_menu.list.sort((a, b) => {
  350. return a.sort - b.sort
  351. });
  352. that.$set(that, `barList`, list)
  353. }
  354. }
  355. })
  356. },
  357. // 查询用户信息
  358. watchLogin() {
  359. const that = this;
  360. uni.getStorage({
  361. key: 'token',
  362. success: async function(res) {
  363. let user = that.$jwt(res.data);
  364. if (user) that.$set(that, `user`, user);
  365. await that.searchOther();
  366. },
  367. fail: function(err) {
  368. console.log('暂无用户信息');
  369. }
  370. })
  371. },
  372. // 查询其他信息
  373. async searchOther() {
  374. const that = this;
  375. let user = that.user;
  376. let res;
  377. // 是否关注商品
  378. res = await that.$api(`/storeGoods/check`, `GET`, {
  379. customer: user._id,
  380. goods: that.id
  381. });
  382. if (res.errcode == '0') that.$set(that, `goodsColect`, res.data);
  383. // 是否关注店铺
  384. res = await that.$api(`/storeShop/check`, `GET`, {
  385. customer: user._id,
  386. shop: that.info?.shop?._id
  387. });
  388. if (res.errcode == '0') that.$set(that, `shopColect`, res.data)
  389. },
  390. // 查询商品信息
  391. async search() {
  392. const that = this;
  393. let id = that.id;
  394. if (id) {
  395. let res;
  396. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  397. id: id
  398. });
  399. if (res.errcode == '0') {
  400. let data = res.data;
  401. if (data.goods.brief) data.goods.brief = data.goods.brief.replace(/\<img/gi,
  402. '<img class="rich-img"');
  403. // 特价
  404. let act;
  405. act = data.act.find(i => i.type == '3')
  406. if (act) {
  407. for (let val of act.list) {
  408. for (let [index, arr] of data.specs.entries()) {
  409. if (val.spec == arr._id) arr.price = val.price
  410. }
  411. }
  412. }
  413. // 规格排序
  414. // data.specs.sort(function(a, b) {
  415. // let i, j;
  416. // if (a.price) i = 'price'
  417. // else i = 'sell_money'
  418. // if (b.price) j = 'price'
  419. // else j = 'sell_money'
  420. // return a[i] - b[j];
  421. // })
  422. // 显示最低价格的规格信息,不考虑库存问题
  423. if (data.specs && data.specs.length > 0) {
  424. let infospecs = data.specs.sort((a, b) => {
  425. return a.sell_money - b.sell_money
  426. });
  427. that.$set(that, `infospecs`, infospecs[0])
  428. }
  429. that.$set(that, `info`, data);
  430. // 优惠
  431. act = data.act.find(i => i.type == '5')
  432. if (act) {
  433. var text = act.text.split(';')
  434. that.$set(that.discount, `full_decrement`, text);
  435. }
  436. act = data.act.find(i => i.type == '6')
  437. if (act) {
  438. var text = act.text.split(';')
  439. that.$set(that.discount, `full_fold`, text);
  440. }
  441. // 查询规格
  442. that.searchSpecs(data.specs);
  443. // 查询评价数
  444. that.searchRate(data);
  445. }
  446. } else {
  447. uni.showToast({
  448. title: '暂无商品信息',
  449. icon: 'none'
  450. })
  451. }
  452. },
  453. // 查询规格
  454. searchSpecs(e) {
  455. const that = this;
  456. if (e.length > 0) {
  457. let data = e.find(i => i.num > 0);
  458. let dataIndex = e.findIndex(i => i._id == data._id);
  459. if (data) {
  460. that.$set(that, `specsInfo`, data);
  461. that.$set(that, `is_specs`, dataIndex);
  462. }
  463. }
  464. },
  465. // 活动说明
  466. toActivity() {
  467. const that = this;
  468. if (that.info.act.length > 0) {
  469. that.$set(that, `popupShow`, '2')
  470. that.$refs.specShow.open();
  471. }
  472. },
  473. // 查看正品详情
  474. getDetail(e) {
  475. const that = this;
  476. uni.navigateTo({
  477. url: `/pagesHome/order/detail?id=${e.goods}`
  478. })
  479. },
  480. // 选择规格
  481. toSpecs(e) {
  482. const that = this;
  483. let specs = that.info.specs;
  484. let dataIndex = specs.findIndex(i => i._id == e._id);
  485. that.$set(that, `is_specs`, dataIndex);
  486. that.$set(that, `specsInfo`, e)
  487. that.$set(that, `buy_num`, 1);
  488. if (e.num <= 0) that.$set(that, `is_zero`, true)
  489. else that.$set(that, `is_zero`, false)
  490. },
  491. // 计数器
  492. toCount(e) {
  493. const that = this;
  494. that.$set(that, `buy_num`, e)
  495. },
  496. // 查询评价数
  497. async searchRate(e) {
  498. const that = this;
  499. let res = await that.$api(`/goodsRate`, `GET`, {
  500. goods: e.goods._id
  501. })
  502. if (res.errcode == '0') that.$set(that, `evaluate_num`, res.total);
  503. },
  504. // 关注商品
  505. async toGoodscolect() {
  506. const that = this;
  507. let user = that.user;
  508. if (user && user._id) {
  509. let res = await that.$api(`/storeGoods`, `POST`, {
  510. customer: user._id,
  511. goods: that.id
  512. });
  513. if (res.errcode == '0') {
  514. uni.showToast({
  515. title: res.data.msg,
  516. icon: 'none'
  517. })
  518. that.$set(that, `goodsColect`, res.data.result)
  519. }
  520. } else {
  521. uni.showToast({
  522. title: '暂无账号,无法收藏商品',
  523. icon: 'none'
  524. })
  525. }
  526. },
  527. // 选择规格
  528. toSpec() {
  529. const that = this;
  530. this.$set(that, `popupShow`, '1')
  531. that.$refs.specShow.open();
  532. },
  533. // 加入购物车
  534. async toMarket() {
  535. const that = this;
  536. let user = that.user;
  537. let info = that.info;
  538. let specsInfo = that.specsInfo;
  539. if (user && user._id) {
  540. let obj = {
  541. customer: user._id,
  542. shop: info.shop._id,
  543. goods: info.goods._id,
  544. goodsSpec: specsInfo._id,
  545. num: that.buy_num,
  546. inviter: that.inviter
  547. }
  548. let res = await that.$api(`/cart`, 'POST', obj)
  549. if (res.errcode == '0') {
  550. uni.showToast({
  551. title: `加入购物车成功`,
  552. icon: 'none'
  553. })
  554. that.toClose();
  555. } else {
  556. uni.showToast({
  557. title: res.errmsg,
  558. icon: 'none'
  559. })
  560. }
  561. } else {
  562. uni.navigateTo({
  563. url: `/pages/login/index`
  564. })
  565. }
  566. },
  567. // 立即购买
  568. async toBuy() {
  569. const that = this;
  570. let user = that.user;
  571. let info = that.info;
  572. let specsInfo = that.specsInfo;
  573. let act = that.info.act.map(item => {
  574. return item._id
  575. })
  576. if (user && user._id) {
  577. let obj = [{
  578. customer: user._id,
  579. shop: info.shop._id,
  580. goods: info.goods._id,
  581. goodsSpec: specsInfo._id,
  582. num: that.buy_num,
  583. inviter: that.inviter,
  584. act
  585. }]
  586. let res = await that.$api(`/util/checkCanBuy`, 'POST', obj)
  587. if (res.errcode == '0') {
  588. if (res.data.result == true) {
  589. uni.navigateTo({
  590. url: `/pagesHome/order/order?key=${res.data.key}`
  591. })
  592. } else {
  593. uni.showToast({
  594. title: res.data.msg,
  595. icon: 'none'
  596. })
  597. }
  598. } else {
  599. uni.showToast({
  600. title: res.errmsg,
  601. icon: 'none'
  602. })
  603. }
  604. } else {
  605. uni.navigateTo({
  606. url: `/pages/login/index`
  607. })
  608. }
  609. },
  610. // 参团
  611. toGroup() {
  612. const that = this;
  613. let specs_id = that.specsInfo._id;
  614. let id = that.id;
  615. uni.navigateTo({
  616. url: `/pagesHome/group/index?specs_id=${specs_id}&goods_id=${id}`
  617. })
  618. },
  619. // 关闭弹框
  620. toClose() {
  621. const that = this;
  622. that.$set(that, `btn_type`, '1');
  623. that.$refs.specShow.close();
  624. },
  625. // 评价
  626. toEvaluate() {
  627. const that = this;
  628. uni.navigateTo({
  629. url: `/pagesHome/order/appraise?id=${that.info.goods._id}`
  630. })
  631. },
  632. // 进入店铺
  633. toShop() {
  634. const that = this;
  635. let info = that.info;
  636. uni.navigateTo({
  637. url: `/pagesHome/shop/index?id=${info.shop._id}`
  638. })
  639. },
  640. // 关注店铺
  641. async toShopcolect() {
  642. const that = this;
  643. let user = that.user;
  644. if (user && user._id) {
  645. let res = await that.$api(`/storeShop`, `POST`, {
  646. customer: user._id,
  647. shop: that.info.shop._id
  648. });
  649. if (res.errcode == '0') {
  650. uni.showToast({
  651. title: res.data.msg,
  652. icon: 'none'
  653. })
  654. that.$set(that, `shopColect`, res.data.result)
  655. }
  656. } else {
  657. uni.showToast({
  658. title: '暂无账号,无法关注商铺',
  659. icon: 'none'
  660. })
  661. }
  662. },
  663. // 店铺,购物车
  664. toNavleft(e) {
  665. const that = this;
  666. if (e.content.type == 'shop') {
  667. that.toShop();
  668. } else if (e.content.type == 'market') {
  669. let obj = {
  670. route: e.content.route
  671. }
  672. that.toPath(obj)
  673. }
  674. },
  675. // 加入购物车,立即购买
  676. toNavright(e) {
  677. const that = this;
  678. that.$set(that, `popupShow`, '1');
  679. that.$set(that, `btn_type`, e.content.type);
  680. that.$refs.specShow.open();
  681. },
  682. // 右侧菜单
  683. toMenubar() {
  684. const that = this;
  685. that.$set(that, `is_menu`, that.is_menu ? false : true)
  686. },
  687. toPath(e) {
  688. let url = `/${e.route}`;
  689. uni.reLaunch({
  690. url
  691. })
  692. },
  693. // 配置分享内容
  694. configShare() {
  695. const that = this;
  696. let id = that.id;
  697. let inviter = that.user && that.user._id ? that.user._id : '';
  698. let title = that.info && that.info.goods ? that.info.goods.name : '';
  699. let imageUrl = that.info && that.info.goods ? that.info.goods.file[0].url : '';
  700. that.$config.share = {
  701. title: title,
  702. path: `/pagesHome/order/detail?id=${id}&inviter=${inviter}`,
  703. imageUrl: imageUrl
  704. }
  705. },
  706. // 规格预览
  707. diaView() {
  708. const that = this;
  709. that.$set(that, `dialog`, {
  710. show: true,
  711. type: '1'
  712. })
  713. },
  714. // 查看活动
  715. toAct(item) {
  716. uni.navigateTo({
  717. url: `/pagesRest/activity/info?id=${item._id}`
  718. })
  719. },
  720. // 弹框选择规格
  721. diaSpecs(e) {
  722. const that = this;
  723. let specs = that.info.specs;
  724. let index = e.detail.current;
  725. let data = specs[index];
  726. that.$set(that, `is_specs`, index);
  727. that.$set(that, `specsInfo`, data);
  728. that.$set(that, `buy_num`, 1);
  729. if (data.num <= 0) that.$set(that, `is_zero`, true)
  730. else that.$set(that, `is_zero`, false)
  731. },
  732. // 关闭弹框
  733. dialogClose() {
  734. const that = this;
  735. that.$set(that, `dialog`, {
  736. show: false,
  737. type: '1'
  738. })
  739. }
  740. }
  741. }
  742. </script>
  743. <style lang="scss">
  744. .main {
  745. display: flex;
  746. flex-direction: column;
  747. width: 100vw;
  748. height: 100vh;
  749. .one {
  750. position: relative;
  751. flex-grow: 1;
  752. .one_1 {
  753. border-bottom: 0.5vw solid var(--f9Color);
  754. swiper {
  755. height: 44vh !important;
  756. }
  757. .list {
  758. border-radius: 5px;
  759. .image {
  760. width: 100%;
  761. height: 100%;
  762. border-radius: 5px;
  763. background-color: #fff;
  764. }
  765. }
  766. .goodsColect {
  767. position: fixed;
  768. top: 2vw;
  769. right: 3vw;
  770. z-index: 99;
  771. background-color: #858585;
  772. border-radius: 90px;
  773. text {
  774. font-size: 30px;
  775. }
  776. }
  777. .acttags {
  778. position: absolute;
  779. top: 1vw;
  780. left: 1vw;
  781. width: 97%;
  782. text {
  783. display: inline-block;
  784. background-color: #ff0000;
  785. color: #fff;
  786. border-radius: 1vw;
  787. padding: 0.5vw;
  788. font-size: 12px;
  789. margin: 0 1vw 0 0;
  790. }
  791. }
  792. }
  793. .one_2 {
  794. border-bottom: 0.5vw solid var(--f9Color);
  795. padding: 2vw;
  796. .money {
  797. font-size: 20px;
  798. padding: 0 1vw 0 0;
  799. color: #ff0000;
  800. font-weight: bold;
  801. text {
  802. font-size: 14px;
  803. }
  804. }
  805. .money:last-child {
  806. font-size: 16px;
  807. color: #858585;
  808. text-decoration: line-through;
  809. }
  810. }
  811. .one_3 {
  812. display: flex;
  813. flex-wrap: wrap;
  814. padding: 1vw;
  815. border-bottom: 0.5vw solid var(--f9Color);
  816. .act {
  817. font-size: 12px;
  818. border: 1px solid var(--fFB1Color);
  819. margin: 0 1vw 1vw 0;
  820. color: var(--fFB1Color);
  821. border-radius: 6px;
  822. padding: 0 1vw;
  823. }
  824. }
  825. .one_4 {
  826. border-bottom: 0.5vw solid var(--f9Color);
  827. padding: 2vw;
  828. .name {
  829. font-size: 17px;
  830. font-weight: bold;
  831. margin: 0 0 2vw 0;
  832. }
  833. .brief {
  834. font-size: 14px;
  835. color: #858585;
  836. margin: 0 0 1vw 0;
  837. }
  838. .money {
  839. font-size: 13px;
  840. color: #858585;
  841. text {
  842. padding: 0 2vw 0 0;
  843. }
  844. }
  845. }
  846. .one_5 {
  847. display: flex;
  848. justify-content: space-between;
  849. padding: 2vw;
  850. border-bottom: 0.5vw solid var(--f9Color);
  851. font-size: 14px;
  852. }
  853. .one_6 {
  854. display: flex;
  855. justify-content: space-between;
  856. padding: 2vw;
  857. border-bottom: 0.5vw solid var(--f9Color);
  858. font-size: 14px;
  859. }
  860. .one_7 {
  861. padding: 2vw;
  862. border-bottom: 0.5vw solid var(--f9Color);
  863. .one_7_1 {
  864. margin: 0 0 1vw 0;
  865. display: flex;
  866. .shop_1 {
  867. width: 15vw;
  868. height: 15vw;
  869. border: 1px solid #f1f1f1;
  870. .image {
  871. width: 100%;
  872. height: 100%;
  873. }
  874. }
  875. .shop_2 {
  876. width: 78vw;
  877. padding: 0 0 0 2vw;
  878. .name {
  879. font-size: 14px;
  880. margin: 0 0 1vw 0;
  881. }
  882. .num {
  883. font-size: 12px;
  884. color: #858585;
  885. text:last-child {
  886. color: #000;
  887. }
  888. }
  889. }
  890. }
  891. .one_7_2 {
  892. margin: 0 0 2vw 0;
  893. display: flex;
  894. justify-content: space-between;
  895. padding: 2vw 0;
  896. .score_1 {
  897. width: 33vw;
  898. text-align: center;
  899. font-size: 14px;
  900. color: #858585;
  901. text:nth-child(2) {
  902. color: #ff0000;
  903. }
  904. text:nth-child(3) {
  905. float: right;
  906. }
  907. }
  908. }
  909. .one_7_3 {
  910. display: flex;
  911. justify-content: space-around;
  912. .btn {
  913. width: 40vw;
  914. button {
  915. width: 100%;
  916. font-size: 15px;
  917. }
  918. }
  919. }
  920. }
  921. .one_8 {
  922. padding: 2vw;
  923. .rich-img {
  924. width: 100% !important;
  925. display: block;
  926. }
  927. }
  928. }
  929. .two {
  930. width: 100vw;
  931. height: 8vh;
  932. overflow: hidden;
  933. }
  934. }
  935. .scroll-view {
  936. position: absolute;
  937. top: 0;
  938. left: 0;
  939. right: 0;
  940. bottom: 0;
  941. .list-scroll-view {
  942. display: flex;
  943. flex-direction: column;
  944. }
  945. }
  946. .bar_1 {
  947. position: fixed;
  948. right: 2vw;
  949. bottom: 20vw;
  950. text {
  951. background-color: #858585;
  952. border-radius: 90px;
  953. font-size: 30px;
  954. }
  955. }
  956. .bar_2 {
  957. position: fixed;
  958. right: 2vw;
  959. bottom: 28vw;
  960. width: 27vw;
  961. background: #ffffff;
  962. padding: 0 2vw;
  963. box-shadow: 0 0 5px #858585;
  964. .list {
  965. display: flex;
  966. border-bottom: 1px solid #f1f1f1;
  967. padding: 1vw 0;
  968. .image {
  969. width: 8vw;
  970. height: 8vw;
  971. }
  972. .name {
  973. font-size: 14px;
  974. position: relative;
  975. top: 2vw;
  976. left: 2vw;
  977. }
  978. }
  979. .list:last-child {
  980. border-bottom: none;
  981. }
  982. }
  983. .uni-popup {
  984. z-index: 9999 !important;
  985. }
  986. .popup {
  987. display: flex;
  988. flex-direction: column;
  989. width: 100vw;
  990. height: 60vh;
  991. .close {
  992. text-align: right;
  993. padding: 2vw;
  994. }
  995. .info_1 {
  996. position: relative;
  997. display: flex;
  998. flex-direction: column;
  999. height: 54vh;
  1000. .info_1 {
  1001. position: relative;
  1002. flex-grow: 1;
  1003. .one {
  1004. padding: 2vw;
  1005. .one_1 {
  1006. display: flex;
  1007. margin: 0 0 2vw 0;
  1008. padding: 0 0 2vw 0;
  1009. border-bottom: 0.5vw solid var(--f9Color);
  1010. .l {
  1011. width: 25vw;
  1012. height: 25vw;
  1013. .image {
  1014. width: 100%;
  1015. height: 100%;
  1016. border-radius: 5px;
  1017. }
  1018. }
  1019. .r {
  1020. width: 70vw;
  1021. padding: 0 0 0 2vw;
  1022. .money {
  1023. margin: 0 0 2vw 0;
  1024. .money_1 {
  1025. font-size: 20px;
  1026. color: #ff0000;
  1027. padding: 0 2vw 0 0;
  1028. text {
  1029. font-size: 14px;
  1030. }
  1031. }
  1032. .money_1:last-child {
  1033. font-size: 16px;
  1034. color: #858585;
  1035. text-decoration: line-through;
  1036. }
  1037. }
  1038. .other_1 {
  1039. font-size: 15px;
  1040. color: #858585;
  1041. text:last-child {
  1042. color: #000000;
  1043. }
  1044. }
  1045. }
  1046. }
  1047. .one_2 {
  1048. margin: 0 0 2vw 0;
  1049. border-bottom: 0.5vw solid var(--f9Color);
  1050. .one_2_1 {
  1051. font-size: 14px;
  1052. margin: 0 0 2vw 0;
  1053. }
  1054. .one_2_2 {
  1055. display: flex;
  1056. flex-wrap: wrap;
  1057. .list {
  1058. background-color: #F5F5F5;
  1059. margin: 0 2vw 2vw 0;
  1060. padding: 0.5vw 1vw;
  1061. border-radius: 5px;
  1062. text {
  1063. font-size: 14px;
  1064. color: #000;
  1065. }
  1066. }
  1067. .huilist {
  1068. background-color: #DCDCDC;
  1069. text {
  1070. color: #858585;
  1071. }
  1072. }
  1073. .redlist {
  1074. background-color: #ff0000;
  1075. text {
  1076. color: #ffffff;
  1077. }
  1078. }
  1079. .huiilist {
  1080. background-color: #808080;
  1081. text {
  1082. color: #cccccc;
  1083. }
  1084. }
  1085. }
  1086. }
  1087. .one_3 {
  1088. display: flex;
  1089. .one_3_1 {
  1090. margin: 0 2vw 0 0;
  1091. text {
  1092. font-size: 14px;
  1093. color: #858585;
  1094. }
  1095. }
  1096. }
  1097. }
  1098. }
  1099. .info_2 {
  1100. display: flex;
  1101. text-align: center;
  1102. justify-content: space-between;
  1103. .btns {
  1104. width: 50vw;
  1105. }
  1106. .btn {
  1107. width: 100vw;
  1108. }
  1109. button {
  1110. width: 100%;
  1111. border-radius: 0;
  1112. background-color: var(--fFB1Color);
  1113. color: #fff;
  1114. border: 1px solid #f1f1f1;
  1115. }
  1116. .btncolor {
  1117. background: #f1f1f1;
  1118. color: #858585;
  1119. }
  1120. }
  1121. }
  1122. .info_3 {
  1123. position: relative;
  1124. flex-grow: 1;
  1125. .list {
  1126. margin: 0 2vw 2vw 2vw;
  1127. border-radius: 10px;
  1128. background-color: #FFF8DC;
  1129. .list_1 {
  1130. padding: 2vw;
  1131. font-size: 14px;
  1132. .title_1 {
  1133. display: flex;
  1134. justify-content: space-between;
  1135. margin: 1vw 0;
  1136. .l {
  1137. text {
  1138. margin: 0 1vw 0 0;
  1139. font-size: 12px;
  1140. border-radius: 5px;
  1141. border: 0.5px solid var(--fFB1Color);
  1142. color: var(--fFB1Color);
  1143. }
  1144. }
  1145. }
  1146. .title_2 {
  1147. .specList {
  1148. .name {
  1149. margin: 0 0 1vw 0;
  1150. }
  1151. .giftList {
  1152. display: flex;
  1153. justify-content: space-between;
  1154. align-items: center;
  1155. margin: 0 0 1vw 0;
  1156. border: 0.5px solid var(--f9Color);
  1157. border-radius: 10px;
  1158. .left {
  1159. width: 85vw;
  1160. }
  1161. }
  1162. }
  1163. .text {
  1164. color: var(--fFB1Color);
  1165. }
  1166. }
  1167. }
  1168. }
  1169. }
  1170. }
  1171. .dialog {
  1172. position: fixed;
  1173. width: 100vw;
  1174. height: 100vh;
  1175. background-color: #000000;
  1176. z-index: 99999;
  1177. display: flex;
  1178. flex-direction: column;
  1179. justify-content: center;
  1180. swiper {
  1181. height: 60vh;
  1182. }
  1183. .list {
  1184. .list_1 {
  1185. padding: 2vw;
  1186. margin: 0 0 5vw 0;
  1187. .image {
  1188. width: 100%;
  1189. height: 40vh;
  1190. }
  1191. }
  1192. .name {
  1193. text-align: center;
  1194. margin: 0 10vw;
  1195. background-color: #6666669f;
  1196. border-radius: 25px;
  1197. padding: 2vw;
  1198. text {
  1199. color: #fff;
  1200. font-size: 15px;
  1201. overflow: hidden;
  1202. text-overflow: ellipsis;
  1203. -webkit-line-clamp: 2;
  1204. word-break: break-all;
  1205. display: -webkit-box;
  1206. -webkit-box-orient: vertical;
  1207. }
  1208. }
  1209. }
  1210. }
  1211. </style>