yicangzongtai_app_240321/pages/product/surePay/servicePay.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>

    <view class="carbox">
      <view class="addressBox">
        <view class="goHome">
          <view class="u-p30">
            <view class=" u-font28 u-999 u-flex-center-sb" style="border-bottom: 1rpx solid #E6E6E6;padding-bottom: 30rpx;margin-bottom: 30rpx;" >
			  <text class="u-333 u-bold ">姓名：</text>
              <view class="u-flex-center-sb u-text-left">
              <input
                type="text"
                :value="name"
                @input="userName"
                maxlength="8"
                placeholder="请输入"
				style="margin-right: 14rpx;text-align: right;"
              />
              <picker
                class="choice"
                @change="bindPickerChange"
                :value="gender"
                :range="platform"
                range-key="name"
              >
                <view class="uni-input sex"
                  >{{ platform[index].name
                  }}<text class="iconfont">&#xe645;</text></view
                >
              </picker>
              </view>
            </view>			
            <view class="u-font28 u-999 u-flex-center-sb">
              <text class="u-mr10 iconfont u-02331F u-font30">手机号码</text>
              <input
                type="number"
                :value="phone"
                maxlength="11"
                @input="userMobile"
                placeholder="请输入"
				style="text-align: right;"
              />
            </view>
          </view>
        </view>
      </view>
      <view
        class=""
        v-for="(pitem, index) in sureDataAll.shop_orders"
        :key="pitem.source_shop_id"
      >
        <view class="shopList u-mt30">
          <ldshop
            :shopStatus="shopStatus"
            :value="pitem.source_shop_name"
          ></ldshop>
          <view v-for="item in pitem.items" :key="item.goods_id">
            <ldgoods :value="item" :zhe="false"></ldgoods>
          </view>
        </view>

        <!-- list -->
        <view class="listText u-mt30">
          <view class="u-border-one-one u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818">
              <text>商品金额</text>
            </view>
            <view class="u-font30 u-999">
              ¥ {{ pitem.original_goods_amount }}
            </view>
          </view>

          <view class="u-border-one-one u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818">
              <text>服务商品折扣</text>
            </view>
            <view class="u-font30 u-999"> -¥ {{ pitem.discount_amount }} </view>
          </view>

          <view class="u-border-one-one u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818">
              <text>支付金额</text>
            </view>
            <view class="u-font30 u-FF0000 u-bold">
              <rich-text
                :nodes="$mUtil.priceBigSmall(pitem.total_amount)"
              ></rich-text>
            </view>
          </view>
        </view>

        <!-- 备注 -->
        <view class="listText u-p30 u-mt30">
          <view class="u-font28 u-181818">填写备注</view>
          <textarea
            class="textarea u-mt10 u-font28 u-333"
            @input="textareaText($event, index)"
            value=""
            placeholder="如有需求请填写"
          />
        </view>
      </view>
    </view>

    <!-- 底部 -->

    <view class="botfixed u-flex-center-sb">
      <view class="leftAll u-flex-center">
        <view class="u-flex-center">
          <text class="u-font28 u-333">合计：</text>
          <view class="u-FF0000 u-bold">
            <rich-text
              :nodes="$mUtil.priceBigSmall(sureDataAll.total_money)"
            ></rich-text>
          </view>
        </view>
      </view>
      <view class="rightP u-flex-center" @click="submitOrder">
        <view class="u-btn btnWidth u-ml30">提交订单</view>
      </view>
    </view>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script>
var app = getApp();

