时空网前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

251 lines
7.8 KiB

5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
  1. <template>
  2. <view>
  3. <!-- 商品信息 -->
  4. <block v-if="isRight(orderDetails)">
  5. <view class="bg-white padding-tb-sm">
  6. <skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
  7. <view class="flex justify-between align-start padding-top-sm padding-lr">
  8. <image :src="orderDetails.goods.cover" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 10rpx;"></image>
  9. <view class="flex-sub padding-left-sm">
  10. <view class="bref-box margin-top-xs lf-font-32 lf-font-bold" style="height: 88rpx;line-height: 44rpx;color: #222;">
  11. {{orderDetails.goods.name}}
  12. </view>
  13. <view class="flex justify-between align-center text-center">
  14. <text class="block margin-top-sm text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量</text>
  15. <view class="flex align-center margin-top-sm">
  16. <text class="lf-iconfont lf-icon-jianshao lf-font-40" @tap="reduce"></text>
  17. <input type="number" v-model="num" class="text-center margin-lr-sm radius text-black lf-font-32" style="width: 60rpx; height: 50rpx;" />
  18. <text class="lf-iconfont lf-icon-jia1 lf-font-40" @tap="add"></text>
  19. </view>
  20. </view>
  21. <view class="flex justify-between margin-top-sm">
  22. <view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 12rpx;">
  23. {{Number(orderDetails.goods.specs[0].selling_price || 0)}}
  24. </view>
  25. <!-- <view>
  26. <button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm">申请退款</button>
  27. <button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
  28. </view> -->
  29. </view>
  30. </view>
  31. </view>
  32. </skeleton>
  33. </view>
  34. <self-line/>
  35. <skeleton :loading="skeletonLoading" :row="1" :showAvatar="false" :showTitle="true">
  36. <view class="bg-white">
  37. <view class="cu-bar padding-lr">
  38. <text class="text-gray lf-font-32">优惠</text>
  39. <text class="lf-font-32 text-black1">暂无优惠</text>
  40. </view>
  41. </view>
  42. </skeleton>
  43. <self-line/>
  44. <skeleton :loading="skeletonLoading" :row="13" :showAvatar="false" :showTitle="true">
  45. <view class="btn-bottom">
  46. <view class="padding flex justify-around align-center bg-gray1" v-if="orderDetails.agreement.title">
  47. <checkbox-group class="block" @change="CheckboxChange">
  48. <view class="margin-right">
  49. <checkbox @change="CheckboxChange" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
  50. </view>
  51. </checkbox-group>
  52. <view class="lf-font-24 text-gray">
  53. 请认真阅读并同意<text @tap="$routerGo('/pages/agreement/agreement?id='+orderDetails.agreement.article_id)">{{orderDetails.agreement.title}}</text>在小程序下单购买即表示您已默认同意<text @tap="$routerGo('/pages/agreement/agreement?id='+orderDetails.agreement.article_id)">{{orderDetails.agreement.title}}</text>的所有条款
  54. </view>
  55. </view>
  56. <view class="padding-lr padding-tb-sm bg-white flex justify-between align-center shadow">
  57. <view class="flex align-center">
  58. <text class="lf-font-28 text-gray">应付款</text>
  59. <view class="text-red text-price lf-font-42 lf-font-bold">
  60. <!-- {{Number(orderDetails.goods.specs[0].selling_price*num || 0)}} -->
  61. {{ total(num, orderDetails.goods.specs[0].selling_price) }}
  62. </view>
  63. </view>
  64. <button class="cu-btn block bg-orange round shadow" @tap="submit">
  65. <text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
  66. <text class="lf-font-32 text-white" v-if="type == 1">{{ loading ? '支付中...' : '立即付款' }}</text>
  67. <text class="lf-font-32 text-white" v-else>{{ loading ? '支付中...' : '下单付款' }}</text>
  68. </button>
  69. </view>
  70. </view>
  71. </skeleton>
  72. </block>
  73. </view>
  74. </template>
  75. <script>
  76. import bigc from '@/common/bigc.js';
  77. export default {
  78. data() {
  79. return {
  80. num: 1,
  81. base64Img: '', //
  82. skeletonLoading: true,
  83. loading: false,
  84. checkbox: [{
  85. value: 'A',
  86. checked: true
  87. }],
  88. goods_id: 1,
  89. goods_specs_id: 1,
  90. orderDetails: {},
  91. ifchoose: true,
  92. ifCheck: true,
  93. type: 0,
  94. order_id: 0,
  95. ifDo: 1,
  96. ifPay: true
  97. }
  98. },
  99. computed: {
  100. total(){
  101. return function(num, price){
  102. let big_num = new bigc(Number(num));
  103. big_num = big_num.times(Number(price));
  104. return big_num.round(2, 0).toString();
  105. }
  106. },
  107. isRight(){
  108. return function(val){
  109. return this.$shared.isRight(val);
  110. }
  111. }
  112. },
  113. onLoad(e) {
  114. this.type = e.type;
  115. this.goods_id = e.goods_id;
  116. this.order_id = e.order_id;
  117. this.goods_specs_id = e.goods_specs_id
  118. if(this.goods_id && this.goods_specs_id) {
  119. this.getConfirmOrder()
  120. }
  121. },
  122. methods: {
  123. getConfirmOrder() {
  124. this.$http(this.API.API_COFIRMORDER_DETAILS, {goods_id: this.goods_id,goods_specs_id: this.goods_specs_id}).then(res => {
  125. if(res.code == 0) {
  126. this.orderDetails = res.data
  127. this.skeletonLoading = false
  128. }
  129. })
  130. },
  131. reduce() {
  132. if (this.num === 1) return
  133. this.num--
  134. },
  135. add() {
  136. this.num++
  137. },
  138. CheckboxChange(e) {
  139. if(e.detail.value != '') {
  140. this.ifchoose = true
  141. }else {
  142. this.ifchoose = false
  143. }
  144. },
  145. // 点击复制
  146. copy(text) {
  147. uni.setClipboardData({
  148. data: text
  149. });
  150. },
  151. submit(){
  152. if(this.ifchoose == true) {
  153. if(!this.ifPay) return;
  154. this.ifPay = false;
  155. if(this.type == 1){
  156. this.pay();
  157. return;
  158. }
  159. this.$http(this.API.API_PRPAID, {
  160. goods_id: this.goods_id,
  161. goods_specs_id: this.goods_specs_id,
  162. number: this.num,
  163. }).then(res => {
  164. this.order_id = res.data.order_id
  165. uni.requestPayment({
  166. orderInfo: res.data.order_num,
  167. timeStamp: res.data.timeStamp,
  168. nonceStr: res.data.nonceStr,
  169. package: res.data.package,
  170. signType: res.data.signType,
  171. paySign: res.data.paySign,
  172. success: (res) => {
  173. this.ifPay = true
  174. this.$url('/pages/order/pay-success?ifSuccess=1&order_id='+this.order_id,{type: 'redirect'})
  175. },
  176. fail: (err) => {
  177. this.ifPay = true
  178. this.$url('/pages/order/pay-success?ifSuccess=2&order_id='+this.order_id,{type: 'redirect'})
  179. },
  180. })
  181. }).catch(err => {
  182. if(err.code == 9997) {
  183. uni.showModal({
  184. title: '提示',
  185. content: '是否同意前往手机授权?',
  186. success: e => {
  187. if (!e.confirm) return;
  188. this.$routerGo('/pages/login/index?type=phone')
  189. }
  190. });
  191. }
  192. });
  193. }else {
  194. this.$msg('请认真阅读并同意协议!')
  195. return
  196. }
  197. },
  198. pay(){
  199. console.log("this.order_id", this.order_id)
  200. this.$http(this.API.API_PAYMENT_DIRECT, {order_id: this.order_id}).then(res => {
  201. this.order_id = res.data.order_id
  202. uni.requestPayment({
  203. orderInfo: res.data.order_num,
  204. timeStamp: res.data.timeStamp,
  205. nonceStr: res.data.nonceStr,
  206. package: res.data.package,
  207. signType: res.data.signType,
  208. paySign: res.data.paySign,
  209. success: (res) => {
  210. this.$url('/pages/order/pay-success?ifSuccess=1&order_id='+this.order_id,{type: 'redirect'})
  211. },
  212. fail: (err) => {
  213. this.$url('/pages/order/pay-success?ifSuccess=2&order_id='+this.order_id,{type: 'redirect'})
  214. },
  215. })
  216. })
  217. },
  218. //下拉刷新
  219. downCallback() {
  220. this.getConfirmOrder()
  221. },
  222. },
  223. onShow() {
  224. if(this.ifDo > 1) {
  225. this.getConfirmOrder()
  226. }
  227. this.ifDo++
  228. }
  229. }
  230. </script>
  231. <style lang="scss" scoped>
  232. .bref-box {
  233. text-overflow: -o-ellipsis-lastline;
  234. overflow: hidden;
  235. text-overflow: ellipsis;
  236. display: -webkit-box;
  237. -webkit-line-clamp: 2;
  238. -webkit-box-orient: vertical;
  239. }
  240. </style>