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

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