刘文博 / gulu-vue

1

1

2

2

3

3

4

4

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

11

12

<text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>

12

<text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>

13

<text class="remarks">支持7天无理由退货顺丰发货</text>

13

<text class="remarks">支持7天无理由退货顺丰发货</text>

14

14

15

15

16

<text>(限购{{maxCount}}副)</text>

16

<text>(限购{{maxCount}}副)</text>

17

17

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

35

36

36

37

37

38

38

39

39

40

41

42

填写验光数据

43

</view>

44

<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>

45

46

47

48

<text class="pd">验光单取名:</text>

49

</view>

50

<input type="text" @blur="handleInput" class="input"

51

placeholder="请输入名称" maxlength="20" :value="name" />

52

</view>

53

</view>

54

55

56

57

<text class="p11">{{pickerInfoList[0].nameC}}</text>

58

<text class="p12">{{pickerInfoList[0].nameE}}</text>

59

</view>

60

61

62

63

64

65

66

</view>

67

68

</picker>

69

70

71

72

73

74

75

</view>

76

77

</picker>

78

</view>

79

</view>

80

81

82

83

<text class="p11">{{pickerInfoList[1].nameC}}</text>

84

<text class="p12">{{pickerInfoList[1].nameE}}</text>

85

</view>

86

87

88

89

90

91

92

</view>

93

94

</picker>

95

96

97

98

99

100

101

</view>

102

103

</picker>

104

</view>

105

</view>

106

107

108

109

<text class="p11">{{pickerInfoList[2].nameC}}</text>

110

<text class="p12">{{pickerInfoList[2].nameE}}</text>

111

</view>

112

113

114

115

116

117

</view>

118

</picker>

119

120

121

122

123

124

125

</view>

126

127

</picker>

128

</view>

129

</view>

130

131

132

133

134

</view>

135

<input type="digit" @change="handleInputPd" class="input"

136

placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />

137

</view>

138

</view>

139

140

141

142

<text class="p11">{{pickerInfoList[3].nameC}}</text>

143

</view>

144

145

146

147

148

149

</view>

150

</picker>

151

152

153

154

155

156

</view>

157

</picker>

158

159

160

161

162

163

</view>

164

</picker>

165

</view>

166

</view>

167

168

169

<text>确认以上输入信息来源于我的验光数据!</text>

170

</view>

171

</view>

172

<!-- <view class="goods-form">

40

173

41

174

42

<text class="p1">填写验光数据</text>

175

<text class="p1">填写验光数据</text>

43

</view>

176

</view>

44

<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>

177

<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>

45

178

46

179

47

180

48

<text class="p11">验光单取名:</text>

181

<text class="p11">验光单取名:</text>

49

</view>

182

</view>

50

<input

183

<input

51

class="choice-name uni-input"

184

class="choice-name uni-input"

52

:value="dataName"

185

:value="dataName"

53

@blur="fillData"

186

@blur="fillData"

54

placeholder="下系"

187

placeholder="下系"

55

/>

188

/>

56

</view>

189

</view>

57

</view>

190

</view>

58

191

59

192

60

193

61

<text class="p11">{{pickerInfoList[0].nameC}}</text>

194

<text class="p11">{{pickerInfoList[0].nameC}}</text>

62

<text class="p12">{{pickerInfoList[0].nameE}}</text>

195

<text class="p12">{{pickerInfoList[0].nameE}}</text>

63

</view>

196

</view>

64

197

65

<text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>

198

<text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>

66

<picker

199

<picker

67

@change="bindPickerChange01"

200

@change="bindPickerChange01"

68

:value="pickerInfoList[0].nameIndex1"

201

:value="pickerInfoList[0].nameIndex1"

69

:range="pickerInfoList[0].nameArray1"

202

:range="pickerInfoList[0].nameArray1"

70

>

203

>

71

204

72

</picker>

205

</picker>

73

206

74

<text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>

207

<text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>

75

<picker

208

<picker

76

@change="bindPickerChange02"

209

@change="bindPickerChange02"

77

:value="pickerInfoList[0].nameIndex2"

210

:value="pickerInfoList[0].nameIndex2"

78

:range="pickerInfoList[0].nameArray2"

211

:range="pickerInfoList[0].nameArray2"

79

>

212

>

80

213

81

</picker>

214

</picker>

82

</view>

215

</view>

83

</view>

216

</view>

84

217

85

218

86

219

87

<text class="p11">{{pickerInfoList[1].nameC}}</text>

220

<text class="p11">{{pickerInfoList[1].nameC}}</text>

88

<text class="p12">{{pickerInfoList[1].nameE}}</text>

221

<text class="p12">{{pickerInfoList[1].nameE}}</text>

89

</view>

222

</view>

90

223

91

<text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>

224

<text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>

92

<picker

225

<picker

93

@change="bindPickerChange11"

226

@change="bindPickerChange11"

94

:value="pickerInfoList[1].nameIndex1"

227

:value="pickerInfoList[1].nameIndex1"

95

:range="pickerInfoList[1].nameArray1"

228

:range="pickerInfoList[1].nameArray1"

96

>

229

>

97

230

98

</picker>

231

</picker>

99

232

100

<text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>

233

<text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>

101

<picker

234

<picker

102

@change="bindPickerChange12"

235

@change="bindPickerChange12"

103

:value="pickerInfoList[1].nameIndex2"

236

:value="pickerInfoList[1].nameIndex2"

104

:range="pickerInfoList[1].nameArray2"

237

:range="pickerInfoList[1].nameArray2"

105

>

238

>

106

239

107

</picker>

240

</picker>

108

</view>

241

</view>

109

</view>

242

</view>

110

243

111

244

112

245

113

<text class="p11">{{pickerInfoList[2].nameC}}</text>

246

<text class="p11">{{pickerInfoList[2].nameC}}</text>

114

<text class="p12">{{pickerInfoList[2].nameE}}</text>

247

<text class="p12">{{pickerInfoList[2].nameE}}</text>

115

</view>

248

</view>

116

249

117

<text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>

250

<text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>

118

<picker

251

<picker

119

@change="bindPickerChange21"

252

@change="bindPickerChange21"

120

:value="pickerInfoList[2].nameIndex1"

253

:value="pickerInfoList[2].nameIndex1"

121

:range="pickerInfoList[2].nameArray1"

254

:range="pickerInfoList[2].nameArray1"

122

>

255

>

123

256

124

</picker>

257

</picker>

125

258

126

<text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>

259

<text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>

127

<picker

260

<picker

128

@change="bindPickerChange22"

261

@change="bindPickerChange22"

129

:value="pickerInfoList[2].nameIndex2"

262

:value="pickerInfoList[2].nameIndex2"

130

:range="pickerInfoList[2].nameArray2"

263

:range="pickerInfoList[2].nameArray2"

131

>

264

>

132

265

133

</picker>

266

</picker>

134

</view>

267

</view>

135

</view>

268

</view>

136

269

137

270

138

271

139

<text class="p11">{{pickerInfoList[3].nameC}}</text>

272

