diff --git a/babel.config.js b/babel.config.js index 5214e8e..242bf81 100644 --- a/babel.config.js +++ b/babel.config.js @@ -6,7 +6,7 @@ module.exports = { { libraryName: "vant", libraryDirectory: "es", - style: true + style: name => `${name}/style/less` }, "vant" ] diff --git a/package.json b/package.json index f020831..fb19130 100644 --- a/package.json +++ b/package.json @@ -34,12 +34,13 @@ "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.1", "eslint-plugin-vue": "^6.2.2", + "less": "^4.1.1", + "less-loader": "^7.3.0", "postcss-design-convert": "^1.1.3", "postcss-px-to-viewport": "^1.1.1", "postcss-write-svg": "^3.0.1", "prettier": "^1.19.1", - "sass": "^1.26.3", - "sass-loader": "^8.0.2", + "sass-loader": "^10.2.0", "vue-template-compiler": "^2.6.11" } } diff --git a/src/App.vue b/src/App.vue index 25f3d19..a513a89 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@ - diff --git a/src/components/recordList/index.js b/src/components/recordList/index.js new file mode 100644 index 0000000..913b1f1 --- /dev/null +++ b/src/components/recordList/index.js @@ -0,0 +1,7 @@ +import RecordList from "./main"; + +RecordList.install = function(Vue) { + Vue.component(RecordList.name, RecordList); +}; + +export default RecordList; diff --git a/src/components/recordList/main.vue b/src/components/recordList/main.vue new file mode 100644 index 0000000..27618e9 --- /dev/null +++ b/src/components/recordList/main.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/src/components/recordList/recordItem.vue b/src/components/recordList/recordItem.vue new file mode 100644 index 0000000..a80f520 --- /dev/null +++ b/src/components/recordList/recordItem.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/src/components/topButton/large.vue b/src/components/topButton/large.vue index 21164fc..14c2406 100644 --- a/src/components/topButton/large.vue +++ b/src/components/topButton/large.vue @@ -8,21 +8,21 @@ export default { name: "LargeTopButton", props: { - mode: { + drawType: { type: String, - default: "blue" + default: "turntable1" } }, computed: { buttonClass() { - if (this.mode === "blue") return "top-button-xy"; + if (this.drawType === "turntable1") return "top-button-xy"; return "top-button-hh"; } } }; - + diff --git a/src/main.js b/src/main.js index 7fcbbb2..85af654 100644 --- a/src/main.js +++ b/src/main.js @@ -2,12 +2,17 @@ import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; -import { Toast, Dialog } from "vant"; +import { Toast, Dialog, Tab, Tabs, Popup, Image as VanImage, List } from "vant"; Vue.config.productionTip = false; Vue.use(Toast); Vue.use(Dialog); +Vue.use(Tab); +Vue.use(Tabs); +Vue.use(Popup); +Vue.use(VanImage); +Vue.use(List); new Vue({ router, diff --git a/src/router/index.js b/src/router/index.js index daa6cee..01fb5fe 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -9,16 +9,13 @@ const routes = [ path: "/", name: "Home", component: Home - }, - { - path: "/about", - name: "About", - // route level code-splitting - // this generates a separate chunk (about.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => - import(/* webpackChunkName: "about" */ "../views/About.vue") } + // { + // path: "/about", + // name: "About", + // component: () => + // import(/* webpackChunkName: "about" */ "../views/About.vue") + // } ]; const router = new VueRouter({ diff --git a/src/store/index.js b/src/store/index.js index 28b4e34..aa2d2ce 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,29 +1,42 @@ import Vue from "vue"; import Vuex from "vuex"; +import { Toast } from "vant"; +import { queryPrizeInfo } from "@/api"; Vue.use(Vuex); export default new Vuex.Store({ state: { - prizeInfo: [], + drawType: "turntable1", + prizeInfo: { + turntable1: [], + turntable2: [] + }, prizeItemList: [], ruleType: "one", remainTicketNum: 0, ticketRule: null, - canLottery: true + canLottery: true, + lotteryRecordRateVo: {} }, getters: { + drawType: state => { + return state.drawType; + }, prizeInfo: state => { return state.prizeInfo; }, + curDrawTypePrizeInfo: state => { + return state.prizeInfo[state.drawType]; + }, prizeItemList: state => { return state.prizeItemList; }, - prizeIdList: state => { - const { prizeInfo } = state; + prizeIdList: (state, getters) => { + const { curDrawTypePrizeInfo } = getters; const list = []; - for (let index = 0; index < prizeInfo.length; index++) { - const element = prizeInfo[index]; + for (let index = 0; index < curDrawTypePrizeInfo.length; index++) { + const element = curDrawTypePrizeInfo[index]; list.push(element.prizeId); } return list; @@ -43,11 +56,18 @@ export default new Vuex.Store({ }, canLottery: state => { return state.canLottery; + }, + lotteryRecordRateVo: state => { + return state.lotteryRecordRateVo; } }, mutations: { - SetPrizeInfo(state, payload) { - state.prizeInfo = payload; + SetDrawType(state, payload) { + state.drawType = payload; + }, + SetDrawTypePrizeInfo(state, payload) { + const { drawType, list } = payload; + state.prizeInfo[drawType || state.drawType] = list; }, SetPrizeItemList(state, payload) { state.prizeItemList = payload; @@ -63,8 +83,30 @@ export default new Vuex.Store({ }, SetCanLottery(state, payload) { state.canLottery = payload; + }, + SetLotteryRecordRateVo(state, payload) { + state.lotteryRecordRateVo = payload; + } + }, + actions: { + getQueryPrizeInfo({ state, commit }, drawType) { + return new Promise((resolve, reject) => { + queryPrizeInfo({ drawType: drawType || state.drawType }) + .then(res => { + const { code, data, msg } = res; + if (code === 200) { + commit("SetDrawTypePrizeInfo", { drawType, list: data }); + } else { + Toast.fail(msg); + } + resolve(res); + }) + .catch(err => { + Toast.fail("获取抽奖奖品信息失败！"); + reject(err); + }); + }); } }, - actions: {}, modules: {} }); diff --git a/src/styles/cover.less b/src/styles/cover.less new file mode 100644 index 0000000..d82f621 --- /dev/null +++ b/src/styles/cover.less @@ -0,0 +1,4 @@ +@tab-text-color: #AFAAFF; +@tab-active-text-color: #DBCFFF; +@tabs-nav-background-color: none; +@tabs-bottom-bar-color: #DBCFFF; \ No newline at end of file diff --git a/src/styles/global.scss b/src/styles/global.less similarity index 59% rename from src/styles/global.scss rename to src/styles/global.less index 9e266a2..23b9c40 100644 --- a/src/styles/global.scss +++ b/src/styles/global.less @@ -29,22 +29,22 @@ body { user-select: none; } #app { - font-family: "Helvetica", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-family: "PingFang SC", "Helvetica", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; font-size: 14px; } -@svg 1px-border { - height: 2px; - @rect { - fill: var(--color, black); - width: 100%; - height: 50%; - } -} -.border-1px { - border: 1px solid transparent; - border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; -} +// @svg 1px-border { +// height: 2px; +// @rect { +// fill: var(--color, black); +// width: 100%; +// height: 50%; +// } +// } +// .border-1px { +// border: 1px solid transparent; +// border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; +// } diff --git a/src/styles/index.less b/src/styles/index.less new file mode 100644 index 0000000..7a1e720 --- /dev/null +++ b/src/styles/index.less @@ -0,0 +1,11 @@ +@import "./global.less"; + +.prizes-view-content-tableft { + margin-left: 130px; + font-size: 32px; +} + +.prizes-view-content-tabright { + margin-right: 130px; + font-size: 32px; +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 8063ce3..0000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,2 +0,0 @@ - -@import "./global.scss"; \ No newline at end of file diff --git a/src/views/About.vue b/src/views/About.vue deleted file mode 100644 index 3fa2807..0000000 --- a/src/views/About.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/views/Home.vue b/src/views/Home.vue index d044a59..8caff69 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -2,18 +2,38 @@
- +
- +
- +
- +
+ + + + +
@@ -22,6 +42,8 @@ import topButton from "@/components/topButton"; import ballContent from "@/components/ballContent"; import enterView from "@/components/enterView"; import bottomView from "@/components/bottomView"; +// import prizesView from "./prizesView.vue"; +import { mapMutations, mapGetters } from "vuex"; export default { name: "Home", @@ -29,31 +51,55 @@ export default { topButton, ballContent, enterView, - bottomView + bottomView, + // prizesView + prizesView: resolve => require(["./prizesView.vue"], resolve), + ruleView: resolve => require(["./ruleView.vue"], resolve), + recordView: resolve => require(["./recordView.vue"], resolve) }, data() { return { - active: 0 + show: false, + curBtnText: "", + componentsName: { + 规则: "rule-view", + 奖品: "prizes-view", + 排行: "record-view", + 记录: "record-view" + } }; }, computed: { - mode() { - if (this.active === 0) return "blue"; - if (this.active === 1) return "gold"; - return "blue"; + ...mapGetters(["drawType"]), + curComponentsName() { + return this.componentsName[this.curBtnText]; + }, + showPopup() { + return this.show && this.curBtnText && this.curComponentsName; + } + }, + watch: { + show() { + console.log("this.show", this.show); } }, mounted() {}, methods: { + ...mapMutations(["SetDrawType"]), clickTopButton(index) { - this.active = index; - console.log("active", index); + this.SetDrawType(index); + // console.log("active", index); + }, + clickEntryBtn(val) { + // console.log("clickEntryBtn", val); + this.curBtnText = val; + this.show = true; } } }; - diff --git a/src/views/recordView.vue b/src/views/recordView.vue new file mode 100644 index 0000000..5194bd9 --- /dev/null +++ b/src/views/recordView.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/src/views/ruleView.vue b/src/views/ruleView.vue new file mode 100644 index 0000000..8adf07e --- /dev/null +++ b/src/views/ruleView.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/vue.config.js b/vue.config.js index 2e3e024..a1b3eb5 100644 --- a/vue.config.js +++ b/vue.config.js @@ -26,7 +26,15 @@ module.exports = { }, css: { loaderOptions: { - postcss: {} + postcss: {}, + less: { + lessOptions: { + modifyVars: { + // 或者可以通过 less 文件覆盖（文件路径为绝对路径） + hack: `true; @import "@/styles/cover.less";` + } + } + } } } };