index.vue 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161
  1. <template>
  2. <view class="group-con" :style="colorStyle">
  3. <view class="w-full header-gradient relative z-99" :style="{'padding-top': sysHeight + 'px'}">
  4. <view class="w-full px-20 pl-20 h-80 flex-between-center">
  5. <text class="iconfont icon-ic_leftarrow fs-40 text--w111-fff" @tap="backPage()"></text>
  6. <text class="fs-34 fw-500 text--w111-fff">{{userBool === 1 && isOk == 0 && pinkBool === 0?'开团':pinkBool === 1?'拼团成功':pinkBool === -1?'拼团失败':'参团'}}</text>
  7. <text></text>
  8. </view>
  9. <view class="p-20">
  10. <view class="w-full bg--w111-fff rd-24rpx p-20 flex relative">
  11. <easy-loadimage
  12. mode="widthFix"
  13. :image-src="storeCombination.image"
  14. width="240rpx"
  15. height="240rpx"
  16. borderRadius="20rpx"></easy-loadimage>
  17. <view class="flex-1 h-240 pl-20 flex-col justify-between">
  18. <view class="w-full">
  19. <view class="w-full fs-28 lh-40rpx line2">{{storeCombination.title}}</view>
  20. <view class="flex fs-20 mt-14">
  21. <view class="tuan-num text--w111-fff flex-center">{{storeCombination.people}}人团</view>
  22. <view class="complete font-red flex-center">已拼{{storeCombination.pink_count}}份</view>
  23. </view>
  24. </view>
  25. <view class="w-full flex-between-center">
  26. <view>
  27. <view class="flex items-baseline">
  28. <text class="fs-22 lh-30rpx font-red fw-500">拼团价:</text>
  29. <baseMoney :money="storeCombination.price" symbolSize="24" integerSize="40" decimalSize="24" color="#e93323" weight></baseMoney>
  30. </view>
  31. <view class="text-line text--w111-999 fs-22 lh-30rpx mt-12">¥{{storeCombination.product_price}}</view>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="abs-badge">
  36. <image class="w-full h-full" :src="imgHost + '/statics/images/product/pink-success.png'" v-if="pinkBool === 1"></image>
  37. <image class="w-full h-full" :src="imgHost + '/statics/images/product/pink-error.png'" v-else-if="pinkBool === -1"></image>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="px-20">
  43. <view class="wrapper">
  44. <view class="tips" v-if="pinkBool === 1">恭喜您拼团成功</view>
  45. <view class="tips" v-else-if="pinkBool === -1">还差<span class="font-num pl-10 pr-10">{{ count }}人</span>,拼团失败</view>
  46. <view class="tips" v-else-if="pinkBool === 0">拼团中,还差<span class="font-num pl-10 pr-10">{{ count }}人</span>拼团成功</view>
  47. <view class="list acea-row row-middle" :class="[pinkBool === 1 || pinkBool === -1 ? 'result' : '', iShidden ? 'on' : '']">
  48. <view class="pictrue">
  49. <img :src="pinkT.avatar" />
  50. <view class="label">团长</view>
  51. </view>
  52. <view class="pictrue" v-if="pinkAll.length > 0" v-for="(item, index) in pinkAll" :key="index"><img :src="item.avatar" /></view>
  53. <view class="pictrue" v-for="index in count" :key="index">
  54. <image class="img-none" src="../static/vacancy.png"> </image>
  55. </view>
  56. </view>
  57. <view class="title acea-row row-center-wrapper" v-if="pinkBool === 0">
  58. <view class="name acea-row row-center-wrapper">
  59. 剩余
  60. <CountDown
  61. :is-day="false"
  62. tip-text=" "
  63. day-text=" "
  64. hour-text=" : "
  65. minute-text=" : "
  66. second-text=" "
  67. bgColor="rgba(233, 51, 35, 0.20)"
  68. dotColor="#e93323"
  69. :datatime="pinkT.stop_time"></CountDown>结束
  70. </view>
  71. </view>
  72. <view v-if="(pinkBool === 1 || pinkBool === -1) && pinkAll.length > 9" class="lookAll acea-row row-center-wrapper" @click="lookAll">
  73. {{ iShidden ? '收起' : '查看全部' }}
  74. <span class="iconfont" :class="iShidden ? 'icon-ic_uparrow' : 'icon-ic_downarrow'"></span>
  75. </view>
  76. <view class="teamBnt" v-if="!isLogin" @click="getIsLogin">立即登录</view>
  77. <view v-if="userBool === 1 && isOk == 0 && pinkBool === 0">
  78. <view class="teamBnt" @click="listenerActionSheet">邀请好友参团</view>
  79. </view>
  80. <view class="teamBnt" v-else-if="userBool === 0 && pinkBool === 0 && count > 0">
  81. <view v-if="endTime" @click="goDetail(storeCombination.id)">我要开团</view>
  82. <view v-else @click="pay">我要参团</view>
  83. </view>
  84. <view class="teamBnt" v-if="pinkBool === 1 || pinkBool === -1" @click="goDetail(storeCombination.id)">再次开团</view>
  85. <view class="cancel" @click="getCombinationRemove" v-if="pinkBool === 0 && userBool === 1 && pinkT.uid == userInfo.uid">
  86. 取消开团
  87. </view>
  88. <view class="lookOrder" v-if="pinkBool === 1" @click="goOrder">
  89. 查看订单信息
  90. <span class="iconfont icon-ic_rightarrow"></span>
  91. </view>
  92. </view>
  93. <view class="play-wrapper">
  94. <view class="w-full flex-center">
  95. <image class="zs" src="@/static/img/recommend_zs.png"></image>
  96. <text class="fs-32 fw-500 text--w111-333 lh-44rpx px-6">拼团玩法</text>
  97. <image class="zs" src="@/static/img/recommend_zs.png"></image>
  98. </view>
  99. <view class="wrapper-main acea-row row-center-wrapper">
  100. <view class="progress-box">
  101. <view class="progress">
  102. <view class="inner bg-red"></view>
  103. </view>
  104. <view class="steps acea-row">
  105. <view class="item">
  106. <view class="head bg-red">1</view>
  107. <view class="main">开团/参团享团购价</view>
  108. </view>
  109. <view class="item">
  110. <view class="head bg-red">2</view>
  111. <view class="main">邀请好友参团优惠多</view>
  112. </view>
  113. <view class="item">
  114. <view class="head" :class="pinkBool === 1 ? 'bg-red' : ''">3</view>
  115. <view class="main">人满发货不满退款</view>
  116. </view>
  117. </view>
  118. </view>
  119. </view>
  120. </view>
  121. <view class="mt-40">
  122. <view class="w-full flex-center">
  123. <image class="zs" src="@/static/img/recommend_zs.png"></image>
  124. <text class="fs-32 fw-500 text--w111-333 lh-44rpx px-6">大家都在拼</text>
  125. <image class="zs" src="@/static/img/recommend_zs.png"></image>
  126. </view>
  127. <view class="card w-full bg--w111-fff rd-24rpx p-20 flex mt-24"
  128. v-for="(item,index) in storeCombinationHost" :key="index"
  129. @tap="goDetail(item.id)">
  130. <easy-loadimage
  131. mode="widthFix"
  132. :image-src="item.image"
  133. width="240rpx"
  134. height="240rpx"
  135. borderRadius="20rpx"></easy-loadimage>
  136. <view class="flex-1 h-240 pl-20 flex-col justify-between">
  137. <view class="w-full">
  138. <view class="w-full fs-28 lh-40rpx line2">{{item.title}}</view>
  139. <view class="flex fs-20 mt-14">
  140. <view class="tuan-num text--w111-fff flex-center">{{item.people}}人团</view>
  141. <view class="complete font-red flex-center">已拼{{item.pink_count}}份</view>
  142. </view>
  143. </view>
  144. <view class="w-full flex-between-center">
  145. <view>
  146. <view class="flex items-baseline">
  147. <text class="fs-22 lh-30rpx font-red fw-500">拼团价:</text>
  148. <baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" color="#e93323" weight></baseMoney>
  149. </view>
  150. <view class="text-line text--w111-999 fs-22 lh-30rpx mt-12">¥{{item.product_price}}</view>
  151. </view>
  152. <view class="w-144 h-56 rd-30rpx flex-center fs-24 bg-red-gradient text--w111-fff" v-if="item.stock > 0 && item.quota > 0">参与拼团</view>
  153. <view class="w-144 h-56 rd-30rpx flex-center fs-24 bg-gray text--w111-fff" v-else>参与拼团</view>
  154. </view>
  155. </view>
  156. </view>
  157. </view>
  158. </view>
  159. <product-window
  160. :attr="attr"
  161. :limitNum="1"
  162. :iSbnt="1"
  163. :type="2"
  164. :productId="storeCombination.product_id"
  165. @myevent="onMyEvent"
  166. @ChangeAttr="ChangeAttr"
  167. @ChangeCartNum="ChangeCartNum"
  168. @iptCartNum="iptCartNum"
  169. @getImg="showImg"
  170. @attrVal="attrVal"
  171. @deliveryFun="deliveryFun"
  172. @onAddressId="onAddressId"
  173. @onstoreId="onstoreId"
  174. @goCat="goPay"></product-window>
  175. <cusPreviewImg ref="cusPreviewImg" :list="skuArr" @changeSwitch="changeSwitch"></cusPreviewImg>
  176. <!-- 分享按钮 -->
  177. <view class="generate-posters acea-row row-middle pt-24 pb-safe" :class="posters ? 'on' : ''">
  178. <!-- #ifndef MP -->
  179. <button class="item" hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox = true">
  180. <view class="pictrue">
  181. <image src="@/static/images/weixin.png"></image>
  182. </view>
  183. <view class="">发送给朋友</view>
  184. </button>
  185. <!-- #endif -->
  186. <!-- #ifdef MP -->
  187. <button class="item" open-type="share" hover-class='none' @click="goFriend">
  188. <view class="pictrue">
  189. <image src="@/static/images/weixin.png"></image>
  190. </view>
  191. <view class="">发送给朋友</view>
  192. </button>
  193. <!-- #endif -->
  194. <!-- #ifdef APP-PLUS -->
  195. <view class="item" @click="appShare('WXSceneSession')">
  196. <view class="pictrue">
  197. <image src="@/static/images/weixin.png"></image>
  198. </view>
  199. <view class="">微信好友</view>
  200. </view>
  201. <view class="item" @click="appShare('WXSenceTimeline')">
  202. <view class="pictrue">
  203. <image src="@/static/images/weixin.png"></image>
  204. </view>
  205. <view class="">微信朋友圈</view>
  206. </view>
  207. <!-- #endif -->
  208. <!-- #ifndef APP-PLUS -->
  209. <button class="item" hover-class='none' @tap="goPoster">
  210. <view class="pictrue">
  211. <image src="@/static/images/changan.png"></image>
  212. </view>
  213. <view class="">生成海报</view>
  214. </button>
  215. <!-- #endif -->
  216. </view>
  217. <view class="mask" v-if="posters" @click="listenerActionClose"></view>
  218. <!-- 发送给朋友图片 -->
  219. <view class="share-box" v-if="H5ShareBox">
  220. <image :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false"></image>
  221. </view>
  222. </view>
  223. </template>
  224. <script>
  225. let sysHeight = uni.getSystemInfoSync().statusBarHeight;
  226. import CountDown from '@/components/countDown';
  227. import ProductWindow from '@/components/productWindow';
  228. import cusPreviewImg from '@/components/cusPreviewImg';
  229. import util from '../../../utils/util.js';
  230. import {
  231. toLogin
  232. } from '@/libs/login.js';
  233. import {
  234. mapGetters
  235. } from 'vuex';
  236. import {
  237. getCombinationPink,
  238. postCombinationRemove
  239. } from '@/api/activity';
  240. import {
  241. postCartAdd
  242. } from '@/api/store';
  243. import home from '@/components/home';
  244. const NAME = 'GroupRule';
  245. import {
  246. TOKENNAME,
  247. HTTP_REQUEST_URL
  248. } from '@/config/app.js';
  249. const app = getApp();
  250. export default {
  251. name: NAME,
  252. components: {
  253. CountDown,
  254. ProductWindow,
  255. home,
  256. cusPreviewImg
  257. },
  258. data: function() {
  259. return {
  260. colorStyle:'--view-theme: #e93323;--view-minorColorT:rgba(233, 51, 35, 0.1);--view-bntColor:#FE960F;',
  261. sysHeight:sysHeight,
  262. currentPinkOrder: '', //当前拼团订单
  263. isOk: 0, //判断拼团是否完成
  264. pinkBool: 0, //判断拼团是否成功|0=失败,1=成功
  265. userBool: 0, //判断当前用户是否在团内|0=未在,1=在
  266. pinkAll: [], //团员
  267. pinkT: [], //团长信息
  268. storeCombination: [], //拼团产品
  269. storeCombinationHost: [], //拼团推荐
  270. pinkId: 0,
  271. count: 0, //拼团剩余人数
  272. iShidden: false,
  273. isOpen: false, //是否打开属性组件
  274. attr: {
  275. cartAttr: false,
  276. productSelect: {
  277. image: '',
  278. store_name: '',
  279. price: '',
  280. quota: 0,
  281. unique: '',
  282. cart_num: 1,
  283. quota_show: 0,
  284. stock: 0,
  285. num: 0
  286. },
  287. productAttr: [],
  288. deliveryType:[],
  289. isType:0,
  290. relation_id:0,
  291. store_self_mention:0
  292. },
  293. cart_num: '',
  294. userInfo: {},
  295. posters: false,
  296. weixinStatus: false,
  297. H5ShareBox: false, //公众号分享图片
  298. isAuto: false, //没有授权的不会自动授权
  299. isShowAuth: false, //是否隐藏授权
  300. attrTxt: '请选择', //属性页面提示
  301. attrValue: '', //已选属性
  302. selectSku:{},
  303. imgHost: HTTP_REQUEST_URL,
  304. addressId:'',
  305. store_id :'',
  306. delivery_type:0,
  307. store_name:'',
  308. endTime: false,
  309. skuArr:[]
  310. };
  311. },
  312. computed: mapGetters({
  313. 'isLogin': 'isLogin',
  314. 'userData': 'userInfo'
  315. }),
  316. watch: {
  317. isLogin: {
  318. handler: function(newV, oldV) {
  319. if (newV) {
  320. this.getCombinationPink();
  321. } else {
  322. this.getIsLogin();
  323. }
  324. },
  325. deep: true
  326. },
  327. userData: {
  328. handler: function(newV, oldV) {
  329. if (newV) {
  330. this.userInfo = newV;
  331. app.globalData.openPages = '/pages/activity/goods_combination_status/index?id=' + this.pinkId;
  332. }
  333. },
  334. deep: true
  335. }
  336. },
  337. onLoad(options) {
  338. var that = this;
  339. // #ifdef MP
  340. if (options.scene) {
  341. var value = util.getUrlParams(decodeURIComponent(options.scene));
  342. if (typeof value === 'object') {
  343. if (value.id) options.id = value.id;
  344. //记录推广人uid
  345. if (value.spid) app.globalData.spid = value.spid;
  346. }
  347. }
  348. // #endif
  349. if (options.id) {
  350. that.pinkId = options.id;
  351. }
  352. // 记录推广人uid;
  353. if (options.spid) app.globalData.spid = options.spid;
  354. if (that.isLogin == false) {
  355. this.$Cache.set('login_back_url', `/pages/activity/goods_combination_status/index?id=${options.id}`);
  356. this.getIsLogin();
  357. } else {
  358. this.getCombinationPink();
  359. }
  360. },
  361. onShow() {
  362. uni.removeStorageSync('form_type_cart');
  363. },
  364. onPageScroll(object) {
  365. uni.$emit('scroll');
  366. },
  367. //#ifdef MP
  368. /**
  369. * 用户点击右上角分享
  370. */
  371. onShareAppMessage: function() {
  372. let that = this;
  373. return {
  374. title: '您的好友' + that.userInfo.nickname + '邀请您参团' + that.storeCombination.title,
  375. path: app.globalData.openPages,
  376. imageUrl: that.storeCombination.image
  377. };
  378. },
  379. //#endif
  380. methods: {
  381. onLoadFun() {
  382. this.getCombinationPink();
  383. this.isShowAuth = false;
  384. },
  385. getIsLogin() {
  386. toLogin()
  387. },
  388. // 授权关闭
  389. authColse: function(e) {
  390. this.isShowAuth = e
  391. },
  392. // 获取配送方式
  393. deliveryFun(e){
  394. this.delivery_type = e;
  395. },
  396. // 获取配送地址id
  397. onAddressId(row){
  398. this.addressId=row.id
  399. },
  400. // 获取自提地址id
  401. onstoreId(row) {
  402. this.store_id = row.id;
  403. this.store_name = row.name;
  404. },
  405. //点击sku图片打开轮播图
  406. showImg(index){
  407. console.log(this.selectSku)
  408. this.$refs.cusPreviewImg.open(this.selectSku.suk)
  409. },
  410. //滑动轮播图选择商品
  411. changeSwitch(e){
  412. let productSelect = this.skuArr[e];
  413. this.$set(this,'selectSku',productSelect);
  414. var skuList = productSelect.suk.split(',');
  415. skuList.forEach((i,index)=>{
  416. this.$set(this.attr.productAttr[index],'index',skuList[index]);
  417. })
  418. if (productSelect) {
  419. this.$set(this.attr.productSelect, "image", productSelect.image);
  420. this.$set(this.attr.productSelect, "price", productSelect.price);
  421. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  422. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  423. this.$set(this.attr.productSelect, "cart_num", 1);
  424. this.$set(this.attr.productSelect, "quota", productSelect.quota);
  425. this.$set(this.attr.productSelect, "quota_show", productSelect.quota_show);
  426. this.$set(this, "attrValue", productSelect.suk);
  427. this.attrTxt = "已选择"
  428. }
  429. },
  430. // app分享
  431. // #ifdef APP-PLUS
  432. appShare(scene) {
  433. let that = this
  434. let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
  435. let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由,也就是最后一个打开的页面路由
  436. uni.share({
  437. provider: "weixin",
  438. scene: scene,
  439. type: 0,
  440. href: `${HTTP_REQUEST_URL}${curRoute}`,
  441. title: '您的好友' + that.userInfo.nickname + '邀请您参团' + that.storeCombination.title,
  442. imageUrl: that.storeCombination.small_image,
  443. success: function(res) {
  444. uni.showToast({
  445. title: '分享成功',
  446. icon: 'success'
  447. })
  448. that.posters = false;
  449. },
  450. fail: function(err) {
  451. uni.showToast({
  452. title: '分享失败',
  453. icon: 'none',
  454. duration: 2000
  455. })
  456. that.posters = false;
  457. }
  458. });
  459. },
  460. // #endif
  461. /**
  462. * 分享打开
  463. *
  464. */
  465. listenerActionSheet: function() {
  466. if (this.isLogin == false) {
  467. this.getIsLogin();
  468. } else {
  469. // #ifdef H5
  470. if (this.$wechat.isWeixin() === true) {
  471. this.weixinStatus = true;
  472. }
  473. // #endif
  474. this.posters = true;
  475. }
  476. },
  477. // 分享关闭
  478. listenerActionClose: function() {
  479. this.posters = false;
  480. },
  481. // 小程序关闭分享弹窗;
  482. goFriend: function() {
  483. this.posters = false;
  484. },
  485. /**
  486. * 购物车手动填写
  487. *
  488. */
  489. iptCartNum: function(e) {
  490. this.$set(this.attr.productSelect, 'cart_num', e);
  491. this.$set(this, 'cart_num', e);
  492. },
  493. attrVal(val) {
  494. this.attr.productAttr[val.indexw].index = this.attr.productAttr[val.indexw].attr_values[val.indexn];
  495. },
  496. onMyEvent: function() {
  497. this.$set(this.attr, 'cartAttr', false);
  498. this.$set(this, 'isOpen', false);
  499. },
  500. //将父级向子集多次传送的函数合二为一;
  501. // changeFun: function(opt) {
  502. // if (typeof opt !== "object") opt = {};
  503. // let action = opt.action || "";
  504. // let value = opt.value === undefined ? "" : opt.value;
  505. // this[action] && this[action](value);
  506. // },
  507. // changeattr: function(res) {
  508. // var that = this;
  509. // that.attr.cartAttr = res;
  510. // },
  511. //选择属性;
  512. ChangeAttr: function(res) {
  513. this.$set(this, 'cart_num', 1);
  514. let productSelect = this.productValue[res];
  515. this.$set(this, "selectSku", productSelect);
  516. if (productSelect) {
  517. this.$set(this.attr.productSelect, 'image', productSelect.image);
  518. this.$set(this.attr.productSelect, 'price', productSelect.price);
  519. this.$set(this.attr.productSelect, 'quota', productSelect.quota);
  520. this.$set(this.attr.productSelect, 'unique', productSelect.unique);
  521. this.$set(this.attr.productSelect, 'cart_num', 1);
  522. this.$set(this.attr.productSelect, 'stock', productSelect.stock);
  523. this.$set(this.attr.productSelect, 'quota_show', productSelect.quota_show);
  524. this.$set(this, 'attrValue', res);
  525. this.$set(this, 'attrTxt', '已选择');
  526. } else {
  527. this.$set(this.attr.productSelect, 'image', this.storeCombination.image);
  528. this.$set(this.attr.productSelect, 'price', this.storeCombination.price);
  529. this.$set(this.attr.productSelect, 'quota', 0);
  530. this.$set(this.attr.productSelect, 'unique', '');
  531. this.$set(this.attr.productSelect, 'cart_num', 0);
  532. this.$set(this.attr.productSelect, 'quota_show', 0);
  533. this.$set(this.attr.productSelect, 'stock', 0);
  534. this.$set(this, 'attrValue', '');
  535. this.$set(this, 'attrTxt', '请选择');
  536. }
  537. },
  538. ChangeCartNum: function(res) {
  539. //changeValue:是否 加|减
  540. //获取当前变动属性
  541. let productSelect = this.productValue[this.attrValue];
  542. if (this.cart_num) {
  543. productSelect.cart_num = this.cart_num;
  544. this.attr.productSelect.cart_num = this.cart_num;
  545. }
  546. //如果没有属性,赋值给商品默认库存
  547. if (productSelect === undefined && !this.attr.productAttr.length) productSelect = this.attr
  548. .productSelect;
  549. if (productSelect === undefined) return;
  550. let stock = productSelect.stock || 0;
  551. let quotaShow = productSelect.quota_show || 0;
  552. let quota = productSelect.quota || 0;
  553. let productStock = productSelect.stock || 0;
  554. let num = this.attr.productSelect;
  555. let nums = this.storeCombination.num || 0;
  556. //设置默认数据
  557. if (productSelect.cart_num == undefined) productSelect.cart_num = 1;
  558. if (res) {
  559. num.cart_num++;
  560. let arrMin = [];
  561. arrMin.push(nums);
  562. arrMin.push(quota);
  563. arrMin.push(productStock);
  564. let minN = Math.min.apply(null, arrMin);
  565. if (num.cart_num >= minN) {
  566. this.$set(this.attr.productSelect, 'cart_num', minN ? minN : 1);
  567. this.$set(this, 'cart_num', minN ? minN : 1);
  568. }
  569. this.$set(this, 'cart_num', num.cart_num);
  570. this.$set(this.attr.productSelect, 'cart_num', num.cart_num);
  571. } else {
  572. num.cart_num--;
  573. if (num.cart_num < 1) {
  574. this.$set(this.attr.productSelect, 'cart_num', 1);
  575. this.$set(this, 'cart_num', 1);
  576. }
  577. this.$set(this, 'cart_num', num.cart_num);
  578. this.$set(this.attr.productSelect, 'cart_num', num.cart_num);
  579. }
  580. // if (res) {
  581. // num.cart_num++;
  582. // if (num.cart_num > quota) {
  583. // this.$set(this.attr.productSelect, "cart_num", quota);
  584. // this.$set(this, "cart_num", quota);
  585. // }
  586. // } else {
  587. // num.cart_num--;
  588. // if (num.cart_num < 1) {
  589. // this.$set(this.attr.productSelect, "cart_num", 1);
  590. // this.$set(this, "cart_num", 1);
  591. // }
  592. // }
  593. },
  594. //默认选中属性;
  595. DefaultSelect() {
  596. let productAttr = this.attr.productAttr,
  597. value = [];
  598. for (var key in this.productValue) {
  599. if (this.productValue[key].quota > 0) {
  600. value = this.attr.productAttr.length ? key.split(',') : [];
  601. break;
  602. }
  603. }
  604. for (let i = 0; i < productAttr.length; i++) {
  605. this.$set(productAttr[i], 'index', value[i]);
  606. }
  607. //sort();排序函数:数字-英文-汉字;
  608. let productSelect = this.productValue[value.join(',')];
  609. if (productSelect && productAttr.length) {
  610. this.$set(this.attr.productSelect, 'store_name', this.storeCombination.title);
  611. this.$set(this.attr.productSelect, 'image', productSelect.image);
  612. this.$set(this.attr.productSelect, 'price', productSelect.price);
  613. this.$set(this.attr.productSelect, 'quota', productSelect.quota);
  614. this.$set(this.attr.productSelect, 'unique', productSelect.unique);
  615. this.$set(this.attr.productSelect, 'cart_num', 1);
  616. this.$set(this.attr.productSelect, 'stock', productSelect.stock);
  617. this.$set(this.attr.productSelect, 'quota_show', productSelect.quota_show);
  618. this.$set(this, 'attrValue', value.join(','));
  619. this.attrValue = value.join(',');
  620. this.$set(this, 'attrTxt', '已选择');
  621. } else if (!productSelect && productAttr.length) {
  622. this.$set(this.attr.productSelect, 'store_name', this.storeCombination.title);
  623. this.$set(this.attr.productSelect, 'image', this.storeCombination.image);
  624. this.$set(this.attr.productSelect, 'price', this.storeCombination.price);
  625. this.$set(this.attr.productSelect, 'quota', 0);
  626. this.$set(this.attr.productSelect, 'unique', '');
  627. this.$set(this.attr.productSelect, 'cart_num', 0);
  628. this.$set(this.attr.productSelect, 'stock', 0);
  629. this.$set(this.attr.productSelect, 'quota_show', 0);
  630. this.$set(this, 'attrValue', '');
  631. this.$set(this, 'attrTxt', '请选择');
  632. } else if (!productSelect && !productAttr.length) {
  633. this.$set(this.attr.productSelect, 'store_name', this.storeCombination.title);
  634. this.$set(this.attr.productSelect, 'image', this.storeCombination.image);
  635. this.$set(this.attr.productSelect, 'price', this.storeCombination.price);
  636. this.$set(this.attr.productSelect, 'quota', 0);
  637. this.$set(this.attr.productSelect, 'unique', this.storeCombination.unique || '');
  638. this.$set(this.attr.productSelect, 'cart_num', 1);
  639. this.$set(this.attr.productSelect, 'quota_show', 0);
  640. this.$set(this.attr.productSelect, 'stock', 0);
  641. this.$set(this, 'attrValue', '');
  642. this.$set(this, 'attrTxt', '请选择');
  643. }
  644. },
  645. setProductSelect: function() {
  646. var that = this;
  647. var attr = that.attr;
  648. attr.productSelect.image = that.storeCombination.image;
  649. attr.productSelect.store_name = that.storeCombination.title;
  650. attr.productSelect.price = that.storeCombination.price;
  651. attr.productSelect.quota = 0;
  652. attr.productSelect.quota_show = 0;
  653. attr.productSelect.stock = 0;
  654. attr.cartAttr = false;
  655. that.$set(that, 'attr', attr);
  656. },
  657. pay: function() {
  658. var that = this;
  659. that.attr.cartAttr = true;
  660. that.isOpen = true;
  661. },
  662. goPay() {
  663. var that = this;
  664. var data = {};
  665. // that.attr.cartAttr = res;
  666. data.productId = that.storeCombination.product_id;
  667. data.cartNum = that.attr.productSelect.cart_num;
  668. data.uniqueId = that.attr.productSelect.unique;
  669. data.combinationId = that.storeCombination.id;
  670. data.new = 1;
  671. data.store_id = this.store_id;
  672. data.addressId = this.addressId;
  673. data.delivery_type = this.delivery_type;
  674. postCartAdd(data)
  675. .then(res => {
  676. uni.navigateTo({
  677. url: '/pages/goods/order_confirm/index?new=1&cartId=' + res.data.cartId + '&pinkId=' + that.pinkId+'&delivery_type='+that.delivery_type+'&addressId='+that.addressId+'&store_id='+that.store_id+'&store_name='+that.store_name+'&product_id=' + that.storeCombination.product_id
  678. });
  679. })
  680. .catch(res => {
  681. that.$util.Tips({
  682. title: res
  683. });
  684. });
  685. },
  686. goPoster: function() {
  687. var that = this;
  688. that.posters = false;
  689. uni.navigateTo({
  690. url: '/pages/activity/poster-poster/index?type=2&id=' + that.pinkId
  691. });
  692. },
  693. goOrder: function() {
  694. var that = this;
  695. uni.navigateTo({
  696. url: '/pages/goods/order_details/index?order_id=' + that.currentPinkOrder
  697. });
  698. },
  699. //拼团列表
  700. goList: function() {
  701. uni.navigateTo({
  702. url: '/pages/activity/goods_combination/index'
  703. });
  704. },
  705. //拼团详情
  706. goDetail: function(id) {
  707. this.pinkId = id;
  708. uni.navigateTo({
  709. url: '/pages/activity/goods_details/index?id=' + id + '&type=3'
  710. });
  711. },
  712. //拼团信息
  713. getCombinationPink: function() {
  714. var that = this;
  715. getCombinationPink(that.pinkId)
  716. .then(res => {
  717. that.$set(that.attr, 'isType', res.data.store_combination.type);
  718. that.$set(that.attr, 'relation_id', res.data.store_combination.relation_id);
  719. that.$set(that.attr, 'store_self_mention', res.data.store_self_mention);
  720. that.$set(that, 'storeCombinationHost', res.data.store_combination_host);
  721. res.data.pinkT.stop_time = parseInt(res.data.pinkT.stop_time);
  722. let timestamp = Date.parse(new Date()) / 1000;
  723. that.endTime = parseInt(timestamp) > res.data.pinkT.stop_time;
  724. that.$set(that, 'storeCombination', res.data.store_combination);
  725. that.$set(that.attr.productSelect, 'num', res.data.store_combination.num);
  726. that.$set(that, 'pinkT', res.data.pinkT);
  727. that.$set(that, 'pinkAll', res.data.pinkAll);
  728. that.$set(that, 'count', res.data.count);
  729. that.$set(that, 'userBool', res.data.userBool);
  730. that.$set(that, 'pinkBool', res.data.pinkBool);
  731. that.$set(that, 'isOk', res.data.is_ok);
  732. that.$set(that, 'currentPinkOrder', res.data.current_pink_order);
  733. that.$set(that, 'userInfo', res.data.userInfo);
  734. for(let key in res.data.store_combination.productValue){
  735. let obj = res.data.store_combination.productValue[key];
  736. that.skuArr.push(obj)
  737. }
  738. that.selectSku = that.skuArr[0];
  739. app.globalData.openPages = '/pages/activity/goods_combination_status/index?id=' + this.pinkId;
  740. res.data.store_combination.delivery_type.sort((x,y)=>x - y);
  741. that.$set(that.attr, 'deliveryType', res.data.store_combination.delivery_type);
  742. that.attr.productAttr = res.data.store_combination.productAttr;
  743. that.productValue = res.data.store_combination.productValue;
  744. //#ifdef H5
  745. that.setOpenShare();
  746. //#endif
  747. that.setProductSelect();
  748. if (that.attr.productAttr != 0) that.DefaultSelect();
  749. if (res.data.is_ok == 1 && res.data.userBool == 0) {
  750. return this.$util.Tips({
  751. title: '你不是该团的成员',
  752. }, () => {
  753. uni.navigateTo({
  754. url: '/pages/activity/goods_combination/index'
  755. })
  756. });
  757. }
  758. })
  759. .catch(err => {
  760. return this.$util.Tips({
  761. title: err,
  762. }, () => {
  763. uni.navigateBack()
  764. // uni.switchTab({
  765. // url: '/pages/index/index'
  766. // })
  767. });
  768. });
  769. },
  770. //#ifdef H5
  771. setOpenShare() {
  772. let that = this;
  773. let configTimeline = {
  774. title: '您的好友' + that.userInfo.nickname + '邀请您参团' + that.storeCombination.title,
  775. desc: that.storeCombination.title,
  776. link: window.location.protocol + '//' + window.location.host +
  777. '/pages/activity/goods_combination_status/index?id=' + that.pinkId + '&spid=' + that.userInfo.uid,
  778. imgUrl: that.storeCombination.image
  779. };
  780. if (this.$wechat.isWeixin()) {
  781. this.$wechat
  782. .wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage',
  783. 'onMenuShareTimeline'
  784. ], configTimeline)
  785. .then(res => {})
  786. .catch(res => {
  787. if (res.is_ready) {
  788. res.wx.updateAppMessageShareData(configTimeline);
  789. res.wx.updateTimelineShareData(configTimeline);
  790. res.wx.onMenuShareAppMessage(configTimeline);
  791. res.wx.onMenuShareTimeline(configTimeline);
  792. }
  793. });
  794. }
  795. },
  796. //#endif
  797. //拼团取消
  798. getCombinationRemove: function() {
  799. var that = this;
  800. postCombinationRemove({
  801. id: that.pinkId,
  802. cid: that.storeCombination.id
  803. })
  804. .then(res => {
  805. that.$util.Tips({
  806. title: res.msg
  807. }, {
  808. tab: 3
  809. });
  810. })
  811. .catch(res => {
  812. that.$util.Tips({
  813. title: res
  814. });
  815. });
  816. },
  817. lookAll: function() {
  818. this.iShidden = !this.iShidden;
  819. },
  820. backPage(){
  821. let pages = getCurrentPages(); // 获取当前打开过的页面路由数,
  822. if (pages.length > 1) {
  823. uni.navigateBack()
  824. } else {
  825. uni.switchTab({
  826. url: '/pages/index/index'
  827. });
  828. }
  829. }
  830. }
  831. };
  832. </script>
  833. <style lang="scss" scoped>
  834. .header-gradient{
  835. background: linear-gradient(180deg, #E93323 0%, #E93323 52%, #F5F5F5 100%);
  836. }
  837. .tuan-num{
  838. width: 70rpx;
  839. height: 32rpx;
  840. background: #E93323;
  841. border-radius: 8rpx 0 0 8rpx;
  842. }
  843. .complete{
  844. width: 110rpx;
  845. height: 32rpx;
  846. background: rgba(233, 51, 35, 0.1);
  847. border-radius: 0 8rpx 8rpx 0;
  848. }
  849. .font-red{
  850. color: #e93323;
  851. }
  852. .bg-red{
  853. background-color: #e93323 !important;
  854. }
  855. .notice-box{
  856. width: 348rpx;
  857. background: linear-gradient(270deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 99%);
  858. }
  859. .zs{
  860. width:42rpx;
  861. height:36rpx;
  862. }
  863. .abs-badge{
  864. width: 102rpx;
  865. height: 102rpx;
  866. position: absolute;
  867. right: 20rpx;
  868. bottom: 20rpx;
  869. border-radius: 50%;
  870. }
  871. .generate-posters {
  872. width: 100%;
  873. background-color: #fff;
  874. position: fixed;
  875. left: 0;
  876. bottom: 0;
  877. z-index: 300;
  878. transform: translate3d(0, 100%, 0);
  879. transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  880. border-top: 1rpx solid #eee;
  881. }
  882. .generate-posters.on {
  883. transform: translate3d(0, 0, 0);
  884. }
  885. .generate-posters .item {
  886. display: flex;
  887. flex-direction: column;
  888. align-items: center;
  889. flex: 1;
  890. text-align: center;
  891. font-size: 30rpx;
  892. }
  893. .generate-posters .item .pictrue {
  894. width: 86rpx;
  895. height: 86rpx;
  896. margin-bottom: 10rpx;
  897. image{
  898. width: 100%;
  899. height: 100%;
  900. border-radius: 50%;
  901. }
  902. }
  903. .generate-posters .item .iconfont {
  904. font-size: 80rpx;
  905. color: #5eae72;
  906. }
  907. .generate-posters .item .iconfont.icon-haibao {
  908. color: #5391f1;
  909. }
  910. .group-con .wrapper {
  911. background-color: #fff;
  912. padding: 48rpx 0;
  913. border-radius: 24rpx;
  914. }
  915. .group-con .wrapper .title {
  916. margin-top: 48rpx;
  917. }
  918. .group-con .wrapper .title .line {
  919. width: 136rpx;
  920. height: 1px;
  921. background-color: #ddd;
  922. }
  923. .group-con .wrapper .title .name {
  924. // margin: 0 45rpx;
  925. font-size: 24rpx;
  926. line-height: 36rpx;
  927. color: #3D3D3D;
  928. }
  929. .group-con .wrapper .title .name .time {
  930. margin: 0 12rpx;
  931. }
  932. .group-con .wrapper .title .name .timeTxt {
  933. color: #fc4141;
  934. }
  935. .group-con .wrapper .title .name /deep/.time .styleAll {
  936. text-align: center;
  937. border-radius: 8rpx;
  938. font-size: 24rpx;
  939. font-weight: bold;
  940. display: inline-block;
  941. vertical-align: middle;
  942. width: 36rpx;
  943. height: 36rpx;
  944. line-height: 36rpx;
  945. }
  946. .group-con .wrapper .tips {
  947. font-size: 32rpx;
  948. font-weight: bold;
  949. text-align: center;
  950. // margin-top: 30rpx;
  951. line-height: 42rpx;
  952. color: #333333;
  953. }
  954. .group-con .wrapper .list {
  955. // padding: 0 30rpx;
  956. padding-left: 44rpx;
  957. margin-top: 40rpx;
  958. }
  959. .group-con .wrapper .list.result {
  960. max-height: 240rpx;
  961. overflow: hidden;
  962. padding-top: 20rpx;
  963. }
  964. .group-con .wrapper .list.result.on {
  965. max-height: 2000rpx;
  966. }
  967. .group-con .wrapper .list .pictrue {
  968. width: 94rpx;
  969. height: 94rpx;
  970. margin: 0 38rpx 30rpx 0;
  971. position: relative;
  972. }
  973. .group-con .wrapper .list .pictrue .label {
  974. position: absolute;
  975. bottom: -8rpx;
  976. left: 50%;
  977. width: 72rpx;
  978. height: 30rpx;
  979. margin-left: -36rpx;
  980. color: #fff;
  981. font-size: 20rpx;
  982. background-color: var(--view-theme);
  983. text-align: center;
  984. line-height: 30rpx;
  985. border-radius: 15rpx;
  986. }
  987. .group-con .wrapper .list .pictrue img,
  988. .group-con .wrapper .list .pictrue image {
  989. width: 100%;
  990. height: 100%;
  991. border-radius: 50%;
  992. border: 2rpx solid var(--view-theme);
  993. }
  994. .group-con .wrapper .list .pictrue image.img-none {
  995. border: none;
  996. }
  997. .group-con .wrapper .lookAll {
  998. font-size: 24rpx;
  999. color: #282828;
  1000. padding-top: 10rpx;
  1001. }
  1002. .group-con .wrapper .lookAll .iconfont {
  1003. font-size: 25rpx;
  1004. margin: 2rpx 0 0 10rpx;
  1005. }
  1006. .group-con .wrapper .teamBnt {
  1007. font-size: 28rpx;
  1008. width: 646rpx;
  1009. height: 88rpx;
  1010. border-radius: 44rpx;
  1011. text-align: center;
  1012. line-height: 88rpx;
  1013. color: #fff;
  1014. margin: 32rpx auto 0;
  1015. background-color: #e93323;
  1016. }
  1017. .group-con .wrapper .cancel,
  1018. .group-con .wrapper .lookOrder {
  1019. text-align: center;
  1020. font-size: 24rpx;
  1021. color: #333333;
  1022. padding-top: 30rpx;
  1023. }
  1024. .group-con .wrapper .cancel .iconfont {
  1025. font-size: 35rpx;
  1026. color: #2c2c2c;
  1027. vertical-align: -4rpx;
  1028. margin-right: 9rpx;
  1029. }
  1030. .group-con .wrapper .lookOrder .iconfont {
  1031. font-size: 25rpx;
  1032. color: #2c2c2c;
  1033. margin-left: 10rpx;
  1034. }
  1035. .share-box {
  1036. z-index: 1000;
  1037. position: fixed;
  1038. left: 0;
  1039. top: 0;
  1040. width: 100%;
  1041. height: 100%;
  1042. image {
  1043. width: 100%;
  1044. height: 100%;
  1045. }
  1046. }
  1047. .play-wrapper {
  1048. padding: 32rpx 0 132rpx;
  1049. border-radius: 24rpx;
  1050. margin-top: 20rpx;
  1051. background-color: #FFFFFF;
  1052. }
  1053. .play-wrapper .wrapper-header {
  1054. text-align: center;
  1055. }
  1056. .play-wrapper .wrapper-header .title {
  1057. display: inline-block;
  1058. height: 40rpx;
  1059. padding: 0 48rpx;
  1060. font-weight: 500;
  1061. font-size: 28rpx;
  1062. line-height: 40rpx;
  1063. color: #333333;
  1064. }
  1065. .play-wrapper .wrapper-main {
  1066. margin-top: 42rpx;
  1067. }
  1068. .play-wrapper .wrapper-main .item {
  1069. position: relative;
  1070. margin-right: 210rpx;
  1071. }
  1072. .play-wrapper .wrapper-main .item:last-child {
  1073. margin-right: 0;
  1074. }
  1075. .play-wrapper .wrapper-main .item .head {
  1076. position: relative;
  1077. width: 36rpx;
  1078. height: 36rpx;
  1079. border-radius: 18rpx;
  1080. background-color: #DDDDDD;
  1081. text-align: center;
  1082. font-weight: 600;
  1083. font-size: 24rpx;
  1084. line-height: 36rpx;
  1085. color: #FFFFFF;
  1086. }
  1087. .play-wrapper .wrapper-main .item .main {
  1088. position: absolute;
  1089. top: 0;
  1090. left: 50%;
  1091. width: 120rpx;
  1092. margin: 68rpx 0 0 -60rpx;
  1093. text-align: center;
  1094. font-size: 24rpx;
  1095. line-height: 34rpx;
  1096. color: #333333;
  1097. }
  1098. .play-wrapper .wrapper-main .progress-box {
  1099. position: relative;
  1100. }
  1101. .play-wrapper .wrapper-main .progress {
  1102. position: absolute;
  1103. top: 50%;
  1104. left: 50%;
  1105. width: 494rpx;
  1106. height: 12rpx;
  1107. background-color: #EEEEEE;
  1108. transform: translate(-50%, -50%);
  1109. }
  1110. .play-wrapper .wrapper-main .progress .inner {
  1111. width: 70%;
  1112. height: 12rpx;
  1113. border-radius: 6rpx;
  1114. background: linear-gradient(270deg, #FF7931 0%, var(--view-theme) 100%);
  1115. }
  1116. .bg-red-gradient{
  1117. background: linear-gradient(90deg, #E93323 0%, #FF7931 100%);
  1118. }
  1119. </style>