detail-bottom-button.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  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.showToast({
  77. title: '您的会员等级未达到'+this.detail.member_name+',继续加油哟。。。',
  78. icon: 'none'
  79. });
  80. return;
  81. }
  82. }
  83. if (this.$user.isLogin() && !this.once_pay) {
  84. this.$emit('close_attr', false);
  85. } else if (!this.$user.isLogin()) {
  86. this.$user.getInfo().then(() => {
  87. }).catch(() => {
  88. });
  89. }
  90. },
  91. set_favorite(data) {
  92. if (data) {
  93. this.$request({
  94. url: this.$api.user.favorite_remove,
  95. data: {
  96. goods_id: this.goods_id,
  97. }
  98. }).then(res => {
  99. if (res.code === 0) {
  100. this.$emit('favorite', !this.favorite);
  101. } else {
  102. uni.showModal({
  103. title: '提示',
  104. content: res.msg
  105. })
  106. }
  107. })
  108. } else {
  109. this.$request({
  110. url: this.$api.user.favorite_add,
  111. data: {
  112. goods_id: this.goods_id,
  113. }
  114. }).then(res => {
  115. if (res.code === 0) {
  116. this.$emit('favorite', !this.favorite);
  117. } else {
  118. uni.showModal({
  119. title: '提示',
  120. content: res.msg
  121. })
  122. }
  123. })
  124. }
  125. },
  126. route_jump() {
  127. uni.navigateTo({
  128. url: `/pages/index/index`,
  129. });
  130. },
  131. submit(body) {
  132. this.once_pay = true;
  133. uni.showLoading({
  134. title: '生成订单中...',
  135. mask: true,
  136. });
  137. this.$emit('close_attr', true);
  138. this.get_submit(body).then(response => {
  139. this.get_token(response.data);
  140. });
  141. },
  142. pay() {
  143. if (this.buttonDisabled) return;
  144. if (this.$user.isLogin() && this.$store.state.user.info) {
  145. let member_level =this.$store.state.user.info.identity.member_level;
  146. if(member_level<this.detail.member_level){
  147. uni.showToast({
  148. title: '您的会员等级未达到'+this.detail.member_name+',继续加油哟。。。',
  149. icon: 'none'
  150. });
  151. return;
  152. }
  153. }
  154. let body = {
  155. goods_id: this.detail.id,
  156. goods_attr_id: 0,
  157. goods_num: `${this.num}`,
  158. advance_goods_id: this.detail.advanceGoods.id,
  159. };
  160. let attr = ``;
  161. let attr_groups = this.detail.attr_groups;
  162. for (let i = 0; i < attr_groups.length; i++) {
  163. let attr_list = attr_groups[i];
  164. for (let j = 0; j < attr_list.attr_list.length; j++) {
  165. if (attr_list.attr_list[j].active) {
  166. attr += `:${attr_list.attr_list[j].attr_id}`
  167. }
  168. }
  169. }
  170. for (let i = 0; i < this.detail.attr.length; i++) {
  171. if (this.detail.attr[i].sign_id === attr.substring(1)) {
  172. if (this.num > this.detail.attr[i].stock) {
  173. uni.showToast({
  174. title: '库存不足',
  175. icon: 'none'
  176. });
  177. return;
  178. }
  179. body.goods_attr_id = this.detail.attr[i].id;
  180. }
  181. }
  182. this.$subscribe(this.detail.template_message).then(() => {
  183. this.submit(body);
  184. }).catch(() => {
  185. this.submit(body);
  186. });
  187. },
  188. get_token(data) {
  189. this.$request({
  190. url: this.$api.advance.pay_data,
  191. method: 'post',
  192. data: {
  193. ...data
  194. },
  195. }).then(response => {
  196. if (response.code === 0) {
  197. if (response.data.hasOwnProperty('id')) {
  198. uni.hideLoading();
  199. this.$payment.pay(response.data.id).then(() => {
  200. this.once_pay = false;
  201. // 支付成功
  202. uni.navigateTo({
  203. url: `/plugins/advance/order/order`
  204. })
  205. }).catch(() => {
  206. // 支付失败
  207. this.once_pay = false;
  208. uni.navigateTo({
  209. url: `/plugins/advance/order/order`
  210. })
  211. });
  212. } else {
  213. setTimeout(() => {
  214. this.get_token(data);
  215. }, 1000);
  216. }
  217. } else {
  218. uni.hideLoading();
  219. uni.showModal({
  220. title: '提示',
  221. content: response.msg,
  222. })
  223. }
  224. });
  225. },
  226. async get_submit(body) {
  227. const response = await this.$request({
  228. url: this.$api.advance.order_submit,
  229. method: 'post',
  230. data: {
  231. ...body,
  232. }
  233. });
  234. if (response.code === 0) {
  235. return response;
  236. } else if (response.code === 1) {
  237. uni.showModal({
  238. title: '提示',
  239. content: response.msg,
  240. success(res){
  241. if(res.cancel){
  242. this.$emit('request', this.goods_id);
  243. }else if(res.confirm){
  244. uni.navigateBack();
  245. }
  246. }
  247. });
  248. }
  249. },
  250. getDate(end_prepayment_at) {
  251. let newDate = new Date(end_prepayment_at.replace(/-/g, '/'));
  252. newDate.setDate(newDate.getDate());
  253. let month = newDate.getMonth() + 1;
  254. let day = newDate.getDate();
  255. let mm = "'" + month + "'";
  256. let dd = "'" + day + "'";
  257. if(mm.length == 3) {
  258. month = "0" + month;
  259. }
  260. if(dd.length == 3) {
  261. day = "0" + day;
  262. }
  263. let hour = newDate.getHours();//得到小时
  264. let minu = newDate.getMinutes();//得到分钟
  265. let sec = newDate.getSeconds();//得到秒
  266. sec = `${sec}`;
  267. minu = `${minu}`;
  268. hour = `${hour}`;
  269. if (hour.length === 1) {
  270. hour = `0${hour}`
  271. }
  272. if (minu.length === 1) {
  273. minu = `0${minu}`
  274. }
  275. if (sec.length === 1) {
  276. sec = `0${sec}`
  277. }
  278. return newDate.getFullYear() + "." + month + "." + day + ' ' + hour +':' + minu + ':' + sec;
  279. },
  280. },
  281. }
  282. </script>
  283. <style scoped lang="scss">
  284. .detail-bottom-button {
  285. height: #{110rpx};
  286. width: #{750rpx};
  287. border-top: #{1rpx} solid #e3e3e3;
  288. .dir-left-nowrap {
  289. view {
  290. height: #{110rpx};
  291. }
  292. .but {
  293. width: #{105rpx};
  294. .text {
  295. font-size: #{20rpx};
  296. color: #707070;
  297. margin-top: #{9rpx};
  298. }
  299. }
  300. .border-left {
  301. border-right: #{1rpx} solid #e3e3e3;
  302. }
  303. .buttons {
  304. width: #{272+272rpx};
  305. }
  306. .title {
  307. width: 50%;
  308. height: #{110rpx};
  309. font-size: #{24rpx};
  310. margin: 0;
  311. }
  312. .pay {
  313. width: 50%;
  314. height: #{110rpx};
  315. line-height: #{110rpx};
  316. text-align: center;
  317. color: #ffffff;
  318. font-size: #{28rpx};
  319. }
  320. }
  321. .icon {
  322. width: #{40rpx};
  323. height: #{40rpx};
  324. margin-top: #{21rpx};
  325. }
  326. .text {
  327. color: #ffffff;
  328. }
  329. }
  330. .advance-title {
  331. width: 50%;
  332. height: #{110rpx};
  333. font-size: #{24rpx};
  334. margin: 0;
  335. }
  336. .dis-button {
  337. background-color: #dddddd;
  338. }
  339. </style>