时空网前端
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.

250 lines
7.8 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 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. this.orderDetails = res.data
  126. this.skeletonLoading = false
  127. })
  128. },
  129. reduce() {
  130. if (this.num === 1) return
  131. this.num--
  132. },
  133. add() {
  134. this.num++
  135. },
  136. CheckboxChange(e) {
  137. if(e.detail.value != '') {
  138. this.ifchoose = true
  139. }else {
  140. this.ifchoose = false
  141. }
  142. },
  143. // 点击复制
  144. copy(text) {
  145. uni.setClipboardData({
  146. data: text
  147. });
  148. },
  149. submit(){
  150. if(this.ifchoose == true) {
  151. if(!this.ifPay) return;
  152. this.ifPay = false;
  153. if(this.type == 1){
  154. this.pay();
  155. return;
  156. }
  157. this.$http(this.API.API_PRPAID, {
  158. goods_id: this.goods_id,
  159. goods_specs_id: this.goods_specs_id,
  160. number: this.num,
  161. }).then(res => {
  162. this.order_id = res.data.order_id
  163. uni.requestPayment({
  164. orderInfo: res.data.order_num,
  165. timeStamp: res.data.timeStamp,
  166. nonceStr: res.data.nonceStr,
  167. package: res.data.package,
  168. signType: res.data.signType,
  169. paySign: res.data.paySign,
  170. success: (res) => {
  171. this.ifPay = true
  172. this.$url('/pages/order/pay-success?ifSuccess=1&order_id='+this.order_id,{type: 'redirect'})
  173. },
  174. fail: (err) => {
  175. this.ifPay = true
  176. this.$url('/pages/order/pay-success?ifSuccess=2&order_id='+this.order_id,{type: 'redirect'})
  177. },
  178. })
  179. }).catch(err => {
  180. this.ifPay = true
  181. if(err.code == 9997) {
  182. uni.showModal({
  183. title: '提示',
  184. content: '是否同意前往手机授权?',
  185. success: e => {
  186. if (!e.confirm) return;
  187. this.$routerGo('/pages/login/index?type=phone')
  188. }
  189. });
  190. }
  191. });
  192. }else {
  193. this.$msg('请认真阅读并同意协议!')
  194. return
  195. }
  196. },
  197. pay(){
  198. console.log("this.order_id", this.order_id)
  199. this.$http(this.API.API_PAYMENT_DIRECT, {order_id: this.order_id}).then(res => {
  200. this.order_id = res.data.order_id
  201. uni.requestPayment({
  202. orderInfo: res.data.order_num,
  203. timeStamp: res.data.timeStamp,
  204. nonceStr: res.data.nonceStr,
  205. package: res.data.package,
  206. signType: res.data.signType,
  207. paySign: res.data.paySign,
  208. success: (res) => {
  209. this.$url('/pages/order/pay-success?ifSuccess=1&order_id='+this.order_id,{type: 'redirect'})
  210. },
  211. fail: (err) => {
  212. this.$url('/pages/order/pay-success?ifSuccess=2&order_id='+this.order_id,{type: 'redirect'})
  213. },
  214. })
  215. })
  216. },
  217. //下拉刷新
  218. downCallback() {
  219. this.getConfirmOrder()
  220. },
  221. },
  222. onShow() {
  223. if(this.ifDo > 1) {
  224. this.getConfirmOrder()
  225. }
  226. this.ifDo++
  227. }
  228. }
  229. </script>
  230. <style lang="scss" scoped>
  231. .bref-box {
  232. text-overflow: -o-ellipsis-lastline;
  233. overflow: hidden;
  234. text-overflow: ellipsis;
  235. display: -webkit-box;
  236. -webkit-line-clamp: 2;
  237. -webkit-box-orient: vertical;
  238. }
  239. </style>