刘文博 / gulu-vue

1

1

2

2

3

3

4

<view

4

<view

5

class="addAddress"

5

class="addAddress"

6

@tap="toaddAddress"

6

@tap="toaddAddress"

7

v-if="this.showAddress"

7

v-if="this.showAddress"

8

>

8

>

9

9

10

<image

10

<image

11

src="../../static/add.png"

11

src="../../static/add.png"

12

mode="aspectFill"

12

mode="aspectFill"

13

></image>

13

></image>

14

</view>

14

</view>

15

<view class="addressText">{{addAddress}}</view>

15

<view class="addressText">{{addAddress}}</view>

16

<image

16

<image

17

src="../../static/right.png"

17

src="../../static/right.png"

18

mode="aspectFill"

18

mode="aspectFill"

19

></image>

19

></image>

20

</view>

20

</view>

21

<view

21

<view

22

v-else

22

v-else

23

@tap="toaddAddress"

23

@tap="toaddAddress"

24

class="list order-user"

24

class="list order-user"

25

>

25

>

26

26

27

27

28

<view

28

<view

29

v-if="addressInfo.default === '1'"

29

v-if="addressInfo.default === '1'"

30

class="default"

30

class="default"

31

><text>默认</text></view>{{addressInfo.name}}

31

><text>默认</text></view>{{addressInfo.name}}

32

</view>

32

</view>

33

<text class="mobile">{{addressInfo.mobile}}</text>

33

<text class="mobile">{{addressInfo.mobile}}</text>

34

</view>

34

</view>

35

35

36

36

37

<text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>

37

<text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>

38

</view>

38

</view>

39

<image

39

<image

40

class="arrow"

40

class="arrow"

41

src="../../static/right.png"

41

src="../../static/right.png"

42

mode="aspectFill"

42

mode="aspectFill"

43

></image>

43

></image>

44

</view>

44

</view>

45

45

46

46

47

47

48

<image

48

<image

49

src="../../static/store.png"

49

src="../../static/store.png"

50

mode="aspectFill"

50

mode="aspectFill"

51

style="width: 40rpx;height: 40rpx;"

51

style="width: 40rpx;height: 40rpx;"

52

></image>

52

></image>

53

53

54

</view>

54

</view>

55

56

<view

56

<view

57

class="infoBox"

57

class="infoBox"

58

v-if="isCart == 'true'"

58

v-if="isCart == 'true'"

59

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

59

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

60

:key="index"

60

:key="index"

61

>

61

>

62

62

63

<image

63

<image

64

:src="item.img_index_url"

64

:src="item.img_index_url"

65

mode="aspectFill"

65

mode="aspectFill"

66

></image>

66

></image>

67

67

68

68

69

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

69

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

70

70

71

<view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost">

71

<view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost">

72

¥{{item.oldPrice*item.num}}

72

¥{{item.oldPrice*item.num}}

73

</text></view>

73

</text></view>

74

74

75

<view

75

<view

76

class="btn"

76

class="btn"

77

disabled="this.disabled"

77

disabled="this.disabled"

78

type="default"

78

type="default"

79

@click="counter(false,index)"

79

@click="counter(false,index)"

80

>-</view>

80

>-</view>

81

<text>{{checkedCartLst[index].num}}</text>

81

<text>{{checkedCartLst[index].num}}</text>

82

<view

82

<view

83

class="btn"

83

class="btn"

84

type="default"

84

type="default"

85

@click="counter(true,index)"

85

@click="counter(true,index)"

86

>+</view>

86

>+</view>

87

</view>

87

</view>

88

</view>

88

</view>

89

</view>

89

</view>

90

</view>

90

</view>

91

91

92

92

93

93

94

94

95

</block>

95

</block>

96

</text></view>

96

</text></view>

97

97

98

99

</text></view>

99

</text></view>

100

100

101

<view class="message">买家留言

101

<view class="message">买家留言

102

<input

102

<input

103

type="text"

103

type="text"

104

:value="note"

104

:value="note"

105

placeholder="建议提前协商(50字以内)"

105

placeholder="建议提前协商(50字以内)"

106

/>

106

/>

107

</view>

107

</view>

108

</view>

108

</view>

109

</view>

109

</view>

110

111

<view

111

<view

112

class="infoBox"

112

class="infoBox"

113

v-if="isCart !== 'true'"

113

v-if="isCart !== 'true'"

114

>

114

>

115

115

116

<image

116

<image

117

:src="buyItem.pic"

117

:src="buyItem.pic"

118

mode="aspectFill"

118

mode="aspectFill"

119

></image>

119

></image>

120

120

121

<text class="goodName">{{goodInfo.p_name}}</text>

121

<text class="goodName">{{goodInfo.p_name}}</text>

122

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

