|
@@ -2,6 +2,75 @@
|
|
|
<view class="box">
|
|
|
<view class="topBox"></view>
|
|
|
<view class="yuanhu"></view>
|
|
|
+ <view class="goodsBox">
|
|
|
+ <view class="goodsBoxLeft">
|
|
|
+ <image :src="goodsInfo.ImgList[0].url" mode="" v-if="goodsInfo.ImgList.length>1" class="hotGoodsLineImg"></image>
|
|
|
+ <image src="../../static/timg/noimg.png" v-else class="hotGoodsLineImg" ></image>
|
|
|
+ </view>
|
|
|
+ <view class="goodsBoxRgiht">
|
|
|
+ <view class="goodsName">{{goodsInfo.name}}</view>
|
|
|
+ <view class="goodsBottom">
|
|
|
+ <view class="goodsPrice"> <span class="goodsPrice1">¥</span> {{goodsInfo.salePrice?goodsInfo.salePrice:goodsInfo.scribingPrice}}</view>
|
|
|
+ <view class="numJsbox">
|
|
|
+ <view class="numJj" @click="calculation(1)">-</view>
|
|
|
+ <view class="goodsnum">{{goodsnum}}</view>
|
|
|
+ <view class="numJj" @click="calculation(2)">+</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cont">
|
|
|
+ <view class="contKk">
|
|
|
+ <view class="contLine">
|
|
|
+ <view class="contlineLeft">服务门店</view>
|
|
|
+ <view class="contlineRight">{{shopName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="contLine">
|
|
|
+ <view class="contlineLeft">车牌号</view>
|
|
|
+ <view class="contlineRight">
|
|
|
+ <span>{{carInfo.plateNumber}}</span>
|
|
|
+ <image src="../../static/timg/icon_arrow_right.png" mode="" class="contlineRightJt"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="contLine">
|
|
|
+ <view class="contlineLeft">车型</view>
|
|
|
+ <view class="contlineRight">
|
|
|
+ <span class="carModel">{{carInfo.carModel}}</span>
|
|
|
+ <image src="../../static/timg/icon_arrow_right.png" mode="" class="contlineRightJt"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="contLine">
|
|
|
+ <view class="contlineLeft">联系人</view>
|
|
|
+ <view class="contlineRight">
|
|
|
+ <input type="text" v-model="customerName" placeholder="请输入联系人姓名" class="contlineRightInput">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="contLine " style="border-bottom: none;">
|
|
|
+ <view class="contlineLeft">手机号</view>
|
|
|
+ <view class="contlineRight">
|
|
|
+ <input type="text" v-model="mobilePhone" placeholder="请输入联系人手机号" class="contlineRightInput">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contKk" style="margin-top:20rpx;">
|
|
|
+ <view class="contLine " style="border-bottom: none;">
|
|
|
+ <view class="contlineLeft">订单备注</view>
|
|
|
+ <view class="contlineRight">
|
|
|
+ <input type="text" v-model="comment" placeholder="请输入" class="contlineRightInput2">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="height:120rpx"></view>
|
|
|
+ <view class="bottomBox">
|
|
|
+ <view class="bottomLeft">
|
|
|
+ <view class="bottomLeftLine">合计: <span>¥</span> <span class="bottomPrice">{{totalMoney}}</span> </view>
|
|
|
+ <view class="bottomLeftLine2">总优惠:¥{{yhMoney}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottomBtn" @click="submit">提交订单</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -16,15 +85,78 @@
|
|
|
goodsnum:1,
|
|
|
id:'',
|
|
|
info:'',
|
|
|
+ carInfo:'',
|
|
|
+ shopID:'',
|
|
|
+ shopName:'',
|
|
|
+ goodsInfo:'',
|
|
|
+ totalMoney:'',
|
|
|
+ yhMoney:0,
|
|
|
+ customerName:'',
|
|
|
+ mobilePhone:'',
|
|
|
+ comment:'',
|
|
|
}
|
|
|
},
|
|
|
onLoad(opt) {
|
|
|
- //this.id=opt.id;
|
|
|
+ this.shopID=opt.shopID;
|
|
|
+ this.shopName=opt.shopName;
|
|
|
+ this.carInfo=this.$store.state.carInfo;
|
|
|
+ this.goodsnum=opt.itemQty;
|
|
|
+ //console.log(this.carInfo)
|
|
|
this.userInfo = uni.getStorageSync("userInfo");
|
|
|
+ this.goodsInfo=uni.getStorageSync("goodsDetail");
|
|
|
+ this.jsMoney()
|
|
|
//this.openGoodsDetailById()
|
|
|
+ /* var a=[
|
|
|
+ {name:1},{name:2}
|
|
|
+ ]
|
|
|
+ var b=a.map(i=>i.name);
|
|
|
+ console.log(b) */
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ submit(){
|
|
|
+ var jsonArray = [];
|
|
|
+ var obj={
|
|
|
+ itemId:this.goodsInfo.id,
|
|
|
+ itemName:this.goodsInfo.name,
|
|
|
+ itemQty:this.goodsnum,
|
|
|
+ salePrice:this.goodsInfo.salePrice,
|
|
|
+ totalPrice:this.totalMoney
|
|
|
+ }
|
|
|
+ jsonArray.push(obj)
|
|
|
+ //"bizType:1商品2项目3套餐
|
|
|
+ var params={
|
|
|
+ sheetType:this.goodsInfo.bizType,
|
|
|
+ sheetContent:this.goodsInfo.name,
|
|
|
+ customerName:this.customerName,
|
|
|
+ mobilePhone:this.mobilePhone,
|
|
|
+ plateNumber:this.carInfo.plateNumber,
|
|
|
+ carModel:this.carInfo.carModel,
|
|
|
+ totalMoney:this.totalMoney,
|
|
|
+ shopId:this.shopID,
|
|
|
+ comment:this.comment,
|
|
|
+ sheetDetail:JSON.stringify(jsonArray)
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ this.$http('openMallOrder/submitOrder', params,'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if(res.code==0){
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
openGoodsDetailById(){
|
|
|
this.$http('openMall/openGoodsDetailById', {
|
|
|
id:this.id
|
|
@@ -41,11 +173,30 @@
|
|
|
if(type==1){
|
|
|
if(this.goodsnum>1){
|
|
|
this.goodsnum--
|
|
|
+ this.jsMoney()
|
|
|
}
|
|
|
}else{
|
|
|
- if(this.info.oneQty>this.goodsnum){
|
|
|
+ if(this.goodsInfo.oneQty>this.goodsnum){
|
|
|
this.goodsnum++
|
|
|
+ this.jsMoney()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ jsMoney(){
|
|
|
+ if(this.goodsInfo.salePrice){
|
|
|
+ this.totalMoney=this.goodsInfo.salePrice*this.goodsnum;
|
|
|
+ if(this.goodsInfo.scribingPrice){
|
|
|
+ var wyh=this.goodsInfo.scribingPrice*this.goodsnum;
|
|
|
+ this.yhMoney=wyh-this.totalMoney;
|
|
|
+ this.yhMoney=this.yhMoney.tofixed(2)
|
|
|
+ }else{
|
|
|
+ this.yhMoney=0
|
|
|
}
|
|
|
+ this.totalMoney=this.totalMoney.tofixed(2)
|
|
|
+ }else{
|
|
|
+ this.totalMoney=this.goodsInfo.scribingPrice*this.goodsnum
|
|
|
+ this.totalMoney=this.totalMoney.tofixed(2)
|
|
|
+ this.yhMoney=0
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -54,20 +205,193 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
-
|
|
|
+.bottomBox{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -2px 10rpx 0px rgba(153,153,153,0.2000);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+.bottomLeft{
|
|
|
+ padding-top: 25rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+}
|
|
|
+.bottomLeftLine{
|
|
|
+ color: #666666;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.bottomLeftLine span{
|
|
|
+ color: #FF0000;
|
|
|
+}
|
|
|
+.bottomPrice{
|
|
|
+ font-size: 32rpx;
|
|
|
+}
|
|
|
+.bottomLeftLine2{
|
|
|
+ color: #999999;
|
|
|
+ line-height: 33rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.bottomBtn{
|
|
|
+ width: 204rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: #D53533;
|
|
|
+ border-radius: 37rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 74rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 23rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+}
|
|
|
+.cont{
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+}
|
|
|
+.contKk{
|
|
|
+ background: #FFFFFF;border-radius: 10rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+.contLine{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
+.contlineLeft{
|
|
|
+ color: #666666;
|
|
|
+ line-height: 40rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.carModel{
|
|
|
+ width: 500rpx;
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.contlineRight{
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 450rpx;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.contlineRightInput{
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.contlineRightJt{
|
|
|
+ width: 12rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
.box{
|
|
|
background: #F4F5F7;
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
.topBox{
|
|
|
- height: 150rpx;
|
|
|
+ height: 140rpx;
|
|
|
background: #FF0000;
|
|
|
width: 750rpx;
|
|
|
}
|
|
|
.yuanhu{
|
|
|
width: 750rpx;
|
|
|
- height: 20rpx;
|
|
|
+ height: 30rpx;
|
|
|
background: #FF0000;
|
|
|
border-radius: 0 0 100% 100%;
|
|
|
}
|
|
|
+.goodsBox{
|
|
|
+ width: 662rpx;
|
|
|
+ height: 194rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ margin-top: -100rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.goodsBoxLeft{
|
|
|
+ width: 208rpx;
|
|
|
+ height: 194rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
+.hotGoodsLineImg{
|
|
|
+ width: 208rpx;
|
|
|
+ height: 194rpx;
|
|
|
+}
|
|
|
+.goodsnum{
|
|
|
+ width: 88rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 0 4rpx;
|
|
|
+}
|
|
|
+.numJsbox{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.numJj{
|
|
|
+width: 44rpx;
|
|
|
+height: 44rpx;
|
|
|
+background: #F4F5F7;
|
|
|
+border-radius: 0px 6rpx 6rpx 0px;
|
|
|
+text-align: center;
|
|
|
+line-height: 44rpx;
|
|
|
+font-size: 30rpx;
|
|
|
+color: #F4F5F7;
|
|
|
+}
|
|
|
+.goodsnum{
|
|
|
+ width: 88rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 0 4rpx;
|
|
|
+}
|
|
|
+.goodsBottom{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 60rpx;
|
|
|
+}
|
|
|
+.goodsPrice{
|
|
|
+ color: #333333;
|
|
|
+ font-size: 32rpx;
|
|
|
+}
|
|
|
+.goodsPrice1{
|
|
|
+ color: #333333;
|
|
|
+ font-size: 22rpx;
|
|
|
+}
|
|
|
+.goodsName{
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ width: 420rpx;
|
|
|
+}
|
|
|
+.goodsBoxRgiht{
|
|
|
+ padding-left: 24rpx;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
</style>
|