1
0

detail-bottom-button.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  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 border-left" >
  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="but" @click="kefu">
  21. <app-form-id>
  22. <view class="but dir-top-nowrap main-left cross-center" >
  23. <image class="icon"src="/static/image/icon/icon-kefu.png"></image>
  24. <text class="text">客服</text>
  25. </view>
  26. </app-form-id>
  27. </view>
  28. <view class="buttons dir-left-nowrap" v-if="detail.goods_num == 0">
  29. <view class="dir-top-nowrap main-center cross-center" style="background-color: #CDCDCD;color: #fff;width: 100%;">
  30. <text>已售罄</text>
  31. </view>
  32. </view>
  33. <view v-else class="buttons dir-left-nowrap">
  34. <view class="advance-title dir-top-nowrap main-center cross-center cart-btn"
  35. style="height: 80%;color: #ffffff;"
  36. :class="theme === 'b' || theme === 'a' || theme === 'f' ? theme+ '-s-back ' + 'text ' + theme : theme+ '-s-back ' + theme+ '-m-text ' + theme">
  37. <text>预售截止</text>
  38. <text style=" word-break: break-all;
  39. text-overflow: ellipsis;
  40. display: -webkit-box;
  41. -webkit-box-orient: vertical;
  42. -webkit-line-clamp: 1;
  43. overflow: hidden;
  44. white-space: normal !important;">{{getDate(end_prepayment_at)}}</text>
  45. </view>
  46. <view class="pay buy-btn"
  47. style="height: 80%;color: #ffffff;"
  48. :class="theme+ '-m-back ' + theme" @click="set_active">
  49. <app-form-id>
  50. <text>
  51. 支付定金
  52. </text>
  53. </app-form-id>
  54. </view>
  55. </view>
  56. </view>
  57. <view v-if="!active" class="dir-left-nowrap">
  58. <view class="title dir-top-nowrap main-center cross-center cart-btn"
  59. style="height: 80%;color: #ffffff;"
  60. :class="theme === 'b' || theme === 'a' || theme === 'f' ? theme+ '-s-back ' + 'text ' + theme : theme+ '-s-back ' + theme+ '-m-text ' + theme">
  61. <text>预售截止</text>
  62. <text>{{getDate(end_prepayment_at)}}</text>
  63. </view>
  64. <view class="pay buy-btn"
  65. style="height: 80%;color: #ffffff;"
  66. :class="[theme+ '-m-back ' + theme, buttonDisabled ? 'dis-button' : '']" @click="pay">
  67. <text>
  68. 支付定金
  69. </text>
  70. </view>
  71. </view>
  72. </view>
  73. </template>
  74. <script>
  75. export default {
  76. name: "detail-bottom-button",
  77. data() {
  78. return {
  79. request_time: false,
  80. once_pay: false,
  81. }
  82. },
  83. props: {
  84. end_prepayment_at: String,
  85. active: Boolean,
  86. favorite: Boolean,
  87. goods_id: Number,
  88. detail: Object,
  89. num: Number,
  90. theme: String,
  91. buttonDisabled: Boolean
  92. },
  93. methods: {
  94. set_active() {
  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. kefu(){
  139. uni.navigateTo({
  140. url: "/pages/web/web?url="+this.mall.setting.web_service_url
  141. })
  142. },
  143. route_jump() {
  144. uni.navigateTo({
  145. url: `/pages/index/index`,
  146. });
  147. },
  148. submit(body) {
  149. this.once_pay = true;
  150. uni.showLoading({
  151. title: '生成订单中...',
  152. mask: true,
  153. });
  154. this.$emit('close_attr', true);
  155. this.get_submit(body).then(response => {
  156. this.get_token(response.data);
  157. });
  158. },
  159. pay() {
  160. if (this.buttonDisabled) return;
  161. let body = {
  162. goods_id: this.detail.id,
  163. goods_attr_id: 0,
  164. goods_num: `${this.num}`,
  165. advance_goods_id: this.detail.advanceGoods.id,
  166. };
  167. let attr = ``;
  168. let attr_groups = this.detail.attr_groups;
  169. for (let i = 0; i < attr_groups.length; i++) {
  170. let attr_list = attr_groups[i];
  171. for (let j = 0; j < attr_list.attr_list.length; j++) {
  172. if (attr_list.attr_list[j].active) {
  173. attr += `:${attr_list.attr_list[j].attr_id}`
  174. }
  175. }
  176. }
  177. for (let i = 0; i < this.detail.attr.length; i++) {
  178. if (this.detail.attr[i].sign_id === attr.substring(1)) {
  179. if (this.num > this.detail.attr[i].stock) {
  180. uni.showToast({
  181. title: '库存不足',
  182. icon: 'none'
  183. });
  184. return;
  185. }
  186. body.goods_attr_id = this.detail.attr[i].id;
  187. }
  188. }
  189. this.$subscribe(this.detail.template_message).then(() => {
  190. this.submit(body);
  191. }).catch(() => {
  192. this.submit(body);
  193. });
  194. },
  195. get_token(data) {
  196. this.$request({
  197. url: this.$api.advance.pay_data,
  198. method: 'post',
  199. data: {
  200. ...data
  201. },
  202. }).then(response => {
  203. if (response.code === 0) {
  204. if (response.data.hasOwnProperty('id')) {
  205. uni.hideLoading();
  206. this.$payment.pay(response.data.id).then(() => {
  207. this.once_pay = false;
  208. // 支付成功
  209. uni.navigateTo({
  210. url: `/plugins/advance/order/order`
  211. })
  212. }).catch(() => {
  213. // 支付失败
  214. this.once_pay = false;
  215. uni.navigateTo({
  216. url: `/plugins/advance/order/order`
  217. })
  218. });
  219. } else {
  220. setTimeout(() => {
  221. this.get_token(data);
  222. }, 1000);
  223. }
  224. } else {
  225. uni.hideLoading();
  226. uni.showModal({
  227. title: '提示',
  228. content: response.msg,
  229. })
  230. }
  231. });
  232. },
  233. async get_submit(body) {
  234. const response = await this.$request({
  235. url: this.$api.advance.order_submit,
  236. method: 'post',
  237. data: {
  238. ...body,
  239. }
  240. });
  241. if (response.code === 0) {
  242. return response;
  243. } else if (response.code === 1) {
  244. uni.showModal({
  245. title: '提示',
  246. content: response.msg,
  247. success(res){
  248. if(res.cancel){
  249. this.$emit('request', this.goods_id);
  250. }else if(res.confirm){
  251. uni.navigateBack();
  252. }
  253. }
  254. });
  255. }
  256. },
  257. getDate(end_prepayment_at) {
  258. let newDate = new Date(end_prepayment_at.replace(/-/g, '/'));
  259. newDate.setDate(newDate.getDate());
  260. let month = newDate.getMonth() + 1;
  261. let day = newDate.getDate();
  262. let mm = "'" + month + "'";
  263. let dd = "'" + day + "'";
  264. if(mm.length == 3) {
  265. month = "0" + month;
  266. }
  267. if(dd.length == 3) {
  268. day = "0" + day;
  269. }
  270. let hour = newDate.getHours();//得到小时
  271. let minu = newDate.getMinutes();//得到分钟
  272. let sec = newDate.getSeconds();//得到秒
  273. sec = `${sec}`;
  274. minu = `${minu}`;
  275. hour = `${hour}`;
  276. if (hour.length === 1) {
  277. hour = `0${hour}`
  278. }
  279. if (minu.length === 1) {
  280. minu = `0${minu}`
  281. }
  282. if (sec.length === 1) {
  283. sec = `0${sec}`
  284. }
  285. return newDate.getFullYear() + "." + month + "." + day + ' ' + hour +':' + minu + ':' + sec;
  286. },
  287. },
  288. }
  289. </script>
  290. <style scoped lang="scss">
  291. .detail-bottom-button {
  292. height: #{110rpx};
  293. width: #{750rpx};
  294. border-top: #{1rpx} solid #e3e3e3;
  295. .dir-left-nowrap {
  296. view {
  297. height: #{110rpx};
  298. }
  299. .but {
  300. width: #{105rpx};
  301. .text {
  302. font-size: #{20rpx};
  303. color: #707070;
  304. margin-top: #{9rpx};
  305. }
  306. }
  307. .border-left {
  308. border-right: #{1rpx} solid #e3e3e3;
  309. }
  310. .buttons {
  311. width: #{272+272rpx};
  312. }
  313. .title {
  314. width: 50%;
  315. height: #{110rpx};
  316. font-size: #{24rpx};
  317. margin: 0;
  318. }
  319. .pay {
  320. width: 50%;
  321. height: #{90rpx};
  322. line-height: #{90rpx};
  323. text-align: center;
  324. color: #ffffff;
  325. font-size: #{28rpx};
  326. }
  327. }
  328. .icon {
  329. width: #{40rpx};
  330. height: #{40rpx};
  331. margin-top: #{21rpx};
  332. }
  333. .text {
  334. color: #ffffff;
  335. }
  336. }
  337. .advance-title {
  338. width: 50%;
  339. height: #{110rpx};
  340. font-size: #{24rpx};
  341. margin: 0;
  342. }
  343. .dis-button {
  344. /*background-color: #dddddd;*/
  345. }
  346. .cart-btn{
  347. height: 90%;
  348. border-top-left-radius: #{30rpx};
  349. border-bottom-left-radius: #{30rpx};
  350. position: relative;
  351. transform: translateY(-50%);
  352. top: 50%;
  353. background: linear-gradient(to right, #A494F6,#BC8AE7,#E674B2);
  354. }
  355. .cart-btn:after{
  356. content: "";
  357. position: absolute;
  358. right: 0;
  359. height: 60%;
  360. background: #ffffff;
  361. width: 1px;
  362. top: 50%;
  363. transform: translateY(-50%);
  364. }
  365. .buy-btn{
  366. height: 90%;
  367. border-top-right-radius: #{30rpx};
  368. border-bottom-right-radius: #{30rpx};
  369. position: relative;
  370. transform: translateY(-50%);
  371. top: 50%;
  372. background: linear-gradient(to right, #E674B2,#FE3666);
  373. margin-right: 24rpx;
  374. }
  375. </style>