sudoku.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. <template>
  2. <view class="box">
  3. <view class="lottery-box">
  4. <navigator class="my-list" url="/cloud/winningNews/index">
  5. 我的奖品
  6. </navigator>
  7. <image class="bg-image"
  8. src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716860202553Be55ba55.webp" />
  9. <view class="lottery" v-if="prizes.length && showPrizes">
  10. <view>
  11. <LuckyGrid ref="myLucky" width="590rpx" height="590rpx" :prizes="prizes" :buttons="buttons"
  12. :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
  13. </view>
  14. </view>
  15. <view class="usable-count">
  16. 您还有<text class="count">{{ usableCount }}</text>抽奖机会
  17. </view>
  18. </view>
  19. <view class="winners-list" v-if="winningList.length">
  20. <image class="image"
  21. src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716863577428B1faf5081.webp"
  22. mode="widthFix" />
  23. <view class="content">
  24. <view class="title">
  25. <view class="text">
  26. 抽奖名单
  27. </view>
  28. </view>
  29. <swiper class="swiper" autoplay easing-function="linear" interval="1000" duration="1000" circular vertical
  30. :display-multiple-items="7">
  31. <swiper-item v-for="item in winningList" :key="item.sa_awardmxid">
  32. <view v-if="item.createuserid" class="swiper-item u-line-2">
  33. {{ item.name ? item.name : '用户' + item.createuserid }} <text
  34. style="padding: 0 5px;">抽中了</text>{{ item.awardname }}
  35. </view>
  36. <view v-else></view>
  37. </swiper-item>
  38. </swiper>
  39. </view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid'
  45. export default {
  46. components: { LuckyGrid },
  47. props: {
  48. sa_awardid: {
  49. type: [Number || String]
  50. },
  51. shareuserid: {
  52. type: [Number || String]
  53. }
  54. },
  55. data() {
  56. return {
  57. prizes: [],
  58. buttons: [{
  59. background: 'rgba(0,0,0,0)',
  60. x: 1, y: 1,
  61. imgs: [{
  62. src: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716861339513B3a575413.webp',
  63. width: '183.34rpx',
  64. height: '183.34rpx',
  65. }],
  66. }],
  67. defaultStyle: {
  68. background: '#FFFFFF',
  69. width: '183.34rpx',
  70. height: '183.34rpx',
  71. },
  72. usableCount: 0,
  73. loading: false,
  74. winningList: [],
  75. tips: '',
  76. showPrizes: true,
  77. }
  78. },
  79. methods: {
  80. init() {
  81. console.log("this.sa_awardid", this.sa_awardid)
  82. try {
  83. this.$Http.basic({
  84. "id": 20240514131402,
  85. content: {
  86. "sa_awardid": this.sa_awardid,
  87. "where": {
  88. "condition": "",
  89. "type": ""
  90. }
  91. }
  92. }).then(res => {
  93. console.log("奖品列表", res)
  94. if (this.cutoff(res.msg)) return;
  95. let prizes = [
  96. { index: 0, x: 0, y: 0 },
  97. { index: 2, x: 2, y: 0 },
  98. { index: 6, x: 0, y: 2 },
  99. { index: 4, x: 2, y: 2 },
  100. { index: 1, x: 1, y: 0 },
  101. { index: 3, x: 2, y: 1 },
  102. { index: 5, x: 1, y: 2 },
  103. { index: 7, x: 0, y: 1 },
  104. ].map(v => {
  105. v.borderRadius = '20rpx';
  106. v.imgs = [{
  107. src: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405291716965428111B4602d616.webp',
  108. width: '50%',
  109. top: '20%'
  110. }]
  111. return v
  112. })
  113. res.data.forEach((v, i) => {
  114. v.imgs = v.attinfos.map(img => {
  115. return {
  116. src: img.url,
  117. width: '50%',
  118. top: '25%'
  119. }
  120. })
  121. prizes[i] = Object.assign(prizes[i], v);
  122. });
  123. this.prizes = prizes.sort((a, b) => {
  124. return a.index - b.index
  125. });
  126. })
  127. } catch (error) { }
  128. this.queryAwardCount();
  129. this.getWinningList();
  130. },
  131. startCallBack() {
  132. let that = this;
  133. if (this.tips) return uni.showToast({
  134. title: this.tips,
  135. icon: 'none',
  136. duration: 1500,
  137. });
  138. if (this.loading || this.usableCount == 0) return;
  139. this.loading = true;
  140. this.$refs.myLucky.play()
  141. that.$Http.basic({
  142. "content": {
  143. "sa_awardid": that.sa_awardid,
  144. "shareuserid": that.shareuserid,
  145. },
  146. "id": 20240514134002,
  147. }).then(res => {
  148. console.log('抽奖结果', res)
  149. if (this.cutoff(res.msg)) {
  150. this.showPrizes = false;
  151. setTimeout(() => {
  152. this.showPrizes = true;
  153. })
  154. that.queryAwardCount();
  155. that.getWinningList();
  156. return
  157. };
  158. const index = that.prizes.findIndex(v => v.sa_awarditemsid == res.data.sa_awarditemsid);
  159. that.$refs.myLucky.stop(index)
  160. that.queryAwardCount();
  161. that.getWinningList();
  162. setTimeout(() => {
  163. that.loading = false;
  164. that.showWinningResult(res.data, index);
  165. }, 5000);
  166. })
  167. },
  168. showWinningResult(data, index) {
  169. console.log("中奖结果", data)
  170. let that = this;
  171. uni.showModal({
  172. title: '恭喜您抽中',
  173. content: data.awardname,
  174. showCancel: false,
  175. confirmText: '选择地址',
  176. success: function ({ confirm }) {
  177. if (confirm) {
  178. uni.navigateTo({
  179. url: '/store/deliveryAddress/index'
  180. })
  181. that.$Http.selectAddress = (item) => {
  182. uni.showModal({
  183. title: '提示',
  184. content: `是否确定选择“${item.address}”作为收货地址?`,
  185. success: (success) => {
  186. if (success.confirm) that.$Http.basic({
  187. id: "2024052910464202",
  188. content: {
  189. sa_awardmxid: data.sa_awardmxid,
  190. name: item.name,
  191. phonenumber: item.phonenumber,
  192. province: item.province,
  193. city: item.city,
  194. county: item.county,
  195. address: item.address,
  196. }
  197. }).then(s => {
  198. if (that.cutoff(s.msg, '设置成功', true, '1000')) return;
  199. })
  200. },
  201. })
  202. }
  203. }
  204. },
  205. fail: (err) => {
  206. console.log(err)
  207. }
  208. });
  209. },
  210. getWinningList() {
  211. this.$Http.basic({
  212. "content": {
  213. "sa_awardid": this.sa_awardid,
  214. "pageNumber": 1,
  215. "pageSize": 20
  216. },
  217. "id": 20240514133902
  218. }).then(res => {
  219. console.log("中奖人员", res)
  220. if (this.cutoff(res.msg)) return;
  221. if (res.data.length < 7) {
  222. let len = res.data.length;
  223. for (let index = 0; index < (7 - len); index++) {
  224. res.data.push({})
  225. }
  226. }
  227. this.winningList = res.data;
  228. })
  229. },
  230. queryAwardCount() {
  231. if (uni.getStorageSync('userMsg').usertype == 99) {
  232. this.$Http.basic({
  233. "classname": "sysmanage.develop.datafunction.datafunction",
  234. "method": "execute",
  235. "content": {
  236. "functionname": "queryAwardCount",
  237. "parameter": {
  238. "sa_awardid": this.sa_awardid
  239. }
  240. }
  241. }).then(res => {
  242. console.log("抽奖可用次数", res)
  243. if (this.cutoff(res.msg)) return;
  244. this.usableCount = res.data.length ? res.data[0].count : 0;
  245. })
  246. } else {
  247. this.tips = '内部人员不可参与抽奖';
  248. }
  249. },
  250. endCallBack(prize) {
  251. console.log("抽到的奖品", prize)
  252. }
  253. }
  254. }
  255. </script>
  256. <style lang="scss" scoped>
  257. .box {
  258. width: 100vw;
  259. min-height: 100vh;
  260. background: linear-gradient(90deg, #FE5A46 0%, #F11F46 100%);
  261. .lottery-box {
  262. position: relative;
  263. width: 100vw;
  264. height: 511px;
  265. .my-list {
  266. position: absolute;
  267. top: 20px;
  268. left: 0;
  269. width: 86px;
  270. height: 40px;
  271. line-height: 40px;
  272. text-align: center;
  273. background: linear-gradient(180deg, #FAD96D 0%, #FFC300 4%, #FFCD2B 16%, #FFDF77 42%, #FFD241 70%, #FFC300 94%, #FC9228 100%);
  274. border-radius: 0px 20px 20px 0px;
  275. font-family: Source Han Sans SC, Source Han Sans SC;
  276. font-weight: bold;
  277. font-size: 14px;
  278. color: #C30D23;
  279. z-index: 2;
  280. }
  281. .bg-image {
  282. position: absolute;
  283. width: 100vw;
  284. height: 511px;
  285. top: 0;
  286. left: 0;
  287. z-index: 1;
  288. vertical-align: bottom;
  289. }
  290. .lottery {
  291. position: absolute;
  292. width: 100%;
  293. z-index: 2;
  294. top: 140px;
  295. }
  296. .usable-count {
  297. position: absolute;
  298. bottom: 15px;
  299. width: 100vw;
  300. text-align: center;
  301. font-family: Source Han Sans SC, Source Han Sans SC;
  302. font-weight: bold;
  303. font-size: 14px;
  304. color: #FFFFFF;
  305. .count {
  306. height: 29px;
  307. font-family: Source Han Sans SC, Source Han Sans SC;
  308. font-weight: 800;
  309. font-size: 20px;
  310. color: #FAD96D;
  311. padding: 0 10px;
  312. }
  313. }
  314. }
  315. .winners-list {
  316. width: 100vw;
  317. display: flex;
  318. flex-direction: column;
  319. align-items: center;
  320. padding-bottom: 20px;
  321. .image {
  322. width: 355px;
  323. }
  324. .title {
  325. position: relative;
  326. width: 80px;
  327. height: 29px;
  328. margin: 0 auto;
  329. .text {
  330. position: absolute;
  331. top: 0px;
  332. left: 0;
  333. width: 80px;
  334. line-height: 29px;
  335. text-align: center;
  336. font-family: Source Han Sans SC, Source Han Sans SC;
  337. font-weight: bold;
  338. font-size: 20px;
  339. color: #333333;
  340. z-index: 2;
  341. }
  342. }
  343. .title::after {
  344. content: '';
  345. position: absolute;
  346. bottom: 0px;
  347. left: 0;
  348. width: 80px;
  349. height: 8px;
  350. background: #FAD96D;
  351. border-radius: 5px;
  352. z-index: 1;
  353. }
  354. .content {
  355. background: #fff;
  356. padding: 0 15px 20px;
  357. width: 669.7672675rpx;
  358. box-sizing: border-box;
  359. .swiper {
  360. width: 100%;
  361. height: 300px;
  362. margin-top: 20px;
  363. .swiper-item {
  364. width: 100%;
  365. height: 40px;
  366. text-align: center;
  367. line-height: 20px;
  368. font-family: Source Han Sans SC, Source Han Sans SC;
  369. font-size: 14px;
  370. color: #666666;
  371. overflow: hidden;
  372. }
  373. }
  374. }
  375. }
  376. }
  377. </style>