122

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

123

123

124

<view class="price">¥{{buyItem.real_price * count}}<text class="originCost">

124

<view class="price">¥{{buyItem.real_price * count}}<text class="originCost">

125

¥{{buyItem.out_price * count}}

125

¥{{buyItem.out_price * count}}

126

</text></view>

126

</text></view>

127

127

128

<view

128

<view

129

class="btn"

129

class="btn"

130

disabled="this.disabled"

130

disabled="this.disabled"

131

type="default"

131

type="default"

132

@click="counter(false)"

132

@click="counter(false)"

133

>-</view>

133

>-</view>

134

<text>{{count}}</text>

134

<text>{{count}}</text>

135

<view

135

<view

136

class="btn"

136

class="btn"

137

type="default"

137

type="default"

138

@click="counter(true)"

138

@click="counter(true)"

139

>+</view>

139

>+</view>

140

</view>

140

</view>

141

</view>

141

</view>

142

</view>

142

</view>

143

</view>

143

</view>

144

144

145

145

146

146

147

<block

147

<block

148

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

148

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

149

:key="index"

149

:key="index"

150

>{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>

150

>{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>

151

</block>

151

</block>

152

</text></view>

152

</text></view>

153

153

154

155

</text></view>

155

</text></view>

156

156

157

<view class="message">买家留言

157

<view class="message">买家留言

158

<input

158

<input

159

type="text"

159

type="text"

160

:value="note"

160

:value="note"

161

placeholder="建议提前协商(50字以内)"

161

placeholder="建议提前协商(50字以内)"

162

/>

162

/>

163

</view>

163

</view>

164

</view>

164

</view>

165

</view>

165

</view>

166

</view>

166

</view>

167

167

168

168

169

169

170

170

171

171

172

172

173

<image

173

<image

174

src="../../static/chat_logo.png"

174

src="../../static/chat_logo.png"

175

mode="aspectFill"

175

mode="aspectFill"

176

></image>

176

></image>

177

177

178

</view>

178

</view>

179

179

180

</view>

180

</view>

181

<!-- <image

181

<!-- <image

182

src="../../static/right.png"

182

src="../../static/right.png"

183

mode="aspectFill"

183

mode="aspectFill"

184

></image> -->

184

></image> -->

185

</view>

185

</view>

186

</view>

186

</view>

187

<!-- <view class="item">

187

<!-- <view class="item">

188

188

189

189

190

190

191

191

192

192

193

</view>

193

</view>

194

194

195

</view>

195

</view>

196

<image

196

<image

197

src="../../static/right.png"

197

src="../../static/right.png"

198

mode="aspectFill"

198

mode="aspectFill"

199

></image>

199

></image>

200

</view>

200

</view>

201

</view> -->

201

</view> -->

202

202

203

203

204

204

205

205

206

</view>

206

</view>

207

</view>

207

</view>

208

208

209

209

210

210

211

<view class="total">¥{{totalPrice}}</view>

211

<view class="total">¥{{totalPrice}}</view>

212

212

213

</view>

213

</view>

214

</view>

214

</view>

215

</view>

215

</view>

216

<!--

216

<!--

217

217

218

<checkbox-group>

218

<checkbox-group>

219

<label>

219

<label>

220

<checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买

220

<checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买

221

</label>

221

</label>

222

</checkbox-group>

222

</checkbox-group>

223

</view> -->

223

</view> -->

224

</view>

224

</view>

225

225

226

226

227

<view class="footerLeft">实付金额:

227

<view class="footerLeft">实付金额:

228

<text>¥{{totalPrice}}</text>

228

<text>¥{{totalPrice}}</text>

229

229

230

</view>

230

</view>

231

231

232

<view

232

<view

233

class="paybtn"

233

class="paybtn"

234

@tap="orderBuild"

234

@tap="orderBuild"

235

>立即支付</view>

235

>立即支付</view>

236

</view>

236

</view>

237

</view>

237

</view>

238

</view>

238

</view>

239

</template>

239

</template>

240

241

241

242

import store from '@/store'

242

import store from '@/store'

243

import MD5Util from '../../utils/md5'

243

import MD5Util from '../../utils/md5'

244

245

export default {

245

export default {

246

data() {

246

data() {

247

return {

247

return {

248

248

249

addAddress: '添加收货地址',

249

addAddress: '添加收货地址',

250

250

251

pid: 0,

251

pid: 0,

252

disabled: false,

252

disabled: false,

253

freight: 0.0,

253

freight: 0.0,

254

showAddress: false,

254

showAddress: false,

255

note: '',

255

note: '',

256

addressInfo: {

256

addressInfo: {

257

address: '',

257

address: '',

258

},

258

},

259

isCart: Boolean,

259

isCart: Boolean,

260

// isAnonymous:

260

// isAnonymous:

261

checkedCartLst: [],

261

checkedCartLst: [],

262

}

262

}

263

},

263

},

264

onShow(addressId) {

264

onShow(addressId) {

265

// console.log('+-+-*-*-+-+',addressId)

265

// console.log('+-+-*-*-+-+',addressId)

266

if (addressId) {

266

if (addressId) {

267

store

267

store

268

.dispatch('address/details', {

268

.dispatch('address/details', {

269

add_id: addressId,

269

add_id: addressId,

270

})

270

})

271

.then(({ code, data }) => {

271

.then(({ code, data }) => {

272

if (code === 1) {

272

if (code === 1) {

273

// console.log('code', code, data)

273

// console.log('code', code, data)

274

this.showAddress = true

274

this.showAddress = true

275

this.addressInfo = data

275

this.addressInfo = data

276

}

276

}

277

})

277

})

278

}

278

}

279

},

279

},

280

onLoad({ pid, addressId, isCart, count, name }) {

280

onLoad({ pid, addressId, isCart, count, name }) {

281

if (isCart == 'false') {

281

if (isCart == 'false') {

282

this.pid = pid

282

this.pid = pid

283

store.dispatch('read/fetch', {

283

store.dispatch('read/fetch', {

284

pid,

284

pid,

285

})

285

})

286

}

286

}

287

this.count = count

287

this.count = count

288

this.name = name

288

this.name = name

289

this.isCart = isCart

289

this.isCart = isCart

290

291

console.log('++++++++++++' + pid, addressId, isCart)

291

console.log('++++++++++++' + pid, addressId, isCart)

292

this.checkedCartLst = this.$store.state.cart.checkedCartLst

292

this.checkedCartLst = this.$store.state.cart.checkedCartLst

293

// console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)

293

// console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)

294

// 若已经选择地址

294

// 若已经选择地址

295

if (addressId) {

295

if (addressId) {

296

store

296

store

297

.dispatch('address/details', {

297

.dispatch('address/details', {

298

add_id: addressId,

298

add_id: addressId,

299

})

299

})

300

.then(({ code, data }) => {

300

.then(({ code, data }) => {

301

if (code === 1) {

301

if (code === 1) {

302

// console.log('code', code, data)

302

// console.log('code', code, data)

303

this.showAddress = true

303

this.showAddress = true

304

this.addressInfo = data

304

this.addressInfo = data

305

}

305

}

306

})

306

})

307

} else {

307

} else {

308

store.dispatch('address/default').then(({ code, data }) => {

308

store.dispatch('address/default').then(({ code, data }) => {

309

if (code === 1) {

309

if (code === 1) {

310

// console.log('code', code, data)

310

// console.log('code', code, data)

311

this.showAddress = true

311

this.showAddress = true

312

this.addressInfo = data

312

this.addressInfo = data

313

}

313

}

314

})

314

})

315

}

315

}

316

},

316

},

317

computed: {

317

computed: {

318

totalPrice() {

318

totalPrice() {

319

if (this.isCart == 'true') {

319

if (this.isCart == 'true') {

320

let total = 0

320

let total = 0

321

this.$store.state.cart.checkedCartLst.map(item => {

321

this.$store.state.cart.checkedCartLst.map(item => {

322

total += item.nowPrice * item.num

322

total += item.nowPrice * item.num

323

})

323

})

324

return total

324

return total

325

} else {

325

} else {

326

return this.buyItem.real_price * this.count

326

return this.buyItem.real_price * this.count

327

}

327

}

328

},

328

},

329

buyItem() {

329

buyItem() {

330

return this.$store.state.cart.buyItem

330

return this.$store.state.cart.buyItem

331

},

331

},

332

// checkedCartLst(){

332

// checkedCartLst(){

333

// console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)

333

// console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)

334

// return this.$store.state.cart.checkedCartLst

334

// return this.$store.state.cart.checkedCartLst

335

// },

335

// },

336

goodInfo() {

336

goodInfo() {

337

console.log('state', this.$store.state.read.goodInfo)

337

console.log('state', this.$store.state.read.goodInfo)

338

return this.$store.state.read.goodInfo

338

return this.$store.state.read.goodInfo

339

},

339

},

340

skuInfo() {

340

skuInfo() {

341

return this.$store.state.order.param.sk_id_arr

341

return this.$store.state.order.param.sk_id_arr

342

},

342

},

343

attrList() {

343

attrList() {

344

return this.$store.state.order.param.attrList

344

return this.$store.state.order.param.attrList

345

},

345

},

346

current() {

346

current() {

347

return this.$store.state.order.param.current

347

return this.$store.state.order.param.current

348

},

348

},

349

},

349

},

350

methods: {

350

methods: {

351

counter(isadd, index) {

351

counter(isadd, index) {

352

if (isadd) {

352

if (isadd) {

353

if (this.isCart == 'true') {

353

if (this.isCart == 'true') {

354

this.checkedCartLst[index].num++

354

this.checkedCartLst[index].num++

355

} else {

355

} else {

356

this.count++

356

this.count++

357

}

357

}

358

} else {

358

} else {

359

if (this.isCart == 'true') {

359

if (this.isCart == 'true') {

360

this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--

360

this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--

361

} else {

361

} else {

362

this.count <= 1 ? (this.disabled = true) : this.count--

362

this.count <= 1 ? (this.disabled = true) : this.count--

363

}

363

}

364

}

364

}

365

},

365

},

366

// 跳转添加地址页面

366

// 跳转添加地址页面

367

toaddAddress() {

367

toaddAddress() {

368

uni.navigateTo({

368

uni.navigateTo({

369

url: `../address/addressList?edit=${1}`,

369

url: `../address/addressList?edit=${1}`,

370

success: res => {},

370

success: res => {},

371

fail: error => {

371

fail: error => {

372

console.log('跳转到地址列表页面失败====>', error)

372

console.log('跳转到地址列表页面失败====>', error)

373

},

373

},

374

complete: () => {},

374

complete: () => {},

375

})

375

})

376

},

376

},

377

// 下单

377

// 下单

378

orderBuild() {

378

orderBuild() {

379

uni.showLoading({

379

uni.showLoading({

380

title: '支付中',

380

title: '支付中',

381

})

381

})

382

if (this.isCart == 'true') {

382

if (this.isCart === 'true') {

383

const checkedGoods = []

383

const checkedGoods = []

384

const sk_id_arr = []

384

const sk_id_arr = []

385

this.checkedCartLst.map(item => {

385

this.checkedCartLst.map(item => {

386

checkedGoods.push(item.pid)

386

checkedGoods.push(item.pid)

387

sk_id_arr.push(item.sk_id)

387

sk_id_arr.push(item.sk_id)

388

})

388

})

389

store.dispatch('order/build', {

389

store.dispatch('order/build', {

390

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

390

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

391

address: JSON.stringify(this.addressInfo),

391

address: JSON.stringify(this.addressInfo),

392

checkedGoods: checkedGoods,

392

checkedGoods: checkedGoods,

393

sk_id_arr: sk_id_arr,

393

sk_id_arr: sk_id_arr,

394

totalPrice: this.totalPrice,

394

totalPrice: this.totalPrice,

395

}).then((res) => {

395

}).then((res) => {

396

this.pay(res.data)

396

this.pay(res)

397

})

397

})

398

}

398

}

399

if (this.isCart == 'false') {

399

if (this.isCart === 'false') {

400

const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param

400

const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param

401

store.dispatch('order/buyNow', {

401

store.dispatch('order/buyNow', {

402

pid: skId.pid,

402

pid: skId.pid,

403

sk_id: skId.sk_id,

403

sk_id: skId.sk_id,

404

number: this.count,

404

number: this.count,

405

mp_id: mpId,

405

mp_id: mpId,

406

address: JSON.stringify(this.addressInfo),

406

address: JSON.stringify(this.addressInfo),

407

totalPrice: this.totalPrice,

407

totalPrice: this.totalPrice,

408

liuyan: this.note,

408

liuyan: this.note,

409

dir: 1,

409

dir: 1,

410

}).then((res) => {

410

}).then((res) => {

411

this.pay(res.data)

411

this.pay(res)

412

})

412

})

413

}

413

}

414

},

414

},

415

// 支付

415

// 支付

416

pay(res) {

416

pay(res) {

417

console.log('pay', res)

417

console.log('pay', res)

418

const { data, exKeyName: keyName } = res

418

const { data, exKeyName: keyName } = res

419

const uid = uni.getStorageSync('uid')

419

const uid = uni.getStorageSync('uid')

420

const timeStamp = new Date().getTime().toString()

420

const timeStamp = new Date().getTime().toString()

421

const nonceStr = 'asfafasfasfasfasf'

421

const nonceStr = 'asfafasfasfasfasf'

422

// 支付参数

422

// 支付参数

423

const fieldSet = {

423

const fieldSet = {

424

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

424

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

425

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

425

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

426

shopid: 0,

426

shopid: 0,

427

payCate: 2020,

427

payCate: 2020,

428

payMoney: this.totalPrice,

428

payMoney: this.totalPrice,

429

payWoodId: `fcdj-${uid}-${keyName}`,

429

payWoodId: `fcdj-${uid}-${keyName}`,

430

payWoodDesc: '在【非常戴镜】的微信付款凭证',

430

payWoodDesc: '在【非常戴镜】的微信付款凭证',

431

nonceStr,

431

nonceStr,

432

signType: 'MD5',

432

signType: 'MD5',

433

app_uid: 2020,

433

app_uid: 2020,

434

timeStamp,

434

timeStamp,

435

keyname: keyName,

435

keyname: keyName,

436

billInfo: JSON.stringify(data),

436

billInfo: JSON.stringify(data),

437

}

437

}

438

// 请求后台支付接口

438

// 请求后台支付接口

439

store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {

439

store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {

440

if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {

440

if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {

441

const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`

441

const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`

442

const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'

442

const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'

443

444

// 微信支付接口

444

// 微信支付接口

445

uni.requestPayment({

445

uni.requestPayment({

446

appId: data.appid,

446

appId: data.appid,

447

timeStamp,

447

timeStamp,

448

nonceStr,

448

nonceStr,

449

total_fee: this.totalPrice,

449

total_fee: this.totalPrice,

450

package: `prepay_id=${data.prepay_id}`,

450

package: `prepay_id=${data.prepay_id}`,

451

signType: 'MD5',

451

signType: 'MD5',

452

paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),

452

paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),

453

success: (res) => {

453

success: (res) => {

454

// 支付成功

454

// 支付成功

455

uni.showModal({

455

uni.showModal({

456

content: '支付成功',

456

content: '支付成功',

457

showCancel: false,

457

showCancel: false,

458

})

458

})

459

// 跳转订单详情页->状态待收货

459

// 跳转订单详情页->状态待收货

460

uni.reLaunch({

460

uni.reLaunch({

461

url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,

461

url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,

462

})

462

})

463

},

463

},

464

fail: (res) => {

464

fail: (res) => {

465

// 支付失败

465

// 支付失败

466

uni.showModal({

466

uni.showModal({

467

content: '支付失败',

467

content: '支付失败',

468

showCancel: false,

468

showCancel: false,

469

})

469

})

470

// 跳转订单详情页->状态待付款

470

// 跳转订单详情页->状态待付款

471

uni.reLaunch({

471

uni.reLaunch({

472

url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,

472

url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,

473

})

473

})

474

},

474

},

475

complete: () => {

475

complete: () => {

476

uni.hideLoading()

476

uni.hideLoading()

477

},

477

},

478

})

478

})

479

} else {

479

} else {

480

uni.showModal({

480

uni.showModal({

481

content: '支付失败',

481

content: '支付失败',

482

showCancel: false,

482

showCancel: false,

483

})

483

})

484

console.log('支付失败')

484

console.log('支付失败')

485

uni.hideLoading()

485

uni.hideLoading()

486

}

486

}

487

})

487

})

488

},

488

},

489

},

489

},

