Commit 7fed8e81e2789f8fa34488ba7a381cb4cb04c0b9
1 parent
f555383d95
Exists in
master
样式修改
Showing
1 changed file
with
7 additions
and
2 deletions
Show diff stats
src/pages/purchaseLenses/purchaseLenses.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="goodInfo"> | 3 | <view class="goodInfo"> |
| 4 | <view class="imageWrap"> | 4 | <view class="imageWrap"> |
| 5 | <image | 5 | <image |
| 6 | src="../../static/img/detail/d1.png" | 6 | src="../../static/img/detail/d1.png" |
| 7 | mode="aspectFill" | 7 | mode="aspectFill" |
| 8 | style="width: 188rpx;height: 168rpx;" | 8 | style="width: 188rpx;height: 168rpx;" |
| 9 | ></image> | 9 | ></image> |
| 10 | </view> | 10 | </view> |
| 11 | <view class="infoRight"> | 11 | <view class="infoRight"> |
| 12 | <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> | 12 | <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> |
| 13 | <text class="remarks">支持7天无理由退货 顺丰发货</text> | 13 | <text class="remarks">支持7天无理由退货 顺丰发货</text> |
| 14 | <view class="priceBox"> | 14 | <view class="priceBox"> |
| 15 | <view class="price">￥198</view> | 15 | <view class="price">￥198</view> |
| 16 | <text>(限购{{maxCount}}副)</text> | 16 | <text>(限购{{maxCount}}副)</text> |
| 17 | <view class="counter"> | 17 | <view class="counter"> |
| 18 | <view | 18 | <view |
| 19 | class="btn" | 19 | class="btn" |
| 20 | disabled="this.addDisabled" | 20 | disabled="this.addDisabled" |
| 21 | type="default" | 21 | type="default" |
| 22 | @click="counter(false)" | 22 | @click="counter(false)" |
| 23 | >-</view> | 23 | >-</view> |
| 24 | <text>{{count}}</text> | 24 | <text>{{count}}</text> |
| 25 | <view | 25 | <view |
| 26 | class="btn" | 26 | class="btn" |
| 27 | disabled="this.desDisabled" | 27 | disabled="this.desDisabled" |
| 28 | type="default" | 28 | type="default" |
| 29 | @click="counter(true)" | 29 | @click="counter(true)" |
| 30 | >+</view> | 30 | >+</view> |
| 31 | </view> | 31 | </view> |
| 32 | </view> | 32 | </view> |
| 33 | </view> | 33 | </view> |
| 34 | </view> | 34 | </view> |
| 35 | <view class="goods-data"> | 35 | <view class="goods-data"> |
| 36 | <view class="opCollapse"> | 36 | <view class="opCollapse"> |
| 37 | <view class="body"> | 37 | <view class="body"> |
| 38 | <template v-if="opIsOpen"> | 38 | <template v-if="opIsOpen"> |
| 39 | <view class="goods-form"> | 39 | <view class="goods-form"> |
| 40 | <view class="data-title"> | 40 | <view class="data-title"> |
| 41 | <image src="../../static/icon-data.png"></image> | 41 | <image src="../../static/icon-data.png"></image> |
| 42 | <text class="p1">填写验光数据</text> | 42 | <text class="p1">填写验光数据</text> |
| 43 | </view> | 43 | </view> |
| 44 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> | 44 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> |
| 45 | <view class="picker"> | 45 | <view class="picker"> |
| 46 | <view class="picker-choice"> | 46 | <view class="picker-choice"> |
| 47 | <view class="choice-left"> | 47 | <view class="choice-left"> |
| 48 | <text class="p11">验光单取名:</text> | 48 | <text class="p11">验光单取名:</text> |
| 49 | </view> | 49 | </view> |
| 50 | <input | 50 | <input |
| 51 | class="choice-name uni-input" | 51 | class="choice-name uni-input" |
| 52 | :value="dataName" | 52 | :value="dataName" |
| 53 | @blur="fillData" | 53 | @blur="fillData" |
| 54 | placeholder="下系" | 54 | placeholder="下系" |
| 55 | /> | 55 | /> |
| 56 | </view> | 56 | </view> |
| 57 | </view> | 57 | </view> |
| 58 | <view class="picker"> | 58 | <view class="picker"> |
| 59 | <view class="picker-choice"> | 59 | <view class="picker-choice"> |
| 60 | <view class="choice-left"> | 60 | <view class="choice-left"> |
| 61 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 61 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 62 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 62 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 63 | </view> | 63 | </view> |
| 64 | <text class="p13">左 (OD)</text> | 64 | <text class="p13">左 (OD)</text> |
| 65 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | 65 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> |
| 66 | <picker | 66 | <picker |
| 67 | @change="bindPickerChange01" | 67 | @change="bindPickerChange01" |
| 68 | :value="pickerInfoList[0].nameIndex1" | 68 | :value="pickerInfoList[0].nameIndex1" |
| 69 | :range="pickerInfoList[0].nameArray1" | 69 | :range="pickerInfoList[0].nameArray1" |
| 70 | > | 70 | > |
| 71 | <image src="../../static/detail-tabicon.png"></image> | 71 | <image src="../../static/detail-tabicon.png"></image> |
| 72 | </picker> | 72 | </picker> |
| 73 | <text class="p13">右 (OS)</text> | 73 | <text class="p13">右 (OS)</text> |
| 74 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | 74 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> |
| 75 | <picker | 75 | <picker |
| 76 | @change="bindPickerChange02" | 76 | @change="bindPickerChange02" |
| 77 | :value="pickerInfoList[0].nameIndex2" | 77 | :value="pickerInfoList[0].nameIndex2" |
| 78 | :range="pickerInfoList[0].nameArray2" | 78 | :range="pickerInfoList[0].nameArray2" |
| 79 | > | 79 | > |
| 80 | <image src="../../static/detail-tabicon.png"></image> | 80 | <image src="../../static/detail-tabicon.png"></image> |
| 81 | </picker> | 81 | </picker> |
| 82 | </view> | 82 | </view> |
| 83 | </view> | 83 | </view> |
| 84 | <view class="picker"> | 84 | <view class="picker"> |
| 85 | <view class="picker-choice"> | 85 | <view class="picker-choice"> |
| 86 | <view class="choice-left"> | 86 | <view class="choice-left"> |
| 87 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 87 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 88 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 88 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 89 | </view> | 89 | </view> |
| 90 | <text class="p13">左 (OD)</text> | 90 | <text class="p13">左 (OD)</text> |
| 91 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | 91 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> |
| 92 | <picker | 92 | <picker |
| 93 | @change="bindPickerChange11" | 93 | @change="bindPickerChange11" |
| 94 | :value="pickerInfoList[1].nameIndex1" | 94 | :value="pickerInfoList[1].nameIndex1" |
| 95 | :range="pickerInfoList[1].nameArray1" | 95 | :range="pickerInfoList[1].nameArray1" |
| 96 | > | 96 | > |
| 97 | <image src="../../static/detail-tabicon.png"></image> | 97 | <image src="../../static/detail-tabicon.png"></image> |
| 98 | </picker> | 98 | </picker> |
| 99 | <text class="p13">右 (OS)</text> | 99 | <text class="p13">右 (OS)</text> |
| 100 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | 100 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> |
| 101 | <picker | 101 | <picker |
| 102 | @change="bindPickerChange12" | 102 | @change="bindPickerChange12" |
| 103 | :value="pickerInfoList[1].nameIndex2" | 103 | :value="pickerInfoList[1].nameIndex2" |
| 104 | :range="pickerInfoList[1].nameArray2" | 104 | :range="pickerInfoList[1].nameArray2" |
| 105 | > | 105 | > |
| 106 | <image src="../../static/detail-tabicon.png"></image> | 106 | <image src="../../static/detail-tabicon.png"></image> |
| 107 | </picker> | 107 | </picker> |
| 108 | </view> | 108 | </view> |
| 109 | </view> | 109 | </view> |
| 110 | <view class="picker"> | 110 | <view class="picker"> |
| 111 | <view class="picker-choice"> | 111 | <view class="picker-choice"> |
| 112 | <view class="choice-left"> | 112 | <view class="choice-left"> |
| 113 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 113 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 114 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 114 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 115 | </view> | 115 | </view> |
| 116 | <text class="p13">左 (OD)</text> | 116 | <text class="p13">左 (OD)</text> |
| 117 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | 117 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> |
| 118 | <picker | 118 | <picker |
| 119 | @change="bindPickerChange21" | 119 | @change="bindPickerChange21" |
| 120 | :value="pickerInfoList[2].nameIndex1" | 120 | :value="pickerInfoList[2].nameIndex1" |
| 121 | :range="pickerInfoList[2].nameArray1" | 121 | :range="pickerInfoList[2].nameArray1" |
| 122 | > | 122 | > |
| 123 | <image src="../../static/detail-tabicon.png"></image> | 123 | <image src="../../static/detail-tabicon.png"></image> |
| 124 | </picker> | 124 | </picker> |
| 125 | <text class="p13">右 (OS)</text> | 125 | <text class="p13">右 (OS)</text> |
| 126 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | 126 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> |
| 127 | <picker | 127 | <picker |
| 128 | @change="bindPickerChange22" | 128 | @change="bindPickerChange22" |
| 129 | :value="pickerInfoList[2].nameIndex2" | 129 | :value="pickerInfoList[2].nameIndex2" |
| 130 | :range="pickerInfoList[2].nameArray2" | 130 | :range="pickerInfoList[2].nameArray2" |
| 131 | > | 131 | > |
| 132 | <image src="../../static/detail-tabicon.png"></image> | 132 | <image src="../../static/detail-tabicon.png"></image> |
| 133 | </picker> | 133 | </picker> |
| 134 | </view> | 134 | </view> |
| 135 | </view> | 135 | </view> |
| 136 | <view class="picker"> | 136 | <view class="picker"> |
| 137 | <view class="picker-choice"> | 137 | <view class="picker-choice"> |
| 138 | <view class="choice-left"> | 138 | <view class="choice-left"> |
| 139 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 139 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 140 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | 140 | <text class="p12">{{pickerInfoList[3].nameE}}</text> |
| 141 | </view> | 141 | </view> |
| 142 | <text class="p13">左 (OD)</text> | 142 | <text class="p13">左 (OD)</text> |
| 143 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | 143 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> |
| 144 | <picker | 144 | <picker |
| 145 | @change="bindPickerChange31" | 145 | @change="bindPickerChange31" |
| 146 | :value="pickerInfoList[3].nameIndex1" | 146 | :value="pickerInfoList[3].nameIndex1" |
| 147 | :range="pickerInfoList[3].nameArray1" | 147 | :range="pickerInfoList[3].nameArray1" |
| 148 | > | 148 | > |
| 149 | <image src="../../static/detail-tabicon.png"></image> | 149 | <image src="../../static/detail-tabicon.png"></image> |
| 150 | </picker> | 150 | </picker> |
| 151 | <text class="p13">右 (OS)</text> | 151 | <text class="p13">右 (OS)</text> |
| 152 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | 152 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> |
| 153 | <picker | 153 | <picker |
| 154 | @change="bindPickerChange32" | 154 | @change="bindPickerChange32" |
| 155 | :value="pickerInfoList[3].nameIndex2" | 155 | :value="pickerInfoList[3].nameIndex2" |
| 156 | :range="pickerInfoList[3].nameArray2" | 156 | :range="pickerInfoList[3].nameArray2" |
| 157 | > | 157 | > |
| 158 | <image src="../../static/detail-tabicon.png"></image> | 158 | <image src="../../static/detail-tabicon.png"></image> |
| 159 | </picker> | 159 | </picker> |
| 160 | </view> | 160 | </view> |
| 161 | </view> | 161 | </view> |
| 162 | <view class="picker"> | 162 | <view class="picker"> |
| 163 | <view class="picker-choice"> | 163 | <view class="picker-choice"> |
| 164 | <view class="choice-left"> | 164 | <view class="choice-left"> |
| 165 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | 165 | <text class="p11">{{pickerInfoList[4].nameC}}</text> |
| 166 | </view> | 166 | </view> |
| 167 | <text class="p13-date">年 (Y)</text> | 167 | <text class="p13-date">年 (Y)</text> |
| 168 | <text | 168 | <text |
| 169 | class="p14" | 169 | class="p14" |
| 170 | style="width: 34px;" | 170 | style="width: 34px;" |
| 171 | >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | 171 | >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> |
| 172 | <picker | 172 | <picker |
| 173 | @change="bindPickerChange41" | 173 | @change="bindPickerChange41" |
| 174 | :value="pickerInfoList[4].nameIndex1" | 174 | :value="pickerInfoList[4].nameIndex1" |
| 175 | :range="pickerInfoList[4].nameArray1" | 175 | :range="pickerInfoList[4].nameArray1" |
| 176 | > | 176 | > |
| 177 | <image src="../../static/detail-tabicon.png"></image> | 177 | <image src="../../static/detail-tabicon.png"></image> |
| 178 | </picker> | 178 | </picker> |
| 179 | <text class="p13-date">月 (M)</text> | 179 | <text class="p13-date">月 (M)</text> |
| 180 | <text | 180 | <text |
| 181 | class="p14" | 181 | class="p14" |
| 182 | style="width: 30px;" | 182 | style="width: 30px;" |
| 183 | >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | 183 | >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> |
| 184 | <picker | 184 | <picker |
| 185 | @change="bindPickerChange42" | 185 | @change="bindPickerChange42" |
| 186 | :value="pickerInfoList[4].nameIndex2" | 186 | :value="pickerInfoList[4].nameIndex2" |
| 187 | :range="pickerInfoList[4].nameArray2" | 187 | :range="pickerInfoList[4].nameArray2" |
| 188 | > | 188 | > |
| 189 | <image src="../../static/detail-tabicon.png"></image> | 189 | <image src="../../static/detail-tabicon.png"></image> |
| 190 | </picker> | 190 | </picker> |
| 191 | <text class="p13-date">日 (D)</text> | 191 | <text class="p13-date">日 (D)</text> |
| 192 | <text | 192 | <text |
| 193 | class="p14" | 193 | class="p14" |
| 194 | style="width: 30px;" | 194 | style="width: 30px;" |
| 195 | >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | 195 | >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> |
| 196 | <picker | 196 | <picker |
| 197 | @change="bindPickerChange43" | 197 | @change="bindPickerChange43" |
| 198 | :value="pickerInfoList[4].nameIndex3" | 198 | :value="pickerInfoList[4].nameIndex3" |
| 199 | :range="pickerInfoList[4].nameArray3" | 199 | :range="pickerInfoList[4].nameArray3" |
| 200 | > | 200 | > |
| 201 | <image src="../../static/detail-tabicon.png"></image> | 201 | <image src="../../static/detail-tabicon.png"></image> |
| 202 | </picker> | 202 | </picker> |
| 203 | </view> | 203 | </view> |
| 204 | </view> | 204 | </view> |
| 205 | <view class="confirm"> | 205 | <view class="confirm"> |
| 206 | <image | 206 | <image |
| 207 | :src="tablist.confirm ? tabicon[0] : tabicon[1]" | 207 | :src="tablist.confirm ? tabicon[0] : tabicon[1]" |
| 208 | @click="changeConfirm" | 208 | @click="changeConfirm" |
| 209 | ></image> | 209 | ></image> |
| 210 | <text>确认以上输入信息来源于我的验光数据!</text> | 210 | <text>确认以上输入信息来源于我的验光数据!</text> |
| 211 | </view> | 211 | </view> |
| 212 | </view> | 212 | </view> |
| 213 | 213 | ||
| 214 | </template> | 214 | </template> |
| 215 | <template v-else> | 215 | <template v-else> |
| 216 | <view | 216 | <view |
| 217 | v-for="item in pickerInfoList" | 217 | v-for="item in pickerInfoList" |
| 218 | :key="item.key" | 218 | :key="item.key" |
| 219 | class="bodyBox" | 219 | class="bodyBox" |
| 220 | > | 220 | > |
| 221 | <template v-if="item.nameC==='验光日期'"> | 221 | <template v-if="item.nameC==='验光日期'"> |
| 222 | <text class="names">{{item.nameC}}</text> | 222 | <text class="names">{{item.nameC}}</text> |
| 223 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> | 223 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> |
| 224 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> | 224 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> |
| 225 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> | 225 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> |
| 226 | </template> | 226 | </template> |
| 227 | <template v-else> | 227 | <template v-else> |
| 228 | <template v-if="item.nameC==='度数'"> | 228 | <template v-if="item.nameC==='度数'"> |
| 229 | <text style="display: inline;">*</text> | 229 | <text style="display: inline;">*</text> |
| 230 | </template> | 230 | </template> |
| 231 | 231 | ||
| 232 | <text class="names">{{item.nameC}}</text> | 232 | <text class="names">{{item.nameC}}</text> |
| 233 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 233 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
| 234 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 234 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> |
| 235 | </template> | 235 | </template> |
| 236 | </view> | 236 | </view> |
| 237 | </template> | 237 | </template> |
| 238 | </view> | 238 | </view> |
| 239 | </view> | 239 | </view> |
| 240 | </view> | 240 | </view> |
| 241 | <view class="choose"> | 241 | <view class="choose"> |
| 242 | <view | 242 | <view |
| 243 | class="chooseItem_1_content" | 243 | class="chooseItem_1_content" |
| 244 | v-for="(item,index) in attrList" | 244 | v-for="(item,index) in attrList" |
| 245 | :key="index" | 245 | :key="index" |
| 246 | > | 246 | > |
| 247 | <UniCollapse @change="change(index)"> | 247 | <UniCollapse @change="change(index)"> |
| 248 | <UniCollapseItem | 248 | <UniCollapseItem |
| 249 | :open="show[index]" | 249 | :open="show[index]" |
| 250 | :title="item.meta_name" | 250 | :title="item.meta_name" |
| 251 | showAnimation=false | 251 | showAnimation=false |
| 252 | > | 252 | > |
| 253 | <view class="chooseItem_1_content"> | 253 | <view class="chooseItem_1_content"> |
| 254 | <view class="itemsWrap"> | 254 | <view class="itemsWrap"> |
| 255 | <view | 255 | <view |
| 256 | class="item2" | 256 | class="item2" |
| 257 | v-for="(one,i) in item.attr" | 257 | v-for="(one,i) in item.attr" |
| 258 | :key="i" | 258 | :key="i" |
| 259 | :class="{ active2: current[index] === i }" | 259 | :class="{ active2: current[index] === i }" |
| 260 | @click="onClickItem(index, i)" | 260 | @click="onClickItem(index, i)" |
| 261 | >{{one.name}}</view> | 261 | >{{one.name}}</view> |
| 262 | </view> | 262 | </view> |
| 263 | </view> | 263 | </view> |
| 264 | </UniCollapseItem> | 264 | </UniCollapseItem> |
| 265 | </UniCollapse> | 265 | </UniCollapse> |
| 266 | <view | 266 | <view |
| 267 | class="chooseRes" | 267 | class="chooseRes" |
| 268 | v-show="!show[index]" | 268 | v-show="!show[index]" |
| 269 | >* {{attrList[index].attr[current[index]].name}}</view> | 269 | >* {{attrList[index].attr[current[index]].name}}</view> |
| 270 | </view> | 270 | </view> |
| 271 | <!-- <view class="chooseItem_1 chooseItem"> | 271 | <!-- <view class="chooseItem_1 chooseItem"> |
| 272 | <UniCollapse @change="change(1)"> | 272 | <UniCollapse @change="change(1)"> |
| 273 | <UniCollapseItem | 273 | <UniCollapseItem |
| 274 | open=true | 274 | open=true |
| 275 | title="款式挑选" | 275 | title="款式挑选" |
| 276 | showAnimation=false | 276 | showAnimation=false |
| 277 | > | 277 | > |
| 278 | <view | 278 | <view |
| 279 | class="chooseRes" | 279 | class="chooseRes" |
| 280 | v-show="show[1]" | 280 | v-show="show[1]" |
| 281 | >* {{chooseRes1}}</view> | 281 | >* {{chooseRes1}}</view> |
| 282 | <view class="chooseItem_1_content"> | 282 | <view class="chooseItem_1_content"> |
| 283 | <view class="itemsWrap"> | 283 | <view class="itemsWrap"> |
| 284 | <view | 284 | <view |
| 285 | class="item1" | 285 | class="item1" |
| 286 | v-for="(item,index) in chooseItem1" | 286 | v-for="(item,index) in chooseItem1" |
| 287 | :key="index" | 287 | :key="index" |
| 288 | :style="item.style" | 288 | :style="item.style" |
| 289 | :class="{ active1: current1 === index }" | 289 | :class="{ active1: current1 === index }" |
| 290 | @click="onClickItem1(index)" | 290 | @click="onClickItem1(index)" |
| 291 | ></view> | 291 | ></view> |
| 292 | </view> | 292 | </view> |
| 293 | </view> | 293 | </view> |
| 294 | </UniCollapseItem> | 294 | </UniCollapseItem> |
| 295 | </UniCollapse> | 295 | </UniCollapse> |
| 296 | <view | 296 | <view |
| 297 | class="chooseRes" | 297 | class="chooseRes" |
| 298 | v-show="show[1]" | 298 | v-show="show[1]" |
| 299 | >* {{chooseRes1}}</view> | 299 | >* {{chooseRes1}}</view> |
| 300 | </view> | 300 | </view> |
| 301 | <view class="chooseItem_2 chooseItem "> | 301 | <view class="chooseItem_2 chooseItem "> |
| 302 | <UniCollapse @change="change(2)"> | 302 | <UniCollapse @change="change(2)"> |
| 303 | <UniCollapseItem | 303 | <UniCollapseItem |
| 304 | open=true | 304 | open=true |
| 305 | title="直径" | 305 | title="直径" |
| 306 | showAnimation=false | 306 | showAnimation=false |
| 307 | > | 307 | > |
| 308 | <view class="chooseItem_1_content"> | 308 | <view class="chooseItem_1_content"> |
| 309 | <view class="itemsWrap"> | 309 | <view class="itemsWrap"> |
| 310 | <view | 310 | <view |
| 311 | class="item2" | 311 | class="item2" |
| 312 | v-for="(item,index) in chooseItem2" | 312 | v-for="(item,index) in chooseItem2" |
| 313 | :key="index" | 313 | :key="index" |
| 314 | :class="{ active2: current2 === index }" | 314 | :class="{ active2: current2 === index }" |
| 315 | @click="onClickItem2(index)" | 315 | @click="onClickItem2(index)" |
| 316 | >{{item.num}}</view> | 316 | >{{item.num}}</view> |
| 317 | </view> | 317 | </view> |
| 318 | </view> | 318 | </view> |
| 319 | </UniCollapseItem> | 319 | </UniCollapseItem> |
| 320 | </UniCollapse> | 320 | </UniCollapse> |
| 321 | <view | 321 | <view |
| 322 | class="chooseRes" | 322 | class="chooseRes" |
| 323 | v-show="show[2]" | 323 | v-show="show[2]" |
| 324 | >* {{chooseRes2}}</view> | 324 | >* {{chooseRes2}}</view> |
| 325 | </view> | 325 | </view> |
| 326 | <view class="chooseItem_3 chooseItem"> | 326 | <view class="chooseItem_3 chooseItem"> |
| 327 | <UniCollapse @change="change(3)"> | 327 | <UniCollapse @change="change(3)"> |
| 328 | <UniCollapseItem | 328 | <UniCollapseItem |
| 329 | open=true | 329 | open=true |
| 330 | title="度数" | 330 | title="度数" |
| 331 | showAnimation=false | 331 | showAnimation=false |
| 332 | > | 332 | > |
| 333 | <view class="chooseItem_1_content"> | 333 | <view class="chooseItem_1_content"> |
| 334 | <view class="itemsWrap"> | 334 | <view class="itemsWrap"> |
| 335 | <view | 335 | <view |
| 336 | class="item2" | 336 | class="item2" |
| 337 | v-for="(item,index) in chooseItem3" | 337 | v-for="(item,index) in chooseItem3" |
| 338 | :key="index" | 338 | :key="index" |
| 339 | :class="{ active2: current3 === index }" | 339 | :class="{ active2: current3 === index }" |
| 340 | @click="onClickItem3(index)" | 340 | @click="onClickItem3(index)" |
| 341 | >{{item}}</view> | 341 | >{{item}}</view> |
| 342 | </view> | 342 | </view> |
| 343 | </view> | 343 | </view> |
| 344 | </UniCollapseItem> | 344 | </UniCollapseItem> |
| 345 | </UniCollapse> | 345 | </UniCollapse> |
| 346 | <view | 346 | <view |
| 347 | class="chooseRes" | 347 | class="chooseRes" |
| 348 | v-show="show[3]" | 348 | v-show="show[3]" |
| 349 | >* {{chooseRes3}}</view> | 349 | >* {{chooseRes3}}</view> |
| 350 | </view> --> | 350 | </view> --> |
| 351 | </view> | 351 | </view> |
| 352 | <view | 352 | <view |
| 353 | class="button" | 353 | class="button" |
| 354 | @click="toComfirmOrder" | 354 | @click="toComfirmOrder" |
| 355 | > | 355 | > |
| 356 | 立即结算 | 356 | 立即结算 |
| 357 | </view> | 357 | </view> |
| 358 | </view> | 358 | </view> |
| 359 | </template> | 359 | </template> |
| 360 | 360 | ||
| 361 | <script> | 361 | <script> |
| 362 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 362 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 363 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 363 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 364 | import store from '@/store' | 364 | import store from '@/store' |
| 365 | 365 | ||
| 366 | export default { | 366 | export default { |
| 367 | components: { | 367 | components: { |
| 368 | UniCollapse, | 368 | UniCollapse, |
| 369 | UniCollapseItem | 369 | UniCollapseItem |
| 370 | }, | 370 | }, |
| 371 | data() { | 371 | data() { |
| 372 | return { | 372 | return { |
| 373 | count: 1, | 373 | count: 1, |
| 374 | pid: 0, | 374 | pid: 0, |
| 375 | maxCount: 20, | 375 | maxCount: 20, |
| 376 | dataName: '', // 验光数据人员名称 | 376 | dataName: '', // 验光数据人员名称 |
| 377 | isDataName: false, | 377 | isDataName: false, // 是否是已存在的人员数据 |
| 378 | dataConfirm: false, // 已确认所输入验光数据 | ||
| 378 | opIsOpen: true, | 379 | opIsOpen: true, |
| 379 | addDisabled: false, | 380 | addDisabled: false, |
| 380 | desDisabled: false, | 381 | desDisabled: false, |
| 381 | current1: 0, | 382 | current1: 0, |
| 382 | current2: 0, | 383 | current2: 0, |
| 383 | current3: 0, | 384 | current3: 0, |
| 384 | current: [], | 385 | current: [], |
| 385 | show: [], | 386 | show: [], |
| 386 | chooseRes1: { | 387 | chooseRes1: { |
| 387 | sku_name: 'Miss 黑二代【减龄自然】', | 388 | sku_name: 'Miss 黑二代【减龄自然】', |
| 388 | sk_id: '128' | 389 | sk_id: '128' |
| 389 | }, | 390 | }, |
| 390 | checkedData: { | 391 | checkedData: { |
| 391 | 392 | ||
| 392 | }, | 393 | }, |
| 393 | chooseRes2: '14.0', | 394 | chooseRes2: '14.0', |
| 394 | chooseRes3: 0, | 395 | chooseRes3: 0, |
| 395 | chooseItem1: [ | 396 | chooseItem1: [ |
| 396 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, | 397 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, |
| 397 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, | 398 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, |
| 398 | { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, | 399 | { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, |
| 399 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 400 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 400 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 401 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 401 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 402 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 402 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 403 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
| 403 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 404 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 404 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 405 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 405 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 406 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 406 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 407 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
| 407 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 408 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 408 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 409 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 409 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 410 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 410 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' } | 411 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' } |
| 411 | ], | 412 | ], |
| 412 | chooseItem2: [ | 413 | chooseItem2: [ |
| 413 | { num: '14.0' }, | 414 | { num: '14.0' }, |
| 414 | { num: '14.2' }, | 415 | { num: '14.2' }, |
| 415 | { num: '14.4' }, | 416 | { num: '14.4' }, |
| 416 | { num: '14.5' } | 417 | { num: '14.5' } |
| 417 | ], | 418 | ], |
| 418 | chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], | 419 | chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], |
| 419 | // 度数相关数据 | 420 | // 度数相关数据 |
| 420 | pickerInfoList: [ | 421 | pickerInfoList: [ |
| 421 | { 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 }, | 422 | { 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 }, |
| 422 | { 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 }, | 423 | { 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 }, |
| 423 | { 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 }, | 424 | { 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 }, |
| 424 | { 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 }, | 425 | { 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 }, |
| 425 | { 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 } | 426 | { 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 } |
| 426 | ] | 427 | ] |
| 427 | } | 428 | } |
| 428 | }, | 429 | }, |
| 429 | computed: { | 430 | computed: { |
| 430 | attrList() { | 431 | attrList() { |
| 431 | return this.$store.state.read.goodInfo.attrList | 432 | return this.$store.state.read.goodInfo.attrList |
| 432 | }, | 433 | }, |
| 433 | skuList() { | 434 | skuList() { |
| 434 | return this.$store.state.read.goodInfo.skuList | 435 | return this.$store.state.read.goodInfo.skuList |
| 435 | }, | 436 | }, |
| 436 | mpList() { | 437 | mpList() { |
| 437 | return this.$store.state.myLoveList.loveList | 438 | return this.$store.state.myLoveList.loveList |
| 438 | } | 439 | } |
| 439 | }, | 440 | }, |
| 440 | onLoad({ pid }) { | 441 | onLoad({ pid }) { |
| 441 | this.pid = pid | 442 | this.pid = pid |
| 442 | store.dispatch('read/fetch', { | 443 | store.dispatch('read/fetch', { |
| 443 | pid | 444 | pid |
| 444 | }).then(() => { | 445 | }).then(() => { |
| 445 | const current = [] | 446 | const current = [] |
| 446 | const show = [] | 447 | const show = [] |
| 447 | for (let index = 0; index < this.attrList.length; index++) { | 448 | for (let index = 0; index < this.attrList.length; index++) { |
| 448 | current.push(0) | 449 | current.push(0) |
| 449 | show.push(true) | 450 | show.push(true) |
| 450 | } | 451 | } |
| 451 | this.current = current | 452 | this.current = current |
| 452 | this.show = show | 453 | this.show = show |
| 453 | }) | 454 | }) |
| 454 | store.dispatch('myLoveList/getLoveList') | 455 | store.dispatch('myLoveList/getLoveList') |
| 455 | }, | 456 | }, |
| 456 | methods: { | 457 | methods: { |
| 457 | // 是否填充人员数据 | 458 | // 是否填充人员数据 |
| 458 | fillData(e) { | 459 | fillData(e) { |
| 459 | this.isDataName = false | 460 | this.isDataName = false |
| 460 | console.log('e---->', e) | 461 | console.log('e---->', e) |
| 461 | const mpList = this.mpList | 462 | const mpList = this.mpList |
| 462 | 463 | ||
| 463 | for (let index = 0; index < mpList.length; index++) { | 464 | for (let index = 0; index < mpList.length; index++) { |
| 464 | if (e.detail.value === mpList[index].name) { | 465 | if (e.detail.value === mpList[index].name) { |
| 465 | this.isDataName = true | 466 | this.isDataName = true |
| 466 | uni.showModal({ | 467 | uni.showModal({ |
| 467 | title: '提示', | 468 | title: '提示', |
| 468 | content: `是否填充已有的${e.detail.value}的数据`, | 469 | content: `是否自动填充已保存的${e.detail.value}的数据`, |
| 469 | success: ({ confirm }) => { | 470 | success: ({ confirm }) => { |
| 470 | if (confirm) { | 471 | if (confirm) { |
| 471 | this.checkedData = mpList[index] | 472 | this.checkedData = mpList[index] |
| 472 | console.log('checkedData', this.checkedData) | 473 | console.log('checkedData', this.checkedData) |
| 473 | } | 474 | } |
| 474 | } | 475 | } |
| 475 | }) | 476 | }) |
| 476 | } | 477 | } |
| 477 | } | 478 | } |
| 478 | }, | 479 | }, |
| 480 | // 确认验光数据 | ||
| 481 | changeConfirm() { | ||
| 482 | |||
| 483 | }, | ||
| 479 | change(num) { | 484 | change(num) { |
| 480 | this.show[num] = !this.show[num] | 485 | this.show[num] = !this.show[num] |
| 481 | this.$forceUpdate() | 486 | this.$forceUpdate() |
| 482 | }, | 487 | }, |
| 483 | onClickItem(index, i) { | 488 | onClickItem(index, i) { |
| 484 | if (this.current[index] !== i) { | 489 | if (this.current[index] !== i) { |
| 485 | this.current[index] = i | 490 | this.current[index] = i |
| 486 | } | 491 | } |
| 487 | this.$forceUpdate() | 492 | this.$forceUpdate() |
| 488 | }, | 493 | }, |
| 489 | onClickItem1(index) { | 494 | onClickItem1(index) { |
| 490 | if (this.current1 !== index) { | 495 | if (this.current1 !== index) { |
| 491 | this.current1 = index | 496 | this.current1 = index |
| 492 | this.chooseRes1 = this.chooseItem1[index].describ | 497 | this.chooseRes1 = this.chooseItem1[index].describ |
| 493 | } | 498 | } |
| 494 | }, | 499 | }, |
| 495 | onClickItem2(index) { | 500 | onClickItem2(index) { |
| 496 | if (this.current2 !== index) { | 501 | if (this.current2 !== index) { |
| 497 | this.current2 = index | 502 | this.current2 = index |
| 498 | this.chooseRes2 = this.chooseItem2[index].num | 503 | this.chooseRes2 = this.chooseItem2[index].num |
| 499 | } | 504 | } |
| 500 | }, | 505 | }, |
| 501 | onClickItem3(index) { | 506 | onClickItem3(index) { |
| 502 | if (this.current3 !== index) { | 507 | if (this.current3 !== index) { |
| 503 | this.current3 = index | 508 | this.current3 = index |
| 504 | this.chooseRes3 = this.chooseItem3[index] | 509 | this.chooseRes3 = this.chooseItem3[index] |
| 505 | } | 510 | } |
| 506 | }, | 511 | }, |
| 507 | counter(isadd) { | 512 | counter(isadd) { |
| 508 | if (isadd) { | 513 | if (isadd) { |
| 509 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ | 514 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ |
| 510 | } else { | 515 | } else { |
| 511 | this.count <= 1 ? this.desDisabled = true : this.count-- | 516 | this.count <= 1 ? this.desDisabled = true : this.count-- |
| 512 | } | 517 | } |
| 513 | }, | 518 | }, |
| 514 | toComfirmOrder() { | 519 | toComfirmOrder() { |
| 515 | let i = 0 | 520 | let i = 0 |
| 516 | // 判断出是哪一个sku被选中 | 521 | // 判断出是哪一个sku被选中 |
| 517 | for (let index = 0; index < this.current.length; index++) { | 522 | for (let index = 0; index < this.current.length; index++) { |
| 518 | console.log('index', index, i, index !== this.current.length - 1) | 523 | console.log('index', index, i, index !== this.current.length - 1) |
| 519 | if (index !== this.current.length - 1) { | 524 | if (index !== this.current.length - 1) { |
| 520 | console.log('----', this.current[index], this.attrList[1].attr.length, this.attrList) | 525 | console.log('----', this.current[index], this.attrList[1].attr.length, this.attrList) |
| 521 | i = this.current[index] * this.attrList[1].attr.length | 526 | i = this.current[index] * this.attrList[1].attr.length |
| 522 | } else { | 527 | } else { |
| 523 | i += this.current[index] | 528 | i += this.current[index] |
| 524 | } | 529 | } |
| 525 | console.log('i', i) | 530 | console.log('i', i) |
| 526 | } | 531 | } |
| 527 | console.log('i------>', i) | 532 | console.log('i------>', i) |
| 528 | // 判断是否其输入的人员数据是否已存在 | 533 | // 判断是否其输入的人员数据是否已存在 |
| 529 | store.dispatch('order/saveParams', { | 534 | store.dispatch('order/saveParams', { |
| 530 | sk_id_arr: this.skuList[i], | 535 | sk_id_arr: this.skuList[i], |
| 531 | current: this.current | 536 | current: this.current |
| 532 | }) | 537 | }) |
| 533 | 538 | ||
| 534 | uni.navigateTo({ | 539 | uni.navigateTo({ |
| 535 | url: `../confirmOrder/confirmOrder?pid=${this.pid}` | 540 | url: `../confirmOrder/confirmOrder?pid=${this.pid}` |
| 536 | }) | 541 | }) |
| 537 | } | 542 | } |
| 538 | } | 543 | } |
| 539 | } | 544 | } |
| 540 | </script> | 545 | </script> |
| 541 | 546 | ||
| 542 | <style lang="scss"> | 547 | <style lang="scss"> |
| 543 | .content { | 548 | .content { |
| 544 | min-height: 100vh; | 549 | min-height: 100vh; |
| 545 | background-color: #f2f2f2; | 550 | background-color: #f2f2f2; |
| 546 | // padding-top: 20rpx; | 551 | // padding-top: 20rpx; |
| 547 | .goodInfo { | 552 | .goodInfo { |
| 548 | width: 100%; | 553 | width: 100%; |
| 549 | height: 272rpx; | 554 | height: 272rpx; |
| 550 | border-radius: 16rpx; | 555 | border-radius: 16rpx; |
| 551 | background-color: #ffffff; | 556 | background-color: #ffffff; |
| 552 | box-sizing: border-box; | 557 | box-sizing: border-box; |
| 553 | padding: 36rpx; | 558 | padding: 36rpx; |
| 554 | display: flex; | 559 | display: flex; |
| 555 | flex-direction: row; | 560 | flex-direction: row; |
| 556 | justify-content: flex-start; | 561 | justify-content: flex-start; |
| 557 | .imageWrap { | 562 | .imageWrap { |
| 558 | height: 188rpx; | 563 | height: 188rpx; |
| 559 | width: 188rpx; | 564 | width: 188rpx; |
| 560 | margin-right: 28rpx; | 565 | margin-right: 28rpx; |
| 561 | image { | 566 | image { |
| 562 | height: 188rpx; | 567 | height: 188rpx; |
| 563 | width: 188rpx; | 568 | width: 188rpx; |
| 564 | } | 569 | } |
| 565 | } | 570 | } |
| 566 | .infoRight { | 571 | .infoRight { |
| 567 | display: flex; | 572 | display: flex; |
| 568 | flex-direction: column; | 573 | flex-direction: column; |
| 569 | align-items: flex-start; | 574 | align-items: flex-start; |
| 570 | justify-content: space-between; | 575 | justify-content: space-between; |
| 571 | .goodName { | 576 | .goodName { |
| 572 | font-size: 28rpx; | 577 | font-size: 28rpx; |
| 573 | color: #333333; | 578 | color: #333333; |
| 574 | } | 579 | } |
| 575 | .remarks { | 580 | .remarks { |
| 576 | font-size: 20rpx; | 581 | font-size: 20rpx; |
| 577 | color: #999999; | 582 | color: #999999; |
| 578 | } | 583 | } |
| 579 | .priceBox { | 584 | .priceBox { |
| 580 | display: flex; | 585 | display: flex; |
| 581 | justify-content: space-between; | 586 | justify-content: space-between; |
| 582 | align-items: center; | 587 | align-items: center; |
| 583 | width: 100%; | 588 | width: 100%; |
| 584 | font-size: 14px; | 589 | font-size: 14px; |
| 585 | color: #999999; | 590 | color: #999999; |
| 586 | .price { | 591 | .price { |
| 587 | color: #ff6b4a; | 592 | color: #ff6b4a; |
| 588 | font-size: 28rpx; | 593 | font-size: 28rpx; |
| 589 | } | 594 | } |
| 590 | .counter { | 595 | .counter { |
| 591 | display: flex; | 596 | display: flex; |
| 592 | flex-direction: row; | 597 | flex-direction: row; |
| 593 | justify-content: space-between; | 598 | justify-content: space-between; |
| 594 | align-items: center; | 599 | align-items: center; |
| 595 | font-size: 28rpx; | 600 | font-size: 28rpx; |
| 596 | color: #333333; | 601 | color: #333333; |
| 597 | width: 122rpx; | 602 | width: 122rpx; |
| 598 | .btn { | 603 | .btn { |
| 599 | display: flex; | 604 | display: flex; |
| 600 | justify-content: center; | 605 | justify-content: center; |
| 601 | line-height: 32rpx; | 606 | line-height: 32rpx; |
| 602 | height: 32rpx; | 607 | height: 32rpx; |
| 603 | width: 32rpx; | 608 | width: 32rpx; |
| 604 | background-color: #f2f2f2; | 609 | background-color: #f2f2f2; |
| 605 | color: #cfcfcf; | 610 | color: #cfcfcf; |
| 606 | } | 611 | } |
| 607 | } | 612 | } |
| 608 | } | 613 | } |
| 609 | } | 614 | } |
| 610 | } | 615 | } |
| 611 | .goods-data { | 616 | .goods-data { |
| 612 | width: 100%; | 617 | width: 100%; |
| 613 | box-sizing: border-box; | 618 | box-sizing: border-box; |
| 614 | padding: 37rpx 40rpx 0 40rpx; | 619 | padding: 37rpx 40rpx 0 40rpx; |
| 615 | background: #ffffff; | 620 | background: #ffffff; |
| 616 | border-radius: 12rpx; | 621 | border-radius: 12rpx; |
| 617 | .opCollapse { | 622 | .opCollapse { |
| 618 | width: 100%; | 623 | width: 100%; |
| 619 | padding-bottom: 28rpx; | 624 | padding-bottom: 28rpx; |
| 620 | margin-top: 7px; | 625 | margin-top: 7px; |
| 621 | border-bottom: 1px solid #e9e9e9; | 626 | border-bottom: 1px solid #e9e9e9; |
| 622 | .head { | 627 | .head { |
| 623 | display: flex; | 628 | display: flex; |
| 624 | justify-content: space-between; | 629 | justify-content: space-between; |
| 625 | height: 24px; | 630 | height: 24px; |
| 626 | // font-family: PingFangSC-Medium; | 631 | // font-family: PingFangSC-Medium; |
| 627 | font-size: 16px; | 632 | font-size: 16px; |
| 628 | color: #333333; | 633 | color: #333333; |
| 629 | letter-spacing: -0.3px; | 634 | letter-spacing: -0.3px; |
| 630 | text-align: justify; | 635 | text-align: justify; |
| 631 | line-height: 24px; | 636 | line-height: 24px; |
| 632 | margin-bottom: 18rpx; | 637 | margin-bottom: 18rpx; |
| 633 | .headRighted { | 638 | .headRighted { |
| 634 | width: 0; | 639 | width: 0; |
| 635 | height: 0; | 640 | height: 0; |
| 636 | border-left: 4px solid transparent; | 641 | border-left: 4px solid transparent; |
| 637 | border-right: 4px solid transparent; | 642 | border-right: 4px solid transparent; |
| 638 | border-bottom: 4px solid #cfcfcf; | 643 | border-bottom: 4px solid #cfcfcf; |
| 639 | transform: scaleY(-1); | 644 | transform: scaleY(-1); |
| 640 | margin-top: 10px; | 645 | margin-top: 10px; |
| 641 | } | 646 | } |
| 642 | .headMid { | 647 | .headMid { |
| 643 | // font-family: PingFangSC-Regular; | 648 | // font-family: PingFangSC-Regular; |
| 644 | font-size: 10px; | 649 | font-size: 10px; |
| 645 | color: #999999; | 650 | color: #999999; |
| 646 | letter-spacing: -0.19px; | 651 | letter-spacing: -0.19px; |
| 647 | margin-left: -120rpx; | 652 | margin-left: -120rpx; |
| 648 | } | 653 | } |
| 649 | .headRight { | 654 | .headRight { |
| 650 | width: 0; | 655 | width: 0; |
| 651 | height: 0; | 656 | height: 0; |
| 652 | border-left: 4px solid transparent; | 657 | border-left: 4px solid transparent; |
| 653 | border-right: 4px solid transparent; | 658 | border-right: 4px solid transparent; |
| 654 | border-bottom: 4px solid #cfcfcf; | 659 | border-bottom: 4px solid #cfcfcf; |
| 655 | margin-top: 10px; | 660 | margin-top: 10px; |
| 656 | } | 661 | } |
| 657 | } | 662 | } |
| 658 | .body { | 663 | .body { |
| 659 | // font-family: PingFangSC-Regular; | 664 | // font-family: PingFangSC-Regular; |
| 660 | font-size: 12px; | 665 | font-size: 12px; |
| 661 | color: #666666; | 666 | color: #666666; |
| 662 | letter-spacing: 0; | 667 | letter-spacing: 0; |
| 663 | .bodyBox { | 668 | .bodyBox { |
| 664 | margin-top: 15px; | 669 | margin-top: 15px; |
| 665 | .names { | 670 | .names { |
| 666 | // font-family: PingFangSC-Regular; | 671 | // font-family: PingFangSC-Regular; |
| 667 | font-size: 12px; | 672 | font-size: 12px; |
| 668 | color: #151515; | 673 | color: #151515; |
| 669 | letter-spacing: 0; | 674 | letter-spacing: 0; |
| 670 | text-align: justify; | 675 | text-align: justify; |
| 671 | line-height: 17px; | 676 | line-height: 17px; |
| 672 | margin-left: 5px; | 677 | margin-left: 5px; |
| 673 | margin-right: 10px; | 678 | margin-right: 10px; |
| 674 | } | 679 | } |
| 675 | text { | 680 | text { |
| 676 | // font-family: PingFangSC-Regular; | 681 | // font-family: PingFangSC-Regular; |
| 677 | font-size: 12px; | 682 | font-size: 12px; |
| 678 | color: #666666; | 683 | color: #666666; |
| 679 | letter-spacing: 0; | 684 | letter-spacing: 0; |
| 680 | text-align: justify; | 685 | text-align: justify; |
| 681 | } | 686 | } |
| 682 | } | 687 | } |
| 683 | } | 688 | } |
| 684 | .goods-form { | 689 | .goods-form { |
| 685 | display: flex; | 690 | display: flex; |
| 686 | flex-direction: column; | 691 | flex-direction: column; |
| 687 | align-items: center; | 692 | align-items: center; |
| 688 | justify-content: center; | 693 | justify-content: center; |
| 689 | background-color: #fff; | 694 | background-color: #fff; |
| 690 | width: 100%; | 695 | width: 100%; |
| 691 | .p1 { | 696 | .p1 { |
| 692 | font-size: 16px; | 697 | font-size: 16px; |
| 693 | color: #333333; | 698 | color: #333333; |
| 694 | letter-spacing: -0.3px; | 699 | letter-spacing: -0.3px; |
| 695 | text-align: justify; | 700 | text-align: justify; |
| 696 | line-height: 24px; | 701 | line-height: 24px; |
| 697 | margin: 4px 0; | 702 | margin: 4px 0; |
| 698 | } | 703 | } |
| 699 | .p2 { | 704 | .p2 { |
| 700 | font-size: 12px; | 705 | font-size: 12px; |
| 701 | color: #999999; | 706 | color: #999999; |
| 702 | letter-spacing: -0.23px; | 707 | letter-spacing: -0.23px; |
| 703 | margin-bottom: 18rpx; | 708 | margin-bottom: 18rpx; |
| 704 | } | 709 | } |
| 705 | image { | 710 | image { |
| 706 | width: 28rpx; | 711 | width: 28rpx; |
| 707 | height: 26rpx; | 712 | height: 26rpx; |
| 708 | } | 713 | } |
| 709 | .confirm { | 714 | .confirm { |
| 710 | display: flex; | 715 | display: flex; |
| 711 | align-items: center; | 716 | align-items: center; |
| 712 | font-size: 12px; | 717 | font-size: 12px; |
| 713 | color: #666666; | 718 | color: #666666; |
| 714 | letter-spacing: -0.23px; | 719 | letter-spacing: -0.23px; |
| 715 | width: 684rpx; | 720 | width: 684rpx; |
| 716 | image { | 721 | image { |
| 717 | margin-right: 25rpx; | 722 | margin-right: 25rpx; |
| 718 | } | 723 | } |
| 719 | } | 724 | } |
| 720 | .picker { | 725 | .picker { |
| 721 | display: flex; | 726 | display: flex; |
| 722 | flex-direction: column; | 727 | flex-direction: column; |
| 723 | justify-content: center; | 728 | justify-content: center; |
| 724 | align-items: center; | 729 | align-items: center; |
| 725 | width: 100%; | 730 | width: 100%; |
| 726 | image { | 731 | image { |
| 727 | width: 10px; | 732 | width: 10px; |
| 728 | height: 10px; | 733 | height: 10px; |
| 729 | margin-right: 5px; | 734 | margin-right: 5px; |
| 730 | } | 735 | } |
| 731 | .picker-choice { | 736 | .picker-choice { |
| 732 | display: flex; | 737 | display: flex; |
| 733 | width: 684rpx; | 738 | width: 684rpx; |
| 734 | align-items: center; | 739 | align-items: center; |
| 735 | margin-bottom: 40rpx; | 740 | margin-bottom: 40rpx; |
| 736 | .choice-left { | 741 | .choice-left { |
| 737 | width: 210rpx; | 742 | width: 210rpx; |
| 738 | .p11 { | 743 | .p11 { |
| 739 | font-size: 14px; | 744 | font-size: 14px; |
| 740 | color: #333333; | 745 | color: #333333; |
| 741 | letter-spacing: -0.26px; | 746 | letter-spacing: -0.26px; |
| 742 | text-align: justify; | 747 | text-align: justify; |
| 743 | line-height: 24px; | 748 | line-height: 24px; |
| 744 | } | 749 | } |
| 745 | .p12 { | 750 | .p12 { |
| 746 | font-size: 10px; | 751 | font-size: 10px; |
| 747 | color: #3f3f3f; | 752 | color: #3f3f3f; |
| 748 | letter-spacing: -0.19px; | 753 | letter-spacing: -0.19px; |
| 749 | text-align: justify; | 754 | text-align: justify; |
| 750 | line-height: 24px; | 755 | line-height: 24px; |
| 751 | } | 756 | } |
| 752 | } | 757 | } |
| 753 | .p13 { | 758 | .p13 { |
| 754 | font-size: 10px; | 759 | font-size: 10px; |
| 755 | color: #999999; | 760 | color: #999999; |
| 756 | letter-spacing: -0.19px; | 761 | letter-spacing: -0.19px; |
| 757 | margin-right: 10px; | 762 | margin-right: 10px; |
| 758 | } | 763 | } |
| 759 | .p13-date { | 764 | .p13-date { |
| 760 | font-size: 10px; | 765 | font-size: 10px; |
| 761 | color: #999999; | 766 | color: #999999; |
| 762 | letter-spacing: -0.19px; | 767 | letter-spacing: -0.19px; |
| 763 | margin-right: 5px; | 768 | margin-right: 5px; |
| 764 | } | 769 | } |
| 765 | .p14 { | 770 | .p14 { |
| 766 | font-size: 14px; | 771 | font-size: 14px; |
| 767 | color: #666666; | 772 | color: #666666; |
| 768 | letter-spacing: -0.26px; | 773 | letter-spacing: -0.26px; |
| 769 | text-align: center; | 774 | text-align: center; |
| 770 | width: 124rpx; | 775 | width: 124rpx; |
| 771 | border-bottom: 1px solid #cfcfcf; | 776 | border-bottom: 1px solid #cfcfcf; |
| 772 | } | 777 | } |
| 773 | } | 778 | } |
| 774 | } | 779 | } |
| 775 | } | 780 | } |
| 776 | } | 781 | } |
| 777 | } | 782 | } |
| 778 | .choose { | 783 | .choose { |
| 779 | width: 100%; | 784 | width: 100%; |
| 780 | background: #ffffff; | 785 | background: #ffffff; |
| 781 | border-radius: 12rpx; | 786 | border-radius: 12rpx; |
| 782 | margin-top: 20rpx; | 787 | margin-top: 20rpx; |
| 783 | padding: 40rpx 40rpx 112rpx 40rpx; | 788 | padding: 40rpx 40rpx 112rpx 40rpx; |
| 784 | box-sizing: border-box; | 789 | box-sizing: border-box; |
| 785 | .chooseItem { | 790 | .chooseItem { |
| 786 | width: 100%; | 791 | width: 100%; |
| 787 | padding-bottom: 32rpx; | 792 | padding-bottom: 32rpx; |
| 788 | border-bottom: 1px solid #e9e9e9; | 793 | border-bottom: 1px solid #e9e9e9; |
| 789 | margin-bottom: 28rpx; | 794 | margin-bottom: 28rpx; |
| 790 | } | 795 | } |
| 791 | .chooseRes { | 796 | .chooseRes { |
| 792 | font-size: 12px; | 797 | font-size: 12px; |
| 793 | color: #666666; | 798 | color: #666666; |
| 794 | } | 799 | } |
| 795 | .itemsWrap { | 800 | .itemsWrap { |
| 796 | display: flex; | 801 | display: flex; |
| 797 | flex-direction: row; | 802 | flex-direction: row; |
| 798 | flex-wrap: wrap; | 803 | flex-wrap: wrap; |
| 799 | justify-content: flex-start; | 804 | justify-content: flex-start; |
| 800 | align-items: center; | 805 | align-items: center; |
| 801 | padding-top: 24rpx; | 806 | padding-top: 24rpx; |
| 802 | .item1 { | 807 | .item1 { |
| 803 | width: 64rpx; | 808 | width: 64rpx; |
| 804 | height: 64rpx; | 809 | height: 64rpx; |
| 805 | border-radius: 32rpx; | 810 | border-radius: 32rpx; |
| 806 | margin: 0 36rpx 24rpx 0; | 811 | margin: 0 36rpx 24rpx 0; |
| 807 | transition: all 0.3s; | 812 | transition: all 0.3s; |
| 808 | border: 1px solid #ffffff; | 813 | border: 1px solid #ffffff; |
| 809 | } | 814 | } |
| 810 | .item2 { | 815 | .item2 { |
| 811 | // width: 100rpx; | 816 | // width: 100rpx; |
| 812 | padding: 0 30rpx; | 817 | padding: 0 30rpx; |
| 813 | height: 60rpx; | 818 | height: 60rpx; |
| 814 | margin: 0 20rpx 20rpx 0; | 819 | margin: 0 20rpx 20rpx 0; |
| 815 | transition: all 0.3s; | 820 | transition: all 0.3s; |
| 816 | background: #f2f2f2; | 821 | background: #f2f2f2; |
| 817 | border-radius: 2px; | 822 | border-radius: 2px; |
| 818 | border-radius: 2px; | 823 | border-radius: 2px; |
| 819 | line-height: 60rpx; | 824 | line-height: 60rpx; |
| 820 | text-align: center; | 825 | text-align: center; |
| 821 | color: #666666; | 826 | color: #666666; |
| 822 | font-size: 12px; | 827 | font-size: 12px; |
| 823 | } | 828 | } |
| 824 | .active1 { | 829 | .active1 { |
| 825 | opacity: 0.7; | 830 | opacity: 0.7; |
| 826 | border: 1px solid #ff6b4a; | 831 | border: 1px solid #ff6b4a; |
| 827 | } | 832 | } |
| 828 | .active2 { | 833 | .active2 { |
| 829 | background: rgba(255, 107, 74, 0.15); | 834 | background: rgba(255, 107, 74, 0.15); |
| 830 | color: #ff6b4a; | 835 | color: #ff6b4a; |
| 831 | } | 836 | } |
| 832 | } | 837 | } |
| 833 | } | 838 | } |
| 834 | .button { | 839 | .button { |
| 835 | width: 100%; | 840 | width: 100%; |
| 836 | height: 112rpx; | 841 | height: 112rpx; |
| 837 | background-color: #ff6b4a; | 842 | background-color: #ff6b4a; |
| 838 | font-size: 16px; | 843 | font-size: 16px; |
| 839 | color: #ffffff; | 844 | color: #ffffff; |
| 840 | line-height: 112rpx; | 845 | line-height: 112rpx; |
| 841 | text-align: center; | 846 | text-align: center; |
| 842 | position: fixed; | 847 | position: fixed; |
| 843 | bottom: 0; | 848 | bottom: 0; |
| 844 | left: 0; | 849 | left: 0; |
| 845 | } | 850 | } |
| 846 | } | 851 | } |
| 847 | </style> | 852 | </style> |
| 848 | 853 |