myJp.vue 9.9 KB

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