index.vue 8.8 KB

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