checkOut.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <view class="page-content">
  3. <view class="content">
  4. <u-field
  5. class="field-item"
  6. :value="store.name"
  7. disabled
  8. input-align="right"
  9. label="收取门店"
  10. >
  11. </u-field>
  12. <u-field
  13. v-model="remarks"
  14. label="备注"
  15. input-align="right"
  16. auto-height
  17. :maxlength="10"
  18. placeholder="请填写备注(最多10个字符)"
  19. >
  20. </u-field>
  21. <view class="num-cont">
  22. <text class="u-required">支付数量</text>
  23. <view class="num-input">
  24. <u-input v-model="number" input-align="right" type="number" placeholder="请输入数量" />
  25. <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="pay-btn">
  30. <view class="total">
  31. <text>{{number||0}}</text>
  32. <view><u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image></view>
  33. </view>
  34. <view>
  35. <u-button @click="handlePay" type="success" >确认支付</u-button>
  36. </view>
  37. </view>
  38. <!-- 确认支付弹窗 -->
  39. <u-popup mode="center" :mask-close-able="false" closeable @close="closeModal" negative-top="300" v-model="showPayModal" width="600rpx" >
  40. <view class="slot-content">
  41. <view class="slot-title">请输入支付密码</view>
  42. <view class="text-cont">
  43. <view>
  44. <text>收取门店:</text>
  45. <text>{{store.name||'--'}}</text>
  46. </view>
  47. <view class="num-text">
  48. <text>支付数量:</text>
  49. <view>
  50. <text class="num-big">{{number}}</text>
  51. <u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
  52. </view>
  53. </view>
  54. <view>
  55. <text>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</text>
  56. <text>{{remarks||'无'}}</text>
  57. </view>
  58. </view>
  59. <view class="footer">
  60. <input v-model="password"
  61. type="password"
  62. :focus="focus"
  63. placeholder="请输入支付密码"
  64. :maxlength="30"
  65. @confirm="confirm"
  66. />
  67. </view>
  68. <view class="fot-btn">
  69. <u-button @click="confirm" type="success" >确认支付</u-button>
  70. </view>
  71. </view>
  72. </u-popup>
  73. <!-- 提示用户设置支付密码 -->
  74. <u-modal v-model="showSetPswModal"
  75. content="请先设置支付密码,才能使用乐豆"
  76. show-cancel-button
  77. confirm-text="去设置"
  78. cancel-text="暂时放弃"
  79. @confirm="toSetPwd"
  80. @cancel="showSetPswModal=false"
  81. ></u-modal>
  82. </view>
  83. </template>
  84. <script>
  85. import { sellerReceive } from '@/api/user.js'
  86. import { existPayPwd } from '@/api/order.js'
  87. import md5 from 'md5'
  88. export default{
  89. data() {
  90. return {
  91. showSetPswModal: false,
  92. store: null, // 门店信息
  93. remarks: '', // 备注
  94. number: '', // 支付数量
  95. showPayModal: false, // 支付弹窗
  96. password: '', // 支付密码
  97. partnerNo: '', // 销售商编号
  98. currentGold: 0, //用户当前拥有乐豆数
  99. focus: false
  100. }
  101. },
  102. onLoad(opts) {
  103. this.currentGold = this.$store.state.vuex_userData.currentGold
  104. console.log(this.currentGold,'currentGold')
  105. this.store = JSON.parse(decodeURIComponent(opts.store))
  106. this.partnerNo = this.store.officialPartnerNo
  107. // console.log(this.store,'22222')
  108. // 开启分享
  109. uni.showShareMenu({
  110. withShareTicket: true,
  111. menus: ['shareAppMessage', 'shareTimeline']
  112. })
  113. },
  114. methods: {
  115. // 跳转到设置支付密码页
  116. toSetPwd () {
  117. uni.navigateTo({
  118. url:"/pages/userCenter/userInfo/smsVerification"
  119. })
  120. },
  121. // 确认支付
  122. handlePay() {
  123. if (!this.number) {
  124. uni.showToast({
  125. title: '请输入支付数量',
  126. icon: 'none'
  127. })
  128. } else {
  129. if (this.number>this.currentGold) {
  130. uni.showToast({
  131. title: '您当前余额不足!',
  132. icon: 'none'
  133. })
  134. return false
  135. }
  136. if(this.number<=0){
  137. uni.showToast({
  138. title: '输入的支付数量不能小于或等于0!',
  139. icon: 'none'
  140. })
  141. return false
  142. }
  143. existPayPwd().then(res => {
  144. console.log(res,'rrrrrr')
  145. if(res.status == 200) {
  146. // 设置过支付密码,输入密码
  147. if(res.data) {
  148. this.showPayModal = true
  149. setTimeout(()=>{
  150. this.focus = true
  151. },300)
  152. } else {
  153. // 没设置过支付密码,提示设置密码
  154. this.showSetPswModal = true
  155. }
  156. }
  157. })
  158. }
  159. },
  160. // 关闭弹窗
  161. closeModal() {
  162. this.showPayModal = false
  163. this.password = ''
  164. },
  165. // 输入密码完成 支付
  166. confirm(e) {
  167. if(this.password == ''){
  168. uni.showToast({
  169. title: '请输入支付密码',
  170. icon: 'none'
  171. })
  172. return
  173. }
  174. let data = {
  175. "payPassword": md5(this.password),
  176. "changeNum": this.number,
  177. "remarks": this.remarks,
  178. "officialPartnerNo": this.partnerNo
  179. }
  180. sellerReceive(data).then(res => {
  181. console.log(res)
  182. if(res.status == 200){
  183. uni.redirectTo({
  184. url: '/pages/checkOut/checkFinish?num='+this.number
  185. })
  186. }
  187. })
  188. }
  189. },
  190. }
  191. </script>
  192. <style lang="less">
  193. page{
  194. height: 100%;
  195. }
  196. .page-content{
  197. width: 100%;
  198. height: 100%;
  199. padding: 20upx;
  200. background-color: #f8f8f8;
  201. .content{
  202. background-color: #fff;
  203. }
  204. .num-cont{
  205. width: 100%;
  206. padding: 16upx;
  207. display: flex;
  208. align-items: center;
  209. justify-content: space-between;
  210. .num-input{
  211. display: flex;
  212. align-items: center;
  213. justify-content: center;
  214. >u-input {
  215. width: 300upx;
  216. }
  217. }
  218. }
  219. .pay-btn{
  220. padding: 0 30upx;
  221. .total {
  222. display: flex;
  223. align-items: center;
  224. justify-content: center;
  225. padding: 60upx 0;
  226. text{
  227. font-size: 48upx;
  228. font-weight: 600;
  229. color: red;
  230. }
  231. }
  232. }
  233. }
  234. .slot-content{
  235. padding: 30upx 0;
  236. display: flex;
  237. flex-direction: column;
  238. align-items: center;
  239. justify-content: space-between;
  240. .slot-title{
  241. font-size: 36rpx;
  242. }
  243. .text-cont{
  244. width: 100%;
  245. margin-top: 20upx;
  246. // font-size: 20rpx;
  247. >view {
  248. padding: 15upx 60upx;
  249. display: flex;
  250. >text{
  251. &:last-child {
  252. flex: 1;
  253. padding-left: 30upx;
  254. }
  255. }
  256. .num-big{
  257. font-size: 36upx;
  258. color: red;
  259. padding-left: 30upx;
  260. font-weight: 600;
  261. }
  262. }
  263. .num-text{
  264. align-items: center;
  265. >view {
  266. display: flex;
  267. align-items: center;
  268. }
  269. }
  270. }
  271. .footer{
  272. width: 80%;
  273. border-bottom: 1px solid #b1b1b1;
  274. >input {
  275. text-align: center;
  276. padding: 10upx 0;
  277. }
  278. }
  279. .fot-btn{
  280. margin-top: 30upx;
  281. }
  282. }
  283. </style>