myJp.vue 8.6 KB

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