<text class="p11">{{pickerInfoList[3].nameC}}</text>

140

<text class="p12">{{pickerInfoList[3].nameE}}</text>

273

<text class="p12">{{pickerInfoList[3].nameE}}</text>

141

</view>

274

</view>

142

275

143

<text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>

276

<text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>

144

<picker

277

<picker

145

@change="bindPickerChange31"

278

@change="bindPickerChange31"

146

:value="pickerInfoList[3].nameIndex1"

279

:value="pickerInfoList[3].nameIndex1"

147

:range="pickerInfoList[3].nameArray1"

280

:range="pickerInfoList[3].nameArray1"

148

>

281

>

149

282

150

</picker>

283

</picker>

151

284

152

<text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>

285

<text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>

153

<picker

286

<picker

154

@change="bindPickerChange32"

287

@change="bindPickerChange32"

155

:value="pickerInfoList[3].nameIndex2"

288

:value="pickerInfoList[3].nameIndex2"

156

:range="pickerInfoList[3].nameArray2"

289

:range="pickerInfoList[3].nameArray2"

157

>

290

>

158

291

159

</picker>

292

</picker>

160

</view>

293

</view>

161

</view>

294

</view>

162

295

163

296

164

297

165

<text class="p11">{{pickerInfoList[4].nameC}}</text>

298

<text class="p11">{{pickerInfoList[4].nameC}}</text>

166

</view>

299

</view>

167

300

168

<text

301

<text

169

class="p14"

302

class="p14"

170

style="width: 34px;"

303

style="width: 34px;"

171

