Commit c316f9b8 authored by 黄奎's avatar 黄奎

111

parent d8fe7c27
<template>
<view style="position: relative;" class="view-box">
<view class="box">
<view class="box-img">
图片
</view>
<view class="box-bg">
<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="rules.StuName"
placeholder="请输入学员姓名" maxlength="5"/>
</view>
<view class="box-bg">
<view>性别</view>
<view class="xingbie">
<text v-for="(item, i) in goodsist" :key="i" @click="gende(item,i)"
:class="[index==i?'gender':'gender2'] ">{{item.name}}</text>
</view>
</view>
<view class="box-bg" @click="calendar()">
<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="rules.StuBirth"
placeholder="公历生日" />
<view>
<u-icon name="arrow" color="#9F9F9F" size="20"></u-icon>
</view>
</view>
<view class="box-bg">
<input type="number" class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="rules.StuTel"
placeholder="请输入手机号" maxlength="11" />
</view>
<view class="box-bg">
<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="rules.BaseCondition"
placeholder="就读学校" />
<view>
<u-icon @click="school()" name="arrow" color="#9F9F9F" size="20"></u-icon>
</view>
</view>
<view class="box-bg" @click="gradess()">
<input maxlength="0" readonly="readonly" class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="rules.DemandPoint"
placeholder="就读年级" />
<view>
<u-icon name="arrow" color="#9F9F9F" size="20"></u-icon>
</view>
</view>
<view class="box-bg" @click="community()">
<input maxlength="0" class="uni-input inputM" readonly="readonly" style='margin-left: 10px;margin-top: 5px;' v-model="rules.School_Id"
placeholder="报名校区" />
<view>
<u-icon name="arrow" color="#9F9F9F" size="20"></u-icon>
</view>
</view>
<view class="box-bg">
<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="rules.ConsultingResults"
placeholder="如何知道进阶思维" />
</view>
<!-- 日历弹窗 -->
<u-popup v-model="show" mode="bottom" length="100%">
<view>
<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
</view>
</u-popup>
</view>
<!-- 学校弹窗 -->
<u-popup v-model="show2" mode="right" length="80%">
<view class="school-bg">
<text>
<text class="school">选择就读学校></text>
</text>
</view>
<view class="search">
<u-search placeholder="请输入名称" v-model="keyword"></u-search>
</view>
<scroll-view scroll-y="true" style="height:100%;">
<view class="list" :class="[actuve==i?'list2':'']" v-for="(item, i) in schoollist" :key="i" @click="masklist(item.Content,i)">
<view>
{{item.Content}}
</view>
<view v-if="actuve==i">
<u-icon name="arrow" size="20"></u-icon>
</view>
</view>
</scroll-view>
</u-popup>
<!-- 年级弹窗 -->
<u-popup v-model="show3" mode="bottom" length="auto">
<scroll-view scroll-y="true" style="height:400rpx;">
<view v-for="(item, i) in DemandPoint" :key="i">
<view class="list" @click="grades(item.Content,i)">{{item.Content}}</view>
</view>
</scroll-view>
</u-popup>
<!-- 校区弹窗 -->
<u-popup v-model="show4" mode="right" length="80%">
<view class="school-bg">
<text>
<text class="school">选择校区></text>
</text>
</view>
<view class="search">
<u-search placeholder="请输入名称" v-model="keyword"></u-search>
</view>
<scroll-view scroll-y="true" style="height:100%;">
<view class="list" :class="[actuve2==i?'list2':'']" v-for="(item, i) in campus" :key="i" @click="masklist2(item,i)">
<view>
{{item.StuName}}
</view>
<view v-if="actuve2==i">
<u-icon name="arrow" size="20"></u-icon>
</view>
</view>
</scroll-view>
</u-popup>
<!-- 提交 -->
<view class="submit-box" @click="submit()">
<view class="submit-bo2">提交</view>
</view>
</view>
</template>
<script>
var testCmd = "";
var postMsg = {};
export default {
data() {
return {
u:{},
School_Id:'',//要传的校区id
schoollist:[],//学校
DemandPoint:[],//班级
campus:[],//校区
Type: '',
communitys:false,
actuve:-1,
actuve2:-1,
show: false, //日历
show2: false, //学校
show3:false,//年级
show4:false,//社区
mode: 'date',
rules: {
StuName: '',
StuSex:'0',
StuBirth: '',
BaseCondition: '',
DemandPoint: '',
School_Id:'',
StuTel:'',
ConsultingResults:''
},
goodsist: [{
name: '男',
id:'0',
},
{
name: '女',
id:"1"
}
],
index: 0
}
},
created() {
this.u = uni.getStorageSync("mall_UserInfo");
},
methods: {
// 提交表单
registered() {
let that = this;
testCmd = "/api/WeChatPublic/CreateStudent";
postMsg = {
OpenId:that.u.OpenId,// openId 是 [string] 查看
UnionId:that.u.Unoinid,
StuSex:that.rules.StuSex,// 学生性别 0男 1女 是 [string] 查看
StuName:that.rules.StuName,// 学生姓名 是 [string] 查看
StuBirth:that.rules.StuBirth,// 学生生日 是 [string] 查看
StuTel:that.rules.StuTel,// 手机号码 是 [string] 查看
BaseCondition:that.rules.BaseCondition,// 就读学校 是 [string] 查看
DemandPoint:that.rules.DemandPoint,// 班级 是 [string] 查看
ConsultingResults:that.rules.ConsultingResults,// 如何知道进阶思维 是 [string] 查看
School_Id:that.School_Id,// 校区 是 [string]
Group_Id:"100001"
};
that.requestJJSWAdmin(testCmd, postMsg,
(res) => {
if(res.data.Code==1) {
uni.showToast({
title: '成功',
icon:'exception',
duration:2000
});
} else {
uni.showToast({
title: res.data.Message,
position: 'bottom',
icon: 'none',
duration: 2000
});
}
}
);
},
initlist() {
let that = this;
that.requestJJSWAdmin(testCmd, postMsg,
(res) => {
if(postMsg.Type==1) {
that.schoollist = res.data.Data
} else if (postMsg.Type==2) {
that.DemandPoint = res.data.Data
}
else if (that.show4) {
that.campus = res.data.Data
}
}
);
},
submit() {
let patt = /^[1][3-9][\d]{9}/
if(this.rules.StuName=='') {
uni.showToast({
title: '请填写姓名',
position: 'bottom',
icon: 'none',
duration: 2000
});
} else if (this.rules.StuTel==''){
uni.showToast({
title: '请输入手机号',
position: 'bottom',
icon: 'none',
duration: 2000
});
} else if(!patt.test(this.rules.StuTel)) {
uni.showToast({
title: '请输入正确的手机号码',
position: 'bottom',
icon: 'none',
duration: 2000
});
}
else {
this.registered()
}
},
confirm(e) {
console.log(e);
this.show = false
this.rules.StuBirth = e.fulldate
},
gende(item, i) {
this.index = 1
this.rules.StuSex = item.id
},
calendar() {
this.show = true
this.$refs.calendar.open();
},
// 学校
school() {
testCmd = "/api/WeChatPublic/GetStuSchoolClass";
postMsg = {
Type: 1
};
this.initlist()
this.show2 = true
},
masklist(item,i) {
this.actuve = i
this.rules.BaseCondition = item
this.show2 = false
},
gradess() {
testCmd = "/api/WeChatPublic/GetStuSchoolClass";
postMsg = {
Type: 2
};
this.initlist()
this.show3 = true
},
// 年级
grades(item,i) {
this.rules.DemandPoint = item
this.show3 = false
},
community() {
testCmd = "/api/WeChatPublic/GetStuList";
postMsg = {
UnionId: "oV5Rm1J_MpkEVvE0VPEicwCDG1Zo"
};
this.initlist()
this.show4 = true
},
masklist2(item,i) {
this.actuve2 = i
this.rules.School_Id = item.StuName
this.School_Id = item.StuId
this.show4 = false
},
},
}
</script>
<style>
.uni-input{
margin-left: 0rpx !important;
}
.search{
margin-bottom: 20rpx;
}
.view-box{
padding-top: 40rpx;
background-color: #EEF1FA;
min-height: 100vh;
}
.submit-box{
margin-top: 50rpx;
width: 80%;
display: flex;
justify-content: center;
font-size: 22rpx;
color: #fff;
position: fixed;
bottom: 400rpx;
left: 50%;
transform: translate(-50%,0%);
background-color: #138BF9;
border-radius: 10rpx;
height: 60rpx;
align-items: center;
}
.list2{
color: blue;
}
.list{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1px #999;
height: 60rpx;
padding-left: 20rpx;
padding-right: 20rpx;
font-size: 24rpx;
}
.box {
width: 90%;
border-radius: 10rpx;
margin-top: 50rpx;
background: #FFFFFF;
padding-left: 20rpx;
padding-right: 20rpx;
margin: auto;
padding-bottom: 80rpx;
border-radius: 20rpx;
}
.school-bg{
background-color: #EEF1FA;
height: 50rpx;
display: flex;
align-items: center;
padding-left: 50rpx;
margin-bottom: 20rpx;
}
.xingbie {
width: 185rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.gender {
border: 10rpx;
background-color: #E5F3FE;
width: 80rpx;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
border-radius: 5rpx;
font-size: 22rpx;
}
.gender2 {
border: 10rpx;
background-color: #5455;
width: 80rpx;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
border-radius: 5rpx;
font-size: 22rpx;
}
.box-bg {
border-radius: 10rpx;
border: 1px solid #9F9F9F;
margin-bottom: 20rpx;
height: 60rpx;
line-height: 60rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
justify-content: space-between;
padding-right: 20rpx;
}
.box-img {
display: flex;
justify-content: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
</style>
<template>
<view class="goods">
<view class="u-skeleton" v-if="isExsitGoods">
<view class="u-skeleton-rect">
<!-- <u-swiper
:list="g.pic_url"
height="100"
unit="vw"
:interval="10000"
name="pic_url"
:border-radius="0"
@click="previewImage"
></u-swiper> -->
<swiper
indicator-dots
:autoplay="false"
:interval="1000"
style="height:100vw;"
>
<block v-for="(item, index) in g.pic_url" :key="index">
<swiper-item>
<video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item.pic_url"
:autoplay="false" loop muted show-play-btn :enable-progress-gesture="true"
:controls="true" :show-progress="true" :show-mute-btn="true" objectFit="cover"></video>
<image @click="previewImage(index)" style="width:100%;height:100%;" v-else :src="item.pic_url" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
<!-- TODO 分销价格未做 is_share_price -->
<view class="is_share" v-if="g.share > 0 && hideshare == false&&setting.is_show_korea==0" style="top:240px;">
<image
src="@/static/images/icon/WechatIMG424.png"
style="width: 20px; margin-left: 12px; opacity: 1;height: auto;"
mode="widthFix"
/>
<view
style="
display: flex;
flex-direction: column;
margin-left: 8px;
font-size: 11px;
color: #fff;
opacity: 1;
"
>
<Text>即刻分享赚</Text>
<Text>{{ g.share }}</Text>
</view>
<u-icon name="close" style='position: absolute;right: 4px;top: 12.5px;z-index: 999;' color="#fff" size="40" @click='goclose'></u-icon>
</view>
<view class="is_share" v-if="g.myBuyCommission > 0 && hideshare == false&&setting.is_show_korea==0">
<image
src="@/static/images/icon/WechatIMG424.png"
style="width: 20px; margin-left: 12px; opacity: 1;height: auto;"
mode="widthFix"
/>
<view
style="
display: flex;
flex-direction: column;
margin-left: 8px;
font-size: 11px;
color: #fff;
opacity: 1;
"
>
<Text>即刻购买省</Text>
<Text>{{ g.myBuyCommission }}</Text>
</view>
<u-icon v-if='g.share ==0' name="close" style='position: absolute;right: 4px;top: 12.5px;' color="#fff" size="40" @click='hideshare=true'></u-icon>
</view>
</view>
<view class="g-info">
<view class="g-name u-skeleton-rect">
<view
v-if="g.marketingLogo.iswords&&g.marketingLogo.iswords==1 && g.marketingLogo.words!=''"
class="Logo"
:style="{color: g.marketingLogo.wordsColor,
background:g.marketingLogo.wordsBack ,}"
>{{g.marketingLogo.words}}</view>
<image
v-if="g.marketingLogo.iswords&&g.marketingLogo.iswords==2&& g.marketingLogo.ico!=''"
mode="heightFix"
:src="g.marketingLogo.ico"
style=" height: 12px;margin-right: 5px"
/>
{{ g.name }}
</view>
<view class="g-price-box" v-if="setting.is_show_korea==0">
<view class="left">
<view class="price u-skeleton-rect" :style="{ color: mc }">
<u-tag v-if='g.price_min!=g.original_price' text="心动价" mode="light" size='mini' type="error" style='font-size: 12px;font-family: aa;margin-right: 10px;'/>
<text class="small"></text>
<text
class="numfont" v-if="g.form_id!=1"
>
{{ g.price_min == g.price_max ? g.price_min : g.price_min + '-' + g.price_max }}
</text>
<text class="numfont" v-if="g.form_id==1">
{{ g.price_min }}
</text>
<text class="small" v-if="g.form_id==1"></text>
</view>
<!-- TODO is_common_user_member_price 普通用户会员价 -->
<!-- TODO is_member_user_member_price 会员用户会员价 -->
<view class="sell u-skeleton-rect">
<text class="oprice" v-if="setting.is_underline_price == 1">原价:{{ g.original_price }}</text>
<text v-if="setting.is_sales == 1">已售出{{ g.sales }}{{ g.unit }}</text>
</view>
</view>
<view class="right u-skeleton-rect" @click="openShare" v-if="isAllowShare == 1">
<image src="@/static/images/icon/icon-share.png" class="share-icon" />
<text>分享</text>
</view>
</view>
<template v-if="setting.is_show_korea==1">
<view style="height:50px;margin:10px 10px 0 0;display:none;">
<view style="float:right;" @click="openShare" v-if="isAllowShare == 1">
<image src="@/static/images/icon/icon-share.png" style="width:20px;height:20px;" class="share-icon" />
</view>
</view>
<view class="koarea_Country" style="display:none;">
<view style="flex: 1;text-align: center;border-right:1px solid #F2F3F6;">
<text v-if="g.goods_country">{{g.goods_country}}</text>
</view>
<view style="flex: 1;text-align: center;border-right:1px solid #F2F3F6;"></view>
<view style="flex: 1;text-align: center;" v-if="g.cats&&g.cats.length>0">{{g.cats[0].CategoryName}}</view>
</view>
<view style="text-align: left;padding:15px 0;border-bottom:1px solid #F2F3F6;display:none;">
卖点:<text v-if="g.subname">{{g.subname}}</text>
</view>
<view style="text-align: left;border-bottom:1px solid #F2F3F6;padding:15px 0;display:flex;font-size:13px;color:#737373;">
<u-icon name="location" color="#D4D4D4" size="30"></u-icon>
地址:<text v-if="g.fatcode">{{g.fatcode}}</text>
</view>
<view style="display:flex;text-align: left;padding:10px;background-color: #F3F3F3;color:#404040;min-height:100px;line-height: 25px;font-size:13px;">
<text style="flex-shrink: 0;width:45px;">简介:</text><text v-if="g.goodsurl">{{g.goodsurl}}</text>
</view>
</template>
</view>
<view class="sku-box u-skeleton-rect" style="margin: 0;padding: 10px;" v-if="g.friendUrl!=null && g.friendUrl!=''&&setting.is_show_korea==0" @click="goCoiling(g.friendUrl)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodsCoiling.png" style="width: 100%;height: 68px;"/>
</view>
<view class="sku-box u-skeleton-rect" style="align-items: flex-start;" v-if="(g.goods_marketing_award.integral.title != '')|| (g.goods_marketing_award.PresentFXGradeMsg != '')|| g.freeShippingName != null && g.freeShippingName != '' && (g.fullMoneyPinkage > 0 || g.fullNumPinkage > 0)">
<view class="label" style="margin-top: 5px;">活动</view>
<view class="content" style="display: flex;flex-direction: column">
<view
style="display: flex;flex-direction: row;align-items: center;margin-bottom: 5px;"
v-if="g.goods_marketing_award.integral.title != ''"
>
<u-tag text="送积分" type="error" />
<text
style="margin-left: 5px; font-size: 12px;"
>{{ g.goods_marketing_award.integral.title }}</text>
</view>
<view
style="display: flex;flex-direction: row;align-items: center"
v-if="g.goods_marketing_award.PresentFXGradeMsg != ''"
@click="goVIP"
>
<u-tag text="送会员" type="error" />
<text
style="margin-left: 5px; font-size: 12px;"
>{{ g.goods_marketing_award.PresentFXGradeMsg }}</text>
</view>
<view
style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"
@click="goUrl(g.FreeShippingUrl)"
v-if="g.freeShippingName != null && g.freeShippingName != '' && (g.fullMoneyPinkage > 0 || g.fullNumPinkage > 0)"
>
<view
style="color: #fa3534;background: #fef0f0;padding: 12rpx 22rpx; font-size: 22rpx;margin-right: 5px;border: 1px solid #fde2e2;border-radius: 6rpx;"
>{{ g.freeShippingName != null ? g.freeShippingName : '' }}</view>
{{ g.fullMoneyPinkage > 0 && g.fullNumPinkage == 0 ? g.fullMoneyPinkage + '元包邮' : '' }}
{{ g.fullMoneyPinkage == 0 && g.fullNumPinkage > 0 ? g.fullNumPinkage + '件包邮' : '' }}
</view>
<!-- <view style="margin-top: 5px;" v-if="
g.goods_marketing_award.PresentFXGradeMsg == ''
&& g.goods_marketing_award.integral.title == '' &&
g.freeShippingName!=null && g.freeShippingName !='' &&(g.fullMoneyPinkage == 0 && g.fullNumPinkage==0)
">
<text>暂无活动</text>
</view>-->
</view>
</view>
<view class="sku-box u-skeleton-rect" style="align-items: flex-start;" v-if="sku.length > 0&&setting.is_show_korea==0">
<view class="label">选择</view>
<view class="content">
<view class="sku-chosen" @click="chosenSku">
<view class="sku">{{ currentSku.attr_list.length > 0 ? '已' : '请' }}选择 {{ sku }}</view>
<view class="arrow">
<u-icon name="arrow" :size="32" color="#111"></u-icon>
</view>
</view>
<view class="suk-item" style="flex-wrap: wrap;">
<template v-if="skuimage.length > 0">
<view
v-for="(x, i) in skuimage"
class="item img"
style="margin-bottom: 5px;"
:key="i"
>
<image :src="x" style="width: 100%; height: 100%;" />
</view>
<view
class="item"
v-if="g.attr_groups[0].attr_list.length > 1"
>{{ g.attr_groups[0].attr_list.length }}{{ g.attr_groups[0].attr_group_name }}可选</view>
</template>
<template v-else>
<template v-for="(x, i) in g.attr_groups[0].attr_list">
<view
class="item"
v-if="i < 5"
:key="i"
style="margin-bottom: 5px;"
>{{ x.attr_name }}</view>
</template>
<view
class="item"
v-if="g.attr_groups[0].attr_list.length > 1"
>共{{ g.attr_groups[0].attr_list.length }}种{{ g.attr_groups[0].attr_group_name }}可选</view>
</template>
</view>
</view>
</view>
<view class="sku-box u-skeleton-rect" v-if="g.sendArea&&g.sendArea!=''">
<view class="label">发货地</view>
<view class="content">{{g.sendArea }}</view>
</view>
<view class="sku-box u-skeleton-rect" v-if="setting.is_express == '1'&&setting.is_show_korea==0">
<view class="label">快递</view>
<view class="content">{{ g.express == '' ? '免运费' : '¥' + g.express }}</view>
</view>
<view
class="sku-box u-skeleton-rect"
style="margin-top: -10;"
v-if="g.goods_marketing.shipping != ''"
>
<view class="label">包邮</view>
<view class="content">{{ g.goods_marketing.shipping }}</view>
</view>
<view
class="sku-box u-skeleton-rect"
style="margin-top: -10;"
v-if="g.goods_marketing.limit != ''&&setting.is_show_korea==0"
>
<view class="label">限购</view>
<view class="content">{{ g.goods_marketing.limit }}</view>
</view>
<!-- 优惠 -->
<view class="goods-Discount" v-if="g.goodsPreferentialList.length>0">
<view class="discount-left">
优惠
</view>
<view class="discount-right">
<view v-for="(item,index) in g.goodsPreferentialList" :key="index" class="discount-item">
<view class="discount-type">
{{item.PriceDiscountTypeStr.slice(0,2)}}
</view>
{{item.PriceDiscountTypeStr}}{{item.PriceMoney}}%
</view>
</view>
</view>
<view class="sku-box u-skeleton-rect" v-if="comments.length == 0 && setting.is_comment == 1&&setting.is_show_korea==0">
<view class="label">暂无评论信息</view>
</view>
<view class="comment" v-if="comments.length > 0">
<view class="chead">
<u-section
:bold="false"
:sub-color="secondary"
:show-split="false"
:title="`商品评价(${comments.length})`"
sub-title="查看更多"
@click="clickCommentHandler"
font-size="24"
></u-section>
</view>
<view class="content">
<view class="u-box">
<view class="user">
<u-avatar :src="comments[0].UserPhotoPath" :size="50"></u-avatar>
<text style="margin-left: 10px;">{{ comments[0].UserName }}</text>
<u-rate
:current="comments[0].CommentScore"
active-color="#FA3534"
inactive-color="#b2b2b2"
active-icon="star"
inactive-icon="star-o"
size="20"
:disabled="true"
></u-rate>
</view>
<view class="timer">{{ comments[0].CreateDate }}</view>
</view>
<view class="ucontent">{{ comments[0].Content }}</view>
</view>
</view>
<u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent">商品详情</u-divider>
<view class="details">
<h-parse v-if="AppletID!=5" :content="detailContent" @navigate="clickDescription"></h-parse>
<!-- 甲鹤等于5 -->
<rich-text v-if="AppletID==5" :nodes="detailContent"></rich-text>
</view>
<template v-if="setting.is_show_korea==1">
<view style="width:100%;height:1px;border-top:1px solid #FFFFFF;margin:20px 0;"></view>
<view class="commontList" v-for="(item,index) in compentList" :key="index">
<view>
<img :src="item.UserPhoto" style="width:30px;height:30px;border-radius: 50%;" alt="">
</view>
<view style="width:100%;margin-left:10px;">
<view style="color:#000000;font-size:14px;margin-bottom:5px;">{{item.UserName}}</view>
<view style="color:#909399;font-size:13px;">{{item.Content}}</view>
</view>
<view @click="delCompent(item)" v-if="item.UserId==u.UserId">
<u-icon name="delete" color="red" size="40"></u-icon>
</view>
</view>
<view v-if="compentTotal>1" style="display: flex;justify-content: end;float:right;margin-bottom:20px;">
<view class="fenyeBtn" v-if="comListMsg.pageIndex>1" @click="goBefore">上一页</view>
<view class="fenyeBtn" v-if="comListMsg.pageIndex<compentTotal" @click="goAfter">下一页</view>
</view>
<view style="padding:10px;margin-top:30px;">
<view style="margin:10px 0;">留言(至少填写10个文字)</view>
<view>
<textarea placeholder="请输入评论信息" style="width: 94.5%;height: 100px;border:1px solid #d1d1d1;
padding:10px;background-color: #fff;" confirm-type='done' v-model="comentMsg.Content">
</textarea>
</view>
<view class="goodComentBtn" @click="submitCommit">提交留言</view>
</view>
</template>
<u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent">或许你喜欢</u-divider>
<view style="width: calc(100vw - 20px); margin-left: 10px; overflow: hidden;">
<goodlist :list="recommend"></goodlist>
</view>
<u-skeleton v-if="loading" :loading="true" :animation="true" bgcolor="#FFF"></u-skeleton>
<template v-if="setting&&setting.is_show_korea==0">
<goodsaction
v-if="!loading"
:good-name="g.name"
:cover-pic="g.cover_pic"
:favorite="g.favorite"
:good-id="id"
:total-stock="g.totalStock"
:status="g.status"
:formid='g.form_id'
@joincar="joinCar"
@buy="buy"
></goodsaction>
</template>
<template v-if="setting&&setting.is_show_korea==1">
<kotragoodsaction
v-if="!loading"
:good-name="g.name"
:cover-pic="g.pic_url"
:favorite="g.favorite"
:good-id="id"
:total-stock="g.totalStock"
:status="g.status"
@buy="buy">
</kotragoodsaction>
</template>
<goodsku
v-if="!loading && showSku"
border-radius="10"
v-model="showSku"
:mask-close-able="true"
:safe-area-inset-bottom="true"
:good="g"
:option-type="ot"
:skued="currentSku"
@close="closeSkuChosen"
></goodsku>
</view>
<u-empty text="没有找到商品,或商品已下架" mode="favor" v-if="!isExsitGoods"></u-empty>
<share
:good-id="id"
v-if="showShare"
:good-name="g.name"
:images="g.pic_url"
:advertising="g.advertising"
@close="closeShare"
></share>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
<coupon
v-if="showCoupons"
:coupon-message="couponMessage"
@goLook="goLook"
@closeBtn="closeBtn"
></coupon>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule("dom");
// #endif
import goodlist from "@/components/goods/list";
import goodsaction from "./components/goodsaction"; //购物车收藏
import kotragoodsaction from "./components/kotragoodsaction"; //韩国馆项目引用
import goodsku from "@/components/goods/goodsku";
import auth from "@/components/auth/index";
import coupon from "@/components/coupons/coupons";
import share from "./components/share/share";
import hParse from "@/components/u-parse/parse.vue";
export default {
data() {
return {
id: 0,
loading: true,
g: {},
imgs: [],
mc: "",
sku: "",
skuimage: [],
comments: [],
secondary: "",
detailContent: "",
recommend: [],
showSku: false,
ot: 0,
currentSku: {},
isExsitGoods: true,
pageTitle: "商品详情",
setting: {},
prevPage: "",
//自定义接手传递
opTionObj: {},
showShare: false,
msg: {
pageIndex: 1,
pageSize: 20,
GoodsId: 0,
CommentGrade: 0,
},
showAuth: false,
showCoupons: false,
couponMessage: "",
isAllowShare: 1,
u: {},
vipState: {},
Up:0,
hideshare:false,
comentMsg:{
GoodsId:0,
Content:''
},
comListMsg:{
pageIndex:1,
pageSize:5,
GoodsId:0
},
compentList:[] ,//评论列表
compentTotal:0,
curren:1,
AppletID:0,//小程序id
};
},
components: {
goodlist,
goodsaction,
kotragoodsaction,
goodsku,
auth,
coupon,
share,
hParse
},
onLoad(option) {
this.opTionObj = option;
console.log(option, "option");
if (option && option.id) {
this.id = option.id ? option.id : 29; //40887 59512 46942
} else {
this.id = option.GoodsId ? option.GoodsId : 29; //40887 59512 46942
}
if (option && option.custom_params) {
let custom_params = JSON.parse(decodeURIComponent(option.custom_params));
console.log(custom_params);
if (custom_params.user_id) {
uni.setStorageSync("pid", { pid: custom_params.user_id });
}
if (custom_params.Up) {//分享进入校园id
uni.setStorageSync("Up", { Up: custom_params.Up });
}
}
if (option && option.user_id) {
uni.setStorageSync("pid", { pid: option.user_id });
}
if (option && option.SmallShopId) {
uni.setStorageSync("SmallShopId", { SmallShopId: option.SmallShopId });
}
if (uni.getStorageSync("AnchorName")) {
//如果有主播名称了先清除
uni.removeStorageSync("AnchorName");
}
if (option && option.Up) {//分享进入校园id
uni.setStorageSync("Up", { Up: option.Up });
}
this.Up = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;//用于分享出去的参数
if (option && option.AnchorName) {
//当传过来有主播名称的时候 存入缓存
uni.setStorageSync("AnchorName", { AnchorName: option.AnchorName });
}
let basedata =uni.getStorageSync("basedata")?uni.getStorageSync("basedata"):'';
this.AppletID = basedata.home_pages.id?basedata.home_pages.id:0;
this.u = uni.getStorageSync("mall_UserInfo");
// if (!this.u) {
// this.u = {
// nickName: "未登录",
// avatarUrl: "",
// };
// this.showAuth = true;
// } else {
// this.init();
// this.initPage();
// }
this.init();
this.initPage();
this.getVipId();
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.setting = uni.getStorageSync("basedata").mall.setting;
wx.showShareMenu({
withShareTicket: true,
menus: ["shareAppMessage", "shareTimeline"],
});
this.comListMsg.GoodsId = this.id;
this.getCommitList();
},
onShareTimeline() {
setTimeout(() => {
console.log("分享调用");
this.getReceive();
}, 2500);
let uid = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo").UserId
: 0;
if(uid==0){
uid = uni.getStorageSync("pid")?uni.getStorageSync("pid").pid:0
}
let SmallShopId = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo").SmallShopId
: 0;
if(SmallShopId == 0){//如果微店id为0 去找所属微店id
SmallShopId = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo").UserSmallShopId
: 0;
}
let title =
this.g.app_share_title != null && this.g.app_share_title != ""
? this.g.app_share_title
: this.g.name;
let imageUrl =
this.g.app_share_pic != null && this.g.app_share_pic != ""
? this.g.app_share_pic
: this.g.pic_url[0].pic_url;
let id = this.id;
return {
title: title,
query: "id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId+ "&Up=" + this.Up,
imageUrl: imageUrl,
};
},
onShareAppMessage(res) {
setTimeout(() => {
console.log("分享调用");
this.getReceive();
}, 2500);
let u = uni.getStorageSync("mall_UserInfo");
let uid = u.UserId ? u.UserId : 0;
if(uid==0){
uid = uni.getStorageSync("pid")?uni.getStorageSync("pid").pid:0
}
let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
if(SmallShopId == 0){//如果微店id为0 去找所属微店id
SmallShopId = u.UserSmallShopId? u.UserSmallShopId:0
}
return {
title:
this.g.app_share_title != null && this.g.app_share_title != ""
? this.g.app_share_title
: this.g.name,
// path: "/pages/goods/goods?id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId,
path: "/pages/index/index?id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId+ "&Up=" + this.Up+'&JumpType=1',
imageUrl:
this.g.app_share_pic != null && this.g.app_share_pic != ""
? this.g.app_share_pic
: this.g.pic_url[0].pic_url,
};
},
mounted() {
setTimeout(() => {
this.initImages();
}, 3000);
},
methods: {
clickDescription(e) {
console.log(e);
},
initImages() {
// let that = this;
// let info = uni.createSelectorQuery().in(this);
// info
// .select(".goods")
// .boundingClientRect((data) => {
// console.log("得到布局位置信息" + JSON.stringify(data));
// })
// .exec();
// info
// .boundingClientRect(function (data) {
// console.log(data)
// })
// .exec();
// wx.createSelectorQuery()
// .selectAll("#goodpic")
// .fields({ rect: true })
// .exec(res => {
// console.log(res);
// });
},
reloadUserinfo() {
this.u = uni.getStorageSync("mall_UserInfo");
// this.showAuth = false;
this.init();
this.initPage();
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
},
initPage() {
let currentPages = getCurrentPages();
let u = "/" + currentPages[currentPages.length - 1].route;
let pages = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").bar_title
: [];
pages.forEach((x) => {
if (x.value == u) {
this.pageTitle = x.new_name ? x.new_name : x.name;
}
});
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
clickCommentHandler() {
uni.navigateTo({
url: "/pages/goods/comment-list?id=" + this.id,
});
},
getVipId() {
//获取会员ID
this.request2(
{
url: "/api/AppletGoods/GetAppletVipGradeInfo",
data: {},
},
(res) => {
if (res.data) {
this.vipState = res.data.VIPModel;
}
// this.initRecommend();
}
);
},
goVIP() {
//跳转到购买的页面查看
let GradeId = this.vipState.Id;
uni.navigateTo({
url: "/pages/share/buyInterest/index?showLook=1&GradeId=" + GradeId,
});
},
init() {
this.loading = true;
this.request2(
{
url: "/api/AppletGoods/GetAppletGoodsInfo",
data: {
GoodsId: this.id,
},
},
(res) => {
if (res.resultCode == 1) {
this.g = res.data.goods;
this.g.totalStock = 0;
this.g.attr.forEach((x) => {
this.g.totalStock += x.stock;
});
this.g.marketingLogo = JSON.parse(this.g.marketingLogo);
this.isAllowShare = res.data.goods.isAllowShare; //1为可以分享 2为不能分享
if (this.isAllowShare == 2) {
//隐藏分享的按钮
wx.hideShareMenu({
menus: ["shareAppMessage", "shareTimeline"],
});
}
this.g.pic_url.forEach((x) => {
this.imgs.push(x.pic_url);
});
if (this.g.attr_groups.length > 0) {
this.g.attr_groups.forEach((x, i) => {
if (i > 0) {
this.sku += ",";
}
this.sku += x.attr_group_name;
});
this.g.attr_groups[0].attr_list.forEach((x) => {
if (x.pic_url) {
this.skuimage.push(x.pic_url);
}
});
}
var richtext = this.g.detail;
// richtext = richtext.replace(
// /<img/g,
// '< img style="margin-top:-4px;width:100%"'
// );
this.detailContent = richtext;
if(this.AppletID==5){
this.detailContent = this.formatRichText(richtext)
}
this.loading = false;
//登录在调用评论接口
if (this.u) {
this.initComments();
this.setFootMarkInfo(res.data.goods.id);
}
this.initRecommend();
} else {
this.isExsitGoods = false;
}
}
);
},
formatRichText(html) {// 甲鹤小程序的时候 图片超出的处理
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
previewImage(i) {
uni.previewImage({
urls: this.imgs,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {
console.log(
"选中了第" +
(data.tapIndex + 1) +
"个按钮,第" +
(data.index + 1) +
"张图片"
);
},
fail: function (err) {
console.log(err.errMsg);
},
},
});
},
initComments() {
this.msg.GoodsId = this.id;
this.request2(
{
url: "/api/AppletOrder/GetAppletGoodsCommentPageList",
data: this.msg,
},
(res) => {
this.comments = res.data.pageData;
// this.initRecommend();
},
(err) => {
this.u = uni.getStorageSync("mall_UserInfo");
this.init();
this.initPage();
}
);
},
initRecommend() {
var UserPageType = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
this.request2(
{
url: "/api/AppletGoods/GetAppletGoodsRecommendListForZY",
data: {
RecommendType: 1,
GoodsId:this.id,
GoodsPageType:UserPageType
},
},
(res) => {
this.recommend = res.data.List;
}
);
},
setFootMarkInfo(id) {
this.request2(
{
url: "/api/AppletUser/SetUserFootMarkInfo",
data: {
GoodsId: id,
},
},
(res) => {}
);
},
joinCar() {
console.log("触发1");
this.showSku = true;
this.ot = 0;
},
buy() {
this.showSku = true;
this.ot = 1;
},
chosenSku() {
if (this.u) {
this.showSku = true;
this.ot = 2;
} else {
this.showAuth = true;
}
},
closeSkuChosen(obj) {
this.sku = "";
if (obj) {
this.currentSku = obj;
obj.attr_list.forEach((x, i) => {
if (i > 0) {
this.sku += ",";
}
this.sku += `"${x.attr_name}" `;
});
} else {
this.g.attr_groups.forEach((x, i) => {
if (i > 0) {
this.sku += ",";
}
this.sku += x.attr_group_name;
});
}
},
closeShare() {
this.showShare = false;
},
openShare() {
if (this.u) {
this.showShare = true;
} else {
this.showAuth = true;
}
},
getReceive() {
//分享进入调取领券接口
// 1-分享,2-购买并付款
this.request2(
{
url: "/api/AppletUser/ShareCoupon",
data: {
TriggerType: 1,
},
},
(res) => {
console.log(res, "res");
if (res.couponResultCode == 1) {
this.couponMessage = res.couponMessage;
this.showCoupons = true;
}
}
);
},
goLook() {
this.showCoupons = true;
uni.navigateTo({
url: "/pages/coupon/index/index",
});
},
closeBtn() {
this.showCoupons = false;
},
goUrl(url) {
uni.navigateTo({
url: url,
});
},
//点击跳转
startPlay(item){
uni.navigateTo({ url: '/pages/video/index?GoodsId='+this.id+'&VideoUrl='+item.pic_url })
},
goCoiling(url){//跳转发圈页面
uni.navigateTo({ url: url })
},
//提交留言
submitCommit(){
this.comentMsg.GoodsId = this.id;
if(this.comentMsg.Content==''){
uni.showToast({
title: "请输入评价内容",
icon:'none'
});
return;
}
if(this.comentMsg.Content.length<10){
uni.showToast({
title: "留言至少10个字!",
icon:'none'
});
return;
}
this.request2(
{
url: "/api/AppletGoods/SetGoodsLeavemessage",
data: this.comentMsg,
},
(res) => {
if (res.resultCode == 1) {
uni.showToast({
title: "评价成功"
});
this.comentMsg.Content='';
this.getCommitList();
}
}
);
},
//获取评论信息
getCommitList(){
this.request2(
{
url: "/api/AppletGoods/GetGoodsLeaveMessagePage",
data: this.comListMsg,
},
(res) => {
if (res.resultCode == 1) {
this.compentTotal = res.data.pageCount;
this.compentList =res.data.pageData;
}
}
);
},
//上一页
goBefore(){
this.comListMsg.pageIndex--;
if(this.comListMsg.pageIndex<1){
this.comListMsg.pageIndex=1
}
this.getCommitList();
},
//下一页
goAfter(){
if(this.comListMsg.pageIndex<this.compentTotal){
this.comListMsg.pageIndex++;
}
this.getCommitList();
},
//删除评论
delCompent(item){
this.request2(
{
url: "/api/AppletGoods/RemoveGoodsLeavemessage",
data: {Id:item.Id},
},
(res) => {
if (res.resultCode == 1) {
uni.showToast({
title: "删除成功"
});
this.comListMsg.pageIndex=1;
this.getCommitList();
}
}
);
},
goclose(){
this.hideshare=true;
this.$forceUpdate()
console.log(this.hideshare,'this.hideshare')
}
},
};
</script>
<style>
@font-face {
font-family: "oswald";
src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
}
.goods {
height: 100%;
background: #f5f5f5;
padding-bottom: 55px;
}
.goods .g-info {
background: #fff;
padding: 10px;
}
.goods .g-info .g-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 16px;
height: 45px;
}
.goods .g-info .g-price-box {
display: flex;
align-items: flex-end;
}
.goods .g-info .g-price-box .left {
flex: 1;
width: 1px;
}
.goods .g-info .g-price-box .left .price {
margin: 15px 0;
font-size: 24px;
font-weight: bold;
height: 31px;
}
.goods .g-info .g-price-box .left .price .small {
font-size: 16px;
}
.goods .numfont {
font-family: "oswald";
font-weight: unset;
}
.goods .g-info .g-price-box .left .sell {
font-size: 13px;
color: gray;
}
.goods .g-info .g-price-box .left .sell .oprice {
text-decoration: line-through;
margin-right: 12px;
}
.goods .g-info .g-price-box .right {
width: 30px;
margin-left: 20px;
height: 100%;
font-size: 12px;
color: #333;
}
.goods .g-info .g-price-box .right .share-icon {
width: 22px;
height: 22px;
margin-bottom: 12rpx;
}
.goods .sku-box {
margin: 10px 0;
background: #fff;
display: flex;
padding: 15px 10px;
align-items: center;
}
.goods .sku-box .label {
font-size: 12px;
color: gray;
margin-right: 15px;
}
.goods .details {
padding: 10px;
}
.goods .details image{
width: 100%;
}
.goods .sku-box .content {
width: 1px;
flex: 1;
color: #000;
font-size: 12px;
}
.goods .sku-box .content .sku-chosen {
display: flex;
align-items: center;
}
.goods .sku-box .content .sku-chosen .arrow {
width: 20px;
}
.goods .sku-box .content .sku-chosen .sku {
font-size: 12px;
width: 1rpx;
flex: 1;
}
.goods .sku-box .content .suk-item {
margin-top: 10px;
display: flex;
}
.goods .sku-box .content .suk-item .item {
margin-right: 5px;
background: #f5f5f5;
height: 24px;
line-height: 24px;
font-size: 12px;
padding: 0 5px;
border-radius: 3px;
overflow: hidden;
color: #999;
}
.goods .sku-box .content .suk-item .item.img {
padding: 0;
width: 24px;
}
.goods .comment {
margin: 10px 0;
background: #fff;
padding: 10px;
}
.goods .comment .chead {
padding-bottom: 10px;
border-bottom: 1px solid #f1f1f1;
}
.goods .comment .content {
display: flex;
flex-direction: column;
margin-top: 15px;
}
.goods .comment .content .u-box {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.goods .comment .content .u-box .user {
flex: 1;
font-size: 12px;
color: gray;
align-items: center;
display: flex;
}
.goods .comment .content .u-box .timer {
font-size: 12px;
color: gray;
text-align: right;
flex: 1;
}
.goods .comment .content .u-box .ucontent {
font-size: 12px;
color: #000;
margin-top: 10px;
}
.goods .detals {
padding: 10px;
background: #fff;
margin-top: 10px;
}
.goods .detals * {
max-width: 100%;
}
.goods .is_share {
width: 125px;
height: 45px;
border-top-left-radius: 22.5px;
border-bottom-left-radius: 22.5px;
background: #111;
opacity: 0.8;
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
top: 300px;
right: 0;
}
.goods .Logo {
padding: 1px 5px;
display: inline-block;
font-size: 22rpx;
margin-right: 5rpx;
border-radius: 4px;
}
.goods .screen-swiper {
min-height: 375upx;
}
.goods .screen-swiper image,
.goods .screen-swiper video{
width: 100%;
display: block;
height: 100%;
margin: 0;
pointer-events: none;
}
.koarea_Country{
display: flex;
justify-content: space-between;
padding-bottom:10px;
border-bottom:1px solid #F2F3F6;
}
.commontList{
display:flex;
padding:0 10px;
margin-bottom:10px;
}
.goodComentBtn{
width:100%;
height:40px;
text-align: center;
line-height: 40px;
background-color: #0b0052;
color:#fff;
margin-top:10px;
font-size:16px;
}
.fenyeBtn{
padding:3px 6px;
background-color: #00BFFF;
color:#fff;
font-size:12px;
margin:0 10px 20px 0;
}
.goods-Discount{
background-color: #FFFFFF;
box-sizing: border-box;
padding: 15rpx 30rpx;
display: flex;
}
.discount-left{
width: 80rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 800;
color: #111111;
box-sizing: border-box;
padding-top: 15rpx;
}
.discount-right{
flex-grow: 1;
}
.discount-item{
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
display: flex;
align-items: center;
margin-top: 15rpx;
margin-bottom: 15rpx;
}
.discount-type{
width: 52rpx;
box-sizing: border-box;
padding: 0 6rpx;
text-align: center;
background-color: #C5D6D3;
border-radius: 4rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #40766E;
margin-right: 20rpx;
}
</style>
<template>
<view class="ordersubmit">
<!-- @click="chosenAddress(ds.address.id)" -->
<view class="add-box" >
<!-- <view v-if="address.province && address.province != ''" class="add-info"> -->
<view v-if="address.province && address.province != ''" class="add-info" style="margin-top: 39px;">
<!-- <view class="address">{{ address.province + address.city + address.district }}</view> -->
<view class="area" @click="mask()">{{Thename}}</view>
<view class="address">
<!-- 切换学员 -->
<!-- <text style="margin-right: 10px;">{{ address.name }}</text>
<text>{{ address.mobile }}</text -->
</view>
</view>
<view v-else class="add-info">
<span style="position: relative;top: 16rpx;">请选择</span>
</view>
<view class="arrow" @click="chosenAddress()">
<u-icon name="arrow" size="32" color="#444"></u-icon>
</view>
</view>
<view class="pay">
<view>支付方式22</view>
<view style="text-align: right;">在线支付222</view>
</view>
<!-- <view class="discountbox" style="padding: 15px 0;margin-bottom: 12px;" v-if="ds.total_price >0">
<view class="filed" style="justify-content: space-between;">
<view class="left" style="display: flex;flex-direction: row;align-items: center;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/lvqian.png" style="width: 15px;height: 15px;margin-right: 3px;"></image>
找人代付
</view>
<u-checkbox-group>
<u-checkbox @change="checkboxChange" shape="circle" :active-color='mc' v-model="checked"></u-checkbox>
</u-checkbox-group>
</view>
</view> -->
<view class="goods" v-for="(x, i) in mchs" :key="i">
<view class="store">
<u-icon name="shop-o" size="30" color="#232323"></u-icon>
<text style="margin-left: 10px;">{{ x.mch.name }}</text>
</view>
<view class="store-list">
<template v-if="x.goods_list.length == 1">
<view class="goodbox" v-for="(y, yi) in x.goods_list" :key="yi">
<image :src="y.cover_pic" mode="aspectFill" class="image" />
<view class="goodinfo">
<view class="name">
<view
v-if="y.marketingLogo.iswords && y.marketingLogo.iswords==1&& y.marketingLogo.words!=''"
class="Logo" :style="{color: y.marketingLogo.wordsColor,
background:y.marketingLogo.wordsBack ,}">
{{y.marketingLogo.words}}
</view>
<image
v-if="y.marketingLogo.iswords&&y.marketingLogo.iswords==2&& y.marketingLogo.ico!=''"
mode="heightFix" :src="y.marketingLogo.ico"
style=" height: 12px;margin-right: 5px" />
{{ y.name }}
</view>
<view class="attr">已选择:
<span v-for="(item,index3) in y.specificationNameList" :ket="index3">
{{item}}
</span>
</view>
<view
v-if="y.freeShipping_Use==true && y.freeShippingDescription!=null && y.freeShippingDescription !=''"
style="height: 22px;line-height: 22px;font-size: 11px;color: #FF4048;background: #fdf6ec;padding: 0 5px;margin-bottom: 5px;display: inline-block;">
<text>{{y.freeShippingDescription}}</text>
</view>
<view
v-if="y.freeShipping_Use==false && y.freeShippingDescription!=null && y.freeShippingDescription !=''"
style="height: 22px;line-height: 22px;font-size: 11px;color: #909399;background: #f4f4f5;padding: 0 5px;margin-bottom: 5px;display: inline-block;">
<text>{{y.freeShippingDescription}}</text>
</view>
<view class="price">
<view class="left" :style="{ color: mc }">
<text class="small"></text>
<text>{{ y.goods_attr.price }}</text>
</view>
<view class="right">x{{ y.num }}</view>
</view>
<view v-if="y.address_disabled">
<u-tag size="mini" text="不在配送范围内" type="warning" />
</view>
</view>
</view>
</template>
<template v-else>
<view class="goodboxmore">
<view class="good-list">
<view style="white-space: nowrap;display: flex;flex-direction: row;">
<view v-for="(y, yi) in x.goods_list" :key="yi" class="item"
style="position: relative;">
<image :src="y.cover_pic" mode="aspectFill" class="item" />
<view v-if='y.address_disabled'
style="width: 100%;height: 20px;position: absolute;left: 0;bottom: 0;line-height: 20px;font-size: 10px;color: #ff9900;background: #fdf6ec;">
<text style="margin-left: 3px;">不在配送范围</text>
</view>
</view>
</view>
</view>
<view class="infos">
<view class="text">{{ x.goods_list.length }}</view>
<u-icon name="ellipsis" size="36" @click="showGoodListHandler(i)"></u-icon>
</view>
</view>
</template>
<template>
<view class="goodboxmore"
style="font-size: 12px;color: #000000;display: flex;flex-direction: row;flex-wrap: wrap;"
v-if="x.pinkageList.length>0 && x.goods_list.length>1 ">
已满足:
<view
style="height: 22px;line-height: 22px;font-size: 12px;color: #FF4048;background: #fdf6ec;padding: 0 5px;margin-left: 10px;margin-bottom: 5px;"
v-for="(y, yi) in x.pinkageList" :key="yi">
<text>{{y.Name}}</text>
</view>
</view>
</template>
<view class="peisong">
<view>配送</view>
<view style="text-align: right; padding-right: 5px;">{{ x.delivery.send_type_name }}</view>
<u-icon name="ellipsis" size="36" @click="showPeisongHandler(i)"></u-icon>
<peisong :list="x.delivery.send_type_list" :index="i" @close="changeSendTypeHandler"
:send-type="x.delivery.send_type" v-if="x.delivery.showDelivery"></peisong>
</view>
<view class="liuyan">
<u-field padding="0px" label-width="80" v-model="BuyerMessage" label="留言"
placeholder="建议留言前先与客服沟通确认"></u-field>
</view>
</view>
</view>
<view class="discountbox">
<view class="filed">
<view class="left">优惠券</view>
<view class="right">
<text class="content" v-if="mchs[0].coupon.user_coupon_id == 0 && couponList.length>0"
@click="showCouponHandler">选择优惠券</text>
<text class="content" v-else-if="couponList.length==0">暂无优惠券</text>
<text class="content" v-else :style="{ color: mc }"
@click="showCouponHandler">已优惠{{ mchs[0].coupon.coupon_discount }}元</text>
<u-icon name="ellipsis" size="36" v-if="couponList.length > 0" @click="showCouponHandler"></u-icon>
</view>
</view>
<view class="filed" v-if="IsDeposit==1 && mchs[0].deposit.can_use == true">
<view class="left">储蓄卡</view>
<view class="right">
<text class="content" v-if="mchs[0].deposit.use_deposit_id == 0 && cashCardList.length>0"
@click="showcashcardbtn">选择储蓄卡</text>
<text class="content" v-else-if="cashCardList.length==0">暂无储蓄卡</text>
<text class="content" v-else :style="{ color: mc }"
@click="showcashcardbtn">已抵扣{{ mchs[0].deposit.deposit_price }}元</text>
<u-icon name="ellipsis" size="36" v-if="cashCardList.length > 0" @click="showcashcardbtn"></u-icon>
</view>
</view>
<view class="filed" v-if="integral.can_use">
<view class="left">积分抵扣</view>
<view class="right">
<text class="content"
:style="{ color: secondary }">{{ `使用${integral.use_num}积分抵扣${integral.deduction_price}元` }}</text>
<u-checkbox-group>
<u-checkbox v-model="userInt" :active-color="mc" @change="changeUseInt" :icon-size="28"
shape="circle"></u-checkbox>
</u-checkbox-group>
</view>
</view>
</view>
<view class="discountbox">
<view class="filed">
<view class="left">商品金额</view>
<view class="right">
<text class="price">¥{{ goodPrice.toFixed(2) }}</text>
</view>
</view>
<view class="filed">
<view class="left">运费</view>
<view class="right">
<text class="price" :style="{ color: mc }">+¥{{ expressPrice.toFixed(2) }}</text>
</view>
</view>
<view class="filed">
<view class="left">优惠</view>
<view class="right">
<text class="price" :style="{ color: mc }">-¥{{ couponPrice.toFixed(2) }}</text>
</view>
</view>
<view class="filed" v-if="mchs.length>0&&mchs[0].is_deduction_commission">
<view class="left">佣金抵扣</view>
<view class="right">
<text class="price" :style="{ color: mc }">-¥{{ mchs[0].deduction_commission }}</text>
</view>
</view>
<view class="filed" v-if="integral.can_use">
<view class="left">积分抵扣</view>
<view class="right">
<text class="price"
:style="{ color: mc }">-¥{{ userInt ? integral.deduction_price.toFixed(2) : '0.00' }}</text>
</view>
</view>
<view class="filed" v-if="IsDeposit==1 && mchs[0].deposit.can_use == true">
<view class="left">储蓄卡抵扣</view>
<view class="right">
<text class="price" :style="{ color: mc }">-¥{{ cashPrice.toFixed(2) }}</text>
</view>
</view>
</view>
<view class="btton-box">
<view class="left" :style="{ color: mc }">
<text></text>
<text class="bold">{{ ds.total_price }}</text>
</view>
<view class="right">
<u-button :disabled="!address_enable" size="80" :ripple="true" shape="circle"
@click="ds.promptNoSuperiorFY== true ? submitModel():submitOrderHandler()" :custom-style="{
backgroundColor: mc,
height: '80rpx',
color: '#FFF',
fontSize: '14px'
}">
<u-loading mode="circle" style="margin-right: 5px;" v-if="submitOrder"></u-loading>
{{btntext}}
</u-button>
</view>
</view>
<coupon v-if="couponList.length > 0 && showCoupon" :list="couponList" :current="formdata.User_Coupon_Id"
@close="closeCouponHandler"></coupon>
<cashCard v-if="cashCardList.length > 0 && showcashcard" :list="cashCardList" :current="formdata.Use_Deposit_Id"
@close="closecashcard"></cashCard>
<view class="notOption" v-if="submitOrder"></view>
<good-list :list="goodData" v-if="showGoodList" @close="closeGoodListHandler"></good-list>
<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
<u-toast ref="uToast" />
<u-popup v-model="payExit" mode="center" :mask-close-able="false">
<view style="background:#fff;width:500rpx">
<view style="padding:10px 0 0 10px">提交失败</view>
<view style="text-align:center;padding-bottom:40rpx">
<view style="margin:80rpx 0">支付取消</view>
<span @click="exitPay"
style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
</view>
</view>
</u-popup>
<u-popup v-model="zhaoren" mode="center" :mask-close-able="false">
<view style="background:#fff;width:500rpx;font-family: aa;border-radius: 10px;">
<view
style="width: 88%;height: 35px;display: flex;flex-direction: row;align-items: flex-end;justify-content: flex-end;margin-left: 6%;"
@click="exitPay">
<u-icon name="close" size="40"></u-icon>
</view>
<view style="padding:10px 0 0 10px;text-align:center;">代付金额</view>
<view style="text-align:center;padding-bottom:40rpx;">
<view class="daif" :style="{'color': mc}">
<text style="margin-bottom: 2px;">
</text>
<span :style="{'font-size': '30px','color': mc}">{{ds.total_price}}</span>
</view>
<u-button :disabled="!address_enable" size="30" :ripple="true" shape="circle" open-type="share"
:custom-style="{
backgroundColor: mc,
width:'350rpx',
height: '80rpx',
color: '#FFF',
fontSize: '14px'
}">
发送给微信好友
</u-button>
</view>
</view>
</u-popup>
<u-modal v-model="showReviceModal" content="您的上级不存在,当前订单不会返佣,是否继续?" :show-cancel-button="true"
:show-title="false" @confirm="submitOrderHandler" :border-radius="20"></u-modal>
<!-- 切换学员弹窗 -->
<u-popup v-model="show" mode="center" length="90%">
<view style="background: #fff; border-radius: 10rpx;" class="mask-box">
<view class="mask-down">
<view class="mask-down2">切换学员</view>
<view @click="cloGood()"></view>
<u-icon name="cross" color="#9F9F9F" @click="cloGood()" size="40"> </u-icon>
</view>
<scroll-view scroll-y="true" style="height: 500rpx;">
<view>
<view class="mask-lit" v-for="(item, i) in namelist" :key="i" @click="masklist(item,i)">
<view>
<text class="mask-lit2"
:style="{ 'background-color': mc }">{{item.StuName.substr(0,1)}}</text>
<text :class="[actuve==i?'mask-lit3':'mask-lit33']">{{item.StuName}}</text>
</view>
<view v-if="actuve==i">
<u-icon name="arrow" size="40"></u-icon>
</view>
</view>
</view>
</scroll-view>
</view>
</u-popup>
</view>
</template>
<script>
import payCom from '@/components/pay/pay';
import peisong from '@/components/peisong/index';
import coupon from '@/components/coupon/index';
import cashCard from '@/components/coupon/cashCard'; //储蓄卡
import goodList from '@/components/goods/order-good-list';
export default {
components: {
payCom,
peisong,
coupon,
goodList,
cashCard
},
data() {
return {
JJSWStuId:"",
u:{},
Thename: '姓名',
actuve: 0,
namelist: [
],
show: false,
address_enable: '',
payExit: false,
payBtn: false,
checked: false,
btntext: '提交订单',
zhaoren: false,
zrName: '是好友就帮忙代付',
zrimg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhaoren.png',
formData: {
list: [{
mch_id: 0,
goods_list: [],
distance: 0,
remark: '',
order_form: [],
use_integral: 0,
user_coupon_id: 0,
use_deposit_id: 0,
}],
address_id: 0
},
formdata: {},
DeliveryMethod: '',
pageTitle: '填写订单',
address: {},
mchs: [],
mc: '',
ds: {
total_price: '0.00'
},
expressPrice: 0.0,
goodPrice: 0.0,
couponPrice: 0.0,
cashPrice: 0.0,
integral: {
can_use: false,
use: false,
use_num: 0,
deduction_price: 0
},
path: '',
secondary: '',
userInt: false,
loading: true,
couponList: [],
showCoupon: false,
submitOrder: false,
isLeave: false,
goodData: [],
showGoodList: false,
DetailList: [],
IsFormShoppingCart: 2,
adressInfo: {},
payInfo: {
OpenId: 'ow_7I5XC1-RGwwk8QANBmWKYKmOc',
OrderId: '',
OrderPayType: 1,
GoodsName: ''
},
ShoppingCartIdList: [],
BuyerMessage: '',
showReviceModal: false,
//抵扣金额
deduction_commission: 0,
cashCardList: [],
showcashcard: false,
onecoupon: true, //第一次进页面的时候选最优的优惠券
IsDeposit: 0, //是否开启储蓄卡功能
};
},
onLoad(option) {
this.u = uni.getStorageSync('mall_UserInfo')
if (option.goods) {
this.formData.list[0].goods_list = JSON.parse(decodeURIComponent(option.goods));
}
if (option.formData) {
this.formData = JSON.parse(decodeURIComponent(option.formData));
this.formdata = JSON.parse(decodeURIComponent(option.formData));
this.formdata.Use_Deposit_Id = 0; //储蓄卡ID 2021-4-8加的
}
if (option.IsFormShoppingCart) {
this.IsFormShoppingCart = option.IsFormShoppingCart;
}
if (option.ShoppingCartIdList) {
this.ShoppingCartIdList = JSON.parse(option.ShoppingCartIdList);
}
this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
this.IsDeposit = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').mall.setting.IsDeposit : 0
this.initPage();
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
},
onShow() {
this.init();
if (this.isLeave) {
uni.navigateBack({
delta: 1
});
}
this.studentslist()
},
methods: {
// 学员列表
studentslist() {
let testCmd='/api/WeChatPublic/GetStuList'
let postMsg = {
UnionId: this.u.Unoinid
}
this.requestJJSWAdmin(testCmd, postMsg,
(res) => {
this.namelist = res.data.Data
this.Thename = res.data.Data[0].StuName
this.JJSWStuId = res.data.Data[0].StuId
}
);
},
// 弹窗开关
mask() {
this.show = true
},
cloGood() {
this.show = false
},
masklist(item, i) {
this.actuve = i
this.Thename = item.StuName
this.JJSWStuId = item.StuId
},
onShareAppMessage() {
return {
title: this.zrName,
path: this.path,
imageUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhaoren.png'
};
},
exitPay() {
this.payExit = false;
uni.redirectTo({
url: "/pages/order/index/index?status=0",
});
},
closePay() {
this.payBtn = false;
this.payExit = true;
},
closeGoodListHandler() {
this.goodData = [];
this.showGoodList = false;
},
showGoodListHandler(i) {
this.goodData = this.mchs[i].goods_list;
this.showGoodList = true;
},
submitModel() {
this.showReviceModal = true;
},
// 提交订单
submitOrderHandler() {
let that = this;
if (that.adressInfo.Consignee == '') {
this.$refs.uToast.show({
title: '请选择收货信息!',
type: 'warning'
});
return;
}
if (!this.submitOrder) {
this.submitOrder = true;
uni.requestSubscribeMessage({
tmplIds: this.ds.template_message_list,
complete(res) {
that.submitOrder = false;
let form = {};
form.Consignee = that.adressInfo.Consignee;
form.Mobile = that.adressInfo.Mobile;
form.Province = that.adressInfo.Province;
form.City = that.adressInfo.City;
form.District = that.adressInfo.District;
form.ShoppingAddress = that.adressInfo.ShoppingAddress;
form.BuyerMessage = that.BuyerMessage;
form.DeliveryMethod = that.formdata.DeliveryMethod;
form.DetailList = that.DetailList;
form.User_Coupon_Id = that.formdata.User_Coupon_Id;
form.Use_Deposit_Id = that.formdata.Use_Deposit_Id;
form.DepositMoney = that.cashPrice; //储蓄卡抵扣金额
form.DepositFreightMoney = that.expressPrice; //储蓄卡抵扣运费
form.CouponMoney = that.couponPrice;
form.FreightMoney = that.expressPrice;
form.Income = that.ds.total_price;
form.IsFormShoppingCart = that.IsFormShoppingCart;
form.Use_Integral = that.formdata.Use_Integral;
form.ShoppingCartIdList = that.ShoppingCartIdList;
form.JJSWStuId = that.JJSWStuId;
form.AnchorName = uni.getStorageSync("AnchorName") ? uni.getStorageSync("AnchorName")
.AnchorName : ''; //直播名称
if (that.mchs && that.mchs.length > 0) {
that.deduction_commission = that.mchs[0].deduction_commission;
}
form.DeductionCommission = that.deduction_commission;
that.request2({
url: '/api/AppletOrder/SetAppletGoodsOrderInfo',
data: form
},
res => {
if (res.resultCode == 1) {
if (that.checked == true) {
that.zhaoren = true;
let u = uni.getStorageSync("mall_UserInfo");
let uid = u.UserId ? u.UserId : 0;
let Up = u.UserPageType ? u.UserPageType : 0;
let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
if (SmallShopId == 0) {
//如果微店id为0 去找所属微店id
SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
}
that.path = '/pages/index/index?OrderId=' + res.data.OrderId +
"&user_id=" + uid + "&Up=" + Up +
"&SmallShopId=" + SmallShopId + '&JumpType=4';
} else {
that.payInfo.OrderId = res.data.OrderId;
that.payInfo.total_price = that.ds.total_price;
if (that.formdata.Use_Deposit_Id != 0 && that.ds.total_price ==
0) { //如果使用了储蓄卡 就直接支付成功 跳入支付结果
uni.reLaunch({
url: '/pages/order-submit/pay-success?payInfo=' +
JSON.stringify(that.payInfo)
})
} else { //没使用的话 就弹出支付页面
that.payBtn = true;
}
}
} else {
that.$refs.uToast.show({
title: res.data.message,
type: 'warning'
});
}
uni.hideNavigationBarLoading();
}
);
}
});
}
},
closeCouponHandler(e) {
if (e != -1) {
this.formdata.User_Coupon_Id = e;
this.init();
}
this.showCoupon = false;
},
closecashcard(e) {
if (e != -1) {
this.formdata.Use_Deposit_Id = e;
this.init();
}
this.showcashcard = false;
},
showCouponHandler() {
this.showCoupon = true;
},
showcashcardbtn() {
this.showcashcard = true;
},
initCoupon() {
let ProductList = [];
this.DetailList = [];
this.mchs.forEach(item => {
item.goods_list.forEach(list => {
let obj = {
GoodsClassId: list.categoryIdList,
GoodsPrice: list.total_price,
ProductId: list.id
};
let obj1 = {
SpecificationSort: list.goods_attr.sign_id,
Number: list.num,
GoodsId: list.id,
SpecificationList: list.specificationNameList
};
ProductList.push(obj);
this.DetailList.push(obj1);
});
});
this.request2({
url: '/api/AppletCoupon/GetNoUseCouponList',
data: {
ProductList: ProductList
}
},
res => {
if (res.resultCode == 1) {
this.couponList = res.data;
if (this.onecoupon == true) {
this.onecoupon = false
this.couponList.map(x => {
if (x.isBest == 1) { //进去页面优先选择优惠券
this.formdata.User_Coupon_Id = x.id
this.init()
return
}
})
}
}
}
);
//获取用户储蓄卡
this.request2({
url: '/api/AppletCoupon/GetNoUseDeposit',
data: {}
},
res => {
if (res.resultCode == 1) {
this.cashCardList = res.data;
}
}
);
},
changeSendTypeHandler(e) {
let i = e.index;
let obj = this.mchs[i];
obj.delivery.showDelivery = false;
this.$set(this.mchs, i, obj);
this.$forceUpdate();
if (e && e.val) {
if (this.mchs[i].delivery.send_type != e.val) {
this.formdata.DeliveryMethod = e.val;
this.init();
}
}
},
showPeisongHandler(x) {
let obj = this.mchs[x];
obj.delivery.showDelivery = true;
this.$set(this.mchs, x, obj);
this.$forceUpdate();
},
chosenAddress(id) {
// uni.navigateTo({
// url: '/pages/address/address?form=ordersubmit&id=' + id
// });
uni.navigateTo({
url: '/pages/address/address2'
});
},
changeUseInt(e) {
this.userInt = e.value;
this.formdata.Use_Integral = this.userInt ? 1 : 0;
this.init();
},
initPage() {
let currentPages = getCurrentPages();
let u = '/' + currentPages[currentPages.length - 1].route;
let pages = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').bar_title : [];
pages.forEach(x => {
if (x.value == u) {
this.pageTitle = x.new_name ? x.new_name : x.name;
}
});
uni.setNavigationBarTitle({
title: this.pageTitle
});
},
init() {
this.loading = true;
this.request2({
url: '/api/AppletOrder/GetAppletGoodsSettlementInfoForZY',
data: this.formdata
},
res => {
this.loading = false;
if (res.resultCode == 1) {
this.address = res.data.address;
this.address_enable = res.data.address_enable;
this.mchs = res.data.mch_list;
this.mchs.forEach(x => {
x.goods_list.forEach(j => {
j.marketingLogo = JSON.parse(j.marketingLogo)
})
})
this.payInfo.GoodsName = this.mchs[0].goods_list[0].name.slice(0, 10);
this.formdata.DeliveryMethod = this.mchs[0].delivery.send_type;
this.ds = res.data;
console.log("this.ds ", this.ds)
this.expressPrice = 0.0;
this.goodPrice = 0.0;
this.couponPrice = 0.0;
this.cashPrice = 0.0;
if (res.data.total_price < 0) {
this.ds.total_price = 0
}
this.integral = {
can_use: false,
use: false,
use_num: 0,
deduction_price: 0
};
this.formatPrice();
this.initCoupon();
this.adressInfo = {
Consignee: this.address.name,
Mobile: this.address.mobile,
Province: this.address.province_id,
City: this.address.city_id,
District: this.address.district_id,
ShoppingAddress: this.address.detail
};
}
uni.hideNavigationBarLoading();
}
);
},
formatPrice() {
if (this.mchs) {
this.mchs.forEach(x => {
x.delivery.showDelivery = false;
if (x.delivery.send_type_list && x.delivery.send_type_list.length > 0) {
x.delivery.send_type_list.forEach(y => {
if (y.value == x.delivery.send_type) {
x.delivery.send_type_name = y.name;
}
});
}
//绑定商品价格 HK 2022-10-11新增 判断是否有绑定商品
let tempRelevancePrice = 0;
if (x.goods_list && x.goods_list.length > 0) {
x.goods_list.forEach(rootItem => {
if (rootItem.GoodsRelevanceList && rootItem.GoodsRelevanceList.length >
0) {
rootItem.GoodsRelevanceList.forEach(qitem => {
tempRelevancePrice += parseFloat(qitem.RelevancePrice);
console.log("tempRelevancePrice1", tempRelevancePrice)
})
}
})
}
console.log("tempRelevancePrice2", tempRelevancePrice)
//HK 2022-10-11 新增结束
this.goodPrice += parseFloat(x.total_goods_price) + parseFloat(tempRelevancePrice);
this.expressPrice += parseFloat(x.express_price);
this.couponPrice += parseFloat(x.coupon.coupon_discount || 0.0);
this.cashPrice += parseFloat(x.deposit.deposit_price || 0.0);
if (x.integral.can_use) {
this.integral.can_use = true;
this.integral.use = false;
this.integral.use_num += x.integral.use_num;
this.integral.deduction_price += parseFloat(x.integral.deduction_price);
}
});
}
},
formatAttr() {
this.mchs.forEach(x => {
this.userInt = x.integral.use;
x.goods_list.forEach(y => {
let attrStr = '';
y.attr_list.forEach((z, i) => {
if (i > 0) {
attrStr += ' ';
}
attrStr += z.attr_group_name + ' ' + z.attr_name;
});
y.attrStr = attrStr;
});
});
},
checkboxChange(val) {
if (val.value == true) {
this.btntext = '找人代付'
} else {
this.btntext = '提交订单'
}
},
}
};
</script>
<style>
.mask-lit {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.mask-lit33 {
font-size: 22rpx;
color: black;
}
.mask-lit3 {
font-size: 22rpx;
color: black;
font-weight: bold;
}
.mask-lit2 {
font-size: 24rpx;
display: inline-block;
margin-right: 20rpx;
border-radius: 50%;
/* background-color: red; */
width: 40rpx;
height: 40rpx;
/* display: flex; */
text-align: center;
line-height: 40rpx;
color: #FFF;
}
.mask-box {
padding: 40rpx;
}
.mask-down {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.mask-down2 {
font-weight: bold;
font-size: 32rpx;
}
button[disabled] {
color: rgba(0, 0, 0, .3) !important;
background-color: #f7f7f7 !important;
}
.ordersubmit {
min-height: 100vh;
padding: 0 5px;
background: #f6f6f6;
padding-bottom: 40px;
font-family: 'oswald';
}
.ordersubmit .add-box {
padding: 10px;
background: #fff;
display: flex;
align-items: center;
position: relative;
border-radius: 10px;
overflow: hidden;
margin-bottom: 12px;
}
.ordersubmit .add-box .arrow {
width: 16px;
height: 16px;
}
.ordersubmit .add-box .add-info {
width: 1px;
flex: 1;
min-height: 60px;
display: block;
padding: 10px 0;
}
.ordersubmit .add-box .add-info .address {
font-size: 13px;
color: #333;
margin-bottom: 5px;
}
.ordersubmit .add-box .add-info .area {
font-size: 18px;
color: #000;
margin-bottom: 5px;
font-weight: 600;
}
.ordersubmit .daif {
margin: 40rpx 0;
font-size: 20px;
display: flex;
flex-direction: row;
align-items: flex-end;
width: 100%;
justify-content: center;
}
.ordersubmit .add-box::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
content: '';
}
.ordersubmit .pay {
margin-bottom: 12px;
background: #fff;
border-radius: 10px;
padding: 10px;
align-items: center;
height: 50px;
color: #232323;
display: flex;
}
.ordersubmit .pay view {
flex: 1;
}
.ordersubmit .goods {
padding: 20px 10px;
margin-bottom: 12px;
background: #fff;
border-radius: 10px;
}
.ordersubmit .goods .store {
color: #000;
margin-bottom: 20px;
display: flex;
}
.ordersubmit .goodbox {
margin-bottom: 20px;
display: flex;
}
.ordersubmit .goodbox .image {
width: 200rpx;
height: 200rpx;
border-radius: 5px;
margin-right: 10px;
}
.ordersubmit .goodbox .goodinfo {
width: 1px;
flex: 1;
}
.ordersubmit .goodbox .goodinfo .name {
height: 18px;
font-size: 14px;
color: #232323;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 15px;
}
.ordersubmit .goodbox .goodinfo .attr {
height: 16px;
font-size: 12px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
.ordersubmit .goodbox .goodinfo .price {
display: flex;
align-items: center;
}
.ordersubmit .goodbox .goodinfo .price .left {
font-size: 20px;
font-family: 'oswald';
width: 1px;
flex: 1;
}
.ordersubmit .goodbox .goodinfo .price .left .small {
font-size: 13px;
}
.ordersubmit .goodbox .goodinfo .price .right {
color: #444;
font-size: 13px;
}
.ordersubmit .goodboxmore {
margin-bottom: 20px;
display: flex;
}
.ordersubmit .goodboxmore .good-list {
display: flex;
flex: 1;
overflow-x: auto;
}
.ordersubmit .goodboxmore .good-list .item {
width: 70px;
height: 70px;
border-radius: 5px;
margin-right: 10px;
}
.ordersubmit .goodboxmore .infos {
display: flex;
width: 80px;
}
.ordersubmit .goodboxmore .infos .text {
text-align: center;
font-size: 13px;
width: 57px;
margin-right: 5px;
line-height: 70px;
}
.ordersubmit .store-list .peisong {
margin-bottom: 20px;
display: flex;
align-items: center;
color: #333;
}
.ordersubmit .store-list .peisong view {
flex: 1;
}
.ordersubmit .store-list .peisong view:last-child {
text-align: right;
}
.ordersubmit .discountbox {
padding: 20px 0;
margin-bottom: 20px;
background: #fff;
border-radius: 10px;
display: block;
}
.ordersubmit .filed {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
padding: 0 10px;
}
.ordersubmit .filed:last-child {
margin-bottom: 0;
}
.ordersubmit .filed .left,
.ordersubmit .filed .right {
flex: 1;
color: #232323;
}
.ordersubmit .filed .left {
width: 120px;
}
.ordersubmit .filed .right {
text-align: right;
display: flex;
}
.ordersubmit .filed .right .icon {
width: 18px;
height: 18px;
}
.ordersubmit .filed .right .content {
flex: 1;
text-align: right;
margin-right: 5px;
}
.ordersubmit .filed .right .price {
font-size: 16px;
flex: 1;
text-align: right;
font-family: 'oswald';
}
.ordersubmit .btton-box {
height: 50px;
display: flex;
padding: 5px 10px;
border-top: 1px solid #f5f5f5;
position: fixed;
bottom: 0;
left: 0;
right: 0;
align-items: center;
background: #fff;
z-index: 3;
}
.ordersubmit .notOption {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
z-index: 2;
}
.ordersubmit .btton-box .left {
font-size: 16px;
flex: 1;
font-family: 'oswald';
}
.ordersubmit .btton-box .left .bold {
font-size: 24px;
}
.ordersubmit .btton-box .right {
width: 120px;
}
.ordersubmit .Logo {
padding: 1px 5px;
display: inline-block;
font-size: 22rpx;
margin-right: 5rpx;
border-radius: 4px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment