刘文博 / gulu-vue

Download as
Browse Code »

Commit 3fb9af8d566d99d4dfc8a48eaaf1d82ce47f8641

Authored by Adam
2 parents edcf8c4141 43f318e26d
Exists in master

auto commit the code by alias command

Showing 37 changed files   Show diff stats
... ... @@ -26,5 +26,14 @@ module.exports = {
26 26 ],
27 27 "rules": {
28 28 quotes: ['error', 'single'],
  29 + 'space-before-function-paren': 0,
  30 + // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
  31 + // always-multiline：多行模式必须带逗号，单行模式不能带逗号
  32 + "comma-dangle": [2, "always-multiline"],
  33 + // 控制逗号前后的空格
  34 + "comma-spacing": [2, { "before": false, "after": true }],
  35 + // 控制逗号在行尾出现还是在行首出现
  36 + // http://eslint.org/docs/rules/comma-style
  37 + "comma-style": [2, "last"],
29 38 }
30 39 };
... ...
package-lock.json
Diff comments   View file @3fb9af8
... ... @@ -9615,7 +9615,7 @@
9615 9615 },
9616 9616 "normalize-range": {
9617 9617 "version": "0.1.2",
9618   - "resolved": "http://registry.npm.taobao.org/normalize-range/download/normalize-range-0.1.2.tgz",
  9618 + "resolved": "https://registry.npm.taobao.org/normalize-range/download/normalize-range-0.1.2.tgz",
9619 9619 "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
9620 9620 "dev": true
9621 9621 },
... ... @@ -9657,7 +9657,7 @@
9657 9657 },
9658 9658 "num2fraction": {
9659 9659 "version": "1.2.2",
9660   - "resolved": "http://registry.npm.taobao.org/num2fraction/download/num2fraction-1.2.2.tgz",
  9660 + "resolved": "https://registry.npm.taobao.org/num2fraction/download/num2fraction-1.2.2.tgz",
9661 9661 "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
9662 9662 "dev": true
9663 9663 },
... ...
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @3fb9af8
1 1 <template>
2 2 <view
3 3 class="card"
4   - @tap="toGoods(goods.id?goods.id:goods.pid,goods.goodType?goods.goodType:goods.p_root_index)"
  4 + @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5 5 >
6 6 <image
7 7 mode="widthFix"
... ... @@ -10,9 +10,10 @@
10 10 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
11 11 <view class="info">
12 12 <view class="priceBox">
13   - <view class="price">{{goods.price?goods.price:goods.real_price}}</view>
  13 + <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
14 14 <view class="originCost">
15   - {{goods.rsSon.Max_Price?goods.rsSon.Max_Price:goods.old_price}}
  15 + <!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
  16 + {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
16 17 </view>
17 18 </view>
18 19 <view class="trade_num">{{goods.trade_num}}人购买</view>
... ... @@ -34,12 +35,11 @@ export default {
34 35 originCost: String,
35 36 price: String,
36 37 trade_num: String,
37   - goodType: String
38   - }
  38 + goodType: String,
  39 + },
39 40  
40 41 },
41 42 created () {
42   - // console.log(this.goods)
43 43 },
44 44 data () {
45 45 return {
... ... @@ -47,53 +47,16 @@ export default {
47 47 }
48 48 },
49 49 methods: {
50   - toGoods (id, type) {
51   - console.log('---', '../frameDetail/frameDetail?oderId=' + id)
  50 + toGoods (id, sk_id) {
  51 + console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
52 52 uni.navigateTo({
53   - url: '../frameDetail/frameDetail?oderId=' + id,
  53 + url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
54 54 success: res => {},
55 55 fail: () => {},
56   - complete: () => {}
  56 + complete: () => {},
57 57 })
58   - console.log('toGoods =====> id:' + id + '======>type:' + type)
59   - switch (type) {
60   - case 1:
61   - uni.navigateTo({
62   - url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
63   - success: res => {},
64   - fail: () => {},
65   - complete: () => {}
66   - })
67   - break
68   - case 2:
69   - uni.navigateTo({
70   - url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
71   - success: res => {},
72   - fail: () => {},
73   - complete: () => {}
74   - })
75   - break
76   - case 3:
77   - uni.navigateTo({
78   - url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
79   - success: res => {},
80   - fail: () => {},
81   - complete: () => {}
82   - })
83   - break
84   - case 4:
85   - uni.navigateTo({
86   - url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
87   - success: res => {},
88   - fail: () => {},
89   - complete: () => {}
90   - })
91   - break
92   - default :
93   - break
94   - }
95   - }
96   - }
  58 + },
  59 + },
97 60 }
98 61 </script>
99 62  
... ...
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard">
3   - <view class="nav">
4   - <block v-for="(item,index) in menu" :key="index">
5   - <view
6   - class="first-menu"
7   - :class="{'on':showPage==index || on[index] === 1}"
8   - @tap="togglePage(index)"
9   - v-if="!item.isNoPull"
10   - >
11   - <text class="name">{{item.name}}</text>
12   - <text
13   - class="iconfont triangle"
14   - :style="'transform:rotate('+triangleDeg[index]+'deg);'"
15   - ></text>
16   - </view>
17   - <view
18   - class="first-menu"
19   - :class="{'on':showPage==index || on[index] === 1}"
20   - @tap="showAll()"
21   - v-else
22   - >
23   - <text class="name">{{item.name}}</text>
24   - </view>
25   - </block>
26   - </view>
27   - <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
28   - <block v-for="(page,page_index) in subData" :key="page_index">
29   - <view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
30   - <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
31   - <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
32   - :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
33   - <block v-for="(sub,index) in page.submenu" :key="index">
34   - <view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
35   - <view class="menu-name">
36   - <text>{{sub.name}}</text>
37   - <text class="iconfont selected"></text>
38   - </view>
39   - </view>
40   - </block>
41   - </scroll-view>
42   - <block v-for="(sub,index) in page.submenu" :key="index">
43   - <scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
44   - :scroll-into-view="'second_id'+secondScrollInto">
45   - <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
46   - <view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
47   - <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
48   - <text>{{sub_second.name}}</text>
49   - <text class="iconfont selected"></text>
50   - </view>
51   - <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
52   - <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
53   - <text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
54   - @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
55   - <text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text
56   - class="iconfont triangle"></text></text>
57   - </block>
58   - </view>
59   - </view>
60   - </block>
61   - </scroll-view>
62   - </block>
63   - </block>
64   - <block v-if="page.type=='filter'||page.type=='checkbox'">
65   - <view class="filter">
66   - <scroll-view class="menu-box" :scroll-y="true">
67   - <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
68   - <view class="title">{{box.name}}</view>
69   - <view class="labels">
70   - <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
71   - :class="{'on':label.selected}">{{label.name}}</view>
72   - </view>
73   - </view>
74   - </scroll-view>
75   - <view class="btn-box">
76   - <view class="reset" @tap="resetFilterData(page_index)">重置</view>
77   - <view class="submit" @tap="setFilterData(page_index)">确定</view>
78   - </view>
79   - </view>
80   - </block>
81   - <block v-if="page.type=='radio'">
82   - <view class="filter">
83   - <scroll-view class="menu-box" :scroll-y="true">
84   - <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
85   - <view class="title">{{box.name}}</view>
86   - <view class="labels">
87   - <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)"
88   - :class="{'on':label.selected}">{{label.name}}</view>
89   - </view>
90   - </view>
91   - </scroll-view>
92   - <view class="btn-box">
93   - <view class="reset" @tap="resetFilterData(page_index)">重置</view>
94   - <view class="submit" @tap="setFilterData(page_index)">确定</view>
95   - </view>
96   - </view>
97   - </block>
98   - </view>
99   - </block>
100   - </view>
  2 + <view
  3 + class="HMfilterDropdown"
  4 + @touchmove.stop.prevent="discard"
  5 + @tap.stop="discard"
  6 + >
  7 + <view class="nav">
  8 + <block
  9 + v-for="(item,index) in menu"
  10 + :key="index"
  11 + >
  12 + <view
  13 + class="first-menu"
  14 + :class="{'on':showPage==index || on[index] === 1}"
  15 + @tap="togglePage(index)"
  16 + v-if="!item.isNoPull"
  17 + >
  18 + <text class="name">{{item.name}}</text>
  19 + <text
  20 + class="iconfont triangle"
  21 + :style="'transform:rotate('+triangleDeg[index]+'deg);'"
  22 + ></text>
  23 + </view>
  24 + <view
  25 + class="first-menu"
  26 + :class="{'on':showPage==index || on[index] === 1}"
  27 + @tap="showAll()"
  28 + v-else
  29 + >
  30 + <text class="name">{{item.name}}</text>
  31 + </view>
  32 + </block>
  33 + </view>
  34 + <view
  35 + class="mask"
  36 + :class="{'show':isShowMask,'hide':maskVisibility!=true}"
  37 + @tap="togglePage(showPage)"
  38 + ></view>
  39 + <block
  40 + v-for="(page,page_index) in subData"
  41 + :key="page_index"
  42 + >
  43 + <view
  44 + class="sub-menu-class"
  45 + :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"
  46 + >
  47 + <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
  48 + <scroll-view
  49 + class="sub-menu-list"
  50 + :class="[activeMenuArr[page_index].length>1?'first':'alone']"
  51 + :scroll-y="true"
  52 + :scroll-into-view="'first_id'+firstScrollInto"
  53 + >
  54 + <block
  55 + v-for="(sub,index) in page.submenu"
  56 + :key="index"
  57 + >
  58 + <view
  59 + class="sub-menu"
  60 + :id="'first_id'+index"
  61 + :class="{'on':activeMenuArr[page_index][0]==index}"
  62 + @tap="selectHierarchyMenu(page_index,index,null,null)"
  63 + >
  64 + <view class="menu-name">
  65 + <text>{{sub.name}}</text>
  66 + <text class="iconfont selected"></text>
  67 + </view>
  68 + </view>
  69 + </block>
  70 + </scroll-view>
  71 + <block
  72 + v-for="(sub,index) in page.submenu"
  73 + :key="index"
  74 + >
  75 + <scroll-view
  76 + class="sub-menu-list not-first"
  77 + :scroll-y="true"
  78 + v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
  79 + :scroll-into-view="'second_id'+secondScrollInto"
  80 + >
  81 + <block
  82 + v-for="(sub_second,second_index) in sub.submenu"
  83 + :key="second_index"
  84 + >
  85 + <view
  86 + class="sub-menu"
  87 + :id="'second_id'+second_index"
  88 + :class="{'on':activeMenuArr[page_index][1]==second_index}"
  89 + >
  90 + <view
  91 + class="menu-name"
  92 + @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"
  93 + >
  94 + <text>{{sub_second.name}}</text>
  95 + <text class="iconfont selected"></text>
  96 + </view>
  97 + <view
  98 + class="more-sub-menu"
  99 + v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"
  100 + >
  101 + <block
  102 + v-for="(sub2,sub2_index) in sub_second.submenu"
  103 + :key="sub2_index"
  104 + >
  105 + <text
  106 + v-if="sub_second.showAllSub || (sub2_index<8)"
  107 + :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
  108 + @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)"
  109 + >{{sub2.name}}</text>
  110 + <text
  111 + v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9"
  112 + @tap="showMoreSub(second_index)"
  113 + >更多<text class="iconfont triangle"></text></text>
  114 + </block>
  115 + </view>
  116 + </view>
  117 + </block>
  118 + </scroll-view>
  119 + </block>
  120 + </block>
  121 + <block v-if="page.type=='filter' || page.type=='checkbox'">
  122 + <view class="filter">
  123 + <scroll-view
  124 + class="menu-box"
  125 + :scroll-y="true"
  126 + >
  127 + <view
  128 + class="box"
  129 + v-for="(box,box_index) in page.submenu"
  130 + :key="box_index"
  131 + >
  132 + <view class="title">{{box.name}}</view>
  133 + <view class="labels">
  134 + <view
  135 + v-for="(label,label_index) in box.submenu"
  136 + :key="label_index"
  137 + @tap="selectFilterLabel(page_index, box_index, label_index)"
  138 + :class="{'on': label.selected}"
  139 + >{{label.name}}</view>
  140 + </view>
  141 + </view>
  142 + </scroll-view>
  143 + <view class="btn-box">
  144 + <view
  145 + class="reset"
  146 + @tap="resetFilterData(page_index)"
  147 + >重置</view>
  148 + <view
  149 + class="submit"
  150 + @tap="setFilterData(page_index)"
  151 + >确定</view>
  152 + </view>
  153 + </view>
  154 + </block>
  155 + <block v-if="page.type=='radio'">
  156 + <view class="filter">
  157 + <scroll-view
  158 + class="menu-box"
  159 + :scroll-y="true"
  160 + >
  161 + <view
  162 + class="box"
  163 + v-for="(box,box_index) in page.submenu"
  164 + :key="box_index"
  165 + >
  166 + <view class="title">{{box.name}}</view>
  167 + <view class="labels">
  168 + <view
  169 + v-for="(label,label_index) in box.submenu"
  170 + :key="label_index"
  171 + @tap="selectRadioLabel(page_index,box_index,label_index)"
  172 + :class="{'on':label.selected}"
  173 + >{{label.name}}</view>
  174 + </view>
  175 + </view>
  176 + </scroll-view>
  177 + <view class="btn-box">
  178 + <view
  179 + class="reset"
  180 + @tap="resetFilterData(page_index)"
  181 + >重置</view>
  182 + <view
  183 + class="submit"
  184 + @tap="setFilterData(page_index)"
  185 + >确定</view>
  186 + </view>
  187 + </view>
  188 + </block>
  189 + </view>
  190 + </block>
  191 + </view>
101 192 </template>
102 193 <script>
103   - export default {
104   - data() {
105   - return {
106   - subData: [], //菜单数据
107   - menu: [], //顶部横条数据
108   - showPage: -1, //菜单页面显示/隐藏动画控制
109   - pageState: [], //页面的状态
110   - activeMenuArr: [], //UI状态
111   - shadowActiveMenuArr: [], //记录选中
112   - defaultActive:[],
113   - triangleDeg: [], //小三角形的翻转动画控制
114   - isShowMask: false, //遮罩层显示/隐藏动画控制
115   - maskVisibility: false, //遮罩层显示/隐藏状态
116   - //滚动区域定位
117   - firstScrollInto: 0,
118   - secondScrollInto: 0,
119   - componentTop:0 ,//组件top
120   - isReadNewSelect:false,
121   - on: [1,0,0,0,0],
122   - }
123   - },
124   - props: {
125   - filterData: {
126   - value: Array,
127   - default: []
128   - },
129   - defaultSelected:{
130   - value: Array,
131   - default: []
132   - },
133   - updateMenuName:{
134   - value: Boolean,
135   - default: true
136   - },
137   - dataFormat:{
138   - value: String,
139   - default: 'Array'
140   - }
141   - },
142   - watch: {
143   - filterData: {
144   - handler() {
145   - this.initMenu(); //filterData重新赋值初始化菜单
146   - },
147   - immediate: true
148   - },
149   - defaultSelected(newVal) {
150   - if(newVal.length==0){
151   - return;
152   - }
153   - this.defaultActive = JSON.parse(JSON.stringify(newVal));
154   - this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
155   - this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
156   - // if(this.updateMenuName){
157   - // this.setMenuName();
158   - // }
159   - }
160   - },
161   - methods: {
162   - initMenu() {
163   - let tmpMenuActiveArr=[];
164   - let tmpMenu=[];
165   - for (let i = 0; i < this.filterData.length; i++) {
166   - let tmpitem = this.filterData[i];
167   - tmpMenu.push({
168   - //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
169   - name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
170   - type: tmpitem.type,
171   - isNoPull: tmpitem.isNoPull,
172   - });
173   - // 初始化选中项数组-ui状态
174   - tmpMenuActiveArr.push(this.processActive(tmpitem));
175   - // 初始化角度数组
176   - this.triangleDeg.push(0);
177   - // 初始化控制显示状态数组
178   - this.pageState.push(false);
179   - // 递归处理子菜单数据
180   - tmpitem = this.processSubMenu(tmpitem);
181   - this.filterData[i] = tmpitem;
182   - }
183   - this.menu = tmpMenu;
184   - // 初始化选中项数组
185   - tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
186   - this.defaultActive = [];
187   - this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
188   - this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
189   - // 加载菜单数据
190   - this.subData = this.filterData;
191   - // 设定顶部菜单名字
192   - // if(this.updateMenuName){
193   - // this.setMenuName();
194   - // }
195   - },
196   - // setMenuName(){
197   - // for(var i=0;i<this.activeMenuArr.length;i++){
198   - // let row = this.activeMenuArr[i];
199   - // if (typeof(row[0]) != 'object'){
200   - // var tmpsub = false;
201   - // if(row.length>0 && row[0]!=null){
202   - // tmpsub = this.subData[i].submenu[row[0]];
203   - // if(row.length>1 && row[1]!=null){
204   - // tmpsub = tmpsub.submenu[row[1]];
205   - // if(row.length>2 && row[2]!=null){
206   - // tmpsub = tmpsub.submenu[row[2]];
207   - // }
208   - // }
209   - // }else{
210   - // tmpsub = false;
211   - // }
212   - // if(tmpsub){
213   - // this.menu[i].name = tmpsub.name;
214   - // }
215   - // }
216   - // }
217   - // },
218   - //展开更多
219   - showMoreSub(index) {
220   - this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
221   - this.$forceUpdate();
222   - },
223   - //选中
224   - selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
225   - //读取记录
226   - if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
227   - level1_index) {
228   - this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
229   - } else {
230   - this.activeMenuArr[page_index].splice(0, 1, level1_index);
231   - (level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1);
232   - (level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1);
233   - }
234   - //写入结果
235   - if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
236   - ) {
237   - let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
238   - // if(this.updateMenuName){
239   - // this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
240   - // }
241   - this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
242   - this.togglePage(this.showPage);
243   - }
244   - },
245   - //写入结果，筛选
246   - setFilterData(page_index) {
247   - this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
248   - this.togglePage(this.showPage);
249   - },
250   - //重置结果和ui，筛选
251   - resetFilterData(page_index) {
252   - let tmpArr = [];
253   - let level = this.shadowActiveMenuArr[page_index].length;
254   - while (level > 0) {
255   - tmpArr.push([]);
256   - let box = this.subData[page_index].submenu[level - 1].submenu;
257   - for (let i = 0; i < box.length; i++) {
258   - this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
259   - }
260   - level--;
261   - }
262   - this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
263   - this.$forceUpdate();
264   - },
265   - //选中筛选类label-UI状态
266   - selectFilterLabel(page_index, box_index, label_index) {
267   - let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
268   - if (find_index > -1) {
269   - this.activeMenuArr[page_index][box_index].splice(find_index, 1);
270   - this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
271   - } else {
272   - this.activeMenuArr[page_index][box_index].push(label_index);
273   - this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
274   - }
275   - this.$forceUpdate();
276   - },
277   - //选中单选类label-UI状态
278   - selectRadioLabel(page_index, box_index, label_index) {
279   -
280   - let activeIndex = this.activeMenuArr[page_index][box_index][0];
281   - if(activeIndex == label_index){
282   - this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
283   - this.activeMenuArr[page_index][box_index][0] = null;
284   - }else{
285   - if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){
286   - this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
287   - }
288   -
289   - this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
290   - this.activeMenuArr[page_index][box_index][0] = label_index;
291   - }
292   - this.$forceUpdate();
293   - },
294   - //菜单开关
295   - togglePage(index) {
296   - if (index == this.showPage) {
297   - this.hidePageLayer(true);
298   - this.hideMask();
299   - this.showPage = -1;
300   - } else {
301   - if (this.showPage > -1) {
302   - this.hidePageLayer(false);
303   - }
304   - this.showPageLayer(index);
305   - this.showMask();
306   - }
307   - if(this.on[0] === 1) {
308   - this.on[0] = 0;
309   - }
310   - this.on[index] = 1;
311   - },
312   - showAll() {
313   - this.on = [1,0,0,0,0]
314   - // 输出
315   - this.$emit('search', {
316   - index: {},
317   - value: {},
318   - on: this.on,
319   - });
320   - },
321   - //hide遮罩层
322   - hideMask() {
323   - this.isShowMask = false;
324   - setTimeout(() => {
325   - this.maskVisibility = false;
326   - }, 200);
327   - },
328   - //show遮罩层
329   - showMask() {
330   - this.maskVisibility = true;
331   - this.$nextTick(() => {
332   - setTimeout(() => {
333   - this.isShowMask = true;
334   - }, 0);
335   - })
336   - },
337   - //hide菜单页
338   - hidePageLayer(isAnimation) {
339   - this.triangleDeg[this.showPage] = 0;
340   - let tmpIndex = this.showPage;
341   - if (isAnimation) {
342   - setTimeout(() => {
343   - this.pageState.splice(tmpIndex, 1, false);
344   - }, 200);
345   - this.confirm();
346   - } else {
347   - this.pageState.splice(tmpIndex, 1, false)
348   - }
349   - this.firstScrollInto = null;
350   - this.secondScrollInto = null;
351   - },
352   - confirm() {
353   - let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
354   - let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
355   -
356   - //对结果做一下处理
357   - index.forEach((item, i) => {
358   - if (typeof(item[0]) == 'object') {
359   - //针对筛选结果过一个排序
360   - item.forEach((s, j) => {
361   - if(s!=null){
362   - s.sort((val1, val2) => {
363   - return val1 - val2;
364   - });
365   - item[j] = s;
366   - s.forEach((v, k) => {
367   - value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value;
368   - if(this.subData[i].type == 'radio' && value[i][j][k] == null){
369   - value[i][j] = [];
370   - index[i][j] = [];
371   - }
372   - });
373   - }
374   - });
375   - }else{
376   - let submenu = this.subData[i].submenu[item[0]];
377   - value[i][0] = submenu && submenu.value;
378   - if(value[i].length>=2 && item[1]!=null){
379   - if(submenu.submenu.length>0){
380   - submenu = submenu.submenu[item[1]];
381   - value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
382   - }else{
383   - value[i][1] = null
384   - }
385   - if(value[i].length>=3 && item[2]!=null){
386   - if(submenu.submenu.length>0){
387   - submenu = submenu.submenu[item[2]];
388   - value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
389   - }else{
390   - value[i][2] = null;
391   - }
392   - }
393   - }
394   - }
395   - index[i] = item;
396   -
397   - });
398   - // 输出
399   - this.$emit('search', {
400   - index: index,
401   - value: value,
402   - on: this.on,
403   - });
404   - },
405   - //show菜单页
406   - showPageLayer(index) {
407   - this.processPage(index);
408   - this.pageState.splice(index, 1, true);
409   - this.$nextTick(() => {
410   - setTimeout(() => {
411   - this.showPage = index;
412   - }, 0);
413   - })
414   - this.triangleDeg[index] = 180;
415   - },
416   - reloadActiveMenuArr(){
417   - for (let i = 0; i < this.filterData.length; i++) {
418   - let tmpitem = this.filterData[i];
419   - let tmpArr = this.processActive(tmpitem);
420   - tmpitem = this.processSubMenu(tmpitem);
421   - if(this.activeMenuArr[i].length!=tmpArr.length){
422   - this.filterData[i] = tmpitem;
423   - this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
424   - this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
425   - }
426   - }
427   - this.subData = this.filterData;
428   - this.$forceUpdate();
429   - },
430   - processPage(index) {
431   - //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
432   - this.reloadActiveMenuArr();
433   - //重置UI控制数组
434   - this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
435   - if (this.menu[index].type == 'filter') {
436   - //重载筛选页选中状态
437   - let level = this.shadowActiveMenuArr[index].length;
438   - for (let i = 0; i < level; i++) {
439   - let box = this.subData[index].submenu[i].submenu;
440   - for (let j = 0; j < box.length; j++) {
441   - if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
442   - this.subData[index].submenu[i].submenu[j].selected = true;
443   - } else {
444   - this.subData[index].submenu[i].submenu[j].selected = false;
445   - }
446   - }
447   - }
448   - } else if (this.menu[index].type == 'hierarchy') {
449   - this.$nextTick(() => {
450   - setTimeout(() => {
451   - //滚动到选中项
452   - this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
453   - this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
454   - }, 0);
455   - })
456   - } else if (this.menu[index].type == 'radio') {
457   - //重载筛选页选中状态
458   - let level = this.shadowActiveMenuArr[index].length;
459   - for (let i = 0; i < level; i++) {
460   - let box = this.subData[index].submenu[i].submenu;
461   - for (let j = 0; j < box.length; j++) {
462   - if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
463   - this.subData[index].submenu[i].submenu[j].selected = true;
464   - } else {
465   - this.subData[index].submenu[i].submenu[j].selected = false;
466   - }
467   - }
468   - }
469   - }
470   - },
471   - processActive(tmpitem) {
472   - let tmpArr = []
473   - if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
474   - let level = this.getMaxFloor(tmpitem.submenu);
475   - while (level > 0) {
476   - tmpArr.push(0);
477   - level--;
478   - }
479   - } else if (tmpitem.type == 'filter') {
480   - let level = tmpitem.submenu.length;
481   - while (level > 0) {
482   - tmpArr.push([]);
483   - level--;
484   - }
485   - } else if (tmpitem.type == 'radio') {
486   - let level = tmpitem.submenu.length;
487   - while (level > 0) {
488   - tmpArr.push([]);
489   - level--;
490   - }
491   - }
492   - return tmpArr;
493   - },
494   - processSubMenu(menu) {
495   - if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
496   - for (let i = 0; i < menu.submenu.length; i++) {
497   - menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
498   - }
499   - } else {
500   - menu.submenu = [];
501   - }
502   - return menu;
503   - },
504   - //计算菜单层级
505   - getMaxFloor(treeData) {
506   - let floor = 0
507   - let max = 0
508   - function each(data, floor) {
509   - data.forEach(e => {
510   - max = floor > max ? floor : max;
511   - if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
512   - each(e.submenu, floor + 1)
513   - }
514   - })
515   - }
516   - each(treeData, 1)
517   - return max;
518   - },
519   - discard() {
  194 +export default {
  195 + data () {
  196 + return {
  197 + subData: [], // 菜单数据
  198 + menu: [], // 顶部横条数据
  199 + showPage: -1, // 菜单页面显示/隐藏动画控制
  200 + pageState: [], // 页面的状态
  201 + activeMenuArr: [], // UI状态
  202 + shadowActiveMenuArr: [], // 记录选中
  203 + defaultActive: [],
  204 + triangleDeg: [], // 小三角形的翻转动画控制
  205 + isShowMask: false, // 遮罩层显示/隐藏动画控制
  206 + maskVisibility: false, // 遮罩层显示/隐藏状态
  207 + // 滚动区域定位
  208 + firstScrollInto: 0,
  209 + secondScrollInto: 0,
  210 + componentTop: 0, // 组件top
  211 + isReadNewSelect: false,
  212 + on: [1, 0, 0, 0, 0],
  213 + selectedData: {}
  214 + }
  215 + },
  216 + props: {
  217 + filterData: {
  218 + value: Array,
  219 + default: []
  220 + },
  221 + defaultSelected: {
  222 + value: Array,
  223 + default: []
  224 + },
  225 + updateMenuName: {
  226 + value: Boolean,
  227 + default: true
  228 + },
  229 + dataFormat: {
  230 + value: String,
  231 + default: 'Array'
  232 + }
  233 + },
  234 + watch: {
  235 + filterData: {
  236 + handler () {
  237 + this.initMenu() // filterData重新赋值初始化菜单
  238 + },
  239 + immediate: true
  240 + },
  241 + defaultSelected (newVal) {
  242 + if (newVal.length === 0) {
  243 + return
  244 + }
  245 + this.defaultActive = JSON.parse(JSON.stringify(newVal))
  246 + this.activeMenuArr = JSON.parse(JSON.stringify(newVal))
  247 + this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal))
  248 + }
  249 + },
  250 + methods: {
  251 + initMenu () {
  252 + let tmpMenuActiveArr = []
  253 + const tmpMenu = []
  254 + for (let i = 0; i < this.filterData.length; i++) {
  255 + let tmpitem = this.filterData[i]
  256 + tmpMenu.push({
  257 + // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
  258 + name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name),
  259 + type: tmpitem.type,
  260 + isNoPull: tmpitem.isNoPull
  261 + })
  262 + // 初始化选中项数组-ui状态
  263 + tmpMenuActiveArr.push(this.processActive(tmpitem))
  264 + // 初始化角度数组
  265 + this.triangleDeg.push(0)
  266 + // 初始化控制显示状态数组
  267 + this.pageState.push(false)
  268 + // 递归处理子菜单数据
  269 + tmpitem = this.processSubMenu(tmpitem)
  270 + this.filterData[i] = tmpitem
  271 + if (tmpitem.type === 'filter') {
  272 + for (let i = 0; i < tmpitem.length; i++) {
  273 + this.selectedData[`${tmpitem.submenu[i].value}`] = []
  274 + }
  275 + }
  276 + }
  277 + console.log('this.selectedData', this.selectedData)
  278 + this.menu = tmpMenu
  279 + // 初始化选中项数组
  280 + tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr
  281 + this.defaultActive = []
  282 + this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
  283 + this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
  284 + // 加载菜单数据
  285 + this.subData = this.filterData
  286 + },
  287 + // 展开更多
  288 + showMoreSub (index) {
  289 + this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true
  290 + this.$forceUpdate()
  291 + },
  292 + // 选中
  293 + selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) {
  294 + // 读取记录
  295 + if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) {
  296 + this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])))
  297 + } else {
  298 + this.activeMenuArr[page_index].splice(0, 1, level1_index);
  299 + (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);
  300 + (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)
  301 + }
  302 + // 写入结果
  303 + if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
  304 + ) {
  305 + const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]
  306 + this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
  307 + this.togglePage(this.showPage)
  308 + }
  309 + },
  310 + // 写入结果，筛选
  311 + setFilterData (page_index) {
  312 + this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
  313 + this.togglePage(this.showPage)
  314 + },
  315 + // 重置结果和ui，筛选
  316 + resetFilterData (page_index) {
  317 + const tmpArr = []
  318 + let level = this.shadowActiveMenuArr[page_index].length
  319 + while (level > 0) {
  320 + tmpArr.push([])
  321 + const box = this.subData[page_index].submenu[level - 1].submenu
  322 + for (let i = 0; i < box.length; i++) {
  323 + this.subData[page_index].submenu[level - 1].submenu[i].selected = false
  324 + }
  325 + level--
  326 + }
  327 + this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr))
  328 + this.$forceUpdate()
  329 + },
  330 + // 选中筛选类label-UI状态
  331 + selectFilterLabel (page_index, box_index, label_index) {
  332 + const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index)
  333 + const data = this.filterData[page_index].submenu
  334 + const selected = this.selectedData[`${data[box_index].value}`]
  335 + if (findIndex > -1) {
  336 + this.activeMenuArr[page_index][box_index].splice(findIndex, 1)
  337 + this.subData[page_index].submenu[box_index].submenu[label_index].selected = false
  338 + for (let i = 0; i < selected.length; i++) {
  339 + if (selected[i] === data[box_index].submenu[label_index].value) {
  340 + selected.splice(i, 1)
  341 + this.selectedData[`${data[box_index].value}`] = selected
  342 + }
  343 + }
  344 + } else {
  345 + this.activeMenuArr[page_index][box_index].push(label_index)
  346 + this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
  347 + if (!selected) {
  348 + this.selectedData[`${data[box_index].value}`] = []
  349 + this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
  350 + } else {
  351 + console.log('---', data, this.filterData, this.selectedData)
  352 + this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
  353 + }
  354 + // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index])
  355 + }
  356 + this.$forceUpdate()
  357 + },
  358 + // 选中单选类label-UI状态
  359 + selectRadioLabel (pageIndex, boxIndex, labelIndex) {
  360 + const activeIndex = this.activeMenuArr[pageIndex][boxIndex][0]
  361 + if (activeIndex === labelIndex) {
  362 + this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false
  363 + this.activeMenuArr[pageIndex][boxIndex][0] = null
  364 + } else {
  365 + if (activeIndex != null && activeIndex < this.subData[pageIndex].submenu[boxIndex].submenu.length) {
  366 + this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false
  367 + }
520 368  
521   - }
522   - }
523   - }
  369 + this.subData[pageIndex].submenu[boxIndex].submenu[labelIndex].selected = true
  370 + this.activeMenuArr[pageIndex][boxIndex][0] = labelIndex
  371 + }
  372 + this.$forceUpdate()
  373 + },
  374 + // 菜单开关
  375 + togglePage (index) {
  376 + if (index === this.showPage) {
  377 + this.hidePageLayer(true)
  378 + this.hideMask()
  379 + this.showPage = -1
  380 + } else {
  381 + if (this.showPage > -1) {
  382 + this.hidePageLayer(false)
  383 + }
  384 + this.showPageLayer(index)
  385 + this.showMask()
  386 + }
  387 + if (this.on[0] === 1) {
  388 + this.on[0] = 0
  389 + }
  390 + this.on[index] = 1
  391 + },
  392 + showAll () {
  393 + this.on = [1, 0, 0, 0, 0]
  394 + // 输出
  395 + this.$emit('search', {
  396 + index: {},
  397 + value: {},
  398 + on: this.on,
  399 + selectedData: this.selectedData
  400 + })
  401 + },
  402 + // hide遮罩层
  403 + hideMask () {
  404 + this.isShowMask = false
  405 + setTimeout(() => {
  406 + this.maskVisibility = false
  407 + }, 200)
  408 + },
  409 + // show遮罩层
  410 + showMask () {
  411 + this.maskVisibility = true
  412 + this.$nextTick(() => {
  413 + setTimeout(() => {
  414 + this.isShowMask = true
  415 + }, 0)
  416 + })
  417 + },
  418 + // hide菜单页
  419 + hidePageLayer (isAnimation) {
  420 + this.triangleDeg[this.showPage] = 0
  421 + const tmpIndex = this.showPage
  422 + if (isAnimation) {
  423 + setTimeout(() => {
  424 + this.pageState.splice(tmpIndex, 1, false)
  425 + }, 200)
  426 + this.confirm()
  427 + } else {
  428 + this.pageState.splice(tmpIndex, 1, false)
  429 + }
  430 + this.firstScrollInto = null
  431 + this.secondScrollInto = null
  432 + },
  433 + confirm () {
  434 + const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
  435 + const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
  436 +
  437 + // 对结果做一下处理
  438 + index.forEach((item, i) => {
  439 + if (typeof (item[0]) === 'object') {
  440 + // 针对筛选结果过一个排序
  441 + item.forEach((s, j) => {
  442 + if (s != null) {
  443 + s.sort((val1, val2) => {
  444 + return val1 - val2
  445 + })
  446 + item[j] = s
  447 + s.forEach((v, k) => {
  448 + value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value
  449 + if (this.subData[i].type === 'radio' && value[i][j][k] == null) {
  450 + value[i][j] = []
  451 + index[i][j] = []
  452 + }
  453 + })
  454 + }
  455 + })
  456 + } else {
  457 + let submenu = this.subData[i].submenu[item[0]]
  458 + value[i][0] = submenu && submenu.value
  459 + if (value[i].length >= 2 && item[1] != null) {
  460 + if (submenu.submenu.length > 0) {
  461 + submenu = submenu.submenu[item[1]]
  462 + value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null
  463 + } else {
  464 + value[i][1] = null
  465 + }
  466 + if (value[i].length >= 3 && item[2] != null) {
  467 + if (submenu.submenu.length > 0) {
  468 + submenu = submenu.submenu[item[2]]
  469 + value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null
  470 + } else {
  471 + value[i][2] = null
  472 + }
  473 + }
  474 + }
  475 + }
  476 + index[i] = item
  477 + })
  478 + // 输出
  479 + this.$emit('search', {
  480 + index: index,
  481 + value: value,
  482 + on: this.on,
  483 + selectedData: this.selectedData
  484 + })
  485 + },
  486 + // show菜单页
  487 + showPageLayer (index) {
  488 + this.processPage(index)
  489 + this.pageState.splice(index, 1, true)
  490 + this.$nextTick(() => {
  491 + setTimeout(() => {
  492 + this.showPage = index
  493 + }, 0)
  494 + })
  495 + this.triangleDeg[index] = 180
  496 + },
  497 + reloadActiveMenuArr () {
  498 + for (let i = 0; i < this.filterData.length; i++) {
  499 + let tmpitem = this.filterData[i]
  500 + const tmpArr = this.processActive(tmpitem)
  501 + tmpitem = this.processSubMenu(tmpitem)
  502 + if (this.activeMenuArr[i].length !== tmpArr.length) {
  503 + this.filterData[i] = tmpitem
  504 + this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
  505 + this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
  506 + }
  507 + }
  508 + this.subData = this.filterData
  509 + this.$forceUpdate()
  510 + },
  511 + processPage (index) {
  512 + // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
  513 + this.reloadActiveMenuArr()
  514 + // 重置UI控制数组
  515 + this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])))
  516 + if (this.menu[index].type === 'filter') {
  517 + // 重载筛选页选中状态
  518 + const level = this.shadowActiveMenuArr[index].length
  519 + for (let i = 0; i < level; i++) {
  520 + const box = this.subData[index].submenu[i].submenu
  521 + for (let j = 0; j < box.length; j++) {
  522 + if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
  523 + this.subData[index].submenu[i].submenu[j].selected = true
  524 + } else {
  525 + this.subData[index].submenu[i].submenu[j].selected = false
  526 + }
  527 + }
  528 + }
  529 + } else if (this.menu[index].type === 'hierarchy') {
  530 + this.$nextTick(() => {
  531 + setTimeout(() => {
  532 + // 滚动到选中项
  533 + this.firstScrollInto = parseInt(this.activeMenuArr[index][0])
  534 + this.secondScrollInto = parseInt(this.activeMenuArr[index][1])
  535 + }, 0)
  536 + })
  537 + } else if (this.menu[index].type === 'radio') {
  538 + // 重载筛选页选中状态
  539 + const level = this.shadowActiveMenuArr[index].length
  540 + for (let i = 0; i < level; i++) {
  541 + const box = this.subData[index].submenu[i].submenu
  542 + for (let j = 0; j < box.length; j++) {
  543 + if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
  544 + this.subData[index].submenu[i].submenu[j].selected = true
  545 + } else {
  546 + this.subData[index].submenu[i].submenu[j].selected = false
  547 + }
  548 + }
  549 + }
  550 + }
  551 + },
  552 + processActive (tmpitem) {
  553 + const tmpArr = []
  554 + if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
  555 + let level = this.getMaxFloor(tmpitem.submenu)
  556 + while (level > 0) {
  557 + tmpArr.push(0)
  558 + level--
  559 + }
  560 + } else if (tmpitem.type === 'filter') {
  561 + let level = tmpitem.submenu.length
  562 + while (level > 0) {
  563 + tmpArr.push([])
  564 + level--
  565 + }
  566 + } else if (tmpitem.type === 'radio') {
  567 + let level = tmpitem.submenu.length
  568 + while (level > 0) {
  569 + tmpArr.push([])
  570 + level--
  571 + }
  572 + }
  573 + return tmpArr
  574 + },
  575 + processSubMenu (menu) {
  576 + if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
  577 + for (let i = 0; i < menu.submenu.length; i++) {
  578 + menu.submenu[i] = this.processSubMenu(menu.submenu[i])
  579 + }
  580 + } else {
  581 + menu.submenu = []
  582 + }
  583 + return menu
  584 + },
  585 + // 计算菜单层级
  586 + getMaxFloor (treeData) {
  587 + const floor = 0
  588 + let max = 0
  589 + function each (data, floor) {
  590 + data.forEach(e => {
  591 + max = floor > max ? floor : max
  592 + if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
  593 + each(e.submenu, floor + 1)
  594 + }
  595 + })
  596 + }
  597 + each(treeData, 1)
  598 +
  599 + return max
  600 + },
  601 + discard () {
  602 +
  603 + }
  604 + }
  605 +}
524 606 </script>
525 607 <style lang="scss">
526   - .HMfilterDropdown {
527   - flex-shrink: 0;
528   - width: 100%;
529   - height: 44px;
530   - position: fixed;
531   - z-index: 997;
532   - flex-wrap: nowrap;
533   - display: flex;
534   - flex-direction: row;
535   - top: var(--window-top);
536   - left:0;
537   - view {
538   - display: flex;
539   - flex-wrap: nowrap;
540   - }
541   - }
542   - .region {
543   - flex: 1;
544   - height: 44px;
545   - }
546   - .nav {
547   - width: 100%;
548   - height: 44px;
549   - z-index: 12;
550   - background-color: #ffffff;
551   - flex-direction: row;
552   - .first-menu {
553   - width: 100%;
554   - font-size: 16px;
555   - color: #333333;
556   - flex-direction: row;
557   - align-items: center;
558   - justify-content: center;
559   - transition: color .2s linear;
  608 +.HMfilterDropdown {
  609 + flex-shrink: 0;
  610 + width: 100%;
  611 + height: 44px;
  612 + position: fixed;
  613 + z-index: 997;
  614 + flex-wrap: nowrap;
  615 + display: flex;
  616 + flex-direction: row;
  617 + top: var(--window-top);
  618 + left: 0;
  619 + view {
  620 + display: flex;
  621 + flex-wrap: nowrap;
  622 + }
  623 +}
  624 +.region {
  625 + flex: 1;
  626 + height: 44px;
  627 +}
  628 +.nav {
  629 + width: 100%;
  630 + height: 44px;
  631 + z-index: 12;
  632 + background-color: #ffffff;
  633 + flex-direction: row;
  634 + .first-menu {
  635 + width: 100%;
  636 + font-size: 16px;
  637 + color: #333333;
  638 + flex-direction: row;
  639 + align-items: center;
  640 + justify-content: center;
  641 + transition: color 0.2s linear;
560 642  
561   - &.on {
562   - color: #FF6B4A;
  643 + &.on {
  644 + color: #ff6b4a;
563 645  
564   - .iconfont {
565   - color: #FF6B4A;
566   - }
567   - }
568   - .name {
569   - height: 20px;
570   - // font-size: 16px;
571   - text-align: center;
572   - text-overflow: clip;
573   - overflow: hidden;
574   - }
575   - .iconfont {
576   - width: 13px;
577   - height: 13px;
578   - line-height: 16px;
579   - align-items: center;
580   - justify-content: center;
581   - transition: transform .2s linear, color .2s linear;
582   - }
583   - }
584   - }
585   - .sub-menu-class {
586   - width: 100%;
587   - position: absolute;
588   - left: 0;
589   - transform: translate3d(0, - 100%, 0);
590   - max-height: 345px;
591   - background-color: #ffffff;
592   - z-index: 11;
593   - box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
594   - overflow: hidden;
595   - flex-direction: row;
596   - transition: transform .15s linear;
597   - &.hide {
598   - display: none;
599   - }
  646 + .iconfont {
  647 + color: #ff6b4a;
  648 + }
  649 + }
  650 + .name {
  651 + height: 20px;
  652 + // font-size: 16px;
  653 + text-align: center;
  654 + text-overflow: clip;
  655 + overflow: hidden;
  656 + }
  657 + .iconfont {
  658 + width: 13px;
  659 + height: 13px;
  660 + line-height: 16px;
  661 + align-items: center;
  662 + justify-content: center;
  663 + transition: transform 0.2s linear, color 0.2s linear;
  664 + }
  665 + }
  666 +}
  667 +.sub-menu-class {
  668 + width: 100%;
  669 + position: absolute;
  670 + left: 0;
  671 + transform: translate3d(0, -100%, 0);
  672 + max-height: 345px;
  673 + background-color: #ffffff;
  674 + z-index: 11;
  675 + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  676 + overflow: hidden;
  677 + flex-direction: row;
  678 + transition: transform 0.15s linear;
  679 + &.hide {
  680 + display: none;
  681 + }
600 682  
601   - &.show {
602   - transform: translate3d(0, calc(44px + 1rpx), 0);
603   - }
604   - }
605   - .sub-menu-list {
606   - width: 100%;
607   - height: 345px;
608   - flex-direction: column;
609   - .sub-menu {
610   - min-height: 44px;
611   - font-size: 13px;
612   - flex-direction: column;
613   - padding-right: 15px;
614   - >.menu-name {
615   - height: 44px;
616   - flex-direction: row;
617   - align-items: center;
618   - justify-content: space-between;
619   - >.iconfont {
620   - display: none;
621   - font-size: 18px;
622   - color: #FF6B4A;
623   - }
624   - }
625   - }
626   - &.first {
627   - flex-shrink: 0;
628   - width: 236rpx;
629   - background-color: #f0f0f0;
630   - .sub-menu {
631   - padding-left: 15px;
  683 + &.show {
  684 + transform: translate3d(0, calc(44px + 1rpx), 0);
  685 + }
  686 +}
  687 +.sub-menu-list {
  688 + width: 100%;
  689 + height: 345px;
  690 + flex-direction: column;
  691 + .sub-menu {
  692 + min-height: 44px;
  693 + font-size: 13px;
  694 + flex-direction: column;
  695 + padding-right: 15px;
  696 + > .menu-name {
  697 + height: 44px;
  698 + flex-direction: row;
  699 + align-items: center;
  700 + justify-content: space-between;
  701 + > .iconfont {
  702 + display: none;
  703 + font-size: 18px;
  704 + color: #ff6b4a;
  705 + }
  706 + }
  707 + }
  708 + &.first {
  709 + flex-shrink: 0;
  710 + width: 236rpx;
  711 + background-color: #f0f0f0;
  712 + .sub-menu {
  713 + padding-left: 15px;
632 714  
633   - &.on {
634   - background-color: #fff;
635   - }
636   - }
637   - }
638   - &.alone {
639   - max-height: 345px;
640   - min-height: 60rpx;
641   - height: auto;
642   - .sub-menu {
643   - min-height: calc(44px - 1rpx);
644   - margin-left: 15px;
645   - border-bottom: solid 1rpx #e5e5e5;
  715 + &.on {
  716 + background-color: #fff;
  717 + }
  718 + }
  719 + }
  720 + &.alone {
  721 + max-height: 345px;
  722 + min-height: 60rpx;
  723 + height: auto;
  724 + .sub-menu {
  725 + min-height: calc(44px - 1rpx);
  726 + margin-left: 15px;
  727 + border-bottom: solid 1rpx #e5e5e5;
646 728  
647   - &.on {
648   - color: #FF6B4A;
  729 + &.on {
  730 + color: #ff6b4a;
649 731  
650   - >.menu-name {
651   - >.iconfont {
652   - display: block;
653   - }
654   - }
655   - }
656   - }
657   - }
658   - &.not-first {
659   - .sub-menu {
660   - min-height: calc(44px - 1rpx);
661   - margin-left: 15px;
662   - border-bottom: solid 1rpx #e5e5e5;
663   - >.menu-name {
664   - height: calc(44px - 1rpx);
665   - >.iconfont {
666   - display: none;
667   - font-size: 18px;
668   - color: #FF6B4A;
669   - }
670   - }
671   - &.on {
672   - color: #FF6B4A;
673   - >.menu-name {
674   - >.iconfont {
675   - display: block;
676   - }
677   - }
678   - }
679   - .more-sub-menu {
680   - flex-direction: row;
681   - flex-wrap: wrap;
682   - padding-bottom: 9px;
683   - >text {
684   - height: 30px;
685   - border-radius: 3px;
686   - background-color: #f5f5f5;
687   - color: #9b9b9b;
688   - margin-bottom: 6px;
689   - margin-right: 6px;
690   - text-align: center;
691   - line-height: 30px;
692   - border: solid #f5f5f5 1rpx;
693   - flex: 0 0 calc(33.33% - 6px);
694   - overflow: hidden;
695   - font-size: 12px;
696   - &:nth-child(3n) {
697   - margin-right: 0;
698   - }
699   - &.on {
700   - border-color: #f6c8ac;
701   - color: #FF6B4A;
702   - }
703   - .iconfont {
704   - color: #9b9b9b;
705   - }
706   - }
707   - }
708   - }
709   - }
710   - }
711   - .filter {
712   - width: 100%;
713   - height: 345px;
714   - display: flex;
715   - flex-direction: column;
716   - justify-content: space-between;
717   - align-items: center;
718   - .menu-box {
719   - width: 698rpx;
720   - height: calc(345px - 75px);
721   - flex-shrink: 1;
722   - .box {
723   - width: 100%;
724   - margin-top: 16px;
725   - flex-direction: column;
726   - .title {
727   - width: 100%;
728   - font-size: 13px;
729   - color: #888;
730   - }
731   - .labels {
732   - flex-direction: row;
733   - flex-wrap: wrap;
734   - .on {
735   - border-color: #FF6B4A;
736   - background-color: #FF6B4A;
737   - color: #fff;
738   - }
739   - >view {
740   - width: 148rpx;
741   - height: 30px;
742   - border: solid 1rpx #adadad;
743   - border-radius: 2px;
744   - margin-right: 15px;
745   - margin-top: 8px;
746   - padding: 0 16rpx;
747   - box-sizing: border-box;
748   - font-size: 12px;
749   - flex-direction: row;
750   - justify-content: center;
751   - align-items: center;
752   - overflow: hidden;
753   - white-space: nowrap;
754   - text-overflow: ellipsis;
755   - &:nth-child(4n) {
756   - margin-right: 0;
757   - }
758   - }
759   - }
760   - }
761   - }
762   - .btn-box {
763   - flex-shrink: 0;
764   - width: 100%;
765   - height: 75px;
766   - flex-direction: row !important;
767   - align-items: center;
768   - justify-content: space-between;
769   - >view {
770   - width: 320rpx;
771   - height: 40px;
772   - border-radius: 40px;
773   - border: solid 1rpx #FF6B4A;
774   - align-items: center;
775   - justify-content: center;
776   - }
777   - .reset {
778   - color: #FF6B4A;
779   - }
780   - .submit {
781   - color: #fff;
782   - background-color: #FF6B4A;
783   - }
784   - }
785   - }
786   - .mask {
787   - z-index: 10;
788   - position: fixed;
789   - top: 0;
790   - left: 0;
791   - right: 0;
792   - bottom: 0;
793   - background-color: rgba(0, 0, 0, 0);
794   - transition: background-color .15s linear;
795   - &.show {
796   - background-color: rgba(0, 0, 0, 0.5);
797   - }
798   - &.hide {
799   - display: none;
800   - }
801   - }
802   - /* 字体图标 */
803   - @font-face {
804   - font-family: "HM-FD-font";
805   - 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=');
806   - }
807   - .iconfont {
808   - font-family: "HM-FD-font" !important;
809   - font-size: 13px;
810   - font-style: normal;
811   - color: #757575;
812   - &.triangle {
813   - &:before {
814   - content: "\e65a";
815   - }
816   - }
817   - &.selected {
818   - &:before {
819   - content: "\e607";
820   - }
821   - }
822   - }
  732 + > .menu-name {
  733 + > .iconfont {
  734 + display: block;
  735 + }
  736 + }
  737 + }
  738 + }
  739 + }
  740 + &.not-first {
  741 + .sub-menu {
  742 + min-height: calc(44px - 1rpx);
  743 + margin-left: 15px;
  744 + border-bottom: solid 1rpx #e5e5e5;
  745 + > .menu-name {
  746 + height: calc(44px - 1rpx);
  747 + > .iconfont {
  748 + display: none;
  749 + font-size: 18px;
  750 + color: #ff6b4a;
  751 + }
  752 + }
  753 + &.on {
  754 + color: #ff6b4a;
  755 + > .menu-name {
  756 + > .iconfont {
  757 + display: block;
  758 + }
  759 + }
  760 + }
  761 + .more-sub-menu {
  762 + flex-direction: row;
  763 + flex-wrap: wrap;
  764 + padding-bottom: 9px;
  765 + > text {
  766 + height: 30px;
  767 + border-radius: 3px;
  768 + background-color: #f5f5f5;
  769 + color: #9b9b9b;
  770 + margin-bottom: 6px;
  771 + margin-right: 6px;
  772 + text-align: center;
  773 + line-height: 30px;
  774 + border: solid #f5f5f5 1rpx;
  775 + flex: 0 0 calc(33.33% - 6px);
  776 + overflow: hidden;
  777 + font-size: 12px;
  778 + &:nth-child(3n) {
  779 + margin-right: 0;
  780 + }
  781 + &.on {
  782 + border-color: #f6c8ac;
  783 + color: #ff6b4a;
  784 + }
  785 + .iconfont {
  786 + color: #9b9b9b;
  787 + }
  788 + }
  789 + }
  790 + }
  791 + }
  792 +}
  793 +.filter {
  794 + width: 100%;
  795 + height: 345px;
  796 + display: flex;
  797 + flex-direction: column;
  798 + justify-content: space-between;
  799 + align-items: center;
  800 + .menu-box {
  801 + width: 698rpx;
  802 + height: calc(345px - 75px);
  803 + flex-shrink: 1;
  804 + .box {
  805 + width: 100%;
  806 + margin-top: 16px;
  807 + flex-direction: column;
  808 + .title {
  809 + width: 100%;
  810 + font-size: 13px;
  811 + color: #888;
  812 + }
  813 + .labels {
  814 + flex-direction: row;
  815 + flex-wrap: wrap;
  816 + .on {
  817 + border-color: #ff6b4a;
  818 + background-color: #ff6b4a;
  819 + color: #fff;
  820 + }
  821 + > view {
  822 + width: 148rpx;
  823 + height: 30px;
  824 + border: solid 1rpx #adadad;
  825 + border-radius: 2px;
  826 + margin-right: 15px;
  827 + margin-top: 8px;
  828 + padding: 0 16rpx;
  829 + box-sizing: border-box;
  830 + font-size: 12px;
  831 + flex-direction: row;
  832 + justify-content: center;
  833 + align-items: center;
  834 + overflow: hidden;
  835 + white-space: nowrap;
  836 + text-overflow: ellipsis;
  837 + &:nth-child(4n) {
  838 + margin-right: 0;
  839 + }
  840 + }
  841 + }
  842 + }
  843 + }
  844 + .btn-box {
  845 + flex-shrink: 0;
  846 + width: 100%;
  847 + height: 75px;
  848 + flex-direction: row !important;
  849 + align-items: center;
  850 + justify-content: space-between;
  851 + > view {
  852 + width: 320rpx;
  853 + height: 40px;
  854 + border-radius: 40px;
  855 + border: solid 1rpx #ff6b4a;
  856 + align-items: center;
  857 + justify-content: center;
  858 + }
  859 + .reset {
  860 + color: #ff6b4a;
  861 + }
  862 + .submit {
  863 + color: #fff;
  864 + background-color: #ff6b4a;
  865 + }
  866 + }
  867 +}
  868 +.mask {
  869 + z-index: 10;
  870 + position: fixed;
  871 + top: 0;
  872 + left: 0;
  873 + right: 0;
  874 + bottom: 0;
  875 + background-color: rgba(0, 0, 0, 0);
  876 + transition: background-color 0.15s linear;
  877 + &.show {
  878 + background-color: rgba(0, 0, 0, 0.5);
  879 + }
  880 + &.hide {
  881 + display: none;
  882 + }
  883 +}
  884 +/* 字体图标 */
  885 +@font-face {
  886 + font-family: "HM-FD-font";
  887 + 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=");
  888 +}
  889 +.iconfont {
  890 + font-family: "HM-FD-font" !important;
  891 + font-size: 13px;
  892 + font-style: normal;
  893 + color: #757575;
  894 + &.triangle {
  895 + &:before {
  896 + content: "\e65a";
  897 + }
  898 + }
  899 + &.selected {
  900 + &:before {
  901 + content: "\e607";
  902 + }
  903 + }
  904 +}
823 905 </style>
... ...
src/components/UniCollapse/UniCollapse.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="uni-collapse">
3   - <slot />
4   - </view>
  2 + <view class="uni-collapse">
  3 + <slot />
  4 + </view>
5 5 </template>
6 6 <script>
7   - export default {
8   - name: 'UniCollapse',
9   - props: {
10   - accordion: {
11   - // 是否开启手风琴效果
12   - type: [Boolean, String],
13   - default: false
14   - }
15   - },
16   - data() {
17   - return {}
18   - },
19   - provide() {
20   - return {
21   - collapse: this
22   - }
23   - },
24   - created() {
25   - this.childrens = []
26   - },
27   - methods: {
28   - onChange() {
29   - let activeItem = []
30   - this.childrens.forEach((vm, index) => {
31   - if (vm.isOpen) {
32   - activeItem.push(vm.nameSync)
33   - }
34   - })
35   - this.$emit('change', activeItem)
36   - }
37   - }
38   - }
  7 +export default {
  8 + name: 'UniCollapse',
  9 + props: {
  10 + accordion: {
  11 + // 是否开启手风琴效果
  12 + type: [Boolean, String],
  13 + default: false
  14 + }
  15 + },
  16 + data() {
  17 + return {}
  18 + },
  19 + provide() {
  20 + return {
  21 + collapse: this
  22 + }
  23 + },
  24 + created() {
  25 + this.childrens = []
  26 + },
  27 + methods: {
  28 + onChange() {
  29 + const activeItem = []
  30 + this.childrens.forEach((vm, index) => {
  31 + if (vm.isOpen) {
  32 + activeItem.push(vm.nameSync)
  33 + }
  34 + })
  35 + this.$emit('change', activeItem)
  36 + }
  37 + }
  38 +}
39 39 </script>
40 40 <style lang="scss" scoped>
41   - @import '@/uni.scss';
  41 +@import "@/uni.scss";
42 42  
43   - .uni-collapse {
44   - /* #ifndef APP-NVUE */
45   - width: 100%;
46   - display: flex;
47   - /* #endif */
48   - /* #ifdef APP-NVUE */
49   - flex: 1;
50   - /* #endif */
51   - flex-direction: column;
52   - background-color: $uni-bg-color;
53   - }
54   -</style>
  43 +.uni-collapse {
  44 + /* #ifndef APP-NVUE */
  45 + width: 100%;
  46 + display: flex;
  47 + /* #endif */
  48 + /* #ifdef APP-NVUE */
  49 + flex: 1;
  50 + /* #endif */
  51 + flex-direction: column;
  52 + background-color: $uni-bg-color;
  53 +}
  54 +</style>
... ...
src/components/UniCollapseItem/UniCollapseItem.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
3   - class="uni-collapse-cell">
4   - <view class="uni-collapse-cell__title" @click="onClick">
5   - <view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}">{{iconText}}</view>
6   - <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
7   - <text class="uni-collapse-cell__title-text">{{ title }}</text>
8   - <text class="uni-collapse-cell__time-text">{{ time }}</text>
9   - <!-- #ifdef MP-ALIPAY -->
10   - <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
11   - class="uni-collapse-cell__title-arrow">
12   - <uni-icons color="#bbb" size="20" type="arrowdown" />
13   - </view>
14   - <!-- #endif -->
15   - <!-- #ifndef MP-ALIPAY -->
16   - <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
17   - class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
18   - <!-- #endif -->
19   - </view>
20   - <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
21   - <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper"
22   - :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">
23   - <slot />
24   - </view>
25   - </view>
26   - </view>
  2 + <view
  3 + :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
  4 + class="uni-collapse-cell"
  5 + >
  6 + <view
  7 + class="uni-collapse-cell__title"
  8 + @click="onClick"
  9 + >
  10 + <view
  11 + v-if="iconText"
  12 + class="uni-collapse-cell__title-iconText"
  13 + v-bind:style="{background:background}"
  14 + >{{iconText}}</view>
  15 + <image
  16 + v-if="thumb"
  17 + :src="thumb"
  18 + class="uni-collapse-cell__title-img"
  19 + />
  20 + <text class="uni-collapse-cell__title-text">{{ title }}</text>
  21 + <text class="uni-collapse-cell__time-text">{{ time }}</text>
  22 + <!-- #ifdef MP-ALIPAY -->
  23 + <view
  24 + :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
  25 + class="uni-collapse-cell__title-arrow"
  26 + >
  27 + <uni-icons
  28 + color="#bbb"
  29 + size="20"
  30 + type="arrowdown"
  31 + />
  32 + </view>
  33 + <!-- #endif -->
  34 + <!-- #ifndef MP-ALIPAY -->
  35 + <uni-icons
  36 + :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
  37 + class="uni-collapse-cell__title-arrow"
  38 + color="#bbb"
  39 + size="20"
  40 + type="arrowdown"
  41 + />
  42 + <!-- #endif -->
  43 + </view>
  44 + <view
  45 + :class="{'uni-collapse-cell__content--hide':!isOpen}"
  46 + class="uni-collapse-cell__content"
  47 + >
  48 + <view
  49 + :class="{ 'uni-collapse-cell--animation': showAnimation === true }"
  50 + class="uni-collapse-cell__wrapper"
  51 + :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"
  52 + >
  53 + <slot />
  54 + </view>
  55 + </view>
  56 + </view>
27 57 </template>
28 58  
29 59 <script>
30   - import UniIcons from '../UniIcons/UniIcons.vue'
31   - export default {
32   - name: 'UniCollapseItem',
33   - components: {
34   - UniIcons
35   - },
36   - props: {
37   - title: {
38   - // 列表标题
39   - type: String,
40   - default: ''
41   - },
42   - time: {
43   - // 列表时间 朱海涛加的，验光数据需要
44   - type: String,
45   - default: ''
46   - },
47   - name: {
48   - // 唯一标识符
49   - type: [Number, String],
50   - default: 0
51   - },
52   - disabled: {
53   - // 是否禁用
54   - type: Boolean,
55   - default: false
56   - },
57   - showAnimation: {
58   - // 是否显示动画
59   - type: Boolean,
60   - default: false
61   - },
62   - open: {
63   - // 是否展开
64   - type: Boolean,
65   - default: false
66   - },
67   - thumb: {
68   - // 缩略图
69   - type: String,
70   - default: ''
71   - },
72   - iconText:{
73   - //名字头像
74   - type:String,
75   - default:''
76   - }
77   - },
78   - data() {
79   - return {
80   - isOpen: false,
81   - background: ''
82   -
83   - }
84   - },
85   - watch: {
86   - open(val) {
87   - this.isOpen = val
88   - }
89   - },
90   - inject: ['collapse'],
91   - created() {
92   - this.isOpen = this.open
93   - this.nameSync = this.name ? this.name : this.collapse.childrens.length
94   - this.collapse.childrens.push(this)
95   - if (String(this.collapse.accordion) === 'true') {
96   - if (this.isOpen) {
97   - let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
98   - if (lastEl) {
99   - this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
100   - }
101   - }
102   - }
103   - },
104   - computed:{
105   - //给头像搞个随机背景颜色，验光数据页面需要
106   - getRandomColor(){
107   - let r = Math.floor(Math.random()*256);
108   - let g = Math.floor(Math.random()*256);
109   - let b = Math.floor(Math.random()*256);
110   - let color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
111   - this.background = color
112   - // return color;
113   - }
114   - },
115   - methods: {
116   - onClick() {
117   - if (this.disabled) {
118   - return
119   - }
120   - if (String(this.collapse.accordion) === 'true') {
121   - this.collapse.childrens.forEach(vm => {
122   - if (vm === this) {
123   - return
124   - }
125   - vm.isOpen = false
126   - })
127   - }
128   - this.isOpen = !this.isOpen
129   - this.collapse.onChange && this.collapse.onChange()
130   - this.$forceUpdate()
131   - // console.log(this.isOpen)
132   - },
133   - }
134   - }
  60 +import UniIcons from '../UniIcons/UniIcons.vue'
  61 +export default {
  62 + name: 'UniCollapseItem',
  63 + components: {
  64 + UniIcons
  65 + },
  66 + props: {
  67 + title: {
  68 + // 列表标题
  69 + type: String,
  70 + default: ''
  71 + },
  72 + time: {
  73 + // 列表时间 朱海涛加的，验光数据需要
  74 + type: String,
  75 + default: ''
  76 + },
  77 + name: {
  78 + // 唯一标识符
  79 + type: [Number, String],
  80 + default: 0
  81 + },
  82 + disabled: {
  83 + // 是否禁用
  84 + type: Boolean,
  85 + default: false
  86 + },
  87 + showAnimation: {
  88 + // 是否显示动画
  89 + type: Boolean,
  90 + default: false
  91 + },
  92 + open: {
  93 + // 是否展开
  94 + type: Boolean,
  95 + default: false
  96 + },
  97 + thumb: {
  98 + // 缩略图
  99 + type: String,
  100 + default: ''
  101 + },
  102 + iconText: {
  103 + // 名字头像
  104 + type: String,
  105 + default: ''
  106 + }
  107 + },
  108 + data() {
  109 + return {
  110 + isOpen: false,
  111 + background: ''
  112 +
  113 + }
  114 + },
  115 + watch: {
  116 + open(val) {
  117 + this.isOpen = val
  118 + }
  119 + },
  120 + inject: ['collapse'],
  121 + created() {
  122 + this.isOpen = this.open
  123 + this.nameSync = this.name ? this.name : this.collapse.childrens.length
  124 + this.collapse.childrens.push(this)
  125 + if (String(this.collapse.accordion) === 'true') {
  126 + if (this.isOpen) {
  127 + const lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
  128 + if (lastEl) {
  129 + this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
  130 + }
  131 + }
  132 + }
  133 + },
  134 + computed: {
  135 + // 给头像搞个随机背景颜色，验光数据页面需要
  136 + getRandomColor() {
  137 + const r = Math.floor(Math.random() * 256)
  138 + const g = Math.floor(Math.random() * 256)
  139 + const b = Math.floor(Math.random() * 256)
  140 + const color = '#' + r.toString(16) + g.toString(16) + b.toString(16)
  141 + this.background = color
  142 + // return color;
  143 + }
  144 + },
  145 + methods: {
  146 + onClick() {
  147 + if (this.disabled) {
  148 + return
  149 + }
  150 + if (String(this.collapse.accordion) === 'true') {
  151 + this.collapse.childrens.forEach(vm => {
  152 + if (vm === this) {
  153 + return
  154 + }
  155 + vm.isOpen = false
  156 + })
  157 + }
  158 + this.isOpen = !this.isOpen
  159 + this.collapse.onChange && this.collapse.onChange()
  160 + this.$forceUpdate()
  161 + // console.log(this.isOpen)
  162 + }
  163 + }
  164 +}
135 165 </script>
136 166  
137 167 <style lang="scss" scoped>
138   - @import '@/uni.scss';
139   -
140   - .uni-collapse-cell {
141   - flex-direction: column;
142   - border-color: #FFFFFF;
143   - border-bottom-width: 1px;
144   - border-bottom-style: solid;
145   - }
146   -
147   -
148   - .uni-collapse-cell--hover {
149   - background-color: #FFFFFF;
150   - }
  168 +@import "@/uni.scss";
151 169  
152   - .uni-collapse-cell--open {
153   - background-color: #FFFFFF;
154   - }
  170 +.uni-collapse-cell {
  171 + flex-direction: column;
  172 + border-color: #ffffff;
  173 + border-bottom-width: 1px;
  174 + border-bottom-style: solid;
  175 +}
155 176  
156   - .uni-collapse-cell--disabled {
157   - background-color: #FFFFFF;
158   - // opacity: 0.3;
159   - }
  177 +.uni-collapse-cell--hover {
  178 + background-color: #ffffff;
  179 +}
160 180  
  181 +.uni-collapse-cell--open {
  182 + background-color: #ffffff;
  183 +}
161 184  
162   - .uni-collapse-cell--hide {
163   - height: 48px;
164   - }
  185 +.uni-collapse-cell--disabled {
  186 + background-color: #ffffff;
  187 + // opacity: 0.3;
  188 +}
165 189  
166   - .uni-collapse-cell--animation {
167   - transition: transform all 0.5s ease;
168   - transition-property: transform;
169   - transition-duration: 0.5s;
170   - transition-timing-function: ease;
171   - }
  190 +.uni-collapse-cell--hide {
  191 + height: 48px;
  192 +}
172 193  
173   - .uni-collapse-cell__title {
174   - // padding: 12px 12px;
175   - font-size: 16px;
176   - color: #333333;
177   - position: relative;
178   - /* #ifndef APP-NVUE */
179   - display: flex;
180   - width: 100%;
181   - box-sizing: border-box;
182   - /* #endif */
183   - height: 48px;
184   - line-height: 24px;
185   - flex-direction: row;
186   - justify-content: space-between;
187   - align-items: center;
188   - }
189   - .uni-collapse-cell__title-iconText{
190   - border: 1px solid #FFFFFF;
191   - height: 50rpx;
192   - width: 50rpx;
193   - border-radius: 26rpx;
194   - // background-color: #47A6F0;
195   - font-size: 12px;
196   - color: #FFFFFF;
197   - line-height: 50rpx;
198   - text-align: center;
199   - margin-right: 20rpx;
200   - }
201   - .uni-collapse-cell__title:active {
202   - background-color: #FFFFFF;
203   - }
  194 +.uni-collapse-cell--animation {
  195 + transition: transform all 0.5s ease;
  196 + transition-property: transform;
  197 + transition-duration: 0.5s;
  198 + transition-timing-function: ease;
  199 +}
204 200  
205   - .uni-collapse-cell__title-img {
206   - height: $uni-img-size-base;
207   - width: $uni-img-size-base;
208   - margin-right: 10px;
209   - // height: 50rpx;
210   - // width: 50rpx;
211   - // border-radius: 25rpx;
212   - // border-radius: 25rpx;
213   - }
  201 +.uni-collapse-cell__title {
  202 + // padding: 12px 12px;
  203 + font-size: 16px;
  204 + color: #333333;
  205 + position: relative;
  206 + /* #ifndef APP-NVUE */
  207 + display: flex;
  208 + width: 100%;
  209 + box-sizing: border-box;
  210 + /* #endif */
  211 + height: 48px;
  212 + line-height: 24px;
  213 + flex-direction: row;
  214 + justify-content: space-between;
  215 + align-items: center;
  216 +}
  217 +.uni-collapse-cell__title-iconText {
  218 + border: 1px solid #ffffff;
  219 + height: 50rpx;
  220 + width: 50rpx;
  221 + border-radius: 26rpx;
  222 + // background-color: #47A6F0;
  223 + font-size: 12px;
  224 + color: #ffffff;
  225 + line-height: 50rpx;
  226 + text-align: center;
  227 + margin-right: 20rpx;
  228 +}
  229 +.uni-collapse-cell__title:active {
  230 + background-color: #ffffff;
  231 +}
214 232  
215   - .uni-collapse-cell__title-arrow {
216   - width: 20px;
217   - height: 20px;
218   - transform: rotate(-90deg);
219   - transform-origin: center center;
  233 +.uni-collapse-cell__title-img {
  234 + height: $uni-img-size-base;
  235 + width: $uni-img-size-base;
  236 + margin-right: 10px;
  237 + // height: 50rpx;
  238 + // width: 50rpx;
  239 + // border-radius: 25rpx;
  240 + // border-radius: 25rpx;
  241 +}
220 242  
221   - }
  243 +.uni-collapse-cell__title-arrow {
  244 + width: 20px;
  245 + height: 20px;
  246 + transform: rotate(-90deg);
  247 + transform-origin: center center;
  248 +}
222 249  
223   - .uni-collapse-cell__title-arrow-active {
224   - transform: rotate(0deg);
225   - }
  250 +.uni-collapse-cell__title-arrow-active {
  251 + transform: rotate(0deg);
  252 +}
226 253  
227   - .uni-collapse-cell__title-text {
228   - flex: 1;
229   - font-size: $uni-font-size-base;
230   - /* #ifndef APP-NVUE */
231   - white-space: nowrap;
232   - color: inherit;
233   - /* #endif */
234   - /* #ifdef APP-NVUE */
235   - lines: 1;
236   - /* #endif */
237   - overflow: hidden;
238   - text-overflow: ellipsis;
239   - font-size: 12px;
240   - color: #333333;
241   - }
242   - .uni-collapse-cell__time-text{
243   - font-size: 12px;
244   - color: #999999;
245   - margin-right: 20rpx;
246   - }
247   - .uni-collapse-cell__content {
248   - overflow: hidden;
249   - }
  254 +.uni-collapse-cell__title-text {
  255 + flex: 1;
  256 + font-size: $uni-font-size-base;
  257 + /* #ifndef APP-NVUE */
  258 + white-space: nowrap;
  259 + color: inherit;
  260 + /* #endif */
  261 + /* #ifdef APP-NVUE */
  262 + lines: 1;
  263 + /* #endif */
  264 + overflow: hidden;
  265 + text-overflow: ellipsis;
  266 + font-size: 12px;
  267 + color: #333333;
  268 +}
  269 +.uni-collapse-cell__time-text {
  270 + font-size: 12px;
  271 + color: #999999;
  272 + margin-right: 20rpx;
  273 +}
  274 +.uni-collapse-cell__content {
  275 + overflow: hidden;
  276 +}
250 277  
251   - .uni-collapse-cell__wrapper {
252   - /* #ifndef APP-NVUE */
253   - display: flex;
254   - /* #endif */
255   - flex-direction: column;
256   - }
  278 +.uni-collapse-cell__wrapper {
  279 + /* #ifndef APP-NVUE */
  280 + display: flex;
  281 + /* #endif */
  282 + flex-direction: column;
  283 +}
257 284  
258   - .uni-collapse-cell__content--hide {
259   - // height: 0px;
260   - // line-height: 0px;
261   - }
  285 +.uni-collapse-cell__content--hide {
  286 + // height: 0px;
  287 + // line-height: 0px;
  288 +}
262 289 </style>
... ...
1 1 {
2   - "pages" : [
  2 + "pages": [
3 3 {
4   - "path" : "pages/user/user",
5   - "style" : {
6   - "navigationBarTitleText" : "我的"
  4 + "path": "pages/index/index",
  5 + "style": {
  6 + "navigationBarTitleText": "商城一览"
7 7 }
8   - },
9   - {
10   - "path" : "pages/addOpticsData/addOpticsData",
11   - "style" : {
12   - "navigationBarTitleText" : "验光数据"}
13 8 },
14 9 {
15   - "path" : "pages/index/index",
16   - "style" : {
17   - "navigationBarTitleText" : "商城一览"
  10 + "path": "pages/user/user",
  11 + "style": {
  12 + "navigationBarTitleText": "我的"
18 13 }
19 14 },
20 15 {
21   - "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
22   - "style" : {
23   - "navigationBarTitleText" : "镜片名称名称"
  16 + "path": "pages/addOpticsData/addOpticsData",
  17 + "style": {
  18 + "navigationBarTitleText": "验光数据"
24 19 }
25 20 },
26 21 {
27   - "path" : "pages/purchaseLenses/purchaseLenses",
28   - "style" : {
29   - "navigationBarTitleText" : "产品选购"
  22 + "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
  23 + "style": {
  24 + "navigationBarTitleText": "镜片名称名称"
30 25 }
31 26 },
32 27 {
33   - "path" : "pages/lensDetails/lensDetails",
34   - "style" : {
35   - "navigationBarTitleText" : "产品详情"
  28 + "path": "pages/purchaseLenses/purchaseLenses",
  29 + "style": {
  30 + "navigationBarTitleText": "参数选择"
36 31 }
37 32 },
38 33 {
39   - "path" : "pages/myOrderPaying/myOrderPaying",
40   - "style" : {
41   - "navigationBarTitleText" : "我的订单"
  34 + "path": "pages/lensDetails/lensDetails",
  35 + "style": {
  36 + "navigationBarTitleText": "产品详情"
42 37 }
43 38 },
44 39 {
45   - "path" : "pages/myOrder/myOrder",
46   - "style" : {
47   - "navigationBarTitleText" : "我的订单"
  40 + "path": "pages/myOrderPaying/myOrderPaying",
  41 + "style": {
  42 + "navigationBarTitleText": "我的订单"
48 43 }
49 44 },
50 45 {
51   - "path" : "pages/cart/cart",
52   - "style" : {
53   - "navigationBarTitleText" : "购物车"
  46 + "path": "pages/myOrder/myOrder",
  47 + "style": {
  48 + "navigationBarTitleText": "我的订单"
54 49 }
55 50 },
56   - {
57   - "path" : "pages/frameDetail/frameDetail",
58   - "style" : {
59   - "navigationBarTitleText" : "产品详情"
60   - }
61   - },
62 51 {
63   - "path" : "pages/refundProgress/refundProgress",
64   - "style" : {
65   - "navigationBarTitleText" : "申请退款"
  52 + "path": "pages/cart/cart",
  53 + "style": {
  54 + "navigationBarTitleText": "购物车"
66 55 }
67 56 },
68 57 {
69   - "path" : "pages/address/addAddress",
70   - "style" : {
71   - "navigationBarTitleText" : "新增地址"
  58 + "path": "pages/frameDetail/frameDetail",
  59 + "style": {
  60 + "navigationBarTitleText": "产品详情"
72 61 }
73 62 },
74 63 {
75   - "path" : "pages/address/addressList",
76   - "style" : {
77   - "navigationBarTitleText" : "地址管理"
  64 + "path": "pages/refundProgress/refundProgress",
  65 + "style": {
  66 + "navigationBarTitleText": "申请退款"
78 67 }
79 68 },
80 69 {
81   - "path" : "pages/confirmOrder/confirmOrder",
82   - "style" : {
83   - "navigationBarTitleText" : "确认订单"
  70 + "path": "pages/address/addAddress",
  71 + "style": {
  72 + "navigationBarTitleText": "新增地址"
84 73 }
85 74 },
86 75 {
87   - "path" : "pages/refundment/refundWays",
88   - "style" : {
89   - "navigationBarTitleText" : "退款方式"
  76 + "path": "pages/address/addressList",
  77 + "style": {
  78 + "navigationBarTitleText": "地址管理"
90 79 }
91 80 },
92 81 {
93   - "path" : "pages/refundment/refundment",
94   - "style" : {
95   - "navigationBarTitleText" : "申请退款"
  82 + "path": "pages/confirmOrder/confirmOrder",
  83 + "style": {
  84 + "navigationBarTitleText": "确认订单"
96 85 }
97 86 },
98 87 {
99   - "path" : "pages/predelivery/predelivery",
100   - "style" : {
101   - "navigationBarTitleText" : "待发货"
  88 + "path": "pages/refundment/refundWays",
  89 + "style": {
  90 + "navigationBarTitleText": "退款方式"
102 91 }
103 92 },
104 93 {
105   - "path" : "pages/customerService/customerService",
106   - "style" : {
107   - "navigationBarTitleText" : "在线客服"
  94 + "path": "pages/refundment/refundment",
  95 + "style": {
  96 + "navigationBarTitleText": "申请退款"
108 97 }
109 98 },
110 99 {
111   - "path" : "pages/detailStandard/detailStandard_sun",
112   - "style" : {
113   - "navigationBarTitleText" : "太阳镜选购页"
  100 + "path": "pages/predelivery/predelivery",
  101 + "style": {
  102 + "navigationBarTitleText": "待发货"
114 103 }
115 104 },
116 105 {
117   - "path" : "pages/detailStandard/detailStandard_k",
118   - "style" : {
119   - "navigationBarTitleText" : "镜框选购页"
  106 + "path": "pages/customerService/customerService",
  107 + "style": {
  108 + "navigationBarTitleText": "在线客服"
120 109 }
121   - }
122   -
123   - ,{
124   - "path" : "pages/newOpticsData/newOpticsData",
125   - "style" : {"navigationBarTitleText" : "验光数据"}
126   - }
  110 + },
  111 + {
  112 + "path": "pages/detailStandard/detailStandard_sun",
  113 + "style": {
  114 + "navigationBarTitleText": "太阳镜选购页"
  115 + }
  116 + },
  117 + {
  118 + "path": "pages/detailStandard/detailStandard_k",
  119 + "style": {
  120 + "navigationBarTitleText": "镜框选购页"
  121 + }
  122 + },
  123 + {
  124 + "path": "pages/newOpticsData/newOpticsData",
  125 + "style": {
  126 + "navigationBarTitleText": "验光数据"
  127 + }
  128 + }
127 129 ],
128   - "globalStyle" : {
129   - "navigationBarTextStyle" : "black",
130   - "navigationBarTitleText" : "uni-app",
131   - "navigationBarBackgroundColor" : "#F8F8F8",
132   - "backgroundColor" : "#F8F8F8"
  130 + "globalStyle": {
  131 + "navigationBarTextStyle": "black",
  132 + "navigationBarTitleText": "uni-app",
  133 + "navigationBarBackgroundColor": "#F8F8F8",
  134 + "backgroundColor": "#F8F8F8"
133 135 },
134   - "tabBar" : {
135   - "color" : "#C0C4CC",
136   - "selectedColor" : "#fa436a",
137   - "borderStyle" : "black",
138   - "backgroundColor" : "#ffffff",
139   - "list" : [
  136 + "tabBar": {
  137 + "color": "#C0C4CC",
  138 + "selectedColor": "#fa436a",
  139 + "borderStyle": "black",
  140 + "backgroundColor": "#ffffff",
  141 + "list": [
140 142 {
141   - "pagePath" : "pages/index/index",
142   - "iconPath" : "static/tab-home.png",
143   - "selectedIconPath" : "static/tab-home-current.png",
144   - "text" : "首页"
  143 + "pagePath": "pages/index/index",
  144 + "iconPath": "static/tab-home.png",
  145 + "selectedIconPath": "static/tab-home-current.png",
  146 + "text": "首页"
145 147 },
146 148 {
147   - "pagePath" : "pages/cart/cart",
148   - "iconPath" : "static/tab-cart.png",
149   - "selectedIconPath" : "static/tab-cart-current.png",
150   - "text" : "购物车"
  149 + "pagePath": "pages/cart/cart",
  150 + "iconPath": "static/tab-cart.png",
  151 + "selectedIconPath": "static/tab-cart-current.png",
  152 + "text": "购物车"
151 153 },
152 154 {
153   - "pagePath" : "pages/user/user",
154   - "iconPath" : "static/tab-my.png",
155   - "selectedIconPath" : "static/tab-my-current.png",
156   - "text" : "我的"
  155 + "pagePath": "pages/user/user",
  156 + "iconPath": "static/tab-my.png",
  157 + "selectedIconPath": "static/tab-my-current.png",
  158 + "text": "我的"
157 159 }
158 160 ]
159 161 },
160   - "condition" : {
161   - "current" : 0,
162   - "list" : [
  162 + "condition": {
  163 + "current": 0,
  164 + "list": [
  165 + {
  166 + "name": "首页",
  167 + "path": "pages/index/index",
  168 + "query": ""
  169 + },
  170 + {
  171 + "name": "产品详情",
  172 + "path": "pages/frameDetail/frameDetail",
  173 + "query": ""
  174 + },
  175 + {
  176 + "name": "镜片、美瞳参数选择",
  177 + "path": "pages/purchaseLenses/purchaseLenses",
  178 + "query": ""
  179 + },
  180 + {
  181 + "name": "确认订单",
  182 + "path": "pages/confirmOrder/confirmOrder",
  183 + "query": ""
  184 + },
  185 + {
  186 + "name": "新增地址",
  187 + "path": "pages/address/addAddress",
  188 + "query": ""
  189 + },
  190 + {
  191 + "name": "地址管理",
  192 + "path": "pages/address/addressList",
  193 + "query": ""
  194 + },
  195 + {
  196 + "name": "我的订单",
  197 + "path": "pages/myOrder/myOrder",
  198 + "query": ""
  199 + },
  200 + {
  201 + "name": "待付款订单详情",
  202 + "path": "pages/myOrderPaying/myOrderPaying",
  203 + "query": ""
  204 + },
163 205 {
164   - "name" : "首页",
165   - "path" : "pages/index/index",
166   - "query" : ""
167   - }, {
168   - "name" : "镜片、美瞳参数选购",
169   - "path" : "pages/purchaseLenses/purchaseLenses",
170   - "query" : ""
171   - }, {
172   - "name" : "新增地址",
173   - "path" : "pages/address/addAddress",
174   - "query" : ""
175   - }, {
176   - "name" : "地址管理",
177   - "path" : "pages/address/addressList",
178   - "query" : ""
  206 + "name": "我的",
  207 + "path": "pages/user/user",
  208 + "query": ""
179 209 }
180 210 ]
181 211 }
... ...
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @3fb9af8
... ... @@ -26,9 +26,9 @@
26 26 <!-- 数据展示部分 -->
27 27 <view class="dataMenu">
28 28 <uni-collapse accordion="true">
29   - <view class="item" v-for="(loveItem,index) in loveList" :key="index">
  29 + <view class="item" v-for="(loveItem,index) in loveList" :key="index" >
30 30 <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
31   - <view class="loveDataInfo">
  31 + <view class="loveDataInfo" @click="toNewData(2,index)">
32 32 <view class="dataInfoItem">
33 33 <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
34 34 </view>
... ... @@ -47,7 +47,7 @@
47 47 </uni-collapse>
48 48 </view>
49 49 <view class="footer">
50   - <button class="btn" type="default" @click="toNewData">新建验光单</button>
  50 + <button class="btn" type="default" @click="toNewData(1)">新建验光单</button>
51 51 </view>
52 52 </view>
53 53 </template>
... ... @@ -67,7 +67,7 @@
67 67 onLoad: function(option) {
68 68 //获取关心的人列表
69 69 store.dispatch('myLoveList/getLoveList', {
70   - uid: "1",
  70 + uid: this.$store.state.user.userInfo.uid,
71 71 });
72 72 },
73 73 computed:{
... ... @@ -99,9 +99,21 @@
99 99 getFirstName(name){
100 100 return name.substring(0,1)
101 101 },
102   - toNewData(){
  102 + toNewData(item,index){
  103 + // const args={
  104 + // name:loveItem.name,
  105 + // pd:loveItem.pd,
  106 + // leftSph:loveItem.leftSph,
  107 + // rightSph:loveItem.rightSph,
  108 + // leftCyl:loveItem.leftCyl,
  109 + // rightCyl:loveItem.rightCyl,
  110 + // leftAxi:loveItem.leftAxi,
  111 + // rightAxi:loveItem.rightAxi
  112 + // }
103 113 uni.navigateTo({
104   - url:'../newOpticsData/newOpticsData'
  114 + // kinds 参数为 1 表示添加新的验光单， 2 表示更新验光单
  115 + // name 表示修改的人名儿，pd瞳距
  116 + url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index
105 117 })
106 118 }
107 119 }
... ... @@ -145,6 +157,7 @@
145 157 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
146 158 width: 100%;
147 159 background-color: #FFFFFF;
  160 + margin-bottom: 120rpx;
148 161 .item{
149 162 padding: 0 40rpx;
150 163 .loveDataInfo{
... ...
src/pages/address/addAddress.vue
Diff comments   View file @3fb9af8
... ... @@ -77,7 +77,11 @@
77 77 </view>
78 78 <button
79 79 form-type="submit"
  80 + class="button" v-if="addId">编辑</button>
  81 + <button
  82 + form-type="submit"
80 83 class="button"
  84 + v-else
81 85 >保存并使用</button>
82 86 </form>
83 87 </template>
... ... @@ -189,13 +193,17 @@ export default {
189 193 mobile,
190 194 default: isDefault ? 1 : 0,
191 195 add_detail: addDetail,
192   - longitude: 0,
193   - latitude: 0
  196 + longitude: 1,
  197 + latitude: 1
194 198 }
195 199 if (this.addId) {
196 200 params.add_id = this.addId
197 201 }
198   - store.dispatch('address/edit', params)
  202 + store.dispatch('address/edit', params).then(() => {
  203 + uni.navigateBack({
  204 + delta: 1
  205 + })
  206 + })
199 207 }
200 208 }
201 209 }
... ...
src/pages/address/addressList.vue
Diff comments   View file @3fb9af8
... ... @@ -7,8 +7,8 @@
7 7 <view
8 8 v-for="(item, index) in addressList"
9 9 :key="index"
10   - @tap="toEditAddress(item.add_id)"
11 10 class="order-user"
  11 + @tap="toOrder(item.add_id)"
12 12 >
13 13 <view class="order-user-head">
14 14 <view class="name">
... ... @@ -24,11 +24,13 @@
24 24 <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text>
25 25 </view>
26 26 <image
  27 + @tap="toEditAddress(item.add_id)"
27 28 v-if="item.default === '1'"
28 29 class="arrow"
29 30 src="../../static/right.png"
30 31 ></image>
31 32 <image
  33 + @tap="toEditAddress(item.add_id)"
32 34 v-else
33 35 class="arrow pen"
34 36 src="../../static/icon-pen.png"
... ... @@ -41,7 +43,7 @@
41 43 >
42 44 暂无收货地址
43 45 </view>
44   - <button class="add">新建收货地址</button>
  46 + <button @tap="toAddAddress" class="add">新建收货地址</button>
45 47 </view>
46 48 </template>
47 49  
... ... @@ -56,10 +58,22 @@ export default {
56 58 return this.$store.state.address.list
57 59 }
58 60 },
59   - onLoad () {
  61 + onLoad ({ edit }) {
  62 + if (edit) {
  63 + this.edit = true
  64 + }
60 65 store.dispatch('address/list')
61 66 },
62 67 methods: {
  68 + toAddAddress() {
  69 + console.log('aaaaa-a')
  70 + uni.navigateTo({
  71 + url: 'addAddress',
  72 + fail: (error) => {
  73 + console.error('跳转出现错误', error)
  74 + }
  75 + })
  76 + },
63 77 toEditAddress (addId) {
64 78 console.log('addId', addId)
65 79 uni.navigateTo({
... ... @@ -68,6 +82,16 @@ export default {
68 82 console.error('跳转出现错误', error)
69 83 }
70 84 })
  85 + },
  86 + toOrder (addId) {
  87 + if (this.edit) {
  88 + uni.navigateTo({
  89 + url: `../confirmOrder/confirmOrder?addressId=${addId}`,
  90 + fail: (error) => {
  91 + console.error('跳转出现错误', error)
  92 + }
  93 + })
  94 + }
71 95 }
72 96 }
73 97 }
... ...
src/pages/cart/cart.vue
Diff comments   View file @3fb9af8
1 1 <template>
2 2 <view class="content">
3 3 <block v-if="cartList.length==0">
4   -
  4 +
5 5 </block>
6 6 <block v-else>
7 7 <view class="card">
8 8 <view class="cardHeader">
9 9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10   - @click="pChange(pIsoPen)">
  10 + @tap="pChange(pIsoPen)">
11 11 <span class="correct"></span>
12 12 </view>
13 13 <image src="../../static/store.png" mode="aspectFill"></image>
14 14 <text>非常戴镜</text>
15 15 </view>
16   -
17   - <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
  16 +
  17 + <view class="cardBody" v-for="(item,index) in cartList" :key="index"
18 18 @longpress="delCart(item.cart_id,index)">
19   - <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20   - @click="Change(childIsOpen[index],index)">
  19 + <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
  20 + @tap="Change(childIsOpen[index],index)">
21 21 <span class="correct"></span>
22 22 </view>
  23 + <view class="imageWrap">
  24 + <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
  25 + </view>
23 26 <view class="goodInfo">
24   - <view class="imageWrap">
  27 +<!-- <view class="imageWrap">
25 28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
26   - </view>
  29 + </view> -->
27 30 <view class="infoRight">
28   - <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view>
29   - <view class="describ" @tap="toshop(item.pid,item.p_root_index)">
30   - <text>
31   - <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
32   - {{tag.label+`&nbsp;&nbsp;`}}
33   - </block>
34   - </text>
35   - <view class="icon"></view>
36   - </view>
  31 + <view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view>
  32 + <!-- <view class="describ"> -->
  33 + <uni-collapse accordion="true" style="justify-content: space-around;width: 196px;">
  34 + <uni-collapse-item showAnimation='true'
  35 + :title="item.tag.prod_tag_fun[0].label&&item.tag.prod_tag_fun[1].label?item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'...':'暂无数据'" >
  36 + <text class="describ">
  37 + <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
  38 + {{tag.label+`&nbsp;&nbsp;`}}
  39 + </block>
  40 + </text>
  41 +<!-- <text>
  42 + <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
  43 + {{tag.label+`&nbsp;&nbsp;`}}
  44 + </block>
  45 + </text> -->
  46 + </uni-collapse-item>
  47 + </uni-collapse>
  48 + <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
  49 + <!-- </view> -->
37 50 <view class="priceBox">
38 51 <view class="price">￥{{item.nowPrice*item.num}}</view>
39   - <text>(限购{{maxCount}}副)</text>
  52 + <text class="maxCount">(限购{{maxCount}}副)</text>
40 53 <view class="counter">
41   - <view class="btn" disabled="this.addDisabled" type="default"
42   - @click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
  54 + <view class="btn" disabled="this.addDisabled" type="default"
  55 + @tap="counter(index,false,item)">-</view>
43 56 <text>{{item.num}}</text>
44   - <view class="btn" disabled="this.desDisabled" type="default"
45   - @click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
  57 + <view class="btn" disabled="this.desDisabled" type="default"
  58 + @tap="counter(index,true,item)">+</view>
46 59 </view>
47 60 </view>
48 61 </view>
... ... @@ -58,291 +71,199 @@
58 71 </navigator>
59 72 </view>
60 73 </view>
61   -
  74 +
62 75 </view>
63 76 </template>
64 77  
65 78 <script>
66   - import store from '@/store';
67   -
68   - export default {
  79 +import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  80 +import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
  81 +import store from '@/store'
69 82  
70   - data() {
71   - return {
72   - totalPrice: 0,
73   - pIsoPen:false,
74   - // childIsOpen:[],
75   - maxCount:20,
76   - }
77   - },
78   - computed:{
  83 +export default {
  84 + components: { UniCollapse, UniCollapseItem },
  85 + data() {
  86 + return {
  87 + totalPrice: 0,
  88 + pIsoPen: false,
  89 + // childIsOpen:[],
  90 + maxCount: 20
  91 + }
  92 + },
  93 + computed: {
79 94  
80   - cartList() {
81   - // console.log('cart-list', this.$store.state.cart.cartList);
82   - return this.$store.state.cart.cartList;
83   - },
84   - childIsOpen(){
85   - let temp=[];
86   - temp.length=this.$store.state.cart.cartList.length;
87   - for (let i = 0; i < temp.length; i++) {
88   - temp[i]= false
89   - }
90   - console.log('this.childisOPne===>',temp)
91   - return temp
92   - }
93   - },
94   - onLoad: function() {
95   - // 判断是否授权
96   - // uni.getSetting({
97   - // success(res) {
98   - // console.log('authSetting',res.authSetting)
99   - // if(res.authSetting['scope.userInfo'] !== true) {
100   -
101   - // uni.switchTab({
102   - // url:'/pages/user/user'
103   - // })
104   - // }else {
105   - // }
106   - // }
107   - // })
  95 + cartList() {
  96 + // console.log('cart-list', this.$store.state.cart.cartList);
  97 + return this.$store.state.cart.cartList
  98 + },
  99 + childIsOpen() {
  100 + const temp = []
  101 + temp.length = this.$store.state.cart.cartList.length
  102 + for (let i = 0; i < temp.length; i++) {
  103 + temp[i] = false
  104 + }
  105 + console.log('this.childisOPne===>', temp)
  106 + return temp
  107 + }
  108 + },
  109 + onLoad: function() {
  110 + // store.dispatch('cart/addCart', {
  111 + // uid: this.$store.state.user.userInfo.uid,
  112 + // openid: this.$store.state.user.userInfo.openid,
  113 + // mp_id: 7,
  114 + // sk_id: 7,
  115 + // num: 1,
  116 + // pid: 8,
  117 + // price: 128,
  118 + // checkedSKU:{},
  119 + // })
  120 + store.dispatch('cart/getCartList', {
  121 + uid: this.$store.state.user.userInfo.uid // 用户id
  122 + })
  123 + },
108 124  
109   - // console.log('usr-my',this.$store.state.user.userInfo)
110   - // store.dispatch('cart/addCart',{
111   - // "num":1,
112   - // "pid": 7,//产品id
113   - // "uid":1,
114   - // "sk_id": 72,
115   - // "price": 120,
116   - // "mp_id":1,
117   - // "checkedSKU":{
118   - // "discount": "45",
119   - // "in_price": "6000",
120   - // "kc": "0",
121   - // "model_pic": null,
122   - // "out_price": 191.8,
123   - // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg",
124   - // "pid": "7",
125   - // "real_price": 99,
126   - // "sk_id": "89",
127   - // "sku_name": "1.56非球面防蓝光_黑",
128   - // "sku_shop_value": "",
129   - // "sku_value": "58_61",
130   - // "status": "1",
131   - // },
132   - // });
133   - store.dispatch('cart/getCartList',{
134   - uid: 1, //用户id
135   - });
136   - },
  125 + methods: {
137 126  
138   - methods: {
139   - // 跳转到对应的选购页面
140   - toshop(id,type){
141   - console.log('===',id,type)
142   - switch(type){
143   - case 1:
144   - uni.navigateTo({
145   - url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type,
146   - success: res => {},
147   - fail: () => {},
148   - complete: () => {}
149   - });
150   - break;
151   - case 2:
152   - uni.navigateTo({
153   - url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type,
154   - success: res => {},
155   - fail: () => {},
156   - complete: () => {}
157   - });
158   - break;
159   - case 3||4:
160   - uni.navigateTo({
161   - url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
162   - success: res => {},
163   - fail: () => {},
164   - complete: () => {}
165   - });
166   - break;
167   - // case 4:
168   - // uni.navigateTo({
169   - // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
170   - // success: res => {},
171   - // fail: () => {},
172   - // complete: () => {}
173   - // });
174   - case 5:
175   - uni.navigateTo({
176   - url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type,
177   - success: res => {},
178   - fail: () => {},
179   - complete: () => {}
180   - });
181   - break;
182   - default :
183   - break
184   - }
185   - },
186   - toGoods(id,type){
187   - uni.navigateTo({
188   - url: `../frameDetail/frameDetail?oderId=`+id,
189   - success: res => {},
190   - fail: () => {},
191   - complete: () => {}
192   - });
193   - console.log('toGoods =====> id:'+id +"======>type:"+type)
194   - switch(type){
195   - case 1:
196   - uni.navigateTo({
197   - url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
198   - success: res => {},
199   - fail: () => {},
200   - complete: () => {}
201   - });
202   - break;
203   - case 2:
204   - uni.navigateTo({
205   - url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
206   - success: res => {},
207   - fail: () => {},
208   - complete: () => {}
209   - });
210   - break;
211   - case 3:
212   - uni.navigateTo({
213   - url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
214   - success: res => {},
215   - fail: () => {},
216   - complete: () => {}
217   - });
218   - break;
219   - case 4:
220   - uni.navigateTo({
221   - url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
222   - success: res => {},
223   - fail: () => {},
224   - complete: () => {}
225   - });
226   - break;
227   - default :
228   - break
229   - }
230   - },
231   -
232   - counter(index,isadd,mp_id,sk_id,num,cart_id){
233   - // console.log('===>>counter ===>num',num)
234   - // console.log('===>>counter ===>isadd',isadd)
235   - num=parseInt(num);
236   - if(isadd){
237   - if(num>=this.maxCount){
238   - this.addDisabled = true
239   - } else{
240   - this.addDisabled= true
241   - // 修改num
242   - store.dispatch('cart/modiCart',{
243   - uid: 1,
244   - // openid: '',
245   - mp_id: mp_id,
246   - sk_id: sk_id,
247   - cart_id:cart_id,
248   - num:num+1,
249   - args:{
250   - index:index,
251   - isadd:isadd,
252   - }
253   - })
254   - this.addDisabled= false
255   - }
256   - }else{
257   - if(num<=1){
258   - this.desDisabled = true
259   - } else{
260   - this.desDisabled = false
261   - // post 请求修改相关参数
262   - store.dispatch('cart/modiCart',{
263   - uid: 1,
264   - // openid: '',
265   - mp_id: mp_id,
266   - sk_id: sk_id,
267   - cart_id:cart_id,
268   - num:num-1,
269   - args:{
270   - index:index,
271   - isadd:isadd,
272   - }
273   - })
274   - this.desDisabled = true
275   - }
276   - }
277   - },
  127 + toGoods(id, sk_id) {
  128 + console.log('cart-list', this.$store.state.cart.cartList);
  129 + console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id)
  130 + uni.navigateTo({
  131 + url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,
  132 + success: res => {},
  133 + fail: () => {},
  134 + complete: () => {}
  135 + })
  136 + },
278 137  
279   - Change(isopen,indexC){
280   - // console.log('lalla===>',isopen)
281   - this.childIsOpen[indexC]=!isopen
282   - if(!isopen){
283   - this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
284   - }else{
285   - this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
286   - }
287   - let m=true;
288   - for (let i = 0; i < this.childIsOpen.length; i++) {
289   - m=m&this.childIsOpen[i]
290   - }
291   - if(m==1){
292   - this.pIsoPen=true
293   - } else{
294   - this.pIsoPen=false
295   - }
296   - },
297   - pChange(isopen){
298   - this.pIsoPen=!isopen
299   - for (let i = 0; i < this.childIsOpen.length; i++) {
300   - this.childIsOpen[i]=!isopen
301   - }
302   - if(this.pIsoPen){
303   - // 计算总价逻辑
304   - if(this.childIsOpen.length!=0){
305   - for (let i = 0; i < this.childIsOpen.length; i++) {
306   - if(this.childIsOpen[i]){
307   - this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice)
308   - }
309   - }
310   - }
311   - } else{
312   - this.totalPrice=0
313   - }
314   -
315   - },
316   - delCart(cart_id,index){
317   - // console.log('userInfo',this.$store.state.user.userInfo)
318   - cart_id=parseInt(cart_id)
319   - // console.log('delcart------>cart_id',cart_id)
320   - // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
321   - // console.log('delcart======>index',index)
322   - uni.showModal({
323   - title: "是否删除该商品",
324   - // content: '是否删除该商品',
325   - success: function (res) {
326   - if (res.confirm) {
327   - // this.$store.state.cart.cartList.splice(index,1)
328   - store.dispatch('cart/delCart',{
329   - uid: 1, //用户id
330   - openid: "",
331   - cart_id: cart_id, // 要修改的购物车id
332   - arg:index, // 由于action 传参是能接收两参数，因此将index放入对象
333   - });
334   - console.log('用户点击确定');
335   - }
336   - }
337   - });
  138 + counter(index, isadd, item) {
  139 + // console.log('===>>counter ===>num',num)
  140 + // console.log('===>>counter ===>isadd',isadd)
  141 + console.log('item=====>',item)
  142 + console.log('num=====>',item.num)
  143 + let nums = parseInt(item.num)
  144 + if (isadd) {
  145 + if (nums >= this.maxCount) {
  146 + this.addDisabled = true
  147 + } else {
  148 + this.addDisabled = true
  149 + // 修改num
  150 + if (this.childIsOpen[index]) {
  151 + this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
  152 + }
  153 + store.dispatch('cart/modiCart', {
  154 + uid: this.$store.state.user.userInfo.uid,
  155 + openid: this.$store.state.user.userInfo.openid,
  156 + mp_id: item.mp_id,
  157 + sk_id: item.sk_id,
  158 + price: item.nowPrice,
  159 + pid: item.pid,
  160 + num: nums + 1,
  161 + cart_id: item.cart_id,
  162 + args: {
  163 + index: index,
  164 + isadd: isadd
  165 + }
  166 + })
  167 + this.addDisabled = false
  168 + }
  169 + } else {
  170 + if (nums <= 1) {
  171 + this.desDisabled = true
  172 + } else {
  173 + this.desDisabled = false
  174 + // post 请求修改相关参数
  175 + if (this.childIsOpen[index]) {
  176 + this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
  177 + }
  178 + store.dispatch('cart/modiCart', {
  179 + uid: this.$store.state.user.userInfo.uid,
  180 + openid: this.$store.state.user.userInfo.openid,
  181 + mp_id: item.mp_id,
  182 + sk_id: item.sk_id,
  183 + price: item.nowPrice,
  184 + pid: item.pid,
  185 + num: nums - 1,
  186 + cart_id: item.cart_id,
  187 + args: {
  188 + index: index,
  189 + isadd: isadd
  190 + }
  191 + })
  192 + this.desDisabled = true
  193 + }
  194 + }
  195 + // store.dispatch('cart/getCartList', {
  196 + // uid: this.$store.state.user.userInfo.uid // 用户id
  197 + // })
  198 + },
338 199  
339   - }
340   - }
341   - }
  200 + Change(isopen, indexC) {
  201 + // console.log('lalla===>',isopen)
  202 + this.childIsOpen[indexC] = !isopen
  203 + if (!isopen) {
  204 + this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
  205 + } else {
  206 + this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
  207 + }
  208 + let m = true
  209 + for (let i = 0; i < this.childIsOpen.length; i++) {
  210 + m = m & this.childIsOpen[i]
  211 + }
  212 + if (m == 1) {
  213 + this.pIsoPen = true
  214 + } else {
  215 + this.pIsoPen = false
  216 + }
  217 + },
  218 + pChange(isopen) {
  219 + this.pIsoPen = !isopen
  220 + for (let i = 0; i < this.childIsOpen.length; i++) {
  221 + this.childIsOpen[i] = !isopen
  222 + }
  223 + if (this.pIsoPen) {
  224 + // 计算总价逻辑
  225 + if (this.childIsOpen.length != 0) {
  226 + for (let i = 0; i < this.childIsOpen.length; i++) {
  227 + if (this.childIsOpen[i]) {
  228 + this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
  229 + }
  230 + }
  231 + }
  232 + } else {
  233 + this.totalPrice = 0
  234 + }
  235 + },
  236 + delCart(cart_id, index) {
  237 + // console.log('userInfo',this.$store.state.user.userInfo)
  238 + cart_id = parseInt(cart_id)
  239 + // console.log('delcart------>cart_id',cart_id)
  240 + // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
  241 + // console.log('delcart======>index',index)
  242 + const uid=this.$store.state.user.userInfo.uid
  243 + const openid=this.$store.state.user.userInfo.openid
  244 + uni.showModal({
  245 + title: '是否删除该商品',
  246 + // content: '是否删除该商品',
  247 + success: function (res) {
  248 + if (res.confirm) {
  249 + // this.$store.state.cart.cartList.splice(index,1)
  250 + store.dispatch('cart/delCart', {
  251 + uid: uid,
  252 + openid: openid,
  253 + cart_id: cart_id, // 要修改的购物车id
  254 + arg: index // 由于action 传参是能接收两参数，因此将index放入对象
  255 + })
  256 + console.log('用户点击确定')
  257 + }
  258 + }
  259 + })
  260 + }
  261 + }
  262 +}
342 263 </script>
343 264  
344 265 <style lang="scss">
345   - .content {
  266 +.content {
346 267 min-height: 100vh;
347 268 background-color: #f2f2f2;
348 269 display: flex;
... ... @@ -351,19 +272,21 @@
351 272 justify-content: space-between;
352 273 padding: 20rpx 40rpx;
353 274 box-sizing: border-box;
354   -
  275 +
355 276 .partentCheck{
356 277 width: 16px;
357 278 height: 16px;
358   - border-radius: 18px;
  279 + border-radius: 22px;
359 280 border: 1px solid #CFCFCF;
360 281 background-color: #FFFFFF;
  282 + margin: 6px;
361 283 }
362 284 .partentChecked{
363   - width: 18px;
364   - height: 18px;
365   - border-radius: 18px;
366   - background-color: #FF6B4A;
  285 + width: 18px;
  286 + height: 18px;
  287 + border-radius: 22px;
  288 + background-color: #FF6B4A;
  289 + margin: 6px;
367 290 .correct {
368 291 display: inline-block;
369 292 position: relative;
... ... @@ -386,7 +309,7 @@
386 309 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
387 310 }
388 311 }
389   -
  312 +
390 313 .card{
391 314 background-color: #FFFFFF;
392 315 border-radius: 16rpx;
... ... @@ -403,6 +326,7 @@
403 326 display: flex;
404 327 align-items: center;
405 328 justify-content: flex-start;
  329 + margin-bottom: 20rpx;
406 330 image{
407 331 height: 32rpx;
408 332 width: 32rpx;
... ... @@ -418,20 +342,22 @@
418 342 }
419 343 .cardBody{
420 344 width: 100%;
421   - height: 300rpx;
  345 + min-height: 300rpx;
422 346 display: flex;
423 347 align-items: center;
424 348 justify-content: space-between;
425 349 .goodInfo{
426   - width: 95%;
  350 + width: 390rpx;
427 351 display: flex;
428 352 flex-direction: row;
429 353 justify-content: flex-start;
430 354 padding-left: 6px;
  355 +
431 356 .imageWrap{
432 357 height: 188rpx;
433 358 width: 188rpx;
434 359 margin-right: 28rpx;
  360 +
435 361 image{
436 362 border-radius: 4px;
437 363 height: 188rpx;
... ... @@ -443,7 +369,7 @@
443 369 flex-direction: column;
444 370 align-items: flex-start;
445 371 justify-content: space-between;
446   - height: 240rpx;
  372 + min-height: 240rpx;
447 373 .goodName{
448 374 display: -webkit-box;
449 375 -webkit-box-orient: vertical;
... ... @@ -455,55 +381,49 @@
455 381 }
456 382 .describ{
457 383 width: 100%;
458   - height: 80rpx;
459   - box-sizing: border-box;
460   - padding: 10rpx;
  384 + // min-height: 80rpx;
  385 + // box-sizing: border-box;
  386 + // padding: 10rpx;
461 387 font-size: 20rpx;
462 388 letter-spacing: -0.23px;
463 389 text-align: justify;
464 390 color: #999999;
465   - background: #F9F9F9;
466   - display: flex;
467   - justify-content: center;
468   - align-items: center;
469   - text{
470   - text-overflow: -o-ellipsis-lastline;
471   - overflow: hidden;
472   - text-overflow: ellipsis;
473   - display: -webkit-box;
474   - -webkit-line-clamp: 2;
475   - line-clamp: 2;
476   - -webkit-box-orient: vertical;
477   - }
478   - // .icon{
479   - // transform: rotate(90deg);
480   - // height: 13px;
481   - // width: 20px;
482   -
  391 + // background: #F9F9F9;
  392 + // display: flex;
  393 + // justify-content: center;
  394 + // align-items: center;
  395 + // text{
  396 + // text-overflow: -o-ellipsis-lastline;
  397 + // overflow: hidden;
  398 + // text-overflow: ellipsis;
  399 + // display: -webkit-box;
  400 + // -webkit-line-clamp: 2;
  401 + // line-clamp: 2;
  402 + // -webkit-box-orient: vertical;
  403 + // }
  404 + // .icon {
  405 + // width: 0;
  406 + // height: 0;
  407 + // border-left: 5px transparent;
  408 + // border-right: 5px transparent;
  409 + // border-top: 5px #979797;
  410 + // border-bottom: 0 transparent;
  411 + // border-style: solid;
  412 + // position: relative;
  413 + // margin-left: 10px;
  414 + // // transform: scaleY(-1);
  415 + // }
  416 + // .icon::after{
  417 + // content: '';
  418 + // position: absolute;
  419 + // top: -6.5px;
  420 + // left: -5px;
  421 + // border-left: 5px transparent;
  422 + // border-right: 5px transparent;
  423 + // border-top: 5px #FFFFFF;
  424 + // border-bottom: 0 transparent;
  425 + // border-style: solid;
483 426 // }
484   - .icon{
485   - width: 0;
486   - height: 0;
487   - border-left: 5px transparent;
488   - border-right: 5px transparent;
489   - border-top: 5px #979797;
490   - border-bottom: 0 transparent;
491   - border-style: solid;
492   - position: relative;
493   - margin-left: 10px;
494   - // transform: scaleY(-1);
495   - }
496   - .icon::after{
497   - content: '';
498   - position: absolute;
499   - top: -6.5px;
500   - left: -5px;
501   - border-left: 5px transparent;
502   - border-right: 5px transparent;
503   - border-top: 5px #FFFFFF;
504   - border-bottom: 0 transparent;
505   - border-style: solid;
506   - }
507 427 }
508 428 .priceBox{
509 429 display: flex;
... ... @@ -513,6 +433,10 @@
513 433 width: 100%;
514 434 font-size: 14px;
515 435 color: #999999;
  436 + .maxCount{
  437 + color: #999999;
  438 + font-size: 24rpx;
  439 + }
516 440 .price{
517 441 color: #FF6B4A;
518 442 font-size: 28rpx;
... ... @@ -540,7 +464,7 @@
540 464 }
541 465 }
542 466 }
543   -
  467 +
544 468 .footer{
545 469 position: fixed;
546 470 left: 0;
... ... @@ -580,10 +504,8 @@
580 504 height: 80rpx;
581 505 }
582 506 }
583   -
  507 +
584 508 }
585 509 }
586   -
587   -
588   -
589   -</style>
  510 +
  511 +</style>
590 512 \ No newline at end of file
... ...
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="wrap">
3   - <view class="addAddress" @click="toaddAddress">
4   - <view class="addIcon">
5   - <image src="../../static/add.png" mode="aspectFill"></image>
6   - </view>
7   - <view class="addressText">{{addAddress}}</view>
8   - <image src="../../static/right.png" mode="aspectFill"></image>
9   - </view>
10   - <view class="content">
11   - <view class="orderInfo">
12   - <view class="title">
13   - <image src="../../static/store.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
14   - <text>非常戴镜</text>
15   - </view>
16   - <view class="infoBox">
17   - <view class="infoTop">
18   - <image src="../../static/img/goods/p10.jpg" mode="aspectFill"></image>
19   - <view class="infoRight">
20   - <text class="goodName">商品名称商品名称商品名称名称名称</text>
21   - <text class="remarks">支持7天无理由退货 顺丰发货</text>
22   - <view class="priceBox">
23   - <view class="price">￥198</view>
24   - <view class="counter">
25   - <view class="btn" disabled="this.disabled" type="default" @click="counter(false)">-</view>
26   - <text>{{count}}</text>
27   - <view class="btn" type="default" @click="counter(true)">+</view>
28   - </view>
29   - </view>
30   - </view>
31   - </view>
32   - <view class="infoBottom">
33   - <view class="norm">规格 <text>玫瑰金/钛合金</text></view>
34   - <view class="shippingMethod">配送方式 <text>玫瑰金/钛合金</text></view>
35   - <view class="message">买家留言
36   - <input type="text" value="" placeholder="建议提前协商(50字以内)" />
37   - </view>
38   - </view>
39   - </view>
40   - </view>
41   - <view class="payWay">
42   - <view class="item">
43   - <text>支付方式</text>
44   - <view class="itemRight">
45   - <view class="rightText">
46   - <view class="choosePayWay">
47   - <image src="../../static/store.png" mode="aspectFill"></image>
48   - <text>微信支付</text>
49   - </view>
50   - <view class="randomSubstraction">最高随机立减￥99</view>
51   - </view>
52   - <image src="../../static/right.png" mode="aspectFill"></image>
53   - </view>
54   - </view>
55   - <view class="item">
56   - <text>优惠券</text>
57   - <view class="itemRight">
58   - <view class="rightText">
59   - <view class="chooseOffers">
60   - <text>-￥70.00</text>
61   - </view>
62   - <view class="preferentialWay">最大优惠</view>
63   - </view>
64   - <image src="../../static/right.png" mode="aspectFill"></image>
65   - </view>
66   - </view>
67   - <view class="item">
68   - <text>运费</text>
69   - <view class="itemRight">
70   - <view class="freight">￥{{freight}}</view>
71   - </view>
72   - </view>
73   - <view class="item">
74   - <text>合计</text>
75   - <view class="itemRight">
76   - <view class="total">￥{{total}}</view>
77   - </view>
78   - </view>
79   - </view>
80   -<!--
81   - <view class="checkBox">
82   - <checkbox-group>
83   - <label>
84   - <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
85   - </label>
86   - </checkbox-group>
87   - </view> -->
88   - </view>
89   - <view class="footer">
90   - <view class="footerLeft">实付金额:<text>￥{{total}}</text></view>
91   - <view class="footerRight">
92   - <view class="paybtn">立即支付</view>
93   - </view>
94   - </view>
95   - </view>
  2 + <view class="wrap">
  3 + <view></view>
  4 + <view
  5 + class="addAddress"
  6 + @tap="toaddAddress"
  7 + v-if="this.showAddress"
  8 + >
  9 + <view class="addIcon">
  10 + <image
  11 + src="../../static/add.png"
  12 + mode="aspectFill"
  13 + ></image>
  14 + </view>
  15 + <view class="addressText">{{addAddress}}</view>
  16 + <image
  17 + src="../../static/right.png"
  18 + mode="aspectFill"
  19 + ></image>
  20 + </view>
  21 + <view
  22 + v-else
  23 + @tap="toaddAddress"
  24 + class="list order-user"
  25 + >
  26 + <view class="order-user-head">
  27 + <view class="name">
  28 + <view
  29 + v-if="addressInfo.default === '1'"
  30 + class="default"
  31 + ><text>默认</text></view>{{addressInfo.name}}
  32 + </view>
  33 + <text class="mobile">{{addressInfo.mobile}}</text>
  34 + </view>
  35 + <view class="order-user-body">
  36 + <image src="../../static/myorder-paying-location.png"></image>
  37 + <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
  38 + </view>
  39 + <image
  40 + class="arrow"
  41 + src="../../static/right.png"
  42 + ></image>
  43 + </view>
  44 + <view class="content">
  45 + <view class="orderInfo">
  46 + <view class="title">
  47 + <image
  48 + src="../../static/store.png"
  49 + mode="aspectFill"
  50 + style="width: 40rpx;height: 40rpx;"
  51 + ></image>
  52 + <text>非常戴镜</text>
  53 + </view>
  54 + <view class="infoBox">
  55 + <view class="infoTop">
  56 + <image
  57 + :src="goodInfo.img_index_url"
  58 + mode="aspectFill"
  59 + ></image>
  60 + <view class="infoRight">
  61 + <text class="goodName">商品名称商品名称商品名称名称名称</text>
  62 + <text class="remarks">支持7天无理由退货 顺丰发货</text>
  63 + <view class="priceBox">
  64 + <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
  65 + ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
  66 + </text></view>
  67 + <view class="counter">
  68 + <view
  69 + class="btn"
  70 + disabled="this.disabled"
  71 + type="default"
  72 + @click="counter(false)"
  73 + >-</view>
  74 + <text>{{count}}</text>
  75 + <view
  76 + class="btn"
  77 + type="default"
  78 + @click="counter(true)"
  79 + >+</view>
  80 + </view>
  81 + </view>
  82 + </view>
  83 + </view>
  84 + <view class="infoBottom">
  85 + <view class="norm">规格 <text >
  86 + <!-- 长度超出变省略号未做 -->
  87 + <block
  88 + v-for="(item, index) in current"
  89 + :key="index"
  90 + >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block></block>
  91 + </text></view>
  92 + <view class="shippingMethod">配送方式 <text>快递</text></view>
  93 + <view class="message">买家留言
  94 + <input
  95 + type="text"
  96 + :value="note"
  97 + placeholder="建议提前协商(50字以内)"
  98 + />
  99 + </view>
  100 + </view>
  101 + </view>
  102 + </view>
  103 + <view class="payWay">
  104 + <view class="item">
  105 + <text>支付方式</text>
  106 + <view class="itemRight">
  107 + <view class="rightText">
  108 + <view class="choosePayWay">
  109 + <image
  110 + src="../../static/store.png"
  111 + mode="aspectFill"
  112 + ></image>
  113 + <text>微信支付</text>
  114 + </view>
  115 + <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
  116 + </view>
  117 + <!-- <image
  118 + src="../../static/right.png"
  119 + mode="aspectFill"
  120 + ></image> -->
  121 + </view>
  122 + </view>
  123 + <!-- <view class="item">
  124 + <text>优惠券</text>
  125 + <view class="itemRight">
  126 + <view class="rightText">
  127 + <view class="chooseOffers">
  128 + <text>-￥70.00</text>
  129 + </view>
  130 + <view class="preferentialWay">最大优惠</view>
  131 + </view>
  132 + <image
  133 + src="../../static/right.png"
  134 + mode="aspectFill"
  135 + ></image>
  136 + </view>
  137 + </view> -->
  138 + <view class="item">
  139 + <text>运费</text>
  140 + <view class="itemRight">
  141 + <view class="freight">免运费</view>
  142 + </view>
  143 + </view>
  144 + <view class="item">
  145 + <text>合计</text>
  146 + <view class="itemRight">
  147 + <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
  148 + </view>
  149 + </view>
  150 + </view>
  151 + <!--
  152 + <view class="checkBox">
  153 + <checkbox-group>
  154 + <label>
  155 + <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
  156 + </label>
  157 + </checkbox-group>
  158 + </view> -->
  159 + </view>
  160 + <view class="footer">
  161 + <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
  162 + <view class="footerRight">
  163 + <view
  164 + class="paybtn"
  165 + @tap="orderBuild"
  166 + >立即支付</view>
  167 + </view>
  168 + </view>
  169 + </view>
96 170 </template>
97 171  
98 172 <script>
99   - export default {
100   - data() {
101   - return {
102   - addAddress :'添加收货地址',
103   - count:1,
104   - disabled:false,
105   - total:120,
106   - freight:0.00
107   - // isAnonymous:
108   - };
109   - },
110   - methods:{
111   - counter(isadd){
112   - if(isadd){
113   - this.count++
114   - }else{
115   - this.count <= 1? this.disabled = true:this.count--
116   - }
117   - },
118   - toaddAddress(){
119   - uni.navigateTo({
120   - url: '../addArddess/addArddess',
121   - success: res => {},
122   - fail: () => {},
123   - complete: () => {}
124   - });
125   - }
126   - }
127   - }
  173 +import store from '@/store'
  174 +
  175 +export default {
  176 + data() {
  177 + return {
  178 + addAddress: '添加收货地址',
  179 + count: 1,
  180 + pid: 0,
  181 + disabled: false,
  182 + freight: 0.00,
  183 + showAddress: false,
  184 + note: '',
  185 + addressInfo: {
  186 + address: '',
  187 + },
  188 + // isAnonymous:
  189 + }
  190 + },
  191 + onLoad({ pid, addressId, isCart }) {
  192 + this.pid = pid
  193 + // 若已经选择地址
  194 + if (addressId) {
  195 + store.dispatch('address/details', {
  196 + add_id: addressId,
  197 + }).then(({ code, data }) => {
  198 + if (code === 1) {
  199 + console.log('code', code, data)
  200 + this.showAddress = true
  201 + this.addressInfo = data
  202 + }
  203 + })
  204 + } else {
  205 + store.dispatch('address/default').then(({ code, data }) => {
  206 + if (code === 1) {
  207 + console.log('code', code, data)
  208 + this.showAddress = true
  209 + this.addressInfo = data
  210 + }
  211 + })
  212 + }
  213 + store.dispatch('read/fetch', {
  214 + pid,
  215 + })
  216 + },
  217 + computed: {
  218 + goodInfo () {
  219 + console.log('state', this.$store.state)
  220 + return this.$store.state.read.goodInfo
  221 + },
  222 + skuInfo () {
  223 + return this.$store.state.order.param.sk_id_arr
  224 + },
  225 + attrList () {
  226 + return this.$store.state.order.param.attrList
  227 + },
  228 + current () {
  229 + return this.$store.state.order.param.current
  230 + },
  231 + },
  232 + methods: {
  233 + counter(isadd) {
  234 + if (isadd) {
  235 + this.count++
  236 + } else {
  237 + this.count <= 1 ? this.disabled = true : this.count--
  238 + }
  239 + },
  240 + // 跳转添加地址页面
  241 + toaddAddress() {
  242 + uni.navigateTo({
  243 + url: `../address/addressList?edit=${1}`,
  244 + success: res => {},
  245 + fail: (error) => { console.log('跳转到地址列表页面失败====>', error) },
  246 + complete: () => {},
  247 + })
  248 + },
  249 + // 下单
  250 + orderBuild() {
  251 + console.log('this', this.$store.state)
  252 + const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
  253 + store.dispatch('order/buyNow', {
  254 + pid: skId.pid,
  255 + sk_id: skId.sk_id,
  256 + number: this.count,
  257 + mp_id: mpId,
  258 + address: JSON.stringify(this.addressInfo),
  259 + totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
  260 + liuyan: this.note,
  261 + dir: 1,
  262 + }).then((res) => {
  263 + this.pay(res.data)
  264 + })
  265 + },
  266 + // 支付
  267 + pay(res) {
  268 + console.log('pay', res)
  269 + const { data, exKeyName: keyName } = res
  270 + const uid = uni.getStorageSync('uid')
  271 + const fieldSet = {
  272 + openid: this.$store.state.user.userInfo.openid,
  273 + uid: this.$store.state.user.userInfo.uid,
  274 + shopid: 0,
  275 + payCate: 2020,
  276 + payMoney: Number(this.skuInfo.real_price) * this.count * 100,
  277 + payWoodId: `fcdj-${uid}-${keyName}`,
  278 + nonceStr: 'asfafasfasfasfasf',
  279 + signType: 'MD5',
  280 + app_uid: 2020,
  281 + timeStamp: new Date().getTime().toString(),
  282 + billInfo: JSON.stringify(data),
  283 + keyname: keyName,
  284 + }
  285 + console.log('fieldSet', fieldSet)
  286 + store.dispatch('order/pay', fieldSet).then((res) => {
  287 + console.log('res', res)
  288 + })
  289 + },
  290 + },
  291 +}
128 292 </script>
129 293  
130 294 <style lang="scss">
131   - .wrap{
132   - height: 100vh;
133   - background-color:#F2F2F2 ;
134   - font-family: PingFangSC-Regular;
135   - letter-spacing: -0.23px;
136   - }
137   - .addAddress{
138   - background-color:#ffffff ;
139   - box-sizing: border-box;
140   - height: 124rpx;
141   - width: 100%;
142   - display: flex;
143   - align-items: center;
144   - padding: 0 40rpx;
145   - .addIcon{
146   - background-color:#F2F2F2 ;
147   - height: 56rpx;
148   - width: 60rpx;
149   - border-radius: 4rpx;
150   - display: flex;
151   - justify-content: center;
152   - align-items: center;
153   - margin-right: 40rpx;
154   - }
155   - image{
156   - height: 28rpx;
157   - width: 28rpx;
158   - }
159   - .addressText{
160   - font-size: 28rpx;
161   - color: #333333;
162   - margin-right: 364rpx;
163   - }
164   - }
165   - .content{
166   - background-color:#F2F2F2 ;
167   - width: 100%;
168   - display: flex;
169   - flex-direction: column;
170   - justify-content: center;
171   - align-items: center;
172   - padding: 40rpx;
173   - box-sizing: border-box;
174   - .orderInfo{
175   - width: 670rpx;
176   - height: 488rpx;
177   - background-color:#ffffff ;
178   - border-radius: 20rpx;
179   - box-sizing: border-box;
180   - padding: 0 40rpx 40rpx 40rpx;
181   - .title{
182   - display: flex;
183   - align-items: center;
184   - font-size: 28rpx;
185   - color: #333333;
186   - height: 60rpx;
187   - line-height: 40rpx;
188   - padding: 10rpx 10rpx 10rpx 0rpx;
189   - image{
190   - margin-right: 20rpx;
191   - }
192   - }
193   - .infoBox{
194   - margin-top: 42rpx;
195   - .infoTop{
196   - display: flex;
197   - flex-direction: row;
198   - image{
199   - height: 188rpx;
200   - width: 188rpx;
201   - margin-right: 24rpx;
202   - }
203   - .infoRight{
204   - width: 374rpx;
205   - display: flex;
206   - flex-direction: column;
207   - align-items: flex-start;
208   - justify-content: space-between;
209   - .goodName{
210   - font-size: 28rpx;
211   - color: #333333;
212   - }
213   - .remarks{
214   - font-size: 20rpx;
215   - color: #999999;
216   - }
217   - .priceBox{
218   - display: flex;
219   - justify-content: space-between;
220   - align-items: center;
221   - width: 100%;
222   - .price{
223   - color: #FF6B4A;
224   - font-size: 28rpx;
225   - }
226   - .counter{
227   - display: flex;
228   - flex-direction: row;
229   - justify-content: space-between;
230   - font-size: 28rpx;
231   - color: #333333;
232   - width: 122rpx;
233   - .btn{
234   - display: flex;
235   - justify-content: center;
236   - line-height: 32rpx;
237   - height: 32rpx;
238   - width: 32rpx;
239   - background-color: #F2F2F2;
240   - color: #CFCFCF;
241   - }
242   - }
243   - }
244   - }
245   - }
246   - .infoBottom{
247   - display: flex;
248   - flex-direction: column;
249   - justify-content: flex-start;
250   - font-size: 24rpx;
251   - color: #333333;
252   - text{
253   - color: #999999;
254   - margin-left: 20rpx;
255   - }
256   -
257   - .norm{
258   - margin-top: 28rpx;
259   - }
260   - .shippingMethod{
261   - margin-top: 12rpx;
262   - }
263   - .message{
264   - display: flex;
265   - flex-direction: row;
266   - align-items: center;
267   - margin-top: 18rpx;
268   - input{
269   - margin-left: 20rpx;
270   - width: 75%;
271   - }
272   - }
273   - }
274   - }
275   - }
276   - .payWay{
277   - height: 464rpx;
278   - width: 670rpx;
279   - background-color: #ffffff;
280   - color: #333333;
281   - font-size: 24rpx;
282   - border-radius: 20rpx;
283   - box-sizing: border-box;
284   - padding: 0 52rpx 0rpx 40rpx;
285   - margin-top: 20rpx;
286   - display: flex;
287   - flex-direction: column;
288   - justify-content: center;
289   - align-items: flex-start;
290   - .item{
291   - display: flex;
292   - flex-direction: row;
293   - justify-content: space-between;
294   - align-items: center;
295   - width: 100%;
296   - height: 115rpx;
297   - .itemRight{
298   - display: flex;
299   - flex-direction: row;
300   - justify-content: space-between;
301   - align-items: center;
302   - image{
303   - height: 24rpx;
304   - width: 12rpx;
305   - }
306   - .rightText{
307   - margin-right: 20rpx;
308   - text-align: right;
309   - .choosePayWay{
310   - text{
311   - color: #333333 ;
312   - }
313   - image{
314   - height:26rpx ;
315   - width: 30rpx;
316   - margin-right: 20px;
317   - }
318   - }
319   - .randomSubstraction{
320   - color: #FF6B4A ;
321   - }
322   - .preferentialWay{
323   - color: #999999 ;
324   - }
325   - }
326   - .freight,.total{
327   - margin-right: 32rpx;
328   - }
329   - text{
330   - color: #FF6B4A ;
331   - }
332   - }
333   - }
334   - }
335   - // .checkBox{
336   - // height: 58rpx;
337   - // line-height: 58rpx;
338   - // width: 100%;
339   - // margin-top: 36rpx;
340   - // margin-left: 40rpx;
341   - // font-size: 12px;
342   - // color: #999999;
343   - // }
344   - }
345   - .footer{
346   - height: 112rpx;
347   - width: 100%;
348   - background-color: #F2F2F2;
349   - font-size: 16px;
350   - display: flex;
351   - justify-content: space-between;
352   - align-items: center;
353   - .footerLeft{
354   - display: flex;
355   - justify-content: center;
356   - align-items: center;
357   - width: 50%;
358   - color: #333333;
359   - text{
360   - color: #FF6B4A;
361   - }
362   - }
363   - .footerRight{
364   - display: flex;
365   - justify-content: flex-end;
366   - align-items: center;
367   - width: 50%;
368   - margin-right: 26rpx;
369   - .paybtn{
370   - display: flex;
371   - justify-content: center;
372   - align-items: center;
373   - background: #FF6B4A;
374   - border-radius: 20px;
375   - border-radius: 20px;
376   - color: #FFFFFF;
377   - width: 204rpx;
378   - height: 80rpx;
379   - }
380   - }
381   -
382   - }
383   -
  295 +.wrap {
  296 + height: 100vh;
  297 + background-color: #f2f2f2;
  298 + font-family: PingFangSC-Regular;
  299 + letter-spacing: -0.23px;
  300 + position: absolute;
  301 +}
  302 +.addAddress {
  303 + background-color: #ffffff;
  304 + box-sizing: border-box;
  305 + height: 124rpx;
  306 + width: 100%;
  307 + display: flex;
  308 + align-items: center;
  309 + padding: 0 40rpx;
  310 + .addIcon {
  311 + background-color: #f2f2f2;
  312 + height: 56rpx;
  313 + width: 60rpx;
  314 + border-radius: 4rpx;
  315 + display: flex;
  316 + justify-content: center;
  317 + align-items: center;
  318 + margin-right: 40rpx;
  319 + }
  320 + image {
  321 + height: 28rpx;
  322 + width: 28rpx;
  323 + }
  324 + .addressText {
  325 + font-size: 28rpx;
  326 + color: #333333;
  327 + margin-right: 364rpx;
  328 + }
  329 +}
  330 +.content {
  331 + background-color: #f2f2f2;
  332 + width: 100%;
  333 + display: flex;
  334 + flex-direction: column;
  335 + justify-content: center;
  336 + align-items: center;
  337 + padding: 40rpx;
  338 + box-sizing: border-box;
  339 + .orderInfo {
  340 + width: 670rpx;
  341 + height: 488rpx;
  342 + background-color: #ffffff;
  343 + border-radius: 20rpx;
  344 + box-sizing: border-box;
  345 + padding: 0 40rpx 40rpx 40rpx;
  346 + .title {
  347 + display: flex;
  348 + align-items: center;
  349 + font-size: 28rpx;
  350 + color: #333333;
  351 + height: 60rpx;
  352 + line-height: 40rpx;
  353 + padding: 10rpx 10rpx 10rpx 0rpx;
  354 + image {
  355 + margin-right: 20rpx;
  356 + }
  357 + }
  358 + .infoBox {
  359 + margin-top: 42rpx;
  360 + .infoTop {
  361 + display: flex;
  362 + flex-direction: row;
  363 + image {
  364 + height: 188rpx;
  365 + width: 188rpx;
  366 + margin-right: 24rpx;
  367 + }
  368 + .infoRight {
  369 + width: 374rpx;
  370 + display: flex;
  371 + flex-direction: column;
  372 + align-items: flex-start;
  373 + justify-content: space-between;
  374 + .goodName {
  375 + font-size: 28rpx;
  376 + color: #333333;
  377 + }
  378 + .remarks {
  379 + font-size: 20rpx;
  380 + color: #999999;
  381 + }
  382 + .priceBox {
  383 + display: flex;
  384 + justify-content: space-between;
  385 + align-items: center;
  386 + width: 100%;
  387 + .price {
  388 + color: #ff6b4a;
  389 + font-size: 28rpx;
  390 + }
  391 + .originCost {
  392 + text-decoration: line-through;
  393 + color: #999999;
  394 + font-size: 20rpx;
  395 + }
  396 + .counter {
  397 + display: flex;
  398 + flex-direction: row;
  399 + justify-content: space-between;
  400 + font-size: 28rpx;
  401 + color: #333333;
  402 + width: 122rpx;
  403 + .btn {
  404 + display: flex;
  405 + justify-content: center;
  406 + line-height: 32rpx;
  407 + height: 32rpx;
  408 + width: 32rpx;
  409 + background-color: #f2f2f2;
  410 + color: #cfcfcf;
  411 + }
  412 + }
  413 + }
  414 + }
  415 + }
  416 + .infoBottom {
  417 + display: flex;
  418 + flex-direction: column;
  419 + justify-content: flex-start;
  420 + font-size: 24rpx;
  421 + color: #333333;
  422 + text {
  423 + color: #999999;
  424 + margin-left: 20rpx;
  425 + }
  426 +
  427 + .norm {
  428 + margin-top: 28rpx;
  429 + }
  430 + .shippingMethod {
  431 + margin-top: 12rpx;
  432 + }
  433 + .message {
  434 + display: flex;
  435 + flex-direction: row;
  436 + align-items: center;
  437 + margin-top: 18rpx;
  438 + input {
  439 + margin-left: 20rpx;
  440 + width: 75%;
  441 + }
  442 + }
  443 + }
  444 + }
  445 + }
  446 + .payWay {
  447 + height: 464rpx;
  448 + width: 670rpx;
  449 + background-color: #ffffff;
  450 + color: #333333;
  451 + font-size: 24rpx;
  452 + border-radius: 20rpx;
  453 + box-sizing: border-box;
  454 + padding: 0 52rpx 0rpx 40rpx;
  455 + margin-top: 20rpx;
  456 + display: flex;
  457 + flex-direction: column;
  458 + justify-content: center;
  459 + align-items: flex-start;
  460 + .item {
  461 + display: flex;
  462 + flex-direction: row;
  463 + justify-content: space-between;
  464 + align-items: center;
  465 + width: 100%;
  466 + height: 115rpx;
  467 + .itemRight {
  468 + display: flex;
  469 + flex-direction: row;
  470 + justify-content: space-between;
  471 + align-items: center;
  472 + image {
  473 + height: 24rpx;
  474 + width: 12rpx;
  475 + }
  476 + .rightText {
  477 + margin-right: 20rpx;
  478 + text-align: right;
  479 + .choosePayWay {
  480 + text {
  481 + color: #333333;
  482 + }
  483 + image {
  484 + height: 26rpx;
  485 + width: 30rpx;
  486 + margin-right: 20px;
  487 + }
  488 + }
  489 + .randomSubstraction {
  490 + color: #ff6b4a;
  491 + }
  492 + .preferentialWay {
  493 + color: #999999;
  494 + }
  495 + }
  496 + .freight,
  497 + .total {
  498 + margin-right: 32rpx;
  499 + }
  500 + text {
  501 + color: #ff6b4a;
  502 + }
  503 + }
  504 + }
  505 + }
  506 + // .checkBox {
  507 + // height: 58rpx;
  508 + // line-height: 58rpx;
  509 + // width: 100%;
  510 + // margin-top: 36rpx;
  511 + // margin-left: 40rpx;
  512 + // font-size: 12px;
  513 + // color: #999999;
  514 + // }
  515 +}
  516 +.footer {
  517 + height: 112rpx;
  518 + width: 100%;
  519 + background-color: #fff;
  520 + font-size: 16px;
  521 + display: flex;
  522 + justify-content: space-between;
  523 + align-items: center;
  524 + position: fixed;
  525 + bottom: 0;
  526 + .footerLeft {
  527 + display: flex;
  528 + justify-content: center;
  529 + align-items: center;
  530 + width: 50%;
  531 + color: #333333;
  532 + text {
  533 + color: #ff6b4a;
  534 + }
  535 + }
  536 + .footerRight {
  537 + display: flex;
  538 + justify-content: flex-end;
  539 + align-items: center;
  540 + width: 50%;
  541 + margin-right: 26rpx;
  542 + .paybtn {
  543 + display: flex;
  544 + justify-content: center;
  545 + align-items: center;
  546 + background: #ff6b4a;
  547 + border-radius: 20px;
  548 + border-radius: 20px;
  549 + color: #ffffff;
  550 + width: 204rpx;
  551 + height: 80rpx;
  552 + }
  553 + }
  554 +}
  555 +// 地址信息样式
  556 +.order-user {
  557 + width: 670rpx;
  558 + height: 228rpx;
  559 + background: #ffffff;
  560 + border-radius: 14rpx;
  561 + margin: 0 auto;
  562 + margin-top: 20rpx;
  563 + position: relative;
  564 + .order-user-head {
  565 + display: flex;
  566 + height: 108rpx;
  567 + width: 100%;
  568 + align-items: center;
  569 + margin-left: 126rpx;
  570 + .name {
  571 + display: flex;
  572 + justify-content: space-between;
  573 + font-size: 14px;
  574 + color: #333333;
  575 + letter-spacing: -0.26px;
  576 + margin-right: 20rpx;
  577 + .default {
  578 + height: 40rpx;
  579 + width: 80rpx;
  580 + background-color: #4a90e2;
  581 + border-radius: 13px;
  582 + border-radius: 13px;
  583 + text-align: center;
  584 + margin-right: 20rpx;
  585 + text {
  586 + font-size: 12px;
  587 + color: #ffffff;
  588 + letter-spacing: -0.23px;
  589 + }
  590 + }
  591 + }
  592 + .mobile {
  593 + font-size: 14px;
  594 + color: #999999;
  595 + letter-spacing: -0.26px;
  596 + }
  597 + }
  598 + .order-user-body {
  599 + display: flex;
  600 + width: 100%;
  601 + image {
  602 + width: 24px;
  603 + height: 26px;
  604 + margin: 12rpx 32rpx 0 40rpx;
  605 + }
  606 + .address {
  607 + font-weight: bold;
  608 + font-size: 14px;
  609 + color: #333333;
  610 + letter-spacing: -0.26px;
  611 + }
  612 + }
  613 + .arrow {
  614 + width: 6px;
  615 + height: 12px;
  616 + position: absolute;
  617 + right: 40rpx;
  618 + bottom: 104rpx;
  619 + }
  620 +}
384 621 </style>
... ...
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @3fb9af8
... ... @@ -17,10 +17,13 @@
17 17 </view>
18 18 <view class="choose">
19 19 <view class="colour">
20   - <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
21   - <view class="colour_exp">*{{this.navData.colour}}</view>
  20 + <view class="colour1" @click="xialachange(0)">
  21 + <text>框架颜色</text>
  22 + <image v-bind:src="isNone[0].img"></image>
  23 + </view>
  24 + <view class="colour_exp">*{{navData.colour}}</view>
22 25 <view>
23   - <view class="colour2">
  26 + <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
24 27 <view
25 28 v-for="(items,index) in details.data.skuList"
26 29 :key="index"
... ... @@ -35,14 +38,14 @@
35 38 <hr/>
36 39 </view>
37 40 <view class="size">
38   - <view class="size1">
  41 + <view class="size1" @click="xialachange(1)">
39 42 <view class="size1_1">框架尺寸</view>
40   - <view><image src="/static/img/detail/xiala.png"></image></view>
  43 + <view><image v-bind:src="isNone[1].img"></image></view>
41 44 </view>
42 45 <view class="colour">
43   - <view class="colour_exp">*{{this.navData.colour}}</view>
  46 + <view class="colour_exp">*{{navData.colour}}</view>
44 47 </view>
45   - <view class="D3_list">
  48 + <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}">
46 49 <view>
47 50 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
48 51 <view class="D3_list_jDu">
... ... @@ -98,12 +101,15 @@
98 101 </view>
99 102 </view>
100 103 <view class="part">
101   - <view class="size1">
102   - <view class="size1_1">配件</view>
103   - <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
  104 + <view class="size1" @click="xialachange(2)">
  105 + <view class="size1_1" >配件</view>
  106 + <view>
  107 + <span>+￥0.00</span>
  108 + <image v-bind:src="isNone[2].img"></image>
  109 + </view>
104 110 </view>
105 111 <view class="colour_exp">*0290</view>
106   - <view class="part_som">
  112 + <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}">
107 113 <view
108 114 v-for="(part) in part"
109 115 :key="part.key"
... ... @@ -139,6 +145,13 @@ export default {
139 145 count: 1,
140 146 // colour: '1.56非球面防蓝光_亚黑色',
141 147 chooseNum : '',
  148 + isNone:[
  149 + {state: false ,img: '/static/img/detail/xiala.png'},
  150 + {state: false ,img: '/static/img/detail/xiala.png'},
  151 + {state: false ,img: '/static/img/detail/xiala.png'},
  152 + {state: false ,img: '/static/img/detail/xiala.png'},
  153 + {state: false ,img: '/static/img/detail/xiala.png'},
  154 + ],
142 155 //传参
143 156 navData:{
144 157 pid: "26",
... ... @@ -147,6 +160,7 @@ export default {
147 160 price:'',
148 161 colour: '1.56非球面防蓝光_亚黑色',
149 162 },
  163 +
150 164 //尺寸
151 165 parameter:[
152 166 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
... ... @@ -190,9 +204,17 @@ export default {
190 204 this.count <= 1? this.disabled = true:this.count--
191 205 }
192 206 },
  207 + xialachange(index){
  208 + this.isNone[index].state = !this.isNone[index].state;
  209 + if(this.isNone[index].state){
  210 + this.isNone[index].img = '/static/img/detail/right.png'
  211 + }else{
  212 + this.isNone[index].img = '/static/img/detail/xiala.png'
  213 + }
  214 + },
193 215 colourChange(index,e){
194 216 this.navData.colour = e ; //颜色选择
195   - console.log(index,e);
  217 + console.log(index,this.navData.colour);
196 218  
197 219 },
198 220 viewChoose(index,e){
... ... @@ -353,6 +375,9 @@ hr{
353 375 }
354 376 }
355 377 }
  378 + .colour2_none{
  379 + display: none;
  380 + }
356 381 }
357 382 .size,.part{
358 383 margin-top:14px;
... ... @@ -459,6 +484,9 @@ hr{
459 484 }
460 485 }
461 486 }
  487 + .colour2_none{
  488 + display: none;
  489 + }
462 490 }
463 491  
464 492 .buy{
... ...
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="container">
  2 +<view>
  3 + <view class="container" v-if="type===2">
3 4 <view class="detail">
4 5 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
5 6 <view class="detail2">
... ... @@ -17,10 +18,13 @@
17 18 </view>
18 19 <view class="choose">
19 20 <view class="colour">
20   - <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view>
  21 + <view class="colour1" @click="xialachange(0)">
  22 + <text>框架颜色</text>
  23 + <image v-bind:src="isNone[0].img"></image>
  24 + </view>
21 25 <view class="colour_exp">*{{navData.colour}}</view>
22 26 <view>
23   - <view class="colour2">
  27 + <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
24 28 <view
25 29 v-for="(items,index) in details.data.skuList"
26 30 :key="index"
... ... @@ -35,9 +39,12 @@
35 39 <hr/>
36 40 </view>
37 41 <view class="colour">
38   - <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view>
  42 + <view class="colour1" @click="xialachange(1)">
  43 + <text>镜片颜色</text>
  44 + <image v-bind:src="isNone[1].img"></image>
  45 + </view>
39 46 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
40   - <view>
  47 + <view v-bind:class="{'colour2_none' : isNone[1].state}">
41 48 <view class="jp_colour2">
42 49 <view
43 50 v-for="(items,index) in jp_colour"
... ... @@ -51,13 +58,14 @@
51 58 <hr/>
52 59 </view>
53 60 <view class="colour">
54   - <view class="colour1">
  61 + <view class="colour1" @click="xialachange(2)">
55 62 <text>{{details.data.attrList[0].meta_name}}</text>
56 63 <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text>
57   - <image src="/static/img/detail/xiala.png"></image>
  64 + <image v-bind:src="isNone[2].img"></image>
58 65 </view>
59 66 <view>
60   - <view class="split">
  67 + <view class="colour_exp">*{{navData.split}}</view>
  68 + <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}">
61 69 <view
62 70 v-for="(items,index) in details.data.attrList[0].attr"
63 71 :key="index"
... ... @@ -73,14 +81,14 @@
73 81 <hr/>
74 82 </view>
75 83 <view class="size">
76   - <view class="size1">
  84 + <view class="size1" @click="xialachange(3)">
77 85 <view class="size1_1">框架尺寸</view>
78   - <view><image src="/static/img/detail/xiala.png"></image></view>
  86 + <view><image v-bind:src="isNone[3].img"></image></view>
79 87 </view>
80 88 <view class="colour">
81 89 <view class="colour_exp">*{{navData.colour}}</view>
82 90 </view>
83   - <view class="D3_list">
  91 + <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}">
84 92 <view>
85 93 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
86 94 <view class="D3_list_jDu">
... ... @@ -132,16 +140,16 @@
132 140 <view>{{parameter[4].standard}}</view>
133 141 </view>
134 142 </view>
135   - <hr/>
136 143 </view>
  144 + <hr/>
137 145 </view>
138 146 <view class="part">
139   - <view class="size1">
  147 + <view class="size1" @click="xialachange(4)">
140 148 <view class="size1_1">配件</view>
141   - <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
  149 + <view><span>+￥0.00</span><image v-bind:src="isNone[4].img"></image></view>
142 150 </view>
143 151 <view class="colour_exp">*0290</view>
144   - <view class="part_som">
  152 + <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}">
145 153 <view
146 154 v-for="(part) in part"
147 155 :key="part.key"
... ... @@ -268,6 +276,139 @@
268 276 <view class="zhanwei"></view>
269 277 <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view>
270 278 </view>
  279 + <view class="container" v-if="type===4">
  280 + <view class="detail">
  281 + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
  282 + <view class="detail2">
  283 + <view class="detail2_name">{{details.data.p_name}}</view>
  284 + <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
  285 + <view class="detail2_price">
  286 + <span>￥{{details.data.p_sale_price*count}}</span>
  287 + <view class="counter">
  288 + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
  289 + <text>{{count}}</text>
  290 + <view class="btn" @click="counter(true)">+</view>
  291 + </view>
  292 + </view>
  293 + </view>
  294 + </view>
  295 + <view class="choose">
  296 + <view class="colour">
  297 + <view class="colour1" @click="xialachange(0)">
  298 + <text>框架颜色</text>
  299 + <image v-bind:src="isNone[0].img"></image>
  300 + </view>
  301 + <view class="colour_exp">*{{navData.colour}}</view>
  302 + <view>
  303 + <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
  304 + <view
  305 + v-for="(items,index) in details.data.skuList"
  306 + :key="index"
  307 + @click="viewChoose(index)"
  308 + class="colour2_view"
  309 + v-bind:class="{'colour2_viewed': chooseNum == index}"
  310 + >
  311 + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
  312 + </view>
  313 + </view>
  314 + </view>
  315 + <hr/>
  316 + </view>
  317 + <view class="size">
  318 + <view class="size1" @click="xialachange(1)">
  319 + <view class="size1_1">框架尺寸</view>
  320 + <view><image v-bind:src="isNone[1].img"></image></view>
  321 + </view>
  322 + <view class="colour">
  323 + <view class="colour_exp">*{{navData.colour}}</view>
  324 + </view>
  325 + <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}">
  326 + <view>
  327 + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
  328 + <view class="D3_list_jDu">
  329 + <view class="D3_list1">
  330 + <c-progress class="c-progress" :inner_widthProp="300"/>
  331 + <text>{{details.data.frame_width}}mm</text>
  332 + </view>
  333 + <view>{{parameter[0].standard}}</view>
  334 + </view>
  335 + </view>
  336 + <view>
  337 + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
  338 + <view class="D3_list_jDu">
  339 + <view class="D3_list1">
  340 + <c-progress class="c-progress" :inner_widthProp="190"/>
  341 + <view>{{details.data.glass_width}}mm</view>
  342 + </view>
  343 + <view>{{parameter[1].standard}}</view>
  344 + </view>
  345 + </view>
  346 + <view>
  347 + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
  348 + <view class="D3_list_jDu">
  349 + <view class="D3_list1">
  350 + <c-progress class="c-progress" :inner_widthProp="210"/>
  351 + <view>{{details.data.glass_height}}mm</view>
  352 + </view>
  353 + <view>{{parameter[2].standard}}</view>
  354 + </view>
  355 + </view>
  356 + <view>
  357 + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
  358 + <view class="D3_list_jDu">
  359 +
  360 + <view class="D3_list1">
  361 + <c-progress class="c-progress" :inner_widthProp="160"/>
  362 + <view>{{details.data.nose_width}}mm</view>
  363 + </view>
  364 + <view>{{parameter[3].standard}}</view>
  365 + </view>
  366 + </view>
  367 + <view>
  368 + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
  369 + <view class="D3_list_jDu">
  370 + <view class="D3_list1">
  371 + <c-progress class="c-progress" :inner_widthProp="260"/>
  372 + <view>{{details.data.leg_long}}mm</view>
  373 + </view>
  374 + <view>{{parameter[4].standard}}</view>
  375 + </view>
  376 + </view>
  377 + <hr/>
  378 + </view>
  379 + </view>
  380 + <view class="part">
  381 + <view class="size1" @click="xialachange(2)">
  382 + <view class="size1_1" >配件</view>
  383 + <view>
  384 + <span>+￥0.00</span>
  385 + <image v-bind:src="isNone[2].img"></image>
  386 + </view>
  387 + </view>
  388 + <view class="colour_exp">*0290</view>
  389 + <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}">
  390 + <view
  391 + v-for="(part) in part"
  392 + :key="part.key"
  393 + v-bind:class="{'size_viewed': part.is_actived}"
  394 + >
  395 + <image v-bind:src="part.img"></image>
  396 + </view>
  397 + </view>
  398 + </view>
  399 + </view>
  400 + <view class="buy">
  401 + <view class="buy1">选了镜框，想选镜片？</view>
  402 + <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
  403 + <view class="buy3">
  404 + <view class="buy3_1">暂时不选</view>
  405 + <view class="buy3_2" @click="popArgs">立即去选</view>
  406 + </view>
  407 + </view>
  408 + <view class="zhanwei"></view>
  409 + <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view>
  410 + </view>
  411 +</view>
271 412 </template>
272 413 <script>
273 414 import CProgress from '../../components/UniSliper/UniSliper'
... ... @@ -279,9 +420,17 @@ export default {
279 420 },
280 421 data(){
281 422 return{
  423 + type: 2,
282 424 count: 1,
283 425 chooseNum : '',
284 426 isSplit: '' ,
  427 + isNone:[
  428 + {state: false ,img: '/static/img/detail/xiala.png'},
  429 + {state: false ,img: '/static/img/detail/xiala.png'},
  430 + {state: false ,img: '/static/img/detail/xiala.png'},
  431 + {state: false ,img: '/static/img/detail/xiala.png'},
  432 + {state: false ,img: '/static/img/detail/xiala.png'},
  433 + ],
285 434  
286 435 //传参
287 436 navData:{
... ... @@ -289,6 +438,7 @@ export default {
289 438 p_root_index: "4",
290 439 name:'',
291 440 price:'',
  441 + type:'',
292 442 split: '1.56非球面防蓝光',
293 443 colour: '1.56非球面防蓝光_亚黑色',
294 444 },
... ... @@ -359,6 +509,14 @@ export default {
359 509 this.count <= 1? this.disabled = true:this.count--
360 510 }
361 511 },
  512 + xialachange(index){
  513 + this.isNone[index].state = !this.isNone[index].state;
  514 + if(this.isNone[index].state){
  515 + this.isNone[index].img = '/static/img/detail/right.png'
  516 + }else{
  517 + this.isNone[index].img = '/static/img/detail/xiala.png'
  518 + }
  519 + },
362 520 colourChange(index,e){
363 521 this.navData.colour = e ; //颜色选择
364 522  
... ... @@ -384,6 +542,7 @@ export default {
384 542 popSure(name,price){
385 543 this.navData.name = name;
386 544 this.navData.price = price;
  545 + this.navData.type = this.type;
387 546 var navData = JSON.stringify(this.navData);
388 547 uni.navigateTo({
389 548 url: '../confirmOrder/confirmOrder?index='+navData,
... ... @@ -576,6 +735,9 @@ hr{
576 735 }
577 736 }
578 737 }
  738 + .colour2_none{
  739 + display: none;
  740 + }
579 741 }
580 742 .jp_colour2{
581 743 display: grid;
... ... @@ -722,6 +884,9 @@ hr{
722 884 }
723 885 }
724 886 }
  887 + .colour2_none{
  888 + display: none;
  889 + }
725 890 }
726 891  
727 892 .buy{
... ...
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="container">
3   - <view class="D1">
4   - <!-- 轮播图 -->
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">
7   - <image :src="item.img" mode="scaleToFill"></image>
8   - </swiper-item>
9   - </swiper>
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>
12   - <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
13   - </view>
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>
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>
18   - </view>
19   - <view class="D2" v-if="updateGoodType == 1">
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>
22   - <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
  2 + <view class="container">
  3 + <view class="D1">
  4 + <!-- 轮播图 -->
  5 + <swiper
  6 + class="swiperImage"
  7 + :indicator-dots="true"
  8 + :autoplay="true"
  9 + :interval="4000"
  10 + :duration="500"
  11 + >
  12 + <swiper-item
  13 + v-for="(item, index) in goodInfo.pics"
  14 + :key="index"
  15 + >
  16 + <image
  17 + :src="item"
  18 + mode="scaleToFill"
  19 + ></image>
  20 + </swiper-item>
  21 + </swiper>
  22 + <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
  23 + <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
  24 + <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
  25 + </view>
  26 + <view
  27 + class="D2"
  28 + v-if="updateGoodType == 2 || updateGoodType == 4"
  29 + >
  30 + <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
  31 + <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
  32 + <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
  33 + </view>
  34 + <!-- <view
  35 + class="D2"
  36 + v-if="updateGoodType == 1"
  37 + >
  38 + <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
  39 + <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
  40 + <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
  41 + </view>
  42 + <view
  43 + class="D2"
  44 + v-if="updateGoodType == 3"
  45 + >
  46 + <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
  47 + <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
  48 + <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
  49 + </view> -->
  50 + <view class="D3">
  51 + <view class="screenBar">
  52 + <view
  53 + v-for="item in screenItems"
  54 + :key="item.current"
  55 + @click="tabChange(item.current)"
  56 + >
  57 + <view
  58 + class="screenItem"
  59 + v-bind:class="{ active: current === item.current }"
  60 + >{{ item.text || '暂无' }}</view>
23 61 </view>
24   - <view class="D2" v-if="updateGoodType == 3">
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>
27   - <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
28   - </view>
29   -
30   - <view class="D3">
31   - <view class="screenBar">
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>
34   - </view>
35   - </view>
36   - <view class="screen-item " v-if="current ===0">
37   - <view class="D3_list">
38   - <view v-for="(item) in parameter" :key="item.key">
39   - <image class="D3_image" v-bind:src = "item.img"></image>
40   - <span>{{item.standard}}</span>
41   - <span>{{item.slength}}</span>
42   - </view>
43   - </view>
44   - </view >
45   - <view class="screen-item " v-if="current ===1">
46   - <view class="D3_list">
47   - <view>主体</view>
48   - <view>商品产地：韩国</view>
49   - <view>包装清单：彩色隐形 * 1</view>
50   - </view>
51   - </view >
52   - <view class="screen-item " v-if="current ===2">
53   - <view class="customerService">
54   - <view class="serviceItem" >
55   - <view class="title">
56   - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
57   - <text class="titleText">卖家服务</text>
58   - </view>
59   - <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
60   - </view>
61   - <view class="serviceItem" >
62   - <view class="title">
63   - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
64   - <text class="titleText">平台承诺</text>
65   - </view>
66   - <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
67   - </view>
68   - <view class="serviceItem">
69   - <view class="title">
70   - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
71   - <text class="titleText">正品保证</text>
72   - </view>
73   - <view class="itemContent">向您保证所售商品均为正品行货</view>
74   - </view>
75   - <view class="serviceItem2">
76   - <view class="title">
77   - <text class="titleText">权利申明</text>
78   - </view>
79   - <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
80   - </view>
81   - <view class="serviceItem2">
82   - <view class="title">
83   - <text class="titleText">价格保证</text>
84   - </view>
85   - <view class="itemContent">
86   - <view class="itemContent-child">
87   - <text class="contentTitle">平台价:</text>
88   - <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
89   - </view>
90   - <view class="itemContent-child">
91   - <text class="contentTitle">划线价:</text>
92   - <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
93   - </view>
94   - <view class="itemContent-child">
95   - <text class="contentTitle">平折扣:</text>
96   - <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
97   - </view>
98   - <view class="itemContent-child">
99   - <text class="contentTitle">异常问题:</text>
100   - <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
101   - </view>
102   -
103   - </view>
104   - </view>
105   - </view>
106   - </view >
  62 + </view>
  63 + <view
  64 + class="screen-item"
  65 + v-if="current === 1"
  66 + >
  67 + <view class="D3_list">
  68 + <view
  69 + v-for="(item) in parameter"
  70 + :key="item.key"
  71 + >
  72 + <image
  73 + class="D3_image"
  74 + v-bind:src="item.img"
  75 + ></image>
  76 + <span>{{item.standard || '暂无'}}</span>
  77 + <span>{{item.slength || '暂无'}}</span>
  78 + </view>
107 79 </view>
108   - <view class="D4" v-if="current !==2">
109   - <view class="D4_esvalue">
110   - <view>{{esvalue}}</view>
111   - <view class="D4_2">
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>
114   - </view>
115   - </view>
  80 + </view>
  81 + <view
  82 + class="screen-item"
  83 + v-if="current === 0"
  84 + >
  85 + <view class="D3_list">
  86 + <!-- <block>
  87 + <view>主体</view>
  88 + <view>商品产地：韩国</view>
  89 + <view>包装清单：彩色隐形 * 1</view>
  90 + </block> -->
  91 + <!-- 迭代时建议配合接口修改 为数组 -->
  92 + <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
  93 + <view class="">
  94 + 年龄：<view
  95 + v-for="(item,index) in tag.prod_tag_age"
  96 + :key="index"
  97 + >
  98 + {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
  99 + </view>
116 100 </view>
117   - <view class="D4_list">
118   - <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
  101 + </view>
  102 + <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
  103 + <view class="">
  104 + 颜色：<view
  105 + v-for="(item,index) in tag.prod_tag_color"
  106 + :key="index"
  107 + >
  108 + {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
  109 + </view>
119 110 </view>
120   - </view>
121   - <view class="D5" v-if="current !==2">
122   - <view class="D5_fixed1">
123   - <image src="/static/img/detail/hr.png"></image>
124   - <view>商品详细</view>
125   - <image src="/static/img/detail/hr.png"></image>
  111 + </view>
  112 + <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
  113 + <view class="">
  114 + 脸型：<view
  115 + v-for="(item,index) in tag.prod_tag_face"
  116 + :key="index"
  117 + >
  118 + {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
  119 + </view>
126 120 </view>
127   - <view class="D5_all">
128   - <image v-bind:src="imgAll"></image>
  121 + </view>
  122 + <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
  123 + <view class="">
  124 + 赠品：<view
  125 + v-for="(item,index) in tag.prod_tag_freesend"
  126 + :key="index"
  127 + >
  128 + {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
  129 + </view>
129 130 </view>
130   - <view class="D5_photoes">
131   - <view class="D5_photoes1">
132   - <view v-for="(photoes) in photoes" :key="photoes.value">
133   - <image v-bind:src = "photoes.img"></image>
134   - <view>{{photoes.value}}</view>
135   - </view>
136   - </view>
137   - <view class="D5_logo1">帕森防蓝光镜片</view>
138   - <view class="D5_logo2">健康护眼，我们是认真的！</view>
139   - <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
  131 + </view>
  132 + <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
  133 + <view class="">
  134 + 保险：<view
  135 + v-for="(item,index) in tag.prod_tag_insurance"
  136 + :key="index"
  137 + >
  138 + {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
  139 + </view>
140 140 </view>
  141 + </view>
  142 + <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
  143 + <view class="">
  144 + 材质：<view
  145 + v-for="(item,index) in tag.prod_tag_metal"
  146 + :key="index"
  147 + >
  148 + {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
  149 + </view>
  150 + </view>
  151 + </view>
  152 + <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
  153 + <view class="">
  154 + 个性：<view
  155 + v-for="(item,index) in tag.prod_tag_personal"
  156 + :key="index"
  157 + >
  158 + {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
  159 + </view>
  160 + </view>
  161 + </view>
  162 + <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
  163 + <view class="">
  164 + 场景：<view
  165 + v-for="(item,index) in tag.prod_tag_sense"
  166 + :key="index"
  167 + >
  168 + {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
  169 + </view>
  170 + </view>
  171 + </view>
  172 + <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
  173 + <view class="">
  174 + 性别：<view
  175 + v-for="(item,index) in tag.prod_tag_sex"
  176 + :key="index"
  177 + >
  178 + {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
  179 + </view>
  180 + </view>
  181 + </view>
  182 + <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
  183 + <view class="">
  184 + 风格：<view
  185 + v-for="(item,index) in tag.prod_tag_style"
  186 + :key="index"
  187 + >
  188 + {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
  189 + </view>
  190 + </view>
  191 + </view>
  192 + <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
  193 + <view class="">
  194 + 重量：<view
  195 + v-for="(item,index) in tag.prod_tag_weight"
  196 + :key="index"
  197 + >
  198 + {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
  199 + </view>
  200 + </view>
  201 + </view>
141 202 </view>
142   - <view class="D6" v-if="current !==2">
143   - <view class="D6_v1">CHARM DETAIL</view>
144   - <view class="D6_v2">细节展示</view>
145   - <view ><image v-bind:src="imgDetail"></image></view>
146   - <view>........................................................................</view>
147   - <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
148   - </view>
  203 + </view>
  204 + <view
  205 + class="screen-item "
  206 + v-if="current ===2"
  207 + >
  208 + <view class="customerService">
  209 + <view class="serviceItem">
  210 + <view class="title">
  211 + <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
  212 + <text class="titleText">卖家服务</text>
  213 + </view>
  214 + <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
  215 + </view>
  216 + <view class="serviceItem">
  217 + <view class="title">
  218 + <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
  219 + <text class="titleText">平台承诺</text>
  220 + </view>
  221 + <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
  222 + </view>
  223 + <view class="serviceItem">
  224 + <view class="title">
  225 + <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
  226 + <text class="titleText">正品保证</text>
  227 + </view>
  228 + <view class="itemContent">向您保证所售商品均为正品行货</view>
  229 + </view>
  230 + <view class="serviceItem2">
  231 + <view class="title">
  232 + <text class="titleText">权利申明</text>
  233 + </view>
  234 + <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
  235 + </view>
  236 + <view class="serviceItem2">
  237 + <view class="title">
  238 + <text class="titleText">价格保证</text>
  239 + </view>
  240 + <view class="itemContent">
  241 + <view class="itemContent-child">
  242 + <text class="contentTitle">平台价:</text>
  243 + <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
  244 + </view>
  245 + <view class="itemContent-child">
  246 + <text class="contentTitle">划线价:</text>
  247 + <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
  248 + </view>
  249 + <view class="itemContent-child">
  250 + <text class="contentTitle">平折扣:</text>
  251 + <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
  252 + </view>
  253 + <view class="itemContent-child">
  254 + <text class="contentTitle">异常问题:</text>
  255 + <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
  256 + </view>
149 257  
150   - <!-- 底部菜单 -->
151   - <view class="botton">
152   - <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
153   - <view class="botton_2">
154   - <view class="botton_input">加入购物车</view>
155   - <view class="botton_now" @click="goPerchase">立即购买</view>
156 258 </view>
  259 + </view>
157 260 </view>
  261 + </view>
158 262 </view>
  263 + <view
  264 + class="D4"
  265 + v-if="current !==2"
  266 + >
  267 + <view class="D4_esvalue">
  268 + <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
  269 + <view class="D4_2">
  270 + <view
  271 + class="star"
  272 + v-for="o in starCount"
  273 + :key="o"
  274 + >
  275 + <image
  276 + src="../../static/img/detail/d_star.png"
  277 + mode="aspectFill"
  278 + style="height: 26rpx; width: 28rpx;"
  279 + ></image>
  280 + </view>
  281 + </view>
  282 + </view>
  283 + <view class="D4_list">
  284 + <view
  285 + v-for="(assess) in goodInfo.judge_tag"
  286 + :key="assess.key"
  287 + >{{assess.name}}</view>
  288 + </view>
  289 + </view>
  290 + <view
  291 + class="D5"
  292 + v-if="current !==2"
  293 + >
  294 + <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
  295 + <image src="/static/img/detail/hr.png"></image>
  296 + <view>商品详细</view>
  297 + <image src="/static/img/detail/hr.png"></image>
  298 + </view>
  299 + <view class="D5_all" v-html="test">
  300 + <!-- <block>
  301 + <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
  302 + </block> -->
  303 + </view>
  304 + </view>
  305 + <!-- 底部菜单 -->
  306 + <view class="botton">
  307 + <view
  308 + @tap="toCart()"
  309 + class="botton_1"
  310 + >
  311 + <image v-bind:src="imgShop.img"></image>
  312 + <view class="botton_image">购物车</view>
  313 + </view>
  314 + <view class="botton_2">
  315 + <view
  316 + class="botton_input"
  317 + @tap="addCart()"
  318 + >加入购物车</view>
  319 + <view
  320 + class="botton_now"
  321 + @tap="goPerchase()"
  322 + >立即购买</view>
  323 + </view>
  324 + </view>
  325 + </view>
159 326 </template>
160 327  
161   -<script>
162   -import store from '@/store';
163   -export default {
164   - data(){
165   - return {
166   - name:'商品名称',
167   - goodType:2,
168   - price: 120,
169   - number: 391,
170   - screenItems: [
171   - {current:0,text:'商品保障'},
172   - {current:1,text:'规格参数'},
173   - {current:2,text:'售后保障'},
174   - ],
175   - current: 0,
176   - starCount:5,
177   - infos: [
178   - { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
179   - { goods_id: 1, 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人付款' },
181   - { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
182   - ],
183   - parameter:[
184   - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
185   - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
186   - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
187   - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
188   - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
189   - {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
190   - ],
191   - assess:[
192   - {key: 0, Iassess: '价格实惠'},
193   - {key: 1, Iassess: '美观大方'},
194   - {key: 2, Iassess: '易搭配'}
195   - ],
196   - esvalue:'宝贝好评率 100%',
197   - introduction:{
198   - material:'钛合金',
199   - func:'抗疲劳/防辐射',
200   - rate: 1.6
201   - },
202   - imgAll:'/static/img/detail/d8.png' ,
203   - photoes:[
204   - {value:'日常办公', img:'/static/img/detail/d9.png'},
205   - {value:'上网', img:'/static/img/detail/d10.png'},
206   - {value:'追剧', img:'/static/img/detail/d11.png'},
207   - {value:'玩游戏', img:'/static/img/detail/d12.png'},
208   - ],
209   - imgDetail:'/static/img/detail/d13.png',
210   - imgShop:{
211   - img:'/static/tab-cart.png',
212   - IsShown: false
213   - }
214   - }
215   - },
216   - onLoad:function(option){
217   - this.goodType = option.goodType
218   - // console.log(this.updateGoodType)
219   - store.dispatch('read/fetch');
220   - },
221   - computed:{
222   - updateGoodType(){
223   - return this.goodType
224   - },
225   - goodInfo() {
226   - console.log(this.$store.state.read.goodInfo)
227   - return this.$store.state.read.goodInfo;
228   - },
229   - },
230   - methods:{
231   - goPerchase(){
232   - switch(this.updateGoodType){
233   - case '1':
234   - uni.navigateTo({
235   - url: '../detailsChoiceArgs/detailsChoiceArgs',
236   - success: res => {},
237   - fail: () => {},
238   - complete: () => {}
239   - });
240   - break;
241   - case '2':
242   - uni.navigateTo({
243   - url: `../detailStandard/detailStandard_k`,
244   - success: res => {},
245   - fail: () => {},
246   - complete: () => {}
247   - });
248   - break;
249   - case '3':
250   - uni.navigateTo({
251   - url: `../purchaseLenses/purchaseLenses`,
252   - success: res => {},
253   - fail: () => {},
254   - complete: () => {}
255   - });
256   - break;
257   - case '4':
258   - uni.navigateTo({
259   - url: `../detailStandard/detailStandard_sun`,
260   - success: res => {},
261   - fail: () => {},
262   - complete: () => {}
263   - });
264   - break;
265   - default :
266   - break
267   - }
268   - },
269   - tabChange(e) {
270   - if (this.current !== e) {
271   - this.current = e;
272   - }
273   - }
274   - }
  328 +<script>
  329 +import store from '@/store'
  330 +export default {
  331 + data () {
  332 + return {
  333 + test: '',
  334 + goodType: 2,
  335 + pid: 0,
  336 + // 购物车数据
  337 + addCartList: {
  338 + mp_id: 0,
  339 + sk_id: 0,
  340 + num: 1,
  341 + price: '',
  342 + },
  343 + screenItems: [
  344 + { current: 0, text: '商品介绍' },
  345 + { current: 1, text: '规格参数' },
  346 + { current: 2, text: '售后保障' },
  347 + ],
  348 + current: 0,
  349 + starCount: 5,
  350 + parameter: [
  351 + { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
  352 + { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
  353 + { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
  354 + { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
  355 + { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
  356 + { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
  357 + ],
  358 + esvalue: '宝贝好评率',
  359 + introduction: {
  360 + material: '钛合金',
  361 + func: '抗疲劳/防辐射',
  362 + rate: '男/女',
  363 + },
  364 + imgAll: '/static/img/detail/d8.png',
  365 + photoes: [
  366 + { value: '日常办公', img: '/static/img/detail/d9.png' },
  367 + { value: '上网', img: '/static/img/detail/d10.png' },
  368 + { value: '追剧', img: '/static/img/detail/d11.png' },
  369 + { value: '玩游戏', img: '/static/img/detail/d12.png' },
  370 + ],
  371 + imgDetail: '/static/img/detail/d13.png',
  372 + imgShop: {
  373 + img: '/static/tab-cart.png',
  374 + IsShown: false,
  375 + },
  376 + tag: {
  377 + prod_tag_freesend: [{
  378 + label: '眼镜盒',
  379 + value: '262',
  380 + }],
  381 + },
  382 + }
  383 + },
  384 + onLoad: function ({ pid, sk_id }) {
  385 + this.pid = pid
  386 + // console.log('sk_id=====>',sk_id)
  387 + store.dispatch('read/fetch', {
  388 + pid,
  389 + sk_id,
  390 + }).then(() => {
  391 + this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
  392 + this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
  393 + this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
  394 + this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
  395 + this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
  396 + this.parameter[5].slength = `${this.goodInfo.weight}mm`
  397 + this.tag = this.goodInfo.tag
  398 + this.test = this.goodInfo.prodIntro1
  399 + this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
  400 + // addCart
  401 + this.addCartList.price = this.goodInfo.priceArea.Min_Price
  402 + this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
  403 + this.addCartList.mp_id = this.goodInfo.glassData.mp_id
  404 + })
  405 + // console.log(this.$store.state.user.userInfo.uid + 'ssss')
  406 + },
  407 + computed: {
  408 + updateGoodType () {
  409 + return this.goodType
  410 + },
  411 + goodInfo () {
  412 + console.log(this.$store.state.read.goodInfo)
  413 + return this.$store.state.read.goodInfo
  414 + },
  415 + },
  416 + methods: {
  417 + // 前往购物车
  418 + toCart() {
  419 + uni.switchTab({
  420 + url: '/pages/cart/cart',
  421 + success: res => {},
  422 + fail: (error) => { console.log('跳转购物车失败======>', error) },
  423 + complete: () => { console.log('toCart') },
  424 + })
  425 + },
  426 + // 加入购物车
  427 + addCart () {
  428 + store.dispatch('cart/addCart', {
  429 + uid: this.$store.state.user.userInfo.uid,
  430 + openid: this.$store.state.user.userInfo.openid,
  431 + mp_id: this.addCartList.mp_id,
  432 + sk_id: this.addCartList.sk_id,
  433 + num: this.addCartList.num,
  434 + pid: this.pid,
  435 + price: this.addCartList.price,
  436 + })
  437 + // 再次请求购物车接口，实现实时更新
  438 + store.dispatch('cart/getCartList', {
  439 + uid: this.$store.state.user.userInfo.uid,
  440 + })
  441 + },
  442 + goPerchase () {
  443 + // switch (this.updateGoodType) {
  444 + // case '1':
  445 + console.log('goPerchase')
  446 + uni.navigateTo({
  447 + url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
  448 + success: res => {},
  449 + fail: (error) => { console.log('跳转参数选择失败======>', error) },
  450 + complete: () => { console.log('goPerchase') },
  451 + })
  452 + // break
  453 + // case '2':
  454 + // uni.navigateTo({
  455 + // url: '../detailStandard/detailStandard_k',
  456 + // success: res => {},
  457 + // fail: () => {},
  458 + // complete: () => {}
  459 + // })
  460 + // break
  461 + // case '3':
  462 + // uni.navigateTo({
  463 + // url: '../purchaseLenses/purchaseLenses',
  464 + // success: res => {},
  465 + // fail: () => {},
  466 + // complete: () => {}
  467 + // })
  468 + // break
  469 + // case '4':
  470 + // uni.navigateTo({
  471 + // url: '../detailStandard/detailStandard_sun',
  472 + // success: res => {},
  473 + // fail: () => {},
  474 + // complete: () => {}
  475 + // })
  476 + // break
  477 + // default :
  478 + // break
  479 + // }
  480 + },
  481 + // 加入购物车
  482 + // addCart () {
  483 + // store.dispatch('cart/addCart', {
  484 + // uid: this.$store.state.user.userInfo.uid,
  485 + // openid: this.$store.state.user.userInfo.openid,
  486 + // pid: this.pid,
  487 + // checkedSKU: {},
  488 + // })
  489 + // store.dispatch('cart/getCartList', {
  490 + // uid: this.$store.state.user.userInfo.uid, // 用户id
  491 + // })
  492 + // },
  493 + tabChange (e) {
  494 + if (this.current !== e) {
  495 + this.current = e
  496 + }
  497 + },
  498 + },
275 499 }
276 500 </script>
277 501 <style lang='scss'>
278   - .container{
279   - background-color:#f8f8f8 ;
  502 +.container {
  503 + background-color: #f8f8f8;
  504 +}
  505 +.D1,
  506 +.D2,
  507 +.D3,
  508 +.D4,
  509 +.D6 {
  510 + background: #ffffff;
  511 + margin-bottom: 10px;
  512 + padding: 8px 20px 8px 20px;
  513 + box-sizing: border-box;
  514 + .swiperImage {
  515 + width: 684rpx;
  516 + height: 480rpx;
  517 + image {
  518 + max-width: 100%;
  519 + max-height: 100%;
  520 + border-radius: 16rpx;
280 521 }
281   - .D1,.D2,.D3,.D4,.D6{
282   - background: #ffffff;
283   - margin-bottom: 10px;
284   - padding:8px 20px 8px 20px;
285   - box-sizing: border-box;
286   - .swiperImage {
287   - width: 684rpx;
288   - height: 512rpx;
289   - image {
290   - width: 100%;
291   - height: 100%;
292   - border-radius: 16rpx;
293   - }
294   - }
  522 + }
  523 +}
  524 +.D5 {
  525 + background: #ffffff;
  526 + padding: 8px 20px 8px 20px;
  527 + box-sizing: border-box;
  528 +}
  529 +.swiperImage {
  530 + width: 100%;
  531 + height: 560rpx;
  532 + .swiper-item {
  533 + width: 100%;
  534 + image {
  535 + width: 100%;
295 536 }
296   - .D5{
297   - background: #ffffff;
298   - padding:8px 20px 8px 20px;
299   - box-sizing: border-box;
  537 + }
  538 +}
  539 +.D1 {
  540 + .D1_price {
  541 + color: #eb5d3b;
  542 + font-size: 18px;
  543 + margin-top: 5px;
  544 + font-family: "PingFangSC-Semibold";
  545 + display: flex;
  546 + justify-content: space-between;
  547 + .D1_number {
  548 + color: #999999;
  549 + font-size: 14px;
  550 + font-family: "PingFangSC-Regular";
300 551 }
301   - .swiperImage{
302   - width: 100%;
303   - height: 560rpx;
304   - .swiper-item{
305   - width: 100%;
306   - image{
307   - width: 100%;
308   - }
309   - }
  552 + }
  553 + .D1_name {
  554 + font-size: 16px;
  555 + font-family: "PingFangSC-Semibold";
  556 + margin-top: 5px;
  557 + .D1_name1 {
  558 + font-weight: bold;
  559 + font-size: 16px;
  560 + color: #333333;
310 561 }
311   - .D1{
312   - .D1_price{
313   - color: #EB5D3B;
314   - font-size: 18px;
315   - margin-top: 5px;
316   - font-family: 'PingFangSC-Semibold';
317   - }
318   - .D1_name{
319   - font-size: 16px;
320   - font-family: 'PingFangSC-Semibold';
321   - margin-top: 5px;
322   - display: flex;
323   - justify-content: space-between;
324   - .D1_name1{
325   - font-weight: bold;
326   - font-size: 16px;
327   - color: #333333;
328   - }
329   - .D1_number{
330   - color: #999999 ;
331   - font-size: 14px;
332   - font-family: 'PingFangSC-Regular';
333   - }
334   - }
335   - .D1_spans{
336   - font-size: 10px;
337   - color:#999999;
338   - margin-top: 5px;
339   - span{
340   - height: 14px;
341   - margin-right: 10px;
342   - }
  562 + }
  563 + .D1_spans {
  564 + font-size: 10px;
  565 + color: #999999;
  566 + margin-top: 5px;
  567 + span {
  568 + height: 14px;
  569 + margin-right: 10px;
  570 + }
  571 + }
  572 +}
  573 +.D2 {
  574 + font-size: 14px;
  575 + font-family: "PingFangSC-Regular";
  576 + view {
  577 + height: 24px;
  578 + }
  579 + .D2_span1 {
  580 + color: #999999;
  581 + }
  582 + .D2_span2 {
  583 + color: #333333;
  584 + }
  585 +}
  586 +.D3 {
  587 + .screenBar {
  588 + width: 670rpx;
  589 + margin-top: 20rpx;
  590 + margin-bottom: 24rpx;
  591 + display: flex;
  592 + flex-direction: row;
  593 + justify-content: space-between;
  594 + align-items: center;
  595 + font-size: 14px;
  596 + color: #333333;
  597 + transition: all 0.2s;
  598 + }
  599 + .screen-item {
  600 + font-size: 32rpx;
  601 + color: #333333;
  602 + display: flex;
  603 + transition: all 0.2s;
  604 + .D3_list {
  605 + margin-bottom: 4px;
  606 + }
  607 + .D3_list view {
  608 + display: flex;
  609 + align-content: center;
  610 + font-size: 14px;
  611 + color: #333333;
  612 + }
  613 + .D3_list image {
  614 + width: 50px;
  615 + height: 25px;
  616 + margin-right: 6px;
  617 + }
  618 + .D3_list span {
  619 + margin-left: 6px;
  620 + margin-right: 5px;
  621 + font-family: "PingFangSC-Regular";
  622 + }
  623 + }
  624 + .active {
  625 + border-bottom: 4rpx solid #ff6b4a;
  626 + }
  627 + .customerService {
  628 + margin-bottom: 90rpx;
  629 + .serviceItem {
  630 + margin-bottom: 32rpx;
  631 + .title {
  632 + display: flex;
  633 + flex-direction: row;
  634 + align-items: center;
  635 + .titleText {
  636 + font-size: 14px;
  637 + color: #333333;
  638 + margin-bottom: 12rpx;
343 639 }
344   -
  640 + }
  641 + .itemContent {
  642 + font-size: 14px;
  643 + color: #999999;
  644 + margin-left: 18rpx;
  645 + }
345 646 }
346   - .D2{
  647 + .serviceItem2 {
  648 + margin-left: 18rpx;
  649 + margin-bottom: 32rpx;
  650 + .titleText {
347 651 font-size: 14px;
348   - font-family: 'PingFangSC-Regular';
349   - view{
350   - height: 24px;
351   - }
352   - .D2_span1{
353   - color: #999999;
354   - }
355   - .D2_span2{
356   - color: #333333;
  652 + color: #ff6b4a;
  653 + }
  654 + .itemContent {
  655 + font-size: 14px;
  656 + color: #999999;
  657 + .itemContent-child {
  658 + margin-bottom: 40rpx;
  659 + .contentTitle {
  660 + border-bottom: 1px solid #ff6b4a;
  661 + }
357 662 }
  663 + }
358 664 }
359   - .D3{
360   - .screenBar{
361   - width: 670rpx;
362   - margin-top: 20rpx;
363   - margin-bottom: 24rpx;
364   - display: flex;
365   - flex-direction: row;
366   - justify-content: space-between;
367   - align-items: center;
368   - font-size: 14px;
369   - color: #333333;
370   - transition:all 0.2s;
371   - }
372   - .screen-item{
373   - font-size: 32rpx;
374   - color: #333333;
375   - display: flex;
376   - transition:all 0.2s;
377   - .D3_list{
378   - margin-bottom: 4px;
379   - }
380   - .D3_list view{
381   - display: flex;
382   - align-content: center;
383   - font-size: 14px;
384   - color: #333333;
385   - }
386   - .D3_list image{
387   - width: 50px;
388   - height: 25px;
389   - margin-right: 6px;
390   - }
391   - .D3_list span{
392   - margin-left: 6px;
393   - margin-right: 5px;
394   - font-family: 'PingFangSC-Regular';
395   - }
396   - }
397   - .active{
398   - border-bottom: 4rpx solid #FF6B4A;
399   - }
400   - .customerService{
401   - margin-bottom: 90rpx;
402   - .serviceItem{
403   - margin-bottom: 32rpx;
404   - .title{
405   - display: flex;flex-direction: row;
406   - align-items: center;
407   - .titleText{
408   - font-size: 14px;
409   - color: #333333;
410   - margin-bottom: 12rpx;
411   - }
412   - }
413   - .itemContent{
414   - font-size: 14px;
415   - color: #999999;
416   - margin-left: 18rpx;
417   - }
418   - }
419   - .serviceItem2{
420   - margin-left: 18rpx;
421   - margin-bottom: 32rpx;
422   - .titleText{
423   - font-size: 14px;
424   - color: #FF6B4A;
425   - }
426   - .itemContent{
427   - font-size: 14px;
428   - color: #999999;
429   - .itemContent-child{
430   - margin-bottom: 40rpx;
431   - .contentTitle{
432   - border-bottom: 1px solid #FF6B4A;
433   - }
434   - }
435   - }
436   - }
437   - }
  665 + }
  666 +}
  667 +.D4 {
  668 + .D4_esvalue {
  669 + font-size: 14px;
  670 + color: #333333;
  671 + display: flex;
  672 + justify-content: space-between;
  673 + margin-bottom: 10px;
  674 + .D4_2 {
  675 + width: 90px;
  676 + display: flex;
  677 + align-items: center;
  678 + justify-content: space-between;
438 679 }
439   - .D4{
440   - .D4_esvalue{
441   - font-size: 14px;
442   - color: #333333;
443   - display: flex;
444   - justify-content: space-between;
445   - margin-bottom: 10px;
446   - .D4_2{
447   - width: 90px;
448   - display: flex;
449   - align-items: center;
450   - justify-content: space-between;
451   - }
452   - }
453   - .D4_esvalue view{
454   - font-size: 14px;
455   - color: #333333;
456   - font-weight: bold;
457   - }
458   - .D4_list view{
459   - display: inline-block;
460   - font-size: 12px;
461   - text-align: center;
462   - margin-right: 12px;
463   - width: 90px;
464   - height: 24px;
465   - line-height: 24px;
466   - background: #F2F2F2;
467   - color: #666666 ;
468   - }
  680 + }
  681 + .D4_esvalue view {
  682 + font-size: 14px;
  683 + color: #333333;
  684 + font-weight: bold;
  685 + }
  686 + .D4_list{
  687 + display: grid;
  688 + grid-row-gap: 10px;
  689 + grid-column-gap: 4px;
  690 + }
  691 + .D4_list view {
  692 + display: flex;
  693 + justify-content: center;
  694 + align-items: center;
  695 + font-size: 12px;
  696 + width: 118px;
  697 + height: 24px;
  698 + border-radius: 2px;
  699 + background: #f2f2f2;
  700 + color: #666666;
  701 + // letter-spacing: 1px;
  702 + }
  703 +}
  704 +.D5 {
  705 + .D5_fixed1 {
  706 + display: flex;
  707 + justify-content: space-between;
  708 + align-content: center;
  709 + margin-bottom: 12px;
  710 + view {
  711 + font-size: 14px;
  712 + color: #333333;
  713 + font-weight: bold;
  714 + font-family: "PingFangSC-Medium";
  715 + line-height: 24px;
469 716 }
470   - .D5{
471   - .D5_fixed1{
472   - display: flex;
473   - justify-content: space-between;
474   - align-content: center;
475   - margin-bottom: 12px;
476   - view{
477   - font-size: 14px;
478   - color: #333333;
479   - font-weight: bold;
480   - font-family: 'PingFangSC-Medium';
481   - line-height: 24px;
482   - }
483   - image{
484   - width: 240rpx;
485   - height: 3px;
486   - margin-top: 10px;
487   - }
488   - }
489   - .D5_all {
490   - width: 100%;
491   - height: 380px;
492   - margin-bottom: 30px;
493   - font-family: 'PingFangSC-Regular';
494   - border: #999999 solid 1.5px;
495   - image{
496   - width: 100%;
497   - height: 380px;
498   - }}
499   - .D5_photoes1{
500   - display: grid;
501   - grid-template-columns: 48% 48%;
502   - grid-row-gap: 10px;
503   - grid-column-gap: 4%;
504   - image{
505   - width: 100%;
506   - height: 70px;
507   - }
508   - view{
509   - width: 100%;
510   - font-size: 14px;
511   - text-align: center;
512   - background: #949494;
513   - font-family: 'PingFangSC-Regular';
514   - color: #ffffff;
515   - view{
516   - height: 24px;
517   - line-height: 24px;
518   - }
519   - }
520   - }
521   - .D5_logo1,.D5_logo2{
522   - text-align: center;
523   - }
524   - .D5_logo1{
525   - margin-top: 40px;
526   - font-size: 24px;
527   - font-weight: bold;
528   - font-family: 'PingFangSC-Semibold';
529   - }
530   - .D5_logo2{
531   - font-size: 12px;
532   - }
533   - .D5_logo3{
534   - width: 100%;
535   - text-align: center;
536   - image{
537   - width: 50px;
538   - height: 24px;
539   - }
540   - }
  717 + image {
  718 + width: 240rpx;
  719 + height: 3px;
  720 + margin-top: 10px;
541 721 }
542   - .D6{
543   - width: 100%;
544   - height: 430px;
545   - background: #F9F6ED;
546   - margin-bottom: 74px;
547   - view{
548   - text-align: center;
549   - }
550   - .D6_v1{
551   - font-weight: bold;
552   - }
553   - .D6_v2{
554   - font-size: 14px;
555   - margin-bottom: 30px;
556   - }
557   - .D6_v5{
558   - .D6_v5_s1{
559   - font-weight: bold;
560   - }
561   - .D6_v5_s2{
562   - font-size: 14px;
563   - }
564   - }
  722 + }
  723 + .D5_all {
  724 + width: 100%;
  725 + margin-top: 30rpx;
  726 + margin-right: 30rpx;
  727 + margin-bottom: 180rpx;
  728 + font-family: "PingFangSC-Regular";
  729 + // border: #999999 solid 1.5px;
  730 + }
  731 +}
  732 +.D6 {
  733 + width: 100%;
  734 + height: 430px;
  735 + background: #f9f6ed;
  736 + margin-bottom: 74px;
  737 + view {
  738 + text-align: center;
  739 + }
  740 + .D6_v1 {
  741 + font-weight: bold;
  742 + }
  743 + .D6_v2 {
  744 + font-size: 14px;
  745 + margin-bottom: 30px;
  746 + }
  747 + .D6_v5 {
  748 + .D6_v5_s1 {
  749 + font-weight: bold;
565 750 }
566   - .botton{
567   - position: fixed;
568   - bottom: 0;
569   - height: 74px;
570   - width: 100%;
571   - background: #FFFFFF;
572   - padding: 20px 20px 8px 20px;
573   - font-family: 'PingFangSC-Regular';
574   - box-sizing: border-box;
575   - display: flex;
576   - justify-content: space-between;
577   - align-content: center;
578   - .botton_1{
579   - width: 20%;
580   - height: 100%;
581   - text-align: center;
582   - color: #989898;
583   - }
584   - image{
585   - width: 60%;
586   - height: 30px;
587   - }
588   - .botton_image{
589   - font-size: 12px;
590   - text-align: center;
591   - }
592   - .botton_2{
593   - width: 74%;
594   - height: 86%;
595   - display: grid;
596   - grid-template-columns: 50% 50%;
597   - }
598   - .botton_input{
599   - display: inline-flex;
600   - align-items: center;
601   - justify-content: space-around;
602   - background: #FFF0EC;
603   - font-size: 16px;
604   - color: #FF6B4A;
605   - border-radius: 20px 0 0 20px;
606   - }
607   - .botton_now{
608   - display: inline-flex;
609   - align-items: center;
610   - justify-content: space-around;
611   - background: #FF6B4A;
612   - font-size: 16px;
613   - color: #FFFFFF;
614   - border-radius:0 20px 20px 0;
615   - }
  751 + .D6_v5_s2 {
  752 + font-size: 14px;
616 753 }
617   -</style>
618 754 \ No newline at end of file
  755 + }
  756 +}
  757 +.botton {
  758 + position: fixed;
  759 + bottom: 0;
  760 + height: 74px;
  761 + width: 100%;
  762 + background: #ffffff;
  763 + padding: 20px 20px 8px 20px;
  764 + font-family: "PingFangSC-Regular";
  765 + box-sizing: border-box;
  766 + display: flex;
  767 + justify-content: space-between;
  768 + align-content: center;
  769 + .botton_1 {
  770 + width: 20%;
  771 + height: 100%;
  772 + text-align: center;
  773 + color: #989898;
  774 + }
  775 + image {
  776 + width: 60%;
  777 + height: 30px;
  778 + }
  779 + .botton_image {
  780 + font-size: 12px;
  781 + text-align: center;
  782 + }
  783 + .botton_2 {
  784 + width: 74%;
  785 + height: 86%;
  786 + display: grid;
  787 + grid-template-columns: 50% 50%;
  788 + }
  789 + .botton_input {
  790 + display: inline-flex;
  791 + align-items: center;
  792 + justify-content: space-around;
  793 + background: #fff0ec;
  794 + font-size: 16px;
  795 + color: #ff6b4a;
  796 + border-radius: 20px 0 0 20px;
  797 + }
  798 + .botton_now {
  799 + display: inline-flex;
  800 + align-items: center;
  801 + justify-content: space-around;
  802 + background: #ff6b4a;
  803 + font-size: 16px;
  804 + color: #ffffff;
  805 + border-radius: 0 20px 20px 0;
  806 + }
  807 +}
  808 +</style>
... ...
src/pages/index/index.vue
Diff comments   View file @3fb9af8
... ... @@ -3,19 +3,27 @@
3 3 <view class="header">
4 4 <!-- 搜索-->
5 5 <view class="searchBar">
6   - <icon class="searchIcon" type="search" size="14"></icon>
  6 + <icon
  7 + class="searchIcon"
  8 + type="search"
  9 + size="14"
  10 + ></icon>
7 11 <input
8   - v-model="searchText"
9   - class="searchIpt"
10   - placeholder="老花镜"
11   - confirm-type="search"
12   - @blur="searchKey"
  12 + v-model="searchText"
  13 + class="searchIpt"
  14 + placeholder="老花镜"
  15 + confirm-type="search"
  16 + @blur="searchKey"
13 17 />
14 18 </view>
15 19  
16 20 <!-- 筛选栏-->
17 21 <!-- <view class="screenBar">
18   - <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
  22 + <view
  23 + v-for="item in screenItems"
  24 + :key="item.current"
  25 + @click="onClickItem(item.current)"
  26 + >
19 27 <view
20 28 class="screenItem"
21 29 v-bind:class="{ active: current === item.current }"
... ... @@ -23,7 +31,10 @@
23 31 @click="dropDown"
24 32 >
25 33 {{ item.text }}
26   - <icon type="info" size="14"></icon>
  34 + <icon
  35 + type="info"
  36 + size="14"
  37 + ></icon>
27 38 </view>
28 39 <view
29 40 class="screenItem"
... ... @@ -32,7 +43,10 @@
32 43 @click="showDrawer('showRight')"
33 44 >
34 45 {{ item.text }}
35   - <icon type="info" size="14"></icon>
  46 + <icon
  47 + type="info"
  48 + size="14"
  49 + ></icon>
36 50 </view>
37 51 <view v-if="item.current !== 2&&item.current!==4">
38 52 <view
... ... @@ -41,7 +55,7 @@
41 55 >{{ item.text }}</view>
42 56 </view>
43 57 </view>
44   - </view>-->
  58 + </view> -->
45 59 </view>
46 60 <Uni-drawer
47 61 ref="showRight"
... ... @@ -61,7 +75,7 @@
61 75 <!-- 筛选菜单-->
62 76 <view class="content-wrap">
63 77 <view>
64   - <HMfilterDropdown
  78 + <HMfilterDropdown
65 79 :filterData="categoryList"
66 80 :defaultSelected="filterDropdownValue"
67 81 :updateMenuName="true"
... ... @@ -72,7 +86,11 @@
72 86 <!-- 商品列表 -->
73 87 <view class="goods-list">
74 88 <view class="product-list">
75   - <view class="product" v-for="(goods) in goodsList" :key="goods.id">
  89 + <view
  90 + class="product"
  91 + v-for="(goods) in goodsList"
  92 + :key="goods.id"
  93 + >
76 94 <Card :goods="goods"></Card>
77 95 </view>
78 96 </view>
... ... @@ -84,11 +102,10 @@
84 102 </template>
85 103  
86 104 <script>
87   -import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
88   -import Card from "@/components/CommodityCard/CommodityCard.vue";
89   -import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
90   -import data from "@/common/data.js"; //筛选菜单数据
91   -import store from '@/store';
  105 +import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
  106 +import Card from '@/components/CommodityCard/CommodityCard.vue'
  107 +import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
  108 +import store from '@/store'
92 109  
93 110 export default {
94 111 components: {
... ... @@ -96,118 +113,104 @@ export default {
96 113 HMfilterDropdown: HMfilterDropdown,
97 114 Card: Card
98 115 },
99   - data() {
  116 + data () {
100 117 return {
101   - // screenItems: [
102   - // { current: 0, text: "全部", hasIcon: false },
103   - // { current: 1, text: "销量", hasIcon: false },
104   - // { current: 2, text: "价格", hasIcon: true },
105   - // { current: 3, text: "折扣", hasIcon: false },
106   - // { current: 4, text: "筛选", hasIcon: true }
107   - // ],
108   - // current: 0,
109   - // showRight: false,
110   - indexArr: "",
111   - valueArr: "",
112   - loadingText: "~~到底了~~",
  118 + indexArr: '',
  119 + valueArr: '',
  120 + loadingText: '~~到底了~~',
113 121 filterDropdownValue: [],
114 122 filterData: [],
115   - searchText: '',
116   - // goodsList:[
117   - // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
118   - // { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
119   - // { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
120   - // { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
121   - // { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
122   - // { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
123   - // { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
124   - // { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
125   - // { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
126   - // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
127   - // ],
128   - };
  123 + searchText: ''
  124 + }
129 125 },
130 126 computed: {
131   - goodsList() {
  127 + goodsList () {
132 128 // 也可以从 getters 获取
133   - return this.$store.state.index.list;
  129 + // console.log('index-list=====>',this.$store.state.index.list)
  130 + return this.$store.state.index.list
134 131 },
135   - categoryList(){
136   - return this.$store.state.index.categoryList;
137   - // newData[0].submenu[0].submenu = categoryList[0].submenu
138   - // newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
139   - // newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
140   - // newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
141   - // newData[4].submenu[0] = categoryList[3]
142   - this.filterData = newData;
143   - // this.filterData = categoryList;
144   - },
  132 + categoryList () {
  133 + return this.$store.state.index.categoryList
  134 + }
145 135 },
146 136 filters: {
147   - outData(value) {
148   - return JSON.stringify(value);
  137 + outData (value) {
  138 + return JSON.stringify(value)
149 139 }
150 140 },
151   - onLoad() {
152   - store.dispatch('index/category');
  141 + onLoad () {
  142 + store.dispatch('index/category')
153 143 // this.getList();
154   - store.dispatch('index/list');
  144 + store.dispatch('index/list')
155 145 },
156 146 methods: {
157   - showDrawer(e) {
158   - this.$refs[e].open();
  147 + showDrawer (e) {
  148 + this.$refs[e].open()
159 149 },
160   - getList() {
161   - store.dispatch('index/list');
  150 + getList () {
  151 + store.dispatch('index/list')
162 152 },
163 153 // search(params) {
164 154 // this.$store.index.
165 155 // },
166   - closeDrawer(e) {
167   - this.$refs[e].close();
  156 + closeDrawer (e) {
  157 + this.$refs[e].close()
168 158 },
169   - change(e, type) {
170   - this[type] = e;
  159 + change (e, type) {
  160 + this[type] = e
171 161 },
172   - onClickItem(e) {
  162 + onClickItem (e) {
173 163 if (this.current !== e) {
174   - this.current = e;
  164 + this.current = e
175 165 }
176 166 },
177   - dropDown() {
178   - console.log("下拉");
  167 + dropDown () {
  168 + console.log('下拉')
179 169 },
180   - searchKey(e) {
181   - const { value: keyword } = e.detail;
182   - this.keyWords = keyword;
  170 + searchKey (e) {
  171 + const { value: keyword } = e.detail
  172 + this.keyWords = keyword
183 173 store.dispatch('index/search', {
184 174 params: {},
185   - keyword,
186   - });
  175 + keyword
  176 + })
187 177 },
188   - //接收菜单结果
189   - search(e) {
190   - const { on, value, index } = e;
  178 + // 接收菜单结果
  179 + search (e) {
  180 + const { on, value, selectedData } = e
191 181 let params = {}
192   - if(on[0] === 1) {
  182 + const selectedPayload = {}
  183 + for (const key in selectedData) {
  184 + if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
  185 + selectedPayload[key] = selectedData[key].toString()
  186 + }
  187 + }
  188 + if (on[0] === 1) {
193 189 // 若点击全部
194   - this.searchText = '';
195   - store.dispatch('index/list');
  190 + this.searchText = ''
  191 + store.dispatch('index/list')
196 192 } else {
197   - for(let i = 1; i<=on.length; i++){ // on[0]是全部
198   - if(on[i] === 1) { // 若该选项被选中
199   - params[`${this.categoryList[i].value}`] = value[i][0];
  193 + for (let i = 1; i <= on.length; i++) { // on[0]是全部
  194 + if (on[i] === 1) { // 若该选项被选中
  195 + if (this.categoryList[i].value === 'filter') {
  196 + params = {
  197 + ...selectedPayload,
  198 + ...params
  199 + }
  200 + } else {
  201 + params[`${this.categoryList[i].value}`] = value[i][0]
  202 + }
200 203 }
201 204 }
202 205 store.dispatch('index/search', {
203   - params,
  206 + params,
204 207 keyword: this.keyWords
205   - });
  208 + })
206 209 }
207 210 }
208   - },
  211 + }
209 212  
210   -};
  213 +}
211 214 </script>
212 215  
213 216 <style lang="scss">
... ...
src/pages/lensDetails/lensDetails.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="content">
3   - <scroll-view scroll-y class="sroll-view">
4   - <view class="goods-details">
5   - <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
6   - <swiper-item v-for="(item) in infos" :key="item.goods_id">
7   - <image :src="item.img" mode="scaleToFill"></image>
8   - </swiper-item>
9   - </swiper>
10   - <view class="goods-price">
11   - <text class="now-price">￥120</text>
12   - <text class="old-price">￥198</text>
13   - <text class="buy-num">349人购买过</text>
14   - </view>
15   - <view class="goods-name">
16   - <text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text>
17   - </view>
18   - <view class="goods-courier">
19   - <text>支持7天无理由退货</text>
20   - <text class="courier-support">顺丰发货</text>
21   - </view>
22   - </view>
23   - <view class="goods-form">
24   - <text class="p1">填写验光数据</text>
25   - <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
26   - <view class="choice-use">
27   - <text class="p3">您一般用眼镜:</text>
28   - <image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image>
29   - <text class="p4">阅读</text>
30   - <image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image>
31   - <text class="p5">看远处</text>
32   - </view>
33   - <view class="picker" >
34   - <view class="picker-choice">
35   - <view class="choice-left">
36   - <text class="p11">{{pickerInfoList[0].nameC}}</text>
37   - <text class="p12">{{pickerInfoList[0].nameE}}</text>
38   - </view>
39   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
40   - <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
41   - <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
42   - <image src="../../static/detail-tabicon.png" ></image>
43   - </picker>
44   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
45   - <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
46   - <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
47   - <image src="../../static/detail-tabicon.png" ></image>
48   - </picker>
49   - </view>
50   - </view>
51   - <view class="picker" >
52   - <view class="picker-choice">
53   - <view class="choice-left">
54   - <text class="p11">{{pickerInfoList[1].nameC}}</text>
55   - <text class="p12">{{pickerInfoList[1].nameE}}</text>
56   - </view>
57   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
58   - <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
59   - <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
60   - <image src="../../static/detail-tabicon.png" ></image>
61   - </picker>
62   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
63   - <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
64   - <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
65   - <image src="../../static/detail-tabicon.png" ></image>
66   - </picker>
67   - </view>
68   - </view>
69   - <view class="picker" >
70   - <view class="picker-choice">
71   - <view class="choice-left">
72   - <text class="p11">{{pickerInfoList[2].nameC}}</text>
73   - <text class="p12">{{pickerInfoList[2].nameE}}</text>
74   - </view>
75   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
76   - <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
77   - <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
78   - <image src="../../static/detail-tabicon.png" ></image>
79   - </picker>
80   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
81   - <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
82   - <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
83   - <image src="../../static/detail-tabicon.png" ></image>
84   - </picker>
85   - </view>
86   - </view>
87   - <view class="picker" >
88   - <view class="picker-choice">
89   - <view class="choice-left">
90   - <text class="p11">{{pickerInfoList[3].nameC}}</text>
91   - <text class="p12">{{pickerInfoList[3].nameE}}</text>
92   - </view>
93   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
94   - <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
95   - <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
96   - <image src="../../static/detail-tabicon.png" ></image>
97   - </picker>
98   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
99   - <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
100   - <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
101   - <image src="../../static/detail-tabicon.png" ></image>
102   - </picker>
103   - </view>
104   - </view>
105   - <view class="picker" >
106   - <view class="picker-choice">
107   - <view class="choice-left">
108   - <text class="p11">{{pickerInfoList[4].nameC}}</text>
109   - </view>
110   - <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
111   - <text class="p14">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
112   - <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
113   - <image src="../../static/detail-tabicon.png" ></image>
114   - </picker>
115   - <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
116   - <text class="p14">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
117   - <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
118   - <image src="../../static/detail-tabicon.png" ></image>
119   - </picker>
120   - <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
121   - <text class="p14">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
122   - <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
123   - <image src="../../static/detail-tabicon.png" ></image>
124   - </picker>
125   - </view>
126   - </view>
127   - <view class="confirm">
128   - <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
129   - <text>确认以上输入信息来源于我的验光数据!</text>
130   - </view>
131   - </view>
132   - </scroll-view>
133   - <view class="goods-submit">
134   - <button>下一步</button>
135   - </view>
136   - </view>
  2 + <view class="content">
  3 + <scroll-view
  4 + scroll-y
  5 + class="sroll-view"
  6 + >
  7 + <view class="goods-details">
  8 + <swiper
  9 + class="swiper"
  10 + :indicator-dots="true"
  11 + :autoplay="true"
  12 + :interval="4000"
  13 + :duration="500"
  14 + >
  15 + <swiper-item
  16 + v-for="(item) in infos"
  17 + :key="item.goods_id"
  18 + >
  19 + <image
  20 + :src="item.img"
  21 + mode="scaleToFill"
  22 + ></image>
  23 + </swiper-item>
  24 + </swiper>
  25 + <view class="goods-price">
  26 + <text class="now-price">￥120</text>
  27 + <text class="old-price">￥198</text>
  28 + <text class="buy-num">349人购买过</text>
  29 + </view>
  30 + <view class="goods-name">
  31 + <text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text>
  32 + </view>
  33 + <view class="goods-courier">
  34 + <text>支持7天无理由退货</text>
  35 + <text class="courier-support">顺丰发货</text>
  36 + </view>
  37 + </view>
  38 + <view class="goods-form">
  39 + <text class="p1">填写验光数据</text>
  40 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  41 + <view class="choice-use">
  42 + <text class="p3">您一般用眼镜:</text>
  43 + <image
  44 + :src="tablist.read ? tabicon[0] : tabicon[1]"
  45 + @click="changeRead"
  46 + ></image>
  47 + <text class="p4">阅读</text>
  48 + <image
  49 + :src="tablist.seeLong ? tabicon[0] : tabicon[1]"
  50 + @click="changeSeeLong"
  51 + ></image>
  52 + <text class="p5">看远处</text>
  53 + </view>
  54 + <view class="picker">
  55 + <view class="picker-choice">
  56 + <view class="choice-left">
  57 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  58 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  59 + </view>
  60 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  61 + <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
  62 + <picker
  63 + @change="bindPickerChange01"
  64 + :value="pickerInfoList[0].nameIndex1"
  65 + :range="pickerInfoList[0].nameArray1"
  66 + >
  67 + <image src="../../static/detail-tabicon.png"></image>
  68 + </picker>
  69 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  70 + <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
  71 + <picker
  72 + @change="bindPickerChange02"
  73 + :value="pickerInfoList[0].nameIndex2"
  74 + :range="pickerInfoList[0].nameArray2"
  75 + >
  76 + <image src="../../static/detail-tabicon.png"></image>
  77 + </picker>
  78 + </view>
  79 + </view>
  80 + <view class="picker">
  81 + <view class="picker-choice">
  82 + <view class="choice-left">
  83 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  84 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  85 + </view>
  86 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  87 + <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
  88 + <picker
  89 + @change="bindPickerChange11"
  90 + :value="pickerInfoList[1].nameIndex1"
  91 + :range="pickerInfoList[1].nameArray1"
  92 + >
  93 + <image src="../../static/detail-tabicon.png"></image>
  94 + </picker>
  95 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  96 + <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
  97 + <picker
  98 + @change="bindPickerChange12"
  99 + :value="pickerInfoList[1].nameIndex2"
  100 + :range="pickerInfoList[1].nameArray2"
  101 + >
  102 + <image src="../../static/detail-tabicon.png"></image>
  103 + </picker>
  104 + </view>
  105 + </view>
  106 + <view class="picker">
  107 + <view class="picker-choice">
  108 + <view class="choice-left">
  109 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  110 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  111 + </view>
  112 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  113 + <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
  114 + <picker
  115 + @change="bindPickerChange21"
  116 + :value="pickerInfoList[2].nameIndex1"
  117 + :range="pickerInfoList[2].nameArray1"
  118 + >
  119 + <image src="../../static/detail-tabicon.png"></image>
  120 + </picker>
  121 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  122 + <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
  123 + <picker
  124 + @change="bindPickerChange22"
  125 + :value="pickerInfoList[2].nameIndex2"
  126 + :range="pickerInfoList[2].nameArray2"
  127 + >
  128 + <image src="../../static/detail-tabicon.png"></image>
  129 + </picker>
  130 + </view>
  131 + </view>
  132 + <view class="picker">
  133 + <view class="picker-choice">
  134 + <view class="choice-left">
  135 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  136 + <text class="p12">{{pickerInfoList[3].nameE}}</text>
  137 + </view>
  138 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  139 + <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
  140 + <picker
  141 + @change="bindPickerChange31"
  142 + :value="pickerInfoList[3].nameIndex1"
  143 + :range="pickerInfoList[3].nameArray1"
  144 + >
  145 + <image src="../../static/detail-tabicon.png"></image>
  146 + </picker>
  147 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  148 + <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
  149 + <picker
  150 + @change="bindPickerChange32"
  151 + :value="pickerInfoList[3].nameIndex2"
  152 + :range="pickerInfoList[3].nameArray2"
  153 + >
  154 + <image src="../../static/detail-tabicon.png"></image>
  155 + </picker>
  156 + </view>
  157 + </view>
  158 + <view class="picker">
  159 + <view class="picker-choice">
  160 + <view class="choice-left">
  161 + <text class="p11">{{pickerInfoList[4].nameC}}</text>
  162 + </view>
  163 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  164 + <text class="p14">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
  165 + <picker
  166 + @change="bindPickerChange41"
  167 + :value="pickerInfoList[4].nameIndex1"
  168 + :range="pickerInfoList[4].nameArray1"
  169 + >
  170 + <image src="../../static/detail-tabicon.png"></image>
  171 + </picker>
  172 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  173 + <text class="p14">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
  174 + <picker
  175 + @change="bindPickerChange42"
  176 + :value="pickerInfoList[4].nameIndex2"
  177 + :range="pickerInfoList[4].nameArray2"
  178 + >
  179 + <image src="../../static/detail-tabicon.png"></image>
  180 + </picker>
  181 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  182 + <text class="p14">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
  183 + <picker
  184 + @change="bindPickerChange43"
  185 + :value="pickerInfoList[4].nameIndex3"
  186 + :range="pickerInfoList[4].nameArray3"
  187 + >
  188 + <image src="../../static/detail-tabicon.png"></image>
  189 + </picker>
  190 + </view>
  191 + </view>
  192 + <view class="confirm">
  193 + <image
  194 + :src="tablist.confirm ? tabicon[0] : tabicon[1]"
  195 + @click="changeConfirm"
  196 + ></image>
  197 + <text>确认以上输入信息来源于我的验光数据!</text>
  198 + </view>
  199 + </view>
  200 + </scroll-view>
  201 + <view class="goods-submit">
  202 + <button>下一步</button>
  203 + </view>
  204 + </view>
137 205 </template>
138 206  
139 207 <script>
140 208  
141   - export default {
142   - components: {
143   -
144   - },
145   - data() {
146   - return {
147   - name: '眼镜名称名称',
148   - infos: [
149   - { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
150   - { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
151   - { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
152   - { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
153   - ],
154   - tablist: {
155   - read: true,
156   - seeLong: false,
157   - confirm: false
158   - },
159   - tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
160   - // 度数相关数据
161   - pickerInfoList:[
162   - {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},
163   - {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},
164   - {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},
165   - {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},
166   - {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}
167   - ],
168   - }
169   - },
170   - onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
  209 +export default {
  210 + components: {
171 211  
172   - },
173   - methods: {
174   - changeRead() {
175   - this.tablist.read = !this.tablist.read
176   - // this.current = e.detail.current;
177   - },
178   - changeSeeLong() {
179   - this.tablist.seeLong = !this.tablist.seeLong
180   - },
181   - changeConfirm() {
182   - this.tablist.confirm = !this.tablist.confirm
183   - },
  212 + },
  213 + data() {
  214 + return {
  215 + name: '眼镜名称名称',
  216 + infos: [
  217 + { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan: '1235人付款' },
  218 + { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan: '1235人付款' },
  219 + { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan: '1235人付款' },
  220 + { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan: '1235人付款' }
  221 + ],
  222 + tablist: {
  223 + read: true,
  224 + seeLong: false,
  225 + confirm: false
  226 + },
  227 + tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
  228 + // 度数相关数据
  229 + pickerInfoList: [
  230 + { 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 },
  231 + { 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 },
  232 + { 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 },
  233 + { 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 },
  234 + { 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 }
  235 + ]
  236 + }
  237 + },
  238 + onLoad: function (option) { // option为object类型，会序列化上个页面传递的参数
  239 +
  240 + },
  241 + methods: {
  242 + changeRead() {
  243 + this.tablist.read = !this.tablist.read
  244 + // this.current = e.detail.current;
  245 + },
  246 + changeSeeLong() {
  247 + this.tablist.seeLong = !this.tablist.seeLong
  248 + },
  249 + changeConfirm() {
  250 + this.tablist.confirm = !this.tablist.confirm
  251 + },
184 252  
185   - bindPickerChange01: function(e) {
186   - this.pickerInfoList[0].nameIndex1 = e.target.value
187   - },
188   - bindPickerChange02: function(e) {
189   - this.pickerInfoList[0].nameIndex2 = e.target.value
190   - },
  253 + bindPickerChange01: function(e) {
  254 + this.pickerInfoList[0].nameIndex1 = e.target.value
  255 + },
  256 + bindPickerChange02: function(e) {
  257 + this.pickerInfoList[0].nameIndex2 = e.target.value
  258 + },
191 259  
192   - bindPickerChange11: function(e) {
193   - this.pickerInfoList[1].nameIndex1 = e.target.value
194   - },
195   - bindPickerChange12: function(e) {
196   - this.pickerInfoList[1].nameIndex2 = e.target.value
197   - },
  260 + bindPickerChange11: function(e) {
  261 + this.pickerInfoList[1].nameIndex1 = e.target.value
  262 + },
  263 + bindPickerChange12: function(e) {
  264 + this.pickerInfoList[1].nameIndex2 = e.target.value
  265 + },
198 266  
199   - bindPickerChange21: function(e) {
200   - this.pickerInfoList[2].nameIndex1 = e.target.value
201   - },
202   - bindPickerChange22: function(e) {
203   - this.pickerInfoList[2].nameIndex2 = e.target.value
204   - },
  267 + bindPickerChange21: function(e) {
  268 + this.pickerInfoList[2].nameIndex1 = e.target.value
  269 + },
  270 + bindPickerChange22: function(e) {
  271 + this.pickerInfoList[2].nameIndex2 = e.target.value
  272 + },
205 273  
206   - bindPickerChange31: function(e) {
207   - this.pickerInfoList[3].nameIndex1 = e.target.value
208   - },
209   - bindPickerChange32: function(e) {
210   - this.pickerInfoList[3].nameIndex2 = e.target.value
211   - },
  274 + bindPickerChange31: function(e) {
  275 + this.pickerInfoList[3].nameIndex1 = e.target.value
  276 + },
  277 + bindPickerChange32: function(e) {
  278 + this.pickerInfoList[3].nameIndex2 = e.target.value
  279 + },
212 280  
213   - bindPickerChange41: function(e) {
214   - this.pickerInfoList[4].nameIndex1 = e.target.value
215   - },
216   - bindPickerChange42: function(e) {
217   - this.pickerInfoList[4].nameIndex2 = e.target.value
218   - },
219   - bindPickerChange43: function(e) {
220   - this.pickerInfoList[4].nameIndex3 = e.target.value
221   - },
222   - }
223   - }
  281 + bindPickerChange41: function(e) {
  282 + this.pickerInfoList[4].nameIndex1 = e.target.value
  283 + },
  284 + bindPickerChange42: function(e) {
  285 + this.pickerInfoList[4].nameIndex2 = e.target.value
  286 + },
  287 + bindPickerChange43: function(e) {
  288 + this.pickerInfoList[4].nameIndex3 = e.target.value
  289 + }
  290 + }
  291 +}
224 292 </script>
225 293  
226 294 <style lang="scss" scoped>
227   - .content {
228   - display: flex;
229   - flex-direction: column;
230   - align-items: center;
231   - justify-content: center;
232   -
233   - }
234   - .header{
235   - display: flex;
236   - flex-direction: column;
237   - align-items: center;
238   - background-color: #fff;
239   - width: 100%;
240   - height: 64rpx;
241   - z-index: 999;
242   - position: fixed;
243   - top: 0;
244   - .header-name {
245   - display: flex;
246   - width: 684rpx;
247   - text {
248   - font-size: 36rpx;
249   - color: #333333;
250   - letter-spacing: -0.34px;
251   - margin-left: 54rpx;
252   - }
253   - image {
254   - width: 11px;
255   - height: 18px;
256   - border-radius: 16px;
257   - }
258   - }
259   -
260   - }
261   -
262   - .sroll-view{
263   - height: 1760rpx;
  295 +.content {
  296 + display: flex;
  297 + flex-direction: column;
  298 + align-items: center;
  299 + justify-content: center;
  300 +}
  301 +.header {
  302 + display: flex;
  303 + flex-direction: column;
  304 + align-items: center;
  305 + background-color: #fff;
  306 + width: 100%;
  307 + height: 64rpx;
  308 + z-index: 999;
  309 + position: fixed;
  310 + top: 0;
  311 + .header-name {
  312 + display: flex;
  313 + width: 684rpx;
  314 + text {
  315 + font-size: 36rpx;
  316 + color: #333333;
  317 + letter-spacing: -0.34px;
  318 + margin-left: 54rpx;
  319 + }
  320 + image {
  321 + width: 11px;
  322 + height: 18px;
  323 + border-radius: 16px;
264 324 }
  325 + }
  326 +}
265 327  
266   - .goods-details{
267   - display: flex;
268   - flex-direction: column;
269   - align-items: center;
270   - justify-content: center;
271   - background-color: #fff;
272   - margin-bottom: 40rpx;
273   - .swiper {
274   - width: 684rpx;
275   - height: 512rpx;
276   - image {
277   - width: 100%;
278   - height: 100%;
279   - border-radius: 16rpx;
280   - }
281   - }
282   - .goods-price {
283   - display: flex;
284   - justify-content: space-between;
285   - padding: 40rpx 0 30rpx 0;
286   - align-items: center;
287   - width: 684rpx;
288   - .now-price {
289   - font-size: 18px;
290   - color: #EB5D3B;
291   - }
292   - .old-price {
293   - font-size: 14px;
294   - color: #999999;
295   - letter-spacing: -0.26px;
296   - margin-left: -156px;
297   - text-decoration: line-through;
298   - }
299   - .buy-num {
300   - font-size: 14px;
301   - color: #999999;
302   - letter-spacing: -0.26px;
303   - text-align: justify;
304   - }
305   - }
306   - .goods-name {
307   - font-size: 16px;
308   - color: #333333;
309   - letter-spacing: -0.3px;
310   - text-align: justify;
311   - width: 684rpx;
312   - }
313   - .goods-courier {
314   - width: 684rpx;
315   - font-size: 10px;
316   - color: #999999;
317   - letter-spacing: -0.19px;
318   - padding: 10rpx 0;
319   - .courier-support {
320   - padding-left: 20rpx;
321   - }
322   - }
323   -
324   - }
325   - .goods-form {
326   - display: flex;
327   - flex-direction: column;
328   - align-items: center;
329   - justify-content: center;
330   - background-color: #fff;
331   - width: 100%;
332   - .choice-use{
333   - display: flex;
334   - margin-bottom: 40rpx;
335   - width: 684rpx;
336   - align-items: center;
337   - .p3 {
338   - font-size: 14px;
339   - color: #333333;
340   - letter-spacing: -0.26px;
341   - text-align: justify;
342   - line-height: 24px;
343   - width: 164px;
344   - }
345   - .p4 {
346   - font-size: 14px;
347   - color: #666666;
348   - letter-spacing: -0.26px;
349   - margin: 0 71rpx 0 24rpx ;
350   - }
351   - .p5 {
352   - font-size: 14px;
353   - color: #666666;
354   - letter-spacing: -0.26px;
355   - margin-left: 24rpx;
356   - }
357   - }
358   - .p1 {
359   - font-size: 16px;
360   - color: #333333;
361   - letter-spacing: -0.3px;
362   - text-align: justify;
363   - line-height: 24px;
364   - margin: 4px 0;
  328 +.sroll-view {
  329 + height: 1760rpx;
  330 +}
365 331  
  332 +.goods-details {
  333 + display: flex;
  334 + flex-direction: column;
  335 + align-items: center;
  336 + justify-content: center;
  337 + background-color: #fff;
  338 + margin-bottom: 40rpx;
  339 + .swiper {
  340 + width: 684rpx;
  341 + height: 512rpx;
  342 + image {
  343 + width: 100%;
  344 + height: 100%;
  345 + border-radius: 16rpx;
  346 + }
  347 + }
  348 + .goods-price {
  349 + display: flex;
  350 + justify-content: space-between;
  351 + padding: 40rpx 0 30rpx 0;
  352 + align-items: center;
  353 + width: 684rpx;
  354 + .now-price {
  355 + font-size: 18px;
  356 + color: #eb5d3b;
  357 + }
  358 + .old-price {
  359 + font-size: 14px;
  360 + color: #999999;
  361 + letter-spacing: -0.26px;
  362 + margin-left: -156px;
  363 + text-decoration: line-through;
  364 + }
  365 + .buy-num {
  366 + font-size: 14px;
  367 + color: #999999;
  368 + letter-spacing: -0.26px;
  369 + text-align: justify;
  370 + }
  371 + }
  372 + .goods-name {
  373 + font-size: 16px;
  374 + color: #333333;
  375 + letter-spacing: -0.3px;
  376 + text-align: justify;
  377 + width: 684rpx;
  378 + }
  379 + .goods-courier {
  380 + width: 684rpx;
  381 + font-size: 10px;
  382 + color: #999999;
  383 + letter-spacing: -0.19px;
  384 + padding: 10rpx 0;
  385 + .courier-support {
  386 + padding-left: 20rpx;
  387 + }
  388 + }
  389 +}
  390 +.goods-form {
  391 + display: flex;
  392 + flex-direction: column;
  393 + align-items: center;
  394 + justify-content: center;
  395 + background-color: #fff;
  396 + width: 100%;
  397 + .choice-use {
  398 + display: flex;
  399 + margin-bottom: 40rpx;
  400 + width: 684rpx;
  401 + align-items: center;
  402 + .p3 {
  403 + font-size: 14px;
  404 + color: #333333;
  405 + letter-spacing: -0.26px;
  406 + text-align: justify;
  407 + line-height: 24px;
  408 + width: 164px;
  409 + }
  410 + .p4 {
  411 + font-size: 14px;
  412 + color: #666666;
  413 + letter-spacing: -0.26px;
  414 + margin: 0 71rpx 0 24rpx;
  415 + }
  416 + .p5 {
  417 + font-size: 14px;
  418 + color: #666666;
  419 + letter-spacing: -0.26px;
  420 + margin-left: 24rpx;
  421 + }
  422 + }
  423 + .p1 {
  424 + font-size: 16px;
  425 + color: #333333;
  426 + letter-spacing: -0.3px;
  427 + text-align: justify;
  428 + line-height: 24px;
  429 + margin: 4px 0;
  430 + }
  431 + .p2 {
  432 + font-size: 12px;
  433 + color: #999999;
  434 + letter-spacing: -0.23px;
  435 + margin-bottom: 18rpx;
  436 + }
  437 + image {
  438 + width: 28rpx;
  439 + height: 26rpx;
  440 + }
  441 + .confirm {
  442 + display: flex;
  443 + align-items: center;
  444 + font-size: 12px;
  445 + color: #666666;
  446 + letter-spacing: -0.23px;
  447 + width: 684rpx;
  448 + image {
  449 + margin-right: 25rpx;
  450 + }
  451 + }
  452 + .picker {
  453 + display: flex;
  454 + flex-direction: column;
  455 + justify-content: center;
  456 + align-items: center;
  457 + width: 100%;
  458 + image {
  459 + width: 10px;
  460 + height: 10px;
  461 + margin-right: 5px;
  462 + }
  463 + .picker-choice {
  464 + display: flex;
  465 + width: 684rpx;
  466 + align-items: center;
  467 + margin-bottom: 40rpx;
  468 + .choice-left {
  469 + width: 210rpx;
  470 + .p11 {
  471 + font-size: 14px;
  472 + color: #333333;
  473 + letter-spacing: -0.26px;
  474 + text-align: justify;
  475 + line-height: 24px;
  476 + margin-right: 10px;
366 477 }
367   - .p2 {
368   - font-size: 12px;
369   - color: #999999;
370   - letter-spacing: -0.23px;
371   - margin-bottom: 18rpx;
372   - }
373   - image{
374   - width: 28rpx;
375   - height: 26rpx;
376   - }
377   - .confirm {
378   - display: flex;
379   - align-items: center;
380   - font-size: 12px;
381   - color: #666666;
382   - letter-spacing: -0.23px;
383   - width: 684rpx;
384   - image{
385   - margin-right:25rpx;
386   - }
387   - }
388   - .picker{
389   - display: flex;
390   - flex-direction: column;
391   - justify-content: center;
392   - align-items: center;
393   - width: 100%;
394   - image{
395   - width: 10px;
396   - height: 10px;
397   - margin-right: 5px;
398   - }
399   - .picker-choice{
400   - display: flex;
401   - width: 684rpx;
402   - align-items: center;
403   - margin-bottom: 40rpx;
404   - .choice-left{
405   - width: 210rpx;
406   - .p11 {
407   - font-size: 14px;
408   - color: #333333;
409   - letter-spacing: -0.26px;
410   - text-align: justify;
411   - line-height: 24px;
412   - margin-right: 10px;
413   - }
414   - .p12 {
415   - font-size: 10px;
416   - color: #3F3F3F;
417   - letter-spacing: -0.19px;
418   - text-align: justify;
419   - line-height: 24px;
420   - }
421   -
422   -
423   - }
424   - .p13 {
425   - font-size: 10px;
426   - color: #999999;
427   - letter-spacing: -0.19px;
428   - margin-right: 10px;
429   - }
430   - .p13-date {
431   - font-size: 10px;
432   - color: #999999;
433   - letter-spacing: -0.19px;
434   - margin-right: 5px;
435   - }
436   - .p14 {
437   - font-size: 14px;
438   - color: #666666;
439   - letter-spacing: -0.26px;
440   - text-align: center;
441   - width: 124rpx;
442   - border-bottom: 1px solid #CFCFCF;
443   - }
444   -
445   - }
446   - }
447   - }
448   - .goods-submit{
449   - display: flex;
450   - flex-direction: column;
451   - align-items: center;
452   - justify-content: center;
453   - position: fixed;
454   - bottom: 0;
455   - z-index: 999;
456   - width: 100%;
457   - height: 120rpx;
458   - background-color: #fff;
459   - button{
460   - width: 540rpx;
461   - height: 80rpx;
462   - font-size: 32rpx;
463   - color: #fff;
464   - background: #FF6B4A;
465   - border-radius: 20px;
466   - border-radius: 20px;
  478 + .p12 {
  479 + font-size: 10px;
  480 + color: #3f3f3f;
  481 + letter-spacing: -0.19px;
  482 + text-align: justify;
  483 + line-height: 24px;
467 484 }
468   - }
469   -
470   -</style>
471 485 \ No newline at end of file
  486 + }
  487 + .p13 {
  488 + font-size: 10px;
  489 + color: #999999;
  490 + letter-spacing: -0.19px;
  491 + margin-right: 10px;
  492 + }
  493 + .p13-date {
  494 + font-size: 10px;
  495 + color: #999999;
  496 + letter-spacing: -0.19px;
  497 + margin-right: 5px;
  498 + }
  499 + .p14 {
  500 + font-size: 14px;
  501 + color: #666666;
  502 + letter-spacing: -0.26px;
  503 + text-align: center;
  504 + width: 124rpx;
  505 + border-bottom: 1px solid #cfcfcf;
  506 + }
  507 + }
  508 + }
  509 +}
  510 +.goods-submit {
  511 + display: flex;
  512 + flex-direction: column;
  513 + align-items: center;
  514 + justify-content: center;
  515 + position: fixed;
  516 + bottom: 0;
  517 + z-index: 999;
  518 + width: 100%;
  519 + height: 120rpx;
  520 + background-color: #fff;
  521 + button {
  522 + width: 540rpx;
  523 + height: 80rpx;
  524 + font-size: 32rpx;
  525 + color: #fff;
  526 + background: #ff6b4a;
  527 + border-radius: 20px;
  528 + border-radius: 20px;
  529 + }
  530 +}
  531 +</style>
... ...
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @3fb9af8
... ... @@ -208,10 +208,7 @@
208 208 console.log(errMsg)
209 209 }
210 210 })
211   -
212 211 break;
213   -
214   -
215 212 default:
216 213 break;
217 214  
... ...
src/pages/myOrder/myOrder.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="content">
3   - <view class="header">
4   - <!-- 搜索-->
5   - <!-- <view class="searchBar">
6   - <icon class="searchIcon" type="search" size="14"></icon>
7   - <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8   - </view> -->
9   - <view class="screenBar">
10   - <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11   - <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
12   - </view>
13   - </view>
14   - </view>
15   - <view class="orderList" >
16   - <view
17   - v-for="(order) in orderList"
18   - :key="order.orderId"
19   - >
20   - <OrderCard :order = "order" :current="current"></OrderCard>
21   - </view>
22   - </view>
23   - <view class="footer" >没有更多订单了，去商城看看吧~</view>
24   - </view>
  2 + <view class="content">
  3 + <view class="header">
  4 + <!-- 搜索-->
  5 + <!-- <view class="searchBar">
  6 + <icon class="searchIcon" type="search" size="14"></icon>
  7 + <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
  8 + </view> -->
  9 + <view class="screenBar">
  10 + <view
  11 + v-for="item in screenItems"
  12 + :key="item.current"
  13 + @click="onClickItem(item.current)"
  14 + >
  15 + <view
  16 + class="screenItem"
  17 + v-bind:class="{ active: current === item.current }"
  18 + >{{ item.text }}</view>
  19 + </view>
  20 + </view>
  21 + </view>
  22 + <view class="orderList">
  23 + <view
  24 + v-for="(order) in orderList"
  25 + :key="order.orderId"
  26 + >
  27 + <OrderCard
  28 + :order="order"
  29 + :current="current"
  30 + ></OrderCard>
  31 + </view>
  32 + </view>
  33 + <view class="footer">没有更多订单了，去商城看看吧~</view>
  34 + </view>
25 35 </template>
26 36 <script>
27   - import OrderCard from './components/OrderCard.vue';
28   - import store from '@/store';
  37 +import OrderCard from './components/OrderCard.vue'
  38 +import store from '@/store'
29 39  
30   - export default {
31   - components:{
32   - 'OrderCard': OrderCard
33   - },
34   - data() {
35   - return {
36   - //顶部筛选项
37   - screenItems: [
38   - {current:"10",text:'全部'},
39   - {current:"0",text:'待付款'},
40   - {current:"1",text:'待收货'},
41   - {current:"2",text:'已完成'},
42   - // {current:"3",text:'已评价'},
43   - // {current:"4",text:'退款'},
44   - ],
45   - //当前所在item 默认10-->全部
46   - current: "10",
47   - };
48   - },
  40 +export default {
  41 + components: {
  42 + OrderCard: OrderCard,
  43 + },
  44 + data() {
  45 + return {
  46 + // 顶部筛选项
  47 + screenItems: [
  48 + { current: '10', text: '全部' },
  49 + { current: '0', text: '待付款' },
  50 + { current: '1', text: '待收货' },
  51 + { current: '2', text: '已完成' },
  52 + // {current:"3",text:'已评价'},
  53 + // {current:"4",text:'退款'},
  54 + ],
  55 + // 当前所在item 默认10-->全部
  56 + current: '10',
  57 + }
  58 + },
49 59  
50   - onLoad: function(option) {
51   - //获取订单列表
52   - store.dispatch('myOrder/getList', {
53   - uid: "1",
54   - way: "",
55   - });
56   - //从user过来传的status，给current，以显示对应item
57   - this.current = option.status
58   - },
59   - computed: {
60   - orderList() {
61   - // console.log('orderList', this.$store.state.myOrder.orderList);
62   - return this.$store.state.myOrder.orderList;
63   - }
64   - },
65   - methods:{
66   - //tab点击事件
67   - onClickItem(e) {
68   - if (this.current !== e) {
69   - this.current = e;
70   - }
71   - }
72   -
73   - }
74   - }
  60 + onLoad: function(option) {
  61 + // 获取订单列表
  62 + store.dispatch('myOrder/getList', {
  63 + way: '',
  64 + })
  65 + // 从user过来传的status，给current，以显示对应item
  66 + this.current = option.status
  67 + },
  68 + computed: {
  69 + orderList() {
  70 + // console.log('orderList', this.$store.state.myOrder.orderList);
  71 + return this.$store.state.myOrder.orderList
  72 + },
  73 + },
  74 + methods: {
  75 + // tab点击事件
  76 + onClickItem(e) {
  77 + if (this.current !== e) {
  78 + this.current = e
  79 + }
  80 + },
  81 +
  82 + },
  83 +}
75 84 </script>
76 85  
77 86 <style lang="scss">
78   - .content {
79   - display: flex;
80   - flex-direction: column;
81   - align-items: center;
82   - background-color: #F7F6F6;
83   - min-height: 100vh;
84   - .header{
85   - background-color: #ffffff;
86   - width: 100%;
87   - // height: 232rpx;
88   - padding: 20rpx 40rpx 16rpx 40rpx;
89   - box-sizing: border-box;
90   - position: fixed;
91   - top: 0;
92   - left: 0;
93   - // .searchBar {
94   - // width: 670rpx;
95   - // display: flex;
96   - // justify-content: center;
97   - // align-items: center;
98   - // box-sizing: border-box;
99   - // padding: 0rpx 16rpx;
100   - // border: 1px solid #FF6B4A;
101   - // border-radius: 8rpx;
102   - // background-color: #ffffff;
103   - // }
104   -
105   - .screenBar{
106   - width: 670rpx;
107   - // height: 110rpx;
108   - height: 70rpx;
109   - display: flex;
110   - flex-direction: row;
111   - justify-content: space-between;
112   - align-items: center;
113   - color: #333333;
114   - font-size: 32rpx;
115   - }
116   - .screenItem{
117   - height: 50rpx;
118   - font-size: 32rpx;
119   - color: #333333;
120   - display: flex;
121   - justify-content: center;
122   - align-items: center;
123   - transition:all 0.2s;
124   - }
125   - .active{
126   - // font-size: 34rpx;
127   - color: #EC5D3B;
128   - }
129   - .searchIpt {
130   - height: 68rpx;
131   - width: 670rpx;
132   - padding: 16rpx;
133   - font-size: 28rpx;
134   - box-sizing: border-box;
135   - }
136   - }
137   - .orderList{
138   - // margin-top: 232rpx;
139   - margin-top: 132rpx;
140   - }
141   - .footer{
142   - font-size: 14px;
143   - color: #B8B8B8;
144   - margin: 40rpx 0;
145   - }
146   - }
  87 +.content {
  88 + display: flex;
  89 + flex-direction: column;
  90 + align-items: center;
  91 + background-color: #f7f6f6;
  92 + min-height: 100vh;
  93 + .header {
  94 + background-color: #ffffff;
  95 + width: 100%;
  96 + // height: 232rpx;
  97 + padding: 20rpx 40rpx 16rpx 40rpx;
  98 + box-sizing: border-box;
  99 + position: fixed;
  100 + top: 0;
  101 + left: 0;
  102 + // .searchBar {
  103 + // width: 670rpx;
  104 + // display: flex;
  105 + // justify-content: center;
  106 + // align-items: center;
  107 + // box-sizing: border-box;
  108 + // padding: 0rpx 16rpx;
  109 + // border: 1px solid #ff6b4a;
  110 + // border-radius: 8rpx;
  111 + // background-color: #ffffff;
  112 + // }
  113 +
  114 + .screenBar {
  115 + width: 670rpx;
  116 + // height: 110rpx;
  117 + height: 70rpx;
  118 + display: flex;
  119 + flex-direction: row;
  120 + justify-content: space-between;
  121 + align-items: center;
  122 + color: #333333;
  123 + font-size: 32rpx;
  124 + }
  125 + .screenItem {
  126 + height: 50rpx;
  127 + font-size: 32rpx;
  128 + color: #333333;
  129 + display: flex;
  130 + justify-content: center;
  131 + align-items: center;
  132 + transition: all 0.2s;
  133 + }
  134 + .active {
  135 + // font-size: 34rpx;
  136 + color: #ec5d3b;
  137 + }
  138 + .searchIpt {
  139 + height: 68rpx;
  140 + width: 670rpx;
  141 + padding: 16rpx;
  142 + font-size: 28rpx;
  143 + box-sizing: border-box;
  144 + }
  145 + }
  146 + .orderList {
  147 + // margin-top: 232rpx;
  148 + margin-top: 132rpx;
  149 + }
  150 + .footer {
  151 + font-size: 14px;
  152 + color: #b8b8b8;
  153 + margin: 40rpx 0;
  154 + }
  155 +}
147 156 </style>
... ...
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @3fb9af8
... ... @@ -80,13 +80,13 @@
80 80 </text>
81 81 <text class="order-info-price">
82 82 <text class="p1">实付</text>
83   - <text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
  83 + <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text>
84 84 </text>
85 85 <text class="order-info-num">
86   - <text>订单号：{{orderInfo.prepay_id}}</text>
  86 + <text>订单号：{{payId}}</text>
87 87 </text>
88 88 <text class="order-info-time">
89   - <text>下单时间：{{orderInfo.pay_time}}</text>
  89 + <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text>
90 90 </text>
91 91 <view class="order-info-hr"></view>
92 92 <view class="order-info-contact">
... ... @@ -131,13 +131,12 @@ export default {
131 131 },
132 132 data () {
133 133 return {
134   - // orderInfo:{},
135 134 payId: '',
  135 + payTime: '',
136 136 status: '',
137 137 uid: '',
138 138 openid: '',
139 139 lefttime: 0
140   -
141 140 }
142 141 },
143 142 onLoad: function (option) {
... ... @@ -159,7 +158,7 @@ export default {
159 158 computed: {
160 159 // 获取订单详细信息
161 160 orderInfo () {
162   - console.log(this.$store.state.orderRead.orderInfo)
  161 + console.log('orderInfo', this.$store.state.orderRead.orderInfo)
163 162 return this.$store.state.orderRead.orderInfo || {}
164 163 },
165 164 orderInfoList () {
... ... @@ -229,6 +228,13 @@ export default {
229 228 }, 1500)
230 229 )
231 230 }
  231 + },
  232 + filters: {
  233 + timerChange: function(value) {
  234 + var newDate = new Date()
  235 + newDate.setTime(value * 1000)
  236 + return newDate.toLocaleString()
  237 + }
232 238 }
233 239 }
234 240 </script>
... ...
src/pages/newOpticsData/newOpticsData.vue
Diff comments   View file @3fb9af8
... ... @@ -4,10 +4,19 @@
4 4 <template >
5 5 <view class="goods-form">
6 6 <view class="p1">
7   - <image src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
  7 + <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
8 8 填写验光数据
9 9 </view>
10 10 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  11 + <view class="picker">
  12 + <view class="picker-choice">
  13 + <view class="choice-left">
  14 + <text class="pd">验光单取名:</text>
  15 + </view>
  16 + <input type="text" @change="handleInput" class="input"
  17 + placeholder="请输入名称" maxlength="20" :value="name" />
  18 + </view>
  19 + </view>
11 20 <view class="picker" >
12 21 <view class="picker-choice">
13 22 <view class="choice-left">
... ... @@ -15,14 +24,22 @@
15 24 <text class="p12">{{pickerInfoList[0].nameE}}</text>
16 25 </view>
17 26 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
18   - <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
19   - <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  27 + <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
  28 + <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  29 + <view class="p14">
  30 + {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
20 31 <image src="../../static/detail-tabicon.png" ></image>
  32 + </view>
  33 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
21 34 </picker>
22 35 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
23   - <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
  36 + <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
24 37 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
  38 + <view class="p14">
  39 + {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
25 40 <image src="../../static/detail-tabicon.png" ></image>
  41 + </view>
  42 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
26 43 </picker>
27 44 </view>
28 45 </view>
... ... @@ -33,14 +50,22 @@
33 50 <text class="p12">{{pickerInfoList[1].nameE}}</text>
34 51 </view>
35 52 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
36   - <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
  53 + <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
37 54 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
38   - <image src="../../static/detail-tabicon.png" ></image>
  55 + <view class="p14">
  56 + {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
  57 + <image src="../../static/detail-tabicon.png" ></image>
  58 + </view>
  59 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
39 60 </picker>
40 61 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
41   - <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
  62 + <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
42 63 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
43   - <image src="../../static/detail-tabicon.png" ></image>
  64 + <view class="p14">
  65 + {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
  66 + <image src="../../static/detail-tabicon.png" ></image>
  67 + </view>
  68 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
44 69 </picker>
45 70 </view>
46 71 </view>
... ... @@ -51,59 +76,62 @@
51 76 <text class="p12">{{pickerInfoList[2].nameE}}</text>
52 77 </view>
53 78 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
54   - <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
55 79 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
56   - <image src="../../static/detail-tabicon.png" ></image>
  80 + <view class="p14">
  81 + {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
  82 + <image src="../../static/detail-tabicon.png" ></image>
  83 + </view>
57 84 </picker>
58 85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
59   - <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
  86 + <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
60 87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
61   - <image src="../../static/detail-tabicon.png" ></image>
  88 + <view class="p14">
  89 + {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
  90 + <image src="../../static/detail-tabicon.png" ></image>
  91 + </view>
  92 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
62 93 </picker>
63 94 </view>
64 95 </view>
65   - <view class="picker" >
  96 + <view class="picker">
66 97 <view class="picker-choice">
67 98 <view class="choice-left">
68   - <text class="p11">{{pickerInfoList[3].nameC}}</text>
69   - <text class="p12">{{pickerInfoList[3].nameE}}</text>
  99 + <text class="pd">瞳距:</text>
70 100 </view>
71   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
72   - <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
73   - <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
74   - <image src="../../static/detail-tabicon.png" ></image>
75   - </picker>
76   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
77   - <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
78   - <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
79   - <image src="../../static/detail-tabicon.png" ></image>
80   - </picker>
  101 + <input type="digit" @change="handleInputPd" class="input"
  102 + placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
81 103 </view>
82 104 </view>
83 105 <view class="picker" >
84 106 <view class="picker-choice">
85 107 <view class="choice-left">
86   - <text class="p11">{{pickerInfoList[4].nameC}}</text>
  108 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
87 109 </view>
88 110 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
89   - <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
90   - <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
91   - <image src="../../static/detail-tabicon.png" ></image>
  111 + <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
  112 + <view class="p14" style="width: 30px;">
  113 + {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
  114 + <image src="../../static/detail-tabicon.png" ></image>
  115 + </view>
92 116 </picker>
93 117 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
94   - <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
95   - <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
96   - <image src="../../static/detail-tabicon.png" ></image>
  118 + <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
  119 + <view class="p14" style="width: 30px;">
  120 + {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
  121 + <image src="../../static/detail-tabicon.png" ></image>
  122 + </view>
97 123 </picker>
98 124 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
99   - <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
100   - <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
101   - <image src="../../static/detail-tabicon.png" ></image>
  125 + <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
  126 + <view class="p14" style="width: 30px;">
  127 + {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
  128 + <image src="../../static/detail-tabicon.png" ></image>
  129 + </view>
102 130 </picker>
103 131 </view>
104 132 </view>
105 133 <view class="confirm">
106   - <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
  134 + <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
107 135 <text>确认以上输入信息来源于我的验光数据!</text>
108 136 </view>
109 137 </view>
... ... @@ -112,72 +140,335 @@
112 140 </view>
113 141  
114 142  
115   - <view class="footer">
  143 + <view class="footer" @click="handleSubmit">
116 144 <button class="btn" type="default">提 交</button>
117 145 </view>
118 146 </view>
119 147 </template>
120 148  
121   -<script>
  149 +<script>
  150 + import store from '@/store';
  151 +
122 152 export default {
123 153 data() {
124 154 return {
125 155 pickerInfoList:[
126   - {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},
127   - {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},
128   - {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},
129   - {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},
130   - {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}
  156 + {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0},
  157 + {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1},
  158 + {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2},
  159 + {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0}
131 160 ],
132   - tablist: {
133   - // read: true,
134   - // seeLong: false,
135   - confirm: false
  161 + confirm: false, // 用户是否确认
  162 + tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
  163 + name: '夏小花',
  164 + oldname:'',// 用于判读用户是否改变名字
  165 + pickerInfoChioce:{
  166 + "leftSph": '',
  167 + "rightSph": '',
  168 + "leftCyl": '',
  169 + "rightCyl": '',
  170 + "leftAxi": '',
  171 + "rightAxi": '',
  172 + "time":{
  173 + "year":0,
  174 + "month": 0,
  175 + "day":0 ,
  176 + }
136 177 },
137   - tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
  178 + pd: '',// 瞳距
  179 + oldpd: '',// 用于判断用户是否改变瞳距
  180 + kinds:Number, // kinds=1，提交为新增验光，2为修改
  181 + mp_id: Number
138 182 };
139 183 },
  184 + onLoad: function (option) {
  185 + //option为object类型，会序列化上个页面传递的参数
  186 + // 初始化SPL、CYL、AXI的值
  187 + for (let j = 0; j < 3; j++) {
  188 + for(let i=-12;i<6;i++){
  189 + this.pickerInfoList[j].nameArray1.push(i)
  190 + this.pickerInfoList[j].nameArray1.push(i+0.5)
  191 + this.pickerInfoList[j].nameArray2.push(i)
  192 + this.pickerInfoList[j].nameArray2.push(i+0.5)
  193 + if(i>=-6){
  194 + this.pickerInfoList[j].nameArray1.push(i+0.25)
  195 + this.pickerInfoList[j].nameArray1.push(i+0.75)
  196 + this.pickerInfoList[j].nameArray2.push(i+0.25)
  197 + this.pickerInfoList[j].nameArray2.push(i+0.75)
  198 + }
  199 + if(i==5){
  200 + this.pickerInfoList[j].nameArray1.push(i+1)
  201 + this.pickerInfoList[j].nameArray2.push(i+1)
  202 + }
  203 + }
  204 + }
  205 + // 初始化日期值
  206 + for (let i = 1; i < 32; i++){
  207 + this.pickerInfoList[3].nameArray3.push(i)
  208 + }
  209 + // 初始化年份前后五年
  210 + let myDate = new Date();
  211 + let nowYear = myDate.getFullYear();
  212 + for(let i=0;i<5;i++){
  213 + this.pickerInfoList[3].nameArray1.push(nowYear-i)
  214 + }
  215 +
  216 + this.kinds=option.kinds
  217 + if(option.kinds==1){
  218 + this.name= '';
  219 + this.pd= '';
  220 + } else{
  221 + console.log('args===>',option.index)
  222 + const loveList=Object.assign({},this.$store.state.myLoveList.loveList)
  223 + console.log('args===>',loveList[option.index].in_time)
  224 + console.log('args===>',loveList[option.index].in_time.toString().slice(0,4))
  225 + console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0)
  226 + console.log('args===>',loveList[option.index].in_time.toString().slice(8,10))
  227 + this.name=loveList[option.index].name
  228 + this.pd=loveList[option.index].pd
  229 + this.mp_id=loveList[option.index].mp_id
  230 + this.oldname=loveList[option.index].name
  231 + this.oldpd=loveList[option.index].pd
  232 + // 将kinds =2时的值传到该页面
  233 + this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph)
  234 + this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph)
  235 + this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl)
  236 + this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl)
  237 + this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi)
  238 + this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi)
  239 +
  240 + this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4))
  241 + if(loveList[option.index].in_time.toString().slice(5,6)==0){
  242 + this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7))
  243 + } else{
  244 + this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7))
  245 + }
  246 + if(loveList[option.index].in_time.toString().slice(8,9)==0){
  247 + this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10))
  248 + } else{
  249 + this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10))
  250 + }
  251 + }
  252 + },
140 253 methods:{
  254 + handleInput(e){
  255 + this.name=e.target.value
  256 + },
  257 + handleInputPd(e){
  258 + // 只能输入正浮点数或正数
  259 + if(/^\d+(\.\d+)?$/.test(e.target.value)){
  260 + this.pd=e.target.value
  261 + } else {
  262 + uni.showToast({
  263 + title:"请输入有效数据;示例:89",
  264 + icon: "none",
  265 + duration: 2000,
  266 + })
  267 + this.pd = ''
  268 + }
  269 +
  270 + },
  271 + // 用户提交
  272 + handleSubmit(){
  273 + if(this.name==''){
  274 + uni.showToast({
  275 + title:"请输入验光单取名",
  276 + icon: "none",
  277 + duration: 2000,
  278 + })
  279 + }else{
  280 +
  281 + if(this.pd==''){
  282 + uni.showToast({
  283 + title:"请输入瞳距",
  284 + icon: "none",
  285 + duration: 2000,
  286 + })
  287 + }else{
  288 +
  289 + if(this.kinds==1){
  290 + // 添加用户验光单
  291 + console.log('kinds====>',this.pickerInfoChioce.leftSph)
  292 + console.log('kinds====>',this.pickerInfoChioce.leftSph==Number)
  293 + console.log('kinds====>',this.pickerInfoChioce.rightSph==Number)
  294 + if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''||
  295 + this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''||
  296 + this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi==''
  297 + ){
  298 + uni.showToast({
  299 + title:"请输入您的验光数据",
  300 + icon: "none",
  301 + duration: 2000,
  302 + })
  303 + }else{
  304 + if(this.confirm){
  305 + store.dispatch('myLoveList/addMylove', {
  306 +
  307 + uid: this.$store.state.user.userInfo.uid,
  308 + openid: this.$store.state.user.userInfo.openid,
  309 + // mp_name: this.$store.state.user.userInfo.mp_name,
  310 + leftSph: this.pickerInfoChioce.leftSph,
  311 + rightSph: this.pickerInfoChioce.rightSph,
  312 + leftCyl: this.pickerInfoChioce.leftCyl,
  313 + rightCyl: this.pickerInfoChioce.rightCyl,
  314 + leftAxi: this.pickerInfoChioce.leftAxi,
  315 + rightAxi: this.pickerInfoChioce.rightAxi,
  316 + pd: this.pd,// 瞳距
  317 + mp_name:this.name,
  318 + // time: this.pickerInfoChioce.time,
  319 + // img_url2: "http://localhost:8087/images/shop_1/1/",
  320 + });
  321 + store.dispatch('myLoveList/getLoveList', {
  322 + uid: this.$store.state.user.userInfo.uid,
  323 + });
  324 + uni.navigateBack({
  325 + delta:1,
  326 + animationDuration:2000
  327 + })
  328 +
  329 + } else{
  330 + uni.showToast({
  331 + title:"请确认您的验光数据",
  332 + icon: "none",
  333 + duration: 3000,
  334 + })
  335 + }
  336 +
  337 + }
  338 +
  339 + }
  340 + if(this.kinds==2){
  341 + // console.log('kinds====>',this.kinds)
  342 + // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
  343 + // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
  344 + if(this.confirm){
  345 + const leftList = ["leftSph","leftCyl","leftAxi"];
  346 + const rightList = ["rightSph", "rightCyl", "rightAxi"];
  347 + let flag=0;
  348 + if(this.name!=this.oldname){
  349 + store.dispatch('myLoveList/updateMylove', {
  350 + uid: this.$store.state.user.userInfo.uid,
  351 + openid: this.$store.state.user.userInfo.openid,
  352 + mp_id: this.mp_id,
  353 + keyname: 'name',
  354 + keyvalue: this.name,
  355 + });
  356 + flag=1
  357 + }
  358 + if(this.pd!=this.oldpd){
  359 + store.dispatch('myLoveList/updateMylove', {
  360 + uid: this.$store.state.user.userInfo.uid,
  361 + openid: this.$store.state.user.userInfo.openid,
  362 + mp_id: this.mp_id,
  363 + keyname: 'pd',
  364 + keyvalue: this.pd,
  365 + });
  366 + flag=1
  367 + }
  368 + // 先验证是否有改动项，
  369 + for (let j=0; j<3; j++) {
  370 + if(this.pickerInfoList[j].nameIndex1!=0||this.pickerInfoList[j].nameIndex2!=0){
  371 + if(this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1]!=''&&
  372 + this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]!=''){
  373 + if(this.pickerInfoList[j].nameIndex1!=0){
  374 + store.dispatch('myLoveList/updateMylove', {
  375 + uid: this.$store.state.user.userInfo.uid,
  376 + openid: this.$store.state.user.userInfo.openid,
  377 + mp_id: this.mp_id,
  378 + keyname: leftList[j],
  379 + keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
  380 + });
  381 + }
  382 + if(this.pickerInfoList[j].nameIndex2!=0){
  383 + store.dispatch('myLoveList/updateMylove', {
  384 + uid: this.$store.state.user.userInfo.uid,
  385 + openid: this.$store.state.user.userInfo.openid,
  386 + mp_id: this.mp_id,
  387 + keyname: rightList[j],
  388 + keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]
  389 + });
  390 + }
  391 + flag=1;
  392 + } else{
  393 + flag=0;
  394 + uni.showToast({
  395 + title:"请输入您的验光数据",
  396 + icon: "none",
  397 + duration: 2000,
  398 + })
  399 +
  400 + }
  401 + }
  402 +
  403 + }
  404 + if(flag!=0){
  405 + store.dispatch('myLoveList/getLoveList', {
  406 + uid: this.$store.state.user.userInfo.uid,
  407 + });
  408 + uni.navigateBack({
  409 + delta:1,
  410 + animationDuration:2000
  411 + })
  412 + }
  413 +
  414 + } else{
  415 + uni.showToast({
  416 + title:"请确认您的验光数据",
  417 + icon: "none",
  418 + duration: 3000,
  419 + })
  420 + }
  421 +
  422 + }
  423 +
  424 +
  425 + }
  426 +
  427 + }
  428 +
  429 + },
141 430 changeConfirm() {
142   - this.tablist.confirm = !this.tablist.confirm
  431 + this.confirm = !this.confirm
143 432 },
144 433  
145 434 bindPickerChange01: function(e) {
146 435 this.pickerInfoList[0].nameIndex1 = e.target.value
  436 + this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value]
147 437 },
148 438 bindPickerChange02: function(e) {
149 439 this.pickerInfoList[0].nameIndex2 = e.target.value
  440 + this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value]
150 441 },
151 442  
152 443 bindPickerChange11: function(e) {
153 444 this.pickerInfoList[1].nameIndex1 = e.target.value
  445 + this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value]
154 446 },
155 447 bindPickerChange12: function(e) {
156 448 this.pickerInfoList[1].nameIndex2 = e.target.value
  449 + this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value]
157 450 },
158 451  
159 452 bindPickerChange21: function(e) {
160 453 this.pickerInfoList[2].nameIndex1 = e.target.value
  454 + this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value]
161 455 },
162 456 bindPickerChange22: function(e) {
163   - this.pickerInfoList[2].nameIndex2 = e.target.value
164   - },
165   -
166   - bindPickerChange31: function(e) {
167   - this.pickerInfoList[3].nameIndex1 = e.target.value
  457 + this.pickerInfoList[2].nameIndex2 = e.target.value
  458 + this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value]
168 459 },
169   - bindPickerChange32: function(e) {
170   - this.pickerInfoList[3].nameIndex2 = e.target.value
171   - },
172 460  
173 461 bindPickerChange41: function(e) {
174   - this.pickerInfoList[4].nameIndex1 = e.target.value
  462 + this.pickerInfoList[3].nameIndex1 = e.target.value
  463 + this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value]
175 464 },
176 465 bindPickerChange42: function(e) {
177   - this.pickerInfoList[4].nameIndex2 = e.target.value
  466 + this.pickerInfoList[3].nameIndex2 = e.target.value
  467 + this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value]
178 468 },
179 469 bindPickerChange43: function(e) {
180   - this.pickerInfoList[4].nameIndex3 = e.target.value
  470 + this.pickerInfoList[3].nameIndex3 = e.target.value
  471 + this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value]
181 472 },
182 473 }
183 474 }
... ... @@ -229,17 +520,18 @@
229 520 text-align: justify;
230 521 line-height: 24px;
231 522 margin: 4px 0;
232   -
  523 +
233 524 }
234 525 .p2 {
235 526 font-size: 12px;
236 527 color: #999999;
237 528 letter-spacing: -0.23px;
238   - margin-bottom: 18rpx;
  529 + margin-bottom: 32rpx;
239 530 }
240   - image{
241   - width: 28rpx;
242   - height: 26rpx;
  531 + .image2{
  532 + width: 42rpx;
  533 + height: 34rpx;
  534 + margin-right: 12rpx;
243 535 }
244 536 .confirm {
245 537 display: flex;
... ... @@ -248,8 +540,10 @@
248 540 color: #666666;
249 541 letter-spacing: -0.23px;
250 542 width: 684rpx;
251   - image{
  543 + .image1{
252 544 margin-right:25rpx;
  545 + width: 42rpx;
  546 + height: 38rpx;
253 547 }
254 548 }
255 549 .picker{
... ... @@ -258,18 +552,26 @@
258 552 justify-content: center;
259 553 align-items: center;
260 554 width: 100%;
261   - image{
262   - width: 10px;
263   - height: 10px;
264   - margin-right: 5px;
265   - }
  555 +
266 556 .picker-choice{
267 557 display: flex;
268 558 width: 684rpx;
269 559 align-items: center;
270 560 margin-bottom: 40rpx;
  561 + .input{
  562 + border-bottom: 1px solid #CFCFCF;
  563 + height: 40rpx;
  564 + }
271 565 .choice-left{
272 566 width: 210rpx;
  567 + .pd{
  568 + font-size: 14px;
  569 + color: #333333;
  570 + letter-spacing: -0.26px;
  571 + text-align: justify;
  572 + line-height: 24px;
  573 + margin-right: 44rpx;
  574 + }
273 575 .p11 {
274 576 font-size: 14px;
275 577 color: #333333;
... ... @@ -300,14 +602,29 @@
300 602 letter-spacing: -0.19px;
301 603 margin-right: 5px;
302 604 }
303   - .p14 {
304   - font-size: 14px;
305   - color: #666666;
306   - letter-spacing: -0.26px;
307   - text-align: center;
308   - width: 124rpx;
309   - border-bottom: 1px solid #CFCFCF;
  605 + picker{
  606 + width: 144rpx;
  607 + height: 40rpx;
  608 + display: flex;
  609 + position: relative;
  610 + .p14 {
  611 + font-size: 14px;
  612 + color: #666666;
  613 + letter-spacing: -0.26px;
  614 + text-align: center;
  615 + width: 124rpx;
  616 + border-bottom: 1px solid #CFCFCF;
  617 + height: 38rpx;
  618 + }
  619 + image{
  620 + width: 20rpx;
  621 + height: 20rpx;
  622 + position: absolute;
  623 + right: 20rpx;
  624 + top: 8rpx;
  625 + }
310 626 }
  627 +
311 628  
312 629 }
313 630 }
... ...
src/pages/purchaseLenses/purchaseLenses.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="content">
3   - <view class="goodInfo">
4   - <view class="imageWrap">
5   - <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
6   - </view>
7   - <view class="infoRight">
8   - <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
9   - <text class="remarks">支持7天无理由退货 顺丰发货</text>
10   - <view class="priceBox">
11   - <view class="price">￥198</view>
12   - <text>(限购{{maxCount}}副)</text>
13   - <view class="counter">
14   - <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
15   - <text>{{count}}</text>
16   - <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
17   - </view>
18   - </view>
19   - </view>
20   - </view>
  2 + <view class="content">
  3 + <view class="goodInfo">
  4 + <view class="imageWrap">
  5 + <image
  6 + src="../../static/img/detail/d1.png"
  7 + mode="aspectFill"
  8 + style="width: 188rpx;height: 168rpx;"
  9 + ></image>
  10 + </view>
  11 + <view class="infoRight">
  12 + <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
  13 + <text class="remarks">支持7天无理由退货 顺丰发货</text>
  14 + <view class="priceBox">
  15 + <view class="price">￥198</view>
  16 + <text>(限购{{maxCount}}副)</text>
  17 + <view class="counter">
  18 + <view
  19 + class="btn"
  20 + disabled="this.addDisabled"
  21 + type="default"
  22 + @click="counter(false)"
  23 + >-</view>
  24 + <text>{{count}}</text>
  25 + <view
  26 + class="btn"
  27 + disabled="this.desDisabled"
  28 + type="default"
  29 + @click="counter(true)"
  30 + >+</view>
  31 + </view>
  32 + </view>
  33 + </view>
  34 + </view>
21 35 <view class="goods-data">
22 36 <view class="opCollapse">
23 37 <view class="body">
24 38 <template v-if="opIsOpen">
25   - <view class="goods-form">
26   - <view class="data-title">
27   - <image src="../../static/icon-data.png" ></image>
28   - <text class="p1">填写验光数据</text>
  39 + <view class="goods-form">
  40 + <view class="p1">
  41 + <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
  42 + 填写验光数据
  43 + </view>
  44 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  45 + <view class="picker">
  46 + <view class="picker-choice">
  47 + <view class="choice-left">
  48 + <text class="pd">验光单取名:</text>
  49 + </view>
  50 + <input type="text" @blur="handleInput" class="input"
  51 + placeholder="请输入名称" maxlength="20" :value="name" />
  52 + </view>
  53 + </view>
  54 + <view class="picker" >
  55 + <view class="picker-choice">
  56 + <view class="choice-left">
  57 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  58 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  59 + </view>
  60 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  61 + <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
  62 + <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  63 + <view class="p14">
  64 + {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
  65 + <image src="../../static/detail-tabicon.png" ></image>
29 66 </view>
30   - <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
31   - <view class="picker" >
32   - <view class="picker-choice">
33   - <view class="choice-left">
34   - <text class="p11">验光单取名:</text>
35   - </view>
36   - <input class="choice-name uni-input" placeholder="下系" />
37   - </view>
  67 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  68 + </picker>
  69 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  70 + <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
  71 + <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
  72 + <view class="p14">
  73 + {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
  74 + <image src="../../static/detail-tabicon.png" ></image>
38 75 </view>
39   - <view class="picker" >
40   - <view class="picker-choice">
41   - <view class="choice-left">
42   - <text class="p11">{{pickerInfoList[0].nameC}}</text>
43   - <text class="p12">{{pickerInfoList[0].nameE}}</text>
44   - </view>
45   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
46   - <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
47   - <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
48   - <image src="../../static/detail-tabicon.png" ></image>
49   - </picker>
50   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
51   - <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
52   - <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
53   - <image src="../../static/detail-tabicon.png" ></image>
54   - </picker>
55   - </view>
  76 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  77 + </picker>
  78 + </view>
  79 + </view>
  80 + <view class="picker" >
  81 + <view class="picker-choice">
  82 + <view class="choice-left">
  83 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  84 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  85 + </view>
  86 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  87 + <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
  88 + <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
  89 + <view class="p14">
  90 + {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
  91 + <image src="../../static/detail-tabicon.png" ></image>
56 92 </view>
57   - <view class="picker" >
58   - <view class="picker-choice">
59   - <view class="choice-left">
60   - <text class="p11">{{pickerInfoList[1].nameC}}</text>
61   - <text class="p12">{{pickerInfoList[1].nameE}}</text>
62   - </view>
63   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
64   - <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
65   - <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
66   - <image src="../../static/detail-tabicon.png" ></image>
67   - </picker>
68   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
69   - <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
70   - <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
71   - <image src="../../static/detail-tabicon.png" ></image>
72   - </picker>
73   - </view>
  93 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  94 + </picker>
  95 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  96 + <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
  97 + <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
  98 + <view class="p14">
  99 + {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
  100 + <image src="../../static/detail-tabicon.png" ></image>
74 101 </view>
75   - <view class="picker" >
76   - <view class="picker-choice">
77   - <view class="choice-left">
78   - <text class="p11">{{pickerInfoList[2].nameC}}</text>
79   - <text class="p12">{{pickerInfoList[2].nameE}}</text>
80   - </view>
81   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
82   - <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
83   - <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
84   - <image src="../../static/detail-tabicon.png" ></image>
85   - </picker>
86   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
87   - <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
88   - <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
89   - <image src="../../static/detail-tabicon.png" ></image>
90   - </picker>
91   - </view>
  102 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  103 + </picker>
  104 + </view>
  105 + </view>
  106 + <view class="picker" >
  107 + <view class="picker-choice">
  108 + <view class="choice-left">
  109 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  110 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  111 + </view>
  112 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  113 + <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
  114 + <view class="p14">
  115 + {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
  116 + <image src="../../static/detail-tabicon.png" ></image>
  117 + </view>
  118 + </picker>
  119 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  120 + <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
  121 + <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
  122 + <view class="p14">
  123 + {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
  124 + <image src="../../static/detail-tabicon.png" ></image>
92 125 </view>
93   - <view class="picker" >
94   - <view class="picker-choice">
95   - <view class="choice-left">
96   - <text class="p11">{{pickerInfoList[3].nameC}}</text>
97   - <text class="p12">{{pickerInfoList[3].nameE}}</text>
98   - </view>
99   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
100   - <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
101   - <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
102   - <image src="../../static/detail-tabicon.png" ></image>
103   - </picker>
104   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
105   - <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
106   - <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
107   - <image src="../../static/detail-tabicon.png" ></image>
108   - </picker>
109   - </view>
  126 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  127 + </picker>
  128 + </view>
  129 + </view>
  130 + <view class="picker">
  131 + <view class="picker-choice">
  132 + <view class="choice-left">
  133 + <text class="pd">瞳距:</text>
  134 + </view>
  135 + <input type="digit" @change="handleInputPd" class="input"
  136 + placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
  137 + </view>
  138 + </view>
  139 + <view class="picker" >
  140 + <view class="picker-choice">
  141 + <view class="choice-left">
  142 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  143 + </view>
  144 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  145 + <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
  146 + <view class="p14" style="width: 30px;">
  147 + {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
  148 + <image src="../../static/detail-tabicon.png" ></image>
110 149 </view>
111   - <view class="picker" >
112   - <view class="picker-choice">
113   - <view class="choice-left">
114   - <text class="p11">{{pickerInfoList[4].nameC}}</text>
115   - </view>
116   - <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
117   - <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
118   - <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
119   - <image src="../../static/detail-tabicon.png" ></image>
120   - </picker>
121   - <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
122   - <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
123   - <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
124   - <image src="../../static/detail-tabicon.png" ></image>
125   - </picker>
126   - <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
127   - <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
128   - <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
129   - <image src="../../static/detail-tabicon.png" ></image>
130   - </picker>
131   - </view>
  150 + </picker>
  151 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  152 + <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
  153 + <view class="p14" style="width: 30px;">
  154 + {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
  155 + <image src="../../static/detail-tabicon.png" ></image>
132 156 </view>
133   - <view class="confirm">
134   - <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
135   - <text>确认以上输入信息来源于我的验光数据!</text>
  157 + </picker>
  158 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  159 + <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
  160 + <view class="p14" style="width: 30px;">
  161 + {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
  162 + <image src="../../static/detail-tabicon.png" ></image>
136 163 </view>
137   - </view>
138   -
  164 + </picker>
  165 + </view>
  166 + </view>
  167 + <view class="confirm">
  168 + <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
  169 + <text>确认以上输入信息来源于我的验光数据!</text>
  170 + </view>
  171 + </view>
139 172 </template>
140 173 <template v-else>
141   - <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
  174 + <view
  175 + v-for="item in pickerInfoList"
  176 + :key="item.key"
  177 + class="bodyBox"
  178 + >
142 179 <template v-if="item.nameC==='验光日期'">
143 180 <text class="names">{{item.nameC}}</text>
144 181 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
... ... @@ -149,493 +186,1021 @@
149 186 <template v-if="item.nameC==='度数'">
150 187 <text style="display: inline;">*</text>
151 188 </template>
152   -
153   - <text class="names">{{item.nameC}}</text>
154   - <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
155   - <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
  189 +
  190 + <text class="names">{{item.nameC}}</text>
  191 + <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
  192 + <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
156 193 </template>
157 194 </view>
158 195 </template>
159 196 </view>
160 197 </view>
161 198 </view>
162   - <view class="choose">
163   - <view class="chooseItem_1 chooseItem">
164   - <UniCollapse @change="change(1)" >
165   - <UniCollapseItem open=true title="款式挑选" showAnimation=false>
166   - <view class="chooseRes" v-show="show[1]">* {{chooseRes1}}</view>
  199 + <view class="choose">
  200 + <view
  201 + class="chooseItem_1_content"
  202 + v-for="(item,index) in attrList"
  203 + :key="index"
  204 + >
  205 + <UniCollapse @change="changeShow(index)">
  206 + <UniCollapseItem
  207 + :open="show[index]"
  208 + :title="item.meta_name"
  209 + showAnimation=false
  210 + >
  211 + <view class="chooseItem_1_content">
  212 + <view class="itemsWrap">
  213 + <view
  214 + class="item2"
  215 + v-for="(one,i) in item.attr"
  216 + :key="i"
  217 + :class="{ active2: current[index] === i }"
  218 + @click="onClickItem(index, i)"
  219 + >{{one.name}}</view>
  220 + </view>
  221 + </view>
  222 + </UniCollapseItem>
  223 + </UniCollapse>
  224 + <view
  225 + class="chooseRes"
  226 + v-show="!show[index]"
  227 + >* {{attrList[index].attr[current[index]].name}}</view>
  228 + </view>
  229 + <!-- <view class="chooseItem_1 chooseItem">
  230 + <UniCollapse @change="change(1)">
  231 + <UniCollapseItem
  232 + open=true
  233 + title="款式挑选"
  234 + showAnimation=false
  235 + >
  236 + <view
  237 + class="chooseRes"
  238 + v-show="show[1]"
  239 + >* {{chooseRes1}}</view>
167 240 <view class="chooseItem_1_content">
168 241 <view class="itemsWrap">
169   - <view class="item1"
170   - v-for="(item,index) in chooseItem1"
171   - :key="index"
172   - :style="item.style"
173   - :class="{ active1: current1 === index }"
174   - @click="onClickItem1(index)"
  242 + <view
  243 + class="item1"
  244 + v-for="(item,index) in chooseItem1"
  245 + :key="index"
  246 + :style="item.style"
  247 + :class="{ active1: current1 === index }"
  248 + @click="onClickItem1(index)"
175 249 ></view>
176 250 </view>
177 251 </view>
178 252 </UniCollapseItem>
179   - </UniCollapse>
180   - <view class="chooseRes" v-show="show[1]">* {{chooseRes1}}</view>
181   - </view>
182   - <view class="chooseItem_2 chooseItem ">
183   - <UniCollapse @change="change(2)" >
184   - <UniCollapseItem open=true title="直径" showAnimation=false>
  253 + </UniCollapse>
  254 + <view
  255 + class="chooseRes"
  256 + v-show="show[1]"
  257 + >* {{chooseRes1}}</view>
  258 + </view>
  259 + <view class="chooseItem_2 chooseItem ">
  260 + <UniCollapse @change="change(2)">
  261 + <UniCollapseItem
  262 + open=true
  263 + title="直径"
  264 + showAnimation=false
  265 + >
185 266 <view class="chooseItem_1_content">
186 267 <view class="itemsWrap">
187   - <view class="item2"
188   - v-for="(item,index) in chooseItem2"
189   - :key="index"
190   - :class="{ active2: current2 === index }"
191   - @click="onClickItem2(index)"
  268 + <view
  269 + class="item2"
  270 + v-for="(item,index) in chooseItem2"
  271 + :key="index"
  272 + :class="{ active2: current2 === index }"
  273 + @click="onClickItem2(index)"
192 274 >{{item.num}}</view>
193 275 </view>
194 276 </view>
195 277 </UniCollapseItem>
196   - </UniCollapse>
197   - <view class="chooseRes" v-show="show[2]">* {{chooseRes2}}</view>
198   - </view>
199   - <view class="chooseItem_3 chooseItem">
200   - <UniCollapse @change="change(3)" >
201   - <UniCollapseItem open=true title="度数" showAnimation=false>
  278 + </UniCollapse>
  279 + <view
  280 + class="chooseRes"
  281 + v-show="show[2]"
  282 + >* {{chooseRes2}}</view>
  283 + </view>
  284 + <view class="chooseItem_3 chooseItem">
  285 + <UniCollapse @change="change(3)">
  286 + <UniCollapseItem
  287 + open=true
  288 + title="度数"
  289 + showAnimation=false
  290 + >
202 291 <view class="chooseItem_1_content">
203 292 <view class="itemsWrap">
204   - <view class="item2"
205   - v-for="(item,index) in chooseItem3"
206   - :key="index"
207   - :class="{ active2: current3 === index }"
208   - @click="onClickItem3(index)"
  293 + <view
  294 + class="item2"
  295 + v-for="(item,index) in chooseItem3"
  296 + :key="index"
  297 + :class="{ active2: current3 === index }"
  298 + @click="onClickItem3(index)"
209 299 >{{item}}</view>
210 300 </view>
211 301 </view>
212 302 </UniCollapseItem>
213   - </UniCollapse>
214   - <view class="chooseRes" v-show="show[3]">* {{chooseRes3}}</view>
215   - </view>
216   - </view>
217   - <view class="button" @click="toComfirmOrder">
218   - 立即结算
219   - </view>
220   - </view>
  303 + </UniCollapse>
  304 + <view
  305 + class="chooseRes"
  306 + v-show="show[3]"
  307 + >* {{chooseRes3}}</view>
  308 + </view> -->
  309 + </view>
  310 + <view
  311 + class="button"
  312 + @click="toComfirmOrder"
  313 + >
  314 + 立即结算
  315 + </view>
  316 + </view>
221 317 </template>
222 318  
223 319 <script>
224   - import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
225   - import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
226   - import store from '@/store'
  320 +import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  321 +import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
  322 +import store from '@/store'
  323 +
  324 +export default {
  325 + components: {
  326 + UniCollapse,
  327 + UniCollapseItem,
  328 + },
  329 + data() {
  330 + return {
  331 + count: 1,
  332 + pid: 0,
  333 + maxCount: 20,
  334 + dataName: '', // 验光数据人员名称
  335 + isDataName: false, // 是否是已存在的人员数据
  336 + dataConfirm: false, // 已确认所输入验光数据
  337 + opIsOpen: true,
  338 + addDisabled: false,
  339 + desDisabled: false,
  340 + current1: 0,
  341 + current2: 0,
  342 + current3: 0,
  343 + current: [],
  344 + show: [],
  345 + chooseRes1: {
  346 + sku_name: 'Miss 黑二代【减龄自然】',
  347 + sk_id: '128',
  348 + },
  349 + checkedData: {},
  350 + chooseRes2: '14.0',
  351 + chooseRes3: 0,
  352 + chooseItem1: [
  353 + { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' },
  354 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' },
  355 + { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' },
  356 + { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
  357 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
  358 + { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
  359 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
  360 + { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
  361 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
  362 + { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
  363 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
  364 + { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
  365 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
  366 + { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
  367 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
  368 + ],
  369 + chooseItem2: [
  370 + { num: '14.0' },
  371 + { num: '14.2' },
  372 + { num: '14.4' },
  373 + { num: '14.5' },
  374 + ],
  375 + chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000],
  376 + // 度数相关数据
  377 + pickerInfoList: [
  378 + { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
  379 + { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
  380 + { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
  381 + { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
  382 + ],
  383 + confirm: false, // 用户是否确认
  384 + tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
  385 + name: '夏小花',
  386 + oldname: '', // 用于判读用户是否改变名字
  387 + pickerInfoChioce: {
  388 + leftSph: '',
  389 + rightSph: '',
  390 + leftCyl: '',
  391 + rightCyl: '',
  392 + leftAxi: '',
  393 + rightAxi: '',
  394 + time: {
  395 + year: 0,
  396 + month: 0,
  397 + day: 0,
  398 + },
  399 + },
  400 + pd: '', // 瞳距
  401 + oldpd: '', // 用于判断用户是否改变瞳距
  402 + kinds: 1, // kinds=1，提交为新增验光，2为修改
  403 + mp_id: Number,
  404 + }
  405 + },
  406 + computed: {
  407 + attrList() {
  408 + return this.$store.state.read.goodInfo.attrList
  409 + },
  410 + skuList() {
  411 + return this.$store.state.read.goodInfo.skuList
  412 + },
  413 + mpList() {
  414 + return this.$store.state.myLoveList.loveList
  415 + },
  416 + },
  417 + onLoad({ pid }) {
  418 + this.pid = pid
  419 + store.dispatch('read/fetch', {
  420 + pid,
  421 + }).then(() => {
  422 + const current = []
  423 + const show = []
  424 + for (let index = 0; index < this.attrList.length; index++) {
  425 + current.push(0)
  426 + show.push(true)
  427 + }
  428 + this.current = current
  429 + this.show = show
  430 + })
  431 + store.dispatch('myLoveList/getLoveList')
227 432  
228   - export default {
229   - components: {
230   - UniCollapse,
231   - UniCollapseItem,
232   - },
233   - data() {
234   - return {
235   - count: 1,
236   - maxCount: 20,
237   - opIsOpen: true,
238   - addDisabled: false,
239   - desDisabled: false,
240   - current1: 0,
241   - current2: 0,
242   - current3: 0,
243   - actice: [-1, -1, -1],
244   - show: [0, 0, 0, 0],
245   - chooseRes1:{
246   - sku_name: 'Miss 黑二代【减龄自然】',
247   - sk_id: '128',
248   - },
249   - chooseRes2: '14.0',
250   - chooseRes3: 0,
251   - chooseItem1: [
252   - {style:"opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);",describ:"Miss 黑1代【减龄自然】"},
253   - {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑二代【防紫外线】"},
254   - {style:"background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);",describ:"Miss 黑3代【防紫外线】"},
255   - {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},
256   - {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},
257   - {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},
258   - {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},
259   - {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},
260   - {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},
261   - {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},
262   - {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},
263   - {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},
264   - {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},
265   - {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},
266   - {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},
267   - ],
268   - chooseItem2:[
269   - {num:"14.0"},
270   - {num:"14.2"},
271   - {num:"14.4"},
272   - {num:"14.5"},
273   - ],
274   - chooseItem3:[0,100,125,150,175,200,225,250,275,300,325,350,375,400,425,450,470,500,525,550,575,600,1000],
275   - // 度数相关数据
276   - pickerInfoList:[
277   - {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},
278   - {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},
279   - {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},
280   - {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},
281   - {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}
282   - ],
283   - };
284   - },
285   - computed: {
286   - attrList() {
287   - return this.$store.state.read.goodInfo.attrList;
288   - },
289   - skuList() {
290   - return this.$store.state.read.goodInfo.skuList;
291   - },
292   - },
293   - onLoad() {
294   - store.dispatch('read/fetch', {
295   - pid: 9,
296   - });
297   - },
298   - methods:{
299   - change(num) {
300   - this.show[num] = this.show[num] ? false : true;
301   - },
302   - onClickItem1(index) {
303   - if (this.current1 !== index) {
304   - this.current1 = index;
305   - this.chooseRes1 =this.chooseItem1[index].describ
  433 + // 初始化SPL、CYL、AXI的值
  434 + for (let j = 0; j < 3; j++) {
  435 + for (let i = -12; i < 6; i++) {
  436 + this.pickerInfoList[j].nameArray1.push(i)
  437 + this.pickerInfoList[j].nameArray1.push(i + 0.5)
  438 + this.pickerInfoList[j].nameArray2.push(i)
  439 + this.pickerInfoList[j].nameArray2.push(i + 0.5)
  440 + if (i >= -6) {
  441 + this.pickerInfoList[j].nameArray1.push(i + 0.25)
  442 + this.pickerInfoList[j].nameArray1.push(i + 0.75)
  443 + this.pickerInfoList[j].nameArray2.push(i + 0.25)
  444 + this.pickerInfoList[j].nameArray2.push(i + 0.75)
306 445 }
307   - },
308   - onClickItem2(index) {
309   - if (this.current2 !== index) {
310   - this.current2 = index;
311   - this.chooseRes2 =this.chooseItem2[index].num
  446 + if (i === 5) {
  447 + this.pickerInfoList[j].nameArray1.push(i + 1)
  448 + this.pickerInfoList[j].nameArray2.push(i + 1)
312 449 }
313   - },
314   - onClickItem3(index) {
315   - if (this.current3 !== index) {
316   - this.current3 = index;
317   - this.chooseRes3 =this.chooseItem3[index]
  450 + }
  451 + }
  452 + // 初始化日期值
  453 + for (let i = 1; i < 32; i++) {
  454 + this.pickerInfoList[3].nameArray3.push(i)
  455 + }
  456 + // 初始化年份前后五年
  457 + const myDate = new Date()
  458 + const nowYear = myDate.getFullYear()
  459 + for (let i = 0; i < 5; i++) {
  460 + this.pickerInfoList[3].nameArray1.push(nowYear - i)
  461 + }
  462 + },
  463 + methods: {
  464 + // picker相关功能
  465 + handleInput(e) {
  466 + this.name = e.target.value
  467 + this.isDataName = false
  468 + console.log('e---->', e)
  469 + const mpList = this.mpList
  470 + console.log('mpList===>', mpList)
  471 + for (let index = 0; index < mpList.length; index++) {
  472 + if (e.detail.value === mpList[index].name) {
  473 + this.isDataName = true
  474 + uni.showModal({
  475 + title: '提示',
  476 + content: `是否填充已有的"${e.detail.value}"的数据`,
  477 + success: (res) => {
  478 + if (res.confirm) {
  479 + this.kinds = 2
  480 + console.log('args===>', index)
  481 + // const mpList=Object.assign({},this.$store.state.mympList.mpList)
  482 + console.log('mpList===>', mpList)
  483 + this.name = mpList[index].name
  484 + this.pd = mpList[index].pd
  485 + this.mp_id = mpList[index].mp_id
  486 + this.oldname = mpList[index].name
  487 + this.oldpd = mpList[index].pd
  488 + // 将kinds =2时的值传到该页面
  489 + this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
  490 + this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
  491 + this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
  492 + this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
  493 + this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
  494 + this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
  495 + this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
  496 + if (mpList[index].in_time.toString().slice(5, 6) === 0) {
  497 + this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
  498 + } else {
  499 + this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
  500 + }
  501 + if (mpList[index].in_time.toString().slice(8, 9) === 0) {
  502 + this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
  503 + } else {
  504 + this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
  505 + }
  506 + // this.checkedData = mpList[index]
  507 + // console.log('checkedData', this.checkedData)
  508 + } else if (res.cancel) {
  509 + this.kinds = 2
  510 + }
  511 + },
  512 + })
318 513 }
319   - },
320   - counter(isadd){
321   - if (isadd) {
322   - this.count >= this.maxCount? this.addDisabled = true:this.count++;
323   - } else {
324   - this.count <= 1? this.desDisabled = true:this.count--;
325   - }
326   - },
327   - toComfirmOrder(){
328   - uni.navigateTo({
329   - url:'../confirmOrder/confirmOrder'
330   - })
331   - }
332   - }
333   - }
  514 + }
  515 + },
  516 + handleInputPd(e) {
  517 + // 只能输入正浮点数或正数
  518 + if (/^\d+(\.\d+)?$/.test(e.target.value)) {
  519 + this.pd = e.target.value
  520 + } else {
  521 + uni.showToast({
  522 + title: '请输入有效数据;示例:89',
  523 + icon: 'none',
  524 + duration: 2000,
  525 + })
  526 + this.pd = ''
  527 + }
  528 + },
  529 + changeConfirm() {
  530 + this.confirm = !this.confirm
  531 + },
  532 + bindPickerChange01: function(e) {
  533 + this.pickerInfoList[0].nameIndex1 = e.target.value
  534 + this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
  535 + },
  536 + bindPickerChange02: function(e) {
  537 + this.pickerInfoList[0].nameIndex2 = e.target.value
  538 + this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
  539 + },
  540 +
  541 + bindPickerChange11: function(e) {
  542 + this.pickerInfoList[1].nameIndex1 = e.target.value
  543 + this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
  544 + },
  545 + bindPickerChange12: function(e) {
  546 + this.pickerInfoList[1].nameIndex2 = e.target.value
  547 + this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
  548 + },
  549 +
  550 + bindPickerChange21: function(e) {
  551 + this.pickerInfoList[2].nameIndex1 = e.target.value
  552 + this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
  553 + },
  554 + bindPickerChange22: function(e) {
  555 + this.pickerInfoList[2].nameIndex2 = e.target.value
  556 + this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
  557 + },
  558 +
  559 + bindPickerChange41: function(e) {
  560 + this.pickerInfoList[3].nameIndex1 = e.target.value
  561 + this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
  562 + },
  563 + bindPickerChange42: function(e) {
  564 + this.pickerInfoList[3].nameIndex2 = e.target.value
  565 + this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
  566 + },
  567 + bindPickerChange43: function(e) {
  568 + this.pickerInfoList[3].nameIndex3 = e.target.value
  569 + this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
  570 + },
  571 + changeShow(num) {
  572 + this.show[num] = !this.show[num]
  573 + this.$forceUpdate()
  574 + },
  575 + onClickItem(index, i) {
  576 + if (this.current[index] !== i) {
  577 + this.current[index] = i
  578 + }
  579 + this.$forceUpdate()
  580 + },
  581 + // onClickItem1(index) {
  582 + // if (this.current1 !== index) {
  583 + // this.current1 = index
  584 + // this.chooseRes1 = this.chooseItem1[index].describ
  585 + // }
  586 + // },
  587 + // onClickItem2(index) {
  588 + // if (this.current2 !== index) {
  589 + // this.current2 = index
  590 + // this.chooseRes2 = this.chooseItem2[index].num
  591 + // }
  592 + // },
  593 + // onClickItem3(index) {
  594 + // if (this.current3 !== index) {
  595 + // this.current3 = index
  596 + // this.chooseRes3 = this.chooseItem3[index]
  597 + // }
  598 + // },
  599 + counter(isadd) {
  600 + if (isadd) {
  601 + this.count >= this.maxCount ? this.addDisabled = true : this.count++
  602 + } else {
  603 + this.count <= 1 ? this.desDisabled = true : this.count--
  604 + }
  605 + },
  606 + toComfirmOrder() {
  607 + // 先处理验光部分的逻辑，如果ok在跳转
  608 + let flag = 0
  609 + if (this.name === '') {
  610 + uni.showToast({
  611 + title: '请输入验光单取名',
  612 + icon: 'none',
  613 + duration: 2000,
  614 + })
  615 + } else {
  616 + if (this.pd === '') {
  617 + uni.showToast({
  618 + title: '请输入瞳距',
  619 + icon: 'none',
  620 + duration: 2000,
  621 + })
  622 + } else {
  623 + if (this.kinds === 1) {
  624 + // 添加用户验光单
  625 + console.log('kinds====>', this.pickerInfoChioce.leftSph)
  626 + console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
  627 + console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
  628 + if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
  629 + this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
  630 + this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
  631 + ) {
  632 + uni.showToast({
  633 + title: '请输入您的验光数据',
  634 + icon: 'none',
  635 + duration: 2000,
  636 + })
  637 + } else {
  638 + if (this.confirm) {
  639 + store.dispatch('myLoveList/addMylove', {
  640 + uid: this.$store.state.user.userInfo.uid,
  641 + openid: this.$store.state.user.userInfo.openid,
  642 + // mp_name: this.$store.state.user.userInfo.mp_name,
  643 + leftSph: this.pickerInfoChioce.leftSph,
  644 + rightSph: this.pickerInfoChioce.rightSph,
  645 + leftCyl: this.pickerInfoChioce.leftCyl,
  646 + rightCyl: this.pickerInfoChioce.rightCyl,
  647 + leftAxi: this.pickerInfoChioce.leftAxi,
  648 + rightAxi: this.pickerInfoChioce.rightAxi,
  649 + pd: this.pd, // 瞳距
  650 + mp_name: this.name,
  651 + // time: this.pickerInfoChioce.time,
  652 + // img_url2: "http://localhost:8087/images/shop_1/1/",
  653 + }).then(({ mp_id: mpId }) => {
  654 + this.mp_id = mpId
  655 + })
  656 + flag = 1
  657 + } else {
  658 + uni.showToast({
  659 + title: '请确认您的验光数据',
  660 + icon: 'none',
  661 + duration: 3000,
  662 + })
  663 + }
  664 + }
  665 + }
  666 + if (this.kinds === 2) {
  667 + // console.log('kinds====>',this.kinds)
  668 + // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
  669 + // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
  670 + if (this.confirm) {
  671 + const leftList = ['leftSph', 'leftCyl', 'leftAxi']
  672 + const rightList = ['rightSph', 'rightCyl', 'rightAxi']
  673 + // let flag=0;
  674 + if (this.name !== this.oldname) {
  675 + store.dispatch('myLoveList/updateMylove', {
  676 + uid: this.$store.state.user.userInfo.uid,
  677 + openid: this.$store.state.user.userInfo.openid,
  678 + mp_id: this.mp_id,
  679 + keyname: 'name',
  680 + keyvalue: this.name,
  681 + })
  682 + flag = 1
  683 + }
  684 + if (this.pd !== this.oldpd) {
  685 + store.dispatch('myLoveList/updateMylove', {
  686 + uid: this.$store.state.user.userInfo.uid,
  687 + openid: this.$store.state.user.userInfo.openid,
  688 + mp_id: this.mp_id,
  689 + keyname: 'pd',
  690 + keyvalue: this.pd,
  691 + })
  692 + flag = 1
  693 + }
  694 + // 先验证是否输入有无空
  695 + let q = true
  696 + for (let k = 0; k < 3; k++) {
  697 + q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
  698 + this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
  699 + }
  700 + if (q) {
  701 + for (let j = 0; j < 3; j++) {
  702 + if (this.pickerInfoList[j].nameIndex1 !== 0) {
  703 + store.dispatch('myLoveList/updateMylove', {
  704 + uid: this.$store.state.user.userInfo.uid,
  705 + openid: this.$store.state.user.userInfo.openid,
  706 + mp_id: this.mp_id,
  707 + keyname: leftList[j],
  708 + keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
  709 + })
  710 + }
  711 + if (this.pickerInfoList[j].nameIndex2 !== 0) {
  712 + store.dispatch('myLoveList/updateMylove', {
  713 + uid: this.$store.state.user.userInfo.uid,
  714 + openid: this.$store.state.user.userInfo.openid,
  715 + mp_id: this.mp_id,
  716 + keyname: rightList[j],
  717 + keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
  718 + })
  719 + }
  720 + flag = 1
  721 + }
  722 + } else {
  723 + flag = 0
  724 + uni.showToast({
  725 + title: '请输入您的验光数据',
  726 + icon: 'none',
  727 + duration: 2000,
  728 + })
  729 + }
  730 + if (flag !== 0) {
  731 + store.dispatch('myLoveList/getLoveList', {
  732 + uid: this.$store.state.user.userInfo.uid,
  733 + })
  734 + }
  735 + } else {
  736 + uni.showToast({
  737 + title: '请确认您的验光数据',
  738 + icon: 'none',
  739 + duration: 3000,
  740 + })
  741 + }
  742 + }
  743 + }
  744 + }
  745 + if (flag !== 0) {
  746 + // 如果数据验证无误，那么更新验光单的数据
  747 + store.dispatch('myLoveList/getLoveList', {
  748 + uid: this.$store.state.user.userInfo.uid,
  749 + })
  750 + let i = 0
  751 + // 判断出是哪一个sku被选中
  752 + for (let index = 0; index < this.current.length; index++) {
  753 + console.log('index', index, i, index !== this.current.length - 1)
  754 + if (index !== this.current.length - 1) {
  755 + // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
  756 + i = this.current[index] * this.attrList[1].attr.length
  757 + } else {
  758 + i += this.current[index]
  759 + }
  760 + }
  761 + // 判断是否其输入的人员数据是否已存在
  762 + store.dispatch('order/saveParams', {
  763 + sk_id_arr: this.skuList[i],
  764 + current: this.current,
  765 + mp_id: this.mp_id,
  766 + attrList: this.attrList,
  767 + })
  768 + // 跳转到确认订单页面
  769 + uni.navigateTo({
  770 + url: `../confirmOrder/confirmOrder?pid=${this.pid}`,
  771 + })
  772 + }
  773 + },
  774 + },
  775 +}
334 776 </script>
335 777  
336 778 <style lang="scss">
337   - .content {
338   - min-height: 100vh;
339   - background-color: #F2F2F2;
340   - // padding-top: 20rpx;
341   - .goodInfo{
342   - width: 100%;
343   - height: 272rpx;
344   - border-radius: 16rpx;
345   - background-color: #FFFFFF;
346   - box-sizing: border-box;
347   - padding: 36rpx;
348   - display: flex;
349   - flex-direction: row;
350   - justify-content: flex-start;
351   - .imageWrap{
352   - height: 188rpx;
353   - width: 188rpx;
354   - margin-right: 28rpx;
355   - image{
356   - height: 188rpx;
357   - width: 188rpx;
358   - }
359   - }
360   - .infoRight{
361   - display: flex;
362   - flex-direction: column;
363   - align-items: flex-start;
364   - justify-content: space-between;
365   - .goodName{
  779 +.content {
  780 + min-height: 100vh;
  781 + background-color: #f2f2f2;
  782 + // padding-top: 20rpx;
  783 + .goodInfo {
  784 + width: 100%;
  785 + height: 272rpx;
  786 + border-radius: 16rpx;
  787 + background-color: #ffffff;
  788 + box-sizing: border-box;
  789 + padding: 36rpx;
  790 + display: flex;
  791 + flex-direction: row;
  792 + justify-content: flex-start;
  793 + .imageWrap {
  794 + height: 188rpx;
  795 + width: 188rpx;
  796 + margin-right: 28rpx;
  797 + image {
  798 + height: 188rpx;
  799 + width: 188rpx;
  800 + }
  801 + }
  802 + .infoRight {
  803 + display: flex;
  804 + flex-direction: column;
  805 + align-items: flex-start;
  806 + justify-content: space-between;
  807 + .goodName {
  808 + font-size: 28rpx;
  809 + color: #333333;
  810 + }
  811 + .remarks {
  812 + font-size: 20rpx;
  813 + color: #999999;
  814 + }
  815 + .priceBox {
  816 + display: flex;
  817 + justify-content: space-between;
  818 + align-items: center;
  819 + width: 100%;
  820 + font-size: 14px;
  821 + color: #999999;
  822 + .price {
  823 + color: #ff6b4a;
366 824 font-size: 28rpx;
367   - color: #333333;
368   - }
369   - .remarks{
370   - font-size: 20rpx;
371   - color: #999999;
372   - }
373   - .priceBox{
  825 + }
  826 + .counter {
374 827 display: flex;
  828 + flex-direction: row;
375 829 justify-content: space-between;
376 830 align-items: center;
377   - width: 100%;
378   - font-size: 14px;
379   - color: #999999;
380   - .price{
381   - color: #FF6B4A;
382   - font-size: 28rpx;
383   - }
384   - .counter{
  831 + font-size: 28rpx;
  832 + color: #333333;
  833 + width: 122rpx;
  834 + .btn {
385 835 display: flex;
386   - flex-direction: row;
387   - justify-content: space-between;
388   - align-items: center;
389   - font-size: 28rpx;
390   - color: #333333;
391   - width: 122rpx;
392   - .btn{
393   - display: flex;
394   - justify-content: center;
395   - line-height: 32rpx;
396   - height: 32rpx;
397   - width: 32rpx;
398   - background-color: #F2F2F2;
399   - color: #CFCFCF;
400   - }
  836 + justify-content: center;
  837 + line-height: 32rpx;
  838 + height: 32rpx;
  839 + width: 32rpx;
  840 + background-color: #f2f2f2;
  841 + color: #cfcfcf;
401 842 }
402 843 }
403 844 }
404 845 }
405   - .goods-data{
  846 + }
  847 + .goods-data {
  848 + width: 100%;
  849 + box-sizing: border-box;
  850 + padding: 37rpx 40rpx 0 40rpx;
  851 + background: #ffffff;
  852 + border-radius: 12rpx;
  853 + .opCollapse {
406 854 width: 100%;
407   - box-sizing: border-box;
408   - padding: 37rpx 40rpx 0 40rpx;
409   - background: #FFFFFF;
410   - border-radius: 12rpx;
411   - .opCollapse{
412   - width: 100%;
413   - padding-bottom: 28rpx;
414   - margin-top: 7px;
415   - border-bottom: 1px solid #E9E9E9;
416   - .head{
417   - display: flex;
418   - justify-content: space-between;
419   - height: 24px;
420   - // font-family: PingFangSC-Medium;
421   - font-size: 16px;
422   - color: #333333;
423   - letter-spacing: -0.3px;
424   - text-align: justify;
425   - line-height: 24px;
426   - margin-bottom: 18rpx;
427   - .headRighted{
428   - width: 0;
429   - height: 0;
430   - border-left: 4px solid transparent;
431   - border-right: 4px solid transparent;
432   - border-bottom: 4px solid #CFCFCF;
433   - transform: scaleY(-1);
434   - margin-top: 10px;
435   - }
436   - .headMid{
437   - // font-family: PingFangSC-Regular;
438   - font-size: 10px;
439   - color: #999999;
440   - letter-spacing: -0.19px;
441   - margin-left: -120rpx;
442   - }
443   - .headRight{
444   - width: 0;
445   - height: 0;
446   - border-left: 4px solid transparent;
447   - border-right: 4px solid transparent;
448   - border-bottom: 4px solid #CFCFCF;
449   - margin-top: 10px;
450   - }
  855 + padding-bottom: 28rpx;
  856 + margin-top: 7px;
  857 + border-bottom: 1px solid #e9e9e9;
  858 + .head {
  859 + display: flex;
  860 + justify-content: space-between;
  861 + height: 24px;
  862 + // font-family: PingFangSC-Medium;
  863 + font-size: 16px;
  864 + color: #333333;
  865 + letter-spacing: -0.3px;
  866 + text-align: justify;
  867 + line-height: 24px;
  868 + margin-bottom: 18rpx;
  869 + .headRighted {
  870 + width: 0;
  871 + height: 0;
  872 + border-left: 4px solid transparent;
  873 + border-right: 4px solid transparent;
  874 + border-bottom: 4px solid #cfcfcf;
  875 + transform: scaleY(-1);
  876 + margin-top: 10px;
451 877 }
452   - .body{
  878 + .headMid {
453 879 // font-family: PingFangSC-Regular;
454   - font-size: 12px;
455   - color: #666666;
456   - letter-spacing: 0;
457   - .bodyBox{
458   - margin-top: 15px;
459   - .names{
460   - // font-family: PingFangSC-Regular;
461   - font-size: 12px;
462   - color: #151515;
463   - letter-spacing: 0;
464   - text-align: justify;
465   - line-height: 17px;
466   - margin-left: 5px;
467   - margin-right: 10px;
468   - }
469   - text{
470   - // font-family: PingFangSC-Regular;
471   - font-size: 12px;
472   - color: #666666;
473   - letter-spacing: 0;
474   - text-align: justify;
475   - }
  880 + font-size: 10px;
  881 + color: #999999;
  882 + letter-spacing: -0.19px;
  883 + margin-left: -120rpx;
  884 + }
  885 + .headRight {
  886 + width: 0;
  887 + height: 0;
  888 + border-left: 4px solid transparent;
  889 + border-right: 4px solid transparent;
  890 + border-bottom: 4px solid #cfcfcf;
  891 + margin-top: 10px;
  892 + }
  893 + }
  894 + .body {
  895 + // font-family: PingFangSC-Regular;
  896 + font-size: 12px;
  897 + color: #666666;
  898 + letter-spacing: 0;
  899 + .bodyBox {
  900 + margin-top: 15px;
  901 + .names {
  902 + // font-family: PingFangSC-Regular;
  903 + font-size: 12px;
  904 + color: #151515;
  905 + letter-spacing: 0;
  906 + text-align: justify;
  907 + line-height: 17px;
  908 + margin-left: 5px;
  909 + margin-right: 10px;
  910 + }
  911 + text {
  912 + // font-family: PingFangSC-Regular;
  913 + font-size: 12px;
  914 + color: #666666;
  915 + letter-spacing: 0;
  916 + text-align: justify;
476 917 }
477 918 }
478   - .goods-form {
479   - display: flex;
480   - flex-direction: column;
481   - align-items: center;
482   - justify-content: center;
483   - background-color: #fff;
484   - width: 100%;
485   - .p1 {
486   - font-size: 16px;
487   - color: #333333;
488   - letter-spacing: -0.3px;
489   - text-align: justify;
490   - line-height: 24px;
491   - margin: 4px 0;
  919 + }
  920 +
  921 + // .goods-form {
  922 + // display: flex;
  923 + // flex-direction: column;
  924 + // align-items: center;
  925 + // justify-content: center;
  926 + // background-color: #fff;
  927 + // width: 100%;
  928 + // .p1 {
  929 + // font-size: 16px;
  930 + // color: #333333;
  931 + // letter-spacing: -0.3px;
  932 + // text-align: justify;
  933 + // line-height: 24px;
  934 + // margin: 4px 0;
  935 + // }
  936 + // .p2 {
  937 + // font-size: 12px;
  938 + // color: #999999;
  939 + // letter-spacing: -0.23px;
  940 + // margin-bottom: 18rpx;
  941 + // }
  942 + // image {
  943 + // width: 28rpx;
  944 + // height: 26rpx;
  945 + // }
  946 + // .confirm {
  947 + // display: flex;
  948 + // align-items: center;
  949 + // font-size: 12px;
  950 + // color: #666666;
  951 + // letter-spacing: -0.23px;
  952 + // width: 684rpx;
  953 + // image {
  954 + // margin-right: 25rpx;
  955 + // }
  956 + // }
  957 + // .picker {
  958 + // display: flex;
  959 + // flex-direction: column;
  960 + // justify-content: center;
  961 + // align-items: center;
  962 + // width: 100%;
  963 + // image {
  964 + // width: 10px;
  965 + // height: 10px;
  966 + // margin-right: 5px;
  967 + // }
  968 + // .picker-choice {
  969 + // display: flex;
  970 + // width: 684rpx;
  971 + // align-items: center;
  972 + // margin-bottom: 40rpx;
  973 + // .choice-left {
  974 + // width: 210rpx;
  975 + // .p11 {
  976 + // font-size: 14px;
  977 + // color: #333333;
  978 + // letter-spacing: -0.26px;
  979 + // text-align: justify;
  980 + // line-height: 24px;
  981 + // }
  982 + // .p12 {
  983 + // font-size: 10px;
  984 + // color: #3f3f3f;
  985 + // letter-spacing: -0.19px;
  986 + // text-align: justify;
  987 + // line-height: 24px;
  988 + // }
  989 + // }
  990 + // .p13 {
  991 + // font-size: 10px;
  992 + // color: #999999;
  993 + // letter-spacing: -0.19px;
  994 + // margin-right: 10px;
  995 + // }
  996 + // .p13-date {
  997 + // font-size: 10px;
  998 + // color: #999999;
  999 + // letter-spacing: -0.19px;
  1000 + // margin-right: 5px;
  1001 + // }
  1002 + // .p14 {
  1003 + // font-size: 14px;
  1004 + // color: #666666;
  1005 + // letter-spacing: -0.26px;
  1006 + // text-align: center;
  1007 + // width: 124rpx;
  1008 + // border-bottom: 1px solid #cfcfcf;
  1009 + // }
  1010 + // }
  1011 + // }
  1012 + // }
  1013 + .goods-form {
  1014 + display: flex;
  1015 + flex-direction: column;
  1016 + align-items: center;
  1017 + justify-content: center;
  1018 + background-color: #fff;
  1019 + width: 100%;
  1020 + padding: 40rpx 0;
  1021 + .p1 {
  1022 + font-size: 16px;
  1023 + color: #333333;
  1024 + letter-spacing: -0.3px;
  1025 + text-align: justify;
  1026 + line-height: 24px;
  1027 + margin: 4px 0;
  1028 +
492 1029 }
493 1030 .p2 {
494   - font-size: 12px;
495   - color: #999999;
496   - letter-spacing: -0.23px;
497   - margin-bottom: 18rpx;
  1031 + font-size: 12px;
  1032 + color: #999999;
  1033 + letter-spacing: -0.23px;
  1034 + margin-bottom: 32rpx;
498 1035 }
499   - image{
500   - width: 28rpx;
501   - height: 26rpx;
  1036 + .image2{
  1037 + width: 42rpx;
  1038 + height: 34rpx;
  1039 + margin-right: 12rpx;
502 1040 }
503 1041 .confirm {
504   - display: flex;
505   - align-items: center;
506   - font-size: 12px;
507   - color: #666666;
508   - letter-spacing: -0.23px;
509   - width: 684rpx;
510   - image{
511   - margin-right:25rpx;
512   - }
513   - }
514   - .picker{
515   - display: flex;
516   - flex-direction: column;
517   - justify-content: center;
518   - align-items: center;
519   - width: 100%;
520   - image{
521   - width: 10px;
522   - height: 10px;
523   - margin-right: 5px;
524   - }
525   - .picker-choice{
526 1042 display: flex;
527   - width: 684rpx;
528 1043 align-items: center;
529   - margin-bottom: 40rpx;
530   - .choice-left{
531   - width: 210rpx;
532   - .p11 {
533   - font-size: 14px;
534   - color: #333333;
535   - letter-spacing: -0.26px;
536   - text-align: justify;
537   - line-height: 24px;
538   - }
539   - .p12 {
540   - font-size: 10px;
541   - color: #3F3F3F;
542   - letter-spacing: -0.19px;
543   - text-align: justify;
544   - line-height: 24px;
545   - }
546   - }
547   - .p13 {
548   - font-size: 10px;
549   - color: #999999;
550   - letter-spacing: -0.19px;
551   - margin-right: 10px;
  1044 + font-size: 12px;
  1045 + color: #666666;
  1046 + letter-spacing: -0.23px;
  1047 + width: 684rpx;
  1048 + .image1{
  1049 + margin-right:25rpx;
  1050 + width: 42rpx;
  1051 + height: 38rpx;
552 1052 }
  1053 + }
  1054 + .picker{
  1055 + display: flex;
  1056 + flex-direction: column;
  1057 + justify-content: center;
  1058 + align-items: center;
  1059 + width: 100%;
  1060 +
  1061 + .picker-choice{
  1062 + display: flex;
  1063 + width: 684rpx;
  1064 + align-items: center;
  1065 + margin-bottom: 40rpx;
  1066 + .input{
  1067 + border-bottom: 1px solid #CFCFCF;
  1068 + height: 40rpx;
  1069 + }
  1070 + .choice-left{
  1071 + width: 210rpx;
  1072 + .pd{
  1073 + font-size: 14px;
  1074 + color: #333333;
  1075 + letter-spacing: -0.26px;
  1076 + text-align: justify;
  1077 + line-height: 24px;
  1078 + margin-right: 44rpx;
  1079 + }
  1080 + .p11 {
  1081 + font-size: 14px;
  1082 + color: #333333;
  1083 + letter-spacing: -0.26px;
  1084 + text-align: justify;
  1085 + line-height: 24px;
  1086 + // margin-right: 10px;
  1087 + }
  1088 + .p12 {
  1089 + font-size: 10px;
  1090 + color: #3F3F3F;
  1091 + letter-spacing: -0.19px;
  1092 + text-align: justify;
  1093 + line-height: 24px;
  1094 + }
  1095 +
  1096 + }
  1097 + .p13 {
  1098 + font-size: 10px;
  1099 + color: #999999;
  1100 + letter-spacing: -0.19px;
  1101 + margin-right: 10px;
  1102 + }
553 1103 .p13-date {
554   - font-size: 10px;
555   - color: #999999;
556   - letter-spacing: -0.19px;
557   - margin-right: 5px;
558   - }
559   - .p14 {
560   - font-size: 14px;
561   - color: #666666;
562   - letter-spacing: -0.26px;
563   - text-align: center;
564   - width: 124rpx;
565   - border-bottom: 1px solid #CFCFCF;
  1104 + font-size: 10px;
  1105 + color: #999999;
  1106 + letter-spacing: -0.19px;
  1107 + margin-right: 5px;
566 1108 }
  1109 + picker{
  1110 + width: 144rpx;
  1111 + height: 40rpx;
  1112 + display: flex;
  1113 + position: relative;
  1114 + .p14 {
  1115 + font-size: 14px;
  1116 + color: #666666;
  1117 + letter-spacing: -0.26px;
  1118 + text-align: center;
  1119 + width: 124rpx;
  1120 + border-bottom: 1px solid #CFCFCF;
  1121 + height: 38rpx;
  1122 + }
  1123 + image{
  1124 + width: 20rpx;
  1125 + height: 20rpx;
  1126 + position: absolute;
  1127 + right: 20rpx;
  1128 + top: 8rpx;
567 1129 }
568 1130 }
569   - }
570   - }
571   - }
572   - .choose{
573   - width: 100%;
574   - background: #FFFFFF;
575   - border-radius: 12rpx;
576   - margin-top: 20rpx;
577   - padding: 40rpx 40rpx 112rpx 40rpx;
578   - box-sizing: border-box;
579   - .chooseItem{
580   - width: 100%;
581   - padding-bottom: 32rpx;
582   - border-bottom: 1px solid #E9E9E9;
583   - margin-bottom: 28rpx;
584   - }
585   - .chooseRes{
586   - font-size: 12px;
587   - color: #666666;
588   - }
589   - .itemsWrap{
590   - display: flex;
591   - flex-direction: row;
592   - flex-wrap: wrap;
593   - justify-content: flex-start;
594   - align-items: center;
595   - padding-top: 24rpx;
596   - .item1{
597   - width: 64rpx;
598   - height: 64rpx;
599   - border-radius: 32rpx;
600   - margin: 0 36rpx 24rpx 0;
601   - transition: all 0.3s;
602   - border: 1px solid #FFFFFF;
603   - }
604   - .item2{
605   - width: 100rpx;
606   - height: 60rpx;
607   - margin: 0 20rpx 20rpx 0;
608   - transition: all 0.3s;
609   - background: #F2F2F2;
610   - border-radius: 2px;
611   - border-radius: 2px;
612   - line-height: 60rpx;
613   - text-align: center;
614   - color: #666666;
615   - font-size: 12px;
616   - }
617   - .active1{
618   - opacity: 0.7;
619   - border: 1px solid #FF6B4A;
620   - }
621   - .active2{
622   - background: rgba(255,107,74,0.15);
623   - color: #FF6B4A;
624   - }
625   - }
626   - }
627   - .button{
628   - width: 100%;
629   - height: 112rpx;
630   - background-color: #FF6B4A;
631   - font-size: 16px;
632   - color: #FFFFFF;
633   - line-height: 112rpx;
634   - text-align: center;
635   - position: fixed;
636   - bottom: 0;
637   - left: 0;
638   - }
639   - }
640   -
  1131 +
  1132 + }
  1133 + }
  1134 + }
  1135 + }
  1136 + }
  1137 + .choose {
  1138 + width: 100%;
  1139 + background: #ffffff;
  1140 + border-radius: 12rpx;
  1141 + margin-top: 20rpx;
  1142 + padding: 40rpx 40rpx 112rpx 40rpx;
  1143 + box-sizing: border-box;
  1144 + .chooseItem {
  1145 + width: 100%;
  1146 + padding-bottom: 32rpx;
  1147 + border-bottom: 1px solid #e9e9e9;
  1148 + margin-bottom: 28rpx;
  1149 + }
  1150 + .chooseRes {
  1151 + font-size: 12px;
  1152 + color: #666666;
  1153 + }
  1154 + .itemsWrap {
  1155 + display: flex;
  1156 + flex-direction: row;
  1157 + flex-wrap: wrap;
  1158 + justify-content: flex-start;
  1159 + align-items: center;
  1160 + padding-top: 24rpx;
  1161 + .item1 {
  1162 + width: 64rpx;
  1163 + height: 64rpx;
  1164 + border-radius: 32rpx;
  1165 + margin: 0 36rpx 24rpx 0;
  1166 + transition: all 0.3s;
  1167 + border: 1px solid #ffffff;
  1168 + }
  1169 + .item2 {
  1170 + // width: 100rpx;
  1171 + padding: 0 30rpx;
  1172 + height: 60rpx;
  1173 + margin: 0 20rpx 20rpx 0;
  1174 + transition: all 0.3s;
  1175 + background: #f2f2f2;
  1176 + border-radius: 2px;
  1177 + border-radius: 2px;
  1178 + line-height: 60rpx;
  1179 + text-align: center;
  1180 + color: #666666;
  1181 + font-size: 12px;
  1182 + }
  1183 + .active1 {
  1184 + opacity: 0.7;
  1185 + border: 1px solid #ff6b4a;
  1186 + }
  1187 + .active2 {
  1188 + background: rgba(255, 107, 74, 0.15);
  1189 + color: #ff6b4a;
  1190 + }
  1191 + }
  1192 + }
  1193 + .button {
  1194 + width: 100%;
  1195 + height: 112rpx;
  1196 + background-color: #ff6b4a;
  1197 + font-size: 16px;
  1198 + color: #ffffff;
  1199 + line-height: 112rpx;
  1200 + text-align: center;
  1201 + position: fixed;
  1202 + bottom: 0;
  1203 + left: 0;
  1204 + }
  1205 +}
641 1206 </style>
... ...
src/pages/user/user.vue
Diff comments   View file @3fb9af8
1 1 <template>
2   - <view class="wrap">
3   - <view v-if="isAuth" class="content">
4   - <view class="userInfo">
5   - <view class="info">
6   - <image :src="headerphoto" mode="aspectFill"></image>
7   - <view class="infoText">
8   - <text class="userName">{{nickName}}</text>
9   - </view>
10   - </view>
11   - <!-- <view class="service">
12   - <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
13   - </view> -->
14   - </view>
15   - <view class="myOpticsData" @click="toOpticsData">
16   - <view class="left">
17   - <image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>
18   - <text>验光数据</text>
19   - </view>
20   - <image src="../../static/right.png" mode="aspectFit"></image>
21   - </view>
22   - <view class="myOrder">
23   - <view class="orderHeader">
24   - <text>全部订单</text>
25   - <view class="btn" @click="toMyOrder('10')">
26   - 全部
27   - <image src="../../static/right.png" mode="aspectFit"></image>
28   - </view>
29   - </view>
30   - <view class="orderBody">
31   - <view class="item waitPay" @click="toMyOrder('0')">
32   - <image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image>
33   - <text>待付款</text>
34   - </view>
35   - <view class="item waitDeliver" @click="toMyOrder('1')" >
36   - <image src="../../static/img/user/waitPay.png" mode="aspectFit"></image>
37   - <text>待收货</text>
38   - </view>
39   - <view class="item waitReceive" @click="toMyOrder('2')">
40   - <image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image>
41   - <text>已完成</text>
42   - </view>
43   - <!-- <view class="item service" @click="toMyOrder('3')">
44   - <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
45   - <text>已评价</text>
46   - </view> -->
47   - </view>
48   - </view>
49   - <view class="someItem">
50   - <!-- <view class="item">
51   - <view class="left">
52   - <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
53   - <text>推广记录与收益</text>
54   - </view>
55   - <image src="../../static/right.png" mode="aspectFit"></image>
56   - </view> -->
57   - <view class="item">
58   - <view class="left">
59   - <image src="../../static/img/user/introduce.png" mode="aspectFit"></image>
60   - <text>系统介绍</text>
61   - </view>
62   - <image src="../../static/right.png" mode="aspectFit"></image>
63   - </view>
64   - <view class="item">
65   - <view class="left">
66   - <image src="../../static/img/user/joinUs.png" mode="aspectFit"></image>
67   - <text>加入我们</text>
68   - </view>
69   - <image src="../../static/right.png" mode="aspectFit"></image>
70   - </view>
71   - <view class="item">
72   - <view class="left">
73   - <image src="../../static/img/user/service.png" mode="aspectFit"></image>
74   - <text>联系客服</text>
75   - </view>
76   - <image src="../../static/right.png" mode="aspectFit"></image>
77   - </view>
78   - </view>
79   - <view class="recommend">
80   - <view class="title">
81   - <view class="line"></view>
82   - <view class="text">精选推荐</view>
83   - <view class="line"></view>
84   - </view>
85   - <!-- 商品列表 -->
86   - <view class="goods-list">
87   - <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list">
88   - <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id">
89   - <view class="product" v-for="(item) in goods.list" :key="item.sk_id">
90   - <Card :goods="item" ></Card>
91   - </view>
92   - </block>
93   - </scroll-view>
94   - <view class="loading-text">{{loadingText}}</view>
95   - </view>
96   - </view>
97   - </view>
98   - <view v-else class="auth">
99   - <view class="icon"></view>
100   - <view class="divider"></view>
101   - <view class="title">申请获取以下权限</view>
102   - <view class="text">获得您的公开信息(昵称、头像等)</view>
103   - <button
104   - type="primary"
105   - open-type="getUserInfo"
106   - @getuserinfo="onGotUserInfo"
107   - >授权登陆</button>
108   - </view>
109   - </view>
  2 + <view class="wrap">
  3 + <!-- 弹窗 -->
  4 + <uni-popup
  5 + ref="popup"
  6 + type="center"
  7 + >
  8 + <!-- 给一个左边弹窗的样式 -->
  9 + <!-- 关闭弹窗按钮 -->
  10 + <view
  11 + class="closeBtn"
  12 + @tap="this.$refs.popup.close()"
  13 + >x</view>
  14 + <view
  15 + class="popUpWrap"
  16 + v-if="whichTap==0"
  17 + >
  18 + <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text>
  19 +
  20 + <!-- 左 -->
  21 + <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> -->
  22 + <!-- 右 -->
  23 + <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> -->
  24 + </view>
  25 + <view
  26 + class="popUpWrap"
  27 + v-if="whichTap==1"
  28 + >
  29 + <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text>
  30 + </view>
  31 + <view
  32 + class="popUpWrap"
  33 + v-if="whichTap==2"
  34 + >
  35 + <button @tap="chatOur(1)">客服1</button>
  36 + <button @tap="chatOur(2)">客服2</button>
  37 + </view>
  38 + </uni-popup>
  39 + <view
  40 + v-if="isAuth"
  41 + class="content"
  42 + >
  43 + <view class="userInfo">
  44 + <view class="info">
  45 + <image
  46 + :src="headerphoto"
  47 + mode="aspectFill"
  48 + ></image>
  49 + <view class="infoText">
  50 + <text class="userName">{{nickName}}</text>
  51 + </view>
  52 + </view>
  53 + <!-- <view class="service">
  54 + <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
  55 + </view> -->
  56 + </view>
  57 + <view
  58 + class="myOpticsData"
  59 + @tap="toOpticsData"
  60 + >
  61 + <view class="left">
  62 + <image
  63 + src="../../static/img/user/dataWrite.png"
  64 + mode="aspectFit"
  65 + ></image>
  66 + <text>验光数据</text>
  67 + </view>
  68 + <image
  69 + src="../../static/right.png"
  70 + mode="aspectFit"
  71 + ></image>
  72 + </view>
  73 + <view class="myOrder">
  74 + <view class="orderHeader">
  75 + <text>全部订单</text>
  76 + <view
  77 + class="btn"
  78 + @click="toMyOrder('10')"
  79 + >
  80 + 全部
  81 + <image
  82 + src="../../static/right.png"
  83 + mode="aspectFit"
  84 + ></image>
  85 + </view>
  86 + </view>
  87 + <view class="orderBody">
  88 + <view
  89 + class="item waitPay"
  90 + @click="toMyOrder('0')"
  91 + >
  92 + <image
  93 + src="../../static/img/user/waitDeliver.png"
  94 + mode="aspectFit"
  95 + ></image>
  96 + <text>待付款</text>
  97 + </view>
  98 + <view
  99 + class="item waitDeliver"
  100 + @click="toMyOrder('1')"
  101 + >
  102 + <image
  103 + src="../../static/img/user/waitPay.png"
  104 + mode="aspectFit"
  105 + ></image>
  106 + <text>待收货</text>
  107 + </view>
  108 + <view
  109 + class="item waitReceive"
  110 + @click="toMyOrder('2')"
  111 + >
  112 + <image
  113 + src="../../static/img/user/waitReceive.png"
  114 + mode="aspectFit"
  115 + ></image>
  116 + <text>已完成</text>
  117 + </view>
  118 + <!-- <view class="item service" @click="toMyOrder('3')">
  119 + <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
  120 + <text>已评价</text>
  121 + </view> -->
  122 + </view>
  123 + </view>
  124 + <view class="someItem">
  125 + <!-- <view class="item">
  126 + <view class="left">
  127 + <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
  128 + <text>推广记录与收益</text>
  129 + </view>
  130 + <image src="../../static/right.png" mode="aspectFit"></image>
  131 + </view> -->
  132 + <view class="item">
  133 + <view class="left">
  134 + <image
  135 + src="../../static/address-icon.png"
  136 + mode="aspectFit"
  137 + ></image>
  138 + <text @tap="toAddress">地址管理</text>
  139 + </view>
  140 + <image
  141 + src="../../static/right.png"
  142 + mode="aspectFit"
  143 + ></image>
  144 + </view>
  145 + <view class="item">
  146 + <view class="left">
  147 + <image
  148 + src="../../static/img/user/introduce.png"
  149 + mode="aspectFit"
  150 + ></image>
  151 + <text @tap="introduce">系统介绍</text>
  152 + </view>
  153 + <image
  154 + src="../../static/right.png"
  155 + mode="aspectFit"
  156 + ></image>
  157 + </view>
  158 + <view class="item">
  159 + <view class="left">
  160 + <image
  161 + src="../../static/img/user/joinUs.png"
  162 + mode="aspectFit"
  163 + ></image>
  164 + <text @tap="joinUs">加入我们</text>
  165 + </view>
  166 + <image
  167 + src="../../static/right.png"
  168 + mode="aspectFit"
  169 + ></image>
  170 + </view>
  171 + <view class="item">
  172 + <view class="left">
  173 + <image
  174 + src="../../static/img/user/service.png"
  175 + mode="aspectFit"
  176 + ></image>
  177 + <text>联系客服</text>
  178 + </view>
  179 + <image
  180 + src="../../static/right.png"
  181 + mode="aspectFit"
  182 + ></image>
  183 + </view>
  184 + </view>
  185 + <view class="recommend">
  186 + <view class="title">
  187 + <view class="line"></view>
  188 + <view class="text">精选推荐</view>
  189 + <view class="line"></view>
  190 + </view>
  191 + <!-- 商品列表 -->
  192 + <view class="goods-list">
  193 + <scroll-view
  194 + enable-flex
  195 + @scrolltolower="handleScrolltolower"
  196 + scroll-y
  197 + class="product-list"
  198 + >
  199 + <view
  200 + class="product"
  201 + v-for="(item, index) in userRecommandList"
  202 + :key="index"
  203 + >
  204 + <Card :goods="item"></Card>
  205 + </view>
  206 + </scroll-view>
  207 + <view class="loading-text">{{loadingText}}</view>
  208 + </view>
  209 + </view>
  210 + </view>
  211 + <view
  212 + v-else
  213 + class="auth"
  214 + >
  215 + <view class="icon"></view>
  216 + <view class="divider"></view>
  217 + <view class="title">申请获取以下权限</view>
  218 + <view class="text">获得您的公开信息(昵称、头像等)</view>
  219 + <button
  220 + type="primary"
  221 + open-type="getUserInfo"
  222 + @getuserinfo="onGotUserInfo"
  223 + >授权登陆</button>
  224 + </view>
  225 + </view>
110 226 </template>
111 227  
112 228 <script>
113   - import Card from "@/components/CommodityCard/CommodityCard.vue";
114   - import store from '@/store';
115   -
116   - export default {
117   - components: {
118   - 'Card':Card
119   - },
120   - data() {
121   - return {
122   - isAuth: true, // 是否显示授权页面,
123   - pagesnum:1 // 分页请求初始值
124   - }
125   - },
126   - onLoad() {
127   - // 判断是否授权
128   - uni.getSetting({
129   - success(res) {
130   - console.log('authSetting',res.authSetting)
131   - if(res.authSetting['scope.userInfo'] === true) {
132   - this.isAuth = true
133   - } else {
134   - this.isAuth = false
135   - }
136   - }
137   - })
138   -
139   - },
140   - computed: {
141   - nickName() {
142   - console.log('nickName', this.$store.state.user.userInfo)
143   - return this.$store.state.user.userInfo.nickName;
144   - },
145   - headerphoto() {
146   - return this.$store.state.user.userInfo.headerphoto;
147   - },
148   - userRecommandList() {
149   - console.log('recommandList', this.$store.state.userRecommand.recommandList);
150   - return this.$store.state.userRecommand.recommandList;
151   - }
152   - },
153   - onLoad:function(){
154   - console.log('usr-my',this.$store.state.user.userInfo)
155   -
156   - store.dispatch('userRecommand/getRecommandList', {
157   - // uid:468,
158   - uid: this.$store.state.user.userInfo.uid,
159   - // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4",
160   - openid:this.$store.state.user.userInfo.openid,
161   - page: this.pagesnum
162   - });
163   - },
  229 +import Card from '@/components/CommodityCard/CommodityCard.vue'
  230 +import store from '@/store'
  231 +import UniPopup from '@/components/UniPopup/uni-popup.vue'
164 232  
165   - methods: {
166   - // 授权
167   - onGotUserInfo(e) {
168   - console.log('anthInfo', e);
169   - if(e.detail.errMsg == 'getUserInfo:ok') {
170   - const { fromInfo } = this.$store.state.user;
171   - console.log('=====la', fromInfo)
172   - // 用户授权成功
173   - store.dispatch('user/getUserInfo', fromInfo);
174   - this.isAuth = true
175   - }
176   - },
177   - toMyOrder(status){
178   - uni.navigateTo({
179   - url: `../myOrder/myOrder?status=`+status,
180   - success: res => {},
181   - fail: () => {},
182   - complete: () => {}
183   - });
184   - },
185   - toOpticsData(){
186   - uni.navigateTo({
187   - url: `../addOpticsData/addOpticsData`,
188   - });
189   - },
190   - handleScrolltolower(){
191   - // console.log('usr-my',this.$store.state.user.userInfo)
192   - this.pagesnum++;
193   - store.dispatch('userRecommand/getRecommandList', {
194   - uid: this.$store.state.user.userInfo.uid,
195   - openid:this.$store.state.user.userInfo.openid,
196   - page: this.pagesnum
197   - });
198   - }
199   - }
200   - }
  233 +export default {
  234 + components: {
  235 + Card,
  236 + UniPopup
  237 + },
  238 + data() {
  239 + return {
  240 + isAuth: true, // 是否显示授权页面,
  241 + pagesnum: 1, // 分页请求初始值
  242 + whichTap: 0 // 弹窗渲染选择条件
  243 + }
  244 + },
  245 + onLoad() {
  246 + // 判断是否授权
  247 + uni.getSetting({
  248 + success(res) {
  249 + console.log('authSetting', res.authSetting)
  250 + if (res.authSetting['scope.userInfo'] === true) {
  251 + this.isAuth = true
  252 + } else {
  253 + this.isAuth = false
  254 + }
  255 + }
  256 + })
  257 + store.dispatch('userRecommand/getRecommandList', {
  258 + uid: this.$store.state.user.userInfo.uid,
  259 + openid: this.$store.state.user.userInfo.openid,
  260 + page: this.pagesnum
  261 + })
  262 + },
  263 + computed: {
  264 + nickName() {
  265 + return this.$store.state.user.userInfo.nickName
  266 + },
  267 + headerphoto() {
  268 + return this.$store.state.user.userInfo.headerphoto
  269 + },
  270 + userRecommandList() {
  271 + console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList)
  272 + return this.$store.state.userRecommand.recommandList
  273 + }
  274 + },
  275 + methods: {
  276 + // 弹窗
  277 + changeTap(item) {
  278 + this.whichTap = item
  279 + this.$refs.popup.open()
  280 + },
  281 + chatOur(item) {
  282 + if (item === 1) {
  283 + uni.makePhoneCall({
  284 + phoneNumber: 13376189297 // 客服1 电话
  285 + })
  286 + } else {
  287 + uni.makePhoneCall({
  288 + phoneNumber: 18014995101 // 客服2 电话
  289 + })
  290 + }
  291 + },
  292 + // 授权
  293 + onGotUserInfo(e) {
  294 + if (e.detail.errMsg === 'getUserInfo:ok') {
  295 + const { fromInfo } = this.$store.state.user
  296 + // 用户授权成功
  297 + store.dispatch('user/getUserInfo', fromInfo)
  298 + this.isAuth = true
  299 + }
  300 + },
  301 + toAddress() {
  302 + uni.navigateTo({
  303 + url: '../address/addressList',
  304 + success: res => {},
  305 + fail: () => {},
  306 + complete: () => {}
  307 + })
  308 + },
  309 + introduce() {
  310 + uni.showModal({
  311 + content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
  312 + showCancel: false
  313 + })
  314 + },
  315 + joinUs() {
  316 + uni.showModal({
  317 + content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
  318 + showCancel: false
  319 + })
  320 + },
  321 + toMyOrder(status) {
  322 + uni.navigateTo({
  323 + url: `../myOrder/myOrder?status=${status}`,
  324 + success: res => {},
  325 + fail: () => {},
  326 + complete: () => {}
  327 + })
  328 + },
  329 + toOpticsData() {
  330 + uni.navigateTo({
  331 + url: '../addOpticsData/addOpticsData'
  332 + })
  333 + },
  334 + handleScrolltolower() {
  335 + // console.log('usr-my',this.$store.state.user.userInfo)
  336 + this.pagesnum++
  337 + store.dispatch('userRecommand/getRecommandList', {
  338 + uid: this.$store.state.user.userInfo.uid,
  339 + openid: this.$store.state.user.userInfo.openid,
  340 + page: this.pagesnum
  341 + })
  342 + }
  343 + }
  344 +}
201 345 </script>
202 346  
203 347 <style lang="scss">
204   - .warp{
205   - font-size: 24rpx;
206   - background-color: #f2f2f2;
207   - height: 100vh;
208   - }
209   - .content {
210   - display: flex;
211   - flex-direction: column;
212   - align-items: center;
213   - justify-content: center;
214   - background-color: #F2F2F2;
215   - }
216   - .userInfo{
217   - background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
218   - width: 100%;
219   - height: 240rpx;
220   - color: #FFFFFF;
221   - padding: 60rpx 82rpx 80rpx 44rpx;
222   - box-sizing: border-box;
223   - display: flex;
224   - flex-direction: row;
225   - justify-content: space-between;
226   - align-items: flex-start;
227   - .info{
228   - display: flex;
229   - flex-direction: row;
230   - justify-content: space-between;
231   - align-items: center;
232   - image{
233   - border-radius: 50rpx;
234   - height: 100rpx ;
235   - width: 100rpx;
236   - margin-right: 40rpx;
237   - }
238   - .infoText{
239   - display: flex;
240   - flex-direction: column;
241   - justify-content: space-between;
242   - align-items: flex-scetart;
243   - .userName{
244   - font-size: 18px;
245   - color: #FFFFFF;
246   - margin-bottom: 8rpx;
247   - }
248   - .nickName{
249   - font-size: 12px;
250   - color: #FFFFFF;
251   - }
252   - }
253   - }
254   - // .service{
255   - // margin-top: 20rpx;
256   - // image{
257   - // height: 36rpx;
258   - // width: 36rpx;
259   - // }
260   - // }
261   - }
262   - .myOpticsData{
263   - width: 670rpx;
264   - height: 120rpx;
265   - background-color: #FFFFFF;
266   - border-radius: 6px;
267   - box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10);
268   - position: relative;
269   - bottom: 44rpx;
270   - padding: 40rpx;
271   - box-sizing: border-box;
272   - display: flex;
273   - justify-content: space-between;
274   - align-items: center;
275   - .left{
276   - font-size: 14px;
277   - color: #333333;
278   - display: flex;
279   - align-items: center;
280   - image{
281   - margin-right: 32rpx;
282   - width: 30rpx;
283   - height: 34rpx;
284   - }
285   - }
286   - image{
287   - height: 16px;
288   - width: 8px;
289   - }
290   - }
291   - .myOrder{
292   - width: 100%;
293   - height: 296rpx;
294   - // margin-top: 116rpx;
295   - margin-bottom: 20rpx;
296   - padding: 0 40rpx;
297   - box-sizing: border-box;
298   - background: #FFFFFF;
299   - box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
300   - border-radius: 6px;
301   - border-radius: 6px;
302   - display: flex;
303   - flex-direction: column;
304   - justify-content: space-around;
305   - align-items: center;
306   - .orderHeader{
307   - width: 100%;
308   - height: 100rpx;
309   - display: flex;
310   - flex-direction: row;
311   - justify-content: space-between;
312   - align-items: center;
313   - border-bottom: 1px solid #E9E9E9;;
314   - font-weight: bold;
315   - font-size: 18px;
316   - color: #333333;
317   - .btn{
318   - font-size: 12px;
319   - color: #999999;
320   - display: flex;
321   - align-items: center;
322   - image{
323   - margin-left: 20rpx;
324   - height: 32rpx;
325   - width: 16rpx;
326   - }
327   - }
328   - }
329   - .orderBody{
330   - width: 100%;
331   - display: flex;
332   - flex-direction: row;
333   - justify-content: space-around;
334   - align-items: center;
335   - .item{
336   - display: flex;
337   - flex-direction: column;
338   - align-items: center;
339   - image{
340   - width: 62rpx;
341   - height: 46rpx;
342   - }
343   - text{
344   - margin-top: 24rpx;
345   - font-size: 12px;
346   - color: #333333;
347   - }
348   - }
349   - }
350   - }
351   - .someItem{
352   - width: 100%;
353   - height: 336rpx;
354   - background: #FFFFFF;
355   - box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
356   - border-radius: 6px;
357   - border-radius: 6px;
358   - margin-bottom: 18rpx;
359   - box-sizing: border-box;
360   - padding: 21rpx 48rpx 21rpx 42rpx;
361   - box-sizing: border-box;
362   - display: flex;
363   - flex-direction: column;
364   - justify-content: space-between;
365   - align-items: center;
366   - .item{
367   - display: flex;
368   - justify-content: space-between;
369   - border-bottom: 1px solid #F2F2F2;;
370   - align-items: center;
371   - height: 72rpx;
372   - width: 100%;
373   - .left{
374   - font-size: 14px;
375   - color: #333333;
376   - display: flex;
377   - align-items: center;
378   - image{
379   - margin-right: 32rpx;
380   - width: 30rpx;
381   - height: 34rpx;
382   - }
383   - }
384   - image{
385   - height: 16px;
386   - width: 8px;
387   - }
388   - }
389   -
390   - }
391   - .recommend{
392   - background: #FFFFFF;
393   - box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
394   - border-radius: 6px;
395   - border-radius: 6px;
396   - width: 100%;
397   - .title{
398   - display: flex;
399   - flex-direction: row;
400   - align-items: center;
401   - justify-content: space-between;
402   - padding: 20rpx 40rpx;
403   - .line{
404   - width: 264rpx;
405   - height: 1rpx;
406   - border-bottom: 1px solid #EAEAEA;
407   - }
408   - .text{
409   - font-family: PingFangSC-Medium;
410   - font-size: 14px;
411   - color: #333333;
412   - letter-spacing: -0.26px;
413   - text-align: justify;
414   - line-height: 24px;
415   - }
416   - }
417   - .goods-list{
418   - .loading-text{
419   - width: 100%;
420   - display: flex;
421   - justify-content: center;
422   - align-items: center;
423   - height: 30px;
424   - color: #979797;
425   - font-size: 12px;
426   - }
427   - .product-list{
428   - width: 92%;
429   - padding: 0 4% 3vw 4%;
430   - display: flex;
431   - height: 200px;
432   - justify-content: space-between;
433   - flex-wrap: wrap;
434   - .product{
435   - width: 48%;
436   - margin: 0 0 20rpx 0;
437   - background: #FFFFFF;
438   - border: 1px solid #F2F2F2;
439   - }
440   - }
441   - }
442   - }
443   - .auth {
444   - height: 100vh;
445   - display: flex;
446   - flex-direction: column;
447   - align-items: center;
448   - .icon {
449   - width: 140rpx;
450   - height: 140rpx;
451   - border-radius: 50%;
452   - margin-top: 100rpx;
453   - background-color: grey;
454   - }
455   - .divider {
456   - height: 1rpx;
457   - width: 600rpx;
458   - margin-top: 80rpx;
459   - background-color: #E6E3E3;
460   - }
461   - .title {
462   - width: 600rpx;
463   - margin-top: 50rpx;
464   - text-align: left;
465   - }
466   - .text {
467   - width: 600rpx;
468   - margin-top: 30rpx;
469   - text-align: left;
470   - color: #E6E3E3;
471   - }
472   - button {
473   - width: 450rpx;
474   - height: 80rpx;
475   - line-height: 80rpx;
476   - margin-top: 80rpx;
477   - border-radius: 30rpx;
478   - }
479   - }
480   -
  348 +.warp {
  349 + font-size: 24rpx;
  350 + background-color: #f2f2f2;
  351 + height: 100vh;
  352 +}
  353 +.content {
  354 + display: flex;
  355 + flex-direction: column;
  356 + align-items: center;
  357 + justify-content: center;
  358 + background-color: #f2f2f2;
  359 +}
  360 +.userInfo {
  361 + background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%);
  362 + width: 100%;
  363 + height: 240rpx;
  364 + color: #ffffff;
  365 + padding: 60rpx 82rpx 80rpx 44rpx;
  366 + box-sizing: border-box;
  367 + display: flex;
  368 + flex-direction: row;
  369 + justify-content: space-between;
  370 + align-items: flex-start;
  371 + .info {
  372 + display: flex;
  373 + flex-direction: row;
  374 + justify-content: space-between;
  375 + align-items: center;
  376 + image {
  377 + border-radius: 50rpx;
  378 + height: 100rpx;
  379 + width: 100rpx;
  380 + margin-right: 40rpx;
  381 + }
  382 + .infoText {
  383 + display: flex;
  384 + flex-direction: column;
  385 + justify-content: space-between;
  386 + align-items: flex-scetart;
  387 + .userName {
  388 + font-size: 18px;
  389 + color: #ffffff;
  390 + margin-bottom: 8rpx;
  391 + }
  392 + .nickName {
  393 + font-size: 12px;
  394 + color: #ffffff;
  395 + }
  396 + }
  397 + }
  398 + // .service {
  399 + // margin-top: 20rpx;
  400 + // image {
  401 + // height: 36rpx;
  402 + // width: 36rpx;
  403 + // }
  404 + // }
  405 +}
  406 +.myOpticsData {
  407 + width: 670rpx;
  408 + height: 120rpx;
  409 + background-color: #ffffff;
  410 + border-radius: 6px;
  411 + box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
  412 + position: relative;
  413 + bottom: 44rpx;
  414 + padding: 40rpx;
  415 + box-sizing: border-box;
  416 + display: flex;
  417 + justify-content: space-between;
  418 + align-items: center;
  419 + .left {
  420 + font-size: 14px;
  421 + color: #333333;
  422 + display: flex;
  423 + align-items: center;
  424 + image {
  425 + margin-right: 32rpx;
  426 + width: 30rpx;
  427 + height: 34rpx;
  428 + }
  429 + }
  430 + image {
  431 + height: 16px;
  432 + width: 8px;
  433 + }
  434 +}
  435 +.myOrder {
  436 + width: 100%;
  437 + height: 296rpx;
  438 + // margin-top: 116rpx;
  439 + margin-bottom: 20rpx;
  440 + padding: 0 40rpx;
  441 + box-sizing: border-box;
  442 + background: #ffffff;
  443 + box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
  444 + border-radius: 6px;
  445 + border-radius: 6px;
  446 + display: flex;
  447 + flex-direction: column;
  448 + justify-content: space-around;
  449 + align-items: center;
  450 + .orderHeader {
  451 + width: 100%;
  452 + height: 100rpx;
  453 + display: flex;
  454 + flex-direction: row;
  455 + justify-content: space-between;
  456 + align-items: center;
  457 + border-bottom: 1px solid #e9e9e9;
  458 + font-weight: bold;
  459 + font-size: 18px;
  460 + color: #333333;
  461 + .btn {
  462 + font-size: 12px;
  463 + color: #999999;
  464 + display: flex;
  465 + align-items: center;
  466 + image {
  467 + margin-left: 20rpx;
  468 + height: 32rpx;
  469 + width: 16rpx;
  470 + }
  471 + }
  472 + }
  473 + .orderBody {
  474 + width: 100%;
  475 + display: flex;
  476 + flex-direction: row;
  477 + justify-content: space-around;
  478 + align-items: center;
  479 + .item {
  480 + display: flex;
  481 + flex-direction: column;
  482 + align-items: center;
  483 + image {
  484 + width: 62rpx;
  485 + height: 46rpx;
  486 + }
  487 + text {
  488 + margin-top: 24rpx;
  489 + font-size: 12px;
  490 + color: #333333;
  491 + }
  492 + }
  493 + }
  494 +}
  495 +.someItem {
  496 + width: 100%;
  497 + height: 336rpx;
  498 + background: #ffffff;
  499 + box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
  500 + border-radius: 6px;
  501 + border-radius: 6px;
  502 + margin-bottom: 18rpx;
  503 + box-sizing: border-box;
  504 + padding: 21rpx 48rpx 21rpx 42rpx;
  505 + box-sizing: border-box;
  506 + display: flex;
  507 + flex-direction: column;
  508 + justify-content: space-between;
  509 + align-items: center;
  510 + .item {
  511 + display: flex;
  512 + justify-content: space-between;
  513 + border-bottom: 1px solid #f2f2f2;
  514 + align-items: center;
  515 + height: 72rpx;
  516 + width: 100%;
  517 + .left {
  518 + font-size: 14px;
  519 + color: #333333;
  520 + display: flex;
  521 + align-items: center;
  522 + image {
  523 + margin-right: 32rpx;
  524 + width: 30rpx;
  525 + height: 34rpx;
  526 + }
  527 + }
  528 + image {
  529 + height: 16px;
  530 + width: 8px;
  531 + }
  532 + }
  533 +}
  534 +.recommend {
  535 + background: #ffffff;
  536 + box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
  537 + border-radius: 6px;
  538 + border-radius: 6px;
  539 + width: 100%;
  540 + .title {
  541 + display: flex;
  542 + flex-direction: row;
  543 + align-items: center;
  544 + justify-content: space-between;
  545 + padding: 20rpx 40rpx;
  546 + .line {
  547 + width: 264rpx;
  548 + height: 1rpx;
  549 + border-bottom: 1px solid #eaeaea;
  550 + }
  551 + .text {
  552 + font-family: PingFangSC-Medium;
  553 + font-size: 14px;
  554 + color: #333333;
  555 + letter-spacing: -0.26px;
  556 + text-align: justify;
  557 + line-height: 24px;
  558 + }
  559 + }
  560 + .goods-list {
  561 + .loading-text {
  562 + width: 100%;
  563 + display: flex;
  564 + justify-content: center;
  565 + align-items: center;
  566 + height: 30px;
  567 + color: #979797;
  568 + font-size: 12px;
  569 + }
  570 + .product-list {
  571 + width: 92%;
  572 + padding: 0 4% 3vw 4%;
  573 + display: flex;
  574 + justify-content: space-between;
  575 + flex-wrap: wrap;
  576 + height: 400px;
  577 + .product {
  578 + width: 48%;
  579 + margin: 0 0 20rpx 0;
  580 + background: #ffffff;
  581 + border: 1px solid #f2f2f2;
  582 + }
  583 + }
  584 + }
  585 +}
  586 +.auth {
  587 + height: 100vh;
  588 + display: flex;
  589 + flex-direction: column;
  590 + align-items: center;
  591 + .icon {
  592 + width: 140rpx;
  593 + height: 140rpx;
  594 + border-radius: 50%;
  595 + margin-top: 100rpx;
  596 + background-color: grey;
  597 + }
  598 + .divider {
  599 + height: 1rpx;
  600 + width: 600rpx;
  601 + margin-top: 80rpx;
  602 + background-color: #e6e3e3;
  603 + }
  604 + .title {
  605 + width: 600rpx;
  606 + margin-top: 50rpx;
  607 + text-align: left;
  608 + }
  609 + .text {
  610 + width: 600rpx;
  611 + margin-top: 30rpx;
  612 + text-align: left;
  613 + color: #e6e3e3;
  614 + }
  615 + button {
  616 + width: 450rpx;
  617 + height: 80rpx;
  618 + line-height: 80rpx;
  619 + margin-top: 80rpx;
  620 + border-radius: 30rpx;
  621 + }
  622 +}
  623 +.closeBtn {
  624 + height: 28rpx;
  625 + width: 28rpx;
  626 + // border: 1px solid red;
  627 + position: absolute;
  628 + top: 20rpx;
  629 + right: 10rpx;
  630 +}
481 631 </style>
... ...
src/static/address-icon.png
Diff comments   View file @3fb9af8

1.59 KB
src/static/img/detail/right.png
Diff comments   View file @3fb9af8

475 Bytes
src/static/img/detail/xiala.png
Diff comments   View file @3fb9af8

438 Bytes | W: | H:

470 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/store/modules/address.js
Diff comments   View file @3fb9af8
1 1 import urlAlias from '../url'
2 2 import request from '../request'
3 3  
4   -const { editAddress, addressList, getAddress } = urlAlias
  4 +const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias
5 5  
6   -const state = { list: [], detail: {} }
  6 +const state = { list: [], detail: {}, defaultInfo: {} }
7 7  
8 8 const mutations = {
9 9 LIST: (state, list) => {
... ... @@ -11,15 +11,20 @@ const mutations = {
11 11 },
12 12 DETAILS: (state, details) => {
13 13 state.details = details
  14 + },
  15 + DEFAULT: (state, data) => {
  16 + state.defaultInfo = data
14 17 }
15 18 }
16 19  
17 20 const actions = {
18 21 edit(mutations, param, success) {
19   - request({
  22 + return new Promise((resolve) => request({
20 23 url: editAddress,
21 24 data: param,
22   - success,
  25 + success: () => {
  26 + resolve()
  27 + },
23 28 fail: () => {
24 29 uni.showModal({
25 30 content: '编辑失败',
... ... @@ -29,7 +34,7 @@ const actions = {
29 34 complete: (res) => {
30 35 console.log('complete status === > ', res)
31 36 }
32   - })
  37 + }))
33 38 },
34 39 list({ commit }) {
35 40 request({
... ... @@ -45,13 +50,16 @@ const actions = {
45 50 }
46 51 })
47 52 },
48   - details({ commit }, param, execute) {
  53 + details({ commit }, param) {
49 54 return new Promise((resolve, reject) => request({
50 55 url: getAddress,
51 56 data: param,
52 57 success: (res) => {
53 58 commit('DETAILS', res.data.data)
54   - resolve()
  59 + resolve({
  60 + code: res.data.code,
  61 + data: res.data.data
  62 + })
55 63 },
56 64 fail: () => {
57 65 uni.showModal({
... ... @@ -60,6 +68,24 @@ const actions = {
60 68 })
61 69 }
62 70 }))
  71 + },
  72 + default({ commit }, param) {
  73 + return new Promise((resolve, reject) => request({
  74 + url: getDefaultAddress,
  75 + data: param,
  76 + success: (res) => {
  77 + resolve({
  78 + code: res.data.code,
  79 + data: res.data.data
  80 + })
  81 + },
  82 + fail: () => {
  83 + uni.showModal({
  84 + content: '获取默认地址信息失败',
  85 + showCancel: false
  86 + })
  87 + }
  88 + }))
63 89 }
64 90 }
65 91  
... ...
src/store/modules/cart.js
Diff comments   View file @3fb9af8
... ... @@ -7,81 +7,6 @@ const state = {
7 7 cartList: []
8 8 }
9 9  
10   -// const data = {
11   -// data: {
12   -// // list 购物车列表
13   -// list: [
14   -// {
15   -// goods_name: '1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流', // 商品名称
16   -// pid: '6', // 产品id
17   -// real_price: 99,
18   -// checked: true, // 是否选中
19   -// name: '颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射', // 属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
20   -// cart_id: '39', // 购物车唯一序列号
21   -// num: '1', // 此购物
22   -// pics: '/static/myorder-paying-pic.png', // 商品图片
23   -// goodsType: 2 // 商品种类
24   -// },
25   -// {
26   -// goods_name: '1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流', // 商品名称
27   -// pid: '4', // 产品id
28   -// real_price: 189,
29   -// checked: false, // 是否选中
30   -// name: '颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射', // 属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
31   -// cart_id: '38', // 购物车唯一序列号
32   -// num: '2', // 此购物
33   -// pics: '/static/myorder-paying-pic.png', // 商品图片
34   -// goodsType: 3 // 商品种类
35   -// }
36   -// ],
37   -// mp_id: '1',
38   -// mp_list: // 使用人，一个产品只有一个使用人
39   -// [
40   -// {
41   -// glassWidth: '54', // 镜宽
42   -// img_url2: 'http://localhost:8087/images/shop_1/1/', // 使用人的头像，根据此头像，AI识别出数据。
43   -// in_time: '2020-02-22 03:19:38', // 使用人加入的时间
44   -// leftAxi: '124', // 左眼数据
45   -// leftCyl: '-2', // 左眼数据
46   -// leftSph: '-1', // 左眼数据
47   -// leftVis: '5', // 左眼数据
48   -// legWidth: '158', // 镜腿长
49   -// metal: null, // 使用人的其它定义（材质过敏之类的）
50   -// mp_id: '1', // 使用的id
51   -// name: 'me', // 使用人的名字
52   -// norseWidth: '18', // 鼻宽
53   -// pd: '89.6', // 瞳距
54   -// price: '0', // 此人偏好的价格
55   -// rightAxi: '123', // 右眼数据
56   -// rightCyl: '24', // 右眼数据
57   -// rightSph: '-4', // 右眼数据
58   -// rightVis: '5.1', // 右眼数据
59   -// uid: '1' // 购买人的uid
60   -// }
61   -// ],
62   -// sk_id: '80', // 此产品下的sku的唯一id
63   -// skuList: [// sku清单
64   -// {
65   -// discount: '45', // 折扣，数据库中以int型存储，所以要除100
66   -// in_price: '6000', // 进货价格，数据库中以int型存储，单位是分，所以显示时要除以100
67   -// kc: '0', // 库存
68   -// model_pic: null, // 模型试戴图
69   -// out_price: 191.8, // 销售价格，元
70   -// pic: 'https://glass.xiuyetang.com//upload_jk/6/6_321EB1.jpg', // 可供查看图
71   -// pid: '6', // 索引产品id
72   -// real_price: 99, // 真实可成交价格
73   -// sk_id: '74', // 成交时的sku_id
74   -// sku_name: '1.56非球面防蓝光_黑色', // sku名称
75   -// sku_shop_value: '', // sku商家定义值
76   -// sku_value: '47_51', // sku系统生成值
77   -// status: '1' // 此产品下的sku状态
78   -// }
79   -// ]
80   -// }, // 一个产品下，会有多个sku，都在这个skuList数组下
81   -// msg: 'ok',
82   -// status: 1
83   -// }
84   -
85 10 const mutations = {
86 11 INIT: (state, cartList) => {
87 12 state.cartList = cartList
... ... @@ -95,11 +20,7 @@ const mutations = {
95 20 MODI: (state, args) => {
96 21 console.log('the num', state.cartList[args.index].num)
97 22 console.log('mutations====>isadd', args)
98   - if (args.isadd) {
99   - state.cartList[args.index].num = args.num
100   - } else {
101   - state.cartList[args.index].num = args.num
102   - }
  23 + state.cartList[args.index].num = args.num
103 24 console.log('the num', state.cartList[args.index].num)
104 25 }
105 26  
... ... @@ -112,10 +33,6 @@ const actions = {
112 33 data: param,
113 34 success: (res) => {
114 35 console.log('cart===>接口数据', res.data.data)
115   - // const resData = {
116   - // ...res,
117   - // data,
118   - // }
119 36 commit('INIT', res.data.data)
120 37 },
121 38 fail: (res) => {
... ... @@ -128,14 +45,15 @@ const actions = {
128 45 },
129 46  
130 47 modiCart({ commit }, param) {
131   - const args = Object.assign({ num: param.num }, param.args)
  48 + const arg = Object.assign({ num: param.num }, param.args)
132 49 delete param.args
133 50 request({
134 51 url: cartModi,
135 52 data: param,
136 53 success: (res) => {
  54 + console.log('modiCart-res=====>', res.data)
137 55 console.log('modi-parm', param)
138   - commit('MODI', args)
  56 + commit('MODI', arg)
139 57 },
140 58 fail: (res) => {
141 59 console.log('fail status === > ', res)
... ... @@ -155,8 +73,6 @@ const actions = {
155 73 success: (res) => {
156 74 console.log('del-parm', param)
157 75 console.log('del-myparms==>', arg)
158   - // console.log('deacart====>cartList',this.$store.state.cart.cartList)
159   -
160 76 commit('DEL', arg)
161 77 },
162 78 fail: (res) => {
... ...
src/store/modules/detailStandard_k.js
Diff comments   View file @3fb9af8
... ... @@ -21,7 +21,7 @@ const actions = {
21 21 url: detailStandardUrl,
22 22 data: param,
23 23 success: (res) => {
24   - commit('INIT', res.data);
  24 + commit('INIT', res.data)
25 25 },
26 26 fail: (res) => {
27 27 console.log(" detail fail status === > ", res);
... ...
src/store/modules/myLoveList.js
Diff comments   View file @3fb9af8
1   -import urlAlias from '../url';
2   -import request from '../request';
3   -
4   -const {
5   - mylovelist
6   -} = urlAlias;
7   -
8   -const state = {
  1 +import urlAlias from '../url'
  2 +import request from '../request'
  3 +
  4 +const {
  5 + mylovelist,
  6 + myloveadd,
  7 + myloveupdate,
  8 +} = urlAlias
  9 +
  10 +const state = {
9 11 loveList: [],
10   -};
11   -
12   -const mutations = {
13   - INIT: (state, data) => {
14   - state.loveList = data;
15   - },
16   -};
17   -
18   -const actions = {
19   - getLoveList({ commit }, param) {
20   - request({
21   - url: mylovelist,
22   - data: param,
23   - success: (res) => {
24   - // console.log(res.data);
25   - commit("INIT", res.data.data);
26   - },
27   - })
28   - }
29   -}
30   -
31   -export default {
32   - namespaced: true,
33   - state,
34   - mutations,
35   - actions,
36   -}
37 12 \ No newline at end of file
  13 +}
  14 +
  15 +const mutations = {
  16 + INIT: (state, data) => {
  17 + state.loveList = data
  18 + },
  19 + // 更新关心人验光单
  20 + UPDATE: (state, data) => {
  21 + // state.loveList.push(data)
  22 + // console.log('UPDATA=====>',data)
  23 + },
  24 +}
  25 +
  26 +const actions = {
  27 + getLoveList({ commit }, param) {
  28 + request({
  29 + url: mylovelist,
  30 + data: param,
  31 + success: (res) => {
  32 + // console.log(res.data);
  33 + commit('INIT', res.data.data)
  34 + },
  35 + })
  36 + },
  37 + addMylove({ commit }, param) {
  38 + console.log('myloveupdate-parm====>', param)
  39 + return new Promise((resolve) => request({
  40 + url: myloveadd,
  41 + data: param,
  42 + success: (res) => {
  43 + console.log('addMylove-parm====>', param)
  44 + console.log(res.data)
  45 + resolve(res.data)
  46 + // commit("ADD", args);
  47 + },
  48 + }))
  49 + },
  50 + updateMylove({ commit }, param) {
  51 + request({
  52 + url: myloveupdate,
  53 + data: param,
  54 + success: (res) => {
  55 + console.log('myloveupdate-parm====>', param)
  56 + console.log(res)
  57 + // commit("UPDATE", param);
  58 + },
  59 + })
  60 + },
  61 +
  62 +}
  63 +
  64 +export default {
  65 + namespaced: true,
  66 + state,
  67 + mutations,
  68 + actions,
  69 +}
... ...
src/store/modules/myOrder.js
Diff comments   View file @3fb9af8
... ... @@ -3,7 +3,7 @@ import request from &#39;../request&#39;;
3 3  
4 4 const {
5 5 myOrderList
6   -} = urlAlias;
  6 +} = urlAlias
7 7  
8 8 // const data = {
9 9 // data: [
... ...
src/store/modules/order.js
Diff comments   View file @3fb9af8
... ... @@ -0,0 +1,78 @@
  1 +import urlAlias from '../url'
  2 +import request from '../request'
  3 +
  4 +const { orderBuild, buyNow, pay } = urlAlias
  5 +
  6 +const state = { list: [], param: {} }
  7 +
  8 +const mutations = {
  9 + LIST: (state, list) => {
  10 + state.list = list
  11 + },
  12 + SAVE: (state, param) => {
  13 + state.param = param
  14 + },
  15 +}
  16 +
  17 +const actions = {
  18 + // 立即购买->创建订单
  19 + buyNow({ commit }, param) {
  20 + return new Promise((resolve) => request({
  21 + url: buyNow,
  22 + data: param,
  23 + success: (res) => {
  24 + resolve(res)
  25 + },
  26 + fail: () => {
  27 + uni.showModal({
  28 + content: '创建订单失败',
  29 + showCancel: false,
  30 + })
  31 + },
  32 + }))
  33 + },
  34 + // 购物车->创建订单
  35 + build({ commit }, param) {
  36 + return new Promise((resolve, reject) => request({
  37 + url: orderBuild,
  38 + data: param,
  39 + success: (res) => {
  40 + resolve(res.data)
  41 + },
  42 + fail: () => {
  43 + uni.showModal({
  44 + content: '订单生成失败',
  45 + showCancel: false,
  46 + })
  47 + },
  48 + }))
  49 + },
  50 + // 支付
  51 + pay({ commit }, param) {
  52 + return new Promise((resolve, reject) => request({
  53 + url: pay,
  54 + data: param,
  55 + success: (res) => {
  56 + resolve(res.data)
  57 + },
  58 + fail: () => {
  59 + uni.showModal({
  60 + content: '订单生成失败',
  61 + showCancel: false,
  62 + })
  63 + },
  64 + }))
  65 + },
  66 + // 储存创建订单参数
  67 + saveParams({ commit }, param) {
  68 + console.log('save', param)
  69 + commit('SAVE', param)
  70 + },
  71 +}
  72 +
  73 +export default {
  74 + namespaced: true,
  75 + state,
  76 + mutations,
  77 + actions,
  78 +}
... ...
src/store/modules/orderRead.js
Diff comments   View file @3fb9af8
1   - import urlAlias from '../url';
2   - import request from '../request';
  1 +import urlAlias from '../url'
  2 +import request from '../request'
3 3  
4   - const {
  4 +const {
5 5 orderRead
6   - } = urlAlias;
  6 +} = urlAlias
7 7  
8 8 const state = {
9   - orderInfo: {},
10   -};
  9 + orderInfo: {}
  10 +}
11 11  
12 12 const mutations = {
13 13 INIT: (state, orderInfo) => {
14   - state.orderInfo = orderInfo;
15   - },
16   -};
  14 + state.orderInfo = orderInfo
  15 + }
  16 +}
17 17  
18 18 const actions = {
19 19 getOrderInfo({ commit }, param) {
20   - request({
21   - url: orderRead,
22   - data: param,
23   - success: (res) => {
24   - commit("INIT", res.data.data);
25   - },
  20 + request({
  21 + url: orderRead,
  22 + data: param,
  23 + success: (res) => {
  24 + commit("INIT", res.data.data)
  25 + }
26 26 })
27   - },
28   -};
  27 + }
  28 +}
29 29  
30 30 export default {
31 31 namespaced: true,
32 32 state,
33 33 mutations,
34   - actions,
35   -};
  34 + actions
  35 +}
... ...
src/store/modules/read.js
Diff comments   View file @3fb9af8
1   - import urlAlias from '../url';
2   - import request from '../request';
  1 +import urlAlias from '../url'
  2 +import request from '../request'
3 3  
4   - const {
  4 +const {
5 5 read
6   - } = urlAlias;
  6 +} = urlAlias
7 7  
8 8 const state = {
9   - goodInfo: {},
10   -};
  9 + goodInfo: {}
  10 +}
11 11  
12 12 const mutations = {
13 13 INIT: (state, goodInfo) => {
14   - state.goodInfo = goodInfo;
15   -
16   - },
17   -};
  14 + state.goodInfo = goodInfo
  15 + }
  16 +}
18 17  
19 18 const actions = {
20 19 fetch({ commit }, param) {
21   - request({
  20 + // 由于购物车和用户推荐的价格要根据sk_id来获取
  21 + const arg=Object.assign({},param)
  22 + delete param.sk_id
  23 + return new Promise((resolve, reject) => request({
22 24 url: read,
23 25 data: param,
24 26 success: (res) => {
25   - commit('INIT', res.data.data)
  27 + console.log('readParm====>',arg)
  28 + console.log('read====>',res.data.data)
  29 + // 用一个新的对象来接收sk_id找的值
  30 + const Res=Object.assign({},res.data.data)
  31 + if(arg.sk_id!=undefined){
  32 + for (let i = 0; i < res.data.data.skuList.length; i++) {
  33 + if(res.data.data.skuList[i].sk_id==arg.sk_id){
  34 + Res.p_sale_price= res.data.data.skuList[i].real_price
  35 + console.log('陈工了')
  36 + }
  37 + }
  38 + }
  39 + console.log(Res)
  40 + commit('INIT', Res)
  41 + resolve()
26 42 },
27 43 fail: (res) => {
28   - console.log("fail status === > ", res);
  44 + console.log('fail status === > ', res)
29 45 },
30 46 complete: (res) => {
31   - console.log("complete status === > ", res);
32   - },
33   - })
34   - },
35   -};
  47 + console.log('complete status === > ', res)
  48 + }
  49 + }))
  50 + }
  51 +}
36 52  
37 53 export default {
38 54 namespaced: true,
39 55 state,
40 56 mutations,
41   - actions,
42   -};
  57 + actions
  58 +}
... ...
src/store/modules/userRecommand.js
Diff comments   View file @3fb9af8
1   - import urlAlias from '../url';
2   - import request from '../request';
  1 +import urlAlias from '../url'
  2 +import request from '../request'
3 3  
4   - const {
  4 +const {
5 5 recommandList
6   - } = urlAlias;
  6 +} = urlAlias
7 7  
8 8 const state = {
9   - recommandList: [],
10   -};
11   -
12   -const data = {
13   - "code": 1,
14   - "msg": "请求成功",
15   - "data": {
16   - // list 表示商品数据列表
17   - "list": [
18   - {
19   - model_pic: null,
20   - p_name: "1.61防蓝光镜片 非球面_枪色款镜架商务男士防蓝光眼镜",
21   - p_root_index: "1", //对应goodType
22   - pic: "http://localhost/sys-glass/image/picture.png",
23   - pid: "96",
24   - real_price: "17800",
25   - sk_id: "1448",
26   - sku_name: "1.61防蓝光镜片 非球面_枪色款镜架",
27   - trade_num: "0",
28   - },
29   - {
30   - "sk_id": "39",
31   - "pic": "/static/img/goods/p1.jpg",
32   - "p_name": "1.56防蓝光镜片非球面_黑银色镜架防蓝光眼镜超轻不压鼻",
33   - "old_price": "18000",
34   - "real_price": "9900",
35   - "trade_num": 123, // 对应购买人数
36   - "p_root_index": 2, // 对应跳转的详情页
37   - "pid":4, // 产品id
38   - },
39   - ],
40   - pagesnum:1, // 懒加载要用到的页数
41   - pagessize:10,// 每次请求返回的list长度
42   - }
43   -
  9 + recommandList: []
44 10 }
45 11  
46 12 const mutations = {
47 13 INIT: (state, list) => {
48   - state.recommandList = list;
49   - },
50   -};
  14 + state.recommandList = list
  15 + }
  16 +}
51 17  
52   -let goodsList=[];
  18 +let goodsList = []
53 19  
54 20 const actions = {
55 21 getRecommandList({ commit }, param) {
56 22 request({
57 23 url: recommandList,
  24 + data: param,
58 25 success: (res) => {
59   - console.log('userRecommand-parm',param)
60   - console.log(res.data.data)
61   - // const Res={...res.data.data.list,...data.data.list}
62   - goodsList=[...goodsList,...res.data.data]
63   - // console.log(res.data)
  26 + console.log(res.data.data)
  27 + // const Res={...res.data.data.list,...data.data.list}
  28 + const data = res.data.data
  29 + for (let index = 0; index < data.length; index++) {
  30 + goodsList = [...goodsList, ...data[index].list]
  31 + }
64 32 commit('INIT', goodsList)
65 33 },
66 34 fail: (res) => {
67   - uni.showToast({
68   - title:"数据加载完了",
69   - icon:"none"
70   - })
71   - console.log("fail status === > ", res);
  35 + uni.showToast({
  36 + title: '数据加载完了',
  37 + icon: 'none'
  38 + })
  39 + console.log('fail status === > ', res)
72 40 },
73 41 complete: (res) => {
74   - console.log("complete status === > ", res);
75   - },
  42 + console.log('complete status === > ', res)
  43 + }
76 44 })
77   - },
78   -};
  45 + }
  46 +}
79 47  
80 48 export default {
81 49 namespaced: true,
82 50 state,
83 51 mutations,
84   - actions,
85   -};
86 52 \ No newline at end of file
  53 + actions
  54 +}
... ...
src/store/request.js
Diff comments   View file @3fb9af8
1   -const DOMAIN = 'https://api.glass.xiuyetang.com';
  1 +const DOMAIN = 'https://api.glass.xiuyetang.com'
2 2  
3 3 export default async function request({
4   - url,
5   - method = "post",
6   - data = {},
7   - header = {
8   - "Content-Type": "application/x-www-form-urlencoded",
9   - },
10   - timeout = 3000,
11   - withCredentials = false, // 跨域请求时是否携带凭证（cookies）
12   - // sslVerify: true, // 验证 ssl 证书
13   - success,
14   - fail = (res) => {
15   - console.log("fail status === > ", res);
16   - },
17   - complete = (res) => {
18   - console.log("complete status === > ", res);
19   - },
  4 + url,
  5 + method = 'post',
  6 + data = {},
  7 + header = {
  8 + 'Content-Type': 'application/x-www-form-urlencoded',
  9 + },
  10 + timeout = 3000,
  11 + withCredentials = false, // 跨域请求时是否携带凭证（cookies）
  12 + // sslVerify: true, // 验证 ssl 证书
  13 + success,
  14 + fail = (res) => {
  15 + console.log('fail status === > ', res)
  16 + },
  17 + complete = (res) => {
  18 + console.log('complete status === > ', res)
  19 + },
20 20 }) {
21   - const uid = uni.getStorageSync('uid');
22   - data = {
23   - uid,
24   - ...data,
25   - };
26   - uni
27   - .request({
28   - url: DOMAIN + url,
29   - method,
30   - data,
31   - header,
32   - timeout,
33   - withCredentials,
34   - success,
35   - fail,
36   - complete,
37   - })
38   -}
39 21 \ No newline at end of file
  22 + const uid = uni.getStorageSync('uid')
  23 + const openid = uni.getStorageSync('openid')
  24 + data = {
  25 + uid,
  26 + openid,
  27 + ...data,
  28 + }
  29 + uni
  30 + .request({
  31 + url: DOMAIN + url,
  32 + method,
  33 + data,
  34 + header,
  35 + timeout,
  36 + withCredentials,
  37 + success,
  38 + fail,
  39 + complete,
  40 + })
  41 +}
... ...
... ... @@ -18,6 +18,9 @@ const urlAlias = {
18 18 cancelOrder: '/app/order/wait/del', // 取消订单
19 19 statusConfirm: '/app/order/statusConfirm', // 订单操作
20 20 payLog: '/app/pay/log', // 调起支付
  21 + orderBuild: '/app/order/build', // 加购后生成订单
  22 + buyNow: '/app/order/buynow', // 立即购买生成订单
  23 + pay: '/app/pay/log', // 支付接口
21 24  
22 25 // 购物车
23 26 cartList: '/app/cart/list', // 获取购物车列表
... ... @@ -37,10 +40,12 @@ const urlAlias = {
37 40 editAddress: '/app/address/edit_address', // 编辑地址
38 41 addressList: '/app/address/get_address_list', // 获取用户地址列表
39 42 getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息
  43 + getDefaultAddress: '/app/address/get_default_address', // 获取用户默认地址信息
40 44  
41 45 // 用户数据
42 46 mylovelist: '/app/user/mylovelist', // 关心的人的数据
43   - myloveadd: '/app/user/myloveadd' // 添加关心的人
  47 + myloveadd: '/app/user/myloveadd', // 添加关心的人
  48 + myloveupdate: '/app/user/myloveupdate', // 更新关心人的数据
44 49 }
45 50  
46 51 export default urlAlias
... ...