front-end/hdApp/src/admin/part/confirm.vue

<template>
<view class="app-content">
  <view class="affirm-page">
    <view class="affirm-view overscroll">
      <form>
        <view class="module-com">
          <view class="commodity-view">
            <view class="commodity-list">
              <view class="commodity-item" v-for="(item, index) in selectList" :key="index">
                <image class="item-icon" :src="item.cover" alt="商品图" />
                <view class="item-info">
                  <view class="info-line">
                    <text class="item-name">{{ item.itemName }}</text>
                    <text class="item-price">
                      <text class="unit"></text>
                      <text class="price">
                        <text v-if="item.bigCount > 0">{{`${item.bigCount}`}}扎</text>
                        <text v-if="item.smallCount > 0">{{`${item.smallCount}`}}支</text>
                      </text>
                    </text>
                  </view>
                  <view class="info-line">
                    <text class="item-type"></text>
                    <text class="item-count">
                    </text>
                  </view>
                </view>
              </view>
            </view>
            <view class="summary-bar">
              <view class="operate-view" @click="gobackEvent">
                <text class="iconfont icongouwuche"></text>
                返回修改
              </view>
              <view class="describe-view">
                共{{ selectList.length }}种
              </view>
            </view>
          </view>
        </view>
        <!-- 登录信息 -->
        <view class="module-com input-line-wrap">

          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title">备注</view>
						<input type="text" v-model="form.remark" placeholder="选填"/>
					</tui-list-cell>
          
        </view>
      </form>
    </view>
    <view class="under-bar">
      <view class="price-view"></view>
      <button class="admin-button-com blue big" @click="affirmFormSubmit">提交</button>
    </view>

  </view>
