123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362 |
- <template>
- <view class="warpbox">
- <view class="itembox">
- <view class="item_title">{{i18n['商品清单']}}</view>
- <view class="part_warp">
- <view class="part_item" v-for="(item,index) in partInfo" :key="index">
- <view class="partname">{{item.parts.name}}</view>
- <view class="partnum">{{i18n['编号']}}:{{item.parts.num}}</view>
- <view class="partinfo">
- <view class="parttext">{{i18n['单价']}}:¥{{item.parts.price}}</view>
- <view class="parttext">{{i18n['数量']}}:{{item.num}}</view>
- <view class="parttext">{{i18n['小计']}}:¥{{item.num * Number(item.parts.price)}}</view>
- </view>
- </view>
- <view class="part_total_money">{{i18n['合计']}}:¥{{totalMoney}}</view>
- </view>
- </view>
- <view class="itembox">
- <view class="item_title">{{i18n['描述信息']}}</view>
- <view class="fllow_area">
- <view class="area_head key">{{i18n['描述信息']}}</view>
- <textarea v-model="desc" class="textself" :placeholder="'('+i18n['必填']+')'+i18n['请输入描述信息']" placeholder-style="color:#999" />
- </view>
- </view>
-
- <view class="itembox">
- <view class="item_title">{{i18n['客户信息']}}</view>
- <view class="fllow_form">
- <view class="label key">{{i18n['公司名称']}}</view>
- <view class="form_right">
- <input type="text" :class="company ? 'valueActive' : '' " placeholder-style="color:#999999;font-size:24rpx" class="righttext" v-model="company"
- :placeholder="i18n['请输入公司名称']" />
- </view>
- </view>
- <view class="fllow_form">
- <view class="label key">{{i18n['联系人']}}</view>
- <view class="form_right">
- <input type="text" :class="name ? 'valueActive' : '' " placeholder-style="color:#999999;font-size:24rpx" class="righttext" v-model="name"
- :placeholder="i18n['请输入联系人姓名']" />
- </view>
- </view>
- <view class="fllow_form">
- <view class="label key">{{i18n['电话']}}</view>
- <view class="form_right">
- <input type="text" :class="mobile ? 'valueActive' : '' " placeholder-style="color:#999999;font-size:24rpx" class="righttext" v-model="mobile"
- :placeholder="i18n['请输入联系人手机号']" />
- </view>
- </view>
- <view class="info_warp">
- <view class="info_label">{{i18n['地址']}}</view>
- <view class="info_right">
- <view class="right_top">
- <pick-regions @getRegion="handleGetRegion">
- <view class="uni-input" :class="{valueActive:addrcity}">{{addrcity ? addrcity : i18n['请选择区域']}}</view>
- </pick-regions>
- </view>
- <view class="right_bot">
- <input type="text" v-model="addr" placeholder-style="color:#999999" :placeholder="i18n['请填写详细地址']" class="rightinput">
- </view>
- </view>
- </view>
- </view>
- <view class="button"@click="submit">{{i18n['提交订单']}}</view>
- <view style="height:100rpx;"></view>
- </view>
- </template>
- <script>
- import { netCartListnum, netSubOrder } from '@/api/api.js'
- import pickRegions from '@/components/pick-regions/pick-regions.vue'
-
- export default{
- components:{
- pickRegions
- },
- data() {
- return{
- ids:'',
- company:'',
- name:'',
- mobile:'',
- desc:'',
- addrcity:'',
- addr:'',
- partInfo:[],
- totalMoney:0
- }
- },
- computed:{
- i18n() {
- return this.$t("shopmall")
- }
- },
- onLoad(options) {
- this.ids = options.ids
- //获取 购物车 下单配件
- this.getPartInfo()
- },
- onShow() {
- uni.setNavigationBarTitle({
- title: this.i18n['订单详情']
- })
- },
- methods:{
- getPartInfo() {
- netCartListnum({ids:this.ids,limit:100}).then(res=>{
- this.partInfo = res.data.data
- this.handleMoney()
- })
- },
- handleMoney() {
- let data = this.partInfo
- let money = 0
- data.forEach(ele=>{
- money += ele.num * Number(ele.parts.price)
- })
- this.totalMoney = money
- },
- submit() {
- if(!this.desc) {
- uni.showToast({
- title:'请填写描述信息',
- icon:'none'
- })
- return
- }
- if(!this.company){
- uni.showToast({
- title:'请输入公司名称',
- icon:'none'
- })
- return
- }
- if(!this.name){
- uni.showToast({
- title:'请输入联系人',
- icon:'none'
- })
- return
- }
- if(!this.mobile){
- uni.showToast({
- title:'请输入联系人手机号',
- icon:'none'
- })
- return
- }
- if(!this.addrcity){
- uni.showToast({
- title:'请选择区域',
- icon:'none'
- })
- return
- }
- if(!this.addr){
- uni.showToast({
- title:'请填写详细地址',
- icon:'none'
- })
- return
- }
- let params = {
- ids:this.ids,
- desc:this.desc,
- name:this.name,
- company:this.company,
- mobile:this.mobile,
- addr:this.addr,
- addrcity:this.addrcity
- }
- netSubOrder(params).then(res=>{
- // #ifdef H5
- console.log(res.data)
- window.location.href = res.data
- // #endif
- })
- },
- // 获取选择的地区
- handleGetRegion(region){
- this.addrcity = region[0].name+region[1].name+region[2].name
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .itembox{
- width:690rpx;
- margin:0 auto 24rpx;
- background:#fff;
- border-radius: 20rpx;
- padding:24rpx;
- .item_title{
- padding-left:35rpx;
- padding-bottom:24rpx;
- border-bottom:1rpx solid #EDEDED;
- font-size:26rpx;
- color:#666666;
- position: relative;
- &::before{
- content:'';
- width:14rpx;
- height:35rpx;
- border-radius: 8rpx;
- background:#65ABF6;
- position: absolute;
- left:0;
- top:3rpx;
- }
- }
- }
- .fllow_area {
- background-color: #fff;
- padding: 24rpx;
- border-bottom: 1rpx solid #EAEAEA;
- .area_head {
- font-size: 24rpx;
- margin-bottom:15rpx;
- text {
- color: #f00;
- }
- }
- .textself {
- width: 600rpx;
- height: 230rpx;
- background: rgba(202, 202, 202, 0.2);
- box-sizing: border-box;
- padding: 24rpx;
- font-size: 24rpx;
- margin: 0 auto;
- border-radius: 20rpx;
- }
- }
-
-
- .ordertit{
- width: 750rpx;
- height: 60rpx;
- background: rgba(2, 135, 255, 0.1);
- padding:0 30rpx;
- font-size:26rpx;
- color:#0287FF;
- line-height: 60rpx;
- }
- .part_warp{
- .part_item{
- padding:30rpx 50rpx;
- border-bottom:1rpx solid #f5f5f5;
- .partname{
- font-size:28rpx;
- color:#333333;
- }
- .partnum{
- font-size:24rpx;
- color:#999999;
- margin:15rpx 0;
- }
- .partinfo{
- display: flex;
- justify-content: space-between;
- align-items: center;
- .parttext{
- font-size:24rpx;
- color:#999999;
- }
- }
- }
- .part_total_money{
- padding:20rpx 35rpx;
- text-align: right;
- font-size:28rpx;
- color:#65ABF6;
- }
- }
-
-
- .part_desc{
- border-top:10rpx solid #f5f5f5;
- padding:30rpx 50rpx;
- .desc_tit{
- font-size:28rpx;
- color:#333333;
- margin-bottom:20rpx;
- }
- .desc_text{
- .areabox{
- height:200rpx;
- width:100%;
- font-size:24rpx;
- color:#000;
- }
- }
- }
- .info_warp{
- padding:24rpx;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- border-bottom:1rpx solid #f5f5f5;
- .info_label{
- flex-shrink: 0;
- font-size:24rpx;
- color:#333333;
- width:100rpx;
- margin-right:30rpx;
- }
- .selfinfo{
- width:470rpx;
- font-size:24rpx;
- }
- .info_right{
- flex:1;
- .right_top{
- padding-right:24rpx;
- padding-bottom:26rpx;
- border-bottom:1rpx solid #f5f5f5;
- .uni-input{
- font-size:24rpx;
- color:#999999;
- text-align: right;
- }
- }
- .right_bot{
- box-sizing: border-box;
- padding-top:26rpx;
- .rightinput{
- width:450rpx;
- font-size:24rpx;
- color:#333;
- text-align: right;
- }
- }
- }
- }
- .fllow_form {
- display: flex;
- justify-content: space-between;
- border-bottom: 1rpx solid #EDEDED;
- padding: 24rpx;
- .label {
- font-size: 24rpx;
- color:#666;
- text {
- color: red;
- }
- }
- .form_right {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- color: #999;
- width: 450rpx;
- text-align: right;
- input{
- width: 450rpx;
- }
- .righttext {
- font-size: 24rpx;
- }
- }
- }
- </style>
|