123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014 |
- <template>
- <mobile-frame>
- <view class="main">
- <view class="one">
- <scroll-view scroll-y="true" class="scroll-view">
- <view class="list-scroll-view">
- <view class="one_1" @tap="toChoose">
- <text class="localicon iconfont icon-dingweixiao"></text>
- <view class="other" v-if="address._id">
- <view class="name">
- <text>{{address.name}},</text>{{address.phone}}
- </view>
- <view class="other_1">
- <text>{{address.province}}</text><text>{{address.city}}</text>
- <text>{{address.area}}</text><text>{{address.address}}</text>
- </view>
- </view>
- <view class="address" v-else><text>请选择一个收货地址</text></view>
- <text class="iconfont icon-jiantouyou"></text>
- </view>
- <view class="one_2">
- <view class="list" v-for="(item,index) in orderList" :key="index">
- <view class="list_1">
- <view class="l">
- <text class="iconfont icon-shangdian"></text>
- <text>{{item.shop_name}}</text>
- </view>
- </view>
- <view class="list_2" v-for="(tag,index) in item.goods" :key="index">
- <view class="list_2_1">
- <view class="l">
- <image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''"
- mode=""></image>
- </view>
- <view class="c">
- <view class="name">
- {{tag.goods_name}}
- </view>
- <view class="Spec">
- 规格:{{tag.goodsSpec_name}}
- </view>
- </view>
- <view class="r">
- <view class="price" v-if="type=='0'">
- ¥{{tag.price}}
- </view>
- <view v-else class="price">
- ¥{{tag.group_sell_money}}
- </view>
- <view class="num">
- ×{{tag.num}}
- </view>
- </view>
- </view>
- <view class="list_2_2" v-if="tag.gift.length>0">赠品</view>
- <view class="list_2_3" v-if="tag.gift.length>0" v-for="(tags,indexx) in tag.gift"
- :key="indexx">
- <view class="left">
- <view class="name">
- {{tags.goods_name}}
- </view>
- <view class="Spec">
- 规格:{{tags.spec_name}}
- </view>
- <view class="Spec">
- 说明:{{tags.desc}}
- </view>
- </view>
- <view class="right">
- <view class="price">
- ¥{{tags.money||0}}
- </view>
- <view class="num">
- ×{{tags.num}}
- </view>
- </view>
- </view>
- </view>
- <view class="list_3">
- <view class="other">
- <view class="other_1">配送方式</view>
- <view class="other_2"><text class="iconfont icon-duihao"></text>快递配送</view>
- </view>
- <view class="other">
- <view class="other_1">运费</view>
- <view class="other_2" v-if="!item.freight_total==0">¥{{item.freight_total}}
- </view>
- <view class="other_2" v-else>包邮</view>
- </view>
- <view class="other">
- <view class="other_1">订单备注</view>
- <view class="other_3">
- <input type="text" v-model="item.remarks" placeholder="选填,可填写您与卖家达成一致的要求" />
- </view>
- </view>
- </view>
- </view>
- <view class="other" v-for="(item,index) in total_detail" :key="index">
- <view class="other_1">{{item.zh}}</view>
- <view class="other_2">¥{{item.money}}</view>
- </view>
- <view class="other" v-if="type=='0'">
- <view class="other_1">优惠劵</view>
- <view class="other_2" @click="toCoupon" v-if="couponList.length">
- {{coupon_name||'请选择优惠劵'}}
- </view>
- <view class="other_2" v-else>暂无优惠劵使用</view>
- </view>
- <view class="other" v-if="total>0&&actInfo" @tap="toAddGoods">
- <view class="other_1">加购商品</view>
- <view class="other_4">去加购></view>
- </view>
- <view class="act" v-if="plus_goods.length>0">
- <view class="act_1">您已选择商品为</view>
- <view class="act_2">
- <view class="plusList" v-for="(item,index) in plusList" :key="index">
- <image class="image" :src="item.file.length>0?item.file[0].url:item.file[0].url"
- mode="aspectFill"></image>
- <view class="name">{{item.goods_name}}</view>
- <view class="money">
- <text class="text_1">¥{{item.flow_money}}</text>
- <text class="text_2">¥{{item.config.plus_money||item.sell_money}}</text>
- </view>
- </view>
- <view class="bottom" @tap="toOpen">
- <text v-if="plus_goods.length>3"
- :class="[change==false?'iconfont icon-xiajiantou-copy':'iconfont icon-shangjiantou-copy']"></text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- <view class="two">
- <view class="two_1">
- <view>实付金额:</view>
- <view>¥{{goods_total}}</view>
- </view>
- <view class="two_2">
- <text @tap="toSubmit">提交订单</text>
- </view>
- </view>
- </view>
- <uni-popup ref="popup" background-color="#fff" type="bottom">
- <view class="popup" v-if="popup.type=='1'">
- <scroll-view scroll-y="true" class="scroll-view">
- <discount :Style="Style" :couponList="couponList" @toDiscount="toDiscount"></discount>
- </scroll-view>
- </view>
- </uni-popup>
- <uni-drawer ref="showRight" :mask="false" :width="width" mode="right" :mask-click="false">
- <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
- <view class="act">
- <view class="act_1">
- 订单已满<text>{{actInfo.plus_money}}</text>元,为你推荐优惠商品搭配
- </view>
- <view class="act_2">
- <checkbox-group @change="checkboxChange">
- <label class="actList" v-for="(item,index) in actList" :key="index">
- <image class="image" :src="item.file.length>0?item.file[0].url:item.file[0].url"
- mode="aspectFill"></image>
- <view class="name">
- <view class="some">{{item.goods_name}}</view>
- <view class="some">店铺:{{item.shop_name}}</view>
- <view class="some">规格:{{item.spec_name}}</view>
- </view>
- <view class="money">
- <text class="text_1">¥{{item.flow_money||0}}</text>
- <text class="text_2">¥{{item.config.plus_money||item.sell_money}}</text>
- </view>
- <view class="checkbox">
- <checkbox color="#FB1438" style="transform:scale(0.7)" :value="item._id"
- :checked="item.checked" />
- </view>
- </label>
- </checkbox-group>
- </view>
- <view class="bottom">
- <button @click="closeDrawer('define')" size="mini">确认加购</button>
- <button @click="closeDrawer('cancel')" size="mini">取消加购</button>
- </view>
- </view>
- </scroll-view>
- </uni-drawer>
- </mobile-frame>
- </template>
- <script>
- import discount from '@/components/discount/index.vue';
- export default {
- components: {
- discount
- },
- data() {
- return {
- // 设备平台信息
- system: {},
- popup: {
- type: '1'
- },
- Style: {
- btn: true
- },
- user: {},
- key: '',
- address: {},
- orderList: [],
- shop: [],
- goods_total: 0,
- // 金额明细
- total_detail: [],
- // 收货地址
- addressList: [],
- // 优惠劵
- couponList: [],
- coupon: [],
- // 优惠劵名称
- coupon_name: '',
- // 是否开团
- type: '0',
- // 团id
- group_id: '',
- // 分享人id
- inviter: '',
- // 活动商品
- actList: [],
- // 加价购活动
- actInfo: {},
- // 加购商品
- plus_goods: [],
- total: 0,
- page: 0,
- skip: 0,
- limit: 10,
- // 抽屉
- width: '100%',
- change: false,
- // 显示加购商品
- plus_total: 3,
- };
- },
- onLoad: function(e) {
- const that = this;
- uni.$on("id", async (id) => {
- let arr = await that.$api(`/address/${id}`, `GET`)
- if (arr.errcode == '0') {
- that.$set(that, `address`, arr.data)
- }
- })
- that.$set(that, `key`, e.key || '');
- that.$set(that, `group_id`, e.group_id || '');
- that.watchLogin()
- },
- computed: {
- plusList() { // 计算属性使用切片生成新数组
- let data = [];
- // 大于三条,使用切片,返回新数组
- if (this.plus_goods.length > 3) {
- data = this.plus_goods.slice(0, this.plus_total);
- return data;
- } else {
- // 否则使用原来数组,不进行切片处理
- data = this.plus_goods
- return data;
- }
- },
- },
- methods: {
- // 监听用户是否登录
- watchLogin() {
- const that = this;
- uni.getStorage({
- key: 'token',
- success: function(res) {
- let user = that.$jwt(res.data);
- that.$set(that, `user`, user);
- // 设备平台信息
- let config = that.$config;
- that.$set(that, `system`, config.system);
- that.search()
- },
- fail: function(err) {
- uni.navigateTo({
- url: `/pages/login/index`
- })
- }
- })
- },
- // 查询列表
- async search() {
- const that = this;
- let user = that.user;
- const res = await that.$api(`/address`, 'GET', {
- customer: user._id
- })
- if (res.errcode == '0') {
- that.$set(that, `addressList`, res.data.reverse());
- }
- const arr = await that.$api(`/order/toMakeOrder`, 'POST', {
- key: that.key
- })
- if (arr.errcode == '0') {
- // 查询活动商品列表
- let act;
- act = arr.data.actList.find(i => i.platform_act_type == '4')
- if (act) {
- that.searchAct(act);
- that.$set(that, `actInfo`, act);
- arr.data.orderTotal.push({
- zh: "加购总价",
- key: 'plus',
- money: 0
- })
- }
- // 分享人id
- that.$set(that, `inviter`, arr.data.inviter);
- // 地址
- that.$set(that, `address`, arr.data.address);
- // 订单
- that.$set(that, `orderList`, arr.data.goodsData);
- // 总价
- that.$set(that, `total_detail`, arr.data.orderTotal);
- that.$set(that, `type`, arr.data.type);
- this.computedTotal();
- // 优惠劵
- that.$set(that, `couponList`, arr.data.couponList);
- }
- },
- // 查询活动商品列表
- async searchAct(e) {
- const that = this;
- let platform_act = e.platform_act;
- let info = {
- skip: that.skip,
- limit: that.limit,
- platform_act: platform_act,
- goods_type: 'plus'
- }
- let res = await that.$api(`/goodsJoinAct`, 'GET', {
- ...info,
- })
- if (res.errcode == '0') {
- let list = [...that.actList, ...res.data];
- that.$set(that, `actList`, list)
- that.$set(that, `total`, res.total)
- }
- },
- // 使用优惠劵
- toDiscount(e) {
- const that = this;
- that.$set(that, 'coupon_name', e.name)
- that.coupon.push(e._id)
- that.$refs.popup.close();
- that.computedTotal();
- },
- // 选择收货地址
- toChoose() {
- const that = this;
- if (that.address?._id) {
- uni.navigateTo({
- url: `/pagesMy/address/index?type=${"shopping"}&id=${that.address._id}`
- })
- } else {
- uni.navigateTo({
- url: `/pagesMy/address/index?type=${"shopping"}`
- })
- }
- },
- // 选择优惠劵
- toCoupon() {
- const that = this;
- that.$set(that.popup, 'type', '1')
- that.$set(that, 'coupon', [])
- that.$refs.popup.open();
- },
- // 选择活动商品
- checkboxChange(e) {
- const that = this;
- var actList = that.actList,
- values = e.detail.value;
- for (var i = 0, lenI = actList.length; i < lenI; ++i) {
- const item = actList[i]
- if (values.includes(item._id)) that.$set(item, 'checked', true)
- else that.$set(item, 'checked', false)
- }
- },
- // 选择加购产品
- toAddGoods() {
- const that = this;
- that.$set(that, 'plus_goods', [])
- that.$refs.showRight.open();
- },
- // 关闭抽屉
- closeDrawer(e) {
- const that = this;
- if (e == 'cancel') {
- for (let val of that.actList) {
- if (val.checked == true) val.checked = false
- }
- for (let arr of that.total_detail) {
- if (arr.key == 'plus') arr.money = 0
- }
- that.$set(that, 'plus_goods', []);
- that.computedTotal();
- that.$refs.showRight.close();
- } else {
- // 选购中商品
- let plus_goods = that.actList.filter(item => item.checked == true)
- if (plus_goods) {
- let plus_total = 0;
- for (let arr of that.total_detail) {
- if (arr.key == 'plus') {
- for (let val of plus_goods) {
- if (val.config.plus_money) plus_total = that.$plus(plus_total, val.config.plus_money)
- else plus_total = that.$plus(plus_total, val.sell_money)
- }
- arr.money = plus_total
- }
- }
- }
- that.$set(that, 'plus_goods', plus_goods);
- that.computedTotal();
- that.$refs.showRight.close();
- }
- },
- // 显示
- toOpen() {
- const that = this;
- if (that.plus_goods.length > that.plus_total) {
- // 每次点击加三条
- that.plus_total += 3;
- that.$set(that, 'change', true);
- } else {
- that.$set(that, `plus_total`, 3)
- that.$set(that, `change`, false)
- }
- },
- // 分页
- toPage() {
- const that = this;
- let list = that.actList;
- let actInfo = that.actInfo;
- let limit = that.limit;
- if (that.total > list.length) {
- uni.showLoading({
- title: '加载中',
- mask: true
- })
- let page = that.page + 1;
- that.$set(that, `page`, page)
- let skip = page * limit;
- that.$set(that, `skip`, skip)
- that.searchAct(actInfo);
- uni.hideLoading();
- }
- },
- // 提交订单
- async toSubmit() {
- const that = this;
- let system = that.system;
- if (that.address) {
- let obj = {
- address: that.address,
- goods: that.orderList,
- total_detail: that.total_detail,
- coupon: that.coupon,
- type: that.type,
- inviter: that.inviter,
- plus_goods: that.plus_goods
- }
- if (that.group_id) obj.group = that.group_id;
- // 创建订单
- let p1 = await that.$api(`/order`, 'POST', obj);
- if (p1.errcode == '0') {
- if (system.uniPlatform == "mp-weixin") {
- // 微信支付
- uni.showLoading({
- title: '加载中'
- })
- // 支付信息
- let p2 = await that.$api('/pay/toPayOrder', 'POST', {
- order_id: p1.data,
- type: '0'
- })
- if (p2.errcode == '0' && p2.data.paySign) {
- uni.requestPayment({
- "provider": "wxpay",
- ...p2.data,
- success: async function(res) {
- // 获取团信息
- let p3 = await that.$api('/group/getGroup', 'GET', {
- order_id: p1.data,
- })
- if (p3.errcode == '0') {
- uni.hideLoading();
- if (p3.data) {
- uni.reLaunch({
- url: `/pagesHome/group/share?id=${p3.data}`
- })
- } else {
- uni.reLaunch({
- url: `/pagesMy/order/index?status=${'1'}`
- })
- }
- } else {
- uni.showToast({
- title: p3.errmsg,
- icon: 'none'
- })
- }
- },
- fail: function(err) {
- uni.showToast({
- title: `支付失败`,
- icon: 'none'
- })
- uni.hideLoading();
- uni.reLaunch({
- url: `/pagesMy/order/index?status=${'0'}`
- })
- }
- })
- } else {
- uni.showToast({
- title: p2.errmsg,
- icon: 'none'
- })
- }
- } else if (system.uniPlatform == "app") {
- uni.requestPayment({
- provider: 'alipay',
- orderInfo: 'orderInfo',
- success: function(res) {
- console.log('success:' + JSON.stringify(res));
- },
- fail: function(err) {
- console.log('fail:' + JSON.stringify(err));
- }
- });
- } else {
- uni.showToast({
- title: `平台不支持支付`,
- icon: 'none'
- })
- }
- } else {
- uni.showToast({
- title: p1.errmsg,
- icon: 'none'
- })
- }
- } else {
- uni.showToast({
- title: `没有收货地址`,
- icon: 'none'
- })
- }
- },
- // 计算优惠券
- async computedTotal() {
- const total_detail = this.total_detail;
- let total = 0;
- for (let val of total_detail) total = this.$plus(total, val.money)
- if (this.coupon.length > 0) {
- let discount = 0;
- for (const coupon of this.coupon) {
- const r = this.couponList.find(f => f._id === coupon)
- if (!r) continue;
- const {
- discount_config,
- discount_type
- } = r;
- if (discount_type === 'min') {
- const min = discount_config.min;
- discount = this.$plus(discount, min)
- } else if (discount_type === 'discount') {
- const min = discount_config.min || 0;
- let discount_money = 0;
- const max = discount_config.max || 0;
- // TODO 现在是平台发放的优惠券,所以可以直接用总价*折扣,如果是店铺的折扣券,则需要将金额分开,对应店铺计算折扣
- // const dm = min / 10 * total;
- const dm = this.$multiply(this.divide(min, 10), total)
- if (max !== 0) {
- if (max > dm) discount_money = dm;
- else discount_money = max
- }
- discount += discount_money
- }
- }
- total = this.$minus(total, discount)
- }
- if (total >= 0) {
- this.$set(this, `goods_total`, total);
- } else {
- uni.showToast({
- title: `实付金额不能为负数 不能使用该优惠劵`,
- icon: 'none'
- })
- }
- }
- }
- }
- </script>
- <style lang="scss">
- .main {
- display: flex;
- flex-direction: column;
- width: 100vw;
- height: 100vh;
- .one {
- position: relative;
- flex-grow: 1;
- background-color: var(--f1Color);
- .one_1 {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100vw;
- padding: 2vw;
- border-bottom: 1vw dashed var(--fcColor);
- .address {
- flex-grow: 1;
- margin: 0 0 0 2vw;
- font-size: var(--font14Size);
- color: var(--f85Color);
- }
- .iconfont {
- font-size: var(--font20Szie);
- }
- .other {
- width: 82vw;
- padding: 0 2vw;
- .name {
- font-size: var(--font16Size);
- }
- .other_1 {
- font-size: var(--font14Size);
- color: var(--f85Color);
- text {
- margin: 0 1vw 0 0;
- }
- }
- }
- }
- .one_2 {
- .list {
- width: 100vw;
- margin: 2vw 0;
- .list_1 {
- padding: 2vw;
- background-color: var(--mainColor);
- border-bottom: 0.1vw solid var(--fcColor);
- text {
- padding: 0 0 0 1vw;
- }
- }
- .list_2 {
- padding: 2vw;
- background-color: var(--mainColor);
- .list_2_1 {
- display: flex;
- .l {
- width: 20vw;
- .image {
- width: 100%;
- height: 20vw;
- border-radius: 5px;
- }
- }
- .c {
- width: 60vw;
- padding: 0 2vw;
- .Spec {
- font-size: var(--font12Size);
- color: var(--f85Color);
- }
- }
- .r {
- width: 15vw;
- text-align: right;
- }
- }
- .list_2_2 {
- padding: 0 1vw 1vw 0;
- font-size: var(--font14Size);
- }
- .list_2_3 {
- display: flex;
- justify-content: space-between;
- border: 1px solid var(--fcColor);
- border-radius: 5px;
- margin: 0 0 1vw 0;
- padding: 1vw;
- .left {
- .name {
- font-size: 14px;
- }
- .Spec {
- font-size: var(--font12Size);
- color: var(--f85Color);
- }
- }
- }
- }
- .list_3 {
- width: 96vw;
- padding: 2vw;
- background-color: var(--mainColor);
- .other {
- display: flex;
- justify-content: space-between;
- border-bottom: 0.1vw solid var(--fcColor);
- margin: 0 0 2vw 0;
- padding: 2vw 0;
- .other_1 {
- font-size: var(--font16Size);
- color: var(--f85Color);
- }
- .other_3 {
- flex-grow: 1;
- margin: 0 0 0 2vw;
- font-size: var(--font12Size);
- }
- text {
- padding: 0 1vw 0 0;
- font-size: var(--font20Szie);
- }
- }
- }
- }
- .other {
- display: flex;
- justify-content: space-between;
- background-color: var(--mainColor);
- border-bottom: 0.1vw solid var(--fcColor);
- width: 96vw;
- padding: 2vw;
- .other_1 {
- font-size: var(--font16Size);
- color: var(--f85Color);
- }
- .other_3 {
- flex-grow: 1;
- margin: 0 0 0 2vw;
- font-size: var(--font12Size);
- }
- .other_4 {
- color: var(--fFB1Color);
- }
- text {
- padding: 0 1vw 0 0;
- font-size: var(--font20Szie);
- }
- }
- .act {
- background-color: var(--mainColor);
- border-bottom: 0.1vw solid var(--fcColor);
- margin: 0 0 2vw 0;
- width: 96vw;
- padding: 2vw;
- .act_1 {
- font-size: var(--font14Size);
- font-weight: bold;
- text {
- color: #FFA500;
- }
- }
- .act_2 {
- .plusList {
- display: flex;
- margin: 2vw 0;
- .image {
- width: 12vw;
- height: 10vw;
- border: 1px solid #ffffff;
- }
- .name {
- width: 60vw;
- font-size: 12px;
- margin: 0 0 0 1vw;
- }
- .money {
- width: 25vw;
- .text_1 {
- font-size: 12px;
- color: #858585;
- text-decoration: line-through;
- }
- .text_2 {
- font-size: 14px;
- color: #ff0000;
- }
- }
- }
- }
- .bottom {
- text-align: center;
- }
- }
- }
- }
- .two {
- display: flex;
- justify-content: space-between;
- border-top: 0.1vw solid var(--fcColor);
- .two_1 {
- display: flex;
- align-items: center;
- padding: 0 2vw;
- font-size: var(--font16Size);
- view:last-child {
- margin: 0 0 0 2vw;
- color: var(--ff0Color);
- font-weight: bold;
- }
- }
- .two_2 {
- padding: 3vw 4vw;
- color: var(--mainColor);
- font-size: var(--font16Size);
- background-color: var(--ff0Color);
- }
- }
- }
- .scroll-view {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- .list-scroll-view {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- }
- }
- .popup {
- display: flex;
- flex-direction: column;
- height: 100vw;
- overflow-x: hidden;
- background-color: var(--f5Color);
- padding: 2vw;
- .list {
- .one {
- display: flex;
- justify-content: space-between;
- margin: 2vw 0 0 0;
- padding: 2vw;
- background-color: var(--mainColor);
- .name {
- font-size: var(--font16Size);
- }
- .address {
- font-size: var(--font14Size);
- }
- .iconfont {
- line-height: 15vw;
- font-size: var(--font20Szie);
- }
- }
- .two {
- display: flex;
- justify-content: space-between;
- border-top: 0.1vw solid var(--fcColor);
- padding: 2vw;
- background-color: var(--mainColor);
- font-size: var(--font14Size);
- .text {
- margin: 0 2vw 0 0;
- border: 0.1vw solid var(--fFB1Color);
- padding: 1vw;
- font-size: var(--font12Size);
- border-radius: 2vw;
- color: var(--fFB1Color);
- }
- }
- }
- }
- .act {
- background-color: var(--mainColor);
- width: 96vw;
- padding: 2vw;
- .act_1 {
- font-size: var(--font14Size);
- font-weight: bold;
- text {
- color: #FFA500;
- }
- }
- .act_2 {
- margin: 1vw 0;
- .actList {
- display: flex;
- align-items: center;
- margin: 2vw 0;
- border: 0.1vw solid var(--fcColor);
- border-radius: 5px;
- padding: 1vw 0;
- .image {
- width: 12vw;
- height: 10vw;
- border: 1px solid #ffffff;
- }
- .name {
- width: 52vw;
- font-size: 12px;
- margin: 0 0 0 1vw;
- .some {
- display: inline-block;
- white-space: nowrap;
- width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .money {
- width: 20vw;
- .text_1 {
- font-size: 12px;
- color: #858585;
- text-decoration: line-through;
- }
- .text_2 {
- font-size: 13px;
- color: #ff0000;
- }
- }
- .checkbox {
- width: 7vw;
- }
- }
- }
- .bottom {
- text-align: center;
- button:first-child {
- margin: 0 1vw 0 0;
- background-color: #ff0000;
- color: #ffffff;
- }
- }
- }
- </style>
|