</view>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppAvatarModule from "@/components/module/app-avatar";
import SimpleAddress from "@/components/plugin/simple-address";
import AppAreaSel from "@/components/app-area-sel";
import productMins from "@/mixins/product";
import appFormRadioBtn from "@/components/app-formRadio-btn";
import appAddressGroup from "@/components/app-address-group";
import appSendTime from "@/components/app-send-time";
import appFormSend from "@/components/app-form-send";
import { partItem } from "@/api/part";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "confirm",
  components: {
    TuiListCell,
    AppAvatarModule,
    SimpleAddress,
    AppAreaSel,
    appFormRadioBtn,
    appAddressGroup,
    appSendTime,
    appFormSend,
  },
  mixins: [productMins],
  data () {
    return {
      autoLoad: false,
      isBilling: false,
			payWayList:[{name:"微信",id:0},{name:"支付宝",id:1},{name:"现金",id:4},{name:"银行卡",id:5}],
			payWayindex:0,
      form: {
        debt: 1,
        shopId: "",
        shopName: "",
        receiveProvince: "",
        receiveCity: "",
        receiveFloor: "",
        receiveAddress: "",
        receiveLong: "",
        receiveLat: "",
        sendType: 2,
        sendSide: "2",
        sendDate: "",
        sendTime: "",
        sendCost: "",
        customId: "",
        product: "",
        remark:"",
        payWay:0,
        needPrint:1,
      },
      money: "",
      showCustomer: false,
			selectJobType: "part",
    };
  },
  onLoad (option) {
    if (!this.getMerchantInfo) {
      this.initMerchantInfo().then((data) => {
        uni.setNavigationBarTitle({
          title: data.name,
        });
      });
    } else {
      uni.setNavigationBarTitle({
        title: this.getMerchantInfo.name,
      });
    }
    this.courier(2);
    if(option.customId){
      this.form.customId = option.customId
    }
    if(option.customName){
      this.form.customName = option.customName
    }
  },
	onShow(){
		if(!this.$util.isEmpty(uni.getStorageSync("newClient"))){
			this.showCustomer = true;
		}
	},
	onUnload(){
			uni.removeStorageSync('newClient');
	},
  computed: {
    ...mapGetters(["getMerchantInfo", "getLoginInfo"]),
  },
  methods: {
    ...mapActions(["initMerchantInfo"]),
    init () {
      this._getDet();
    },
		payWayChange(e){
			let index = e.detail.value
			this.payWayindex = index
      this.form.payWay = this.payWayList[index].id
		},
    setPayWay(payWay){
      this.form.payWay = payWay
    },
    courier (type) {
      this.form.sendType = type;
      if (type === 2) {
        this.form.sendCost = "";
      } else if(type == 1){
        this.form.sendCost = this.money;
      }
    },
    sendCostBlur () {
      if (this.form.sendType === 1) {
        this.money = this.form.sendCost;
      }
    },
    _getDet () {
      let data = uni.getStorageSync("modifyShopB");
      if (this.$util.isEmpty(data)) return;
      Object.keys(this.form).forEach((i, index) => {
        this.form[i] = data[i];
      });
    },
    changeCustomerFn (info) {
      const product = this.selectList.map((ele) => {
        return {
          productId: ele.id,
          bigNum: ele.bigCount,
          smallNum: ele.smallCount,
          classId: ele.classId,
          itemId: ele.itemId,
        };
      });
      let params = {
        customId: info.id,
        product: JSON.stringify(product),
        province: info.province,
        city: info.city,
        address: info.address,
        floor: info.floor,
        long: info.long,
        lat: info.lat,
      };
      this.form.sendCost = '';
      this.form.customId = info.id;
      this.form.customName = info.name;
    },
    affirmFormSubmit () {
      let that = this
      let product = this.selectList.map((ele) => {
        return {
          productId: ele.id,
          bigNum: ele.bigCount,
          smallNum: ele.smallCount,
          classId: ele.classId,
          itemId: ele.itemId
        };
      });
      that.$util.confirmModal({content:'确认拆散？'},() => {
          partItem({product:JSON.stringify(product),remark:that.form.remark}).then((res) => {
            //删除记忆
            that.removeFromSaveDirect()
            const {data: { id, orderSn },} = res;
            that.pageTo({url: '/admin/part/result',type:2})
          });
      })
    },
    gobackEvent () {
      this.pageTo({url: '/admin/part/index',type:2})
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-button-com {
  margin-right: 20upx;
}
.affirm-page {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;

  .affirm-view {
    flex: 1;
    margin-bottom:90upx;
    padding: 20upx;
    background-color: #f0f2f6;

    .commodity-view {
      display: flex;
      flex-direction: column;
      .commodity-list {
        padding: 20upx;
        .commodity-item {
          display: flex;
          margin-bottom: 20upx;
          .item-icon {
            flex-shrink: 0;
            width: 140upx;
            height: 140upx;
          }
          .item-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            margin-left: 20upx;
            .info-line {
              margin-bottom: 20upx;
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              .item-name {
                color: #666;
                font-size: 28upx;
              }
              .item-price {
                color: #333;
                font-size: 22upx;
                .price {
                  font-size: 32upx;
                  font-weight: bold;
                }
              }
              .item-type {
                color: #999;
                font-size: 24upx;
              }
              .item-count {
                color: #666;
                font-size: 24upx;
              }
            }
          }
        }
      }
      .summary-bar {
        padding: 0 20upx;
        height: 90upx;
        display: flex;

        align-items: center;
        justify-content: space-between;
        border-top: 1upx solid #eeeeee;
        .operate-view {
          display: flex;
          align-items: center;
          color: #3385ff;
          font-size: 30upx;
          font-weight:bold;
          .iconfont {
            margin-right: 20upx;
            font-size: 40upx;
          }
        }
        .describe-view {
          display: flex;

          align-items: center;
          color: #333;
          font-size: 24upx;
          .price {
            font-weight: bold;
            font-size: 36upx;
          }
        }
      }
    }

    .module-com {
      background-color: #fff;
      margin-bottom: 20upx;
      border-radius: 10upx;
      overflow: hidden;
					.tab-box{
						padding: 10upx 30upx 30upx;
						.tab{
							width: 49%;
							height: 70upx;
							color: #a2a2a2;
							border: 1upx solid #dcdcdc;
							border-radius: 10upx;
							font-size: 28upx;
							font-weight: 700;
							&.active{
								color: #ff4d4d;
								border: 1upx solid #ff4d4d;
							}
						}
					}
      .member-wrap {
        .member-det {
          font-size: 24upx;
          margin-left: 20upx;
        }
      }
      .remark-wrap {
        align-items: flex-start;
        .remark {
          height: 240upx;
        }
      }
      // .tui-placeholder,
      // .tui-input {
      // 	padding-right: 30upx;
      // 	width: 100%;
      // 	text-align: right;
      // }
    }
  }
  .under-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20upx;
    position: fixed;
    bottom:0;
    /* 手机mobile屏幕小于1000px */
    @media screen and (max-width: 1100px) {
      width: 100%;
    }
    /* 收银台cashier屏幕大于1000px */
    @media screen and (min-width:1100px) {
      width: 40%;
    } 
    height: 100upx;
    background-color: #fff;

    box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
    .price-view {
      display: flex;
      align-items: center;
      font-size: 24upx;
      .price-title {
        color: #333;
      }
      .price-number {
        margin: 0 20upx;
        color: #ff2842;
        .large {
          font-size: 40upx;
        }
      }
    }
    .admin-button-com {
      width: 200upx;
    }
  }
}
</style>