detail-bottom-button.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <template>
  2. <view class="detail-bottom-button">
  3. <view class="dir-left-nowrap" v-if="active">
  4. <view class="but" @click="route_jump">
  5. <app-form-id>
  6. <view class="but dir-top-nowrap main-left cross-center border-left">
  7. <image class="icon" src="/static/image/icon/index.png"></image>
  8. <text class="text">首页</text>
  9. </view>
  10. </app-form-id>
  11. </view>
  12. <view class="but" @click="set_favorite(favorite)">
  13. <app-form-id>
  14. <view class="but dir-top-nowrap main-left cross-center" >
  15. <image class="icon" :src="favorite ? '/static/image/icon/icon-favorite-active.png' : '/static/image/icon/icon-favorite.png'"></image>
  16. <text class="text">收藏</text>
  17. </view>
  18. </app-form-id>
  19. </view>
  20. <view class="buttons dir-left-nowrap" v-if="detail.goods_num == 0">
  21. <view class="dir-top-nowrap main-center cross-center" style="background-color: #CDCDCD;color: #fff;width: 100%;">
  22. <text>已售罄</text>
  23. </view>
  24. </view>
  25. <view v-else class="buttons dir-left-nowrap">
  26. <view class="advance-title dir-top-nowrap main-center cross-center" :class="theme === 'b' || theme === 'a' || theme === 'f' ? theme+ '-s-back ' + 'text ' + theme : theme+ '-s-back ' + theme+ '-m-text ' + theme">
  27. <text>预售截止</text>
  28. <text>{{getDate(end_prepayment_at)}}</text>
  29. </view>
  30. <view class="pay" :class="theme+ '-m-back ' + theme" @click="set_active">
  31. <app-form-id>
  32. <text>
  33. 支付定金
  34. </text>
  35. </app-form-id>
  36. </view>
  37. </view>
  38. </view>
  39. <view v-if="!active" class="dir-left-nowrap">
  40. <view class="title dir-top-nowrap main-center cross-center" :class="theme === 'b' || theme === 'a' || theme === 'f' ? theme+ '-s-back ' + 'text ' + theme : theme+ '-s-back ' + theme+ '-m-text ' + theme">
  41. <text>预售截止</text>
  42. <text>{{getDate(end_prepayment_at)}}</text>
  43. </view>
  44. <view class="pay" :class="[theme+ '-m-back ' + theme, buttonDisabled ? 'dis-button' : '']" @click="pay">
  45. <text>
  46. 支付定金
  47. </text>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. export default {
  54. name: "detail-bottom-button",
  55. data() {
  56. return {
  57. request_time: false,
  58. once_pay: false,
  59. }
  60. },
  61. props: {
  62. end_prepayment_at: String,
  63. active: Boolean,
  64. favorite: Boolean,
  65. goods_id: Number,
  66. detail: Object,
  67. num: Number,
  68. theme: String,
  69. buttonDisabled: Boolean
  70. },
  71. methods: {
  72. set_active() {
  73. if (this.$user.isLogin() && this.$store.state.user.info) {
  74. let member_level =this.$store.state.user.info.identity.member_level;
  75. if(member_level<this.detail.member_level){
  76. uni.showModal({
  77. title:"提示",
  78. content:"需达到"+this.detail.member_name+"会员才可购买",
  79. showCancel:true,
  80. buttonText: '升级',
  81. success:(res)=>{
  82. if (res.confirm) {
  83. uni.navigateTo({
  84. // url:"/pages/member/index/index",
  85. url: '/pages/member/upgrade/upgrade?level=' + member_level + '&other=' + this.detail.member_level
  86. })
  87. } else if (res.cancel) {
  88. console.log('用户点击取消');
  89. }
  90. }
  91. })
  92. return;
  93. }
  94. }
  95. if (this.$user.isLogin() && !this.once_pay) {
  96. this.$emit('close_attr', false);
  97. } else if (!this.$user.isLogin()) {
  98. this.$user.getInfo().then(() => {
  99. }).catch(() => {
  100. });
  101. }
  102. },
  103. set_favorite(data) {
  104. if (data) {
  105. this.$request({
  106. url: this.$api.user.favorite_remove,
  107. data: {
  108. goods_id: this.goods_id,
  109. }
  110. }).then(res => {
  111. if (res.code === 0) {
  112. this.$emit('favorite', !this.favorite);
  113. } else {
  114. uni.showModal({
  115. title: '提示',
  116. content: res.msg
  117. })
  118. }
  119. })
  120. } else {
  121. this.$request({
  122. url: this.$api.user.favorite_add,
  123. data: {
  124. goods_id: this.goods_id,
  125. }
  126. }).then(res => {
  127. if (res.code === 0) {
  128. this.$emit('favorite', !this.favorite);
  129. } else {
  130. uni.showModal({
  131. title: '提示',
  132. content: res.msg
  133. })
  134. }
  135. })
  136. }
  137. },
  138. route_jump() {
  139. uni.navigateTo({
  140. url: `/pages/index/index`,
  141. });
  142. },
  143. submit(body) {
  144. this.once_pay = true;
  145. uni.showLoading({
  146. title: '生成订单中...',
  147. mask: true,
  148. });
  149. this.$emit('close_attr', true);
  150. this.get_submit(body).then(response => {
  151. this.get_token(response.data);
  152. });
  153. },
  154. pay() {
  155. console.log("hahhaa")
  156. if (this.buttonDisabled) return;
  157. if (this.$user.isLogin() && this.$store.state.user.info) {
  158. let member_level =this.$store.state.user.info.identity.member_level;
  159. if(member_level<this.detail.member_level){
  160. uni.showModal({
  161. title:"提示",
  162. content:"需达到"+this.detail.member_name+"会员才可购买",
  163. showCancel:true,
  164. buttonText: '升级',
  165. success:(res)=>{
  166. if (res.confirm) {
  167. uni.navigateTo({
  168. // url:"/pages/member/index/index",
  169. url: '/pages/member/upgrade/upgrade?level=' + member_level + '&other=' + this.detail.member_level
  170. })
  171. } else if (res.cancel) {
  172. console.log('用户点击取消');
  173. }
  174. }
  175. })
  176. return;
  177. }
  178. }
  179. let body = {
  180. goods_id: this.detail.id,
  181. goods_attr_id: 0,
  182. goods_num: `${this.num}`,
  183. advance_goods_id: this.detail.advanceGoods.id,
  184. };
  185. let attr = ``;
  186. let attr_groups = this.detail.attr_groups;
  187. for (let i = 0; i < attr_groups.length; i++) {
  188. let attr_list = attr_groups[i];
  189. for (let j = 0; j < attr_list.attr_list.length; j++) {
  190. if (attr_list.attr_list[j].active) {
  191. attr += `:${attr_list.attr_list[j].attr_id}`
  192. }
  193. }
  194. }
  195. for (let i = 0; i < this.detail.attr.length; i++) {
  196. if (this.detail.attr[i].sign_id === attr.substring(1)) {
  197. if (this.num > this.detail.attr[i].stock) {
  198. uni.showToast({
  199. title: '库存不足',
  200. icon: 'none'
  201. });
  202. return;
  203. }
  204. body.goods_attr_id = this.detail.attr[i].id;
  205. }
  206. }
  207. this.$subscribe(this.detail.template_message).then(() => {
  208. this.submit(body);
  209. }).catch(() => {
  210. this.submit(body);
  211. });
  212. },
  213. get_token(data) {
  214. this.$request({
  215. url: this.$api.advance.pay_data,
  216. method: 'post',
  217. data: {
  218. ...data
  219. },
  220. }).then(response => {
  221. if (response.code === 0) {
  222. if (response.data.hasOwnProperty('id')) {
  223. uni.hideLoading();
  224. this.$payment.pay(response.data.id).then(() => {
  225. this.once_pay = false;
  226. // 支付成功
  227. uni.navigateTo({
  228. url: `/plugins/advance/order/order`
  229. })
  230. }).catch(() => {
  231. // 支付失败
  232. this.once_pay = false;
  233. uni.navigateTo({
  234. url: `/plugins/advance/order/order`
  235. })
  236. });
  237. } else {
  238. setTimeout(() => {
  239. this.get_token(data);
  240. }, 1000);
  241. }
  242. } else {
  243. uni.hideLoading();
  244. uni.showModal({
  245. title: '提示',
  246. content: response.msg,
  247. })
  248. }
  249. });
  250. },
  251. async get_submit(body) {
  252. const response = await this.$request({
  253. url: this.$api.advance.order_submit,
  254. method: 'post',
  255. data: {
  256. ...body,
  257. }
  258. });
  259. if (response.code === 0) {
  260. return response;
  261. } else if (response.code === 1) {
  262. uni.showModal({
  263. title: '提示',
  264. content: response.msg,
  265. success(res){
  266. if(res.cancel){
  267. this.$emit('request', this.goods_id);
  268. }else if(res.confirm){
  269. uni.navigateBack();
  270. }
  271. }
  272. });
  273. }
  274. },
  275. getDate(end_prepayment_at) {
  276. let newDate = new Date(end_prepayment_at.replace(/-/g, '/'));
  277. newDate.setDate(newDate.getDate());
  278. let month = newDate.getMonth() + 1;
  279. let day = newDate.getDate();
  280. let mm = "'" + month + "'";
  281. let dd = "'" + day + "'";
  282. if(mm.length == 3) {
  283. month = "0" + month;
  284. }
  285. if(dd.length == 3) {
  286. day = "0" + day;
  287. }
  288. let hour = newDate.getHours();//得到小时
  289. let minu = newDate.getMinutes();//得到分钟
  290. let sec = newDate.getSeconds();//得到秒
  291. sec = `${sec}`;
  292. minu = `${minu}`;
  293. hour = `${hour}`;
  294. if (hour.length === 1) {
  295. hour = `0${hour}`
  296. }
  297. if (minu.length === 1) {
  298. minu = `0${minu}`
  299. }
  300. if (sec.length === 1) {
  301. sec = `0${sec}`
  302. }
  303. return newDate.getFullYear() + "." + month + "." + day + ' ' + hour +':' + minu + ':' + sec;
  304. },
  305. },
  306. }
  307. </script>
  308. <style scoped lang="scss">
  309. .detail-bottom-button {
  310. height: #{110rpx};
  311. width: #{750rpx};
  312. border-top: #{1rpx} solid #e3e3e3;
  313. .dir-left-nowrap {
  314. view {
  315. height: #{110rpx};
  316. }
  317. .but {
  318. width: #{105rpx};
  319. .text {
  320. font-size: #{20rpx};
  321. color: #707070;
  322. margin-top: #{9rpx};
  323. }
  324. }
  325. .border-left {
  326. border-right: #{1rpx} solid #e3e3e3;
  327. }
  328. .buttons {
  329. width: #{272+272rpx};
  330. }
  331. .title {
  332. width: 50%;
  333. height: #{110rpx};
  334. font-size: #{24rpx};
  335. margin: 0;
  336. }
  337. .pay {
  338. width: 50%;
  339. height: #{110rpx};
  340. line-height: #{110rpx};
  341. text-align: center;
  342. color: #ffffff;
  343. font-size: #{28rpx};
  344. }
  345. }
  346. .icon {
  347. width: #{40rpx};
  348. height: #{40rpx};
  349. margin-top: #{21rpx};
  350. }
  351. .text {
  352. color: #ffffff;
  353. }
  354. }
  355. .advance-title {
  356. width: 50%;
  357. height: #{110rpx};
  358. font-size: #{24rpx};
  359. margin: 0;
  360. }
  361. .dis-button {
  362. background-color: #dddddd;
  363. }
  364. </style>