刘文博 / gulu-vue

Download as
Browse Code »

Commit 29f4d5fe57c311ae9df882ac2821599ab4e590d5

Authored by 尹聃
1 parent e477b7dc7e
Exists in master

选购页传递参数

Showing 2 changed files with 329 additions and 35 deletions   Show diff stats
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @29f4d5f
... ... @@ -18,7 +18,7 @@
18 18 <view class="choose">
19 19 <view class="colour">
20 20 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
21   - <view class="colour_exp">*{{colour}}</view>
  21 + <view class="colour_exp">*{{this.navData.colour}}</view>
22 22 <view>
23 23 <view class="colour2">
24 24 <view
... ... @@ -37,10 +37,10 @@
37 37 <view class="size">
38 38 <view class="size1">
39 39 <view class="size1_1">框架尺寸</view>
40   - <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
  40 + <view><image src="/static/img/detail/xiala.png"></image></view>
41 41 </view>
42 42 <view class="colour">
43   - <view class="colour_exp">*{{colour}}</view>
  43 + <view class="colour_exp">*{{this.navData.colour}}</view>
44 44 </view>
45 45 <view class="D3_list">
46 46 <view>
... ... @@ -123,7 +123,7 @@
123 123 </view>
124 124 </view>
125 125 <view class="zhanwei"></view>
126   - <view class="button"><view>立即结算</view></view>
  126 + <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view>
127 127 </view>
128 128 </template>
129 129 <script>
... ... @@ -137,8 +137,17 @@ export default {
137 137 data(){
138 138 return{
139 139 count: 1,
140   - colour: '1.56非球面防蓝光_亚黑色',
  140 + // colour: '1.56非球面防蓝光_亚黑色',
141 141 chooseNum : '',
  142 + //传参
  143 + navData:{
  144 + pid: "26",
  145 + p_root_index: "2",
  146 + name:'',
  147 + price:'',
  148 + colour: '1.56非球面防蓝光_亚黑色',
  149 + },
  150 + //尺寸
142 151 parameter:[
143 152 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
144 153 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
... ... @@ -168,7 +177,8 @@ export default {
168 177 onLoad:function(){
169 178 store.dispatch('detailStandard_k/fetch', {
170 179 uid: "1",
171   - pid: "26",
  180 + pid: "26",
  181 + p_root_index: "2"
172 182 });
173 183 // console.log(this.$store.state.detailStandard_k.list+'ssss');
174 184 },
... ... @@ -181,11 +191,11 @@ export default {
181 191 }
182 192 },
183 193 colourChange(index,e){
184   - this.colour = e ; //颜色选择
185   - // console.log(index,e);
  194 + this.navData.colour = e ; //颜色选择
  195 + console.log(index,e);
186 196  
187 197 },
188   - viewChoose(index){
  198 + viewChoose(index,e){
189 199 this.chooseNum = index
190 200 },
191 201 popArgs(){
... ... @@ -195,7 +205,17 @@ export default {
195 205 fail: () => {},
196 206 complete: () => {}
197 207 });
198   - }
  208 + },
  209 + //跳转确认订单页及传参
  210 + popSure(name,price){
  211 + this.navData.name = name;
  212 + this.navData.price = price;
  213 + var navData = JSON.stringify(this.navData);
  214 + uni.navigateTo({
  215 + url: '../confirmOrder/confirmOrder?index='+navData,
  216 + });
  217 + console.log(this.navData)
  218 + },
199 219 }
200 220  
201 221 }
... ...
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @29f4d5f
... ... @@ -18,7 +18,7 @@
18 18 <view class="choose">
19 19 <view class="colour">
20 20 <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view>
21   - <view class="colour_exp">*{{colour}}</view>
  21 + <view class="colour_exp">*{{navData.colour}}</view>
22 22 <view>
23 23 <view class="colour2">
24 24 <view
... ... @@ -64,7 +64,7 @@
64 64 >
65 65 <view
66 66 class="split_colour2"
67   - @click="splitChoose(index)"
  67 + @click="splitChoose(index,items.name)"
68 68 v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}"
69 69 >{{items.name}}</view>
70 70 </view>
... ... @@ -75,10 +75,10 @@
75 75 <view class="size">
76 76 <view class="size1">
77 77 <view class="size1_1">框架尺寸</view>
78   - <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
  78 + <view><image src="/static/img/detail/xiala.png"></image></view>
