myJp.vue 8.6 KB

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