490

}

490

}

491

</script>

491

</script>

492

493

493

494

.wrap {

494

.wrap {

495

height: 100vh;

495

height: 100vh;

496

background-color: #f2f2f2;

496

background-color: #f2f2f2;

497

font-family: PingFangSC-Regular;

497

font-family: PingFangSC-Regular;

498

letter-spacing: -0.23px;

498

letter-spacing: -0.23px;

499

position: absolute;

499

position: absolute;

500

}

500

}

501

.addAddress {

501

.addAddress {

502

background-color: #ffffff;

502

background-color: #ffffff;

503

box-sizing: border-box;

503

box-sizing: border-box;

504

height: 124rpx;

504

height: 124rpx;

505

width: 100%;

505

width: 100%;

506

display: flex;

506

display: flex;

507

align-items: center;

507

align-items: center;

508

padding: 0 40rpx;

508

padding: 0 40rpx;

509

.addIcon {

509

.addIcon {

510

background-color: #f2f2f2;

510

background-color: #f2f2f2;

511

height: 56rpx;

511

height: 56rpx;

512

width: 60rpx;

512

width: 60rpx;

513

border-radius: 4rpx;

513

border-radius: 4rpx;

514

display: flex;

514

display: flex;

515

justify-content: center;

515

justify-content: center;

516

align-items: center;

516

align-items: center;

517

margin-right: 40rpx;

517

margin-right: 40rpx;

518

}

518

}

519

image {

519

image {

520

height: 28rpx;

520

height: 28rpx;

521

width: 30rpx;

521

width: 30rpx;

522

}

522

}

523

.addressText {

523

.addressText {

524

font-size: 28rpx;

524

font-size: 28rpx;

525

color: #333333;

525

color: #333333;

526

margin-right: 364rpx;

526

margin-right: 364rpx;

527

}

527

}

528

}

528

}