79 79 </view>
80 80 <view class="colour">
81   - <view class="colour_exp">*{{colour}}</view>
  81 + <view class="colour_exp">*{{navData.colour}}</view>
82 82 </view>
83 83 <view class="D3_list">
84 84 <view>
... ... @@ -160,8 +160,113 @@
160 160 <view class="buy3_2" @click="popArgs">立即去选</view>
161 161 </view>
162 162 </view>
  163 + <template >
  164 + <view class="goods-form">
  165 + <text class="p1">填写验光数据</text>
  166 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  167 + <view class="picker" >
  168 + <view class="picker-choice">
  169 + <view class="choice-left">
  170 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  171 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  172 + </view>
  173 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  174 + <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
  175 + <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  176 + <image src="../../static/detail-tabicon.png" ></image>
  177 + </picker>
  178 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  179 + <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
  180 + <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
  181 + <image src="../../static/detail-tabicon.png" ></image>
  182 + </picker>
  183 + </view>
  184 + </view>
  185 + <view class="picker" >
  186 + <view class="picker-choice">
  187 + <view class="choice-left">
  188 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  189 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  190 + </view>
  191 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  192 + <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
  193 + <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
  194 + <image src="../../static/detail-tabicon.png" ></image>
  195 + </picker>
  196 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  197 + <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
  198 + <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
  199 + <image src="../../static/detail-tabicon.png" ></image>
  200 + </picker>
  201 + </view>
  202 + </view>
  203 + <view class="picker" >
  204 + <view class="picker-choice">
  205 + <view class="choice-left">
  206 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  207 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  208 + </view>
  209 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  210 + <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
  211 + <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
  212 + <image src="../../static/detail-tabicon.png" ></image>
  213 + </picker>
  214 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  215 + <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
  216 + <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
  217 + <image src="../../static/detail-tabicon.png" ></image>
  218 + </picker>
  219 + </view>
  220 + </view>
  221 + <view class="picker" >
  222 + <view class="picker-choice">
  223 + <view class="choice-left">
  224 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  225 + <text class="p12">{{pickerInfoList[3].nameE}}</text>
  226 + </view>
  227 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  228 + <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
  229 + <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
  230 + <image src="../../static/detail-tabicon.png" ></image>
  231 + </picker>
  232 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  233 + <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
  234 + <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
  235 + <image src="../../static/detail-tabicon.png" ></image>
  236 + </picker>
  237 + </view>
  238 + </view>
  239 + <view class="picker" >
  240 + <view class="picker-choice">
  241 + <view class="choice-left">
  242 + <text class="p11">{{pickerInfoList[4].nameC}}</text>
  243 + </view>
  244 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  245 + <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
  246 + <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
  247 + <image src="../../static/detail-tabicon.png" ></image>
  248 + </picker>
  249 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  250 + <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
  251 + <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
  252 + <image src="../../static/detail-tabicon.png" ></image>
  253 + </picker>
  254 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  255 + <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
  256 + <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
  257 + <image src="../../static/detail-tabicon.png" ></image>
  258 + </picker>
  259 + </view>
  260 + </view>
  261 + <view class="confirm">
  262 + <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
  263 + <text>确认以上输入信息来源于我的验光数据!</text>
  264 + </view>
  265 + </view>
  266 +
  267 + </template>
163 268 <view class="zhanwei"></view>
164   - <view class="button"><view>立即结算</view></view>
  269 + <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view>
