index.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. <!-- 收银台 -->
  2. <template>
  3. <s-layout :title="$t('pay.index.title')">
  4. <view class="bg-white ss-modal-box ss-flex-col">
  5. <view class="modal-header ss-flex-col ss-col-center ss-row-center">
  6. <view class="money-box ss-m-b-20">
  7. <text class="money-text">{{ state.orderInfo.pay_fee }}</text>
  8. </view>
  9. <view class="time-text">
  10. <text>{{ payDescText }}</text>
  11. </view>
  12. </view>
  13. <view class="modal-content ss-flex-1">
  14. <view class="pay-title ss-p-l-30 ss-m-y-30">{{$t('pay.index.pay_way')}}</view>
  15. <radio-group @change="onTapPay">
  16. <label class="pay-type-item" v-for="item in state.payMethods" :key="item.title">
  17. <view
  18. class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
  19. :class="{ 'disabled-pay-item': item.disabled }"
  20. v-if="allowedPayment.includes(item.value)"
  21. >
  22. <view class="ss-flex ss-col-center">
  23. <image
  24. class="pay-icon"
  25. v-if="item.disabled"
  26. :src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')"
  27. mode="aspectFit"
  28. ></image>
  29. <image
  30. class="pay-icon"
  31. v-else
  32. :src="sheep.$url.static(item.icon)"
  33. mode="aspectFit"
  34. ></image>
  35. <text class="pay-title">{{ item.title }}</text>
  36. </view>
  37. <view class="check-box ss-flex ss-col-center ss-p-l-10">
  38. <view class="userInfo-money ss-m-r-10" v-if="item.value == 'money'">
  39. {{$t('pay.index.balance')}}: {{ userInfo.money }}{{$t('pay.index.cny')}}
  40. </view>
  41. <view
  42. class="userInfo-money ss-m-r-10"
  43. v-if="item.value == 'offline' && item.disabled"
  44. >
  45. {{$t('pay.index.notSupport')}}
  46. </view>
  47. <radio
  48. :value="item.value"
  49. color="var(--ui-BG-Main)"
  50. style="transform: scale(0.8)"
  51. :disabled="item.disabled"
  52. :checked="state.payment === item.value"
  53. />
  54. </view>
  55. </view>
  56. </label>
  57. </radio-group>
  58. </view>
  59. <!-- 工具 -->
  60. <view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
  61. <button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
  62. {{$t('pay.index.checkEnv')}}
  63. </button>
  64. <button v-else-if="state.payStatus === -1" class="ss-reset-button past-due-btn" disabled>
  65. {{$t('pay.index.expired')}}
  66. </button>
  67. <button
  68. v-else
  69. class="ss-reset-button save-btn"
  70. @tap="onPay"
  71. :disabled="state.payStatus !== 1"
  72. :class="{ 'disabled-btn': state.payStatus !== 1 }"
  73. >
  74. {{$t('pay.index.payNow')}}
  75. </button>
  76. </view>
  77. </view>
  78. </s-layout>
  79. </template>
  80. <script setup>
  81. import { computed, reactive } from 'vue';
  82. import { onLoad } from '@dcloudio/uni-app';
  83. import sheep from '@/sheep';
  84. import { useDurationTime } from '@/sheep/hooks/useGoods';
  85. const userInfo = computed(() => sheep.$store('user').userInfo);
  86. // 检测支付环境
  87. //
  88. const state = reactive({
  89. orderType: 'goods',
  90. payment: '',
  91. orderInfo: {},
  92. payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息, -1=支付已过期, 1=待支付,2=订单已支付
  93. payMethods: [],
  94. });
  95. const allowedPayment = computed(() => {
  96. if (state.orderType === 'recharge') {
  97. return sheep.$store('app').platform.recharge_payment;
  98. }
  99. return sheep.$store('app').platform.payment;
  100. });
  101. const payMethods = [
  102. {
  103. icon: '/assets/addons/shopro/uniapp/pay/wechat.png',
  104. title: uni.getLocale() == 'en' ? 'WeChat Payment' : '微信支付',
  105. value: 'wechat',
  106. disabled: false,
  107. },
  108. {
  109. icon: '/assets/addons/shopro/uniapp/pay/alipay.png',
  110. title: uni.getLocale() == 'en' ? 'Alipay payment' : '支付宝支付',
  111. value: 'alipay',
  112. disabled: false,
  113. },
  114. {
  115. icon: '/assets/addons/shopro/uniapp/pay/wallet.png',
  116. title: uni.getLocale() == 'en' ? 'Balance payment' : '余额支付',
  117. value: 'money',
  118. disabled: false,
  119. },
  120. {
  121. icon: '/assets/addons/shopro/uniapp/pay/apple.png',
  122. title: 'Apple Pay',
  123. value: 'apple',
  124. disabled: false,
  125. },
  126. {
  127. icon: '/assets/addons/shopro/uniapp/pay/cod.png',
  128. title: uni.getLocale() == 'en' ? 'Cash on delivery' : '货到付款',
  129. value: 'offline',
  130. disabled: false,
  131. },
  132. ];
  133. const onPay = () => {
  134. if (state.payment === '') {
  135. sheep.$helper.toast(uni.getLocale() == 'en' ? 'Please choose a payment method' : '请选择支付方式');
  136. return;
  137. }
  138. if (state.payment === 'money') {
  139. uni.showModal({
  140. title: uni.getLocale() == 'en' ? 'tips' : '提示',
  141. content: uni.getLocale() == 'en' ? 'Are you sure you want to pay?' : '确定要支付吗?',
  142. success: function (res) {
  143. if (res.confirm) {
  144. sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
  145. }
  146. },
  147. });
  148. } else if (state.payment === 'offline') {
  149. uni.showModal({
  150. title: uni.getLocale() == 'en' ? 'tips' : '提示',
  151. content: uni.getLocale() == 'en' ? 'Are you sure you want to place an order?' : '确定要下单吗?',
  152. success: function (res) {
  153. if (res.confirm) {
  154. sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
  155. }
  156. },
  157. });
  158. } else {
  159. sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
  160. }
  161. };
  162. const payDescText = computed(() => {
  163. if (state.payStatus === 2) {
  164. return uni.getLocale() == 'en' ? 'The order has been paid' : '该订单已支付';
  165. }
  166. if (state.payStatus === 1 && state.orderInfo.ext.expired_time !== 0) {
  167. const time = useDurationTime(state.orderInfo.ext.expired_time);
  168. if (time.ms <= 0) {
  169. state.payStatus = -1;
  170. return '';
  171. }
  172. return (uni.getLocale() == 'en' ? 'Remaining payment time' : '剩余支付时间')+` ${time.h}:${time.m}:${time.s} `;
  173. }
  174. if (state.payStatus === -2) {
  175. return uni.getLocale() == 'en' ? 'No payment order information found' : '未查询到支付单信息';
  176. }
  177. return '';
  178. });
  179. function checkPayStatus() {
  180. if (state.orderInfo.status === 'unpaid') {
  181. state.payStatus = 1;
  182. return;
  183. }
  184. if (state.orderInfo.status === 'closed') {
  185. state.payStatus = -1;
  186. return;
  187. }
  188. state.payStatus = 2;
  189. }
  190. function onTapPay(e) {
  191. state.payment = e.detail.value;
  192. }
  193. async function setRechargeOrder(id) {
  194. const { data, code } = await sheep.$api.trade.order(id);
  195. if (code === 1) {
  196. state.orderInfo = data;
  197. state.payMethods = payMethods;
  198. checkPayStatus();
  199. } else {
  200. state.payStatus = -2;
  201. }
  202. }
  203. async function setGoodsOrder(id) {
  204. const { data, code } = await sheep.$api.order.detail(id);
  205. if (code === 1) {
  206. state.orderInfo = data;
  207. if (state.orderInfo.ext.offline_status === 'none') {
  208. payMethods.forEach((item, index, array) => {
  209. if (item.value === 'offline') {
  210. array.splice(index, 1);
  211. }
  212. });
  213. } else if (state.orderInfo.ext.offline_status === 'disabled') {
  214. payMethods.forEach((item) => {
  215. if (item.value === 'offline') {
  216. item.disabled = true;
  217. }
  218. });
  219. }
  220. state.payMethods = payMethods;
  221. checkPayStatus();
  222. } else {
  223. state.payStatus = -2;
  224. }
  225. }
  226. onLoad((options) => {
  227. if (
  228. sheep.$platform.name === 'WechatOfficialAccount' &&
  229. sheep.$platform.os === 'ios' &&
  230. !sheep.$platform.landingPage.includes('pages/pay/index')
  231. ) {
  232. location.reload();
  233. return;
  234. }
  235. let id = '';
  236. if (options.orderSN) {
  237. id = options.orderSN;
  238. }
  239. if (options.id) {
  240. id = options.id;
  241. }
  242. if (options.type === 'recharge') {
  243. state.orderType = 'recharge';
  244. // 充值订单
  245. setRechargeOrder(id);
  246. } else {
  247. // 商品订单
  248. state.orderType = 'goods';
  249. setGoodsOrder(id);
  250. }
  251. });
  252. </script>
  253. <style lang="scss" scoped>
  254. .pay-icon {
  255. width: 36rpx;
  256. height: 36rpx;
  257. margin-right: 26rpx;
  258. }
  259. .ss-modal-box {
  260. // max-height: 1000rpx;
  261. .modal-header {
  262. position: relative;
  263. padding: 60rpx 20rpx 40rpx;
  264. .money-text {
  265. color: $red;
  266. font-size: 46rpx;
  267. font-weight: bold;
  268. font-family: OPPOSANS;
  269. &::before {
  270. content: '¥';
  271. font-size: 30rpx;
  272. }
  273. }
  274. .time-text {
  275. font-size: 26rpx;
  276. color: $gray-b;
  277. }
  278. .close-icon {
  279. position: absolute;
  280. top: 10rpx;
  281. right: 20rpx;
  282. font-size: 46rpx;
  283. opacity: 0.2;
  284. }
  285. }
  286. .modal-content {
  287. overflow-y: auto;
  288. .pay-title {
  289. font-size: 26rpx;
  290. font-weight: 500;
  291. color: #333333;
  292. }
  293. .pay-tip {
  294. font-size: 26rpx;
  295. color: #bbbbbb;
  296. }
  297. .pay-item {
  298. height: 86rpx;
  299. }
  300. .disabled-pay-item {
  301. .pay-title {
  302. color: #999999;
  303. }
  304. }
  305. .userInfo-money {
  306. font-size: 26rpx;
  307. color: #bbbbbb;
  308. line-height: normal;
  309. }
  310. }
  311. .save-btn {
  312. width: 710rpx;
  313. height: 80rpx;
  314. border-radius: 40rpx;
  315. background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  316. color: $white;
  317. }
  318. .disabled-btn {
  319. background: #e5e5e5;
  320. color: #999999;
  321. }
  322. .past-due-btn {
  323. width: 710rpx;
  324. height: 80rpx;
  325. border-radius: 40rpx;
  326. background-color: #999;
  327. color: #fff;
  328. }
  329. }
  330. </style>