刘文博 / gulu-vue

Download as
Browse Code »

Commit 607bc3a4d6e98e95f8bc2f4adf328cf1331ae013

Authored by BigBoss
1 parent d495801abe
Exists in master

修改了直接购买的流程，添加弹窗，选择信息的合并等

Showing 9 changed files with 1333 additions and 177 deletions   Show diff stats
src/common/data.js
View file @d495801
... ... @@ -1,133 +0,0 @@
1   -// 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示,
2   -// 组件的返回结果是有菜单数组下标形式返回,
3   -// 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单
4   -/*
5   -[
6   - {
7   - "name":"", //字符串类型 选填项 菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选"
8   - "type":"" //字符串类型 必填项 可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单
9   - "submenu":[ //对象数组类型 必填项 子菜单数据
10   - {
11   - "name":"", //字符串类型 必填项 菜单名称
12   - "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果
13   - "submenu":[ //对象数组类型 必填项 子菜单数据
14   - {
15   - "name":"", //字符串类型 必填项 菜单名称
16   - "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
17   - "submenu":[ //对象数组类型 必填项 子菜单数据 filter类型无效
18   - {
19   - "name":"", //字符串类型 必填项 菜单名称 hierarchy类型层级最多到此
20   - "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
21   - }
22   - ]
23   - }
24   - ]
25   - }
26   - ]
27   - }
28   -]
29   -*/
30   -
31   -//0.0.4版本起 返回结果将有两部分组成:
32   -/*
33   -{
34   - index:[], //旧版本的下标数组形式
35   - value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已
36   -}
37   -*/
38   -// 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的.
39   -// 数据较长，请仔细查看。
40   -
41   -
42   -export default [
43   - {
44   - "name":'综合',
45   - "type": 'filter',
46   - "submenu": [{
47   - "submenu": [
48   -
49   - ]
50   - },
51   - ],
52   - },
53   - {
54   - "name":'品牌',
55   - "type": 'filter',
56   - "submenu": [{
57   - // "name": '品牌',
58   - // "value": "品牌",
59   - "submenu": [{
60   - "name": "帕森",
61   - "value": "帕森",
62   - },
63   - {
64   - "name": "海伦凯勒",
65   - "value": "海伦凯勒",
66   - },
67   - ]
68   - },
69   - ]
70   - },
71   - {
72   - "name":'功能',
73   - "type": 'filter',
74   - "submenu": [{
75   - "submenu": [{
76   - "name": "满减活动",
77   - "value": "满减活动"
78   - },
79   - {
80   - "name": "打折优惠",
81   - "value": "打折优惠"
82   - },
83   - {
84   - "name": "会员专享",
85   - "value": "会员专享"
86   - }
87   - ]
88   - }
89   - ]
90   - },
91   - {
92   - "name":'材质',
93   - "type": 'filter',
94   - "submenu": [{
95   - "submenu": [{
96   - "name": "满减活动",
97   - "value": "满减活动"
98   - },
99   - {
100   - "name": "打折优惠",
101   - "value": "打折优惠"
102   - },
103   - {
104   - "name": "会员专享",
105   - "value": "会员专享"
106   - }
107   - ]
108   - }
109   - ]
110   - },
111   - {
112   - "name":'折扣',
113   - "type": 'filter',
114   - "submenu": [{
115   - "name": "折扣(多选)",
116   - "submenu": [{
117   - "name": "满减活动",
118   - "value": "满减活动"
119   - },
120   - {
121   - "name": "打折优惠",
122   - "value": "打折优惠"
123   - },
124   - {
125   - "name": "会员专享",
126   - "value": "会员专享"
127   - }
128   - ]
129   - }
130   - ]
131   - }
132   -]
133   -
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @607bc3a
... ... @@ -34,7 +34,7 @@
34 34 </view>
35 35 <view class="order-user-body">
36 36 <image src="../../static/myorder-paying-location.png"></image>
37   - <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
  37 + <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
38 38 </view>
39 39 <image
40 40 class="arrow"
... ... @@ -59,7 +59,7 @@
59 59 mode="aspectFill"
60 60 ></image>
61 61 <view class="infoRight">
62   - <text class="goodName">商品名称商品名称商品名称名称名称</text>
  62 + <text class="goodName">{{goodInfo.p_name}}</text>
63 63 <text class="remarks">支持7天无理由退货 顺丰发货</text>
64 64 <view class="priceBox">
65 65 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
... ... @@ -91,6 +91,9 @@
91 91 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
92 92 </block>
93 93 </text></view>
  94 + <view class="shippingMethod">使用人 <text>
  95 + {{name}}
  96 + </text></view>