import ldshop from "../../../components/ld-shop/ld-shop.vue";
import ldgoods from "../../../components/ld-goods/ld-goods.vue";
export default {
  components: {
    ldshop,
    ldgoods,
  },
  data() {
    return {
      shopStatus: false,

      tabTop: 0,
      price: 20,
      loading: false,
      status: 1, //快递方式标志
      config: {
        back: true, //false是tolbar页面 是则不写
        title: "订单详情",
        color: "#1a1a1a",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, "#fff"],
        statusBarFontColor: "#fff",
      },
      sureDataAll: {},
      shopDiscounts: {},
      self_take: {},
      dataJson: {},
      sureData: {},
      addressChose: false,
      platform: [
           {
          name: "保密",
        },
        {
          name: "先生",
        },
        {
          name: "女士",
        },
       
      ],
      gender: null,
      index: 1,
      name: null,
      phone: null,
      type:null
    };
  },

  onLoad(options) {
    this.loading = true;
    this.tabTop = app.globalData.barHeight + 44;
    let dataJson = uni.getStorageSync("dataJson");
    let user=uni.getStorageSync("personal")
 
    if(user){
        this.phone=user.mobile
    }
  if(options.type){
			this.type=options.type
		}

    if (dataJson) {
      this.dataJson = dataJson;
    }
  },

  onShow() {
	  let orderreminder =uni.getStorageSync("orderreminder")
	  if(orderreminder){
	  	this.$mUtil.toast("已生成待付款订单")
	  	uni.removeStorageSync("orderreminder")
	  }
        this.loading = false;
    let dataJson = uni.getStorageSync("dataJson");
    this.sureDataAll=dataJson
    if (dataJson && !this.addressChose) {
      this.loading = true;
      this.$http.post(`/order/build`, dataJson).then((res) => {
        if (res && res.code == 200) {
          this.loading = false;
          uni.setStorageSync("sureData", res.data);
          if (res.data) {
            this.sureDataAll = res.data;
            let totaltNum = 0;
            res.data.shop_orders.forEach((res) => {
              totaltNum += res.goods_num;
            });
            this.sureData = res.data;
            this.totaltNum = totaltNum;
          }
        }
      });
    }
  },
  methods: {
    bindPickerChange(e) {
      this.index = e.detail.value;
    },
    //提交订单
    submitOrder() {
      if (!this.name) {
        this.$mUtil.toast("请填写姓名");
        return false;
      }
      if (!this.phone) {
        this.$mUtil.toast("请填写手机号");
        return false;
      }
      if (!this.phone.match(this.$mConfig.telRegex)) {
        this.$mUtil.toast("请输入正确手机号");
        return false;
      }
      this.dataJson.service_contacts = {
        contacts: this.name,
        mobile: this.phone,
        gender: this.index
      };
      this.orderCreated();
    },
    orderCreated() {
      this.$http.post("/order/create", this.dataJson).then((res) => {
        this.loading = false;
        if (res && res.code == 200) {
          let target = res.data;
          if (target.payment_status == 5) {
            uni.reLaunch({
              url: "/pages/order/orderList/serviceOrder",
            });
            return false;
          } else {
            uni.navigateTo({
              url:
                "../../order/pay?id=" +
                target.id +
                "&total_amount=" +
                target.total_amount +
                "&expired_pay_time=" +
                target.expired_pay_time+'&type='+this.type
            });
          }
        }
      });
    },
    userName(e) {
      this.name = e.detail.value;
    },
    userMobile(e) {
      this.phone = e.detail.value;
    },
    textareaText(e, index) {
      this.dataJson.shop_orders.map((v, i) => {
        if (i == index) {
          v.user_remark = e.detail.value;
        }
      });
    },
    //店铺优惠查询
    getByShop(id) {
      this.$http.get("/marketing/firstOrder/getByShop/" + id).then((res) => {
        if (res && res.code == 200) {
          this.shopDiscounts = res.data;
        }
      });
    },
    //选完地址回选
    otherFun(object) {
      this.addressChose = true;
      if (!!object) {
        let dataJson = uni.getStorageSync("dataJson");
        dataJson.receipt_id = object.addressid;
        this.dataJson = dataJson;
        this.postData(dataJson);
      }
    },
    postData(dataJson) {
      this.$http.post(`/order/build`, dataJson).then((res) => {
        if (res && res.code == 200) {
          uni.setStorageSync("sureData", res.data);
          this.sureDataAll = res.data;
          let totaltNum = 0;
          res.data.shop_orders.forEach((res) => {
            totaltNum += res.goods_num;
          });
          this.sureData = res.data;
          this.totaltNum = totaltNum;
        }
      });
    },
    changeStatus(val) {
      this.status = val;
      if (val == 1) {
        this.dataJson.shipment_mode = 0;
      } else {
        this.dataJson.shipment_mode = 1;
      }
      this.postData(this.dataJson);
    },
  },
};
</script>
<style lang="scss" scoped>
.goHome{
/deep/ .uni-input-placeholder,/deep/ .uni-input-input{
    text-align: right;
    font-size: 30rpx;
}
.sex{
    color: #02331F;
}
}
</style>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.textarea {
  width: 100%;
  height: 160rpx;
}
.topStatus {
  height: 100rpx;
  background-color: #fff;
  position: fixed;
  z-index: 9;

  width: 100%;
  box-sizing: border-box;
  text {
    line-height: 100rpx;
    position: relative;
  }
  .active {
    font-weight: bold;
    color: #0B844A;
  }
  .active:after {
    width: 100%;
    height: 2px;
    background-color: #0B844A;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.courierAddress {
  background-color: #fff;
  padding: 36rpx 30rpx;
}
.goHome,
.listText {
  background-color: #fff;
}

.btnview {
  width: 300rpx;
  margin: 30rpx auto 0;
}
.carbox {
  padding: 0rpx 0 160rpx 0;
  .shopList {
    background-color: #fff;
    padding: 30rpx 30rpx 0;
  }
}
.changeTabtwo {
  padding: 130rpx 0 160rpx 0;
}
.rightText {
  justify-content: space-between;
  height: 200rpx;
}
.bottext,
.botPrice {
  width: 100%;
}

.bottext {
  margin-top: 36rpx;
}
.rightAddRes {
  width: 172rpx;
  height: 50rpx;
  border-radius: 8rpx;
  border: 1px solid #e5e5e5;
  .centertext {
    text-align: center;
  }
  .btnTag {
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    background-color: #dedede;
    font-size: 46rpx;
    color: #888;
  }
}

.btnWidth {
  width: 340rpx;
	background: #0B844A;
}
.botfixed {
  position: fixed;
  background-color: #fff;
  width: 100%;
  height: 138rpx;
  bottom: 0;
  left: 0;
  z-index: 9;
  padding: 0 30rpx;
  box-sizing: border-box;
}
</style>