>{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>

304

>{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>

172

<picker

305

<picker

173

@change="bindPickerChange41"

306

@change="bindPickerChange41"

174

:value="pickerInfoList[4].nameIndex1"

307

:value="pickerInfoList[4].nameIndex1"

175

:range="pickerInfoList[4].nameArray1"

308

:range="pickerInfoList[4].nameArray1"

176

>

309

>

177

310

178

</picker>

311

</picker>

179

312

180

<text

313

<text

181

class="p14"

314

class="p14"

182

style="width: 30px;"

315

style="width: 30px;"

183

>{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>

316

>{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>

184

<picker

317

<picker

185

@change="bindPickerChange42"

318

@change="bindPickerChange42"

186

:value="pickerInfoList[4].nameIndex2"

319

:value="pickerInfoList[4].nameIndex2"

187

:range="pickerInfoList[4].nameArray2"

320

:range="pickerInfoList[4].nameArray2"

188

>

321

>

189

322

190

</picker>

323

</picker>

191

324

192

<text

325

<text

193

class="p14"

326

class="p14"

194

style="width: 30px;"

327

style="width: 30px;"

195

>{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>

328

>{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>

196

<picker

329

<picker

197

@change="bindPickerChange43"

330

@change="bindPickerChange43"

198

:value="pickerInfoList[4].nameIndex3"

331

:value="pickerInfoList[4].nameIndex3"

199

:range="pickerInfoList[4].nameArray3"

332

:range="pickerInfoList[4].nameArray3"

200

>

333

>

201

334

202

</picker>

335

</picker>

203

</view>

336

</view>

204

</view>

337

</view>

205

338

206

<image

339

<image

207

:src="tablist.confirm ? tabicon[0] : tabicon[1]"

340

:src="tablist.confirm ? tabicon[0] : tabicon[1]"

208

@click="changeConfirm"

341

@click="changeConfirm"

209

></image>

342

></image>

210

<text>确认以上输入信息来源于我的验光数据!</text>

343

<text>确认以上输入信息来源于我的验光数据!</text>

211

</view>

344

</view>

212

</view>

345

</view> -->

213

346

214

</template>

347

</template>

215

348

216

<view

349

<view

217

v-for="item in pickerInfoList"

350

v-for="item in pickerInfoList"

218

:key="item.key"

351

:key="item.key"

219

class="bodyBox"

352

class="bodyBox"

220

>

353

>

221

354

222

<text class="names">{{item.nameC}}</text>

355

<text class="names">{{item.nameC}}</text>

223

<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>

356

<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>

224

<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>

357

<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>

225

<text>{{item.nameArray3[item.nameIndex2]}}日</text>

358

<text>{{item.nameArray3[item.nameIndex2]}}日</text>

226

</template>

359

</template>

227

360

228

361

229

362

230

</template>

363

</template>

231

364

232

<text class="names">{{item.nameC}}</text>

365

<text class="names">{{item.nameC}}</text>

233

<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>

366

<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>

234

<text>右 {{item.nameArray2[item.nameIndex2]}}</text>

367

<text>右 {{item.nameArray2[item.nameIndex2]}}</text>

235

</template>

368

</template>

236

</view>

369

</view>

237

</template>

370

</template>

238

</view>

371

</view>

239

</view>

372

</view>

240

</view>

373

</view>

241

374

242

<view

375

<view

243

class="chooseItem_1_content"

376

class="chooseItem_1_content"

244

v-for="(item,index) in attrList"

377

v-for="(item,index) in attrList"

245

:key="index"

378

:key="index"

246

>

379

>

247

380

248

<UniCollapseItem

381

<UniCollapseItem

249

:open="show[index]"

382

:open="show[index]"

250

:title="item.meta_name"

383

:title="item.meta_name"

251

showAnimation=false

384

showAnimation=false

252

>

385

>

253

386

254

387

255

<view

388

<view

256

class="item2"

389

class="item2"

257

v-for="(one,i) in item.attr"

390

v-for="(one,i) in item.attr"

258

:key="i"

391

:key="i"

259

:class="{ active2: current[index] === i }"

392

:class="{ active2: current[index] === i }"

260

@click="onClickItem(index, i)"

393

@click="onClickItem(index, i)"

261

>{{one.name}}</view>

394

>{{one.name}}</view>

262

</view>

395

</view>

263

</view>

396

</view>

264

</UniCollapseItem>

397

</UniCollapseItem>

265

</UniCollapse>

398

</UniCollapse>

266

<view

399

<view

267

class="chooseRes"

400

class="chooseRes"

268

v-show="!show[index]"

401

v-show="!show[index]"

269

>* {{attrList[index].attr[current[index]].name}}</view>

402

>* {{attrList[index].attr[current[index]].name}}</view>

270

</view>

403

</view>

271

<!-- <view class="chooseItem_1 chooseItem">

404

<!-- <view class="chooseItem_1 chooseItem">

272

405

273

<UniCollapseItem

406

<UniCollapseItem

274

open=true

407

open=true

275

title="款式挑选"

408

title="款式挑选"

276

showAnimation=false

409

showAnimation=false

277

>

410

>

278

<view

411

<view

279

class="chooseRes"

412

class="chooseRes"

280

v-show="show[1]"

413

v-show="show[1]"

281

>* {{chooseRes1}}</view>

414

>* {{chooseRes1}}</view>

282

415

283

416

284

<view

417

<view

285

class="item1"

418

class="item1"

286

v-for="(item,index) in chooseItem1"

419

v-for="(item,index) in chooseItem1"

287

:key="index"

420

:key="index"

288

:style="item.style"

421

:style="item.style"

289

:class="{ active1: current1 === index }"

422

:class="{ active1: current1 === index }"

290

@click="onClickItem1(index)"

423

@click="onClickItem1(index)"

291

></view>

424

></view>

292

</view>

425

</view>

293

</view>

426

</view>

294

</UniCollapseItem>

427

</UniCollapseItem>

295

</UniCollapse>

428

</UniCollapse>

296

<view

429

<view

297

class="chooseRes"

430

class="chooseRes"

298

v-show="show[1]"

431

v-show="show[1]"

299

>* {{chooseRes1}}</view>

432

>* {{chooseRes1}}</view>

300

</view>

433

</view>

301

434

302

435

303

<UniCollapseItem

436

<UniCollapseItem

304

open=true

437

open=true

305

title="直径"

438

title="直径"

306

showAnimation=false

439

showAnimation=false

307

>

440

>

308

441

309

442

310

<view

443

<view

311

class="item2"

444

class="item2"

312

v-for="(item,index) in chooseItem2"

445

v-for="(item,index) in chooseItem2"

313

:key="index"

446

:key="index"

314

:class="{ active2: current2 === index }"

447

:class="{ active2: current2 === index }"

315

@click="onClickItem2(index)"

448

@click="onClickItem2(index)"

316

>{{item.num}}</view>

449

>{{item.num}}</view>

317

</view>

450

</view>

318

</view>

451

</view>

319

</UniCollapseItem>

452

</UniCollapseItem>

320

</UniCollapse>

453

</UniCollapse>

321

<view

454

<view

322

class="chooseRes"

455

class="chooseRes"

323

v-show="show[2]"

456

v-show="show[2]"

324

>* {{chooseRes2}}</view>

457

>* {{chooseRes2}}</view>

325

</view>

458

</view>

326

459

327

460

328

<UniCollapseItem

461

<UniCollapseItem

329

open=true

462

open=true

330

title="度数"

463

title="度数"

331

showAnimation=false

464

showAnimation=false

332

>

465

>

333

466

334

467

335

<view

468

<view

336

class="item2"

469

class="item2"

337

v-for="(item,index) in chooseItem3"

470

v-for="(item,index) in chooseItem3"

338

:key="index"

471

:key="index"

339

:class="{ active2: current3 === index }"

472

:class="{ active2: current3 === index }"

340

@click="onClickItem3(index)"

473

@click="onClickItem3(index)"

341

>{{item}}</view>

474

>{{item}}</view>

342

</view>

475

</view>

343

</view>

476

</view>

344

</UniCollapseItem>

477

</UniCollapseItem>

345

</UniCollapse>

478

</UniCollapse>

346

<view

479

<view

347

class="chooseRes"

480

class="chooseRes"

348

v-show="show[3]"

481

v-show="show[3]"

349

>* {{chooseRes3}}</view>

482

>* {{chooseRes3}}</view>

350

</view> -->

483

</view> -->

351

</view>

484

</view>

352

<view

485

<view

353

class="button"

486

class="button"

354

@click="toComfirmOrder"

487

@click="toComfirmOrder"

355

>

488

>

356

立即结算

489

立即结算

357

</view>

490

</view>

358

</view>

491

</view>

359

</template>

492

</template>

360

493

361

494

362

import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'

495

import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'

363

import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'

496

import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'

364

import store from '@/store'

497

import store from '@/store'

365

498

366

export default {

499

export default {

367

components: {

500

components: {

368

UniCollapse,

501

UniCollapse,

369

UniCollapseItem

502

UniCollapseItem

370

},

503

},

371

data() {

504

data() {

372

return {

505

return {

373

506

374

pid: 0,

507

pid: 0,

375

maxCount: 20,

508

maxCount: 20,

376

dataName: '', // 验光数据人员名称

509

dataName: '', // 验光数据人员名称

377

isDataName: false,

510

isDataName: false,

378

opIsOpen: true,

511

opIsOpen: true,

379

addDisabled: false,

512

addDisabled: false,

380

desDisabled: false,

513

desDisabled: false,

381

current1: 0,

514

current1: 0,

382

current2: 0,

515

current2: 0,

383

current3: 0,

516

current3: 0,

384

current: [],

517

current: [],

385

show: [],

518

show: [],

386

chooseRes1: {

519

chooseRes1: {

387

sku_name: 'Miss 黑二代【减龄自然】',

520

sku_name: 'Miss 黑二代【减龄自然】',

388

sk_id: '128'

521

sk_id: '128'

389

},

522

},

390

checkedData: {

523

checkedData: {

391

524

392

},

525

},

393

chooseRes2: '14.0',

526

chooseRes2: '14.0',

394

chooseRes3: 0,

527

chooseRes3: 0,

395

chooseItem1: [

528

chooseItem1: [

396

{ style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' },

529

{ 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 黑二代【防紫外线】' },

530

{ 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代【防紫外线】' },

531

{ 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代【防紫外线】' },

532

{ 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代【防紫外线】' },

533

{ 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代【防紫外线】' },

534

{ 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代【防紫外线】' },

535

{ 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代【防紫外线】' },

536

{ 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代【防紫外线】' },

537

{ 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代【防紫外线】' },

538

{ 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代【防紫外线】' },

539

{ 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代【防紫外线】' },

540

{ 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代【防紫外线】' },

541

{ 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代【防紫外线】' },

542

{ 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代【防紫外线】' }

543

{ style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }

411

],

544

],

412

chooseItem2: [

545

chooseItem2: [

413

{ num: '14.0' },

546

{ num: '14.0' },

414

{ num: '14.2' },

547

{ num: '14.2' },

415

{ num: '14.4' },

548

{ num: '14.4' },

416

{ num: '14.5' }

549

{ num: '14.5' }

417

],

550

],

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],

551

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

// 度数相关数据

552

// 度数相关数据

420

pickerInfoList: [

553

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 },

554

{nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],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 },

555

{nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],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 },

556

{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],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 },

557

{nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0}

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 }

558

],

426

]

559

confirm: false, // 用户是否确认

560

tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],

561

562

oldname:'',// 用于判读用户是否改变名字

563

pickerInfoChioce:{

564

"leftSph": '',

565

"rightSph": '',

566

"leftCyl": '',

567

"rightCyl": '',

568

"leftAxi": '',

569

"rightAxi": '',

570

"time":{

571

"year":0,

572

"month": 0,

573

"day":0 ,

574

}

575

},

576

pd: '',// 瞳距

577

oldpd: '',// 用于判断用户是否改变瞳距

578

kinds:1, // kinds=1，提交为新增验光，2为修改

579

mp_id: Number

427

}

580

}

428

},

581

},

429

computed: {

582

computed: {

430

attrList() {

583

attrList() {

431

return this.$store.state.read.goodInfo.attrList

584

return this.$store.state.read.goodInfo.attrList

432

},

585

},

433

skuList() {

586

skuList() {

434

return this.$store.state.read.goodInfo.skuList

587

return this.$store.state.read.goodInfo.skuList

435

},

588

},

436

mpList() {

589

mpList() {

437

return this.$store.state.myLoveList.loveList

590

return this.$store.state.myLoveList.loveList

438

}

591

}

439

},

592

},

440

onLoad({ pid }) {

593

onLoad({ pid }) {

441

this.pid = pid

594

this.pid = pid

442

store.dispatch('read/fetch', {

595

store.dispatch('read/fetch', {

443

pid

596

pid

444

}).then(() => {

597

}).then(() => {

445

const current = []

598

const current = []

446

const show = []

599

const show = []

447

for (let index = 0; index < this.attrList.length; index++) {

600

for (let index = 0; index < this.attrList.length; index++) {

448

current.push(0)

601

current.push(0)

449

show.push(true)

602

show.push(true)

450

}

603

}

451

this.current = current

604

this.current = current

452

this.show = show

605

this.show = show

453

})

606

})

454

store.dispatch('myLoveList/getLoveList')

607

store.dispatch('myLoveList/getLoveList')

608

609

// 初始化SPL、CYL、AXI的值

610

for (let j = 0; j < 3; j++) {

611

for(let i=-12;i<6;i++){

612

this.pickerInfoList[j].nameArray1.push(i)

613

this.pickerInfoList[j].nameArray1.push(i+0.5)

614

this.pickerInfoList[j].nameArray2.push(i)

615

this.pickerInfoList[j].nameArray2.push(i+0.5)

616

if(i>=-6){

617

this.pickerInfoList[j].nameArray1.push(i+0.25)

618

this.pickerInfoList[j].nameArray1.push(i+0.75)

619

this.pickerInfoList[j].nameArray2.push(i+0.25)

620

this.pickerInfoList[j].nameArray2.push(i+0.75)

621

}

622

if(i==5){

623

this.pickerInfoList[j].nameArray1.push(i+1)

624

this.pickerInfoList[j].nameArray2.push(i+1)

625

}

626

}

627

}

628

// 初始化日期值

629

for (let i = 1; i < 32; i++){

630

this.pickerInfoList[3].nameArray3.push(i)

631

}

632

// 初始化年份前后五年

633

let myDate = new Date();

634

let nowYear = myDate.getFullYear();

635

for(let i=0;i<5;i++){

636

this.pickerInfoList[3].nameArray1.push(nowYear-i)

637

}

455

},

638

},

456

methods: {

639

methods: {

640

// picker相关功能

641

handleInput(e){

642

this.name=e.target.value

643

this.isDataName = false

644

console.log('e---->', e)

645

const mpList = this.mpList

646

console.log('mpList===>',mpList)

647

for (let index = 0; index < mpList.length; index++) {

648

if (e.detail.value === mpList[index].name) {

649

this.isDataName = true

650

uni.showModal({

651

title: '提示',

652

content: `是否填充已有的"${e.detail.value}"的数据`,

653

success: ({ confirm }) => {

654

if (confirm) {

655

this.kinds=2

656

console.log('args===>',index)

657

// const mpList=Object.assign({},this.$store.state.mympList.mpList)

658

console.log('mpList===>',mpList)

659

this.name=mpList[index].name

660

this.pd=mpList[index].pd

661

this.mp_id=mpList[index].mp_id

662

this.oldname=mpList[index].name

663

this.oldpd=mpList[index].pd

664

// 将kinds =2时的值传到该页面

665

this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)

666

this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)

667

this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)

668

this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)

669

this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)

670

this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)

671

672

this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0,4))

673

if(mpList[index].in_time.toString().slice(5,6)==0){

674

this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6,7))

675

} else{

676

this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5,7))

677

}

678

if(mpList[index].in_time.toString().slice(8,9)==0){

679

this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9,10))

680

} else{

681

this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8,10))

682

}

683

// this.checkedData = mpList[index]

684

// console.log('checkedData', this.checkedData)

685

}

686

}

687

})

688

}

689

}

690

},

691

handleInputPd(e){

692

// 只能输入正浮点数或正数

693

if(/^\d+(\.\d+)?$/.test(e.target.value)){

694

this.pd=e.target.value

695

} else {

696

uni.showToast({

697

title:"请输入有效数据;示例:89",

698

icon: "none",

699

duration: 2000,

700

})

701

this.pd = ''

702

}

703

704

},

705

changeConfirm() {

706

this.confirm = !this.confirm

707

},

708

bindPickerChange01: function(e) {

709

this.pickerInfoList[0].nameIndex1 = e.target.value

710

this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value]

711

},

