myJp.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. <template>
  2. <view class="page-cont">
  3. <view class="list" v-for="(item,index) in list" :key="item.id">
  4. <view class="no">奖品{{index+1}}</view>
  5. <view class="names">{{item.prizeType == 'GOODS'?item.prizeDesc:(item.prizeDesc+'乐豆')}}</view>
  6. <view class="lingjiang" v-if="item.state == 'WAIT_RECEIVE'" @click="lingjiang(item)">领奖</view>
  7. <view class="viewsDetail" v-else @click="viewsDetail(item)">查看详情</view>
  8. </view>
  9. <view style="padding:150rpx 30rpx 0;" v-if="list.length == 0">
  10. <u-empty text="还没有奖品记录" :icon-size="80" mode="list"></u-empty>
  11. <!-- <view style="text-align: center;">
  12. <u-button size="mini" @click="goBack">去抽奖</u-button>
  13. </view> -->
  14. </view>
  15. <Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
  16. <!-- 查看详情弹框 -->
  17. <u-popup v-model="showViews" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx">
  18. <view class="lottery-content">
  19. <view class="lottery-title">物流信息</view>
  20. <view class="lottery-form">
  21. <view>
  22. <view class="labes">收件人</view>
  23. <view>{{curRevice.receiverName}}</view>
  24. </view>
  25. <view>
  26. <view class="labes">联系电话</view>
  27. <view>{{curRevice.receiverPhone}}</view>
  28. </view>
  29. <view>
  30. <view class="labes">收货地址</view>
  31. <view style="word-break: break-all;">{{curRevice.receiveAddress}}</view>
  32. </view>
  33. <view>
  34. <view class="labes">物流单号</view>
  35. <view>
  36. <view v-if="curRevice.state == 'WAIT_SEND_EXPRESS'">暂未发货,如收货信息有误, 请联系客服电话<text class="tell" @click="callPhone">{{kfPhone}}</text></view>
  37. <view v-else>
  38. {{curRevice.expressName}} <text class="tell">(单号:{{curRevice.expressNum}})</text> <u-button @click="copyWlCode" size="mini">复制</u-button>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. <view @click="showViews=false" class="lottery-confrim-btn">
  44. 确定
  45. </view>
  46. </view>
  47. </u-popup>
  48. <!-- 乐豆领取详情弹框 -->
  49. <u-popup v-model="showLjLd" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx">
  50. <view class="lottery-content">
  51. <view class="lottery-title">欢迎领取</view>
  52. <view class="lottery-msg">
  53. 您的奖励已计入乐豆余额,感谢参与!
  54. </view>
  55. <view @click="showLjLd=false" class="lottery-confrim-btn">
  56. 我知道了
  57. </view>
  58. </view>
  59. </u-popup>
  60. <!-- 收货地址详情弹框 -->
  61. <u-popup v-model="showAddr" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="80%">
  62. <view class="lottery-content">
  63. <view class="lottery-title">收货信息</view>
  64. <view class="lottery-u-form">
  65. <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
  66. <u-form-item label="收货人" required prop="receiverName">
  67. <u-input placeholder="请输入收货人姓名" :maxlength="30" v-model="form.receiverName" />
  68. </u-form-item>
  69. <u-form-item label="收货电话" required prop="receiverPhone">
  70. <u-input placeholder="请输入收货电话" :maxlength="11" type="number" v-model="form.receiverPhone" />
  71. </u-form-item>
  72. <u-form-item label="省市区" required prop="receiveAreasName">
  73. <u-input v-model="areaInfo.label" placeholder="请选择省市区" @click="openAddress" type="select" />
  74. </u-form-item>
  75. <u-form-item label="详细地址" :border-bottom="false" required prop="receiveAddress">
  76. <!-- <u-input type="textarea" :height="100" auto-height placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/> -->
  77. <textarea :auto-height="true" placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/>
  78. </u-form-item>
  79. </u-form>
  80. </view>
  81. <view @click="wlSubmit" class="lottery-confrim-btn">
  82. 确定
  83. </view>
  84. </view>
  85. </u-popup>
  86. </view>
  87. </template>
  88. <script>
  89. import Address from '@/components/address.vue'
  90. import {findAddressBycustomerNo, saveAddress} from '@/api/receiveAddress.js'
  91. import { findWinPrize, receive } from '@/api/luckyDraw.js'
  92. export default {
  93. components: {
  94. Address
  95. },
  96. data() {
  97. return {
  98. kfPhone:'', // 客服电话
  99. showViews: false, // 查看详情弹框
  100. showAddr: false ,// 实物奖品,收货地址弹框
  101. showLjLd: false, // 虚拟奖品领奖弹框
  102. form: {
  103. receiverName: '',
  104. receiverPhone: '',
  105. receiveAddress: '' // 详细地址
  106. },
  107. receiveAreas: '', //地址编码
  108. areaName: '', //地址
  109. areaInfo: {}, // 省市区
  110. areaIdArr: [], // 省市区id数组
  111. list: [],
  112. curRevice: null,
  113. fromPage: ''
  114. }
  115. },
  116. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  117. onReady() {
  118. this.$refs.uForm.setRules(this.rules);
  119. },
  120. onLoad(option) {
  121. console.log(option,'option')
  122. this.getfindWinPrize()
  123. this.kfPhone = this.$store.state.vuex_kfMobile
  124. this.fromPage = option.fromPage
  125. // 开启分享
  126. uni.showShareMenu({
  127. withShareTicket: true,
  128. menus: ['shareAppMessage', 'shareTimeline']
  129. })
  130. },
  131. onUnload() {
  132. this.form = {
  133. receiverName: '',
  134. receiverPhone: '',
  135. receiveAddress: '' // 详细地址
  136. }
  137. },
  138. methods: {
  139. goBack(){
  140. if(this.fromPage == 'usercenter'){
  141. uni.redirectTo({
  142. url: '/pagesA/luckDraw/luckDraw'
  143. })
  144. }else{
  145. uni.navigateBack()
  146. }
  147. },
  148. // 电话客服
  149. callPhone () {
  150. uni.makePhoneCall({
  151. phoneNumber: this.kfPhone
  152. })
  153. },
  154. getfindWinPrize(){
  155. uni.showLoading({
  156. mask: true,
  157. title: '正在加载...'
  158. })
  159. findWinPrize().then(res => {
  160. if(res.status == 200){
  161. this.list = res.data
  162. }
  163. uni.hideLoading()
  164. })
  165. },
  166. // 获取用户收货地址
  167. getAddress() {
  168. findAddressBycustomerNo({}).then(res => {
  169. console.log(res)
  170. if (res.status == 200&&res.data.length) {
  171. this.form = res.data[0]
  172. if (this.form.receiveAreasName) {
  173. this.areaIdArr = this.form.receiveAreas.split(',')
  174. this.areaInfo.label = this.form.receiveAreasName.replace(/\,/g,'-')
  175. }
  176. this.$u.vuex("vuex_OrderAddress",this.form)
  177. }
  178. })
  179. },
  180. // 选择省区市
  181. areaConfirm(e) {
  182. console.log('已选择的省市区', e)
  183. this.areaInfo = e
  184. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  185. },
  186. openAddress(){
  187. // 省市区回显参数为省市区id数组
  188. this.$refs.applyAddress.open(this.areaIdArr)
  189. },
  190. // 去抽奖
  191. toLuckDraw() {
  192. uni.navigateBack()
  193. },
  194. // 查看详情
  195. viewsDetail(item){
  196. this.curRevice = item
  197. if(item.prizeType == 'GOODS'){
  198. this.showViews = true
  199. }else{
  200. this.showLjLd = true
  201. }
  202. },
  203. // 领奖
  204. lingjiang(item){
  205. this.curRevice = item
  206. if(item.prizeType == 'GOODS'){
  207. this.showAddr = true
  208. this.getAddress()
  209. }else{
  210. this.saveReceive()
  211. }
  212. },
  213. // 复制单号
  214. copyWlCode(){
  215. uni.setClipboardData({
  216. data: this.curRevice.expressNum,
  217. success: function () {
  218. console.log('success');
  219. }
  220. });
  221. },
  222. // 保存物流信息
  223. wlSubmit(){
  224. this.$refs.uForm.validate(valid => {
  225. if (valid) {
  226. console.log('验证通过');
  227. if (this.form.receiverName ==='') {
  228. uni.showToast({
  229. title: '请输入收货人姓名',
  230. icon: 'none'
  231. })
  232. return false
  233. }
  234. if (this.form.receiverPhone ==='') {
  235. uni.showToast({
  236. title: '请输入收货电话',
  237. icon: 'none'
  238. })
  239. return false
  240. }
  241. // 省市区
  242. if(this.areaIdArr.length == 0){
  243. uni.showToast({icon: 'none',title: '请选择省市区'})
  244. return
  245. }
  246. if (this.form.receiveAddress ==='') {
  247. uni.showToast({
  248. title: '请输入详细地址',
  249. icon: 'none'
  250. })
  251. return false
  252. }
  253. let params = {
  254. receiverName: this.form.receiverName,
  255. receiverPhone: this.form.receiverPhone,
  256. receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
  257. receiveAreas: this.areaIdArr.join(','),
  258. receiveAddress: this.form.receiveAddress // 详细地址
  259. }
  260. if(this.form.id) {
  261. params.id = this.form.id
  262. }
  263. // 更新收货地址
  264. this.saveReceive(params)
  265. // 保存我的收货地址
  266. // saveAddress(params).then(res=>{
  267. // if(res.status == 200) {
  268. // // 保存领奖收货信息
  269. // this.saveReceive(params)
  270. // }
  271. // })
  272. }
  273. });
  274. },
  275. // 领奖
  276. saveReceive(params){
  277. let item = this.curRevice
  278. let isGoods = item.prizeType == 'GOODS'
  279. let data = {
  280. "luckyDrawWinNo": this.curRevice.luckyDrawWinNo
  281. }
  282. // 实物,发货地址
  283. if(isGoods){
  284. data.receiverName = params.receiverName
  285. data.receiverPhone = params.receiverPhone
  286. data.receiveAddress = params.receiveAreasName +' '+ params.receiveAddress
  287. }
  288. receive(data).then(res => {
  289. if(res.status == 200){
  290. uni.showToast({
  291. title: res.message,
  292. icon: 'none'
  293. })
  294. if(isGoods){
  295. this.showAddr = false
  296. }else{
  297. this.showLjLd = true
  298. }
  299. this.list = []
  300. this.getfindWinPrize()
  301. }
  302. })
  303. }
  304. }
  305. }
  306. </script>
  307. <style lang="less">
  308. .page-cont{
  309. width: 100%;
  310. padding: 20rpx;
  311. .list{
  312. display: flex;
  313. align-items: center;
  314. > view{
  315. padding: 15rpx;
  316. color: #FFFFFF;
  317. background-color: #01c9b2;
  318. border-right: 1px solid #FFFFFF;
  319. border-bottom: 1px solid #FFFFFF;
  320. text-align: center;
  321. }
  322. .no{
  323. width: 150rpx;
  324. }
  325. .names{
  326. width: 50%;
  327. flex-grow: 1;
  328. }
  329. .lingjiang{
  330. background-color: #ffaa00;
  331. color: #FFFFFF;
  332. width: 25%;
  333. }
  334. .viewsDetail{
  335. background-color: #008273;
  336. color: #FFFFFF;
  337. width: 25%;
  338. }
  339. }
  340. .tell{
  341. color: #0A98D5;
  342. }
  343. .lottery-content{
  344. height: 100%;
  345. background: url(../../static/lottery_winbg1.png) no-repeat center top;
  346. background-size: 100% auto;
  347. .lottery-confrim-btn{
  348. width: 100%;
  349. display: flex;
  350. justify-content: center;
  351. font-size: 32rpx;
  352. border-top: 1px solid #eee;
  353. padding: 30rpx 0;
  354. color: #21d5c0;
  355. }
  356. .lottery-title{
  357. padding: 20rpx 30rpx;
  358. text-align: center;
  359. color: #FFFFFF;
  360. font-size: 36rpx;
  361. font-weight: bold;
  362. }
  363. .lottery-form{
  364. padding: 80rpx 30rpx 20rpx;
  365. > view{
  366. display: flex;
  367. padding: 10rpx;
  368. .labes{
  369. width: 150rpx;
  370. }
  371. >view{
  372. &:last-child{
  373. flex-grow: 1;
  374. width: 80%;
  375. color: #666;
  376. display: flex;
  377. align-items: center;
  378. text{
  379. word-break: break-all;
  380. }
  381. }
  382. }
  383. }
  384. }
  385. .lottery-msg{
  386. padding: 70rpx 60rpx;
  387. text-align: center;
  388. line-height: 42rpx;
  389. }
  390. .lottery-u-form{
  391. padding: 50rpx;
  392. .receiveAddress{
  393. width: 100%;
  394. line-height: 1.5em;
  395. box-sizing: border-box;
  396. font-style: normal;
  397. }
  398. }
  399. }
  400. }
  401. </style>