index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  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="error" @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" 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. </view>
  86. <view class="footer">
  87. <u-input v-model="password"
  88. maxlength="30"
  89. input-align="center"
  90. type="password"
  91. @confirm="toPay"
  92. placeholder="请输入支付密码" />
  93. </view>
  94. <view class="fot-btn">
  95. <u-button :loading="payBtn" @click="toPay" type="error" >确认支付</u-button>
  96. </view>
  97. </view>
  98. </u-popup>
  99. </view>
  100. </template>
  101. <script>
  102. import { saveOrder, signPay, existPayPwd} from '@/api/order.js'
  103. import {
  104. findAddressBycustomerNo
  105. } from '@/api/receiveAddress.js'
  106. export default {
  107. data() {
  108. return {
  109. toOrderButton: {
  110. borderRadius:'100rpx',
  111. fontSize:'30rpx',
  112. width: '180rpx',
  113. height: '60rpx'
  114. },
  115. goodsList: [], // 商品列表
  116. // 用户信息
  117. userInfo: {},
  118. btnLoading: false, // 提交按钮加载圈
  119. orderId: '', // 订单id
  120. password: '', // 支付密码
  121. showSetPswModal: false, // 设置支付密码弹窗
  122. showInputPsw: false, // 打开输入密码弹窗
  123. showLeavePsw: false, // 打开确定放弃弹窗
  124. payBtn: false
  125. };
  126. },
  127. onShow() {
  128. this.getLocation()
  129. },
  130. onLoad() {
  131. this.goodsList = this.$store.state.vuex_toOrderList
  132. // 监听设置密码是否成功
  133. uni.$once('setPswSuccess', this.setPsw)
  134. },
  135. computed: {
  136. // 总计
  137. totalPrice() {
  138. let total = 0
  139. this.goodsList.map(item => {
  140. total = total + item.buyQty * item.goods.sellGold
  141. })
  142. return total
  143. },
  144. // 收货地址
  145. receiveAddress() {
  146. if (this.userInfo.receiveAreasName) {
  147. let area = this.userInfo.receiveAreasName.split(',')
  148. return area[0]+area[1]+area[2]+this.userInfo.receiveAddress
  149. }
  150. }
  151. },
  152. methods: {
  153. // 获取用户位置
  154. getLocation() {
  155. findAddressBycustomerNo({}).then(res => {
  156. console.log(res)
  157. if (res.status == 200) {
  158. this.userInfo = res.data[0] || {}
  159. } else {
  160. this.userInfo = {}
  161. uni.showToast({
  162. title: res.message,
  163. icon: 'none'
  164. })
  165. }
  166. })
  167. },
  168. //新增/修改收货地址信息
  169. editAddress(){
  170. this.$u.vuex("vuex_OrderAddress",this.userInfo)
  171. uni.navigateTo({
  172. url:"/pages/toOrder/editAddress"
  173. })
  174. },
  175. // 跳转到设置支付密码页
  176. toSetPwd () {
  177. uni.navigateTo({
  178. url:"/pages/userCenter/userInfo/smsVerification"
  179. })
  180. },
  181. // 设置密码成功, 打开输入密码弹窗
  182. setPsw (e) {
  183. if (e.success) {
  184. this.showInputPsw = true
  185. }
  186. },
  187. //确认放弃
  188. canclePay() {
  189. this.showLeavePsw = false
  190. this.showInputPsw = false
  191. this.password = ''
  192. // 跳转到订单列表
  193. uni.navigateTo({
  194. url:"/pages/order/order"
  195. })
  196. },
  197. // 继续支付
  198. payAgain () {
  199. this.showLeavePsw = false
  200. this.showInputPsw = true
  201. },
  202. // 支付 校验用户是否设置过支付密码
  203. toCheckPwd(){
  204. // 判断用户是否设置过支付密码
  205. existPayPwd().then(res=>{
  206. console.log(res,'rrrrrr')
  207. if(res.status == 200) {
  208. // 设置过支付密码,输入密码
  209. if(res.data) {
  210. this.showInputPsw = true
  211. } else {
  212. // 没设置过支付密码,提示设置密码
  213. this.showSetPswModal = true
  214. }
  215. } else {
  216. uni.showToast({
  217. title: res.message,
  218. icon: 'none'
  219. })
  220. }
  221. })
  222. },
  223. // 支付 保存订单
  224. toSaveOrder () {
  225. if (!this.userInfo.receiveAddress) {
  226. uni.showToast({
  227. title: '请先输入收货地址',
  228. icon: 'none'
  229. })
  230. return false
  231. }
  232. // 已生成订单
  233. if(this.orderId) {
  234. // 校验用户是否设置过支付密码
  235. this.toCheckPwd()
  236. } else {
  237. this.btnLoading = true
  238. let orderGoodsList = []
  239. this.goodsList.map((item,index)=>{
  240. orderGoodsList[index] = {
  241. goodsNo: item.goodsNo,
  242. buyQty: item.buyQty
  243. }
  244. })
  245. let params = {
  246. receiveAddress: this.receiveAddress,
  247. receiverName: this.userInfo.receiverName,
  248. receiverPhone: this.userInfo.receiverPhone,
  249. orderGoodsList: orderGoodsList,
  250. }
  251. saveOrder(params).then(res=>{
  252. console.log(res,'rrrrrrr')
  253. this.btnLoading = false
  254. if(res.status==200) {
  255. this.orderId = res.data.id
  256. // 校验用户是否设置过支付密码
  257. this.toCheckPwd()
  258. } else {
  259. uni.showToast({
  260. title: res.message,
  261. icon: 'none'
  262. })
  263. }
  264. })
  265. }
  266. },
  267. // 支付
  268. toPay() {
  269. if (this.password === '') {
  270. uni.showToast({
  271. title: '请先输入支付密码',
  272. icon: 'none'
  273. })
  274. return false
  275. }
  276. let params = {
  277. payPwd: this.password,
  278. id: this.orderId
  279. }
  280. this.payBtn = true
  281. signPay(params).then(res=>{
  282. this.payBtn = false
  283. if(res.status == 200) {
  284. // 跳转到支付完成界面
  285. uni.redirectTo({
  286. url:"/pages/toOrder/payFinish?id=" + this.orderId
  287. })
  288. } else{
  289. this.password = ''
  290. uni.showToast({
  291. title: res.message,
  292. icon: 'none'
  293. })
  294. }
  295. })
  296. }
  297. },
  298. }
  299. </script>
  300. <style lang="scss">
  301. page{
  302. height: 100%;
  303. }
  304. .cart-pages{
  305. width: 100%;
  306. height: 100%;
  307. display: flex;
  308. flex-direction: column;
  309. .cart-bar{
  310. background: #FFFFFF;
  311. border-bottom: 1px solid #F8F8F8;
  312. border-top: 10upx solid #F8F8F8;
  313. display: flex;
  314. align-items: center;
  315. padding:15upx 20upx;
  316. .position{
  317. flex-grow: 1;
  318. }
  319. > view{
  320. padding: 10upx;
  321. .address{
  322. padding: 5upx 0;
  323. }
  324. &:last-child{
  325. padding: 0 20upx;
  326. }
  327. }
  328. }
  329. .noAddress{
  330. background: #FFFFFF;
  331. border-bottom: 1px solid #F8F8F8;
  332. border-top: 10upx solid #F8F8F8;
  333. display: flex;
  334. align-items: center;
  335. justify-content: space-between;
  336. padding:30upx 20upx;
  337. font-size: 30upx;
  338. }
  339. .goods-list{
  340. padding: 20upx 0;
  341. flex-grow: 1;
  342. overflow: auto;
  343. .goods-class-box{
  344. background: #FFFFFF;
  345. box-shadow: 1px 1px 3px #eee;
  346. margin-bottom: 20upx;
  347. }
  348. .goods-item{
  349. padding: 20upx 40upx;
  350. display: flex;
  351. align-items: center;
  352. border-bottom: 1px solid #F8F8F8;
  353. background: #fff;
  354. &:last-child{
  355. border: 0;
  356. }
  357. .goods-imgs{
  358. position: relative;
  359. }
  360. .goods-info{
  361. flex-grow: 1;
  362. padding-left: 20upx;
  363. .good-name{
  364. font-weight: bold;
  365. word-break: break-all;
  366. }
  367. }
  368. .goods-price{
  369. display: flex;
  370. align-items: center;
  371. justify-content: space-between;
  372. padding-top: 20upx;
  373. >view{
  374. &:first-child{
  375. display: flex;
  376. align-items: center;
  377. text{
  378. color: red;
  379. font-size: 35upx;
  380. margin-right: 6upx;
  381. font-weight: bold;
  382. }
  383. }
  384. }
  385. }
  386. }
  387. }
  388. .goods-heji{
  389. padding: 20upx 40upx;
  390. background: #FFFFFF;
  391. box-shadow: 1px 1px 3px #eee;
  392. margin-top: 20upx;
  393. >view{
  394. display: flex;
  395. align-items: center;
  396. justify-content: space-between;
  397. padding: 10upx 0;
  398. .heji{
  399. display: flex;
  400. align-items: center;
  401. text{
  402. color: red;
  403. margin-right: 6upx;
  404. font-size: 35upx;
  405. font-weight: bold;
  406. }
  407. }
  408. }
  409. }
  410. .cart-submit{
  411. padding: 20upx 30upx;
  412. background: #FFFFFF;
  413. box-shadow: 1px 1px 3px #eee;
  414. border-top: 1px solid #eee;
  415. display: flex;
  416. align-items: center;
  417. justify-content: space-between;
  418. > view{
  419. &:first-child{
  420. display: flex;
  421. align-items: center;
  422. text{
  423. color: red;
  424. font-size: 40upx;
  425. margin-right: 6upx;
  426. font-weight: bold;
  427. }
  428. }
  429. }
  430. }
  431. // 支付密码弹窗
  432. .slot-content{
  433. padding: 30upx 0;
  434. display: flex;
  435. flex-direction: column;
  436. align-items: center;
  437. justify-content: space-between;
  438. .text-cont{
  439. width: 100%;
  440. padding: 60upx 0;
  441. text-align: center;
  442. .num-big{
  443. font-size: 40upx;
  444. color: red;
  445. }
  446. }
  447. .footer{
  448. width: 80%;
  449. border-bottom: 1px solid #b1b1b1;
  450. margin-bottom: 30upx;
  451. }
  452. }
  453. }
  454. </style>