1478 lines
30 KiB
Vue
1478 lines
30 KiB
Vue
<!-- 商家商品详情 -->
|
||
<template>
|
||
<view class="content">
|
||
<view class="top-title">
|
||
<view class="">机动车小助手</view>
|
||
</view>
|
||
|
||
|
||
<view class="m-top">
|
||
|
||
<view class="cont-box">
|
||
<view class="dis">
|
||
<view class="ju">￥{{obj.realPrice /100 }}</view>
|
||
<view class="hui" v-if="obj.realPrice != obj.originalPrice ">原价{{obj.originalPrice / 100}}</view>
|
||
</view>
|
||
<view class="t-title">
|
||
{{titles}}
|
||
</view>
|
||
<view class="san">
|
||
<view class="dis" @click="gocoun()">
|
||
<view class="o-icon">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/sst.png" mode=""></image>
|
||
</view>
|
||
<view class="sb">优惠券</view>
|
||
</view>
|
||
<view class="dis">
|
||
<view class="o-icon">
|
||
<image src="http://www.nuoyunr.com/lananRsc/j1.png" mode=""></image>
|
||
</view>
|
||
<view class="sb">上门取车</view>
|
||
</view>
|
||
<view class="dis">
|
||
<view class="o-icon">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/xyy.png" mode=""></image>
|
||
</view>
|
||
<view class="sb">随时预约</view>
|
||
</view>
|
||
</view>
|
||
<view class="zui-di">
|
||
<!-- <view class="">该商品包含:</view> -->
|
||
<view class="popup-box">
|
||
<view :class="{'lan':skuid == item.id}" class="p-box" v-for="(item,index) in skulist"
|
||
:key="index" @click="getsku(item.id,item.skuName,item.price)">
|
||
<text>{{item.skuName}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="quan" @click="gocoun()">
|
||
<view class="dis">
|
||
<view class="q-zuo">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/hongbao.png" mode=""></image>
|
||
</view>
|
||
<view class="zhong" @click="gocoun()">
|
||
<view class="q-hei" v-if="!discount">点击查看您的可用优惠券</view>
|
||
|
||
<view class="dis" v-else>
|
||
<view class="xh">
|
||
<text>￥{{discount || 0}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="q-you" @click="gocoun()">
|
||
<uni-icons type="right" size="20" color="#AFAFAF"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- <view style="width: 100%; height: 110px;"></view> -->
|
||
<view class="bai-box" v-if="false">
|
||
<view class="quan" @click="gocoun()">
|
||
<view class="dis">
|
||
<view class="q-zuo">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/hongbao.png" mode=""></image>
|
||
</view>
|
||
<view class="zhong" @click="gocoun()">
|
||
<view class="q-hei" v-if="!discount">当前有可用优惠券</view>
|
||
<view class="q-hei" v-else>当前无可用优惠券</view>
|
||
<view class="dis">
|
||
<view class="xh">
|
||
<text>￥{{item.discount || 0}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="q-you" @click="gocoun()">
|
||
<uni-icons type="right" size="20" color="#AFAFAF"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="ail-box">
|
||
<view class="h-title">预约日期</view>
|
||
<scroll-view scroll-x="true" class="box-bottom">
|
||
<view class="santu" :class="{'lanbox' : tapindex == index}" v-for="(items,index) in itmelist"
|
||
:key="index" @click="gettap(index,items)">
|
||
<view class="" style="font-size: 18px;">{{items.dateStr.substring(5,10).replace('-','月')}}
|
||
</view>
|
||
<view class="">{{items.weekStr}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="h-title">预约时段</view>
|
||
<view class="dis">
|
||
<view class="wushi" :class="{'lanbox' : sx == 0}" @click=" sw(0)">
|
||
<view class="">上午</view>
|
||
<view class="">当前预约：{{renshu.morningCount}}人</view>
|
||
</view>
|
||
<view class="wushi" :class="{'lanbox' : sx == 1}" @click=" sw(1) ">
|
||
<view class="">下午</view>
|
||
<view class="">当前预约：{{renshu.afterCount}}人</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- <reservationCom :pid="pid" type="sku" @shang="shang" @xia="xia"></reservationCom> -->
|
||
<!-- <paymentComp :pid="pid" :zjData="zjData" type="sku"></paymentComp> -->
|
||
<view class="ail-box" style="margin-bottom: 1px;">
|
||
|
||
<view class="h-dx">
|
||
|
||
<view class="">上传证件</view>
|
||
<view class="ds">
|
||
<view class="d-button" :class="{'lx' : zjShow == 1 }" @click="ifzjShow(1)">
|
||
<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" zjShow == 1"></u-icon>
|
||
</view>
|
||
<view style="margin-right: 10px;">是</view>
|
||
<view class="d-button" :class="{'lx' : zjShow == 0 }" @click="ifzjShow(0)">
|
||
<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" zjShow == 0"></u-icon>
|
||
</view>
|
||
<view style="margin-right: 10px;">否</view>
|
||
</view>
|
||
</view>
|
||
<view class="h-dx">
|
||
<view class="">使用本机号码</view>
|
||
<view class="ds">
|
||
<view class="d-button" :class="{'lx' : telShow == 1 }" @click="iftelShow(1)">
|
||
<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" telShow == 1"></u-icon>
|
||
</view>
|
||
<view style="margin-right: 10px;">是</view>
|
||
<view class="d-button" :class="{'lx' : telShow == 0 }" @click="iftelShow(0)">
|
||
<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" telShow == 0"></u-icon>
|
||
</view>
|
||
<view style="margin-right: 10px;">否</view>
|
||
</view>
|
||
</view>
|
||
<view class="h-dx" v-if="telShow == 0 ">
|
||
<view class="">请输入联系方式</view>
|
||
<view class="ds" style="text-align: right;">
|
||
<input type="text" placeholder="请输入联系方式" v-model="dataObj.otherPhone">
|
||
</view>
|
||
</view>
|
||
<view class="h-dx">
|
||
<view class="">线上支付</view>
|
||
<view class="ds">
|
||
<view class="d-button" :class="{'lx' : dataObj.isPayOnline == 1 }" @click="iftimeShow(1)">
|
||
<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" dataObj.isPayOnline == 1"></u-icon>
|
||
</view>
|
||
<view style="margin-right: 10px;">是</view>
|
||
<view class="d-button" :class="{'lx' : dataObj.isPayOnline == 0 }" @click="iftimeShow(0)">
|
||
<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" dataObj.isPayOnline == 0"></u-icon>
|
||
</view>
|
||
<view style="margin-right: 10px;">否</view>
|
||
</view>
|
||
</view>
|
||
<view class="h-dx">
|
||
<view class="">上门取车</view>
|
||
<view class="ds">
|
||
<view class="d-button" :class="{'lx' : dataObj.isPickCar == 1 }" @click="ifcarShow(1)"> <u-icon
|
||
name="checkbox-mark" color="#fff" size="16" v-if=" dataObj.isPickCar == 1"></u-icon>
|
||
</view>
|
||
<view style="margin-right: 10px;">是</view>
|
||
<view class="d-button" :class="{'lx' : dataObj.isPickCar == 0 }" @click="ifcarShow(0)"> <u-icon
|
||
name="checkbox-mark" color="#fff" size="16" v-if=" dataObj.isPickCar == 0"></u-icon>
|
||
</view>
|
||
<view style="margin-right: 10px;">否</view>
|
||
</view>
|
||
</view>
|
||
<view class="h-dx">
|
||
<view class="">备注</view>
|
||
<input type="text" style="z-index: 1;text-align: right;" placeholder="请输入备注" v-model="dataObj.remark">
|
||
</view>
|
||
<view class="h-dx" v-if="zjData">
|
||
<view class="">车牌号：</view>
|
||
<view class="">{{zjData.PlateNo}}</view>
|
||
</view>
|
||
<view class="h-dx" v-if="zjData">
|
||
<view class="">品牌型号：</view>
|
||
<view class="">{{zjData.Model}}</view>
|
||
</view>
|
||
<view class="h-dx" v-if="zjData">
|
||
<view class="">性质：</view>
|
||
<view class="">{{zjData.UseCharacter}}</view>
|
||
</view>
|
||
<view class="h-dx" v-if="zjData">
|
||
<view class="">车架号：</view>
|
||
<view class="">{{zjData.Vin}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="xia-box">
|
||
<view class="biaoti">
|
||
<view class="xian"></view>
|
||
<view class="zxi">详细信息</view>
|
||
<view class="xian"></view>
|
||
</view>
|
||
<!-- <view v-html="obj.goodsDesc"></view> -->
|
||
<u-parse :content="obj.goodsDesc" :tagStyle="style"></u-parse>
|
||
</view>
|
||
<view style="width: 100%; height: 60px;"></view>
|
||
<view class="bott">
|
||
<!-- <view class="dju">￥{{parseFloat(((hj+pickPrice)/100)).toFixed(2)}}</view> -->
|
||
<view style="z-index: 999;" @click="createOrder()">
|
||
<view class="b-left">
|
||
<text v-if="dataObj.isPayOnline == 1 || dataObj.isPayOnline == null ">立即下单</text>
|
||
<text v-if="dataObj.isPayOnline == 0">立即下单</text>
|
||
</view>
|
||
<view class="b-right">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/zhifu.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="bott" v-if="false">
|
||
<view class="dju">￥{{obj.realPrice /100}}</view>
|
||
<view class="b-left" @click="getpayment()">立即预约</view>
|
||
<view class="b-right" @click="getpayment()">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/zhifu.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
|
||
<view class="skupopup">
|
||
<view class="dju">￥{{obj.realPrice /100}}</view>
|
||
<view class="gg-font">已选：{{skuName}}</view>
|
||
<view class="popup-box">
|
||
<view :class="{'lan':skuid == item.id}" class="p-box" v-for="(item,index) in skulist" :key="index"
|
||
@click="getsku(item.id,item.skuName,item.price)">
|
||
<text>{{item.skuName}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="p-anniu" @click="twopayment()">
|
||
<text>完成</text>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<view class="fanhuixx" @click="dafan()">
|
||
<uni-icons type="left" size="24"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
import request from '../../utils/request';
|
||
import paymentComp from '@/pages/detection/paymentComponemts.vue'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: 'sku',
|
||
titles: '蓝安商品',
|
||
pageNum: 1, //第几页
|
||
pageSize: 20, //一页多少张
|
||
totalPages: 0, //总数
|
||
realPrices: 0,
|
||
plist: [],
|
||
bannerlist: [],
|
||
couponList: [],
|
||
skulist: [],
|
||
obj: {
|
||
originalPrice: "0",
|
||
realPrice: "0",
|
||
},
|
||
style: {
|
||
image: 'width: 100%;'
|
||
},
|
||
skuName: '',
|
||
show: false,
|
||
id: '',
|
||
payobj: '',
|
||
skuid: '',
|
||
indexid: 0,
|
||
imgs: '',
|
||
indicatorDots: false,
|
||
autoplay: true,
|
||
interval: 2000,
|
||
xprice: 0,
|
||
duration: 500,
|
||
pid: '',
|
||
couponId: null,
|
||
coupontitle: null,
|
||
discount: null,
|
||
couponType: null,
|
||
idCardImage: null,
|
||
zjData: '',
|
||
partnerName: '',
|
||
address: '',
|
||
partnerId: '',
|
||
itmelist: '',
|
||
appointmentday: '',
|
||
tapindex: null,
|
||
sx: null,
|
||
renshu: {
|
||
morningCount: 0,
|
||
afterCount: 0
|
||
},
|
||
dataObj: {
|
||
couponId: null,
|
||
driverLicenesImg: null, //证件
|
||
isPayOnline: null, //线上支付
|
||
isPickCar: null, //是否上门
|
||
otherPhone: null, //电话号码
|
||
remark: null, //备注
|
||
},
|
||
pickCarId: null,
|
||
zjShow: null,
|
||
telShow: null,
|
||
zjData: '',
|
||
carShow: null,
|
||
dateStr: ''
|
||
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id
|
||
this.sange()
|
||
uni.$on('pickCar', (data) => {
|
||
|
||
this.pickCarId = data
|
||
|
||
})
|
||
uni.$on('imgUrl', (data) => {
|
||
console.log(data, '1111');
|
||
this.dataObj.driverLicenesImg = data
|
||
|
||
this.getimg(data)
|
||
|
||
})
|
||
uni.$on('userCouponDiscount', (data) => {
|
||
console.log('jianting', data);
|
||
//优惠券页面返回的东西
|
||
this.couponId = data.couponId
|
||
this.coupontitle = data.title
|
||
this.discount = data.discount
|
||
this.couponType = data.couponType
|
||
})
|
||
|
||
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
mounted() {
|
||
this.imgs = this.$baseUrl
|
||
this.getindex()
|
||
},
|
||
components: {
|
||
paymentComp,
|
||
|
||
},
|
||
methods: {
|
||
async createOrder() {
|
||
|
||
if (this.zjShow == null) {
|
||
uni.showToast({
|
||
title: '选择证件为空',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
if (this.telShow == null) {
|
||
uni.showToast({
|
||
title: '选择本机号码为空',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
|
||
|
||
if (!this.appointmentday) {
|
||
uni.showToast({
|
||
title: '预约日期未填',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (this.sx == null) {
|
||
uni.showToast({
|
||
title: '上午下午未填',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (this.telShow == 0 && this.dataObj.otherPhone == null) {
|
||
uni.showToast({
|
||
title: '联系方式未填',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
if (this.zjShow == 1 && this.dataObj.driverLicenesImg == null) {
|
||
uni.showToast({
|
||
title: '证据照片未填',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
if (this.dataObj.isPickCar == null) {
|
||
uni.showToast({
|
||
title: '上门取车信息未填',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
if (this.dataObj.isPickCar == 1 && this.pickCarId == null) {
|
||
uni.showToast({
|
||
title: '上门取车信息未填',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
if (this.dataObj.isPayOnline == null) {
|
||
uni.showToast({
|
||
title: '没选支付方式',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
|
||
let data = {
|
||
skuId: this.skuid,
|
||
appointmentDay: this.appointmentday,
|
||
appointmentPeriod: this.sx,
|
||
otherPhone: this.dataObj.otherPhone,
|
||
driverLicenesImg: this.dataObj.driverLicenesImg,
|
||
isPayOnline: this.dataObj.isPayOnline,
|
||
isPickCar: this.dataObj.isPickCar,
|
||
remark: this.dataObj.remark,
|
||
carModel: this.zjData.Model,
|
||
carNature: this.zjData.UseCharacter,
|
||
carIdNo: this.zjData.Vin,
|
||
carNo: this.zjData.PlateNo,
|
||
pickCarId: this.pickCarId
|
||
|
||
}
|
||
let restime = await request({
|
||
url: '/appInspection/goods/appointmentInspection',
|
||
method: 'post',
|
||
data: data
|
||
|
||
})
|
||
if (this.dataObj.isPayOnline == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/detection/success?type=xd'
|
||
})
|
||
return
|
||
}
|
||
|
||
let datas = {
|
||
goodsType: 'jc',
|
||
mdAmount: this.obj.realPrice / 100,
|
||
skuId: this.skuid,
|
||
otherPhone: this.dataObj.otherPhone,
|
||
driverLicenesImg: this.dataObj.driverLicenesImg,
|
||
isPayOnline: this.dataObj.isPayOnline,
|
||
isPickCar: this.dataObj.isPickCar,
|
||
remark: this.dataObj.dataObj,
|
||
carModel: this.zjData.Model,
|
||
carNature: this.zjData.UseCharacter,
|
||
carIdNo: this.zjData.Vin,
|
||
carNo: this.zjData.PlateNo,
|
||
couponId: this.couponId,
|
||
pickCarId: this.pickCarId
|
||
|
||
}
|
||
let res = await request({
|
||
url: '/orderApi/createOrder',
|
||
method: 'post',
|
||
data: datas
|
||
})
|
||
|
||
if (res.data) {
|
||
console.log('执行');
|
||
const ress = await request({
|
||
url: '/payApi/jcPrepayment?type=jsapi' + '&orderId=' + res.data,
|
||
})
|
||
console.log(ress);
|
||
wx.requestPayment({
|
||
timeStamp: ress.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
|
||
nonceStr: ress.nonceStr, // 随机字符串，长度为32个字符以下。
|
||
package: ress.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
|
||
signType: ress.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
|
||
paySign: ress.paySign, // 签名，详见签名生成算法
|
||
success: function(res) {
|
||
console.log('成功', res);
|
||
if (res.errMsg = 'requestPayment:ok') {
|
||
uni.showToast({
|
||
title: '支付成功'
|
||
})
|
||
uni.navigateTo({
|
||
url: '/pages/detection/success?type=zf'
|
||
})
|
||
}
|
||
// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
|
||
},
|
||
fail: function(res) {
|
||
console.log('执行失败1', res);
|
||
that.cancelpay()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
ifzjShow(id) {
|
||
if (id == 1) {
|
||
this.gohomemy()
|
||
}
|
||
this.zjShow = id
|
||
},
|
||
iftelShow(id) {
|
||
this.telShow = id
|
||
if (id == 1) {
|
||
// let user = uni.getStorageSync('userinfo')
|
||
// // console.log(user.nickName);
|
||
// this.dataObj.otherPhone = user.nickName
|
||
}
|
||
},
|
||
iftimeShow(id) {
|
||
this.dataObj.isPayOnline = id
|
||
},
|
||
ifcarShow(id) {
|
||
this.dataObj.isPickCar = id
|
||
if (id == 1) {
|
||
uni.navigateTo({
|
||
url: '/pages/detection/godoor?goodsName=' + this.payobj.goodsName + '&goodsId=' + this
|
||
.payobj.goodsId + "&type=" + this.type
|
||
})
|
||
}
|
||
},
|
||
gohomemy() {
|
||
uni.navigateTo({
|
||
url: '/pages/detection/my-user'
|
||
})
|
||
},
|
||
async paymentComponemts() {
|
||
if (this.type == 'goods') {
|
||
let res = await request({
|
||
url: '/appInspection/goods/orderGoodsInfo?goodsId=' + this.pid,
|
||
method: 'get',
|
||
})
|
||
console.log('skuId', res);
|
||
this.payobj = res.data
|
||
}
|
||
|
||
if (this.type == 'sku') {
|
||
let res = await request({
|
||
url: '/appInspection/goods/orderSkuInfo?goodsId=' + this.pid,
|
||
method: 'get',
|
||
})
|
||
console.log('skuId', res);
|
||
this.payobj = res.data
|
||
|
||
}
|
||
},
|
||
async reservationCom() {
|
||
let data = {
|
||
goodsId: this.skuid,
|
||
type: 'sku'
|
||
}
|
||
let res = await request({
|
||
url: '/appInspection/goods/appointmentDateList',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
this.partnerName = res.data.partnerName
|
||
this.address = res.data.address
|
||
this.partnerId = res.data.partnerId
|
||
this.itmelist = res.data.dataList
|
||
this.appointmentday = res.data.dataList[0].dateStr
|
||
// console.log(this.appointmentday.substring(5, 10).replace('-', '月'));
|
||
|
||
},
|
||
sw(id) {
|
||
this.sx = id
|
||
|
||
},
|
||
gettap(index, items) {
|
||
|
||
|
||
this.tapindex = index
|
||
this.renshu = items
|
||
this.appointmentday = items.dateStr
|
||
},
|
||
async getimg(url) {
|
||
|
||
let data = {
|
||
// licenseImage :this.licenseImage,
|
||
imagePath: url,
|
||
}
|
||
|
||
const res = await request({
|
||
url: '/system/userCar/appVehicleLicenseOCR2',
|
||
method: 'post',
|
||
params: data
|
||
})
|
||
if (res.code == 200) {
|
||
console.log('识别成功');
|
||
this.zjData = res.data
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '识别失败 请从新上传',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
},
|
||
shang(val) {
|
||
console.log('父级', val);
|
||
},
|
||
xia(val) {
|
||
console.log('父级', val);
|
||
},
|
||
gocoun() {
|
||
uni.navigateTo({
|
||
url: '/pages/detection/coupon?id=' + this.pid + "&type=" + this.type
|
||
})
|
||
|
||
},
|
||
//
|
||
open() {
|
||
console.log('open');
|
||
},
|
||
close() {
|
||
this.getindex()
|
||
this.show = false
|
||
console.log('close');
|
||
},
|
||
async getindex() {
|
||
let res = await request({
|
||
url: '/appInspection/goods/goodsDetail?goodsId=' + this.id,
|
||
method: 'get',
|
||
})
|
||
this.obj = res.data
|
||
if (!res.data.couponList) {
|
||
res.data.couponList = []
|
||
}
|
||
console.log(res);
|
||
this.couponList = res.data.couponList.slice(0, 3);
|
||
this.bannerlist = res.data.imageList
|
||
console.log(this.bannerlist)
|
||
|
||
this.titles = this.obj.title
|
||
|
||
console.log(res);
|
||
|
||
},
|
||
async sange() {
|
||
let res = await request({
|
||
url: '/appInspection/goods/goodsSkuList?goodsId=' + this.id,
|
||
method: 'get',
|
||
})
|
||
if (res.data.length == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/detection/payment?id=' + this.id + '&type=goods'
|
||
})
|
||
} else {
|
||
this.skulist = res.data
|
||
this.skuid = res.data[0].id
|
||
this.pid = res.data[0].id
|
||
this.skuName = res.data[0].skuName
|
||
this.obj.realPrice = res.data[0].price
|
||
|
||
this.reservationCom()
|
||
this.paymentComponemts()
|
||
|
||
|
||
}
|
||
|
||
},
|
||
async getpayment() {
|
||
|
||
let res = await request({
|
||
url: '/appInspection/goods/goodsSkuList?goodsId=' + this.id,
|
||
method: 'get',
|
||
})
|
||
if (res.data.length == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/detection/payment?id=' + this.id + '&type=goods'
|
||
})
|
||
} else {
|
||
this.skulist = res.data
|
||
this.skuid = this.skulist[0].id
|
||
this.show = true
|
||
}
|
||
|
||
},
|
||
dafan() {
|
||
uni.navigateBack()
|
||
},
|
||
getsku(Id, name, price) {
|
||
this.skuid = Id
|
||
this.pid = Id
|
||
this.skuName = name
|
||
this.obj.realPrice = price
|
||
console.log(this.pid);
|
||
},
|
||
twopayment() {
|
||
uni.navigateTo({
|
||
url: '/pages/detection/payment?id=' + this.skuid + '&type=sku'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: calc(100vh);
|
||
background-color: #F6F6F6;
|
||
box-sizing: border-box;
|
||
// padding-bottom: 90px;
|
||
|
||
}
|
||
|
||
.fanhuixx {
|
||
z-index: 9999;
|
||
position: fixed;
|
||
top: 45px;
|
||
left: 20px;
|
||
}
|
||
|
||
.skupopup {
|
||
background-color: white;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
border-radius: 10px 10px 0px 0px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.lan {
|
||
color: #fff !important;
|
||
background-color: #0D2E8D !important;
|
||
border: 1px solid #0D2E8D !important;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.p-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 3px;
|
||
border: 1px solid #DDDDDD;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #000;
|
||
margin-bottom: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.p-boxlan {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 3px;
|
||
border: 1px solid #DDDDDD;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #0D2E8D !important;
|
||
margin-bottom: 10px;
|
||
background-color: #E1E7FB !important;
|
||
border: 1px solid #0D2E8D !important;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.p-boxlan2 {
|
||
display: flex;
|
||
padding: 10px;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #0D2E8D !important;
|
||
margin-bottom: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.p-anniu {
|
||
width: 95%;
|
||
height: 40px;
|
||
margin: 20px auto;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: white;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
background: #0D2E8D;
|
||
|
||
}
|
||
|
||
.popup-box {
|
||
// border-top: 1px solid #EEEEEE;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-top: 5px;
|
||
// margin-top: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
}
|
||
|
||
.ys1 {
|
||
text-align: center;
|
||
font-size: 30px;
|
||
font-weight: 500;
|
||
color: #63330B;
|
||
}
|
||
|
||
.ys2 {
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.ys3 {
|
||
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #63330B;
|
||
}
|
||
|
||
.q-hei {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.quan {
|
||
width: 100%;
|
||
height: 68px;
|
||
background: #FDF7F7;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.xh {
|
||
width: 48px;
|
||
height: 20px;
|
||
background: #FF571A;
|
||
border-radius: 2px;
|
||
color: white;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.q-zuo {
|
||
width: 70px;
|
||
height: 70px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.bott {
|
||
width: 100%;
|
||
height: 50px;
|
||
background-color: #EEEEEE;
|
||
position: fixed;
|
||
background: white;
|
||
bottom: 0px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
|
||
|
||
}
|
||
|
||
.dju {
|
||
font-size: 25px;
|
||
font-weight: bold;
|
||
color: #FF571A;
|
||
}
|
||
|
||
.b-left {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 10%;
|
||
z-index: 99999;
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
;
|
||
|
||
}
|
||
|
||
.b-right {
|
||
width: 40%;
|
||
height: 60px;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
right: 0px;
|
||
|
||
image {
|
||
z-index: 99999;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.bgang {
|
||
width: 100%;
|
||
height: 50px;
|
||
background-color: white;
|
||
}
|
||
|
||
.m-top {
|
||
width: 100%;
|
||
height: 375px;
|
||
// overflow: hidden;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
padding: 1px;
|
||
|
||
}
|
||
|
||
.uni-margin-wrap {
|
||
height: 375px;
|
||
}
|
||
|
||
.swiper {
|
||
height: 375px;
|
||
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 375px;
|
||
width: 100%;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.swiper-list {
|
||
margin-top: 40rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.uni-common-mt {
|
||
margin-top: 60rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.info {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
}
|
||
|
||
.uni-padding-wrap {
|
||
height: 375px;
|
||
padding: 0 100rpx;
|
||
}
|
||
|
||
.top-img {
|
||
width: 100%;
|
||
height: 375px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.cont-box {
|
||
width: 85%;
|
||
// position: absolute;
|
||
// z-index: 9999;
|
||
// left: 50%;
|
||
// transform: translate(-50%, -75%);
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
background: white;
|
||
margin: 15px auto;
|
||
margin-top: 100px;
|
||
|
||
}
|
||
|
||
.bai-box {
|
||
width: 93%;
|
||
margin: 0 auto;
|
||
border-radius: 6px;
|
||
margin-bottom: 10px;
|
||
background-color: white;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.xia-box {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
margin-bottom: 10px;
|
||
background-color: white
|
||
}
|
||
|
||
.pinglun {
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.ptouxiang {
|
||
width: 35px;
|
||
height: 35px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.pp-box {
|
||
width: 80%;
|
||
}
|
||
|
||
.p-bse {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.p-nr {}
|
||
|
||
.xiab-box {
|
||
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
margin-bottom: 10px;
|
||
background-color: white
|
||
}
|
||
|
||
.dis {
|
||
z-index: 9;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.san {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
margin: 10px auto;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.o-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.sb {
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.zui-di {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: space-between;
|
||
}
|
||
|
||
.hui {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
text-decoration: line-through;
|
||
color: #AAAAAA;
|
||
}
|
||
|
||
.ju {
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
color: #FF571A;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.t-title {
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin: 10px 0px;
|
||
}
|
||
|
||
// .bai-box{
|
||
// width: 100px;
|
||
// box-sizing: border-box;
|
||
// padding: 15px;
|
||
|
||
// }
|
||
.biaoti {
|
||
width: 70%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.zxi {
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.xian {
|
||
width: 65px;
|
||
height: 0px;
|
||
opacity: 1;
|
||
border: 1px solid #999999;
|
||
}
|
||
|
||
.yhz {
|
||
position: absolute;
|
||
color: #63330B;
|
||
top: 3px;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.yhzc {
|
||
width: 144px;
|
||
height: 26px;
|
||
position: absolute;
|
||
color: #63330B;
|
||
top: 3px;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.xsa {
|
||
width: 100%;
|
||
position: relative;
|
||
background: linear-gradient(180deg, #FFF4DB 0%, #FFFFFF 100%);
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.zui-bottom {
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: 60px;
|
||
|
||
|
||
background-color: #AAAAAA;
|
||
}
|
||
|
||
.anniu {
|
||
|
||
z-index: 999;
|
||
width: 30%;
|
||
height: 100%;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.baigang {
|
||
width: 100%;
|
||
height: 50px;
|
||
background: #FFFFFF;
|
||
padding: 16px;
|
||
}
|
||
|
||
.h-dang {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.top-title {
|
||
width: 100%;
|
||
height: 88px;
|
||
background: #fff;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
padding-top: 50px;
|
||
z-index: 999;
|
||
}
|
||
|
||
.twob {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
//
|
||
.ail-box {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
background: #FFFFFF;
|
||
margin-bottom: 10px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.c-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
padding-top: 16%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: white;
|
||
}
|
||
|
||
.on-input {
|
||
width: 100%;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
|
||
padding: 10px 0px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.baoti {
|
||
width: 25%;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 15px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.box-bottom {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.santu {
|
||
width: 32%;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
background: #F8FAFB;
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
// color: #999999;
|
||
margin-top: 15px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.lanbox {
|
||
background: #0D2E8D !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
|
||
|
||
.wushi {
|
||
width: 49%;
|
||
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
background: #F8FAFB;
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
// color: #999999;
|
||
}
|
||
|
||
.h-title {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
.bottom-d {
|
||
width: 100%;
|
||
height: 80px;
|
||
background-color: white;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.annniu {
|
||
height: 40px;
|
||
background: #0D2E8D;
|
||
width: 90%;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: white;
|
||
justify-content: center;
|
||
}
|
||
|
||
.x-top {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.x-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.chebiao {
|
||
width: 70px;
|
||
height: 70px;
|
||
margin-right: 10px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.dh-title {
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.xh-title {
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 15px;
|
||
}
|
||
|
||
.x-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.x-xia {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.x-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 5px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.x-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 5px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.dix {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.dixx {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.h-dx {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.ds {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.d-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
border: 1px solid #999999;
|
||
background: #eeeeee;
|
||
width: 18px;
|
||
height: 18px;
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
// margin: 0px 10px;
|
||
|
||
}
|
||
|
||
.lx {
|
||
border: 1px solid #1c3d9c !important;
|
||
background-color: #1c3d9c;
|
||
color: #fff;
|
||
}
|
||
</style> |