123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846 |
- <template>
- <view class="container">
- <view class="detail-desc">
- <view class="d-header">
- <text>基本信息</text>
- </view>
- <view class="c-list">
- <view class="c-row b-b">
- <text class="tit">承运人</text>
- <view class="con-list">
- <text>{{car.driver}}</text>
- </view>
- </view>
- <view class="c-row b-b">
- <text class="tit">承运人电话</text>
- <view class="con-list">
- <text>{{car.driverPhone}}</text>
- </view>
- </view>
- <view class="c-row b-b">
- <text class="tit">车牌号</text>
- <view class="con-list">
- <text>{{car.carNo}}</text>
- </view>
- </view>
- </view>
- <!-- <view class="d-header">
- <text>货源信息</text>
- </view>
- <view class="c-list">
- <view class="c-row b-b">
- <view class="tit">货源单号</view>
- <view class="con-list">
- <text >{{tranNo}}</text>
- </view>
- <button class="cu-btn bg-green shadow" @tap="showModal" data-target="RadioModal">选择</button>
- </view>
- <view class="c-row b-b">
- <text class="tit">剩余量</text>
- <view class="con-list">
- <text>{{exsitCount}}</text>
- </view>
- </view>
- <view class="c-row b-b">
- <text class="tit">价格</text>
- <view class="con-list">
- <input placeholder="请填写" name="input" @input="priceInput"></input>
- </view>
- </view>
- <view class="c-row b-b">
- <text class="tit">承运吨数</text>
- <view class="con-list">
- <input placeholder="请填写" type="mobile" name="input" @input="tranCountInput"></input>
- </view>
- </view>
- </view> -->
- </view>
- <!-- <view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
- <scroll-view scroll-y class="cu-dialog" style="height: 800rpx;" @tap.stop="">
- <radio-group class="block" @change="RadioChange">
- <view class="cu-list menu text-left">
- <view class="cu-item" v-for="(item,index) in tranInfo" :key="index">
- <label class="flex justify-between align-center flex-sub">
- <view class="flex-sub">{{item.tranNo}}(剩余量:{{item.total-item.tranCount}})</view>
-
- <radio class="round" :class="tranNo==item.tranNo?'checked':''" :checked="tranNo==item.tranNo?true:false"
- :value="index"></radio>
- </label>
- </view>
- </view>
- </radio-group>
- </scroll-view>
- </view> -->
- <!-- 底部操作菜单 -->
- <!-- <view class="page-bottom">
- <view class="action-btn-group">
- <button type="primary" class=" action-btn no-border buy-now-btn" @click="contactUs">联系我们</button>
- <button v-if="car.status == 2" type="primary" class=" action-btn no-border add-cart-btn" @click="tranNow">立即委派</button>
- <button v-else type="primary" class=" action-btn no-border add-cart-btn" >正在承运</button>
- </view>
- </view> -->
- <u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
- :content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
- :showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
- </view>
- </template>
- <script>
- import uniNumberBox from '@/components/uni-number-box.vue';
- import {
- mapState
- } from 'vuex';
- export default {
- components: {
- uniNumberBox
- },
- data() {
- return {
- isShowAlert: false,
- content: '您尚未登录,是否立即登录?',
- car: {
- id: '',
- tranNo: '',
- tranCount: 0,
- price: 0,
- driverPhone: '',
- },
- tranInfo: {},
- driver: '',
- driverPhone: '',
- price: 0,
- carNo: '',
- tranCount: 0,
- sendText: '获取验证码',
- sendDisabled: false,
- verifyCode: '',
- modalName: null,
- tranNo: '请选择货源单号',
- exsitCount: 0
- };
- },
- onShow() {},
- onLoad(options) {
- const that = this
- uni.showLoading({
- title: '正在加载',
- mask: true
- })
- that.$api.request('tran', 'getCarDetailInfo', {
- id: options.id
- }, failres => {
- that.$api.msg(failres.errmsg)
- uni.hideLoading()
- }).then(res => {
- that.car = res.data
- uni.hideLoading()
- })
- },
- computed: {
- ...mapState(['hasLogin', 'userInfo'])
- },
- methods: {
- RadioChange(e) {
- this.tranNo = this.tranInfo[e.detail.value].tranNo
- this.exsitCount = this.tranInfo[e.detail.value].total - this.tranInfo[e.detail.value].tranCount
- this.modalName = null
- },
- tranCountInput(e) {
- this.tranCount = e.detail.value
- },
- priceInput(e) {
- this.price = e.detail.value
- },
- hideModal(e) {
- this.modalName = null
- },
- showModal(e) {
- // if (!this.hasLogin||this.userInfo.phone == undefined) {
- // uni.showModal({
- // title: '提示',
- // content: '您尚未登录,是否立即登录?',
- // showCancel: true,
- // confirmText: '登录',
- // success: (e) => {
- // if (e.confirm) {
- // uni.navigateTo({
- // url: '/pages/public/login'
- // })
- // }
- // },
- // fail: () => {},
- // complete: () => {}
- // })
- // }
- // else{
- let that = this
- this.modalName = e.currentTarget.dataset.target
- this.$api.request('tran', 'getTranNoList', {
- senderPhone: that.userInfo.phone,
- }, failres => {
- that.$api.msg(failres.errmsg)
- uni.hideLoading()
- }).then(res => {
- let data = res.data
- console.log(data.tranInfo)
- //销售信息
- if (data.tranInfo) {
- that.tranInfo = data.tranInfo
- }
- uni.hideLoading()
- })
- // }
- },
- contactUs() {
- const that = this
- uni.makePhoneCall({
- // 手机号
- phoneNumber: that.car.driverPhone,
- // 成功回调
- success: (res) => {
- console.log('调用成功!')
- },
- // 失败回调
- fail: (res) => {
- console.log('调用失败!')
- }
- });
- },
- alertBtn() {
- uni.navigateTo({
- url: '/pages/public/login'
- })
- },
- cancelClick() {
- this.isShowAlert = false
- },
- tranNow() {
- let that = this
- if (!this.hasLogin) {
- this.isShowAlert = true;
- // uni.showModal({
- // title: '提示',
- // content: '您尚未登录,是否立即登录?',
- // showCancel: true,
- // confirmText: '登录',
- // success: (e) => {
- // if (e.confirm) {
- // uni.navigateTo({
- // url: '/pages/public/login'
- // })
- // }
- // },
- // fail: () => {},
- // complete: () => {}
- // })
- } else {
- if (!that.tranNo) {
- this.$api.msg('请选择货源单号');
- return;
- }
- if (!that.price) {
- that.$api.msg('请填写运价');
- return
- }
- if (!that.tranCount) {
- that.$api.msg('请填写承运吨数');
- return
- }
- if (that.tranCount > that.exsitCount) {
- that.$api.msg('承运吨数必须小于等于剩余量');
- return
- }
- that.car.tranCount = that.tranCount
- that.car.price = that.price
- that.car.tranNo = that.tranNo
- uni.showLoading({
- title: '正在提交',
- mask: true
- })
- that.$api.request('tran', 'pipei', that.car, failres => {
- uni.hideLoading()
- that.$api.msg(failres.errmsg);
- }).then(res => {
- uni.hideLoading()
- uni.showModal({
- title: '提示',
- content: "委派承运成功",
- showCancel: false,
- confirmText: '确定',
- success: () => {
- uni.navigateBack({
- delta: 2
- })
- }
- })
- // that.$api.prePage().refreshList(data, that.manageType);
- })
- }
- }
- },
- }
- </script>
- <style lang='scss' scoped>
- page {
- background: $page-color-base;
- padding-bottom: 160upx;
- }
- .icon-you {
- font-size: $font-base + 2upx;
- color:
- }
- .carousel {
- height: 722upx;
- position: relative;
- swiper {
- height: 100%;
- }
- .image-wrapper {
- width: 100%;
- height: 100%;
- }
- .swiper-item {
- display: flex;
- justify-content: center;
- align-content: center;
- height: 750upx;
- overflow: hidden;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- .c-list {
- font-size: $font-sm + 2upx;
- color: $font-color-base;
- background:
- .c-row {
- display: flex;
- align-items: center;
- padding: 20upx 30upx;
- position: relative;
- }
- .tit {
- width: 220upx;
- }
- .con {
- flex: 1;
- color: $font-color-dark;
- .selected-text {
- margin-right: 10upx;
- }
- }
- .bz-list {
- height: 40upx;
- font-size: $font-sm+2upx;
- color: $font-color-dark;
- text {
- display: inline-block;
- margin-right: 30upx;
- }
- }
- .con-list {
- flex: 1;
- display: flex;
- flex-direction: column;
- color: $font-color-dark;
- line-height: 40upx;
- text-align: right;
- padding-right: 20upx;
- }
- .red {
- color: $uni-color-primary;
- }
- }
- /* 评价 */
- .eva-section {
- display: flex;
- flex-direction: column;
- padding: 20upx 30upx;
- background:
- margin-top: 16upx;
- .e-header {
- display: flex;
- align-items: center;
- height: 70upx;
- font-size: $font-sm + 2upx;
- color: $font-color-light;
- .tit {
- font-size: $font-base + 2upx;
- color: $font-color-dark;
- margin-right: 4upx;
- }
- .tip {
- flex: 1;
- text-align: right;
- }
- .icon-you {
- margin-left: 10upx;
- }
- }
- }
- .eva-box {
- display: flex;
- padding: 20upx 0;
- .portrait {
- flex-shrink: 0;
- width: 80upx;
- height: 80upx;
- border-radius: 100px;
- }
- .right {
- flex: 1;
- display: flex;
- flex-direction: column;
- font-size: $font-base;
- color: $font-color-base;
- padding-left: 26upx;
- .con {
- font-size: $font-base;
- color: $font-color-dark;
- padding: 20upx 0;
- }
- .bot {
- display: flex;
- justify-content: space-between;
- font-size: $font-sm;
- color: $font-color-light;
- }
- }
- }
- /* 详情 */
- .detail-desc {
- background:
- margin-top: 16upx;
- width: 750upx;
- .d-header {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 80upx;
- font-size: $font-base + 2upx;
- color: $font-color-dark;
- position: relative;
- text {
- padding: 0 20upx;
- background:
- position: relative;
- z-index: 1;
- }
- &:after {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translateX(-50%);
- width: 300upx;
- height: 0;
- content: '';
- border-bottom: 1px solid
- }
- }
- }
- /* 规格选择弹窗 */
- .attr-content {
- padding: 10upx 30upx;
- .a-t {
- display: flex;
- image {
- width: 170upx;
- height: 170upx;
- flex-shrink: 0;
- margin-top: -40upx;
- border-radius: 8upx;
- ;
- }
- .right {
- display: flex;
- flex-direction: column;
- padding-left: 24upx;
- font-size: $font-sm + 2upx;
- color: $font-color-base;
- line-height: 42upx;
- .price {
- font-size: $font-lg;
- color: $uni-color-primary;
- margin-bottom: 10upx;
- }
- .selected-text {
- margin-right: 10upx;
- }
- }
- }
- .attr-list {
- display: flex;
- flex-direction: column;
- font-size: $font-base + 2upx;
- color: $font-color-base;
- padding-top: 30upx;
- padding-left: 10upx;
- }
- .item-list {
- padding: 30upx 0 0;
- display: flex;
- flex-wrap: wrap;
- text {
- display: flex;
- align-items: center;
- justify-content: center;
- background:
- margin-right: 20upx;
- margin-bottom: 20upx;
- border-radius: 100upx;
- min-width: 60upx;
- height: 60upx;
- padding: 0 20upx;
- font-size: $font-base;
- color: $font-color-dark;
- }
- .selected {
- background:
- color: $uni-color-primary;
- }
- }
- }
- /* 弹出层 */
- .popup {
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 99;
- &.show {
- display: block;
- .mask {
- animation: showPopup 0.2s linear both;
- }
- .layer {
- animation: showLayer 0.2s linear both;
- }
- }
- &.hide {
- .mask {
- animation: hidePopup 0.2s linear both;
- }
- .layer {
- animation: hideLayer 0.2s linear both;
- }
- }
- &.none {
- display: none;
- }
- .mask {
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
- background-color: rgba(0, 0, 0, 0.4);
- }
- .layer {
- position: fixed;
- z-index: 99;
- bottom: 0;
- width: 100%;
- min-height: 40vh;
- border-radius: 10upx 10upx 0 0;
- background-color:
- .btn {
- height: 66upx;
- line-height: 66upx;
- border-radius: 100upx;
- background: $uni-color-primary;
- font-size: $font-base + 2upx;
- color:
- margin: 30upx auto 20upx;
- }
- }
- @keyframes showPopup {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes hidePopup {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- @keyframes showLayer {
- 0% {
- transform: translateY(120%);
- }
- 100% {
- transform: translateY(0%);
- }
- }
- @keyframes hideLayer {
- 0% {
- transform: translateY(0);
- }
- 100% {
- transform: translateY(120%);
- }
- }
- }
- /* 底部操作菜单 */
- .page-bottom {
- position: fixed;
- left: 30upx;
- bottom: 30upx;
- z-index: 95;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 690upx;
- height: 100upx;
- background: rgba(255, 255, 255, .9);
- box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
- border-radius: 16upx;
- .p-b-btn {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: $font-sm;
- color: $font-color-base;
- width: 96upx;
- height: 80upx;
- .yticon {
- font-size: 40upx;
- line-height: 48upx;
- color: $font-color-light;
- }
- &.active,
- &.active .yticon {
- color: $uni-color-primary;
- }
- .icon-fenxiang2 {
- font-size: 42upx;
- transform: translateY(-2upx);
- }
- .icon-shoucang {
- font-size: 46upx;
- }
- }
- }
- /* 优惠券面板 */
- .mask {
- display: flex;
- align-items: flex-end;
- position: fixed;
- left: 0;
- top: var(--window-top);
- bottom: 0;
- width: 100%;
- background: rgba(0, 0, 0, 0);
- z-index: 9995;
- transition: .3s;
- .mask-content {
- width: 100%;
- min-height: 30vh;
- max-height: 70vh;
- background:
- transform: translateY(100%);
- transition: .3s;
- overflow-y: scroll;
- }
- &.none {
- display: none;
- }
- &.show {
- background: rgba(0, 0, 0, .4);
- .mask-content {
- transform: translateY(0);
- }
- }
- }
- /* 优惠券列表 */
- .coupon-item {
- display: flex;
- flex-direction: column;
- margin: 20upx 24upx;
- background:
- .con {
- display: flex;
- align-items: center;
- position: relative;
- height: 120upx;
- padding: 0 30upx;
- &:after {
- position: absolute;
- left: 0;
- bottom: 0;
- content: '';
- width: 100%;
- height: 0;
- border-bottom: 1px dashed
- transform: scaleY(50%);
- }
- }
- .left {
- display: flex;
- flex-direction: column;
- justify-content: center;
- flex: 1;
- overflow: hidden;
- height: 100upx;
- }
- .title {
- font-size: 32upx;
- color: $font-color-dark;
- margin-bottom: 10upx;
- }
- .time {
- font-size: 24upx;
- color: $font-color-light;
- }
- .right {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 26upx;
- color: $font-color-base;
- height: 100upx;
- }
- .price {
- font-size: 44upx;
- color: $base-color;
- &:before {
- content: '¥';
- font-size: 34upx;
- }
- }
- .tips {
- font-size: 24upx;
- color: $font-color-light;
- line-height: 60upx;
- padding-left: 30upx;
- }
- .circle {
- position: absolute;
- left: -6upx;
- bottom: -10upx;
- z-index: 10;
- width: 20upx;
- height: 20upx;
- background:
- border-radius: 100px;
- &.r {
- left: auto;
- right: -6upx;
- }
- }
- }
- .rich-img {
- width: 100%;
- height: auto;
- margin: 0;
- padding: 0;
- line-height: 0px;
- }
- button::after {
- border: none;
- }
- </style>
|