index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. <template>
  2. <view class="cart-pages">
  3. <view v-if="!userInfo.receiveAddress" @click="editAddress" class="noAddress">
  4. <view>请输入收货地址</view>
  5. <u-icon name="arrow-right" size="36"></u-icon>
  6. </view>
  7. <view v-else class="cart-bar">
  8. <view>
  9. <u-image height="40rpx" width="40rpx" src="/static/position.png"></u-image>
  10. </view>
  11. <view class="position">
  12. <view class="address">{{receiveAddress}}</view>
  13. <view>{{userInfo.receiverName +'&nbsp;&nbsp;&nbsp;' + userInfo.receiverPhone}}</view>
  14. </view>
  15. <view @click="editAddress">
  16. <u-image height="50rpx" width="50rpx" src="/static/edit.png"></u-image>
  17. </view>
  18. </view>
  19. <view class="goods-list">
  20. <!-- 商品列表 -->
  21. <view class="goods-item" v-for="(item,index) in goodsList" :key="item.id">
  22. <view class="goods-imgs">
  23. <u-image border-radius="12" width="158rpx" height="140rpx" :src="item.goods.homeImage"></u-image>
  24. </view>
  25. <view class="goods-info">
  26. <view class="good-name">{{item.goods.name}}</view>
  27. <view class="goods-price">
  28. <view>
  29. <text>{{item.goods.sellGold}}</text>
  30. <u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
  31. </view>
  32. <view>×{{item.buyQty}}</view>
  33. </view>
  34. </view>
  35. </view>
  36. <!-- 总计 -->
  37. <view class="goods-heji">
  38. <view>
  39. <view>商品合计:</view>
  40. <view class="heji">
  41. <text>{{totalPrice}}</text>
  42. <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
  43. </view>
  44. </view>
  45. <view>
  46. <view>运费:</view>
  47. <view>免运费</view>
  48. </view>
  49. </view>
  50. </view>
  51. <view class="cart-submit">
  52. <view>
  53. <view>总计:<text>{{totalPrice}}</text></view>
  54. <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
  55. </view>
  56. <view>
  57. <u-button size="mini" :loading="btnLoading" :custom-style="toOrderButton" type="success" @click="toSaveOrder">确认支付</u-button>
  58. </view>
  59. </view>
  60. <!-- 提示用户设置支付密码 -->
  61. <u-modal v-model="showSetPswModal"
  62. content="请先设置支付密码,才能使用乐豆"
  63. show-cancel-button
  64. confirm-text="去设置"
  65. cancel-text="暂时放弃"
  66. @confirm="toSetPwd"
  67. @cancel="showSetPswModal=false"
  68. ></u-modal>
  69. <!-- 确认取消弹窗 -->
  70. <u-modal v-model="showLeavePsw"
  71. title="确认放弃支付吗?"
  72. content="您的订单在30分钟内未支付将被取消"
  73. show-cancel-button
  74. confirm-text="确认放弃"
  75. cancel-text="继续支付"
  76. @confirm="canclePay"
  77. @cancel="payAgain"
  78. ></u-modal>
  79. <!-- 确认支付弹窗 -->
  80. <u-popup mode="center" :mask-close-able="false" negative-top="300" closeable @close="showLeavePsw=true" v-model="showInputPsw" width="500rpx" >
  81. <view class="slot-content">
  82. <view>确认支付</view>
  83. <view class="text-cont">
  84. <text class="num-big">{{totalPrice}}</text>
  85. <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
  86. </view>
  87. <view class="footer">
  88. <input
  89. v-model="password"
  90. maxlength="30"
  91. :focus="focus"
  92. style="text-align: center;"
  93. type="password"
  94. @confirm="toPay"
  95. placeholder="请输入支付密码" />
  96. </view>
  97. <view class="fot-btn">
  98. <u-button :loading="payBtn" @click="toPay" type="success" >确认支付</u-button>
  99. </view>
  100. </view>
  101. </u-popup>
  102. </view>
  103. </template>
  104. <script>
  105. import { saveOrder, signPay, existPayPwd} from '@/api/order.js'
  106. import md5 from 'md5'
  107. import {
  108. findAddressBycustomerNo
  109. } from '@/api/receiveAddress.js'
  110. export default {
  111. data() {
  112. return {
  113. toOrderButton: {
  114. borderRadius:'100rpx',
  115. fontSize:'30rpx',
  116. width: '200rpx',
  117. height: '80rpx'
  118. },
  119. goodsList: [], // 商品列表
  120. // 用户信息
  121. userInfo: {},
  122. btnLoading: false, // 提交按钮加载圈
  123. orderId: '', // 订单id
  124. password: '', // 支付密码
  125. showSetPswModal: false, // 设置支付密码弹窗
  126. showInputPsw: false, // 打开输入密码弹窗
  127. showLeavePsw: false, // 打开确定放弃弹窗
  128. payBtn: false,
  129. orderForm: '', // 商品下单来源,商品详情或购物车
  130. focus: false
  131. };
  132. },
  133. onShow() {
  134. this.getLocation()
  135. },
  136. onLoad(opts) {
  137. this.orderForm = opts.orderForm
  138. this.goodsList = this.$store.state.vuex_toOrderList
  139. // 监听设置密码是否成功
  140. uni.$once('setPswSuccess', this.setPsw)
  141. // 开启分享
  142. uni.showShareMenu({
  143. withShareTicket: true,
  144. menus: ['shareAppMessage', 'shareTimeline']
  145. })
  146. },
  147. computed: {
  148. // 总计
  149. totalPrice() {
  150. let total = 0
  151. this.goodsList.map(item => {
  152. total = total + item.buyQty * item.goods.sellGold
  153. })
  154. return total
  155. },
  156. // 收货地址
  157. receiveAddress() {
  158. if (this.userInfo.receiveAreasName) {
  159. let area = this.userInfo.receiveAreasName.split(',')
  160. return area[0]+area[1]+area[2]+this.userInfo.receiveAddress
  161. }
  162. }
  163. },
  164. methods: {
  165. // 获取用户位置
  166. getLocation() {
  167. findAddressBycustomerNo({}).then(res => {
  168. console.log(res)
  169. if (res.status == 200) {
  170. this.userInfo = res.data[0] || {}
  171. } else {
  172. this.userInfo = {}
  173. }
  174. })
  175. },
  176. //新增/修改收货地址信息
  177. editAddress(){
  178. this.$u.vuex("vuex_OrderAddress",this.userInfo)
  179. uni.navigateTo({
  180. url:"/pagesA/toOrder/editAddress"
  181. })
  182. },
  183. // 跳转到设置支付密码页
  184. toSetPwd () {
  185. uni.navigateTo({
  186. url:"/pages/userCenter/userInfo/smsVerification"
  187. })
  188. },
  189. // 设置密码成功, 打开输入密码弹窗
  190. setPsw (e) {
  191. if (e.success) {
  192. this.showInputPsw = true
  193. setTimeout(()=>{
  194. this.focus = true
  195. },300)
  196. }
  197. },
  198. //确认放弃
  199. canclePay() {
  200. this.showLeavePsw = false
  201. this.showInputPsw = false
  202. this.focus = false
  203. this.password = ''
  204. // 跳转到订单列表
  205. uni.redirectTo({
  206. url:"/pagesA/order/order"
  207. })
  208. },
  209. // 继续支付
  210. payAgain () {
  211. this.focus = false
  212. this.showLeavePsw = false
  213. this.showInputPsw = true
  214. setTimeout(()=>{
  215. this.focus = true
  216. },300)
  217. },
  218. // 支付 校验用户是否设置过支付密码
  219. toCheckPwd(){
  220. // 判断用户是否设置过支付密码
  221. existPayPwd().then(res=>{
  222. console.log(res,'rrrrrr')
  223. if(res.status == 200) {
  224. // 设置过支付密码,输入密码
  225. if(res.data) {
  226. this.showInputPsw = true
  227. setTimeout(()=>{
  228. this.focus = true
  229. },300)
  230. } else {
  231. // 没设置过支付密码,提示设置密码
  232. this.showSetPswModal = true
  233. }
  234. }
  235. })
  236. },
  237. // 支付 保存订单
  238. toSaveOrder () {
  239. if (!this.userInfo.receiveAddress) {
  240. uni.showToast({
  241. title: '请先输入收货地址',
  242. icon: 'none'
  243. })
  244. return false
  245. }
  246. // 已生成订单
  247. if(this.orderId) {
  248. // 校验用户是否设置过支付密码
  249. this.toCheckPwd()
  250. } else {
  251. this.btnLoading = true
  252. let orderGoodsList = []
  253. this.goodsList.map((item,index)=>{
  254. orderGoodsList[index] = {
  255. goodsNo: item.goodsNo,
  256. buyQty: item.buyQty
  257. }
  258. })
  259. let params = {
  260. receiveAddress: this.receiveAddress,
  261. receiverName: this.userInfo.receiverName,
  262. receiverPhone: this.userInfo.receiverPhone,
  263. orderGoodsList: orderGoodsList,
  264. orderForm: this.orderForm,
  265. payGold: this.totalPrice
  266. }
  267. saveOrder(params).then(res=>{
  268. console.log(res,'rrrrrrr')
  269. this.btnLoading = false
  270. if(res.status==200) {
  271. this.orderId = res.data.id
  272. // 校验用户是否设置过支付密码
  273. this.toCheckPwd()
  274. // 刷新购物车
  275. uni.$emit('getCartList')
  276. }
  277. })
  278. }
  279. },
  280. // 支付
  281. toPay() {
  282. if (this.password === '') {
  283. uni.showToast({
  284. title: '请先输入支付密码',
  285. icon: 'none'
  286. })
  287. return false
  288. }
  289. let params = {
  290. payPwd: md5(this.password),
  291. id: md5(this.orderId)
  292. }
  293. console.log(params,'pppppppppp')
  294. this.payBtn = true
  295. signPay(params).then(res=>{
  296. this.payBtn = false
  297. if(res.status == 200) {
  298. // 跳转到支付完成界面
  299. uni.redirectTo({
  300. url:"/pagesA/toOrder/payFinish?id=" + this.orderId
  301. })
  302. } else{
  303. this.password = ''
  304. }
  305. })
  306. }
  307. },
  308. }
  309. </script>
  310. <style lang="scss">
  311. page{
  312. height: 100%;
  313. }
  314. .cart-pages{
  315. width: 100%;
  316. height: 100%;
  317. display: flex;
  318. flex-direction: column;
  319. .cart-bar{
  320. background: #FFFFFF;
  321. border-bottom: 1px solid #F8F8F8;
  322. border-top: 10upx solid #F8F8F8;
  323. display: flex;
  324. align-items: center;
  325. padding:15upx 20upx;
  326. .position{
  327. flex-grow: 1;
  328. }
  329. > view{
  330. padding: 10upx;
  331. .address{
  332. padding: 5upx 0;
  333. word-break: break-all;
  334. }
  335. &:last-child{
  336. padding: 0 20upx;
  337. }
  338. }
  339. }
  340. .noAddress{
  341. background: #FFFFFF;
  342. border-bottom: 1px solid #F8F8F8;
  343. border-top: 10upx solid #F8F8F8;
  344. display: flex;
  345. align-items: center;
  346. justify-content: space-between;
  347. padding:30upx 20upx;
  348. font-size: 30upx;
  349. }
  350. .goods-list{
  351. padding: 20upx 0;
  352. flex-grow: 1;
  353. overflow: auto;
  354. .goods-class-box{
  355. background: #FFFFFF;
  356. box-shadow: 1px 1px 3px #eee;
  357. margin-bottom: 20upx;
  358. }
  359. .goods-item{
  360. padding: 20upx 40upx;
  361. display: flex;
  362. align-items: center;
  363. border-bottom: 1px solid #F8F8F8;
  364. background: #fff;
  365. &:last-child{
  366. border: 0;
  367. }
  368. .goods-imgs{
  369. position: relative;
  370. }
  371. .goods-info{
  372. flex-grow: 1;
  373. padding-left: 20upx;
  374. .good-name{
  375. font-weight: bold;
  376. word-break: break-all;
  377. }
  378. }
  379. .goods-price{
  380. display: flex;
  381. align-items: center;
  382. justify-content: space-between;
  383. padding-top: 20upx;
  384. >view{
  385. &:first-child{
  386. display: flex;
  387. align-items: center;
  388. text{
  389. color: red;
  390. font-size: 35upx;
  391. margin-right: 6upx;
  392. font-weight: bold;
  393. }
  394. }
  395. }
  396. }
  397. }
  398. }
  399. .goods-heji{
  400. padding: 20upx 40upx;
  401. background: #FFFFFF;
  402. box-shadow: 1px 1px 3px #eee;
  403. margin-top: 20upx;
  404. >view{
  405. display: flex;
  406. align-items: center;
  407. justify-content: space-between;
  408. padding: 10upx 0;
  409. .heji{
  410. display: flex;
  411. align-items: center;
  412. text{
  413. color: red;
  414. margin-right: 6upx;
  415. font-size: 35upx;
  416. font-weight: bold;
  417. }
  418. }
  419. }
  420. }
  421. .cart-submit{
  422. padding: 20upx 30upx;
  423. background: #FFFFFF;
  424. box-shadow: 1px 1px 3px #eee;
  425. border-top: 1px solid #eee;
  426. display: flex;
  427. align-items: center;
  428. justify-content: space-between;
  429. > view{
  430. &:first-child{
  431. display: flex;
  432. align-items: center;
  433. text{
  434. color: red;
  435. font-size: 40upx;
  436. margin-right: 6upx;
  437. font-weight: bold;
  438. }
  439. }
  440. }
  441. }
  442. // 支付密码弹窗
  443. .slot-content{
  444. padding: 30upx 0;
  445. display: flex;
  446. flex-direction: column;
  447. align-items: center;
  448. justify-content: space-between;
  449. .text-cont{
  450. width: 100%;
  451. padding: 60upx 0;
  452. display: flex;
  453. align-items: center;
  454. justify-content: center;
  455. .num-big{
  456. font-size: 40upx;
  457. color: red;
  458. font-weight: 600;
  459. margin-right: 6rpx;
  460. }
  461. }
  462. .footer{
  463. width: 80%;
  464. border-bottom: 1px solid #b1b1b1;
  465. margin-bottom: 30upx;
  466. }
  467. }
  468. }
  469. </style>