刘文博 / gulu-vue

Download as
Browse Code »

Commit 51a5fe4d8b3af51bc38b879acfbc473b8b4699fb

Authored by 尹聃
2 parents 8fdae7108a f0cf57997c
Exists in master

镜架和太阳镜功能选构页

Showing 40 changed files   Show diff stats
1 <script> 1 <script>
2 import Vue from 'vue'; 2 import Vue from 'vue';
3 import store from '@/store'; 3 import store from '@/store';
4 4
5 export default Vue.extend({ 5 export default Vue.extend({
6 mpType: 'app', 6 mpType: 'app',
7 onLaunch(options) { 7 onLaunch(options) {
8 const option = options || {}; 8 const option = options || {};
9 // 获取用户来源 9 // 获取用户来源
10 console.log('软件启动，输出转来的参数:', option); 10 // console.log('软件启动，输出转来的参数:', option);
11 console.log('场景值------------------:', option.scene); 11 // console.log('场景值------------------:', option.scene);
12 let loginQueryInfo = option ? option.query : {}; 12 let loginQueryInfo = option ? option.query : {};
13 loginQueryInfo = loginQueryInfo || {}; 13 loginQueryInfo = loginQueryInfo || {};
14 console.log('loginQueryInfo onShow===>', loginQueryInfo); 14 // console.log('loginQueryInfo onShow===>', loginQueryInfo);
15 const scene = decodeURIComponent(loginQueryInfo.scene); 15 const scene = decodeURIComponent(loginQueryInfo.scene);
16 console.log('decodeURIComponent scense====>', scene); 16 // console.log('decodeURIComponent scense====>', scene);
17 let fromInfo = {}; 17 let fromInfo = {};
18 18
19 if(scene.length > 0 ) { 19 if(scene.length > 0 ) {
20 const getQueryString = { 20 const getQueryString = {
21 uid: undefined, 21 uid: undefined,
22 sid: undefined, 22 sid: undefined,
23 pid: undefined 23 pid: undefined
24 }; 24 };
25 const strB = scene.split('&'); 25 const strB = scene.split('&');
26 26
27 for(let i = 0; i < strB.length; i += 1) { 27 for(let i = 0; i < strB.length; i += 1) {
28 getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]); 28 getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]);
29 } 29 }
30 fromInfo = { 30 fromInfo = {
31 loginQueryInfo, 31 loginQueryInfo,
32 fromuid: getQueryString.uid, 32 fromuid: getQueryString.uid,
33 fromsid: getQueryString.sid, 33 fromsid: getQueryString.sid,
34 frompid: getQueryString.pid, 34 frompid: getQueryString.pid,
35 scene: option.scene, 35 scene: option.scene,
36 } 36 }
37 store.dispatch('user/setFrom', fromInfo); 37 store.dispatch('user/setFrom', fromInfo);
38 console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString); 38 // console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString);
39 } else { 39 } else {
40 console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo); 40 // console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo);
41 if (loginQueryInfo.hasOwnProperty('sid') == false) { 41 if (loginQueryInfo.hasOwnProperty('sid') == false) {
42 loginQueryInfo.sid = 0; 42 loginQueryInfo.sid = 0;
43 } 43 }
44 if (loginQueryInfo.hasOwnProperty('pid') == false) { 44 if (loginQueryInfo.hasOwnProperty('pid') == false) {
45 loginQueryInfo.pid = 0; 45 loginQueryInfo.pid = 0;
46 } 46 }
47 if (loginQueryInfo.hasOwnProperty('uid') == false) { 47 if (loginQueryInfo.hasOwnProperty('uid') == false) {
48 loginQueryInfo.uid = 0; 48 loginQueryInfo.uid = 0;
49 } 49 }
50 fromInfo = { 50 fromInfo = {
51 loginQueryInfo, 51 loginQueryInfo,
52 fromuid: loginQueryInfo.uid, 52 fromuid: loginQueryInfo.uid,
53 fromsid: loginQueryInfo.sid, 53 fromsid: loginQueryInfo.sid,
54 frompid: loginQueryInfo.pid, 54 frompid: loginQueryInfo.pid,
55 scene: option.scene, 55 scene: option.scene,
56 } 56 }
57 store.dispatch('user/setFrom', fromInfo) 57 store.dispatch('user/setFrom', fromInfo)
58 } 58 }
59 59
60 // 登陆 60 // 登陆
61 const openId = uni.getStorageSync('openid') || ""; 61 const openId = uni.getStorageSync('openid') || "";
62 if(openId.length <= 10) { 62 if(openId.length <= 10) {
63 uni.clearStorageSync() 63 uni.clearStorageSync()
64 store.dispatch("user/login", fromInfo); 64 store.dispatch("user/login", fromInfo);
65 } else { 65 } else {
66 store.dispatch("user/getUserInfo", fromInfo); 66 store.dispatch("user/getUserInfo", fromInfo);
67 } 67 }
68 }, 68 },
69 onShow() { 69 onShow() {
70 70 // console.log('App Show')
71 console.log('App Show')
72 }, 71 },
73 onHide() { 72 onHide() {
74 console.log('App Hide') 73 // console.log('App Hide')
75 }, 74 },
76 methods: { 75 methods: {
77 } 76 }
78 }); 77 });
79 </script> 78 </script>
80 79
81 <style> 80 <style>
82 /*每个页面公共css */ 81 /*每个页面公共css */
83 </style> 82 </style>
84 83
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @51a5fe4
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.id,goods.goodType)"> 2 <view class="card" @tap="toGoods(goods.id?goods.id:goods.pid,goods.goodType?goods.goodType:goods.p_root_index)">
3 <image mode="widthFix" :src="goods.imgurl" ></image> 3 <image mode="widthFix" :src="goods.imgurl?goods.imgurl:goods.pic" ></image>
4 <view class="name">{{goods.name}}</view> 4 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
5 <view class="info"> 5 <view class="info">
6 <view class="priceBox"> 6 <view class="priceBox">
7 <view class="price">{{goods.price}}</view> 7 <view class="price">{{goods.price?goods.price:goods.real_price}}</view>
8 <view class="originCost"> 8 <view class="originCost">
9 {{goods.rsSon.Max_Price}} 9 {{goods.rsSon.Max_Price?goods.rsSon.Max_Price:goods.old_price}}
10 </view> 10 </view>
11 </view> 11 </view>
12 <view class="trade_num">{{goods.trade_num}}人购买</view> 12 <view class="trade_num">{{goods.trade_num}}人购买</view>
13 </view> 13 </view>
14 </view> 14 </view>
15 </template> 15 </template>
16 16
17 <script> 17 <script>
18 export default { 18 export default {
19 props: { 19 props: {
20 /** 20 /**
21 * 商品数据 21 * 商品数据
22 */ 22 */
23 goods: { 23 goods: {
24 id: Number, 24 id: Number,
25 imgurl: String, 25 imgurl: String,
26 name: String, 26 name: String,
27 rsSon:Object, 27 rsSon:Object,
28 originCost:String, 28 originCost:String,
29 price: String, 29 price: String,
30 trade_num:String, 30 trade_num:String,
31 goodType:String, 31 goodType:String,
32 } 32 }
33 33
34 }, 34 },
35 created() { 35 created() {
36 // console.log(this.goods) 36 // console.log(this.goods)
37 }, 37 },
38 data() { 38 data() {
39 return { 39 return {
40 40
41 }; 41 };
42 }, 42 },
43 methods:{ 43 methods:{
44 toGoods(id,type){ 44 toGoods(id,type){
45 uni.navigateTo({ 45 uni.navigateTo({
46 url: `../frameDetail/frameDetail?oderId=`+id, 46 url: `../frameDetail/frameDetail?oderId=`+id,
47 success: res => {}, 47 success: res => {},
48 fail: () => {}, 48 fail: () => {},
49 complete: () => {} 49 complete: () => {}
50 }); 50 });
51 console.log('toGoods =====> id:'+id +"======>type:"+type) 51 console.log('toGoods =====> id:'+id +"======>type:"+type)
52 switch(type){ 52 switch(type){
53 case 1: 53 case 1:
54 uni.navigateTo({ 54 uni.navigateTo({
55 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 55 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
56 success: res => {}, 56 success: res => {},
57 fail: () => {}, 57 fail: () => {},
58 complete: () => {} 58 complete: () => {}
59 }); 59 });
60 break; 60 break;
61 case 2: 61 case 2:
62 uni.navigateTo({ 62 uni.navigateTo({
63 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 63 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
64 success: res => {}, 64 success: res => {},
65 fail: () => {}, 65 fail: () => {},
66 complete: () => {} 66 complete: () => {}
67 }); 67 });
68 break; 68 break;
69 case 3: 69 case 3:
70 uni.navigateTo({ 70 uni.navigateTo({
71 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 71 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
72 success: res => {}, 72 success: res => {},
73 fail: () => {}, 73 fail: () => {},
74 complete: () => {} 74 complete: () => {}
75 }); 75 });
76 break; 76 break;
77 case 4: 77 case 4:
78 uni.navigateTo({ 78 uni.navigateTo({
79 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 79 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
80 success: res => {}, 80 success: res => {},
81 fail: () => {}, 81 fail: () => {},
82 complete: () => {} 82 complete: () => {}
83 }); 83 });
84 break; 84 break;
85 default : 85 default :
86 break 86 break
87 } 87 }
88 } 88 }
89 } 89 }
90 } 90 }
91 </script> 91 </script>
92 92
93 <style lang="scss"> 93 <style lang="scss">
94 image{ 94 image{
95 width: 100%; 95 width: 100%;
96 height: 120rpx; 96 height: 120rpx;
97 } 97 }
98 .name{ 98 .name{
99 width: 92%; 99 width: 92%;
100 height: 54rpx; 100 height: 54rpx;
101 padding: 5px 4%; 101 padding: 5px 4%;
102 display: -webkit-box; 102 display: -webkit-box;
103 -webkit-box-orient: vertical; 103 -webkit-box-orient: vertical;
104 -webkit-line-clamp: 2; 104 -webkit-line-clamp: 2;
105 text-align: justify; 105 text-align: justify;
106 overflow: hidden; 106 overflow: hidden;
107 font-size: 24rpx; 107 font-size: 24rpx;
108 color: #333333; 108 color: #333333;
109 } 109 }
110 .info{ 110 .info{
111 display: flex; 111 display: flex;
112 justify-content: space-between; 112 justify-content: space-between;
113 align-items: center; 113 align-items: center;
114 width: 92%; 114 width: 92%;
115 padding: 5px 4% 5px 4%; 115 padding: 5px 4% 5px 4%;
116 .priceBox{ 116 .priceBox{
117 display: flex; 117 display: flex;
118 justify-content: space-between; 118 justify-content: space-between;
119 align-items: center; 119 align-items: center;
120 .price{ 120 .price{
121 color: #EB5D3B; 121 color: #EB5D3B;
122 font-size: 28rpx; 122 font-size: 28rpx;
123 font-weight: 600; 123 font-weight: 600;
124 margin-right: 10rpx; 124 margin-right: 10rpx;
125 } 125 }
126 .originCost{ 126 .originCost{
127 text-decoration:line-through; 127 text-decoration:line-through;
128 color: #999999; 128 color: #999999;
129 font-size: 20rpx; 129 font-size: 20rpx;
130 } 130 }
131 131
132 } 132 }
133 .trade_num{ 133 .trade_num{
134 color: #999999; 134 color: #999999;
135 font-size: 20rpx; 135 font-size: 20rpx;
136 } 136 }
137 } 137 }
138 </style> 138 </style>
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @51a5fe4
1 <template> 1 <template>
2 <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard"> 2 <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard">
3 <view class="nav"> 3 <view class="nav">
4 <block v-for="(item,index) in menu" :key="index"> 4 <block v-for="(item,index) in menu" :key="index">
5 <view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)"> 5 <view
6 class="first-menu"
7 :class="{'on':showPage==index || on[index] === 1}"
8 @tap="togglePage(index)"
9 v-if="!item.isNoPull"
10 >
11 <text class="name">{{item.name}}</text>
12 <text
13 class="iconfont triangle"
14 :style="'transform:rotate('+triangleDeg[index]+'deg);'"
15 ></text>
16 </view>
17 <view
18 class="first-menu"
19 :class="{'on':showPage==index || on[index] === 1}"
20 @tap="showAll()"
21 v-else
22 >
6 <text class="name">{{item.name}}</text> 23 <text class="name">{{item.name}}</text>
7 <text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
8 </view> 24 </view>
9 </block> 25 </block>
10 </view> 26 </view>
11 <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view> 27 <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
12 <block v-for="(page,page_index) in subData" :key="page_index"> 28 <block v-for="(page,page_index) in subData" :key="page_index">
13 <view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"> 29 <view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
14 <block v-if="page.type=='hierarchy'&& page.submenu.length>0"> 30 <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
15 <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']" 31 <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
16 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto"> 32 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
17 <block v-for="(sub,index) in page.submenu" :key="index"> 33 <block v-for="(sub,index) in page.submenu" :key="index">
18 <view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)"> 34 <view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
19 <view class="menu-name"> 35 <view class="menu-name">
20 <text>{{sub.name}}</text> 36 <text>{{sub.name}}</text>
21 <text class="iconfont selected"></text> 37 <text class="iconfont selected"></text>
22 </view> 38 </view>
23 </view> 39 </view>
24 </block> 40 </block>
25 </scroll-view> 41 </scroll-view>
26 <block v-for="(sub,index) in page.submenu" :key="index"> 42 <block v-for="(sub,index) in page.submenu" :key="index">
27 <scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0" 43 <scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
28 :scroll-into-view="'second_id'+secondScrollInto"> 44 :scroll-into-view="'second_id'+secondScrollInto">
29 <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index"> 45 <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
30 <view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}"> 46 <view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
31 <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"> 47 <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
32 <text>{{sub_second.name}}</text> 48 <text>{{sub_second.name}}</text>
33 <text class="iconfont selected"></text> 49 <text class="iconfont selected"></text>
34 </view> 50 </view>
35 <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"> 51 <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
36 <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index"> 52 <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
37 <text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}" 53 <text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
38 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text> 54 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
39 <text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text 55 <text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text
40 class="iconfont triangle"></text></text> 56 class="iconfont triangle"></text></text>
41 </block> 57 </block>
42 </view> 58 </view>
43 </view> 59 </view>
44 </block> 60 </block>
45 </scroll-view> 61 </scroll-view>
46 </block> 62 </block>
47 </block> 63 </block>
48 <block v-if="page.type=='filter'||page.type=='checkbox'"> 64 <block v-if="page.type=='filter'||page.type=='checkbox'">
49 <view class="filter"> 65 <view class="filter">
50 <scroll-view class="menu-box" :scroll-y="true"> 66 <scroll-view class="menu-box" :scroll-y="true">
51 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> 67 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
52 <view class="title">{{box.name}}</view> 68 <view class="title">{{box.name}}</view>
53 <view class="labels"> 69 <view class="labels">
54 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)" 70 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
55 :class="{'on':label.selected}">{{label.name}}</view> 71 :class="{'on':label.selected}">{{label.name}}</view>
56 </view> 72 </view>
57 </view> 73 </view>
58 </scroll-view> 74 </scroll-view>
59 <view class="btn-box"> 75 <view class="btn-box">
60 <view class="reset" @tap="resetFilterData(page_index)">重置</view> 76 <view class="reset" @tap="resetFilterData(page_index)">重置</view>
61 <view class="submit" @tap="setFilterData(page_index)">确定</view> 77 <view class="submit" @tap="setFilterData(page_index)">确定</view>
62 </view> 78 </view>
63 </view> 79 </view>
64 </block> 80 </block>
65 <block v-if="page.type=='radio'"> 81 <block v-if="page.type=='radio'">
66 <view class="filter"> 82 <view class="filter">
67 <scroll-view class="menu-box" :scroll-y="true"> 83 <scroll-view class="menu-box" :scroll-y="true">
68 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> 84 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
69 <view class="title">{{box.name}}</view> 85 <view class="title">{{box.name}}</view>
70 <view class="labels"> 86 <view class="labels">
71 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)" 87 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)"
72 :class="{'on':label.selected}">{{label.name}}</view> 88 :class="{'on':label.selected}">{{label.name}}</view>
73 </view> 89 </view>
74 </view> 90 </view>
75 </scroll-view> 91 </scroll-view>
76 <view class="btn-box"> 92 <view class="btn-box">
77 <view class="reset" @tap="resetFilterData(page_index)">重置</view> 93 <view class="reset" @tap="resetFilterData(page_index)">重置</view>
78 <view class="submit" @tap="setFilterData(page_index)">确定</view> 94 <view class="submit" @tap="setFilterData(page_index)">确定</view>
79 </view> 95 </view>
80 </view> 96 </view>
81 </block> 97 </block>
82 </view> 98 </view>
83 </block> 99 </block>
84 </view> 100 </view>
85 </template> 101 </template>
86 <script> 102 <script>
87 export default { 103 export default {
88 data() { 104 data() {
89 return { 105 return {
90 subData: [], //菜单数据 106 subData: [], //菜单数据
91 menu: [], //顶部横条数据 107 menu: [], //顶部横条数据
92 showPage: -1, //菜单页面显示/隐藏动画控制 108 showPage: -1, //菜单页面显示/隐藏动画控制
93 pageState: [], //页面的状态 109 pageState: [], //页面的状态
94 activeMenuArr: [], //UI状态 110 activeMenuArr: [], //UI状态
95 shadowActiveMenuArr: [], //记录选中 111 shadowActiveMenuArr: [], //记录选中
96 defaultActive:[], 112 defaultActive:[],
97 triangleDeg: [], //小三角形的翻转动画控制 113 triangleDeg: [], //小三角形的翻转动画控制
98 isShowMask: false, //遮罩层显示/隐藏动画控制 114 isShowMask: false, //遮罩层显示/隐藏动画控制
99 maskVisibility: false, //遮罩层显示/隐藏状态 115 maskVisibility: false, //遮罩层显示/隐藏状态
100 //滚动区域定位 116 //滚动区域定位
101 firstScrollInto: 0, 117 firstScrollInto: 0,
102 secondScrollInto: 0, 118 secondScrollInto: 0,
103 componentTop:0 ,//组件top 119 componentTop:0 ,//组件top
104 isReadNewSelect:false 120 isReadNewSelect:false,
121 on: [1,0,0,0,0],
105 } 122 }
106 }, 123 },
107 props: { 124 props: {
108 filterData: { 125 filterData: {
109 value: Array, 126 value: Array,
110 default: [] 127 default: []
111 }, 128 },
112 defaultSelected:{ 129 defaultSelected:{
113 value: Array, 130 value: Array,
114 default: [] 131 default: []
115 }, 132 },
116 updateMenuName:{ 133 updateMenuName:{
117 value: Boolean, 134 value: Boolean,
118 default: true 135 default: true
119 }, 136 },
120 dataFormat:{ 137 dataFormat:{
121 value: String, 138 value: String,
122 default: 'Array' 139 default: 'Array'
123 } 140 }
124 }, 141 },
125 watch: { 142 watch: {
126 filterData: { 143 filterData: {
127 handler() { 144 handler() {
128 this.initMenu(); //filterData重新赋值初始化菜单 145 this.initMenu(); //filterData重新赋值初始化菜单
129 }, 146 },
130 immediate: true 147 immediate: true
131 }, 148 },
132 defaultSelected(newVal) { 149 defaultSelected(newVal) {
133 if(newVal.length==0){ 150 if(newVal.length==0){
134 return; 151 return;
135 } 152 }
136 this.defaultActive = JSON.parse(JSON.stringify(newVal)); 153 this.defaultActive = JSON.parse(JSON.stringify(newVal));
137 this.activeMenuArr = JSON.parse(JSON.stringify(newVal)); 154 this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
138 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)); 155 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
139 if(this.updateMenuName){ 156 // if(this.updateMenuName){
140 this.setMenuName(); 157 // this.setMenuName();
141 } 158 // }
142 } 159 }
143 }, 160 },
144 methods: { 161 methods: {
145 initMenu() { 162 initMenu() {
146 let tmpMenuActiveArr=[]; 163 let tmpMenuActiveArr=[];
147 let tmpMenu=[]; 164 let tmpMenu=[];
148 for (let i = 0; i < this.filterData.length; i++) { 165 for (let i = 0; i < this.filterData.length; i++) {
149 let tmpitem = this.filterData[i]; 166 let tmpitem = this.filterData[i];
150 tmpMenu.push({ 167 tmpMenu.push({
151 //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name 168 //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
152 name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name), 169 name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
153 type: tmpitem.type 170 type: tmpitem.type,
171 isNoPull: tmpitem.isNoPull,
154 }); 172 });
155 //初始化选中项数组-ui状态 173 // 初始化选中项数组-ui状态
156 tmpMenuActiveArr.push(this.processActive(tmpitem)); 174 tmpMenuActiveArr.push(this.processActive(tmpitem));
157 //初始化角度数组 175 // 初始化角度数组
158 this.triangleDeg.push(0); 176 this.triangleDeg.push(0);
159 //初始化控制显示状态数组 177 // 初始化控制显示状态数组
160 this.pageState.push(false); 178 this.pageState.push(false);
161 //递归处理子菜单数据 179 // 递归处理子菜单数据
162 tmpitem = this.processSubMenu(tmpitem); 180 tmpitem = this.processSubMenu(tmpitem);
163 this.filterData[i] = tmpitem; 181 this.filterData[i] = tmpitem;
164 } 182 }
165 this.menu = tmpMenu; 183 this.menu = tmpMenu;
166 //初始化选中项数组 184 // 初始化选中项数组
167 tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr; 185 tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
168 this.defaultActive = []; 186 this.defaultActive = [];
169 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); 187 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
170 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); 188 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
171 //加载菜单数据 189 // 加载菜单数据
172 this.subData = this.filterData; 190 this.subData = this.filterData;
173 //设定顶部菜单名字 191 // 设定顶部菜单名字
174 if(this.updateMenuName){ 192 // if(this.updateMenuName){
175 this.setMenuName(); 193 // this.setMenuName();
176 } 194 // }
177 },
178 setMenuName(){
179 for(var i=0;i<this.activeMenuArr.length;i++){
180 let row = this.activeMenuArr[i];
181 if (typeof(row[0]) != 'object'){
182 var tmpsub = false;
183 if(row.length>0 && row[0]!=null){
184 tmpsub = this.subData[i].submenu[row[0]];
185 if(row.length>1 && row[1]!=null){
186 tmpsub = tmpsub.submenu[row[1]];
187 if(row.length>2 && row[2]!=null){
188 tmpsub = tmpsub.submenu[row[2]];
189 }
190 }
191 }else{
192 tmpsub = false;
193 }
194 if(tmpsub){
195 this.menu[i].name = tmpsub.name;
196 }
197 }
198 }
199 }, 195 },
196 // setMenuName(){
197 // for(var i=0;i<this.activeMenuArr.length;i++){
198 // let row = this.activeMenuArr[i];
199 // if (typeof(row[0]) != 'object'){
200 // var tmpsub = false;
201 // if(row.length>0 && row[0]!=null){
202 // tmpsub = this.subData[i].submenu[row[0]];
203 // if(row.length>1 && row[1]!=null){
204 // tmpsub = tmpsub.submenu[row[1]];
205 // if(row.length>2 && row[2]!=null){
206 // tmpsub = tmpsub.submenu[row[2]];
207 // }
208 // }
209 // }else{
210 // tmpsub = false;
211 // }
212 // if(tmpsub){
213 // this.menu[i].name = tmpsub.name;
214 // }
215 // }
216 // }
217 // },
200 //展开更多 218 //展开更多
201 showMoreSub(index) { 219 showMoreSub(index) {
202 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true; 220 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
203 this.$forceUpdate(); 221 this.$forceUpdate();
204 }, 222 },
205 //选中 223 //选中
206 selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) { 224 selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
207 //读取记录 225 //读取记录
208 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] == 226 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
209 level1_index) { 227 level1_index) {
210 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))); 228 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
211 } else { 229 } else {
212 this.activeMenuArr[page_index].splice(0, 1, level1_index); 230 this.activeMenuArr[page_index].splice(0, 1, level1_index);
213 (level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1); 231 (level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1);
214 (level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1); 232 (level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1);
215 } 233 }
216 //写入结果 234 //写入结果
217 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0) 235 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
218 ) { 236 ) {
219 let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]; 237 let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
220 if(this.updateMenuName){ 238 // if(this.updateMenuName){
221 this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name; 239 // this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
222 } 240 // }
223 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); 241 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
224 this.togglePage(this.showPage); 242 this.togglePage(this.showPage);
225 } 243 }
226 }, 244 },
227 //写入结果，筛选 245 //写入结果，筛选
228 setFilterData(page_index) { 246 setFilterData(page_index) {
229 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); 247 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
230 this.togglePage(this.showPage); 248 this.togglePage(this.showPage);
231 }, 249 },
232 //重置结果和ui，筛选 250 //重置结果和ui，筛选
233 resetFilterData(page_index) { 251 resetFilterData(page_index) {
234 let tmpArr = []; 252 let tmpArr = [];
235 let level = this.shadowActiveMenuArr[page_index].length; 253 let level = this.shadowActiveMenuArr[page_index].length;
236 while (level > 0) { 254 while (level > 0) {
237 tmpArr.push([]); 255 tmpArr.push([]);
238 let box = this.subData[page_index].submenu[level - 1].submenu; 256 let box = this.subData[page_index].submenu[level - 1].submenu;
239 for (let i = 0; i < box.length; i++) { 257 for (let i = 0; i < box.length; i++) {
240 this.subData[page_index].submenu[level - 1].submenu[i].selected = false; 258 this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
241 } 259 }
242 level--; 260 level--;
243 } 261 }
244 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr)); 262 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
245 this.$forceUpdate(); 263 this.$forceUpdate();
246 }, 264 },
247 //选中筛选类label-UI状态 265 //选中筛选类label-UI状态
248 selectFilterLabel(page_index, box_index, label_index) { 266 selectFilterLabel(page_index, box_index, label_index) {
249 let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index); 267 let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
250 if (find_index > -1) { 268 if (find_index > -1) {
251 this.activeMenuArr[page_index][box_index].splice(find_index, 1); 269 this.activeMenuArr[page_index][box_index].splice(find_index, 1);
252 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false; 270 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
253 } else { 271 } else {
254 this.activeMenuArr[page_index][box_index].push(label_index); 272 this.activeMenuArr[page_index][box_index].push(label_index);
255 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true; 273 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
256 } 274 }
257 this.$forceUpdate(); 275 this.$forceUpdate();
258 }, 276 },
259 //选中单选类label-UI状态 277 //选中单选类label-UI状态
260 selectRadioLabel(page_index, box_index, label_index) { 278 selectRadioLabel(page_index, box_index, label_index) {
261 279
262 let activeIndex = this.activeMenuArr[page_index][box_index][0]; 280 let activeIndex = this.activeMenuArr[page_index][box_index][0];
263 if(activeIndex == label_index){ 281 if(activeIndex == label_index){
264 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false; 282 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
265 this.activeMenuArr[page_index][box_index][0] = null; 283 this.activeMenuArr[page_index][box_index][0] = null;
266 }else{ 284 }else{
267 if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){ 285 if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){
268 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false; 286 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
269 } 287 }
270 288
271 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true; 289 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
272 this.activeMenuArr[page_index][box_index][0] = label_index; 290 this.activeMenuArr[page_index][box_index][0] = label_index;
273 } 291 }
274 this.$forceUpdate(); 292 this.$forceUpdate();
275 }, 293 },
276 //菜单开关 294 //菜单开关
277 togglePage(index) { 295 togglePage(index) {
278 if (index == this.showPage) { 296 if (index == this.showPage) {
279 this.hidePageLayer(true); 297 this.hidePageLayer(true);
280 this.hideMask(); 298 this.hideMask();
281 this.showPage = -1; 299 this.showPage = -1;
282 } else { 300 } else {
283 if (this.showPage > -1) { 301 if (this.showPage > -1) {
284 this.hidePageLayer(false); 302 this.hidePageLayer(false);
285 } 303 }
286 this.showPageLayer(index); 304 this.showPageLayer(index);
287 this.showMask(); 305 this.showMask();
288 } 306 }
307 if(this.on[0] === 1) {
308 this.on[0] = 0;
309 }
310 this.on[index] = 1;
311 },
312 showAll() {
313 this.on = [1,0,0,0,0]
314 // 输出
315 this.$emit('search', {
316 index: {},
317 value: {},
318 on: this.on,
319 });
289 }, 320 },
290 //hide遮罩层 321 //hide遮罩层
291 hideMask() { 322 hideMask() {
292 this.isShowMask = false; 323 this.isShowMask = false;
293 setTimeout(() => { 324 setTimeout(() => {
294 this.maskVisibility = false; 325 this.maskVisibility = false;
295 }, 200); 326 }, 200);
296 }, 327 },
297 //show遮罩层 328 //show遮罩层
298 showMask() { 329 showMask() {
299 this.maskVisibility = true; 330 this.maskVisibility = true;
300 this.$nextTick(() => { 331 this.$nextTick(() => {
301 setTimeout(() => { 332 setTimeout(() => {
302 this.isShowMask = true; 333 this.isShowMask = true;
303 }, 0); 334 }, 0);
304 }) 335 })
305 }, 336 },
306 //hide菜单页 337 //hide菜单页
307 hidePageLayer(isAnimation) { 338 hidePageLayer(isAnimation) {
308 this.triangleDeg[this.showPage] = 0; 339 this.triangleDeg[this.showPage] = 0;
309 let tmpIndex = this.showPage; 340 let tmpIndex = this.showPage;
310 if (isAnimation) { 341 if (isAnimation) {
311 setTimeout(() => { 342 setTimeout(() => {
312 this.pageState.splice(tmpIndex, 1, false); 343 this.pageState.splice(tmpIndex, 1, false);
313 }, 200); 344 }, 200);
314 this.confirm(); 345 this.confirm();
315 } else { 346 } else {
316 this.pageState.splice(tmpIndex, 1, false) 347 this.pageState.splice(tmpIndex, 1, false)
317 } 348 }
318 this.firstScrollInto = null; 349 this.firstScrollInto = null;
319 this.secondScrollInto = null; 350 this.secondScrollInto = null;
320 }, 351 },
321 confirm() { 352 confirm() {
322 let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)); 353 let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
323 let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)); 354 let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
324 355
325 //对结果做一下处理 356 //对结果做一下处理
326 index.forEach((item, i) => { 357 index.forEach((item, i) => {
327 if (typeof(item[0]) == 'object') { 358 if (typeof(item[0]) == 'object') {
328 //针对筛选结果过一个排序 359 //针对筛选结果过一个排序
329 item.forEach((s, j) => { 360 item.forEach((s, j) => {
330 if(s!=null){ 361 if(s!=null){
331 s.sort((val1, val2) => { 362 s.sort((val1, val2) => {
332 return val1 - val2; 363 return val1 - val2;
333 }); 364 });
334 item[j] = s; 365 item[j] = s;
335 s.forEach((v, k) => { 366 s.forEach((v, k) => {
336 value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value; 367 value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value;
337 if(this.subData[i].type == 'radio' && value[i][j][k] == null){ 368 if(this.subData[i].type == 'radio' && value[i][j][k] == null){
338 value[i][j] = []; 369 value[i][j] = [];
339 index[i][j] = []; 370 index[i][j] = [];
340 } 371 }
341 }); 372 });
342 } 373 }
343 }); 374 });
344 }else{ 375 }else{
345 let submenu = this.subData[i].submenu[item[0]]; 376 let submenu = this.subData[i].submenu[item[0]];
346 // console.log(this.subData[i]) 377 value[i][0] = submenu && submenu.value;
347 value[i][0] = submenu.value;
348 if(value[i].length>=2 && item[1]!=null){ 378 if(value[i].length>=2 && item[1]!=null){
349 if(submenu.submenu.length>0){ 379 if(submenu.submenu.length>0){
350 submenu = submenu.submenu[item[1]]; 380 submenu = submenu.submenu[item[1]];
351 value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null; 381 value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
352 }else{ 382 }else{
353 value[i][1] = null 383 value[i][1] = null
354 } 384 }
355 if(value[i].length>=3 && item[2]!=null){ 385 if(value[i].length>=3 && item[2]!=null){
356 if(submenu.submenu.length>0){ 386 if(submenu.submenu.length>0){
357 submenu = submenu.submenu[item[2]]; 387 submenu = submenu.submenu[item[2]];
358 value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null; 388 value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
359 }else{ 389 }else{
360 value[i][2] = null; 390 value[i][2] = null;
361 } 391 }
362 } 392 }
363 } 393 }
364 } 394 }
365 index[i] = item; 395 index[i] = item;
366 396
367 }); 397 });
368 // 输出 398 // 输出
369 this.$emit('confirm', { 399 this.$emit('search', {
370 index: index, 400 index: index,
371 value: value 401 value: value,
402 on: this.on,
372 }); 403 });
373 }, 404 },
374 //show菜单页 405 //show菜单页
375 showPageLayer(index) { 406 showPageLayer(index) {
376 this.processPage(index); 407 this.processPage(index);
377 this.pageState.splice(index, 1, true); 408 this.pageState.splice(index, 1, true);
378 this.$nextTick(() => { 409 this.$nextTick(() => {
379 setTimeout(() => { 410 setTimeout(() => {
380 this.showPage = index; 411 this.showPage = index;
381 }, 0); 412 }, 0);
382 }) 413 })
383 this.triangleDeg[index] = 180; 414 this.triangleDeg[index] = 180;
384 }, 415 },
385 reloadActiveMenuArr(){ 416 reloadActiveMenuArr(){
386 for (let i = 0; i < this.filterData.length; i++) { 417 for (let i = 0; i < this.filterData.length; i++) {
387 let tmpitem = this.filterData[i]; 418 let tmpitem = this.filterData[i];
388 let tmpArr = this.processActive(tmpitem); 419 let tmpArr = this.processActive(tmpitem);
389 tmpitem = this.processSubMenu(tmpitem); 420 tmpitem = this.processSubMenu(tmpitem);
390 if(this.activeMenuArr[i].length!=tmpArr.length){ 421 if(this.activeMenuArr[i].length!=tmpArr.length){
391 this.filterData[i] = tmpitem; 422 this.filterData[i] = tmpitem;
392 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))); 423 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
393 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))); 424 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
394 } 425 }
395 } 426 }
396 this.subData = this.filterData; 427 this.subData = this.filterData;
397 this.$forceUpdate(); 428 this.$forceUpdate();
398 }, 429 },
399 processPage(index) { 430 processPage(index) {
400 //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 431 //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
401 this.reloadActiveMenuArr(); 432 this.reloadActiveMenuArr();
402 //重置UI控制数组 433 //重置UI控制数组
403 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))); 434 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
404 if (this.menu[index].type == 'filter') { 435 if (this.menu[index].type == 'filter') {
405 //重载筛选页选中状态 436 //重载筛选页选中状态
406 let level = this.shadowActiveMenuArr[index].length; 437 let level = this.shadowActiveMenuArr[index].length;
407 for (let i = 0; i < level; i++) { 438 for (let i = 0; i < level; i++) {
408 let box = this.subData[index].submenu[i].submenu; 439 let box = this.subData[index].submenu[i].submenu;
409 for (let j = 0; j < box.length; j++) { 440 for (let j = 0; j < box.length; j++) {
410 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 441 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
411 this.subData[index].submenu[i].submenu[j].selected = true; 442 this.subData[index].submenu[i].submenu[j].selected = true;
412 } else { 443 } else {
413 this.subData[index].submenu[i].submenu[j].selected = false; 444 this.subData[index].submenu[i].submenu[j].selected = false;
414 } 445 }
415 } 446 }
416 } 447 }
417 } else if (this.menu[index].type == 'hierarchy') { 448 } else if (this.menu[index].type == 'hierarchy') {
418 this.$nextTick(() => { 449 this.$nextTick(() => {
419 setTimeout(() => { 450 setTimeout(() => {
420 //滚动到选中项 451 //滚动到选中项
421 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]); 452 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
422 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]); 453 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
423 }, 0); 454 }, 0);
424 }) 455 })
425 } else if (this.menu[index].type == 'radio') { 456 } else if (this.menu[index].type == 'radio') {
426 //重载筛选页选中状态 457 //重载筛选页选中状态
427 let level = this.shadowActiveMenuArr[index].length; 458 let level = this.shadowActiveMenuArr[index].length;
428 for (let i = 0; i < level; i++) { 459 for (let i = 0; i < level; i++) {
429 let box = this.subData[index].submenu[i].submenu; 460 let box = this.subData[index].submenu[i].submenu;
430 for (let j = 0; j < box.length; j++) { 461 for (let j = 0; j < box.length; j++) {
431 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 462 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
432 this.subData[index].submenu[i].submenu[j].selected = true; 463 this.subData[index].submenu[i].submenu[j].selected = true;
433 } else { 464 } else {
434 this.subData[index].submenu[i].submenu[j].selected = false; 465 this.subData[index].submenu[i].submenu[j].selected = false;
435 } 466 }
436 } 467 }
437 } 468 }
438 } 469 }
439 }, 470 },
440 processActive(tmpitem) { 471 processActive(tmpitem) {
441 let tmpArr = [] 472 let tmpArr = []
442 if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) { 473 if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
443 let level = this.getMaxFloor(tmpitem.submenu); 474 let level = this.getMaxFloor(tmpitem.submenu);
444 while (level > 0) { 475 while (level > 0) {
445 tmpArr.push(0); 476 tmpArr.push(0);
446 level--; 477 level--;
447 } 478 }
448 } else if (tmpitem.type == 'filter') { 479 } else if (tmpitem.type == 'filter') {
449 let level = tmpitem.submenu.length; 480 let level = tmpitem.submenu.length;
450 while (level > 0) { 481 while (level > 0) {
451 tmpArr.push([]); 482 tmpArr.push([]);
452 level--; 483 level--;
453 } 484 }
454 } else if (tmpitem.type == 'radio') { 485 } else if (tmpitem.type == 'radio') {
455 let level = tmpitem.submenu.length; 486 let level = tmpitem.submenu.length;
456 while (level > 0) { 487 while (level > 0) {
457 tmpArr.push([]); 488 tmpArr.push([]);
458 level--; 489 level--;
459 } 490 }
460 } 491 }
461 return tmpArr; 492 return tmpArr;
462 }, 493 },
463 processSubMenu(menu) { 494 processSubMenu(menu) {
464 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { 495 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
465 for (let i = 0; i < menu.submenu.length; i++) { 496 for (let i = 0; i < menu.submenu.length; i++) {
466 menu.submenu[i] = this.processSubMenu(menu.submenu[i]); 497 menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
467 } 498 }
468 } else { 499 } else {
469 menu.submenu = []; 500 menu.submenu = [];
470 } 501 }
471 return menu; 502 return menu;
472 }, 503 },
473 //计算菜单层级 504 //计算菜单层级
474 getMaxFloor(treeData) { 505 getMaxFloor(treeData) {
475 let floor = 0 506 let floor = 0
476 let max = 0 507 let max = 0
477 function each(data, floor) { 508 function each(data, floor) {
478 data.forEach(e => { 509 data.forEach(e => {
479 max = floor > max ? floor : max; 510 max = floor > max ? floor : max;
480 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { 511 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
481 each(e.submenu, floor + 1) 512 each(e.submenu, floor + 1)
482 } 513 }
483 }) 514 })
484 } 515 }
485 each(treeData, 1) 516 each(treeData, 1)
486 return max; 517 return max;
487 }, 518 },
488 discard() { 519 discard() {
489 520
490 } 521 }
491 } 522 }
492 } 523 }
493 </script> 524 </script>
494 <style lang="scss"> 525 <style lang="scss">
495 .HMfilterDropdown { 526 .HMfilterDropdown {
496 flex-shrink: 0; 527 flex-shrink: 0;
497 width: 100%; 528 width: 100%;
498 height: 44px; 529 height: 44px;
499 position: fixed; 530 position: fixed;
500 z-index: 997; 531 z-index: 997;
501 flex-wrap: nowrap; 532 flex-wrap: nowrap;
502 display: flex; 533 display: flex;
503 flex-direction: row; 534 flex-direction: row;
504 top: var(--window-top); 535 top: var(--window-top);
505 left:0; 536 left:0;
506 view { 537 view {
507 display: flex; 538 display: flex;
508 flex-wrap: nowrap; 539 flex-wrap: nowrap;
509 } 540 }
510 } 541 }
511 .region { 542 .region {
512 flex: 1; 543 flex: 1;
513 height: 44px; 544 height: 44px;
514 } 545 }
515 .nav { 546 .nav {
516 width: 100%; 547 width: 100%;
517 height: 44px; 548 height: 44px;
518 border-bottom: solid 1rpx #eee;
519 z-index: 12; 549 z-index: 12;
520 background-color: #ffffff; 550 background-color: #ffffff;
521 flex-direction: row; 551 flex-direction: row;
522 .first-menu { 552 .first-menu {
523 width: 100%; 553 width: 100%;
524 font-size: 13px; 554 font-size: 16px;
525 color: #333333; 555 color: #333333;
526 flex-direction: row; 556 flex-direction: row;
527 align-items: center; 557 align-items: center;
528 justify-content: center; 558 justify-content: center;
529 transition: color .2s linear; 559 transition: color .2s linear;
530 560
531 &.on { 561 &.on {
532 color: #FF6B4A; 562 color: #FF6B4A;
533 563
534 .iconfont { 564 .iconfont {
535 color: #FF6B4A; 565 color: #FF6B4A;
536 } 566 }
537 } 567 }
538 .name { 568 .name {
539 height: 20px; 569 height: 20px;
570 // font-size: 16px;
540 text-align: center; 571 text-align: center;
541 text-overflow: clip; 572 text-overflow: clip;
542 overflow: hidden; 573 overflow: hidden;
543 } 574 }
544 .iconfont { 575 .iconfont {
545 width: 13px; 576 width: 13px;
546 height: 13px; 577 height: 13px;
578 line-height: 16px;
547 align-items: center; 579 align-items: center;
548 justify-content: center; 580 justify-content: center;
549 transition: transform .2s linear, color .2s linear; 581 transition: transform .2s linear, color .2s linear;
550 } 582 }
551 } 583 }
552 } 584 }
553 .sub-menu-class { 585 .sub-menu-class {
554 width: 100%; 586 width: 100%;
555 position: absolute; 587 position: absolute;
556 left: 0; 588 left: 0;
557 transform: translate3d(0, - 100%, 0); 589 transform: translate3d(0, - 100%, 0);
558 max-height: 345px; 590 max-height: 345px;
559 background-color: #ffffff; 591 background-color: #ffffff;
560 z-index: 11; 592 z-index: 11;
561 box-shadow: 0 5px 5px rgba(0, 0, 0, .1); 593 box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
562 overflow: hidden; 594 overflow: hidden;
563 flex-direction: row; 595 flex-direction: row;
564 transition: transform .15s linear; 596 transition: transform .15s linear;
565 &.hide { 597 &.hide {
566 display: none; 598 display: none;
567 } 599 }
568 600
569 &.show { 601 &.show {
570 transform: translate3d(0, calc(44px + 1rpx), 0); 602 transform: translate3d(0, calc(44px + 1rpx), 0);
571 } 603 }
572 } 604 }
573 .sub-menu-list { 605 .sub-menu-list {
574 width: 100%; 606 width: 100%;
575 height: 345px; 607 height: 345px;
576 flex-direction: column; 608 flex-direction: column;
577 .sub-menu { 609 .sub-menu {
578 min-height: 44px; 610 min-height: 44px;
579 font-size: 13px; 611 font-size: 13px;
580 flex-direction: column; 612 flex-direction: column;
581 padding-right: 15px; 613 padding-right: 15px;
582 >.menu-name { 614 >.menu-name {
583 height: 44px; 615 height: 44px;
584 flex-direction: row; 616 flex-direction: row;
585 align-items: center; 617 align-items: center;
586 justify-content: space-between; 618 justify-content: space-between;
587 >.iconfont { 619 >.iconfont {
588 display: none; 620 display: none;
589 font-size: 18px; 621 font-size: 18px;
590 color: #FF6B4A; 622 color: #FF6B4A;
591 } 623 }
592 } 624 }
593 } 625 }
594 &.first { 626 &.first {
595 flex-shrink: 0; 627 flex-shrink: 0;
596 width: 236rpx; 628 width: 236rpx;
597 background-color: #f0f0f0; 629 background-color: #f0f0f0;
598 .sub-menu { 630 .sub-menu {
599 padding-left: 15px; 631 padding-left: 15px;
600 632
601 &.on { 633 &.on {
602 background-color: #fff; 634 background-color: #fff;
603 } 635 }
604 } 636 }
605 } 637 }
606 &.alone { 638 &.alone {
607 max-height: 345px; 639 max-height: 345px;
608 min-height: 170px; 640 min-height: 60rpx;
609 height: auto; 641 height: auto;
610 .sub-menu { 642 .sub-menu {
611 min-height: calc(44px - 1rpx); 643 min-height: calc(44px - 1rpx);
612 margin-left: 15px; 644 margin-left: 15px;
613 border-bottom: solid 1rpx #e5e5e5; 645 border-bottom: solid 1rpx #e5e5e5;
614 646
615 &.on { 647 &.on {
616 color: #FF6B4A; 648 color: #FF6B4A;
617 649
618 >.menu-name { 650 >.menu-name {
619 >.iconfont { 651 >.iconfont {
620 display: block; 652 display: block;
621 } 653 }
622 } 654 }
623 } 655 }
624 } 656 }
625 } 657 }
626 &.not-first { 658 &.not-first {
627 .sub-menu { 659 .sub-menu {
628 min-height: calc(44px - 1rpx); 660 min-height: calc(44px - 1rpx);
629 margin-left: 15px; 661 margin-left: 15px;
630 border-bottom: solid 1rpx #e5e5e5; 662 border-bottom: solid 1rpx #e5e5e5;
631 >.menu-name { 663 >.menu-name {
632 height: calc(44px - 1rpx); 664 height: calc(44px - 1rpx);
633 >.iconfont { 665 >.iconfont {
634 display: none; 666 display: none;
635 font-size: 18px; 667 font-size: 18px;
636 color: #FF6B4A; 668 color: #FF6B4A;
637 } 669 }
638 } 670 }
639 &.on { 671 &.on {
640 color: #FF6B4A; 672 color: #FF6B4A;
641 >.menu-name { 673 >.menu-name {
642 >.iconfont { 674 >.iconfont {
643 display: block; 675 display: block;
644 } 676 }
645 } 677 }
646 } 678 }
647 .more-sub-menu { 679 .more-sub-menu {
648 flex-direction: row; 680 flex-direction: row;
649 flex-wrap: wrap; 681 flex-wrap: wrap;
650 padding-bottom: 9px; 682 padding-bottom: 9px;
651 >text { 683 >text {
652 height: 30px; 684 height: 30px;
653 border-radius: 3px; 685 border-radius: 3px;
654 background-color: #f5f5f5; 686 background-color: #f5f5f5;
655 color: #9b9b9b; 687 color: #9b9b9b;
656 margin-bottom: 6px; 688 margin-bottom: 6px;
657 margin-right: 6px; 689 margin-right: 6px;
658 text-align: center; 690 text-align: center;
659 line-height: 30px; 691 line-height: 30px;
660 border: solid #f5f5f5 1rpx; 692 border: solid #f5f5f5 1rpx;
661 flex: 0 0 calc(33.33% - 6px); 693 flex: 0 0 calc(33.33% - 6px);
662 overflow: hidden; 694 overflow: hidden;
663 font-size: 12px; 695 font-size: 12px;
664 &:nth-child(3n) { 696 &:nth-child(3n) {
665 margin-right: 0; 697 margin-right: 0;
666 } 698 }
667 &.on { 699 &.on {
668 border-color: #f6c8ac; 700 border-color: #f6c8ac;
669 color: #FF6B4A; 701 color: #FF6B4A;
670 } 702 }
671 .iconfont { 703 .iconfont {
672 color: #9b9b9b; 704 color: #9b9b9b;
673 } 705 }
674 } 706 }
675 } 707 }
676 } 708 }
677 } 709 }
678 } 710 }
679 .filter { 711 .filter {
680 width: 100%; 712 width: 100%;
681 height: 345px; 713 height: 345px;
682 display: flex; 714 display: flex;
683 flex-direction: column; 715 flex-direction: column;
684 justify-content: space-between; 716 justify-content: space-between;
685 align-items: center; 717 align-items: center;
686 .menu-box { 718 .menu-box {
687 width: 698rpx; 719 width: 698rpx;
688 height: calc(345px - 75px); 720 height: calc(345px - 75px);
689 flex-shrink: 1; 721 flex-shrink: 1;
690 .box { 722 .box {
691 width: 100%; 723 width: 100%;
692 margin-top: 16px; 724 margin-top: 16px;
693 flex-direction: column; 725 flex-direction: column;
694 .title { 726 .title {
695 width: 100%; 727 width: 100%;
696 font-size: 13px; 728 font-size: 13px;
697 color: #888; 729 color: #888;
698 } 730 }
699 .labels { 731 .labels {
700 flex-direction: row; 732 flex-direction: row;
701 flex-wrap: wrap; 733 flex-wrap: wrap;
702 .on { 734 .on {
703 border-color: #FF6B4A; 735 border-color: #FF6B4A;
704 background-color: #FF6B4A; 736 background-color: #FF6B4A;
705 color: #fff; 737 color: #fff;
706 } 738 }
707 >view { 739 >view {
708 width: 148rpx; 740 width: 148rpx;
709 height: 30px; 741 height: 30px;
710 border: solid 1rpx #adadad; 742 border: solid 1rpx #adadad;
711 border-radius: 2px; 743 border-radius: 2px;
712 margin-right: 15px; 744 margin-right: 15px;
713 margin-top: 8px; 745 margin-top: 8px;
714 padding: 0 16rpx; 746 padding: 0 16rpx;
715 box-sizing: border-box; 747 box-sizing: border-box;
716 font-size: 12px; 748 font-size: 12px;
717 flex-direction: row; 749 flex-direction: row;
718 justify-content: center; 750 justify-content: center;
719 align-items: center; 751 align-items: center;
720 overflow: hidden; 752 overflow: hidden;
721 white-space: nowrap; 753 white-space: nowrap;
722 text-overflow: ellipsis; 754 text-overflow: ellipsis;
723 &:nth-child(4n) { 755 &:nth-child(4n) {
724 margin-right: 0; 756 margin-right: 0;
725 } 757 }
726 } 758 }
727 } 759 }
728 } 760 }
729 } 761 }
730 .btn-box { 762 .btn-box {
731 flex-shrink: 0; 763 flex-shrink: 0;
732 width: 100%; 764 width: 100%;
733 height: 75px; 765 height: 75px;
734 flex-direction: row !important; 766 flex-direction: row !important;
735 align-items: center; 767 align-items: center;
736 justify-content: space-between; 768 justify-content: space-between;
737 >view { 769 >view {
738 width: 320rpx; 770 width: 320rpx;
739 height: 40px; 771 height: 40px;
740 border-radius: 40px; 772 border-radius: 40px;
741 border: solid 1rpx #FF6B4A; 773 border: solid 1rpx #FF6B4A;
742 align-items: center; 774 align-items: center;
743 justify-content: center; 775 justify-content: center;
744 } 776 }
745 .reset { 777 .reset {
746 color: #FF6B4A; 778 color: #FF6B4A;
747 } 779 }
748 .submit { 780 .submit {
749 color: #fff; 781 color: #fff;
750 background-color: #FF6B4A; 782 background-color: #FF6B4A;
751 } 783 }
752 } 784 }
753 } 785 }
754 .mask { 786 .mask {
755 z-index: 10; 787 z-index: 10;
756 position: fixed; 788 position: fixed;
757 top: 0; 789 top: 0;
758 left: 0; 790 left: 0;
759 right: 0; 791 right: 0;
760 bottom: 0; 792 bottom: 0;
761 background-color: rgba(0, 0, 0, 0); 793 background-color: rgba(0, 0, 0, 0);
762 transition: background-color .15s linear; 794 transition: background-color .15s linear;
763 &.show { 795 &.show {
764 background-color: rgba(0, 0, 0, 0.5); 796 background-color: rgba(0, 0, 0, 0.5);
765 } 797 }
766 &.hide { 798 &.hide {
767 display: none; 799 display: none;
1 { 1 {
2 "pages" : [ 2 "pages" : [
3 { 3 {
4 "path" : "pages/index/index", 4 "path" : "pages/index/index",
5 "style" : { 5 "style" : {
6 "navigationBarTitleText" : "商城一览" 6 "navigationBarTitleText" : "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path" : "pages/myOrder/myOrder", 10 "path" : "pages/user/user",
11 "style" : { 11 "style" : {
12 "navigationBarTitleText" : "我的订单" 12 "navigationBarTitleText" : "我的"
13 } 13 }
14 }, 14 },
15 { 15 {
16 "path" : "pages/cart/cart", 16 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
17 "style" : { 17 "style" : {
18 "navigationBarTitleText" : "购物车" 18 "navigationBarTitleText" : "镜片名称名称"
19 } 19 }
20 }, 20 },
21 { 21 {
22 "path" : "pages/lensDetails/lensDetails", 22 <<<<<<< HEAD
23 "style" : { 23 =======
24 "navigationBarTitleText" : "产品详情" 24 "path" : "pages/purchaseLenses/purchaseLenses",
25 } 25 "style" : {
26 }, 26 "navigationBarTitleText" : "产品选购"
27 { 27 }
28 "path" : "pages/purchaseLenses/purchaseLenses", 28 },
29 "style" : { 29 {
30 "navigationBarTitleText" : "产品选购" 30 >>>>>>> f0cf57997c2438808bb572407021a3e3a18ee0fb
31 } 31 "path" : "pages/lensDetails/lensDetails",
32 }, 32 "style" : {
33 { 33 "navigationBarTitleText" : "产品详情"
34 "path" : "pages/refundProgress/refundProgress", 34 }
35 "style" : { 35 },
36 "navigationBarTitleText" : "申请退款" 36 {
37 } 37 "path" : "pages/myOrderPaying/myOrderPaying",
38 }, 38 "style" : {
39 { 39 "navigationBarTitleText" : "我的订单"
40 "path" : "pages/addAddress/addAddress", 40 }
41 "style" : { 41 },
42 "navigationBarTitleText" : "新增地址" 42 {
43 } 43 "path" : "pages/myOrder/myOrder",
44 }, 44 "style" : {
45 { 45 "navigationBarTitleText" : "我的订单"
46 "path" : "pages/confirmOrder/confirmOrder", 46 }
47 "style" : { 47 },
48 "navigationBarTitleText" : "确认订单" 48 {
49 } 49 "path" : "pages/cart/cart",
50 }, 50 "style" : {
51 { 51 "navigationBarTitleText" : "购物车"
52 "path" : "pages/user/user", 52 }
53 "style" : { 53 },
54 "navigationBarTitleText" : "我的" 54 {
55 } 55 "path" : "pages/frameDetail/frameDetail",
56 }, 56 "style" : {
57 { 57 "navigationBarTitleText" : "产品详情"
58 "path" : "pages/refundment/refundWays" 58 }
59 }, 59 },
60 { 60 {
61 "path" : "pages/refundment/refundment" 61 "path" : "pages/refundProgress/refundProgress",
62 }, 62 "style" : {
63 { 63 "navigationBarTitleText" : "申请退款"
64 "path" : "pages/predelivery/predelivery" 64 }
65 },
66 {
67 "path" : "pages/addAddress/addAddress",
65 }, 68 "style" : {
66 { 69 "navigationBarTitleText" : "新增地址"
67 "path" : "pages/customerService/customerService", 70 }
71 },
72 {
73 "path" : "pages/confirmOrder/confirmOrder",
68 "style" : { 74 "style" : {
69 "navigationBarTitleText" : "在线客服" 75 "navigationBarTitleText" : "确认订单"
70 } 76 }
77 },
78 {
79 "path" : "pages/refundment/refundWays",
71 }, 80 "style" : {
72 { 81 "navigationBarTitleText" : "退款方式"
73 "path" : "pages/myOrderPaying/myOrderPaying", 82 }
74 "style" : { 83 },
75 "navigationBarTitleText" : "我的订单" 84 {
76 } 85 "path" : "pages/refundment/refundment",
77 }, 86 "style" : {
78 { 87 "navigationBarTitleText" : "申请退款"
79 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", 88 }
80 "style" : { 89 },
81 "navigationBarTitleText" : "镜片名称名称" 90 {
82 } 91 "path" : "pages/predelivery/predelivery",
83 }, 92 "style" : {
84 { 93 "navigationBarTitleText" : "待发货"
85 "path" : "pages/detailStandard/detailStandard_sun", 94 }
86 "style" : { 95 },
87 "navigationBarTitleText" : "太阳镜选购页" 96 {
88 } 97 "path" : "pages/customerService/customerService",
89 }, 98 "style" : {
90 { 99 "navigationBarTitleText" : "在线客服"
91 "path" : "pages/detailStandard/detailStandard_k", 100 }
92 "style" : { 101 },
93 "navigationBarTitleText" : "镜框选购页" 102 {
94 } 103 "path" : "pages/detailStandard/detailStandard_sun",
95 } 104 "style" : {
96 ], 105 "navigationBarTitleText" : "太阳镜选购页"
97 "globalStyle" : { 106 }
98 "navigationBarTextStyle" : "black", 107 },
99 "navigationBarTitleText" : "uni-app", 108 {
100 "navigationBarBackgroundColor" : "#F8F8F8", 109 "path" : "pages/detailStandard/detailStandard_k",
101 "backgroundColor" : "#F8F8F8" 110 "style" : {
111 "navigationBarTitleText" : "镜框选购页"
112 }
113 }
114 ,{
115 "path" : "pages/addOpticsData/addOpticsData",
102 }, 116 "style" : {
103 "tabBar" : { 117 "navigationBarTitleText" : "验光数据"}
104 "color" : "#C0C4CC", 118 }
105 "selectedColor" : "#fa436a", 119 ],
106 "borderStyle" : "black", 120 "globalStyle" : {
107 "backgroundColor" : "#ffffff", 121 "navigationBarTextStyle" : "black",
108 "list" : [ 122 "navigationBarTitleText" : "uni-app",
109 { 123 "navigationBarBackgroundColor" : "#F8F8F8",
110 "pagePath" : "pages/index/index", 124 "backgroundColor" : "#F8F8F8"
111 "iconPath" : "static/tab-home.png", 125 },
112 "selectedIconPath" : "static/tab-home-current.png", 126 "tabBar" : {
113 "text" : "首页" 127 "color" : "#C0C4CC",
114 }, 128 "selectedColor" : "#fa436a",
115 { 129 "borderStyle" : "black",
116 "pagePath" : "pages/cart/cart", 130 "backgroundColor" : "#ffffff",
117 "iconPath" : "static/tab-cart.png", 131 "list" : [
118 "selectedIconPath" : "static/tab-cart-current.png", 132 {
119 "text" : "购物车" 133 "pagePath" : "pages/index/index",
120 }, 134 "iconPath" : "static/tab-home.png",
121 { 135 "selectedIconPath" : "static/tab-home-current.png",
122 "pagePath" : "pages/user/user", 136 "text" : "首页"
123 "iconPath" : "static/tab-my.png", 137 },
124 "selectedIconPath" : "static/tab-my-current.png", 138 {
125 "text" : "我的" 139 "pagePath" : "pages/cart/cart",
126 } 140 "iconPath" : "static/tab-cart.png",
127 ] 141 "selectedIconPath" : "static/tab-cart-current.png",
128 }, 142 "text" : "购物车"
129 "condition" : { 143 },
130 //模式配置，仅开发期间生效 144 {
131 "current" : 0, //当前激活的模式(list 的索引项) 145 "pagePath" : "pages/user/user",
132 "list" : [ 146 "iconPath" : "static/tab-my.png",
133 { 147 "selectedIconPath" : "static/tab-my-current.png",
134 "name" : "", //模式名称 148 "text" : "我的"
135 "path" : "", //启动页面，必选 149 }
136 "query" : "" //启动参数，在页面的onLoad函数里面得到 150 ]
137 } 151 },
138 ] 152 "condition" : {
139 } 153 //模式配置，仅开发期间生效
140 } 154 "current" : 0, //当前激活的模式(list 的索引项)
141 155 "list" : [
156 {
157 "name" : "", //模式名称
158 "path" : "", //启动页面，必选
159 "query" : "" //启动参数，在页面的onLoad函数里面得到
160 }
161 ]
162 }
163 }
164
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @51a5fe4
File was created 1 <template>
2 <view>
3
4 </view>
5 </template>
6
7 <script>
8 export default {
9 data() {
10 return {
11
12 };
13 }
14 }
15 </script>
16
17 <style lang="scss">
18
19 </style>
20
src/pages/cart/cart.vue
Diff comments   View file @51a5fe4
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 3 <block v-if="cartList.length==0">
4 <view class="card">
5 <view class="cardHeader">
6 <block v-if="pIsoPen">
7 <view class="partentChecked" @click="pChange(pIsoPen)">
8 <span class="status correct"></span>
9 </view>
10 </block>
11 <block v-else>
12 <view class="partentCheck" @click="pChange(pIsoPen)"></view>
13 </block>
14 <image src="../../static/store.png" mode="aspectFill"></image>
15 <text>非常戴镜</text>
16 </view>
17 4
18 <view class="cardBody"> 5 </block>
19 <template v-if="childIsOpen.child1"> 6 <block v-else>
20 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> 7 <view class="card">
21 <span class="status correct"></span> 8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10 @click="pChange(pIsoPen)">
11 <span class="correct"></span>
22 </view> 12 </view>
23 </template> 13 <image src="../../static/store.png" mode="aspectFill"></image>
24 <template v-else> 14 <text>非常戴镜</text>
25 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> 15 </view>
26 </template> 16
27 <view class="goodInfo"> 17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
28 <view class="imageWrap"> 18 @longpress="delCart(item.cart_id,index)">
29 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20 @click="Change(childIsOpen[index],index)">
21 <span class="correct"></span>
30 </view> 22 </view>
31 <view class="infoRight"> 23 <view class="goodInfo">
32 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 24 <view class="imageWrap">
33 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 25 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
34 <view class="icon"></view>
35 </view> 26 </view>
36 <view class="priceBox"> 27 <view class="infoRight">
37 <view class="price">￥{{198}}</view> 28 <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view>
38 <text>(限购{{maxCount}}副)</text> 29 <view class="describ" @tap="toshop(item.pid,item.p_root_index)">
39 <view class="counter"> 30 <text>
40 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 31 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
41 <text>{{count}}</text> 32 {{tag.label+`&nbsp;&nbsp;`}}
42 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 33 </block>
34 </text>
35 <view class="icon"></view>
36 </view>
37 <view class="priceBox">
38 <view class="price">￥{{item.nowPrice*item.num}}</view>
39 <text>(限购{{maxCount}}副)</text>
40 <view class="counter">
41 <view class="btn" disabled="this.addDisabled" type="default"
42 @click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
43 <text>{{item.num}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default"
45 @click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
46 </view>
43 </view> 47 </view>
44 </view> 48 </view>
45 </view> 49 </view>
46 </view> 50 </view>
47 </view> 51 </view>
48 <view class="cardBody"> 52 </block>
49 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
50 <template v-if="childIsOpen.child2">
51 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
52 <span class="status correct"></span>
53 </view>
54 </template>
55 <template v-else>
56 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
57 </template>
58 <view class="goodInfo">
59 <view class="imageWrap">
60 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
61 </view>
62 <view class="infoRight">
63 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
64 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
65 <view class="icon"></view>
66 </view>
67 <view class="priceBox">
68 <view class="price">￥198</view>
69 <text>(限购{{maxCount}}副)</text>
70 <view class="counter">
71 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
72 <text>{{count}}</text>
73 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
74 </view>
75 </view>
76 </view>
77 </view>
78 </view>
79 </view>
80
81 <view class="footer"> 53 <view class="footer">
82 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 54 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
83 <view class="footerRight"> 55 <view class="footerRight">
84 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> 56 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
85 <view class="paybtn">立即支付</view> 57 <view class="paybtn" >立即结算</view>
86 </navigator> 58 </navigator>
87 </view> 59 </view>
88 </view> 60 </view>
89 61
90 </view> 62 </view>
91 </template> 63 </template>
92 64
93 <script> 65 <script>
94 import store from '@/store'; 66 import store from '@/store';
95 67
96 export default { 68 export default {
97 69
98 data() { 70 data() {
99 return { 71 return {
100 totalPrice: 360, 72 totalPrice: 0,
101 count:1, 73 pIsoPen:false,
74 // childIsOpen:[],
102 maxCount:20, 75 maxCount:20,
103 pIsoPen: false,
104 childIsOpen:{
105 "child1":true,
106 "child2":true
107 },
108 } 76 }
109 }, 77 },
110 computed:{ 78 computed:{
79
111 cartList() { 80 cartList() {
112 // 也可以从 getters 获取 81 // console.log('cart-list', this.$store.state.cart.cartList);
113 console.log('cart-list', this.$store.state.cart.cartList);
114 return this.$store.state.cart.cartList; 82 return this.$store.state.cart.cartList;
83 },
84 childIsOpen(){
85 let temp=[];
86 temp.length=this.$store.state.cart.cartList.length;
87 for (let i = 0; i < temp.length; i++) {
88 temp[i]= false
89 }
90 console.log('this.childisOPne===>',temp)
91 return temp
115 } 92 }
116 }, 93 },
117 onLoad: function() { 94 onLoad: function() {
95 // 判断是否授权
96 // uni.getSetting({
97 // success(res) {
98 // console.log('authSetting',res.authSetting)
99 // if(res.authSetting['scope.userInfo'] !== true) {
100
101 // uni.switchTab({
102 // url:'/pages/user/user'
103 // })
104 // }else {
105 // }
106 // }
107 // })
108
109 // console.log('usr-my',this.$store.state.user.userInfo)
110 // store.dispatch('cart/addCart',{
111 // "num":1,
112 // "pid": 7,//产品id
113 // "uid":1,
114 // "sk_id": 72,
115 // "price": 120,
116 // "mp_id":1,
117 // "checkedSKU":{
118 // "discount": "45",
119 // "in_price": "6000",
120 // "kc": "0",
121 // "model_pic": null,
122 // "out_price": 191.8,
123 // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg",
124 // "pid": "7",
125 // "real_price": 99,
126 // "sk_id": "89",
127 // "sku_name": "1.56非球面防蓝光_黑",
128 // "sku_shop_value": "",
129 // "sku_value": "58_61",
130 // "status": "1",
131 // },
132 // });
118 store.dispatch('cart/getCartList',{ 133 store.dispatch('cart/getCartList',{
119 uid: 1, //用户id 134 uid: 1, //用户id
120 }); 135 });
121 }, 136 },
137
122 methods: { 138 methods: {
123 counter(isadd){ 139 // 跳转到对应的选购页面
140 toshop(id,type){
141 console.log('===',id,type)
142 switch(type){
143 case 1:
144 uni.navigateTo({
145 url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type,
146 success: res => {},
147 fail: () => {},
148 complete: () => {}
149 });
150 break;
151 case 2:
152 uni.navigateTo({
153 url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type,
154 success: res => {},
155 fail: () => {},
156 complete: () => {}
157 });
158 break;
159 case 3||4:
160 uni.navigateTo({
161 url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
162 success: res => {},
163 fail: () => {},
164 complete: () => {}
165 });
166 break;
167 // case 4:
168 // uni.navigateTo({
169 // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
170 // success: res => {},
171 // fail: () => {},
172 // complete: () => {}
173 // });
174 case 5:
175 uni.navigateTo({
176 url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type,
177 success: res => {},
178 fail: () => {},
179 complete: () => {}
180 });
181 break;
182 default :
183 break
184 }
185 },
186 toGoods(id,type){
187 uni.navigateTo({
188 url: `../frameDetail/frameDetail?oderId=`+id,
189 success: res => {},
190 fail: () => {},
191 complete: () => {}
192 });
193 console.log('toGoods =====> id:'+id +"======>type:"+type)
194 switch(type){
195 case 1:
196 uni.navigateTo({
197 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
198 success: res => {},
199 fail: () => {},
200 complete: () => {}
201 });
202 break;
203 case 2:
204 uni.navigateTo({
205 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
206 success: res => {},
207 fail: () => {},
208 complete: () => {}
209 });
210 break;
211 case 3:
212 uni.navigateTo({
213 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
214 success: res => {},
215 fail: () => {},
216 complete: () => {}
217 });
218 break;
219 case 4:
220 uni.navigateTo({
221 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
222 success: res => {},
223 fail: () => {},
224 complete: () => {}
225 });
226 break;
227 default :
228 break
229 }
230 },
231
232 counter(index,isadd,mp_id,sk_id,num,cart_id){
233 // console.log('===>>counter ===>num',num)
234 // console.log('===>>counter ===>isadd',isadd)
235 num=parseInt(num);
124 if(isadd){ 236 if(isadd){
125 this.count >= this.maxCount? this.addDisabled = true:this.count++; 237 if(num>=this.maxCount){
238 this.addDisabled = true
239 } else{
240 this.addDisabled= true
241 // 修改num
242 store.dispatch('cart/modiCart',{
243 uid: 1,
244 // openid: '',
245 mp_id: mp_id,
246 sk_id: sk_id,
247 cart_id:cart_id,
248 num:num+1,
249 args:{
250 index:index,
251 isadd:isadd,
252 }
253 })
254 this.addDisabled= false
255 }
256 }else{
257 if(num<=1){
258 this.desDisabled = true
259 } else{
260 this.desDisabled = false
261 // post 请求修改相关参数
262 store.dispatch('cart/modiCart',{
263 uid: 1,
264 // openid: '',
265 mp_id: mp_id,
266 sk_id: sk_id,
267 cart_id:cart_id,
268 num:num-1,
269 args:{
270 index:index,
271 isadd:isadd,
272 }
273 })
274 this.desDisabled = true
275 }
276 }
277 },
278
279 Change(isopen,indexC){
280 // console.log('lalla===>',isopen)
281 this.childIsOpen[indexC]=!isopen
282 if(!isopen){
283 this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
126 }else{ 284 }else{
127 this.count <= 1? this.desDisabled = true:this.count--; 285 this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
286 }
287 let m=true;
288 for (let i = 0; i < this.childIsOpen.length; i++) {
289 m=m&this.childIsOpen[i]
290 }
291 if(m==1){
292 this.pIsoPen=true
293 } else{
294 this.pIsoPen=false
128 } 295 }
129 }, 296 },
130 pChange(isopen){ 297 pChange(isopen){
131 // console.log(isopen)
132 this.pIsoPen=!isopen 298 this.pIsoPen=!isopen
133 this.childIsOpen.child1=!isopen 299 for (let i = 0; i < this.childIsOpen.length; i++) {
134 this.childIsOpen.child2=!isopen 300 this.childIsOpen[i]=!isopen
135 },
136 cChange(isopen,child){
137 // console.log(child)
138 if(child==='child1'){
139 this.childIsOpen.child1=!isopen
140 } 301 }
141 if(child==='child2'){ 302 if(this.pIsoPen){
142 this.childIsOpen.child2=!isopen 303 // 计算总价逻辑
304 if(this.childIsOpen.length!=0){
305 for (let i = 0; i < this.childIsOpen.length; i++) {
306 if(this.childIsOpen[i]){
307 this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice)
308 }
309 }
310 }
311 } else{
312 this.totalPrice=0
143 } 313 }
314
315 },
316 delCart(cart_id,index){
317 // console.log('userInfo',this.$store.state.user.userInfo)
318 cart_id=parseInt(cart_id)
319 // console.log('delcart------>cart_id',cart_id)
320 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
321 // console.log('delcart======>index',index)
322 uni.showModal({
323 title: "是否删除该商品",
324 // content: '是否删除该商品',
325 success: function (res) {
326 if (res.confirm) {
327 // this.$store.state.cart.cartList.splice(index,1)
328 store.dispatch('cart/delCart',{
329 uid: 1, //用户id
330 openid: "",
331 cart_id: cart_id, // 要修改的购物车id
332 arg:index, // 由于action 传参是能接收两参数，因此将index放入对象
333 });
334 console.log('用户点击确定');
335 }
336 }
337 });
338
144 } 339 }
145 } 340 }
146 } 341 }
147 </script> 342 </script>
148 343
149 <style lang="scss"> 344 <style lang="scss">
150 .content { 345 .content {
151 min-height: 100vh; 346 min-height: 100vh;
152 background-color: #f2f2f2; 347 background-color: #f2f2f2;
153 display: flex; 348 display: flex;
154 flex-direction: column; 349 flex-direction: column;
155 align-items: center; 350 align-items: center;
156 justify-content: space-between; 351 justify-content: space-between;
157 padding: 20rpx 40rpx; 352 padding: 20rpx 40rpx;
158 box-sizing: border-box; 353 box-sizing: border-box;
159 354
160 .partentCheck{ 355 .partentCheck{
161 width: 16px; 356 width: 16px;
162 height: 16px; 357 height: 16px;
163 border-radius: 18px; 358 border-radius: 18px;
164 border: 1px solid #CFCFCF; 359 border: 1px solid #CFCFCF;
165 background-color: #FFFFFF; 360 background-color: #FFFFFF;
166 } 361 }
167 .partentChecked{ 362 .partentChecked{
168 width: 18px; 363 width: 18px;
169 height: 18px; 364 height: 18px;
170 border-radius: 18px; 365 border-radius: 18px;
171 background-color: #FF6B4A; 366 background-color: #FF6B4A;
172 .correct { 367 .correct {
173 display: inline-block; 368 display: inline-block;
174 width: 5px; 369 position: relative;
175 height: 1px; 370 width: 10rpx;
371 height: 2rpx;
176 background: #FFFFFF; 372 background: #FFFFFF;
177 line-height: 0; 373 line-height: 0;
178 font-size: 0; 374 font-size: 0;
179 position: relative; 375 position: relative;
180 top: -6px; 376 top: -7px;
181 left: 4px; 377 left: 4px;
182 -webkit-transform: rotate(45deg); 378 -webkit-transform: rotate(45deg);
183 } 379 }
184 .correct:after { 380 .correct:after {
185 content: '/'; 381 content: '/';
186 display: block; 382 display: block;
187 width: 8px; 383 width: 16rpx;
188 height: 1px; 384 height: 2rpx;
189 background: #FFFFFF; 385 background: #FFFFFF;
190 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 386 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
191 } 387 }
192 } 388 }
193 389
194 .card{ 390 .card{
195 background-color: #FFFFFF; 391 background-color: #FFFFFF;
196 border-radius: 16rpx; 392 border-radius: 16rpx;
197 box-sizing: border-box; 393 box-sizing: border-box;
198 padding: 36rpx 36rpx 36rpx 18rpx; 394 padding: 36rpx 36rpx 36rpx 18rpx;
199 display: flex; 395 display: flex;
200 flex-direction: column; 396 flex-direction: column;
201 align-items: center; 397 align-items: center;
202 justify-content: space-between; 398 justify-content: space-between;
399 margin-bottom: 180rpx;
203 .cardHeader{ 400 .cardHeader{
204 width: 100%; 401 width: 100%;
205 height: 36rpx; 402 height: 36rpx;
206 display: flex; 403 display: flex;
207 align-items: center; 404 align-items: center;
208 justify-content: flex-start; 405 justify-content: flex-start;
209 image{ 406 image{
210 height: 32rpx; 407 height: 32rpx;
211 width: 32rpx; 408 width: 32rpx;
212 padding-left: 6px; 409 padding-left: 6px;
213 padding-right: 10px; 410 padding-right: 10px;
214 } 411 }
215 text{ 412 text{
216 // font-family: PingFangSC-Regular; 413 // font-family: PingFangSC-Regular;
217 font-size: 14px; 414 font-size: 14px;
218 color: #333333; 415 color: #333333;
219 letter-spacing: -0.26px; 416 letter-spacing: -0.26px;
220 } 417 }
221 } 418 }
222 .cardBody{ 419 .cardBody{
223 width: 100%; 420 width: 100%;
224 height: 300rpx; 421 height: 300rpx;
225 display: flex; 422 display: flex;
226 align-items: center; 423 align-items: center;
227 justify-content: space-between; 424 justify-content: space-between;
228 .goodInfo{ 425 .goodInfo{
229 width: 95%; 426 width: 95%;
230 display: flex; 427 display: flex;
231 flex-direction: row; 428 flex-direction: row;
232 justify-content: flex-start; 429 justify-content: flex-start;
233 padding-left: 6px; 430 padding-left: 6px;
234 .imageWrap{ 431 .imageWrap{
235 height: 188rpx; 432 height: 188rpx;
236 width: 188rpx; 433 width: 188rpx;
237 margin-right: 28rpx; 434 margin-right: 28rpx;
238 image{ 435 image{
239 border-radius: 4px; 436 border-radius: 4px;
240 height: 188rpx; 437 height: 188rpx;
241 width: 188rpx; 438 width: 188rpx;
242 } 439 }
243 } 440 }
244 .infoRight{ 441 .infoRight{
245 display: flex; 442 display: flex;
246 flex-direction: column; 443 flex-direction: column;
247 align-items: flex-start; 444 align-items: flex-start;
248 justify-content: space-between; 445 justify-content: space-between;
249 height: 240rpx; 446 height: 240rpx;
250 .goodName{ 447 .goodName{
448 display: -webkit-box;
449 -webkit-box-orient: vertical;
450 -webkit-line-clamp: 2;
451 text-align: justify;
452 overflow: hidden;
251 font-size: 28rpx; 453 font-size: 28rpx;
252 color: #333333; 454 color: #333333;
253 } 455 }
254 .describ{ 456 .describ{
255 width: 100%; 457 width: 100%;
256 height: 80rpx; 458 height: 80rpx;
257 box-sizing: border-box; 459 box-sizing: border-box;
258 padding: 10rpx; 460 padding: 10rpx;
259 font-size: 20rpx; 461 font-size: 20rpx;
462 letter-spacing: -0.23px;
463 text-align: justify;
260 color: #999999; 464 color: #999999;
261 background: #F2F2F2; 465 background: #F9F9F9;
262 display: flex; 466 display: flex;
263 justify-content: center; 467 justify-content: center;
264 align-items: center; 468 align-items: center;
265 text{ 469 text{
266 text-overflow: -o-ellipsis-lastline; 470 text-overflow: -o-ellipsis-lastline;
267 overflow: hidden; 471 overflow: hidden;
268 text-overflow: ellipsis; 472 text-overflow: ellipsis;
269 display: -webkit-box; 473 display: -webkit-box;
270 -webkit-line-clamp: 2; 474 -webkit-line-clamp: 2;
271 line-clamp: 2; 475 line-clamp: 2;
272 -webkit-box-orient: vertical; 476 -webkit-box-orient: vertical;
273 } 477 }
274 // .icon{ 478 // .icon{
275 // transform: rotate(90deg); 479 // transform: rotate(90deg);
276 // height: 13px; 480 // height: 13px;
277 // width: 20px; 481 // width: 20px;
278 482
279 // } 483 // }
280 .icon{ 484 .icon{
281 width: 0; 485 width: 0;
282 height: 0; 486 height: 0;
283 border-left: 5px transparent; 487 border-left: 5px transparent;
284 border-right: 5px transparent; 488 border-right: 5px transparent;
285 border-top: 5px #979797; 489 border-top: 5px #979797;
286 border-bottom: 0 transparent; 490 border-bottom: 0 transparent;
287 border-style: solid; 491 border-style: solid;
288 position: relative; 492 position: relative;
289 margin-left: 10px; 493 margin-left: 10px;
290 // transform: scaleY(-1); 494 // transform: scaleY(-1);
291 } 495 }
292 .icon::after{ 496 .icon::after{
293 content: ''; 497 content: '';
294 position: absolute; 498 position: absolute;
295 top: -6.5px; 499 top: -6.5px;
296 left: -5px; 500 left: -5px;
297 border-left: 5px transparent; 501 border-left: 5px transparent;
298 border-right: 5px transparent; 502 border-right: 5px transparent;
299 border-top: 5px #FFFFFF; 503 border-top: 5px #FFFFFF;
300 border-bottom: 0 transparent; 504 border-bottom: 0 transparent;
301 border-style: solid; 505 border-style: solid;
302 } 506 }
303 } 507 }
304 .priceBox{ 508 .priceBox{
305 display: flex; 509 display: flex;
306 justify-content: space-between; 510 justify-content: space-between;
307 align-items: center; 511 align-items: center;
308 // margin-top: 26px; 512 // margin-top: 26px;
309 width: 100%; 513 width: 100%;
310 font-size: 14px; 514 font-size: 14px;
311 color: #999999; 515 color: #999999;
312 .price{ 516 .price{
313 color: #FF6B4A; 517 color: #FF6B4A;
314 font-size: 28rpx; 518 font-size: 28rpx;
315 } 519 }
316 .counter{ 520 .counter{
317 display: flex; 521 display: flex;
318 flex-direction: row; 522 flex-direction: row;
319 justify-content: space-between; 523 justify-content: space-between;
320 align-items: center; 524 align-items: center;
321 font-size: 28rpx; 525 font-size: 28rpx;
322 color: #333333; 526 color: #333333;
323 width: 122rpx; 527 width: 122rpx;
324 .btn{ 528 .btn{
325 display: flex; 529 display: flex;
326 justify-content: center; 530 justify-content: center;
327 line-height: 32rpx; 531 line-height: 32rpx;
328 height: 32rpx; 532 height: 32rpx;
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
Diff comments   View file @51a5fe4
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="goods-info"> 3 <view class="goods-info">
4 <image src="../../static/myorder-paying-pic.png"></image> 4 <image src="../../static/myorder-paying-pic.png"></image>
5 <view class="box-right"> 5 <view class="box-right">
6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text> 6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
7 <text class="p2">支持7天无理由退货 顺丰发货</text> 7 <text class="p2">支持7天无理由退货 顺丰发货</text>
8 <view class="priceBox"> 8 <view class="priceBox">
9 <view class="price">￥{{price*count}}</view> 9 <view class="price">￥{{price*count}}</view>
10 <view class="counter"> 10 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> 11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text> 12 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view> 13 <view class="btn" @click="counter(true)">+</view>
14 </view> 14 </view>
15 </view> 15 </view>
16 </view> 16 </view>
17 </view> 17 </view>
18 <view class="goods-data"> 18 <view class="goods-data">
19 <!-- 实用功能折叠框 -->
20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
21 <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
22 <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
24
25 <view class="opCollapse"> 19 <view class="opCollapse">
26 <view class="head"> 20 <view class="head">
27 <view v-if="!opIsOpen">填写验光数据</view> 21 <view v-if="!opIsOpen">填写验光数据</view>
28 <view v-else></view> 22 <view v-else></view>
29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view> 23 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> 24 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
31 </view> 25 </view>
32 <view class="body"> 26 <view class="body">
33 <template v-if="opIsOpen"> 27 <template v-if="opIsOpen">
34 28
35 <view class="goods-form"> 29 <view class="goods-form">
36 <text class="p1">填写验光数据</text> 30 <text class="p1">填写验光数据</text>
37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 31 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
38 <view class="picker" > 32 <view class="picker" >
39 <view class="picker-choice"> 33 <view class="picker-choice">
40 <view class="choice-left"> 34 <view class="choice-left">
41 <text class="p11">{{pickerInfoList[0].nameC}}</text> 35 <text class="p11">{{pickerInfoList[0].nameC}}</text>
42 <text class="p12">{{pickerInfoList[0].nameE}}</text> 36 <text class="p12">{{pickerInfoList[0].nameE}}</text>
43 </view> 37 </view>
44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 38 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 39 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 40 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
47 <image src="../../static/detail-tabicon.png" ></image> 41 <image src="../../static/detail-tabicon.png" ></image>
48 </picker> 42 </picker>
49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 43 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 44 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 45 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
52 <image src="../../static/detail-tabicon.png" ></image> 46 <image src="../../static/detail-tabicon.png" ></image>
53 </picker> 47 </picker>
54 </view> 48 </view>
55 </view> 49 </view>
56 <view class="picker" > 50 <view class="picker" >
57 <view class="picker-choice"> 51 <view class="picker-choice">
58 <view class="choice-left"> 52 <view class="choice-left">
59 <text class="p11">{{pickerInfoList[1].nameC}}</text> 53 <text class="p11">{{pickerInfoList[1].nameC}}</text>
60 <text class="p12">{{pickerInfoList[1].nameE}}</text> 54 <text class="p12">{{pickerInfoList[1].nameE}}</text>
61 </view> 55 </view>
62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 56 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 57 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 58 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
65 <image src="../../static/detail-tabicon.png" ></image> 59 <image src="../../static/detail-tabicon.png" ></image>
66 </picker> 60 </picker>
67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 61 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 62 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 63 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
70 <image src="../../static/detail-tabicon.png" ></image> 64 <image src="../../static/detail-tabicon.png" ></image>
71 </picker> 65 </picker>
72 </view> 66 </view>
73 </view> 67 </view>
74 <view class="picker" > 68 <view class="picker" >
75 <view class="picker-choice"> 69 <view class="picker-choice">
76 <view class="choice-left"> 70 <view class="choice-left">
77 <text class="p11">{{pickerInfoList[2].nameC}}</text> 71 <text class="p11">{{pickerInfoList[2].nameC}}</text>
78 <text class="p12">{{pickerInfoList[2].nameE}}</text> 72 <text class="p12">{{pickerInfoList[2].nameE}}</text>
79 </view> 73 </view>
80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 74 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 75 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 76 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
83 <image src="../../static/detail-tabicon.png" ></image> 77 <image src="../../static/detail-tabicon.png" ></image>
84 </picker> 78 </picker>
85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 79 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 80 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 81 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
88 <image src="../../static/detail-tabicon.png" ></image> 82 <image src="../../static/detail-tabicon.png" ></image>
89 </picker> 83 </picker>
90 </view> 84 </view>
91 </view> 85 </view>
92 <view class="picker" > 86 <view class="picker" >
93 <view class="picker-choice"> 87 <view class="picker-choice">
94 <view class="choice-left"> 88 <view class="choice-left">
95 <text class="p11">{{pickerInfoList[3].nameC}}</text> 89 <text class="p11">{{pickerInfoList[3].nameC}}</text>
96 <text class="p12">{{pickerInfoList[3].nameE}}</text> 90 <text class="p12">{{pickerInfoList[3].nameE}}</text>
97 </view> 91 </view>
98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 92 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 93 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 94 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
101 <image src="../../static/detail-tabicon.png" ></image> 95 <image src="../../static/detail-tabicon.png" ></image>
102 </picker> 96 </picker>
103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 97 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 98 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 99 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
106 <image src="../../static/detail-tabicon.png" ></image> 100 <image src="../../static/detail-tabicon.png" ></image>
107 </picker> 101 </picker>
108 </view> 102 </view>
109 </view> 103 </view>
110 <view class="picker" > 104 <view class="picker" >
111 <view class="picker-choice"> 105 <view class="picker-choice">
112 <view class="choice-left"> 106 <view class="choice-left">
113 <text class="p11">{{pickerInfoList[4].nameC}}</text> 107 <text class="p11">{{pickerInfoList[4].nameC}}</text>
114 </view> 108 </view>
115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 109 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
116 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 110 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
117 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> 111 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
118 <image src="../../static/detail-tabicon.png" ></image> 112 <image src="../../static/detail-tabicon.png" ></image>
119 </picker> 113 </picker>
120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 114 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
121 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 115 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
122 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> 116 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
123 <image src="../../static/detail-tabicon.png" ></image> 117 <image src="../../static/detail-tabicon.png" ></image>
124 </picker> 118 </picker>
125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 119 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
126 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 120 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
127 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> 121 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
128 <image src="../../static/detail-tabicon.png" ></image> 122 <image src="../../static/detail-tabicon.png" ></image>
129 </picker> 123 </picker>
130 </view> 124 </view>
131 </view> 125 </view>
132 <view class="confirm"> 126 <view class="confirm">
133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 127 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
134 <text>确认以上输入信息来源于我的验光数据!</text> 128 <text>确认以上输入信息来源于我的验光数据!</text>
135 </view> 129 </view>
136 </view> 130 </view>
137 131
138 </template> 132 </template>
139 <template v-else> 133 <template v-else>
140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> 134 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
141 <template v-if="item.nameC==='验光日期'"> 135 <template v-if="item.nameC==='验光日期'">
142 <text class="names">{{item.nameC}}</text> 136 <text class="names">{{item.nameC}}</text>
143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 137 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 138 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
145 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 139 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
146 </template> 140 </template>
147 <template v-else> 141 <template v-else>
148 <template v-if="item.nameC==='度数'"> 142 <template v-if="item.nameC==='度数'">
149 <text style="display: inline;">*</text> 143 <text style="display: inline;">*</text>
150 </template> 144 </template>
151 145
152 <text class="names">{{item.nameC}}</text> 146 <text class="names">{{item.nameC}}</text>
153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 147 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 148 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
155 </template> 149 </template>
156 </view> 150 </view>
157 </template> 151 </template>
158 </view> 152 </view>
159 </view> 153 </view>
160 154 <!-- 实用功能折叠框 -->
155 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
156 <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
157 <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
158 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
161 </view> 159 </view>
162 <view class="submit">立即结算</view> 160 <view class="submit">立即结算</view>
163 </view> 161 </view>
164 </template> 162 </template>
165 163
166 <script> 164 <script>
167 import MyCollapse from './compoents/MyCollapse.vue' 165 import MyCollapse from './compoents/MyCollapse.vue'
168 export default { 166 export default {
169 components: { 167 components: {
170 MyCollapse 168 MyCollapse
171 }, 169 },
172 data() { 170 data() {
173 return { 171 return {
174 count:1, 172 count:1,
175 disabled:false, 173 disabled:false,
176 price:180, 174 price:180,
177 // 实用功能参数 175 // 实用功能参数
178 funIsOpen:true, // 默认myCollapse开启 176 funIsOpen:true, // 默认myCollapse开启
179 funList: [ 177 funList: [
180 {"name":"防紫外线","isChioce": false,"key":1,"type": "fun"}, 178 {"name":"防紫外线","isChioce": false,"key":1,"type": "fun"},
181 {"name":"防蓝光","isChioce": false,"key":2,"type": "fun"}, 179 {"name":"防蓝光","isChioce": false,"key":2,"type": "fun"},
182 {"name":"智能变色","isChioce": false,"key":3,"type": "fun"}, 180 {"name":"智能变色","isChioce": false,"key":3,"type": "fun"},
183 {"name":"易清洁","isChioce": false,"key":4,"type": "fun"}, 181 {"name":"易清洁","isChioce": false,"key":4,"type": "fun"},
184 {"name":"防辐射","isChioce": false,"key":5,"type": "fun"}, 182 {"name":"防辐射","isChioce": false,"key":5,"type": "fun"},
185 {"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"}, 183 {"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"},
186 ], 184 ],
187 funContent:[], 185 funContent:[],
188 186
189 // 镜片种类参数 187 // 镜片种类参数
190 kindIsOpen:true, 188 kindIsOpen:true,
191 kindList1: [ 189 kindList1: [
192 {"name":"染色","isChioce":false,key:1,"type": "kind"}, 190 {"name":"染色","isChioce":false,key:1,"type": "kind"},
193 {"name":"渐变","isChioce":false,key:2,"type": "kind"}, 191 {"name":"渐变","isChioce":false,key:2,"type": "kind"},
194 ], 192 ],
195 kindList2: [ 193 kindList2: [
196 {"name":"JB234759","isChioce":false,key:3,"type": "kind"}, 194 {"name":"JB234759","isChioce":false,key:3,"type": "kind"},
197 {"name":"JB234759","isChioce":false,key:4,"type": "kind"}, 195 {"name":"JB234759","isChioce":false,key:4,"type": "kind"},
198 {"name":"JB234759","isChioce":false,key:5,"type": "kind"}, 196 {"name":"JB234759","isChioce":false,key:5,"type": "kind"},
199 {"name":"JB234759","isChioce":false,key:6,"type": "kind"}, 197 {"name":"JB234759","isChioce":false,key:6,"type": "kind"},
200 {"name":"JB234759","isChioce":false,key:7,"type": "kind"}, 198 {"name":"JB234759","isChioce":false,key:7,"type": "kind"},
201 ], 199 ],
202 kindContent:[], 200 kindContent:[],
203 // 材质选择 201 // 材质选择
204 maIsOpen:true, 202 maIsOpen:true,
205 maList1: [ 203 maList1: [
206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true}, 204 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
207 {"name":"特殊镜片","isChioce":false,key:2}, 205 {"name":"特殊镜片","isChioce":false,key:2},
208 ], 206 ],
209 maList2: [ 207 maList2: [
210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 208 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
211 {"name":"玻璃镜片","isChioce":false,key:4}, 209 {"name":"玻璃镜片","isChioce":false,key:4},
212 ], 210 ],
213 maContent:[], 211 maContent:[],
214 // 折射率参数 212 // 折射率参数
215 reIsOpen:true, 213 reIsOpen:true,
216 reList1: [ 214 reList1: [
217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true}, 215 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
218 {"name":"1.60","isChioce":false,key:2}, 216 {"name":"1.60","isChioce":false,key:2},
219 ], 217 ],
220 reList2: [ 218 reList2: [
221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 219 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
222 {"name":"1.67","isChioce":false,key:4}, 220 {"name":"1.67","isChioce":false,key:4},
223 {"name":"1.71","isChioce":false,key:5}, 221 {"name":"1.71","isChioce":false,key:5},
224 {"name":"1.74","isChioce":false,key:6}, 222 {"name":"1.74","isChioce":false,key:6},
225 ], 223 ],
226 reContent:[], 224 reContent:[],
227 // 验光参数 225 // 验光参数
228 opIsOpen:true, 226 opIsOpen:true,
229 tablist: { 227 tablist: {
230 // read: true, 228 // read: true,
231 // seeLong: false, 229 // seeLong: false,
232 confirm: false 230 confirm: false
233 }, 231 },
234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 232 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
235 // 度数相关数据 233 // 度数相关数据
236 pickerInfoList:[ 234 pickerInfoList:[
237 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, 235 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
238 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, 236 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
239 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, 237 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
240 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, 238 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
241 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} 239 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
242 ], 240 ],
243 241
244 } 242 }
245 }, 243 },
246 methods: { 244 methods: {
247 counter(isadd){ 245 counter(isadd){
248 if(isadd){ 246 if(isadd){
249 this.count++ 247 this.count++
250 }else{ 248 }else{
251 this.count <= 1? this.disabled = true:this.count-- 249 this.count <= 1? this.disabled = true:this.count--
252 } 250 }
253 }, 251 },
254 myCollapseChange(isopen){ 252 myCollapseChange(isopen){
255 // console.log(isopen) 253 // console.log(isopen)
256 this.opIsOpen = !isopen 254 this.opIsOpen = !isopen
257 }, 255 },
258 changeConfirm() { 256 changeConfirm() {
259 this.tablist.confirm = !this.tablist.confirm 257 this.tablist.confirm = !this.tablist.confirm
260 }, 258 },
261 259
262 bindPickerChange01: function(e) { 260 bindPickerChange01: function(e) {
263 this.pickerInfoList[0].nameIndex1 = e.target.value 261 this.pickerInfoList[0].nameIndex1 = e.target.value
264 }, 262 },
265 bindPickerChange02: function(e) { 263 bindPickerChange02: function(e) {
266 this.pickerInfoList[0].nameIndex2 = e.target.value 264 this.pickerInfoList[0].nameIndex2 = e.target.value
267 }, 265 },
268 266
269 bindPickerChange11: function(e) { 267 bindPickerChange11: function(e) {
270 this.pickerInfoList[1].nameIndex1 = e.target.value 268 this.pickerInfoList[1].nameIndex1 = e.target.value
271 }, 269 },
272 bindPickerChange12: function(e) { 270 bindPickerChange12: function(e) {
273 this.pickerInfoList[1].nameIndex2 = e.target.value 271 this.pickerInfoList[1].nameIndex2 = e.target.value
274 }, 272 },
275 273
276 bindPickerChange21: function(e) { 274 bindPickerChange21: function(e) {
277 this.pickerInfoList[2].nameIndex1 = e.target.value 275 this.pickerInfoList[2].nameIndex1 = e.target.value
278 }, 276 },
279 bindPickerChange22: function(e) { 277 bindPickerChange22: function(e) {
280 this.pickerInfoList[2].nameIndex2 = e.target.value 278 this.pickerInfoList[2].nameIndex2 = e.target.value
281 }, 279 },
282 280
283 bindPickerChange31: function(e) { 281 bindPickerChange31: function(e) {
284 this.pickerInfoList[3].nameIndex1 = e.target.value 282 this.pickerInfoList[3].nameIndex1 = e.target.value
285 }, 283 },
286 bindPickerChange32: function(e) { 284 bindPickerChange32: function(e) {
287 this.pickerInfoList[3].nameIndex2 = e.target.value 285 this.pickerInfoList[3].nameIndex2 = e.target.value
288 }, 286 },
289 287
290 bindPickerChange41: function(e) { 288 bindPickerChange41: function(e) {
291 this.pickerInfoList[4].nameIndex1 = e.target.value 289 this.pickerInfoList[4].nameIndex1 = e.target.value
292 }, 290 },
293 bindPickerChange42: function(e) { 291 bindPickerChange42: function(e) {
294 this.pickerInfoList[4].nameIndex2 = e.target.value 292 this.pickerInfoList[4].nameIndex2 = e.target.value
295 }, 293 },
296 bindPickerChange43: function(e) { 294 bindPickerChange43: function(e) {
297 this.pickerInfoList[4].nameIndex3 = e.target.value 295 this.pickerInfoList[4].nameIndex3 = e.target.value
298 }, 296 },
299 } 297 }
300 } 298 }
301 </script> 299 </script>
302 300
303 <style lang="scss" scoped> 301 <style lang="scss" scoped>
304 .content{ 302 .content{
305 width: 100%; 303 width: 100%;
306 background-color: #F2F2F2; 304 background-color: #F2F2F2;
307 display: flex; 305 display: flex;
308 flex-direction: column; 306 flex-direction: column;
309 align-items: center; 307 align-items: center;
310 } 308 }
311 309
312 .goods-info{ 310 .goods-info{
313 width: 100%; 311 width: 100%;
314 height: 272rpx; 312 height: 272rpx;
315 box-sizing: border-box; 313 box-sizing: border-box;
316 padding: 40rpx 40rpx 36rpx 36rpx; 314 padding: 40rpx 40rpx 36rpx 36rpx;
317 margin: 36rpx 0 18rpx 0; 315 margin: 36rpx 0 18rpx 0;
318 // margin-bottom: -18rpx; 316 // margin-bottom: -18rpx;
319 // margin-top: -36rpx; 317 // margin-top: -36rpx;
320 background: #FFFFFF; 318 background: #FFFFFF;
321 border-radius: 16rpx; 319 border-radius: 16rpx;
322 display: flex; 320 display: flex;
323 image{ 321 image{
324 width: 94px; 322 width: 94px;
325 height: 94px; 323 height: 94px;
326 margin-right: 28rpx; 324 margin-right: 28rpx;
327 } 325 }
328 .box-right{ 326 .box-right{
329 width: 458rpx; 327 width: 458rpx;
330 display: flex; 328 display: flex;
331 flex-direction: column; 329 flex-direction: column;
332 align-items: flex-start; 330 align-items: flex-start;
333 justify-content: space-between; 331 justify-content: space-between;
334 .p1 { 332 .p1 {
335 // font-family: PingFangSC-Regular; 333 // font-family: PingFangSC-Regular;
336 font-size: 14px; 334 font-size: 14px;
337 color: #333333; 335 color: #333333;
338 letter-spacing: -0.26px; 336 letter-spacing: -0.26px;
339 text-align: justify; 337 text-align: justify;
340 line-height: 18px; 338 line-height: 18px;
341 } 339 }
342 .p2 { 340 .p2 {
343 // font-family: PingFangSC-Regular; 341 // font-family: PingFangSC-Regular;
344 font-size: 10px; 342 font-size: 10px;
345 color: #999999; 343 color: #999999;
346 letter-spacing: -0.19px; 344 letter-spacing: -0.19px;
347 margin-top: -20rpx; 345 margin-top: -20rpx;
348 } 346 }
349 .priceBox{ 347 .priceBox{
350 display: flex; 348 display: flex;
351 flex-direction: row; 349 flex-direction: row;
352 justify-content: space-between; 350 justify-content: space-between;
353 width: 100%; 351 width: 100%;
354 .price{ 352 .price{
355 color: #FF6B4A; 353 color: #FF6B4A;
356 font-size: 28rpx; 354 font-size: 28rpx;
357 } 355 }
358 .counter{ 356 .counter{
359 display: flex; 357 display: flex;
360 flex-direction: row; 358 flex-direction: row;
361 justify-content: space-between; 359 justify-content: space-between;
362 font-size: 28rpx; 360 font-size: 28rpx;
363 color: #333333; 361 color: #333333;
364 width: 122rpx; 362 width: 122rpx;
365 .btn{ 363 .btn{
366 display: flex; 364 display: flex;
367 justify-content: center; 365 justify-content: center;
368 line-height: 32rpx; 366 line-height: 32rpx;
369 height: 32rpx; 367 height: 32rpx;
370 width: 32rpx; 368 width: 32rpx;
371 background-color: #F2F2F2; 369 background-color: #F2F2F2;
372 color: #CFCFCF; 370 color: #CFCFCF;
373 } 371 }
374 } 372 }
375 } 373 }
376 } 374 }
377 } 375 }
378 376
379 .goods-data{ 377 .goods-data{
380 width: 100%; 378 width: 100%;
381 box-sizing: border-box; 379 box-sizing: border-box;
382 padding: 37rpx 40rpx 0 40rpx; 380 padding: 37rpx 40rpx 0 40rpx;
383 background: #FFFFFF; 381 background: #FFFFFF;
384 border-radius: 12rpx; 382 border-radius: 12rpx;
385 margin-bottom: 92px; 383 margin-bottom: 92px;
386 .opCollapse{ 384 .opCollapse{
387 width: 100%; 385 width: 100%;
388 padding-bottom: 28rpx; 386 padding-bottom: 28rpx;
389 margin-top: 7px; 387 margin-top: 7px;
390 border-bottom: 1px solid #E9E9E9; 388 border-bottom: 1px solid #E9E9E9;
391 .head{ 389 .head{
392 display: flex; 390 display: flex;
393 justify-content: space-between; 391 justify-content: space-between;
394 height: 24px; 392 height: 24px;
395 // font-family: PingFangSC-Medium; 393 // font-family: PingFangSC-Medium;
396 font-size: 16px; 394 font-size: 16px;
397 color: #333333; 395 color: #333333;
398 letter-spacing: -0.3px; 396 letter-spacing: -0.3px;
399 text-align: justify; 397 text-align: justify;
400 line-height: 24px; 398 line-height: 24px;
401 margin-bottom: 18rpx; 399 margin-bottom: 18rpx;
402 .headRighted{ 400 .headRighted{
403 width: 0; 401 width: 0;
404 height: 0; 402 height: 0;
405 border-left: 4px solid transparent; 403 border-left: 4px solid transparent;
406 border-right: 4px solid transparent; 404 border-right: 4px solid transparent;
407 border-bottom: 4px solid #CFCFCF; 405 border-bottom: 4px solid #CFCFCF;
408 transform: scaleY(-1); 406 transform: scaleY(-1);
409 margin-top: 10px; 407 margin-top: 10px;
410 } 408 }
411 .headMid{ 409 .headMid{
412 // font-family: PingFangSC-Regular; 410 // font-family: PingFangSC-Regular;
413 font-size: 10px; 411 font-size: 10px;
414 color: #999999; 412 color: #999999;
415 letter-spacing: -0.19px; 413 letter-spacing: -0.19px;
416 margin-left: -120rpx; 414 margin-left: -120rpx;
417 } 415 }
418 .headRight{ 416 .headRight{
419 width: 0; 417 width: 0;
420 height: 0; 418 height: 0;
421 border-left: 4px solid transparent; 419 border-left: 4px solid transparent;
422 border-right: 4px solid transparent; 420 border-right: 4px solid transparent;
423 border-bottom: 4px solid #CFCFCF; 421 border-bottom: 4px solid #CFCFCF;
424 margin-top: 10px; 422 margin-top: 10px;
425 } 423 }
426 } 424 }
427 .body{ 425 .body{
428 // font-family: PingFangSC-Regular; 426 // font-family: PingFangSC-Regular;
429 font-size: 12px; 427 font-size: 12px;
430 color: #666666; 428 color: #666666;
431 letter-spacing: 0; 429 letter-spacing: 0;
432 .bodyBox{ 430 .bodyBox{
433 margin-top: 15px; 431 margin-top: 15px;
434 .names{ 432 .names{
435 // font-family: PingFangSC-Regular; 433 // font-family: PingFangSC-Regular;
436 font-size: 12px; 434 font-size: 12px;
437 color: #151515; 435 color: #151515;
438 letter-spacing: 0; 436 letter-spacing: 0;
439 text-align: justify; 437 text-align: justify;
440 line-height: 17px; 438 line-height: 17px;
441 margin-left: 5px; 439 margin-left: 5px;
442 margin-right: 10px; 440 margin-right: 10px;
443 } 441 }
444 text{ 442 text{
445 // font-family: PingFangSC-Regular; 443 // font-family: PingFangSC-Regular;
446 font-size: 12px; 444 font-size: 12px;
447 color: #666666; 445 color: #666666;
448 letter-spacing: 0; 446 letter-spacing: 0;
449 text-align: justify; 447 text-align: justify;
450 } 448 }
451 } 449 }
452 450
453 } 451 }
454 } 452 }
455 453
456 } 454 }
457 455
458 .goods-form { 456 .goods-form {
459 display: flex; 457 display: flex;
460 flex-direction: column; 458 flex-direction: column;
461 align-items: center; 459 align-items: center;
462 justify-content: center; 460 justify-content: center;
463 background-color: #fff; 461 background-color: #fff;
464 width: 100%; 462 width: 100%;
465 463
466 .p1 { 464 .p1 {
467 font-size: 16px; 465 font-size: 16px;
468 color: #333333; 466 color: #333333;
469 letter-spacing: -0.3px; 467 letter-spacing: -0.3px;
470 text-align: justify; 468 text-align: justify;
471 line-height: 24px; 469 line-height: 24px;
472 margin: 4px 0; 470 margin: 4px 0;
473 471
474 } 472 }
475 .p2 { 473 .p2 {
476 font-size: 12px; 474 font-size: 12px;
477 color: #999999; 475 color: #999999;
478 letter-spacing: -0.23px; 476 letter-spacing: -0.23px;
479 margin-bottom: 18rpx; 477 margin-bottom: 18rpx;
480 } 478 }
481 image{ 479 image{
482 width: 28rpx; 480 width: 28rpx;
483 height: 26rpx; 481 height: 26rpx;
484 } 482 }
485 .confirm { 483 .confirm {
486 display: flex; 484 display: flex;
487 align-items: center; 485 align-items: center;
488 font-size: 12px; 486 font-size: 12px;
489 color: #666666; 487 color: #666666;
490 letter-spacing: -0.23px; 488 letter-spacing: -0.23px;
491 width: 684rpx; 489 width: 684rpx;
492 image{ 490 image{
493 margin-right:25rpx; 491 margin-right:25rpx;
494 } 492 }
495 } 493 }
496 .picker{ 494 .picker{
497 display: flex; 495 display: flex;
498 flex-direction: column; 496 flex-direction: column;
499 justify-content: center; 497 justify-content: center;
500 align-items: center; 498 align-items: center;
501 width: 100%; 499 width: 100%;
502 image{ 500 image{
503 width: 10px; 501 width: 10px;
504 height: 10px; 502 height: 10px;
505 margin-right: 5px; 503 margin-right: 5px;
506 } 504 }
507 .picker-choice{ 505 .picker-choice{
508 display: flex; 506 display: flex;
509 width: 684rpx; 507 width: 684rpx;
510 align-items: center; 508 align-items: center;
511 margin-bottom: 40rpx; 509 margin-bottom: 40rpx;
512 .choice-left{ 510 .choice-left{
513 width: 210rpx; 511 width: 210rpx;
514 .p11 { 512 .p11 {
515 font-size: 14px; 513 font-size: 14px;
516 color: #333333; 514 color: #333333;
517 letter-spacing: -0.26px; 515 letter-spacing: -0.26px;
518 text-align: justify; 516 text-align: justify;
519 line-height: 24px; 517 line-height: 24px;
520 // margin-right: 10px; 518 // margin-right: 10px;
521 } 519 }
522 .p12 { 520 .p12 {
523 font-size: 10px; 521 font-size: 10px;
524 color: #3F3F3F; 522 color: #3F3F3F;
525 letter-spacing: -0.19px; 523 letter-spacing: -0.19px;
526 text-align: justify; 524 text-align: justify;
527 line-height: 24px; 525 line-height: 24px;
528 } 526 }
529 527
530 528
531 } 529 }
532 .p13 { 530 .p13 {
533 font-size: 10px; 531 font-size: 10px;
534 color: #999999; 532 color: #999999;
535 letter-spacing: -0.19px; 533 letter-spacing: -0.19px;
536 margin-right: 10px; 534 margin-right: 10px;
537 } 535 }
538 .p13-date { 536 .p13-date {
539 font-size: 10px; 537 font-size: 10px;
540 color: #999999; 538 color: #999999;
541 letter-spacing: -0.19px; 539 letter-spacing: -0.19px;
542 margin-right: 5px; 540 margin-right: 5px;
543 } 541 }
544 .p14 { 542 .p14 {
545 font-size: 14px; 543 font-size: 14px;
546 color: #666666; 544 color: #666666;
547 letter-spacing: -0.26px; 545 letter-spacing: -0.26px;
548 text-align: center; 546 text-align: center;
549 width: 124rpx; 547 width: 124rpx;
550 border-bottom: 1px solid #CFCFCF; 548 border-bottom: 1px solid #CFCFCF;
551 } 549 }
552 550
553 } 551 }
554 } 552 }
555 } 553 }
556 554
557 .submit{ 555 .submit{
558 width: 100%; 556 width: 100%;
559 height: 112rpx; 557 height: 112rpx;
560 background: #FF6B4A; 558 background: #FF6B4A;
561 position: fixed; 559 position: fixed;
562 bottom: 0; 560 bottom: 0;
563 text-align: center; 561 text-align: center;
564 line-height: 112rpx; 562 line-height: 112rpx;
565 // font-family: PingFangSC-Regular; 563 // font-family: PingFangSC-Regular;
566 font-size: 16px; 564 font-size: 16px;
567 color: #FFFFFF; 565 color: #FFFFFF;
568 letter-spacing: -0.3px; 566 letter-spacing: -0.3px;
src/pages/index/index.vue
Diff comments   View file @51a5fe4
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
8 v-model="searchText"
9 class="searchIpt"
10 placeholder="老花镜"
11 confirm-type="search"
12 @blur="searchKey"
13 />
8 </view> 14 </view>
9 15
10 <!-- 筛选栏--> 16 <!-- 筛选栏-->
11 <view class="screenBar"> 17 <!-- <view class="screenBar">
12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> 18 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
13 <view 19 <view
14 class="screenItem" 20 class="screenItem"
15 v-bind:class="{ active: current === item.current }" 21 v-bind:class="{ active: current === item.current }"
16 v-if="item.current === 2" 22 v-if="item.current === 2"
17 @click="dropDown" 23 @click="dropDown"
18 > 24 >
19 {{ item.text }} 25 {{ item.text }}
20 <icon type="info" size="14"></icon> 26 <icon type="info" size="14"></icon>
21 </view> 27 </view>
22 <view 28 <view
23 class="screenItem" 29 class="screenItem"
24 v-bind:class="{ active: current === item.current }" 30 v-bind:class="{ active: current === item.current }"
25 v-if="item.current === 4" 31 v-if="item.current === 4"
26 @click="showDrawer('showRight')" 32 @click="showDrawer('showRight')"
27 > 33 >
28 {{ item.text }} 34 {{ item.text }}
29 <icon type="info" size="14"></icon> 35 <icon type="info" size="14"></icon>
30 </view> 36 </view>
31 <view v-if="item.current !== 2&&item.current!==4"> 37 <view v-if="item.current !== 2&&item.current!==4">
32 <view 38 <view
33 class="screenItem" 39 class="screenItem"
34 v-bind:class="{ active: current === item.current }" 40 v-bind:class="{ active: current === item.current }"
35 >{{ item.text }}</view> 41 >{{ item.text }}</view>
36 </view> 42 </view>
37 </view> 43 </view>
38 </view> 44 </view>-->
39 </view> 45 </view>
40 <Uni-drawer 46 <Uni-drawer
41 ref="showRight" 47 ref="showRight"
42 mask="true" 48 mask="true"
43 maskClick="true" 49 maskClick="true"
44 mode="right" 50 mode="right"
45 :width="320" 51 :width="320"
46 @change="change($event,'showRight')" 52 @change="change($event,'showRight')"
47 > 53 >
48 <view class="close"> 54 <view class="close">
49 <view @click="closeDrawer('showRight')"> 55 <view @click="closeDrawer('showRight')">
50 <text class="word-btn-white">关闭</text> 56 <text class="word-btn-white">关闭</text>
51 </view> 57 </view>
52 </view> 58 </view>
53 </Uni-drawer> 59 </Uni-drawer>
54 60
55 <!-- 筛选菜单--> 61 <!-- 筛选菜单-->
56 <view class="content-wrap"> 62 <view class="content-wrap">
57 <view> 63 <view>
58 <HMfilterDropdown 64 <HMfilterDropdown
59 :filterData="filterData" 65 :filterData="categoryList"
60 :defaultSelected="filterDropdownValue" 66 :defaultSelected="filterDropdownValue"
61 :updateMenuName="true" 67 :updateMenuName="true"
62 @confirm="confirm" 68 @search="search"
69 @getList="getList"
63 data-format="Object" 70 data-format="Object"
64 ></HMfilterDropdown> 71 ></HMfilterDropdown>
65 <!-- 商品列表 --> 72 <!-- 商品列表 -->
66 <view class="goods-list"> 73 <view class="goods-list">
67 <view class="product-list"> 74 <view class="product-list">
68 <view class="product" v-for="(goods) in goodsList" :key="goods.id"> 75 <view class="product" v-for="(goods) in goodsList" :key="goods.id">
69 <Card :goods="goods"></Card> 76 <Card :goods="goods"></Card>
70 </view> 77 </view>
71 </view> 78 </view>
72 <view class="loading-text">{{loadingText}}</view> 79 <view class="loading-text">{{loadingText}}</view>
73 </view> 80 </view>
74 </view> 81 </view>
75 </view> 82 </view>
76 </view> 83 </view>
77 </template> 84 </template>
78 85
79 <script> 86 <script>
80 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; 87 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
81 import Card from "@/components/CommodityCard/CommodityCard.vue"; 88 import Card from "@/components/CommodityCard/CommodityCard.vue";
82 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; 89 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
83 import data from "@/common/data.js"; //筛选菜单数据 90 import data from "@/common/data.js"; //筛选菜单数据
84 import store from '@/store'; 91 import store from '@/store';
85 92
86 export default { 93 export default {
87 components: { 94 components: {
88 UniDrawer: UniDrawer, 95 UniDrawer: UniDrawer,
89 HMfilterDropdown: HMfilterDropdown, 96 HMfilterDropdown: HMfilterDropdown,
90 Card: Card 97 Card: Card
91 }, 98 },
92 data() { 99 data() {
93 return { 100 return {
94 screenItems: [ 101 // screenItems: [
95 { current: 0, text: "全部", hasIcon: false }, 102 // { current: 0, text: "全部", hasIcon: false },
96 { current: 1, text: "销量", hasIcon: false }, 103 // { current: 1, text: "销量", hasIcon: false },
97 { current: 2, text: "价格", hasIcon: true }, 104 // { current: 2, text: "价格", hasIcon: true },
98 { current: 3, text: "折扣", hasIcon: false }, 105 // { current: 3, text: "折扣", hasIcon: false },
99 { current: 4, text: "筛选", hasIcon: true } 106 // { current: 4, text: "筛选", hasIcon: true }
100 ], 107 // ],
101 current: 0, 108 // current: 0,
102 showRight: false, 109 // showRight: false,
103 indexArr: "", 110 indexArr: "",
104 valueArr: "", 111 valueArr: "",
105 loadingText: "~~到底了~~", 112 loadingText: "~~到底了~~",
106 filterDropdownValue: [], 113 filterDropdownValue: [],
107 filterData: [], 114 filterData: [],
115 searchText: '',
108 // goodsList:[ 116 // goodsList:[
109 // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, 117 // { 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 }, 118 // { 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 }, 119 // { 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 }, 120 // { 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 }, 121 // { 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 }, 122 // { 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 }, 123 // { 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 }, 124 // { 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 }, 125 // { 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 } 126 // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
119 // ], 127 // ],
120 }; 128 };
121 }, 129 },
122 computed: { 130 computed: {
123 goodsList() { 131 goodsList() {
124 // 也可以从 getters 获取 132 // 也可以从 getters 获取
125 return this.$store.state.test.list; 133 return this.$store.state.index.list;
126 }, 134 },
127 categoryList(){ 135 categoryList(){
128 // console.log(this.$store.state.categoryOrder.categoryList); 136 return this.$store.state.index.categoryList;
129 const categoryList = this.$store.state.categoryOrder.categoryList
130 let newData = [
131 {
132 "name":'产品',
133 "type": 'filter',
134 "submenu": [{
135 "submenu": [
136
137 ]
138 },
139 ],
140 },
141 {
142 "name":'品牌',
143 "type": 'filter',
144 "submenu": [{
145 "submenu": [
146 ]
147 },
148 ]
149 },
150 {
151 "name":'使用场景',
152 "type": 'filter',
153 "submenu": [{
154 "submenu": [
155 ]
156 }
157 ]
158 },
159 {
160 "name":'材质',
161 "type": 'filter',
162 "submenu": [{
163 "submenu": [
164 ]
165 }
166 ]
167 },
168 {
169 "name":'筛选',
170 "type": 'filter',
171 "submenu": [{
172 // "name": "折扣(多选)",
173 "submenu": [
174 ]
175 }
176 ]
177 }
178 ]
179 // newData[0].submenu[0].submenu = categoryList[0].submenu 137 // newData[0].submenu[0].submenu = categoryList[0].submenu
180 // newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu 138 // newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
181 // newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu 139 // newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
182 // newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu 140 // newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
183 // newData[4].submenu[0] = categoryList[3] 141 // newData[4].submenu[0] = categoryList[3]
184 this.filterData = newData; 142 this.filterData = newData;
185 // this.filterData = categoryList; 143 // this.filterData = categoryList;
186 } 144 },
187
188 }, 145 },
189 filters: { 146 filters: {
190 outData(value) { 147 outData(value) {
191 return JSON.stringify(value); 148 return JSON.stringify(value);
192 } 149 }
193 }, 150 },
194 onLoad: function() { 151 onLoad() {
195 store.dispatch('test/fetch'); 152 console.log('onload')
196 store.dispatch('categoryOrder/fetch') 153 store.dispatch('index/category');
197 154 // this.getList();
198 // 登陆 155 store.dispatch('index/list');
199 // store.dispatch('user/login')
200
201 }, 156 },
202 methods: { 157 methods: {
203 showDrawer(e) { 158 showDrawer(e) {
204 this.$refs[e].open(); 159 this.$refs[e].open();
205 }, 160 },
161 getList() {
162 store.dispatch('index/list');
163 },
164 // search(params) {
165 // this.$store.index.
166 // },
206 closeDrawer(e) { 167 closeDrawer(e) {
207 this.$refs[e].close(); 168 this.$refs[e].close();
208 }, 169 },
209 change(e, type) { 170 change(e, type) {
210 this[type] = e; 171 this[type] = e;
211 }, 172 },
212 onClickItem(e) { 173 onClickItem(e) {
213 if (this.current !== e) { 174 if (this.current !== e) {
214 this.current = e; 175 this.current = e;
215 } 176 }
216 }, 177 },
217 dropDown() { 178 dropDown() {
218 console.log("下拉"); 179 console.log("下拉");
219 }, 180 },
181 searchKey(e) {
182 const { value: keyword } = e.detail;
183 this.keyWords = keyword;
184 console.log('e', e, keyword);
185 store.dispatch('index/search', {
186 params: {},
187 keyword,
188 });
189 },
220 //接收菜单结果 190 //接收菜单结果
221 confirm(e) { 191 search(e) {
222 this.indexArr = e.index; 192 console.log("修改菜单-----", e, this.categoryList);
223 this.valueArr = e.value; 193 const { on, value, index } = e;
224 return; 194 let params = {}
225 console.log("修改菜单"); 195 if(on[0] === 1) {
226 this.filterData[4].submenu[1] = { 196 this.searchText = '';
227 name: "项目2", 197 store.dispatch('index/list');
228 submenu: [] 198 } else {
229 }; 199 for(let i = 1; i<=on.length; i++){ // on[0]是全部
200 if(on[i] === 1) { // 若该选项被选中
201 console.log('---', `${this.categoryList[i].value}`);
202 params[`${this.categoryList[i].value}`] = value[i][0];
203 }
204 }
205 store.dispatch('index/search', {
206 params,
207 keyword: this.keyWords
208 });
209 }
230 } 210 }
231 }, 211 },
232 212
233 }; 213 };
234 </script> 214 </script>
235 215
236 <style lang="scss"> 216 <style lang="scss">
237 .content { 217 .content {
238 display: flex; 218 display: flex;
239 flex-direction: column; 219 flex-direction: column;
240 align-items: center; 220 align-items: center;
241 justify-content: center; 221 justify-content: center;
242 background-color: #f7f6f6; 222 background-color: #f7f6f6;
243 } 223 }
244 .header { 224 .header {
245 display: flex; 225 display: flex;
246 flex-direction: column; 226 flex-direction: column;
247 align-items: center; 227 align-items: center;
248 justify-content: center; 228 justify-content: center;
249 background-color: #f7f6f6; 229 background-color: #f7f6f6;
250 height: 178rpx; 230 height: 178rpx;
251 width: 100%; 231 width: 100%;
252 z-index: 999; 232 z-index: 999;
253 position: fixed; 233 position: fixed;
254 top: 0; 234 top: 0;
255 left: 0; 235 left: 0;
256 } 236 }
257 .searchBar { 237 .searchBar {
258 width: 670rpx; 238 width: 670rpx;
259 display: flex; 239 display: flex;
260 justify-content: center; 240 justify-content: center;
261 align-items: center; 241 align-items: center;
262 box-sizing: border-box; 242 box-sizing: border-box;
263 padding: 0rpx 16rpx; 243 padding: 0rpx 16rpx;
264 border: 1px solid #ff6b4a; 244 border: 1px solid #ff6b4a;
265 border-radius: 8rpx; 245 border-radius: 8rpx;
266 background-color: #ffffff; 246 background-color: #ffffff;
267 } 247 }
268 248
269 .searchIpt { 249 .searchIpt {
270 height: 68rpx; 250 height: 68rpx;
271 width: 670rpx; 251 width: 670rpx;
272 padding: 16rpx; 252 padding: 16rpx;
273 font-size: 28rpx; 253 font-size: 28rpx;
274 box-sizing: border-box; 254 box-sizing: border-box;
275 } 255 }
276 .screenBar { 256 .screenBar {
277 width: 670rpx; 257 width: 670rpx;
278 height: 110rpx; 258 height: 110rpx;
279 display: flex; 259 display: flex;
280 flex-direction: row; 260 flex-direction: row;
281 justify-content: space-between; 261 justify-content: space-between;
282 align-items: center; 262 align-items: center;
283 color: #333333; 263 color: #333333;
284 font-size: 32rpx; 264 font-size: 32rpx;
285 } 265 }
286 .active { 266 .active {
287 color: #ff6b4a; 267 color: #ff6b4a;
288 } 268 }
289 .screenItem { 269 .screenItem {
290 display: flex; 270 display: flex;
291 justify-content: center; 271 justify-content: center;
292 align-items: center; 272 align-items: center;
293 } 273 }
294 .content-wrap { 274 .content-wrap {
295 width: 100%; 275 width: 100%;
296 background-color: #ffffff; 276 background-color: #ffffff;
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @51a5fe4
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current === order.orderType" > 3 <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)">
4 <view class="cardHeader"> 4 <view class="cardHeader">
5 <text class="orderId">订单号：{{order.orderId}}</text> 5 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
6 <text class="orderType" v-if="order.orderType===1">待付款</text> 6 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
7 <text class="orderType" v-if="order.orderType===2">待发货</text> 7 <text class="orderType" v-if="status=='0'">待付款</text>
8 <text class="orderType" v-if="order.orderType === 3">待收货</text> 8 <text class="orderType" v-if="status=='1'">待收货</text>
9 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 9 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
10 <text class="orderType" v-if="order.orderType === 5">已完成</text> 10 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
11 </view> 11 </view>
12 <view class="orderCardInfo"> 12 <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
13 <image :src="order.img" mode="aspectFill"></image> 13 <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
14 <view class="infoText"> 14 <view class="infoText">
15 <view class="orderName">{{order.name}}</view> 15 <view class="orderName">{{orderInfo.p_name}}</view>
16 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 16 <view class="orderDescrib">{{orderInfo.p_name}}</view>
17 <view class="infoText-bottom"> 17 <view class="infoText-bottom">
18 <view class="markPrice">{{order.price}}</view> 18 <view class="markPrice">{{orderInfo.nowPrice}}</view>
19 <view class="buy-num">X{{order.buyNum}}</view> 19 <view class="buy-num">X {{orderInfo.num}}</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 23 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
24 <view class="btns" v-if="order.orderType === 1"> 24 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
25 <view class="btn-type1">申请退款</view> 25 <view class="btns" v-if="status == '0'">
26 <view class="btn-type1" >取消订单</view>
26 <view class="btn-type2">去支付</view> 27 <view class="btn-type2">去支付</view>
27 </view> 28 </view>
28 <view class="btns" v-if="order.orderType === 0"> 29 <view class="btns" v-if="status == '1'">
29 <view class="btn-type1">再次购买</view> 30 <view class="btn-type2">确认收货</view>
30 </view> 31 </view>
32 <view class="btns" v-if="status == '2'">
33 <view class="btn-type2">再次购买</view>
34 </view>
35 <!-- <view class="btns" v-if="status == '3'">
36 <view class="btn-type2">再次购买</view>
37 </view> -->
31 </view> 38 </view>
32 <view class="card" v-if="current === 0" > 39 <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
33 <view class="cardHeader"> 40 <view class="cardHeader">
34 <text class="orderId">订单号：{{order.orderId}}</text> 41 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
35 <text class="orderType" v-if="order.orderType===1">待付款</text> 42 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
36 <text class="orderType" v-if="order.orderType===2">待发货</text> 43 <text class="orderType" v-if="status=='0'">待付款</text>
37 <text class="orderType" v-if="order.orderType === 3">待收货</text> 44 <text class="orderType" v-if="status=='1'">待收货</text>
38 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 45 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
46 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
39 </view> 47 </view>
40 <view class="orderCardInfo"> 48 <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
41 <image :src="order.img" mode="aspectFill"></image> 49 <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
42 <view class="infoText"> 50 <view class="infoText">
43 <view class="orderName">{{order.name}}</view> 51 <view class="orderName">{{orderInfo.p_name}}</view>
44 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 52 <view class="orderDescrib">{{orderInfo.p_name}}</view>
45 <view class="infoText-bottom"> 53 <view class="infoText-bottom">
46 <view class="markPrice">{{order.price}}</view> 54 <view class="markPrice">{{orderInfo.nowPrice}}</view>
47 <view class="buy-num">X{{order.buyNum}}</view> 55 <view class="buy-num">X {{orderInfo.num}}</view>
48 </view> 56 </view>
49 </view> 57 </view>
50 </view> 58 </view>
51 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 59 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
52 <view class="btns" v-if="order.orderType === 1"> 60 <view class="btns" v-if="status == '0'">
53 <view class="btn-type1" @click="toRefundment">申请退款</view> 61 <view class="btn-type1" >取消订单</view>
54 <view class="btn-type2">去支付</view> 62 <view class="btn-type2">去支付</view>
55 </view> 63 </view>
56 <view class="btns" v-if="order.orderType === 0"> 64 <view class="btns" v-if="status == '1'">
57 <view class="btn-type1">再次购买</view> 65 <view class="btn-type2">确认收货</view>
66 </view>
67 <view class="btns" v-if="status == '2'">
68 <view class="btn-type2">再次购买</view>
58 </view> 69 </view>
70 <!-- <view class="btns" v-if="status == '3'">
71 <view class="btn-type2">再次购买</view>
72 </view> -->
59 </view> 73 </view>
60 </view> 74 </view>
61 </template> 75 </template>
62 76
63 <script> 77 <script>
64 export default { 78 export default {
65 props: { 79 props: {
66 /** 80 /**
67 * 订单数据 81 * 订单数据
68 */ 82 */
69 order: { 83 order: {
70 orderId: Number, 84 // orderId: Number,
71 img: String, 85 // img: String,
72 name: String, 86 // name: String,
73 originCost:String, 87 // originCost:String,
74 price: String, 88 // price: String,
75 orderType:Number, 89 // orderType:Number,
76 buyNum:Number 90 // buyNum:Number,
91 finished_time: null,
92 is_refound: String,
93 mch_id: String,
94 money_of_dcw: String,
95 money_of_partner: String,
96 money_of_shop: String,
97 orderJudge: Boolean,
98 order_info: {
99 address:{
100 cityName: String,
101 countyName: String,
102 detailInfo: String,
103 errMsg: String,
104 nationalCode: String,
105 postalCode: String,
106 provinceName: String,
107 telNumber: String,
108 userName: String,
109 },
110 cartinfo: ["127"],
111 keyname: "330_1588911391",
112 lefttime: Number,
113 list:[
114 {
115 cart_id: "127",
116 imgUrl: String,
117 img_index_url: null,
118 memo: String,
119 mp_id: String,
120 nowPrice: String,
121 num: String,
122 oldPrice: Number,
123 p_discount: String,
124 p_name: String,
125 p_root_index: String,
126 p_sale_price: String,
127 peopleName: String,
128 pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"],
129 pid: String,
130 sk_id: String,
131 }
132 ],
133 orderDesc: String,
134 total_fee: Number,
135 },
136 partner_uid: String,
137 pay_cate: String,
138 pay_id: String,
139 pay_time: String,
140 pay_wood_desc: String,
141 pay_wood_id: String,
142 prepay_id: String,
143 re_check_staus: String,
144 shopid: String,
145 split_userid: String,
146 status: String,
147 // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价
148 total_fee: String,
149 uid: String,
77 }, 150 },
78 /** 151 /**
79 * 当前选择 152 * 当前选择
80 */ 153 */
81 current:Number 154 current:Number
82 155
83 }, 156 },
84 onLoad() { 157 created() {
85 // console.log('dd'); 158 console.log(this.order);
86 console.log('order', this.props.order); 159 // console.log(this.order.status );
160 // console.log(this.current);
161 },
162 computed:{
163 status(){
164 return this.order.status
165 },
166 orderInfoList(){
167 return this.order.order_info[0]
168 }
87 }, 169 },
88 data() { 170 data() {
89 return { 171 return {
90 }; 172 };
91 }, 173 },
92 methods:{ 174 methods:{
93 toRefundment(){ 175 toRefundment(){
94 uni.navigateTo({ 176 uni.navigateTo({
95 url: '../refundment/refundment', 177 url: '../refundment/refundment',
96 success: res => {}, 178 success: res => {},
97 fail: () => {}, 179 fail: () => {},
98 complete: () => {} 180 complete: () => {}
99 }); 181 });
182 },
183 toOrderInfo(status,payId){
184 console.log(status,payId)
185 switch(status){
186 // 0待付款 1待收货 2已收货 3 已评价
187 case '0':
188 uni.navigateTo({
189 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
190 fail(errMsg) {
191 console.log(errMsg)
192 }
193 })
194 break;
195 case '1':
196 uni.navigateTo({
197 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
198 fail(errMsg) {
199 console.log(errMsg)
200 }
201 })
202
203 break;
204 case '2 || 3':
205 uni.navigateTo({
206 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
207 fail(errMsg) {
208 console.log(errMsg)
209 }
210 })
211
212 break;
213
214
215 default:
216 break;
217
218 }
100 } 219 }
101 } 220 }
102 } 221 }
103 </script> 222 </script>
104 223
105 <style lang="scss"> 224 <style lang="scss">
106 .card{ 225 .card{
107 width: 670rpx; 226 width: 670rpx;
108 height: 478rpx; 227 height: 478rpx;
109 background: #FFFFFF; 228 background: #FFFFFF;
110 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); 229 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
111 border-radius: 8px; 230 border-radius: 8px;
112 border-radius: 8px; 231 border-radius: 8px;
113 margin-top: 20rpx; 232 margin-top: 20rpx;
114 padding: 40rpx; 233 padding: 40rpx;
115 box-sizing: border-box; 234 box-sizing: border-box;
116 .cardHeader{ 235 .cardHeader{
117 width: 100%; 236 width: 100%;
118 height: 40rpx; 237 height: 40rpx;
119 display: flex; 238 display: flex;
120 justify-content: space-between; 239 justify-content: space-between;
121 align-items: center; 240 align-items: center;
122 .orderId{ 241 .orderId{
123 font-size: 12px; 242 font-size: 12px;
124 color: #999999; 243 color: #999999;
125 } 244 }
126 .orderType{ 245 .orderType{
127 font-size: 14px; 246 font-size: 14px;
128 color: #FF6B4A; 247 color: #FF6B4A;
129 } 248 }
130 } 249 }
131 .orderCardInfo{ 250 .orderCardInfo{
132 width: 100%; 251 width: 100%;
133 height: 188rpx; 252 height: 188rpx;
134 display: flex; 253 display: flex;
135 flex-direction: row; 254 flex-direction: row;
136 justify-content: space-between; 255 justify-content: space-between;
137 align-items: center; 256 align-items: center;
138 margin-top: 40rpx; 257 margin-top: 40rpx;
139 image{ 258 image{
140 height: 188rpx; 259 height: 188rpx;
141 width: 188rpx; 260 width: 188rpx;
142 margin-right: 24rpx; 261 margin-right: 24rpx;
143 } 262 }
144 .infoText{ 263 .infoText{
145 display: flex; 264 display: flex;
146 flex-direction: column; 265 flex-direction: column;
147 justify-content: space-between; 266 justify-content: space-between;
148 align-items: flex-start; 267 align-items: flex-start;
149 height: 188rpx; 268 height: 188rpx;
269 width: 368rpx;
150 } 270 }
151 .orderName{ 271 .orderName{
152 font-size: 14px; 272 font-size: 14px;
153 color: #333333; 273 color: #333333;
274 display: -webkit-box;
275 overflow: hidden;
276 -webkit-box-orient: vertical;
277 -webkit-line-clamp: 2;
154 } 278 }
155 .orderDescrib{ 279 .orderDescrib{
156 font-size: 12px; 280 font-size: 12px;
157 color: #999999; 281 color: #999999;
282 display: -webkit-box;
283 overflow: hidden;
284 -webkit-box-orient: vertical;
285 -webkit-line-clamp: 2;
158 } 286 }
159 .infoText-bottom{ 287 .infoText-bottom{
160 display: flex; 288 display: flex;
161 flex-direction: row; 289 flex-direction: row;
162 justify-content: space-between; 290 justify-content: flex-start;
163 align-items: center; 291 align-items: center;
164 width: 100%; 292 width: 100%;
165 .markPrice{ 293 .markPrice{
166 font-size: 14px; 294 font-size: 14px;
167 color: #FF6B4A; 295 color: #FF6B4A;
296 margin-right: 20rpx;
168 } 297 }
169 .buy-num{ 298 .buy-num{
170 font-size: 12px; 299 font-size: 12px;
171 color: #999999; 300 color: #999999;
172 } 301 }
173 } 302 }
174 } 303 }
175 .payPrice{ 304 .payPrice{
176 text-align: right; 305 text-align: right;
177 margin: 20rpx 0; 306 margin: 20rpx 0;
178 font-size: 14px; 307 font-size: 14px;
179 color: #333333; 308 color: #333333;
180 .priceNum{ 309 .priceNum{
181 font-size: 14px; 310 font-size: 14px;
182 color: #FF6B4A; 311 color: #FF6B4A;
183 } 312 }
184 } 313 }
185 .btns{ 314 .btns{
186 display: flex; 315 display: flex;
187 justify-content: flex-end; 316 justify-content: flex-end;
188 align-items: center; 317 align-items: center;
189 .btn-type1{ 318 .btn-type1{
190 height: 48rpx; 319 height: 48rpx;
191 width: 156rpx; 320 width: 156rpx;
192 border: 1px solid #FF6B4A; 321 border: 1px solid #FF6B4A;
193 border-radius: 12px; 322 border-radius: 12px;
194 border-radius: 12px; 323 border-radius: 12px;
195 text-align: center; 324 text-align: center;
196 line-height: 48rpx; 325 line-height: 48rpx;
197 font-size: 12px; 326 font-size: 12px;
198 color: #FF6B4A; 327 color: #FF6B4A;
199 } 328 }
200 .btn-type2{ 329 .btn-type2{
201 height: 48rpx; 330 height: 48rpx;
202 width: 140rpx; 331 width: 140rpx;
203 background: #FF6B4A; 332 background: #FF6B4A;
204 border-radius: 12px; 333 border-radius: 12px;
205 border-radius: 12px; 334 border-radius: 12px;
206 text-align: center; 335 text-align: center;
207 line-height: 48rpx; 336 line-height: 48rpx;
208 font-size: 12px; 337 font-size: 12px;
209 color: #FFFFFF; 338 color: #FFFFFF;
210 margin-left: 20rpx; 339 margin-left: 20rpx;
211 } 340 }
212 } 341 }
213 } 342 }
214 </style> 343 </style>
215 344
src/pages/myOrder/myOrder.vue
Diff comments   View file @51a5fe4
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 <view class="screenBar"> 9 <view class="screenBar">
10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > 10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
12 </view> 12 </view>
13 </view> 13 </view>
14 </view> 14 </view>
15 <view class="orderList" > 15 <view class="orderList" >
16 <view 16 <view
17 v-for="(order) in orderList" 17 v-for="(order) in orderList"
18 :key="order.orderId" 18 :key="order.orderId"
19 > 19 >
20 <OrderCard :order = "order" :current="current"></OrderCard> 20 <OrderCard :order = "order" :current="current"></OrderCard>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="footer">已显示全部</view> 23 <view class="footer" >没有更多订单了，去商城看看吧~</view>
24 </view> 24 </view>
25 </template> 25 </template>
26 <script> 26 <script>
27 import OrderCard from './components/OrderCard.vue'; 27 import OrderCard from './components/OrderCard.vue';
28 import store from '@/store'; 28 import store from '@/store';
29 29
30 export default { 30 export default {
31 components:{ 31 components:{
32 'OrderCard': OrderCard 32 'OrderCard': OrderCard
33 }, 33 },
34 data() { 34 data() {
35 return { 35 return {
36 //顶部筛选项
36 screenItems: [ 37 screenItems: [
37 {current:0,text:'全部'}, 38 {current:"10",text:'全部'},
38 {current:1,text:'待付款'}, 39 {current:"0",text:'待付款'},
39 {current:2,text:'待发货'}, 40 {current:"1",text:'待收货'},
40 {current:3,text:'待收货'}, 41 {current:"2",text:'已完成'},
41 {current:4,text:'退款售后'}, 42 // {current:"3",text:'已评价'},
43 // {current:"4",text:'退款'},
42 ], 44 ],
43 current: 0, 45 //当前所在item 默认10-->全部
44 //订单数据 46 current: "10",
45 // orderList:[
46 // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
47 // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
48 // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
49 // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
50 // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
51 // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
52 // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
53 // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
54 // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
55 // ],
56 }; 47 };
57 }, 48 },
58 49
59 onLoad: function() { 50 onLoad: function(option) {
51 //获取订单列表
60 store.dispatch('myOrder/getList', { 52 store.dispatch('myOrder/getList', {
61 uid: "1", 53 uid: "1",
62 way: "0", 54 way: "",
63 }); 55 });
56 //从user过来传的status，给current，以显示对应item
57 this.current = option.status
64 }, 58 },
65 computed: { 59 computed: {
66 orderList() { 60 orderList() {
67 console.log('orderList', this.$store.state.myOrder.orderlist); 61 // console.log('orderList', this.$store.state.myOrder.orderList);
68 return this.$store.state.myOrder.orderlist; 62 return this.$store.state.myOrder.orderList;
69 } 63 }
70 }, 64 },
71 methods:{ 65 methods:{
66 //tab点击事件
72 onClickItem(e) { 67 onClickItem(e) {
73 if (this.current !== e) { 68 if (this.current !== e) {
74 this.current = e; 69 this.current = e;
75 } 70 }
76 } 71 }
72
77 } 73 }
78 } 74 }
79 </script> 75 </script>
80 76
81 <style lang="scss"> 77 <style lang="scss">
82 .content { 78 .content {
83 display: flex; 79 display: flex;
84 flex-direction: column; 80 flex-direction: column;
85 align-items: center; 81 align-items: center;
86 background-color: #F7F6F6; 82 background-color: #F7F6F6;
87 min-height: 100vh; 83 min-height: 100vh;
88 .header{ 84 .header{
89 background-color: #ffffff; 85 background-color: #ffffff;
90 width: 100%; 86 width: 100%;
91 height: 232rpx; 87 // height: 232rpx;
92 padding: 40rpx 40rpx 36rpx 40rpx; 88 padding: 20rpx 40rpx 16rpx 40rpx;
93 box-sizing: border-box; 89 box-sizing: border-box;
94 position: fixed; 90 position: fixed;
95 top: 0; 91 top: 0;
96 left: 0; 92 left: 0;
97 .searchBar { 93 // .searchBar {
98 width: 670rpx; 94 // width: 670rpx;
99 display: flex; 95 // display: flex;
100 justify-content: center; 96 // justify-content: center;
101 align-items: center; 97 // align-items: center;
102 box-sizing: border-box; 98 // box-sizing: border-box;
103 padding: 0rpx 16rpx; 99 // padding: 0rpx 16rpx;
104 border: 1px solid #FF6B4A; 100 // border: 1px solid #FF6B4A;
105 border-radius: 8rpx; 101 // border-radius: 8rpx;
106 background-color: #ffffff; 102 // background-color: #ffffff;
107 } 103 // }
108 104
109 .screenBar{ 105 .screenBar{
110 width: 670rpx; 106 width: 670rpx;
111 height: 110rpx; 107 // height: 110rpx;
108 height: 70rpx;
112 display: flex; 109 display: flex;
113 flex-direction: row; 110 flex-direction: row;
114 justify-content: space-between; 111 justify-content: space-between;
115 align-items: center; 112 align-items: center;
116 color: #333333; 113 color: #333333;
117 font-size: 32rpx; 114 font-size: 32rpx;
118 } 115 }
119 .screenItem{ 116 .screenItem{
120 height: 50rpx; 117 height: 50rpx;
121 font-size: 32rpx; 118 font-size: 32rpx;
122 color: #333333; 119 color: #333333;
123 display: flex; 120 display: flex;
124 justify-content: center; 121 justify-content: center;
125 align-items: center; 122 align-items: center;
126 transition:all 0.2s; 123 transition:all 0.2s;
127 } 124 }
128 .active{ 125 .active{
129 // font-size: 34rpx; 126 // font-size: 34rpx;
130 color: #EC5D3B; 127 color: #EC5D3B;
131 } 128 }
132 .searchIpt { 129 .searchIpt {
133 height: 68rpx; 130 height: 68rpx;
134 width: 670rpx; 131 width: 670rpx;
135 padding: 16rpx; 132 padding: 16rpx;
136 font-size: 28rpx; 133 font-size: 28rpx;
137 box-sizing: border-box; 134 box-sizing: border-box;
138 } 135 }
139 } 136 }
140 .orderList{ 137 .orderList{
141 margin-top: 232rpx; 138 // margin-top: 232rpx;
139 margin-top: 132rpx;
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @51a5fe4
1 <!-- 订单待付款 待收货 -->
1 <template> 2 <template>
2 3 <view class="content">
3 <view class="content"> 4 <!-- 待付款 -->
4 <view class="order-hr"></view> 5 <view class="order-time" v-if="status == '0'">
5 <view class="order-time">
6 <text>请在</text> 6 <text>请在</text>
7 <!-- <text class="p2"></text> -->
8 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" 7 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
9 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> 8 :hour="0" :second="getTime" @timeup=timeup ></uni-countdown>
10 <text>内完成付款</text> 9 <text>内完成付款</text>
10 </view>
11 <!-- 待收货 -->
12 <view class="headerBanner" v-if="status == '1'">
13 <view class="bannerLeft">
14 <view class="T1">卖家已发货</view>
15 <view class="T2">还剩 确认收货</view>
16 </view>
17 <image src="../../static/car.png" mode="aspectFill"></image>
11 </view> 18 </view>
12 <view class="order"> 19 <view class="order">
13 <view class="order-user"> 20 <view class="order-user">
14 <view class="order-user-head"> 21 <view class="order-user-head">
15 <text class="p1">钱大大</text> 22 <text class="p1">{{orderAddressInfo.userName}}</text>
16 <text class="p2">18823749843</text> 23 <text class="p2">{{orderAddressInfo.telNumber}}</text>
17 </view> 24 </view>
18 <view class="order-user-body"> 25 <view class="order-user-body">
19 <image src="../../static/myorder-paying-location.png"></image> 26 <image src="../../static/myorder-paying-location.png"></image>
20 <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text> 27 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
21 </view> 28 </view>
22 </view> 29 </view>
23 <view class="order-info"> 30 <view class="order-info">
24 <view class="order-info-head"> 31 <view class="order-info-head" v-for="(orderInfoListItem,index) in orderInfoList" :key="index" >
25 <image src="../../static/myorder-paying-pic.png"></image> 32 <image :src="orderInfoListItem.imgUrl" mode="aspectFill"></image>
26 <view class="order-info-head-r"> 33 <view class="order-info-head-r">
27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> 34 <text class="p1">{{orderInfoListItem.p_name}}</text>
28 <view class="p2" style="margin: 0;"> 35 <view class="p2" style="margin: 0;">
29 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 36 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
30 <!-- <view class="arrow"></view> --> 37 <!-- <view class="arrow"></view> -->
38 </view>
39 <view class="infoText-bottom">
40 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
41 <view class="buy-num">X {{orderInfoListItem.num}}</view>
31 </view> 42 </view>
32 <text class="p3"><span>￥180</span><span class="p4">X1</span></text>
33 </view> 43 </view>
34 </view> 44 </view>
35 <!-- <view class="order-info-goodsnum"> 45 <!-- <view class="order-info-goodsnum">
36 <text>X1</text> 46 <text>X1</text>
37 </view> --> 47 </view> -->
38 <text class="order-info-freight"> 48 <text class="order-info-freight">
39 <text class="p1">运费</text> 49 <text class="p1">运费</text>
40 <text class="p2">0.00</text> 50 <text class="p2">{{orderInfo.trans_price}}</text>
41 </text> 51 </text>
42 <text class="order-info-discount"> 52 <text class="order-info-discount">
43 <text class="p1">优惠</text> 53 <text class="p1">优惠</text>
44 <text class="p2">-￥70.00</text> 54 <text class="p2">-￥{{totalDiscount}}</text>
45 </text> 55 </text>
46 <text class="order-info-price"> 56 <text class="order-info-price">
47 <text class="p1">实付</text> 57 <text class="p1">实付</text>
48 <text class="p2">￥110</text> 58 <text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
49 </text> 59 </text>
50 <text class="order-info-num"> 60 <text class="order-info-num">
51 <text>订单号：203486795859605849</text> 61 <text>订单号：{{orderInfo.prepay_id}}</text>
52 </text> 62 </text>
53 <text class="order-info-time"> 63 <text class="order-info-time">
54 <text>下单时间：2020-10-22 14:32:42</text> 64 <text>下单时间：{{orderInfo.pay_time}}</text>
55 </text> 65 </text>
56 <view class="order-info-hr"></view> 66 <view class="order-info-hr"></view>
57 <view class="order-info-contact"> 67 <view class="order-info-contact">
58 <image src="../../static/myorder-paying-contact.png"></image> 68 <image src="../../static/myorder-paying-contact.png"></image>
59 <text>联系客服</text> 69 <text>联系客服</text>
60 </view> 70 </view>
61 </view> 71 </view>
62 </view> 72 </view>
63 <view class="order-confim"> 73 <view class="order-confim" v-if="status == '0'">
64 <button class="b1">取消订单</button> 74 <button class="b1" @click="cancleOrder">取消订单</button>
65 <button class="b2">立即支付</button> 75 <button class="b2" @click="paylog">立即支付</button>
76 </view>
77
78 <view class="order-confim" v-if="status == '1'">
79 <!-- <button class="b1">取消订单</button> -->
80 <button class="b2" @click="confirmOrder">确认收货</button>
66 </view> 81 </view>
67 </view> 82 </view>
68 </template> 83 </template>
69 84
70 <script> 85 <script>
86 import store from '@/store';
71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 87 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
72 export default { 88 export default {
73 components: { 89 components: {
74 UniCountdown 90 UniCountdown
75 }, 91 },
76 data() { 92 data() {
77 return { 93 return {
78 scrollHeight: false, 94 // orderInfo:{},
95 payId:'',
96 status:'',
97 uid:'',
98 openid:'',
99 lefttime:0,
100
79 } 101 }
102 },
103 onLoad: function(option) {
104 console.log(option);
105 this.payId = option.payId;
106 this.status = option.status
107 const openid = uni.getStorageSync('openid');
108 const uid = this.$store.state.user.uid
109 this.uid = uid
110 this.openid = openid
111 store.dispatch('orderRead/getOrderInfo',{
112 pay_id:this.payId,
113 uid:'1',
114 openid:openid
115 })
116
117
118
119 // this.orderInfo = this.$store.state.orderRead.orderInfo
120 },
121 computed: {
122 //获取订单详细信息
123 orderInfo() {
124 console.log(this.$store.state.orderRead.orderInfo)
125 return this.$store.state.orderRead.orderInfo || {}
126 },
127 orderInfoList(){
128 const orderInfoList =this.orderInfo.order_info[0].list
129 return orderInfoList
130 },
131 //获取订单地址信息
132 orderAddressInfo(){
133 return this.orderInfo.order_info[0].address
134 },
135 //订单付款时间
136 getTime(){
137 return this.orderInfo.order_info[0].lefttime
138 },
139 // 计算总优惠额
140 totalDiscount(){
141 const discountInfoList = this.orderInfo.discount_info
142 let totalDiscount = 0;
143 if(discountInfoList){
144 discountInfoList.map((discountItem,index)=>{
145 totalDiscount += Number(discountItem.value)
146 })
147 }
148 // console.log(totalDiscount)
149 return totalDiscount
150 },
80 }, 151 },
81 methods: { 152 methods: {
82 153 //取消订单
154 timeup(){
155 this.cancleOrder()
156 },
157 cancleOrder(){
158 const uid = this.uid
159 const openid = this.openid
160 uni.showModal({
161 title: '提示',
162 content: '现在取消，订单不可恢复哦，确认取消吗？',
163 success: function (res) {
164 if (res.confirm) {
165 store.dispatch('cancelOrder/cancel',{
166 keyname:'1',
167 uid:uid,
168 openid:openid
169 })
170 } else if (res.cancel) {
171 console.log('用户点击取消');
172 }
173 }
174 })
175 },
176 paylog(){
177
178 },
179 confirmOrder(){
180 store.dispatch('statusConfirm/confirm',{
181 uid:this.uid,
182 openid:this.openid,
183 oldway:'1',
184 way:'2',
185 pay_id:this.payId,
186 judgeContent:'',
187 orderInfo:this.orderInfo.order_info,
188 })
189 }
83 } 190 }
84 } 191 }
85 </script> 192 </script>
86 193
87 <style lang="scss" scoped> 194 <style lang="scss" scoped>
88 .content{ 195 .content{
196 min-height: 100vh;
89 display: flex; 197 display: flex;
90 flex-direction: column; 198 flex-direction: column;
91 justify-content: center; 199 justify-content: flex-start;
92 align-items: center; 200 align-items: center;
93 background-color: #f2f2f2; 201 background-color: #f2f2f2;
94 } 202 }
95 203
96 204
97 .order { 205 .order {
98 min-height: 1196rpx;
99 margin-bottom: 112rpx; 206 margin-bottom: 112rpx;
100 background: #F2F2F2; 207 background: #F2F2F2;
101 } 208 margin-top: 140rpx;
102 .order-hr { 209 width: 670rpx;
103 width: 100%;
104 height: 1px;
105 background-color: #E9E9E9;
106 } 210 }
211
107 .order-time { 212 .order-time {
108 width: 100%; 213 width: 100%;
109 height: 140rpx; 214 height: 140rpx;
110 background-color: #fff; 215 background-color: #fff;
111 display: flex; 216 display: flex;
112 justify-content: center; 217 justify-content: center;
218 align-items: center;
219 position: fixed;
220 top: 0 ;
221 left: 0;
113 text { 222 text {
114 // font-family: PingFangSC-Regular; 223 // font-family: PingFangSC-Regular;
115 margin-top: 48rpx; 224 // margin-top: 48rpx;
116 font-size: 14px; 225 font-size: 14px;
117 color: #333333; 226 color: #333333;
118 letter-spacing: -0.26px; 227 letter-spacing: -0.26px;
119 } 228 }
120 .p2 { 229 .p2 {
121 // font-family: DINAlternate-Bold; 230 // font-family: DINAlternate-Bold;
122 margin: 42rpx 20rpx 0 20rpx; 231 margin: 42rpx 20rpx 0 20rpx;
123 font-size: 18px; 232 font-size: 18px;
124 color: #EC5D3B; 233 color: #EC5D3B;
125 letter-spacing: -0.34px; 234 letter-spacing: -0.34px;
126 } 235 }
127 } 236 }
128 237 .headerBanner{
238 width: 100%;
239 height: 140rpx;
240 background: #4A90E2;
241 padding: 26rpx 60rpx 24rpx 60rpx;
242 box-sizing: border-box;
243 color: #FFFFFF;
244 display: flex;
245 justify-content: space-between;
246 align-items: center;
247 position: fixed;
248 top: 0 ;
249 left: 0;
250 .bannerLeft{
251 font-size: 36rpx;
252 display: flex;
253 flex-direction: column;
254 justify-content: center;
255 align-items: center;
256 .T2{
257 font-size: 24rpx;
258 }
259 }
260 image{
261 height: 56rpx;
262 width: 72rpx;
263 }
264 }
265
129 .order-user { 266 .order-user {
130 width: 670rpx;
131 height: 228rpx; 267 height: 228rpx;
132 background: #FFFFFF; 268 background: #FFFFFF;
133 border-radius: 14rpx; 269 border-radius: 14rpx;
134 margin: 0 auto; 270 margin: 0 auto;
135 margin-top: 20rpx; 271 margin-top: 20rpx;
136 margin-bottom: 20rpx; 272 margin-bottom: 20rpx;
137 .order-user-head { 273 .order-user-head {
138 display: flex; 274 display: flex;
139 height: 108rpx; 275 height: 108rpx;
140 width: 100%;
141 align-items: center; 276 align-items: center;
142 margin-left: 126rpx; 277 margin-left: 126rpx;
143 .p1 { 278 .p1 {
144 // font-family: PingFangSC-Regular; 279 // font-family: PingFangSC-Regular;
145 font-size: 14px; 280 font-size: 14px;
146 color: #333333; 281 color: #333333;
147 letter-spacing: -0.26px; 282 letter-spacing: -0.26px;
148 margin-right: 20rpx; 283 margin-right: 20rpx;
149 } 284 }
150 .p2 { 285 .p2 {
151 // font-family: PingFangSC-Regular; 286 // font-family: PingFangSC-Regular;
152 font-size: 14px; 287 font-size: 14px;
153 color: #999999; 288 color: #999999;
154 letter-spacing: -0.26px; 289 letter-spacing: -0.26px;
155 } 290 }
156 } 291 }
157 .order-user-body { 292 .order-user-body {
158 display: flex; 293 display: flex;
159 width: 100%; 294 width: 100%;
160 image{ 295 image{
161 width: 24px; 296 width: 24px;
162 height: 26px; 297 height: 26px;
163 margin: 12rpx 32rpx 0 40rpx; 298 margin: 12rpx 32rpx 0 40rpx;
164 } 299 }
165 .p3 { 300 .p3 {
166 // font-family: PingFangSC-Semibold; 301 // font-family: PingFangSC-Semibold;
167 font-size: 14px; 302 font-size: 14px;
168 color: #333333; 303 color: #333333;
169 letter-spacing: -0.26px; 304 letter-spacing: -0.26px;
170 } 305 }
171 } 306 }
172 } 307 }
173 308
174 .order-info { 309 .order-info {
175 width: 670rpx;
176 background-color: #fff; 310 background-color: #fff;
177 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); 311 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
178 border-radius: 16rpx; 312 border-radius: 16rpx;
179 margin: 0 auto; 313 margin: 0 auto;
180 view{ 314 view{
181 margin-left: 40rpx; 315 margin-left: 40rpx;
182 } 316 }
183 text{ 317 text{
184 font-size: 14px; 318 font-size: 14px;
185 } 319 }
186 .order-info-head { 320 .order-info-head {
187 display: flex; 321 display: flex;
188 padding-top: 40rpx; 322 padding-top: 40rpx;
189 image{ 323 image{
190 height: 188rpx; 324 height: 188rpx;
191 width: 188rpx; 325 width: 188rpx;
192 } 326 }
193 .order-info-head-r{ 327 .order-info-head-r{
194 margin: 0; 328 margin: 0;
195 width: 368rpx; 329 width: 368rpx;
196 margin-left: 24rpx; 330 margin-left: 24rpx;
197 // margin-top: 40rpx; 331 // margin-top: 40rpx;
198 text{ 332 text{
199 display: block; 333 display: block;
200 } 334 }
201 // .arrow{ 335 // .arrow{
202 // width: 0; 336 // width: 0;
203 // height: 0; 337 // height: 0;
204 // border-left: 5px transparent; 338 // border-left: 5px transparent;
205 // border-right: 5px transparent; 339 // border-right: 5px transparent;
206 // border-top: 5px #979797; 340 // border-top: 5px #979797;
207 // border-bottom: 0 transparent; 341 // border-bottom: 0 transparent;
208 // border-style: solid; 342 // border-style: solid;
209 // position: relative; 343 // position: relative;
210 // // transform: scaleY(-1); 344 // // transform: scaleY(-1);
211 // } 345 // }
212 // .arrow::after{ 346 // .arrow::after{
213 // content: ''; 347 // content: '';
214 // position: absolute; 348 // position: absolute;
215 // top: -6.5px; 349 // top: -6.5px;
216 // left: -5px; 350 // left: -5px;
217 // border-left: 5px transparent; 351 // border-left: 5px transparent;
218 // border-right: 5px transparent; 352 // border-right: 5px transparent;
219 // border-top: 5px #FFFFFF; 353 // border-top: 5px #FFFFFF;
220 // border-bottom: 0 transparent; 354 // border-bottom: 0 transparent;
221 // border-style: solid; 355 // border-style: solid;
222 // } 356 // }
223 .p1 { 357 .p1 {
224 min-height: 40px; 358 min-height: 40px;
225 // font-family: PingFangSC-Regular; 359 // font-family: PingFangSC-Regular;
226 font-size: 14px; 360 font-size: 14px;
227 color: #333333; 361 color: #333333;
228 letter-spacing: -0.26px; 362 letter-spacing: -0.26px;
229 line-height: 18px; 363 line-height: 18px;
230 // line-height: 20px; 364 // line-height: 20px;
231 } 365 }
232 .p2 { 366 .p2 {
233 height: 34px; 367 height: 34px;
234 padding: 1px 0 3px 0; 368 padding: 1px 0 3px 0;
235 // font-family: PingFangSC-Regular; 369 // font-family: PingFangSC-Regular;
236 font-size: 12px; 370 font-size: 12px;
237 color: #999999; 371 color: #999999;
238 letter-spacing: -0.23px; 372 letter-spacing: -0.23px;
239 } 373 }
240 .p3 { 374 .infoText-bottom{
241 height: 20px; 375 display: flex;
242 // font-family: PingFangSC-Regular; 376 flex-direction: row;
243 font-size: 14px; 377 justify-content: flex-start;
244 color: #FF6B4A; 378 align-items: center;
245 letter-spacing: -0.26px; 379 width: 100%;
246 } 380 margin-left: 0;
247 .p4{ 381 .markPrice{
248 font-size: 12px; 382 font-size: 14px;
249 color: #999999; 383 color: #FF6B4A;
250 letter-spacing: -0.23px; 384 margin-right: 20rpx;
251 margin-left: 10px; 385 margin-left: 0rpx;
386 }
387 .buy-num{
388 font-size: 12px;
389 color: #999999;
390 }
252 } 391 }
253 } 392 }
254 393
255 } 394 }
256 // .order-info-goodsnum { 395 // .order-info-goodsnum {
257 // display: flex; 396 // display: flex;
258 // align-items: center; 397 // align-items: center;
259 // justify-content: flex-end; 398 // justify-content: flex-end;
260 // text { 399 // text {
261 // margin-right: 44rpx; 400 // margin-right: 44rpx;
262 // // ont-family: PingFangSC-Regular; 401 // // ont-family: PingFangSC-Regular;
263 // font-size: 12px; 402 // font-size: 12px;
264 // color: #999999; 403 // color: #999999;
265 // letter-spacing: -0.23px; 404 // letter-spacing: -0.23px;
266 // } 405 // }
267 // } 406 // }
268 .order-info-freight { 407 .order-info-freight {
269 display: block; 408 display: block;
270 margin-left: 40rpx; 409 margin-left: 40rpx;
271 margin-top: 22rpx; 410 margin-top: 22rpx;
272 .p1{ 411 .p1{
273 // font-family: PingFangSC-Regular; 412 // font-family: PingFangSC-Regular;
274 font-size: 14px; 413 font-size: 14px;
275 color: #333333; 414 color: #333333;
276 letter-spacing: -0.26px; 415 letter-spacing: -0.26px;
277 line-height: 18px; 416 line-height: 18px;
278 margin-right: 24px; 417 margin-right: 24px;
279 } 418 }
280 .p2 { 419 .p2 {
281 // font-family: PingFangSC-Regular; 420 // font-family: PingFangSC-Regular;
282 font-size: 14px; 421 font-size: 14px;
283 color: #FF6B4A; 422 color: #FF6B4A;
284 letter-spacing: -0.26px; 423 letter-spacing: -0.26px;
285 } 424 }
286 } 425 }
287 .order-info-discount { 426 .order-info-discount {
288 display: block; 427 display: block;
289 margin-left: 40rpx; 428 margin-left: 40rpx;
290 margin-top: 24rpx; 429 margin-top: 24rpx;
291 .p1 { 430 .p1 {
292 // font-family: PingFangSC-Regular; 431 // font-family: PingFangSC-Regular;
293 font-size: 14px; 432 font-size: 14px;
294 color: #333333; 433 color: #333333;
295 letter-spacing: -0.26px; 434 letter-spacing: -0.26px;
296 line-height: 18px; 435 line-height: 18px;
297 margin-right: 24px; 436 margin-right: 24px;
298 } 437 }
299 .p2 { 438 .p2 {
300 // font-family: PingFangSC-Regular; 439 // font-family: PingFangSC-Regular;
301 font-size: 14px; 440 font-size: 14px;
302 color: #FF6B4A; 441 color: #FF6B4A;
303 letter-spacing: -0.26px; 442 letter-spacing: -0.26px;
304 } 443 }
305 } 444 }
306 .order-info-price { 445 .order-info-price {
307 display: block; 446 display: block;
308 margin-left: 40rpx; 447 margin-left: 40rpx;
309 margin-top: 24rpx; 448 margin-top: 24rpx;
310 .p1 { 449 .p1 {
311 // font-family: PingFangSC-Semibold; 450 // font-family: PingFangSC-Semibold;
312 font-size: 14px; 451 font-size: 14px;
313 color: #333333; 452 color: #333333;
314 letter-spacing: -0.26px; 453 letter-spacing: -0.26px;
315 line-height: 18px; 454 line-height: 18px;
316 margin-right: 24px; 455 margin-right: 24px;
317 } 456 }
318 .p2 { 457 .p2 {
319 // font-family: PingFangSC-Semibold; 458 // font-family: PingFangSC-Semibold;
320 font-size: 14px; 459 font-size: 14px;
321 color: #FF6B4A; 460 color: #FF6B4A;
322 letter-spacing: -0.26px; 461 letter-spacing: -0.26px;
323 } 462 }
324 } 463 }
325 .order-info-num{ 464 .order-info-num{
326 display: block; 465 display: block;
327 margin-left: 40rpx; 466 margin-left: 40rpx;
328 margin-top: 44rpx; 467 margin-top: 44rpx;
329 text{ 468 text{
330 // font-family: PingFangSC-Regular; 469 // font-family: PingFangSC-Regular;
331 font-size: 12px; 470 font-size: 12px;
332 color: #999999; 471 color: #999999;
333 letter-spacing: -0.23px; 472 letter-spacing: -0.23px;
334 } 473 }
335 } 474 }
336 .order-info-time { 475 .order-info-time {
337 display: block; 476 display: block;
338 margin: 8rpx 0 48rpx 40rpx; 477 margin: 8rpx 0 48rpx 40rpx;
339 text{ 478 text{
340 // font-family: PingFangSC-Regular; 479 // font-family: PingFangSC-Regular;
341 font-size: 12px; 480 font-size: 12px;
342 color: #999999; 481 color: #999999;
343 letter-spacing: -0.23px; 482 letter-spacing: -0.23px;
344 } 483 }
345 } 484 }
346 .order-info-hr{ 485 .order-info-hr{
347 width: 520rpx; 486 width: 520rpx;
348 height: 1px; 487 height: 1px;
349 background-color: #E9E9E9; 488 background-color: #E9E9E9;
350 margin-bottom: 20rpx; 489 margin-bottom: 20rpx;
351 } 490 }
352 .order-info-contact { 491 .order-info-contact {
353 display: flex; 492 display: flex;
354 padding-bottom: 28rpx; 493 padding-bottom: 28rpx;
355 image{ 494 image{
356 width: 19px; 495 width: 19px;
357 height: 16px; 496 height: 16px;
358 } 497 }
359 text { 498 text {
360 // font-family: PingFangSC-Regular; 499 // font-family: PingFangSC-Regular;
361 margin-left: 20rpx; 500 margin-left: 20rpx;
362 font-size: 14px; 501 font-size: 14px;
363 color: #333333; 502 color: #333333;
364 letter-spacing: -0.26px; 503 letter-spacing: -0.26px;
365 line-height: 18px; 504 line-height: 18px;
366 } 505 }
367 } 506 }
368 } 507 }
369 508
370 .order-confim { 509 .order-confim {
371 display: flex; 510 display: flex;
372 align-items: center; 511 align-items: center;
373 z-index: 999; 512 justify-content: flex-end;
513 // z-index: 999;
374 width: 100%; 514 width: 100%;
375 height: 112rpx; 515 height: 112rpx;
376 position: fixed; 516 position: fixed;
377 bottom: 0; 517 bottom: 0;
378 background: #FFFFFF; 518 background: #FFFFFF;
379 button { 519 button {
380 width: 204rpx; 520 width: 204rpx;
381 height: 80rpx; 521 height: 80rpx;
382 border: 1px solid #FF6B4A; 522 border: 1px solid #FF6B4A;
383 border-radius: 40rpx; 523 border-radius: 40rpx;
384 font-size: 32rpx; 524 font-size: 32rpx;
385 letter-spacing: -0.3px; 525 letter-spacing: -0.3px;
386 margin-right: 0; 526 margin-right: 0;
387 } 527 }
388 .b1 { 528 .b1 {
389 // font-family: PingFangSC-Regular; 529 // font-family: PingFangSC-Regular;
390 color: #FF6B4A; 530 color: #FF6B4A;
391 531 background-color: #FFFFFF;
392 } 532 }
src/pages/predelivery/predelivery.vue
Diff comments   View file @51a5fe4
1 <!-- 待发货 尹聃-->
1 <template> 2 <template>
2 <view class="container"> 3 <view class="container">
3 <view v-for="(items) in form" :key="items.key" class="order"> 4 <view v-for="(items) in form" :key="items.key" class="order">
4 <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view> 5 <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
5 <view class="order_detail"> 6 <view class="order_detail">
6 <view class="detail_img"><image v-bind:src="items.img"></image></view> 7 <view class="detail_img"><image v-bind:src="items.img"></image></view>
7 <view class="detail_zi"> 8 <view class="detail_zi">
8 <view class="zi_name">{{items.name}}</view> 9 <view class="zi_name">{{items.name}}</view>
9 <view class="zi_standard">规格：{{items.standard}}</view> 10 <view class="zi_standard">规格：{{items.standard}}</view>
10 <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view> 11 <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
11 </view> 12 </view>
12 </view> 13 </view>
13 <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view> 14 <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
14 <view class="clear"></view> 15 <view class="clear"></view>
15 <view class="button"> 16 <view class="button">
16 <view class="button1">申请退款</view> 17 <view class="button1">申请退款</view>
17 <view class="button2">提醒发货</view> 18 <view class="button2">提醒发货</view>
18 </view> 19 </view>
19 </view> 20 </view>
20 </view> 21 </view>
21 </template> 22 </template>
22 23
23 <script> 24 <script>
24 export default { 25 export default {
25 data(){ 26 data(){
26 return{ 27 return{
27 form:[ 28 form:[
28 { 29 {
29 key: 0, 30 key: 0,
30 name:'商品名称', 31 name:'商品名称',
31 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻', 32 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
32 img: '/static/img/detail/delivery.png', 33 img: '/static/img/detail/delivery.png',
33 preprice: 180, 34 preprice: 180,
34 number:1, 35 number:1,
35 orderNum: 2034867958596334, 36 orderNum: 2034867958596334,
36 nowprice: 110, 37 nowprice: 110,
37 } 38 }
38 ] 39 ]
39 40
40 } 41 }
41 } 42 }
42 } 43 }
43 </script> 44 </script>
44 45
45 <style lang="scss"> 46 <style lang="scss">
46 .container{ 47 .container{
47 width: 100%; 48 width: 100%;
48 height: 100%; 49 height: 100%;
49 background: #F2F2F2; 50 background: #F2F2F2;
50 height: 700px; 51 height: 700px;
51 //要获取屏幕大小 52 //要获取屏幕大小
52 } 53 }
53 54
54 .order{ 55 .order{
55 background: #FFFFFF; 56 background: #FFFFFF;
56 width: 90%; 57 width: 90%;
57 height: 450rpx; 58 height: 450rpx;
58 margin: 0 auto; 59 margin: 0 auto;
59 padding: 40rpx; 60 padding: 40rpx;
60 box-sizing: border-box; 61 box-sizing: border-box;
61 border-radius: 5px; 62 border-radius: 5px;
62 } 63 }
63 .order_number{ 64 .order_number{
64 color: #999999; 65 color: #999999;
65 font-size: 12px; 66 font-size: 12px;
66 font-family: "PingFangSC-Regular"; 67 font-family: "PingFangSC-Regular";
67 span{ 68 span{
68 font-family: PingFangSC-Regular; 69 font-family: PingFangSC-Regular;
69 font-size: 14px; 70 font-size: 14px;
70 color: #FF6B4A; 71 color: #FF6B4A;
71 letter-spacing: -0.26px; 72 letter-spacing: -0.26px;
72 line-height: 18px; 73 line-height: 18px;
73 float: right; 74 float: right;
74 } 75 }
75 } 76 }
76 .order_detail{ 77 .order_detail{
77 display: flex; 78 display: flex;
78 justify-content: space-around; 79 justify-content: space-around;
79 margin-top: 12px; 80 margin-top: 12px;
80 } 81 }
81 .detail_img image{ 82 .detail_img image{
82 width: 188rpx; 83 width: 188rpx;
83 height: 188rpx; 84 height: 188rpx;
84 } 85 }
85 .detail_zi{ 86 .detail_zi{
86 font-family: PingFangSC-Regular; 87 font-family: PingFangSC-Regular;
87 width: 55%; 88 width: 55%;
88 height: 100%; 89 height: 100%;
89 view{ 90 view{
90 margin-bottom: 20rpx; 91 margin-bottom: 20rpx;
91 } 92 }
92 .zi_name{ 93 .zi_name{
93 font-size: 14px; 94 font-size: 14px;
94 color: #333333; 95 color: #333333;
95 letter-spacing: -0.26px; 96 letter-spacing: -0.26px;
96 line-height: 18px; 97 line-height: 18px;
97 } 98 }
98 .zi_standard{ 99 .zi_standard{
99 font-size: 12px; 100 font-size: 12px;
100 color: #999999 ; 101 color: #999999 ;
101 } 102 }
102 .zi_preprice{ 103 .zi_preprice{
103 font-size: 14px; 104 font-size: 14px;
104 color: #FF6B4A; 105 color: #FF6B4A;
105 span{ 106 span{
106 float: right; 107 float: right;
107 font-size: 12px; 108 font-size: 12px;
108 color: #999999; 109 color: #999999;
109 } 110 }
110 } 111 }
111 } 112 }
112 .now_price{ 113 .now_price{
113 font-size: 14px; 114 font-size: 14px;
114 color: #333333; 115 color: #333333;
115 float: right; 116 float: right;
116 span{ 117 span{
117 font-size: 14px; 118 font-size: 14px;
118 color: #FF6B4A ; 119 color: #FF6B4A ;
119 } 120 }
120 } 121 }
121 .clear{ 122 .clear{
122 clear: both; 123 clear: both;
123 } 124 }
124 .button{ 125 .button{
125 display: flex; 126 display: flex;
126 justify-content: flex-end; 127 justify-content: flex-end;
127 margin-top: 14px; 128 margin-top: 14px;
128 view{ 129 view{
129 width: 156rpx; 130 width: 156rpx;
130 height: 48rpx; 131 height: 48rpx;
131 border-radius: 12px; 132 border-radius: 12px;
132 font-size: 12px; 133 font-size: 12px;
133 text-align: center; 134 text-align: center;
134 line-height: 20px; 135 line-height: 20px;
135 } 136 }
136 .button1{ 137 .button1{
137 border: 1px solid #FF6B4A; 138 border: 1px solid #FF6B4A;
138 font-family: PingFangSC-Regular; 139 font-family: PingFangSC-Regular;
139 color: #FF6B4A; 140 color: #FF6B4A;
140 letter-spacing: -0.23px; 141 letter-spacing: -0.23px;
141 margin-right: 30rpx; 142 margin-right: 30rpx;
142 } 143 }
143 .button2{ 144 .button2{
144 border: 1px solid #FF6B4A; 145 border: 1px solid #FF6B4A;
145 background: #FF6B4A; 146 background: #FF6B4A;
146 font-family: PingFangSC-Regular; 147 font-family: PingFangSC-Regular;
147 color: #FFFFFF; 148 color: #FFFFFF;
148 letter-spacing: -0.23px; 149 letter-spacing: -0.23px;
149 150
150 } 151 }
151 } 152 }
152 </style> 153 </style>
src/pages/user/user.vue
Diff comments   View file @51a5fe4
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view v-if="isAuth" 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="headerphoto" mode="aspectFill"></image> 6 <image :src="headerphoto" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{nickName}}</text> 8 <text class="userName">{{nickName}}</text>
9 </view> 9 </view>
10 </view> 10 </view>
11 <view class="service"> 11 <!-- <view class="service">
12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
13 </view> -->
14 </view>
15 <view class="myOpticsData">
16 <view class="left">
17 <image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>
18 <text>验光数据</text>
13 </view> 19 </view>
20 <image src="../../static/right.png" mode="aspectFit"></image>
14 </view> 21 </view>
15 <view class="myOrder"> 22 <view class="myOrder">
16 <view class="orderHeader"> 23 <view class="orderHeader">
17 <text>全部订单</text> 24 <text>全部订单</text>
18 <view class="btn" @click="toMyOrder"> 25 <view class="btn" @click="toMyOrder('10')">
19 全部 26 全部
20 <image src="../../static/right.png" mode="aspectFill"></image> 27 <image src="../../static/right.png" mode="aspectFit"></image>
21 </view> 28 </view>
22 </view> 29 </view>
23 <view class="orderBody"> 30 <view class="orderBody">
24 <view class="item waitPay" @click="toMyOrderPaying"> 31 <view class="item waitPay" @click="toMyOrder('0')">
25 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 32 <image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image>
26 <text>待付款</text> 33 <text>待付款</text>
27 </view> 34 </view>
28 <view class="item waitDeliver" @click="toPredelivery" > 35 <view class="item waitDeliver" @click="toMyOrder('1')" >
29 <image src="../../static/waitPay.png" mode="aspectFill"></image> 36 <image src="../../static/img/user/waitPay.png" mode="aspectFit"></image>
30 <text>待发货</text>
31 </view>
32 <view class="item waitReceive" @click="torefunProgress">
33 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
34 <text>待收货</text> 37 <text>待收货</text>
35 </view> 38 </view>
36 <view class="item service" @click="torefundment"> 39 <view class="item waitReceive" @click="toMyOrder('2')">
37 <image src="../../static/service.png" mode="aspectFill"></image> 40 <image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image>
38 <text>退换/售后</text> 41 <text>已完成</text>
39 </view> 42 </view>
43 <!-- <view class="item service" @click="toMyOrder('3')">
44 <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
45 <text>已评价</text>
46 </view> -->
47 </view>
48 </view>
49 <view class="someItem">
50 <!-- <view class="item">
51 <view class="left">
52 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
53 <text>推广记录与收益</text>
54 </view>
55 <image src="../../static/right.png" mode="aspectFit"></image>
56 </view> -->
57 <view class="item">
58 <view class="left">
59 <image src="../../static/img/user/introduce.png" mode="aspectFit"></image>
60 <text>系统介绍</text>
61 </view>
62 <image src="../../static/right.png" mode="aspectFit"></image>
63 </view>
64 <view class="item">
65 <view class="left">
66 <image src="../../static/img/user/joinUs.png" mode="aspectFit"></image>
67 <text>加入我们</text>
68 </view>
69 <image src="../../static/right.png" mode="aspectFit"></image>
70 </view>
71 <view class="item">
72 <view class="left">
73 <image src="../../static/img/user/service.png" mode="aspectFit"></image>
74 <text>联系客服</text>
75 </view>
76 <image src="../../static/right.png" mode="aspectFit"></image>
40 </view> 77 </view>
41 </view> 78 </view>
42 <view class="recommend"> 79 <view class="recommend">
43 <view class="title"> 80 <view class="title">
44 <view class="line"></view> 81 <view class="line"></view>
45 <view class="text">精选推荐</view> 82 <view class="text">精选推荐</view>
46 <view class="line"></view> 83 <view class="line"></view>
47 </view> 84 </view>
48 <!-- 商品列表 --> 85 <!-- 商品列表 -->
49 <view class="goods-list"> 86 <view class="goods-list">
50 <view class="product-list"> 87 <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list">
51 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > 88 <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id">
52 <Card :goods = "goods"></Card> 89 <view class="product" v-for="(item) in goods.list" :key="item.sk_id">
53 </view> 90 <Card :goods="item" ></Card>
54 </view> 91 </view>
92 </block>
93 </scroll-view>
55 <view class="loading-text">{{loadingText}}</view> 94 <view class="loading-text">{{loadingText}}</view>
56 </view> 95 </view>
57 </view> 96 </view>
58 </view> 97 </view>
59 <view v-else class="auth"> 98 <view v-else class="auth">
60 <view class="icon"></view> 99 <view class="icon"></view>
61 <view class="divider"></view> 100 <view class="divider"></view>
62 <view class="title">申请获取以下权限</view> 101 <view class="title">申请获取以下权限</view>
63 <view class="text">获得您的公开信息(昵称、头像等)</view> 102 <view class="text">获得您的公开信息(昵称、头像等)</view>
64 <button 103 <button
65 type="primary" 104 type="primary"
66 open-type="getUserInfo" 105 open-type="getUserInfo"
67 @getuserinfo="onGotUserInfo" 106 @getuserinfo="onGotUserInfo"
68 >授权登陆</button> 107 >授权登陆</button>
69 </view> 108 </view>
70 </view> 109 </view>
71 </template> 110 </template>
72 111
73 <script> 112 <script>
74 import Card from "@/components/CommodityCard/CommodityCard.vue"; 113 import Card from "@/components/CommodityCard/CommodityCard.vue";
75 import store from '@/store'; 114 import store from '@/store';
76 115
77 export default { 116 export default {
78 components: { 117 components: {
79 'Card':Card 118 'Card':Card
80 }, 119 },
81 data() { 120 data() {
82 return { 121 return {
83 //商品数据 122 isAuth: true, // 是否显示授权页面,
84 goodsList:[ 123 pagesnum:1 // 分页请求初始值
85 { goods_id: 0, img: "/static/img/goods/p1.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人浏览' },
87 { goods_id: 2, img: '/static/img/goods/p3.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人浏览' },
89 { goods_id: 4, img: '/static/img/goods/p5.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人浏览' },
91 { goods_id: 6, img: '/static/img/goods/p7.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人浏览' },
93 { goods_id: 8, img: '/static/img/goods/p9.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人浏览' }
95 ],
96 isAuth: true, // 是否显示授权页面
97 } 124 }
98 }, 125 },
99 onLoad() { 126 onLoad() {
100 // 判断是否授权 127 // 判断是否授权
101 uni.getSetting({ 128 uni.getSetting({
102 success(res) { 129 success(res) {
103 console.log('authSetting',res.authSetting) 130 console.log('authSetting',res.authSetting)
104 if(res.authSetting['scope.userInfo'] === true) { 131 if(res.authSetting['scope.userInfo'] === true) {
105 this.isAuth = true 132 this.isAuth = true
106 } else { 133 } else {
107 this.isAuth = false 134 this.isAuth = false
108 } 135 }
109 } 136 }
110 }) 137 })
138
111 }, 139 },
112 computed: { 140 computed: {
113 nickName() { 141 nickName() {
114 console.log('nickName', this.$store.state.user.userInfo) 142 console.log('nickName', this.$store.state.user.userInfo)
115 return this.$store.state.user.userInfo.nickName; 143 return this.$store.state.user.userInfo.nickName;
116 }, 144 },
117 headerphoto() { 145 headerphoto() {
118 return this.$store.state.user.userInfo.headerphoto; 146 return this.$store.state.user.userInfo.headerphoto;
119 }, 147 },
120 userRecommandList() { 148 userRecommandList() {
121 console.log('recommandList', this.$store.state.userRecommand.recommandList); 149 console.log('recommandList', this.$store.state.userRecommand.recommandList);
122 return this.$store.state.userRecommand.recommandList; 150 return this.$store.state.userRecommand.recommandList;
123 } 151 }
124 }, 152 },
125 onLoad: function() { 153 onLoad:function(){
154 console.log('usr-my',this.$store.state.user.userInfo)
155
126 store.dispatch('userRecommand/getRecommandList', { 156 store.dispatch('userRecommand/getRecommandList', {
127 uid: 2, 157 // uid:468,
158 uid: this.$store.state.user.userInfo.uid,
159 // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4",
160 openid:this.$store.state.user.userInfo.openid,
161 page: this.pagesnum
128 }); 162 });
129 }, 163 },
164
130 methods: { 165 methods: {
131 // 授权 166 // 授权
132 onGotUserInfo(e) { 167 onGotUserInfo(e) {
133 console.log('anthInfo', e); 168 console.log('anthInfo', e);
134 if(e.detail.errMsg == 'getUserInfo:ok') { 169 if(e.detail.errMsg == 'getUserInfo:ok') {
135 const { fromInfo } = this.$store.state.user; 170 const { fromInfo } = this.$store.state.user;
136 console.log('=====la', fromInfo) 171 console.log('=====la', fromInfo)
137 // 用户授权成功 172 // 用户授权成功
138 store.dispatch('user/getUserInfo', fromInfo); 173 store.dispatch('user/getUserInfo', fromInfo);
139 this.isAuth = true 174 this.isAuth = true
140 } 175 }
141 }, 176 },
142 toMyOrder(){ 177 toMyOrder(status){
143 uni.navigateTo({ 178 uni.navigateTo({
144 url: '../myOrder/myOrder?current=0', 179 url: `../myOrder/myOrder?status=`+status,
145 success: res => {}, 180 success: res => {},
146 fail: () => {}, 181 fail: () => {},
147 complete: () => {} 182 complete: () => {}
148 }); 183 });
149 }, 184 },
150 toPredelivery(){ 185 handleScrolltolower(){
151 uni.navigateTo({ 186 // console.log('usr-my',this.$store.state.user.userInfo)
152 url: '../myOrder/myOrder?current=2', 187 this.pagesnum++;
153 success: res => {}, 188 store.dispatch('userRecommand/getRecommandList', {
154 fail: () => {}, 189 uid: this.$store.state.user.userInfo.uid,
155 complete: () => {} 190 openid:this.$store.state.user.userInfo.openid,
191 page: this.pagesnum
156 }); 192 });
157 },
158 toMyOrderPaying(){
159 uni.navigateTo({
160 url: '../myOrder/myOrder?current=1',
161 success: res => {},
162 fail: () => {},
163 complete: () => {}
164 });
165 },
166 torefundment(){
167 uni.navigateTo({
168 url:'../refundment/refundment',
169 })
170 },
171 torefunProgress(){
172 uni.navigateTo({
173 url:'../refundProgress/refundProgress'
174 })
175 } 193 }
176 } 194 }
177 } 195 }
178 </script> 196 </script>
179 197
180 <style lang="scss"> 198 <style lang="scss">
181 .warp{ 199 .warp{
182 font-size: 24rpx; 200 font-size: 24rpx;
183 background-color: #f2f2f2; 201 background-color: #f2f2f2;
184 height: 100vh; 202 height: 100vh;
185 } 203 }
186 .content { 204 .content {
187 display: flex; 205 display: flex;
188 flex-direction: column; 206 flex-direction: column;
189 align-items: center; 207 align-items: center;
190 justify-content: center; 208 justify-content: center;
191 background-color: #F2F2F2; 209 background-color: #F2F2F2;
192 } 210 }
193 .userInfo{ 211 .userInfo{
194 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 212 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
195 width: 100%; 213 width: 100%;
196 height: 240rpx; 214 height: 240rpx;
197 color: #FFFFFF; 215 color: #FFFFFF;
198 padding: 60rpx 82rpx 80rpx 44rpx; 216 padding: 60rpx 82rpx 80rpx 44rpx;
199 box-sizing: border-box; 217 box-sizing: border-box;
200 display: flex; 218 display: flex;
201 flex-direction: row; 219 flex-direction: row;
202 justify-content: space-between; 220 justify-content: space-between;
203 align-items: flex-start; 221 align-items: flex-start;
204 .info{ 222 .info{
205 display: flex; 223 display: flex;
206 flex-direction: row; 224 flex-direction: row;
207 justify-content: space-between; 225 justify-content: space-between;
208 align-items: center; 226 align-items: center;
209 image{ 227 image{
210 border-radius: 50rpx; 228 border-radius: 50rpx;
211 height: 100rpx ; 229 height: 100rpx ;
212 width: 100rpx; 230 width: 100rpx;
213 margin-right: 40rpx; 231 margin-right: 40rpx;
214 } 232 }
215 .infoText{ 233 .infoText{
216 display: flex; 234 display: flex;
217 flex-direction: column; 235 flex-direction: column;
218 justify-content: space-between; 236 justify-content: space-between;
219 align-items: flex-scetart; 237 align-items: flex-scetart;
220 .userName{ 238 .userName{
221 font-size: 18px; 239 font-size: 18px;
222 color: #FFFFFF; 240 color: #FFFFFF;
223 margin-bottom: 8rpx; 241 margin-bottom: 8rpx;
224 } 242 }
225 .nickName{ 243 .nickName{
226 font-size: 12px; 244 font-size: 12px;
227 color: #FFFFFF; 245 color: #FFFFFF;
228 } 246 }
229 } 247 }
230 } 248 }
231 .service{ 249 // .service{
232 margin-top: 20rpx; 250 // margin-top: 20rpx;
251 // image{
252 // height: 36rpx;
253 // width: 36rpx;
254 // }
255 // }
256 }
257 .myOpticsData{
258 width: 670rpx;
259 height: 120rpx;
260 background-color: #FFFFFF;
261 border-radius: 6px;
262 box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10);
263 position: relative;
264 bottom: 44rpx;
265 padding: 40rpx;
266 box-sizing: border-box;
267 display: flex;
268 justify-content: space-between;
269 align-items: center;
270 .left{
271 font-size: 14px;
272 color: #333333;
273 display: flex;
274 align-items: center;
233 image{ 275 image{
234 height: 36rpx; 276 margin-right: 32rpx;
235 width: 36rpx; 277 width: 30rpx;
278 height: 34rpx;
236 } 279 }
237 } 280 }
281 image{
282 height: 16px;
283 width: 8px;
284 }
238 } 285 }
239 .myOrder{ 286 .myOrder{
240 width: 100%; 287 width: 100%;
241 height: 296rpx; 288 height: 296rpx;
242 margin-top: 20rpx; 289 // margin-top: 116rpx;
243 margin-bottom: 20rpx; 290 margin-bottom: 20rpx;
244 padding: 0 40rpx; 291 padding: 0 40rpx;
245 box-sizing: border-box; 292 box-sizing: border-box;
246 background: #FFFFFF; 293 background: #FFFFFF;
247 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 294 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
248 border-radius: 6px; 295 border-radius: 6px;
249 border-radius: 6px; 296 border-radius: 6px;
250 display: flex; 297 display: flex;
251 flex-direction: column; 298 flex-direction: column;
252 justify-content: space-around; 299 justify-content: space-around;
253 align-items: center; 300 align-items: center;
254 .orderHeader{ 301 .orderHeader{
255 width: 100%; 302 width: 100%;
256 height: 100rpx; 303 height: 100rpx;
257 display: flex; 304 display: flex;
258 flex-direction: row; 305 flex-direction: row;
259 justify-content: space-between; 306 justify-content: space-between;
260 align-items: center; 307 align-items: center;
261 border-bottom: 1px solid #E9E9E9;; 308 border-bottom: 1px solid #E9E9E9;;
262 font-weight: bold; 309 font-weight: bold;
263 font-size: 18px; 310 font-size: 18px;
264 color: #333333; 311 color: #333333;
265 .btn{ 312 .btn{
266 font-size: 12px; 313 font-size: 12px;
267 color: #999999; 314 color: #999999;
315 display: flex;
316 align-items: center;
268 image{ 317 image{
269 margin-left: 20rpx; 318 margin-left: 20rpx;
270 height: 16rpx; 319 height: 32rpx;
271 width: 8rpx; 320 width: 16rpx;
272 } 321 }
273 } 322 }
274 } 323 }
275 .orderBody{ 324 .orderBody{
276 width: 100%; 325 width: 100%;
277 display: flex; 326 display: flex;
278 flex-direction: row; 327 flex-direction: row;
279 justify-content: space-between; 328 justify-content: space-around;
280 align-items: center; 329 align-items: center;
281 .item{ 330 .item{
282 display: flex; 331 display: flex;
283 flex-direction: column; 332 flex-direction: column;
284 align-items: center; 333 align-items: center;
285 image{ 334 image{
286 width: 46rpx; 335 width: 62rpx;
287 height: 46rpx; 336 height: 46rpx;
288 } 337 }
289 text{ 338 text{
290 margin-top: 24rpx; 339 margin-top: 24rpx;
291 font-size: 12px; 340 font-size: 12px;
292 color: #333333; 341 color: #333333;
293 } 342 }
294 } 343 }
295 } 344 }
296 } 345 }
346 .someItem{
347 width: 100%;
348 height: 336rpx;
349 background: #FFFFFF;
350 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
351 border-radius: 6px;
352 border-radius: 6px;
353 margin-bottom: 18rpx;
354 box-sizing: border-box;
355 padding: 21rpx 48rpx 21rpx 42rpx;
356 box-sizing: border-box;
357 display: flex;
358 flex-direction: column;
359 justify-content: space-between;
360 align-items: center;
361 .item{
362 display: flex;
363 justify-content: space-between;
364 border-bottom: 1px solid #F2F2F2;;
365 align-items: center;
366 height: 72rpx;
367 width: 100%;
368 .left{
369 font-size: 14px;
370 color: #333333;
371 display: flex;
372 align-items: center;
373 image{
374 margin-right: 32rpx;
375 width: 30rpx;
376 height: 34rpx;
377 }
378 }
379 image{
380 height: 16px;
381 width: 8px;
382 }
383 }
384
385 }
297 .recommend{ 386 .recommend{
298 background: #FFFFFF; 387 background: #FFFFFF;
299 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 388 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
300 border-radius: 6px; 389 border-radius: 6px;
301 border-radius: 6px; 390 border-radius: 6px;
302 width: 100%; 391 width: 100%;
303 .title{ 392 .title{
304 display: flex; 393 display: flex;
305 flex-direction: row; 394 flex-direction: row;
306 align-items: center; 395 align-items: center;
307 justify-content: space-between; 396 justify-content: space-between;
308 padding: 20rpx 40rpx; 397 padding: 20rpx 40rpx;
309 .line{ 398 .line{
310 width: 264rpx; 399 width: 264rpx;
311 height: 1rpx; 400 height: 1rpx;
312 border-bottom: 1px solid #EAEAEA; 401 border-bottom: 1px solid #EAEAEA;
313 } 402 }
314 .text{ 403 .text{
315 font-family: PingFangSC-Medium; 404 font-family: PingFangSC-Medium;
316 font-size: 14px; 405 font-size: 14px;
317 color: #333333; 406 color: #333333;
318 letter-spacing: -0.26px; 407 letter-spacing: -0.26px;
319 text-align: justify; 408 text-align: justify;
320 line-height: 24px; 409 line-height: 24px;
321 } 410 }
322 } 411 }
323 .goods-list{ 412 .goods-list{
324 .loading-text{ 413 .loading-text{
325 width: 100%; 414 width: 100%;
326 display: flex; 415 display: flex;
327 justify-content: center; 416 justify-content: center;
328 align-items: center; 417 align-items: center;
329 height: 30px; 418 height: 30px;
330 color: #979797; 419 color: #979797;
331 font-size: 12px; 420 font-size: 12px;
332 } 421 }
333 .product-list{ 422 .product-list{
334 width: 92%; 423 width: 92%;
335 padding: 0 4% 3vw 4%; 424 padding: 0 4% 3vw 4%;
336 display: flex; 425 display: flex;
426 height: 200px;
337 justify-content: space-between; 427 justify-content: space-between;
338 flex-wrap: wrap; 428 flex-wrap: wrap;
339 .product{ 429 .product{
340 width: 48%; 430 width: 48%;
341 margin: 0 0 20rpx 0; 431 margin: 0 0 20rpx 0;
342 background: #FFFFFF; 432 background: #FFFFFF;
343 border: 1px solid #F2F2F2; 433 border: 1px solid #F2F2F2;
344 } 434 }
345 } 435 }
346 } 436 }
347 } 437 }
348 .auth { 438 .auth {
349 height: 100vh; 439 height: 100vh;
350 display: flex; 440 display: flex;
351 flex-direction: column; 441 flex-direction: column;
352 align-items: center; 442 align-items: center;
353 .icon { 443 .icon {
src/static/car.png
Diff comments   View file @51a5fe4

1.56 KB
src/static/img/user/dataWrite.png
Diff comments   View file @51a5fe4

382 Bytes
src/static/img/user/introduce.png
Diff comments   View file @51a5fe4

488 Bytes
src/static/img/user/joinUs.png
Diff comments   View file @51a5fe4

1.97 KB
src/static/img/user/refound.png
Diff comments   View file @51a5fe4

3.38 KB
src/static/img/user/service.png
Diff comments   View file @51a5fe4

1.17 KB
src/static/img/user/shouyi.png
Diff comments   View file @51a5fe4

1.51 KB
src/static/img/user/waitDeliver.png
Diff comments   View file @51a5fe4

1.91 KB
src/static/img/user/waitPay.png
Diff comments   View file @51a5fe4

2.19 KB
src/static/img/user/waitReceive.png
Diff comments   View file @51a5fe4

2.01 KB
src/static/joinUs (2).png
Diff comments   View file @51a5fe4

488 Bytes
src/static/joinUs (3).png
Diff comments   View file @51a5fe4

1.17 KB
src/static/joinUs.png
Diff comments   View file @51a5fe4

1.97 KB
src/static/shouyi.png
Diff comments   View file @51a5fe4

1.51 KB
src/static/waitReceive.png
Diff comments   View file @51a5fe4

789 Bytes | W: | H:

2.01 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/store/modules/cancelOrder.js
Diff comments   View file @51a5fe4
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 cancelOrder
6 } = urlAlias;
7
8 const state = {
9 orderList: [],
10 };
11
12 const mutations = {
13 INIT: (state, data) => {
14 state.orderList = data;
15 },
16 };
17
18 const actions = {
19 cancel({ commit }, param) {
20 request({
21 url: cancelOrder,
22 data: param,
23 success: (res) => {
24 console.log(res.data);
25 // commit("INIT", res.data.data);
26 },
27 })
28 }
29 }
30
31 export default {
32 namespaced: true,
33 state,
34 mutations,
35 actions,
36 }
src/store/modules/cart.js
Diff comments   View file @51a5fe4
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { cartList } = urlAlias; 4 const { cartList , cartModi, cartDel, cartAdd } = urlAlias;
5 5
6 const state = { 6 const state = {
7 cartList: [], 7 cartList: [],
8 }; 8 };
9 9
10
11 const data = {
12 data:{
13 // list 购物车列表
14 list:[
15 {
16 goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", //商品名称
17 pid: "6",//产品id
18 real_price: 99,
19 checked: true,//是否选中
20 name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
21 cart_id: "39", //购物车唯一序列号
22 num: "1", //此购物
23 pics: "/static/myorder-paying-pic.png", //商品图片
24 goodsType:2,// 商品种类
25 },
26 {
27 goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", //商品名称
28 pid: "4",//产品id
29 real_price: 189,
30 checked: false,//是否选中
31 name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
32 cart_id: "38", //购物车唯一序列号
33 num: "2", //此购物
34 pics: "/static/myorder-paying-pic.png", //商品图片
35 goodsType:3,// 商品种类
36 },
37 ],
38 mp_id: "1",
39 mp_list://使用人，一个产品只有一个使用人
40 [
41 {
42 glassWidth: "54",//镜宽
43 img_url2: "http://localhost:8087/images/shop_1/1/",//使用人的头像，根据此头像，AI识别出数据。
44 in_time: "2020-02-22 03:19:38",//使用人加入的时间
45 leftAxi: "124",//左眼数据
46 leftCyl: "-2",//左眼数据
47 leftSph: "-1",//左眼数据
48 leftVis: "5",//左眼数据
49 legWidth: "158",//镜腿长
50 metal: null,//使用人的其它定义（材质过敏之类的）
51 mp_id: "1",//使用的id
52 name: "me",//使用人的名字
53 norseWidth: "18",//鼻宽
54 pd: "89.6",//瞳距
55 price: "0",//此人偏好的价格
56 rightAxi: "123",//右眼数据
57 rightCyl: "24",//右眼数据
58 rightSph: "-4",//右眼数据
59 rightVis: "5.1",//右眼数据
60 uid: "1",//购买人的uid
61 }
62 ],
63 sk_id: "80",//此产品下的sku的唯一id
64 skuList:[//sku清单
65 {
66 discount: "45",//折扣，数据库中以int型存储，所以要除100
67 in_price: "6000",//进货价格，数据库中以int型存储，单位是分，所以显示时要除以100
68 kc: "0",//库存
69 model_pic: null,//模型试戴图
70 out_price: 191.8,//销售价格，元
71 pic: "https://glass.xiuyetang.com//upload_jk/6/6_321EB1.jpg",//可供查看图
72 pid: "6",//索引产品id
73 real_price: 99,//真实可成交价格
74 sk_id: "74",//成交时的sku_id
75 sku_name: "1.56非球面防蓝光_黑色",//sku名称
76 sku_shop_value: "",//sku商家定义值
77 sku_value: "47_51",//sku系统生成值
78 status: "1",//此产品下的sku状态
79 }
80 ]
81 }, // 一个产品下，会有多个sku，都在这个skuList数组下
82 msg: "ok",
83 status: 1,
84 }
85
10 const mutations = { 86 const mutations = {
11 INIT: (state, cartList) => { 87 INIT: (state, cartList) => {
12 state.cartList = cartList; 88 state.cartList = cartList;
13 }, 89 },
90 DEL:(state,index)=>{
91 console.log('mutations====>',state.cartList)
92 state.cartList.splice(index,1)
93 console.log('mutations====>index',index)
94 // state.cartList=delList
95 },
96 MODI:(state,args) => {
97 console.log('the num',state.cartList[args.index].num)
98 console.log('mutations====>isadd',args)
99 if(args.isadd)
100 {
101 state.cartList[args.index].num=args.num
102 } else{
103 state.cartList[args.index].num=args.num
104 }
105 console.log('the num',state.cartList[args.index].num)
106 },
107
14 }; 108 };
15 109
16
17
18 const actions = { 110 const actions = {
19 111
20 getCartList({ commit }, param) { 112 getCartList({ commit }, param) {
21 request({ 113 request({
22 url: cartList, 114 url: cartList,
23 success: (res) => { 115 data:param,
24 116 success: (res) => {
25 commit('INIT', res.data.data) 117 console.log('cart===>接口数据',res.data.data)
26 }, 118 // const resData = {
27 fail: (res) => { 119 // ...res,
28 console.log("fail status === > ", res); 120 // data,
29 }, 121 // }
30 complete: (res) => { 122 commit('INIT', res.data.data)
31 console.log("complete status === > ", res); 123 },
32 }, 124 fail: (res) => {
33 }) 125 console.log("fail status === > ", res);
34 } 126 },
35 127 complete: (res) => {
128 console.log("complete status === > ", res);
129 },
130 })
131 },
132
133 modiCart({ commit }, param) {
134 const args=Object.assign({num:param.num},param.args)
135 delete param.args
136 request({
137 url: cartModi,
138 data: param,
139 success: (res) => {
140 console.log('modi-parm',param)
141 commit('MODI',args)
142 },
143 fail: (res) => {
144 console.log("fail status === > ", res);
145 },
146 complete: (res) => {
147 console.log("complete status === > ", res);
148 },
149 })
150 },
151
152 delCart({ commit },param ) {
153 let arg = param.arg;
154 delete param.arg
155 request({
156 url: cartDel,
157 data: param,
158 success: (res) => {
159 console.log('del-parm',param)
160 console.log('del-myparms==>',arg)
161 // console.log('deacart====>cartList',this.$store.state.cart.cartList)
162
163 commit('DEL',arg)
164 },
165 fail: (res) => {
166 console.log("fail status === > ", res);
167 },
168 complete: (res) => {
169 console.log("complete status === > ", res);
170 },
171 })
172 },
173
174 addCart({ commit }, param) {
175 console.log('请求接口开始')
176 request({
177 url: cartAdd,
178 data:param,
179 success: (res) => {
180 console.log('add-parm',param)
181 console.log('addcart===>res.data===>',res.data)
182 // commit('INIT', res.data.data)
183 },
184 fail: (res) => {
185 console.log("fail status === > ", res);
186 },
187 complete: (res) => {
188 console.log("complete status === > ", res);
189 },
190 })
191 },
192
36 } 193 }
37 194
38 export default { 195 export default {
39 namespaced: true, 196 namespaced: true,
40 state, 197 state,
41 mutations, 198 mutations,
src/store/modules/categoryOrder.js
View file @8fdae71
1 import urlAlias from '../url'; File was deleted
2 import request from '../request';
3
4 const {
5 category
6 } = urlAlias;
7
8 const state = {
9 categoryList: [],
10 };
11
12 const mutations = {
13 INIT: (state, categoryList) => {
14 state.categoryList = categoryList;
15 },
16 };
17
18 const actions = {
19 fetch({ commit }, param) {
20 request({
21 url: category,
22 success: (res) => {
23 commit('INIT', res.data.data)
24 },
25 fail: (res) => {
26 console.log("fail status === > ", res);
27 },
28 complete: (res) => {
29 console.log("complete status === > ", res);
30 },
31 })
32 },
33 };
34
35 export default {
36 namespaced: true,
37 state,
38 mutations,
39 actions,
40 };
41 1 import urlAlias from '../url';
src/store/modules/index.js
Diff comments   View file @51a5fe4
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 category,
6 shopList,
7 search,
8 } = urlAlias;
9
10 const state = {
11 categoryList: [],
12 list: [],
13 };
14
15 const mutations = {
16 LIST: (state, list) => {
17 state.list = list;
18 },
19 CATEGORY: (state, categoryList) => {
20 state.categoryList = categoryList;
21 },
22 };
23
24 const actions = {
25 category({ commit }, param) {
26 request({
27 url: category,
28 success: (res) => {
29 console.log('category', res);
30 let data = res.data.data;
31 for(let i = 0; i<=data.length; i++) {
32 if(data[i] && data[i].type !== 'filter'){
33 data[i].type = 'hierarchy';
34 }
35 }
36 data.unshift({
37 type: "hierarchy",
38 name: "全部",
39 value: "all",
40 isNoPull: true,
41 });
42 commit('CATEGORY', data);
43 },
44 fail: (res) => {
45 console.log("fail status === > ", res);
46 },
47 complete: (res) => {
48 console.log("complete status === > ", res);
49 },
50 })
51 },
52 list({ commit }, param) {
53 request({
54 url: shopList,
55 success: (res) => {
56 commit('LIST', res.data.data)
57 },
58 fail: (res) => {
59 console.log("fail status === > ", res);
60 },
61 complete: (res) => {
62 console.log("complete status === > ", res);
63 },
64 })
65 },
66 search({ commit }, { params, keyword }) {
67 const uid = uni.getStorageSync('uid');
68 console.log("params",params, keyword);
69 request({
70 url: search,
71 data: {
72 params: JSON.stringify(params),
73 uid,
74 way: 1,
75 keyword,
76 },
77 success: (res) => {
78 commit('LIST', res.data.data);
79 },
80 fail: (res) => {
81 console.log("fail status === > ", res);
82 },
83 complete: (res) => {
84 console.log("complete status === > ", res);
85 },
86 })
87 }
88 };
89
90 export default {
91 namespaced: true,
92 state,
93 mutations,
94 actions,
95 };
96
src/store/modules/myOrder.js
Diff comments   View file @51a5fe4
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 orderList 5 myOrderList
6 } = urlAlias; 6 } = urlAlias;
7 7
8 const data = { 8 // const data = {
9 data: [ 9 // data: [
10 { 10 // {
11 finished_time: null, 11 // finished_time: null,
12 is_refound: "0", 12 // is_refound: "0",
13 mch_id: "1436019502", 13 // mch_id: "1436019502",
14 money_of_dcw: "0", 14 // money_of_dcw: "0",
15 money_of_partner: "0", 15 // money_of_partner: "0",
16 money_of_shop: "0", 16 // money_of_shop: "0",
17 orderJudge: false, 17 // orderJudge: false,
18 order_info: { 18 // order_info: {
19 address:{ 19 // address:{
20 cityName: "镇江市", 20 // cityName: "镇江市",
21 countyName: "丹阳市", 21 // countyName: "丹阳市",
22 detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", 22 // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
23 errMsg: "chooseAddress:ok", 23 // errMsg: "chooseAddress:ok",
24 nationalCode: "321181", 24 // nationalCode: "321181",
25 postalCode: "212300", 25 // postalCode: "212300",
26 provinceName: "江苏省", 26 // provinceName: "江苏省",
27 telNumber: "15896379277", 27 // telNumber: "15896379277",
28 userName: "点餐汪客服", 28 // userName: "点餐汪客服",
29 }, 29 // },
30 cartinfo:['11', '12'], 30 // cartinfo:['11', '12'],
31 keyname: "1_1587129366", 31 // keyname: "1_1587129366",
32 lefttime: 179995, 32 // lefttime: 179995,
33 list:[ 33 // list:[
34 { 34 // {
35 cart_id: "11", 35 // cart_id: "11",
36 imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", 36 // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
37 img_index_url: null, 37 // img_index_url: null,
38 memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701", 38 // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701",
39 mp_id: "1", 39 // mp_id: "1",
40 nowPrice: 100, 40 // nowPrice: 100,
41 num: "2", 41 // num: "2",
42 oldPrice: "0", 42 // oldPrice: "0",
43 p_discount: "1", 43 // p_discount: "1",
44 p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", 44 // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流",
45 p_root_index: "1", 45 // p_root_index: "1",
46 p_sale_price: "0", 46 // p_sale_price: "0",
47 peopleName: "me", 47 // peopleName: "me",
48 pics: '', 48 // pics: '',
49 pid: "4", 49 // pid: "4",
50 sk_id: "38", 50 // sk_id: "38",
51 }, 51 // },
52 ], 52 // ],
53 orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品", 53 // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品",
54 total_fee: 100 54 // total_fee: 100
55 }, 55 // },
56 partner_uid: "0", 56 // partner_uid: "0",
57 pay_cate: "2020", 57 // pay_cate: "2020",
58 pay_id: "3", 58 // pay_id: "3",
59 pay_time: "2020-04-17 21:16:12", 59 // pay_time: "2020-04-17 21:16:12",
60 pay_wood_desc: "在【非常戴镜】的微信付款凭证", 60 // pay_wood_desc: "在【非常戴镜】的微信付款凭证",
61 pay_wood_id: "fcdj-1-1_1587129366", 61 // pay_wood_id: "fcdj-1-1_1587129366",
62 prepay_id: "wx172116124528226bf1a8adad1662456500", 62 // prepay_id: "wx172116124528226bf1a8adad1662456500",
63 re_check_staus: "0", 63 // re_check_staus: "0",
64 shopid: "0", 64 // shopid: "0",
65 split_userid: "0", 65 // split_userid: "0",
66 status: "1", 66 // status: "1",
67 total_fee: "100", 67 // total_fee: "100",
68 uid: "1", 68 // uid: "1",
69 } 69 // }
70 ], 70 // ],
71 msg: "订单列表", 71 // msg: "订单列表",
72 status: 0, 72 // status: 0,
73 } 73 // }
74 74
75 const state = { 75 const state = {
76 orderList: [], 76 orderList: [],
77 }; 77 };
78 78
79 const mutations = { 79 const mutations = {
80 INIT: (state, data) => { 80 INIT: (state, data) => {
81 state.orderList = data; 81 state.orderList = data;
82 }, 82 },
83 }; 83 };
84 84
85 const actions = { 85 const actions = {
86 getList({ commit }, param) { 86 getList({ commit }, param) {
87 request({ 87 request({
88 url: orderList, 88 url: myOrderList,
89 data: param, 89 data: param,
90 success: (res) => { 90 success: (res) => {
91 const resData = { 91 <<<<<<< HEAD
92 ...res, 92 const resData = {
93 data,
94 }
95 console.log('data.data',res);
96 commit("INIT", resData.data.data);
97 }, 93 ...res,
98 }) 94 data,
99 } 95 }
100 } 96 console.log('data.data',res);
101 97 commit("INIT", resData.data.data);
102 export default { 98 =======
103 namespaced: true, 99 // console.log(res.data);
104 state, 100 commit("INIT", res.data.data);
105 mutations, 101 >>>>>>> f0cf57997c2438808bb572407021a3e3a18ee0fb
106 actions, 102 },
107 } 103 })
104 }
105 }
106
107 export default {
108 namespaced: true,
src/store/modules/orderRead.js
Diff comments   View file @51a5fe4
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 orderRead
6 } = urlAlias;
7
8 const state = {
9 orderInfo: {},
10 };
11
12 const mutations = {
13 INIT: (state, orderInfo) => {
14 state.orderInfo = orderInfo;
15 },
16 };
17
18 const actions = {
19 getOrderInfo({ commit }, param) {
20 request({
21 url: orderRead,
22 data: param,
23 success: (res) => {
24 commit("INIT", res.data.data);
25 },
26 })
27 },
28 };
29
30 export default {
31 namespaced: true,
32 state,
33 mutations,
34 actions,
35 };
36
src/store/modules/payLog.js
Diff comments   View file @51a5fe4
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 payLog
6 } = urlAlias;
7
8
9 const actions = {
10 payLog({ commit }, param) {
11 request({
12 url: payLog,
13 data: param,
14 success: (res) => {
15 // console.log(res.data);
16 commit("INIT", res.data.data);
17 },
18 })
19 }
20 }
21
22 export default {
23 namespaced: true,
24 // state,
25 // mutations,
26 actions,
27 }
src/store/modules/statusConfirm.js
Diff comments   View file @51a5fe4
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 statusConfirm
6 } = urlAlias;
7
8 // const openid = uni.getStorageSync('openid');
9 const actions = {
10 confirm({ commit }, param) {
11 request({
12 url: statusConfirm,
13 data: param|| { },
14 success: (res) => {
15 console.log(res.data);
16 if(res.data.code === 1){
17 uni.showToast({
18 title:'已确认',
19 mask:true,
20 duration:1500,
21 icon:'success'
22 })
23 }else{
24 uni-uni.showToast({
25 title: '服务器错误，确认失败!',
26 mask:true
27 });
28 }
29 },
30 })
31 }
32 }
33
34 export default {
35 namespaced: true,
36 actions,
37 }
src/store/modules/user.js
Diff comments   View file @51a5fe4
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 login, 5 login,
6 getUserInfo, 6 getUserInfo,
7 } = urlAlias; 7 } = urlAlias;
8 8
9 const state = { 9 const state = {
10 fromInfo: { 10 fromInfo: {
11 loginQueryInfo: {}, 11 loginQueryInfo: {},
12 fromuid: 0, 12 fromuid: 0,
13 fromsid: 0, 13 fromsid: 0,
14 frompid: 0, 14 frompid: 0,
15 scene: 1001, 15 scene: 1001,
16 }, 16 },
17 userInfo: { 17 userInfo: {
18 uid: 1, 18 uid: 1,
19 openid: '', 19 openid: '',
20 nickName: '', 20 nickName: '',
21 headerphoto: '', 21 headerphoto: '',
22 } 22 }
23 }; 23 };
24 24
25 const mutations = { 25 const mutations = {
26 FROM: (state, data) => { 26 FROM: (state, data) => {
27 state.formInfo = data; 27 state.formInfo = data;
28 }, 28 },
29 UPDATE: (state, data) => { 29 UPDATE: (state, data) => {
30 state.userInfo = data; 30 state.userInfo = data;
31 } 31 }
32 }; 32 };
33 33
34 const actions = { 34 const actions = {
35 // 登陆 35 // 登陆
36 login({ commit }, param) { 36 login({ commit }, param) {
37 const { 37 const {
38 frompid = undefined, 38 frompid = undefined,
39 fromsid = undefined, 39 fromsid = undefined,
40 fromuid = undefined, 40 fromuid = undefined,
41 scene = 1001 , 41 scene = 1001 ,
42 } = param || {}; 42 } = param || {};
43 uni.login({ 43 uni.login({
44 provider: 'weixin', 44 provider: 'weixin',
45 success: function (loginRes) { 45 success: function (loginRes) {
46 console.log('login',loginRes); 46 console.log('login',loginRes);
47 request({ 47 request({
48 url: login, 48 url: login,
49 data: { 49 data: {
50 app_uid: 2020, 50 app_uid: 2020,
51 code: loginRes.code, 51 code: loginRes.code,
52 frompid, 52 frompid,
53 fromsid, 53 fromsid,
54 fromuid, 54 fromuid,
55 55
56 }, 56 },
57 success: (res) => { 57 success: (res) => {
58 const { data: { session_key, openid} } = res; 58 const { data: { session_key, openid} } = res;
59 console.log('res', res) 59 console.log('res', res)
60 // 写入缓存 60 // 写入缓存
61 uni.setStorageSync('session_key', session_key); 61 uni.setStorageSync('session_key', session_key);
62 uni.setStorageSync('openid', openid); 62 uni.setStorageSync('openid', openid);
63 request({ 63 request({
64 url: getUserInfo, 64 url: getUserInfo,
65 data: { 65 data: {
66 app_uid: 2020, 66 app_uid: 2020,
67 frompid, 67 frompid,
68 fromsid, 68 fromsid,
69 fromuid, 69 fromuid,
70 openid, 70 openid,
71 scene, 71 scene,
72 }, 72 },
73 success: (res) => { 73 success: (res) => {
74 console.log('userInfo=====', res); 74 console.log('userInfo=====', res);
75 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res; 75 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res;
76 uni.setStorageSync('uid', uid);
76 const userInfo = { 77 const userInfo = {
77 uid, 78 uid,
78 openid, 79 openid,
79 nickName, 80 nickName,
80 headerphoto, 81 headerphoto,
81 } 82 }
82 commit("UPDATE", userInfo) 83 commit("UPDATE", userInfo)
83 } 84 }
84 }) 85 })
85 } 86 }
86 }) 87 })
87 } 88 }
88 }); 89 });
89 }, 90 },
90 setFrom({ commit }, param) { 91 setFrom({ commit }, param) {
91 commit("FROM", param); 92 commit("FROM", param);
92 }, 93 },
93 getUserInfo( { commit }, param) { 94 getUserInfo( { commit }, param) {
94 const { 95 const {
95 frompid = undefined, 96 frompid = undefined,
96 fromsid = undefined, 97 fromsid = undefined,
97 fromuid = undefined, 98 fromuid = undefined,
98 scene = 1001 , 99 scene = 1001 ,
99 } = param || {}; 100 } = param || {};
100 // 写入缓存 101 // 写入缓存
101 const openid = uni.getStorageSync('openid', openid); 102 const openid = uni.getStorageSync('openid', openid);
102 request({ 103 request({
103 url: getUserInfo, 104 url: getUserInfo,
104 data: { 105 data: {
105 app_uid: 2020, 106 app_uid: 2020,
106 frompid, 107 frompid,
107 fromsid, 108 fromsid,
108 fromuid, 109 fromuid,
109 openid, 110 openid,
110 scene, 111 scene,
111 }, 112 },
112 success: (res) => { 113 success: (res) => {
113 console.log('userInfo=====', res); 114 console.log('userInfo=====', res);
114 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res; 115 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res;
116 uni.setStorageSync('uid', uid);
115 const userInfo = { 117 const userInfo = {
116 uid, 118 uid,
117 openid, 119 openid,
118 nickName, 120 nickName,
119 headerphoto, 121 headerphoto,
120 } 122 }
121 commit("UPDATE", userInfo) 123 commit("UPDATE", userInfo)
122 } 124 }
123 }) 125 })
124 }, 126 },
125 } 127 }
126 128
127 export default { 129 export default {
128 namespaced: true, 130 namespaced: true,
129 state, 131 state,
130 mutations, 132 mutations,
131 actions, 133 actions,
132 } 134 }
src/store/modules/userRecommand.js
Diff comments   View file @51a5fe4
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 recommandList 5 recommandList
6 } = urlAlias; 6 } = urlAlias;
7 7
8 const state = { 8 const state = {
9 recommandList: [], 9 recommandList: [],
10 }; 10 };
11 11
12 const data = {
13 "code": 1,
14 "msg": "请求成功",
15 "data": {
16 // list 表示商品数据列表
17 "list": [
18 {
19 model_pic: null,
20 p_name: "1.61防蓝光镜片 非球面_枪色款镜架商务男士防蓝光眼镜",
21 p_root_index: "1", //对应goodType
22 pic: "http://localhost/sys-glass/image/picture.png",
23 pid: "96",
24 real_price: "17800",
25 sk_id: "1448",
26 sku_name: "1.61防蓝光镜片 非球面_枪色款镜架",
27 trade_num: "0",
28 },
29 {
30 "sk_id": "39",
31 "pic": "/static/img/goods/p1.jpg",
32 "p_name": "1.56防蓝光镜片非球面_黑银色镜架防蓝光眼镜超轻不压鼻",
33 "old_price": "18000",
34 "real_price": "9900",
35 "trade_num": 123, // 对应购买人数
36 "p_root_index": 2, // 对应跳转的详情页
37 "pid":4, // 产品id
38 },
39 ],
40 pagesnum:1, // 懒加载要用到的页数
41 pagessize:10,// 每次请求返回的list长度
42 }
43
44 }
45
12 const mutations = { 46 const mutations = {
13 INIT: (state, list) => { 47 INIT: (state, list) => {
14 state.recommandList = list; 48 state.recommandList = list;
15 }, 49 },
16 }; 50 };
17 51
52 let goodsList=[];
53
18 const actions = { 54 const actions = {
19 getRecommandList({ commit }, param) { 55 getRecommandList({ commit }, param) {
20 request({ 56 request({
21 url: recommandList, 57 url: recommandList,
22 success: (res) => { 58 success: (res) => {
23 console.log(res.data) 59 console.log('userRecommand-parm',param)
24 commit('INIT', res.data.data) 60 console.log(res.data.data)
61 // const Res={...res.data.data.list,...data.data.list}
62 goodsList=[...goodsList,...res.data.data]
63 // console.log(res.data)
64 commit('INIT', goodsList)
25 }, 65 },
26 fail: (res) => { 66 fail: (res) => {
67 uni.showToast({
68 title:"数据加载完了",
69 icon:"none"
70 })
27 console.log("fail status === > ", res); 71 console.log("fail status === > ", res);
28 }, 72 },
29 complete: (res) => { 73 complete: (res) => {
30 console.log("complete status === > ", res); 74 console.log("complete status === > ", res);
31 }, 75 },
32 }) 76 })
33 }, 77 },
34 }; 78 };
35 79
36 export default { 80 export default {
37 namespaced: true, 81 namespaced: true,
38 state, 82 state,
39 mutations, 83 mutations,
40 actions, 84 actions,
41 }; 85 };
src/store/request.js
Diff comments   View file @51a5fe4
1 const DOMAIN = 'https://api.glass.xiuyetang.com'; 1 const DOMAIN = 'https://api.glass.xiuyetang.com';
2 2
3 export default async function request({ 3 export default async function request({
4 url, 4 url,
5 method = "post", 5 method = "post",
6 data = {}, 6 data = {},
7 header = { 7 header = {
8 "Content-Type": "application/x-www-form-urlencoded", 8 "Content-Type": "application/x-www-form-urlencoded",
9 }, 9 },
10 timeout = 3000, 10 timeout = 3000,
11 withCredentials = false, // 跨域请求时是否携带凭证（cookies） 11 withCredentials = false, // 跨域请求时是否携带凭证（cookies）
12 // sslVerify: true, // 验证 ssl 证书 12 // sslVerify: true, // 验证 ssl 证书
13 success, 13 success,
14 fail = (res) => { 14 fail = (res) => {
15 console.log("fail status === > ", res); 15 console.log("fail status === > ", res);
16 }, 16 },
17 complete = (res) => { 17 complete = (res) => {
18 console.log("complete status === > ", res); 18 console.log("complete status === > ", res);
19 }, 19 },
20 }) { 20 }) {
21 console.log("DOMAIN", DOMAIN, url);
22 uni 21 uni
23 .request({ 22 .request({
24 url: DOMAIN + url, 23 url: DOMAIN + url,
25 method, 24 method,
26 data, 25 data,
27 header, 26 header,
28 timeout, 27 timeout,
29 withCredentials, 28 withCredentials,
30 success, 29 success,
31 fail, 30 fail,
32 complete, 31 complete,
33 }) 32 })
34 } 33 }
1 const urlAlias = { 1 const urlAlias = {
2 // 获取首页商品列表 2 // 获取商品信息
3 shopList: '/app/prod/list', 3 read: '/app/prod/read',
4
5 // 获取首页商品列表
6 category: '/app/prod/category2',
7 // 获取商品信息
8 read: '/app/prod/read',
9 4
10 // 首页 5 // 首页
11 shopList: '/app/prod/list', // 获取首页商品列表 6 shopList: '/app/prod/list', // 获取首页商品列表
12 category: '/app/prod/category', // 获取首页商品分类 7 category: '/app/prod/category2', // 获取首页商品分类
8 search: '/app/prod/search', // 首页搜索商品
13 9
14 // 登陆 10 // 登陆
15 login: '/app/glass/getOpenId', // 登陆 11 login: '/app/glass/getOpenId', // 登陆
16 getUserInfo: '/app/glass/userinfo', // 获取用户信息 12 getUserInfo: '/app/glass/userinfo', // 获取用户信息
17 13
18 // 我的订单 14 // 我的订单
19 orderList: '/app/order/list', // 获取订单列表 15 myOrderList: '/app/order/list3', // 获取订单列表
16 orderRead: '/app/order/read', // 获取订单详情
17 cancelOrder: '/app/order/wait/del',//取消订单
18 statusConfirm: '/app/order/statusConfirm',//订单操作
19 payLog:'/app/pay/log',//调起支付
20 20
21 // 购物车 21 // 购物车
22 cartList: '/app/cart/list', // 获取购物车列表 22 cartList: '/app/cart/list', // 获取购物车列表
23 cartModi: '/app/cart/modi', // 修改购物车
24 cartDel: '/app/cart/del', // 删除购物车
25 cartAdd: '/app/cart/add',// 添加购物车
23 26
24 // 我的 27 // 我的
25 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 28 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
26 29
27 // 选购页 30 // 选购页
28 detailStandardUrl: '/app/prod/read', //获取商品的详细信息 31 detailStandardUrl: '/app/prod/read', //获取商品的详细信息