刘文博 / gulu-vue

Download as
Browse Code »

Commit fcb436f86dbf22128dc5fc30abaae20d33a52be2

Authored by Adam
2 parents f1da24fb30 c4c4f1251c
Exists in master

s

Showing 21 changed files   Show diff stats
1 <script lang="ts"> 1 <script>
2 import Vue from 'vue'; 2 import Vue from 'vue';
3 import store from '@/store';
4
3 export default Vue.extend({ 5 export default Vue.extend({
4 mpType: 'app', 6 mpType: 'app',
5 onLaunch() { 7 onLaunch(options) {
6 console.log('App Launch') 8 const option = options || {};
9 // 获取用户来源
10 console.log('软件启动，输出转来的参数:', option);
11 console.log('场景值------------------:', option.scene);
12 let loginQueryInfo = option ? option.query : {};
13 loginQueryInfo = loginQueryInfo || {};
14 console.log('loginQueryInfo onShow===>', loginQueryInfo);
15 const scene = decodeURIComponent(loginQueryInfo.scene);
16 console.log('decodeURIComponent scense====>', scene);
17 let fromInfo = {};
18
19 if(scene.length > 0 ) {
20 const getQueryString = {
21 uid: undefined,
22 sid: undefined,
23 pid: undefined
24 };
25 const strB = scene.split('&');
26
27 for(let i = 0; i < strB.length; i += 1) {
28 getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]);
29 }
30 fromInfo = {
31 loginQueryInfo,
32 fromuid: getQueryString.uid,
33 fromsid: getQueryString.sid,
34 frompid: getQueryString.pid,
35 scene: option.scene,
36 }
37 store.dispatch('user/setFrom', fromInfo);
38 console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString);
39 } else {
40 console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo);
41 if (loginQueryInfo.hasOwnProperty('sid') == false) {
42 loginQueryInfo.sid = 0;
43 }
44 if (loginQueryInfo.hasOwnProperty('pid') == false) {
45 loginQueryInfo.pid = 0;
46 }
47 if (loginQueryInfo.hasOwnProperty('uid') == false) {
48 loginQueryInfo.uid = 0;
49 }
50 fromInfo = {
51 loginQueryInfo,
52 fromuid: loginQueryInfo.uid,
53 fromsid: loginQueryInfo.sid,
54 frompid: loginQueryInfo.pid,
55 scene: option.scene,
56 }
57 store.dispatch('user/setFrom', fromInfo)
58 }
59
60 // 登陆
61 const openId = uni.getStorageSync('openid') || "";
62 if(openId.length <= 10) {
63 uni.clearStorageSync()
64 store.dispatch("user/login", fromInfo);
65 } else {
66 store.dispatch("user/getUserInfo", fromInfo);
67 }
7 }, 68 },
8 onShow() { 69 onShow() {
9 70
10 console.log('App Show') 71 console.log('App Show')
11 }, 72 },
12 onHide() { 73 onHide() {
13 console.log('App Hide') 74 console.log('App Hide')
75 },
76 methods: {
14 } 77 }
15 }); 78 });
16 </script> 79 </script>
17 80
18 <style> 81 <style>
19 /*每个页面公共css */ 82 /*每个页面公共css */
20 </style> 83 </style>
21 84
src/common/data.js
Diff comments   View file @fcb436f
1 // 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示, 1 // 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示,
2 // 组件的返回结果是有菜单数组下标形式返回, 2 // 组件的返回结果是有菜单数组下标形式返回,
3 // 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单 3 // 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单
4 /* 4 /*
5 [ 5 [
6 { 6 {
7 "name":"", //字符串类型 选填项 菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选" 7 "name":"", //字符串类型 选填项 菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选"
8 "type":"" //字符串类型 必填项 可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单 8 "type":"" //字符串类型 必填项 可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单
9 "submenu":[ //对象数组类型 必填项 子菜单数据 9 "submenu":[ //对象数组类型 必填项 子菜单数据
10 { 10 {
11 "name":"", //字符串类型 必填项 菜单名称 11 "name":"", //字符串类型 必填项 菜单名称
12 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果 12 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果
13 "submenu":[ //对象数组类型 必填项 子菜单数据 13 "submenu":[ //对象数组类型 必填项 子菜单数据
14 { 14 {
15 "name":"", //字符串类型 必填项 菜单名称 15 "name":"", //字符串类型 必填项 菜单名称
16 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null 16 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
17 "submenu":[ //对象数组类型 必填项 子菜单数据 filter类型无效 17 "submenu":[ //对象数组类型 必填项 子菜单数据 filter类型无效
18 { 18 {
19 "name":"", //字符串类型 必填项 菜单名称 hierarchy类型层级最多到此 19 "name":"", //字符串类型 必填项 菜单名称 hierarchy类型层级最多到此
20 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null 20 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
21 } 21 }
22 ] 22 ]
23 } 23 }
24 ] 24 ]
25 } 25 }
26 ] 26 ]
27 } 27 }
28 ] 28 ]
29 */ 29 */
30 30
31 //0.0.4版本起 返回结果将有两部分组成: 31 //0.0.4版本起 返回结果将有两部分组成:
32 /* 32 /*
33 { 33 {
34 index:[], //旧版本的下标数组形式 34 index:[], //旧版本的下标数组形式
35 value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已 35 value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已
36 } 36 }
37 */ 37 */
38 // 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的. 38 // 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的.
39 // 数据较长，请仔细查看。 39 // 数据较长，请仔细查看。
40
41
40 export default [ 42 export default [
41 { 43 {
42 "name":'综合', 44 "name":'综合',
43 "type": 'filter', 45 "type": 'filter',
44 "submenu": [{ 46 "submenu": [{
45 "submenu": [ 47 "submenu": [
46 48
47 ] 49 ]
48 }, 50 },
49 ], 51 ],
50 }, 52 },
51 { 53 {
52 "name":'品牌', 54 "name":'品牌',
53 "type": 'filter', 55 "type": 'filter',
54 "submenu": [{ 56 "submenu": [{
55 "name": '品牌', 57 // "name": '品牌',
56 "value": "品牌", 58 // "value": "品牌",
57 "submenu": [{ 59 "submenu": [{
58 "name": "帕森", 60 "name": "帕森",
59 "value": "帕森", 61 "value": "帕森",
60 }, 62 },
61 { 63 {
62 "name": "海伦凯勒", 64 "name": "海伦凯勒",
63 "value": "海伦凯勒", 65 "value": "海伦凯勒",
64 }, 66 },
65 ] 67 ]
66 }, 68 },
67 ] 69 ]
68 }, 70 },
69 { 71 {
70 "name":'功能', 72 "name":'功能',
71 "type": 'filter', 73 "type": 'filter',
72 "submenu": [{ 74 "submenu": [{
73 "name": "智能排序", 75 "submenu": [{
74 "value": "智能排序" 76 "name": "满减活动",
75 }, 77 "value": "满减活动"
76 { 78 },
77 "name": "离我最近", 79 {
78 "value": "离我最近" 80 "name": "打折优惠",
79 }, 81 "value": "打折优惠"
80 { 82 },
81 "name": "人均从高到低", 83 {
82 "value": "人均从高到低" 84 "name": "会员专享",
83 }, 85 "value": "会员专享"
84 { 86 }
85 "name": "人均从低到高", 87 ]
86 "value": "人均从低到高"
87 } 88 }
88 ] 89 ]
89 }, 90 },
90 { 91 {
91 "name":'材质', 92 "name":'材质',
92 "type": 'filter', 93 "type": 'filter',
93 "submenu": [{ 94 "submenu": [{
94 "submenu": [{ 95 "submenu": [{
95 "name": "满减活动", 96 "name": "满减活动",
96 "value": "满减活动" 97 "value": "满减活动"
97 }, 98 },
98 { 99 {
99 "name": "打折优惠", 100 "name": "打折优惠",
100 "value": "打折优惠" 101 "value": "打折优惠"
101 }, 102 },
102 { 103 {
103 "name": "会员专享", 104 "name": "会员专享",
104 "value": "会员专享" 105 "value": "会员专享"
105 } 106 }
106 ] 107 ]
107 } 108 }
108 ] 109 ]
109 }, 110 },
110 { 111 {
111 "name":'折扣', 112 "name":'折扣',
112 "type": 'filter', 113 "type": 'filter',
113 "submenu": [{ 114 "submenu": [{
114 "name": "折扣(多选)", 115 "name": "折扣(多选)",
115 "submenu": [{ 116 "submenu": [{
116 "name": "满减活动", 117 "name": "满减活动",
117 "value": "满减活动" 118 "value": "满减活动"
118 }, 119 },
119 { 120 {
120 "name": "打折优惠", 121 "name": "打折优惠",
121 "value": "打折优惠" 122 "value": "打折优惠"
122 }, 123 },
123 { 124 {
124 "name": "会员专享", 125 "name": "会员专享",
125 "value": "会员专享" 126 "value": "会员专享"
126 } 127 }
127 ] 128 ]
128 } 129 }
129 ] 130 ]
130 } 131 }
131 ] 132 ]
132 133
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)"> 2 <view class="card" @tap="toGoods(goods.id,goods.goodType)">
3 <image mode="widthFix" :src="goods.img" ></image> 3 <image mode="widthFix" :src="goods.imgurl" ></image>
4 <view class="name">{{goods.name}}</view> 4 <view class="name">{{goods.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}}</view>
8 <view class="originCost"> 8 <view class="originCost">
9 {{goods.originCost}} 9 {{goods.rsSon.Max_Price}}
10 </view> 10 </view>
11 </view> 11 </view>
12 <view class="slogan">{{goods.slogan}}</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 goods_id: Number, 24 id: Number,
25 img: String, 25 imgurl: String,
26 name: String, 26 name: String,
27 rsSon:Object,
27 originCost:String, 28 originCost:String,
28 price: String, 29 price: String,
29 slogan:String, 30 trade_num:String,
30 goodType:String, 31 goodType:String,
31 } 32 }
32 33
33 }, 34 },
34 created() { 35 created() {
35 console.log(this.goods) 36 // console.log(this.goods)
36 }, 37 },
37 data() { 38 data() {
38 return { 39 return {
39 40
40 }; 41 };
41 }, 42 },
42 methods:{ 43 methods:{
43 toGoods(id,type){ 44 toGoods(id,type){
44 // console.log('toGoods =====> id======>', id) 45 uni.navigateTo({
45 // console.log(type) 46 url: `../frameDetail/frameDetail?oderId=`+id,
47 success: res => {},
48 fail: () => {},
49 complete: () => {}
50 });
51 console.log('toGoods =====> id:'+id +"======>type:"+type)
46 switch(type){ 52 switch(type){
47 case 1: 53 case 1:
48 uni.navigateTo({ 54 uni.navigateTo({
49 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 55 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
50 success: res => {}, 56 success: res => {},
51 fail: () => {}, 57 fail: () => {},
52 complete: () => {} 58 complete: () => {}
53 }); 59 });
54 break; 60 break;
55 case 2: 61 case 2:
56 uni.navigateTo({ 62 uni.navigateTo({
57 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 63 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
58 success: res => {}, 64 success: res => {},
59 fail: () => {}, 65 fail: () => {},
60 complete: () => {} 66 complete: () => {}
61 }); 67 });
62 break; 68 break;
63 case 3: 69 case 3:
64 uni.navigateTo({ 70 uni.navigateTo({
65 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 71 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
66 success: res => {}, 72 success: res => {},
67 fail: () => {}, 73 fail: () => {},
68 complete: () => {} 74 complete: () => {}
69 }); 75 });
70 break; 76 break;
71 case 4: 77 case 4:
72 uni.navigateTo({ 78 uni.navigateTo({
73 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 79 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
74 success: res => {}, 80 success: res => {},
75 fail: () => {}, 81 fail: () => {},
76 complete: () => {} 82 complete: () => {}
77 }); 83 });
78 break; 84 break;
79 default : 85 default :
80 break 86 break
81 } 87 }
82 } 88 }
83 } 89 }
84 } 90 }
85 </script> 91 </script>
86 92
87 <style lang="scss"> 93 <style lang="scss">
88 image{ 94 image{
89 width: 100%; 95 width: 100%;
90 height: 120rpx; 96 height: 120rpx;
91 } 97 }
92 .name{ 98 .name{
93 width: 92%; 99 width: 92%;
94 height: 54rpx; 100 height: 54rpx;
95 padding: 5px 4%; 101 padding: 5px 4%;
96 display: -webkit-box; 102 display: -webkit-box;
97 -webkit-box-orient: vertical; 103 -webkit-box-orient: vertical;
98 -webkit-line-clamp: 2; 104 -webkit-line-clamp: 2;
99 text-align: justify; 105 text-align: justify;
100 overflow: hidden; 106 overflow: hidden;
101 font-size: 24rpx; 107 font-size: 24rpx;
102 color: #333333; 108 color: #333333;
103 } 109 }
104 .info{ 110 .info{
105 display: flex; 111 display: flex;
106 justify-content: space-between; 112 justify-content: space-between;
107 align-items: center; 113 align-items: center;
108 width: 92%; 114 width: 92%;
109 padding: 5px 4% 5px 4%; 115 padding: 5px 4% 5px 4%;
110 .priceBox{ 116 .priceBox{
111 display: flex; 117 display: flex;
112 justify-content: space-between; 118 justify-content: space-between;
113 align-items: center; 119 align-items: center;
114 .price{ 120 .price{
115 color: #EB5D3B; 121 color: #EB5D3B;
116 font-size: 28rpx; 122 font-size: 28rpx;
117 font-weight: 600; 123 font-weight: 600;
118 margin-right: 10rpx; 124 margin-right: 10rpx;
119 } 125 }
120 .originCost{ 126 .originCost{
121 text-decoration:line-through; 127 text-decoration:line-through;
122 color: #999999; 128 color: #999999;
123 font-size: 20rpx; 129 font-size: 20rpx;
124 } 130 }
125 131
126 } 132 }
127 .slogan{ 133 .trade_num{
128 color: #999999; 134 color: #999999;
129 font-size: 20rpx; 135 font-size: 20rpx;
130 } 136 }
131 } 137 }
132 </style> 138 </style>
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @fcb436f
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 class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
6 <text class="name">{{item.name}}</text> 6 <text class="name">{{item.name}}</text>
7 <text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text> 7 <text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
8 </view> 8 </view>
9 </block> 9 </block>
10 </view> 10 </view>
11 <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view> 11 <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"> 12 <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}"> 13 <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"> 14 <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']" 15 <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
16 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto"> 16 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
17 <block v-for="(sub,index) in page.submenu" :key="index"> 17 <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)"> 18 <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"> 19 <view class="menu-name">
20 <text>{{sub.name}}</text> 20 <text>{{sub.name}}</text>
21 <text class="iconfont selected"></text> 21 <text class="iconfont selected"></text>
22 </view> 22 </view>
23 </view> 23 </view>
24 </block> 24 </block>
25 </scroll-view> 25 </scroll-view>
26 <block v-for="(sub,index) in page.submenu" :key="index"> 26 <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" 27 <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"> 28 :scroll-into-view="'second_id'+secondScrollInto">
29 <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index"> 29 <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}"> 30 <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)"> 31 <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
32 <text>{{sub_second.name}}</text> 32 <text>{{sub_second.name}}</text>
33 <text class="iconfont selected"></text> 33 <text class="iconfont selected"></text>
34 </view> 34 </view>
35 <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"> 35 <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"> 36 <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}" 37 <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> 38 @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 39 <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> 40 class="iconfont triangle"></text></text>
41 </block> 41 </block>
42 </view> 42 </view>
43 </view> 43 </view>
44 </block> 44 </block>
45 </scroll-view> 45 </scroll-view>
46 </block> 46 </block>
47 </block> 47 </block>
48 <block v-if="page.type=='filter'"> 48 <block v-if="page.type=='filter'||page.type=='checkbox'">
49 <view class="filter"> 49 <view class="filter">
50 <scroll-view class="menu-box" :scroll-y="true"> 50 <scroll-view class="menu-box" :scroll-y="true">
51 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> 51 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
52 <view class="title">{{box.name}}</view> 52 <view class="title">{{box.name}}</view>
53 <view class="labels"> 53 <view class="labels">
54 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)" 54 <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> 55 :class="{'on':label.selected}">{{label.name}}</view>
56 </view> 56 </view>
57 </view> 57 </view>
58 </scroll-view> 58 </scroll-view>
59 <view class="btn-box"> 59 <view class="btn-box">
60 <view class="reset" @tap="resetFilterData(page_index)">重置</view> 60 <view class="reset" @tap="resetFilterData(page_index)">重置</view>
61 <view class="submit" @tap="setFilterData(page_index)">确定</view> 61 <view class="submit" @tap="setFilterData(page_index)">确定</view>
62 </view> 62 </view>
63 </view> 63 </view>
64 </block> 64 </block>
65 <block v-if="page.type=='radio'"> 65 <block v-if="page.type=='radio'">
66 <view class="filter"> 66 <view class="filter">
67 <scroll-view class="menu-box" :scroll-y="true"> 67 <scroll-view class="menu-box" :scroll-y="true">
68 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> 68 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
69 <view class="title">{{box.name}}</view> 69 <view class="title">{{box.name}}</view>
70 <view class="labels"> 70 <view class="labels">
71 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)" 71 <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> 72 :class="{'on':label.selected}">{{label.name}}</view>
73 </view> 73 </view>
74 </view> 74 </view>
75 </scroll-view> 75 </scroll-view>
76 <view class="btn-box"> 76 <view class="btn-box">
77 <view class="reset" @tap="resetFilterData(page_index)">重置</view> 77 <view class="reset" @tap="resetFilterData(page_index)">重置</view>
78 <view class="submit" @tap="setFilterData(page_index)">确定</view> 78 <view class="submit" @tap="setFilterData(page_index)">确定</view>
79 </view> 79 </view>
80 </view> 80 </view>
81 </block> 81 </block>
82 </view> 82 </view>
83 </block> 83 </block>
84 </view> 84 </view>
85 </template> 85 </template>
86 <script> 86 <script>
87 export default { 87 export default {
88 data() { 88 data() {
89 return { 89 return {
90 subData: [], //菜单数据 90 subData: [], //菜单数据
91 menu: [], //顶部横条数据 91 menu: [], //顶部横条数据
92 showPage: -1, //菜单页面显示/隐藏动画控制 92 showPage: -1, //菜单页面显示/隐藏动画控制
93 pageState: [], //页面的状态 93 pageState: [], //页面的状态
94 activeMenuArr: [], //UI状态 94 activeMenuArr: [], //UI状态
95 shadowActiveMenuArr: [], //记录选中 95 shadowActiveMenuArr: [], //记录选中
96 defaultActive:[], 96 defaultActive:[],
97 triangleDeg: [], //小三角形的翻转动画控制 97 triangleDeg: [], //小三角形的翻转动画控制
98 isShowMask: false, //遮罩层显示/隐藏动画控制 98 isShowMask: false, //遮罩层显示/隐藏动画控制
99 maskVisibility: false, //遮罩层显示/隐藏状态 99 maskVisibility: false, //遮罩层显示/隐藏状态
100 //滚动区域定位 100 //滚动区域定位
101 firstScrollInto: 0, 101 firstScrollInto: 0,
102 secondScrollInto: 0, 102 secondScrollInto: 0,
103 componentTop:0 ,//组件top 103 componentTop:0 ,//组件top
104 isReadNewSelect:false 104 isReadNewSelect:false
105 } 105 }
106 }, 106 },
107 props: { 107 props: {
108 filterData: { 108 filterData: {
109 value: Array, 109 value: Array,
110 default: [] 110 default: []
111 }, 111 },
112 defaultSelected:{ 112 defaultSelected:{
113 value: Array, 113 value: Array,
114 default: [] 114 default: []
115 }, 115 },
116 updateMenuName:{ 116 updateMenuName:{
117 value: Boolean, 117 value: Boolean,
118 default: true 118 default: true
119 }, 119 },
120 dataFormat:{ 120 dataFormat:{
121 value: String, 121 value: String,
122 default: 'Array' 122 default: 'Array'
123 } 123 }
124 }, 124 },
125 watch: { 125 watch: {
126 filterData: { 126 filterData: {
127 handler() { 127 handler() {
128 this.initMenu(); //filterData重新赋值初始化菜单 128 this.initMenu(); //filterData重新赋值初始化菜单
129 }, 129 },
130 immediate: true 130 immediate: true
131 }, 131 },
132 defaultSelected(newVal) { 132 defaultSelected(newVal) {
133 if(newVal.length==0){ 133 if(newVal.length==0){
134 return; 134 return;
135 } 135 }
136 this.defaultActive = JSON.parse(JSON.stringify(newVal)); 136 this.defaultActive = JSON.parse(JSON.stringify(newVal));
137 this.activeMenuArr = JSON.parse(JSON.stringify(newVal)); 137 this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
138 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)); 138 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
139 if(this.updateMenuName){ 139 if(this.updateMenuName){
140 this.setMenuName(); 140 this.setMenuName();
141 } 141 }
142 } 142 }
143 }, 143 },
144 methods: { 144 methods: {
145 initMenu() { 145 initMenu() {
146 let tmpMenuActiveArr=[]; 146 let tmpMenuActiveArr=[];
147 let tmpMenu=[]; 147 let tmpMenu=[];
148 for (let i = 0; i < this.filterData.length; i++) { 148 for (let i = 0; i < this.filterData.length; i++) {
149 let tmpitem = this.filterData[i]; 149 let tmpitem = this.filterData[i];
150 tmpMenu.push({ 150 tmpMenu.push({
151 //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name 151 //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
152 name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name), 152 name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
153 type: tmpitem.type 153 type: tmpitem.type
154 }); 154 });
155 //初始化选中项数组-ui状态 155 //初始化选中项数组-ui状态
156 tmpMenuActiveArr.push(this.processActive(tmpitem)); 156 tmpMenuActiveArr.push(this.processActive(tmpitem));
157 //初始化角度数组 157 //初始化角度数组
158 this.triangleDeg.push(0); 158 this.triangleDeg.push(0);
159 //初始化控制显示状态数组 159 //初始化控制显示状态数组
160 this.pageState.push(false); 160 this.pageState.push(false);
161 //递归处理子菜单数据 161 //递归处理子菜单数据
162 tmpitem = this.processSubMenu(tmpitem); 162 tmpitem = this.processSubMenu(tmpitem);
163 this.filterData[i] = tmpitem; 163 this.filterData[i] = tmpitem;
164 } 164 }
165 this.menu = tmpMenu; 165 this.menu = tmpMenu;
166 //初始化选中项数组 166 //初始化选中项数组
167 tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr; 167 tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
168 this.defaultActive = []; 168 this.defaultActive = [];
169 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); 169 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
170 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); 170 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
171 //加载菜单数据 171 //加载菜单数据
172 this.subData = this.filterData; 172 this.subData = this.filterData;
173 //设定顶部菜单名字 173 //设定顶部菜单名字
174 if(this.updateMenuName){ 174 if(this.updateMenuName){
175 this.setMenuName(); 175 this.setMenuName();
176 } 176 }
177 }, 177 },
178 setMenuName(){ 178 setMenuName(){
179 for(var i=0;i<this.activeMenuArr.length;i++){ 179 for(var i=0;i<this.activeMenuArr.length;i++){
180 let row = this.activeMenuArr[i]; 180 let row = this.activeMenuArr[i];
181 if (typeof(row[0]) != 'object'){ 181 if (typeof(row[0]) != 'object'){
182 var tmpsub = false; 182 var tmpsub = false;
183 if(row.length>0 && row[0]!=null){ 183 if(row.length>0 && row[0]!=null){
184 tmpsub = this.subData[i].submenu[row[0]]; 184 tmpsub = this.subData[i].submenu[row[0]];
185 if(row.length>1 && row[1]!=null){ 185 if(row.length>1 && row[1]!=null){
186 tmpsub = tmpsub.submenu[row[1]]; 186 tmpsub = tmpsub.submenu[row[1]];
187 if(row.length>2 && row[2]!=null){ 187 if(row.length>2 && row[2]!=null){
188 tmpsub = tmpsub.submenu[row[2]]; 188 tmpsub = tmpsub.submenu[row[2]];
189 } 189 }
190 } 190 }
191 }else{ 191 }else{
192 tmpsub = false; 192 tmpsub = false;
193 } 193 }
194 if(tmpsub){ 194 if(tmpsub){
195 this.menu[i].name = tmpsub.name; 195 this.menu[i].name = tmpsub.name;
196 } 196 }
197 } 197 }
198 } 198 }
199 }, 199 },
200 //展开更多 200 //展开更多
201 showMoreSub(index) { 201 showMoreSub(index) {
202 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true; 202 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
203 this.$forceUpdate(); 203 this.$forceUpdate();
204 }, 204 },
205 //选中 205 //选中
206 selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) { 206 selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
207 //读取记录 207 //读取记录
208 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] == 208 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
209 level1_index) { 209 level1_index) {
210 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))); 210 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
211 } else { 211 } else {
212 this.activeMenuArr[page_index].splice(0, 1, level1_index); 212 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); 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);
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); 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);
215 } 215 }
216 //写入结果 216 //写入结果
217 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0) 217 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
218 ) { 218 ) {
219 let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]; 219 let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
220 if(this.updateMenuName){ 220 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; 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;
222 } 222 }
223 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); 223 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
224 this.togglePage(this.showPage); 224 this.togglePage(this.showPage);
225 } 225 }
226 }, 226 },
227 //写入结果，筛选 227 //写入结果，筛选
228 setFilterData(page_index) { 228 setFilterData(page_index) {
229 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); 229 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
230 this.togglePage(this.showPage); 230 this.togglePage(this.showPage);
231 }, 231 },
232 //重置结果和ui，筛选 232 //重置结果和ui，筛选
233 resetFilterData(page_index) { 233 resetFilterData(page_index) {
234 let tmpArr = []; 234 let tmpArr = [];
235 let level = this.shadowActiveMenuArr[page_index].length; 235 let level = this.shadowActiveMenuArr[page_index].length;
236 while (level > 0) { 236 while (level > 0) {
237 tmpArr.push([]); 237 tmpArr.push([]);
238 let box = this.subData[page_index].submenu[level - 1].submenu; 238 let box = this.subData[page_index].submenu[level - 1].submenu;
239 for (let i = 0; i < box.length; i++) { 239 for (let i = 0; i < box.length; i++) {
240 this.subData[page_index].submenu[level - 1].submenu[i].selected = false; 240 this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
241 } 241 }
242 level--; 242 level--;
243 } 243 }
244 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr)); 244 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
245 this.$forceUpdate(); 245 this.$forceUpdate();
246 }, 246 },
247 //选中筛选类label-UI状态 247 //选中筛选类label-UI状态
248 selectFilterLabel(page_index, box_index, label_index) { 248 selectFilterLabel(page_index, box_index, label_index) {
249 let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index); 249 let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
250 if (find_index > -1) { 250 if (find_index > -1) {
251 this.activeMenuArr[page_index][box_index].splice(find_index, 1); 251 this.activeMenuArr[page_index][box_index].splice(find_index, 1);
252 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false; 252 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
253 } else { 253 } else {
254 this.activeMenuArr[page_index][box_index].push(label_index); 254 this.activeMenuArr[page_index][box_index].push(label_index);
255 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true; 255 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
256 } 256 }
257 this.$forceUpdate(); 257 this.$forceUpdate();
258 }, 258 },
259 //选中单选类label-UI状态 259 //选中单选类label-UI状态
260 selectRadioLabel(page_index, box_index, label_index) { 260 selectRadioLabel(page_index, box_index, label_index) {
261 261
262 let activeIndex = this.activeMenuArr[page_index][box_index][0]; 262 let activeIndex = this.activeMenuArr[page_index][box_index][0];
263 if(activeIndex == label_index){ 263 if(activeIndex == label_index){
264 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false; 264 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
265 this.activeMenuArr[page_index][box_index][0] = null; 265 this.activeMenuArr[page_index][box_index][0] = null;
266 }else{ 266 }else{
267 if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){ 267 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; 268 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
269 } 269 }
270 270
271 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true; 271 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
272 this.activeMenuArr[page_index][box_index][0] = label_index; 272 this.activeMenuArr[page_index][box_index][0] = label_index;
273 } 273 }
274 this.$forceUpdate(); 274 this.$forceUpdate();
275 }, 275 },
276 //菜单开关 276 //菜单开关
277 togglePage(index) { 277 togglePage(index) {
278 if (index == this.showPage) { 278 if (index == this.showPage) {
279 this.hidePageLayer(true); 279 this.hidePageLayer(true);
280 this.hideMask(); 280 this.hideMask();
281 this.showPage = -1; 281 this.showPage = -1;
282 } else { 282 } else {
283 if (this.showPage > -1) { 283 if (this.showPage > -1) {
284 this.hidePageLayer(false); 284 this.hidePageLayer(false);
285 } 285 }
286 this.showPageLayer(index); 286 this.showPageLayer(index);
287 this.showMask(); 287 this.showMask();
288 } 288 }
289 }, 289 },
290 //hide遮罩层 290 //hide遮罩层
291 hideMask() { 291 hideMask() {
292 this.isShowMask = false; 292 this.isShowMask = false;
293 setTimeout(() => { 293 setTimeout(() => {
294 this.maskVisibility = false; 294 this.maskVisibility = false;
295 }, 200); 295 }, 200);
296 }, 296 },
297 //show遮罩层 297 //show遮罩层
298 showMask() { 298 showMask() {
299 this.maskVisibility = true; 299 this.maskVisibility = true;
300 this.$nextTick(() => { 300 this.$nextTick(() => {
301 setTimeout(() => { 301 setTimeout(() => {
302 this.isShowMask = true; 302 this.isShowMask = true;
303 }, 0); 303 }, 0);
304 }) 304 })
305 }, 305 },
306 //hide菜单页 306 //hide菜单页
307 hidePageLayer(isAnimation) { 307 hidePageLayer(isAnimation) {
308 this.triangleDeg[this.showPage] = 0; 308 this.triangleDeg[this.showPage] = 0;
309 let tmpIndex = this.showPage; 309 let tmpIndex = this.showPage;
310 if (isAnimation) { 310 if (isAnimation) {
311 setTimeout(() => { 311 setTimeout(() => {
312 this.pageState.splice(tmpIndex, 1, false); 312 this.pageState.splice(tmpIndex, 1, false);
313 }, 200); 313 }, 200);
314 this.confirm(); 314 this.confirm();
315 } else { 315 } else {
316 this.pageState.splice(tmpIndex, 1, false) 316 this.pageState.splice(tmpIndex, 1, false)
317 } 317 }
318 this.firstScrollInto = null; 318 this.firstScrollInto = null;
319 this.secondScrollInto = null; 319 this.secondScrollInto = null;
320 }, 320 },
321 confirm() { 321 confirm() {
322 let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)); 322 let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
323 let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)); 323 let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
324 324
325 //对结果做一下处理 325 //对结果做一下处理
326 index.forEach((item, i) => { 326 index.forEach((item, i) => {
327 if (typeof(item[0]) == 'object') { 327 if (typeof(item[0]) == 'object') {
328 //针对筛选结果过一个排序 328 //针对筛选结果过一个排序
329 item.forEach((s, j) => { 329 item.forEach((s, j) => {
330 if(s!=null){ 330 if(s!=null){
331 s.sort((val1, val2) => { 331 s.sort((val1, val2) => {
332 return val1 - val2; 332 return val1 - val2;
333 }); 333 });
334 item[j] = s; 334 item[j] = s;
335 s.forEach((v, k) => { 335 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; 336 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){ 337 if(this.subData[i].type == 'radio' && value[i][j][k] == null){
338 value[i][j] = []; 338 value[i][j] = [];
339 index[i][j] = []; 339 index[i][j] = [];
340 } 340 }
341 }); 341 });
342 } 342 }
343 }); 343 });
344 }else{ 344 }else{
345 let submenu = this.subData[i].submenu[item[0]]; 345 let submenu = this.subData[i].submenu[item[0]];
346 // console.log(this.subData[i])
346 value[i][0] = submenu.value; 347 value[i][0] = submenu.value;
347 if(value[i].length>=2 && item[1]!=null){ 348 if(value[i].length>=2 && item[1]!=null){
348 if(submenu.submenu.length>0){ 349 if(submenu.submenu.length>0){
349 submenu = submenu.submenu[item[1]]; 350 submenu = submenu.submenu[item[1]];
350 value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null; 351 value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
351 }else{ 352 }else{
352 value[i][1] = null 353 value[i][1] = null
353 } 354 }
354 if(value[i].length>=3 && item[2]!=null){ 355 if(value[i].length>=3 && item[2]!=null){
355 if(submenu.submenu.length>0){ 356 if(submenu.submenu.length>0){
356 submenu = submenu.submenu[item[2]]; 357 submenu = submenu.submenu[item[2]];
357 value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null; 358 value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
358 }else{ 359 }else{
359 value[i][2] = null; 360 value[i][2] = null;
360 } 361 }
361 } 362 }
362 } 363 }
363 } 364 }
364 index[i] = item; 365 index[i] = item;
365 366
366 }); 367 });
367 // 输出 368 // 输出
368 this.$emit('confirm', { 369 this.$emit('confirm', {
369 index: index, 370 index: index,
370 value: value 371 value: value
371 }); 372 });
372 }, 373 },
373 //show菜单页 374 //show菜单页
374 showPageLayer(index) { 375 showPageLayer(index) {
375 this.processPage(index); 376 this.processPage(index);
376 this.pageState.splice(index, 1, true); 377 this.pageState.splice(index, 1, true);
377 this.$nextTick(() => { 378 this.$nextTick(() => {
378 setTimeout(() => { 379 setTimeout(() => {
379 this.showPage = index; 380 this.showPage = index;
380 }, 0); 381 }, 0);
381 }) 382 })
382 this.triangleDeg[index] = 180; 383 this.triangleDeg[index] = 180;
383 }, 384 },
384 reloadActiveMenuArr(){ 385 reloadActiveMenuArr(){
385 for (let i = 0; i < this.filterData.length; i++) { 386 for (let i = 0; i < this.filterData.length; i++) {
386 let tmpitem = this.filterData[i]; 387 let tmpitem = this.filterData[i];
387 let tmpArr = this.processActive(tmpitem); 388 let tmpArr = this.processActive(tmpitem);
388 tmpitem = this.processSubMenu(tmpitem); 389 tmpitem = this.processSubMenu(tmpitem);
389 if(this.activeMenuArr[i].length!=tmpArr.length){ 390 if(this.activeMenuArr[i].length!=tmpArr.length){
390 this.filterData[i] = tmpitem; 391 this.filterData[i] = tmpitem;
391 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))); 392 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
392 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))); 393 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
393 } 394 }
394 } 395 }
395 this.subData = this.filterData; 396 this.subData = this.filterData;
396 this.$forceUpdate(); 397 this.$forceUpdate();
397 }, 398 },
398 processPage(index) { 399 processPage(index) {
399 //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 400 //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
400 this.reloadActiveMenuArr(); 401 this.reloadActiveMenuArr();
401 //重置UI控制数组 402 //重置UI控制数组
402 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))); 403 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
403 if (this.menu[index].type == 'filter') { 404 if (this.menu[index].type == 'filter') {
404 //重载筛选页选中状态 405 //重载筛选页选中状态
405 let level = this.shadowActiveMenuArr[index].length; 406 let level = this.shadowActiveMenuArr[index].length;
406 for (let i = 0; i < level; i++) { 407 for (let i = 0; i < level; i++) {
407 let box = this.subData[index].submenu[i].submenu; 408 let box = this.subData[index].submenu[i].submenu;
408 for (let j = 0; j < box.length; j++) { 409 for (let j = 0; j < box.length; j++) {
409 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 410 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
410 this.subData[index].submenu[i].submenu[j].selected = true; 411 this.subData[index].submenu[i].submenu[j].selected = true;
411 } else { 412 } else {
412 this.subData[index].submenu[i].submenu[j].selected = false; 413 this.subData[index].submenu[i].submenu[j].selected = false;
413 } 414 }
414 } 415 }
415 } 416 }
416 } else if (this.menu[index].type == 'hierarchy') { 417 } else if (this.menu[index].type == 'hierarchy') {
417 this.$nextTick(() => { 418 this.$nextTick(() => {
418 setTimeout(() => { 419 setTimeout(() => {
419 //滚动到选中项 420 //滚动到选中项
420 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]); 421 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
421 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]); 422 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
422 }, 0); 423 }, 0);
423 }) 424 })
424 } else if (this.menu[index].type == 'radio') { 425 } else if (this.menu[index].type == 'radio') {
425 //重载筛选页选中状态 426 //重载筛选页选中状态
426 let level = this.shadowActiveMenuArr[index].length; 427 let level = this.shadowActiveMenuArr[index].length;
427 for (let i = 0; i < level; i++) { 428 for (let i = 0; i < level; i++) {
428 let box = this.subData[index].submenu[i].submenu; 429 let box = this.subData[index].submenu[i].submenu;
429 for (let j = 0; j < box.length; j++) { 430 for (let j = 0; j < box.length; j++) {
430 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 431 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
431 this.subData[index].submenu[i].submenu[j].selected = true; 432 this.subData[index].submenu[i].submenu[j].selected = true;
432 } else { 433 } else {
433 this.subData[index].submenu[i].submenu[j].selected = false; 434 this.subData[index].submenu[i].submenu[j].selected = false;
434 } 435 }
435 } 436 }
436 } 437 }
437 } 438 }
438 }, 439 },
439 processActive(tmpitem) { 440 processActive(tmpitem) {
440 let tmpArr = [] 441 let tmpArr = []
441 if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) { 442 if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
442 let level = this.getMaxFloor(tmpitem.submenu); 443 let level = this.getMaxFloor(tmpitem.submenu);
443 while (level > 0) { 444 while (level > 0) {
444 tmpArr.push(0); 445 tmpArr.push(0);
445 level--; 446 level--;
446 } 447 }
447 } else if (tmpitem.type == 'filter') { 448 } else if (tmpitem.type == 'filter') {
448 let level = tmpitem.submenu.length; 449 let level = tmpitem.submenu.length;
449 while (level > 0) { 450 while (level > 0) {
450 tmpArr.push([]); 451 tmpArr.push([]);
451 level--; 452 level--;
452 } 453 }
453 } else if (tmpitem.type == 'radio') { 454 } else if (tmpitem.type == 'radio') {
454 let level = tmpitem.submenu.length; 455 let level = tmpitem.submenu.length;
455 while (level > 0) { 456 while (level > 0) {
456 tmpArr.push([]); 457 tmpArr.push([]);
457 level--; 458 level--;
458 } 459 }
459 } 460 }
460 return tmpArr; 461 return tmpArr;
461 }, 462 },
462 processSubMenu(menu) { 463 processSubMenu(menu) {
463 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { 464 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
464 for (let i = 0; i < menu.submenu.length; i++) { 465 for (let i = 0; i < menu.submenu.length; i++) {
465 menu.submenu[i] = this.processSubMenu(menu.submenu[i]); 466 menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
466 } 467 }
467 } else { 468 } else {
468 menu.submenu = []; 469 menu.submenu = [];
469 } 470 }
470 return menu; 471 return menu;
471 }, 472 },
472 //计算菜单层级 473 //计算菜单层级
473 getMaxFloor(treeData) { 474 getMaxFloor(treeData) {
474 let floor = 0 475 let floor = 0
475 let max = 0 476 let max = 0
476 function each(data, floor) { 477 function each(data, floor) {
477 data.forEach(e => { 478 data.forEach(e => {
478 max = floor > max ? floor : max; 479 max = floor > max ? floor : max;
479 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { 480 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
480 each(e.submenu, floor + 1) 481 each(e.submenu, floor + 1)
481 } 482 }
482 }) 483 })
483 } 484 }
484 each(treeData, 1) 485 each(treeData, 1)
485 return max; 486 return max;
486 }, 487 },
487 discard() { 488 discard() {
488 489
489 } 490 }
490 } 491 }
491 } 492 }
492 </script> 493 </script>
493 <style lang="scss"> 494 <style lang="scss">
494 .HMfilterDropdown { 495 .HMfilterDropdown {
495 flex-shrink: 0; 496 flex-shrink: 0;
496 width: 100%; 497 width: 100%;
497 height: 44px; 498 height: 44px;
498 position: fixed; 499 position: fixed;
499 z-index: 997; 500 z-index: 997;
500 flex-wrap: nowrap; 501 flex-wrap: nowrap;
501 display: flex; 502 display: flex;
502 flex-direction: row; 503 flex-direction: row;
503 top: var(--window-top); 504 top: var(--window-top);
504 left:0; 505 left:0;
505 view { 506 view {
506 display: flex; 507 display: flex;
507 flex-wrap: nowrap; 508 flex-wrap: nowrap;
508 } 509 }
509 } 510 }
510 .region { 511 .region {
511 flex: 1; 512 flex: 1;
512 height: 44px; 513 height: 44px;
513 } 514 }
514 .nav { 515 .nav {
515 width: 100%; 516 width: 100%;
516 height: 44px; 517 height: 44px;
517 border-bottom: solid 1rpx #eee; 518 border-bottom: solid 1rpx #eee;
518 z-index: 12; 519 z-index: 12;
519 background-color: #ffffff; 520 background-color: #ffffff;
520 flex-direction: row; 521 flex-direction: row;
521 .first-menu { 522 .first-menu {
522 width: 100%; 523 width: 100%;
523 font-size: 13px; 524 font-size: 13px;
524 color: #333333; 525 color: #333333;
525 flex-direction: row; 526 flex-direction: row;
526 align-items: center; 527 align-items: center;
527 justify-content: center; 528 justify-content: center;
528 transition: color .2s linear; 529 transition: color .2s linear;
529 530
530 &.on { 531 &.on {
531 color: #FF6B4A; 532 color: #FF6B4A;
532 533
533 .iconfont { 534 .iconfont {
534 color: #FF6B4A; 535 color: #FF6B4A;
535 } 536 }
536 } 537 }
537 .name { 538 .name {
538 height: 20px; 539 height: 20px;
539 text-align: center; 540 text-align: center;
540 text-overflow: clip; 541 text-overflow: clip;
541 overflow: hidden; 542 overflow: hidden;
542 } 543 }
543 .iconfont { 544 .iconfont {
544 width: 13px; 545 width: 13px;
545 height: 13px; 546 height: 13px;
546 align-items: center; 547 align-items: center;
547 justify-content: center; 548 justify-content: center;
548 transition: transform .2s linear, color .2s linear; 549 transition: transform .2s linear, color .2s linear;
549 } 550 }
550 } 551 }
551 } 552 }
552 .sub-menu-class { 553 .sub-menu-class {
553 width: 100%; 554 width: 100%;
554 position: absolute; 555 position: absolute;
555 left: 0; 556 left: 0;
556 transform: translate3d(0, - 100%, 0); 557 transform: translate3d(0, - 100%, 0);
557 max-height: 345px; 558 max-height: 345px;
558 background-color: #ffffff; 559 background-color: #ffffff;
559 z-index: 11; 560 z-index: 11;
560 box-shadow: 0 5px 5px rgba(0, 0, 0, .1); 561 box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
561 overflow: hidden; 562 overflow: hidden;
562 flex-direction: row; 563 flex-direction: row;
563 transition: transform .15s linear; 564 transition: transform .15s linear;
564 &.hide { 565 &.hide {
565 display: none; 566 display: none;
566 } 567 }
567 568
568 &.show { 569 &.show {
569 transform: translate3d(0, calc(44px + 1rpx), 0); 570 transform: translate3d(0, calc(44px + 1rpx), 0);
570 } 571 }
571 } 572 }
572 .sub-menu-list { 573 .sub-menu-list {
573 width: 100%; 574 width: 100%;
574 height: 345px; 575 height: 345px;
575 flex-direction: column; 576 flex-direction: column;
576 .sub-menu { 577 .sub-menu {
577 min-height: 44px; 578 min-height: 44px;
578 font-size: 13px; 579 font-size: 13px;
579 flex-direction: column; 580 flex-direction: column;
580 padding-right: 15px; 581 padding-right: 15px;
581 >.menu-name { 582 >.menu-name {
582 height: 44px; 583 height: 44px;
583 flex-direction: row; 584 flex-direction: row;
584 align-items: center; 585 align-items: center;
585 justify-content: space-between; 586 justify-content: space-between;
586 >.iconfont { 587 >.iconfont {
587 display: none; 588 display: none;
588 font-size: 18px; 589 font-size: 18px;
589 color: #FF6B4A; 590 color: #FF6B4A;
590 } 591 }
591 } 592 }
592 } 593 }
593 &.first { 594 &.first {
594 flex-shrink: 0; 595 flex-shrink: 0;
595 width: 236rpx; 596 width: 236rpx;
596 background-color: #f0f0f0; 597 background-color: #f0f0f0;
597 .sub-menu { 598 .sub-menu {
598 padding-left: 15px; 599 padding-left: 15px;
599 600
600 &.on { 601 &.on {
601 background-color: #fff; 602 background-color: #fff;
602 } 603 }
603 } 604 }
604 } 605 }
605 &.alone { 606 &.alone {
606 max-height: 345px; 607 max-height: 345px;
607 min-height: 170px; 608 min-height: 170px;
608 height: auto; 609 height: auto;
609 .sub-menu { 610 .sub-menu {
610 min-height: calc(44px - 1rpx); 611 min-height: calc(44px - 1rpx);
611 margin-left: 15px; 612 margin-left: 15px;
612 border-bottom: solid 1rpx #e5e5e5; 613 border-bottom: solid 1rpx #e5e5e5;
613 614
614 &.on { 615 &.on {
615 color: #FF6B4A; 616 color: #FF6B4A;
616 617
617 >.menu-name { 618 >.menu-name {
618 >.iconfont { 619 >.iconfont {
619 display: block; 620 display: block;
620 } 621 }
621 } 622 }
622 } 623 }
623 } 624 }
624 } 625 }
625 &.not-first { 626 &.not-first {
626 .sub-menu { 627 .sub-menu {
627 min-height: calc(44px - 1rpx); 628 min-height: calc(44px - 1rpx);
628 margin-left: 15px; 629 margin-left: 15px;
629 border-bottom: solid 1rpx #e5e5e5; 630 border-bottom: solid 1rpx #e5e5e5;
630 >.menu-name { 631 >.menu-name {
631 height: calc(44px - 1rpx); 632 height: calc(44px - 1rpx);
632 >.iconfont { 633 >.iconfont {
633 display: none; 634 display: none;
634 font-size: 18px; 635 font-size: 18px;
635 color: #FF6B4A; 636 color: #FF6B4A;
636 } 637 }
637 } 638 }
638 &.on { 639 &.on {
639 color: #FF6B4A; 640 color: #FF6B4A;
640 >.menu-name { 641 >.menu-name {
641 >.iconfont { 642 >.iconfont {
642 display: block; 643 display: block;
643 } 644 }
644 } 645 }
645 } 646 }
646 .more-sub-menu { 647 .more-sub-menu {
647 flex-direction: row; 648 flex-direction: row;
648 flex-wrap: wrap; 649 flex-wrap: wrap;
649 padding-bottom: 9px; 650 padding-bottom: 9px;
650 >text { 651 >text {
651 height: 30px; 652 height: 30px;
652 border-radius: 3px; 653 border-radius: 3px;
653 background-color: #f5f5f5; 654 background-color: #f5f5f5;
654 color: #9b9b9b; 655 color: #9b9b9b;
655 margin-bottom: 6px; 656 margin-bottom: 6px;
656 margin-right: 6px; 657 margin-right: 6px;
657 text-align: center; 658 text-align: center;
658 line-height: 30px; 659 line-height: 30px;
659 border: solid #f5f5f5 1rpx; 660 border: solid #f5f5f5 1rpx;
660 flex: 0 0 calc(33.33% - 6px); 661 flex: 0 0 calc(33.33% - 6px);
661 overflow: hidden; 662 overflow: hidden;
662 font-size: 12px; 663 font-size: 12px;
663 &:nth-child(3n) { 664 &:nth-child(3n) {
664 margin-right: 0; 665 margin-right: 0;
665 } 666 }
666 &.on { 667 &.on {
667 border-color: #f6c8ac; 668 border-color: #f6c8ac;
668 color: #FF6B4A; 669 color: #FF6B4A;
669 } 670 }
670 .iconfont { 671 .iconfont {
671 color: #9b9b9b; 672 color: #9b9b9b;
672 } 673 }
673 } 674 }
674 } 675 }
675 } 676 }
676 } 677 }
677 } 678 }
678 .filter { 679 .filter {
679 width: 100%; 680 width: 100%;
680 height: 345px; 681 height: 345px;
681 display: flex; 682 display: flex;
682 flex-direction: column; 683 flex-direction: column;
683 justify-content: space-between; 684 justify-content: space-between;
684 align-items: center; 685 align-items: center;
685 .menu-box { 686 .menu-box {
686 width: 698rpx; 687 width: 698rpx;
687 height: calc(345px - 75px); 688 height: calc(345px - 75px);
688 flex-shrink: 1; 689 flex-shrink: 1;
689 .box { 690 .box {
690 width: 100%; 691 width: 100%;
691 margin-top: 16px; 692 margin-top: 16px;
692 flex-direction: column; 693 flex-direction: column;
693 .title { 694 .title {
694 width: 100%; 695 width: 100%;
695 font-size: 13px; 696 font-size: 13px;
696 color: #888; 697 color: #888;
697 } 698 }
698 .labels { 699 .labels {
699 flex-direction: row; 700 flex-direction: row;
700 flex-wrap: wrap; 701 flex-wrap: wrap;
701 .on { 702 .on {
702 border-color: #FF6B4A; 703 border-color: #FF6B4A;
703 background-color: #FF6B4A; 704 background-color: #FF6B4A;
704 color: #fff; 705 color: #fff;
705 } 706 }
706 >view { 707 >view {
707 width: 148rpx; 708 width: 148rpx;
708 height: 30px; 709 height: 30px;
709 border: solid 1rpx #adadad; 710 border: solid 1rpx #adadad;
710 border-radius: 2px; 711 border-radius: 2px;
711 margin-right: 15px; 712 margin-right: 15px;
712 margin-top: 8px; 713 margin-top: 8px;
714 padding: 0 16rpx;
715 box-sizing: border-box;
713 font-size: 12px; 716 font-size: 12px;
714 flex-direction: row; 717 flex-direction: row;
715 justify-content: center; 718 justify-content: center;
716 align-items: center; 719 align-items: center;
720 overflow: hidden;
721 white-space: nowrap;
722 text-overflow: ellipsis;
717 &:nth-child(4n) { 723 &:nth-child(4n) {
718 margin-right: 0; 724 margin-right: 0;
719 } 725 }
720 } 726 }
721 } 727 }
722 } 728 }
723 } 729 }
724 .btn-box { 730 .btn-box {
725 flex-shrink: 0; 731 flex-shrink: 0;
726 width: 698rpx; 732 width: 100%;
727 height: 75px; 733 height: 75px;
728 flex-direction: row !important; 734 flex-direction: row !important;
729 align-items: center; 735 align-items: center;
730 justify-content: space-between; 736 justify-content: space-between;
731 >view { 737 >view {
732 width: 320rpx; 738 width: 320rpx;
733 height: 40px; 739 height: 40px;
734 border-radius: 40px; 740 border-radius: 40px;
735 border: solid 1rpx #FF6B4A; 741 border: solid 1rpx #FF6B4A;
736 align-items: center; 742 align-items: center;
737 justify-content: center; 743 justify-content: center;
738 } 744 }
739 .reset { 745 .reset {
740 color: #FF6B4A; 746 color: #FF6B4A;
741 } 747 }
742 .submit { 748 .submit {
743 color: #fff; 749 color: #fff;
744 background-color: #FF6B4A; 750 background-color: #FF6B4A;
745 } 751 }
746 } 752 }
747 } 753 }
748 .mask { 754 .mask {
749 z-index: 10; 755 z-index: 10;
750 position: fixed; 756 position: fixed;
751 top: 0; 757 top: 0;
752 left: 0; 758 left: 0;
753 right: 0; 759 right: 0;
754 bottom: 0; 760 bottom: 0;
755 background-color: rgba(0, 0, 0, 0); 761 background-color: rgba(0, 0, 0, 0);
756 transition: background-color .15s linear; 762 transition: background-color .15s linear;
757 &.show { 763 &.show {
758 background-color: rgba(0, 0, 0, 0.5); 764 background-color: rgba(0, 0, 0, 0.5);
759 } 765 }
760 &.hide { 766 &.hide {
761 display: none; 767 display: none;
762 } 768 }
763 } 769 }
764 /* 字体图标 */ 770 /* 字体图标 */
765 @font-face { 771 @font-face {
766 font-family: "HM-FD-font"; 772 font-family: "HM-FD-font";
767 src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA='); 773 src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
768 } 774 }
769 .iconfont { 775 .iconfont {
770 font-family: "HM-FD-font" !important; 776 font-family: "HM-FD-font" !important;
771 font-size: 13px; 777 font-size: 13px;
772 font-style: normal; 778 font-style: normal;
773 color: #757575; 779 color: #757575;
774 &.triangle { 780 &.triangle {
775 &:before { 781 &:before {
776 content: "\e65a"; 782 content: "\e65a";
777 } 783 }
778 } 784 }
779 &.selected { 785 &.selected {
780 &:before { 786 &:before {
781 content: "\e607"; 787 content: "\e607";
782 } 788 }
783 } 789 }
784 } 790 }
785 </style> 791 </style>
786 792
src/components/UniSliper/UniSliper.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 <div class="c-progress"> 2 <div class="c-progress">
3 <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> 3 <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
4 <div class="c-progress-inner" :style="setProgressStyle"></div> 4 <div class="c-progress-inner" :style="setProgressStyle"></div>
5 <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> 5 <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
6 </div> 6 </div>
7 <span v-if="showPerText">{{stand_width}}mm</span> 7 <span v-if="showPerText">{{stand_width}}mm</span>
8 </div> 8 </div>
9 </template> 9 </template>
10 10
11 <script> 11 <script>
12 // 使用了element的颜色 12 // 使用了element的颜色
13 const colorTable = { 13 const colorTable = {
14 success: '#13ce66', 14 success: '#13ce66',
15 fail: '#ff4949', 15 fail: '#ff4949',
16 warning: '#e6a23c', 16 warning: '#e6a23c',
17 default: '#409EFF' 17 default: '#409EFF'
18 } 18 }
19 export default { 19 export default {
20 name: 'CProgress', 20 name: 'CProgress',
21 props: { 21 props: {
22 percent: { 22 percent: {
23 type: Number, 23 type: Number,
24 default: 60 24 default: 60
25 }, 25 },
26 showSlider: { 26 showSlider: {
27 type: Boolean, 27 type: Boolean,
28 default: true 28 default: true
29 }, 29 },
30 showPerText: { 30 showPerText: {
31 type: Boolean, 31 type: Boolean,
32 default: true 32 default: true
33 }, 33 },
34 // 进度条的宽度 34 // 进度条的宽度
35 width: { 35 width: {
36 type: Number, 36 type: Number,
37 default: 300 37 default: 300
38 }, 38 },
39 bgColor: { 39 bgColor: {
40 type: String, 40 type: String,
41 default: '#ebeef5' 41 default: '#ebeef5'
42 }, 42 },
43 progressColor: { 43 progressColor: {
44 type: String, 44 type: String,
45 default: '#409EFF' 45 default: '#409EFF'
46 }, 46 },
47 // 滑块的宽度 47 // 滑块的宽度
48 sliderWidth: { 48 sliderWidth: {
49 type: Number, 49 type: Number,
50 default: 20 50 default: 20
51 }, 51 },
52 // 颜色的类型 52 // 颜色的类型
53 type: { 53 type: {
54 type: String, 54 type: String,
55 default: colorTable.default 55 default: colorTable.default
56 }, 56 },
57 //规格长度 57 //规格长度
58 standard:{ 58 standard:{
59 type: Number, 59 type: Number,
60 default: 1.4 60 default: 1.4
61 }, 61 },
62 //初始长度 62 //初始长度
63 stand_width:{ 63 stand_width:{
64 type: Number, 64 type: Number,
65 default: 0 65 default: 0
66 } 66 }
67 }, 67 },
68 data () { 68 data () {
69 return { 69 return {
70 sliderLeft: 0, // 滑块相对父元素发x坐标 70 sliderLeft: 0, // 滑块相对父元素发x坐标
71 progressWidth: 0, // 进度条当前的的宽度 71 progressWidth: 0, // 进度条当前的的宽度
72 tempPercent: 0, 72 tempPercent: 0,
73 } 73 }
74 }, 74 },
75 computed: { 75 computed: {
76 // 设置进度条的背景样式 76 // 设置进度条的背景样式
77 setProgressBgStyle () { 77 setProgressBgStyle () {
78 return { 78 return {
79 // 加上滑块的宽度 79 // 加上滑块的宽度
80 width: `${this.width + this.sliderWidth}px` 80 width: `${this.width + this.sliderWidth}px`
81 } 81 }
82 }, 82 },
83 // 设置进度条的样式 83 // 设置进度条的样式
84 setProgressStyle () { 84 setProgressStyle () {
85 const color = colorTable[this.type] || this.progressColor 85 const color = colorTable[this.type] || this.progressColor
86 return { 86 return {
87 width: `${this.progressWidth}px`, 87 width: `${this.progressWidth}px`,
88 background: color 88 background: color
89 } 89 }
90 }, 90 },
91 // 设置滑块的样式 91 // 设置滑块的样式
92 setSliderStyle () { 92 setSliderStyle () {
93 const color = colorTable[this.type] || this.progressColor 93 const color = colorTable[this.type] || this.progressColor
94 return { 94 return {
95 border: `1px solid ${color}`, 95 border: `1px solid ${color}`,
96 width: `${this.sliderWidth}px`, 96 width: `${this.sliderWidth}px`,
97 height: `${this.sliderWidth}px`, 97 height: `${this.sliderWidth}px`,
98 left: `${this.sliderLeft}px` 98 left: `${this.sliderLeft}px`
99 } 99 }
100 } 100 }
101 }, 101 },
102 mounted () { 102 mounted () {
103 this.sliderLeft = this.width / 100 * this.percent 103 this.sliderLeft = this.width / 100 * this.percent
104 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 104 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
105 this.tempPercent = this.percent 105 this.tempPercent = this.percent
106 this.addListener() 106 this.addListener()
107 }, 107 },
108 methods: { 108 methods: {
109 addListener () { 109 addListener () {
110 const slider = this.$refs.slider 110 const slider = this.$refs.slider
111 const progress = this.$refs.progress 111 const progress = this.$refs.progress
112 let isClickSlider = false 112 let isClickSlider = false
113 let distance = 0 // 滑块与点击坐标的绝对距离 113 let distance = 0 // 滑块与点击坐标的绝对距离
114 progress.onclick = (e) => { 114 progress.onclick = (e) => {
115 // 阻止事件冒泡 115 // 阻止事件冒泡
116 if (e.target == slider) { 116 if (e.target == slider) {
117 return 117 return
118 } 118 }
119 let curX = progress.offsetLeft 119 let curX = progress.offsetLeft
120 this.sliderLeft = e.pageX - curX 120 this.sliderLeft = e.pageX - curX
121 if (this.sliderLeft <= 0) { 121 if (this.sliderLeft <= 0) {
122 this.sliderLeft = 0 122 this.sliderLeft = 0
123 } 123 }
124 if (this.sliderLeft >= this.width) { 124 if (this.sliderLeft >= this.width) {
125 this.sliderLeft = this.width 125 this.sliderLeft = this.width
126 } 126 }
127 this._countCurPercent() 127 this._countCurPercent()
128 } 128 }
129 // slider.onmousedown = (e) => { 129 // slider.onmousedown = (e) => {
130 // isClickSlider = true 130 // isClickSlider = true
131 // let curX = slider.offsetLeft 131 // let curX = slider.offsetLeft
132 // distance = e.pageX - curX // 得出绝对距离 132 // distance = e.pageX - curX // 得出绝对距离
133 // } 133 // }
134 progress.onmousemove = (e) => { 134 progress.onmousemove = (e) => {
135 if (isClickSlider) { 135 if (isClickSlider) {
136 // 判断是否已经超出进度条的长度 136 // 判断是否已经超出进度条的长度
137 if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { 137 if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
138 this.sliderLeft = e.pageX - distance 138 this.sliderLeft = e.pageX - distance
139 this._countCurPercent() 139 this._countCurPercent()
140 } 140 }
141 } 141 }
142 } 142 }
143 progress.onmouseup = () => { 143 progress.onmouseup = () => {
144 isClickSlider = false 144 isClickSlider = false
145 } 145 }
146 }, 146 },
147 // 算出百分比 147 // 算出百分比
148 _countCurPercent () { 148 _countCurPercent () {
149 this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) 149 this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
150 this.progressWidth = this.sliderLeft + 20 150 this.progressWidth = this.sliderLeft + 20
151 // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 151 // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
152 if (this.tempPercent <= 0) { 152 if (this.tempPercent <= 0) {
153 this.progressWidth = 0 153 this.progressWidth = 0
154 this.sliderLeft = 0 154 this.sliderLeft = 0
155 } 155 }
156 if (this.tempPercent >= 100) { 156 if (this.tempPercent >= 100) {
157 this.progressWidth = this.width + 20 157 this.progressWidth = this.width + 20
158 this.sliderLeft = this.width 158 this.sliderLeft = this.width
159 } 159 }
160 this.stand_width = this.tempPercent*this.standard 160 this.stand_width = this.tempPercent*this.standard
161 this.stand_width = parseInt(this.stand_width/1) //取整 161 this.stand_width = parseInt(this.stand_width/1) //取整
162 this.$emit('percentChange', this.tempPercent) 162 this.$emit('percentChange', this.tempPercent)
163 } 163 }
164 } 164 }
165 } 165 }
166 </script> 166 </script>
167 167
168 <style scoped lang="scss"> 168 <style scoped lang="scss">
169 .c-progress { 169 .c-progress {
170 $width: 300px; 170 $width: 400rpx;
171 $radius: 5px; 171 $radius: 5px;
172 display: flex; 172 display: flex;
173 align-items: center; 173 align-items: center;
174 174
175 span { 175 span {
176 margin-left: 5px; 176 margin-left: 5px;
177 font-size: 14px; 177 font-size: 14px;
178 color: #666; 178 color: #666;
179 } 179 }
180 180
181 .c-progress-outer { 181 .c-progress-outer {
182 width: $width; 182 width: $width;
183 height: 10px; 183 height: 10px;
184 background: #ebeef5; 184 background: #ebeef5;
185 position: relative; 185 position: relative;
186 display: flex; 186 display: flex;
187 align-items: center; 187 align-items: center;
188 188
189 .c-progress-inner { 189 .c-progress-inner {
190 width: 100px; 190 width: 100rpx;
191 height: 10px; 191 height: 10px;
192 background: #409EFF; 192 background: #FF6B4A ;
193 } 193 }
194 194
195 .c-progress-slider { 195 .c-progress-slider {
196 width: 20px; 196 width: 20px;
197 height: 20px; 197 height: 20px;
198 border-radius: 50%; 198 border-radius: 50%;
199 background: #fff; 199 background: #fff;
200 border: 1px solid #409EFF; 200 border: 1px solid #FF6B4A ;
201 position: absolute; 201 position: absolute;
202 z-index: 10; 202 z-index: 10;
203 left: 10px; 203 left: 10px;
204 } 204 }
205 } 205 }
206 } 206 }
207 </style> 207 </style>
1 {
2 "pages": [
3 {
4 "path": "pages/index/index",
5 "style": {
6 "navigationBarTitleText": "商城一览"
7 }
8 },
9 {
10 "path": "pages/myOrder/myOrder",
11 "style": {
12 "navigationBarTitleText": "我的订单"
13 }
14 },
15 {
16 "path": "pages/frameDetail/frameDetail",
17 "style": {
18 "navigationBarTitleText": "产品详情"
19 }
20 },
21 {
22 "path": "pages/lensDetails/lensDetails",
23 "style": {
24 "navigationBarTitleText": "产品详情"
25 }
26 },
27 {
28 "path": "pages/cart/cart",
29 "style": {
30 "navigationBarTitleText": "购物车"
31 }
32 },
33 {
34 "path": "pages/purchaseLenses/purchaseLenses",
35 "style": {
36 "navigationBarTitleText": "产品选购"
37 }
38 },
39 {
40 "path": "pages/refundProgress/refundProgress",
41 "style": {
42 "navigationBarTitleText": "申请退款"
43 }
44 },
45 {
46 "path": "pages/addAddress/addAddress",
47 "style": {
48 "navigationBarTitleText": "新增地址"
49 }
50 },
51 {
52 "path": "pages/confirmOrder/confirmOrder",
53 "style": {
54 "navigationBarTitleText": "确认订单"
55 }
56 },
57 {
58 "path": "pages/user/user",
59 "style": {
60 "navigationBarTitleText": "我的"
61 }
62 },
63 {
64 "path": "pages/refundment/refundWays"
65 },
66 {
67 "path": "pages/refundment/refundment"
68 },
69 {
70 "path": "pages/predelivery/predelivery"
71 },
72 {
73 "path": "pages/customerService/customerService",
74 "style": {
75 "navigationBarTitleText": "在线客服"
76 }
77 },
78 {
79 "path": "pages/myOrderPaying/myOrderPaying",
80 "style": {
81 "navigationBarTitleText": "我的订单"
82 }
83 },
84 {
85 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
86 "style": {
87 "navigationBarTitleText": "镜片名称名称"
88 }
89 },
90 {
91 "path": "pages/detailStandard/detailStandard_sun",
92 "style": {
93 "navigationBarTitleText": "太阳镜选购页"
94 }
95 },
96 {
97 "path": "pages/detailStandard/detailStandard_k",
98 "style": {
99 "navigationBarTitleText": "镜框选购页"
100 }
101 }
102 ],
103 "globalStyle": {
104 "navigationBarTextStyle": "black",
105 "navigationBarTitleText": "uni-app",
106 "navigationBarBackgroundColor": "#F8F8F8",
107 "backgroundColor": "#F8F8F8"
108 },
109 "tabBar": {
110 "color": "#C0C4CC",
111 "selectedColor": "#fa436a",
112 "borderStyle": "black",
113 "backgroundColor": "#ffffff",
114 "list": [
115 {
116 "pagePath": "pages/index/index",
117 "iconPath": "static/tab-home.png",
118 "selectedIconPath": "static/tab-home-current.png",
119 "text": "首页"
120 },
121 {
122 "pagePath": "pages/cart/cart",
123 "iconPath": "static/tab-cart.png",
124 "selectedIconPath": "static/tab-cart-current.png",
125 "text": "购物车"
126 },
127 {
128 "pagePath": "pages/user/user",
129 "iconPath": "static/tab-my.png",
130 "selectedIconPath": "static/tab-my-current.png",
131 "text": "我的"
132 }
133 ]
134 },
135 "condition": { //模式配置，仅开发期间生效
136 "current": 0, //当前激活的模式(list 的索引项)
137 "list": [
138 {
139 "name": "", //模式名称
140 "path": "", //启动页面，必选
141 "query": "" //启动参数，在页面的onLoad函数里面得到
142 }
143 ]
144 }
145 } 1 {
2 "pages": [
src/pages/cart/cart.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 3
4 <view class="card"> 4 <view class="card">
5 <view class="cardHeader"> 5 <view class="cardHeader">
6 <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
7 <block v-if="pIsoPen"> 6 <block v-if="pIsoPen">
8 <view class="partentChecked" @click="pChange(pIsoPen)"> 7 <view class="partentChecked" @click="pChange(pIsoPen)">
9 <span class="status correct"></span> 8 <span class="status correct"></span>
10 </view> 9 </view>
11 </block> 10 </block>
12 <block v-else> 11 <block v-else>
13 <view class="partentCheck" @click="pChange(pIsoPen)"></view> 12 <view class="partentCheck" @click="pChange(pIsoPen)"></view>
14 </block> 13 </block>
15 <image src="../../static/store.png" mode="aspectFill"></image> 14 <image src="../../static/store.png" mode="aspectFill"></image>
16 <text>非常戴镜</text> 15 <text>非常戴镜</text>
17 </view> 16 </view>
18 17
19 <view class="cardBody"> 18 <view class="cardBody">
20 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
21 <template v-if="childIsOpen.child1"> 19 <template v-if="childIsOpen.child1">
22 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> 20 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
23 <span class="status correct"></span> 21 <span class="status correct"></span>
24 </view> 22 </view>
25 </template> 23 </template>
26 <template v-else> 24 <template v-else>
27 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> 25 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
28 </template> 26 </template>
29 <view class="goodInfo"> 27 <view class="goodInfo">
30 <view class="imageWrap"> 28 <view class="imageWrap">
31 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 29 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
32 </view> 30 </view>
33 <view class="infoRight"> 31 <view class="infoRight">
34 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 32 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
35 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 33 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
36 <!-- <text class="icon">></text> --> 34 <view class="icon"></view>
37 </view> 35 </view>
38 <view class="priceBox"> 36 <view class="priceBox">
39 <view class="price">￥{{198}}</view> 37 <view class="price">￥{{198}}</view>
40 <text>(限购{{maxCount}}副)</text> 38 <text>(限购{{maxCount}}副)</text>
41 <view class="counter"> 39 <view class="counter">
42 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 40 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
43 <text>{{count}}</text> 41 <text>{{count}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 42 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
45 </view> 43 </view>
46 </view> 44 </view>
47 </view> 45 </view>
48 </view> 46 </view>
49 </view> 47 </view>
50 <view class="cardBody"> 48 <view class="cardBody">
51 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> 49 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
52 <template v-if="childIsOpen.child2"> 50 <template v-if="childIsOpen.child2">
53 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')"> 51 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
54 <span class="status correct"></span> 52 <span class="status correct"></span>
55 </view> 53 </view>
56 </template> 54 </template>
57 <template v-else> 55 <template v-else>
58 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view> 56 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
59 </template> 57 </template>
60 <view class="goodInfo"> 58 <view class="goodInfo">
61 <view class="imageWrap"> 59 <view class="imageWrap">
62 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 60 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
63 </view> 61 </view>
64 <view class="infoRight"> 62 <view class="infoRight">
65 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 63 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
66 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 64 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
67 <!-- <text class="icon">></text> --> 65 <view class="icon"></view>
68 </view> 66 </view>
69 <view class="priceBox"> 67 <view class="priceBox">
70 <view class="price">￥198</view> 68 <view class="price">￥198</view>
71 <text>(限购{{maxCount}}副)</text> 69 <text>(限购{{maxCount}}副)</text>
72 <view class="counter"> 70 <view class="counter">
73 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 71 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
74 <text>{{count}}</text> 72 <text>{{count}}</text>
75 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 73 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
76 </view> 74 </view>
77 </view> 75 </view>
78 </view> 76 </view>
79 </view> 77 </view>
80 </view> 78 </view>
81 </view> 79 </view>
82 80
83 <view class="footer"> 81 <view class="footer">
84 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 82 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
85 <view class="footerRight"> 83 <view class="footerRight">
86 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> 84 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
87 <view class="paybtn">立即支付</view> 85 <view class="paybtn">立即支付</view>
88 </navigator> 86 </navigator>
89 </view> 87 </view>
90 </view> 88 </view>
91 89
92 </view> 90 </view>
93 </template> 91 </template>
94 92
95 <script> 93 <script>
94 import store from '@/store';
95
96 export default { 96 export default {
97 97
98 data() { 98 data() {
99 return { 99 return {
100 totalPrice: 360, 100 totalPrice: 360,
101 count:1, 101 count:1,
102 maxCount:20, 102 maxCount:20,
103 pIsoPen: false, 103 pIsoPen: false,
104 childIsOpen:{ 104 childIsOpen:{
105 "child1":true, 105 "child1":true,
106 "child2":true 106 "child2":true
107 }, 107 },
108 } 108 }
109 }, 109 },
110 onLoad() { 110 computed:{
111 111 cartList() {
112 } 112 // 也可以从 getters 获取
113 , 113 console.log('cart-list', this.$store.state.cart.cartList);
114 return this.$store.state.cart.cartList;
115 }
116 },
117 onLoad: function() {
118 store.dispatch('cart/getCartList',{
119 uid: 1, //用户id
120 });
121 },
114 methods: { 122 methods: {
115 counter(isadd){ 123 counter(isadd){
116 if(isadd){ 124 if(isadd){
117 this.count >= this.maxCount? this.addDisabled = true:this.count++; 125 this.count >= this.maxCount? this.addDisabled = true:this.count++;
118 }else{ 126 }else{
119 this.count <= 1? this.desDisabled = true:this.count--; 127 this.count <= 1? this.desDisabled = true:this.count--;
120 } 128 }
121 }, 129 },
122 pChange(isopen){ 130 pChange(isopen){
123 // console.log(isopen) 131 // console.log(isopen)
124 this.pIsoPen=!isopen 132 this.pIsoPen=!isopen
125 this.childIsOpen.child1=!isopen 133 this.childIsOpen.child1=!isopen
126 this.childIsOpen.child2=!isopen 134 this.childIsOpen.child2=!isopen
127 }, 135 },
128 cChange(isopen,child){ 136 cChange(isopen,child){
129 // console.log(child) 137 // console.log(child)
130 if(child==='child1'){ 138 if(child==='child1'){
131 this.childIsOpen.child1=!isopen 139 this.childIsOpen.child1=!isopen
132 } 140 }
133 if(child==='child2'){ 141 if(child==='child2'){
134 this.childIsOpen.child2=!isopen 142 this.childIsOpen.child2=!isopen
135 } 143 }
136 } 144 }
137 } 145 }
138 } 146 }
139 </script> 147 </script>
140 148
141 <style lang="scss"> 149 <style lang="scss">
142 .content { 150 .content {
143 min-height: 100vh; 151 min-height: 100vh;
144 background-color: #f2f2f2; 152 background-color: #f2f2f2;
145 display: flex; 153 display: flex;
146 flex-direction: column; 154 flex-direction: column;
147 align-items: center; 155 align-items: center;
148 justify-content: space-between; 156 justify-content: space-between;
149 padding: 20rpx 40rpx; 157 padding: 20rpx 40rpx;
150 box-sizing: border-box; 158 box-sizing: border-box;
151 159
152 .partentCheck{ 160 .partentCheck{
153 width: 16px; 161 width: 16px;
154 height: 16px; 162 height: 16px;
155 border-radius: 18px; 163 border-radius: 18px;
156 border: 1px solid #CFCFCF; 164 border: 1px solid #CFCFCF;
157 background-color: #FFFFFF; 165 background-color: #FFFFFF;
158 } 166 }
159 .partentChecked{ 167 .partentChecked{
160 width: 18px; 168 width: 18px;
161 height: 18px; 169 height: 18px;
162 border-radius: 18px; 170 border-radius: 18px;
163 background-color: #FF6B4A; 171 background-color: #FF6B4A;
164 .correct { 172 .correct {
165 display: inline-block; 173 display: inline-block;
166 width: 5px; 174 width: 5px;
167 height: 1px; 175 height: 1px;
168 background: #FFFFFF; 176 background: #FFFFFF;
169 line-height: 0; 177 line-height: 0;
170 font-size: 0; 178 font-size: 0;
171 position: relative; 179 position: relative;
172 top: -6px; 180 top: -6px;
173 left: 4px; 181 left: 4px;
174 -webkit-transform: rotate(45deg); 182 -webkit-transform: rotate(45deg);
175 } 183 }
176 .correct:after { 184 .correct:after {
177 content: '/'; 185 content: '/';
178 display: block; 186 display: block;
179 width: 8px; 187 width: 8px;
180 height: 1px; 188 height: 1px;
181 background: #FFFFFF; 189 background: #FFFFFF;
182 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 190 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
183 } 191 }
184 } 192 }
185 193
186 .card{ 194 .card{
187 background-color: #FFFFFF; 195 background-color: #FFFFFF;
188 border-radius: 16rpx; 196 border-radius: 16rpx;
189 box-sizing: border-box; 197 box-sizing: border-box;
190 padding: 36rpx 36rpx 36rpx 18rpx; 198 padding: 36rpx 36rpx 36rpx 18rpx;
191 display: flex; 199 display: flex;
192 flex-direction: column; 200 flex-direction: column;
193 align-items: center; 201 align-items: center;
194 justify-content: space-between; 202 justify-content: space-between;
195 .cardHeader{ 203 .cardHeader{
196 width: 100%; 204 width: 100%;
197 height: 36rpx; 205 height: 36rpx;
198 display: flex; 206 display: flex;
199 align-items: center; 207 align-items: center;
200 justify-content: flex-start; 208 justify-content: flex-start;
201 image{ 209 image{
202 height: 32rpx; 210 height: 32rpx;
203 width: 32rpx; 211 width: 32rpx;
204 padding-left: 6px; 212 padding-left: 6px;
205 padding-right: 10px; 213 padding-right: 10px;
206 } 214 }
207 text{ 215 text{
208 // font-family: PingFangSC-Regular; 216 // font-family: PingFangSC-Regular;
209 font-size: 14px; 217 font-size: 14px;
210 color: #333333; 218 color: #333333;
211 letter-spacing: -0.26px; 219 letter-spacing: -0.26px;
212 } 220 }
213 } 221 }
214 .cardBody{ 222 .cardBody{
215 width: 100%; 223 width: 100%;
216 height: 300rpx; 224 height: 300rpx;
217 display: flex; 225 display: flex;
218 align-items: center; 226 align-items: center;
219 justify-content: space-between; 227 justify-content: space-between;
220 .goodInfo{ 228 .goodInfo{
221 width: 95%; 229 width: 95%;
222 display: flex; 230 display: flex;
223 flex-direction: row; 231 flex-direction: row;
224 justify-content: flex-start; 232 justify-content: flex-start;
225 padding-left: 6px; 233 padding-left: 6px;
226 .imageWrap{ 234 .imageWrap{
227 height: 188rpx; 235 height: 188rpx;
228 width: 188rpx; 236 width: 188rpx;
229 margin-right: 28rpx; 237 margin-right: 28rpx;
230 image{ 238 image{
231 border-radius: 4px; 239 border-radius: 4px;
232 height: 188rpx; 240 height: 188rpx;
233 width: 188rpx; 241 width: 188rpx;
234 } 242 }
235 } 243 }
236 .infoRight{ 244 .infoRight{
237 display: flex; 245 display: flex;
238 flex-direction: column; 246 flex-direction: column;
239 align-items: flex-start; 247 align-items: flex-start;
240 justify-content: space-between; 248 justify-content: space-between;
241 height: 240rpx; 249 height: 240rpx;
242 .goodName{ 250 .goodName{
243 font-size: 28rpx; 251 font-size: 28rpx;
244 color: #333333; 252 color: #333333;
245 } 253 }
246 .describ{ 254 .describ{
247 width: 100%; 255 width: 100%;
248 height: 80rpx; 256 height: 80rpx;
249 box-sizing: border-box; 257 box-sizing: border-box;
250 padding: 10rpx; 258 padding: 10rpx;
251 font-size: 20rpx; 259 font-size: 20rpx;
252 color: #999999; 260 color: #999999;
253 background: #F2F2F2; 261 background: #F2F2F2;
262 display: flex;
263 justify-content: center;
264 align-items: center;
254 text{ 265 text{
255 text-overflow: -o-ellipsis-lastline; 266 text-overflow: -o-ellipsis-lastline;
256 overflow: hidden; 267 overflow: hidden;
257 text-overflow: ellipsis; 268 text-overflow: ellipsis;
258 display: -webkit-box; 269 display: -webkit-box;
259 -webkit-line-clamp: 2; 270 -webkit-line-clamp: 2;
260 line-clamp: 2; 271 line-clamp: 2;
261 -webkit-box-orient: vertical; 272 -webkit-box-orient: vertical;
262 } 273 }
263 // .icon{ 274 // .icon{
264 // transform: rotate(90deg); 275 // transform: rotate(90deg);
276 // height: 13px;
277 // width: 20px;
278
265 // } 279 // }
280 .icon{
281 width: 0;
282 height: 0;
283 border-left: 5px transparent;
284 border-right: 5px transparent;
285 border-top: 5px #979797;
286 border-bottom: 0 transparent;
287 border-style: solid;
288 position: relative;
289 margin-left: 10px;
290 // transform: scaleY(-1);
291 }
292 .icon::after{
293 content: '';
294 position: absolute;
295 top: -6.5px;
296 left: -5px;
297 border-left: 5px transparent;
298 border-right: 5px transparent;
299 border-top: 5px #FFFFFF;
300 border-bottom: 0 transparent;
301 border-style: solid;
302 }
266 } 303 }
267 .priceBox{ 304 .priceBox{
268 display: flex; 305 display: flex;
269 justify-content: space-between; 306 justify-content: space-between;
270 align-items: center; 307 align-items: center;
271 // margin-top: 26px; 308 // margin-top: 26px;
272 width: 100%; 309 width: 100%;
273 font-size: 14px; 310 font-size: 14px;
274 color: #999999; 311 color: #999999;
275 .price{ 312 .price{
276 color: #FF6B4A; 313 color: #FF6B4A;
277 font-size: 28rpx; 314 font-size: 28rpx;
278 } 315 }
279 .counter{ 316 .counter{
280 display: flex; 317 display: flex;
281 flex-direction: row; 318 flex-direction: row;
282 justify-content: space-between; 319 justify-content: space-between;
283 align-items: center; 320 align-items: center;
284 font-size: 28rpx; 321 font-size: 28rpx;
285 color: #333333; 322 color: #333333;
286 width: 122rpx; 323 width: 122rpx;
287 .btn{ 324 .btn{
288 display: flex; 325 display: flex;
289 justify-content: center; 326 justify-content: center;
290 line-height: 32rpx; 327 line-height: 32rpx;
291 height: 32rpx; 328 height: 32rpx;
292 width: 32rpx; 329 width: 32rpx;
293 background-color: #F2F2F2; 330 background-color: #F2F2F2;
294 color: #CFCFCF; 331 color: #CFCFCF;
295 } 332 }
296 } 333 }
297 } 334 }
298 } 335 }
299 } 336 }
300 } 337 }
301 } 338 }
302 339
303 .footer{ 340 .footer{
304 position: fixed; 341 position: fixed;
305 left: 0; 342 left: 0;
306 bottom: 0px; 343 bottom: 0px;
307 height: 112rpx; 344 height: 112rpx;
308 width: 100%; 345 width: 100%;
309 background-color: #FFFFFF; 346 background-color: #FFFFFF;
310 font-size: 16px; 347 font-size: 16px;
311 display: flex; 348 display: flex;
312 justify-content: space-between; 349 justify-content: space-between;
313 align-items: center; 350 align-items: center;
314 .footerLeft{ 351 .footerLeft{
315 display: flex; 352 display: flex;
316 justify-content: center; 353 justify-content: center;
317 align-items: center; 354 align-items: center;
318 width: 50%; 355 width: 50%;
319 color: #333333; 356 color: #333333;
320 text{ 357 text{
321 color: #FF6B4A; 358 color: #FF6B4A;
322 } 359 }
323 } 360 }
324 .footerRight{ 361 .footerRight{
325 display: flex; 362 display: flex;
326 justify-content: flex-end; 363 justify-content: flex-end;
327 align-items: center; 364 align-items: center;
328 width: 50%; 365 width: 50%;
329 margin-right: 26rpx; 366 margin-right: 26rpx;
330 .paybtn{ 367 .paybtn{
331 display: flex; 368 display: flex;
332 justify-content: center; 369 justify-content: center;
333 align-items: center; 370 align-items: center;
334 background: #FF6B4A; 371 background: #FF6B4A;
335 border-radius: 20px; 372 border-radius: 20px;
336 border-radius: 20px; 373 border-radius: 20px;
337 color: #FFFFFF; 374 color: #FFFFFF;
338 width: 204rpx; 375 width: 204rpx;
339 height: 80rpx; 376 height: 80rpx;
340 } 377 }
341 } 378 }
342 379
343 } 380 }
344 } 381 }
345 382
346 383
347 384
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="detail"> 3 <view class="detail">
4 <view class="detail1"><image v-bind:src="detail.image"></image></view> 4 <view class="detail1"><image v-bind:src="detail.image"></image></view>
5 <view class="detail2"> 5 <view class="detail2">
6 <view class="detail2_name">{{detail.name}}</view> 6 <view class="detail2_name">{{detail.name}}</view>
7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> 7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
8 <view class="detail2_price"><span>￥{{detail.price}}</span></view> 8 <view class="detail2_price"><span>￥{{detail.price}}</span></view>
9 </view> 9 </view>
10 </view> 10 </view>
11 <view class="choose"> 11 <view class="choose">
12 <view class="colour"> 12 <view class="colour">
13 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> 13 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
14 <view class="colour_exp">*黑色 BHL192345</view> 14 <view class="colour_exp">*黑色 BHL192345</view>
15 <view class="colour2"> 15 <view class="colour2">
16 <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> 16 <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
17 </view> 17 </view>
18 <hr/> 18 <hr/>
19 </view> 19 </view>
20 <view class="size"> 20 <view class="size">
21 <view class="size1"> 21 <view class="size1">
22 <view class="size1_1">框架尺寸</view> 22 <view class="size1_1">框架尺寸</view>
23 <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view> 23 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
24 </view> 24 </view>
25 <view class="size2"> 25 <view class="size2">
26 <view>通用</view> 26 <view>通用</view>
27 <view>定制</view> 27 <view>定制</view>
28 </view> 28 </view>
29 <view class="D3_list"> 29 <view class="D3_list">
30 <view v-for="(item) in parameter" :key="item.key"> 30 <view v-for="(item) in parameter" :key="item.key">
31 <view><image class="D3_image" v-bind:src = "item.img"></image></view> 31 <view><image class="D3_image" v-bind:src = "item.img"></image></view>
32 <view class="D3_list_jDu"> 32 <view class="D3_list_jDu">
33 <!-- uni-sliper插件 --> 33 <!-- uni-sliper插件 -->
34 <c-progress class="c-progress" 34 <!-- <c-progress class="c-progress"
35 :percent="item.percent" 35 :percent="item.percent"
36 :show-slider="false" :width="190" 36 :show-slider="false" :width="190"
37 :standard="item.standard_l" 37 :standard="item.standard_l"
38 :stand_width="item.slength" 38 :stand_width="item.slength"
39 progressColor="#FF6B4A" 39 progressColor="#FF6B4A"
40 /> 40 /> -->
41 <view>{{item.standard}}</view> 41 <view>{{item.standard}}</view>
42 </view> 42 </view>
43 </view> 43 </view>
44 <hr/> 44 <hr/>
45 </view> 45 </view>
46 </view> 46 </view>
47 <view class="part"> 47 <view class="part">
48 <view class="size1"> 48 <view class="size1">
49 <view class="size1_1">配件</view> 49 <view class="size1_1">配件</view>
50 <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> 50 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
51 </view> 51 </view>
52 <view class="colour_exp">*0290</view> 52 <view class="colour_exp">*0290</view>
53 <view class="part_som"> 53 <view class="part_som">
54 <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> 54 <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
55 </view> 55 </view>
56 </view> 56 </view>
57 </view> 57 </view>
58 <view class="buy"> 58 <view class="buy">
59 <view class="buy1">选了镜框，想选镜片？</view> 59 <view class="buy1">选了镜框，想选镜片？</view>
60 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> 60 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
61 <view class="buy3"> 61 <view class="buy3">
62 <view class="buy3_1">暂时不选</view> 62 <view class="buy3_1">暂时不选</view>
63 <view class="buy3_2">立即去选</view> 63 <view class="buy3_2">立即去选</view>
64 </view> 64 </view>
65 </view> 65 </view>
66 <view class="zhanwei"></view> 66 <view class="zhanwei"></view>
67 <view class="button"><view>立即结算</view></view> 67 <view class="button"><view>立即结算</view></view>
68 </view> 68 </view>
69 </template> 69 </template>
70 <script> 70 <script>
71 import CProgress from '../../components/UniSliper/UniSliper' 71 import CProgress from '../../components/UniSliper/UniSliper'
72 import store from '@/store'
72 73
73 export default { 74 export default {
74 components: {
75 CProgress
76 },
77 data(){ 75 data(){
78 return{ 76 return{
79 detail:{ 77 detail:{
80 image:'/static/img/detail/d1.png', 78 image:'/static/img/detail/d1.png',
81 name:'商品名称商品名称商品名称商品名称商品名称', 79 name:'商品名称商品名称商品名称商品名称商品名称',
82 price: 180, 80 price: 180,
83 number: 1, 81 number: 1,
84 }, 82 },
85 //框架颜色 83 //框架颜色
86 colour:[ 84 colour:[
87 {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, 85 {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
88 {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, 86 {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
89 {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, 87 {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
90 {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, 88 {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
91 {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, 89 {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
92 {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, 90 {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
93 {key:6 ,img: '/static/img/detail/Kuang/s7.png'} 91 {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
94 ], 92 ],
95 //规格 93 //规格
96 parameter:[ 94 parameter:[
97 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, 95 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
98 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, 96 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
99 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, 97 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
100 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, 98 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
101 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, 99 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
102 ], 100 ],
103 //配饰 101 //配饰
104 part:[ 102 part:[
105 {key: 0,img:'/static/img/detail/Kuang/g1.png'}, 103 {key: 0,img:'/static/img/detail/Kuang/g1.png'},
106 {key: 1,img:'/static/img/detail/Kuang/g1.png'}, 104 {key: 1,img:'/static/img/detail/Kuang/g1.png'},
107 {key: 2,img:'/static/img/detail/Kuang/g2.png'}, 105 {key: 2,img:'/static/img/detail/Kuang/g2.png'},
108 {key: 3,img:'/static/img/detail/Kuang/g1.png'}, 106 {key: 3,img:'/static/img/detail/Kuang/g1.png'},
109 {key: 4,img:'/static/img/detail/Kuang/g1.png'}, 107 {key: 4,img:'/static/img/detail/Kuang/g1.png'},
110 {key: 5,img:'/static/img/detail/Kuang/g3.png'}, 108 {key: 5,img:'/static/img/detail/Kuang/g3.png'},
111 {key: 6,img:'/static/img/detail/Kuang/g3.png'}, 109 {key: 6,img:'/static/img/detail/Kuang/g3.png'},
112 {key: 7,img:'/static/img/detail/Kuang/g2.png'}, 110 {key: 7,img:'/static/img/detail/Kuang/g2.png'},
113 ], 111 ],
114 } 112 }
115 } 113 },
114
115 components: {
116 detailStandard_k(){
117 console.log(detailStandard_k)
118 return this.$store.state.detailStandard_k.detailStandardList
119 }
120 },
121 onLoad:function(){
122 store.dispatch('detailStandard_k/getList')
123 },
116 } 124 }
117 </script> 125 </script>
118 126
119 <style lang="scss"> 127 <style lang="scss">
120 .container{ 128 .container{
121 min-height: 100vh; 129 min-height: 100vh;
122 background: #F2F2F2; 130 background: #F2F2F2;
123 padding-top: 10px; 131 padding-top: 10px;
124 box-sizing: border-box; 132 box-sizing: border-box;
125 } 133 }
126 hr{ 134 hr{
127 border: none; 135 border: none;
128 height: 1px; 136 height: 1px;
129 background: #F2F2F2; 137 background: #F2F2F2;
130 margin-top: 18px; 138 margin-top: 18px;
131 } 139 }
132 .detail{ 140 .detail{
133 height: 272rpx; 141 height: 272rpx;
134 background: #FFFFFF; 142 background: #FFFFFF;
135 border-radius: 8px; 143 border-radius: 8px;
136 padding: 16px; 144 padding: 16px;
137 box-sizing: border-box; 145 box-sizing: border-box;
138 display: flex; 146 display: flex;
139 justify-content: space-between; 147 justify-content: space-between;
140 align-items: center; 148 align-items: center;
141 } 149 }
142 .detail1{ 150 .detail1{
143 height: 188rpx; 151 height: 188rpx;
144 width: 188rpx; 152 width: 188rpx;
145 image{ 153 image{
146 width: 100%; 154 width: 100%;
147 height: 100%; 155 height: 100%;
148 border-radius: 8px; 156 border-radius: 8px;
149 } 157 }
150 } 158 }
151 .detail2{ 159 .detail2{
152 width: 68%; 160 width: 68%;
153 view{ 161 view{
154 margin-bottom: 8px; 162 margin-bottom: 8px;
155 font-family: PingFangSC-Regular; 163 font-family: PingFangSC-Regular;
156 } 164 }
157 .detail2_name{ 165 .detail2_name{
158 font-size: 14px; 166 font-size: 14px;
159 color: #333333; 167 color: #333333;
160 letter-spacing: -0.26px; 168 letter-spacing: -0.26px;
161 line-height: 18px; 169 line-height: 18px;
162 } 170 }
163 .detail2_tui{ 171 .detail2_tui{
164 font-size: 10px; 172 font-size: 10px;
165 color: #999999; 173 color: #999999;
166 letter-spacing: -0.19px; 174 letter-spacing: -0.19px;
167 span{ 175 span{
168 margin-right: 10px; 176 margin-right: 10px;
169 } 177 }
170 } 178 }
171 .detail2_price{ 179 .detail2_price{
172 font-size: 14px; 180 font-size: 14px;
173 color: #FF6B4A; 181 color: #FF6B4A;
174 letter-spacing: -0.26px; 182 letter-spacing: -0.26px;
175 } 183 }
176 } 184 }
177 .choose{ 185 .choose{
178 background: #FFFFFF; 186 background: #FFFFFF;
179 padding: 16px; 187 padding: 16px;
180 box-sizing: border-box; 188 box-sizing: border-box;
181 margin-top: 10px; 189 margin-top: 10px;
182 border-radius: 8px; 190 border-radius: 8px;
183 .colour1{ 191 .colour1{
184 span{ 192 span{
185 font-family: PingFangSC-Medium; 193 font-family: PingFangSC-Medium;
186 font-size: 16px; 194 font-size: 16px;
187 color: #333333; 195 color: #333333;
188 letter-spacing: -0.3px; 196 letter-spacing: -0.3px;
189 text-align: justify; 197 text-align: justify;
190 line-height: 24px; 198 line-height: 24px;
191 font-weight: bold; 199 font-weight: bold;
192 } 200 }
193 image{ 201 image{
194 float: right; 202 float: right;
195 width: 40rpx; 203 width: 40rpx;
196 height: 36rpx; 204 height: 36rpx;
197 } 205 }
198 } 206 }
199 .colour_exp{ 207 .colour_exp{
200 font-family: PingFangSC-Regular; 208 font-family: PingFangSC-Regular;
201 font-size: 12px; 209 font-size: 12px;
202 color: #666666; 210 color: #666666;
203 letter-spacing: 0; 211 letter-spacing: 0;
204 margin-top: 10px; 212 margin-top: 10px;
205 margin-bottom: 10px; 213 margin-bottom: 10px;
206 } 214 }
207 .colour2{ 215 .colour2{
208 display: grid; 216 display: grid;
209 grid-template-columns: repeat(5, 17%); 217 grid-template-columns: repeat(5, 17%);
210 justify-content: space-between ; 218 justify-content: space-between ;
211 grid-row-gap: 10px; 219 grid-row-gap: 10px;
212 margin-bottom: 14px; 220 margin-bottom: 14px;
213 view{ 221 view{
214 border: 1px solid #F2F2F2; 222 border: 1px solid #F2F2F2;
215 image{ 223 image{
216 width: 100%; 224 width: 100%;
217 height: 100%; 225 height: 100%;
218 } 226 }
219 } 227 }
220 view:hover{ 228 view:hover{
221 border: 1px solid #FF6B4A; 229 border: 1px solid #FF6B4A;
222 } 230 }
223 } 231 }
224 } 232 }
225 .size,.part{ 233 .size,.part{
226 margin-top:14px; 234 margin-top:14px;
227 .size1{ 235 .size1{
228 display: flex; 236 display: flex;
229 justify-content: space-between; 237 justify-content: space-between;
230 margin-bottom: 10px; 238 margin-bottom: 10px;
231 .size1_1{ 239 .size1_1{
232 font-weight: bold; 240 font-weight: bold;
233 font-family: PingFangSC-Medium; 241 font-family: PingFangSC-Medium;
234 font-size: 16px; 242 font-size: 16px;
235 color: #333333; 243 color: #333333;
236 letter-spacing: -0.3px; 244 letter-spacing: -0.3px;
237 line-height: 24px; 245 line-height: 24px;
238 } 246 }
239 view{ 247 view{
240 span{ 248 span{
241 font-family: PingFangSC-Regular; 249 font-family: PingFangSC-Regular;
242 font-size: 14px; 250 font-size: 14px;
243 color: #FF6B4A; 251 color: #FF6B4A;
244 letter-spacing: -0.26px; 252 letter-spacing: -0.26px;
245 margin-right: 12px; 253 margin-right: 12px;
246 } 254 }
247 image{ 255 image{
248 width: 40rpx; 256 width: 40rpx;
249 height: 36rpx; 257 height: 36rpx;
250 } 258 }
251 } 259 }
252 } 260 }
253 .size2{ 261 .size2{
254 view{ 262 view{
255 display: inline-flex; 263 display: inline-flex;
256 align-items: center; 264 align-items: center;
257 justify-content: center; //字体居中 265 justify-content: center; //字体居中
258 margin-right: 12px; 266 margin-right: 12px;
259 margin-bottom: 20px; 267 margin-bottom: 20px;
260 width: 136rpx; 268 width: 136rpx;
261 height: 60rpx; 269 height: 60rpx;
262 background: #F2F2F2; 270 background: #F2F2F2;
263 border-radius: 2px; 271 border-radius: 2px;
264 font-family: PingFangSC-Regular; 272 font-family: PingFangSC-Regular;
265 font-size: 12px; 273 font-size: 12px;
266 color: #666666; 274 color: #666666;
267 } 275 }
268 view:hover{ 276 view:hover{
269 color: #FF6B4A; 277 color: #FF6B4A;
270 background: rgba(255,107,74,0.15); 278 background: rgba(255,107,74,0.15);
271 } 279 }
272 } 280 }
273 .D3_list{ 281 .D3_list{
274 margin-bottom: 4px; 282 margin-bottom: 4px;
275 } 283 }
276 .D3_list>view{ 284 .D3_list>view{
277 display: flex; 285 display: flex;
278 align-content: center; 286 align-content: center;
279 margin-bottom: 10px; 287 margin-bottom: 10px;
280 view{ 288 view{
281 margin-right: 10px; 289 margin-right: 10px;
282 } 290 }
283 } 291 }
284 .D3_list image{ 292 .D3_list image{
285 width: 50px; 293 width: 50px;
286 height: 25px; 294 height: 25px;
287 margin-right: 6px; 295 margin-right: 6px;
288 } 296 }
289 .D3_list span{ 297 .D3_list span{
290 margin-left: 6px; 298 margin-left: 6px;
291 margin-right: 5px; 299 margin-right: 5px;
292 font-family: 'PingFangSC-Regular'; 300 font-family: 'PingFangSC-Regular';
293 } 301 }
294 .D3_list_jDu{ 302 .D3_list_jDu{
295 view{ 303 view{
296 font-family: PingFangSC-Regular; 304 font-family: PingFangSC-Regular;
297 font-size: 10px; 305 font-size: 10px;
298 color: #999999; 306 color: #999999;
299 letter-spacing: -0.19px; 307 letter-spacing: -0.19px;
300 } 308 }
301 } 309 }
302 } 310 }
303 .part{ 311 .part{
304 .part_som{ 312 .part_som{
305 display: grid; 313 display: grid;
306 justify-content: space-between; 314 justify-content: space-between;
307 grid-template-columns: repeat(4, 22%); 315 grid-template-columns: repeat(4, 22%);
308 grid-row-gap: 12px; 316 grid-row-gap: 12px;
309 margin-bottom: 14px; 317 margin-bottom: 14px;
310 view{ 318 view{
311 border: 1px solid #F2F2F2; 319 border: 1px solid #F2F2F2;
312 height: 72rpx; 320 height: 72rpx;
313 image{ 321 image{
314 width: 100%; 322 width: 100%;
315 height: 100%; 323 height: 100%;
316 } 324 }
317 } 325 }
318 view:hover{ 326 view:hover{
319 border: 1px solid #FF6B4A; 327 border: 1px solid #FF6B4A;
320 } 328 }
321 } 329 }
322 } 330 }
323 .buy{ 331 .buy{
324 height: 280rpx; 332 height: 280rpx;
325 background: #FFFFFF ; 333 background: #FFFFFF ;
326 margin-top: 10px; 334 margin-top: 10px;
327 border-radius: 8px; 335 border-radius: 8px;
328 padding-top: 20px; 336 padding-top: 20px;
329 box-sizing: border-box; 337 box-sizing: border-box;
330 margin-bottom: 20px; 338 margin-bottom: 20px;
331 } 339 }
332 .buy1{ 340 .buy1{
333 font-family: PingFangSC-Medium; 341 font-family: PingFangSC-Medium;
334 font-size: 16px; 342 font-size: 16px;
335 font-weight: bold; 343 font-weight: bold;
336 color: #333333; 344 color: #333333;
337 text-align: center; 345 text-align: center;
338 } 346 }
339 .buy2{ 347 .buy2{
340 font-family: PingFangSC-Regular; 348 font-family: PingFangSC-Regular;
341 font-size: 12px; 349 font-size: 12px;
342 color: #999999; 350 color: #999999;
343 text-align: center; 351 text-align: center;
344 margin: 10px; 352 margin: 10px;
345 } 353 }
346 .buy3{ 354 .buy3{
347 font-family: PingFangSC-Regular; 355 font-family: PingFangSC-Regular;
348 font-size: 16px; 356 font-size: 16px;
349 display: flex; 357 display: flex;
350 justify-content: center; 358 justify-content: center;
351 margin-top: 14px; 359 margin-top: 14px;
352 view{ 360 view{
353 border-radius: 20px; 361 border-radius: 20px;
354 width: 240rpx; 362 width: 240rpx;
355 height: 80rpx; 363 height: 80rpx;
356 display: flex; 364 display: flex;
357 justify-content: center; 365 justify-content: center;
358 align-items: center; 366 align-items: center;
359 } 367 }
360 .buy3_1{ 368 .buy3_1{
361 margin-right: 20px; 369 margin-right: 20px;
362 background: rgba(255,107,74,0.15); 370 background: rgba(255,107,74,0.15);
363 color: #FF6B4A ; 371 color: #FF6B4A ;
364 } 372 }
365 .buy3_2{ 373 .buy3_2{
366 background: #FF6B4A; 374 background: #FF6B4A;
367 color: #FFFFFF ; 375 color: #FFFFFF ;
368 } 376 }
369 } 377 }
370 .zhanwei{ 378 .zhanwei{
371 background: #F2F2F2; 379 background: #F2F2F2;
372 height: 120rpx; 380 height: 120rpx;
373 } 381 }
374 .button{ 382 .button{
375 position: fixed; 383 position: fixed;
376 bottom: 0; 384 bottom: 0;
377 width:100%; 385 width:100%;
378 height: 112rpx; 386 height: 112rpx;
379 background: #FF6B4A 100%; 387 background: #FF6B4A 100%;
380 view{ 388 view{
381 color: #FFFFFF; 389 color: #FFFFFF;
382 height: 100%; 390 height: 100%;
383 display: flex; 391 display: flex;
384 justify-content: center; 392 justify-content: center;
385 align-items: center; 393 align-items: center;
386 font-family: PingFangSC-Regular; 394 font-family: PingFangSC-Regular;
387 font-size: 16px; 395 font-size: 16px;
src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 <!-- 折叠框 --> 2 <!-- 折叠框 -->
3 <view class="myCollapse"> 3 <view class="myCollapse">
4 <view class="head"> 4 <view class="head">
5 <view>{{title}}</view> 5 <view>{{title}}</view>
6 <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view> 6 <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
7 <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view> 7 <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view>
8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view> 8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view>
9 </view> 9 </view>
10 <view class="body"> 10 <view class="body">
11 11
12 <block v-if="isOpen"> 12 <block v-if="isOpen">
13 13
14 <view style="background-color: #FFFFFF;" class="funBox"> 14 <view style="background-color: #FFFFFF;" class="funBox">
15 <block v-if="title==='镜片种类'"> 15 <block v-if="title==='镜片种类'">
16 <view class="noRange"> 16 <view class="noRange">
17 <block v-for="(item) in funList" :key="item.key"> 17 <block v-for="(item) in funList" :key="item.key">
18 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 18 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
19 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 19 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
20 </block> 20 </block>
21 </view> 21 </view>
22 <view class="noRange"> 22 <view class="noRange">
23 <block v-for="(item,index) in funList2" :key="item.key"> 23 <block v-for="(item,index) in funList2" :key="item.key">
24 <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'" 24 <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'"
25 :style="colorList[index]" @click="choice2(index,item.key-1,item.isChioce)"></view> 25 :style="colorList[index]" @click="choice2(index,item.isChioce)"></view>
26 </block> 26 </block>
27 </view> 27 </view>
28 </block> 28 </block>
29 <block v-else> 29 <block v-else>
30 <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view> 30 <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view>
31 <view class="noRange"> 31 <view class="noRange">
32 <block v-for="(item) in funList" :key="item.key"> 32 <block v-for="(item) in funList" :key="item.key">
33 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 33 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
34 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 34 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
35 </block> 35 </block>
36 </view> 36 </view>
37 37
38 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view> 38 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
39 <view class="noRange" style="max-width: 624rpx"> 39 <view class="noRange" style="max-width: 624rpx">
40 <block v-for="(item,index) in funList2" :key="item.key"> 40 <block v-for="(item,index) in funList2" :key="item.key">
41 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 41 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
42 @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view> 42 @click="choice2(index,item.isChioce)">{{item.name}}</view>
43 </block> 43 </block>
44 </view> 44 </view>
45 </block> 45 </block>
46 </view> 46 </view>
47 </block> 47 </block>
48 48
49 <block v-else> 49 <block v-else>
50 *<block v-for="(item,index) in funContent" :key="index"> 50 *<block v-for="(item,index) in funContent" :key="index">
51 <text v-if="item!==null">{{item}}</text> 51 <text v-if="item!==null">{{item}}</text>
52 </block> 52 </block>
53 </block> 53 </block>
54 </view> 54 </view>
55 </view> 55 </view>
56 56
57 </template> 57 </template>
58 58
59 <script> 59 <script>
60 export default { 60 export default {
61 props:{ 61 props:{
62 isOpenProps:{ 62 isOpenProps:{
63 // 是否展开，默认 true 63 // 是否展开，默认 true
64 type: Boolean, 64 type: Boolean,
65 default: true 65 default: true
66 }, 66 },
67 funListProp:{ 67 funListProp:{
68 "name":String, 68 "name":String,
69 "isChioce": Number, 69 "isChioce": Number,
70 "key":Number 70 "key":Number
71 }, 71 },
72 funList2Prop:{ 72 funList2Prop:{
73 type:Array, 73 type:Array,
74 } 74 }
75 , 75 ,
76 funContentProp: { 76 funContentProp: {
77 type: Array 77 type: Array
78 }, 78 },
79 title:{ 79 title:{
80 type: String, 80 type: String,
81 default: '' 81 default: ''
82 } 82 }
83 }, 83 },
84 data() { 84 data() {
85 return { 85 return {
86 isOpen:this.isOpenProps, 86 isOpen:this.isOpenProps,
87 // 颜色数组要与传入的值手动相同 87 // 颜色数组要与传入的值手动相同
88 colorList:[ 88 colorList:[
89 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);", 89 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
90 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);", 90 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
91 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);", 91 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
92 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);", 92 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
93 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);" 93 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
94 ], 94 ],
95 funList: this.funListProp, 95 funList: this.funListProp,
96 funList2: this.funList2Prop, 96 funList2: this.funList2Prop,
97 funContent: this.funContentProp 97 funContent: this.funContentProp
98 }; 98 };
99 }, 99 },
100 100
101 methods:{ 101 methods:{
102 myCollapseChange(isopen){ 102 myCollapseChange(isopen){
103 this.isOpen = !isopen 103 this.isOpen = !isopen
104 }, 104 },
105 choice(index,isChoice){ 105 choice(index,isChoice){
106 this.funList[index].isChioce = !isChoice 106 if(this.funList[index].type==="fun"){
107 if(!isChoice){ 107 this.funList[index].isChioce = !isChoice
108 this.funContent[index] = this.funList[index].name 108 if(!isChoice){
109 this.funContent[index] = this.funList[index].name
110 }
111 else{
112 this.funContent[index] = ''
113 }
109 } 114 }
110 else{ 115 else if(this.funList[index].type==="kind"){
111 this.funContent[index] = '' 116 for(let i=0;i<this.funList.length;i++){
117 this.funList[i].isChioce = false
118 }
119 this.funList[index].isChioce = !isChoice
120 this.funContent[0]=this.funList[index].name
121 }else {
122 for(let i=0;i<this.funList.length;i++){
123 this.funList[i].isChioce = false
124 }
125 for(let i=0;i<this.funList2.length;i++){
126 this.funList2[i].isChioce = false
127 }
128 this.funList[index].isChioce = !isChoice
129 this.funContent[0]=this.funList[index].name
112 } 130 }
113 }, 131 },
114 choice2(index,conIndex,isChoice){ 132 choice2(index,isChoice){
115 this.funList2[index].isChioce = !isChoice 133 if(this.funList2[index].type==="kind"){
116 if(!isChoice){ 134 for(let i=0;i<this.funList2.length;i++){
117 this.funContent[conIndex] = this.funList2[index].name 135 this.funList2[i].isChioce = false
136 }
137 this.funList2[index].isChioce = !isChoice
138 this.funContent[1] = this.funList2[index].name
118 } 139 }
119 else{ 140 else{
120 this.funContent[conIndex] = '' 141 for(let i=0;i<this.funList.length;i++){
142 this.funList[i].isChioce = false
143 }
144 for(let i=0;i<this.funList2.length;i++){
145 this.funList2[i].isChioce = false
146 }
147 this.funList2[index].isChioce = !isChoice
148 this.funContent[0]=this.funList2[index].name
121 } 149 }
122 } 150 }
123 } 151 }
124 } 152 }
125 </script> 153 </script>
126 154
127 <style lang="scss"> 155 <style lang="scss">
128 .myCollapse{ 156 .myCollapse{
129 width: 100%; 157 width: 100%;
130 padding-bottom: 28rpx; 158 padding-bottom: 28rpx;
131 margin-top: 7px; 159 margin-top: 7px;
132 border-bottom: 1px solid #E9E9E9; 160 border-bottom: 1px solid #E9E9E9;
133 .head{ 161 .head{
134 display: flex; 162 display: flex;
135 justify-content: space-between; 163 justify-content: space-between;
136 height: 24px; 164 height: 24px;
137 // font-family: PingFangSC-Medium; 165 // font-family: PingFangSC-Medium;
138 font-size: 16px; 166 font-size: 16px;
139 color: #333333; 167 color: #333333;
140 letter-spacing: -0.3px; 168 letter-spacing: -0.3px;
141 text-align: justify; 169 text-align: justify;
142 line-height: 24px; 170 line-height: 24px;
143 margin-bottom: 18rpx; 171 margin-bottom: 18rpx;
144 .headRighted{ 172 .headRighted{
145 width: 0; 173 width: 0;
146 height: 0; 174 height: 0;
147 border-left: 4px solid transparent; 175 border-left: 4px solid transparent;
148 border-right: 4px solid transparent; 176 border-right: 4px solid transparent;
149 border-bottom: 4px solid #CFCFCF; 177 border-bottom: 4px solid #CFCFCF;
150 transform: scaleY(-1); 178 transform: scaleY(-1);
151 margin-top: 10px; 179 margin-top: 10px;
152 } 180 }
153 .headMid{ 181 .headMid{
154 // font-family: PingFangSC-Regular; 182 // font-family: PingFangSC-Regular;
155 font-size: 10px; 183 font-size: 10px;
156 color: #999999; 184 color: #999999;
157 letter-spacing: -0.19px; 185 letter-spacing: -0.19px;
158 margin-left: -120rpx; 186 margin-left: -120rpx;
159 } 187 }
160 .headRight{ 188 .headRight{
161 width: 0; 189 width: 0;
162 height: 0; 190 height: 0;
163 border-left: 4px solid transparent; 191 border-left: 4px solid transparent;
164 border-right: 4px solid transparent; 192 border-right: 4px solid transparent;
165 border-bottom: 4px solid #CFCFCF; 193 border-bottom: 4px solid #CFCFCF;
166 margin-top: 10px; 194 margin-top: 10px;
167 } 195 }
168 } 196 }
169 .body{ 197 .body{
170 // font-family: PingFangSC-Regular; 198 // font-family: PingFangSC-Regular;
171 font-size: 12px; 199 font-size: 12px;
172 color: #666666; 200 color: #666666;
173 letter-spacing: 0; 201 letter-spacing: 0;
174 display: flex; 202 display: flex;
175 flex-wrap: wrap; 203 flex-wrap: wrap;
176 text{ 204 text{
177 padding-left: 4px; 205 padding-left: 4px;
178 } 206 }
179 } 207 }
180 } 208 }
181 .funBox { 209 .funBox {
182 // display: flex; 210 // display: flex;
183 width: 100%; 211 width: 100%;
184 // flex-wrap: wrap; 212 // flex-wrap: wrap;
185 // max-width: 624rpx; 213 // max-width: 624rpx;
186 .range{ 214 .range{
187 // font-family: PingFangSC-Regular; 215 // font-family: PingFangSC-Regular;
188 font-size: 10px; 216 font-size: 10px;
189 color: #999999; 217 color: #999999;
190 letter-spacing: -0.19px; 218 letter-spacing: -0.19px;
191 margin-bottom: 5px; 219 margin-bottom: 5px;
192 } 220 }
193 .noRange{ 221 .noRange{
194 display: flex; 222 display: flex;
195 flex-wrap: wrap; 223 flex-wrap: wrap;
196 // max-width: 624rpx; 224 // max-width: 624rpx;
197 // margin-bottom: 28rpx; 225 // margin-bottom: 28rpx;
198 .boxChoiced,.boxChoice{ 226 .boxChoiced,.boxChoice{
199 height: 60rpx; 227 height: 60rpx;
200 border-radius: 4rpx; 228 border-radius: 4rpx;
201 // font-family: PingFangSC-Regular; 229 // font-family: PingFangSC-Regular;
202 font-size: 12px; 230 font-size: 12px;
203 letter-spacing: 0; 231 letter-spacing: 0;
204 line-height: 60rpx; 232 line-height: 60rpx;
205 box-sizing: border-box; 233 box-sizing: border-box;
206 padding: 0 20rpx; 234 padding: 0 20rpx;
207 margin-right: 20rpx; 235 margin-right: 20rpx;
208 margin-bottom: 13rpx; 236 margin-bottom: 13rpx;
209 } 237 }
210 .boxChoiced{ 238 .boxChoiced{
211 background: rgba(255,107,74,0.15); 239 background: rgba(255,107,74,0.15);
212 color: #FF6B4A; 240 color: #FF6B4A;
213 } 241 }
214 .boxChoice{ 242 .boxChoice{
215 background: #F2F2F2; 243 background: #F2F2F2;
216 color: #666666; 244 color: #666666;
217 } 245 }
218 .boxChoiced-C,.boxChoice-C{ 246 .boxChoiced-C,.boxChoice-C{
219 width: 64rpx; 247 width: 64rpx;
220 height: 64rpx; 248 height: 64rpx;
221 border-radius: 32rpx; 249 border-radius: 32rpx;
222 margin-right: 8px; 250 margin-right: 8px;
223 } 251 }
224 .boxChoiced-C{ 252 .boxChoiced-C{
225 opacity: 0.7; 253 opacity: 0.7;
226 border: 1px solid #FF6B4A; 254 border: 1px solid #FF6B4A;
227 } 255 }
228 .boxChoice-C{ 256 .boxChoice-C{
229 opacity: 0.7; 257 opacity: 0.7;
230 border: 1px solid #FFFFFF; 258 border: 1px solid #FFFFFF;
231 } 259 }
232 } 260 }
233 261
234 } 262 }
235 </style> 263 </style>
236 264
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
Diff comments   View file @fcb436f
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 <!-- 实用功能折叠框 --> 19 <!-- 实用功能折叠框 -->
20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse> 20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
21 <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" 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> 22 <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse> 23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
24 24
25 <view class="opCollapse"> 25 <view class="opCollapse">
26 <view class="head"> 26 <view class="head">
27 <view v-if="!opIsOpen">填写验光数据</view> 27 <view v-if="!opIsOpen">填写验光数据</view>
28 <view v-else></view> 28 <view v-else></view>
29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view> 29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> 30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
31 </view> 31 </view>
32 <view class="body"> 32 <view class="body">
33 <template v-if="opIsOpen"> 33 <template v-if="opIsOpen">
34 34
35 <view class="goods-form"> 35 <view class="goods-form">
36 <text class="p1">填写验光数据</text> 36 <text class="p1">填写验光数据</text>
37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
38 <view class="picker" > 38 <view class="picker" >
39 <view class="picker-choice"> 39 <view class="picker-choice">
40 <view class="choice-left"> 40 <view class="choice-left">
41 <text class="p11">{{pickerInfoList[0].nameC}}</text> 41 <text class="p11">{{pickerInfoList[0].nameC}}</text>
42 <text class="p12">{{pickerInfoList[0].nameE}}</text> 42 <text class="p12">{{pickerInfoList[0].nameE}}</text>
43 </view> 43 </view>
44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
47 <image src="../../static/detail-tabicon.png" ></image> 47 <image src="../../static/detail-tabicon.png" ></image>
48 </picker> 48 </picker>
49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
52 <image src="../../static/detail-tabicon.png" ></image> 52 <image src="../../static/detail-tabicon.png" ></image>
53 </picker> 53 </picker>
54 </view> 54 </view>
55 </view> 55 </view>
56 <view class="picker" > 56 <view class="picker" >
57 <view class="picker-choice"> 57 <view class="picker-choice">
58 <view class="choice-left"> 58 <view class="choice-left">
59 <text class="p11">{{pickerInfoList[1].nameC}}</text> 59 <text class="p11">{{pickerInfoList[1].nameC}}</text>
60 <text class="p12">{{pickerInfoList[1].nameE}}</text> 60 <text class="p12">{{pickerInfoList[1].nameE}}</text>
61 </view> 61 </view>
62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
65 <image src="../../static/detail-tabicon.png" ></image> 65 <image src="../../static/detail-tabicon.png" ></image>
66 </picker> 66 </picker>
67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
70 <image src="../../static/detail-tabicon.png" ></image> 70 <image src="../../static/detail-tabicon.png" ></image>
71 </picker> 71 </picker>
72 </view> 72 </view>
73 </view> 73 </view>
74 <view class="picker" > 74 <view class="picker" >
75 <view class="picker-choice"> 75 <view class="picker-choice">
76 <view class="choice-left"> 76 <view class="choice-left">
77 <text class="p11">{{pickerInfoList[2].nameC}}</text> 77 <text class="p11">{{pickerInfoList[2].nameC}}</text>
78 <text class="p12">{{pickerInfoList[2].nameE}}</text> 78 <text class="p12">{{pickerInfoList[2].nameE}}</text>
79 </view> 79 </view>
80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
83 <image src="../../static/detail-tabicon.png" ></image> 83 <image src="../../static/detail-tabicon.png" ></image>
84 </picker> 84 </picker>
85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
88 <image src="../../static/detail-tabicon.png" ></image> 88 <image src="../../static/detail-tabicon.png" ></image>
89 </picker> 89 </picker>
90 </view> 90 </view>
91 </view> 91 </view>
92 <view class="picker" > 92 <view class="picker" >
93 <view class="picker-choice"> 93 <view class="picker-choice">
94 <view class="choice-left"> 94 <view class="choice-left">
95 <text class="p11">{{pickerInfoList[3].nameC}}</text> 95 <text class="p11">{{pickerInfoList[3].nameC}}</text>
96 <text class="p12">{{pickerInfoList[3].nameE}}</text> 96 <text class="p12">{{pickerInfoList[3].nameE}}</text>
97 </view> 97 </view>
98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
101 <image src="../../static/detail-tabicon.png" ></image> 101 <image src="../../static/detail-tabicon.png" ></image>
102 </picker> 102 </picker>
103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
106 <image src="../../static/detail-tabicon.png" ></image> 106 <image src="../../static/detail-tabicon.png" ></image>
107 </picker> 107 </picker>
108 </view> 108 </view>
109 </view> 109 </view>
110 <view class="picker" > 110 <view class="picker" >
111 <view class="picker-choice"> 111 <view class="picker-choice">
112 <view class="choice-left"> 112 <view class="choice-left">
113 <text class="p11">{{pickerInfoList[4].nameC}}</text> 113 <text class="p11">{{pickerInfoList[4].nameC}}</text>
114 </view> 114 </view>
115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
116 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 116 <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"> 117 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
118 <image src="../../static/detail-tabicon.png" ></image> 118 <image src="../../static/detail-tabicon.png" ></image>
119 </picker> 119 </picker>
120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
121 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 121 <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"> 122 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
123 <image src="../../static/detail-tabicon.png" ></image> 123 <image src="../../static/detail-tabicon.png" ></image>
124 </picker> 124 </picker>
125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
126 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 126 <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"> 127 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
128 <image src="../../static/detail-tabicon.png" ></image> 128 <image src="../../static/detail-tabicon.png" ></image>
129 </picker> 129 </picker>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view class="confirm"> 132 <view class="confirm">
133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
134 <text>确认以上输入信息来源于我的验光数据!</text> 134 <text>确认以上输入信息来源于我的验光数据!</text>
135 </view> 135 </view>
136 </view> 136 </view>
137 137
138 </template> 138 </template>
139 <template v-else> 139 <template v-else>
140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> 140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
141 <template v-if="item.nameC==='验光日期'"> 141 <template v-if="item.nameC==='验光日期'">
142 <text class="names">{{item.nameC}}</text> 142 <text class="names">{{item.nameC}}</text>
143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
145 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 145 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
146 </template> 146 </template>
147 <template v-else> 147 <template v-else>
148 <template v-if="item.nameC==='度数'"> 148 <template v-if="item.nameC==='度数'">
149 <text style="display: inline;">*</text> 149 <text style="display: inline;">*</text>
150 </template> 150 </template>
151 151
152 <text class="names">{{item.nameC}}</text> 152 <text class="names">{{item.nameC}}</text>
153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
155 </template> 155 </template>
156 </view> 156 </view>
157 </template> 157 </template>
158 </view> 158 </view>
159 </view> 159 </view>
160 160
161 </view> 161 </view>
162 <view class="submit">立即结算</view> 162 <view class="submit">立即结算</view>
163 </view> 163 </view>
164 </template> 164 </template>
165 165
166 <script> 166 <script>
167 import MyCollapse from './compoents/MyCollapse.vue' 167 import MyCollapse from './compoents/MyCollapse.vue'
168 export default { 168 export default {
169 components: { 169 components: {
170 MyCollapse 170 MyCollapse
171 }, 171 },
172 data() { 172 data() {
173 return { 173 return {
174 count:1, 174 count:1,
175 disabled:false, 175 disabled:false,
176 price:180, 176 price:180,
177 // 实用功能参数 177 // 实用功能参数
178 funIsOpen:true, // 默认myCollapse开启 178 funIsOpen:true, // 默认myCollapse开启
179 funList: [ 179 funList: [
180 {"name":"防紫外线","isChioce": false,"key":1}, 180 {"name":"防紫外线","isChioce": false,"key":1,"type": "fun"},
181 {"name":"防蓝光","isChioce": false,"key":2}, 181 {"name":"防蓝光","isChioce": false,"key":2,"type": "fun"},
182 {"name":"智能变色","isChioce": false,"key":3}, 182 {"name":"智能变色","isChioce": false,"key":3,"type": "fun"},
183 {"name":"易清洁","isChioce": false,"key":4}, 183 {"name":"易清洁","isChioce": false,"key":4,"type": "fun"},
184 {"name":"防辐射","isChioce": false,"key":5}, 184 {"name":"防辐射","isChioce": false,"key":5,"type": "fun"},
185 {"name":"抗疲劳","isChioce": false,"key":6}, 185 {"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"},
186 ], 186 ],
187 funContent:[], 187 funContent:[],
188 188
189 // 镜片种类参数 189 // 镜片种类参数
190 kindIsOpen:true, 190 kindIsOpen:true,
191 kindList1: [ 191 kindList1: [
192 {"name":"染色","isChioce":false,key:1}, 192 {"name":"染色","isChioce":false,key:1,"type": "kind"},
193 {"name":"渐变","isChioce":false,key:2}, 193 {"name":"渐变","isChioce":false,key:2,"type": "kind"},
194 ], 194 ],
195 kindList2: [ 195 kindList2: [
196 {"name":"JB234759","isChioce":false,key:3}, 196 {"name":"JB234759","isChioce":false,key:3,"type": "kind"},
197 {"name":"JB234759","isChioce":false,key:4}, 197 {"name":"JB234759","isChioce":false,key:4,"type": "kind"},
198 {"name":"JB234759","isChioce":false,key:5}, 198 {"name":"JB234759","isChioce":false,key:5,"type": "kind"},
199 {"name":"JB234759","isChioce":false,key:6}, 199 {"name":"JB234759","isChioce":false,key:6,"type": "kind"},
200 {"name":"JB234759","isChioce":false,key:7}, 200 {"name":"JB234759","isChioce":false,key:7,"type": "kind"},
201 ], 201 ],
202 kindContent:[], 202 kindContent:[],
203 // 材质选择 203 // 材质选择
204 maIsOpen:true, 204 maIsOpen:true,
205 maList1: [ 205 maList1: [
206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true}, 206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
207 {"name":"特殊镜片","isChioce":false,key:2}, 207 {"name":"特殊镜片","isChioce":false,key:2},
208 ], 208 ],
209 maList2: [ 209 maList2: [
210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
211 {"name":"玻璃镜片","isChioce":false,key:4}, 211 {"name":"玻璃镜片","isChioce":false,key:4},
212 ], 212 ],
213 maContent:[], 213 maContent:[],
214 // 折射率参数 214 // 折射率参数
215 reIsOpen:true, 215 reIsOpen:true,
216 reList1: [ 216 reList1: [
217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true}, 217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
218 {"name":"1.60","isChioce":false,key:2}, 218 {"name":"1.60","isChioce":false,key:2},
219 ], 219 ],
220 reList2: [ 220 reList2: [
221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
222 {"name":"1.67","isChioce":false,key:4}, 222 {"name":"1.67","isChioce":false,key:4},
223 {"name":"1.71","isChioce":false,key:5}, 223 {"name":"1.71","isChioce":false,key:5},
224 {"name":"1.74","isChioce":false,key:6}, 224 {"name":"1.74","isChioce":false,key:6},
225 ], 225 ],
226 reContent:[], 226 reContent:[],
227 // 验光参数 227 // 验光参数
228 opIsOpen:true, 228 opIsOpen:true,
229 tablist: { 229 tablist: {
230 // read: true, 230 // read: true,
231 // seeLong: false, 231 // seeLong: false,
232 confirm: false 232 confirm: false
233 }, 233 },
234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
235 // 度数相关数据 235 // 度数相关数据
236 pickerInfoList:[ 236 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}, 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},
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}, 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},
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}, 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},
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}, 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},
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} 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}
242 ], 242 ],
243 243
244 } 244 }
245 }, 245 },
246 methods: { 246 methods: {
247 counter(isadd){ 247 counter(isadd){
248 if(isadd){ 248 if(isadd){
249 this.count++ 249 this.count++
250 }else{ 250 }else{
251 this.count <= 1? this.disabled = true:this.count-- 251 this.count <= 1? this.disabled = true:this.count--
252 } 252 }
253 }, 253 },
254 myCollapseChange(isopen){ 254 myCollapseChange(isopen){
255 // console.log(isopen) 255 // console.log(isopen)
256 this.opIsOpen = !isopen 256 this.opIsOpen = !isopen
257 }, 257 },
258 changeConfirm() { 258 changeConfirm() {
259 this.tablist.confirm = !this.tablist.confirm 259 this.tablist.confirm = !this.tablist.confirm
260 }, 260 },
261 261
262 bindPickerChange01: function(e) { 262 bindPickerChange01: function(e) {
263 this.pickerInfoList[0].nameIndex1 = e.target.value 263 this.pickerInfoList[0].nameIndex1 = e.target.value
264 }, 264 },
265 bindPickerChange02: function(e) { 265 bindPickerChange02: function(e) {
266 this.pickerInfoList[0].nameIndex2 = e.target.value 266 this.pickerInfoList[0].nameIndex2 = e.target.value
267 }, 267 },
268 268
269 bindPickerChange11: function(e) { 269 bindPickerChange11: function(e) {
270 this.pickerInfoList[1].nameIndex1 = e.target.value 270 this.pickerInfoList[1].nameIndex1 = e.target.value
271 }, 271 },
272 bindPickerChange12: function(e) { 272 bindPickerChange12: function(e) {
273 this.pickerInfoList[1].nameIndex2 = e.target.value 273 this.pickerInfoList[1].nameIndex2 = e.target.value
274 }, 274 },
275 275
276 bindPickerChange21: function(e) { 276 bindPickerChange21: function(e) {
277 this.pickerInfoList[2].nameIndex1 = e.target.value 277 this.pickerInfoList[2].nameIndex1 = e.target.value
278 }, 278 },
279 bindPickerChange22: function(e) { 279 bindPickerChange22: function(e) {
280 this.pickerInfoList[2].nameIndex2 = e.target.value 280 this.pickerInfoList[2].nameIndex2 = e.target.value
281 }, 281 },
282 282
283 bindPickerChange31: function(e) { 283 bindPickerChange31: function(e) {
284 this.pickerInfoList[3].nameIndex1 = e.target.value 284 this.pickerInfoList[3].nameIndex1 = e.target.value
285 }, 285 },
286 bindPickerChange32: function(e) { 286 bindPickerChange32: function(e) {
287 this.pickerInfoList[3].nameIndex2 = e.target.value 287 this.pickerInfoList[3].nameIndex2 = e.target.value
288 }, 288 },
289 289
290 bindPickerChange41: function(e) { 290 bindPickerChange41: function(e) {
291 this.pickerInfoList[4].nameIndex1 = e.target.value 291 this.pickerInfoList[4].nameIndex1 = e.target.value
292 }, 292 },
293 bindPickerChange42: function(e) { 293 bindPickerChange42: function(e) {
294 this.pickerInfoList[4].nameIndex2 = e.target.value 294 this.pickerInfoList[4].nameIndex2 = e.target.value
295 }, 295 },
296 bindPickerChange43: function(e) { 296 bindPickerChange43: function(e) {
297 this.pickerInfoList[4].nameIndex3 = e.target.value 297 this.pickerInfoList[4].nameIndex3 = e.target.value
298 }, 298 },
299 } 299 }
300 } 300 }
301 </script> 301 </script>
302 302
303 <style lang="scss" scoped> 303 <style lang="scss" scoped>
304 .content{ 304 .content{
305 width: 100%; 305 width: 100%;
306 background-color: #F2F2F2; 306 background-color: #F2F2F2;
307 display: flex; 307 display: flex;
308 flex-direction: column; 308 flex-direction: column;
309 align-items: center; 309 align-items: center;
310 } 310 }
311 311
312 .goods-info{ 312 .goods-info{
313 width: 100%; 313 width: 100%;
314 height: 272rpx; 314 height: 272rpx;
315 box-sizing: border-box; 315 box-sizing: border-box;
316 padding: 40rpx 40rpx 36rpx 36rpx; 316 padding: 40rpx 40rpx 36rpx 36rpx;
317 margin: 36rpx 0 18rpx 0; 317 margin: 36rpx 0 18rpx 0;
318 // margin-bottom: -18rpx; 318 // margin-bottom: -18rpx;
319 // margin-top: -36rpx; 319 // margin-top: -36rpx;
320 background: #FFFFFF; 320 background: #FFFFFF;
321 border-radius: 16rpx; 321 border-radius: 16rpx;
322 display: flex; 322 display: flex;
323 image{ 323 image{
324 width: 94px; 324 width: 94px;
325 height: 94px; 325 height: 94px;
326 margin-right: 28rpx; 326 margin-right: 28rpx;
327 } 327 }
328 .box-right{ 328 .box-right{
329 width: 458rpx; 329 width: 458rpx;
330 display: flex; 330 display: flex;
331 flex-direction: column; 331 flex-direction: column;
332 align-items: flex-start; 332 align-items: flex-start;
333 justify-content: space-between; 333 justify-content: space-between;
334 .p1 { 334 .p1 {
335 // font-family: PingFangSC-Regular; 335 // font-family: PingFangSC-Regular;
336 font-size: 14px; 336 font-size: 14px;
337 color: #333333; 337 color: #333333;
338 letter-spacing: -0.26px; 338 letter-spacing: -0.26px;
339 text-align: justify; 339 text-align: justify;
340 line-height: 18px; 340 line-height: 18px;
341 } 341 }
342 .p2 { 342 .p2 {
343 // font-family: PingFangSC-Regular; 343 // font-family: PingFangSC-Regular;
344 font-size: 10px; 344 font-size: 10px;
345 color: #999999; 345 color: #999999;
346 letter-spacing: -0.19px; 346 letter-spacing: -0.19px;
347 margin-top: -20rpx; 347 margin-top: -20rpx;
348 } 348 }
349 .priceBox{ 349 .priceBox{
350 display: flex; 350 display: flex;
351 flex-direction: row; 351 flex-direction: row;
352 justify-content: space-between; 352 justify-content: space-between;
353 width: 100%; 353 width: 100%;
354 .price{ 354 .price{
355 color: #FF6B4A; 355 color: #FF6B4A;
356 font-size: 28rpx; 356 font-size: 28rpx;
357 } 357 }
358 .counter{ 358 .counter{
359 display: flex; 359 display: flex;
360 flex-direction: row; 360 flex-direction: row;
361 justify-content: space-between; 361 justify-content: space-between;
362 font-size: 28rpx; 362 font-size: 28rpx;
363 color: #333333; 363 color: #333333;
364 width: 122rpx; 364 width: 122rpx;
365 .btn{ 365 .btn{
366 display: flex; 366 display: flex;
367 justify-content: center; 367 justify-content: center;
368 line-height: 32rpx; 368 line-height: 32rpx;
369 height: 32rpx; 369 height: 32rpx;
370 width: 32rpx; 370 width: 32rpx;
371 background-color: #F2F2F2; 371 background-color: #F2F2F2;
372 color: #CFCFCF; 372 color: #CFCFCF;
373 } 373 }
374 } 374 }
375 } 375 }
376 } 376 }
377 } 377 }
378 378
379 .goods-data{ 379 .goods-data{
380 width: 100%; 380 width: 100%;
381 box-sizing: border-box; 381 box-sizing: border-box;
382 padding: 37rpx 40rpx 0 40rpx; 382 padding: 37rpx 40rpx 0 40rpx;
383 background: #FFFFFF; 383 background: #FFFFFF;
384 border-radius: 12rpx; 384 border-radius: 12rpx;
385 margin-bottom: 92px; 385 margin-bottom: 92px;
386 .opCollapse{ 386 .opCollapse{
387 width: 100%; 387 width: 100%;
388 padding-bottom: 28rpx; 388 padding-bottom: 28rpx;
389 margin-top: 7px; 389 margin-top: 7px;
390 border-bottom: 1px solid #E9E9E9; 390 border-bottom: 1px solid #E9E9E9;
391 .head{ 391 .head{
392 display: flex; 392 display: flex;
393 justify-content: space-between; 393 justify-content: space-between;
394 height: 24px; 394 height: 24px;
395 // font-family: PingFangSC-Medium; 395 // font-family: PingFangSC-Medium;
396 font-size: 16px; 396 font-size: 16px;
397 color: #333333; 397 color: #333333;
398 letter-spacing: -0.3px; 398 letter-spacing: -0.3px;
399 text-align: justify; 399 text-align: justify;
400 line-height: 24px; 400 line-height: 24px;
401 margin-bottom: 18rpx; 401 margin-bottom: 18rpx;
402 .headRighted{ 402 .headRighted{
403 width: 0; 403 width: 0;
404 height: 0; 404 height: 0;
405 border-left: 4px solid transparent; 405 border-left: 4px solid transparent;
406 border-right: 4px solid transparent; 406 border-right: 4px solid transparent;
407 border-bottom: 4px solid #CFCFCF; 407 border-bottom: 4px solid #CFCFCF;
408 transform: scaleY(-1); 408 transform: scaleY(-1);
409 margin-top: 10px; 409 margin-top: 10px;
410 } 410 }
411 .headMid{ 411 .headMid{
412 // font-family: PingFangSC-Regular; 412 // font-family: PingFangSC-Regular;
413 font-size: 10px; 413 font-size: 10px;
414 color: #999999; 414 color: #999999;
415 letter-spacing: -0.19px; 415 letter-spacing: -0.19px;
416 margin-left: -120rpx; 416 margin-left: -120rpx;
417 } 417 }
418 .headRight{ 418 .headRight{
419 width: 0; 419 width: 0;
420 height: 0; 420 height: 0;
421 border-left: 4px solid transparent; 421 border-left: 4px solid transparent;
422 border-right: 4px solid transparent; 422 border-right: 4px solid transparent;
423 border-bottom: 4px solid #CFCFCF; 423 border-bottom: 4px solid #CFCFCF;
424 margin-top: 10px; 424 margin-top: 10px;
425 } 425 }
426 } 426 }
427 .body{ 427 .body{
428 // font-family: PingFangSC-Regular; 428 // font-family: PingFangSC-Regular;
429 font-size: 12px; 429 font-size: 12px;
430 color: #666666; 430 color: #666666;
431 letter-spacing: 0; 431 letter-spacing: 0;
432 .bodyBox{ 432 .bodyBox{
433 margin-top: 15px; 433 margin-top: 15px;
434 .names{ 434 .names{
435 // font-family: PingFangSC-Regular; 435 // font-family: PingFangSC-Regular;
436 font-size: 12px; 436 font-size: 12px;
437 color: #151515; 437 color: #151515;
438 letter-spacing: 0; 438 letter-spacing: 0;
439 text-align: justify; 439 text-align: justify;
440 line-height: 17px; 440 line-height: 17px;
441 margin-left: 5px; 441 margin-left: 5px;
442 margin-right: 10px; 442 margin-right: 10px;
443 } 443 }
444 text{ 444 text{
445 // font-family: PingFangSC-Regular; 445 // font-family: PingFangSC-Regular;
446 font-size: 12px; 446 font-size: 12px;
447 color: #666666; 447 color: #666666;
448 letter-spacing: 0; 448 letter-spacing: 0;
449 text-align: justify; 449 text-align: justify;
450 } 450 }
451 } 451 }
452 452
453 } 453 }
454 } 454 }
455 455
456 } 456 }
457 457
458 .goods-form { 458 .goods-form {
459 display: flex; 459 display: flex;
460 flex-direction: column; 460 flex-direction: column;
461 align-items: center; 461 align-items: center;
462 justify-content: center; 462 justify-content: center;
463 background-color: #fff; 463 background-color: #fff;
464 width: 100%; 464 width: 100%;
465 465
466 .p1 { 466 .p1 {
467 font-size: 16px; 467 font-size: 16px;
468 color: #333333; 468 color: #333333;
469 letter-spacing: -0.3px; 469 letter-spacing: -0.3px;
470 text-align: justify; 470 text-align: justify;
471 line-height: 24px; 471 line-height: 24px;
472 margin: 4px 0; 472 margin: 4px 0;
473 473
474 } 474 }
475 .p2 { 475 .p2 {
476 font-size: 12px; 476 font-size: 12px;
477 color: #999999; 477 color: #999999;
478 letter-spacing: -0.23px; 478 letter-spacing: -0.23px;
479 margin-bottom: 18rpx; 479 margin-bottom: 18rpx;
480 } 480 }
481 image{ 481 image{
482 width: 28rpx; 482 width: 28rpx;
483 height: 26rpx; 483 height: 26rpx;
484 } 484 }
485 .confirm { 485 .confirm {
486 display: flex; 486 display: flex;
487 align-items: center; 487 align-items: center;
488 font-size: 12px; 488 font-size: 12px;
489 color: #666666; 489 color: #666666;
490 letter-spacing: -0.23px; 490 letter-spacing: -0.23px;
491 width: 684rpx; 491 width: 684rpx;
492 image{ 492 image{
493 margin-right:25rpx; 493 margin-right:25rpx;
494 } 494 }
495 } 495 }
496 .picker{ 496 .picker{
497 display: flex; 497 display: flex;
498 flex-direction: column; 498 flex-direction: column;
499 justify-content: center; 499 justify-content: center;
500 align-items: center; 500 align-items: center;
501 width: 100%; 501 width: 100%;
502 image{ 502 image{
503 width: 10px; 503 width: 10px;
504 height: 10px; 504 height: 10px;
505 margin-right: 5px; 505 margin-right: 5px;
506 } 506 }
507 .picker-choice{ 507 .picker-choice{
508 display: flex; 508 display: flex;
509 width: 684rpx; 509 width: 684rpx;
510 align-items: center; 510 align-items: center;
511 margin-bottom: 40rpx; 511 margin-bottom: 40rpx;
512 .choice-left{ 512 .choice-left{
513 width: 210rpx; 513 width: 210rpx;
514 .p11 { 514 .p11 {
515 font-size: 14px; 515 font-size: 14px;
516 color: #333333; 516 color: #333333;
517 letter-spacing: -0.26px; 517 letter-spacing: -0.26px;
518 text-align: justify; 518 text-align: justify;
519 line-height: 24px; 519 line-height: 24px;
520 // margin-right: 10px; 520 // margin-right: 10px;
521 } 521 }
522 .p12 { 522 .p12 {
523 font-size: 10px; 523 font-size: 10px;
524 color: #3F3F3F; 524 color: #3F3F3F;
525 letter-spacing: -0.19px; 525 letter-spacing: -0.19px;
526 text-align: justify; 526 text-align: justify;
527 line-height: 24px; 527 line-height: 24px;
528 } 528 }
529 529
530 530
531 } 531 }
532 .p13 { 532 .p13 {
533 font-size: 10px; 533 font-size: 10px;
534 color: #999999; 534 color: #999999;
535 letter-spacing: -0.19px; 535 letter-spacing: -0.19px;
536 margin-right: 10px; 536 margin-right: 10px;
537 } 537 }
538 .p13-date { 538 .p13-date {
539 font-size: 10px; 539 font-size: 10px;
540 color: #999999; 540 color: #999999;
541 letter-spacing: -0.19px; 541 letter-spacing: -0.19px;
542 margin-right: 5px; 542 margin-right: 5px;
543 } 543 }
544 .p14 { 544 .p14 {
545 font-size: 14px; 545 font-size: 14px;
546 color: #666666; 546 color: #666666;
547 letter-spacing: -0.26px; 547 letter-spacing: -0.26px;
548 text-align: center; 548 text-align: center;
549 width: 124rpx; 549 width: 124rpx;
550 border-bottom: 1px solid #CFCFCF; 550 border-bottom: 1px solid #CFCFCF;
551 } 551 }
552 552
553 } 553 }
554 } 554 }
555 } 555 }
556 556
557 .submit{ 557 .submit{
558 width: 100%; 558 width: 100%;
559 height: 112rpx; 559 height: 112rpx;
560 background: #FF6B4A; 560 background: #FF6B4A;
561 position: fixed; 561 position: fixed;
562 bottom: 0; 562 bottom: 0;
563 text-align: center; 563 text-align: center;
564 line-height: 112rpx; 564 line-height: 112rpx;
565 // font-family: PingFangSC-Regular; 565 // font-family: PingFangSC-Regular;
566 font-size: 16px; 566 font-size: 16px;
567 color: #FFFFFF; 567 color: #FFFFFF;
568 letter-spacing: -0.3px; 568 letter-spacing: -0.3px;
569 } 569 }
570 570
571 </style> 571 </style>
572 572
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" > 5 <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
6 <swiper-item v-for="(item) in infos" :key="item.goods_id"> 6 <swiper-item v-for="(item) in infos" :key="item.goods_id">
7 <image :src="item.img" mode="scaleToFill"></image> 7 <image :src="item.img" mode="scaleToFill"></image>
8 </swiper-item> 8 </swiper-item>
9 </swiper> 9 </swiper>
10 <view class="D1_price">￥{{price}}</view> 10 <view class="D1_price">￥{{price}}</view>
11 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view> 11 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
12 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 12 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
13 </view> 13 </view>
14 <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4"> 14 <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4">
15 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 15 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
16 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 16 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
17 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 17 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
18 </view> 18 </view>
19 <view class="D2" v-if="updateGoodType == 1"> 19 <view class="D2" v-if="updateGoodType == 1">
20 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 20 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
21 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> 21 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
22 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> 22 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
23 </view> 23 </view>
24 <view class="D2" v-if="updateGoodType == 3"> 24 <view class="D2" v-if="updateGoodType == 3">
25 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 25 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
26 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> 26 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
27 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 27 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
28 </view> 28 </view>
29 29
30 <view class="D3"> 30 <view class="D3">
31 <view class="screenBar"> 31 <view class="screenBar">
32 <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" > 32 <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" >
33 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 33 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
34 </view> 34 </view>
35 </view> 35 </view>
36 <view class="screen-item " v-if="current ===0"> 36 <view class="screen-item " v-if="current ===0">
37 <view class="D3_list"> 37 <view class="D3_list">
38 <view v-for="(item) in parameter" :key="item.key"> 38 <view v-for="(item) in parameter" :key="item.key">
39 <image class="D3_image" v-bind:src = "item.img"></image> 39 <image class="D3_image" v-bind:src = "item.img"></image>
40 <span>{{item.standard}}</span> 40 <span>{{item.standard}}</span>
41 <span>{{item.slength}}</span> 41 <span>{{item.slength}}</span>
42 </view> 42 </view>
43 </view> 43 </view>
44 </view > 44 </view >
45 <view class="screen-item " v-if="current ===1"> 45 <view class="screen-item " v-if="current ===1">
46 <view class="D3_list"> 46 <view class="D3_list">
47 <view>主体</view> 47 <view>主体</view>
48 <view>商品产地：韩国</view> 48 <view>商品产地：韩国</view>
49 <view>包装清单：彩色隐形 * 1</view> 49 <view>包装清单：彩色隐形 * 1</view>
50 </view> 50 </view>
51 </view > 51 </view >
52 <view class="screen-item " v-if="current ===2"> 52 <view class="screen-item " v-if="current ===2">
53 <view class="customerService"> 53 <view class="customerService">
54 <view class="serviceItem" > 54 <view class="serviceItem" >
55 <view class="title"> 55 <view class="title">
56 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 56 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
57 <text class="titleText">卖家服务</text> 57 <text class="titleText">卖家服务</text>
58 </view> 58 </view>
59 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 59 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
60 </view> 60 </view>
61 <view class="serviceItem" > 61 <view class="serviceItem" >
62 <view class="title"> 62 <view class="title">
63 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 63 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
64 <text class="titleText">平台承诺</text> 64 <text class="titleText">平台承诺</text>
65 </view> 65 </view>
66 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 66 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
67 </view> 67 </view>
68 <view class="serviceItem"> 68 <view class="serviceItem">
69 <view class="title"> 69 <view class="title">
70 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 70 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
71 <text class="titleText">正品保证</text> 71 <text class="titleText">正品保证</text>
72 </view> 72 </view>
73 <view class="itemContent">向您保证所售商品均为正品行货</view> 73 <view class="itemContent">向您保证所售商品均为正品行货</view>
74 </view> 74 </view>
75 <view class="serviceItem2"> 75 <view class="serviceItem2">
76 <view class="title"> 76 <view class="title">
77 <text class="titleText">权利申明</text> 77 <text class="titleText">权利申明</text>
78 </view> 78 </view>
79 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 79 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
80 </view> 80 </view>
81 <view class="serviceItem2"> 81 <view class="serviceItem2">
82 <view class="title"> 82 <view class="title">
83 <text class="titleText">价格保证</text> 83 <text class="titleText">价格保证</text>
84 </view> 84 </view>
85 <view class="itemContent"> 85 <view class="itemContent">
86 <view class="itemContent-child"> 86 <view class="itemContent-child">
87 <text class="contentTitle">平台价:</text> 87 <text class="contentTitle">平台价:</text>
88 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 88 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
89 </view> 89 </view>
90 <view class="itemContent-child"> 90 <view class="itemContent-child">
91 <text class="contentTitle">划线价:</text> 91 <text class="contentTitle">划线价:</text>
92 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 92 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
93 </view> 93 </view>
94 <view class="itemContent-child"> 94 <view class="itemContent-child">
95 <text class="contentTitle">平折扣:</text> 95 <text class="contentTitle">平折扣:</text>
96 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 96 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
97 </view> 97 </view>
98 <view class="itemContent-child"> 98 <view class="itemContent-child">
99 <text class="contentTitle">异常问题:</text> 99 <text class="contentTitle">异常问题:</text>
100 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 100 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
101 </view> 101 </view>
102 102
103 </view> 103 </view>
104 </view> 104 </view>
105 </view> 105 </view>
106 </view > 106 </view >
107 </view> 107 </view>
108 <view class="D4" v-if="current !==2"> 108 <view class="D4" v-if="current !==2">
109 <view class="D4_esvalue"> 109 <view class="D4_esvalue">
110 <view>{{esvalue}}</view> 110 <view>{{esvalue}}</view>
111 <view class="D4_2"> 111 <view class="D4_2">
112 <view class="star" v-for="o in starCount" :key="o"> 112 <view class="star" v-for="o in starCount" :key="o">
113 <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image> 113 <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image>
114 </view> 114 </view>
115 </view> 115 </view>
116 </view> 116 </view>
117 <view class="D4_list"> 117 <view class="D4_list">
118 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view> 118 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
119 </view> 119 </view>
120 </view> 120 </view>
121 <view class="D5" v-if="current !==2"> 121 <view class="D5" v-if="current !==2">
122 <view class="D5_fixed1"> 122 <view class="D5_fixed1">
123 <image src="/static/img/detail/hr.png"></image> 123 <image src="/static/img/detail/hr.png"></image>
124 <view>商品详细</view> 124 <view>商品详细</view>
125 <image src="/static/img/detail/hr.png"></image> 125 <image src="/static/img/detail/hr.png"></image>
126 </view> 126 </view>
127 <view class="D5_all"> 127 <view class="D5_all">
128 <image v-bind:src="imgAll"></image> 128 <image v-bind:src="imgAll"></image>
129 </view> 129 </view>
130 <view class="D5_photoes"> 130 <view class="D5_photoes">
131 <view class="D5_photoes1"> 131 <view class="D5_photoes1">
132 <view v-for="(photoes) in photoes" :key="photoes.value"> 132 <view v-for="(photoes) in photoes" :key="photoes.value">
133 <image v-bind:src = "photoes.img"></image> 133 <image v-bind:src = "photoes.img"></image>
134 <view>{{photoes.value}}</view> 134 <view>{{photoes.value}}</view>
135 </view> 135 </view>
136 </view> 136 </view>
137 <view class="D5_logo1">帕森防蓝光镜片</view> 137 <view class="D5_logo1">帕森防蓝光镜片</view>
138 <view class="D5_logo2">健康护眼，我们是认真的！</view> 138 <view class="D5_logo2">健康护眼，我们是认真的！</view>
139 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view> 139 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view class="D6" v-if="current !==2"> 142 <view class="D6" v-if="current !==2">
143 <view class="D6_v1">CHARM DETAIL</view> 143 <view class="D6_v1">CHARM DETAIL</view>
144 <view class="D6_v2">细节展示</view> 144 <view class="D6_v2">细节展示</view>
145 <view ><image v-bind:src="imgDetail"></image></view> 145 <view ><image v-bind:src="imgDetail"></image></view>
146 <view>........................................................................</view> 146 <view>........................................................................</view>
147 <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view> 147 <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
148 </view> 148 </view>
149 149
150 <!-- 底部菜单 --> 150 <!-- 底部菜单 -->
151 <view class="botton"> 151 <view class="botton">
152 <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view> 152 <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
153 <view class="botton_2"> 153 <view class="botton_2">
154 <view class="botton_input">加入购物车</view> 154 <view class="botton_input">加入购物车</view>
155 <view class="botton_now" @click="goPerchase">立即购买</view> 155 <view class="botton_now" @click="goPerchase">立即购买</view>
156 </view> 156 </view>
157 </view> 157 </view>
158 </view> 158 </view>
159 </template> 159 </template>
160 160
161 <script> 161 <script>
162 import store from '@/store';
162 export default { 163 export default {
163 data(){ 164 data(){
164 return { 165 return {
165 name:'商品名称', 166 name:'商品名称',
166 goodType:2, 167 goodType:2,
167 price: 120, 168 price: 120,
168 number: 391, 169 number: 391,
169 screenItems: [ 170 screenItems: [
170 {current:0,text:'商品保障'}, 171 {current:0,text:'商品保障'},
171 {current:1,text:'规格参数'}, 172 {current:1,text:'规格参数'},
172 {current:2,text:'售后保障'}, 173 {current:2,text:'售后保障'},
173 ], 174 ],
174 current: 0, 175 current: 0,
175 starCount:5, 176 starCount:5,
176 infos: [ 177 infos: [
177 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 178 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
178 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 179 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
179 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 180 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
180 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 181 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
181 ], 182 ],
182 parameter:[ 183 parameter:[
183 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'}, 184 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
184 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'}, 185 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
185 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'}, 186 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
186 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'}, 187 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
187 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'}, 188 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
188 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'} 189 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
189 ], 190 ],
190 assess:[ 191 assess:[
191 {key: 0, Iassess: '价格实惠'}, 192 {key: 0, Iassess: '价格实惠'},
192 {key: 1, Iassess: '美观大方'}, 193 {key: 1, Iassess: '美观大方'},
193 {key: 2, Iassess: '易搭配'} 194 {key: 2, Iassess: '易搭配'}
194 ], 195 ],
195 esvalue:'宝贝好评率 100%', 196 esvalue:'宝贝好评率 100%',
196 introduction:{ 197 introduction:{
197 material:'钛合金', 198 material:'钛合金',
198 func:'抗疲劳/防辐射', 199 func:'抗疲劳/防辐射',
199 rate: 1.6 200 rate: 1.6
200 }, 201 },
201 imgAll:'/static/img/detail/d8.png' , 202 imgAll:'/static/img/detail/d8.png' ,
202 photoes:[ 203 photoes:[
203 {value:'日常办公', img:'/static/img/detail/d9.png'}, 204 {value:'日常办公', img:'/static/img/detail/d9.png'},
204 {value:'上网', img:'/static/img/detail/d10.png'}, 205 {value:'上网', img:'/static/img/detail/d10.png'},
205 {value:'追剧', img:'/static/img/detail/d11.png'}, 206 {value:'追剧', img:'/static/img/detail/d11.png'},
206 {value:'玩游戏', img:'/static/img/detail/d12.png'}, 207 {value:'玩游戏', img:'/static/img/detail/d12.png'},
207 ], 208 ],
208 imgDetail:'/static/img/detail/d13.png', 209 imgDetail:'/static/img/detail/d13.png',
209 imgShop:{ 210 imgShop:{
210 img:'/static/tab-cart.png', 211 img:'/static/tab-cart.png',
211 IsShown: false 212 IsShown: false
212 } 213 }
213 } 214 }
214 }, 215 },
215 onLoad:function(option){ 216 onLoad:function(option){
216 this.goodType = option.goodType 217 this.goodType = option.goodType
217 console.log(this.updateGoodType) 218 // console.log(this.updateGoodType)
219 store.dispatch('read/fetch');
218 }, 220 },
219 computed:{ 221 computed:{
220 updateGoodType(){ 222 updateGoodType(){
221 return this.goodType 223 return this.goodType
222 } 224 },
225 goodInfo() {
226 console.log(this.$store.state.read.goodInfo)
227 return this.$store.state.read.goodInfo;
228 },
223 }, 229 },
224 methods:{ 230 methods:{
225 goPerchase(){ 231 goPerchase(){
226 switch(this.updateGoodType){ 232 switch(this.updateGoodType){
227 case '1': 233 case '1':
228 uni.navigateTo({ 234 uni.navigateTo({
229 url: '../detailsChoiceArgs/detailsChoiceArgs', 235 url: '../detailsChoiceArgs/detailsChoiceArgs',
230 success: res => {}, 236 success: res => {},
231 fail: () => {}, 237 fail: () => {},
232 complete: () => {} 238 complete: () => {}
233 }); 239 });
234 break; 240 break;
235 case '2': 241 case '2':
236 uni.navigateTo({ 242 uni.navigateTo({
237 url: `../detailStandard/detailStandard_k`, 243 url: `../detailStandard/detailStandard_k`,
238 success: res => {}, 244 success: res => {},
239 fail: () => {}, 245 fail: () => {},
240 complete: () => {} 246 complete: () => {}
241 }); 247 });
242 break; 248 break;
243 case '3': 249 case '3':
244 uni.navigateTo({ 250 uni.navigateTo({
245 url: `../purchaseLenses/purchaseLenses`, 251 url: `../purchaseLenses/purchaseLenses`,
246 success: res => {}, 252 success: res => {},
247 fail: () => {}, 253 fail: () => {},
248 complete: () => {} 254 complete: () => {}
249 }); 255 });
250 break; 256 break;
251 case '4': 257 case '4':
252 uni.navigateTo({ 258 uni.navigateTo({
253 url: `../detailStandard/detailStandard_sun`, 259 url: `../detailStandard/detailStandard_sun`,
254 success: res => {}, 260 success: res => {},
255 fail: () => {}, 261 fail: () => {},
256 complete: () => {} 262 complete: () => {}
257 }); 263 });
258 break; 264 break;
259 default : 265 default :
260 break 266 break
261 } 267 }
262 }, 268 },
263 tabChange(e) { 269 tabChange(e) {
264 if (this.current !== e) { 270 if (this.current !== e) {
265 this.current = e; 271 this.current = e;
266 } 272 }
267 } 273 }
268 } 274 }
269 } 275 }
270 </script> 276 </script>
271 <style lang='scss'> 277 <style lang='scss'>
272 .container{ 278 .container{
273 background-color:#f8f8f8 ; 279 background-color:#f8f8f8 ;
274 } 280 }
275 .D1,.D2,.D3,.D4,.D6{ 281 .D1,.D2,.D3,.D4,.D6{
276 background: #ffffff; 282 background: #ffffff;
277 margin-bottom: 10px; 283 margin-bottom: 10px;
278 padding:8px 20px 8px 20px; 284 padding:8px 20px 8px 20px;
279 box-sizing: border-box; 285 box-sizing: border-box;
280 .swiperImage { 286 .swiperImage {
281 width: 684rpx; 287 width: 684rpx;
282 height: 512rpx; 288 height: 512rpx;
283 image { 289 image {
284 width: 100%; 290 width: 100%;
285 height: 100%; 291 height: 100%;
286 border-radius: 16rpx; 292 border-radius: 16rpx;
287 } 293 }
288 } 294 }
289 } 295 }
290 .D5{ 296 .D5{
291 background: #ffffff; 297 background: #ffffff;
292 padding:8px 20px 8px 20px; 298 padding:8px 20px 8px 20px;
293 box-sizing: border-box; 299 box-sizing: border-box;
294 } 300 }
295 .swiperImage{ 301 .swiperImage{
296 width: 100%; 302 width: 100%;
297 height: 560rpx; 303 height: 560rpx;
298 .swiper-item{ 304 .swiper-item{
299 width: 100%; 305 width: 100%;
300 image{ 306 image{
301 width: 100%; 307 width: 100%;
302 } 308 }
303 } 309 }
304 } 310 }
305 .D1{ 311 .D1{
306 .D1_price{ 312 .D1_price{
307 color: #EB5D3B; 313 color: #EB5D3B;
308 font-size: 18px; 314 font-size: 18px;
309 margin-top: 5px; 315 margin-top: 5px;
310 font-family: 'PingFangSC-Semibold'; 316 font-family: 'PingFangSC-Semibold';
311 } 317 }
312 .D1_name{ 318 .D1_name{
313 font-size: 16px; 319 font-size: 16px;
314 font-family: 'PingFangSC-Semibold'; 320 font-family: 'PingFangSC-Semibold';
315 margin-top: 5px; 321 margin-top: 5px;
316 display: flex; 322 display: flex;
317 justify-content: space-between; 323 justify-content: space-between;
318 .D1_name1{ 324 .D1_name1{
319 font-weight: bold; 325 font-weight: bold;
320 font-size: 16px; 326 font-size: 16px;
321 color: #333333; 327 color: #333333;
322 } 328 }
323 .D1_number{ 329 .D1_number{
324 color: #999999 ; 330 color: #999999 ;
325 font-size: 14px; 331 font-size: 14px;
326 font-family: 'PingFangSC-Regular'; 332 font-family: 'PingFangSC-Regular';
327 } 333 }
328 } 334 }
329 .D1_spans{ 335 .D1_spans{
330 font-size: 10px; 336 font-size: 10px;
331 color:#999999; 337 color:#999999;
332 margin-top: 5px; 338 margin-top: 5px;
333 span{ 339 span{
334 height: 14px; 340 height: 14px;
335 margin-right: 10px; 341 margin-right: 10px;
336 } 342 }
337 } 343 }
338 344
339 } 345 }
340 .D2{ 346 .D2{
341 font-size: 14px; 347 font-size: 14px;
342 font-family: 'PingFangSC-Regular'; 348 font-family: 'PingFangSC-Regular';
343 view{ 349 view{
344 height: 24px; 350 height: 24px;
345 } 351 }
346 .D2_span1{ 352 .D2_span1{
347 color: #999999; 353 color: #999999;
348 } 354 }
349 .D2_span2{ 355 .D2_span2{
350 color: #333333; 356 color: #333333;
351 } 357 }
352 } 358 }
353 .D3{ 359 .D3{
354 .screenBar{ 360 .screenBar{
355 width: 670rpx; 361 width: 670rpx;
356 margin-top: 20rpx; 362 margin-top: 20rpx;
357 margin-bottom: 24rpx; 363 margin-bottom: 24rpx;
358 display: flex; 364 display: flex;
359 flex-direction: row; 365 flex-direction: row;
360 justify-content: space-between; 366 justify-content: space-between;
361 align-items: center; 367 align-items: center;
362 font-size: 14px; 368 font-size: 14px;
363 color: #333333; 369 color: #333333;
364 transition:all 0.2s; 370 transition:all 0.2s;
365 } 371 }
366 .screen-item{ 372 .screen-item{
367 font-size: 32rpx; 373 font-size: 32rpx;
368 color: #333333; 374 color: #333333;
369 display: flex; 375 display: flex;
370 transition:all 0.2s; 376 transition:all 0.2s;
371 .D3_list{ 377 .D3_list{
372 margin-bottom: 4px; 378 margin-bottom: 4px;
373 } 379 }
374 .D3_list view{ 380 .D3_list view{
375 display: flex; 381 display: flex;
376 align-content: center; 382 align-content: center;
377 font-size: 14px; 383 font-size: 14px;
378 color: #333333; 384 color: #333333;
379 } 385 }
380 .D3_list image{ 386 .D3_list image{
381 width: 50px; 387 width: 50px;
382 height: 25px; 388 height: 25px;
383 margin-right: 6px; 389 margin-right: 6px;
384 } 390 }
385 .D3_list span{ 391 .D3_list span{
386 margin-left: 6px; 392 margin-left: 6px;
387 margin-right: 5px; 393 margin-right: 5px;
388 font-family: 'PingFangSC-Regular'; 394 font-family: 'PingFangSC-Regular';
389 } 395 }
390 } 396 }
391 .active{ 397 .active{
392 border-bottom: 4rpx solid #FF6B4A; 398 border-bottom: 4rpx solid #FF6B4A;
393 } 399 }
394 .customerService{ 400 .customerService{
395 margin-bottom: 90rpx; 401 margin-bottom: 90rpx;
396 .serviceItem{ 402 .serviceItem{
397 margin-bottom: 32rpx; 403 margin-bottom: 32rpx;
398 .title{ 404 .title{
399 display: flex;flex-direction: row; 405 display: flex;flex-direction: row;
400 align-items: center; 406 align-items: center;
401 .titleText{ 407 .titleText{
402 font-size: 14px; 408 font-size: 14px;
403 color: #333333; 409 color: #333333;
404 margin-bottom: 12rpx; 410 margin-bottom: 12rpx;
405 } 411 }
406 } 412 }
407 .itemContent{ 413 .itemContent{
408 font-size: 14px; 414 font-size: 14px;
409 color: #999999; 415 color: #999999;
410 margin-left: 18rpx; 416 margin-left: 18rpx;
411 } 417 }
412 } 418 }
413 .serviceItem2{ 419 .serviceItem2{
414 margin-left: 18rpx; 420 margin-left: 18rpx;
415 margin-bottom: 32rpx; 421 margin-bottom: 32rpx;
416 .titleText{ 422 .titleText{
417 font-size: 14px; 423 font-size: 14px;
418 color: #FF6B4A; 424 color: #FF6B4A;
419 } 425 }
420 .itemContent{ 426 .itemContent{
421 font-size: 14px; 427 font-size: 14px;
422 color: #999999; 428 color: #999999;
423 .itemContent-child{ 429 .itemContent-child{
424 margin-bottom: 40rpx; 430 margin-bottom: 40rpx;
425 .contentTitle{ 431 .contentTitle{
426 border-bottom: 1px solid #FF6B4A; 432 border-bottom: 1px solid #FF6B4A;
427 } 433 }
428 } 434 }
429 } 435 }
430 } 436 }
431 } 437 }
432 } 438 }
433 .D4{ 439 .D4{
434 .D4_esvalue{ 440 .D4_esvalue{
435 font-size: 14px; 441 font-size: 14px;
436 color: #333333; 442 color: #333333;
437 display: flex; 443 display: flex;
438 justify-content: space-between; 444 justify-content: space-between;
439 margin-bottom: 10px; 445 margin-bottom: 10px;
440 .D4_2{ 446 .D4_2{
441 width: 90px; 447 width: 90px;
442 display: flex; 448 display: flex;
443 align-items: center; 449 align-items: center;
444 justify-content: space-between; 450 justify-content: space-between;
445 } 451 }
446 } 452 }
447 .D4_esvalue view{ 453 .D4_esvalue view{
448 font-size: 14px; 454 font-size: 14px;
449 color: #333333; 455 color: #333333;
450 font-weight: bold; 456 font-weight: bold;
451 } 457 }
452 .D4_list view{ 458 .D4_list view{
453 display: inline-block; 459 display: inline-block;
454 font-size: 12px; 460 font-size: 12px;
455 text-align: center; 461 text-align: center;
456 margin-right: 12px; 462 margin-right: 12px;
457 width: 90px; 463 width: 90px;
458 height: 24px; 464 height: 24px;
459 line-height: 24px; 465 line-height: 24px;
460 background: #F2F2F2; 466 background: #F2F2F2;
461 color: #666666 ; 467 color: #666666 ;
462 } 468 }
463 } 469 }
464 .D5{ 470 .D5{
465 .D5_fixed1{ 471 .D5_fixed1{
466 display: flex; 472 display: flex;
467 justify-content: space-between; 473 justify-content: space-between;
468 align-content: center; 474 align-content: center;
469 margin-bottom: 12px; 475 margin-bottom: 12px;
470 view{ 476 view{
471 font-size: 14px; 477 font-size: 14px;
472 color: #333333; 478 color: #333333;
473 font-weight: bold; 479 font-weight: bold;
474 font-family: 'PingFangSC-Medium'; 480 font-family: 'PingFangSC-Medium';
475 line-height: 24px; 481 line-height: 24px;
476 } 482 }
477 image{ 483 image{
478 width: 240rpx; 484 width: 240rpx;
479 height: 3px; 485 height: 3px;
480 margin-top: 10px; 486 margin-top: 10px;
481 } 487 }
482 } 488 }
483 .D5_all { 489 .D5_all {
484 width: 100%; 490 width: 100%;
485 height: 380px; 491 height: 380px;
486 margin-bottom: 30px; 492 margin-bottom: 30px;
487 font-family: 'PingFangSC-Regular'; 493 font-family: 'PingFangSC-Regular';
488 border: #999999 solid 1.5px; 494 border: #999999 solid 1.5px;
489 image{ 495 image{
490 width: 100%; 496 width: 100%;
491 height: 380px; 497 height: 380px;
492 }} 498 }}
493 .D5_photoes1{ 499 .D5_photoes1{
494 display: grid; 500 display: grid;
495 grid-template-columns: 48% 48%; 501 grid-template-columns: 48% 48%;
496 grid-row-gap: 10px; 502 grid-row-gap: 10px;
497 grid-column-gap: 4%; 503 grid-column-gap: 4%;
498 image{ 504 image{
499 width: 100%; 505 width: 100%;
500 height: 70px; 506 height: 70px;
501 } 507 }
502 view{ 508 view{
503 width: 100%; 509 width: 100%;
504 font-size: 14px; 510 font-size: 14px;
505 text-align: center; 511 text-align: center;
506 background: #949494; 512 background: #949494;
507 font-family: 'PingFangSC-Regular'; 513 font-family: 'PingFangSC-Regular';
508 color: #ffffff; 514 color: #ffffff;
509 view{ 515 view{
510 height: 24px; 516 height: 24px;
511 line-height: 24px; 517 line-height: 24px;
512 } 518 }
513 } 519 }
514 } 520 }
515 .D5_logo1,.D5_logo2{ 521 .D5_logo1,.D5_logo2{
516 text-align: center; 522 text-align: center;
517 } 523 }
518 .D5_logo1{ 524 .D5_logo1{
519 margin-top: 40px; 525 margin-top: 40px;
520 font-size: 24px; 526 font-size: 24px;
521 font-weight: bold; 527 font-weight: bold;
522 font-family: 'PingFangSC-Semibold'; 528 font-family: 'PingFangSC-Semibold';
523 } 529 }
524 .D5_logo2{ 530 .D5_logo2{
525 font-size: 12px; 531 font-size: 12px;
526 } 532 }
527 .D5_logo3{ 533 .D5_logo3{
528 width: 100%; 534 width: 100%;
529 text-align: center; 535 text-align: center;
530 image{ 536 image{
531 width: 50px; 537 width: 50px;
532 height: 24px; 538 height: 24px;
533 } 539 }
534 } 540 }
535 } 541 }
536 .D6{ 542 .D6{
537 width: 100%; 543 width: 100%;
538 height: 430px; 544 height: 430px;
539 background: #F9F6ED; 545 background: #F9F6ED;
540 margin-bottom: 74px; 546 margin-bottom: 74px;
541 view{ 547 view{
542 text-align: center; 548 text-align: center;
543 } 549 }
544 .D6_v1{ 550 .D6_v1{
545 font-weight: bold; 551 font-weight: bold;
546 } 552 }
547 .D6_v2{ 553 .D6_v2{
548 font-size: 14px; 554 font-size: 14px;
549 margin-bottom: 30px; 555 margin-bottom: 30px;
550 } 556 }
551 .D6_v5{ 557 .D6_v5{
552 .D6_v5_s1{ 558 .D6_v5_s1{
553 font-weight: bold; 559 font-weight: bold;
554 } 560 }
555 .D6_v5_s2{ 561 .D6_v5_s2{
556 font-size: 14px; 562 font-size: 14px;
557 } 563 }
558 } 564 }
559 } 565 }
560 .botton{ 566 .botton{
561 position: fixed; 567 position: fixed;
562 bottom: 0; 568 bottom: 0;
563 height: 74px; 569 height: 74px;
564 width: 100%; 570 width: 100%;
565 background: #FFFFFF; 571 background: #FFFFFF;
566 padding: 20px 20px 8px 20px; 572 padding: 20px 20px 8px 20px;
567 font-family: 'PingFangSC-Regular'; 573 font-family: 'PingFangSC-Regular';
568 box-sizing: border-box; 574 box-sizing: border-box;
569 display: flex; 575 display: flex;
570 justify-content: space-between; 576 justify-content: space-between;
571 align-content: center; 577 align-content: center;
572 .botton_1{ 578 .botton_1{
573 width: 20%; 579 width: 20%;
574 height: 100%; 580 height: 100%;
575 text-align: center; 581 text-align: center;
576 color: #989898; 582 color: #989898;
577 } 583 }
578 image{ 584 image{
579 width: 60%; 585 width: 60%;
580 height: 30px; 586 height: 30px;
581 } 587 }
582 .botton_image{ 588 .botton_image{
583 font-size: 12px; 589 font-size: 12px;
584 text-align: center; 590 text-align: center;
585 } 591 }
586 .botton_2{ 592 .botton_2{
587 width: 74%; 593 width: 74%;
588 height: 86%; 594 height: 86%;
589 display: grid; 595 display: grid;
590 grid-template-columns: 50% 50%; 596 grid-template-columns: 50% 50%;
591 } 597 }
592 .botton_input{ 598 .botton_input{
593 display: inline-flex; 599 display: inline-flex;
594 align-items: center; 600 align-items: center;
595 justify-content: space-around; 601 justify-content: space-around;
596 background: #FFF0EC; 602 background: #FFF0EC;
597 font-size: 16px; 603 font-size: 16px;
598 color: #FF6B4A; 604 color: #FF6B4A;
599 border-radius: 20px 0 0 20px; 605 border-radius: 20px 0 0 20px;
600 } 606 }
601 .botton_now{ 607 .botton_now{
602 display: inline-flex; 608 display: inline-flex;
603 align-items: center; 609 align-items: center;
604 justify-content: space-around; 610 justify-content: space-around;
605 background: #FF6B4A; 611 background: #FF6B4A;
606 font-size: 16px; 612 font-size: 16px;
607 color: #FFFFFF; 613 color: #FFFFFF;
608 border-radius:0 20px 20px 0; 614 border-radius:0 20px 20px 0;
609 } 615 }
610 } 616 }
611 </style> 617 </style>
src/pages/index/index.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> 7 <input class="searchIpt" placeholder="老花镜" confirm-type="search" />
8 </view> 8 </view>
9 9
10 <!-- 筛选栏--> 10 <!-- 筛选栏-->
11 <view class="screenBar"> 11 <view class="screenBar">
12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> 12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
13 <view 13 <view
14 class="screenItem" 14 class="screenItem"
15 v-bind:class="{ active: current === item.current }" 15 v-bind:class="{ active: current === item.current }"
16 v-if="item.current === 2" 16 v-if="item.current === 2"
17 @click="dropDown" 17 @click="dropDown"
18 > 18 >
19 {{ item.text }} 19 {{ item.text }}
20 <icon type="info" size="14"></icon> 20 <icon type="info" size="14"></icon>
21 </view> 21 </view>
22 <view 22 <view
23 class="screenItem" 23 class="screenItem"
24 v-bind:class="{ active: current === item.current }" 24 v-bind:class="{ active: current === item.current }"
25 v-if="item.current === 4" 25 v-if="item.current === 4"
26 @click="showDrawer('showRight')" 26 @click="showDrawer('showRight')"
27 > 27 >
28 {{ item.text }} 28 {{ item.text }}
29 <icon type="info" size="14"></icon> 29 <icon type="info" size="14"></icon>
30 </view> 30 </view>
31 <view v-if="item.current !== 2&&item.current!==4"> 31 <view v-if="item.current !== 2&&item.current!==4">
32 <view 32 <view
33 class="screenItem" 33 class="screenItem"
34 v-bind:class="{ active: current === item.current }" 34 v-bind:class="{ active: current === item.current }"
35 >{{ item.text }}</view> 35 >{{ item.text }}</view>
36 </view> 36 </view>
37 </view> 37 </view>
38 </view> 38 </view>
39 </view> 39 </view>
40 <Uni-drawer 40 <Uni-drawer
41 ref="showRight" 41 ref="showRight"
42 mask="true" 42 mask="true"
43 maskClick="true" 43 maskClick="true"
44 mode="right" 44 mode="right"
45 :width="320" 45 :width="320"
46 @change="change($event,'showRight')" 46 @change="change($event,'showRight')"
47 > 47 >
48 <view class="close"> 48 <view class="close">
49 <view @click="closeDrawer('showRight')"> 49 <view @click="closeDrawer('showRight')">
50 <text class="word-btn-white">关闭</text> 50 <text class="word-btn-white">关闭</text>
51 </view> 51 </view>
52 </view> 52 </view>
53 </Uni-drawer> 53 </Uni-drawer>
54 54
55 <!-- 筛选菜单--> 55 <!-- 筛选菜单-->
56 <view class="content-wrap"> 56 <view class="content-wrap">
57 <view> 57 <view>
58 <HMfilterDropdown 58 <HMfilterDropdown
59 :filterData="filterData" 59 :filterData="filterData"
60 :defaultSelected="filterDropdownValue" 60 :defaultSelected="filterDropdownValue"
61 :updateMenuName="true" 61 :updateMenuName="true"
62 @confirm="confirm" 62 @confirm="confirm"
63 data-format="Object" 63 data-format="Object"
64 ></HMfilterDropdown> 64 ></HMfilterDropdown>
65 <!-- 商品列表 --> 65 <!-- 商品列表 -->
66 <view class="goods-list"> 66 <view class="goods-list">
67 <view class="product-list"> 67 <view class="product-list">
68 <view class="product" v-for="(goods) in goodsList" :key="goods.id"> 68 <view class="product" v-for="(goods) in goodsList" :key="goods.id">
69 <Card :goods="goods"></Card> 69 <Card :goods="goods"></Card>
70 </view> 70 </view>
71 </view> 71 </view>
72 <view class="loading-text">{{loadingText}}</view> 72 <view class="loading-text">{{loadingText}}</view>
73 </view> 73 </view>
74 </view> 74 </view>
75 </view> 75 </view>
76 </view> 76 </view>
77 </template> 77 </template>
78 78
79 <script> 79 <script>
80 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; 80 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
81 import Card from "@/components/CommodityCard/CommodityCard.vue"; 81 import Card from "@/components/CommodityCard/CommodityCard.vue";
82 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; 82 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
83 import data from "@/common/data.js"; //筛选菜单数据 83 import data from "@/common/data.js"; //筛选菜单数据
84 import store from '@/store'; 84 import store from '@/store';
85 85
86 export default { 86 export default {
87 components: { 87 components: {
88 UniDrawer: UniDrawer, 88 UniDrawer: UniDrawer,
89 HMfilterDropdown: HMfilterDropdown, 89 HMfilterDropdown: HMfilterDropdown,
90 Card: Card 90 Card: Card
91 }, 91 },
92 data() { 92 data() {
93 return { 93 return {
94 screenItems: [ 94 screenItems: [
95 { current: 0, text: "全部", hasIcon: false }, 95 { current: 0, text: "全部", hasIcon: false },
96 { current: 1, text: "销量", hasIcon: false }, 96 { current: 1, text: "销量", hasIcon: false },
97 { current: 2, text: "价格", hasIcon: true }, 97 { current: 2, text: "价格", hasIcon: true },
98 { current: 3, text: "折扣", hasIcon: false }, 98 { current: 3, text: "折扣", hasIcon: false },
99 { current: 4, text: "筛选", hasIcon: true } 99 { current: 4, text: "筛选", hasIcon: true }
100 ], 100 ],
101 current: 0, 101 current: 0,
102 showRight: false, 102 showRight: false,
103 indexArr: "", 103 indexArr: "",
104 valueArr: "", 104 valueArr: "",
105 loadingText: "~~到底了~~", 105 loadingText: "~~到底了~~",
106 filterDropdownValue: [], 106 filterDropdownValue: [],
107 filterData: [], 107 filterData: [],
108 goodsList:[ 108 // goodsList:[
109 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, 109 // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
110 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, 110 // { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
111 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, 111 // { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
112 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, 112 // { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
113 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, 113 // { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
114 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, 114 // { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
115 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, 115 // { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
116 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, 116 // { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
117 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, 117 // { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
118 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 } 118 // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
119 ], 119 // ],
120 }; 120 };
121 }, 121 },
122 computed: { 122 computed: {
123 // goodsList() { 123 goodsList() {
124 // // 也可以从 getters 获取 124 // 也可以从 getters 获取
125 // console.log('list', this.$store.state.test.list); 125 return this.$store.state.test.list;
126 // return this.$store.state.test.list; 126 },
127 // }, 127 categoryList(){
128 // categoryList(){ 128 // console.log(this.$store.state.categoryOrder.categoryList);
129 // console.log(this.$store.state.categoryOrder.categoryList); 129 const categoryList = this.$store.state.categoryOrder.categoryList
130 // this.filterData = this.$store.state.categoryOrder.categoryList 130 let newData = [
131 // } 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
180 // newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
181 // newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
182 // newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
183 // newData[4].submenu[0] = categoryList[3]
184 this.filterData = newData;
185 // this.filterData = categoryList;
186 }
132 187
133 }, 188 },
134 filters: { 189 filters: {
135 outData(value) { 190 outData(value) {
136 return JSON.stringify(value); 191 return JSON.stringify(value);
137 } 192 }
138 }, 193 },
139 onLoad: function() { 194 onLoad: function() {
140 store.dispatch('test/fetch'); 195 store.dispatch('test/fetch');
141 store.dispatch('categoryOrder/fetch') 196 store.dispatch('categoryOrder/fetch')
142 197
143 //定时器模拟ajax异步请求数据 198 // 登陆
144 setTimeout(()=>{ 199 // store.dispatch('user/login')
145 //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null 200
146 // this.filterDropdownValue = [
147 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
148 // [null,null], //第1个菜单选中 都不选中
149 // [1], //第2个菜单选中 一级菜单的第1项
150 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
151 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
152 // ];
153 // this.filterData = data;
154 },100);
155 }, 201 },
156 methods: { 202 methods: {
157 showDrawer(e) { 203 showDrawer(e) {
158 this.$refs[e].open(); 204 this.$refs[e].open();
159 }, 205 },
160 closeDrawer(e) { 206 closeDrawer(e) {
161 this.$refs[e].close(); 207 this.$refs[e].close();
162 }, 208 },
163 change(e, type) { 209 change(e, type) {
164 this[type] = e; 210 this[type] = e;
165 }, 211 },
166 onClickItem(e) { 212 onClickItem(e) {
167 if (this.current !== e) { 213 if (this.current !== e) {
168 this.current = e; 214 this.current = e;
169 } 215 }
170 }, 216 },
171 dropDown() { 217 dropDown() {
172 console.log("下拉"); 218 console.log("下拉");
173 }, 219 },
174 //接收菜单结果 220 //接收菜单结果
175 confirm(e) { 221 confirm(e) {
176 this.indexArr = e.index; 222 this.indexArr = e.index;
177 this.valueArr = e.value; 223 this.valueArr = e.value;
178 return; 224 return;
179 console.log("修改菜单"); 225 console.log("修改菜单");
180 this.filterData[4].submenu[1] = { 226 this.filterData[4].submenu[1] = {
181 name: "项目2", 227 name: "项目2",
182 submenu: [] 228 submenu: []
183 }; 229 };
184 } 230 }
185 }, 231 },
186 232
187 }; 233 };
188 </script> 234 </script>
189 235
190 <style lang="scss"> 236 <style lang="scss">
191 .content { 237 .content {
192 display: flex; 238 display: flex;
193 flex-direction: column; 239 flex-direction: column;
194 align-items: center; 240 align-items: center;
195 justify-content: center; 241 justify-content: center;
196 background-color: #f7f6f6; 242 background-color: #f7f6f6;
197 } 243 }
198 .header { 244 .header {
199 display: flex; 245 display: flex;
200 flex-direction: column; 246 flex-direction: column;
201 align-items: center; 247 align-items: center;
202 justify-content: center; 248 justify-content: center;
203 background-color: #f7f6f6; 249 background-color: #f7f6f6;
204 height: 178rpx; 250 height: 178rpx;
205 width: 100%; 251 width: 100%;
206 z-index: 999; 252 z-index: 999;
207 position: fixed; 253 position: fixed;
208 top: 0; 254 top: 0;
209 left: 0; 255 left: 0;
210 } 256 }
211 .searchBar { 257 .searchBar {
212 width: 670rpx; 258 width: 670rpx;
213 display: flex; 259 display: flex;
214 justify-content: center; 260 justify-content: center;
215 align-items: center; 261 align-items: center;
216 box-sizing: border-box; 262 box-sizing: border-box;
217 padding: 0rpx 16rpx; 263 padding: 0rpx 16rpx;
218 border: 1px solid #ff6b4a; 264 border: 1px solid #ff6b4a;
219 border-radius: 8rpx; 265 border-radius: 8rpx;
220 background-color: #ffffff; 266 background-color: #ffffff;
221 } 267 }
222 268
223 .searchIpt { 269 .searchIpt {
224 height: 68rpx; 270 height: 68rpx;
225 width: 670rpx; 271 width: 670rpx;
226 padding: 16rpx; 272 padding: 16rpx;
227 font-size: 28rpx; 273 font-size: 28rpx;
228 box-sizing: border-box; 274 box-sizing: border-box;
229 } 275 }
230 .screenBar { 276 .screenBar {
231 width: 670rpx; 277 width: 670rpx;
232 height: 110rpx; 278 height: 110rpx;
233 display: flex; 279 display: flex;
234 flex-direction: row; 280 flex-direction: row;
235 justify-content: space-between; 281 justify-content: space-between;
236 align-items: center; 282 align-items: center;
237 color: #333333; 283 color: #333333;
238 font-size: 32rpx; 284 font-size: 32rpx;
239 } 285 }
240 .active { 286 .active {
241 color: #ff6b4a; 287 color: #ff6b4a;
242 } 288 }
243 .screenItem { 289 .screenItem {
244 display: flex; 290 display: flex;
245 justify-content: center; 291 justify-content: center;
246 align-items: center; 292 align-items: center;
247 } 293 }
248 .content-wrap { 294 .content-wrap {
249 width: 100%; 295 width: 100%;
250 background-color: #ffffff; 296 background-color: #ffffff;
251 } 297 }
252 298
253 .HMfilterDropdown { 299 .HMfilterDropdown {
254 top: 178rpx !important; 300 top: 178rpx !important;
255 } 301 }
256 302
257 .goods-list { 303 .goods-list {
258 padding-top: 286rpx; 304 padding-top: 286rpx;
259 .loading-text { 305 .loading-text {
260 width: 100%; 306 width: 100%;
261 display: flex; 307 display: flex;
262 justify-content: center; 308 justify-content: center;
263 align-items: center; 309 align-items: center;
264 height: 30px; 310 height: 30px;
265 color: #979797; 311 color: #979797;
266 font-size: 12px; 312 font-size: 12px;
267 } 313 }
268 .product-list { 314 .product-list {
269 width: 92%; 315 width: 92%;
270 padding: 0 4% 3vw 4%; 316 padding: 0 4% 3vw 4%;
271 display: flex; 317 display: flex;
272 justify-content: space-between; 318 justify-content: space-between;
273 flex-wrap: wrap; 319 flex-wrap: wrap;
274 .product { 320 .product {
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 2
3 <view class="content"> 3 <view class="content">
4 <view class="order-hr"></view> 4 <view class="order-hr"></view>
5 <view class="order-time"> 5 <view class="order-time">
6 <text>请在</text> 6 <text>请在</text>
7 <!-- <text class="p2"></text> --> 7 <!-- <text class="p2"></text> -->
8 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" 8 <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> 9 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
10 <text>内完成付款</text> 10 <text>内完成付款</text>
11 </view> 11 </view>
12 <view class="order"> 12 <view class="order">
13 <view class="order-user"> 13 <view class="order-user">
14 <view class="order-user-head"> 14 <view class="order-user-head">
15 <text class="p1">钱大大</text> 15 <text class="p1">钱大大</text>
16 <text class="p2">18823749843</text> 16 <text class="p2">18823749843</text>
17 </view> 17 </view>
18 <view class="order-user-body"> 18 <view class="order-user-body">
19 <image src="../../static/myorder-paying-location.png"></image> 19 <image src="../../static/myorder-paying-location.png"></image>
20 <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> 20 <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="order-info"> 23 <view class="order-info">
24 <view class="order-info-head"> 24 <view class="order-info-head">
25 <image src="../../static/myorder-paying-pic.png"></image> 25 <image src="../../static/myorder-paying-pic.png"></image>
26 <view class="order-info-head-r"> 26 <view class="order-info-head-r">
27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> 27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
28 <view class="p2" style="margin: 0;"> 28 <view class="p2" style="margin: 0;">
29 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 29 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
30 <!-- <view class="arrow"></view> --> 30 <!-- <view class="arrow"></view> -->
31 </view> 31 </view>
32 <text class="p3"><span>￥180</span><span class="p4">X1</span></text> 32 <text class="p3"><span>￥180</span><span class="p4">X1</span></text>
33 </view> 33 </view>
34 </view> 34 </view>
35 <!-- <view class="order-info-goodsnum"> 35 <!-- <view class="order-info-goodsnum">
36 <text>X1</text> 36 <text>X1</text>
37 </view> --> 37 </view> -->
38 <text class="order-info-freight"> 38 <text class="order-info-freight">
39 <text class="p1">运费</text> 39 <text class="p1">运费</text>
40 <text class="p2">0.00</text> 40 <text class="p2">0.00</text>
41 </text> 41 </text>
42 <text class="order-info-discount"> 42 <text class="order-info-discount">
43 <text class="p1">优惠</text> 43 <text class="p1">优惠</text>
44 <text class="p2">-￥70.00</text> 44 <text class="p2">-￥70.00</text>
45 </text> 45 </text>
46 <text class="order-info-price"> 46 <text class="order-info-price">
47 <text class="p1">实付</text> 47 <text class="p1">实付</text>
48 <text class="p2">￥110</text> 48 <text class="p2">￥110</text>
49 </text> 49 </text>
50 <text class="order-info-num"> 50 <text class="order-info-num">
51 <text>订单号：203486795859605849</text> 51 <text>订单号：203486795859605849</text>
52 </text> 52 </text>
53 <text class="order-info-time"> 53 <text class="order-info-time">
54 <text>下单时间：2020-10-22 14:32:42</text> 54 <text>下单时间：2020-10-22 14:32:42</text>
55 </text> 55 </text>
56 <view class="order-info-hr"></view> 56 <view class="order-info-hr"></view>
57 <view class="order-info-contact"> 57 <view class="order-info-contact">
58 <image src="../../static/myorder-paying-contact.png"></image> 58 <image src="../../static/myorder-paying-contact.png"></image>
59 <text>联系客服</text> 59 <text>联系客服</text>
60 </view> 60 </view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view class="order-confim"> 63 <view class="order-confim">
64 <button class="b1">取消订单</button> 64 <button class="b1">取消订单</button>
65 <button class="b2">立即支付</button> 65 <button class="b2">立即支付</button>
66 </view> 66 </view>
67 </view> 67 </view>
68 </template> 68 </template>
69 69
70 <script> 70 <script>
71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
72 export default { 72 export default {
73 components: { 73 components: {
74 UniCountdown 74 UniCountdown
75 }, 75 },
76 data() { 76 data() {
77 return { 77 return {
78 scrollHeight: false, 78 scrollHeight: false,
79 } 79 }
80 }, 80 },
81 methods: { 81 methods: {
82 82
83 } 83 }
84 } 84 }
85 </script> 85 </script>
86 86
87 <style lang="scss" scoped> 87 <style lang="scss" scoped>
88 .content{ 88 .content{
89 display: flex; 89 display: flex;
90 flex-direction: column; 90 flex-direction: column;
91 justify-content: center; 91 justify-content: center;
92 align-items: center; 92 align-items: center;
93 background-color: #f2f2f2; 93 background-color: #f2f2f2;
94 } 94 }
95 95
96 96
97 .order { 97 .order {
98 min-height: 1196rpx; 98 min-height: 1196rpx;
99 margin-bottom: 112rpx; 99 margin-bottom: 112rpx;
100 background: #F2F2F2; 100 background: #F2F2F2;
101 } 101 }
102 .order-hr { 102 .order-hr {
103 width: 100%; 103 width: 100%;
104 height: 1px; 104 height: 1px;
105 background-color: #E9E9E9; 105 background-color: #E9E9E9;
106 } 106 }
107 .order-time { 107 .order-time {
108 width: 100%; 108 width: 100%;
109 height: 140rpx; 109 height: 140rpx;
110 background-color: #fff; 110 background-color: #fff;
111 display: flex; 111 display: flex;
112 justify-content: center; 112 justify-content: center;
113 text { 113 text {
114 // font-family: PingFangSC-Regular; 114 // font-family: PingFangSC-Regular;
115 margin-top: 48rpx; 115 margin-top: 48rpx;
116 font-size: 14px; 116 font-size: 14px;
117 color: #333333; 117 color: #333333;
118 letter-spacing: -0.26px; 118 letter-spacing: -0.26px;
119 } 119 }
120 .p2 { 120 .p2 {
121 // font-family: DINAlternate-Bold; 121 // font-family: DINAlternate-Bold;
122 margin: 42rpx 20rpx 0 20rpx; 122 margin: 42rpx 20rpx 0 20rpx;
123 font-size: 18px; 123 font-size: 18px;
124 color: #EC5D3B; 124 color: #EC5D3B;
125 letter-spacing: -0.34px; 125 letter-spacing: -0.34px;
126 } 126 }
127 } 127 }
128 128
129 .order-user { 129 .order-user {
130 width: 670rpx; 130 width: 670rpx;
131 height: 228rpx; 131 height: 228rpx;
132 background: #FFFFFF; 132 background: #FFFFFF;
133 border-radius: 14rpx; 133 border-radius: 14rpx;
134 margin: 0 auto; 134 margin: 0 auto;
135 margin-top: 20rpx; 135 margin-top: 20rpx;
136 margin-bottom: 20rpx; 136 margin-bottom: 20rpx;
137 .order-user-head { 137 .order-user-head {
138 display: flex; 138 display: flex;
139 height: 108rpx; 139 height: 108rpx;
140 width: 100%; 140 width: 100%;
141 align-items: center; 141 align-items: center;
142 margin-left: 126rpx; 142 margin-left: 126rpx;
143 .p1 { 143 .p1 {
144 // font-family: PingFangSC-Regular; 144 // font-family: PingFangSC-Regular;
145 font-size: 14px; 145 font-size: 14px;
146 color: #333333; 146 color: #333333;
147 letter-spacing: -0.26px; 147 letter-spacing: -0.26px;
148 margin-right: 20rpx; 148 margin-right: 20rpx;
149 } 149 }
150 .p2 { 150 .p2 {
151 // font-family: PingFangSC-Regular; 151 // font-family: PingFangSC-Regular;
152 font-size: 14px; 152 font-size: 14px;
153 color: #999999; 153 color: #999999;
154 letter-spacing: -0.26px; 154 letter-spacing: -0.26px;
155 } 155 }
156 } 156 }
157 .order-user-body { 157 .order-user-body {
158 display: flex; 158 display: flex;
159 width: 100%; 159 width: 100%;
160 image{ 160 image{
161 width: 24px; 161 width: 24px;
162 height: 26px; 162 height: 26px;
163 margin: 12rpx 32rpx 0 40rpx; 163 margin: 12rpx 32rpx 0 40rpx;
164 } 164 }
165 .p3 { 165 .p3 {
166 // font-family: PingFangSC-Semibold; 166 // font-family: PingFangSC-Semibold;
167 font-size: 14px; 167 font-size: 14px;
168 color: #333333; 168 color: #333333;
169 letter-spacing: -0.26px; 169 letter-spacing: -0.26px;
170 } 170 }
171 } 171 }
172 } 172 }
173 173
174 .order-info { 174 .order-info {
175 width: 670rpx; 175 width: 670rpx;
176 background-color: #fff; 176 background-color: #fff;
177 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); 177 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
178 border-radius: 16rpx; 178 border-radius: 16rpx;
179 margin: 0 auto; 179 margin: 0 auto;
180 view{ 180 view{
181 margin-left: 40rpx; 181 margin-left: 40rpx;
182 } 182 }
183 text{ 183 text{
184 font-size: 14px; 184 font-size: 14px;
185 } 185 }
186 .order-info-head { 186 .order-info-head {
187 display: flex; 187 display: flex;
188 padding-top: 40rpx; 188 padding-top: 40rpx;
189 image{ 189 image{
190 height: 188rpx; 190 height: 188rpx;
191 width: 188rpx; 191 width: 188rpx;
192 } 192 }
193 .order-info-head-r{ 193 .order-info-head-r{
194 margin: 0; 194 margin: 0;
195 width: 368rpx; 195 width: 368rpx;
196 margin-left: 24rpx; 196 margin-left: 24rpx;
197 // margin-top: 40rpx; 197 // margin-top: 40rpx;
198 text{ 198 text{
199 display: block; 199 display: block;
200 } 200 }
201 // .arrow{ 201 // .arrow{
202 // width: 0; 202 // width: 0;
203 // height: 0; 203 // height: 0;
204 // border-left: 5px transparent; 204 // border-left: 5px transparent;
205 // border-right: 5px transparent; 205 // border-right: 5px transparent;
206 // border-top: 5px #979797; 206 // border-top: 5px #979797;
207 // border-bottom: 0 transparent; 207 // border-bottom: 0 transparent;
208 // border-style: solid; 208 // border-style: solid;
209 // position: relative; 209 // position: relative;
210 // // transform: scaleY(-1); 210 // // transform: scaleY(-1);
211 // } 211 // }
212 // .arrow::after{ 212 // .arrow::after{
213 // content: ''; 213 // content: '';
214 // position: absolute; 214 // position: absolute;
215 // top: -6.5px; 215 // top: -6.5px;
216 // left: -5px; 216 // left: -5px;
217 // border-left: 5px transparent; 217 // border-left: 5px transparent;
218 // border-right: 5px transparent; 218 // border-right: 5px transparent;
219 // border-top: 5px #FFFFFF; 219 // border-top: 5px #FFFFFF;
220 // border-bottom: 0 transparent; 220 // border-bottom: 0 transparent;
221 // border-style: solid; 221 // border-style: solid;
222 // } 222 // }
223 .p1 { 223 .p1 {
224 min-height: 40px; 224 min-height: 40px;
225 // font-family: PingFangSC-Regular; 225 // font-family: PingFangSC-Regular;
226 font-size: 14px; 226 font-size: 14px;
227 color: #333333; 227 color: #333333;
228 letter-spacing: -0.26px; 228 letter-spacing: -0.26px;
229 line-height: 18px; 229 line-height: 18px;
230 // line-height: 20px; 230 // line-height: 20px;
231 } 231 }
232 .p2 { 232 .p2 {
233 height: 34px; 233 height: 34px;
234 padding: 1px 0 3px 0; 234 padding: 1px 0 3px 0;
235 // font-family: PingFangSC-Regular; 235 // font-family: PingFangSC-Regular;
236 font-size: 12px; 236 font-size: 12px;
237 color: #999999; 237 color: #999999;
238 letter-spacing: -0.23px; 238 letter-spacing: -0.23px;
239 } 239 }
240 .p3 { 240 .p3 {
241 height: 20px; 241 height: 20px;
242 // font-family: PingFangSC-Regular; 242 // font-family: PingFangSC-Regular;
243 font-size: 14px; 243 font-size: 14px;
244 color: #FF6B4A; 244 color: #FF6B4A;
245 letter-spacing: -0.26px; 245 letter-spacing: -0.26px;
246 } 246 }
247 .p4{ 247 .p4{
248 font-size: 12px; 248 font-size: 12px;
249 color: #999999; 249 color: #999999;
250 letter-spacing: -0.23px; 250 letter-spacing: -0.23px;
251 margin-left: 10px; 251 margin-left: 10px;
252 } 252 }
253 } 253 }
254 254
255 } 255 }
256 // .order-info-goodsnum { 256 // .order-info-goodsnum {
257 // display: flex; 257 // display: flex;
258 // align-items: center; 258 // align-items: center;
259 // justify-content: flex-end; 259 // justify-content: flex-end;
260 // text { 260 // text {
261 // margin-right: 44rpx; 261 // margin-right: 44rpx;
262 // // ont-family: PingFangSC-Regular; 262 // // ont-family: PingFangSC-Regular;
263 // font-size: 12px; 263 // font-size: 12px;
264 // color: #999999; 264 // color: #999999;
265 // letter-spacing: -0.23px; 265 // letter-spacing: -0.23px;
266 // } 266 // }
267 // } 267 // }
268 .order-info-freight { 268 .order-info-freight {
269 display: block; 269 display: block;
270 margin-left: 40rpx; 270 margin-left: 40rpx;
271 margin-top: 22rpx; 271 margin-top: 22rpx;
272 .p1{ 272 .p1{
273 // font-family: PingFangSC-Regular; 273 // font-family: PingFangSC-Regular;
274 font-size: 14px; 274 font-size: 14px;
275 color: #333333; 275 color: #333333;
276 letter-spacing: -0.26px; 276 letter-spacing: -0.26px;
277 line-height: 18px; 277 line-height: 18px;
278 margin-right: 24px; 278 margin-right: 24px;
279 } 279 }
280 .p2 { 280 .p2 {
281 // font-family: PingFangSC-Regular; 281 // font-family: PingFangSC-Regular;
282 font-size: 14px; 282 font-size: 14px;
283 color: #FF6B4A; 283 color: #FF6B4A;
284 letter-spacing: -0.26px; 284 letter-spacing: -0.26px;
285 } 285 }
286 } 286 }
287 .order-info-discount { 287 .order-info-discount {
288 display: block; 288 display: block;
289 margin-left: 40rpx; 289 margin-left: 40rpx;
290 margin-top: 24rpx; 290 margin-top: 24rpx;
291 .p1 { 291 .p1 {
292 // font-family: PingFangSC-Regular; 292 // font-family: PingFangSC-Regular;
293 font-size: 14px; 293 font-size: 14px;
294 color: #333333; 294 color: #333333;
295 letter-spacing: -0.26px; 295 letter-spacing: -0.26px;
296 line-height: 18px; 296 line-height: 18px;
297 margin-right: 24px; 297 margin-right: 24px;
298 } 298 }
299 .p2 { 299 .p2 {
300 // font-family: PingFangSC-Regular; 300 // font-family: PingFangSC-Regular;
301 font-size: 14px; 301 font-size: 14px;
302 color: #FF6B4A; 302 color: #FF6B4A;
303 letter-spacing: -0.26px; 303 letter-spacing: -0.26px;
304 } 304 }
305 } 305 }
306 .order-info-price { 306 .order-info-price {
307 display: block; 307 display: block;
308 margin-left: 40rpx; 308 margin-left: 40rpx;
309 margin-top: 24rpx; 309 margin-top: 24rpx;
310 .p1 { 310 .p1 {
311 // font-family: PingFangSC-Semibold; 311 // font-family: PingFangSC-Semibold;
312 font-size: 14px; 312 font-size: 14px;
313 color: #333333; 313 color: #333333;
314 letter-spacing: -0.26px; 314 letter-spacing: -0.26px;
315 line-height: 18px; 315 line-height: 18px;
316 margin-right: 24px; 316 margin-right: 24px;
317 } 317 }
318 .p2 { 318 .p2 {
319 // font-family: PingFangSC-Semibold; 319 // font-family: PingFangSC-Semibold;
320 font-size: 14px; 320 font-size: 14px;
321 color: #FF6B4A; 321 color: #FF6B4A;
322 letter-spacing: -0.26px; 322 letter-spacing: -0.26px;
323 } 323 }
324 } 324 }
325 .order-info-num{ 325 .order-info-num{
326 display: block; 326 display: block;
327 margin-left: 40rpx; 327 margin-left: 40rpx;
328 margin-top: 44rpx; 328 margin-top: 44rpx;
329 text{ 329 text{
330 // font-family: PingFangSC-Regular; 330 // font-family: PingFangSC-Regular;
331 font-size: 12px; 331 font-size: 12px;
332 color: #999999; 332 color: #999999;
333 letter-spacing: -0.23px; 333 letter-spacing: -0.23px;
334 } 334 }
335 } 335 }
336 .order-info-time { 336 .order-info-time {
337 display: block; 337 display: block;
338 margin: 8rpx 0 48rpx 40rpx; 338 margin: 8rpx 0 48rpx 40rpx;
339 text{ 339 text{
340 // font-family: PingFangSC-Regular; 340 // font-family: PingFangSC-Regular;
341 font-size: 12px; 341 font-size: 12px;
342 color: #999999; 342 color: #999999;
343 letter-spacing: -0.23px; 343 letter-spacing: -0.23px;
344 } 344 }
345 } 345 }
346 .order-info-hr{ 346 .order-info-hr{
347 width: 520rpx; 347 width: 520rpx;
348 height: 1px; 348 height: 1px;
349 background-color: #E9E9E9; 349 background-color: #E9E9E9;
350 margin-bottom: 20rpx; 350 margin-bottom: 20rpx;
351 } 351 }
352 .order-info-contact { 352 .order-info-contact {
353 display: flex; 353 display: flex;
354 padding-bottom: 28rpx; 354 padding-bottom: 28rpx;
355 image{ 355 image{
356 width: 19px; 356 width: 19px;
357 height: 16px; 357 height: 16px;
358 } 358 }
359 text { 359 text {
360 // font-family: PingFangSC-Regular; 360 // font-family: PingFangSC-Regular;
361 margin-left: 20rpx; 361 margin-left: 20rpx;
362 font-size: 14px; 362 font-size: 14px;
363 color: #333333; 363 color: #333333;
364 letter-spacing: -0.26px; 364 letter-spacing: -0.26px;
365 line-height: 18px; 365 line-height: 18px;
366 } 366 }
367 } 367 }
368 } 368 }
369 369
370 .order-confim { 370 .order-confim {
371 display: flex; 371 display: flex;
372 align-items: center; 372 align-items: center;
373 z-index: 999; 373 z-index: 999;
374 width: 100%; 374 width: 100%;
375 height: 112rpx; 375 height: 112rpx;
376 position: fixed; 376 position: fixed;
377 bottom: 0; 377 bottom: 0;
378 background: #FFFFFF; 378 background: #FFFFFF;
379 button { 379 button {
380 width: 204rpx; 380 width: 204rpx;
381 height: 80rpx; 381 height: 80rpx;
382 border: 1px solid #FF6B4A; 382 border: 1px solid #FF6B4A;
383 border-radius: 40rpx; 383 border-radius: 40rpx;
384 font-size: 32rpx; 384 font-size: 32rpx;
385 letter-spacing: -0.3px; 385 letter-spacing: -0.3px;
386 margin-right: 0; 386 margin-right: 0;
387 } 387 }
388 .b1 { 388 .b1 {
389 // font-family: PingFangSC-Regular; 389 // font-family: PingFangSC-Regular;
390 color: #FF6B4A; 390 color: #FF6B4A;
391 391
392 } 392 }
393 .b2 { 393 .b2 {
394 // font-family: PingFangSC-Regular; 394 // font-family: PingFangSC-Regular;
395 background-color: #FF6B4A; 395 background-color: #FF6B4A;
396 color: #FFFFFF; 396 color: #FFFFFF;
397 margin: 0 26rpx 0 20rpx; 397 margin: 0 26rpx 0 20rpx;
398 } 398 }
399 } 399 }
400 400
401 </style> 401 </style>
402 402
src/pages/user/user.vue
Diff comments   View file @fcb436f
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="content"> 3 <view v-if="isAuth" class="content">
4 <view class="userInfo"> 4 <view class="userInfo">
5 <view class="info"> 5 <view class="info">
6 <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> 6 <image :src="headerphoto" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{userName}}</text> 8 <text class="userName">{{nickName}}</text>
9 <text class="nickName">用户名：骆驼不死的祥子</text>
10 </view> 9 </view>
11 </view> 10 </view>
12 <view class="service"> 11 <view class="service">
13 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
14 </view> 13 </view>
15 </view> 14 </view>
16 <view class="myOrder"> 15 <view class="myOrder">
17 <view class="orderHeader"> 16 <view class="orderHeader">
18 <text>全部订单</text> 17 <text>全部订单</text>
19 <view class="btn" @click="toMyOrder"> 18 <view class="btn" @click="toMyOrder">
20 全部 19 全部
21 <image src="../../static/right.png" mode="aspectFill"></image> 20 <image src="../../static/right.png" mode="aspectFill"></image>
22 </view> 21 </view>
23 </view> 22 </view>
24 <view class="orderBody"> 23 <view class="orderBody">
25 <view class="item waitPay" @click="toMyOrderPaying"> 24 <view class="item waitPay" @click="toMyOrderPaying">
26 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 25 <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
27 <text>待付款</text> 26 <text>待付款</text>
28 </view> 27 </view>
29 <view class="item waitDeliver" @click="toPredelivery" > 28 <view class="item waitDeliver" @click="toPredelivery" >
30 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 29 <image src="../../static/waitPay.png" mode="aspectFill"></image>
31 <text>待发货</text> 30 <text>待发货</text>
32 </view> 31 </view>
33 <view class="item waitReceive" @click="torefunProgress"> 32 <view class="item waitReceive" @click="torefunProgress">
34 <image src="../../static/waitReceive.png" mode="aspectFill"></image> 33 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
35 <text>待收货</text> 34 <text>待收货</text>
36 </view> 35 </view>
37 <view class="item service" @click="torefundment"> 36 <view class="item service" @click="torefundment">
38 <image src="../../static/service.png" mode="aspectFill"></image> 37 <image src="../../static/service.png" mode="aspectFill"></image>
39 <text>退换/售后</text> 38 <text>退换/售后</text>
40 </view> 39 </view>
41 </view> 40 </view>
42 </view> 41 </view>
43 <view class="recommend"> 42 <view class="recommend">
44 <view class="title"> 43 <view class="title">
45 <view class="line"></view> 44 <view class="line"></view>
46 <view class="text">精选推荐</view> 45 <view class="text">精选推荐</view>
47 <view class="line"></view> 46 <view class="line"></view>
48 </view> 47 </view>
49 <!-- 商品列表 --> 48 <!-- 商品列表 -->
50 <view class="goods-list"> 49 <view class="goods-list">
51 <view class="product-list"> 50 <view class="product-list">
52 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> 51 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
53 <Card :goods = "goods"></Card> 52 <Card :goods = "goods"></Card>
54 </view> 53 </view>
55 </view> 54 </view>
56 <view class="loading-text">{{loadingText}}</view> 55 <view class="loading-text">{{loadingText}}</view>
57 </view> 56 </view>
58 </view> 57 </view>
59 </view> 58 </view>
60 59 <view v-else class="auth">
60 <view class="icon"></view>
61 <view class="divider"></view>
62 <view class="title">申请获取以下权限</view>
63 <view class="text">获得您的公开信息(昵称、头像等)</view>
64 <button
65 type="primary"
66 open-type="getUserInfo"
67 @getuserinfo="onGotUserInfo"
68 >授权登陆</button>
69 </view>
61 </view> 70 </view>
62 </template> 71 </template>
63 72
64 <script> 73 <script>
65 import Card from "@/components/CommodityCard/CommodityCard.vue" 74 import Card from "@/components/CommodityCard/CommodityCard.vue";
75 import store from '@/store';
76
66 export default { 77 export default {
67 components: { 78 components: {
68 'Card':Card 79 'Card':Card
69 }, 80 },
70 data() { 81 data() {
71 return { 82 return {
72
73 //商品数据 83 //商品数据
74 goodsList:[ 84 goodsList:[
75 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 85 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
76 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 86 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
77 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 87 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
78 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 88 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
79 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 89 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
80 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 90 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
81 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 91 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
82 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 92 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
83 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 93 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
84 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 94 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
85 ], 95 ],
86 headerphoto:'', 96 isAuth: true, // 是否显示授权页面
87 userName:'Adam'
88 } 97 }
89 }, 98 },
90 onLoad() { 99 onLoad() {
91 100 // 判断是否授权
101 uni.getSetting({
102 success(res) {
103 console.log('authSetting',res.authSetting)
104 if(res.authSetting['scope.userInfo'] === true) {
105 this.isAuth = true
106 } else {
107 this.isAuth = false
108 }
109 }
110 })
111 },
112 computed: {
113 nickName() {
114 console.log('nickName', this.$store.state.user.userInfo)
115 return this.$store.state.user.userInfo.nickName;
116 },
117 headerphoto() {
118 return this.$store.state.user.userInfo.headerphoto;
119 },
120 userRecommandList() {
121 console.log('recommandList', this.$store.state.userRecommand.recommandList);
122 return this.$store.state.userRecommand.recommandList;
123 }
124 },
125 onLoad: function() {
126 store.dispatch('userRecommand/getRecommandList', {
127 uid: 2,
128 });
92 }, 129 },
93 methods: { 130 methods: {
131 // 授权
132 onGotUserInfo(e) {
133 console.log('anthInfo', e);
134 if(e.detail.errMsg == 'getUserInfo:ok') {
135 const { fromInfo } = this.$store.state.user;
136 console.log('=====la', fromInfo)
137 // 用户授权成功
138 store.dispatch('user/getUserInfo', fromInfo);
139 this.isAuth = true
140 }
141 },
94 toMyOrder(){ 142 toMyOrder(){
95 uni.navigateTo({ 143 uni.navigateTo({
96 url: '../myOrder/myOrder?current=0', 144 url: '../myOrder/myOrder?current=0',
97 success: res => {}, 145 success: res => {},
98 fail: () => {}, 146 fail: () => {},
99 complete: () => {} 147 complete: () => {}
100 }); 148 });
101 }, 149 },
102 toPredelivery(){ 150 toPredelivery(){
103 uni.navigateTo({ 151 uni.navigateTo({
104 url: '../myOrder/myOrder?current=2', 152 url: '../myOrder/myOrder?current=2',
105 success: res => {}, 153 success: res => {},
106 fail: () => {}, 154 fail: () => {},
107 complete: () => {} 155 complete: () => {}
108 }); 156 });
109 }, 157 },
110 toMyOrderPaying(){ 158 toMyOrderPaying(){
111 uni.navigateTo({ 159 uni.navigateTo({
112 url: '../myOrder/myOrder?current=1', 160 url: '../myOrder/myOrder?current=1',
113 success: res => {}, 161 success: res => {},
114 fail: () => {}, 162 fail: () => {},
115 complete: () => {} 163 complete: () => {}
116 }); 164 });
117 }, 165 },
118 torefundment(){ 166 torefundment(){
119 uni.navigateTo({ 167 uni.navigateTo({
120 url:'../refundment/refundment', 168 url:'../refundment/refundment',
121 }) 169 })
122 }, 170 },
123 torefunProgress(){ 171 torefunProgress(){
124 uni.navigateTo({ 172 uni.navigateTo({
125 url:'../refundProgress/refundProgress' 173 url:'../refundProgress/refundProgress'
126 }) 174 })
127 } 175 }
128 } 176 }
129 } 177 }
130 </script> 178 </script>
131 179
132 <style lang="scss"> 180 <style lang="scss">
133 .warp{ 181 .warp{
134 font-size: 24rpx; 182 font-size: 24rpx;
135 background-color: #f2f2f2; 183 background-color: #f2f2f2;
136 height: 100vh; 184 height: 100vh;
137 } 185 }
138 .content { 186 .content {
139 display: flex; 187 display: flex;
140 flex-direction: column; 188 flex-direction: column;
141 align-items: center; 189 align-items: center;
142 justify-content: center; 190 justify-content: center;
143 background-color: #F2F2F2; 191 background-color: #F2F2F2;
144 } 192 }
145 .userInfo{ 193 .userInfo{
146 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 194 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
147 width: 100%; 195 width: 100%;
148 height: 240rpx; 196 height: 240rpx;
149 color: #FFFFFF; 197 color: #FFFFFF;
150 padding: 60rpx 82rpx 80rpx 44rpx; 198 padding: 60rpx 82rpx 80rpx 44rpx;
151 box-sizing: border-box; 199 box-sizing: border-box;
152 display: flex; 200 display: flex;
153 flex-direction: row; 201 flex-direction: row;
154 justify-content: space-between; 202 justify-content: space-between;
155 align-items: flex-start; 203 align-items: flex-start;
156 .info{ 204 .info{
157 display: flex; 205 display: flex;
158 flex-direction: row; 206 flex-direction: row;
159 justify-content: space-between; 207 justify-content: space-between;
160 align-items: center; 208 align-items: center;
161 image{ 209 image{
162 border-radius: 50rpx; 210 border-radius: 50rpx;
163 height: 100rpx ; 211 height: 100rpx ;
164 width: 100rpx; 212 width: 100rpx;
165 margin-right: 40rpx; 213 margin-right: 40rpx;
166 } 214 }
167 .infoText{ 215 .infoText{
168 display: flex; 216 display: flex;
169 flex-direction: column; 217 flex-direction: column;
170 justify-content: space-between; 218 justify-content: space-between;
171 align-items: flex-scetart; 219 align-items: flex-scetart;
172 .userName{ 220 .userName{
173 font-size: 18px; 221 font-size: 18px;
174 color: #FFFFFF; 222 color: #FFFFFF;
175 margin-bottom: 8rpx; 223 margin-bottom: 8rpx;
176 } 224 }
177 .nickName{ 225 .nickName{
178 font-size: 12px; 226 font-size: 12px;
179 color: #FFFFFF; 227 color: #FFFFFF;
180 } 228 }
181 } 229 }
182 } 230 }
183 .service{ 231 .service{
232 margin-top: 20rpx;
184 image{ 233 image{
185 height: 36rpx; 234 height: 36rpx;
186 width: 36rpx; 235 width: 36rpx;
187 } 236 }
188 } 237 }
189 } 238 }
190 .myOrder{ 239 .myOrder{
191 width: 100%; 240 width: 100%;
192 height: 296rpx; 241 height: 296rpx;
193 margin-top: 20rpx; 242 margin-top: 20rpx;
194 margin-bottom: 20rpx; 243 margin-bottom: 20rpx;
195 padding: 0 40rpx; 244 padding: 0 40rpx;
196 box-sizing: border-box; 245 box-sizing: border-box;
197 background: #FFFFFF; 246 background: #FFFFFF;
198 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 247 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
199 border-radius: 6px; 248 border-radius: 6px;
200 border-radius: 6px; 249 border-radius: 6px;
201 display: flex; 250 display: flex;
202 flex-direction: column; 251 flex-direction: column;
203 justify-content: space-around; 252 justify-content: space-around;
204 align-items: center; 253 align-items: center;
205 .orderHeader{ 254 .orderHeader{
206 width: 100%; 255 width: 100%;
207 height: 100rpx; 256 height: 100rpx;
208 display: flex; 257 display: flex;
209 flex-direction: row; 258 flex-direction: row;
210 justify-content: space-between; 259 justify-content: space-between;
211 align-items: center; 260 align-items: center;
212 border-bottom: 1px solid #E9E9E9;; 261 border-bottom: 1px solid #E9E9E9;;
213 font-weight: bold; 262 font-weight: bold;
214 font-size: 18px; 263 font-size: 18px;
215 color: #333333; 264 color: #333333;
216 .btn{ 265 .btn{
217 font-size: 12px; 266 font-size: 12px;
218 color: #999999; 267 color: #999999;
219 image{ 268 image{
220 margin-left: 20rpx; 269 margin-left: 20rpx;
221 height: 16rpx; 270 height: 16rpx;
222 width: 8rpx; 271 width: 8rpx;
223 } 272 }
224 } 273 }
225 } 274 }
226 .orderBody{ 275 .orderBody{
227 width: 100%; 276 width: 100%;
228 display: flex; 277 display: flex;
229 flex-direction: row; 278 flex-direction: row;
230 justify-content: space-between; 279 justify-content: space-between;
231 align-items: center; 280 align-items: center;
232 .item{ 281 .item{
233 display: flex; 282 display: flex;
234 flex-direction: column; 283 flex-direction: column;
235 align-items: center; 284 align-items: center;
236 image{ 285 image{
237 width: 46rpx; 286 width: 46rpx;
238 height: 46rpx; 287 height: 46rpx;
239 } 288 }
240 text{ 289 text{
241 margin-top: 24rpx; 290 margin-top: 24rpx;
242 font-size: 12px; 291 font-size: 12px;
243 color: #333333; 292 color: #333333;
244 } 293 }
245 } 294 }
246 } 295 }
247 } 296 }
248 .recommend{ 297 .recommend{
249 background: #FFFFFF; 298 background: #FFFFFF;
250 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 299 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
251 border-radius: 6px; 300 border-radius: 6px;
252 border-radius: 6px; 301 border-radius: 6px;
253 width: 100%; 302 width: 100%;
254 .title{ 303 .title{
255 display: flex; 304 display: flex;
256 flex-direction: row; 305 flex-direction: row;
257 align-items: center; 306 align-items: center;
258 justify-content: space-between; 307 justify-content: space-between;
259 padding: 20rpx 40rpx; 308 padding: 20rpx 40rpx;
260 .line{ 309 .line{
261 width: 264rpx; 310 width: 264rpx;
262 height: 1rpx; 311 height: 1rpx;
263 border-bottom: 1px solid #EAEAEA; 312 border-bottom: 1px solid #EAEAEA;
264 } 313 }
265 .text{ 314 .text{
266 font-family: PingFangSC-Medium; 315 font-family: PingFangSC-Medium;
267 font-size: 14px; 316 font-size: 14px;
268 color: #333333; 317 color: #333333;
269 letter-spacing: -0.26px; 318 letter-spacing: -0.26px;
270 text-align: justify; 319 text-align: justify;
271 line-height: 24px; 320 line-height: 24px;
272 } 321 }
273 } 322 }
274 .goods-list{ 323 .goods-list{
275 .loading-text{ 324 .loading-text{
276 width: 100%; 325 width: 100%;
277 display: flex; 326 display: flex;
278 justify-content: center; 327 justify-content: center;
279 align-items: center; 328 align-items: center;
280 height: 30px; 329 height: 30px;
281 color: #979797; 330 color: #979797;
282 font-size: 12px; 331 font-size: 12px;
283 } 332 }
284 .product-list{ 333 .product-list{
285 width: 92%; 334 width: 92%;
286 padding: 0 4% 3vw 4%; 335 padding: 0 4% 3vw 4%;
287 display: flex; 336 display: flex;
288 justify-content: space-between; 337 justify-content: space-between;
289 flex-wrap: wrap; 338 flex-wrap: wrap;
290 .product{ 339 .product{
291 width: 48%; 340 width: 48%;
292 margin: 0 0 20rpx 0; 341 margin: 0 0 20rpx 0;
293 background: #FFFFFF; 342 background: #FFFFFF;
294 border: 1px solid #F2F2F2; 343 border: 1px solid #F2F2F2;
295 } 344 }
296 } 345 }
297 } 346 }
298 } 347 }
348 .auth {
349 height: 100vh;
350 display: flex;
351 flex-direction: column;
352 align-items: center;
353 .icon {
354 width: 140rpx;
355 height: 140rpx;
356 border-radius: 50%;
357 margin-top: 100rpx;
358 background-color: grey;
359 }
360 .divider {
361 height: 1rpx;
362 width: 600rpx;
363 margin-top: 80rpx;
364 background-color: #E6E3E3;
365 }
366 .title {
367 width: 600rpx;
368 margin-top: 50rpx;
369 text-align: left;
370 }
371 .text {
372 width: 600rpx;
373 margin-top: 30rpx;
374 text-align: left;
375 color: #E6E3E3;
376 }
377 button {
378 width: 450rpx;
379 height: 80rpx;
380 line-height: 80rpx;
381 margin-top: 80rpx;
382 border-radius: 30rpx;
383 }
384 }
src/store/index.js
Diff comments   View file @fcb436f
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Vuex from 'vuex' 2 import Vuex from 'vuex'
3 3
4 Vue.use(Vuex) 4 Vue.use(Vuex)
5 5
6 const modulesFiles = require.context('./modules', true, /\.js$/) 6 const modulesFiles = require.context('./modules', true, /\.js$/)
7 7
8 const modules = modulesFiles.keys().reduce((modules, modulePath) => { 8 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
9 const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') 9 const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
10 const value = modulesFiles(modulePath) 10 const value = modulesFiles(modulePath)
11 11
12 modules[moduleName] = value.default 12 modules[moduleName] = value.default
13 13
14 return modules 14 return modules
15 }, {}) 15 }, {})
16 16
17 const store = new Vuex.Store({ 17 const store = new Vuex.Store({
18 modules, 18 modules,
19 getters: { 19 getters: {
20 list: state => state.test.list 20 // list: state => state.test.list
21 } 21 }
22 }) 22 })
23 23
24 export default store; 24 export default store;
src/store/modules/cart.js
Diff comments   View file @fcb436f
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const { cartList } = urlAlias;
5
6 const state = {
7 cartList: [],
8 };
9
10 const mutations = {
11 INIT: (state, cartList) => {
12 state.cartList = cartList;
13 },
14 };
15
16
17
18 const actions = {
19
20 getCartList({ commit }, param) {
21 request({
22 url: cartList,
23 success: (res) => {
24
25 commit('INIT', res.data.data)
26 },
27 fail: (res) => {
28 console.log("fail status === > ", res);
29 },
30 complete: (res) => {
31 console.log("complete status === > ", res);
32 },
33 })
34 }
35
36 }
37
38 export default {
39 namespaced: true,
40 state,
41 mutations,
42 actions,
43 };
src/store/modules/detailStandard_k.js
Diff comments   View file @fcb436f
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 detailStandardList
6 } = urlAlias
7
8 const state = {
9 list:[],
10 };
11
12 const mutations = {
13 INIT: (state, detailStandardList) => {
14 state.detailStandardList = detailStandardList;
15 },
16 };
17
18 const actions = {
19 getList({ commit }, param){
20 request({
21 detailStandardList,
22 success: (res) => {
23
24 commit('INIT', res.data.data)
25 console,log('success')
26 },
27 fail: (res) => {
28 console.log("detail status === > ", res);
29 },
30 complete: (res) => {
31 console.log("detail compete status === > ", res);
32 },
33 })
34 }
35 }
36
37 export default {
38 namespaced: true,
39 state,
40 mutations,
41 actions,
42 }
src/store/modules/read.js
Diff comments   View file @fcb436f
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 read
6 } = urlAlias;
7
8 const state = {
9 goodInfo: [],
10 };
11
12 const mutations = {
13 INIT: (state, goodInfo) => {
14 state.goodInfo = goodInfo;
15 },
16 };
17
18 const actions = {
19 fetch({ commit }, param) {
20 request({
21 url: read,
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
src/store/modules/user.js
Diff comments   View file @fcb436f
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 login,
6 getUserInfo,
7 } = urlAlias;
8
9 const state = {
10 fromInfo: {
11 loginQueryInfo: {},
12 fromuid: 0,
13 fromsid: 0,
14 frompid: 0,
15 scene: 1001,
16 },
17 userInfo: {
18 uid: 1,
19 openid: '',
20 nickName: '',
21 headerphoto: '',
22 }
23 };
24
25 const mutations = {
26 FROM: (state, data) => {
27 state.formInfo = data;
28 },
29 UPDATE: (state, data) => {
30 state.userInfo = data;
31 }
32 };
33
34 const actions = {
35 // 登陆
36 login({ commit }, param) {
37 const {
38 frompid = undefined,
39 fromsid = undefined,
40 fromuid = undefined,
41 scene = 1001 ,
42 } = param || {};
43 uni.login({
44 provider: 'weixin',
45 success: function (loginRes) {
46 console.log('login',loginRes);
47 request({
48 url: login,
49 data: {
50 app_uid: 2020,
51 code: loginRes.code,
52 frompid,
53 fromsid,
54 fromuid,
55
56 },
57 success: (res) => {
58 const { data: { session_key, openid} } = res;
59 console.log('res', res)
60 // 写入缓存
61 uni.setStorageSync('session_key', session_key);
62 uni.setStorageSync('openid', openid);
63 request({
64 url: getUserInfo,
65 data: {
66 app_uid: 2020,
67 frompid,
68 fromsid,
69 fromuid,
70 openid,
71 scene,
72 },
73 success: (res) => {
74 console.log('userInfo=====', res);
75 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res;
76 const userInfo = {
77 uid,
78 openid,
79 nickName,
80 headerphoto,
81 }
82 commit("UPDATE", userInfo)
83 }
84 })
85 }
86 })
87 }
88 });
89 },
90 setFrom({ commit }, param) {
91 commit("FROM", param);
92 },
93 getUserInfo( { commit }, param) {
94 const {
95 frompid = undefined,
96 fromsid = undefined,
97 fromuid = undefined,
98 scene = 1001 ,
99 } = param || {};
100 // 写入缓存
101 const openid = uni.getStorageSync('openid', openid);
102 request({
103 url: getUserInfo,
104 data: {
105 app_uid: 2020,
106 frompid,
107 fromsid,
108 fromuid,
109 openid,
110 scene,
111 },
112 success: (res) => {
113 console.log('userInfo=====', res);
114 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res;
115 const userInfo = {
116 uid,
117 openid,
118 nickName,
119 headerphoto,
120 }
121 commit("UPDATE", userInfo)
122 }
123 })
124 },
125 }
126
127 export default {
128 namespaced: true,
129 state,
130 mutations,
131 actions,
132 }
src/store/modules/userRecommand.js
Diff comments   View file @fcb436f
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 recommandList
6 } = urlAlias;
7
8 const state = {
9 recommandList: [],
10 };
11
12 const mutations = {
13 INIT: (state, list) => {
14 state.recommandList = list;
15 },
16 };
17
18 const actions = {
19 getRecommandList({ commit }, param) {
20 request({
21 url: recommandList,
22 success: (res) => {
23 console.log(res.data)
24 commit('INIT', res.data.data)
25 },
26 fail: (res) => {
27 console.log("fail status === > ", res);
28 },
29 complete: (res) => {
30 console.log("complete status === > ", res);
31 },
32 })
33 },
34 };
35
36 export default {
37 namespaced: true,
38 state,
39 mutations,
40 actions,
41 };
1 const urlAlias = { 1 const urlAlias = {
2 // 获取首页商品列表 2 // 获取首页商品列表
3 shopList: '/app/prod/list', 3 shopList: '/app/prod/list',
4 4
5 // 获取首页商品列表 5 // 获取首页商品列表
6 category: '/app/prod/category', 6 category: '/app/prod/category2',
7 // 获取商品信息
8 read: '/app/prod/read',
9
10 // 首页
11 shopList: '/app/prod/list', // 获取首页商品列表
12 category: '/app/prod/category', // 获取首页商品分类
13
14 // 登陆
15 login: '/app/glass/getOpenId', // 登陆
16 getUserInfo: '/app/glass/userinfo', // 获取用户信息
17
18 // 我的订单
19 orderList: '/app/order/list', // 获取订单列表
20
21 // 购物车
22 cartList: '/app/cart/list', // 获取购物车列表
23
24 // 我的
25 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
26
27 // 镜框选购页
28 detailStandardList: '/app/prod/read', //获取商品的详细信息
29
7 } 30 }
8 31
9 export default urlAlias; 32 export default urlAlias;
10 33