712

bindPickerChange02: function(e) {

713

this.pickerInfoList[0].nameIndex2 = e.target.value

714

this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value]

715

},

716

717

bindPickerChange11: function(e) {

718

this.pickerInfoList[1].nameIndex1 = e.target.value

719

this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value]

720

},

721

bindPickerChange12: function(e) {

722

this.pickerInfoList[1].nameIndex2 = e.target.value

723

this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value]

724

},

725

726

bindPickerChange21: function(e) {

727

this.pickerInfoList[2].nameIndex1 = e.target.value

728

this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value]

729

},

730

bindPickerChange22: function(e) {

731

this.pickerInfoList[2].nameIndex2 = e.target.value

732

this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value]

733

},

734

735

bindPickerChange41: function(e) {

736

this.pickerInfoList[3].nameIndex1 = e.target.value

737

this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value]

738

},

739

bindPickerChange42: function(e) {

740

this.pickerInfoList[3].nameIndex2 = e.target.value

741

this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value]

742

},

743

bindPickerChange43: function(e) {

744

this.pickerInfoList[3].nameIndex3 = e.target.value

745

this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value]

746

},

747

457

// 是否填充人员数据

748

// 是否填充人员数据

458

fillData(e) {

749

// fillData(e) {

459

this.isDataName = false

750

// this.isDataName = false

460

console.log('e---->', e)

751

// console.log('e---->', e)

461

const mpList = this.mpList

752

// const mpList = this.mpList

462

753

463

for (let index = 0; index < mpList.length; index++) {

754

// for (let index = 0; index < mpList.length; index++) {

464

if (e.detail.value === mpList[index].name) {

755

// if (e.detail.value === mpList[index].name) {

465

this.isDataName = true

756

// this.isDataName = true

466

uni.showModal({

757

// uni.showModal({

467

title: '提示',

758

// title: '提示',

468

content: `是否填充已有的${e.detail.value}的数据`,

759

// content: `是否填充已有的${e.detail.value}的数据`,

469

success: ({ confirm }) => {

760

// success: ({ confirm }) => {

470

if (confirm) {

761

// if (confirm) {

471

this.checkedData = mpList[index]

762

// this.checkedData = mpList[index]

472

console.log('checkedData', this.checkedData)

763

// console.log('checkedData', this.checkedData)

473

}

764

// }

474

}

765

// }

475

})

766

// })

476

}

767

// }

477

}

768

// }

478

},

769

// },

479

change(num) {

770

change(num) {

480

this.show[num] = !this.show[num]

771

this.show[num] = !this.show[num]

481

this.$forceUpdate()

772

this.$forceUpdate()

482

},

773

},