529

.content {

529

.content {

530

background-color: #f2f2f2;

530

background-color: #f2f2f2;

531

width: 100%;

531

width: 100%;

532

display: flex;

532

display: flex;

533

flex-direction: column;

533

flex-direction: column;

534

justify-content: center;

534

justify-content: center;

535

align-items: center;

535

align-items: center;

536

padding: 40rpx;

536

padding: 40rpx;

537

box-sizing: border-box;

537

box-sizing: border-box;

538

.orderInfo {

538

.orderInfo {

539

width: 670rpx;

539

width: 670rpx;

540

min-height: 488rpx;

540

min-height: 488rpx;

541

background-color: #ffffff;

541

background-color: #ffffff;

542

border-radius: 20rpx;

542

border-radius: 20rpx;

543

box-sizing: border-box;

543

box-sizing: border-box;

544

padding: 0 40rpx 40rpx 40rpx;

544

padding: 0 40rpx 40rpx 40rpx;

545

.title {

545

.title {

546

display: flex;

546

display: flex;

547

align-items: center;

547

align-items: center;

548

font-size: 28rpx;

548

font-size: 28rpx;

549

color: #333333;

549

color: #333333;

550

height: 60rpx;

550

height: 60rpx;

551

line-height: 40rpx;

551

line-height: 40rpx;

552

padding: 10rpx 10rpx 10rpx 0rpx;

552

padding: 10rpx 10rpx 10rpx 0rpx;

553

image {

553

image {

554

margin-right: 20rpx;

554

margin-right: 20rpx;

555

}

555

}

556

}

556

}

557

.infoBox {

557

.infoBox {

558

margin-top: 42rpx;

558

margin-top: 42rpx;

559

.infoTop {

559

.infoTop {

560

display: flex;

560

display: flex;

561

flex-direction: row;

561

flex-direction: row;

562

image {

562

image {

563

height: 188rpx;

563

height: 188rpx;

564

width: 188rpx;

564

width: 188rpx;

565

margin-right: 24rpx;

565

margin-right: 24rpx;

566

}

566

}

567

.infoRight {

567

.infoRight {

568

width: 374rpx;

568

width: 374rpx;

569

display: flex;

569

display: flex;

570

flex-direction: column;

570

flex-direction: column;

571

align-items: flex-start;

571

align-items: flex-start;

572

justify-content: space-between;

572

justify-content: space-between;

573

.goodName {

573

.goodName {

574

font-size: 28rpx;

574

font-size: 28rpx;

575

color: #333333;

575

color: #333333;

576

}

576

}

577

.remarks {

577

.remarks {

578

font-size: 20rpx;

578

font-size: 20rpx;

579

color: #999999;

579

color: #999999;

580

}

580

}

581

.priceBox {

581

.priceBox {

582

display: flex;

582

display: flex;

583

justify-content: space-between;

583

justify-content: space-between;

584

align-items: center;

584

align-items: center;

585

width: 100%;

585

width: 100%;

586

.price {

586

.price {

587

color: #ff6b4a;

587

color: #ff6b4a;

588

font-size: 28rpx;

588

font-size: 28rpx;

589

}

589

}

590

.originCost {

590

.originCost {

591

text-decoration: line-through;

591

text-decoration: line-through;

592

color: #999999;

592

color: #999999;

593

font-size: 20rpx;

593

font-size: 20rpx;

594

}

594

}

595

.counter {

595

.counter {

596

display: flex;

596

display: flex;

597

flex-direction: row;

597

flex-direction: row;

598

justify-content: space-between;

598

justify-content: space-between;

599

font-size: 28rpx;

599

font-size: 28rpx;

600

color: #333333;

600

color: #333333;

601

width: 122rpx;

601

width: 122rpx;

602

.btn {

602

.btn {

603

display: flex;

603

display: flex;

604

justify-content: center;

604

justify-content: center;

605

line-height: 32rpx;

605

line-height: 32rpx;

606

height: 32rpx;

606

height: 32rpx;

607

width: 32rpx;

607

width: 32rpx;

608

background-color: #f2f2f2;

608

background-color: #f2f2f2;

609

color: #cfcfcf;

609

color: #cfcfcf;

610

}

610

}

611

}

611

}

612

}

612

}

613

}

613

}

614

}

614

}

615

.infoBottom {

615

.infoBottom {

616

display: flex;

616

display: flex;

617

flex-direction: column;

617

flex-direction: column;

618

justify-content: flex-start;

618

justify-content: flex-start;

619

font-size: 24rpx;

619

font-size: 24rpx;

620

color: #333333;

620

color: #333333;

621

text {

621

text {

622

color: #999999;

622

color: #999999;

623

margin-left: 20rpx;

623

margin-left: 20rpx;

624

}

624

}

625

626

.norm {

626

.norm {

627

margin-top: 28rpx;

627

margin-top: 28rpx;

628

}

628

}

629

.shippingMethod {

629

.shippingMethod {

630

margin-top: 12rpx;

630

margin-top: 12rpx;

631

}

631

}

632

.message {

632

.message {

633

display: flex;

633

display: flex;

634

flex-direction: row;

634

flex-direction: row;

635

align-items: center;

635

align-items: center;

636

margin-top: 18rpx;

636

margin-top: 18rpx;

637

input {

637

input {

638

margin-left: 20rpx;

638

margin-left: 20rpx;

639

width: 75%;

639

width: 75%;

640

}

640

}

641

}

641

}

642

}

642

}

643

}

643

}

644

}

644

}

645

.payWay {

645

.payWay {

646

height: 464rpx;

646

height: 464rpx;

647

width: 670rpx;

647

width: 670rpx;

648

background-color: #ffffff;

648

background-color: #ffffff;

649

color: #333333;

649

color: #333333;

650

font-size: 24rpx;

650

font-size: 24rpx;

651

border-radius: 20rpx;

651

border-radius: 20rpx;

652

box-sizing: border-box;

652

box-sizing: border-box;

653

padding: 0 52rpx 0rpx 40rpx;

653

padding: 0 52rpx 0rpx 40rpx;

654

margin-top: 20rpx;

654

margin-top: 20rpx;

655

display: flex;

655

display: flex;

656

flex-direction: column;

656

flex-direction: column;

657

justify-content: center;

657

justify-content: center;

658

align-items: flex-start;

658

align-items: flex-start;

659

.item {

659

.item {

660

display: flex;

660

display: flex;

661

flex-direction: row;

661

flex-direction: row;

662

justify-content: space-between;

662

justify-content: space-between;

663

align-items: center;

663

align-items: center;

664

width: 100%;

664

width: 100%;

665

height: 115rpx;

665

height: 115rpx;

666

.itemRight {

666

.itemRight {

667

display: flex;

667

display: flex;

668

flex-direction: row;

668

flex-direction: row;

669

justify-content: space-between;

669

justify-content: space-between;

670

align-items: center;

670

align-items: center;

671

image {

671

image {

672

height: 24rpx;

672

height: 24rpx;

673

width: 12rpx;

673

width: 12rpx;

674

}

674

}

675

.rightText {

675

.rightText {

676

margin-right: 20rpx;

676

margin-right: 20rpx;

677

text-align: right;

677

text-align: right;

678

.choosePayWay {

678

.choosePayWay {

679

display: flex;

679

display: flex;

680

align-items: center;

680

align-items: center;

681

text {

681

text {

682

color: #333333;

682

color: #333333;

683

}

683

}

684

image {

684

image {

685

height: 36rpx;

685

height: 36rpx;

686

width: 40rpx;

686

width: 40rpx;

687

margin-right: 8px;

687

margin-right: 8px;

688

}

688

}

689

}

689

}

690

.randomSubstraction {

690

.randomSubstraction {

691

color: #ff6b4a;

691

color: #ff6b4a;

692

}

692

}

693

.preferentialWay {

693

.preferentialWay {

694

color: #999999;

694

color: #999999;

695

}

695

}

696

}

696

}

697

.freight,

697

.freight,

698

.total {

698

.total {

699

margin-right: 32rpx;

699

margin-right: 32rpx;

700

}

700

}

701

text {

701

text {

702

color: #ff6b4a;

702

color: #ff6b4a;

703

}

703

}

704

}

704

}

705

}

705

}

706

}

706

}

707

// .checkBox {

707

// .checkBox {

708

// height: 58rpx;

708

// height: 58rpx;

709

// line-height: 58rpx;

709

// line-height: 58rpx;

710

// width: 100%;

710

// width: 100%;

711

// margin-top: 36rpx;

711

// margin-top: 36rpx;

712

// margin-left: 40rpx;

712

// margin-left: 40rpx;

713

// font-size: 12px;

713

// font-size: 12px;

714

// color: #999999;

714

// color: #999999;

715

// }

715

// }

716

}

716

}

