Commit 55ddb3f8a694bb5d7e0b211e5a46b4f65a418a56
1 parent
09a4a9a0aa
Exists in
master
登陆逻辑修改
Showing
5 changed files
with
297 additions
and
20 deletions
Show diff stats
src/App.vue
| 1 | <script lang="ts"> | 1 | <script> |
| 2 | import Vue from 'vue'; | 2 | import Vue from 'vue'; |
| 3 | import store from '@/store'; | ||
| 4 | |||
| 3 | export default Vue.extend({ | 5 | export default Vue.extend({ |
| 4 | mpType: 'app', | 6 | mpType: 'app', |
| 5 | onLaunch() { | 7 | onLaunch(options) { |
| 6 | console.log('App Launch') | 8 | const option = options || {}; |
| 9 | // 获取用户来源 | ||
| 10 | console.log('软件启动，输出转来的参数:', option); | ||
| 11 | console.log('场景值------------------:', option.scene); | ||
| 12 | let loginQueryInfo = option ? option.query : {}; | ||
| 13 | loginQueryInfo = loginQueryInfo || {}; | ||
| 14 | console.log('loginQueryInfo onShow===>', loginQueryInfo); | ||
| 15 | const scene = decodeURIComponent(loginQueryInfo.scene); | ||
| 16 | console.log('decodeURIComponent scense====>', scene); | ||
| 17 | let fromInfo = {}; | ||
| 18 | |||
| 19 | if(scene.length > 0 ) { | ||
| 20 | const getQueryString = { | ||
| 21 | uid: undefined, | ||
| 22 | sid: undefined, | ||
| 23 | pid: undefined | ||
| 24 | }; | ||
| 25 | const strB = scene.split('&'); | ||
| 26 | |||
| 27 | for(let i = 0; i < strB.length; i += 1) { | ||
| 28 | getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]); | ||
| 29 | } | ||
| 30 | fromInfo = { | ||
| 31 | loginQueryInfo, | ||
| 32 | fromuid: getQueryString.uid, | ||
| 33 | fromsid: getQueryString.sid, | ||
| 34 | frompid: getQueryString.pid, | ||
| 35 | scene: option.scene, | ||
| 36 | } | ||
| 37 | store.dispatch('user/setFrom', fromInfo); | ||
| 38 | console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString); | ||
| 39 | } else { | ||
| 40 | console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo); | ||
| 41 | if (loginQueryInfo.hasOwnProperty('sid') == false) { | ||
| 42 | loginQueryInfo.sid = 0; | ||
| 43 | } | ||
| 44 | if (loginQueryInfo.hasOwnProperty('pid') == false) { | ||
| 45 | loginQueryInfo.pid = 0; | ||
| 46 | } | ||
| 47 | if (loginQueryInfo.hasOwnProperty('uid') == false) { | ||
| 48 | loginQueryInfo.uid = 0; | ||
| 49 | } | ||
| 50 | fromInfo = { | ||
| 51 | loginQueryInfo, | ||
| 52 | fromuid: loginQueryInfo.uid, | ||
| 53 | fromsid: loginQueryInfo.sid, | ||
| 54 | frompid: loginQueryInfo.pid, | ||
| 55 | scene: option.scene, | ||
| 56 | } | ||
| 57 | store.dispatch('user/setFrom', fromInfo) | ||
| 58 | } | ||
| 59 | |||
| 60 | // 登陆 | ||
| 61 | const openId = uni.getStorageSync('openid') || ""; | ||
| 62 | if(openId.length <= 10) { | ||
| 63 | uni.clearStorageSync() | ||
| 64 | store.dispatch("user/login", fromInfo); | ||
| 65 | } else { | ||
| 66 | store.dispatch("user/getUserInfo", fromInfo); | ||
| 67 | } | ||
| 7 | }, | 68 | }, |
| 8 | onShow() { | 69 | onShow() { |
| 9 | 70 | ||
| 10 | console.log('App Show') | 71 | console.log('App Show') |
| 11 | }, | 72 | }, |
| 12 | onHide() { | 73 | onHide() { |
| 13 | console.log('App Hide') | 74 | console.log('App Hide') |
| 75 | }, | ||
| 76 | methods: { | ||
| 14 | } | 77 | } |
| 15 | }); | 78 | }); |
| 16 | </script> | 79 | </script> |
| 17 | 80 | ||
| 18 | <style> | 81 | <style> |
| 19 | /*每个页面公共css */ | 82 | /*每个页面公共css */ |
| 20 | </style> | 83 | </style> |
| 21 | 84 |
src/pages/index/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="header"> | 3 | <view class="header"> |
| 4 | <!-- 搜索--> | 4 | <!-- 搜索--> |
| 5 | <view class="searchBar"> | 5 | <view class="searchBar"> |
| 6 | <icon class="searchIcon" type="search" size="14"></icon> | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
| 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> | 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> |
| 8 | </view> | 8 | </view> |
| 9 | 9 | ||
| 10 | <!-- 筛选栏--> | 10 | <!-- 筛选栏--> |
| 11 | <view class="screenBar"> | 11 | <view class="screenBar"> |
| 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> | 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> |
| 13 | <view | 13 | <view |
| 14 | class="screenItem" | 14 | class="screenItem" |
| 15 | v-bind:class="{ active: current === item.current }" | 15 | v-bind:class="{ active: current === item.current }" |
| 16 | v-if="item.current === 2" | 16 | v-if="item.current === 2" |
| 17 | @click="dropDown" | 17 | @click="dropDown" |
| 18 | > | 18 | > |
| 19 | {{ item.text }} | 19 | {{ item.text }} |
| 20 | <icon type="info" size="14"></icon> | 20 | <icon type="info" size="14"></icon> |
| 21 | </view> | 21 | </view> |
| 22 | <view | 22 | <view |
| 23 | class="screenItem" | 23 | class="screenItem" |
| 24 | v-bind:class="{ active: current === item.current }" | 24 | v-bind:class="{ active: current === item.current }" |
| 25 | v-if="item.current === 4" | 25 | v-if="item.current === 4" |
| 26 | @click="showDrawer('showRight')" | 26 | @click="showDrawer('showRight')" |
| 27 | > | 27 | > |
| 28 | {{ item.text }} | 28 | {{ item.text }} |
| 29 | <icon type="info" size="14"></icon> | 29 | <icon type="info" size="14"></icon> |
| 30 | </view> | 30 | </view> |
| 31 | <view v-if="item.current !== 2&&item.current!==4"> | 31 | <view v-if="item.current !== 2&&item.current!==4"> |
| 32 | <view | 32 | <view |
| 33 | class="screenItem" | 33 | class="screenItem" |
| 34 | v-bind:class="{ active: current === item.current }" | 34 | v-bind:class="{ active: current === item.current }" |
| 35 | >{{ item.text }}</view> | 35 | >{{ item.text }}</view> |
| 36 | </view> | 36 | </view> |
| 37 | </view> | 37 | </view> |
| 38 | </view> | 38 | </view> |
| 39 | </view> | 39 | </view> |
| 40 | <Uni-drawer | 40 | <Uni-drawer |
| 41 | ref="showRight" | 41 | ref="showRight" |
| 42 | mask="true" | 42 | mask="true" |
| 43 | maskClick="true" | 43 | maskClick="true" |
| 44 | mode="right" | 44 | mode="right" |
| 45 | :width="320" | 45 | :width="320" |
| 46 | @change="change($event,'showRight')" | 46 | @change="change($event,'showRight')" |
| 47 | > | 47 | > |
| 48 | <view class="close"> | 48 | <view class="close"> |
| 49 | <view @click="closeDrawer('showRight')"> | 49 | <view @click="closeDrawer('showRight')"> |
| 50 | <text class="word-btn-white">关闭</text> | 50 | <text class="word-btn-white">关闭</text> |
| 51 | </view> | 51 | </view> |
| 52 | </view> | 52 | </view> |
| 53 | </Uni-drawer> | 53 | </Uni-drawer> |
| 54 | 54 | ||
| 55 | <!-- 筛选菜单--> | 55 | <!-- 筛选菜单--> |
| 56 | <view class="content-wrap"> | 56 | <view class="content-wrap"> |
| 57 | <view> | 57 | <view> |
| 58 | <HMfilterDropdown | 58 | <HMfilterDropdown |
| 59 | :filterData="filterData" | 59 | :filterData="filterData" |
| 60 | :defaultSelected="filterDropdownValue" | 60 | :defaultSelected="filterDropdownValue" |
| 61 | :updateMenuName="true" | 61 | :updateMenuName="true" |
| 62 | @confirm="confirm" | 62 | @confirm="confirm" |
| 63 | data-format="Object" | 63 | data-format="Object" |
| 64 | ></HMfilterDropdown> | 64 | ></HMfilterDropdown> |
| 65 | <!-- 商品列表 --> | 65 | <!-- 商品列表 --> |
| 66 | <view class="goods-list"> | 66 | <view class="goods-list"> |
| 67 | <view class="product-list"> | 67 | <view class="product-list"> |
| 68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> | 68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> |
| 69 | <Card :goods="goods"></Card> | 69 | <Card :goods="goods"></Card> |
| 70 | </view> | 70 | </view> |
| 71 | </view> | 71 | </view> |
| 72 | <view class="loading-text">{{loadingText}}</view> | 72 | <view class="loading-text">{{loadingText}}</view> |
| 73 | </view> | 73 | </view> |
| 74 | </view> | 74 | </view> |
| 75 | </view> | 75 | </view> |
| 76 | </view> | 76 | </view> |
| 77 | </template> | 77 | </template> |
| 78 | 78 | ||
| 79 | <script> | 79 | <script> |
| 80 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; | 80 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; |
| 81 | import Card from "@/components/CommodityCard/CommodityCard.vue"; | 81 | import Card from "@/components/CommodityCard/CommodityCard.vue"; |
| 82 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; | 82 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; |
| 83 | import data from "@/common/data.js"; //筛选菜单数据 | 83 | import data from "@/common/data.js"; //筛选菜单数据 |
| 84 | import store from '@/store'; | 84 | import store from '@/store'; |
| 85 | 85 | ||
| 86 | export default { | 86 | export default { |
| 87 | components: { | 87 | components: { |
| 88 | UniDrawer: UniDrawer, | 88 | UniDrawer: UniDrawer, |
| 89 | HMfilterDropdown: HMfilterDropdown, | 89 | HMfilterDropdown: HMfilterDropdown, |
| 90 | Card: Card | 90 | Card: Card |
| 91 | }, | 91 | }, |
| 92 | data() { | 92 | data() { |
| 93 | return { | 93 | return { |
| 94 | screenItems: [ | 94 | screenItems: [ |
| 95 | { current: 0, text: "全部", hasIcon: false }, | 95 | { current: 0, text: "全部", hasIcon: false }, |
| 96 | { current: 1, text: "销量", hasIcon: false }, | 96 | { current: 1, text: "销量", hasIcon: false }, |
| 97 | { current: 2, text: "价格", hasIcon: true }, | 97 | { current: 2, text: "价格", hasIcon: true }, |
| 98 | { current: 3, text: "折扣", hasIcon: false }, | 98 | { current: 3, text: "折扣", hasIcon: false }, |
| 99 | { current: 4, text: "筛选", hasIcon: true } | 99 | { current: 4, text: "筛选", hasIcon: true } |
| 100 | ], | 100 | ], |
| 101 | current: 0, | 101 | current: 0, |
| 102 | showRight: false, | 102 | showRight: false, |
| 103 | indexArr: "", | 103 | indexArr: "", |
| 104 | valueArr: "", | 104 | valueArr: "", |
| 105 | loadingText: "~~到底了~~", | 105 | loadingText: "~~到底了~~", |
| 106 | filterDropdownValue: [], | 106 | filterDropdownValue: [], |
| 107 | filterData: [], | 107 | filterData: [], |
| 108 | goodsList:[ | 108 | goodsList:[ |
| 109 | { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | 109 | { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, |
| 110 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, | 110 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, |
| 111 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, | 111 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, |
| 112 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, | 112 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, |
| 113 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | 113 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, |
| 114 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, | 114 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, |
| 115 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, | 115 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, |
| 116 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, | 116 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, |
| 117 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | 117 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, |
| 118 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 } | 118 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 } |
| 119 | ], | 119 | ], |
| 120 | }; | 120 | }; |
| 121 | }, | 121 | }, |
| 122 | computed: { | 122 | computed: { |
| 123 | // goodsList() { | 123 | // goodsList() { |
| 124 | // // 也可以从 getters 获取 | 124 | // // 也可以从 getters 获取 |
| 125 | // console.log('list', this.$store.state.test.list); | 125 | // console.log('list', this.$store.state.test.list); |
| 126 | // return this.$store.state.test.list; | 126 | // return this.$store.state.test.list; |
| 127 | // }, | 127 | // }, |
| 128 | // categoryList(){ | 128 | // categoryList(){ |
| 129 | // console.log(this.$store.state.categoryOrder.categoryList); | 129 | // console.log(this.$store.state.categoryOrder.categoryList); |
| 130 | // this.filterData = this.$store.state.categoryOrder.categoryList | 130 | // this.filterData = this.$store.state.categoryOrder.categoryList |
| 131 | // } | 131 | // } |
| 132 | 132 | ||
| 133 | }, | 133 | }, |
| 134 | filters: { | 134 | filters: { |
| 135 | outData(value) { | 135 | outData(value) { |
| 136 | return JSON.stringify(value); | 136 | return JSON.stringify(value); |
| 137 | } | 137 | } |
| 138 | }, | 138 | }, |
| 139 | onLoad: function() { | 139 | onLoad: function() { |
| 140 | store.dispatch('test/fetch'); | 140 | store.dispatch('test/fetch'); |
| 141 | store.dispatch('categoryOrder/fetch') | 141 | store.dispatch('categoryOrder/fetch') |
| 142 | 142 | // 登陆 | |
| 143 | // store.dispatch('user/login') | ||
| 144 | |||
| 143 | //定时器模拟ajax异步请求数据 | 145 | //定时器模拟ajax异步请求数据 |
| 144 | setTimeout(()=>{ | 146 | setTimeout(()=>{ |
| 145 | //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null | 147 | //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null |
| 146 | // this.filterDropdownValue = [ | 148 | // this.filterDropdownValue = [ |
| 147 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 | 149 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 |
| 148 | // [null,null], //第1个菜单选中 都不选中 | 150 | // [null,null], //第1个菜单选中 都不选中 |
| 149 | // [1], //第2个菜单选中 一级菜单的第1项 | 151 | // [1], //第2个菜单选中 一级菜单的第1项 |
| 150 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 | 152 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 |
| 151 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 | 153 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 |
| 152 | // ]; | 154 | // ]; |
| 153 | // this.filterData = data; | 155 | // this.filterData = data; |
| 154 | },100); | 156 | },100); |
| 155 | }, | 157 | }, |
| 156 | methods: { | 158 | methods: { |
| 157 | showDrawer(e) { | 159 | showDrawer(e) { |
| 158 | this.$refs[e].open(); | 160 | this.$refs[e].open(); |
| 159 | }, | 161 | }, |
| 160 | closeDrawer(e) { | 162 | closeDrawer(e) { |
| 161 | this.$refs[e].close(); | 163 | this.$refs[e].close(); |
| 162 | }, | 164 | }, |
| 163 | change(e, type) { | 165 | change(e, type) { |
| 164 | this[type] = e; | 166 | this[type] = e; |
| 165 | }, | 167 | }, |
| 166 | onClickItem(e) { | 168 | onClickItem(e) { |
| 167 | if (this.current !== e) { | 169 | if (this.current !== e) { |
| 168 | this.current = e; | 170 | this.current = e; |
| 169 | } | 171 | } |
| 170 | }, | 172 | }, |
| 171 | dropDown() { | 173 | dropDown() { |
| 172 | console.log("下拉"); | 174 | console.log("下拉"); |
| 173 | }, | 175 | }, |
| 174 | //接收菜单结果 | 176 | //接收菜单结果 |
| 175 | confirm(e) { | 177 | confirm(e) { |
| 176 | this.indexArr = e.index; | 178 | this.indexArr = e.index; |
| 177 | this.valueArr = e.value; | 179 | this.valueArr = e.value; |
| 178 | return; | 180 | return; |
| 179 | console.log("修改菜单"); | 181 | console.log("修改菜单"); |
| 180 | this.filterData[4].submenu[1] = { | 182 | this.filterData[4].submenu[1] = { |
| 181 | name: "项目2", | 183 | name: "项目2", |
| 182 | submenu: [] | 184 | submenu: [] |
| 183 | }; | 185 | }; |
| 184 | } | 186 | } |
| 185 | }, | 187 | }, |
| 186 | 188 | ||
| 187 | }; | 189 | }; |
| 188 | </script> | 190 | </script> |
| 189 | 191 | ||
| 190 | <style lang="scss"> | 192 | <style lang="scss"> |
| 191 | .content { | 193 | .content { |
| 192 | display: flex; | 194 | display: flex; |
| 193 | flex-direction: column; | 195 | flex-direction: column; |
| 194 | align-items: center; | 196 | align-items: center; |
| 195 | justify-content: center; | 197 | justify-content: center; |
| 196 | background-color: #f7f6f6; | 198 | background-color: #f7f6f6; |
| 197 | } | 199 | } |
| 198 | .header { | 200 | .header { |
| 199 | display: flex; | 201 | display: flex; |
| 200 | flex-direction: column; | 202 | flex-direction: column; |
| 201 | align-items: center; | 203 | align-items: center; |
| 202 | justify-content: center; | 204 | justify-content: center; |
| 203 | background-color: #f7f6f6; | 205 | background-color: #f7f6f6; |
| 204 | height: 178rpx; | 206 | height: 178rpx; |
| 205 | width: 100%; | 207 | width: 100%; |
| 206 | z-index: 999; | 208 | z-index: 999; |
| 207 | position: fixed; | 209 | position: fixed; |
| 208 | top: 0; | 210 | top: 0; |
| 209 | left: 0; | 211 | left: 0; |
| 210 | } | 212 | } |
| 211 | .searchBar { | 213 | .searchBar { |
| 212 | width: 670rpx; | 214 | width: 670rpx; |
| 213 | display: flex; | 215 | display: flex; |
| 214 | justify-content: center; | 216 | justify-content: center; |
| 215 | align-items: center; | 217 | align-items: center; |
| 216 | box-sizing: border-box; | 218 | box-sizing: border-box; |
| 217 | padding: 0rpx 16rpx; | 219 | padding: 0rpx 16rpx; |
| 218 | border: 1px solid #ff6b4a; | 220 | border: 1px solid #ff6b4a; |
| 219 | border-radius: 8rpx; | 221 | border-radius: 8rpx; |
| 220 | background-color: #ffffff; | 222 | background-color: #ffffff; |
| 221 | } | 223 | } |
| 222 | 224 | ||
| 223 | .searchIpt { | 225 | .searchIpt { |
| 224 | height: 68rpx; | 226 | height: 68rpx; |
| 225 | width: 670rpx; | 227 | width: 670rpx; |
| 226 | padding: 16rpx; | 228 | padding: 16rpx; |
| 227 | font-size: 28rpx; | 229 | font-size: 28rpx; |
| 228 | box-sizing: border-box; | 230 | box-sizing: border-box; |
| 229 | } | 231 | } |
| 230 | .screenBar { | 232 | .screenBar { |
| 231 | width: 670rpx; | 233 | width: 670rpx; |
| 232 | height: 110rpx; | 234 | height: 110rpx; |
| 233 | display: flex; | 235 | display: flex; |
| 234 | flex-direction: row; | 236 | flex-direction: row; |
| 235 | justify-content: space-between; | 237 | justify-content: space-between; |
| 236 | align-items: center; | 238 | align-items: center; |
| 237 | color: #333333; | 239 | color: #333333; |
| 238 | font-size: 32rpx; | 240 | font-size: 32rpx; |
| 239 | } | 241 | } |
| 240 | .active { | 242 | .active { |
| 241 | color: #ff6b4a; | 243 | color: #ff6b4a; |
| 242 | } | 244 | } |
| 243 | .screenItem { | 245 | .screenItem { |
| 244 | display: flex; | 246 | display: flex; |
| 245 | justify-content: center; | 247 | justify-content: center; |
| 246 | align-items: center; | 248 | align-items: center; |
| 247 | } | 249 | } |
| 248 | .content-wrap { | 250 | .content-wrap { |
| 249 | width: 100%; | 251 | width: 100%; |
| 250 | background-color: #ffffff; | 252 | background-color: #ffffff; |
| 251 | } | 253 | } |
| 252 | 254 | ||
| 253 | .HMfilterDropdown { | 255 | .HMfilterDropdown { |
| 254 | top: 178rpx !important; | 256 | top: 178rpx !important; |
| 255 | } | 257 | } |
| 256 | 258 | ||
| 257 | .goods-list { | 259 | .goods-list { |
| 258 | padding-top: 286rpx; | 260 | padding-top: 286rpx; |
| 259 | .loading-text { | 261 | .loading-text { |
| 260 | width: 100%; | 262 | width: 100%; |
| 261 | display: flex; | 263 | display: flex; |
| 262 | justify-content: center; | 264 | justify-content: center; |
| 263 | align-items: center; | 265 | align-items: center; |
| 264 | height: 30px; | 266 | height: 30px; |
| 265 | color: #979797; | 267 | color: #979797; |
| 266 | font-size: 12px; | 268 | font-size: 12px; |
| 267 | } | 269 | } |
| 268 | .product-list { | 270 | .product-list { |
| 269 | width: 92%; | 271 | width: 92%; |
| 270 | padding: 0 4% 3vw 4%; | 272 | padding: 0 4% 3vw 4%; |
| 271 | display: flex; | 273 | display: flex; |
| 272 | justify-content: space-between; | 274 | justify-content: space-between; |
| 273 | flex-wrap: wrap; | 275 | flex-wrap: wrap; |
| 274 | .product { | 276 | .product { |
| 275 | width: 48%; | 277 | width: 48%; |
| 276 | margin: 0 0 20rpx 0; | 278 | margin: 0 0 20rpx 0; |
| 277 | background: #ffffff; | 279 | background: #ffffff; |
| 278 | border: 1px solid #f2f2f2; | 280 | border: 1px solid #f2f2f2; |
| 279 | } | 281 | } |
| 280 | } | 282 | } |
| 281 | } | 283 | } |
| 282 | </style> | 284 | </style> |
| 283 | 285 |
src/pages/user/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <view class="content"> | 3 | <view v-if="isAuth" class="content"> |
| 4 | <view class="userInfo"> | 4 | <view class="userInfo"> |
| 5 | <view class="info"> | 5 | <view class="info"> |
| 6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> | 6 | <image :src="headerphoto" mode="aspectFill"></image> |
| 7 | <view class="infoText"> | 7 | <view class="infoText"> |
| 8 | <text class="userName">{{userName}}</text> | 8 | <text class="userName">{{nickName}}</text> |
| 9 | <text class="nickName">用户名：骆驼不死的祥子</text> | ||
| 10 | </view> | 9 | </view> |
| 11 | </view> | 10 | </view> |
| 12 | <view class="service"> | 11 | <view class="service"> |
| 13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 12 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
| 14 | </view> | 13 | </view> |
| 15 | </view> | 14 | </view> |
| 16 | <view class="myOrder"> | 15 | <view class="myOrder"> |
| 17 | <view class="orderHeader"> | 16 | <view class="orderHeader"> |
| 18 | <text>全部订单</text> | 17 | <text>全部订单</text> |
| 19 | <view class="btn" @click="toMyOrder"> | 18 | <view class="btn" @click="toMyOrder"> |
| 20 | 全部 | 19 | 全部 |
| 21 | <image src="../../static/right.png" mode="aspectFill"></image> | 20 | <image src="../../static/right.png" mode="aspectFill"></image> |
| 22 | </view> | 21 | </view> |
| 23 | </view> | 22 | </view> |
| 24 | <view class="orderBody"> | 23 | <view class="orderBody"> |
| 25 | <view class="item waitPay" @click="toMyOrderPaying"> | 24 | <view class="item waitPay" @click="toMyOrderPaying"> |
| 26 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | 25 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> |
| 27 | <text>待付款</text> | 26 | <text>待付款</text> |
| 28 | </view> | 27 | </view> |
| 29 | <view class="item waitDeliver" @click="toPredelivery" > | 28 | <view class="item waitDeliver" @click="toPredelivery" > |
| 30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | 29 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> |
| 31 | <text>待发货</text> | 30 | <text>待发货</text> |
| 32 | </view> | 31 | </view> |
| 33 | <view class="item waitReceive" @click="torefunProgress"> | 32 | <view class="item waitReceive" @click="torefunProgress"> |
| 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> | 33 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> |
| 35 | <text>待收货</text> | 34 | <text>待收货</text> |
| 36 | </view> | 35 | </view> |
| 37 | <view class="item service" @click="torefundment"> | 36 | <view class="item service" @click="torefundment"> |
| 38 | <image src="../../static/service.png" mode="aspectFill"></image> | 37 | <image src="../../static/service.png" mode="aspectFill"></image> |
| 39 | <text>退换/售后</text> | 38 | <text>退换/售后</text> |
| 40 | </view> | 39 | </view> |
| 41 | </view> | 40 | </view> |
| 42 | </view> | 41 | </view> |
| 43 | <view class="recommend"> | 42 | <view class="recommend"> |
| 44 | <view class="title"> | 43 | <view class="title"> |
| 45 | <view class="line"></view> | 44 | <view class="line"></view> |
| 46 | <view class="text">精选推荐</view> | 45 | <view class="text">精选推荐</view> |
| 47 | <view class="line"></view> | 46 | <view class="line"></view> |
| 48 | </view> | 47 | </view> |
| 49 | <!-- 商品列表 --> | 48 | <!-- 商品列表 --> |
| 50 | <view class="goods-list"> | 49 | <view class="goods-list"> |
| 51 | <view class="product-list"> | 50 | <view class="product-list"> |
| 52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> | 51 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> |
| 53 | <Card :goods = "goods"></Card> | 52 | <Card :goods = "goods"></Card> |
| 54 | </view> | 53 | </view> |
| 55 | </view> | 54 | </view> |
| 56 | <view class="loading-text">{{loadingText}}</view> | 55 | <view class="loading-text">{{loadingText}}</view> |
| 57 | </view> | 56 | </view> |
| 58 | </view> | 57 | </view> |
| 59 | </view> | 58 | </view> |
| 60 | 59 | <view v-else class="auth"> | |
| 60 | <view class="icon"></view> | ||
| 61 | <view class="divider"></view> | ||
| 62 | <view class="title">申请获取以下权限</view> | ||
| 63 | <view class="text">获得您的公开信息(昵称、头像等)</view> | ||
| 64 | <button | ||
| 65 | type="primary" | ||
| 66 | open-type="getUserInfo" | ||
| 67 | @getuserinfo="onGotUserInfo" | ||
| 68 | >授权登陆</button> | ||
| 69 | </view> | ||
| 61 | </view> | 70 | </view> |
| 62 | </template> | 71 | </template> |
| 63 | 72 | ||
| 64 | <script> | 73 | <script> |
| 65 | import Card from "@/components/CommodityCard/CommodityCard.vue" | 74 | import Card from "@/components/CommodityCard/CommodityCard.vue"; |
| 75 | import store from '@/store'; | ||
| 76 | |||
| 66 | export default { | 77 | export default { |
| 67 | components: { | 78 | components: { |
| 68 | 'Card':Card | 79 | 'Card':Card |
| 69 | }, | 80 | }, |
| 70 | data() { | 81 | data() { |
| 71 | return { | 82 | return { |
| 72 | |||
| 73 | //商品数据 | 83 | //商品数据 |
| 74 | goodsList:[ | 84 | goodsList:[ |
| 75 | { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 85 | { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 86 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 87 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 88 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 79 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 89 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 80 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 90 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 81 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 91 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 82 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 92 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 83 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 93 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 84 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } | 94 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } |
| 85 | ], | 95 | ], |
| 86 | headerphoto:'', | 96 | isAuth: true, // 是否显示授权页面 |
| 87 | userName:'Adam' | ||
| 88 | } | 97 | } |
| 89 | }, | 98 | }, |
| 90 | onLoad() { | 99 | onLoad() { |
| 91 | 100 | // 判断是否授权 | |
| 101 | uni.getSetting({ | ||
| 102 | success(res) { | ||
| 103 | console.log('authSetting',res.authSetting) | ||
| 104 | if(res.authSetting['scope.userInfo'] === true) { | ||
| 105 | this.isAuth = true | ||
| 106 | } else { | ||
| 107 | this.isAuth = false | ||
| 108 | } | ||
| 109 | } | ||
| 110 | }) | ||
| 111 | }, | ||
| 112 | computed: { | ||
| 113 | nickName() { | ||
| 114 | console.log('nickName', this.$store.state.user.userInfo) | ||
| 115 | return this.$store.state.user.userInfo.nickName; | ||
| 116 | }, | ||
| 117 | headerphoto() { | ||
| 118 | return this.$store.state.user.userInfo.headerphoto; | ||
| 119 | } | ||
| 92 | }, | 120 | }, |
| 93 | methods: { | 121 | methods: { |
| 122 | // 授权 | ||
| 123 | onGotUserInfo(e) { | ||
| 124 | console.log('anthInfo', e); | ||
| 125 | if(e.detail.errMsg == 'getUserInfo:ok') { | ||
| 126 | const { fromInfo } = this.$store.state.user; | ||
| 127 | console.log('=====la', fromInfo) | ||
| 128 | // 用户授权成功 | ||
| 129 | store.dispatch('user/getUserInfo', fromInfo); | ||
| 130 | this.isAuth = true | ||
| 131 | } | ||
| 132 | }, | ||
| 94 | toMyOrder(){ | 133 | toMyOrder(){ |
| 95 | uni.navigateTo({ | 134 | uni.navigateTo({ |
| 96 | url: '../myOrder/myOrder?current=0', | 135 | url: '../myOrder/myOrder?current=0', |
| 97 | success: res => {}, | 136 | success: res => {}, |
| 98 | fail: () => {}, | 137 | fail: () => {}, |
| 99 | complete: () => {} | 138 | complete: () => {} |
| 100 | }); | 139 | }); |
| 101 | }, | 140 | }, |
| 102 | toPredelivery(){ | 141 | toPredelivery(){ |
| 103 | uni.navigateTo({ | 142 | uni.navigateTo({ |
| 104 | url: '../myOrder/myOrder?current=2', | 143 | url: '../myOrder/myOrder?current=2', |
| 105 | success: res => {}, | 144 | success: res => {}, |
| 106 | fail: () => {}, | 145 | fail: () => {}, |
| 107 | complete: () => {} | 146 | complete: () => {} |
| 108 | }); | 147 | }); |
| 109 | }, | 148 | }, |
| 110 | toMyOrderPaying(){ | 149 | toMyOrderPaying(){ |
| 111 | uni.navigateTo({ | 150 | uni.navigateTo({ |
| 112 | url: '../myOrder/myOrder?current=1', | 151 | url: '../myOrder/myOrder?current=1', |
| 113 | success: res => {}, | 152 | success: res => {}, |
| 114 | fail: () => {}, | 153 | fail: () => {}, |
| 115 | complete: () => {} | 154 | complete: () => {} |
| 116 | }); | 155 | }); |
| 117 | }, | 156 | }, |
| 118 | torefundment(){ | 157 | torefundment(){ |
| 119 | uni.navigateTo({ | 158 | uni.navigateTo({ |
| 120 | url:'../refundment/refundment', | 159 | url:'../refundment/refundment', |
| 121 | }) | 160 | }) |
| 122 | }, | 161 | }, |
| 123 | torefunProgress(){ | 162 | torefunProgress(){ |
| 124 | uni.navigateTo({ | 163 | uni.navigateTo({ |
| 125 | url:'../refundProgress/refundProgress' | 164 | url:'../refundProgress/refundProgress' |
| 126 | }) | 165 | }) |
| 127 | } | 166 | } |
| 128 | } | 167 | } |
| 129 | } | 168 | } |
| 130 | </script> | 169 | </script> |
| 131 | 170 | ||
| 132 | <style lang="scss"> | 171 | <style lang="scss"> |
| 133 | .warp{ | 172 | .warp{ |
| 134 | font-size: 24rpx; | 173 | font-size: 24rpx; |
| 135 | background-color: #f2f2f2; | 174 | background-color: #f2f2f2; |
| 136 | height: 100vh; | 175 | height: 100vh; |
| 137 | } | 176 | } |
| 138 | .content { | 177 | .content { |
| 139 | display: flex; | 178 | display: flex; |
| 140 | flex-direction: column; | 179 | flex-direction: column; |
| 141 | align-items: center; | 180 | align-items: center; |
| 142 | justify-content: center; | 181 | justify-content: center; |
| 143 | background-color: #F2F2F2; | 182 | background-color: #F2F2F2; |
| 144 | } | 183 | } |
| 145 | .userInfo{ | 184 | .userInfo{ |
| 146 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); | 185 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); |
| 147 | width: 100%; | 186 | width: 100%; |
| 148 | height: 240rpx; | 187 | height: 240rpx; |
| 149 | color: #FFFFFF; | 188 | color: #FFFFFF; |
| 150 | padding: 60rpx 82rpx 80rpx 44rpx; | 189 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 151 | box-sizing: border-box; | 190 | box-sizing: border-box; |
| 152 | display: flex; | 191 | display: flex; |
| 153 | flex-direction: row; | 192 | flex-direction: row; |
| 154 | justify-content: space-between; | 193 | justify-content: space-between; |
| 155 | align-items: flex-start; | 194 | align-items: flex-start; |
| 156 | .info{ | 195 | .info{ |
| 157 | display: flex; | 196 | display: flex; |
| 158 | flex-direction: row; | 197 | flex-direction: row; |
| 159 | justify-content: space-between; | 198 | justify-content: space-between; |
| 160 | align-items: center; | 199 | align-items: center; |
| 161 | image{ | 200 | image{ |
| 162 | border-radius: 50rpx; | 201 | border-radius: 50rpx; |
| 163 | height: 100rpx ; | 202 | height: 100rpx ; |
| 164 | width: 100rpx; | 203 | width: 100rpx; |
| 165 | margin-right: 40rpx; | 204 | margin-right: 40rpx; |
| 166 | } | 205 | } |
| 167 | .infoText{ | 206 | .infoText{ |
| 168 | display: flex; | 207 | display: flex; |
| 169 | flex-direction: column; | 208 | flex-direction: column; |
| 170 | justify-content: space-between; | 209 | justify-content: space-between; |
| 171 | align-items: flex-scetart; | 210 | align-items: flex-scetart; |
| 172 | .userName{ | 211 | .userName{ |
| 173 | font-size: 18px; | 212 | font-size: 18px; |
| 174 | color: #FFFFFF; | 213 | color: #FFFFFF; |
| 175 | margin-bottom: 8rpx; | 214 | margin-bottom: 8rpx; |
| 176 | } | 215 | } |
| 177 | .nickName{ | 216 | .nickName{ |
| 178 | font-size: 12px; | 217 | font-size: 12px; |
| 179 | color: #FFFFFF; | 218 | color: #FFFFFF; |
| 180 | } | 219 | } |
| 181 | } | 220 | } |
| 182 | } | 221 | } |
| 183 | .service{ | 222 | .service{ |
| 223 | margin-top: 20rpx; | ||
| 184 | image{ | 224 | image{ |
| 185 | height: 36rpx; | 225 | height: 36rpx; |
| 186 | width: 36rpx; | 226 | width: 36rpx; |
| 187 | } | 227 | } |
| 188 | } | 228 | } |
| 189 | } | 229 | } |
| 190 | .myOrder{ | 230 | .myOrder{ |
| 191 | width: 100%; | 231 | width: 100%; |
| 192 | height: 296rpx; | 232 | height: 296rpx; |
| 193 | margin-top: 20rpx; | 233 | margin-top: 20rpx; |
| 194 | margin-bottom: 20rpx; | 234 | margin-bottom: 20rpx; |
| 195 | padding: 0 40rpx; | 235 | padding: 0 40rpx; |
| 196 | box-sizing: border-box; | 236 | box-sizing: border-box; |
| 197 | background: #FFFFFF; | 237 | background: #FFFFFF; |
| 198 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 238 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 199 | border-radius: 6px; | 239 | border-radius: 6px; |
| 200 | border-radius: 6px; | 240 | border-radius: 6px; |
| 201 | display: flex; | 241 | display: flex; |
| 202 | flex-direction: column; | 242 | flex-direction: column; |
| 203 | justify-content: space-around; | 243 | justify-content: space-around; |
| 204 | align-items: center; | 244 | align-items: center; |
| 205 | .orderHeader{ | 245 | .orderHeader{ |
| 206 | width: 100%; | 246 | width: 100%; |
| 207 | height: 100rpx; | 247 | height: 100rpx; |
| 208 | display: flex; | 248 | display: flex; |
| 209 | flex-direction: row; | 249 | flex-direction: row; |
| 210 | justify-content: space-between; | 250 | justify-content: space-between; |
| 211 | align-items: center; | 251 | align-items: center; |
| 212 | border-bottom: 1px solid #E9E9E9;; | 252 | border-bottom: 1px solid #E9E9E9;; |
| 213 | font-weight: bold; | 253 | font-weight: bold; |
| 214 | font-size: 18px; | 254 | font-size: 18px; |
| 215 | color: #333333; | 255 | color: #333333; |
| 216 | .btn{ | 256 | .btn{ |
| 217 | font-size: 12px; | 257 | font-size: 12px; |
| 218 | color: #999999; | 258 | color: #999999; |
| 219 | image{ | 259 | image{ |
| 220 | margin-left: 20rpx; | 260 | margin-left: 20rpx; |
| 221 | height: 16rpx; | 261 | height: 16rpx; |
| 222 | width: 8rpx; | 262 | width: 8rpx; |
| 223 | } | 263 | } |
| 224 | } | 264 | } |
| 225 | } | 265 | } |
| 226 | .orderBody{ | 266 | .orderBody{ |
| 227 | width: 100%; | 267 | width: 100%; |
| 228 | display: flex; | 268 | display: flex; |
| 229 | flex-direction: row; | 269 | flex-direction: row; |
| 230 | justify-content: space-between; | 270 | justify-content: space-between; |
| 231 | align-items: center; | 271 | align-items: center; |
| 232 | .item{ | 272 | .item{ |
| 233 | display: flex; | 273 | display: flex; |
| 234 | flex-direction: column; | 274 | flex-direction: column; |
| 235 | align-items: center; | 275 | align-items: center; |
| 236 | image{ | 276 | image{ |
| 237 | width: 46rpx; | 277 | width: 46rpx; |
| 238 | height: 46rpx; | 278 | height: 46rpx; |
| 239 | } | 279 | } |
| 240 | text{ | 280 | text{ |
| 241 | margin-top: 24rpx; | 281 | margin-top: 24rpx; |
| 242 | font-size: 12px; | 282 | font-size: 12px; |
| 243 | color: #333333; | 283 | color: #333333; |
| 244 | } | 284 | } |
| 245 | } | 285 | } |
| 246 | } | 286 | } |
| 247 | } | 287 | } |
| 248 | .recommend{ | 288 | .recommend{ |
| 249 | background: #FFFFFF; | 289 | background: #FFFFFF; |
| 250 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 290 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 251 | border-radius: 6px; | 291 | border-radius: 6px; |
| 252 | border-radius: 6px; | 292 | border-radius: 6px; |
| 253 | width: 100%; | 293 | width: 100%; |
| 254 | .title{ | 294 | .title{ |
| 255 | display: flex; | 295 | display: flex; |
| 256 | flex-direction: row; | 296 | flex-direction: row; |
| 257 | align-items: center; | 297 | align-items: center; |
| 258 | justify-content: space-between; | 298 | justify-content: space-between; |
| 259 | padding: 20rpx 40rpx; | 299 | padding: 20rpx 40rpx; |
| 260 | .line{ | 300 | .line{ |
| 261 | width: 264rpx; | 301 | width: 264rpx; |
| 262 | height: 1rpx; | 302 | height: 1rpx; |
| 263 | border-bottom: 1px solid #EAEAEA; | 303 | border-bottom: 1px solid #EAEAEA; |
| 264 | } | 304 | } |
| 265 | .text{ | 305 | .text{ |
| 266 | font-family: PingFangSC-Medium; | 306 | font-family: PingFangSC-Medium; |
| 267 | font-size: 14px; | 307 | font-size: 14px; |
| 268 | color: #333333; | 308 | color: #333333; |
| 269 | letter-spacing: -0.26px; | 309 | letter-spacing: -0.26px; |
| 270 | text-align: justify; | 310 | text-align: justify; |
| 271 | line-height: 24px; | 311 | line-height: 24px; |
| 272 | } | 312 | } |
| 273 | } | 313 | } |
| 274 | .goods-list{ | 314 | .goods-list{ |
| 275 | .loading-text{ | 315 | .loading-text{ |
| 276 | width: 100%; | 316 | width: 100%; |
| 277 | display: flex; | 317 | display: flex; |
| 278 | justify-content: center; | 318 | justify-content: center; |
| 279 | align-items: center; | 319 | align-items: center; |
| 280 | height: 30px; | 320 | height: 30px; |
| 281 | color: #979797; | 321 | color: #979797; |
| 282 | font-size: 12px; | 322 | font-size: 12px; |
| 283 | } | 323 | } |
| 284 | .product-list{ | 324 | .product-list{ |
| 285 | width: 92%; | 325 | width: 92%; |
| 286 | padding: 0 4% 3vw 4%; | 326 | padding: 0 4% 3vw 4%; |
| 287 | display: flex; | 327 | display: flex; |
| 288 | justify-content: space-between; | 328 | justify-content: space-between; |
| 289 | flex-wrap: wrap; | 329 | flex-wrap: wrap; |
| 290 | .product{ | 330 | .product{ |
| 291 | width: 48%; | 331 | width: 48%; |
| 292 | margin: 0 0 20rpx 0; | 332 | margin: 0 0 20rpx 0; |
| 293 | background: #FFFFFF; | 333 | background: #FFFFFF; |
| 294 | border: 1px solid #F2F2F2; | 334 | border: 1px solid #F2F2F2; |
| 295 | } | 335 | } |
| 296 | } | 336 | } |
| 297 | } | 337 | } |
| 298 | } | 338 | } |
| 339 | .auth { | ||
| 340 | height: 100vh; | ||
| 341 | display: flex; | ||
| 342 | flex-direction: column; | ||
| 343 | align-items: center; | ||
| 344 | .icon { | ||
| 345 | width: 140rpx; | ||
| 346 | height: 140rpx; | ||
| 347 | border-radius: 50%; | ||
| 348 | margin-top: 100rpx; | ||
| 349 | background-color: grey; | ||
| 350 | } | ||
| 351 | .divider { | ||
| 352 | height: 1rpx; | ||
| 353 | width: 600rpx; | ||
| 354 | margin-top: 80rpx; | ||
| 355 | background-color: #E6E3E3; | ||
| 356 | } | ||
| 357 | .title { | ||
| 358 | width: 600rpx; | ||
| 359 | margin-top: 50rpx; | ||
| 360 | text-align: left; | ||
| 361 | } | ||
| 362 | .text { | ||
| 363 | width: 600rpx; | ||
| 364 | margin-top: 30rpx; | ||
| 365 | text-align: left; | ||
| 366 | color: #E6E3E3; | ||
| 367 | } | ||
| 368 | button { | ||
| 369 | width: 450rpx; | ||
| 370 | height: 80rpx; | ||
| 371 | line-height: 80rpx; | ||
| 372 | margin-top: 80rpx; | ||
| 373 | border-radius: 30rpx; | ||
| 374 | } | ||
| 375 | } |
src/store/modules/user.js
| File was created | 1 | import urlAlias from '../url'; | |
| 2 | import request from '../request'; | ||
| 3 | |||
| 4 | const { | ||
| 5 | login, | ||
| 6 | getUserInfo, | ||
| 7 | } = urlAlias; | ||
| 8 | |||
| 9 | const state = { | ||
| 10 | fromInfo: { | ||
| 11 | loginQueryInfo: {}, | ||
| 12 | fromuid: 0, | ||
| 13 | fromsid: 0, | ||
| 14 | frompid: 0, | ||
| 15 | scene: 1001, | ||
| 16 | }, | ||
| 17 | userInfo: { | ||
| 18 | uid: 1, | ||
| 19 | openid: '', | ||
| 20 | nickName: '', | ||
| 21 | headerphoto: '', | ||
| 22 | } | ||
| 23 | }; | ||
| 24 | |||
| 25 | const mutations = { | ||
| 26 | FROM: (state, data) => { | ||
| 27 | state.formInfo = data; | ||
| 28 | }, | ||
| 29 | UPDATE: (state, data) => { | ||
| 30 | state.userInfo = data; | ||
| 31 | } | ||
| 32 | }; | ||
| 33 | |||
| 34 | const actions = { | ||
| 35 | // 登陆 | ||
| 36 | login({ commit }, param) { | ||
| 37 | const { | ||
| 38 | frompid = undefined, | ||
| 39 | fromsid = undefined, | ||
| 40 | fromuid = undefined, | ||
| 41 | scene = 1001 , | ||
| 42 | } = param || {}; | ||
| 43 | uni.login({ | ||
| 44 | provider: 'weixin', | ||
| 45 | success: function (loginRes) { | ||
| 46 | console.log('login',loginRes); | ||
| 47 | request({ | ||
| 48 | url: login, | ||
| 49 | data: { | ||
| 50 | app_uid: 2020, | ||
| 51 | code: loginRes.code, | ||
| 52 | frompid, | ||
| 53 | fromsid, | ||
| 54 | fromuid, | ||
| 55 | |||
| 56 | }, | ||
| 57 | success: (res) => { | ||
| 58 | const { data: { session_key, openid} } = res; | ||
| 59 | console.log('res', res) | ||
| 60 | // 写入缓存 | ||
| 61 | uni.setStorageSync('session_key', session_key); | ||
| 62 | uni.setStorageSync('openid', openid); | ||
| 63 | request({ | ||
| 64 | url: getUserInfo, | ||
| 65 | data: { | ||
| 66 | app_uid: 2020, | ||
| 67 | frompid, | ||
| 68 | fromsid, | ||
| 69 | fromuid, | ||
| 70 | openid, | ||
| 71 | scene, | ||
| 72 | }, | ||
| 73 | success: (res) => { | ||
| 74 | console.log('userInfo=====', res); | ||
| 75 | const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res; | ||
| 76 | const userInfo = { | ||
| 77 | uid, | ||
| 78 | openid, | ||
| 79 | nickName, | ||
| 80 | headerphoto, | ||
| 81 | } | ||
| 82 | commit("UPDATE", userInfo) | ||
| 83 | } | ||
| 84 | }) | ||
| 85 | } | ||
| 86 | }) | ||
| 87 | } | ||
| 88 | }); | ||
| 89 | }, | ||
| 90 | setFrom({ commit }, param) { | ||
| 91 | commit("FROM", param); | ||
| 92 | }, | ||
| 93 | getUserInfo( { commit }, param) { | ||
| 94 | const { | ||
| 95 | frompid = undefined, | ||
| 96 | fromsid = undefined, | ||
| 97 | fromuid = undefined, | ||
| 98 | scene = 1001 , | ||
| 99 | } = param || {}; | ||
| 100 | // 写入缓存 | ||
| 101 | const openid = uni.getStorageSync('openid', openid); | ||
| 102 | request({ | ||
| 103 | url: getUserInfo, | ||
| 104 | data: { | ||
| 105 | app_uid: 2020, | ||
| 106 | frompid, | ||
| 107 | fromsid, | ||
| 108 | fromuid, | ||
| 109 | openid, | ||
| 110 | scene, | ||
| 111 | }, | ||
| 112 | success: (res) => { | ||
| 113 | console.log('userInfo=====', res); | ||
| 114 | const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res; | ||
| 115 | const userInfo = { | ||
| 116 | uid, | ||
| 117 | openid, | ||
| 118 | nickName, | ||
| 119 | headerphoto, | ||
| 120 | } | ||
| 121 | commit("UPDATE", userInfo) | ||
| 122 | } | ||
| 123 | }) | ||
| 124 | }, | ||
| 125 | } | ||
| 126 | |||
| 127 | export default { | ||
| 128 | namespaced: true, | ||
| 129 | state, | ||
| 130 | mutations, | ||
| 131 | actions, | ||
| 132 | } |
src/store/url.js
| 1 | const urlAlias = { | 1 | const urlAlias = { |
| 2 | // 获取首页商品列表 | 2 | // 获取首页商品列表 |
| 3 | shopList: '/app/prod/list', | 3 | shopList: '/app/prod/list', |
| 4 | 4 | ||
| 5 | // 获取首页商品列表 | 5 | // 获取首页商品列表 |
| 6 | category: '/app/prod/category', | 6 | category: '/app/prod/category', |
| 7 | // 登陆 | ||
| 8 | login: '/app/glass/getOpenId', // 登陆 | ||
| 9 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 | ||
| 7 | } | 10 | } |
| 8 | 11 | ||
| 9 | export default urlAlias; | 12 | export default urlAlias; |
| 10 | 13 |