94 97 <view class="shippingMethod">配送方式 <text>快递</text></view>
95 98 <view class="message">买家留言
96 99 <input
... ... @@ -179,6 +182,7 @@ import MD5Util from &#39;../../utils/md5&#39;
179 182 export default {
180 183 data() {
181 184 return {
  185 + name:String,
182 186 addAddress: '添加收货地址',
183 187 count: 1,
184 188 pid: 0,
... ... @@ -192,8 +196,14 @@ export default {
192 196 // isAnonymous:
193 197 }
194 198 },
195   - onLoad({ pid, addressId, isCart }) {
196   - this.pid = pid
  199 + onLoad({ pid, addressId, isCart ,count,name}) {
  200 + this.pid = pid;
  201 + this.count = count;
  202 + this.name = name;
  203 + store.dispatch('read/fetch', {
  204 + pid,
  205 + })
  206 + console.log('++++++++++++'+pid,addressId,isCart,count)
197 207 // 若已经选择地址
198 208 if (addressId) {
199 209 store
... ... @@ -216,13 +226,10 @@ export default {
216 226 }
217 227 })
218 228 }
219   - store.dispatch('read/fetch', {
220   - pid,
221   - })
222 229 },
223 230 computed: {
224 231 goodInfo() {
225   - console.log('state', this.$store.state)
  232 + console.log('state', this.$store.state.read.goodInfo)
226 233 return this.$store.state.read.goodInfo
227 234 },
228 235 skuInfo() {
... ... @@ -320,7 +327,7 @@ export default {
320 327 })
321 328 // 跳转订单详情页->状态 待收货
322 329 uni.reLaunch({
323   - url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`,
  330 + url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&isPay=1`,
324 331 })
325 332 },
326 333 fail: (res) => {
... ... @@ -331,7 +338,7 @@ export default {
331 338 })
332 339 // 跳转订单详情页->状态 待付款
333 340 uni.reLaunch({
334   - url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`,
  341 + url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&isPay=1`,
335 342 })
336 343 },
337 344 complete: () => {
... ... @@ -399,7 +406,7 @@ export default {
399 406 box-sizing: border-box;
400 407 .orderInfo {
401 408 width: 670rpx;
402   - height: 488rpx;
  409 + min-height: 488rpx;
403 410 background-color: #ffffff;
404 411 border-radius: 20rpx;
405 412 box-sizing: border-box;
... ... @@ -629,7 +636,8 @@ export default {
629 636 height: 108rpx;
630 637 width: 100%;
631 638 align-items: center;
632   - margin-left: 126rpx;
  639 + padding-left: 126rpx;
  640 + box-sizing: border-box;
633 641 .name {
634 642 display: flex;
635 643 justify-content: space-between;
... ...
src/pages/frameDetail/components/BottomSheet.vue
Diff comments   View file @607bc3a
... ... @@ -0,0 +1,1260 @@
  1 +<template>
  2 + <view class="content">
  3 + <view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">
  4 + <scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" >
  5 + <view class="content">
  6 + <view class="goodInfo">
  7 + <view class="imageWrap">
  8 + <image
  9 + :src="goodInfo.img_index_url"
  10 + mode="aspectFill"
  11 + style="width: 188rpx;height: 168rpx;"
  12 + ></image>
  13 + </view>
  14 + <view class="infoRight">
  15 + <text class="goodName">{{goodInfo.p_name}}</text>
  16 + <text class="remarks">支持7天无理由退货 顺丰发货</text>
  17 + <view class="priceBox">
  18 + <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view>
  19 + <text>(限购{{maxCount}}副)</text>
  20 + <view class="counter">
  21 + <view
  22 + class="btn"
  23 + disabled="this.addDisabled"
  24 + type="default"
  25 + @click="counter(false)"
  26 + >-</view>
  27 + <text>{{count}}</text>
  28 + <view
  29 + class="btn"
  30 + disabled="this.desDisabled"
  31 + type="default"
  32 + @click="counter(true)"
  33 + >+</view>
  34 + </view>
  35 + </view>
  36 + </view>
  37 + </view>
  38 + <view class="peopleChoose">
  39 + <view class="title">选择使用人</view>
  40 + <view class="loveList">
  41 + <view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
  42 + @click="onClickLoveItem(index,item.name)">
  43 + {{item.name}}
  44 + </view>
  45 + </view>
  46 + </view>
  47 + <view class="goods-data">
  48 + <view class="opCollapse">
  49 + <view class="body">
  50 + <template v-if="opIsOpen">
  51 + <view class="goods-form">
  52 + <view class="p1">
  53 + <image class="image2" src="../../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
  54 + 填写验光数据
  55 + </view>
  56 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  57 + <view class="picker">
  58 + <view class="picker-choice">
  59 + <view class="choice-left">
  60 + <text class="pd">验光单取名:</text>
  61 + </view>
  62 + <input type="text" @blur="handleInput" class="input"
  63 + placeholder="请输入名称" maxlength="20" :value="name" />
  64 + </view>
  65 + </view>
  66 + <view class="picker" >
  67 + <view class="picker-choice">
  68 + <view class="choice-left">
  69 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  70 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  71 + </view>
  72 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  73 + <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
  74 + <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  75 + <view class="p14">
  76 + {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
  77 + <image src="../../../static/detail-tabicon.png" ></image>
  78 + </view>
  79 + <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
  80 + </picker>
  81 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  82 + <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
  83 + <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
  84 + <view class="p14">
  85 + {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
  86 + <image src="../../../static/detail-tabicon.png" ></image>
  87 + </view>
  88 + <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
  89 + </picker>
  90 + </view>
  91 + </view>
  92 + <view class="picker" >
  93 + <view class="picker-choice">
  94 + <view class="choice-left">
  95 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  96 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  97 + </view>
  98 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  99 + <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
  100 + <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
  101 + <view class="p14">
  102 + {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
  103 + <image src="../../../static/detail-tabicon.png" ></image>
  104 + </view>
  105 + <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
  106 + </picker>
  107 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  108 + <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
  109 + <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
  110 + <view class="p14">
  111 + {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
  112 + <image src="../../../static/detail-tabicon.png" ></image>
  113 + </view>
  114 + <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
  115 + </picker>
  116 + </view>
  117 + </view>
  118 + <view class="picker" >
  119 + <view class="picker-choice">
  120 + <view class="choice-left">
  121 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  122 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  123 + </view>
  124 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  125 + <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
  126 + <view class="p14">
  127 + {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
  128 + <image src="../../../static/detail-tabicon.png" ></image>
  129 + </view>
  130 + </picker>
  131 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  132 + <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
  133 + <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
  134 + <view class="p14">
  135 + {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
  136 + <image src="../../../static/detail-tabicon.png" ></image>
  137 + </view>
  138 + <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
  139 + </picker>
  140 + </view>
  141 + </view>
  142 + <view class="picker">
  143 + <view class="picker-choice">
  144 + <view class="choice-left">
  145 + <text class="pd">瞳距:</text>
  146 + </view>
  147 + <input type="digit" @change="handleInputPd" class="input"
  148 + placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
  149 + </view>
  150 + </view>
  151 + <view class="picker" >
  152 + <view class="picker-choice">
  153 + <view class="choice-left">
  154 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  155 + </view>
  156 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  157 + <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
  158 + <view class="p14" style="width: 30px;">
  159 + {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
  160 + <image src="../../../static/detail-tabicon.png" ></image>
  161 + </view>
  162 + </picker>
  163 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  164 + <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
  165 + <view class="p14" style="width: 30px;">
  166 + {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
  167 + <image src="../../../static/detail-tabicon.png" ></image>
  168 + </view>
  169 + </picker>
  170 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  171 + <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
  172 + <view class="p14" style="width: 30px;">
  173 + {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
  174 + <image src="../../../static/detail-tabicon.png" ></image>
  175 + </view>
  176 + </picker>
  177 + </view>
  178 + </view>
  179 + <view class="confirm">
  180 + <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
  181 + <text>确认以上输入信息来源于我的验光数据!</text>
  182 + </view>
  183 + </view>
  184 + </template>
  185 + <template v-else>
  186 + <view
  187 + v-for="item in pickerInfoList"
  188 + :key="item.key"
  189 + class="bodyBox"
  190 + >
  191 + <template v-if="item.nameC==='验光日期'">
  192 + <text class="names">{{item.nameC}}</text>
  193 + <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
  194 + <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
  195 + <text>{{item.nameArray3[item.nameIndex2]}}日</text>
  196 + </template>
  197 + <template v-else>
  198 + <template v-if="item.nameC==='度数'">
  199 + <text style="display: inline;">*</text>
  200 + </template>
  201 +
  202 + <text class="names">{{item.nameC}}</text>
  203 + <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
  204 + <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
  205 + </template>
  206 + </view>
  207 + </template>
  208 + </view>
  209 + </view>
  210 + </view>
  211 + <view class="choose">
  212 + <view
  213 + class="chooseItem_1_content"
  214 + v-for="(item,index) in attrList"
  215 + :key="index"
  216 + >
  217 + <UniCollapse @change="changeShow(index)">
  218 + <UniCollapseItem
  219 + :open="show[index]"
  220 + :title="item.meta_name"
  221 + showAnimation=false
  222 + >
  223 + <view class="chooseItem_1_content">
  224 + <view class="itemsWrap">
  225 + <view
  226 + class="item2"
  227 + v-for="(one,i) in item.attr"
  228 + :key="i"
  229 + :class="{ active2: current[index] === i }"
  230 + @click="onClickItem(index, i)"
  231 + >{{one.name}}</view>
  232 + </view>
  233 + </view>
  234 + </UniCollapseItem>
  235 + </UniCollapse>
  236 + <view
  237 + class="chooseRes"
  238 + v-show="!show[index]"
  239 + >* {{attrList[index].attr[current[index]].name}}</view>
  240 + </view>
  241 + <!-- <view class="chooseItem_1 chooseItem">
  242 + <UniCollapse @change="change(1)">
  243 + <UniCollapseItem
  244 + open=true
  245 + title="款式挑选"
  246 + showAnimation=false
  247 + >
  248 + <view
  249 + class="chooseRes"
  250 + v-show="show[1]"
  251 + >* {{chooseRes1}}</view>
  252 + <view class="chooseItem_1_content">
  253 + <view class="itemsWrap">
  254 + <view
  255 + class="item1"
  256 + v-for="(item,index) in chooseItem1"
  257 + :key="index"
  258 + :style="item.style"
  259 + :class="{ active1: current1 === index }"
  260 + @click="onClickItem1(index)"
  261 + ></view>
  262 + </view>
  263 + </view>
  264 + </UniCollapseItem>
  265 + </UniCollapse>
  266 + <view
  267 + class="chooseRes"
  268 + v-show="show[1]"
  269 + >* {{chooseRes1}}</view>
  270 + </view>
  271 + <view class="chooseItem_2 chooseItem ">
  272 + <UniCollapse @change="change(2)">
  273 + <UniCollapseItem
  274 + open=true
  275 + title="直径"
  276 + showAnimation=false
  277 + >
  278 + <view class="chooseItem_1_content">
  279 + <view class="itemsWrap">
  280 + <view
  281 + class="item2"
  282 + v-for="(item,index) in chooseItem2"
  283 + :key="index"
  284 + :class="{ active2: current2 === index }"
  285 + @click="onClickItem2(index)"
  286 + >{{item.num}}</view>
  287 + </view>
  288 + </view>
  289 + </UniCollapseItem>
  290 + </UniCollapse>
  291 + <view
  292 + class="chooseRes"
  293 + v-show="show[2]"
  294 + >* {{chooseRes2}}</view>
  295 + </view>
  296 + <view class="chooseItem_3 chooseItem">
  297 + <UniCollapse @change="change(3)">
  298 + <UniCollapseItem
  299 + open=true
  300 + title="度数"
  301 + showAnimation=false
  302 + >
  303 + <view class="chooseItem_1_content">
  304 + <view class="itemsWrap">
  305 + <view
  306 + class="item2"
  307 + v-for="(item,index) in chooseItem3"
  308 + :key="index"
  309 + :class="{ active2: current3 === index }"
  310 + @click="onClickItem3(index)"
  311 + >{{item}}</view>
  312 + </view>
  313 + </view>
  314 + </UniCollapseItem>
  315 + </UniCollapse>
  316 + <view
  317 + class="chooseRes"
  318 + v-show="show[3]"
  319 + >* {{chooseRes3}}</view>
  320 + </view> -->
  321 + </view>
  322 + <view
  323 + class="button"
  324 + @click="toComfirmOrder"
  325 + >
  326 + 立即结算
  327 + </view>
  328 + </view>
  329 + </scroll-view>
  330 + </view>
  331 + </view>
  332 +</template>
  333 +<script>
  334 +import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  335 +import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
  336 +import store from '@/store'
  337 + export default {
  338 + components: {
  339 + UniCollapse,
  340 + UniCollapseItem,
  341 + },
  342 + props: {
  343 + isShowBottom : Boolean,
  344 + pid: Number,
  345 + goodInfo:Object
  346 + },
  347 + data() {
  348 + return {
  349 + loveCurrent:Number,
  350 + count: 1,
  351 + // pid: 0,
  352 + maxCount: 20,
  353 + dataName: '', // 验光数据人员名称
  354 + isDataName: false, // 是否是已存在的人员数据
  355 + dataConfirm: false, // 已确认所输入验光数据
  356 + opIsOpen: true,
  357 + addDisabled: false,
  358 + desDisabled: false,
  359 + // current1: 0,
  360 + // current2: 0,
  361 + // current3: 0,
  362 + current: [],
  363 + show: [],
  364 + chooseRes1: {
  365 + sku_name: 'Miss 黑二代【减龄自然】',
  366 + sk_id: '128',
  367 + },
  368 + checkedData: {},
  369 + chooseRes2: '14.0',
  370 + chooseRes3: 0,
  371 + chooseItem1: [
  372 + { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' },
  373 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' },
  374 + { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' },
  375 + { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
  376 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
  377 + { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
  378 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
  379 + { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
  380 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
  381 + { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
  382 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
  383 + { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
  384 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
  385 + { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
  386 + { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
  387 + ],
  388 + chooseItem2: [
  389 + { num: '14.0' },
  390 + { num: '14.2' },
  391 + { num: '14.4' },
  392 + { num: '14.5' },
  393 + ],
  394 + chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000],
  395 + // 度数相关数据
  396 + pickerInfoList: [
  397 + { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
  398 + { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
  399 + { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
  400 + { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
  401 + ],
  402 + confirm: false, // 用户是否确认
  403 + tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
  404 + name: '',
  405 + oldname: '', // 用于判读用户是否改变名字
  406 + pickerInfoChioce: {
  407 + leftSph: '',
  408 + rightSph: '',
  409 + leftCyl: '',
  410 + rightCyl: '',
  411 + leftAxi: '',
  412 + rightAxi: '',
  413 + time: {
  414 + year: 0,
  415 + month: 0,
  416 + day: 0,
  417 + },
  418 + },
  419 + pd: '', // 瞳距
  420 + oldpd: '', // 用于判断用户是否改变瞳距
  421 + kinds: 1, // kinds=1，提交为新增验光，2为修改
  422 + mp_id: Number,
  423 + }
  424 + },
  425 + computed: {
  426 + loveList() {
  427 + console.log('**********loveList',this.$store.state.myLoveList.loveList)
  428 + return this.$store.state.myLoveList.loveList || []
  429 + },
  430 + attrList() {
  431 + let attrList = this.$store.state.read.goodInfo.attrList
  432 + if(attrList !== undefined){
  433 + return attrList
  434 + }else{
  435 + return []
  436 + }
  437 + },
  438 + skuList() {
  439 + return this.$store.state.read.goodInfo.skuList
  440 + },
  441 + mpList() {
  442 + return this.$store.state.myLoveList.loveList
  443 + },
  444 + },
  445 + created() {
  446 + const pid = this.pid
  447 + console.log('this.goodInfo',this.goodInfo)
  448 + store.dispatch('read/fetch', {
  449 + pid,
  450 + }).then(() => {
  451 + const current = []
  452 + const show = []
  453 + for (let index = 0; index < this.attrList.length; index++) {
  454 + current.push(0)
  455 + show.push(true)
  456 + }
  457 + this.current = current
  458 + this.show = show
  459 + })
  460 +
  461 + //获取关心的人列表
  462 + store.dispatch('myLoveList/getLoveList', {
  463 + uid: this.$store.state.user.userInfo.uid,
  464 + });
  465 +
  466 + store.dispatch('myLoveList/getLoveList')
  467 +
  468 + // 初始化SPL、CYL、AXI的值
  469 + for (let j = 0; j < 3; j++) {
  470 + for (let i = -12; i < 6; i++) {
  471 + this.pickerInfoList[j].nameArray1.push(i)
  472 + this.pickerInfoList[j].nameArray1.push(i + 0.5)
  473 + this.pickerInfoList[j].nameArray2.push(i)
  474 + this.pickerInfoList[j].nameArray2.push(i + 0.5)
  475 + if (i >= -6) {
  476 + this.pickerInfoList[j].nameArray1.push(i + 0.25)
  477 + this.pickerInfoList[j].nameArray1.push(i + 0.75)
  478 + this.pickerInfoList[j].nameArray2.push(i + 0.25)
  479 + this.pickerInfoList[j].nameArray2.push(i + 0.75)
  480 + }
  481 + if (i === 5) {
  482 + this.pickerInfoList[j].nameArray1.push(i + 1)
  483 + this.pickerInfoList[j].nameArray2.push(i + 1)
  484 + }
  485 + }
  486 + }
  487 + // 初始化日期值
  488 + for (let i = 1; i < 32; i++) {
  489 + this.pickerInfoList[3].nameArray3.push(i)
  490 + }
  491 + // 初始化年份前后五年
  492 + const myDate = new Date()
  493 + const nowYear = myDate.getFullYear()
  494 + for (let i = 0; i < 5; i++) {
  495 + this.pickerInfoList[3].nameArray1.push(nowYear - i)
  496 + }
  497 + },
  498 + name : "bottomSheet",
  499 + methods: {
  500 + onClickLoveItem(index,name){
  501 + const loveList = this.loveList
  502 + for (let index = 0; index < loveList.length; index++) {
  503 + if (name === loveList[index].name && name!==this.name) {
  504 + this.isDataName = true
  505 + uni.showModal({
  506 + title: '提示',
  507 + content: `是否填充已有的"${name}"的数据`,
  508 + success: (res) => {
  509 + if (res.confirm) {
  510 + this.kinds = 2
  511 + this.name = loveList[index].name
  512 + this.pd = loveList[index].pd
  513 + this.mp_id = loveList[index].mp_id
  514 + this.oldname = loveList[index].name
  515 + this.oldpd = loveList[index].pd
  516 + this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
  517 + this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
  518 + this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
  519 + this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
  520 + this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
  521 + this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
  522 + this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
  523 + if (loveList[index].in_time.toString().slice(5, 6) === 0) {
  524 + this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
  525 + } else {
  526 + this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
  527 + }
  528 + if (loveList[index].in_time.toString().slice(8, 9) === 0) {
  529 + this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
  530 + } else {
  531 + this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
  532 + }
  533 + } else if (res.cancel) {
  534 + this.kinds = 2
  535 + }
  536 + },
  537 + })
  538 + }
  539 + }
  540 + this.name = name;
  541 + this.loveCurrent = index;
  542 + },
  543 + closeSheet(){
  544 + this.$emit('closeBottom');
  545 + },
  546 + stopEvent(){ //@click.stop防止事件冒泡
  547 +
  548 + },
  549 + moveHandle(){ //不让页面滚动
  550 +
  551 + },
  552 + // picker相关功能
  553 + handleInput(e) {
  554 + this.name = e.target.value
  555 + this.isDataName = false
  556 + console.log('e---->', e)
  557 + const mpList = this.mpList
  558 + // console.log('mpList===>', mpList)
  559 + for (let index = 0; index < mpList.length; index++) {
  560 + if (e.detail.value === mpList[index].name) {
  561 + this.isDataName = true
  562 + uni.showModal({
  563 + title: '提示',
  564 + content: `是否填充已有的"${e.detail.value}"的数据`,
  565 + success: (res) => {
  566 + if (res.confirm) {
  567 + this.kinds = 2
  568 + console.log('args===>', index)
  569 + // const mpList=Object.assign({},this.$store.state.mympList.mpList)
  570 + console.log('mpList===>', mpList)
  571 + this.name = mpList[index].name
  572 + this.pd = mpList[index].pd
  573 + this.mp_id = mpList[index].mp_id
  574 + this.oldname = mpList[index].name
  575 + this.oldpd = mpList[index].pd
  576 + // 将kinds =2时的值传到该页面
  577 + this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
  578 + this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
  579 + this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
  580 + this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
  581 + this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
  582 + this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
  583 + this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
  584 + if (mpList[index].in_time.toString().slice(5, 6) === 0) {
  585 + this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
  586 + } else {
  587 + this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
  588 + }
  589 + if (mpList[index].in_time.toString().slice(8, 9) === 0) {
  590 + this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
  591 + } else {
  592 + this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
  593 + }
  594 + // this.checkedData = mpList[index]
  595 + // console.log('checkedData', this.checkedData)
  596 + } else if (res.cancel) {
  597 + this.kinds = 2
  598 + }
  599 + },
  600 + })
  601 + }
  602 + }
  603 + },
  604 + handleInputPd(e) {
  605 + // 只能输入正浮点数或正数
  606 + if (/^\d+(\.\d+)?$/.test(e.target.value)) {
  607 + this.pd = e.target.value
  608 + } else {
  609 + uni.showToast({
  610 + title: '请输入有效数据;示例:89',
  611 + icon: 'none',
  612 + duration: 2000,
  613 + })
  614 + this.pd = ''
  615 + }
  616 + },
  617 + changeConfirm() {
  618 + this.confirm = !this.confirm
  619 + },
  620 + bindPickerChange01: function(e) {
  621 + this.pickerInfoList[0].nameIndex1 = e.target.value
  622 + this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
  623 + },
  624 + bindPickerChange02: function(e) {
  625 + this.pickerInfoList[0].nameIndex2 = e.target.value
  626 + this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
  627 + },
  628 +
  629 + bindPickerChange11: function(e) {
  630 + this.pickerInfoList[1].nameIndex1 = e.target.value
  631 + this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
  632 + },
  633 + bindPickerChange12: function(e) {
  634 + this.pickerInfoList[1].nameIndex2 = e.target.value
  635 + this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
  636 + },
  637 +
  638 + bindPickerChange21: function(e) {
  639 + this.pickerInfoList[2].nameIndex1 = e.target.value
  640 + this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
  641 + },
  642 + bindPickerChange22: function(e) {
  643 + this.pickerInfoList[2].nameIndex2 = e.target.value
  644 + this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
  645 + },
  646 +
  647 + bindPickerChange41: function(e) {
  648 + this.pickerInfoList[3].nameIndex1 = e.target.value
  649 + this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
  650 + },
  651 + bindPickerChange42: function(e) {
  652 + this.pickerInfoList[3].nameIndex2 = e.target.value
  653 + this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
  654 + },
  655 + bindPickerChange43: function(e) {
  656 + this.pickerInfoList[3].nameIndex3 = e.target.value
  657 + this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
  658 + },
  659 + changeShow(num) {
  660 + this.show[num] = !this.show[num]
  661 + this.$forceUpdate()
  662 + },
  663 + onClickItem(index, i) {
  664 + if (this.current[index] !== i) {
  665 + this.current[index] = i
  666 + }
  667 + this.$forceUpdate()
  668 + },
  669 + counter(isadd) {
  670 + if (isadd) {
  671 + this.count >= this.maxCount ? this.addDisabled = true : this.count++
  672 + } else {
  673 + this.count <= 1 ? this.desDisabled = true : this.count--
  674 + }
  675 + },
  676 + toComfirmOrder() {
  677 + // 先处理验光部分的逻辑，如果ok在跳转
  678 + let flag = 0
  679 + if (this.name === '') {
  680 + uni.showToast({
  681 + title: '请输入验光单取名',
  682 + icon: 'none',
  683 + duration: 2000,
  684 + })
  685 + } else {
  686 + if (this.pd === '') {
  687 + uni.showToast({
  688 + title: '请输入瞳距',
  689 + icon: 'none',
  690 + duration: 2000,
  691 + })
  692 + } else {
  693 + if (this.kinds === 1) {
  694 + // 添加用户验光单
  695 + console.log('kinds====>', this.pickerInfoChioce.leftSph)
  696 + console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
  697 + console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
  698 + if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
  699 + this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
  700 + this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
  701 + ) {
  702 + uni.showToast({
  703 + title: '请输入您的验光数据',
  704 + icon: 'none',
  705 + duration: 2000,
  706 + })
  707 + } else {
  708 + if (this.confirm) {
  709 + store.dispatch('myLoveList/addMylove', {
  710 + uid: this.$store.state.user.userInfo.uid,
  711 + openid: this.$store.state.user.userInfo.openid,
  712 + // mp_name: this.$store.state.user.userInfo.mp_name,
  713 + leftSph: this.pickerInfoChioce.leftSph,
  714 + rightSph: this.pickerInfoChioce.rightSph,
  715 + leftCyl: this.pickerInfoChioce.leftCyl,
  716 + rightCyl: this.pickerInfoChioce.rightCyl,
  717 + leftAxi: this.pickerInfoChioce.leftAxi,
  718 + rightAxi: this.pickerInfoChioce.rightAxi,
  719 + pd: this.pd, // 瞳距
  720 + mp_name: this.name,
  721 + // time: this.pickerInfoChioce.time,
  722 + // img_url2: "http://localhost:8087/images/shop_1/1/",
  723 + }).then(({ mp_id: mpId }) => {
  724 + this.mp_id = mpId
  725 + })
  726 + flag = 1
  727 + } else {
  728 + uni.showToast({
  729 + title: '请确认您的验光数据',
  730 + icon: 'none',
  731 + duration: 3000,
  732 + })
  733 + }
  734 + }
  735 + }
  736 + if (this.kinds === 2) {
  737 + if (this.confirm) {
  738 + const leftList = ['leftSph', 'leftCyl', 'leftAxi']
  739 + const rightList = ['rightSph', 'rightCyl', 'rightAxi']
  740 + // let flag=0;
  741 + if (this.name !== this.oldname) {
  742 + store.dispatch('myLoveList/updateMylove', {
  743 + uid: this.$store.state.user.userInfo.uid,
  744 + openid: this.$store.state.user.userInfo.openid,
  745 + mp_id: this.mp_id,
  746 + keyname: 'name',
  747 + keyvalue: this.name,
  748 + })
  749 + flag = 1
  750 + }
  751 + if (this.pd !== this.oldpd) {
  752 + store.dispatch('myLoveList/updateMylove', {
  753 + uid: this.$store.state.user.userInfo.uid,
  754 + openid: this.$store.state.user.userInfo.openid,
  755 + mp_id: this.mp_id,
  756 + keyname: 'pd',
  757 + keyvalue: this.pd,
  758 + })
  759 + flag = 1
  760 + }
  761 + // 先验证是否输入有无空
  762 + let q = true
  763 + for (let k = 0; k < 3; k++) {
  764 + q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
  765 + this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
  766 + }
  767 + if (q) {
  768 + for (let j = 0; j < 3; j++) {
  769 + if (this.pickerInfoList[j].nameIndex1 !== 0) {
  770 + store.dispatch('myLoveList/updateMylove', {
  771 + uid: this.$store.state.user.userInfo.uid,
  772 + openid: this.$store.state.user.userInfo.openid,
  773 + mp_id: this.mp_id,
  774 + keyname: leftList[j],
  775 + keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
  776 + })
  777 + }
  778 + if (this.pickerInfoList[j].nameIndex2 !== 0) {
  779 + store.dispatch('myLoveList/updateMylove', {
  780 + uid: this.$store.state.user.userInfo.uid,
  781 + openid: this.$store.state.user.userInfo.openid,
  782 + mp_id: this.mp_id,
  783 + keyname: rightList[j],
  784 + keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
  785 + })
  786 + }
  787 + flag = 1
  788 + }
  789 + } else {
  790 + flag = 0
  791 + uni.showToast({
  792 + title: '请输入您的验光数据',
  793 + icon: 'none',
  794 + duration: 2000,
  795 + })
  796 + }
  797 + if (flag !== 0) {
  798 + store.dispatch('myLoveList/getLoveList', {
  799 + uid: this.$store.state.user.userInfo.uid,
  800 + })
  801 + }
  802 + } else {
  803 + uni.showToast({
  804 + title: '请确认您的验光数据',
  805 + icon: 'none',
  806 + duration: 3000,
  807 + })
  808 + }
  809 + }
  810 + }
  811 + }
  812 + if (flag !== 0) {
  813 + // 如果数据验证无误，那么更新验光单的数据
  814 + store.dispatch('myLoveList/getLoveList', {
  815 + uid: this.$store.state.user.userInfo.uid,
  816 + })
  817 + let i = 0
  818 + // 判断出是哪一个sku被选中
  819 + for (let index = 0; index < this.current.length; index++) {
  820 + console.log('index', index, i, index !== this.current.length - 1)
  821 + if (index !== this.current.length - 1) {
  822 + // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
  823 + i = this.current[index] * this.attrList[1].attr.length
  824 + } else {
  825 + i += this.current[index]
  826 + }
  827 + }
  828 + // 判断是否其输入的人员数据是否已存在
  829 + store.dispatch('order/saveParams', {
  830 + sk_id_arr: this.skuList[i],
  831 + current: this.current,
  832 + mp_id: this.mp_id,
  833 + attrList: this.attrList,
  834 + })
  835 + // 跳转到确认订单页面
  836 + uni.navigateTo({
  837 + url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
  838 + })
  839 + }
  840 + },
  841 + }
  842 + }
  843 +</script>
  844 +
  845 +<style lang="scss">
  846 + .content {
  847 + min-height: 100vh;
  848 + background-color: #f2f2f2;
  849 + // padding-top: 20rpx;
  850 + .goodInfo {
  851 + width: 100%;
  852 + height: 272rpx;
  853 + border-radius: 16rpx;
  854 + background-color: #ffffff;
  855 + box-sizing: border-box;
  856 + padding: 36rpx;
  857 + display: flex;
  858 + flex-direction: row;
  859 + justify-content: flex-start;
  860 + .imageWrap {
  861 + height: 188rpx;
  862 + width: 188rpx;
  863 + margin-right: 28rpx;
  864 + image {
  865 + height: 188rpx;
  866 + width: 188rpx;
  867 + }
  868 + }
  869 + .infoRight {
  870 + display: flex;
  871 + flex-direction: column;
  872 + align-items: flex-start;
  873 + justify-content: space-between;
  874 + .goodName {
  875 + font-size: 28rpx;
  876 + color: #333333;
  877 + }
  878 + .remarks {
  879 + font-size: 20rpx;
  880 + color: #999999;
  881 + }
  882 + .priceBox {
  883 + display: flex;
  884 + justify-content: space-between;
  885 + align-items: center;
  886 + width: 100%;
  887 + font-size: 14px;
  888 + color: #999999;
  889 + .price {
  890 + color: #ff6b4a;
  891 + font-size: 28rpx;
  892 + }
  893 + .counter {
  894 + display: flex;
  895 + flex-direction: row;
  896 + justify-content: space-between;
  897 + align-items: center;
  898 + font-size: 28rpx;
  899 + color: #333333;
  900 + width: 122rpx;
  901 + .btn {
  902 + display: flex;
  903 + justify-content: center;
  904 + line-height: 32rpx;
  905 + height: 32rpx;
  906 + width: 32rpx;
  907 + background-color: #f2f2f2;
  908 + color: #cfcfcf;
  909 + }
  910 + }
  911 + }
  912 + }
  913 + }
  914 + .peopleChoose{
  915 + width: 100%;
  916 + min-height: 200rpx;
  917 + border-radius: 16rpx;
  918 + background-color: #ffffff;
  919 + box-sizing: border-box;
  920 + padding: 36rpx;
  921 + margin: 10px 0;
  922 + display: flex;
  923 + flex-direction: column;
  924 + justify-content: flex-start;
  925 + align-items: center;
  926 + .title{
  927 + font-size: 16px;
  928 + color: #333333;
  929 + letter-spacing: -0.3px;
  930 + text-align: justify;
  931 + line-height: 24px;
  932 + margin: 4px 0;
  933 + }
  934 + .loveList{
  935 + display: flex;
  936 + flex-direction: row;
  937 + flex-wrap: wrap;
  938 + justify-content: flex-start;
  939 + align-items: center;
  940 + padding-top: 24rpx;
  941 + width: 100%;
  942 + .peopleName {
  943 + padding: 0 30rpx;
  944 + height: 60rpx;
  945 + margin: 0 20rpx 20rpx 0;
  946 + transition: all 0.3s;
  947 + background: #f2f2f2;
  948 + border-radius: 2px;
  949 + border-radius: 2px;
  950 + line-height: 60rpx;
  951 + text-align: center;
  952 + color: #666666;
  953 + font-size: 12px;
  954 + }
  955 + .active2 {
  956 + background: rgba(255, 107, 74, 0.15);
  957 + color: #ff6b4a;
  958 + }
  959 + }
  960 + }
  961 + .goods-data {
  962 + width: 100%;
  963 + box-sizing: border-box;
  964 + padding: 37rpx 40rpx 0 40rpx;
  965 + background: #ffffff;
  966 + border-radius: 12rpx;
  967 + .opCollapse {
  968 + width: 100%;
  969 + padding-bottom: 28rpx;
  970 + margin-top: 7px;
  971 + border-bottom: 1px solid #e9e9e9;
  972 + .head {
  973 + display: flex;
  974 + justify-content: space-between;
  975 + height: 24px;
  976 + // font-family: PingFangSC-Medium;
  977 + font-size: 16px;
  978 + color: #333333;
  979 + letter-spacing: -0.3px;
  980 + text-align: justify;
  981 + line-height: 24px;
  982 + margin-bottom: 18rpx;
  983 + .headRighted {
  984 + width: 0;
  985 + height: 0;
  986 + border-left: 4px solid transparent;
  987 + border-right: 4px solid transparent;
  988 + border-bottom: 4px solid #cfcfcf;
  989 + transform: scaleY(-1);
  990 + margin-top: 10px;
  991 + }
  992 + .headMid {
  993 + font-size: 10px;
  994 + color: #999999;
  995 + letter-spacing: -0.19px;
  996 + margin-left: -120rpx;
  997 + }
  998 + .headRight {
  999 + width: 0;
  1000 + height: 0;
  1001 + border-left: 4px solid transparent;
  1002 + border-right: 4px solid transparent;
  1003 + border-bottom: 4px solid #cfcfcf;
  1004 + margin-top: 10px;
  1005 + }
  1006 + }
  1007 + .body {
  1008 + font-size: 12px;
  1009 + color: #666666;
  1010 + letter-spacing: 0;
  1011 + .bodyBox {
  1012 + margin-top: 15px;
  1013 + .names {
  1014 + font-size: 12px;
  1015 + color: #151515;
  1016 + letter-spacing: 0;
  1017 + text-align: justify;
  1018 + line-height: 17px;
  1019 + margin-left: 5px;
  1020 + margin-right: 10px;
  1021 + }
  1022 + text {
  1023 + font-size: 12px;
  1024 + color: #666666;
  1025 + letter-spacing: 0;
  1026 + text-align: justify;
  1027 + }
  1028 + }
  1029 + }
  1030 + .goods-form {
  1031 + display: flex;
  1032 + flex-direction: column;
  1033 + align-items: center;
  1034 + justify-content: center;
  1035 + background-color: #fff;
  1036 + width: 100%;
  1037 + padding: 40rpx 0;
  1038 + .p1 {
  1039 + font-size: 16px;
  1040 + color: #333333;
  1041 + letter-spacing: -0.3px;
  1042 + text-align: justify;
  1043 + line-height: 24px;
  1044 + margin: 4px 0;
  1045 +
  1046 + }
  1047 + .p2 {
  1048 + font-size: 12px;
  1049 + color: #999999;
  1050 + letter-spacing: -0.23px;
  1051 + margin-bottom: 32rpx;
  1052 + }
  1053 + .image2{
  1054 + width: 42rpx;
  1055 + height: 34rpx;
  1056 + margin-right: 12rpx;
  1057 + }
  1058 + .confirm {
  1059 + display: flex;
  1060 + align-items: center;
  1061 + font-size: 12px;
  1062 + color: #666666;
  1063 + letter-spacing: -0.23px;
  1064 + width: 684rpx;
  1065 + .image1{
  1066 + margin-right:25rpx;
  1067 + width: 42rpx;
  1068 + height: 38rpx;
  1069 + }
  1070 + }
  1071 + .picker{
  1072 + display: flex;
  1073 + flex-direction: column;
  1074 + justify-content: center;
  1075 + align-items: center;
  1076 + width: 100%;
  1077 +
  1078 + .picker-choice{
  1079 + display: flex;
  1080 + width: 684rpx;
  1081 + align-items: center;
  1082 + margin-bottom: 40rpx;
  1083 + .input{
  1084 + border-bottom: 1px solid #CFCFCF;
  1085 + height: 40rpx;
  1086 + }
  1087 + .choice-left{
  1088 + width: 210rpx;
  1089 + .pd{
  1090 + font-size: 14px;
  1091 + color: #333333;
  1092 + letter-spacing: -0.26px;
  1093 + text-align: justify;
  1094 + line-height: 24px;
  1095 + margin-right: 44rpx;
  1096 + }
  1097 + .p11 {
  1098 + font-size: 14px;
  1099 + color: #333333;
  1100 + letter-spacing: -0.26px;
  1101 + text-align: justify;
  1102 + line-height: 24px;
  1103 + // margin-right: 10px;
  1104 + }
  1105 + .p12 {
  1106 + font-size: 10px;
  1107 + color: #3F3F3F;
  1108 + letter-spacing: -0.19px;
  1109 + text-align: justify;
  1110 + line-height: 24px;
  1111 + }
  1112 +
  1113 + }
  1114 + .p13 {
  1115 + font-size: 10px;
  1116 + color: #999999;
  1117 + letter-spacing: -0.19px;
  1118 + margin-right: 10px;
  1119 + }
  1120 + .p13-date {
  1121 + font-size: 10px;
  1122 + color: #999999;
  1123 + letter-spacing: -0.19px;
  1124 + margin-right: 5px;
  1125 + }
  1126 + picker{
  1127 + width: 144rpx;
  1128 + height: 40rpx;
  1129 + display: flex;
  1130 + position: relative;
  1131 + .p14 {
  1132 + font-size: 14px;
  1133 + color: #666666;
  1134 + letter-spacing: -0.26px;
  1135 + text-align: center;
  1136 + width: 124rpx;
  1137 + border-bottom: 1px solid #CFCFCF;
  1138 + height: 38rpx;
  1139 + }
  1140 + image{
  1141 + width: 20rpx;
  1142 + height: 20rpx;
  1143 + position: absolute;
  1144 + right: 20rpx;
  1145 + top: 8rpx;
  1146 + }
  1147 + }
  1148 +
  1149 + }
  1150 + }
  1151 + }
  1152 + }
  1153 + }
  1154 + .choose {
  1155 + width: 100%;
  1156 + background: #ffffff;
  1157 + border-radius: 12rpx;
  1158 + margin-top: 20rpx;
  1159 + padding: 40rpx 40rpx 112rpx 40rpx;
  1160 + box-sizing: border-box;
  1161 + .chooseItem {
  1162 + width: 100%;
  1163 + padding-bottom: 32rpx;
  1164 + border-bottom: 1px solid #e9e9e9;
  1165 + margin-bottom: 28rpx;
  1166 + }
  1167 + .chooseRes {
  1168 + font-size: 12px;
  1169 + color: #666666;
  1170 + }
  1171 + .itemsWrap {
  1172 + display: flex;
  1173 + flex-direction: row;
  1174 + flex-wrap: wrap;
  1175 + justify-content: flex-start;
  1176 + align-items: center;
  1177 + padding-top: 24rpx;
  1178 + .item1 {
  1179 + width: 64rpx;
  1180 + height: 64rpx;
  1181 + border-radius: 32rpx;
  1182 + margin: 0 36rpx 24rpx 0;
  1183 + transition: all 0.3s;
  1184 + border: 1px solid #ffffff;
  1185 + }
  1186 + .item2 {
  1187 + // width: 100rpx;
  1188 + padding: 0 30rpx;
  1189 + height: 60rpx;
  1190 + margin: 0 20rpx 20rpx 0;
  1191 + transition: all 0.3s;
  1192 + background: #f2f2f2;
  1193 + border-radius: 2px;
  1194 + border-radius: 2px;
  1195 + line-height: 60rpx;
  1196 + text-align: center;
  1197 + color: #666666;
  1198 + font-size: 12px;
  1199 + }
  1200 + .active1 {
  1201 + opacity: 0.7;
  1202 + border: 1px solid #ff6b4a;
  1203 + }
  1204 + .active2 {
  1205 + background: rgba(255, 107, 74, 0.15);
  1206 + color: #ff6b4a;
  1207 + }
  1208 + }
  1209 + }
  1210 + .button {
  1211 + width: 100%;
  1212 + height: 112rpx;
  1213 + background-color: #ff6b4a;
  1214 + font-size: 16px;
  1215 + color: #ffffff;
  1216 + line-height: 112rpx;
  1217 + text-align: center;
  1218 + // position: absolute;
  1219 + bottom: 0;
  1220 + left: 0;
  1221 + }
  1222 + }
  1223 + /* sheet弹窗 */
  1224 + .sheet{
  1225 + width: 100%;
  1226 + height: 100%;
  1227 + position: fixed;
  1228 + top: 150%;
  1229 + left: 0upx;
  1230 + bottom: 0upx;
  1231 + right: 0upx;
  1232 + background:rgba(0,0,0,0.3);
  1233 + z-index: 10000;
  1234 + }
  1235 +
  1236 + /* 显示时候的动画默认0.5s */
  1237 + .sheetView{
  1238 + width: 100%;
  1239 + height: 0upx;
  1240 + position: absolute;
  1241 + bottom: 0upx;
  1242 + background: white;
  1243 + z-index: 10001;
  1244 + transition: all 0.5s;
  1245 + }
  1246 + .sheetShow{
  1247 + top:0upx !important;
  1248 + }
  1249 + /* 关闭时的动画，时间自己可以设置0.5s*/
  1250 + .sheeHide{
  1251 + top:120% !important;
  1252 + transition: all 0.5s;
  1253 + }
  1254 +
  1255 + /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
  1256 + .sheetView_active{
  1257 + height: 942upx;
  1258 + }
  1259 +
  1260 +</style>
... ...
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @607bc3a
... ... @@ -321,18 +321,25 @@
321 321 >加入购物车</view>
322 322 <view
323 323 class="botton_now"
324   - @tap="goPerchase()"
  324 +
  325 + @click="showBottom()"
325 326 >立即购买</view>
326 327 </view>
327   - </view>
  328 + </view>
  329 + <BottomSheet v-if="isShowBottom" :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
328 330 </view>
329 331 </template>
330 332  
331 333 <script>
332   -import store from '@/store'
333   -export default {
  334 +import store from '@/store'
  335 +import BottomSheet from './components/BottomSheet.vue';
  336 +export default {
  337 + components:{
  338 + BottomSheet,
  339 + },
334 340 data () {
335   - return {
  341 + return {
  342 + isShowBottom : false, //底部弹窗开关
336 343 test: '',
337 344 goodType: 2,
338 345 pid: 0,
... ... @@ -413,14 +420,21 @@ export default {
413 420 return this.goodType
414 421 },
415 422 goodInfo () {
416   - console.log(this.$store.state.read.goodInfo)
  423 + // console.log(this.$store.state.read.goodInfo)
417 424 return this.$store.state.read.goodInfo
418 425 },
419 426 cartNumber() {
420 427 return this.$store.state.cart.cartList.length || 0
421 428 },
422 429 },
423   - methods: {
  430 + methods: {
  431 + //底部弹窗开关
  432 + showBottom(){
  433 + this.isShowBottom = true;
  434 + },
  435 + closeBottom(){
  436 + this.isShowBottom = false;
  437 + },
424 438 // 前往购物车
425 439 toCart() {
426 440 uni.switchTab({
... ... @@ -799,8 +813,8 @@ export default {
799 813 }
800 814 }
801 815 image {
802   - width: 60%;
803   - height: 30px;
  816 + width: 42%;
  817 + height: 26px;
804 818 }
805 819 .botton_image {
806 820 font-size: 12px;
... ... @@ -830,5 +844,11 @@ export default {
830 844 color: #ffffff;
831 845 border-radius: 0 20px 20px 0;
832 846 }
833   -}
  847 +}
  848 +/* 隐藏滚动条 */
  849 + ::-webkit-scrollbar {
  850 + width: 0;
  851 + height: 0;
  852 + color: transparent;
  853 + }
834 854 </style>
... ...
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @607bc3a
... ... @@ -45,7 +45,7 @@
45 45 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
46 46 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
47 47 </view>
48   - <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
  48 + <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
49 49 <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
50 50 <view class="infoText">
51 51 <view class="orderName">{{orderInfo.p_name}}</view>
... ... @@ -64,7 +64,7 @@
64 64 <view class="btns" v-if="status == '1'">
65 65 <view class="btn-type2">确认收货</view>
66 66 </view>
67   - <view class="btns" v-if="status == '2'">
  67 + <view class="btns" v-if="status == '2'||status == '3'">
68 68 <view class="btn-type2">再次购买</view>
69 69 </view>
70 70 <!-- <view class="btns" v-if="status == '3'">
... ... @@ -164,8 +164,8 @@
164 164 return this.order.status
165 165 },
166 166 orderInfoList(){
167   - console.log('this.order.order_info[0]', this.order)
168   - return this.order.order_info[0]
  167 + console.log('this.order.order_info', this.order)
  168 + return this.order.order_info
169 169 }
170 170 },
171 171 data() {
... ...
src/pages/myOrder/myOrder.vue
Diff comments   View file @607bc3a
... ... @@ -67,7 +67,7 @@ export default {
67 67 },
68 68 computed: {
69 69 orderList() {
70   - // console.log('orderList', this.$store.state.myOrder.orderList);
  70 + console.log('orderList', this.$store.state.myOrder.orderList);
71 71 return this.$store.state.myOrder.orderList
72 72 },
73 73 },
... ...
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @607bc3a
... ... @@ -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[0].total_fee}}</text>
  83 + <text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
84 84 </text>
85 85 <text class="order-info-num">
86 86 <text>订单号：{{payId}}</text>
87 87 </text>
88 88 <text class="order-info-time">
89   - <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text>
  89 + <text>下单时间：{{orderInfo.order_info.pay_time | timerChange}}</text>
90 90 </text>
91 91 <view class="order-info-hr"></view>
92 92 <view class="order-info-contact">
... ... @@ -140,11 +140,11 @@ export default {
140 140 isPay: 0,
141 141 }
142 142 },
143   - onLoad: function (option) {
144   - console.log(option)
145   - this.payId = option.payId
146   - this.status = option.status
147   - this.isPay = option.isPay
  143 + onLoad: function ({payId,state,isPay}) {
  144 + console.log('++++++++++++++++++',payId,state,isPay)
  145 + this.payId = payId
  146 + this.status = state
  147 + this.isPay = isPay
148 148 const openid = uni.getStorageSync('openid')
149 149 const uid = this.$store.state.user.uid
150 150 this.uid = uid
... ... @@ -172,16 +172,16 @@ export default {
172 172 return this.$store.state.orderRead.orderInfo || {}
173 173 },
174 174 orderInfoList () {
175   - const orderInfoList = this.orderInfo.order_info[0].list
  175 + const orderInfoList = this.$store.state.orderRead.orderInfo.order_info.list
176 176 return orderInfoList
177 177 },
178 178 // 获取订单地址信息
179 179 orderAddressInfo () {
180   - return this.orderInfo.order_info[0].address
  180 + return this.orderInfo.order_info.address
181 181 },
182 182 // 订单付款时间
183 183 getTime () {
184   - return this.orderInfo.order_info[0].lefttime
  184 + return this.orderInfo.order_info.lefttime
185 185 },
186 186 // 计算总优惠额
187 187 totalDiscount () {
... ...
src/store/modules/cart.js
Diff comments   View file @607bc3a
... ... @@ -36,12 +36,12 @@ const actions = {
36 36 console.log('cart===>接口数据', res.data.data)
37 37 commit('INIT', res.data.data)
38 38 },
39   - fail: (res) => {
40   - console.log('fail status === > ', res)
41   - },
42   - complete: (res) => {
43   - console.log('complete status === > ', res)
44   - },
  39 + // fail: (res) => {
  40 + // console.log('fail status === > ', res)
  41 + // },
  42 + // complete: (res) => {
  43 + // console.log('complete status === > ', res)
  44 + // },
45 45 })
46 46 },
47 47 // 修改购物车数量
... ...
src/store/modules/orderRead.js
Diff comments   View file @607bc3a
... ... @@ -21,7 +21,8 @@ const actions = {
21 21 url: orderRead,
22 22 data: param,
23 23 success: (res) => {
24   - commit("INIT", res.data.data)
  24 + commit("INIT", res.data.data)
  25 + console.log('res',res)
25 26 }
26 27 })
27 28 }
... ...