165 270 </view>
166 271 </template>
167 272 <script>
... ... @@ -175,9 +280,20 @@ export default {
175 280 data(){
176 281 return{
177 282 count: 1,
178   - colour: '1.56非球面防蓝光_亚黑色',
179 283 chooseNum : '',
180 284 isSplit: '' ,
  285 +
  286 + //传参
  287 + navData:{
  288 + pid: "26",
  289 + p_root_index: "4",
  290 + name:'',
  291 + price:'',
  292 + split: '1.56非球面防蓝光',
  293 + colour: '1.56非球面防蓝光_亚黑色',
  294 + },
  295 +
  296 + //尺寸
181 297 parameter:[
182 298 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
183 299 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
... ... @@ -205,15 +321,21 @@ export default {
205 321 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
206 322 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
207 323 ],
208   - //折射率
209   - split:[
210   - {number: 1.56},
211   - {number: 1.60},
212   - {number: 1.67},
213   - {number: 1.71},
214   - {number: 1.74}
215   -
216   - ]
  324 + opIsOpen:true,
  325 + tablist: {
  326 + // read: true,
  327 + // seeLong: false,
  328 + confirm: false
  329 + },
  330 + tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
  331 + // 度数相关数据
  332 + pickerInfoList:[
  333 + {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},
  334 + {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},
  335 + {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},
  336 + {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},
  337 + {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}
  338 + ],
217 339 }
218 340 },
219 341  
... ... @@ -225,10 +347,9 @@ export default {
225 347 onLoad:function(){
226 348 store.dispatch('detailStandard_k/fetch', {
227 349 uid: "1",
228   - pid: "26",
229   - });
230   - console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws');
231   - console.log("ssssssssssssssssssssssssssss")
  350 + pid: "26",
  351 + p_root_index: "4"
  352 + });
232 353 },
233 354 methods: {
234 355 counter(isadd){
... ... @@ -239,16 +360,18 @@ export default {
239 360 }
240 361 },
241 362 colourChange(index,e){
242   - this.colour = e ; //颜色选择
243   - // console.log(index,e);
  363 + this.navData.colour = e ; //颜色选择
244 364  
245 365 },
246 366 viewChoose(index){
247 367 this.chooseNum = index
248 368 },
249   - splitChoose(index){
  369 + //折射率选择
  370 + splitChoose(index,e){
250 371 this.isSplit = index
  372 + this.navData.split = e
251 373 },
  374 + //跳转镜片选购页
252 375 popArgs(){
253 376 uni.navigateTo({
254 377 url: '../detailsChoiceArgs/detailsChoiceArgs',
... ... @@ -256,7 +379,58 @@ export default {
256 379 fail: () => {},
257 380 complete: () => {}
258 381 });
259   - }
  382 + },
  383 + //跳转确认订单页及传参
  384 + popSure(name,price){
  385 + this.navData.name = name;
  386 + this.navData.price = price;
  387 + var navData = JSON.stringify(this.navData);
  388 + uni.navigateTo({
  389 + url: '../confirmOrder/confirmOrder?index='+navData,
  390 + });
  391 + console.log(this.navData)
  392 + },
  393 + //验光表
  394 + changeConfirm() {
  395 + this.tablist.confirm = !this.tablist.confirm
  396 + },
  397 + bindPickerChange01: function(e) {
  398 + this.pickerInfoList[0].nameIndex1 = e.target.value
  399 + },
  400 + bindPickerChange02: function(e) {
  401 + this.pickerInfoList[0].nameIndex2 = e.target.value
  402 + },
  403 +
  404 + bindPickerChange11: function(e) {
  405 + this.pickerInfoList[1].nameIndex1 = e.target.value
  406 + },
  407 + bindPickerChange12: function(e) {
  408 + this.pickerInfoList[1].nameIndex2 = e.target.value
  409 + },
  410 +
  411 + bindPickerChange21: function(e) {
  412 + this.pickerInfoList[2].nameIndex1 = e.target.value
  413 + },
  414 + bindPickerChange22: function(e) {
  415 + this.pickerInfoList[2].nameIndex2 = e.target.value
  416 + },
  417 +
  418 + bindPickerChange31: function(e) {
  419 + this.pickerInfoList[3].nameIndex1 = e.target.value
  420 + },
  421 + bindPickerChange32: function(e) {
  422 + this.pickerInfoList[3].nameIndex2 = e.target.value
  423 + },
  424 +
  425 + bindPickerChange41: function(e) {
  426 + this.pickerInfoList[4].nameIndex1 = e.target.value
  427 + },
  428 + bindPickerChange42: function(e) {
  429 + this.pickerInfoList[4].nameIndex2 = e.target.value
  430 + },
  431 + bindPickerChange43: function(e) {
  432 + this.pickerInfoList[4].nameIndex3 = e.target.value
  433 + },
260 434 }
261 435  
262 436 }
... ... @@ -557,7 +731,7 @@ hr{
557 731 border-radius: 8px;
558 732 padding-top: 20px;
559 733 box-sizing: border-box;
560   - margin-bottom: 20px;
  734 + margin-bottom: 10px;
561 735 }
562 736 .buy1{
563 737 font-family: PingFangSC-Medium;
... ... @@ -599,7 +773,107 @@ hr{
599 773 }
600 774 .zhanwei{
601 775 background: #F2F2F2;
602   - height: 120rpx;
  776 + height: 200rpx;
  777 +}
  778 +.goods-form {
  779 + display: flex;
  780 + flex-direction: column;
  781 + align-items: center;
  782 + justify-content: center;
  783 + background-color: #fff;
  784 + width: 100%;
  785 + padding-top:20px;
  786 + padding-bottom:20px;
  787 + box-sizing: border-box;
  788 +
  789 + .p1 {
  790 + font-size: 16px;
  791 + color: #333333;
  792 + letter-spacing: -0.3px;
  793 + text-align: justify;
  794 + line-height: 24px;
  795 + margin: 4px 0;
  796 + }
  797 + .p2 {
  798 + font-size: 12px;
  799 + color: #999999;
  800 + letter-spacing: -0.23px;
  801 + margin-bottom: 18rpx;
  802 + }
  803 + image{
  804 + width: 28rpx;
  805 + height: 26rpx;
  806 + }
  807 + .confirm {
  808 + display: flex;
  809 + align-items: center;
  810 + font-size: 12px;
  811 + color: #666666;
  812 + letter-spacing: -0.23px;
  813 + width: 684rpx;
  814 + image{
  815 + margin-right:25rpx;
  816 + }
  817 + }
  818 + .picker{
  819 + display: flex;
  820 + flex-direction: column;
  821 + justify-content: center;
  822 + align-items: center;
  823 + width: 100%;
  824 + image{
  825 + width: 10px;
  826 + height: 10px;
  827 + margin-right: 5px;
  828 + }
  829 + .picker-choice{
  830 + display: flex;
  831 + width: 684rpx;
  832 + align-items: center;
  833 + margin-bottom: 40rpx;
  834 + .choice-left{
  835 + width: 210rpx;
  836 + .p11 {
  837 + font-size: 14px;
  838 + color: #333333;
  839 + letter-spacing: -0.26px;
  840 + text-align: justify;
  841 + line-height: 24px;
  842 + // margin-right: 10px;
  843 + }
  844 + .p12 {
  845 + font-size: 10px;
  846 + color: #3F3F3F;
  847 + letter-spacing: -0.19px;
  848 + text-align: justify;
  849 + line-height: 24px;
  850 + }
  851 +
  852 +
  853 + }
  854 + .p13 {
  855 + font-size: 10px;
  856 + color: #999999;
  857 + letter-spacing: -0.19px;
  858 + margin-right: 10px;
  859 + }
  860 + .p13-date {
  861 + font-size: 10px;
  862 + color: #999999;
  863 + letter-spacing: -0.19px;
  864 + margin-right: 5px;
  865 + }
  866 + .p14 {
  867 + font-size: 14px;
  868 + color: #666666;
  869 + letter-spacing: -0.26px;
  870 + text-align: center;
  871 + width: 124rpx;
  872 + border-bottom: 1px solid #CFCFCF;
  873 + }
  874 +
  875 + }
  876 + }
603 877 }
604 878 .button{
605 879 position: fixed;
... ...