717

.footer {

717

.footer {

718

height: 112rpx;

718

height: 112rpx;

719

width: 100%;

719

width: 100%;

720

background-color: #fff;

720

background-color: #fff;

721

font-size: 16px;

721

font-size: 16px;

722

display: flex;

722

display: flex;

723

justify-content: space-between;

723

justify-content: space-between;

724

align-items: center;

724

align-items: center;

725

position: fixed;

725

position: fixed;

726

bottom: 0;

726

bottom: 0;

727

z-index: 9999;

727

z-index: 9999;

728

.footerLeft {

728

.footerLeft {

729

display: flex;

729

display: flex;

730

justify-content: center;

730

justify-content: center;

731

align-items: center;

731

align-items: center;

732

width: 50%;

732

width: 50%;

733

color: #333333;

733

color: #333333;

734

text {

734

text {

735

color: #ff6b4a;

735

color: #ff6b4a;

736

}

736

}

737

}

737

}

738

.footerRight {

738

.footerRight {

739

display: flex;

739

display: flex;

740

justify-content: flex-end;

740

justify-content: flex-end;

741

align-items: center;

741

align-items: center;

742

width: 50%;

742

width: 50%;

743

margin-right: 26rpx;

743

margin-right: 26rpx;

744

.paybtn {

744

.paybtn {

745

display: flex;

745

display: flex;

746

justify-content: center;

746

justify-content: center;

747

align-items: center;

747

align-items: center;

748

background: #ff6b4a;

748

background: #ff6b4a;

749

border-radius: 20px;

749

border-radius: 20px;

750

border-radius: 20px;

750

border-radius: 20px;

751

color: #ffffff;

751

color: #ffffff;

752

width: 204rpx;

752

width: 204rpx;

753

height: 80rpx;

753

height: 80rpx;

754

}

754

}

755

}

755

}

756

}

756

}