483

onClickItem(index, i) {

774

onClickItem(index, i) {

484

if (this.current[index] !== i) {

775

if (this.current[index] !== i) {

485

this.current[index] = i

776

this.current[index] = i

486

}

777

}

487

this.$forceUpdate()

778

this.$forceUpdate()

488

},

779

},

489

onClickItem1(index) {

780

onClickItem1(index) {

490

if (this.current1 !== index) {

781

if (this.current1 !== index) {

491

this.current1 = index

782

this.current1 = index

492

this.chooseRes1 = this.chooseItem1[index].describ

783

this.chooseRes1 = this.chooseItem1[index].describ

493

}

784

}

494

},

785

},

495

onClickItem2(index) {

786

onClickItem2(index) {

496

if (this.current2 !== index) {

787

if (this.current2 !== index) {

497

this.current2 = index

788

this.current2 = index

498

this.chooseRes2 = this.chooseItem2[index].num

789

this.chooseRes2 = this.chooseItem2[index].num

499

}

790

}

500

},

791

},

501

onClickItem3(index) {

792

onClickItem3(index) {

502

if (this.current3 !== index) {

793

if (this.current3 !== index) {

503

this.current3 = index

794

this.current3 = index

504

this.chooseRes3 = this.chooseItem3[index]

795

this.chooseRes3 = this.chooseItem3[index]

505

}

796

}

506

},

797

},

507

counter(isadd) {

798

counter(isadd) {

508

if (isadd) {

799

if (isadd) {

509

this.count >= this.maxCount ? this.addDisabled = true : this.count++

800

this.count >= this.maxCount ? this.addDisabled = true : this.count++

510

} else {

801

} else {

511

this.count <= 1 ? this.desDisabled = true : this.count--

802

this.count <= 1 ? this.desDisabled = true : this.count--

512

}

803

}

513

},

804

},

514

toComfirmOrder() {

805

toComfirmOrder() {

515

let i = 0

806

// 先处理验光部分的逻辑，如果ok在跳转

516

// 判断出是哪一个sku被选中

807

let flag=0;

517

for (let index = 0; index < this.current.length; index++) {

808

if(this.name==''){

518

console.log('index', index, i, index !== this.current.length - 1)

809

uni.showToast({

519

if (index !== this.current.length - 1) {

810

title:"请输入验光单取名",

520

console.log('----', this.current[index], this.attrList[1].attr.length, this.attrList)

811

icon: "none",

521

i = this.current[index] * this.attrList[1].attr.length

812

duration: 2000,

522

} else {

813

})

523

i += this.current[index]

814

}else{

524

}

815

525

console.log('i', i)

816

if(this.pd==''){

526

}

817

uni.showToast({

527

console.log('i------>', i)

818

title:"请输入瞳距",

528

// 判断是否其输入的人员数据是否已存在

819

icon: "none",

529

store.dispatch('order/saveParams', {

820

duration: 2000,

530

sk_id_arr: this.skuList[i],

821

})

531

current: this.current

822

}else{

532

})

823

824

if(this.kinds==1){

825

// 添加用户验光单

826

console.log('kinds====>',this.pickerInfoChioce.leftSph)

827

console.log('kinds====>',this.pickerInfoChioce.leftSph==Number)

828

console.log('kinds====>',this.pickerInfoChioce.rightSph==Number)

829

if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''||

830

this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''||

831

this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi==''

832

){

833

uni.showToast({

834

title:"请输入您的验光数据",

835

icon: "none",

836

duration: 2000,

837

})

838

}else{

839

if(this.confirm){

840

store.dispatch('myLoveList/addMylove', {

841

uid: this.$store.state.user.userInfo.uid,

842

openid: this.$store.state.user.userInfo.openid,

843

// mp_name: this.$store.state.user.userInfo.mp_name,

844

leftSph: this.pickerInfoChioce.leftSph,

845

rightSph: this.pickerInfoChioce.rightSph,

846

leftCyl: this.pickerInfoChioce.leftCyl,

847

rightCyl: this.pickerInfoChioce.rightCyl,

848

leftAxi: this.pickerInfoChioce.leftAxi,

849

rightAxi: this.pickerInfoChioce.rightAxi,

850

pd: this.pd,// 瞳距

851

mp_name:this.name,

852

// time: this.pickerInfoChioce.time,

853

// img_url2: "http://localhost:8087/images/shop_1/1/",

854

});

855

store.dispatch('myLoveList/getLoveList', {

856

uid: this.$store.state.user.userInfo.uid,

857

});

858

flag=1

859

} else{

860

uni.showToast({

861

title:"请确认您的验光数据",

862

icon: "none",

863

duration: 3000,

864

})

865

}

866

}

867

}

868

if(this.kinds==2){

869

// console.log('kinds====>',this.kinds)

870

// console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)

871

// console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))

872

if(this.confirm){

873

const leftList = ["leftSph","leftCyl","leftAxi"];

874

const rightList = ["rightSph", "rightCyl", "rightAxi"];

875

// let flag=0;

876

if(this.name!=this.oldname){

877

store.dispatch('myLoveList/updateMylove', {

878

uid: this.$store.state.user.userInfo.uid,

879

openid: this.$store.state.user.userInfo.openid,

880

mp_id: this.mp_id,

881

keyname: 'name',

882

keyvalue: this.name,

883

});

884

flag=1

885

}

886

if(this.pd!=this.oldpd){

887

store.dispatch('myLoveList/updateMylove', {

888

uid: this.$store.state.user.userInfo.uid,

889

openid: this.$store.state.user.userInfo.openid,

890

mp_id: this.mp_id,

891

keyname: 'pd',

892

keyvalue: this.pd,

893

});

894

flag=1

895

}

896

// 先验证是否输入有无空

897

let q= true;

898

for(let k=0; k<3;k++){

899

q=q&&(this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1]!=''&&

900

this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2]!='')

901

}

902

if(q){

903

904

for (let j=0; j<3; j++) {

905

if(this.pickerInfoList[j].nameIndex1!=0){

906

store.dispatch('myLoveList/updateMylove', {

907

uid: this.$store.state.user.userInfo.uid,

908

openid: this.$store.state.user.userInfo.openid,

909

mp_id: this.mp_id,

910

keyname: leftList[j],

911

keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],

912

});

913

}

914

if(this.pickerInfoList[j].nameIndex2!=0){

915

store.dispatch('myLoveList/updateMylove', {

916

uid: this.$store.state.user.userInfo.uid,

917

openid: this.$store.state.user.userInfo.openid,

918

mp_id: this.mp_id,

919

keyname: rightList[j],

920

keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]

921

});

922

}

923

flag=1;

924

}

925

}else{

926

flag=0;

927

uni.showToast({

928

title:"请输入您的验光数据",

929

icon: "none",

930

duration: 2000,

931

})

932

933

}

934

if(flag!=0){

935

store.dispatch('myLoveList/getLoveList', {

936

uid: this.$store.state.user.userInfo.uid,

937

});

938

}

939

940

} else{

941

uni.showToast({

942

title:"请确认您的验光数据",

943

icon: "none",

944

duration: 3000,

945

})

946

}

