Forráskód Böngészése

feat:订单详情选择优惠券或权益卡

zhanghui 5 hónapja
szülő
commit
1202b60aca
2 módosított fájl, 270 hozzáadás és 2 törlés
  1. 76 0
      orderPages/orderDetail/index.rpx.scss
  2. 194 2
      orderPages/orderDetail/index.vue

+ 76 - 0
orderPages/orderDetail/index.rpx.scss

@@ -361,3 +361,79 @@
   margin-top: 15rpx;
   background: #FFFFFF;
 }
+.flex1{
+  flex: 1;
+}
+.couponView{
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 34rpx 32rpx;
+}
+
+.coupon1{
+  border: 2rpx solid #cccccc;
+  border-left: 10rpx solid #cccccc;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-top: 30rpx;
+}
+
+.icon1{
+  background-color: #cccccc;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 10rpx;
+
+  color: #F5F5F5;
+  text-align: center;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.couponName{
+  font-size: 30rpx;
+  font-weight: bold;
+  margin-left: 20rpx;
+}
+.couponBtn{
+  border: 2rpx solid #ff5a5f;
+  border-radius: 10rpx;
+  color: #ff5a5f;
+  font-size: 28rpx;
+  padding:10rpx 30rpx;
+}
+.couponType{
+  padding: 0 10rpx;
+  font-size: 24rpx;
+  color: #cccccc;
+}
+.couponLine{
+  border-bottom: 2rpx solid #cccccc;
+
+}
+
+
+.coupon2{
+  border: 2rpx solid #ff5a5f;
+  border-left: 10rpx solid #ff5a5f;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-top: 30rpx;
+}
+
+
+.icon2{
+  background-color: #ff5a5f;
+  width: 80rpx;
+  height: 100%;
+  border-radius: 10rpx;
+
+  color: #F5F5F5;
+  text-align: center;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+.couponValue{
+  color: #333333;
+  font-size: 24rpx;
+  margin-left: 20rpx;
+}

+ 194 - 2
orderPages/orderDetail/index.vue

@@ -130,6 +130,19 @@
 						</view>
 					</view>
 
+          <view class="flex-row justify-between key" v-if="item.status == 1 || item.status == 6">
+            <view class="flex-row">
+              <u-icon size="16" name="coupon"></u-icon>
+              <text>优惠选择:</text>
+            </view>
+            <view class="flex-row justify-between value  flex1" style="height: 100%" @click="openCoupon(item,index)">
+              <text v-if="item.suggestType == 0">选择优惠券或权益卡</text>
+              <text v-if="item.suggestType == 1">{{ item.suggestCoupon.name }} {{ item.suggestType }}</text>
+              <text v-if="item.suggestType == 2">{{ item.suggestEquityCard.name }} {{ item.suggestType }}</text>
+              <u-icon size="12" name="arrow-right"></u-icon>
+            </view>
+          </view>
+
 				</view>
 			</view>
 		</view>
@@ -273,7 +286,98 @@
 		</uni-popup>
 
 
-	</view>
+
+    <uni-popup ref="couponPopup" :catchtouchmove="true" :animation="false" type="bottom">
+      <view class="couponView flex-col">
+        <view class="flex-row justify-center">
+          <text>优惠选择</text>
+        </view>
+
+        <view  style="height: 700rpx;overflow: auto" >
+          <view class="flex-row justify-between coupon1">
+            <view class="flex-row justify-start">
+              <view class="flex-col justify-center icon1">
+                <text>0</text>
+              </view>
+              <view class="flex-col justify-center couponName">
+                <text>不选择优惠</text>
+              </view>
+            </view>
+            <view class="flex-col justify-center " >
+              <text class="couponBtn"  @click="use(item,0)">选择</text>
+            </view>
+          </view>
+
+          <view class="flex-row justify-center" style="margin-top: 30rpx" v-if="availableCouponList.length > 0">
+            <view class="flex-col justify-center flex1">
+              <view class="couponLine"></view>
+            </view>
+            <text class="couponType">优惠券</text>
+            <view class="flex-col justify-center flex1">
+              <view class="couponLine"></view>
+            </view>
+          </view>
+
+          <view class="flex-row justify-between coupon2" v-for="(item,index) in availableCouponList" :key="index">
+            <view class="flex-row justify-start">
+              <view class="flex-col justify-center icon2">
+                <text>{{item.discountsPrice}}</text>
+              </view>
+              <view class="flex-col justify-center">
+                <view class="flex-col justify-center couponName">
+                  <text>{{item.name}}</text>
+                </view>
+                <view class="flex-col justify-center couponValue">
+                  <text>使用项目:{{item.useServiceDesc}}</text>
+                </view>
+                <view class="flex-col justify-center couponValue">
+                  <text>使用金额:{{item.reachPrice}}</text>
+                </view>
+              </view>
+            </view>
+            <view class="flex-col justify-center" >
+              <text class="couponBtn" @click="use(item,1)">立即使用</text>
+            </view>
+          </view>
+
+
+          <view  class="flex-row justify-center" style="margin-top: 30rpx" v-if="availableEquityCardList.length > 0">
+            <view class="flex-col justify-center flex1">
+              <view class="couponLine"></view>
+            </view>
+            <text class="couponType">权益卡</text>
+            <view class="flex-col justify-center flex1">
+              <view class="couponLine"></view>
+            </view>
+          </view>
+
+          <view class="flex-row justify-between coupon2" v-for="(item,index) in availableEquityCardList" :key="index">
+            <view class="flex-row justify-start">
+              <view class="flex-col justify-center icon2">
+                <text>{{item.faceValue}}</text>
+              </view>
+
+              <view class="flex-col justify-center">
+                <view class="flex-col justify-center couponName">
+                  <text>{{item.title}}</text>
+                </view>
+                <view class="flex-col justify-center couponValue">
+                  <text>使用项目:{{item.serviceProjectName}}</text>
+                </view>
+              </view>
+            </view>
+            <view class="flex-col justify-center" >
+              <text class="couponBtn" @click="use(item,2)">立即使用</text>
+            </view>
+          </view>
+
+        </view>
+
+      </view>
+    </uni-popup>
+
+
+  </view>
 </template>
 
 <script>
@@ -299,6 +403,10 @@
 				requestStatus : false,
 				loveCardId:'',
 				loveCardList:[],
+        availableCouponList:[],
+        availableEquityCardList:[],
+        availableChild:null,
+        availableIndex:null
 			}
 		},
 		onLoad(e) {
@@ -311,6 +419,80 @@
 		},
 		methods: {
 
+      /**
+       *
+       *     if (child.suggestCoupon){
+       *               child.suggestType = 1
+       *             }else if (child.suggestEquityCard){
+       *               child.suggestType = 2
+       *             }else {
+       *               child.suggestType = 0
+       *             }
+       *
+       **/
+
+      use(item,suggestType){
+
+        if (suggestType == 1){
+          this.availableChild.suggestType = 1
+          this.availableChild.suggestCoupon = item
+          this.availableChild.discountAmount = item.discountsPrice
+          this.availableChild.payAmount =  this.availableChild.servicePrice - item.discountsPrice
+        }else if (suggestType == 2){
+          this.availableChild.suggestType = 2
+          this.availableChild.suggestEquityCard = item
+          this.availableChild.discountAmount = item.faceValue
+          this.availableChild.payAmount =  this.availableChild.servicePrice - item.faceValue
+        }else {
+          this.availableChild.suggestType =  0
+          this.availableChild.suggestCoupon = []
+          this.availableChild.suggestEquityCard = []
+          this.availableChild.discountAmount = 0
+          this.availableChild.payAmount =  this.availableChild.servicePrice
+        }
+        this.$set(this.order.child,this.availableIndex,this.availableChild)
+        let payAmount = 0      //计算订单总支付金额
+        let discountAmount = 0 //计算订单总优惠金额
+        for (const child of this.order.child) {
+          if (child.status == 1){
+            payAmount += child.payAmount - 0
+            discountAmount += child.discountAmount - 0
+          }
+        }
+        this.order.payAmount = payAmount
+        this.order.discountAmount = discountAmount
+        this.availableChild = null
+        this.availableIndex = null
+        this.availableCouponList = []
+        this.availableEquityCardList = []
+        this.$refs.couponPopup.close()
+      },
+
+      openCoupon(item,index){
+        console.log(item)
+        this.availableIndex = index
+        this.availableChild = item
+        this.availableCoupons(item)
+        this.availableEquityCards(item)
+        this.$refs.couponPopup.open()
+      },
+
+      availableEquityCards(item){
+        this.$api.availableEquityCards({
+          orderServiceId:item.orderServiceId
+        }).then(res=>{
+          this.availableEquityCardList = res.data.data
+        })
+      },
+
+      availableCoupons(item){
+        this.$api.availableCoupons({
+          orderServiceId:item.orderServiceId
+        }).then(res=>{
+          this.availableCouponList = res.data.data
+        })
+      },
+
 			getMyReceiveList(){
 				this.$api.getMyReceiveList().then(res=>{
 					this.loveCardList = res.data.data
@@ -547,7 +729,17 @@
 				this.$api.getOrderDetailByOrderId({
 					id:id
 				}).then(res=>{
-					this.order= res.data.data
+
+          for (const child of res.data.data.child) {
+            if (child.suggestCoupon){
+              child.suggestType = 1
+            }else if (child.suggestEquityCard){
+              child.suggestType = 2
+            }else {
+              child.suggestType = 0
+            }
+          }
+          this.order= res.data.data
 					// this.calculatePrice()
 				})
 			},