|
@@ -0,0 +1,306 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <el-drawer v-model="visible" title="在线客服" size="800px" destroy-on-close :close-on-click-modal="false" :with-header="false">
|
|
|
|
|
+ <el-container class="flex-column">
|
|
|
|
|
+ <div class="drawer-detail-main">
|
|
|
|
|
+ <div class="drawer-detail-header">
|
|
|
|
|
+ <div class="drawer-detail-header-body">
|
|
|
|
|
+ <div class="drawer-detail-header-left">{{titleMap[mode]}}</div>
|
|
|
|
|
+ <div class="drawer-detail-header-left">
|
|
|
|
|
+ <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-main>
|
|
|
|
|
+ <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
|
|
|
|
|
+ <el-form-item label="计划名称" prop="plan_name">
|
|
|
|
|
+ <el-input v-model="formData.plan_name" clearable placeholder="请输入"></el-input>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="联系电话" prop="merchant_phone">
|
|
|
|
|
+ <el-input v-model="formData.merchant_phone" clearable placeholder="请输入"></el-input>
|
|
|
|
|
+ <div class="el-form-item-msg">必须是真实可用的手机号码,否则计划可能会不通过审核</div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <fieldset>
|
|
|
|
|
+ <legend><el-tag>推广团购商品</el-tag></legend>
|
|
|
|
|
+ <el-button type="primary" @click="addGoods" v-if="goodsData.length<50">添加团购商品({{ goodsData.length }}/50</el-button>
|
|
|
|
|
+ <div class="goods-live" v-if="goodsData.length>0">
|
|
|
|
|
+ <scTable ref="starTable" :data="goodsData" row-key="id" height="300" hidePagination style="width: 750px;">
|
|
|
|
|
+ <el-table-column label="商品ID" width="180" fixed="left" prop="goods_id">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ {{ scope.row.goods_id?scope.row.goods_id:'审核中' }}
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="商品类型" prop="types" width="100"></el-table-column>
|
|
|
|
|
+ <el-table-column label="商品信息" width="340" prop="name">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <div class="goods-img">
|
|
|
|
|
+ <div class="img">
|
|
|
|
|
+ <el-image
|
|
|
|
|
+ style="width: 54px; height: 54px"
|
|
|
|
|
+ :src="scope.row.image_list[0].url"
|
|
|
|
|
+ :zoom-rate="1.2"
|
|
|
|
|
+ :max-scale="7"
|
|
|
|
|
+ :min-scale="0.2"
|
|
|
|
|
+ :preview-src-list="[scope.row.image_list[0].url]"
|
|
|
|
|
+ preview-teleported
|
|
|
|
|
+ z-index="999"
|
|
|
|
|
+ fit="cover"></el-image>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="name">
|
|
|
|
|
+ <span>{{ scope.row.product_name }}</span>
|
|
|
|
|
+ <span class="dec">商品编码:{{ scope.row.product_id }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="价格" width="200" prop="id">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <div class="price">{{ $TOOL.moneyFormat(scope.row.price) }}</div>
|
|
|
|
|
+ <div class="goods-price">
|
|
|
|
|
+ <div class="del">{{ $TOOL.moneyFormat(scope.row.line_price) }}</div>
|
|
|
|
|
+ <span>{{ $TOOL.disFormat(scope.row.price,scope.row.line_price) }}折</span></div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="剩余库存" prop="category_id" width="120">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <span v-if="scope.row.limit_use_rule==1">{{ scope.row.use_num_per_consume }}</span>
|
|
|
|
|
+ <span v-else>不限</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="状态" prop="enable" width="120" align="center">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
|
|
|
|
|
+ <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 禁用</div>
|
|
|
|
|
+ <div class="status-danger" v-if="scope.row.status==0"><sc-status-indicator type="danger"></sc-status-indicator> 审核中</div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="操作" width="100" align="left" fixed="right">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <el-button-group>
|
|
|
|
|
+ <el-button type="danger" text size="small" @click="removeGoods(scope.$index)">删除</el-button>
|
|
|
|
|
+ </el-button-group>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </scTable>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </fieldset>
|
|
|
|
|
+ <fieldset>
|
|
|
|
|
+ <legend><el-tag>指定带货达人</el-tag></legend>
|
|
|
|
|
+ <el-button type="primary" @click="addStar" v-if="starData.length<200">添加达人({{ starData.length }}/200)</el-button>
|
|
|
|
|
+ <div class="goods-live" v-if="starData.length>0">
|
|
|
|
|
+ <scTable ref="starTable" :data="starData" row-key="id" height="300" hidePagination style="width: 750px;">
|
|
|
|
|
+ <el-table-column label="达人" width="340" prop="name" fixed="left">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <div class="goods-img">
|
|
|
|
|
+ <div class="img">
|
|
|
|
|
+ <el-image
|
|
|
|
|
+ style="width: 54px; height: 54px"
|
|
|
|
|
+ :src="scope.row.avatar_url"
|
|
|
|
|
+ :zoom-rate="1.2"
|
|
|
|
|
+ :max-scale="7"
|
|
|
|
|
+ :min-scale="0.2"
|
|
|
|
|
+ :preview-src-list="[scope.row.avatar_url]"
|
|
|
|
|
+ preview-teleported
|
|
|
|
|
+ z-index="999"
|
|
|
|
|
+ fit="cover"></el-image>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="name">
|
|
|
|
|
+ <span>{{ scope.row.show_nickname }}</span>
|
|
|
|
|
+ <span class="dec">抖音号:{{ scope.row.unique_id }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="粉丝数" width="200" prop="id">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <div class="price">{{ scope.row.fans_count }}</div>
|
|
|
|
|
+ <div class="goods-price">
|
|
|
|
|
+ <span v-for="value in scope.row.fans_tag_list">{{ value }}</span></div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="本地粉丝数" width="120" prop="id">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <div class="price">{{ scope.row.local_fans_count }}</div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="视频带货力" prop="category_id" width="120">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <span v-if="scope.row.talent_item_level_display">{{ scope.row.talent_item_level_display }}</span>
|
|
|
|
|
+ <span v-else>-</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="直播带货力" prop="talent_live_level_display" width="120">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <span v-if="scope.row.talent_live_level_display">{{ scope.row.talent_live_level_display }}</span>
|
|
|
|
|
+ <span v-else>-</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="内容力" prop="category_id" width="120">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <span v-if="scope.row.content_level_display">{{ scope.row.content_level_display }}</span>
|
|
|
|
|
+ <span v-else>-</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="信用分" prop="category_id" width="120">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <span v-if="scope.row.credit_score_display">{{ scope.row.credit_score_display }}</span>
|
|
|
|
|
+ <span v-else>-</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="视频榜" prop="category_id" width="120">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <span v-if="scope.row.rank_display">{{ scope.row.city_name }} 第{{ scope.row.rank_display }}名</span>
|
|
|
|
|
+ <span v-else>-</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="状态" prop="enable" width="120" align="center">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
|
|
|
|
|
+ <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 禁用</div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
|
|
|
|
|
+ <el-table-column label="操作" width="100" align="left" fixed="right">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <el-button-group>
|
|
|
|
|
+ <el-button type="danger" text size="small" @click="removeStar(scope.$index)">删除</el-button>
|
|
|
|
|
+ </el-button-group>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </scTable>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </fieldset>
|
|
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
|
|
+ <el-radio-group v-model="formData.status">
|
|
|
|
|
+ <el-radio-button :label="1">正常</el-radio-button>
|
|
|
|
|
+ <el-radio-button :label="2">禁用</el-radio-button>
|
|
|
|
|
+ </el-radio-group>
|
|
|
|
|
+ <div class="el-form-item-msg">禁用后的达人不可绑定直播计划</div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-main>
|
|
|
|
|
+ <el-footer>
|
|
|
|
|
+ <el-button @click="visible=false" size="large">取 消</el-button>
|
|
|
|
|
+ <el-button v-if="mode!='show'" size="large" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
|
|
|
+ </el-footer>
|
|
|
|
|
+ </el-container>
|
|
|
|
|
+ </el-drawer>
|
|
|
|
|
+ <starMain ref="starMain" :multiple="true" @success="handleStar"></starMain>
|
|
|
|
|
+ <goodsMain ref="goodsMain" :multiple="true" @success="handleGoods"></goodsMain>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import starMain from '@/views/merchant/components/star';
|
|
|
|
|
+import goodsMain from '@/views/merchant/components/goods';
|
|
|
|
|
+export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ starMain,goodsMain
|
|
|
|
|
+ },
|
|
|
|
|
+ data(){
|
|
|
|
|
+ return {
|
|
|
|
|
+ goodsData:[],
|
|
|
|
|
+ starData:[],
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ isSaveing: false,
|
|
|
|
|
+ mode:"add",
|
|
|
|
|
+ titleMap:{
|
|
|
|
|
+ add:"创建直播计划",
|
|
|
|
|
+ edit:"编辑直播计划"
|
|
|
|
|
+ },
|
|
|
|
|
+ visible:false,
|
|
|
|
|
+ formData:{
|
|
|
|
|
+ status:1
|
|
|
|
|
+ },
|
|
|
|
|
+ rules:{
|
|
|
|
|
+ status: [
|
|
|
|
|
+ {required: true, message: '请选择'}
|
|
|
|
|
+ ],
|
|
|
|
|
+ plan_name: [
|
|
|
|
|
+ {required: true, message: '请输入'}
|
|
|
|
|
+ ],
|
|
|
|
|
+ merchant_phone: [
|
|
|
|
|
+ {required: true, message: '请输入'}
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods:{
|
|
|
|
|
+ open(mode = 'add'){
|
|
|
|
|
+ this.mode = mode;
|
|
|
|
|
+ this.visible = true;
|
|
|
|
|
+ return this
|
|
|
|
|
+ },
|
|
|
|
|
+ //表单注入数据
|
|
|
|
|
+ setData(data){
|
|
|
|
|
+ this.formData = JSON.parse(JSON.stringify(data));
|
|
|
|
|
+ },
|
|
|
|
|
+ addGoods(){
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.$refs.goodsMain.open("add")
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ removeGoods(index){
|
|
|
|
|
+ this.goodsData.splice(index,1);
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.$refs.starTable.refresh()
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ addStar(){
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.$refs.starMain.open("add")
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ removeStar(index){
|
|
|
|
|
+ this.starData.splice(index,1);
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.$refs.starTable.refresh()
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ handleStar(data){
|
|
|
|
|
+ var newData = [];
|
|
|
|
|
+ data.forEach((value)=>{
|
|
|
|
|
+ const has = this.starData.some(item => item['id'] === value['id'])
|
|
|
|
|
+ if (!has) newData.push(value)
|
|
|
|
|
+ })
|
|
|
|
|
+ if (newData.length > 0) {
|
|
|
|
|
+ this.starData = this.starData.concat(newData);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ handleGoods(data){
|
|
|
|
|
+ var newData = [];
|
|
|
|
|
+ data.forEach((value)=>{
|
|
|
|
|
+ const has = this.goodsData.some(item => item['id'] === value['id'])
|
|
|
|
|
+ if (!has) newData.push(value)
|
|
|
|
|
+ })
|
|
|
|
|
+ if (newData.length > 0) {
|
|
|
|
|
+ this.goodsData = this.goodsData.concat(newData);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ async submit(){
|
|
|
|
|
+ var validate = await this.$refs.dialogForm.validate().catch(()=>{});
|
|
|
|
|
+ if(!validate){ return false }
|
|
|
|
|
+ if (this.goodsData.length == 0) return this.$message.error("请添加团购商品")
|
|
|
|
|
+ if (this.starData.length == 0) return this.$message.error("请添加达人")
|
|
|
|
|
+ this.isSaveing = true;
|
|
|
|
|
+ let submitData = JSON.parse(JSON.stringify(this.formData));
|
|
|
|
|
+ submitData.goods = JSON.stringify(this.goodsData);
|
|
|
|
|
+ submitData.star = JSON.stringify(this.starData);
|
|
|
|
|
+ var resp = await this.$API.merPlan.save.post(submitData);
|
|
|
|
|
+ this.isSaveing = false;
|
|
|
|
|
+ if (resp.code == 0) {
|
|
|
|
|
+ return this.$message.error(resp.msg);
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$message.success(resp.msg);
|
|
|
|
|
+ this.visible = false;
|
|
|
|
|
+ this.formData = {};
|
|
|
|
|
+ this.$emit("success");
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style>
|
|
|
|
|
+.text-center{text-align: center;}
|
|
|
|
|
+.goods-live{width: 100%;margin-top: 10px;}
|
|
|
|
|
+</style>
|