947

}

948

}

949

950

}

951

if(flag!=0){

952

let i = 0

953

// 判断出是哪一个sku被选中

954

for (let index = 0; index < this.current.length; index++) {

955

console.log('index', index, i, index !== this.current.length - 1)

956

if (index !== this.current.length - 1) {

957

console.log('----', this.current[index], this.attrList[1].attr.length, this.attrList)

958

i = this.current[index] * this.attrList[1].attr.length

959

} else {

960

i += this.current[index]

961

}

962

console.log('i', i)

963

}

964

console.log('i------>', i)

965

// 判断是否其输入的人员数据是否已存在

966

store.dispatch('order/saveParams', {

967

sk_id_arr: this.skuList[i],

968

current: this.current

969

})

970

971

uni.navigateTo({

972

url: `../confirmOrder/confirmOrder?pid=${this.pid}`

973

})

974

}

533

975

534

uni.navigateTo({

535

url: `../confirmOrder/confirmOrder?pid=${this.pid}`

536

})

537

}

976

}

538

}

977

}

539

}

978

}

540

</script>

979

</script>

541

980

542

981

543

.content {

982

.content {

544

min-height: 100vh;

983

min-height: 100vh;

545

background-color: #f2f2f2;

984

background-color: #f2f2f2;

546

// padding-top: 20rpx;

985

// padding-top: 20rpx;

547

.goodInfo {

986

.goodInfo {

548

width: 100%;

987

width: 100%;

549

height: 272rpx;

988

height: 272rpx;

550

border-radius: 16rpx;

989

border-radius: 16rpx;

551

background-color: #ffffff;

990

background-color: #ffffff;

552

box-sizing: border-box;

991

box-sizing: border-box;

553

padding: 36rpx;

992

padding: 36rpx;

554

display: flex;

993

display: flex;

555

flex-direction: row;

994

flex-direction: row;

556

justify-content: flex-start;

995

justify-content: flex-start;

557

.imageWrap {

996

.imageWrap {

558

height: 188rpx;

997

height: 188rpx;

559

width: 188rpx;

998

width: 188rpx;

560

margin-right: 28rpx;

999

margin-right: 28rpx;

561

image {

1000

image {

562

height: 188rpx;

1001

height: 188rpx;

563

width: 188rpx;

1002

width: 188rpx;

564

}

1003

}

565

}

1004

}

566

.infoRight {

1005

.infoRight {

567

display: flex;

1006

display: flex;

568

flex-direction: column;

1007

flex-direction: column;

569

align-items: flex-start;

1008

align-items: flex-start;

570

justify-content: space-between;

1009

justify-content: space-between;

571

.goodName {

1010

.goodName {

572

font-size: 28rpx;

1011

font-size: 28rpx;

573

color: #333333;

1012

color: #333333;

574

}

1013

}

575

.remarks {

1014

.remarks {

576

font-size: 20rpx;

1015

font-size: 20rpx;

577

color: #999999;

1016

color: #999999;

578

}

1017

}

579

.priceBox {

1018

.priceBox {

580

display: flex;

1019

display: flex;

581

justify-content: space-between;

1020

justify-content: space-between;

582

align-items: center;

1021

align-items: center;

583

width: 100%;

1022

width: 100%;

584

font-size: 14px;

1023

font-size: 14px;

585

color: #999999;

1024

color: #999999;

586

.price {

1025

.price {

587

color: #ff6b4a;

1026

color: #ff6b4a;

588

font-size: 28rpx;

1027

font-size: 28rpx;

589

}

1028

}

590

.counter {

1029

.counter {

591

display: flex;

1030

display: flex;

592

flex-direction: row;

1031

flex-direction: row;

593

justify-content: space-between;

1032

justify-content: space-between;

594

align-items: center;

1033

align-items: center;

595

font-size: 28rpx;

1034

font-size: 28rpx;

596

color: #333333;

1035

color: #333333;

597

width: 122rpx;

1036

width: 122rpx;

598

.btn {

1037

.btn {

599

display: flex;

1038

display: flex;

600

justify-content: center;

1039

justify-content: center;

601

line-height: 32rpx;

1040

line-height: 32rpx;

602

height: 32rpx;

1041

height: 32rpx;

603

width: 32rpx;

1042

width: 32rpx;

604

background-color: #f2f2f2;

1043

background-color: #f2f2f2;

605

color: #cfcfcf;

1044

color: #cfcfcf;

606

}

1045

}

607

}

1046

}

608

}

1047

}

609

}

1048

}

610

}

1049

}

611

.goods-data {

1050

.goods-data {

612

width: 100%;

1051

width: 100%;

613

box-sizing: border-box;

1052

box-sizing: border-box;

614

padding: 37rpx 40rpx 0 40rpx;

1053

padding: 37rpx 40rpx 0 40rpx;

615

background: #ffffff;

1054

background: #ffffff;

616

border-radius: 12rpx;

1055

border-radius: 12rpx;

617

.opCollapse {

1056

.opCollapse {

618

width: 100%;

1057

width: 100%;

619

padding-bottom: 28rpx;

1058

padding-bottom: 28rpx;

620

margin-top: 7px;

1059

margin-top: 7px;

621

border-bottom: 1px solid #e9e9e9;

1060

border-bottom: 1px solid #e9e9e9;

622

.head {

1061

.head {

623

display: flex;

1062

display: flex;

624

justify-content: space-between;

1063

justify-content: space-between;

625

height: 24px;

1064

height: 24px;

626

// font-family: PingFangSC-Medium;

1065

// font-family: PingFangSC-Medium;

627

font-size: 16px;

1066

font-size: 16px;

628

color: #333333;

1067

color: #333333;

629

letter-spacing: -0.3px;

1068

letter-spacing: -0.3px;

630

text-align: justify;

1069

text-align: justify;

631

line-height: 24px;

1070

line-height: 24px;

632

margin-bottom: 18rpx;

1071

margin-bottom: 18rpx;

633

.headRighted {

1072

.headRighted {

634

width: 0;

1073

width: 0;

635

height: 0;

1074

height: 0;

636

border-left: 4px solid transparent;

1075

border-left: 4px solid transparent;

637

border-right: 4px solid transparent;

1076

border-right: 4px solid transparent;

638

border-bottom: 4px solid #cfcfcf;

1077

border-bottom: 4px solid #cfcfcf;

639

transform: scaleY(-1);

1078

transform: scaleY(-1);

640

margin-top: 10px;

1079

margin-top: 10px;

641

}

1080

}

642

.headMid {

1081

.headMid {

643

// font-family: PingFangSC-Regular;

1082

// font-family: PingFangSC-Regular;

644

font-size: 10px;

1083

font-size: 10px;

645

color: #999999;

1084

color: #999999;

646

letter-spacing: -0.19px;

1085

letter-spacing: -0.19px;

647

margin-left: -120rpx;

1086

margin-left: -120rpx;

648

}

1087

}

649

.headRight {

1088

.headRight {

650

width: 0;

1089

width: 0;

651

height: 0;

1090

height: 0;

652

border-left: 4px solid transparent;

1091

border-left: 4px solid transparent;

653

border-right: 4px solid transparent;

1092

border-right: 4px solid transparent;

654

border-bottom: 4px solid #cfcfcf;

1093

border-bottom: 4px solid #cfcfcf;

655

margin-top: 10px;

1094

margin-top: 10px;

656

}

1095

}

657

}

1096

}

658

.body {

1097

.body {

659

// font-family: PingFangSC-Regular;

1098

// font-family: PingFangSC-Regular;

660

font-size: 12px;

1099

font-size: 12px;

661

color: #666666;

1100

color: #666666;

662

letter-spacing: 0;

1101

letter-spacing: 0;

663

.bodyBox {

1102

.bodyBox {

664

margin-top: 15px;

1103

margin-top: 15px;

665

.names {

1104

.names {

666

// font-family: PingFangSC-Regular;

1105

// font-family: PingFangSC-Regular;

667

font-size: 12px;

1106

font-size: 12px;

668

color: #151515;

1107

color: #151515;

669

letter-spacing: 0;

1108

letter-spacing: 0;

670

text-align: justify;

1109

text-align: justify;

671

line-height: 17px;

1110

line-height: 17px;

672

margin-left: 5px;

1111

margin-left: 5px;

673

margin-right: 10px;

1112

margin-right: 10px;

674

}

1113

}

675

text {

1114

text {

676

// font-family: PingFangSC-Regular;

1115

// font-family: PingFangSC-Regular;

677

font-size: 12px;

1116

font-size: 12px;

678

color: #666666;

1117

color: #666666;

679

letter-spacing: 0;

1118

letter-spacing: 0;

680

text-align: justify;

1119

text-align: justify;

681

}

1120

}

682

}

1121

}

683

}

1122

}

684

.goods-form {

1123

685

display: flex;

1124

// .goods-form {

686

flex-direction: column;

1125

// display: flex;

687

align-items: center;

1126

// flex-direction: column;

688

justify-content: center;

1127

// align-items: center;

689

background-color: #fff;

1128

// justify-content: center;

690

width: 100%;

1129

// background-color: #fff;

691

.p1 {

1130

// width: 100%;

692

font-size: 16px;

1131

// .p1 {

693

color: #333333;

1132

// font-size: 16px;

694

letter-spacing: -0.3px;

1133

// color: #333333;

695

text-align: justify;

1134

// letter-spacing: -0.3px;

696

line-height: 24px;

1135

// text-align: justify;

697

margin: 4px 0;

1136

// line-height: 24px;

698

}

1137

// margin: 4px 0;

699

.p2 {

1138

// }

700

font-size: 12px;

1139

// .p2 {

701

color: #999999;

1140

// font-size: 12px;

702

letter-spacing: -0.23px;

1141

// color: #999999;

703

margin-bottom: 18rpx;

1142

// letter-spacing: -0.23px;

704

}

1143

// margin-bottom: 18rpx;

705

image {

1144

// }

706

width: 28rpx;

1145

// image {

707

height: 26rpx;

1146

// width: 28rpx;

708

}

1147

// height: 26rpx;

709

.confirm {

1148

// }

710

display: flex;

1149

// .confirm {

711

align-items: center;

1150

// display: flex;

712

font-size: 12px;

1151

// align-items: center;

713

color: #666666;

1152

// font-size: 12px;

714

letter-spacing: -0.23px;

1153

// color: #666666;

715

width: 684rpx;

1154

// letter-spacing: -0.23px;

716

image {

1155

// width: 684rpx;

717

margin-right: 25rpx;

1156

// image {

718

}

1157

// margin-right: 25rpx;

719

}

1158

// }

720

.picker {

1159

// }

721

display: flex;

1160

// .picker {

722

flex-direction: column;

1161

// display: flex;

723

justify-content: center;

1162

// flex-direction: column;

724

align-items: center;

1163

// justify-content: center;

725

width: 100%;

1164

// align-items: center;

726

image {

1165

// width: 100%;

727

width: 10px;

1166

// image {

728

height: 10px;

1167

// width: 10px;

729

margin-right: 5px;

1168

// height: 10px;

730

}

1169

// margin-right: 5px;

731

.picker-choice {

1170

// }

732

display: flex;

1171

// .picker-choice {

733

width: 684rpx;

1172

// display: flex;

734

align-items: center;

1173

// width: 684rpx;

735

margin-bottom: 40rpx;

1174

// align-items: center;

736

.choice-left {

1175

// margin-bottom: 40rpx;

737

width: 210rpx;

1176

// .choice-left {

738

.p11 {

1177

// width: 210rpx;

739

font-size: 14px;

1178

// .p11 {

740

color: #333333;

1179

// font-size: 14px;

741

letter-spacing: -0.26px;

1180

// color: #333333;

742

text-align: justify;

1181

// letter-spacing: -0.26px;

743

line-height: 24px;

1182

// text-align: justify;

744

}

1183

// line-height: 24px;

745

.p12 {

1184

// }

746

font-size: 10px;

1185

// .p12 {

747

color: #3f3f3f;

1186

// font-size: 10px;

748

letter-spacing: -0.19px;

1187

// color: #3f3f3f;

749

text-align: justify;

1188

// letter-spacing: -0.19px;

750

line-height: 24px;

1189

// text-align: justify;

751

}

1190

// line-height: 24px;

752

}

1191

// }

753

.p13 {

1192

// }

754

font-size: 10px;

1193

// .p13 {

755

color: #999999;

1194

// font-size: 10px;

756

letter-spacing: -0.19px;

1195

// color: #999999;

757

margin-right: 10px;

1196

// letter-spacing: -0.19px;

758

}

1197

// margin-right: 10px;

759

.p13-date {

1198

// }

760

font-size: 10px;

1199

// .p13-date {

761

color: #999999;

1200

// font-size: 10px;

762

letter-spacing: -0.19px;

1201

// color: #999999;

763

margin-right: 5px;

1202

// letter-spacing: -0.19px;

764

}

1203

// margin-right: 5px;

765

.p14 {

1204

// }

766

font-size: 14px;

1205

// .p14 {

767

color: #666666;

1206

// font-size: 14px;

768

letter-spacing: -0.26px;

1207

// color: #666666;

769

text-align: center;

1208

// letter-spacing: -0.26px;

770

width: 124rpx;

1209

// text-align: center;

771

border-bottom: 1px solid #cfcfcf;

1210

// width: 124rpx;

772

}

1211

// border-bottom: 1px solid #cfcfcf;

773

}

1212

// }

774

}

1213

// }

775

}

1214

// }

1215

// }

1216

.goods-form {

1217

display: flex;

1218

flex-direction: column;

1219

align-items: center;

1220

justify-content: center;

1221

background-color: #fff;

1222

width: 100%;

1223

padding: 40rpx 0;

1224

.p1 {

1225

font-size: 16px;

1226

color: #333333;

1227

letter-spacing: -0.3px;

1228

text-align: justify;

1229

line-height: 24px;

1230

margin: 4px 0;

1231

1232

}

1233

.p2 {

1234

font-size: 12px;

1235

color: #999999;

1236

letter-spacing: -0.23px;

1237

margin-bottom: 32rpx;

1238

}

1239

.image2{

1240

width: 42rpx;

1241

height: 34rpx;

1242

margin-right: 12rpx;

1243

}

1244

.confirm {

1245

display: flex;

1246

align-items: center;

1247

font-size: 12px;

1248

color: #666666;

1249

letter-spacing: -0.23px;

1250

width: 684rpx;

1251

.image1{

1252

margin-right:25rpx;

1253

width: 42rpx;

1254

height: 38rpx;

1255

}

1256

}

1257

.picker{

1258

display: flex;

1259

flex-direction: column;

1260

justify-content: center;

1261

align-items: center;

1262

width: 100%;

1263

1264

.picker-choice{

1265

display: flex;

1266

width: 684rpx;

1267

align-items: center;

1268

margin-bottom: 40rpx;

1269

.input{

1270

border-bottom: 1px solid #CFCFCF;

1271

height: 40rpx;

1272

}

1273

.choice-left{

1274

width: 210rpx;

1275

.pd{

1276

font-size: 14px;

1277

color: #333333;

1278

letter-spacing: -0.26px;

1279

text-align: justify;

1280

line-height: 24px;

1281

margin-right: 44rpx;

1282

}

1283

.p11 {

1284

font-size: 14px;

1285

color: #333333;

1286

letter-spacing: -0.26px;

1287

text-align: justify;

1288

line-height: 24px;

1289

// margin-right: 10px;

1290

}

1291

.p12 {

1292

font-size: 10px;

1293

color: #3F3F3F;

1294

letter-spacing: -0.19px;

1295

text-align: justify;

1296

line-height: 24px;

1297

}

1298

1299

1300

}

1301

.p13 {

1302

font-size: 10px;

1303

color: #999999;

1304

letter-spacing: -0.19px;

1305

margin-right: 10px;

1306

}

1307

.p13-date {

1308

font-size: 10px;

1309

color: #999999;

1310

letter-spacing: -0.19px;

1311

margin-right: 5px;

1312

}

1313

picker{

1314

width: 144rpx;

1315

height: 40rpx;

1316

display: flex;

1317

position: relative;

1318

.p14 {

1319

font-size: 14px;

1320

color: #666666;

1321

letter-spacing: -0.26px;

1322

text-align: center;

1323

width: 124rpx;

1324

border-bottom: 1px solid #CFCFCF;

1325

height: 38rpx;

1326

}

1327

image{

1328

width: 20rpx;

1329

height: 20rpx;

1330

position: absolute;

1331

right: 20rpx;

1332

top: 8rpx;

1333

}

1334

}

1335

1336

1337

}

1338

}

1339

}

776

}

1340

}

777

}

1341

}

778

.choose {

1342

.choose {

779

width: 100%;

1343

width: 100%;

780

background: #ffffff;

1344

background: #ffffff;

781

border-radius: 12rpx;

1345

border-radius: 12rpx;

782

margin-top: 20rpx;

1346

margin-top: 20rpx;

783

padding: 40rpx 40rpx 112rpx 40rpx;

1347

padding: 40rpx 40rpx 112rpx 40rpx;

784

box-sizing: border-box;

1348

box-sizing: border-box;

785

.chooseItem {

1349

.chooseItem {

786

width: 100%;

1350

width: 100%;

787

padding-bottom: 32rpx;

1351

padding-bottom: 32rpx;

788

border-bottom: 1px solid #e9e9e9;

1352

border-bottom: 1px solid #e9e9e9;

789

margin-bottom: 28rpx;

1353

margin-bottom: 28rpx;

790

}

1354

}

791

.chooseRes {

1355

.chooseRes {

792

font-size: 12px;

1356

font-size: 12px;

793

color: #666666;

1357

color: #666666;

794

}

1358

}

795

.itemsWrap {

1359

.itemsWrap {

796

display: flex;

1360

display: flex;

797

flex-direction: row;

1361

flex-direction: row;

798

flex-wrap: wrap;

1362

flex-wrap: wrap;

799

justify-content: flex-start;

1363

justify-content: flex-start;

800

align-items: center;

1364

align-items: center;

801

padding-top: 24rpx;

1365

padding-top: 24rpx;

802

.item1 {

1366

.item1 {

803

width: 64rpx;

1367

width: 64rpx;

804

height: 64rpx;

1368

height: 64rpx;

805

border-radius: 32rpx;

1369

border-radius: 32rpx;

806

margin: 0 36rpx 24rpx 0;

1370

margin: 0 36rpx 24rpx 0;

807

transition: all 0.3s;

1371

transition: all 0.3s;

808

border: 1px solid #ffffff;

1372

border: 1px solid #ffffff;

809

}

1373

}

810

.item2 {

1374

.item2 {

811

// width: 100rpx;

1375

// width: 100rpx;

812

padding: 0 30rpx;

1376

padding: 0 30rpx;

813

height: 60rpx;

1377

height: 60rpx;

814

margin: 0 20rpx 20rpx 0;

1378

margin: 0 20rpx 20rpx 0;

815

transition: all 0.3s;

1379

transition: all 0.3s;

816

background: #f2f2f2;

1380

background: #f2f2f2;

817

border-radius: 2px;

1381

border-radius: 2px;

818

border-radius: 2px;

1382

border-radius: 2px;

819

line-height: 60rpx;

1383

line-height: 60rpx;

820

text-align: center;

1384

text-align: center;

821

color: #666666;

1385

color: #666666;

822

font-size: 12px;

1386

font-size: 12px;

823

}

1387

}

824

.active1 {

1388

.active1 {

825

opacity: 0.7;

1389

opacity: 0.7;

826

border: 1px solid #ff6b4a;

1390

border: 1px solid #ff6b4a;

827

}

1391

}

828

.active2 {

1392

.active2 {

829

background: rgba(255, 107, 74, 0.15);

1393

background: rgba(255, 107, 74, 0.15);

830

color: #ff6b4a;

1394

color: #ff6b4a;

831

}

1395

}

832

}

1396

}

833

}

1397

}

834

.button {

1398

.button {

835

width: 100%;

1399

width: 100%;

836

height: 112rpx;

1400

height: 112rpx;

837

background-color: #ff6b4a;

1401

background-color: #ff6b4a;

838

font-size: 16px;

1402

font-size: 16px;

839

color: #ffffff;

1403

color: #ffffff;

840

line-height: 112rpx;

1404

line-height: 112rpx;

841

text-align: center;

1405

text-align: center;

842

position: fixed;

1406

position: fixed;

843

bottom: 0;

1407

bottom: 0;

844

left: 0;

1408

left: 0;

845

}

1409

}

GITLAB

刘文博 / gulu-vue

验光填充