757

// 地址信息样式

757

// 地址信息样式

758

.order-user {

758

.order-user {

759

width: 670rpx;

759

width: 670rpx;

760

height: 228rpx;

760

height: 228rpx;

761

background: #ffffff;

761

background: #ffffff;

762

border-radius: 14rpx;

762

border-radius: 14rpx;

763

margin: 0 auto;

763

margin: 0 auto;

764

margin-top: 20rpx;

764

margin-top: 20rpx;

765

position: relative;

765

position: relative;

766

.order-user-head {

766

.order-user-head {

767

display: flex;

767

display: flex;

768

height: 108rpx;

768

height: 108rpx;

769

width: 100%;

769

width: 100%;

770

align-items: center;

770

align-items: center;

771

padding-left: 126rpx;

771

padding-left: 126rpx;

772

box-sizing: border-box;

772

box-sizing: border-box;

773

.name {

773

.name {

774

display: flex;

774

display: flex;

775

justify-content: space-between;

775

justify-content: space-between;

776

font-size: 14px;

776

font-size: 14px;

777

color: #333333;

777

color: #333333;

778

letter-spacing: -0.26px;

778

letter-spacing: -0.26px;

779

margin-right: 20rpx;

779

margin-right: 20rpx;

780

.default {

780

.default {

781

height: 40rpx;

781

height: 40rpx;

782

width: 80rpx;

782

width: 80rpx;

783

background-color: #4a90e2;

783

background-color: #4a90e2;

784

border-radius: 13px;

784

border-radius: 13px;

785

border-radius: 13px;

785

border-radius: 13px;

786

text-align: center;

786

text-align: center;

787

margin-right: 20rpx;

787

margin-right: 20rpx;

788

text {

788

text {

789

display: flex;

789

display: flex;

790

justify-content: center;

790

justify-content: center;

791

align-items: center;

791

align-items: center;

792

font-size: 12px;

792

font-size: 12px;

793

color: #ffffff;

793

color: #ffffff;

794

letter-spacing: -0.23px;

794

letter-spacing: -0.23px;

795

}

795

}

796

}

796

}

797

}

797

}

798

.mobile {

798

.mobile {

799

font-size: 14px;

799

font-size: 14px;

800

color: #999999;

800

color: #999999;

801

letter-spacing: -0.26px;

801

letter-spacing: -0.26px;

802

}

802

}

803

}

803

}

804

.order-user-body {

804

.order-user-body {

805

display: flex;

805

display: flex;

806

width: 100%;

806

width: 100%;

807

image {

807

image {

808

width: 24px;

808

width: 24px;

809

height: 28px;

809

height: 28px;

810

margin: 12rpx 32rpx 0 40rpx;

810

margin: 12rpx 32rpx 0 40rpx;

811

}

811

}

812

.address {

812

.address {

813

font-weight: bold;

813

font-weight: bold;

814

font-size: 14px;

814

font-size: 14px;

815

color: #333333;

815

color: #333333;

816

letter-spacing: -0.26px;

816

letter-spacing: -0.26px;

817

}

817

}

818

}

818

}

819

.arrow {

819

.arrow {

820

width: 12px;

820

width: 12px;

821

height: 12px;

821

height: 12px;

822

position: absolute;

822

position: absolute;

823

right: 40rpx;

823

right: 40rpx;

824

bottom: 104rpx;

824

bottom: 104rpx;

825

}

825

}

826

}

826

}

827

.last_zhanwei {

827

.last_zhanwei {

828

background: #f2f2f2;

828

background: #f2f2f2;

829

height: 60px;

829

height: 60px;

830

}

830

}

831

</style>

831

</style>

832

GITLAB

刘文博 / gulu-vue

支付问题修改